/**
 * royale-bonuslar.com — «BİNA & ƏHƏNG»
 *
 * THE PALETTE LAW, and the only reason this file is written the way it is. `bonuslar` is
 * not an offer (that word is `bonus`, and four siblings already spell it): it is the
 * PLURAL of one. What the domain adds to its own cluster is the suffix -lar, so what this
 * document is about is NUMBER — how many offers there really are once you stop counting
 * advertisements and start counting conditions. A palette for counting has to be a thing
 * you can count. Hence:
 *
 *   R1  GEOMETRIC. Sorted by WCAG contrast against the paper, every token is √2 times the
 *       token below it. The step is a RATIO, not a difference: lightness and chroma are
 *       consequences here, the sequence is the law.
 *   R2  DOUBLING. Therefore every token is EXACTLY twice the one two rungs down. Eight
 *       tokens that are really two interleaved doubling chains of four — 1,15 → 2,30 →
 *       4,60 → 9,20 and 1,63 → 3,25 → 6,51 → 13,01.
 *   R3  SEPARABLE. No two tokens are within 1,30× of each other, so nothing on the page
 *       can be mistaken for the thing beside it. You can always tell how many there are.
 *
 *   All eight sit on ONE hue, OKLCH 112°, spread 4,2°. Hue distinguishes nothing here.
 *
 *       kağız     L .972  C .0158  #F6F7EB   əhəng   — the paper; every ratio is vs this
 *       PİLLƏ 1   L .925  C .0227  #E6E8D7   toz     —  1,15 : 1  panel fill
 *       PİLLƏ 2   L .816  C .0274  #C3C5B1   qum     —  1,63 : 1  hairlines
 *       PİLLƏ 3   L .717  C .0475  #A4A785   çınqıl  —  2,30 : 1  heavy rules, NEVER text
 *       PİLLƏ 4   L .626  C .0609  #888C61   daş     —  3,25 : 1  LARGE text and icons only
 *       PİLLƏ 5   L .540  C .0810  #6E743A   kərpic  —  4,60 : 1  secondary prose
 *       PİLLƏ 6   L .460  C .0824  #5A5C1F   sütun   —  6,51 : 1  links, badges
 *       PİLLƏ 7   L .378  C .0801  #424607   divar   —  9,20 : 1  headings
 *       PİLLƏ 8   L .288  C .0566  #2A2E08   bina    — 13,01 : 1  body ink, the CTA fill
 *
 * `census_bnl.py` over the 94 themes on this machine: **0 hold R1**, **0 hold R2**, 1
 * holds R3 alone, 0 hold all three. 0 of the nine hexes appear anywhere in the network's
 * 1596 distinct tokens.
 *
 * THREE CONSEQUENCES THAT READ AS RULES WHILE EDITING THIS FILE.
 *   (a) There is no such thing as «a slightly darker grey» here. Every surface is one of
 *       nine values and the next one along is 41% louder, so a value invented to sit
 *       between two rungs is visible as a wrong note rather than as a nuance — which is
 *       the point: an uncountable palette cannot carry this page's argument.
 *   (b) The SPACING scale is the same sequence (8 · √2ⁿ = 8, 11, 16, 23, 32, 45, 64), so
 *       the rhythm of the page and its contrast are one ratio. Nothing is spaced «a bit
 *       more»; it is spaced one rung more.
 *   (c) The three statuses of the content law (AYRI / BİR / «—») are told apart by a WORD
 *       and by a COUNT OF RULES — two strokes, one stroke, a stroke that is not there —
 *       never by hue, because there is only one hue and it reports a token's rung, never
 *       a fact's status.
 *
 * Text ranks that are legal, measured against the two surfaces:
 *   bina   (8) on əhəng 13,01:1 · on toz 11,31:1
 *   divar  (7) on əhəng  9,20:1 · on toz  8,00:1
 *   sütun  (6) on əhəng  6,51:1 · on toz  5,66:1
 *   kərpic (5) on əhəng  4,60:1 · on toz  4,00:1  (body-size on the PAPER only)
 *   əhəng      on the bina CTA fill 13,01:1
 * daş (4) measures 3,25:1: it is legal for text at ≥24px and for icon strokes, and never
 * for a sentence. çınqıl (3) at 2,30:1 and qum (2) at 1,63:1 are rules and fills only.
 *
 * @package royale-bonuslar
 */

