/* ==========================================================================
   Kozmik Atlas · site.css
   TEK stil dosyasi. Derleme adimi yok, framework yok, npm yok.

   NEDEN TEK DOSYA
   ---------------
   Bu dosyanin basi eskiden `@import url("site-tokens.css")` idi. `@import`
   tarayicinin on-yukleme tarayicisi tarafindan KESFEDILEMEZ: token katmani,
   site.css inip ayristirilmadan istenmiyordu bile. Yani ilk boyama icin
   HTML -> site.css -> site-tokens.css seklinde UC ardisik gidis-donus
   gerekiyordu. Token katmani buraya, dosyanin basina alindi; zincir iki
   adima indi ve HTML'e ikinci bir <link> eklemek gerekmedi.
   `assets/site-tokens.css` yerinde duruyor ama artik yalniz bu notu tasiyor.

   KAYNAK VE ONCELIK
   -----------------
   Renkler ve olcekler `constants/design-system.ts` dosyasindan alindi
   (uygulamanin GERCEK calisan tokenlari, PaletteDark / Spacing / Radius /
   Type / Layout / Motion). Tasarim sistemi brief'i tasarim sistemi
   klasorundeki `colors_and_type.css` ikinci kaynaktir ve ayrisan her yerde
   uygulama kazandi. Ayrisma listesi dosyanin sonundadir.

   KOYU-ONCE, ACIK TEMA YOK
   ------------------------
   Uygulamanin uc kabugu da (gunduz · gece · Eflâk) gece dilinde calisiyor.
   Site de oyle. Bilincli karar: `[data-theme="light"]` blogu YOKTUR.
   Hicbir renk tarayici varsayilanina birakilmaz; zemin, metin, secim,
   baglanti, kenarlik, kaydirma cubugu acikca boyanir.
   TEK istisna KAGIT: `@media print` blogu ayni ink merdivenini beyaz kagida
   cevirir, cunku ekranin fildisi metni kagitta okunmuyor.

   YAZIM KURALI
   ------------
   Bu dosyada em dash (U+2014) ve en dash (U+2013) KULLANILMAZ. Repo geneli
   kural. Ayirici olarak "·" ya da virgul.
   ========================================================================= */


/* ############################################################################
   BOLUM A · TOKEN KATMANI
   Bilesenler ham degeri degil bu rolleri okur.
   ######################################################################### */


