/* Dilse Döviz website — "Filiz Karbon" design system (docs/DESIGN.md v2.0, owner-chosen candidate "fintech-dark").
   Order: 1. tokens + base (DESIGN §10.1, verbatim)  1b. helper tokens  2. functional hooks (DESIGN §9, verbatim)
          3. layout  4. components  5. privacy page  6. responsive  7. RTL / Arabic.
   Light on :root, dark (the showcase) via prefers-color-scheme; the black stage (.on-hero) is dark in both themes.
   No inline styles anywhere (strict CSP): runtime values arrive through custom properties that
   app.js sets with style.setProperty (--cerez-h, --duyuru-ratio).
   backdrop-filter only on .glass, the header and the quickbar (DESIGN §10.6). */

/* ============================================================ 1. DESIGN §10.1 (verbatim) */
:root{
  color-scheme: light;
  --bg:#F4F4F5; --surface:#FFFFFF; --surface-2:#EBEBED; --surface-3:#E1E1E4;
  --ink:#0A0A0A; --ink-2:#3A3A3F; --muted:#63636A; --line:#D9D9DE;
  --brand:#446454; --brand-strong:#324A3E; --brand-soft:#D0D8D4; --brand-ink:#FFFFFF;
  --accent:#C6F135; --accent-soft:#EEFBC4; --on-accent:#0A0A0A;
  --hero-bg:#0A0A0A; --hero-ink:#FFFFFF; --hero-muted:#A1A1A6;
  --up:#08722F; --up-bg:#DCF6E4; --down:#C0242F; --down-bg:#FDE4E5; --warn:#8A4B00; --warn-bg:#FFEBD1; --focus:#2F5BFF;
  --glass:rgb(255 255 255 / .05); --glass-line:rgb(255 255 255 / .10); --sell-wash:rgb(208 216 212 / .55);
  --aurora:radial-gradient(60% 80% at 70% 110%,rgb(68 100 84 / .14),transparent 70%),radial-gradient(30% 40% at 95% 0%,rgb(212 255 63 / .07),transparent 70%);
  --asset-0:#5A8570; --asset-1:#6A9A00; --asset-2:#2F6BFF; --asset-3:#E5484D; --asset-4:#8B5CF6;
  --asset-5:#D2660A; --asset-6:#0891B2; --asset-7:#D6407F; --asset-8:#6B6B72; --asset-9:#A55C3E;
  --shadow-1:0 1px 2px rgb(10 10 10 / .05),0 6px 16px -6px rgb(10 10 10 / .10);
  --shadow-2:0 2px 6px rgb(10 10 10 / .06),0 24px 48px -16px rgb(10 10 10 / .28);
  --skel-sheen:rgb(255 255 255 / .55);
  --radius:22px; --radius-sm:12px; --radius-pill:999px; --radius-leaf:24px 8px 24px 8px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:56px; --space-10:80px;
  --header-h:72px; --quickbar-h:64px;
  --font-display:"Unbounded","Nunito",system-ui,sans-serif;
  --font-sans:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --flash-ms:1600ms;
}
@media (max-width:860px){ :root{ --header-h:60px; } }

/* DARK (primary look) — the web follows the system; the panel can force either theme with data-theme */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme: dark;
  --bg:#000000; --surface:#121212; --surface-2:#1C1C1E; --surface-3:#2A2A2E;
  --ink:#F5F5F7; --ink-2:#C7C7CC; --muted:#98989F; --line:#3A3A3F;
  --brand:#446454; --brand-strong:#8FA298; --brand-soft:#111915; --brand-ink:#050807;
  --accent:#D4FF3F; --accent-soft:#2C330A;
  --hero-bg:#0A0A0A; --hero-ink:#FFFFFF; --hero-muted:#A1A1A6;
  --up:#4ADE80; --up-bg:#0D2818; --down:#FF6B6B; --down-bg:#331213; --warn:#FFA94D; --warn-bg:#2E1D08; --focus:#8EA8FF;
  --sell-wash:rgb(17 25 21 / .70);
  --asset-0:#446454; --asset-1:#C6F135; --asset-2:#6E9BFF; --asset-3:#FF7A82; --asset-4:#A88BFA;
  --asset-5:#FF9F43; --asset-6:#38C8E8; --asset-7:#F279B6; --asset-8:#A1A1AA; --asset-9:#D08A6A;
  --shadow-1:inset 0 1px 0 rgb(255 255 255 / .06);
  --shadow-2:inset 0 1px 0 rgb(255 255 255 / .08),0 0 0 1px #3A3A3F,0 24px 48px -12px rgb(0 0 0 / .9);
  --skel-sheen:rgb(255 255 255 / .06);
}}
:root[data-theme="dark"]{          /* panel toggle = Koyu (identical values; harmless on the web, which never sets data-theme) */
  color-scheme: dark;
  --bg:#000000; --surface:#121212; --surface-2:#1C1C1E; --surface-3:#2A2A2E;
  --ink:#F5F5F7; --ink-2:#C7C7CC; --muted:#98989F; --line:#3A3A3F;
  --brand:#446454; --brand-strong:#8FA298; --brand-soft:#111915; --brand-ink:#050807;
  --accent:#D4FF3F; --accent-soft:#2C330A;
  --hero-bg:#0A0A0A; --hero-ink:#FFFFFF; --hero-muted:#A1A1A6;
  --up:#4ADE80; --up-bg:#0D2818; --down:#FF6B6B; --down-bg:#331213; --warn:#FFA94D; --warn-bg:#2E1D08; --focus:#8EA8FF;
  --sell-wash:rgb(17 25 21 / .70);
  --asset-0:#446454; --asset-1:#C6F135; --asset-2:#6E9BFF; --asset-3:#FF7A82; --asset-4:#A88BFA;
  --asset-5:#FF9F43; --asset-6:#38C8E8; --asset-7:#F279B6; --asset-8:#A1A1AA; --asset-9:#D08A6A;
  --shadow-1:inset 0 1px 0 rgb(255 255 255 / .06);
  --shadow-2:inset 0 1px 0 rgb(255 255 255 / .08),0 0 0 1px #3A3A3F,0 24px 48px -12px rgb(0 0 0 / .9);
  --skel-sheen:rgb(255 255 255 / .06);
}

/* the stage / hero island (§2.3): dark values in both themes */
.on-hero{ color-scheme: dark;
  --bg:#0A0A0A; --surface:#161616; --surface-2:#1C1C1E; --surface-3:#2A2A2E;
  --ink:#FFFFFF; --ink-2:#C7C7CC; --muted:#A1A1A6; --line:#3A3A3F;
  --brand:#446454; --brand-strong:#8FA298; --brand-soft:#111915; --brand-ink:#050807;
  --accent:#D4FF3F; --accent-soft:#2C330A;
  --up:#4ADE80; --up-bg:#0D2818; --down:#FF6B6B; --down-bg:#331213; --warn:#FFA94D; --warn-bg:#2E1D08; --focus:#8EA8FF;
  --sell-wash:rgb(17 25 21 / .70); --skel-sheen:rgb(255 255 255 / .06);
  background-color:var(--hero-bg); background-image:var(--aurora); color:var(--hero-ink); }
.on-hero :is(h1,h2,h3,h4){color:var(--hero-ink)}