/* NO GRADIENTS ANYWHERE IN THIS FILE, and that is the law rather than a preference.
   A gradient between two rungs is a run of colours that are not rungs at all — the
   midpoint of any two tokens on this ramp lies OFF the sequence, because the mean of
   two terms of a geometric series is not a term of it. So a gradient here is not a soft edge; it is a stretch of
   pixels that break the law the whole document is built on. Translucent WASHES are the
   same problem written in rgba(), and a hex sweep cannot see them (the 79th's recorded
   trap), so both grounds are flat and there is no backdrop tint anywhere.
   THE ONE NAMED EXEMPTION: box-shadow, which is black at low alpha. A shadow darkens what
   is already there rather than painting a colour of its own, it is never text and never an
   edge the reader must resolve, and dxl/seocheck.py §15 strips shadow declarations before
   the sweep rather than whitelisting their hexes. */

/* ------------------------------------------------------------------ 1. tokens */

:root {
	/* the eight rungs, by name; a rule reads as the rung it is using */
	--bnl-eheng: #F6F7EB;
	--bnl-toz: #E6E8D7;
	--bnl-qum: #C3C5B1;
	--bnl-cinqil: #A4A785;
	--bnl-kerpic: #6E743A;
	--bnl-sutun: #5A5C1F;
	--bnl-divar: #424607;
	--bnl-bina: #2A2E08;

	/* every border in the file resolves to a RUNG, never to a new colour */
	--bnl-line: var(--bnl-qum);
	--bnl-line-lit: var(--bnl-cinqil);
	--bnl-focus: var(--bnl-divar);

	/* CÜT-PİLLƏ — eight bars on one baseline whose heights are the A-series (5, 7, 10,
	   14, 20, 28, 40, 56), so every bar is exactly twice the one two places to its left
	   and each is painted the palette rung it measures. Geometry in inc/brand.php. */
	--cp-bar: 5px;
	--cp-pitch: 8px;
	--cp-floor: 60px;
	--cp-span: 61px;

	--bnl-shell: 1120px;
	--bnl-measure: 700px;
	--bnl-radius: 3px;
	--bnl-tap: 44px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

[hidden] {
	/* an author `display` must not out-rank the attribute — recorded defect */
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* the sticky header must not cover an anchored section heading */
	scroll-padding-top: 88px;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--bnl-eheng);
	color: var(--bnl-bina);
	font-variant-numeric: lining-nums;
	overflow-x: hidden;
	margin: 0;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------- 2. skip + focus */

.bnl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--bnl-bina);
	color: var(--bnl-eheng);
	padding: 12px 18px;
	font-weight: 700;
	text-decoration: none;
}

.bnl-skip-link:focus,
.bnl-skip-link:focus-visible {
	left: 12px;
	top: 12px;
}

/* Chrome computes `outline-width: medium` as 3px even with no outline declared, so a
   ring that only sets width is invisible to a script-driven gate — and to a reader on
   a dark ground. Set STYLE, COLOUR and OFFSET, and set both pseudo-classes, because
   :focus-visible does not match a programmatic .focus(). */
a:focus,
button:focus,
summary:focus,
[tabindex]:focus,
input:focus,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible {
	outline: 3px solid var(--bnl-focus);
	outline-offset: 3px;
	border-radius: 1px;
}

/* --------------------------------------------------------------- 3. type scale */

.bnl-main {
	display: block;
}

.bnl-eyebrow {
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bnl-kerpic);
	margin: 0 0 10px;
}

.bnl-lede {
	font-size: clamp(18px, 2.1vw, 21px);
	line-height: 1.62;
	color: var(--bnl-bina);
	max-width: 62ch;
}

.bnl-note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--bnl-kerpic);
}

/* the FIGURES face — digits only, never a word. CONDENSED, not monospaced, and that is
   this build's one typographic argument: sixteen free monos have now been auditioned
   across two rows and every one of them ships a latin-ext file claiming U+0259 with no
   glyph behind it, so the mono axis is closed for Azerbaijani. What a value column
   actually needs is equal digit WIDTH, which `tabular-nums` gives in any face, and a
   voice visibly different from the prose, which Archivo Narrow gives at a narrower
   set-width than the body — and with a schwa that exists. probe.js §4 fails on any
   .bnl-fig span whose text holds a letter, which keeps the question out of the build. */