/* ============================================================================
   1. RENK · HAM MERDIVENLER
   design-system.ts icindeki `ink` / `ivory` / `amber` / `lapis` / `planet`
   sabitlerinden birebir.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- Ink. Kraliyet laciverti. Asla saf siyah degil. -------------------- */
  --ink-900: #07080F;   /* en derin · SAYFA ZEMINI */
  --ink-800: #061027;   /* gece arka plani */
  --ink-700: #0B1B42;   /* yuzey-1 · kartlar */
  --ink-600: #0E2458;   /* yuzey-2 · kart ustu kart */
  --ink-500: #122D6E;   /* yuzey-3 · hover / pressed */
  --ink-400: #3D4660;   /* guclu hairline */
  --ink-300: #5A6480;   /* muted metin · YALNIZ dekoratif glif */
  --ink-200: #8E97AE;   /* ikincil metin */
  --ink-100: #BFC5D4;   /* ucuncul basliklar */

  /* --- Ivory. Sicak on plan. Asla saf beyaz degil. ----------------------- */
  --ivory-50:  #F8F3E4; /* en yuksek vurgu · baslik, buyuk sayi */
  --ivory-100: #EDE6D3; /* birincil metin */
  --ivory-200: #D9CFB4; /* ikincil metin */
  --ivory-300: #B5A988; /* eskimis kagit vurgusu */

  /* --- Amber. TEK sinyal vurgusu. Lamba isigi. --------------------------- */
  --amber-500: #E8A24A;
  --amber-400: #F2B863;                      /* hover */
  --amber-600: #C7873A;                      /* pressed */
  --amber-100: rgba(232, 162, 74, 0.13);     /* soluk amber yikama */
  --amber-wash-08: rgba(232, 162, 74, 0.08);
  --amber-wash-20: rgba(232, 162, 74, 0.20);
  --amber-wash-30: rgba(232, 162, 74, 0.30);

  /* --- Lapis. YALNIZ gok verisi cizgileri. UI vurgusu DEGIL. ------------- */
  --lapis-500: #7BA8C9;
  --lapis-400: #9BC0DC;
  --lapis-600: #5B8AAE;
  --lapis-100: rgba(123, 168, 201, 0.13);

  /* --- Gezegen tonlari. Cark ve glif icin. ------------------------------- */
  --p-sun:     #E8A24A;   /* = amber-500, Gunes lambadir */
  --p-moon:    #D9CFB4;   /* = ivory-200 */
  --p-mercury: #9BB39E;   /* soluk adacayi */
  --p-venus:   #D5A7B0;   /* tozlu gul */
  --p-mars:    #C76B5E;   /* terracotta, asla kirmizi degil */
  --p-jupiter: #C99B6E;   /* sicak ten */
  --p-saturn:  #6E7896;   /* serin arduvaz */
  --p-uranus:  #7BA8C9;   /* = lapis-500 */
  --p-neptune: #8E9DC2;
  --p-pluto:   #8C7286;   /* tozlu erik */

  /* --- Semantik. Ayni sicak-serin ekseninden. ---------------------------- */
  --success: #7DAE82;     /* yosun yesili, sicak */
  --caution: #D9A24E;     /* amber ailesinden */
  --danger:  #C76B5E;     /* terracotta, asla kirmizi degil */
  --info:    #7BA8C9;     /* = lapis-500 */

  /* Koyu zeminde METIN derecesi. Yuzey/sinir icin yukaridakiler kalir.
     design-system.ts olcumu: ink-700 panel ustunde 7.05:1, ink-800 sayfa
     zemininde 7.93:1. */
  --danger-text:  #E89184;
  --caution-text: #D9A24E;
  --success-text: #7DAE82;


  /* ==========================================================================
     2. RENK · ROL TOKENLARI
     Bilesenler HAM merdiveni degil bu rolleri okur.
     ======================================================================= */

  --bg:            var(--ink-900);   /* sayfanin zemini */
  --bg-deep:       var(--ink-900);   /* en dip katman */
  --bg-night:      var(--ink-800);   /* gece bandi, bolum ayirici zemin */
  --surface-1:     var(--ink-700);   /* kart */
  --surface-2:     var(--ink-600);   /* kart ustu kart */
  --surface-3:     var(--ink-500);   /* hover / pressed */
  --surface-glass: rgba(6, 16, 39, 0.72);  /* yapiskan baslik, blur arkasi */

  --fg-hi:     var(--ivory-50);    /* baslik, buyuk sayi */
  --fg-1:      var(--ivory-100);   /* govde metni */
  --fg-2:      var(--ivory-200);   /* ikincil */
  --fg-3:      var(--ivory-300);   /* eskimis kagit vurgusu */
  --fg-mute:   var(--ink-200);     /* soluk ama BILGI TASIYAN metin */
  --fg-dim:    var(--ink-300);     /* YALNIZ tek glif dekor: chevron, "·" */
  --fg-accent: var(--amber-500);
  --fg-data:   var(--lapis-500);   /* gok verisi, derece, koordinat */
  --fg-on-accent: var(--ink-900);  /* amber zemin uzerindeki metin */

  --link:          var(--amber-500);
  --link-hover:    var(--amber-400);
  --link-active:   var(--amber-600);
  --link-underline: rgba(232, 162, 74, 0.38);

  --selection-bg: rgba(232, 162, 74, 0.26);
  --selection-fg: var(--ivory-50);

  --focus-ring:   var(--amber-400);
  --focus-offset: var(--ink-900);


  /* ==========================================================================
     3. KENARLIK · HAIRLINE
     Kalinlik ve renk AYRI tokenlar. Hairline SEYREK kullanilir.
     ======================================================================= */

  --hairline:         rgba(237, 230, 211, 0.08);  /* varsayilan, en sessiz */
  --hairline-default: rgba(237, 230, 211, 0.13);
  --hairline-strong:  rgba(237, 230, 211, 0.16);
  --hairline-heavy:   rgba(237, 230, 211, 0.20);
  --hairline-amber:   rgba(232, 162, 74, 0.32);
  --hairline-lapis:   rgba(123, 168, 201, 0.35);

  --rule-1: 1px;   /* standart hairline */
  --rule-2: 2px;   /* vurgulu ayirici, focus halkasi */
  --rule-3: 3px;   /* bolum agirligi, alinti sol cizgisi */


  /* ==========================================================================
     4. GOLGE VE PERDE
     Koyu temada yukselti ONCE acikliktan gelir (yuzey-1 > yuzey-2 > yuzey-3).
     Golge yalnizca yuzen ogeler icin, ink-900 tabanli.
     ======================================================================= */

  --shadow-sm: 0 1px 2px rgba(7, 8, 15, 0.40);
  --shadow-md: 0 8px 24px rgba(7, 8, 15, 0.50);
  --shadow-lg: 0 24px 64px rgba(7, 8, 15, 0.60);
  --shadow-amber: 0 0 0 var(--rule-1) var(--hairline-amber),
                  0 12px 40px rgba(232, 162, 74, 0.10);

  /* Perde. design-system.ts `bg.scrim` degeri birebir. */
  --scrim:      rgba(7, 9, 26, 0.50);
  --scrim-soft: rgba(7, 9, 26, 0.22);


  /* ==========================================================================
     5. TIPOGRAFI · AILELER
     Ucu de Google Fonts'ta. Yedek yigin, font gelmezse bile sayfa ayni
     karakterde dursun diye secildi (Fraunces yerine Iowan Old Style, vb.).
     ======================================================================= */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, monospace;


  /* ==========================================================================
     6. TIPOGRAFI · AKICI OLCEK
     Kirilma noktasi YOK. Tek bir clamp() akisi: 380px genislikte ALT deger,
     1280px genislikte UST deger, arasi dogrusal. Media query ile kademe
     atlanmaz, boylece uydurulmus bir kirilma noktasi da yoktur.

     ALT degerler uygulamanin gercek Type tokenlarindan gelir
     (design-system.ts): caption 14 · bodySm 14 · body 16 · bodyLg 18 ·
     headline 20 · title 24 · display 32 · displayXl 44.
     UST degerler web icin secildi; masaustunde okuma mesafesi daha uzak.

     rem tabanlidir, kullanicinin tarayici punto ayari calisir.
     ======================================================================= */

  /* 14px -> 15px */
  --t-caption:    clamp(0.875rem, 0.8486rem + 0.1111vw, 0.9375rem);
  /* 14px -> 15px, eyebrow ile ayni punto, farkli iz ve donusum */
  --t-eyebrow:    clamp(0.875rem, 0.8486rem + 0.1111vw, 0.9375rem);
  /* 14px -> 15px */
  --t-body-sm:    clamp(0.875rem, 0.8486rem + 0.1111vw, 0.9375rem);
  /* 16px -> 18px · GOVDE TABANI, 16'nin altina asla inmez */
  --t-body:       clamp(1rem, 0.9472rem + 0.2222vw, 1.125rem);
  /* 18px -> 21px · giris paragrafi */
  --t-body-lg:    clamp(1.125rem, 1.0458rem + 0.3333vw, 1.3125rem);
  /* 20px -> 24px */
  --t-headline:   clamp(1.25rem, 1.1444rem + 0.4444vw, 1.5rem);
  /* 24px -> 30px */
  --t-title:      clamp(1.5rem, 1.3417rem + 0.6667vw, 1.875rem);
  /* 32px -> 44px */
  --t-display:    clamp(2rem, 1.6833rem + 1.3333vw, 2.75rem);
  /* 44px -> 76px · yalnizca hero */
  --t-display-xl: clamp(2.75rem, 1.9056rem + 3.5556vw, 4.75rem);
  /* 14px -> 15px · derece ve koordinat, mono */
  --t-degree:     clamp(0.875rem, 0.8486rem + 0.1111vw, 0.9375rem);

  /* --- Satir yuksekligi. Birimsiz. Web okumasi mobilden rahat olmali. ---- */
  --lh-display-xl: 1.06;
  --lh-display:    1.12;
  --lh-title:      1.22;
  --lh-headline:   1.32;
  --lh-body-lg:    1.55;
  --lh-body:       1.68;   /* uzun metin icin rahat */
  --lh-body-sm:    1.55;
  --lh-caption:    1.45;
  --lh-mono:       1.5;

  /* --- Harf izi. em cinsinden, punto ile birlikte olceklenir. ------------ */
  --track-display-xl: -0.02em;
  --track-display:    -0.015em;
  --track-title:      -0.01em;
  --track-headline:   -0.005em;
  --track-body:       0;
  --track-label:      -0.002em;
  --track-eyebrow:    0.08em;
  --track-mono:       0;

  /* --- Agirlik. Fraunces ve Inter Tight degisken eksenli. ---------------- */
  --w-display:  400;
  --w-title:    500;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* --- Olcu satiri. Okunabilir satir uzunlugu. --------------------------- */
  --measure:        65ch;   /* varsayilan akan metin */
  --measure-narrow: 46ch;   /* giris paragrafi, alinti */
  --measure-wide:   74ch;   /* teknik liste, tablo aciklamasi */


  /* ==========================================================================
     7. BOSLUK
     4px taban izgarasi. design-system.ts `Spacing` ile birebir.
     ======================================================================= */

  --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:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Akici bosluklar. Ayni 380 -> 1280 akisi. */
  /* 20px -> 40px · ekran kenar bosluğu, Layout.gutter tabanli */
  --gutter:        clamp(1.25rem, 0.7222rem + 2.2222vw, 2.5rem);
  /* 64px -> 128px · bolumler arasi dikey nefes */
  --space-section: clamp(4rem, 2.3111rem + 7.1111vw, 8rem);
  /* 32px -> 56px · bolum ici blok araligi */
  --space-block:   clamp(2rem, 1.3667rem + 2.6667vw, 3.5rem);


  /* ==========================================================================
     8. KOSE YARICAPI
     design-system.ts `Radius` merdiveni.
     ======================================================================= */

  --r-xxs:  4px;    /* mikro rozet */
  --r-xs:   6px;    /* kucuk cip, etiket */
  --r-sm:   8px;    /* cip, kucuk buton, input */
  --r-sm2:  10px;
  --r-sm3:  12px;
  --r-md:   14px;   /* kart, sheet */
  --r-md2:  16px;
  --r-md3:  18px;
  --r-lg2:  20px;
  --r-lg:   22px;   /* modal, buyuk gorsel */
  --r-xl:   32px;   /* one cikan yuzey */
  --r-pill: 999px;


  /* ==========================================================================
     9. YERLESIM
     Icerik sutunu tavanlari design-system.ts `ContentWidth` degerleridir.
     ======================================================================= */

  --content-text:  640px;   /* akan metin, kartlar */
  --content-sheet: 560px;   /* form, dar blok */
  --content-scene: 720px;   /* gorsel sahne tavani */
  --shell-max:     1120px;  /* sayfa kabugu, iki sutunlu bolumler icin */
  --tap-min:       44px;    /* Apple HIG dokunma hedefi */
  /* rem, px DEGIL: yapiskan baslik kullanicinin punto ayariyla BUYUYOR.
     Sabit 56px'te cipa hedefi buyuk puntoda basligin altinda kaliyordu.
     Olculdu: .hdr gercek yuksekligi kok 16px'te 59px, 20'de 67px, 24'te
     75px, 32'de 92px iken scroll-padding uc durumda da 72px hesaplaniyordu;
     kok 24'te 3px, kok 32'de 20px baslik kirpiyordu. 3.5rem kok 16px'te
     ayni 56px'tir, yani varsayilan gorunum degismez. */
  --header-h:      3.5rem;


  /* ==========================================================================
     10. HAREKET
     design-system.ts `Motion` degerleri birebir.
     ======================================================================= */

  --ease-quiet: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-firm:  cubic-bezier(0.45, 0.05, 0.15, 1);

  --dur-fast:  120ms;
  --dur-tap:   180ms;
  --dur-base:  280ms;
  --dur-sheet: 340ms;
  --dur-wheel: 600ms;
}