/* base */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 1.0625rem/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2{font-family:var(--font-display);font-weight:600;color:var(--ink)}
h3{font-family:var(--font-sans);font-weight:800;color:var(--ink)}
.num{font-family:var(--font-sans);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.num.display{font-family:var(--font-display);font-weight:600;font-feature-settings:"tnum" 1}   /* Unbounded digits are proportional without tnum */
a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.card{background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.leaf{border-radius:var(--radius-leaf)}
.glass{background:var(--glass);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:#161616}}
.kick{font:800 .8125rem/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.btn-primary{background:var(--accent);color:var(--on-accent);border-radius:999px;font-weight:800}
.btn-primary{box-shadow:inset 0 0 0 1px rgb(10 10 10 / .16)}            /* light surfaces only (§0 #10) */
.on-hero .btn-primary,:root[data-theme="dark"] .btn-primary{box-shadow:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-primary{box-shadow:none} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  tr.flash-up,tr.flash-down,.tick.flash-up,.tick.flash-down{animation:none!important}}
/* SEO/CWV 2026-10-23: a metric-matched stand-in for Unbounded 600 (Arial/Helvetica/Roboto Bold scaled to Unbounded's
   width and vertical metrics), so the h1 and the Unbounded numbers keep their line breaks when the web font swaps in —
   the font swap was 0.20 of the home page's 0.22 mobile CLS. local() fonts are not fetched, so the CSP is untouched. */
@font-face{font-family:"Unbounded Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Roboto Bold"),local("Roboto-Bold");
  font-weight:600;size-adjust:129%;ascent-override:77%;descent-override:19%;line-gap-override:0%}
:root{--font-display:"Unbounded","Unbounded Fallback","Nunito",system-ui,sans-serif}

/* ============================================================ 1b. helper tokens (type scale §3.6, tiles §1.3, hover §5.1, quickbar §5.11) */
:root{
  --fs-display:clamp(2rem, 1.3rem + 3vw, 3.5rem); --fs-h2:clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); --fs-lead:1.1875rem;
  --fs-tick:clamp(1.375rem, 1rem + 1vw, 1.875rem); --fs-result:clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --tile-bg:#FFFFFF; --tile-line:#D9D9DE; --thumb:#FFFFFF; --row-hover:var(--surface-2); --coin-gold-ink:#0A0A0A;
  --foot-bg:color-mix(in srgb,var(--surface-2) 45%,var(--surface));
  --qb-bg:color-mix(in srgb,var(--surface) 92%,transparent); --qb-line:var(--line);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --tile-bg:#1C1C1E; --tile-line:#3A3A3F; --thumb:#2A2A2E; --row-hover:var(--surface-3); --coin-gold-ink:#D4FF3F;
  --foot-bg:var(--surface-2); --qb-bg:color-mix(in srgb,var(--surface-3) 88%,transparent); --qb-line:transparent;
}}
:root[data-theme="dark"]{
  --tile-bg:#1C1C1E; --tile-line:#3A3A3F; --thumb:#2A2A2E; --row-hover:var(--surface-3); --coin-gold-ink:#D4FF3F;
  --foot-bg:var(--surface-2); --qb-bg:color-mix(in srgb,var(--surface-3) 88%,transparent); --qb-line:transparent;
}
.on-hero{--coin-gold-ink:#D4FF3F}

/* ============================================================ 1c. the Canlı room (DESIGN §2.9, design D, owner 2026-10-23)
   The ONE documented exception to "neutral greys only": canli-kurlar.html (<html data-room="canli">) moves page,
   cards, header, quickbar, stage and footer to a sage-derived ladder so the switch from Kurlar is visible at a glance.
   Lime, up/down/warn/focus, brand and the ink colours are unchanged. theme-color metas follow (tema.mjs ROOM_THEME_COLORS). */
:root[data-room="canli"]{
  --bg:#E1EBE5; --surface:#FFFFFF; --surface-2:#D9E4DE; --surface-3:#CCDAD2; --line:#C1D0C7;
  --muted:#55625B; --hero-bg:#0F1A15;
  --tile-bg:#FFFFFF; --tile-line:#C1D0C7; --thumb:#FFFFFF; --row-hover:#D9E4DE;
  --qb-bg:color-mix(in srgb,#F6FAF7 94%,transparent); --qb-line:#C1D0C7;
  --aurora:radial-gradient(70% 90% at 75% 115%,rgb(68 100 84 / .60),transparent 70%),radial-gradient(35% 45% at 100% 0%,rgb(212 255 63 / .08),transparent 70%);
}
@media (prefers-color-scheme: dark){ :root[data-room="canli"]:not([data-theme="light"]){
  --bg:#09110D; --surface:#0F1914; --surface-2:#15231C; --surface-3:#1D2F26; --line:#2A3F34;
  --ink-2:#C8D3CD; --muted:#98A79F; --hero-bg:#0F1A15;
  --tile-bg:#15231C; --tile-line:#2A3F34; --thumb:#2A3F34; --row-hover:#1D2F26;
  --qb-bg:color-mix(in srgb,#1D2F26 92%,transparent); --qb-line:#2A3F34;
  --aurora:radial-gradient(70% 90% at 75% 115%,rgb(68 100 84 / .55),transparent 70%),radial-gradient(35% 45% at 100% 0%,rgb(212 255 63 / .08),transparent 70%);
}}
:root[data-room="canli"][data-theme="dark"]{
  --bg:#09110D; --surface:#0F1914; --surface-2:#15231C; --surface-3:#1D2F26; --line:#2A3F34;
  --ink-2:#C8D3CD; --muted:#98A79F; --hero-bg:#0F1A15;
  --tile-bg:#15231C; --tile-line:#2A3F34; --thumb:#2A3F34; --row-hover:#1D2F26;
  --qb-bg:color-mix(in srgb,#1D2F26 92%,transparent); --qb-line:#2A3F34;
  --aurora:radial-gradient(70% 90% at 75% 115%,rgb(68 100 84 / .55),transparent 70%),radial-gradient(35% 45% at 100% 0%,rgb(212 255 63 / .08),transparent 70%);
}
:root[data-room="canli"] .on-hero{--line:#2A3F34; --surface:#15231C; --surface-2:#1D2F26}   /* the deep-sage stage island */

/* ============================================================ 2. DESIGN §9 hooks (verbatim) */
[hidden]{display:none !important}                                   /* duyuru slots, #cerez */

.skel{display:inline-block;min-width:4ch;height:1em;border-radius:6px;color:transparent;vertical-align:middle;
  background:var(--surface-2) linear-gradient(90deg,transparent,var(--skel-sheen,rgb(255 255 255 / .06)),transparent) no-repeat;
  background-size:40% 100%;background-position:-60% 0}
@media (prefers-reduced-motion:no-preference){.skel{animation:skel 1.2s ease-in-out 2}}   /* 2 sweeps, then still */
@keyframes skel{to{background-position:160% 0}}
[dir=rtl] .skel{animation-direction:reverse}

.trend{display:inline-grid;place-items:center;min-width:32px;height:24px;padding:0 8px;box-sizing:border-box;
       border-radius:999px;background:transparent;color:var(--muted)}
.trend:not([data-dir=up]):not([data-dir=down])::after{content:"";width:10px;height:2px;border-radius:1px;background:currentColor}
.trend[data-dir=up]{background:var(--up-bg);color:var(--up)}
.trend[data-dir=down]{background:var(--down-bg);color:var(--down)}
.trend svg{width:12px;height:12px;fill:currentColor}

:root{--bar-x:3px} [dir=rtl]{--bar-x:-3px}                          /* the flash bar sits at the inline start */
@keyframes flash-up{0%,25%{background-color:var(--up-bg);box-shadow:inset var(--bar-x) 0 0 var(--up)}
                    100%{background-color:var(--flash-rest,transparent);box-shadow:inset var(--bar-x) 0 0 transparent}}
@keyframes flash-down{0%,25%{background-color:var(--down-bg);box-shadow:inset var(--bar-x) 0 0 var(--down)}
                      100%{background-color:var(--flash-rest,transparent);box-shadow:inset var(--bar-x) 0 0 transparent}}
@keyframes tick-up{0%,25%{background-color:color-mix(in srgb,var(--up-bg) 70%,transparent);box-shadow:inset 0 0 0 2px var(--up)}
                   100%{background-color:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line)}}
@keyframes tick-down{0%,25%{background-color:color-mix(in srgb,var(--down-bg) 70%,transparent);box-shadow:inset 0 0 0 2px var(--down)}
                     100%{background-color:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line)}}
tr.flash-up{animation:flash-up 1600ms cubic-bezier(.2,.8,.2,1)}
tr.flash-down{animation:flash-down 1600ms cubic-bezier(.2,.8,.2,1)}
.tick.flash-up{animation:tick-up 1600ms cubic-bezier(.2,.8,.2,1)}
.tick.flash-down{animation:tick-down 1600ms cubic-bezier(.2,.8,.2,1)}
tr.flash-up>td,tr.flash-down>td{background-color:transparent}       /* let the row wash cover the sell column too */
@media (prefers-reduced-motion:reduce){                             /* static tint, removed by the same 1600 ms timer */
  tr.flash-up{animation:none;background-color:var(--up-bg);box-shadow:inset var(--bar-x) 0 0 var(--up)}
  tr.flash-down{animation:none;background-color:var(--down-bg);box-shadow:inset var(--bar-x) 0 0 var(--down)}
  .tick.flash-up{animation:none;background-color:color-mix(in srgb,var(--up-bg) 70%,transparent);box-shadow:inset 0 0 0 2px var(--up)}
  .tick.flash-down{animation:none;background-color:color-mix(in srgb,var(--down-bg) 70%,transparent);box-shadow:inset 0 0 0 2px var(--down)}
}

/* status: the MARK element carries data-status + data-state; the text is a sibling [data-status-text] */
[data-status]{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--muted);box-sizing:border-box}
[data-status][data-state=live]{background:var(--up);box-shadow:0 0 0 3px var(--up-bg)}
[data-status][data-state=stale]{background:var(--warn)}
[data-status][data-state=error]{background:var(--down);border-radius:2px}
[data-status][data-state=loading]{background:transparent;border:2px solid var(--muted)}
[data-status][data-state=notPublished]{background:transparent;border:2px dashed var(--muted)}
[data-status][data-state=stale]~[data-status-text]{color:var(--warn)}
[data-status][data-state=error]~[data-status-text]{color:var(--down)}
:is([data-status][data-state=loading],[data-status][data-state=notPublished])~[data-status-text]{color:var(--muted)}
@media (prefers-reduced-motion:no-preference){[data-status]{transition:transform .3s}}  /* JS may add a one-shot scale-in; never infinite */

.b-tr,.b-en,.b-ar{display:none}
html[lang=tr] .b-tr,html[lang=en] .b-en,html[lang=ar] .b-ar{display:inline-block}

.field.invalid :is(input,select,textarea){border:2px solid var(--down);background-color:color-mix(in srgb,var(--down-bg) 45%,var(--surface-2))}
.field.invalid .field-msg{display:flex;gap:6px;align-items:center;color:var(--down);font-weight:700;font-size:.8125rem}
.form-status[data-state]:not([data-state=""]):not([data-state=sending]){padding:12px 16px;border-radius:12px;border-inline-start:4px solid;color:var(--ink)}
.form-status[data-state=ok]{background:var(--up-bg);border-inline-start-color:var(--up)}
.form-status[data-state=error]{background:var(--down-bg);border-inline-start-color:var(--down)}
.form-status[data-state=throttled]{background:var(--warn-bg);border-inline-start-color:var(--warn);color:var(--warn)}
.form-status[data-state=sending]{color:var(--muted)}
.hp{position:absolute!important;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}

body[data-cerez-open]{padding-bottom:calc(var(--cerez-h,140px) + 24px)}
@media (max-width:860px){body[data-cerez-open]{padding-bottom:calc(var(--cerez-h,140px) + var(--quickbar-h) + 36px + env(safe-area-inset-bottom))}}

/* safe areas (viewport meta has viewport-fit=cover); class names other than the hooks are the team's choice */
.site-header{padding-top:env(safe-area-inset-top);padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
.quickbar,.cerez{bottom:calc(12px + env(safe-area-inset-bottom))}
@media (max-width:860px){.cerez{bottom:calc(var(--quickbar-h) + 24px + env(safe-area-inset-bottom))}
  main{padding-bottom:calc(var(--quickbar-h) + 24px + env(safe-area-inset-bottom))}}
.mobile-menu{padding-bottom:env(safe-area-inset-bottom)}

/* RTL + Arabic */
:root[data-lang=ar]{--font-sans:"Nunito","Geeza Pro","SF Arabic","Noto Naskh Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;--font-display:var(--font-sans)}
:root[data-lang=ar] body{line-height:1.75}
:root[data-lang=ar] :is(h1,h2,h3,.accent){font-weight:800;letter-spacing:0}
:root[data-lang=ar] :is(.kick,th){text-transform:none;letter-spacing:0}
[dir=rtl] .ic-dir{transform:scaleX(-1)}                             /* chevrons, arrows, route; NOT trend triangles, NOT the aurora */
[dir=rtl] .leaf{border-radius:8px 24px 8px 24px}

/* .accent: the headline word (i18n markup <span class="accent">) */
.accent{color:var(--brand);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.18em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.on-hero .accent{color:var(--accent);text-decoration:none}

/* ============================================================ 3. Layout */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{min-height:100vh;overflow-x:clip}
img,svg{max-width:100%}
img{display:block;height:auto}
h1,h2,h3,p,figure,dl,dt,dd,ul,ol{margin:0}
ul,ol{padding:0}
button,input,select,textarea{font:inherit;color:inherit}
main{display:block}

.container{width:min(calc(100% - 48px), 1200px);margin-inline:auto}
.section{padding-block:72px 0}
.section-tight{padding-block:28px 0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.end{text-align:end}

/* numbers are LTR islands in every language (DESIGN §3.3) */
.num{direction:ltr;unicode-bidi:isolate}
a[href^="tel:"]{white-space:nowrap}

/* section heads (§8.1): kicker over an Unbounded title */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:24px}
.section-head h2{margin-top:10px;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
.on-hero .kick{color:var(--hero-muted)}

/* skip link: a Brand pill at the top start, visible on focus */
.skip{position:absolute;z-index:100;inset-inline-start:16px;top:-80px;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border-radius:999px;background:var(--brand);color:var(--brand-ink);font-weight:800;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top))}

/* ============================================================ 4. Components */

/* --- buttons (§5.6): pills, Nunito 800, no uppercase, no gradients */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:999px;
  font:800 .9375rem/1.15 var(--font-sans);text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;
  transition:filter 150ms var(--ease),background-color 150ms var(--ease),transform 150ms var(--ease)}
.btn .icon{width:20px;height:20px}
.btn-lg{min-height:52px;padding:0 26px;font-size:1rem}
.btn-sm{min-height:44px;padding:0 18px}
.btn:active{transform:scale(.98)}
.btn-primary:hover,.btn-brand:hover{filter:brightness(1.08)}
.btn-brand{background:var(--brand);color:var(--brand-ink)}
.btn-brand:active{background:var(--brand-strong)}
.btn-secondary{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-secondary:hover{background:var(--surface-3)}
.btn-glass{background:var(--glass);color:var(--hero-ink);box-shadow:inset 0 0 0 1px var(--glass-line),inset 0 1px 0 rgb(255 255 255 / .08)}
.btn-glass:hover{background:rgb(255 255 255 / .10)}
.btn:disabled{opacity:.38;cursor:not-allowed;filter:none;transform:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--surface-2)}
.link-btn{background:none;border:0;padding:0;min-height:44px;color:var(--brand);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* --- the official wordmark (§1.3): traced vector, never live text; ink on light, white on dark and on the stage */
.logo{display:block;flex:none;width:auto;height:22px;fill:currentColor}   /* the official wordmark, inline <use href="#logo-h">: one flat colour = the parent's color (§1.3) */

/* --- header (§8.1) */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
  padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}
.header-inner{position:relative;max-width:1200px;margin-inline:auto;height:var(--header-h);display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;color:var(--ink);text-decoration:none;border-radius:12px}
.brand .logo{color:var(--ink);margin-inline-end:2px}   /* stays Latin and unmirrored in Arabic; only its position follows the direction (§1.3) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand .logo{color:var(--hero-ink)} }   /* white #FFFFFF on dark, never the #F5F5F7 text ink (§1.3) */
:root[data-theme="dark"] .brand .logo{color:var(--hero-ink)}

.site-nav{display:flex;align-items:center;flex:1;min-width:0}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none}
.nav-list a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 11px;border-radius:999px;color:var(--ink-2);
  font:800 1rem/1.2 var(--font-sans);text-decoration:none;white-space:nowrap}
.nav-list a:hover{color:var(--ink)}
.nav-list a[aria-current=page]{color:var(--ink)}
.nav-list a[aria-current=page]::after{content:"";position:absolute;inset-inline:11px;bottom:4px;height:4px;border-radius:4px;background:var(--accent)}
.header-actions{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.call-btn .icon{width:18px;height:18px}
.menu-toggle{display:none}
.menu-toggle[aria-expanded=true] .ic-open,.menu-toggle:not([aria-expanded=true]) .ic-shut{display:none}

/* --- theme toggle (tema.mjs): icon-only 44 px, names the action; sun on dark (→ light), moon on light (→ dark).
   Keyed on the same three theme selectors as the tokens, so the icon is right before any module runs. */
.tema-toggle{flex:none}
.tema-toggle .ic-sun{display:none}
:root[data-theme="dark"] .tema-toggle .ic-sun{display:inline-block}
:root[data-theme="dark"] .tema-toggle .ic-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tema-toggle .ic-sun{display:inline-block}
  :root:not([data-theme="light"]) .tema-toggle .ic-moon{display:none}
}

/* --- language mini segmented (§5.5) */
.langbar{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.langbar button{min-width:38px;height:30px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);
  font:900 .8125rem/1 var(--font-sans);letter-spacing:.04em;cursor:pointer;transition:background-color 150ms var(--ease)}
.langbar button[lang=ar]{font-size:1rem;letter-spacing:0}
.langbar button:hover{color:var(--ink)}
.langbar button[aria-pressed=true]{background:var(--thumb);color:var(--ink);box-shadow:var(--shadow-1)}
.site-nav .langbar-menu{display:none}

/* --- coin badge (§5.1) */
.coin{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);font:900 .6875rem/1 var(--font-sans);letter-spacing:.04em;color:var(--brand-strong)}
.coin:is([data-coin=gold],[data-coin=gumus],[data-coin=eski]){background:var(--accent-soft);box-shadow:none;
  font:600 .8125rem/1 var(--font-display);letter-spacing:0;color:var(--coin-gold-ink)}
.coin[data-coin=eski]{outline:1.5px dashed var(--muted);outline-offset:2px}

/* --- status pill and the plain status line (§5.4) */
.status-pill,.status-line{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;
  font:700 .875rem/1.25 var(--font-sans);color:var(--ink)}
.status-line{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.status-pill [data-status-text]{color:var(--hero-ink)}
.status-line [data-status-text]{color:var(--ink)}
:is(.status-pill,.status-line):has([data-status][data-state=stale]){background:var(--warn-bg);box-shadow:none}
:is(.status-pill,.status-line):has([data-status][data-state=error]){background:var(--down-bg);box-shadow:none}
.status-pill [data-status][data-state=stale]~[data-status-text]{color:var(--warn)}
.status-pill [data-status][data-state=error]~[data-status-text]{color:var(--down)}
.status-pill :is([data-status][data-state=loading],[data-status][data-state=notPublished])~[data-status-text]{color:var(--muted)}

/* --- trend pill (§5.2): the §9 hook draws it; tickers keep it on the stage */
.trend{flex:none}

/* --- hero: the black stage (§2.3, §8.1) */
.hero{padding-block:52px 40px;border-end-start-radius:40px;border-end-end-radius:40px;border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.hero h1{margin:12px 0 18px;max-width:14ch;font-size:var(--fs-display);line-height:1.05;letter-spacing:-.025em}
/* home h1 = the place/keyword kicker + the slogan (SEO 2026-10-23); looks exactly like the former kicker <p> over the h1 */
.hero h1.hero-h1-home{margin-top:22px;max-width:none}
.hero-h1-home .hero-kicker{display:block;margin-bottom:12px}
.hero-slogan{display:block;max-width:14ch}
.hero-lead{max-width:33em;font:600 var(--fs-lead)/1.55 var(--font-sans);color:var(--hero-muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-trust{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:32px;padding-top:22px;border-top:1px solid var(--glass-line);list-style:none}
.hero-trust li{max-width:15em;font:600 .8125rem/1.4 var(--font-sans);color:var(--hero-muted)}
.hero-trust b{display:block;margin-bottom:4px;font:600 1.25rem/1.2 var(--font-display);font-feature-settings:"tnum" 1;letter-spacing:-.01em;color:var(--hero-ink)}
.hero-badge{display:flex;width:fit-content;align-items:center;min-height:32px;margin-top:20px;padding:0 14px;border-radius:999px;
  color:var(--hero-ink);font:800 .8125rem/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase}
.hero-canli .hero-grid{grid-template-columns:minmax(0,1fr)}
/* --- Canlı header (§8.1 "Canlı header", design D): lime chip + cadence/status line, then the h1 with "Canlı" in lime */
.live-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.chip-live{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding-inline:12px 14px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font:900 .8125rem/1 var(--font-sans);letter-spacing:.14em}
.live-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){ .live-dot.is-ping::after{animation:live-ping 700ms var(--ease) 1} }   /* §6: ONE ring per real refresh; none with reduced motion */
@keyframes live-ping{0%{opacity:.9;transform:scale(.55)}100%{opacity:0;transform:scale(1.5)}}
.live-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0;font:700 1rem/1.3 var(--font-sans);color:var(--hero-muted)}
.live-sub .sep{opacity:.5}
.live-sub [data-live-cadence]:empty + .sep{display:none}   /* filled by app.js from the real poll interval */
.live-sub b{font-weight:800;color:var(--hero-ink)}
.live-sub[data-state=stale] [data-live-stamp]{color:var(--warn)}
.live-sub[data-state=error] [data-live-stamp]{color:var(--down)}
.hero-canli .live-top + h1{margin-top:16px}
@media (max-width:860px){ .live-sub{font-size:.875rem} .chip-live{min-height:28px;font-size:.75rem} }
@media (max-width:600px){ .live-sub{flex-basis:100%} }   /* own row from the first paint: filling the cadence no longer moves the h1 (CLS) */
.hero-canli h1{max-width:none}
.hero-tickers{margin-top:40px}

/* storefront photo in a leaf frame (§1.4) */
.hero-photo,.about-photo{position:relative;overflow:hidden;margin:0;background:var(--surface-2)}
.hero-photo{aspect-ratio:4/3.3;box-shadow:0 30px 60px -30px rgb(0 0 0 / .9)}
.about-photo{aspect-ratio:4/3}
.hero-photo::before,.about-photo::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12);background:linear-gradient(transparent 55%,rgb(0 0 0 / .55))}
.hero-photo picture,.about-photo picture{display:contents}
.hero-photo img,.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.photo-chip{position:absolute;z-index:2;inset-inline-start:16px;bottom:16px;display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 14px;
  border-radius:999px;background:rgb(10 10 10 / .55);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16);color:#FFFFFF;font:800 .875rem/1.25 var(--font-sans)}
.photo-chip .icon{width:18px;height:18px}
.hero-since{position:absolute;z-index:2;top:14px;inset-inline-end:14px;padding:8px 12px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font:900 .8125rem/1 var(--font-sans)}

/* --- ticker cards (§5.3): glass on the stage, leaf corner */
.tickers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"chip name trend" "val val val" "buy buy code";
  align-items:center;gap:12px 10px;min-width:0;min-height:116px;padding:16px 18px 15px;color:var(--hero-ink)}