.bnl-fig {
	font-family: "Spline Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* NOT the figures face: a code fragment («rel="nofollow sponsored"», a blank licence line)
   is letters, and the figures face is reserved for digits. It gets the system monospace
   stack, which is honest about being a different thing. */
.bnl-code {
	font-family: ui-monospace, Consolas, "Courier New", monospace;
	font-size: .93em;
	letter-spacing: -0.01em;
}

.bnl-rule {
	height: 1px;
	background: var(--bnl-line);
	border: 0;
	margin: 0;
}

/* ------------------------------------------------------------------ 4. buttons */

.bnl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--bnl-tap);
	padding: 14px 30px;
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 0;
	border-radius: var(--bnl-radius);
	/* buxar (8), not şeh (6): under R2 the loudest colour available is also the palest,
	   so the primary control is drawn in VALUE — 15.68:1 on the ground. */
	background: var(--bnl-bina);
	color: var(--bnl-eheng);
	cursor: pointer;
	transition: filter .18s ease, transform .18s ease;
	/* never `width: 100%` on a padded control — it scrolls a 390px phone sideways */
	max-width: 100%;
}

.bnl-btn:hover {
	background: var(--bnl-divar);
	color: var(--bnl-eheng);
}

.bnl-btn:active {
	transform: translateY(1px);
}

.bnl-btn[aria-disabled="true"],
.bnl-btn:disabled {
	background: var(--bnl-toz);
	color: var(--bnl-kerpic);
	cursor: not-allowed;
	filter: none;
}

.bnl-btn--ghost {
	background: transparent;
	border: 1px solid var(--bnl-line-lit);
	color: var(--bnl-bina);
	font-weight: 600;
}

.bnl-btn--ghost:hover {
	background: var(--bnl-toz);
	filter: none;
}

.bnl-btn--small {
	min-height: var(--bnl-tap);
	padding: 11px 18px;
	font-size: 14px;
}

/* ------------------------------------------------------------------- 5. header */

.bnl-head {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--bnl-eheng);
	border-bottom: 1px solid var(--bnl-line);
}

/* `wp:shortcode` renders through wpautop, so each of the three shortcodes in the header
   template part arrives wrapped in a <p>. Those wrappers become the flex items, they carry
   paragraph margins, and the masthead measured 90px for a row of 44px controls that were not
   even vertically centred. `display: contents` hands flex layout the real elements. */
.bnl-head__in > p {
	display: contents;
}

.bnl-head__in {
	max-width: var(--bnl-shell);
	margin: 0 auto;
	padding: 11px 20px;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.bnl-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: var(--bnl-bina);
	min-height: var(--bnl-tap);
}

.bnl-brand:hover {
	color: var(--bnl-divar);
}

.bnl-wordmark {
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1;
	white-space: nowrap;
}

/* The nav markup comes from inc/chrome.php: TWO renderings of the same five-item tree —
   an inline <ul class="bnl-nav__list"> from 861px up, and a <details> disclosure below
   that, which gives keyboard operation and an expanded state without a line of JS. */
.bnl-nav {
	display: flex;
	align-items: center;
	margin-left: auto;
	flex-wrap: wrap;
}

.bnl-nav__list {
	display: none;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnl-nav__list li,
.bnl-nav__panel li {
	margin: 0;
}

/* a dark region declares the ink for EVERY link inside it, not only for the ones that
   happen to sit in a list — a <p><a> otherwise falls through to elements.link */
.bnl-nav a,
.bnl-nav a:visited {
	display: inline-flex;
	align-items: center;
	min-height: var(--bnl-tap);
	padding: 0 11px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--bnl-bina);
	text-decoration: none;
	border-radius: var(--bnl-radius);
}

.bnl-nav a:hover {
	background: var(--bnl-toz);
	color: var(--bnl-divar);
}

.bnl-nav a[aria-current="page"] {
	color: var(--bnl-divar);
	box-shadow: inset 0 -2px 0 var(--bnl-sutun);
}

.bnl-nav__mobile {
	position: relative;
}

.bnl-nav__mobile > summary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--bnl-tap);
	padding: 0 13px;
	list-style: none;
	cursor: pointer;
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bnl-bina);
	border: 1px solid var(--bnl-line-lit);
}

.bnl-nav__mobile > summary::-webkit-details-marker {
	display: none;
}

.bnl-nav__bars {
	width: 15px;
	height: 9px;
	flex: 0 0 auto;
	border-top: 2px solid var(--bnl-bina);
	border-bottom: 2px solid var(--bnl-bina);
}

.bnl-nav__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 7px);
	z-index: 70;
	width: min(88vw, 340px);
	list-style: none;
	margin: 0;
	padding: 6px;
	background: var(--bnl-toz);
	border: 1px solid var(--bnl-cinqil);
	box-shadow: 0 0 0 1px var(--bnl-qum), 0 18px 40px rgba(42, 46, 8, .16);
}