/* ============================================================================
   11. TABAN KATMANI
   Hicbir renk tarayici varsayilanina birakilmaz.
   ========================================================================= */

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

html {
  background-color: var(--bg);
  color: var(--fg-1);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Yapiskan baslik altinda cipa hedefi kirpilmasin */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  accent-color: var(--amber-500);
  scrollbar-color: var(--ink-400) var(--ink-900);
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

:focus-visible {
  outline: var(--rule-2) solid var(--focus-ring);
  outline-offset: var(--space-1);
  border-radius: var(--r-xs);
}

/* Tasma sigortasi. Yalnizca tek basina satira sigmayan bir kelime varsa
   devreye girer, normal satirlari DEGISTIRMEZ.
   `break-word` DEGIL `anywhere`, ve fark oyle ince degil: ikisi de ayni
   yerde sarar ama min-content olcusunu YALNIZ `anywhere` kucultur. Izgara
   ve flex kutulari genisligini min-content'ten hesapliyor, yani
   `break-word` ile kutu hala en uzun kelime kadar genis kaliyor ve
   kapsayicisini asiyordu. Olculdu (320px / kok 32px): "Astrokartografi"
   basligi 240px'lik karti 274px'e itiyordu; `anywhere` ile 0 tasma. */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, figcaption, blockquote, summary, th, td, caption {
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fg-hi);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  text-wrap: balance;
}

p {
  margin: 0;
  color: var(--fg-1);
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: var(--rule-1);
  text-underline-offset: 0.18em;
  transition: color var(--dur-tap) var(--ease-quiet),
              text-decoration-color var(--dur-tap) var(--ease-quiet);
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

a:active {
  color: var(--link-active);
}

strong, b {
  color: var(--fg-hi);
  font-weight: var(--w-semibold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-2);
}

hr {
  border: 0;
  border-top: var(--rule-1) solid var(--hairline);
  margin: var(--space-block) 0;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  margin: 0;
  padding-left: var(--space-6);
  color: var(--fg-1);
}

/* Numarali liste markerlari BILGI tasiyor (gizlilik bolumunde "kalan iki uc
   nokta" kendinden onceki maddelere atif yapiyor), dolayisiyla --fg-dim'in
   "yalniz tek glif dekor" tanimina girmiyorlar. Olculdu: --fg-dim (#5A6480)
   sayfa zemininde (#07080F) 3.40:1, gece bandinda (#061027) 3.21:1, yani
   14px normal metin icin gereken 4.5:1'in altinda. --fg-mute (#8E97AE) ayni
   iki zeminde 6.84:1 ve 6.47:1, kart yuzeyinde (#0B1B42) 5.75:1. */
li::marker {
  color: var(--fg-mute);
}

blockquote {
  margin: 0;
  padding-left: var(--space-5);
  border-left: var(--rule-3) solid var(--hairline-amber);
  color: var(--fg-2);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

pre {
  overflow-x: auto;
  background-color: var(--surface-1);
  border: var(--rule-1) solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--space-4);
  margin: 0;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
}

/* Tiklanabilir her oge en az 44pt efektif hedef tasir. */
button, [role="button"], a.btn {
  min-height: var(--tap-min);
  cursor: pointer;
}

/* Sayilarin hizalandigi her yer. */
table, th, td, time, data, output, meter, progress {
  font-variant-numeric: tabular-nums;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: var(--fg-1);
}

th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--rule-1) solid var(--hairline);
}

th {
  color: var(--fg-mute);
  font-weight: var(--w-semibold);
  font-size: var(--t-caption);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}


/* ============================================================================
   12. TIPOGRAFI SINIFLARI
   Anlamsal isim, ham punto degil. Fraunces degisken eksenleri (opsz, SOFT)
   uygulamadaki Type tokenlariyla ayni ayarda.
   ========================================================================= */

.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--track-display-xl);
  font-weight: var(--w-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--fg-hi);
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: var(--w-display);
  font-variation-settings: "opsz" 96, "SOFT" 50;
  color: var(--fg-hi);
}

.t-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
  font-weight: var(--w-title);
  font-variation-settings: "opsz" 48, "SOFT" 40;
  color: var(--fg-hi);
}

.t-headline {
  font-family: var(--font-ui);
  font-size: var(--t-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--track-headline);
  font-weight: var(--w-semibold);
  color: var(--fg-hi);
}

.t-body-lg {
  font-family: var(--font-ui);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--track-body);
  font-weight: var(--w-regular);
  color: var(--fg-1);
}

.t-body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-weight: var(--w-regular);
  color: var(--fg-1);
}

.t-body-sm {
  font-family: var(--font-ui);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--track-body);
  font-weight: var(--w-regular);
  color: var(--fg-2);
}

.t-label {
  font-family: var(--font-ui);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--track-label);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-caption);
  letter-spacing: var(--track-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-caption {
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-regular);
  color: var(--fg-mute);
}

.t-quote {
  font-family: var(--font-display);
  font-size: var(--t-headline);
  line-height: var(--lh-body-lg);
  font-weight: 350;
  font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 60;
  color: var(--fg-2);
}

/* Mono. Derece, koordinat, efemeris. Sayilar HER ZAMAN hizali. */
.t-mono,
.t-degree {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01";
  letter-spacing: var(--track-mono);
}

.t-mono {
  font-size: var(--t-body-sm);
  line-height: var(--lh-mono);
  color: var(--fg-2);
}

.t-degree {
  font-size: var(--t-degree);
  line-height: var(--lh-mono);
  font-weight: var(--w-medium);
  color: var(--fg-data);
}

/* Buyuk sayi. Hero istatistigi, sayac. */
.t-numeral {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: var(--w-display);
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg-hi);
}


/* ============================================================================
   13. KUCUK YARDIMCILAR
   ========================================================================= */

.tabular { font-variant-numeric: tabular-nums; }