.tick-top,.tick-vals{display:contents}
.tick-chip{grid-area:chip;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  font:600 .875rem/1 var(--font-display);white-space:nowrap}
.tick-name{grid-area:name;min-width:0;font:800 .9375rem/1.2 var(--font-sans);letter-spacing:0;color:var(--hero-muted)}
.tick .trend{grid-area:trend;justify-self:end}
.tv-sell{grid-area:val;min-width:0}
.tv-buy{grid-area:buy;display:flex;align-items:baseline;gap:5px;min-width:0;font:700 .8125rem/1.2 var(--font-sans);color:var(--hero-muted)}
.tv-sell dd{font:600 var(--fs-tick)/1.1 var(--font-display);font-feature-settings:"tnum" 1;letter-spacing:-.02em;color:var(--hero-ink);white-space:nowrap}
.tv-sell dd::after{content:"\202F₺";font:800 .5em/1 var(--font-sans);letter-spacing:0;color:var(--hero-muted)}
.tv-buy dd{font:800 .8125rem/1.2 var(--font-sans);color:var(--hero-ink);white-space:nowrap}
.tick-code{grid-area:code;justify-self:end;font:700 .8125rem/1.2 var(--font-sans);color:var(--hero-muted)}
.tick[data-missing] dd{color:var(--hero-muted)}
.tick[data-missing] .tv-sell dd::after{content:none}
.tick .skel{min-width:5ch}