.bnl-nav__panel a,
.bnl-nav__panel a:visited {
	display: flex;
	align-items: center;
	min-height: var(--bnl-tap);
	padding: 9px 11px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--bnl-bina);
}

.bnl-head__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bnl-tap);
	margin-left: 8px;
	padding: 11px 21px;
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 0;
	border-radius: var(--bnl-radius);
	background: var(--bnl-sutun);
	/* şeh (6), not buxar (8): the header control is SECONDARY to the hero's, and under
	   this palette a hierarchy of controls can only be a hierarchy of rungs — 7.79:1
	   here against 15.68:1 there. Its label is the GROUND, never the body ink. */
	color: var(--bnl-eheng);
	transition: background-color .18s ease;
}

.bnl-head__cta:hover,
.bnl-head__cta:visited {
	color: var(--bnl-eheng);
}

.bnl-head__cta:hover {
	background: var(--bnl-divar);
}

@media (min-width: 861px) {
	.bnl-nav__list {
		display: flex;
	}

	.bnl-nav__mobile {
		display: none;
	}
}

/* ---------------------------------------------------------------- 6. trust bar */

.bnl-trust {
	background: var(--bnl-eheng);
	border-bottom: 1px solid var(--bnl-line);
}

.bnl-trust__in {
	max-width: var(--bnl-shell);
	margin: 0 auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	gap: 10px 22px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--bnl-kerpic);
}

.bnl-trust__in strong {
	color: var(--bnl-bina);
	font-weight: 600;
}

.bnl-trust span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* the trust strip is the page's FIRST instance of the content law: every line in it is
   checkable from outside an account, so the strip carries one XARİC lead and the four
   lines inherit it. The lead is the tag's own border weight (1px = XARİC), not a colour. */
.bnl-trust__lead {
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--bnl-kerpic);
	border: 1px solid var(--bnl-cinqil);
	padding: 2px 7px;
	flex: 0 0 auto;
}

.bnl-trust__lead::before {
	content: none;
}

.bnl-trust span::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--bnl-kerpic);
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------- 7. shell */

.bnl-sec {
	max-width: var(--bnl-shell);
	margin: 0 auto;
	padding: clamp(38px, 5vw, 66px) 0 0;
	scroll-margin-top: 92px;
}

.bnl-sec > * {
	max-width: var(--bnl-measure);
}

.bnl-sec--wide > * {
	max-width: none;
}

.bnl-sec h2 {
	margin: 0 0 14px;
}

.bnl-sec h3 {
	margin: 26px 0 8px;
}

.bnl-sec p {
	margin: 0 0 16px;
}

/* --------------------------------------------------------------------- 8. hero */

.bnl-hero {
	position: relative;
	background: var(--bnl-eheng);
	border-bottom: 1px solid var(--bnl-line);
	/* THE BAND IS FULL-BLEED and the centring happens on `__in`. Without this the hero is a
	   direct child of a CONSTRAINED wp:post-content and inherits contentSize (716px), so at
	   1440 it began 216px further in than every section beneath it while looking correct at
	   every width below 1150. Measured, not eyeballed — see measure_dxl.js. */
	max-width: none;
	width: 100%;
}

.bnl-hero__in {
	max-width: var(--bnl-shell);
	margin: 0 auto;
	/* ZERO horizontal padding, and that is the fix rather than the taste. The hero band is
	   full-bleed and re-centres here, but the SECTIONS below it centre inside the root
	   padding theme.json already applies — so a second 20px here put the H1, the lede and
	   the CTA exactly 20px right of every H2 and of the anchor nav, at every width. Small
	   enough to look like kerning in a screenshot, and measured by measure_edr.js: at 1440
	   h1.x was 160 against sec1h2.x 140. Align the two by removing the inset, not by adding
	   one to the sections — the sections are the ones agreeing with the page. */
	padding: clamp(34px, 5vw, 62px) 0 clamp(30px, 4vw, 46px);
}

.bnl-hero h1 {
	margin: 0 0 16px;
	max-width: 24ch;
}

.bnl-hero__cta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 26px 0 10px;
}

.bnl-hero__note {
	font-size: 13.5px;
	color: var(--bnl-kerpic);
	margin: 0;
}

.bnl-hero__stamp {
	position: absolute;
	right: clamp(14px, 4vw, 54px);
	bottom: 22px;
	opacity: .5;
	pointer-events: none;
}

/* ---------------------------------------------------------------------- 9. TOC */