.measure        { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.measure-wide   { max-width: var(--measure-wide); }

.fg-hi     { color: var(--fg-hi); }
.fg-1      { color: var(--fg-1); }
.fg-2      { color: var(--fg-2); }
.fg-3      { color: var(--fg-3); }
.fg-mute   { color: var(--fg-mute); }
.fg-accent { color: var(--fg-accent); }
.fg-data   { color: var(--fg-data); }

.surface-1 { background-color: var(--surface-1); }
.surface-2 { background-color: var(--surface-2); }
.surface-3 { background-color: var(--surface-3); }

.hairline-t { border-top: var(--rule-1) solid var(--hairline); }
.hairline-b { border-bottom: var(--rule-1) solid var(--hairline); }

/* Ekran okuyucuya gorunur, goze gorunmez. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================================================
   14. HAREKETI AZALT
   Kullanici az hareket istiyorsa animasyon SUSAR. Uygulamadaki
   "reduce-motion fallback ZORUNLU" kuralinin site karsiligi.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  1ms;
    --dur-tap:   1ms;
    --dur-base:  1ms;
    --dur-sheet: 1ms;
    --dur-wheel: 1ms;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   AYRISMA KAYDI · uygulama tokenlari vs tasarim sistemi brief'i
   Ayrisan her yerde UYGULAMA kazandi. Kayit, brief'e bakan birinin
   "renkler tutmuyor" diye geri donmemesi icin duruyor.

   1. Ink merdiveninin TAMAMI ayrisiyor. Brief "Aurora" ink'i (soguk gri-mavi),
      uygulama "kraliyet laciverti" (2026-08-23 kalibrasyonu, doygunluk %27-39
      -> %72). Ornek: 700 brief #131A30 · uygulama #0B1B42.
   2. ivory · amber · lapis · gezegen tonlari: BIREBIR AYNI.
   3. Semantik metin dereceleri (danger/caution/success text) brief'te YOK,
      uygulamada olculerek eklendi.
   4. Punto olcegi ayrisiyor. Brief tabani 12px, uygulama tabani 14px
      (2026-08-31 karari: okunan metin >= 14). Brief 12/13/15/17,
      uygulama 14/16/18/20. Site uygulamayi izliyor, govde 16'dan baslar.
   5. Bosluk · yaricap · yerlesim · hareket: ayni sayilar, uygulama
      yaricapta daha genis bir merdiven tasiyor.
   6. Brief camsi tab bar rengini rgba(11, 17, 36, 0.72) veriyor, uygulama
      rgba(14, 18, 32, 0.72). Site ink-800 tabanli kendi degerini kullanir.
   7. Brief bir acik tema tasiyor, uygulama artik uc kabukta da gece dilinde.
      Sitede acik tema YOK.
   ========================================================================= */


/* ############################################################################
   BOLUM B · SAYFA KATMANI
   Burada yeni renk TANIMLANMAZ, yalniz yukaridaki roller kullanilir.
   ######################################################################### */

/* --------------------------------------------------------------------------
   0. Sayfa kabugu

   KOK SEVIYESINDE KIRPMA YOK. Eskiden `html, body { overflow-x: clip }`
   vardi. Punto buyutuldugunde tasan icerigi bu satir SESSIZCE kirpiyordu:
   kaydirma cubugu da cikmadigi icin tasan parca geri getirilemiyordu.
   Olculdu (320px genislik, kok punto degistirilerek): kok 32px'te dil
   degistirici tamamen ekran disina cikiyor, 15 oge tasiyor ve
   documentElement.scrollWidth 320'de kaliyordu, yani kayip sessizdi.

   Bunun yerine tasmanin KAYNAKLARI kapatildi (bkz. .hdr__inner sarma,
   .bignum__v clamp tabani, .link-lg sarma, govde katmanindaki
   overflow-wrap sigortasi) ve tasabilecek her kutu KENDI `overflow-x: auto`
   kutusunda duruyor (.rail, .tbl-wrap). Artik beklenmedik bir tasma kalirsa
   tarayici kaydirma cubugu gosterir: gorunur bir kusur, sessiz bir kayip
   degil. Tam ekrani kaplayan sahne kendi icinde kirpilir (.hero).

   Duzeltmeden SONRA yeniden olculdu (320px, kok 16/20/24/32): dort durumda
   da tasan oge 0 ve scrollWidth = clientWidth = 320, yani kirpma kalkmasina
   ragmen yatay kaydirma cubugu ORTAYA CIKMIYOR. Dil degistirici dort
   durumda da tam gorunur (eskiden kok 32'de 0px goruntuydu).
   ----------------------------------------------------------------------- */

body {
  background-color: var(--bg);
  /* Gecenin dibi. Tek bir yikama, sayfanin uzunlugu boyunca sabit. */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(11, 27, 66, 0.55) 0%, rgba(7, 8, 15, 0) 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--text {
  max-width: calc(var(--content-text) + 2 * var(--gutter));
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 60;
  transform: translateY(-200%);
  background-color: var(--amber-500);
  color: var(--fg-on-accent);
  font-weight: var(--w-semibold);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-pill);
  text-decoration: none;
}

.skip:focus-visible {
  transform: translateY(0);
  color: var(--fg-on-accent);
}


/* --------------------------------------------------------------------------
   1. Baslik cubugu
   ----------------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--surface-glass);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: var(--rule-1) solid var(--hairline);
}

/* Sarabilir. Punto buyudugunde marka ile dil anahtari tek satira sigmiyor;
   sigmadigi anda anahtar alt satira iner, ekran disina TASMAZ. Varsayilan
   puntoda ikisi de ayni satirda kalir, yani gorunum degismez. */
.hdr__inner {
  min-height: var(--header-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}

/* Flex ogesinin varsayilan `min-width: auto` degeri, icerigi kadar
   daralmasina izin vermiyordu. */
.hdr__inner > * {
  min-width: 0;
}

.hdr__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--fg-hi);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--t-headline);
  font-weight: var(--w-title);
  font-variation-settings: "opsz" 48, "SOFT" 40;
  letter-spacing: var(--track-title);
  /* `nowrap` DEGIL: dar ekranda ya da buyuk puntoda marka iki satira iner.
     Sigdigi surece zaten tek satirda kalir. */
  padding-block: var(--space-3);
}

.hdr__brand:hover {
  color: var(--fg-hi);
}

.hdr__glyph {
  color: var(--amber-500);
  font-size: 0.86em;
}

.hdr__nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}

.hdr__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  text-decoration: none;
}

.hdr__nav a:hover {
  color: var(--fg-hi);
  background-color: rgba(237, 230, 211, 0.05);
}

.lang {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: var(--rule-1) solid var(--hairline-strong);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-label);
  text-decoration: none;
  white-space: nowrap;
}

.lang:hover {
  color: var(--fg-hi);
  border-color: var(--hairline-amber);
}

.lang__mark {
  color: var(--amber-500);
  font-size: 1.05em;
  line-height: 1;
}

.hdr__nav + .lang {
  margin-inline-start: var(--space-3);
}

@media (min-width: 62rem) {
  .hdr__nav {
    display: flex;
  }
}


/* --------------------------------------------------------------------------
   2. Acilis · gokyuzu ekrani kaplar
   ----------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  /* SUTUN TAVANI. Burada `grid-template-columns` YOKTU; ortuk sutun `auto`
     kaliyor, `auto`nun taban olcusu de ogenin min-content katkisi. Yani en
     inatci grid ogesi sutunu kabugun disina itebiliyordu. OLCULDU (320 CSS
     piksel, kok yazi tipi 32px yani iki kat): sutun 380.8px'e cikiyor,
     `.hero__content` 320px'lik ekrandan 60.8px tasiyor, h1 ve chip'ler
     saginda 20.8px kaybediyordu. `overflow: clip` bu tasmayi kirpiyor ve
     kaydirma cubugu da vermiyor (belge scrollWidth'i 320'de kaliyordu),
     yani metin SESSIZCE gidiyordu. minmax(0, 1fr) tabani sifira cekiyor:
     sutun artik kabuktan genis olamaz, ogeler daralir ve satira sarar. */
  grid-template-columns: minmax(0, 1fr);
  /* Sahne en tepeden baslar: yapiskan baslik saydam, gokyuzu altindan gecer. */
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + var(--space-10)) var(--space-8);
  overflow: clip;
}

.hero__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #04050B;
}