/* --- price card, pill tabs, table (§5.1, §5.5) */
.prices-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
.price-card{overflow:hidden}
.card-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 20px;padding:24px 24px 16px}
.card-head h2{margin-top:8px;font-size:1.5625rem;line-height:1.15;letter-spacing:-.015em}
.card-sub{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:0 24px 16px}
.tab-count{margin-inline-start:auto;font:600 .875rem/1.3 var(--font-sans);color:var(--muted);text-align:end}
.tab-count:empty{display:none}
.price-card:has(#tab-doviz[aria-selected=true]) [data-count=gold],
.price-card:has(#tab-altin[aria-selected=true]) [data-count=currency]{display:none}

.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;width:260px;padding:4px;border-radius:999px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.tabs::before{content:"";position:absolute;inset-block:4px;inset-inline-start:4px;width:calc(50% - 6px);border-radius:999px;background:var(--brand);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18);transition:transform 200ms var(--ease)}
.tabs:has(#tab-altin[aria-selected=true])::before{transform:translateX(calc(100% + 4px))}
[dir=rtl] .tabs:has(#tab-altin[aria-selected=true])::before{transform:translateX(calc(-100% - 4px))}
.tab{position:relative;z-index:1;height:44px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink-2);
  font:700 1rem/1 var(--font-sans);cursor:pointer;transition:color 200ms var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--brand-ink);font-weight:800}

.stale-banner{display:flex;gap:12px;align-items:flex-start;margin:0 24px 16px;padding:12px 16px;border-radius:12px;
  background:var(--warn-bg);border-inline-start:4px solid var(--warn);font-size:.9375rem;line-height:1.45;color:var(--ink)}
.stale-banner .icon{color:var(--warn);margin-top:1px}
.stale-time{white-space:nowrap}
.stale-time time{color:var(--warn);font-weight:800}

.price-table{width:100%;border-collapse:collapse}
.price-table th{padding:13px 16px;border-bottom:1px solid var(--line);text-align:end;
  font:800 .8125rem/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price-table .th-unit{text-align:start;padding-inline-start:24px}
.price-table .th-sell{color:var(--brand-strong);background:var(--sell-wash);padding-inline-end:24px}
.price-table .th-trend{width:84px;padding-inline:0;text-align:center}
/* screen 01 shows the "Değişim" header; the contract allows hiding it, phones hide the whole column (≤ 599) */
.price-table .th-trend .sr-only{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
.price-table .th-buy,.price-table .th-sell{min-width:112px}
.price-table td{height:64px;padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:end}
.price-table td:first-child{padding-inline-start:24px}
.price-table td:last-child{padding-inline-end:24px}
.price-table tbody tr:last-child > *{border-bottom:0}
.price-table tbody tr:not(.group):not(.error-row):not(.skel-row):hover{background:var(--row-hover)}
.price-table td.unit-cell{text-align:start}
.price-table td.trend-cell{padding-inline:0;text-align:center}
.unit{display:flex;align-items:center;gap:14px;min-width:0}
.unit .name{display:block;min-width:0;font:800 1.0625rem/1.25 var(--font-sans);color:var(--ink)}
.unit .name small{display:block;margin-top:2px;font:600 .8125rem/1.3 var(--font-sans);color:var(--muted)}
.price-table td.buy{font:700 1.1875rem/1.2 var(--font-sans);color:var(--ink-2);white-space:nowrap}
.price-table td.sell{font:900 1.25rem/1.2 var(--font-sans);color:var(--ink);background:var(--sell-wash);white-space:nowrap}
.price-table .skel-row td{text-align:start}
.price-table .skel-row td:nth-child(n+3){text-align:end}
.price-table .skel-row td:nth-child(4){background:var(--sell-wash)}
.price-table .skel-row td:first-child .skel{min-width:14ch}
tr.group > th[scope=rowgroup]{height:40px;padding:0 24px;background:var(--surface-2);border-bottom:1px solid var(--line);text-align:start;
  font:800 .8125rem/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
tr.group > th[scope=rowgroup]::before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:10px;border-radius:50%;background:var(--accent);vertical-align:1px}
tr.error-row td{height:auto;padding:24px;text-align:start;font-size:1rem;line-height:1.5;color:var(--ink)}
tr.error-row td > .icon{width:20px;height:20px;margin-inline-end:10px;vertical-align:-4px;color:var(--down)}
tr.error-row[data-kind=notPublished] td > .icon{color:var(--muted)}
tr.error-row[data-kind=empty] td{text-align:center;color:var(--muted)}

.price-foot{display:flex;gap:10px;align-items:flex-start;padding:16px 24px;border-top:1px solid var(--line);background:var(--foot-bg);
  font:600 .8125rem/1.45 var(--font-sans);color:var(--muted)}
.price-foot .icon{width:18px;height:18px;margin-top:1px}
.price-foot p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;flex:1}
.price-stamp{order:-1;white-space:nowrap}
.price-stamp time{color:var(--ink-2);font-weight:800}

/* --- side column: converter, square duyuru, visit card */
.side-col{display:grid;gap:24px;min-width:0}

/* icon tile with the lime system dot (§7) */
.ico-tile{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;background:var(--surface-2);border:1px solid var(--line);color:var(--brand)}
.ico-tile::after{content:"";position:absolute;top:-3px;inset-inline-end:-3px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.on-hero .ico-tile{color:var(--hero-ink)}
.on-hero .ico-tile::after{border-color:var(--hero-bg)}

/* converter (§5.5 segmented, §5.7 fields, §5.16 stage result) */
.conv-card{padding:22px}
.conv-head{display:flex;align-items:center;gap:12px}
.conv-title{font:800 1.25rem/1.2 var(--font-sans);letter-spacing:0}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:0;margin:18px 0 0;padding:4px;border:0;border-radius:999px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.seg input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.seg label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:4px 10px;border-radius:999px;text-align:center;
  font:700 .9375rem/1.2 var(--font-sans);color:var(--ink-2);cursor:pointer;transition:background-color 200ms var(--ease),color 200ms var(--ease)}
.seg label::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--mask-down) center/contain no-repeat;mask:var(--mask-down) center/contain no-repeat}
.seg label[for=mode-buy]::before{-webkit-mask-image:var(--mask-up);mask-image:var(--mask-up)}
.seg input:checked + label{background:var(--brand);color:var(--brand-ink);font-weight:800;box-shadow:inset 0 1px 0 rgb(255 255 255 / .18)}
.seg input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}