.bnl-toc {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.bnl-toc li {
	margin: 0;
}

.bnl-toc a,
.bnl-toc a:visited {
	display: inline-flex;
	align-items: center;
	min-height: var(--bnl-tap);
	padding: 0 15px;
	border: 1px solid var(--bnl-line-lit);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bnl-bina);
	text-decoration: none;
}

.bnl-toc a:hover {
	background: var(--bnl-toz);
	border-color: var(--bnl-divar);
	color: var(--bnl-divar);
}

.bnl-toc__n {
	font-family: "Andada Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
	font-size: 12px;
	color: var(--bnl-kerpic);
	margin-right: 8px;
}

/* ------------------------------------------------------------------ 10. plates */

.bnl-plate {
	background: var(--bnl-toz);
	border: 1px solid var(--bnl-line-lit);
	padding: clamp(18px, 2.4vw, 26px);
}

.bnl-plate--ennab {
	background: var(--bnl-qum);
}

/* THE PLATE RULE. A `toz` panel sits exactly one rung above the paper (×1,15), so an ink
   that clears 4,5:1 on the paper does not automatically clear it here — `kerpic` measures
   4,60:1 on the paper and 4,00:1 on this. Stepping the ink UP one rung multiplies it by
   √2 = 1,414, which more than repays the 1,15 the panel costs. So on a plate every text
   rung steps up by one and the lowest legal body ink is `sutun` (5,66:1). bnl/identity.py
   checks the paper and the plate against their own floors, and asserts that the rung below
   this one really does fail here — a rule nothing can violate is decoration. */
.bnl-plate .bnl-note,
.bnl-plate--ennab .bnl-note,
.bnl-plate small,
.bnl-plate figcaption {
	color: var(--bnl-sutun);
}

.bnl-plate--quiet {
	background: transparent;
	border-style: dashed;
}

.bnl-plate p:last-child {
	margin-bottom: 0;
}

.bnl-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
	max-width: none;
}

@media (min-width: 760px) {
	.bnl-grid--2 {
		grid-template-columns: 1fr 1fr;
	}

	.bnl-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------- 11. the DESCENT TAG (the content law) */

/* Three tags. AYRI = a separate offer: its own trigger, its own conditions, and you can
   hold it while you hold another. BİR = advertised as several, but one offer restated —
   one wallet, one wagering requirement, one expiry. «—» = we publish nothing, because
   nothing we can point to settles whether it is one or many.
   All three are drawn in ONE ink and told apart by a COUNT OF STROKES beneath the word:
   `double` is literally two rules, `solid` is one, `dotted` is a rule that is not there.
   That survives greyscale, survives a border-colour override, and — the point of this
   whole document — is itself a count, which is the thing the page is about. The status is
   a WORD; if it were a hue, removing the hue would remove the fact, and this palette has
   only one hue anyway.
   Every tag is `bina` at every size: the donor painted its unknown-status tag in the
   secondary ink, which measures 4,60 : 1 on the paper but 4,00 : 1 on a `toz` plate — and
   a tag is almost always on a plate, at 11,5px. */
.bnl-tag {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 2px 2px 3px;
	color: var(--bnl-bina);
	background: transparent;
	border: 0;
	border-bottom: 4px double var(--bnl-cinqil);
}

.bnl-tag--ayri {
	border-bottom: 4px double var(--bnl-sutun);
}

.bnl-tag--bir {
	border-bottom: 2px solid var(--bnl-sutun);
}

.bnl-tag--yox {
	border-bottom: 2px dotted var(--bnl-cinqil);
}

.bnl-tagkey {
	display: flex;
	gap: 10px 18px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	max-width: none;
}

.bnl-tagkey li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--bnl-kerpic);
	margin: 0;
}

/* -------------------------------------------------------- 12. the descent table */

.bnl-tablewrap {
	/* wide content scrolls inside its own box; the page body never does */
	overflow-x: auto;
	max-width: none;
	border: 1px solid var(--bnl-line-lit);
	background: var(--bnl-toz);
}

.bnl-sayim {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 15px;
	margin: 0;
}

/* THE PLATE RULE, applied. The table sits on a `toz` panel, so every ink inside it steps up
   one rung: `kerpic` measures 4,60:1 on the paper but 4,00:1 here, and the caption, the
   column heads and the reason column are exactly the three places a table hides its
   secondary voice. `sutun` measures 5,66:1 on this ground. The rendered probe measured the
   4,00 and named all thirteen cells; nothing in the source could have. */