/* Taban katmani `canvas { height: auto }` diyor; sahne icin ezilir. */
.hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 2000ms var(--ease-quiet);
}

[data-sky-state="live"] .hero__canvas {
  opacity: 1;
}

/* Gokyuzu yaziyi yutmasin: metnin arkasi asagi dogru koyulasir. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(7, 8, 15, 0.42) 0%,
      rgba(7, 8, 15, 0.10) 26%,
      rgba(7, 8, 15, 0.62) 72%,
      rgba(7, 8, 15, 0.94) 100%);
}

/* Kabugun sol kenarina hizali kalir: baslik, govde ve olcum ayni cizgide
   baslar. Genislik tavani tek tek ogelere verilir, kapsayiciya degil. */
.hero__content {
  position: relative;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--space-6);
}

/* METNIN KENDI ZEMINI.
   Acilistaki eyebrow, h1 ve lede'nin altinda kendi zemini yoktu; dogrudan
   canli canvas'in uzerinde duruyorlardi ve hero__veil tam o bantta en ince
   halindeydi (%26 duraginda alfa 0.10). Canvas ayni bolgeye Ay diskini
   (#EDE6D3), Gunes diskini (#E8A24A) ve ivory etiketleri ciziyor, yani
   kontrast zamana ve konuma gore dalgalaniyordu. Olculen en kotu hal:
   h1 1.54:1, lede 1.10:1.

   Perdeyi topluca koyultmak gokyuzunu bogardi. Onun yerine plaka METNIN
   KENDI kutusuna bagli: dikeyde metin blogu kadar (asagida yumusayarak
   biter, cunku readout ve chip'lerin kendi zemini var), yatayda soldan
   baslar ve metin bittikten sonra sifira gider. Genis ekranda gokyuzunun
   sag ucte biri hic dokunulmadan kalir.

   Alfa UYDURULMADI, hesaplandi. En parlak olasi zemin dolunay diski
   (#EDE6D3). Gereken toplam perde alfasi: h1 (76px, buyuk metin, 3:1) icin
   0.40 · lede (21px, normal metin, 4.5:1) icin 0.64 · eyebrow (#E8A24A,
   normal metin) icin 0.73. Plaka 0.84, veil'in en ince yerinde bile toplami
   0.86'ya cikariyor. Sonuc (en kotu an): h1 11.9:1 · lede 8.5:1 ·
   eyebrow 6.1:1.

   SECICI NEDEN `.hero >` ILE BASLIYOR: `index.html` icinde ayni plakayi
   kuran satir ici bir <style> blogu da var ve o blok yalniz TR sayfasinda.
   Ikisi ayni pseudo ogeye YAZDIGI icin tarayici ozellik ozellik karistiriyor
   ve ortaya ikisinden de farkli, bozuk bir kutu cikiyordu (olculdu: satir ici
   blogun plakasi buradaki dikey maskeyi yiyor, eyebrow bandinda plaka
   alfasi 0.58 yerine 0.19'a dusuyordu). Ozgulluk (0,2,0) ile bu dosya
   TEK BASINA kazaniyor, yani TR ve EN ayni plakayi goruyor ve sonuc
   ongorulebilir. Satir ici blok silinince burada degistirilecek bir sey
   yok; bu satir dogru calismaya devam eder. */
.hero > .hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--space-12));
  bottom: calc(-1 * var(--space-10));
  left: 0;
  right: 0;
  width: auto;
  /* Solda kabugun disina tasar ki plakanin sol kenarinda gorunur bir
     dikey ek yeri olusmasin: gradyan zaten sifir alfayla basliyor. */
  margin-inline: calc(-1 * var(--gutter)) 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(7, 8, 15, 0)    0,
    rgba(7, 8, 15, 0.84) calc(2 * var(--gutter)),
    rgba(7, 8, 15, 0.84) calc(2 * var(--gutter) + 36rem),
    rgba(7, 8, 15, 0)    calc(2 * var(--gutter) + 62rem));
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0,
    rgb(0, 0, 0)     var(--space-12),
    rgb(0, 0, 0)     calc(var(--space-12) + 22rem),
    rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0,
    rgb(0, 0, 0)     var(--space-12),
    rgb(0, 0, 0)     calc(var(--space-12) + 22rem),
    rgba(0, 0, 0, 0) 100%);
}

.hero__eyebrow {
  color: var(--amber-500);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--track-display-xl);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  max-width: 18ch;
}

.hero__lede {
  color: var(--fg-2);
  max-width: 46ch;
}

.hero__chips {
  max-width: 52rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-pill);
  /* 0.55 DEGIL 0.72 (.readout ile ayni deger). Telefonda chip'ler ufuk
     cizgisinin ustunde kaliyor, yani arkalarindan tam parlak bir disk
     gecebiliyor. Olculdu, en kotu hal (dolunay diski, perde en ince):
     0.55'te 3.70:1, yani 14px metin icin gereken 4.5:1'in altinda.
     0.72'de 6.11:1. */
  background-color: rgba(6, 16, 39, 0.72);
  color: var(--fg-2);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background-color: var(--amber-500);
  flex: none;
}

/* Canli olcum. Motor konusmadiysa hic gorunmez: sahte satir kalmaz.
   Ama `display: none` ile baslayip `flex`e gecmek, kutu belirdiginde
   altindaki chip'leri ve acilis alt satirini ASAGI ITIYORDU. Artik kutu
   ilk boyamadan itibaren YERINI TUTUYOR, yalnizca gorunmez duruyor:
   sayfa kaymiyor, sahte satir da gorunmuyor.
   Iki cikis kapisi acik: JS hic kosmadiysa (`html.js` sinifi yok) ve motor
   "unavailable" dediyse kutu tamamen kalkar, bos bosluk kalmaz. */
.readout {
  display: flex;
  visibility: hidden;
  max-width: 46rem;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--rule-1) solid var(--hairline-amber);
  border-radius: var(--r-md);
  background-color: rgba(6, 16, 39, 0.72);
  box-shadow: var(--shadow-md);
}

[data-sky-state="live"] .readout {
  visibility: visible;
}

html:not(.js) .readout,
[data-sky-state="unavailable"] .readout {
  display: none;
}

.readout__label {
  flex-basis: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--amber-500);
}

.readout__cell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.readout__k {
  font-size: var(--t-caption);
  color: var(--fg-mute);
}

.readout__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01";
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  color: var(--lapis-400);
}

.readout__foot {
  flex-basis: 100%;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-mute);
}

/* Sutunu 380.8px'e sisiren oge BUYDU (bkz. `.hero` sutun tavani notu):
   `nowrap` bir esnek satir, min-content'i alt ogelerin min-content
   TOPLAMI oluyordu. OLCULDU (320px, kok 32px): 23.1 (caption) + 16 (gap) +
   261.7 (scrollhint) + 80 (gutter) = 380.8. Sarma acilinca satir iki kata
   iner. Genis ekranda davranis AYNI: iki oge tek satira sigdigi surece
   `space-between` degismez (olculdu, 1280px'te .hero__foot 1120x65 ve
   scrollhint 1005,155 ile birebir ayni kaldi). */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--rule-1) solid var(--hairline);
}

.hero__caption {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-mute);
  max-width: 48ch;
}

.scrollhint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  border-radius: var(--r-sm);
  color: var(--fg-3);
  font-size: var(--t-caption);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  /* `white-space: nowrap` KALDIRILDI. Buyutulmus yazi tipinde bu etiket
     tek satirda 261.7px istiyor, oysa 320px'lik ekranda gutter'lardan
     sonra 240px kaliyor; sarma yasakken fazlalik kirpiliyordu. Sigdigi
     her genislikte zaten tek satirda kalir, sigmadiginda sarar. */
}