.field{margin-top:16px}
.field > label{display:block;margin-bottom:7px;font:800 .875rem/1.3 var(--font-sans);color:var(--ink)}
.field input,.field select,.field textarea{display:block;width:100%;min-height:52px;padding:0 16px;border:1.5px solid var(--muted);border-radius:12px;
  background:var(--surface-2);color:var(--ink);font:600 1.0625rem/1.4 var(--font-sans);transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease)}
.field textarea{min-height:140px;padding-block:12px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.field-msg{display:none;margin-top:8px}
.field-msg .icon{width:16px;height:16px}
.amount-box{position:relative}
.amount-box input{padding:0 76px 0 16px;text-align:left;font:800 1.375rem/1 var(--font-sans);font-variant-numeric:tabular-nums lining-nums}
.amount-unit{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:800 .9375rem/1 var(--font-sans);color:var(--muted);pointer-events:none}
.select-box{position:relative}
.select-box select{appearance:none;-webkit-appearance:none;padding-inline-end:48px;font-weight:700;cursor:pointer}
.select-chev{position:absolute;inset-inline-end:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}

.receipt{display:block;margin-top:18px;padding:20px 22px;border:1px solid var(--surface-2)}
.receipt-label{display:block;font:800 .8125rem/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted)}
.receipt-value{display:block;margin:10px 0 8px;font-size:var(--fs-result);line-height:1.1;letter-spacing:-.02em;color:var(--hero-ink);overflow-wrap:anywhere}
.receipt-rate{display:block;font:700 .875rem/1.45 var(--font-sans);color:var(--hero-muted)}
.receipt-rate:empty{display:none}
.conv-note{margin-top:14px;font:600 .8125rem/1.45 var(--font-sans);color:var(--muted)}