.bnl-sayim caption {
	caption-side: top;
	text-align: left;
	padding: 14px 16px 0;
	font-size: 13.5px;
	color: var(--bnl-sutun);
	/* a caption that shrink-wraps to one narrow column is a recorded defect */
	width: 100%;
}

.bnl-sayim th,
.bnl-sayim td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--bnl-line);
	vertical-align: top;
}

.bnl-sayim thead th {
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bnl-sutun);
	border-bottom-color: var(--bnl-line-lit);
	/* no nowrap: it adds measure the table does not need */
}

.bnl-sayim tbody th {
	font-weight: 600;
	color: var(--bnl-bina);
}

.bnl-sayim td {
	color: var(--bnl-bina);
}

.bnl-sayim td.bnl-sayim__why {
	color: var(--bnl-sutun);
	font-size: 14px;
}

.bnl-sayim tbody tr:last-child th,
.bnl-sayim tbody tr:last-child td {
	border-bottom: 0;
}

/* --------------------------------------------------------------------- 13. steps */

.bnl-steps {
	list-style: none;
	counter-reset: oyustep;
	margin: 0;
	padding: 0;
	max-width: none;
	display: grid;
	gap: 12px;
}

.bnl-step {
	counter-increment: oyustep;
	position: relative;
	background: var(--bnl-toz);
	border: 1px solid var(--bnl-line-lit);
	border-left: 3px solid var(--bnl-cinqil);
	padding: 16px 18px 16px 58px;
	margin: 0;
}

.bnl-step::before {
	content: counter(oyustep);
	position: absolute;
	left: 18px;
	top: 15px;
	font-family: "Andada Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--bnl-kerpic);
}

/* same contract as .bnl-faq__answer: inc/schema.php reads the HowTo steps off these
   two class names (any tag), so they are vocabulary the graph depends on */
.bnl-step__title {
	display: block;
	margin: 0 0 5px;
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.34;
	color: var(--bnl-bina);
}

.bnl-step__text {
	display: block;
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bnl-kerpic);
}

.bnl-step .bnl-tag {
	margin-top: 9px;
}

/* --------------------------------------------------- 13b. the device cards (#cihaz) */

.bnl-zencir {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
	max-width: none;
}

@media (min-width: 900px) {
	.bnl-zencir {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bnl-halqa {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.bnl-halqa__title {
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bnl-divar);
	margin: 0;
}

.bnl-halqa__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.66;
	color: var(--bnl-bina);
}

/* --------------------------------------------------------------------- 14. offer */

.bnl-offer {
	background: var(--bnl-qum);
	border: 1px solid var(--bnl-sutun);
	padding: clamp(20px, 2.8vw, 30px);
}

.bnl-offer h2,
.bnl-offer h3 {
	margin-top: 0;
}

/* the poster figure is a MIXED line — «250 FS + 550 AZN» — so the line is set in the display
   face and only the numerals inside it are marked as figures (.bnl-fig). Setting the
   whole paragraph in the figures face put «FS» and «AZN» in it too. */
.bnl-offer__figure {
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: clamp(26px, 4.4vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--bnl-divar);
	margin: 0 0 6px;
	font-variant-numeric: lining-nums tabular-nums;
}

.bnl-chips {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	max-width: none;
}

.bnl-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	padding: 7px 12px;
	border: 1px solid var(--bnl-cinqil);
	color: var(--bnl-bina);
	margin: 0;
}

/* ------------------------------------------------------------------ 15. payments */

.bnl-pay {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	max-width: none;
}

.bnl-payrail {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--bnl-tap);
	padding: 0 15px;
	border: 1px solid var(--bnl-line-lit);
	background: var(--bnl-toz);
	font-size: 14px;
	font-weight: 600;
	color: var(--bnl-bina);
	margin: 0;
}

.bnl-payrail svg {
	flex: 0 0 auto;
}

/* ----------------------------------------------------------------------- 16. FAQ */

.bnl-faq {
	border-top: 1px solid var(--bnl-line-lit);
	max-width: var(--bnl-measure);
}

.bnl-faq details {
	border-bottom: 1px solid var(--bnl-line-lit);
}

.bnl-faq summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--bnl-tap);
	padding: 14px 40px 14px 0;
	position: relative;
	cursor: pointer;
	list-style: none;
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--bnl-bina);
}

.bnl-faq summary::-webkit-details-marker {
	display: none;
}

.bnl-faq summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border-right: 2px solid var(--bnl-kerpic);
	border-bottom: 2px solid var(--bnl-kerpic);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.bnl-faq details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.bnl-faq summary:hover {
	color: var(--bnl-divar);
}