.scrollhint:hover {
  color: var(--amber-400);
}

.scrollhint__arrow {
  display: inline-block;
  animation: drift 3200ms var(--ease-quiet) infinite;
}

@keyframes drift {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}


/* --------------------------------------------------------------------------
   3. Bolumler
   ----------------------------------------------------------------------- */

.sec {
  padding-block: var(--space-section);
  border-top: var(--rule-1) solid var(--hairline);
}

.sec--night {
  background-color: var(--bg-night);
}

.sec--flush {
  border-top: 0;
}

.sec__head {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  margin-bottom: var(--space-block);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-caption);
  letter-spacing: var(--track-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  color: var(--amber-500);
}

.sec h2 {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 96, "SOFT" 50;
  max-width: 22ch;
}

.sec h3 {
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-weight: var(--w-title);
  font-variation-settings: "opsz" 48, "SOFT" 40;
}

.lede {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-2);
  max-width: var(--measure);
}

.prose {
  display: grid;
  gap: var(--space-5);
  max-width: var(--measure);
}

.prose p {
  color: var(--fg-1);
}

/* `minmax(0, 1fr)` SUS DEGIL: izgara ogesinin varsayilan `min-width: auto`
   degeri, icindeki yatay kaydirma kutusunun (rail, tablo) kabugu asmasina
   izin veriyordu. Olculdu: rail 2676px'e buyuyup sayfanin disina tasiyordu. */
.stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-block);
}

.stack > * {
  min-width: 0;
}


/* --------------------------------------------------------------------------
   4. Kartlar, kunye satirlari, notlar
   ----------------------------------------------------------------------- */

.card {
  padding: var(--space-6);
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-md);
  background-color: var(--surface-1);
}

.spec {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-md);
  background-color: var(--surface-1);
  overflow: hidden;
}

.spec > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-top: var(--rule-1) solid var(--hairline);
}

.spec > div:first-child {
  border-top: 0;
}

.spec dt {
  font-size: var(--t-caption);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.spec dd {
  margin: 0;
  color: var(--fg-1);
  font-size: var(--t-body-sm);
}

.spec dd.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lapis-400);
}

@media (min-width: 42rem) {
  .spec > div {
    grid-template-columns: 14rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

.note {
  padding: var(--space-5);
  border-left: var(--rule-3) solid var(--hairline-lapis);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background-color: rgba(123, 168, 201, 0.06);
  color: var(--fg-2);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  max-width: var(--measure-wide);
}

.note--amber {
  border-left-color: var(--hairline-amber);
  background-color: var(--amber-wash-08);
}

.note__title {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--fg-hi);
  font-weight: var(--w-semibold);
  font-size: var(--t-body-sm);
}

.note ul {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
}


/* --------------------------------------------------------------------------
   5. Sayilar
   ----------------------------------------------------------------------- */

.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-1);
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-md);
  background-color: var(--hairline);
  overflow: hidden;
}

.stat {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6);
  background-color: var(--surface-1);
}

.stat__v {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  font-weight: var(--w-display);
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg-hi);
}

.stat--lead .stat__v {
  color: var(--amber-500);
}

.stat__l {
  font-size: var(--t-body-sm);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}

.stat__n {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-mute);
}

/* Sayfanin en buyuk tipografik ani. Olculen sapma. */
.bignum {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
  padding-block: var(--space-block);
}

.bignum > * {
  max-width: 100%;
}

.bignum__v {
  font-family: var(--font-display);
  /* Taban 3.5rem DEGIL 2.25rem. clamp'in ALT degeri bir taban, tavan degil:
     kok punto buyudugunde 3.5rem de buyuyordu ve 17vw tavani devreye
     giremiyordu, sayi ekranin disina tasiyordu. Olculdu: 320px genislikte
     kok 32px'te "0,0078°" [40, 381] araligina yayiliyordu. Varsayilan
     ayarda gorunum AYNI kalir, cunku 320px'de 17vw (54px) zaten 2.25rem'in
     (36px) ustunde ve tercih edilen deger o. */
  font-size: clamp(2.25rem, 17vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: var(--w-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--amber-500);
  text-shadow: 0 0 80px rgba(232, 162, 74, 0.18);
}

.bignum__k {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.bignum__n {
  max-width: 42ch;
  color: var(--fg-2);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
}


/* --------------------------------------------------------------------------
   6. Listeler
   ----------------------------------------------------------------------- */

.gates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-md);
  background-color: var(--surface-1);
  overflow: hidden;
}

.gates li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-top: var(--rule-1) solid var(--hairline);
}

.gates li:first-child {
  border-top: 0;
}

.gates b {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  color: var(--fg-hi);
  overflow-wrap: anywhere;
}

.gates span {
  font-size: var(--t-body-sm);
  color: var(--fg-2);
}

@media (min-width: 46rem) {
  .gates li {
    grid-template-columns: 20rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-2) var(--space-5);
}

.ticks li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--t-body-sm);
  color: var(--fg-2);
}

.ticks li::before {
  content: "\00B7";
  position: absolute;
  left: var(--space-2);
  color: var(--amber-500);
  font-weight: var(--w-bold);
}

.bullets {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-6);
  max-width: var(--measure-wide);
}

.bullets li {
  color: var(--fg-2);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
}

.bullets li strong {
  color: var(--fg-hi);
}


/* --------------------------------------------------------------------------
   7. Teknik kartlari
   ----------------------------------------------------------------------- */

.techgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-5);
}

.tech {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-md);
  background-color: var(--surface-1);
  transition: border-color var(--dur-base) var(--ease-quiet),
              background-color var(--dur-base) var(--ease-quiet);
}

.tech:hover {
  border-color: var(--hairline-amber);
  background-color: var(--surface-2);
}

.tech h3 {
  font-family: var(--font-ui);
  font-size: var(--t-headline);
  line-height: var(--lh-headline);
  font-weight: var(--w-semibold);
  color: var(--fg-hi);
}

.tech p {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.tech__measure {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--rule-1) solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-mono);
  color: var(--lapis-400);
}


/* --------------------------------------------------------------------------
   7b. Yükselen kartları (12 burç, yeniay/dolunay bölümü)
   .tech ile aynı iskelet, tek fark: küçük glif+ev başlığı, daha kompakt
   sütun genişliği (12 kart tek satırda tek sütuna sığmasın diye).
   ----------------------------------------------------------------------- */

.ascgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
}

.asc {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-md);
  background-color: var(--surface-1);
  transition: border-color var(--dur-base) var(--ease-quiet),
              background-color var(--dur-base) var(--ease-quiet);
}

.asc:hover {
  border-color: var(--hairline-amber);
  background-color: var(--surface-2);
}

.asc__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.asc__glyph {
  font-size: 1.5rem;
  color: var(--amber-500);
  line-height: 1;
}

.asc__head h3 {
  font-family: var(--font-ui);
  font-size: var(--t-headline);
  font-weight: var(--w-semibold);
  color: var(--fg-hi);
  flex: 1;
}

.asc__house {
  font-size: var(--t-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-mono);
  color: var(--lapis-400);
}

.asc p {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}


/* --------------------------------------------------------------------------
   8. Tablo
   ----------------------------------------------------------------------- */

.disclose {
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-md);
  background-color: var(--surface-1);
  overflow: hidden;
}

.disclose > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  color: var(--fg-hi);
  font-weight: var(--w-semibold);
  font-size: var(--t-body-sm);
  list-style: none;
}

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