/* duyuru frames (§5.9). The label sits top-LEFT in every language: the artwork is the same LTR picture for tr/en/ar and
   carries its own wordmark top-right, which the label covered in Arabic (RTL inline-start = right). */
.duyuru{position:relative}
.duyuru-label{position:absolute;z-index:1;top:10px;left:10px;padding:5px 10px;border-radius:999px;background:rgb(0 0 0 / .5);
  color:#FFFFFF;font:800 .75rem/1.2 var(--font-sans);pointer-events:none}
.duyuru-frame{display:block;overflow:hidden;border-radius:var(--radius);background:var(--surface-2);border:1px dashed var(--line);
  transition:transform 150ms var(--ease),box-shadow 150ms var(--ease)}
.duyuru-frame[href]{cursor:pointer}
.duyuru-frame[href]:hover{box-shadow:var(--shadow-2)}
[data-duyuru-slot] img{width:100%;aspect-ratio:var(--duyuru-ratio);object-fit:cover}
.duyuru-genis img{aspect-ratio:var(--duyuru-ratio,4)}
.duyuru-kare img{aspect-ratio:var(--duyuru-ratio,1)}
.duyuru-genis{max-width:1200px;margin-inline:auto}
/* Reserved duyuru space while api/duyurular.php is in flight (web fixes 2026-10-24, DOM-CONTRACT §10): tema-init.js sets
   :root[data-duyuru-bekle] (JS on only; app.js removes it after the first answer, a timer after 8 s) and, from the last
   answer (ds_duyuru), [data-duyuru-bos] for slots that were empty and --duyuru-<slot>-oran for the last ratio. The box is
   content-box so it is exactly as tall as the frame + image it stands in for: showing the duyuru moves nothing. */
:root[data-duyuru-bekle] [data-duyuru-slot][hidden]{display:block !important}
:root[data-duyuru-bekle][data-duyuru-bos~="genis"] [data-duyuru-slot="genis"][hidden],
:root[data-duyuru-bekle][data-duyuru-bos~="kare"] [data-duyuru-slot="kare"][hidden]{display:none !important}
:root[data-duyuru-bekle] [data-duyuru-slot][hidden] :is(.duyuru-label,img){display:none}
:root[data-duyuru-bekle] [data-duyuru-slot][hidden] .duyuru-frame{box-sizing:content-box}
:root[data-duyuru-bekle] [data-duyuru-slot="genis"][hidden] .duyuru-frame{aspect-ratio:var(--duyuru-genis-oran,4)}
:root[data-duyuru-bekle] [data-duyuru-slot="kare"][hidden] .duyuru-frame{aspect-ratio:var(--duyuru-kare-oran,1)}
/* A returning en/ar visitor: tema-init.js has set lang/dir before paint and hides the body until app.js has
   translated it (removed in bootLanguage, or by a 3 s timer), so the Turkish copy never paints and reflows. */
:root[data-dil-bekle] body{visibility:hidden}

/* visit card (§5.17): a small stage */
.visit{display:grid;gap:14px;padding:24px;border:1px solid var(--surface-2)}
.visit-head{display:flex;align-items:center;gap:12px}
.visit-title{margin-top:4px;font:800 1.125rem/1.25 var(--font-sans);letter-spacing:0}
.visit-hours{font:700 1rem/1.6 var(--font-sans);color:var(--hero-ink);font-variant-numeric:tabular-nums}
.visit-address{font:600 .875rem/1.5 var(--font-sans);color:var(--hero-muted)}
.visit-actions{display:flex;flex-wrap:wrap;gap:10px}
.visit-actions .btn{flex:1 1 140px}

/* get-the-app band (§8.1.3) + store badges + QR */
.getapp-band{display:flex;align-items:center;gap:14px 18px;padding:12px;padding-inline-start:20px;border-radius:999px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.getapp-mark{display:block;flex:none;width:auto;height:36px;color:var(--ink);fill:var(--ink)}   /* monogram (§1.3); the İ-dot spark inherits fill: ink on light (one flat colour), sage on dark (§1.2) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .getapp-mark{fill:var(--brand)} }
:root[data-theme="dark"] .getapp-mark{fill:var(--brand)}
.getapp-copy{min-width:0}
.getapp-copy h2{font:800 1rem/1.25 var(--font-sans);letter-spacing:0}
.getapp-copy p{margin-top:2px;font:600 .8125rem/1.35 var(--font-sans);color:var(--muted)}
.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.getapp-band .store-badges{margin-inline-start:auto}
.store-badge{display:inline-flex;border-radius:12px}
.store-badge img[src$=".png"]{width:auto;height:58px;margin-block:-7px;margin-inline:0}   /* the PNG has 29/250 clear space above and below only: visible ≈ 44 px */
.store-badge img[src$=".svg"]{width:auto;height:44px}
.getapp-qr{display:flex;align-items:center;gap:12px;max-width:260px;padding-inline-end:8px}
.getapp-qr img{flex:none;width:64px;height:64px;padding:4px;border-radius:12px;background:#FFFFFF}
.getapp-qr figcaption{font:600 .8125rem/1.35 var(--font-sans);color:var(--muted)}

/* --- Neden (§7, §8.1.5) */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none}
.why-card{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-content:start;padding:22px}
.why-icon{position:relative;grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;background:var(--surface-2);border:1px solid var(--line);color:var(--brand)}
.why-icon::after{content:"";position:absolute;top:-3px;inset-inline-end:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.why-icon .icon{width:28px;height:28px}
.why-card h3{margin-top:4px;font-size:1.125rem;line-height:1.25}
.why-card p{margin-top:6px;font:500 .9375rem/1.5 var(--font-sans);color:var(--ink-2)}

/* --- Hakkımızda */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.about-media{position:relative;padding-bottom:28px;padding-inline-end:28px}
.stamp{position:absolute;z-index:3;inset-inline-end:0;bottom:0;display:flex;flex-direction:column;gap:4px;max-width:230px;padding:14px 18px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2)}
.stamp-year{font:600 2.25rem/1 var(--font-display);font-feature-settings:"tnum" 1;letter-spacing:-.02em;color:var(--ink)}   /* R3: brand never on a number */
.stamp-cap{font:600 .9375rem/1.35 var(--font-sans);color:var(--ink)}
.about-copy h2{margin-top:10px;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
.about-body{margin-top:18px;max-width:62ch;color:var(--ink-2)}
.about-body + .about-body{margin-top:14px}
.mv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.mv-card{padding:24px 28px;border-radius:var(--radius);background:var(--surface-2);border-inline-start:4px solid var(--brand)}
.mv-title{font-size:1.25rem;line-height:1.25}
.mv-card p{margin-top:10px;color:var(--ink-2)}

/* --- Kurumsal: accordions (§5.8) */
.corp-inner{max-width:960px}
.acc-list{display:grid;gap:12px}
.acc{position:relative;padding-inline:24px;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.acc[open]::before{content:"";position:absolute;inset-inline-start:-1px;top:16px;bottom:16px;width:4px;border-radius:4px;background:var(--accent)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;list-style:none;cursor:pointer;
  font:800 1.125rem/1.25 var(--font-sans);color:var(--ink);border-radius:12px}
.acc summary::-webkit-details-marker{display:none}
.acc-chev{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);
  transition:transform 200ms var(--ease)}
.acc-chev .icon{width:18px;height:18px}
.acc[open] .acc-chev{transform:rotate(180deg)}
.acc > :not(summary){margin-bottom:20px}
.kv-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv-row:last-child{border-bottom:0}
.kv dt{flex:none;font:600 .9375rem/1.4 var(--font-sans);color:var(--muted)}
.kv dd{font:700 1rem/1.45 var(--font-sans);color:var(--ink);text-align:end}
.table-scroll{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.data-table th,.data-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.data-table thead th{background:var(--surface-2);font:800 .75rem/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.data-table tbody th{font-weight:700;color:var(--ink)}
.data-table .end{text-align:end}
.data-table tfoot :is(th,td){border-top:1px solid var(--line);border-bottom:0;font-weight:800;color:var(--ink)}
.data-table a{white-space:nowrap}

/* --- İletişim: info rows (§5.17), map, form */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.info-list{list-style:none}
.info-row{display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0}
.info-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--brand)}
.info-ic .icon{width:22px;height:22px}
.info-label{font:700 .8125rem/1.3 var(--font-sans);color:var(--muted)}
.info-value{font:600 1.0625rem/1.45 var(--font-sans);color:var(--ink)}
.map-frame{margin-top:24px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.map-frame iframe{display:block;width:100%;height:auto;aspect-ratio:4/3;border:0}
.contact-form{padding:28px}
.form-title{font-size:1.25rem;line-height:1.25}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-actions{margin-top:22px}
.form-actions .btn{min-width:160px}
.form-status{margin-top:16px;font-size:.9375rem;line-height:1.45;color:var(--muted)}
.form-status:empty{display:none}
.form-status::before{content:"";display:inline-block;width:20px;height:20px;margin-inline-end:10px;vertical-align:-5px;background:currentColor;
  -webkit-mask:var(--mask-hourglass) center/contain no-repeat;mask:var(--mask-hourglass) center/contain no-repeat}
.form-status[data-state=ok]::before{background:var(--up);-webkit-mask-image:var(--mask-check);mask-image:var(--mask-check)}
.form-status[data-state=error]::before{background:var(--down);-webkit-mask-image:var(--mask-warn);mask-image:var(--mask-warn)}
.form-status[data-state=throttled]::before{background:var(--warn);-webkit-mask-image:var(--mask-warn);mask-image:var(--mask-warn)}
.form-status a{color:inherit}
:root{
  --mask-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --mask-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.5A2 2 0 0 0 4.3 20.5h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
  --mask-hourglass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11M6.5 20.5h11M7.5 3.5c0 4.5 4.5 5.5 4.5 8.5s-4.5 4-4.5 8.5M16.5 3.5c0 4.5-4.5 5.5-4.5 8.5s4.5 4 4.5 8.5'/%3E%3C/svg%3E");
  --mask-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  --mask-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
}

/* --- footer (§8.1.9): the stage again */
.site-footer{margin-top:72px;padding-block:40px 26px;border-start-start-radius:40px;border-start-end-radius:40px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:26px}
@media (min-width:1080px){.footer-grid:not(:has(> .footer-apps)){grid-template-columns:1.4fr 1fr 1fr}}   /* app column gated off (APPS_PUBLISHED, view.mjs) */
.footer-lockup{display:inline-block;border-radius:6px;color:var(--hero-ink)}
.footer-lockup .logo{height:24px;color:var(--hero-ink)}
.footer-col p.footer-caption{margin-top:24px;font:700 .8125rem/1.4 var(--font-sans);letter-spacing:.02em;color:var(--hero-muted)}   /* brand.lockup under the wordmark, one D-height of clear space */
.footer-col p,.footer-col li{font:600 .875rem/1.6 var(--font-sans);color:var(--hero-muted)}
.footer-col p + p{margin-top:8px}
.footer-legal{margin-top:14px;max-width:30ch}
.footer-tagline{font-weight:800;color:var(--hero-ink)}
.footer-col .footer-tagline{color:var(--hero-ink)}
.footer-h{margin-bottom:14px;font:800 .75rem/1.2 var(--font-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--hero-muted)}
.footer-list{list-style:none;display:grid;gap:6px}
.footer-list a{font-weight:700;font-size:.9375rem;color:var(--hero-ink);text-decoration:none}
.footer-list a:hover{text-decoration:underline}
.site-footer .store-badges{margin-top:0}
.site-footer .store-badge{padding:0 6px;background:var(--surface-2);border-radius:999px}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-top:18px;border-top:1px solid var(--glass-line);
  font:600 .875rem/1.4 var(--font-sans);color:var(--hero-muted)}
.footer-bottom p{margin-inline-end:auto}
.footer-bottom a{color:var(--hero-ink);font-weight:800}
.footer-bottom .link-btn{color:var(--hero-ink);font-size:.875rem}

/* --- quickbar (§5.11) */
.quickbar{display:none}

/* --- cookie bar (§5.10): two equal Secondary buttons */
.cerez{position:fixed;z-index:60;inset-inline:12px;max-width:720px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2)}
.cerez-text{flex:1 1 320px;font:600 .9375rem/1.5 var(--font-sans);color:var(--ink-2)}
.cerez-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1 1 240px}
.cerez-actions .btn{width:100%}

/* ============================================================ 5. Privacy page (§8.1 gizlilik) */
/* 404.html (ErrorDocument, web fixes 2026-10-24): one centred block — big numeral, kicker, h1, lead, three ways on. */
.notfound{padding-block:72px 96px}
.notfound-inner{max-width:44rem;text-align:center}
.notfound-code{font:600 clamp(4.5rem,14vw,8rem)/1 var(--font-display);font-feature-settings:"tnum" 1;letter-spacing:-.04em;color:var(--brand-strong)}
.notfound .kick{margin-top:20px}
.notfound h1{margin-top:12px;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
.notfound-lead{margin:16px auto 0;max-width:36em;font:600 var(--fs-lead)/1.55 var(--font-sans);color:var(--ink-2)}
.notfound-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
@media (max-width:560px){.notfound{padding-block:48px 72px}.notfound-links{flex-direction:column;align-items:stretch}}
.policy-head{padding-block:48px 28px}
.policy-head h1{margin-top:12px;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
.policy-date{margin-top:10px;font-size:.9375rem;color:var(--muted)}
.policy-grid{display:grid;grid-template-columns:240px minmax(0,68ch);gap:56px;align-items:start}
.policy-toc{position:sticky;top:calc(var(--header-h) + 28px);padding:18px 0}
.toc-title{margin-bottom:10px;font:800 .8125rem/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.policy-toc ol{list-style:none;display:grid;gap:2px;border-inline-start:1px solid var(--line)}
.policy-toc a{display:block;padding:7px 14px;margin-inline-start:-1px;border-inline-start:3px solid transparent;font:600 .875rem/1.35 var(--font-sans);color:var(--ink-2);text-decoration:none}
.policy-toc a:hover{color:var(--ink);text-decoration:underline}
[data-toc] a[aria-current]{color:var(--brand);font-weight:800;border-inline-start-color:var(--brand)}
.policy-sec{scroll-margin-top:calc(var(--header-h) + 16px)}
.policy-sec + .policy-sec{margin-top:36px}
.policy-sec h2{padding-top:24px;margin-bottom:14px;border-top:1px solid var(--line);font-size:1.375rem;line-height:1.3;letter-spacing:-.01em}
.policy-sec:first-child h2{padding-top:0;border-top:0}
.policy-body p{color:var(--ink-2)}
.policy-body p + p,.policy-body ul + p,.policy-body p + ul{margin-top:14px}
.policy-list{display:grid;gap:10px;padding-inline-start:22px;color:var(--ink-2)}
.policy-list strong{color:var(--ink)}

/* ============================================================ 6. Responsive */
@media (max-width:1079px){
  .prices-grid{grid-template-columns:minmax(0,1fr)}
  .policy-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .policy-toc{position:static;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-grid{gap:32px}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:700px) and (max-width:1079px){
  .side-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .side-col > .conv-card{grid-row:span 2}
}
/* 861–1079: four tickers in a row are ~210 px wide */
@media (min-width:861px) and (max-width:1079px){
  .tickers{gap:12px}
  .tick{padding-inline:14px}
  .tick-code{display:none}
  .tick{grid-template-areas:"chip name trend" "val val val" "buy buy buy"}
}

/* ≤ 860: hamburger, quickbar, 60 px header, single-column stage, 2 × 2 tickers */
@media (max-width:860px){
  .site-header{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
  .header-inner{gap:10px}
  .brand .logo{height:20px}
  .langbar-header{display:none}
  .call-btn{width:44px;min-height:44px;height:44px;padding:0}
  .call-btn .icon{width:20px;height:20px}
  .call-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu-toggle{display:inline-grid}
  /* §5.11 / §1.2: on phones the quickbar "Kurlar" pill is the one lime fill in view, so the hero CTA turns Glass */
  .hero.on-hero .btn-primary{background:var(--glass);color:var(--hero-ink);box-shadow:inset 0 0 0 1px var(--glass-line),inset 0 1px 0 rgb(255 255 255 / .08)}
  .hero.on-hero .btn-primary:hover{background:rgb(255 255 255 / .10);filter:none}
  .header-actions{gap:8px}
  /* the menu: a full-height --surface sheet from the end side */
  .site-nav{display:none;position:absolute;top:100%;inset-inline-end:-16px;width:min(360px,100vw);height:calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    margin-top:1px;flex-direction:column;align-items:stretch;padding:8px 20px 24px;overflow-y:auto;background:var(--surface);
    border-inline-start:1px solid var(--line);box-shadow:var(--shadow-2)}
  #nav.open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list li{border-bottom:1px solid var(--line)}
  .nav-list a{display:flex;min-height:56px;padding:0 4px;border-radius:0;font-size:1.0625rem}
  .nav-list a[aria-current=page]::after{inset-inline:4px auto;width:28px;bottom:10px}
  .site-nav .langbar-menu{display:inline-flex;align-self:flex-start;margin-top:auto}
  .langbar-menu button{min-width:52px;height:38px;font-size:.9375rem}

  .hero{padding-block:24px 16px;border-end-start-radius:30px;border-end-end-radius:30px}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-photo{display:none}                     /* the storefront returns in Hakkımızda */
  .hero h1{max-width:none}
  .hero-slogan{max-width:none}
  .hero-tickers{margin-top:20px}
  .tickers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tick{grid-template-areas:"chip name name" "val val val" "buy buy trend";gap:8px;min-height:0;padding:11px 13px}
  .tick-chip{width:26px;height:26px;font-size:.75rem}
  .tick-name{font-size:.8125rem}
  .tv-sell dd{font-size:1.3125rem}
  .tick-code{display:none}

  .getapp-band{flex-wrap:wrap;border-radius:var(--radius);padding:16px}
  .getapp-copy{flex:1 1 200px}
  .getapp-band .store-badges{margin-inline-start:0}
  .getapp-qr{display:none}                      /* already on the phone: the badges are enough */

  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .about-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .row2{grid-template-columns:minmax(0,1fr)}

  .site-footer{padding-bottom:calc(var(--quickbar-h) + 36px + env(safe-area-inset-bottom));border-start-start-radius:30px;border-start-end-radius:30px}

  .quickbar{position:fixed;z-index:40;inset-inline:12px;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:4px;height:var(--quickbar-h);padding:6px;
    border-radius:999px;background:var(--qb-bg);border:1px solid var(--qb-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-2)}
  .qb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;border-radius:999px;
    font:800 .8125rem/1 var(--font-sans);color:var(--ink);text-decoration:none}
  .qb .icon{width:22px;height:22px}
  .qb-main{background:var(--accent);color:var(--on-accent)}
}
@media (max-width:420px){ .site-nav{width:100vw} }
@media (min-width:600px) and (max-width:860px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ≤ 599: phone */
@media (max-width:599px){
  .container{width:calc(100% - 32px)}
  .section{padding-block:48px 0}
  .section-head{margin-bottom:18px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-trust{gap:12px 22px;margin-top:22px;padding-top:16px}
  .hero-trust li{max-width:none;flex:1 1 40%}

  .card-head{display:block;padding:16px 16px 12px}
  .card-head .tabs{width:100%;margin-top:14px}
  .tabs{padding:4px}
  .tab{height:44px}
  .card-sub{padding:0 16px 12px}
  .tab-count{flex-basis:100%;margin-inline-start:0;text-align:start}
  .stale-banner{margin:0 12px 12px}

  /* rows become a grid: badge + name · Alış · Satış, the trend pill folds under the sell value (§5.1).
     Subgrid keeps the price columns aligned across rows; without it each row sizes itself. */
  .price-table{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px}
  .price-table thead,.price-table tbody{display:contents}
  .price-table tr{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;grid-template-areas:"unit buy sell" "unit buy trend";
    align-items:center;min-height:56px;padding:10px 14px;border-bottom:1px solid var(--line)}
  .price-table tbody tr:last-child{border-bottom:0}
  .price-table :is(th,td),.price-table :is(.th-unit,.th-trend,.th-buy,.th-sell){height:auto;padding:0;border:0;width:auto;min-width:0;background:none}
  .price-table td:first-child,.price-table td:last-child{padding-inline:0}
  .price-table tr > :nth-child(1){grid-area:unit}
  .price-table tr > :nth-child(2){grid-area:trend}
  .price-table tr > :nth-child(3){grid-area:buy}
  .price-table tr > :nth-child(4){grid-area:sell}
  .price-table thead tr{grid-template-areas:"unit buy sell";min-height:0;padding-block:10px;border-bottom:1px solid var(--line)}
  .price-table thead th{font-size:.75rem;letter-spacing:.08em}
  .price-table .th-sell{color:var(--brand-strong)}
  .price-table .th-trend{display:none}
  .price-table td.trend-cell{justify-self:end;align-self:start;margin-top:4px}
  .price-table td.sell{align-self:end;background:none}
  .price-table td.buy{font-size:1rem}
  .price-table td.sell{font-size:1.0625rem}
  .unit{gap:10px}
  .coin{width:36px;height:36px}
  .unit .name{font-size:1rem}
  tr.group,tr.error-row{grid-template-areas:none;grid-template-columns:minmax(0,1fr)}
  tr.group > th[scope=rowgroup],tr.error-row td{grid-area:auto;grid-column:1 / -1}
  tr.group{min-height:0;padding:0;border-bottom:0}
  .price-table tr.group > th[scope=rowgroup]{display:flex;align-items:center;height:40px;padding:0 14px;background:var(--surface-2);font-size:.75rem}
  tr.error-row td{padding:10px 0}
  .price-table tbody tr:has(+ tr.group){border-bottom:0}
  .price-foot{padding:14px 16px}

  .conv-card{padding:20px 16px}
  .why-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .why-card{grid-template-columns:48px minmax(0,1fr);padding:18px 16px}
  .why-icon{width:48px;height:48px}
  .why-icon .icon{width:24px;height:24px}
  .data-table{font-size:.875rem}
  .data-table th,.data-table td{padding:12px 10px}
  .data-table td.num{white-space:nowrap}
  .mv-grid{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .about-media{padding-inline-end:0}
  .stamp{position:relative;margin:-24px 16px 0 auto;max-width:240px}
  [dir=rtl] .stamp{margin:-24px auto 0 16px}
  .acc{padding-inline:16px}
  .kv-row{flex-direction:column;align-items:stretch;gap:2px}
  .kv dd{text-align:start}
  .contact-form{padding:22px 16px}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .policy-head{padding-block:32px 20px}
}
@media (max-width:399px){
  .hero-lead,.hero-trust{display:none}          /* §8.1: lead hidden below 400 px */
}

/* ============================================================ 7. RTL / Arabic */
:root[data-lang=ar] :is(.tick-vals dt,.receipt-label,.duyuru-label,.footer-h,.toc-title,.hero-badge,.data-table thead th,tr.group > th[scope=rowgroup]){text-transform:none;letter-spacing:0}
:root[data-lang=ar] :is(h1,h2,h3){line-height:1.35}                    /* Arabic needs room for its ascenders */
:root[data-lang=ar] .hero h1{letter-spacing:0}
:root[data-lang=ar] .chip-live{letter-spacing:0;font-size:.9375rem}
[dir=rtl] .amount-box input{text-align:left}
[dir=rtl] .tick .num{text-align:right}