/* the class name is what inc/schema.php's FAQPage parser keys on — renaming it
   silently empties the graph's FAQPage node while every gate still counts 1 JSON-LD
   block, so it is fixed vocabulary, not a styling choice */
.bnl-faq__answer {
	padding: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--bnl-bina);
	margin: 0;
}

.bnl-faq__answer a,
.bnl-faq__answer a:visited {
	color: var(--bnl-divar);
}

/* --------------------------------------------------------------------- 17. prose */

.bnl-prose {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.78;
	color: var(--bnl-bina);
}

.bnl-prose p {
	margin: 0 0 15px;
}

.bnl-prose a,
.bnl-prose a:visited {
	color: var(--bnl-divar);
}

/* -------------------------------------------------------------------- 18. footer */

.bnl-foot {
	margin-top: clamp(48px, 6vw, 78px);
	background: var(--bnl-eheng);
	border-top: 1px solid var(--bnl-line-lit);
	padding: clamp(30px, 4vw, 48px) 0 96px;
}

.bnl-foot__in {
	max-width: var(--bnl-shell);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	gap: 26px;
}

@media (min-width: 860px) {
	.bnl-foot__in--pair {
		grid-template-columns: 1.15fr 1fr;
		gap: 40px;
	}
}

.bnl-foot__jump {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/* ZERO row-gap on purpose: every item is an `.bnl-foot__link`, which owes 44px of tap
	   height, so a wrapped row is already 44px tall and any row-gap on top of that reads as
	   a hole rather than as spacing. The column gap is the only one this row needs. */
	gap: 0 18px;
	align-items: center;
}

.bnl-foot h2,
.bnl-foot h3 {
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bnl-kerpic);
	margin: 0 0 12px;
}

.bnl-foot p,
.bnl-foot li {
	font-size: 14px;
	line-height: 1.68;
	color: var(--bnl-bina);
	margin: 0 0 9px;
}

/* the jump row is a FLEX row and owns its own gaps; `.bnl-foot li` above adds a 9px bottom
   margin that lands on top of the row-gap and opens a hole when the row wraps. Declared
   after that rule on purpose — same specificity, so source order is the whole fix. */
.bnl-foot__jump li {
	margin: 0;
}

/* EVERY link in the footer, not only the ones inside a list */
.bnl-foot a,
.bnl-foot a:visited,
.bnl-foot p a,
.bnl-foot li a {
	color: var(--bnl-bina);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bnl-foot a:hover {
	color: var(--bnl-divar);
}

/* a link with padding owes 44px; and it must clear it at EVERY width, including the
   ones where its label wraps to a second line */
.bnl-foot__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--bnl-tap);
}

.bnl-foot ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* the LABEL is prose and the DATE is a figure, so only the date gets the figures face —
   `.bnl-lastmod` used to set the whole line in the figures face, so «Son yenilənmə:» was
   drawn by a face this build reserves for digits. probe.js §4 is what found it. */
.bnl-lastmod {
	font-size: 12.5px;
	color: var(--bnl-kerpic);
}

.bnl-lastmod time {
	font-family: "Andada Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
	font-variant-numeric: lining-nums tabular-nums;
}

/* ------------------------------------------- 19-20. the chrome's own components

   The age gate, the cookie card and the sticky mobile CTA are printed by inc/chrome.php
   together with their CSS, inline in wp_footer. They are deliberately NOT described here:
   two stylesheets for one component is how a CTA hover state ends up near-white ink on a
   near-white fill. What this file still owes them is the ROOM they occupy — the chrome
   declares --bnl-sticky-h and re-measures it at runtime, and the footer reserves it. */

@media (max-width: 899px) {
	.bnl-foot {
		padding-bottom: calc(var(--bnl-sticky-h, 73px) + 24px);
	}
}

/* ------------------------------------------------------------------- 21. skeleton */

.bnl-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--bnl-toz);
	min-height: 92px;
}

.bnl-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(195, 197, 177, 0) 0%, rgba(195, 197, 177, .55) 50%, rgba(195, 197, 177, 0) 100%);
	transform: translateX(-100%);
	animation: bnl-sweep 1.5s infinite;
}

@keyframes bnl-sweep {
	100% {
		transform: translateX(100%);
	}
}

/* ---------------------------------------------------- 22. the mark — CÜT-PİLLƏ */

.bnl-pille {
	display: inline-block;
	line-height: 0;
	flex: 0 0 auto;
}