/* Odak halkasini ICERI al. `.disclose`'un `overflow: hidden` degeri,
   icindeki iki klavye duraginin (summary ve kaydirilabilir .tbl-wrap)
   halkasini TAMAMEN kirpiyordu: global halka 2px kalinlikta ve 4px disarida
   duruyor, ic bosluklar ise her yonde 1px. Ikisinin de baska bir odak
   isareti yok. `-3px` offset halkayi kutunun icine cizer, kirpilmaz. */
.disclose > summary:focus-visible,
.disclose .tbl-wrap:focus-visible {
  outline-offset: -3px;
}

.disclose > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border: var(--rule-1) solid var(--hairline-amber);
  border-radius: var(--r-xxs);
  color: var(--amber-500);
  font-family: var(--font-mono);
  flex: none;
}

/* ASCII HYPHEN-MINUS (U+002D). Burada U+2212 (MINUS SIGN) vardi; site
   genelinde tire sinifi karakterler yasakli ve yasak CSS `content`
   degerlerini de kapsiyor. Gorsel olarak ayni islevi goruyor, kutunun
   `+` isaretiyle ayni mono yazi tipinde ciziliyor. */
.disclose[open] > summary::before {
  content: "-";
}

.disclose > summary:hover {
  background-color: var(--surface-2);
}

.tbl-wrap {
  overflow-x: auto;
  border-top: var(--rule-1) solid var(--hairline);
  -webkit-overflow-scrolling: touch;
}

.tbl-wrap table {
  min-width: 40rem;
}

.tbl-wrap th,
.tbl-wrap td {
  white-space: nowrap;
}

.tbl-wrap td {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.tbl-wrap td:nth-child(2) {
  font-family: var(--font-ui);
  color: var(--fg-1);
}

.tbl-wrap td:last-child {
  color: var(--lapis-400);
  text-align: right;
}

.tbl-wrap tr[data-peak] td {
  color: var(--amber-500);
}

.tbl-note {
  padding: var(--space-4) var(--space-5);
  border-top: var(--rule-1) solid var(--hairline);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-mute);
}


/* --------------------------------------------------------------------------
   9. Ekran goruntuleri
   ----------------------------------------------------------------------- */

.rail {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72vw, 15rem);
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  padding-block: var(--space-2) var(--space-5);
  /* Kabuktan tasip ekranin kenarina kadar kaysin, ama sayfayi kaydirmasin. */
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.rail--wide {
  grid-auto-columns: min(86vw, 26rem);
}

.rail:focus-visible {
  outline: var(--rule-2) solid var(--focus-ring);
  outline-offset: var(--space-1);
}

.shot {
  scroll-snap-align: start;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.shot img {
  width: 100%;
  height: auto;
  border: var(--rule-1) solid var(--hairline-strong);
  border-radius: var(--r-md);
  background-color: var(--ink-800);
  box-shadow: var(--shadow-md);
}

.shot figcaption {
  display: grid;
  gap: var(--space-1);
}

.shot__t {
  font-size: var(--t-body-sm);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}

.shot__s {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-mute);
}

/* Cumle icinde YASAMAYAN, tek basina duran baglanti. Dokunma hedefi
   dogumda 44pt: gorsel yukseklik + dikey padding.
   `inline-flex` DEGIL `inline-block`: flex kutusu e-posta adresinin
   sarmasini engelliyordu, adres dar ekranda ve buyuk puntoda ekranin
   disina cikiyordu (olculdu: 320px / kok 32px'te [53, 454]).
   `inline-block` sarmaya izin verir; 44pt hedefi dikey padding'den gelir,
   yani kaybolmaz. */
.link-lg {
  display: inline-block;
  padding-block: calc((var(--tap-min) - 1.5em) / 2);
  padding-inline: var(--space-3);
  margin-inline-start: calc(-1 * var(--space-3));
  border-radius: var(--r-sm);
  font-weight: var(--w-medium);
  overflow-wrap: anywhere;
}

.link-lg:hover {
  background-color: var(--amber-wash-08);
}

.railhint {
  margin-top: var(--space-3);
  font-size: var(--t-caption);
  color: var(--fg-mute);
}


/* --------------------------------------------------------------------------
   10. Iki sutun
   ----------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-block);
  align-items: start;
}

.split > * {
  min-width: 0;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9);
  }

  .split--lead {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}


/* --------------------------------------------------------------------------
   11. Kapanis ve alt bilgi
   ----------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: var(--rule-1) solid var(--hairline-amber);
  border-radius: var(--r-pill);
  background-color: var(--amber-wash-08);
  color: var(--fg-hi);
  font-size: var(--t-body-sm);
  font-weight: var(--w-semibold);
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background-color: var(--amber-500);
  flex: none;
}

.foot {
  padding-block: var(--space-10) var(--space-9);
  border-top: var(--rule-1) solid var(--hairline-strong);
  background-color: var(--ink-900);
}

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

@media (min-width: 52rem) {
  .foot__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9);
  }
}

.foot__brand {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: var(--w-title);
  font-variation-settings: "opsz" 48, "SOFT" 40;
  color: var(--fg-hi);
}

.foot__tag {
  margin-top: var(--space-3);
  max-width: 40ch;
  color: var(--fg-2);
  font-size: var(--t-body-sm);
}

.foot__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--t-body-sm);
  text-decoration: underline;
}

.credits {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure-wide);
}

.credits li {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-mute);
}

.foot__legal {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: var(--rule-1) solid var(--hairline);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-mute);
}


/* --------------------------------------------------------------------------
   12. Bolum acilisi
   Hareket ANLAM tasir: bolum kendi ritminde bir kez yerine oturur, o kadar.
   `html.js` sinifi olmadan hicbir sey gizlenmez, yani JS kapaliyken sayfa
   eksiksiz okunur.
   ----------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 760ms var(--ease-quiet),
    transform 760ms var(--ease-quiet);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__canvas {
    opacity: 1;
    transition: none;
  }

  .scrollhint__arrow {
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   13. Yazdirma
   ----------------------------------------------------------------------- */

/* Eski hali yalniz `body { color: #111 }` diyordu ve bu HICBIR SEYI
   degistirmiyordu: sayfadaki metin ogelerinin neredeyse tamami kendi rengini
   token'dan ACIKLIKLA aliyor, yani body'deki renk onlara ULASMIYOR. Olculdu
   (canli sayfa, 439 metin ogesi): 438'inin kendi `color` degeri var, yalniz
   1 tanesi miras aliyordu. Beyaza karsi cikan oranlar: #D9CFB4 1.55:1 ·
   #EDE6D3 1.25:1 · #F8F3E4 (h1/h2/h3 dahil) 1.11:1 · #E8A24A 2.17:1. Yani
   yazdirilan sayfa fiilen BOS gorunuyordu. App Review, Gizlilik baglantisi
   uzerinden gelen sayfalari PDF'e cevirip dosyaya koyabiliyor.

   Cozum tek noktadan: ROL tokenlari kagit icin yeniden tanimlanir, bilesenler
   kendiliginden izler. Yeni renk UYDURULMADI; kagit beyaz, murekkep ayni ink
   merdiveninin koyu ucundan geliyor. Beyaza karsi olculen oranlar asagida
   her satirin yaninda yaziyor.

   Kehribar ve lapis kagitta metin olarak KULLANILMIYOR: #E8A24A beyazda
   2.17:1, #C7873A 3.02:1, #7BA8C9 2.53:1. Ucu de govde puntosu icin gereken
   4.5:1'in altinda, o yuzden ink merdivenine dusuyorlar. Kagitta vurguyu
   punto, agirlik ve cizgiler tasiyor. */
@media print {
  :root {
    color-scheme: light;

    /* Kagit. */
    --bg:            #fff;
    --bg-deep:       #fff;
    --bg-night:      #fff;
    --surface-1:     #fff;
    --surface-2:     #fff;
    --surface-3:     #fff;
    --surface-glass: #fff;

    /* Murekkep. Beyaza karsi WCAG orani parantez icinde. */
    --fg-hi:     var(--ink-900);   /* 19.99:1 */
    --fg-1:      var(--ink-800);   /* 18.90:1 */
    --fg-2:      var(--ink-700);   /* 16.80:1 */
    --fg-3:      var(--ink-600);   /* 14.87:1 */
    --fg-mute:   var(--ink-500);   /* 12.91:1 */
    --fg-dim:    var(--ink-400);   /*  9.36:1 */
    --fg-accent: var(--ink-700);   /* 16.80:1 */
    --fg-data:   var(--ink-500);   /* 12.91:1 */
    --fg-on-accent: #fff;

    --link:           var(--ink-700);
    --link-hover:     var(--ink-700);
    --link-active:    var(--ink-700);
    --link-underline: rgba(7, 8, 15, 0.45);

    /* Dogrudan ham token okuyan yuzeyler de gelsin: .eyebrow, .bignum__v,
       .stat--lead, .readout__v, .tech__measure, .spec dd.mono, chip ve
       durum noktalari. */
    --amber-500: var(--ink-700);
    --amber-400: var(--ink-700);
    --amber-600: var(--ink-700);
    --lapis-400: var(--ink-500);
    --lapis-500: var(--ink-500);
    --lapis-600: var(--ink-500);

    /* Fildisi hairline'lar kagitta gorunmuyor; ayni degerler ink tabanina
       cevrildi. */
    --hairline:         rgba(7, 8, 15, 0.16);
    --hairline-default: rgba(7, 8, 15, 0.22);
    --hairline-strong:  rgba(7, 8, 15, 0.28);
    --hairline-heavy:   rgba(7, 8, 15, 0.34);
    --hairline-amber:   rgba(7, 8, 15, 0.40);
    --hairline-lapis:   rgba(7, 8, 15, 0.40);

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-amber: none;
    --scrim: transparent;
    --scrim-soft: transparent;
    --selection-bg: transparent;
    --selection-fg: var(--ink-900);
  }

  @page {
    margin: 16mm;
  }

  html,
  body {
    background: #fff;
    color: var(--fg-1);
  }

  /* Sayfanin uzunlugu boyunca sabit duran gece yikamasi kagida gitmez. */
  body {
    background-image: none;
  }

  /* Kagida hicbir kosulda bos bolum dusmez. */
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hdr,
  .skip,
  .scrollhint,
  .hero__sky,
  .hero__canvas,
  .hero__veil,
  .railhint {
    display: none !important;
  }

  .hero > .hero__content::before {
    display: none;
  }

  /* Tam ekran sahne kagitta bir bolum basligina donusur. */
  .hero {
    min-height: 0;
    margin-top: 0;
    padding-block: 0 var(--space-6);
    overflow: visible;
  }

  .shell {
    max-width: none;
    padding-inline: 0;
  }

  /* Kendi koyu zeminini tasiyan kutular kagitta beyaz kalir, yoksa koyu
     zemin uzerine koyu murekkep dusuyordu. */
  .chip,
  .readout,
  .note,
  .note--amber,
  .status,
  .foot,
  .shot img,
  .hdr__nav a:hover {
    background: #fff;
  }

  .chip,
  .status {
    border-color: var(--hairline-strong);
  }

  /* Motor konusmadan yazdirilirsa bos bir kutu basilmasin: ekranda yer
     tutan gorunmez olcum satiri kagitta hic olmasin. */
  .hero:not([data-sky-state="live"]) .readout {
    display: none;
  }

  .bignum__v {
    text-shadow: none;
  }

  /* Ekranda kaydirilan her sey kagitta ACILIR: yatay kaydirma kutusunda
     kalan icerik yazdirilirken gorunmez olurdu. */
  .rail {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .tbl-wrap {
    overflow: visible;
  }

  .tbl-wrap table {
    min-width: 0;
  }

  .tbl-wrap th,
  .tbl-wrap td {
    white-space: normal;
  }

  /* Kapali <details> kagitta acilsin: dogruluk tablosu tam da orada duruyor.
     Iki mekanizma, cunku tarayicilar bunu farkli yerde gizliyor. Destek
     yoksa ozet satiri yine de basilir, hicbir sey bozulmaz. */
  .disclose > *:not(summary) {
    display: block;
  }

  .disclose::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .disclose > summary::before {
    content: "";
    border: 0;
  }

  /* Baslik ve kutular sayfa arasinda bolunmesin. */
  h1, h2, h3, .eyebrow {
    break-after: avoid;
  }

  .card,
  .tech,
  .stat,
  .gates li,
  .spec > div,
  .shot,
  .bignum,
  .note {
    break-inside: avoid;
  }

  .sec {
    padding-block: var(--space-7);
  }
}

/* METEOR IDDIA SATIRI. Yalniz gercek bir yagmur etkinken gorunur; meteors.js
   kutuyu hidden birakir, yani sporadik modda sayfada bir bosluk olusmaz.
   Kehribar, sayfanin TEK sinyal vurgusu; burada da ayni rolde. */
.readout__meteor {
  margin: var(--space-2) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--amber-500);
}
.readout__meteor[hidden] { display: none; }

/* Meteor katmani gokyuzu kanvasinin uzerinde, ayni kutuda. Dekoratif
   oldugu icin isaret gecirmez ve erisilebilirlik agacinda yer almaz. */
.meteor-layer { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .meteor-layer { display: none; } }

/* ── Waitlist formu (2026-09-16) ─────────────────────────────────────────────
   Siteye gelen kişi e-postasını ve platformunu bırakıyor. Sitenin kendi
   token'larını kullanır; yeni renk/ölçü icat edilmez. */
.wl {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.wl__label {
  font-size: var(--t-body-sm, 0.875rem);
  color: var(--fg-2);
  letter-spacing: 0.02em;
}

.wl__input {
  width: 100%;
  padding: var(--space-3);
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-sm);
  background-color: var(--surface-1);
  color: var(--fg-1);
  font: inherit;
  font-size: 1rem; /* iOS'ta 16px altı odakta sayfayı zoomlar */
}

.wl__input:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
}

.wl__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Dokunma hedefi: satır 44px'in altına inmesin. */
.wl__radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-3);
  border: var(--rule-1) solid var(--hairline-default);
  border-radius: var(--r-sm);
  color: var(--fg-1);
  cursor: pointer;
}

.wl__radio:has(input:checked) {
  border-color: var(--amber-500);
  background-color: var(--amber-wash-08);
}

.wl__submit {
  min-height: 44px;
  padding-inline: var(--space-5);
  border: var(--rule-1) solid var(--amber-500);
  border-radius: var(--r-sm);
  background-color: var(--amber-wash-08);
  color: var(--amber-400);
  font: inherit;
  font-weight: var(--w-medium);
  cursor: pointer;
}

.wl__submit:hover { background-color: var(--amber-wash-20); }
.wl__submit:disabled { opacity: 0.6; cursor: default; }

.wl__note {
  font-size: var(--t-body-sm, 0.875rem);
  color: var(--fg-3, var(--fg-2));
  line-height: 1.5;
}

.wl__msg:empty { display: none; }
.wl__msg { font-size: var(--t-body-sm, 0.875rem); line-height: 1.5; }
.wl__msg--ok { color: var(--amber-400); }
.wl__msg--hata { color: var(--danger-text, var(--danger)); }

/* Bal küpü: ekran okuyucudan ve gözden gizli, DOM'da var. `display:none`
   yerine konum kaydırma, çünkü bazı botlar gizli alanları atlıyor. */
.wl__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}