/* --------------------------------------------------------- 23. blocks + a11y prefs */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--bnl-line);
	opacity: 1;
	margin-block: clamp(30px, 4vw, 48px);
}

.wp-block-image img {
	display: block;
}

::selection {
	background: var(--bnl-sutun);
	color: var(--bnl-eheng);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.bnl-skeleton::after {
		display: none;
	}
}

/* ------------------------------------------------------------- 24. small screens */

@media (max-width: 759px) {
	/* THE HEADER MUST BE ONE ROW, and this is a measured requirement rather than a taste.
	   Left alone, brand + «Menyu» + «Giriş» wrapped onto THREE rows: the masthead measured
	   177px, the trust strip another 107px, and the primary CTA — the only thing this page
	   exists to hand the reader — landed at y=844 on a 390x844 phone, i.e. exactly at the
	   fold. A T5 landing page whose CTA is below the fold has no argument left. */
	.bnl-head__in {
		padding: 8px 16px;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.bnl-brand {
		gap: 8px;
		min-width: 0;
	}

	.bnl-wordmark {
		font-size: 16px;
	}

	.bnl-nav__mobile > summary {
		padding: 0 10px;
		font-size: 13.5px;
		gap: 7px;
	}

	.bnl-head__cta {
		margin-left: 6px;
		padding: 11px 15px;
		font-size: 14px;
	}

	/* the trust strip carries four claims and wrapped to four lines; the parenthetical is the
	   only part of it that is an aside rather than a claim, so that is what goes */
	.bnl-trust__in {
		padding: 6px 16px;
		gap: 4px 11px;
		font-size: 11.5px;
	}

	/* the strip's four claims wrapped to three rows and cost 90px of a 844px fold. The lead
	   keeps its label but loses the tracking that made it a third of a row on its own. */
	.bnl-trust__lead {
		letter-spacing: 0.06em;
		padding: 1px 5px;
	}

	.bnl-trust span::before {
		width: 4px;
		height: 4px;
	}

	.bnl-trust em {
		display: none;
	}

	.bnl-hero__in {
		padding-top: 22px;
		padding-bottom: 26px;
	}

	.bnl-hero__stamp {
		display: none;
	}

	.bnl-step {
		padding: 15px 15px 15px 52px;
	}

	.bnl-sec {
		padding-top: 34px;
	}

	.bnl-nav {
		margin-left: auto;
	}
}


/* ---------------------------------------------------------------------------------------
   §14  THE FOURTH RUNG — `daş`, 3,25 : 1.
   The donor's eight tokens have no counterpart for it, because a reciprocal ramp never
   produced a step exactly at the large-text floor; a geometric one does. So `daş` is the
   only ink in this theme with a SIZE condition attached to it, and the condition is
   written into the selector rather than left to a reviewer: it may set the section
   numerals and the hero figure, which ship at 24px and above, and nothing else.
   bnl/probe.js §12 fails any painted text under 24px in this colour.
--------------------------------------------------------------------------------------- */
.bnl-fig--big,
.bnl-toc__n,
.bnl-count__n {
	color: var(--bnl-das);
	font-family: "Spline Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------------------
   §15  THE COUNT LINE — the page's own tally, printed where the reader can check it.
   The thesis of this document is a NUMBER, so the number is set in the figures face, on
   the paper, at the one rung that is allowed to be large and quiet.
--------------------------------------------------------------------------------------- */
.bnl-count {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	align-items: baseline;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40) 0 0;
	border-top: 2px solid var(--bnl-cinqil);
}

.bnl-count__cell {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
}

.bnl-count__label {
	font-family: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bnl-divar);
}

/* ---------------------------------------------------------------------------------------
   §16  THE LADDER — the palette, printed as itself.
   Eight rows, each painted its own rung, each stating the ratio it is. A reader who
   doubts the claim can measure the page they are reading it on. The bar widths are the
   MARK's heights (5, 7, 10, 14, 20, 28, 40, 56 of 56), so the ladder and the logo are the
   same eight numbers seen from two directions.
--------------------------------------------------------------------------------------- */
.bnl-ladder {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.bnl-ladder li {
	display: grid;
	grid-template-columns: 7.5em 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	font-family: "Spline Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 13.5px;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--bnl-kerpic);
	white-space: nowrap;
}

.bnl-ladder__bar {
	display: block;
	height: 14px;
	border-radius: 1px;
}

@media (max-width: 600px) {
	.bnl-ladder li {
		grid-template-columns: 6.5em 1fr;
	}
}