/* ===================================================================
 | PriamNetwork — landing stylesheet
 | Claude Design çıktısının framework'süz karşılığı.
 * =================================================================== */

/* ============ TOKENS ============
 |
 | ⚠️ ROL ADLI TOKEN'LAR — ton adlı değil (Faz 13).
 |
 | Eski defter `--cyan`/`--violet`/`--matrix` gibi TON adları taşıyordu ve
 | kırmızıya geçişte iki kötü seçenek bırakıyordu: ya `--cyan: kırmızı` yazıp
 | 41 çağrı yerini yalancı bırakmak, ya hepsini kovalamak. Rol adları
 | (`--accent`, `--ok`, `--down`) bir sonraki renk değişikliğini `:root`
 | düzenlemesine indiriyor.
 |
 | `-rgb` KANAL TOKEN'LARI: `rgba(var(--accent-rgb), .25)` kalıbı için.
 | Bunlar olmadan dosyadaki 100+ yarı saydam vurgu rengi literal kalırdı —
 | ölçüldü: eski dosyada tam 171 serbest rgba() vardı ve `:root` onlara
 | hiç dokunmuyordu.
 |
 | Hex ile kanalın EŞLEŞMESİ elle korunuyor (--accent değişirse --accent-rgb
 | de değişmeli); tests/theme.sh kontrast koşumu hex'i canlı okuduğu için
 | kayan bir palet orada yakalanır.
 |
 | ⚠️ `--down` hata rengi AÇIK PEMBE, parlak kırmızı değil: kırmızı artık
 | MARKA rengi. Hata, tonla değil AÇIKLIKLA ayrışıyor; hata bağlamlarının
 | hepsinde ayrıca ikon/metin var.
 |
 | ═══ KROMA MERDİVENİ (Faz 13.5 — uyum düzeltmesi) ═══
 |
 | İlk kırmızı palette BEŞ rengin BEŞİ de %100 doygunluktaydı (ölçüldü:
 | accent/accent-2/warn/down/ok hepsi S=%100). Hepsi aynı anda bağırınca
 | hiçbiri VURGU okunmuyordu — "uyumsuz" görüntünün asıl kaynağı buydu,
 | tonların kendisi değil. Doygunluk artık kademeli:
 |
 | Zümrüt kuşağının merdiveni (açık tema değerleri):
 |
 |   accent   161° S%94  ← TEK tam kroma. Dikkati o topluyor.
 |   down       0° S%74
 |   warn      34° S%74
 |   accent-2 202° S%70
 |   ok       181° S%39  ← en sakini; DURUM bildiriyor, ambiyansa katılmıyor
 |
 | ═══ ⚠️ `--ok` TURKUAZ, YEŞİL DEĞİL — ölçülmüş bir zorunluluk ═══
 |
 | Marka zümrüde dönünce durum yeşili (`#39D08A`, 152°) marka rengiyle
 | (161°) arasında YALNIZ 9° bıraktı: "marka vurgusu" ile "başarılı" aynı
 | renk okunuyordu. İlk çözüm ikisini kroma/açıklıkla ayırmaktı — ton hâlâ
 | 6° yakındı ve ayrım yalnız yan yana dururken görünüyordu.
 |
 | `--ok` artık 181°. Yer seçimi keyfi değil: marka 161°, ikincil 202°, ve
 | 181° ikisinin TAM ORTASI — iki komşuya da 20°/21° uzak, paletteki en
 | büyük boşluk. Doygunluk ve açıklık aynen korundu (S%39 · L%28), yani
 | merdivenin kendisi hiç oynamadı; yalnız ton döndü.
 |
 | ⚠️ Turkuaz "başarı" konvansiyonunu kırmıyor: `.badge.ok` ve
 | `.form-note.ok` her zaman ikon veya metinle birlikte geliyor, renk tek
 | başına anlam taşımıyor. Ayrımı tests/theme.sh 4. bölümü ölçüyor —
 | `--accent` ile `--ok` arasında en az 15° istiyor.
 * =================================================================== */
:root {
  /*
   * ═══ İKİ TEMA, TEK KAYNAK ═══════════════════════════════════════════
   *
   * `:root` AÇIK tema; `.theme-dark` koyuyu geçiyor. Sıra bilinçli:
   * varsayılan ilk ziyarette AÇIK ve varsayılanın geçersiz kılınacak bir
   * şeye ihtiyacı olmamalı.
   *
   * ⚠️ AÇIK TEMA KOYUNUN TERSİ DEĞİL. Ölçüldü: bu dosyadaki beyaz-alfa
   * yıkamaların 37'si 0.005–0.08 aralığındaydı. Koyu zeminde %2 beyaz
   * görünür bir kademe; BEYAZ zeminde %2 siyah çok daha sert okunuyor.
   * Birebir çevrilseydi açık mod kirli görünürdü. Bu yüzden yıkamalar
   * `--wash-*` token'larına toplandı ve her tema kendi opaklığını veriyor.
   * Gölgeler de öyle: koyudaki 0.45 siyah, açıkta 0.10'a iniyor.
   *
   * ⚠️ `--accent` İKİ TEMADA DA #059669 — marka değeri. Ama BEYAZ zeminde
   * 3.63 veriyor, yani küçük METİN olarak AA'yı geçmiyor. Metin boyundaki
   * kullanım `--accent-ink` üzerinden gidiyor ve tema başına ayrı.
   * `background: var(--accent)` olduğu gibi kalıyor.
   *
   * ⚠️ ETİKETLİ DOLGU AYRI BİR TOKEN: `--accent-fill`. Açık modda etiket
   * BEYAZ (kullanıcı kararı) ve beyaz, marka zümrütünün üstünde 3.77
   * veriyor — AA'nın altında; dolgu bir tık koyulaşıp (#047857) oran
   * 5.48'e çıkıyor. Koyu modda dolgu marka değerinin kendisi ve etiket
   * koyu (5.25). Düğme etiketi hiçbir temada `--bg` OLAMAZ.
   */
  color-scheme: light;

  /*
   * ⚠️ NÖTRLER SLATE (mavi çalar), yeşil çalar DEĞİL — yalnız AÇIK modda.
   * Eski açık palet gri tonlarını da zümrütten türetiyordu (#F6F8F7 zemin,
   * #0E1512 metin); marka rengi zeminden de sızınca sayfa tek renge
   * boğuluyordu. Slate ailesi vurguyu markaya bırakıyor.
   * Koyu tema DEĞİŞMEDİ.
   */
  --bg: #F9FAFB;
  --bg-rgb: 249,250,251;
  --surface: #FFFFFF;
  --surface-rgb: 255,255,255;
  --surface-2: #F1F5F9;

  --line: rgba(15,23,42,0.10);
  --line-strong: rgba(15,23,42,0.18);

  --text: #0F172A;         /* bg 17.08 */
  /*
   * İKİ BASAMAK ARASINDA GERÇEK ARALIK OLMALI ve ölçüsü ALFAYLA DEĞİL
   * RENKLE verilmeli.
   *
   * ⚠️ Alfa değerin ZEMİNE GÖRE kaymasına yol açıyordu: aynı token beyaz
   * kartta bir şey, %12 yıkamalı panelde başka bir şey ölçüyordu ve
   * `--text-mute` tam bu yüzden panellerde AA'nın altına düşmüştü. Düz
   * slate değerleri her zeminde öngörülebilir.
   *
   * Merdiven — metin 17.1 · dim 7.3 · mute 6.1 (en derin yıkamada 4.7).
   */
  --text-dim: #475569;
  --text-mute: #516074;

  --accent: #059669;       /* marka — DOLGU değeri, iki temada da aynı */
  --accent-rgb: 5,150,105;
  /*
   * ⚠️ AÇIK MOD MÜREKKEPLERİ SAYFA ZEMİNİNE DEĞİL, EN DERİN YIKAMAYA GÖRE
   * AYARLI.
   *
   * İlk sürümde hepsi `--bg` (#F6F8F7) üstünde ölçülmüştü ve AA'yı orada
   * geçiyorlardı. Ama bu renkler pratikte çıplak zeminde durmuyor: kod
   * blokları %8, altbilgi giriş kabuğu %12 siyah yıkama taşıyor. Ölçüm
   * (canlı sayfada, hesaplanmış değerlerden):
   *
   *     #047857 kod paneli 4.29 · #1D6FA5 4.25 · #9C6316 3.91 · #357A5E 4.01
   *
   * Dördü de AA'nın altındaydı. Sayfada güzel görünüp panelde okunamayan bir
   * palet yanlış zemine ayarlanmış demektir. Değerler %12 yıkamada 4.5'i
   * geçecek kadar koyulaştı; tonlar aynı kaldı (163° / 202° / 34° / 156°),
   * yani palet kimliği değişmedi, yalnız derinliği doğru zemine oturdu.
   */
  --accent-ink: #04684B;   /* en derin yıkamada 4.86 AA */

  /*
   * ⚠️ DOLGU AÇIK MODDA BİR TIK KOYU — beyaz etiket okunsun diye.
   *
   * Etiket rengi kullanıcı kararı: yeşil düğmelerin yazısı açık modda BEYAZ.
   * Ama beyaz, marka zümrütünün (#059669) üstünde 3.77 veriyor — AA'nın
   * altında. Dolgu #047857'ye inince oran 5.48'e çıkıyor ve etiket gerçekten
   * okunuyor. Marka DEĞERİ (--accent) değişmiyor: kenarlıklar, rgba
   * yıkamaları ve dekoratif çizgiler hâlâ #059669.
   *
   * Koyu temada dolgu = marka değerinin kendisi; orada etiket koyu ve oran
   * zaten 5.25.
   */
  --accent-fill: #047857;  /* etiketli marka dolgusu */
  --ink-on-pastel: #070B09; /* tema DIŞI pastel zeminlerin mürekkebi */
  --on-accent: #FFFFFF;    /* dolgunun üstündeki etiket — 5.48 AA */

  --accent-2: #19648F;     /* en derin yıkamada 4.60 AA */
  --accent-2-rgb: 25,100,143;
  --ok: #2C6465;           /* 5.24 AA · paletin en düşük kroması */
  --ok-rgb: 44,100,101;
  --warn: #835214;         /* en derin yıkamada 4.71 AA */
  --warn-rgb: 131,82,20;
  --down: #B91C1C;         /* bg 6.07 AA */
  --down-rgb: 185,28,28;

  /* Yüzey yükseklik yıkamaları — açıkta çok daha zayıf ve SAF SİYAH DEĞİL:
     nötr aile slate olunca yıkamanın da aynı aileden gelmesi gerekiyor,
     yoksa yüzeyler zeminden bir tık gri-yeşile kaçıyor. */
  --wash-1: rgba(15,23,42,0.014);
  --wash-2: rgba(15,23,42,0.026);
  --wash-3: rgba(15,23,42,0.045);
  --wash-4: rgba(15,23,42,0.080);

  /* Gölgeler — beyaz zeminde koyu gölge "kir" okunuyor, opaklık düşük */
  --shadow-1: rgba(15,23,42,0.06);
  --shadow-2: rgba(15,23,42,0.10);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /*
   * ⚠️ TEK AİLE, İKİ ROL — ve `--font-mono` ADI ÖLDÜ.
   *
   * Site fiilen bir monospace sitesiydi: `--font-mono` 99 yerde, başlık
   * ailesi yalnız 3 yerde geçiyordu. Gövde metninin, etiketlerin ve
   * rakamların daktilo harfiyle dizilmesi sertliğin kaynağıydı.
   *
   * Artık Plus Jakarta Sans hem başlığı hem arayüzü taşıyor. Gerçek
   * monospace YALNIZCA gerçekten monospace olması gereken yerde kaldı ve
   * adı bunu söylüyor: kod blokları, satır içi kod, terminal ve komut
   * istemi. Rakam hizası oralarda anlam taşıyor; başka hiçbir yerde değil
   * (hizalanması gereken sayılar `font-variant-numeric: tabular-nums` ile
   * çözülüyor, ayrı bir aile gerektirmiyor).
   */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, monospace;

  /*
   * ── HARF ARALIĞI: İKİ DEĞER, BİR SİSTEM ─────────────────────────────
   *
   * ⚠️ 37 ayrı bildirim vardı ve değerler 0.1em ile 0.3em arasına rastgele
   * dağılmıştı. Hepsi JetBrains Mono için ayarlanmıştı: monospace zaten
   * geniş yazar, üstüne 0.3em binince "teknik" duruyordu. Plus Jakarta Sans
   * orantılı bir sans; aynı sayı harfleri birbirinden koparıyor ve
   * kullanıcının işaret ettiği "kötü duran aralıklar" tam olarak bu.
   *
   * Artık iki değer var ve her ikisi de rol adıyla anılıyor:
   */
  --track-caps: 0.08em;   /* BÜYÜK HARF mikro etiketler (10-12px) */
  --track-tech: 0.03em;   /* küçük harf teknik metin: sürüm, kod, tarih */

  --maxw: 1280px;
}

/* ═══ KOYU TEMA ═════════════════════════════════════════════════════════
 *
 * Sınıf `<html>` üzerinde ve SUNUCUDA basılıyor (`app/views/shell.php`),
 * istemci JS'iyle değil: sayfalar sunucu tarafında render ediliyor ve sınıf
 * ilk boyamadan sonra eklenseydi koyu modda bir kare beyaz yanıp sönerdi.
 */
:root.theme-dark {
  color-scheme: dark;

  --bg: #070B09;           /* serin siyah — yeşil ışık taşıyor */
  --bg-rgb: 7,11,9;
  --surface: #111A16;
  --surface-rgb: 17,26,22;
  --surface-2: #19241E;

  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);

  --text: #EAF2EE;         /* bg 17.38 */
  --text-dim: rgba(255,255,255,0.68);   /* 9.19 — açıkla aynı merdiven */
  /* ⚠️ %30 iken 2.59 — AA'nın çok altında. Açık modun aynı hatası koyu modda
     da vardı: en sönük metin rengi hiç ölçülmemiş. %48 → 4.99. */
  --text-mute: rgba(255,255,255,0.48);


  --accent-ink: #12B981;   /* bg 7.81 AA — koyuda marka metni açılıyor */
  --accent-fill: #059669;  /* koyuda dolgu = marka değerinin kendisi */
  --ink-on-pastel: #070B09; /* açıkla AYNI: zemin temayla değişmiyor */
  --on-accent: #070B09;    /* koyu etiket — 5.25 AA */

  --accent-2: #5FB6DE;     /* bg 8.70 AA */
  --accent-2-rgb: 95,182,222;
  --ok: #86D1D2;           /* bg 11.37 · paletin en düşük kroması */
  --ok-rgb: 134,209,210;
  --warn: #E0B25C;         /* bg 10.08 AA */
  --warn-rgb: 224,178,92;
  --down: #EE8080;         /* bg 7.57 AA */
  --down-rgb: 238,128,128;

  --wash-1: rgba(255,255,255,0.02);
  --wash-2: rgba(255,255,255,0.035);
  --wash-3: rgba(255,255,255,0.06);
  --wash-4: rgba(255,255,255,0.12);

  --shadow-1: rgba(0,0,0,0.35);
  --shadow-2: rgba(0,0,0,0.45);
}

/* Tarayıcı varsayılan mavi seçimi kırmızı temada sırıtır */
::selection { background: rgba(var(--accent-rgb), 0.25); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font-display); -webkit-font-smoothing: antialiased; }
body {
  /*
   * ⚠️ `ss01`/`ss02` GİTTİ: onlar Space Grotesk'in stil setleriydi, Plus
   * Jakarta Sans'ta karşılığı yok — kalsalardı hiçbir şey yapmayan iki
   * satır olurlardı. Yerine `cv05` (düz `l`) açık: sansta rakam bir ile
   * küçük L'yi ayırıyor ve bu sitede her yerde sayı var.
   *
   * Gövde ölçüsü 16/1.6: eski hâlde metin 13-14px daktilo harfiyle
   * diziliyordu. Referans ölçüsü ve normal okuma boyu bu.
   */
  font-feature-settings: "cv05";
  font-size: 16px; line-height: 1.6; font-weight: 400;
  overflow-x: hidden;
  letter-spacing: -0.011em;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 0 0 10px 0;
  padding: 12px 18px; font-family: var(--font-ui); font-size: 12px;
}
.skip-link:focus { left: 0; }

/* ============ BACKGROUND LAYERS ============ */
/*
 * ⚠️ AMBİYANS KÜRELERİ TAMAMEN KALDIRILDI (13.9 — düz zemin kararı).
 *
 * Bu üç küre `gradient()` YAZMIYORDU ama gradyan ÜRETİYORDU: düz dolgulu
 * daireler `filter: blur(130px)` ile eziliyor, sonuç merkezden kenara
 * sürekli bir renk düşüşü — yani radyal gradyanın ta kendisi. 13.5'te
 * opaklıkları %35'ten %16'ya indirilmişti; "düz renk" kararıyla birlikte
 * indirmek değil KALDIRMAK doğru olan.
 *
 * ⚠️ ARAMA TUZAĞI: bir sonraki denetim `linear-gradient|radial-gradient`
 * diye tarasa bu katmanı BULAMAZDI. tests/flat-bg.php bu yüzden bulanık
 * dolguları da ölçüyor, yalnız gradient() yazımını değil.
 *
 * İşaretlemedeki `.bg-orbs` sarmalayıcısı da shell.php'den silindi —
 * kuralsız bir <div> bırakmak tests/dead-class.php'yi kırardı ve
 * bırakılması için bir sebep de yok.
 */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(var(--wash-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--wash-1) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 80%);
}
.bg-noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSdub2lzZSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAuOScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCUyM25vaXNlKScgb3BhY2l0eT0nMScvPjwvc3ZnPg==");
}

.app { position: relative; z-index: 2; }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: var(--accent-fill); transform-origin: 0 0; transform: scaleX(0);
}

/* ============ CURSOR SPOTLIGHT ============ */
/* `.spotlight` KALDIRILDI — fareyi takip eden arka plan parıltısıydı. */

/* ============ HEADER ============ */
/* Kenardan kenara, yapışkan, alt çizgili. Scroll'da koyulaşır. */
.hdr {
  position: sticky; top: 0; z-index: 55;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--bg-rgb),0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 240ms ease, border-color 240ms ease;
}
/* alt çizginin üzerindeki degrade vurgu — yalnızca scroll'da görünür */
/* .hdr::after SİLİNDİ (13.10): kaydırınca beliren, uçları sönen kırmızı
   saç çizgisiydi. Düz zemin kararından sonra geriye kalan son arka plan
   geçişiydi ve kaydırma geri bildirimini ZATEN alt kenarlık veriyor —
   iki ayrı işaret aynı şeyi söylüyordu. */
.hdr.shrunk { background: rgba(var(--bg-rgb),0.94); border-bottom-color: var(--line-strong); }

/*
 * ⚠️ MENÜ MUTLAK ORTALANIYOR, akışta değil (13.10).
 * "Giriş yap" kalkınca sağda yalnız dil düğmesi kaldı ve menü ile sağ kenar
 * arasında kocaman bir boşluk açıldı. Akışta ortalamak (flex:1 + center)
 * menüyü logo ve dil düğmesinin GENİŞLİKLERİNE bağlardı: uzun adlı bir dile
 * geçince menü kayardı. Mutlak ortalama menüyü kabın MERKEZİNE bağlıyor,
 * komşularının genişliğine değil. `.hdr-inner`a `position: relative` bu
 * yüzden ŞART — onsuz referans viewport olur ve max-width'li kapta kayar.
 */
.hdr-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  height: 64px; display: flex; align-items: center; gap: 24px;
  position: relative;
  transition: height 240ms ease;
}
.hdr.shrunk .hdr-inner { height: 56px; }

.logo {
  display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.04em; font-size: 17px;
  flex-shrink: 0;
}
.logo-badge {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-fill);
  display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: 18px;
  /* ⚠️ RENKLİ GÖLGE → NÖTR GÖLGE (13.6). `rgba(accent,.25)` düz karonun
     kenarında yumuşak bir kırmızı düşüş üretiyordu: adı gölge olan bir
     gradyan. Ayrıca karonun etrafındaki maskeli `::after` halkası da
     silindi — düz kırmızı karonun etrafında düz kırmızı halka, hiçbir
     şeyi ayırmıyordu (gradyan zamanında kenarı belirginleştiriyordu). */
  box-shadow: 0 0 0 1px var(--wash-3), 0 6px 16px var(--shadow-1);
}

/*
 * ÖLÇÜ KUTUDA DEĞİL GÖRSELDE. Kutu grid ve grid satırı `auto`; görselde
 * `height: 100%` yazmak DAİRESEL bir bağ kuruyor (satır öğeye, öğe satıra
 * bakıyor) ve tarayıcı `auto`ya düşüyor — ölçüldü: 60px'lik kutuda 200×200
 * bir görsel taşıyordu, hiçbir hata vermeden. Yükseklik piksel olarak
 * görsele veriliyor, kutu `fit-content` ile onun etrafına kapanıyor.
 *
 * Kutunun `width` değeri `auto` OLAMAZ: `.login-logo` sütun flex'in çapraz
 * ekseninde ve `auto` genişlik stretch demek — kutu bandın tamamına yayılır,
 * `place-items: center` de logoyu ortaya kaydırır ve altındaki başlıkla
 * hizasız kalır.
 *
 * Kuralı kapsayıcının içine yazmak zorundayız: küresel `img` kuralı yalnız
 * `max-width` veriyor, MAX-HEIGHT YOK — dikey bir logonun genişliği kapanır
 * ama yüksekliği içsel kalır ve kaptan taşar.
 */
.logo-badge.is-img {
  width: fit-content; height: auto; max-width: 180px;
  background: none; box-shadow: none; border-radius: 0;
}
.logo-badge.is-img img {
  display: block; height: 34px; width: auto; max-width: 100%;
}
.nav {
  display: flex; gap: 4px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav a {
  position: relative;
  font-size: 13.5px; color: var(--text-dim); padding: 10px 13px;
  transition: color 180ms;
}
.nav a::after {
  content: ""; position: absolute; inset-inline: 13px; bottom: 4px; height: 2px;
  background: var(--accent-fill); border-radius: 2px;
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.nav a:hover { color: var(--text); }
/* .nav a:hover::after — büyüyen alt çizgi kaldırıldı; menüde hover
   geri bildirimi yalnızca renk. Aktif sayfanın SABİT alt çizgisi
   ayrı bir kural ve duruyor. */
.nav a.active { color: var(--text); }
.nav a.active::after { transform: scaleX(1); }

.hdr-right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hdr.shrunk .lang-btn { padding: 7px 11px; font-size: 12px; }
.btn-ghost {
  font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); background: var(--wash-2);
  transition: background 160ms, border-color 160ms, transform 160ms;
}
.btn-ghost:hover { background: var(--wash-3); border-color: var(--line-strong); }

/* mobil menü butonu — masaüstünde gizli */
.nav-toggle {
  display: none; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--wash-2);
  place-items: center;
}
.nav-toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--text); border-radius: 2px;
  position: relative; transition: transform 200ms ease, background 200ms;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--text);
  border-radius: 2px; transition: transform 200ms ease;
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* mobil çekmece — header düz olduğu için tüm sayfalar burada gruplu listelenir */
.nav-drawer {
  position: fixed; inset: 0; z-index: 54;
  background: rgba(var(--bg-rgb),0.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 88px 24px 48px;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer-inner { max-width: 720px; margin: 0 auto; }

.drawer-lead {
  display: block; font-size: 26px; letter-spacing: -0.03em; font-weight: 700;
  color: var(--text); padding: 12px 0;
}
.drawer-lead.active { color: var(--accent-ink); }

.drawer-group { margin-top: 30px; }
.drawer-group h6 {
  font-family: var(--font-ui); font-size: 10px; color: var(--accent-ink);
  letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 500;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-strong);
}
.drawer-group ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.drawer-group a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--text-dim); transition: color 160ms;
}
.drawer-group a:hover { color: var(--text); }
.drawer-group a.active { color: var(--accent-ink); }
.drawer-cta { margin-top: 36px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 460px) {
  .drawer-group ul { grid-template-columns: 1fr; }
}

/* ============ LANG PICKER ============ */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--text);
  background: var(--wash-2);
}
.lang-btn:hover { border-color: var(--line-strong); }
.lang-pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 280px;
  background: rgba(var(--surface-rgb),0.95); backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 8px; z-index: 70;
  box-shadow: 0 20px 60px var(--shadow-2), 0 0 0 1px rgba(var(--accent-rgb),0.08);
}
.lang-pop[hidden] { display: none; }
/* Footer'da .footer{overflow:hidden} kutuyu kırpmasın diye yukarı açılır */
.lang-pop-up { top: auto; bottom: calc(100% + 8px); }
.lang-pop input {
  width: 100%; background: var(--wash-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; color: var(--text); font-family: var(--font-ui);
  font-size: 12px; outline: none; margin-bottom: 6px;
}
.lang-pop input:focus { border-color: rgba(var(--accent-rgb),0.45); }
.lang-list { max-height: 280px; overflow: auto; }
.lang-row {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 8px; font-size: 13px; text-align: start;
}
.lang-row:hover { background: var(--wash-3); }
.lang-row.active { background: rgba(var(--accent-rgb),0.08); color: var(--accent-ink); }
.lang-row[hidden] { display: none; }
/* Bayrak ikonu — assets/vendor/flags/4x3/*.svg (flag-icons, MIT) */
.flag-icon {
  width: 20px; height: 15px; flex-shrink: 0;
  border-radius: 2px; object-fit: cover; display: block;
  box-shadow: 0 0 0 1px var(--wash-4), 0 1px 3px var(--shadow-1);
}
.lang-row .flag-icon { width: 22px; height: 16.5px; }
.lang-row .lang-native { color: var(--text); }
.lang-row.active .lang-native { color: var(--accent-ink); }
.lang-row .native { color: var(--text-mute); font-family: var(--font-ui); font-size: 10px; margin-inline-start: auto; letter-spacing: var(--track-tech); }
.lang-row.active .native { color: var(--accent-ink); }
.lang-empty { padding: 14px 10px; font-family: var(--font-ui); font-size: 12px; color: var(--text-mute); }
.lang-empty[hidden] { display: none; }
.lang-sysbadge {
  font-family: var(--font-ui); font-size: 9.5px; color: var(--accent-ink);
  letter-spacing: var(--track-tech); text-transform: lowercase;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2);
}

/* ============ BTN PRIMARY ============ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600;
  /* Hap biçimi ve daha geniş dolgu — referansın düğme ölçüsü. */
  padding: 13px 28px; border-radius: 999px; color: var(--on-accent);
  background: var(--accent-fill);
  position: relative; isolation: isolate;
  transition: transform 160ms ease;
  /* Gölge de nötrleşti: 28px'lik kızıl saçak, düz dolgunun kenarında
     yumuşak renk düşüşüydü. Sert 1px iç çizgi kalıyor, kütle onu veriyor. */
  box-shadow: 0 0 0 1px var(--wash-4) inset, 0 8px 20px var(--shadow-2);
}
/*
 * ⚠️ BEYAZ PARLAMA TABAKASI TAMAMEN KALDIRILDI (13.6).
 * Önce 135° boyunca %40'tı, sonra dar bir üst ışığa indirildi — ama düz
 * dolguda beyaz yıkamanın kendisi bir GRADYAN olarak okunuyordu: butonu
 * yine iki tonlu gösteriyordu. Düz kırmızı, dolgunun tamamında aynı.
 * Hacmi artık yalnız içteki 1px beyaz çizgi ve alttaki kırmızı gölge veriyor.
 */
.btn-primary svg { width: 18px; height: 18px; }
.btn-glass {
  display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600;
  padding: 13px 28px; border-radius: 999px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  transition: all 160ms ease;
}
.btn-glass:hover { background: var(--wash-3); }

/* `.magnetic` KALDIRILDI — fareyi takip eden buton sarmalayıcısıydı.
   Tıklanacak şeyin imlece doğru kaçması işlevsel bir kusurdu; sınıf,
   `data-magnetic` niteliği ve main.js'teki magnetic() birlikte silindi. */

/* ============ TICKER ============ */
/*
 * ⚠️ ÜST KENARLIK KALDIRILDI: üst barın `border-bottom`u ile yan yana
 * geliyordu, yani ekranda İKİ ayrı 1px çizgi vardı ve arada hiçbir şey
 * yoktu. Tek çizgi yeterli.
 */
.ticker {
  position: relative; z-index: 3;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--bg-rgb),0.6); backdrop-filter: blur(8px);
  overflow: hidden;
}
/* ⚠️ ÜSTÜNE GELİNCE DURUR. Okunacak bir veri şeridinin kaçması sinir
   bozucu; duraklatma CSS'te, JS gerekmiyor. `.ticker-track`ta değil
   `.ticker`da dinliyoruz: şerit kayarken imlecin altındaki öğe sürekli
   değişiyor, hover şeridin KENDİSİNDE kararlı. */
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track {
  display: flex; gap: 0; padding: 9px 0;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-mute); white-space: nowrap;
  animation: ticker 60s linear infinite;
  width: max-content;
}
.ticker-item { display: inline-flex; align-items: center; gap: 10px; padding-inline-end: 40px; }
/* Ayraç noktası ÖĞENİN İÇİNDE (::after), araya ayrı bir eleman koyarak
   değil: kesintisiz döngü için liste iki kez basılıyor ve ayrı elemanlar
   döngünün ekinde çift ayraç üretirdi. */
.ticker-item::after {
  content: "·"; color: var(--text-mute); opacity: 0.45;
  margin-inline-start: 40px; font-size: 13px;
}
.ticker-val { color: var(--text-dim); }
/* .ticker-dot SİLİNDİ (13.10 — minimal şerit): sekiz kalem sekiz ayrı
   renkte nokta taşıyordu ve şerit konfeti gibi okunuyordu. Ritmi artık tek
   biçimli bir ayraç noktası veriyor; renk sinyali şeridin işi değil. */
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.7); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ SECTION SHELL ============ */
.section { max-width: var(--maxw); margin: 0 auto; padding: 96px 24px; position: relative; z-index: 3; }
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
}
/* ⚠️ `// ` ÖNEKİ KALKTI. Kod yorumu işaretiydi ve sitenin daktilo kimliğine
   aitti; tek aileye geçince bölüm etiketinin başında anlamı kalmadı. */
/*
 * ⚠️ BÖLÜM BAŞLIKLARI ORTALI — hero ortalandığı için.
 *
 * Ortalanmış bir hero'nun altında sola yaslı bölüm başlıkları sayfayı iki
 * ayrı düzen gibi gösteriyordu. Ortalama YALNIZ başlık üçlüsünü (etiket,
 * başlık, alt metin) kapsıyor: kartların, zaman çizelgesinin ve tabloların
 * içi sola yaslı kalıyor — uzun metin ortalanınca satır başları kayıyor ve
 * okuma yavaşlıyor.
 */
.section > .reveal > .section-title,
.section > .reveal > .section-sub { text-align: center; }
/* ⚠️ ETİKET `inline-flex`: ebeveyni ortalamak onu ortalar ama `:has()`
   gerektirirdi. Kendisini blok seviyesinde bir flex satırına çevirmek aynı
   sonucu daha az varsayımla veriyor. Seçici `.section > .reveal >` ile dar
   tutuldu: aynı sınıf altbilgide ve sosyal kanıt kartında da geçiyor, onlar
   sola yaslı kalmalı. */
.section > .reveal > .section-tag { display: flex; justify-content: center; }

.section-title {
  font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.028em; line-height: 1.12;
  font-weight: 800; margin-top: 14px; max-width: 760px; margin-inline: auto;
}
/*
 * ── VURGULU BAŞLIK KELİMESİ: TEK DÜZ RENK ────────────────────────────────
 *
 * Eskiden İKİ ayrı sınıf vardı (.grad-text ve .grad-text-tri) ve ikisi de
 * `background-clip: text` ile gradyan boyuyordu. İki sorun üretiyordu:
 *   1. Bölümden bölüme vurgu kelimesi FARKLI renklerde çıkıyordu — okuyucu
 *      için hiçbir anlamı olmayan bir çeşitlilik.
 *   2. Gradyanın açık ucu, çevresindeki beyaz başlık metnine karışıyordu.
 *
 * Artık tek sınıf, tek renk: her vurgulu kelime marka kırmızısı. Sayfada
 * "burası önemli" demenin tek bir görsel dili var.
 *
 * ⚠️ `background-clip` DEĞİL düz `color`: clip'li metin seçildiğinde bazı
 * tarayıcılarda görünmez oluyordu (metin şeffaf, seçim vurgusu altta kalıyor).
 */
.accent-text { color: var(--accent-ink); }
.section-sub {
  font-family: var(--font-ui); font-size: 17px; color: var(--text-dim); margin-top: 14px;
  max-width: 620px; line-height: 1.65; margin-inline: auto;
}

/* ============ HERO ============ */
/*
 * ── ÖLÇÜ HEDEFİ: HERO'NUN TAMAMI İLK EKRANDA ─────────────────────────────
 * Ölçüldü (1280×720): başlık bandı 67px + istatistik şeridi 37px, geriye
 * 616px kalıyor. Eski hero 921px'di, yani %50 fazlaydı ve alt kenarı
 * katlamanın 305px altında kalıyordu — ziyaretçi düğmeleri görmek için
 * kaydırmak zorundaydı.
 *
 * ÜÇ KALEM KÜÇÜLDÜ, HİÇBİRİ SİLİNMEDİ:
 *   · başlık   365px → satır akışı + yükseklik duyarlı punto
 *   · grafik   559px → `min(..., 52vh)` ile ekran boyuna bağlandı
 *   · boşluklar 184px → dikey ritmin tamamı `vh`ye bağlandı
 *
 * ── NİYE `vh` DE VAR, SADECE `vw` DEĞİL ──────────────────────────────────
 * Geniş ama BASIK pencere (1440×720 gibi harici monitör ya da tarayıcı
 * konsolu açıkken) yalnız `vw`ye bakan bir ölçekte en büyük değeri alır ve
 * tam da sığmaması gereken yerde taşar. `min(vw, vh)` ikisinden hangisi
 * darsa ona uyuyor. Alt/üst sınırlar `clamp()` ile sabit px — telefonda
 * okunmayacak kadar küçülmesin, 4K'da absürt büyümesin.
 *
 * ⚠️ `svh` DEĞİL `vh` KULLANILDI: mobil tarayıcıda `vh` adres çubuğu
 * gizlenirken DEĞİŞMİYOR, `svh` değişiyor ve punto kaydırma sırasında
 * oynardı. Burada istenen kararlılık, birkaç pikselik doğruluk değil.
 */
.hero { padding-top: clamp(24px, 4vh, 56px); padding-bottom: clamp(32px, 6vh, 88px); }
/*
 * ⚠️ SÜTUN PAYI 1.05/0.95 DEĞİL 1.3/0.7 — grafik küçüldüğü İÇİN.
 * Grafik `min(440px, 44vh)` ile sınırlı, yani sağ sütun payı ne olursa
 * olsun grafik o kadar büyümüyor; eski 0.95 payı sağda yalnızca BOŞLUK
 * üretiyordu. Pay sola aktarıldı: metin, künye ve rakamlar artık daha
 * geniş bir alana yayılıyor ve ortadaki boşluk kapanıyor.
 */
/*
 * ⚠️ `align-items: center` DEĞİL `stretch`, ve `1fr` DEĞİL `minmax(0,1fr)`.
 *
 * center: iki sütunu yalnız ORTA NOKTALARINDAN tutuyordu — sağdaki daire
 * hiçbir kenara hizalanmadan yüzüyordu. stretch, plakanın üst ve alt
 * kenarını sol sütunun kenarlarına kilitliyor.
 *
 * minmax(0,…): `1fr`in taban ölçüsü `min-content`tur ve SVG'nin İÇSEL
 * genişliği o tabanı şişirip ızgarayı taşırabilir. Sıfır tabanı bunu keser.
 */
/* ⚠️ ARTIK TEK SÜTUN — sağ sütundaki ağ sahnesi kaldırıldı. İki sütunluyken
   metnin satır uzunluğunu ızgara sınırlıyordu; sahne gidince o sınır da gitti
   ve başlık sayfanın tamamına yayılacaktı. Ölçü içeriğe geri verildi. */
/*
 * ⚠️ ORTALANMIŞ — sahne kaldıktan sonra ZORUNLU oldu.
 *
 * İki sütunluyken sağdaki plaka dengeyi kuruyordu. Sahne gidince geriye
 * 860px'lik tek bir sütun kaldı ve 1232px'lik kapsayıcının SOLUNA yaslandı:
 * sağda 370px'lik ölü bir bant açıldı, ekran görüntüsünde ilk göze çarpan
 * şey buydu. Ortalamak boşluğu iki yana dağıtıyor ve hero'yu referansın
 * düzenine yaklaştırıyor.
 */
.hero-grid { display: grid; gap: clamp(28px, 3.5vw, 56px); max-width: 780px; margin-inline: auto; }
.hero { text-align: center; }
.hero-col { min-width: 0; }
.hero h1 {
  /* Üst boşluk 0: durum hapı sahneye taşındığı için h1 sütunun İLK elemanı.
     Satır aralığı ve harf aralığı bir tık gevşedi — kazanılan 44px'in bir
     kısmı tipografi nefesine geri verildi. */
  margin-top: 0;
  /* Ağırlık 700 → 800 ve satır aralığı 1.0'a indi: sans, daktilo harfinden
     daha ince göründüğü için aynı görsel ağırlık bir kademe yukarıda. */
  font-size: clamp(34px, min(5.4vw, 8.2vh), 64px); line-height: 1.0; letter-spacing: -0.035em;
  font-weight: 800;
}
/*
 * `display: block` YOKTU DEĞİL, VARDI VE KALDIRILDI: parçaların her biri
 * kendi satırına iniyordu (dört satır × 96px). Vurgulu kelimenin <span>'i
 * duruyor, artık yalnız RENGİ taşıyor — kırılmayı sütun genişliği veriyor.
 * Boşluk hero.php'de `implode(' ')` ile basılıyor; gerekçesi orada.
 */
.hero-sub {
  font-family: var(--font-ui); font-size: 18px; color: var(--text-dim);
  margin-top: clamp(14px, 2.2vh, 26px); max-width: 620px; line-height: 1.65;
  margin-inline: auto;   /* ortalanmış hero: ölçü sınırı da ortalanmalı */
}
.hero-ctas { margin-top: clamp(18px, 2.6vh, 30px); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── Künye şeridi: indirme düğmesinin hemen altı ──────────────────────────
 * İçerik `pages.download.specs`ten geliyor (hero.php'de gerekçesi yazılı).
 *
 * ⚠️ AYIRICI ÇİZGİ DENENDİ VE GERİ ALINDI. `border-inline-start` + ilk
 * öğede sıfırlama masaüstünde düzgündü ama şerit sarınca (telefonda üç
 * satır oluyor) İKİNCİ SATIRIN BAŞINDA ÖKSÜZ BİR ÇİZGİ kalıyordu —
 * ölçüldü, hata gibi görünüyor. CSS "satırın ilki" diye bir seçici
 * tanımıyor, yani flex sarmasıyla çizgi bir arada YAŞAYAMIYOR.
 * Ayrım artık tipografik: değer parlak ve yarı kalın, etiket sönük.
 * Araya `·` karakteri de BASILMIYOR — ekran okuyucu onu metin sanıp her
 * öğe arasında "orta nokta" derdi. */
.hero-meta {
  margin-top: clamp(10px, 1.4vh, 14px);
  display: flex; flex-wrap: wrap; gap: 9px 28px; justify-content: center;
  font-family: var(--font-ui); font-size: 13px; line-height: 1.5;
  max-width: 760px; margin-inline: auto;
}
.hero-meta .hm { display: inline-flex; align-items: baseline; gap: 7px; }
.hero-meta .v { color: var(--text); font-weight: 500; white-space: nowrap; }
.hero-meta .l { color: var(--text-mute); }

/*
 * ⚠️ ÇİZGİ ARTIK BURADA DEĞİL `.hero-rail`DE.
 * Rakam ızgarası kendi `border-top`unu taşıyordu ve künye şeridi onun
 * ÜSTÜNDE ayrı bir bant olarak duruyordu: aynı yazı tipi, aynı boy, aynı
 * renk ailesi — iki bant birbirinden ayırt edilmiyordu. İkisi tek raya
 * girdi, çizgi rayın oldu.
 */
.hero-rail {
  margin-top: clamp(20px, 3.4vh, 44px);
  border-top: 1px solid var(--line);
  padding-top: clamp(14px, 2.2vh, 24px);
  max-width: 760px; margin-inline: auto;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.hero-stat .num {
  font-family: var(--font-ui); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.03em; color: var(--text); line-height: 1.15;
}
.hero-stat .lbl {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-mute); margin-top: 6px;
}


/* ============ THREE PRIMITIVES ============ */
.prim-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prim {
  position: relative;
  background: linear-gradient(180deg, var(--wash-2), var(--wash-1));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px 36px;
  transform-style: preserve-3d; transition: transform 200ms ease, border-color 200ms ease;
  overflow: hidden;
  height: 100%;
}
/* .prim::before SİLİNDİ (13.9): imleci izleyen 600px'lik radyal kırmızı
   hale. Hover geri bildirimi zaten kenarlık renginde (.prim:hover). */
.prim:hover { border-color: var(--line-strong); }
.prim:hover::before { opacity: 1; }
.prim .num {
  font-family: var(--font-ui); font-size: 10px; color: var(--accent-ink); letter-spacing: var(--track-tech);
}
.prim h3 { margin-top: 16px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.prim p { color: var(--text-dim); font-family: var(--font-ui); font-size: 15px; line-height: 1.65; margin-top: 14px; }
/*
 * ── İKON TONLARI ──────────────────────────────────────────────────────
 * `site_icon()` her SVG'ye bir ton sınıfı basıyor ve gövdeler
 * `stroke="currentColor"` taşıyor; boya buradan iniyor. Böylece ikonlar
 * tema değiştiğinde metinlerle birlikte dönüyor.
 *
 * ⚠️ `--accent` DEĞİL `--accent-ink`: ikon beyaz yüzeyin üstünde duruyor ve
 * marka değerinin oradaki oranı 3.77. Mürekkep karşılığı 6.80 veriyor.
 * Dördü de WCAG 1.4.11'in grafik nesneler için istediği 3.0'ı geçiyor
 * (6.80 / 6.44 / 6.82 / 6.60).
 */
.ico-accent   { color: var(--accent-ink); }
.ico-accent-2 { color: var(--accent-2); }
.ico-ok       { color: var(--ok); }
.ico-warn     { color: var(--warn); }

/*
 * ── İKON KAROSU: DOLU MARKA, ÇERÇEVE DEĞİL ────────────────────────────
 *
 * ⚠️ Eskiden %14 zümrüt zemin + `::before` ile 1px içeriden kesilmiş bir
 * HALKAydı: altıgenin gövdesi kartın yüzey rengiyle doluyor, geriye
 * kılcal bir kenar kalıyordu. Koyu modda o kenar zemine gömülüyor ve
 * ikonlar sönük duruyordu — kullanıcı ekran görüntüsüyle işaret etti.
 *
 * Karo artık dolu ve etiketini sistemin kendi çiftiyle taşıyor
 * (dolgu/`--on-accent`, açık 5.48 · koyu 5.25). Üç kartın üçü de aynı
 * renkte: bölümün başlığı zaten "Tek ağ." diyor.
 */
.hex-icon {
  width: 64px; height: 72px; position: relative;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--accent-fill);
  display: grid; place-items: center;
  margin-bottom: 4px; margin-top: 24px;
}
/* Dolgunun üstündeki ikon: `.ico-*` ton sınıfını EZİYOR (0,2,0 > 0,1,0).
   Ton sınıfları panelin ikon seçicisinde hâlâ iş görüyor; orada karo yok. */
.hex-icon .hex-icon-svg { color: var(--on-accent); }
/* .hex-icon::before SİLİNDİ — halkayı üreten katman oydu (bkz. yukarı). */
.hex-icon svg { position: relative; z-index: 2; width: 26px; height: 26px; }
.prim .meta {
  /* Ayraç DÜZ, kesikli değil: kesik çizgi de terminal estetiğinin parçasıydı
     ve tek aileye geçince kartın içindeki tek "teknik" jest olarak kalmıştı. */
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; gap: 16px; font-family: var(--font-ui); font-size: 10px; color: var(--text-mute);
  letter-spacing: var(--track-caps); text-transform: uppercase; flex-wrap: wrap;
}
.prim .meta span { color: var(--text-dim); }

/* ============ TIMELINE ============ */
.tl { margin-top: 56px; position: relative; }
.tl-line {
  position: absolute; inset-inline-start: 30px; top: 6px; bottom: 6px; width: 2px;
  /* ⚠️ Sayfanın EN GÖRÜNÜR gradyanıydı: tam güçte kırmızı→turuncu→YEŞİL,
     yani zaman çizelgesi boyunca inen bir gökkuşağı. Yeşil ucu ayrıca
     "yeşil uyumsuz" şikâyetinin doğrudan kaynağıydı. Düz çizgiye indi.

     ⚠️ ARTIK NÖTR, marka rengi DEĞİL. Vurgu renginde %35 opaklıkla çizilince
     açık zeminde soluk bir nane şeridine dönüşüyordu ve dört renkli
     numaraların arasında beşinci bir renk gibi duruyordu. Omurga YAPI
     anlatıyor, durum değil; rengi numaralar taşıyor. */
  background: var(--line-strong);
  opacity: 1;
}
.tl-step { display: grid; grid-template-columns: 64px 1fr auto; gap: 28px; align-items: start; padding: 22px 0; }
.tl-item + .tl-item .tl-step { border-top: 1px solid var(--line); }
.tl-num {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 14px; color: var(--text);
  position: relative; z-index: 2;
  box-shadow: 0 0 0 6px var(--bg);
}
/* Rol adlı ton sınıfları (a-d) — eski cyan/violet/matrix/yellow adları
   ÖLDÜ. Değerler DB'de (timeline.steps.tone) ve panel şemasında da rol
   adına döndü; dördü AYNI commit'te değişmek zorunda — tanınmayan tone
   tamamen sessiz bozulur (renk/glow düşer, hata yok). */
/*
 * ⚠️ DÖRT ADIM ARTIK DÖRT AYRI RENK DEĞİL — TEK RENGİN DÖRT KADEMESİ.
 *
 * Eskiden a/b/c/d sırasıyla zümrüt, mavi, kehribar ve KIRMIZIydı. İki sorun
 * vardı ve ikisi de anlamdaydı, kontrastta değil:
 *
 *  1. Bunlar aynı akışın ardışık adımları; dört ayrı ton "dört ayrı DURUM"
 *     diyor. Omurgadaki gökkuşağı zaten bu yüzden kaldırılmıştı, ama rengi
 *     numaralar taşımaya devam ediyordu.
 *  2. Son adım `--down`, yani HATA rengiydi. Kullanıcının kesintisiz kazmaya
 *     başladığı adım kırmızı yanıyordu — paletteki en güçlü olumsuz sinyal
 *     akışın en olumlu anına düşmüştü.
 *
 * Yeni okuma: halka adım adım güçleniyor, son adım DOLU. "Bir yol boyunca
 * ilerliyorsun ve burada varıyorsun" diyor. Kroma merdiveni de korunuyor:
 * çizelgede bağıran tek renk marka.
 *
 * Sınıf adları (a-d) DEĞİŞMEDİ: değerler DB'de (timeline.steps.tone) ve
 * panel şemasında yaşıyor, sözleşme yerinde duruyor — yalnız CSS'teki
 * karşılıkları yeniden anlamlandırıldı.
 */
.tl-num.a { color: var(--accent-ink); border-color: rgba(var(--accent-rgb),0.30); }
.tl-num.b { color: var(--accent-ink); border-color: rgba(var(--accent-rgb),0.55); }
.tl-num.c { color: var(--accent-ink); border-color: rgba(var(--accent-rgb),0.80); }
.tl-num.d {
  color: var(--on-accent); background: var(--accent-fill); border-color: transparent;
}
.tl-body h4 { font-size: 22px; letter-spacing: -0.02em; font-weight: 700; }
.tl-body p { color: var(--text-dim); margin-top: 8px; font-family: var(--font-ui); font-size: 15px; line-height: 1.65; max-width: 580px; }
.tl-time {
  font-family: var(--font-ui); font-size: 10px; color: var(--text-mute);
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  background: var(--wash-1);
  white-space: nowrap;
}

/* ============ TOKENOMICS ============ */
/* align-items: stretch (varsayılan) — iki kart aynı boyda bitsin diye.
   `start` olsaydı kartlar içeriğe göre farklı yükseklikte kalırdı. */
.tk-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.tk-grid > * { display: flex; }
.tk-card {
  background: linear-gradient(180deg, var(--wash-2), var(--wash-1));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; width: 100%;
  display: flex; flex-direction: column;
}
/* Düğmeler kartın dibine yaslansın — iki kartın alt kenarı hizalı kalsın. */
.tk-card .tk-actions { margin-top: auto; padding-top: 28px; }
.tk-ring-wrap { display: flex; gap: 28px; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.tk-ring { width: 220px; height: 220px; flex-shrink: 0; }
.tk-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 14px; }
.tk-leg-row { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 12px; }
.tk-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.tk-leg-row .lbl { color: var(--text-dim); flex: 1; text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 10px; }
.tk-leg-row .pct { color: var(--text); font-variant-numeric: tabular-nums; }

.code-block {
  background: var(--shadow-1); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.6;
  margin-top: 24px;
  overflow-x: auto;
}
.code-block .k { color: var(--accent-2); }
.code-block .n { color: var(--warn); }   /* sayı: altın (yeşil dekoratifti) */
.code-block .c { color: var(--text-mute); }
.code-block .v { color: var(--text); }

/* Parametre listesi — arz eğrisi grafiğinin yerinde duruyor.
   Halkanın yüksekliğini karşılasın diye satır aralığı geniş tutuldu. */
.tk-params { margin-top: 26px; display: flex; flex-direction: column; }
.tk-param {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-ui); font-size: 12px;
}
.tk-param:first-child { border-top: 1px solid var(--line); }
.tk-param dt {
  color: var(--text-dim); flex: 1;
  text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 10px;
}
.tk-param dd {
  color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; white-space: nowrap;
}
.tk-note {
  margin-top: 18px; color: var(--text-mute);
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6;
}

.tk-actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.tk-actions .btn-primary, .tk-actions .btn-glass { font-size: 13px; padding: 11px 16px; }

.tk-card h3 { font-size: 22px; letter-spacing: -0.02em; font-weight: 700; }
.tk-card .lead { color: var(--text-dim); font-family: var(--font-ui); font-size: 15px; margin-top: 8px; line-height: 1.65; }

/* ============ TERMINAL FEED ============ */
.term {
  background: rgba(var(--bg-rgb),0.85); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  margin-top: 40px; overflow: hidden; box-shadow: 0 30px 80px var(--shadow-2), 0 0 0 1px rgba(var(--accent-rgb),0.05);
}
.term-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--wash-1);
  font-family: var(--font-ui); font-size: 12px; color: var(--text-dim);
}
.tl-lights { display: flex; gap: 7px; }
.tl-lights span { width: 11px; height: 11px; border-radius: 50%; }
/* Klasik macOS üçlüsü — BİLEREK token'a bağlı değil: terminal pastişi "başka
   bir pencere"; kırmızı nokta artık markayla çakıştığı için pencere süsü
   marka paletinden ayrıldı. (Eski serbest-pembe kaçağı da böylece öldü.) */
.tl-lights .r { background: #FF5F57; }
.tl-lights .y { background: #FEBC2E; }
.tl-lights .g { background: #28C840; }
.term-bar .path { color: var(--text); }
.term-bar .clock { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.term-bar .p95 { color: var(--warn); margin-inline-start: 12px; }

.term-filters {
  display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--wash-1);
  flex-wrap: wrap;
}
.filter-chip {
  font-family: var(--font-ui); font-size: 11px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim); letter-spacing: var(--track-caps);
  background: transparent;
}
.filter-chip:hover { color: var(--text); border-color: var(--line-strong); }
.filter-chip.active { color: var(--text); background: rgba(var(--accent-rgb),0.1); border-color: rgba(var(--accent-rgb),0.4); }
.term-stream {
  margin-inline-start: auto; align-self: center;
  font-family: var(--font-ui); font-size: 11px; color: var(--text-mute);
}
.term-stream .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  /* Serbest hex'ti — token'a bağlandı (13.5). Terminal "canlı akış" noktası. */
  background: var(--accent-2); margin-inline-end: 8px; vertical-align: middle;
}
.term-body {
  height: 380px; overflow: hidden; padding: 14px 18px;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.7;
}
/*
 * ⚠️ `padding-block` ŞART, `line-height` DEĞİL.
 * Satır bir flex kutusu ve içindeki rozet (`.tag`) kendi dolgusuyla
 * ~21px yer kaplıyor — yani satır yüksekliğini `line-height` değil ROZET
 * belirliyordu ve rozetler dikeyde birbirine yapışıyordu. `line-height`
 * büyütmek metni aşağı iterdi ama rozetlerin arasını AÇMAZDI.
 * `gap` de çözmüyor: bu satırda yatay yönde çalışıyor.
 */
.term-row { display: flex; gap: 12px; align-items: center; white-space: nowrap; padding-block: 4px; }
.term-row .ts { color: var(--text-mute); }
.term-row .tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10.5px;
  letter-spacing: var(--track-caps); min-width: 64px; text-align: center;
}
.tag-JOIN   { background: rgba(var(--accent-rgb),0.12);  color: var(--accent-ink);   border: 1px solid rgba(var(--accent-rgb),0.25); }
.tag-MINING { background: rgba(var(--accent-rgb),0.12);  color: var(--accent-ink); border: 1px solid rgba(var(--accent-rgb),0.25); }
.tag-CIRCLE { background: rgba(var(--accent-2-rgb),0.12); color: var(--accent-2); border: 1px solid rgba(var(--accent-2-rgb),0.25); }
.tag-AD     { background: rgba(var(--warn-rgb),0.12); color: var(--warn); border: 1px solid rgba(var(--warn-rgb),0.25); }
.term-row .addr { color: var(--text); }
.term-row .extra { color: var(--text-dim); }
/* Kazanç rakamı ALTIN: para, sıcak paletin içinde kendi anlamını taşıyor. */
.term-row .plus { color: var(--warn); font-weight: 500; }
.term-row .geo {
  margin-inline-start: auto; padding: 1px 7px; border-radius: 4px;
  font-size: 10px; letter-spacing: var(--track-tech);
  color: var(--accent-ink); background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.18);
}
.term-row.new { animation: slideIn 320ms ease; }
.term-row.prompt-row {
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--line); color: var(--accent-2);
}
.term-caret {
  display: inline-block; width: 7px; height: 14px; background: var(--accent-2);
  animation: caret 1s steps(2) infinite; vertical-align: middle;
}
@keyframes caret { 50% { opacity: 0; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.term-foot {
  display: flex; gap: 24px; padding: 12px 16px; border-top: 1px solid var(--line);
  background: var(--wash-1);
  font-family: var(--font-ui); font-size: 11px; color: var(--text-dim);
  flex-wrap: wrap;
}
.term-foot b { color: var(--text); font-weight: 500; }
.term-foot .health { margin-inline-start: auto; }

/* ============ BUILT DIFFERENT ============ */
/* ⚠️ ÜÇ SÜTUN, DÖRT DEĞİL. "KYC yok" kartı kaldırıldı (0041) ve geriye üç
   kart kaldı; dört sütunda son hücre boş düşerdi. Dördüncü bir kart
   yazılırsa buranın 4'e dönmesi gerekiyor. */
.bd-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bd-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px;
  background: linear-gradient(180deg, var(--wash-2), var(--wash-1));
  transition: border-color 200ms;
  height: 100%;
}
.bd-card:hover { border-color: var(--line-strong); }
.bd-x {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: var(--down);
  background: rgba(var(--down-rgb),0.1); border: 1px solid rgba(var(--down-rgb),0.25);
  font-family: var(--font-ui); font-size: 18px;
}
.bd-card h4 { margin-top: 18px; font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }
.bd-card p { margin-top: 8px; color: var(--text-dim); font-family: var(--font-ui); font-size: 14.5px; line-height: 1.65; }

/* ============ SOCIAL PROOF ============ */
.sp-card {
  margin-top: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 40px 48px; gap: 40px;
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: rgba(var(--accent-rgb),0.05);   /* düz (13.6) */
  position: relative; overflow: hidden;
}
/* .sp-card::before SİLİNDİ (13.9): 800px'lik radyal renk yıkamasıydı.
   Kartın kimliği düz yüzeyi ve kenarlığıyla duruyor. */
.sp-left { position: relative; z-index: 2; }
.sp-left h3 { font-size: 32px; letter-spacing: -0.03em; font-weight: 700; max-width: 380px; line-height: 1.1; margin-top: 18px; }
.sp-avatars { display: flex; margin-top: 28px; }
.sp-av {
  width: 56px; height: 56px; border-radius: 50%;
  /*
   * ⚠️ ETİKET SABİT KOYU — `--on-accent` DEĞİL.
   *
   * Avatar zeminleri tema token'ı değil: her kişiye düşen zümrüt→teal→mavi
   * rampasından geliyor (`pn-d1…pn-d9`, PHP'den, CSP kuralı olarak). Beyaz
   * harf o rampada 1.88 ile 3.77 arasında geziyordu — yarısı okunmuyordu.
   * Koyu harf rampanın tamamında 4.77–8.70 veriyor. Zemin temayla
   * değişmediği için etiket de değişmemeli.
   *
   * Hex doğrudan yazılmıyor: `--ink-on-pastel` iki temada da aynı değeri
   * taşıyor ve tema DIŞI zeminlerin mürekkebini tek yerde tutuyor.
   */
  display: grid; place-items: center; color: var(--ink-on-pastel); font-weight: 600; font-size: 16px;
  font-family: var(--font-display); letter-spacing: -0.02em;
  /* ⚠️ Halka `--bg` DEĞİL. Avatarlar `.sp-card`ın zümrüt yıkamalı zemininde
     duruyor; açık modda `--bg` o yıkamaya çok yakın kalıyor ve üst üste binen
     avatarlar birbirine yapışık görünüyordu. Düz beyaz halka ayrımı geri
     veriyor, koyu modda da zaten `--surface` kartla uyumlu. */
  border: 3px solid var(--surface);
  margin-inline-start: -16px;
  box-shadow: 0 6px 18px var(--shadow-1);
}
.sp-av:first-child { margin-inline-start: 0; }
.sp-av.more { background: var(--wash-3); color: var(--text-dim); border: 3px dashed var(--wash-4); }
.sp-right { text-align: end; position: relative; z-index: 2; }
.sp-count { font-size: 64px; letter-spacing: -0.04em; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-count-lbl { font-family: var(--font-ui); font-size: 10px; color: var(--text-dim); margin-top: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; }

/* ============ FINAL CTA ============ */
.fcta { text-align: center; padding: 120px 24px; max-width: 880px; margin: 0 auto; position: relative; z-index: 3; }
.hex-badge {
  width: 88px; height: 100px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  /*
   * ⚠️ `--accent-2` DEĞİL, MARKA DOLGUSU.
   *
   * Eski yorum "sayfa sonu kor" diyordu ve kırmızı palette doğruydu:
   * `--accent-2` o zaman turuncuydu (#F1854B), sıcak markanın yanında bir
   * kor gibi duruyordu. Zümrüde geçince aynı token gökyüzü mavisi oldu ve
   * sayfanın kapanışındaki MARKA İŞARETİ maviye döndü — zaman çizelgesindeki
   * gökkuşağıyla aynı cins kaçak: token değişti, onu kullanan kararın
   * gerekçesi değişmedi.
   *
   * Rozet markayı taşıyor; rengi de markanın olmalı. Sistemin dolgu/etiket
   * çifti kullanılıyor: açık 5.48, koyu 5.25.
   */
  background: var(--accent-fill);
  display: grid; place-items: center; margin: 0 auto;
  color: var(--on-accent); font-weight: 700; font-size: 36px; font-family: var(--font-display); letter-spacing: -0.04em;
  position: relative;
}
/* .hex-badge::before SİLİNDİ: aynı clip-path'in blur(20px) kopyasıydı,
   yani şeklin kenarına yapışık sürekli bir renk düşüşü — adı gölge olmayan
   bir gradyan. Rozetin kütlesi düz dolgusundan geliyor. */
.fcta h2 { margin-top: 32px; font-size: clamp(48px, 6vw, 76px); line-height: 1; letter-spacing: -0.05em; font-weight: 700; }
.fcta p { font-family: var(--font-ui); font-size: 17px; color: var(--text-dim); margin-top: 22px; line-height: 1.6; }
.fcta-btn-wrap { margin-top: 36px; display: inline-block; }
.fcta-btn-wrap .btn-primary { font-size: 16px; padding: 16px 28px; }
.fcta-btn-wrap .btn-primary svg { width: 22px; height: 22px; }
.version-strip {
  margin-top: 48px; display: inline-flex; gap: 14px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--wash-1);
  font-family: var(--font-ui); font-size: 10px; color: var(--text-dim); letter-spacing: var(--track-tech);
  flex-wrap: wrap; justify-content: center;
}
.version-strip span + span::before { content: "·"; margin-inline-end: 14px; color: var(--text-mute); }

/* ============ FOOTER ============ */
.footer {
  position: relative; z-index: 3;
  margin-top: 80px;
  /* Dikey siyah sönümleme kaldırıldı (13.9): footer'ı sayfadan koyulaştıran
     bir arka plan gradyanıydı. Ayrım artık üst ayraç çizgisiyle. */
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
/* .f-orbs SİLİNDİ (13.9) — .bg-orbs ile aynı gerekçe: blur'lanmış düz
   daireler, yani yazılmamış radyal gradyanlar. İkizi atlamamak için aynı
   commit'te; 13.6'da tam bu ikiz çifti atlanmıştı. */

/* TOP DIVIDER */
.f-top-divider {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center;
  height: 56px;
}
.f-top-divider-line { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.f-top-divider-tag { display: flex; align-items: center; gap: 12px; }
.f-status-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),0.25); background: rgba(var(--accent-rgb),0.06);
  font-family: var(--font-ui); font-size: 10px; color: var(--accent-ink);
  letter-spacing: var(--track-tech);
}
.f-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.18);
  animation: pulse 1.8s ease-in-out infinite;
}

/* NEWSLETTER */
.f-newsletter-wrap {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto; padding: 32px 24px 48px;
}
.f-newsletter-inner {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center;
  /* Radyal kırmızı yıkama kaldırıldı (13.9) — düz yüzey kaldı. */
  background: var(--wash-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
}
.f-newsletter-inner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-2-rgb),0.45) 50%, transparent); /* tek renk (13.6) */
}
.f-news-meta .section-tag { color: var(--accent-ink); }
.f-news-meta h3 {
  margin-top: 12px;
  font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; font-weight: 700; line-height: 1.05;
  max-width: 460px;
}
.f-news-meta p {
  margin-top: 14px;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.6;
  color: var(--text-dim); max-width: 380px;
}

.f-input-shell {
  display: flex; align-items: stretch; gap: 0;
  background: var(--shadow-2); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 4px;
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.05);
  transition: border-color 200ms, box-shadow 200ms;
}
.f-input-shell:focus-within {
  border-color: rgba(var(--accent-rgb),0.5);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.1), 0 0 0 3px rgba(var(--accent-rgb),0.08);
}
/*
 * ⚠️ `.f-input-shell::after` SİLİNDİ (13.12).
 * Kutunun İÇİNDE, alt kenardan 2px yukarıda duran 1px'lik kırmızı bir
 * çizgiydi. Aslı "shimmer" ışıltı animasyonuydu; 13.6'da gradyanlar
 * düzleşince animasyon öldü ve geriye kenarlıkla hizasız, hiçbir şey
 * sınırlamayan STATİK bir çizgi kaldı — ekranda alt kenarlık bozuk gibi
 * duruyordu. Kutunun kenarını `border`, odağı `:focus-within` halkası,
 * sonucu `.sent`/`.error` kenar rengi zaten anlatıyor.
 */
.f-input-shell.sent { border-color: rgba(var(--ok-rgb),0.4); }
.f-input-shell.error { border-color: rgba(var(--down-rgb),0.5); }
.f-prompt {
  /* ⚠️ Terminal komut istemi YEŞİLDİ ve ilk yeşil taramasında kaçtı:
     testin DEKORATİF listesi beş seçiciyle sınırlıydı, bu altıncıydı.
     Kırmızı bir bültenin içinde tek başına yeşil bir `$ subscribe` satırı
     paletin en göze batan kaçağıydı. Liste artık bu seçiciyi de kapsıyor. */
  font-family: var(--font-ui); color: var(--accent-ink); padding: 0 16px;
  font-size: 13px; flex-shrink: 0; display: flex; align-items: center;
}
.f-input-shell input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text);
  font-family: var(--font-ui); font-size: 13px; padding: 14px 4px;
}
.f-input-shell input::placeholder { color: var(--text-mute); }
/* ═══════════════════════════════════════════════════════════════════════
 | BEKLEME GÖSTERGESİ — sayfa yükleyicisi DEĞİL
 |
 | ⚠️ Site sunucuda render ediliyor: HTML geldiğinde içerik ZATEN orada.
 | Tam sayfa bir yükleyici, hazır içeriği perde arkasında bekletir ve
 | siteyi YAVAŞLATIR. Gerçek boşluk eşzamansız formlarda:
 |
 |   · bülten formu → istek boyunca HİÇBİR geri bildirim yoktu; buton
 |     etiketi ancak YANIT gelince değişiyordu (ölçüldü, main.js:479).
 |     Yavaş bağlantıda kullanıcı tıklıyor ve hiçbir şey olmuyor.
 |   · destek formu → yalnız buton pasifleşiyordu, "gönderiliyor" demiyordu.
 |
 | ⚠️ Hareket hassasiyetinde dönme durur (global `*` kuralı) ama halka
 | GÖRÜNÜR kalır; durum ayrıca `aria-busy`, sönük etiket ve `cursor:
 | progress` ile taşınıyor — yani tek taşıyıcı animasyon değil.
 * =================================================================== */
.btn-spin {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(var(--bg-rgb),0.30);
  border-top-color: var(--bg);
  animation: btn-spin 700ms linear infinite;
  display: none;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

[aria-busy="true"] .btn-spin { display: block; }
[aria-busy="true"] .f-submit,
[aria-busy="true"] .btn-primary { cursor: progress; }
[aria-busy="true"] .f-submit > span,
[aria-busy="true"] .btn-primary > span { opacity: 0.55; }

.f-submit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 22px; margin: 2px; border-radius: 10px;
  background: var(--accent-fill); color: var(--on-accent);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: var(--track-tech);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--wash-4), 0 8px 20px var(--shadow-2);
  transition: transform 160ms;
}
/* .f-submit:hover — kaydırma kaldırıldı; geri bildirim renkte. */
.f-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.f-news-note {
  margin-top: 12px; font-family: var(--font-ui); font-size: 11.5px; letter-spacing: var(--track-tech);
}
.f-news-note.ok  { color: var(--ok); }
.f-news-note.bad { color: var(--down); }

/* GRID + WATERMARK */
.f-grid-wrap { position: relative; z-index: 2; }
.f-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-ui); font-size: 10px; line-height: 1.0;
  color: var(--wash-2); white-space: pre; pointer-events: none;
  user-select: none;
  text-align: center;
  letter-spacing: -0.02em;
  z-index: 1;
}
/* .f-watermark-glow SİLİNDİ (13.9): elips gradyan + blur(40px), yani iki
   kat gradyan. Filigran yazısının kendisi yeterli. */
.f-grid {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto; padding: 24px 24px 56px;
  display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 40px;
}
.f-brand-col { padding-inline-end: 16px; }
.f-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 18px; letter-spacing: -0.03em; font-weight: 700;
}
.f-logo-badge {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent-fill); display: grid; place-items: center;
  color: var(--on-accent); font-weight: 700; font-size: 17px;
  box-shadow: inset 0 0 0 1px var(--wash-4), 0 6px 16px var(--shadow-1);
}
/* Üst bardakiyle aynı gerekçe (bkz. .logo-badge.is-img), 32px kutu. */
.f-logo-badge.is-img {
  width: fit-content; height: auto; max-width: 170px;
  background: none; box-shadow: none; border-radius: 0;
}
.f-logo-badge.is-img img {
  display: block; height: 32px; width: auto; max-width: 100%;
}
.f-brand-col p {
  font-family: var(--font-ui); font-size: 14.5px; color: var(--text-dim);
  margin-top: 18px; line-height: 1.7; max-width: 320px;
}
.f-brand-meta {
  margin-top: 22px; display: grid; grid-template-columns: auto auto auto; gap: 18px;
  font-family: var(--font-ui); font-size: 10px;
  max-width: 320px;
}
.f-brand-meta-row { display: flex; flex-direction: column; gap: 4px; }
.f-brand-meta-row .lbl { color: var(--text-mute); letter-spacing: var(--track-tech); }
.f-brand-meta-row .val { color: var(--text); font-size: 12px; letter-spacing: var(--track-tech); }

.f-col h6 {
  font-family: var(--font-ui); font-size: 10px; color: var(--accent-ink);
  letter-spacing: var(--track-caps); text-transform: uppercase; margin-bottom: 18px; font-weight: 500;
  position: relative; padding-bottom: 10px;
}
.f-col h6::after {
  content:""; position: absolute; bottom: 0; inset-inline-start: 0; width: 18px; height: 1px;
  background: var(--accent-fill); opacity: 0.5;
}
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.f-col a {
  font-size: 13.5px; color: var(--text-dim); transition: color 160ms, transform 160ms;
  display: inline-flex; align-items: center; gap: 8px;
}
.f-col a:hover { color: var(--text); }
.f-col a .ext { font-family: var(--font-ui); font-size: 10px; color: var(--text-mute); letter-spacing: var(--track-tech); }

/* METRICS STRIP */
.f-metrics {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 11px; color: var(--text-dim);
  background: linear-gradient(90deg, transparent, var(--wash-1) 50%, transparent);
}
.f-metrics .m-arrow {
  color: var(--accent-ink); font-size: 13px;
  animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.f-metrics .m-item { display: inline-flex; align-items: baseline; gap: 6px; }
.f-metrics .m-item b { color: var(--text); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.f-metrics .m-item i { font-style: normal; color: var(--text-mute); font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase; }
.f-metrics .m-sep { color: var(--text-mute); opacity: 0.5; }
.f-metrics .f-metrics-lang { margin-inline-start: auto; }

/* BOTTOM */
.f-bottom {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto; padding: 24px 24px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-ui); font-size: 13.5px; color: var(--text-mute); flex-wrap: wrap;
  letter-spacing: var(--track-tech);
}
/* SVG kalp: ölçü px, renk currentColor üzerinden --accent. */
.f-bottom .heart { width: 12px; height: 12px; color: var(--accent-ink); vertical-align: -2px; }
.f-bottom .f-node { color: var(--text-mute); }
.f-shimmer {
  position: relative; z-index: 2;
  /* ⚠️ 13.6'da gölge BİLEREK bırakılmıştı ("parlaklık gölgeyle kalıyor") ama
     aynı pas .logo-badge ve .btn-primary'de tam tersini yapmıştı: karar kendi
     içinde tutarsızdı ve denetimde dört ayrı ajan aynı yeri işaretledi.
     Kural tek: sert kenar kalır, bulanık renkli hale gider. Şerit 1px kalınlaştı. */
  height: 3px; background: var(--accent-fill);
}

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
/* JS yoksa hiçbir şey gizli kalmasın */
.no-js .reveal { opacity: 1; transform: none; }

/* ── GERÇEK MONOSPACE — yalnızca burada ────────────────────────────────
 |
 | Rakam ve karakter hizasının ANLAM taşıdığı dört yer: kod blokları, satır
 | içi kod, terminal panosu ve bülten komut istemi. Sitenin geri kalanı
 | Plus Jakarta Sans; gerekçe token bloğunda yazılı.
 |
 | ⚠️ BLOK DOSYANIN SONUNDA, BİLEŞEN KURALLARINDAN SONRA — ölçüldü.
 | İlk yazımda bileşenlerden ÖNCE duruyordu ve `.code-block`un kendi
 | `font-family: var(--font-ui)` satırı EŞİT ÖZGÜLLÜKTE ama daha sonra
 | geldiği için kazanıyordu: kod blokları sansla çiziliyordu. Özgüllüğü
 | yükseltmek yerine sıra düzeltildi; `!important` gerekmiyor.
 |
 | ⚠️ Hizalanması gereken SAYILAR bu listeye girmiyor. Onlar sansın kendi
 | tablo rakamlarıyla (`font-variant-numeric: tabular-nums`) hizalanıyor —
 | rakam hizası için ayrı bir aile yüklemek gereksiz.
 */
.code-block, .code-block *,
.prose code, .post-body code, .copy-row code,
.term-bar, .term-bar *, .term-filters, .term-filters *,
.term-stream, .term-stream *, .term-body, .term-body *,
.f-prompt, .f-input-shell input, .f-watermark {
  font-family: var(--font-code);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Tek sütuna inince grafik ARTIK BAŞLIĞIN ALTINDA: `52vh` genişlik
     telefonda ekranın yarısını yerdi. Sabit üst sınır + ortalama. */
  /* Tek sütunda plaka yüksekliğini paylaşacağı bir komşu kalmıyor:
     genişlikle sınırlanıp ortalanıyor, sahne kendi taban yüksekliğini alıyor. */
  .prim-grid { grid-template-columns: 1fr; }
  /* Üç kart iki sütunda öksüz bir satır bırakıyor — tek sütuna iniyor. */
  .bd-grid { grid-template-columns: 1fr; }
  .tk-grid { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: repeat(3, 1fr); }
  .f-grid .f-brand-col { grid-column: 1 / -1; padding-inline-end: 0; }
  .f-newsletter-inner { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .sp-card { flex-direction: column; text-align: center; align-items: center; }
  .sp-left h3 { margin-inline: auto; }
  .sp-right { text-align: center; }
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .section { padding: 64px 24px; }
  .f-watermark { font-size: 7px; }
}
@media (max-width: 600px) {
  /* .bd-grid burada YOK: 900px kuralı zaten tek sütuna indiriyor. */
  .f-grid { grid-template-columns: repeat(2, 1fr); }
  .f-brand-meta { grid-template-columns: 1fr 1fr; }
  .tl-step { grid-template-columns: 48px 1fr; }
  .tl-time { grid-column: 2; margin-top: 6px; }
  .tl-line { inset-inline-start: 24px; }
  .tl-num { width: 48px; height: 48px; }
  /* ÜÇ SAYI İKİ SÜTUNDA: üçüncüsü tek başına kalıp yanında BOŞ HÜCRE
     bırakıyordu. Üç sütun 375px'te okunmaz (en uzun sayı 9 hane, mono
     yazı tipi ~11px'e inerdi); üçüncüyü satırın tamamına yaymak deliği
     kapatıyor ve rakamın puntosunu korumuyor — büyütüyor. */
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stat:last-child { grid-column: 1 / -1; }
  /* Dört künye maddesi telefonda düzensiz sarıyordu (2 + 1 + 1). Izgaraya
     alınca 2×2 oluyor: hem hizalı hem delik yok. */
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  /* ⚠️ 162px'lik sütunda "Android 8.0 · Minimum sürüm" satıra sığmıyordu:
     `.hm` nowrap bir flex satırı olduğu için ETİKET KENDİ İÇİNDE sarıyor,
     `align-items: baseline` yüzünden ikinci satır asılı kalıyordu
     ("Minimum" üstte, "sürüm" altta, hizasız). Ölçüldü: iki öğe 32px,
     ikisi 16px yüksekliğinde.
     Çözüm dar ekranda DEĞER ÜSTTE / ETİKET ALTTA — `.hero-stat`ın hemen
     yukarıda kullandığı kalıbın aynısı, yani yeni bir dil icat etmiyoruz. */
  .hero-meta .hm { flex-direction: column; align-items: flex-start; gap: 2px; }
  .term-bar .clock { display: none; }
  .f-watermark { font-size: 5px; }
  .f-top-divider { grid-template-columns: 1fr; gap: 12px; padding: 16px 24px; height: auto; }
  .f-top-divider-line { display: none; }
  .f-input-shell { flex-wrap: wrap; }
  .f-prompt { padding: 8px 12px 0; }
  /* ═══════════════════════════════════════════════════════════════════════
 | BEKLEME GÖSTERGESİ — sayfa yükleyicisi DEĞİL
 |
 | ⚠️ Site sunucuda render ediliyor: HTML geldiğinde içerik ZATEN orada.
 | Tam sayfa bir yükleyici, hazır içeriği perde arkasında bekletir ve
 | siteyi YAVAŞLATIR. Gerçek boşluk eşzamansız formlarda:
 |
 |   · bülten formu → istek boyunca HİÇBİR geri bildirim yoktu; buton
 |     etiketi ancak YANIT gelince değişiyordu (ölçüldü, main.js:479).
 |     Yavaş bağlantıda kullanıcı tıklıyor ve hiçbir şey olmuyor.
 |   · destek formu → yalnız buton pasifleşiyordu, "gönderiliyor" demiyordu.
 |
 | ⚠️ Hareket hassasiyetinde dönme durur (global `*` kuralı) ama halka
 | GÖRÜNÜR kalır; durum ayrıca `aria-busy`, sönük etiket ve `cursor:
 | progress` ile taşınıyor — yani tek taşıyıcı animasyon değil.
 * =================================================================== */
.btn-spin {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(var(--bg-rgb),0.30);
  border-top-color: var(--bg);
  animation: btn-spin 700ms linear infinite;
  display: none;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

[aria-busy="true"] .btn-spin { display: block; }
[aria-busy="true"] .f-submit,
[aria-busy="true"] .btn-primary { cursor: progress; }
[aria-busy="true"] .f-submit > span,
[aria-busy="true"] .btn-primary > span { opacity: 0.55; }

.f-submit { width: 100%; margin-top: 6px; padding: 12px; justify-content: center; }
  .sp-card { padding: 32px 24px; }
  .sp-count { font-size: 48px; }
  .term-body { height: 320px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===================================================================
 | ALT SAYFALAR
 | Ortak bileşenler: sayfa başlığı, alt menü, doküman düzeni, prose,
 | akordiyon, tablo, metrik kartları, durum listesi, form.
 * =================================================================== */

.page { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 96px; position: relative; z-index: 3; }
/*
 * ⚠️ `.page-narrow` TAMAMEN KALDIRILDI (13.12).
 *
 * 13.11'de ölçüyü kaptan içeriğe indirmiştik; sol hiza düzeldi ama SSS
 * hâlâ diğer sayfalardan dar duruyordu ve sağ tarafta 292px boşluk
 * bırakıyordu — kullanıcı "yarım kalmış gibi" diye bildirdi. Haklı:
 * hizayı düzeltip genişliği farklı bırakmak sorunun yarısını çözüyordu.
 *
 * Artık sitenin TEK kabı var. Okuma ölçüsü gereken tek yer blog yazısının
 * gövdesi (`.post-body`) — hukuki sayfalarda `.prose` zaten 760'ta
 * duruyor, SSS akordiyonu ise satır listesi, geniş kapta doğru okunuyor.
 */

/* ---------------- Sayfa başlığı ---------------- */
.page-head { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 11px; color: var(--text-mute);
  letter-spacing: var(--track-tech);
}
.crumbs a { color: var(--text-dim); transition: color 160ms; }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs .sep { opacity: 0.5; }
.crumbs .now { color: var(--text); }

.page-head h1 {
  margin-top: 20px;
  font-size: clamp(34px, 5vw, 54px); line-height: 1.03; letter-spacing: -0.045em; font-weight: 700;
  max-width: 900px;
}
.page-lead {
  margin-top: 18px; max-width: 640px;
  font-family: var(--font-ui); font-size: 17px; line-height: 1.65; color: var(--text-dim);
}
.page-meta {
  margin-top: 26px; display: flex; gap: 10px 22px; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 10.5px; color: var(--text-mute);
  letter-spacing: var(--track-caps); text-transform: uppercase;
}
.page-meta b { color: var(--text-dim); font-weight: 500; }

/* ---------------- Grup alt menüsü (sekmeler) ---------------- */
.subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 28px;
}
.subnav a {
  font-family: var(--font-ui); font-size: 11.5px; letter-spacing: var(--track-caps);
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--text-dim); background: var(--wash-1);
  transition: color 160ms, border-color 160ms, background 160ms;
}
.subnav a:hover { color: var(--text); border-color: var(--line-strong); }
.subnav a.active { color: var(--accent-ink); border-color: rgba(var(--accent-rgb),0.4); background: rgba(var(--accent-rgb),0.08); }

/* ---------------- Doküman düzeni (yan menü + metin) ---------------- */
.doc-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 56px;
  padding-top: 48px; align-items: start;
}
.doc-aside { position: sticky; top: 92px; }
.doc-aside h6 {
  font-family: var(--font-ui); font-size: 10px; color: var(--accent-ink);
  letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 500;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.doc-toc { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.doc-toc a {
  display: block; padding: 7px 12px; border-radius: 8px; font-size: 13.5px;
  color: var(--text-dim); border-inline-start: 2px solid transparent;
  transition: color 160ms, background 160ms, border-color 160ms;
}
.doc-toc a:hover { color: var(--text); background: var(--wash-2); }
.doc-toc a.active { color: var(--accent-ink); border-inline-start-color: var(--accent-ink); background: rgba(var(--accent-rgb),0.06); }

/* ---------------- Prose ---------------- */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 18px; }
/* ⚠️ ALT SAYFA ÖLÇEĞİ DE TİPOGRAFİ GEÇİŞİNDEN PAY ALDI.
   Değerler daktilo harfi için ayarlanmıştı (gövde 14.5px, satır içi kod
   12.5px). Orantılı bir sansta aynı sayılar belirgin biçimde küçük okunuyor:
   ölçüldü, doküman paragrafları 12.5px'e kadar düşüyordu. Ağırlıklar da bir
   kademe yukarı çıktı; sans, monodan ince görünüyor. */
.prose h2 {
  margin-top: 52px; font-size: 28px; letter-spacing: -0.025em; font-weight: 800;
  scroll-margin-top: 96px;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 .idx {
  font-family: var(--font-ui); font-size: 12px; color: var(--accent-ink);
  letter-spacing: var(--track-tech); display: block; margin-bottom: 10px; font-weight: 500;
}
.prose h3 { margin-top: 32px; font-size: 20px; letter-spacing: -0.02em; font-weight: 700; color: var(--text); }
.prose p, .prose li { font-size: 16px; line-height: 1.75; color: var(--text-dim); }
.prose strong { color: var(--text); font-weight: 600; }
/* ⚠️ BLOG GÖVDESİ ARTIK AYNI SEÇİCİYİ PAYLAŞIYOR.
   `.post-body` bu kuralların ELLE YAZILMIŞ EKSİK KOPYASIYDI ve ikisini de
   aynı `render_blocks()` besliyor: bağlantı alt çizgisi tam güçteydi,
   madde imleri tarayıcı varsayılanı disc'ti, satır içi kod 13.5'teki sıcak
   aile geçişini hiç almamıştı. Kopyalamak bir sonraki palet fazında yine
   ayrışırdı — seçici paylaşılıyor. */
/*
 * ⚠️ DÜĞMELER BU KURALIN DIŞINDA.
 *
 * `.prose a` (0,0,1,1) `.btn-primary`den (0,0,1,0) daha güçlü: metin akışına
 * gömülü bir indirme düğmesi vurgu YEŞİLİNİ yazı rengi olarak alıyor ve zaten
 * yeşil olan dolgunun üstünde kayboluyordu — ölçüm açıkta 1.24, koyuda 1.49.
 * Üstüne bir de alt çizgi geliyordu. Bağlantı boyaması yalnız GERÇEK metin
 * bağlantılarına ait; düğme kendi rengini taşır.
 */
.prose a:not([class*="btn-"]), .post-body a:not([class*="btn-"]) {
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(var(--accent-rgb),0.35);
}
.prose a:not([class*="btn-"]):hover, .post-body a:not([class*="btn-"]):hover { text-decoration-color: var(--accent-ink); }
.prose ul, .prose ol, .post-body ul, .post-body ol { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose ul, .post-body ul { list-style: none; padding-inline-start: 4px; }
.prose ul > li, .post-body ul > li { position: relative; padding-inline-start: 20px; }
.prose ul > li::before, .post-body ul > li::before {
  content: "▸"; position: absolute; inset-inline-start: 0; color: var(--accent-ink); opacity: 0.7;
  font-size: 12px; top: 2px;
}
.prose code, .post-body code {
  /* Satır içi kod: metin, zemin ve kenarlık üçü birden sıcak aileye geçti.
     Yalnız `color` değiştirilseydi zemin ve kenarlık yeşil kalırdı — testin
     kural GÖVDESİNİN tamamını taraması tam olarak bunu yakaladı. */
  font-size: 14px; color: var(--accent-2);
  background: rgba(var(--accent-2-rgb),0.07); border: 1px solid rgba(var(--accent-2-rgb),0.16);
  border-radius: 5px; padding: 1px 6px;
}

/* ---------------- Uyarı / bilgi kutusu ---------------- */
.notice {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--wash-1);
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start;
}
.notice .ico {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 13px;
}
.notice p { font-family: var(--font-ui); font-size: 15px; line-height: 1.65; color: var(--text-dim); margin: 0; }
.notice b { color: var(--text); font-weight: 600; }
.notice.warn { border-color: rgba(var(--warn-rgb),0.3); background: rgba(var(--warn-rgb),0.05); }
.notice.warn .ico { color: var(--warn); background: rgba(var(--warn-rgb),0.12); border: 1px solid rgba(var(--warn-rgb),0.25); }
.notice.info .ico { color: var(--accent-ink); background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.22); }

/* ---------------- Akordiyon (SSS) ---------------- */
.acc { margin-top: 8px; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%; display: flex; align-items: center; gap: 18px; text-align: start;
  padding: 22px 4px; font-size: 16.5px; letter-spacing: -0.02em; color: var(--text);
  font-weight: 500;
}
.acc-q:hover { color: var(--accent-ink); }
.acc-q .mark {
  margin-inline-start: auto; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--text-dim);
  font-family: var(--font-ui); font-size: 14px; line-height: 1;
  transition: transform 220ms ease, color 160ms, border-color 160ms;
}
.acc-item.open .acc-q .mark { transform: rotate(45deg); color: var(--accent-ink); border-color: rgba(var(--accent-rgb),0.4); }
.acc-a { overflow: hidden; height: 0; transition: height 260ms cubic-bezier(.2,.7,.2,1); }
.acc-a-inner { padding: 0 4px 24px; max-width: 720px; }
.acc-a-inner p { font-family: var(--font-ui); font-size: 16px; line-height: 1.7; color: var(--text-dim); }
.acc-a-inner p + p { margin-top: 12px; }
.no-js .acc-a { height: auto; }

.acc-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 32px; }

/* ---------------- Veri tablosu ---------------- */
.table-wrap {
  margin-top: 28px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--wash-1);
}
/* ⚠️ ÖLÇÜ TABLONUN KENDİSİNDE, `td`de DEĞİL. Bir kez `.dtable td` içinde
   aranıp değiştirilmeye çalışıldı ve orada hiç yoktu: değişiklik sessizce
   hiçbir şey yapmadı, tablo 12.5px kaldı. */
.dtable { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 14px; }
.dtable th {
  text-align: start; padding: 14px 18px; white-space: nowrap;
  font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 500;
  color: var(--text-mute); border-bottom: 1px solid var(--line-strong);
  background: var(--wash-1);
}
.dtable td {
  padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--text-dim);
  white-space: nowrap;
}
.dtable tr:last-child td { border-bottom: none; }
.dtable tbody tr:hover td { background: var(--wash-1); color: var(--text); }
.dtable .mono-strong { color: var(--text); }
.dtable .num-cell { font-variant-numeric: tabular-nums; }

/* ── İstatistik yüzde barı ─────────────────────────────────────────────
   ⚠️ BU DÖRT SINIF BUGÜNE KADAR KURALSIZDI (ölçüldü: stats.php:66-71
   basıyor, CSS'te sıfır eşleşme). Bar hiç çizilmiyor, yalnız yüzde rakamı
   görünüyordu — css_rule() genişliği görünmez bir span'e uygulanıyordu.
   Hata yok, konsol mesajı yok: sessiz eksiğin ders kitabı hâli. */
.row-12 { display: flex; align-items: center; gap: 12px; }
.bar-track {
  flex: 1; min-width: 90px; height: 6px; border-radius: 3px;
  background: var(--wash-3); overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent-fill); }
.num-end { margin-inline-start: auto; }

/* ---------------- Rozetler ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-dim);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok      { color: var(--ok); border-color: rgba(var(--ok-rgb),0.3);  background: rgba(var(--ok-rgb),0.07); }
.badge.warn    { color: var(--warn); border-color: rgba(var(--warn-rgb),0.3); background: rgba(var(--warn-rgb),0.07); }
.badge.down    { color: var(--down);    border-color: rgba(var(--down-rgb),0.3); background: rgba(var(--down-rgb),0.07); }
.badge.info    { color: var(--accent-ink);   border-color: rgba(var(--accent-rgb),0.3);  background: rgba(var(--accent-rgb),0.07); }
.badge.muted   { color: var(--text-mute); }

/* ---------------- Metrik kartları ---------------- */
.mcards { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mcard {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--wash-2), var(--wash-1));
  padding: 22px;
}
.mcard .lbl {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-mute);
}
.mcard .val {
  margin-top: 14px; font-family: var(--font-ui); font-size: 30px; letter-spacing: -0.03em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.mcard .delta { margin-top: 10px; font-family: var(--font-ui); font-size: 11px; }
.mcard .delta.up   { color: var(--ok); }
.mcard .delta.down { color: var(--down); }
.mcard .delta.flat { color: var(--text-mute); }
.mcard .spark { margin-top: 16px; width: 100%; height: 34px; display: block; }

/* ---------------- Durum listesi ---------------- */
.status-hero {
  margin-top: 32px; border: 1px solid rgba(var(--ok-rgb),0.25); border-radius: var(--radius-lg);
  /* Yeşil ile kırmızıyı KARIŞTIRIYORDU — ara ton çamurdu. Tek renk. */
  background: rgba(var(--ok-rgb),0.06);
  padding: 30px 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.status-hero .big { font-size: 26px; letter-spacing: -0.03em; font-weight: 700; }
.status-hero .when { margin-inline-start: auto; font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); }

.status-list { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.status-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.status-row:last-child { border-bottom: none; }
.status-row .name { font-size: 15px; color: var(--text); }
.status-row .name small {
  display: block; margin-top: 4px; font-family: var(--font-ui); font-size: 11px; color: var(--text-mute);
}
.uptime-bar { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.uptime-bar i {
  display: block; width: 4px; height: 100%; border-radius: 1px; background: var(--ok); opacity: 0.75;
}
.uptime-bar i.warn { background: var(--warn); }
.uptime-bar i.down { background: var(--down); }
.uptime-bar i:hover { opacity: 1; }

.incidents { margin-top: 40px; }
.incident {
  border-inline-start: 2px solid var(--line-strong); padding: 4px 0 22px 20px; margin-inline-start: 4px;
}
.incident:last-child { padding-bottom: 0; }
.incident .when { font-family: var(--font-ui); font-size: 10.5px; color: var(--text-mute); letter-spacing: var(--track-tech); }
.incident h4 { margin-top: 8px; font-size: 16px; letter-spacing: -0.02em; }
.incident p { margin-top: 8px; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.65; color: var(--text-dim); }
.incident.ok   { border-inline-start-color: rgba(var(--ok-rgb),0.5); }
.incident.warn { border-inline-start-color: rgba(var(--warn-rgb),0.5); }

/* ---------------- Yol haritası ---------------- */
.rm { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; }
.rm-phase {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--wash-2), var(--wash-1));
  padding: 28px 30px;
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
}
.rm-phase.done    { border-color: rgba(var(--ok-rgb),0.22); }
.rm-phase.active  { border-color: rgba(var(--accent-rgb),0.32); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.10), 0 20px 60px var(--shadow-1); }
.rm-when { font-family: var(--font-ui); }
.rm-when .q { font-size: 22px; color: var(--text); letter-spacing: -0.02em; }
.rm-when .yr { font-size: 11px; color: var(--text-mute); letter-spacing: var(--track-tech); margin-top: 6px; }
.rm-when .badge { margin-top: 14px; }
.rm-body h3 { font-size: 22px; letter-spacing: -0.025em; font-weight: 700; }
.rm-body > p { margin-top: 10px; font-family: var(--font-ui); font-size: 15px; line-height: 1.65; color: var(--text-dim); }
.rm-items { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.rm-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--font-ui); font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
}
.rm-item .tick { flex-shrink: 0; color: var(--text-mute); }
.rm-item.done .tick { color: var(--ok); }
.rm-item.wip  .tick { color: var(--accent-ink); }

/* ---------------- İndirme ---------------- */
.dl-card {
  margin-top: 40px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
  /* 700px'lik radyal kırmızı yıkama kaldırıldı (13.9). Kalan nötr beyaz
     sönümleme kartın MALZEMESİ — renk gradyanı değil, yüzey parlaklığı. */
  background: linear-gradient(180deg, var(--wash-2), var(--wash-1));
  padding: 44px 46px;
  display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center;
}
.dl-card h2 { font-size: 32px; letter-spacing: -0.035em; font-weight: 700; }
.dl-card p { margin-top: 12px; font-family: var(--font-ui); font-size: 15px; color: var(--text-dim); line-height: 1.65; max-width: 460px; }
.dl-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.dl-qr {
  width: 148px; height: 148px; flex-shrink: 0; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--shadow-1);
  display: grid; place-items: center; padding: 12px;
}
.dl-qr svg { width: 100%; height: 100%; }
.spec-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.spec {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.spec .lbl { font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-mute); }
.spec .val { margin-top: 10px; font-family: var(--font-ui); font-size: 15px; color: var(--text); }

/* ---------------- Marka kiti ---------------- */
.swatches { margin-top: 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.swatch .chip { height: 92px; }
.swatch .meta { padding: 14px 16px; font-family: var(--font-ui); }
.swatch .nm { font-size: 12px; color: var(--text); }
.swatch .hx { margin-top: 6px; font-size: 11px; color: var(--text-mute); letter-spacing: var(--track-tech); }
.logo-tiles { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.logo-tile {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; display: grid; place-items: center; min-height: 160px;
}
/*
 * ⚠️ KARO ZEMİNLERİ TEMA TOKEN'I DEĞİL, SABİT — bilerek.
 *
 * Bu üç karo "aynı işaret KOYU / AÇIK / VURGU zemininde nasıl görünür"
 * sorusunu yanıtlıyor; zeminin kendisi sayfanın konusu. Token'a bağlıyken
 * `.on-dark` `--bg`, `.on-light` da `--text` okuyordu — açık moda geçince
 * ikisi de yer değiştiriyor ve "koyu zemin" başlıklı karo BEYAZ oluyordu.
 * Marka kiti belgelediği şeyi temaya göre değiştiremez.
 *
 * Değerler koyu paletin ta kendisi; sapmayı tests/theme.sh yakalar.
 */
.logo-tile.on-dark  { background: #070B09; }
.logo-tile.on-light { background: #EAF2EE; }
.logo-tile.on-accent { background: #059669; }
.logo-tile .cap {
  margin-top: 18px; font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
/* Alt yazı da karonun zeminine göre sabit: temaya değil karoya ait.
   ⚠️ Alfalar ÖLÇÜLDÜ, tahmin edilmedi: ilk değerler 4.09 / 3.61 / 3.02 ile
   üçü de AA'nın altındaydı. 10px büyük harf mono, yani tam olarak küçük
   metin — 4.5 gerekiyor. */
.logo-tile.on-dark .cap   { color: rgba(234,242,238,0.62); }   /* 6.92 */
.logo-tile.on-light .cap  { color: rgba(7,11,9,0.66); }        /* 6.22 */
.logo-tile.on-accent .cap { color: rgba(7,11,9,0.90); }        /* 4.86 — zümrüt
                              zeminde koyu metnin tavanı 5.25, yani burada
                              alfayla oynama payı en dar olan karo bu. */

/* ---------------- Kopyalanabilir kod ---------------- */
.copy-row {
  display: flex; align-items: stretch; gap: 0; margin-top: 14px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--shadow-1);
}
/* ⚠️ BU GERÇEKTEN KOD: kutuda sha256 özeti duruyor ve kopyalanmak için var.
   Orantılı yazı tipinde karakterler kayıyor, göz eşleştiremiyor. Mono
   listesine de eklendi (dosyanın sonundaki blok). */
.copy-row code {
  flex: 1; min-width: 0; padding: 12px 14px; font-size: 13.5px;
  color: var(--text); overflow-x: auto; white-space: nowrap; background: none; border: none;
}
.copy-btn {
  flex-shrink: 0; padding: 0 16px; border-inline-start: 1px solid var(--line);
  font-family: var(--font-ui); font-size: 10.5px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-dim); transition: color 160ms, background 160ms;
}
.copy-btn:not(:disabled):hover { color: var(--accent-ink); background: rgba(var(--accent-rgb),0.06); }
.copy-btn.done { color: var(--ok); }

/* ---------------- API uç listesi ---------------- */
.ep { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; overflow: hidden; }
.ep-head {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--wash-1); border-bottom: 1px solid var(--line);
  font-family: var(--font-ui); font-size: 13px; flex-wrap: wrap;
}
.ep-method {
  font-size: 10px; letter-spacing: var(--track-tech); padding: 4px 9px; border-radius: 5px; font-weight: 600;
}
.ep-method.get    { color: var(--accent-ink);   background: rgba(var(--accent-rgb),0.12);  border: 1px solid rgba(var(--accent-rgb),0.28); }
.ep-method.post   { color: var(--ok); background: rgba(var(--ok-rgb),0.12);  border: 1px solid rgba(var(--ok-rgb),0.28); }
/* Bugün 14 ucun hepsi GET/POST; defter bu ikisine açık olduğu için renkleri
   şimdiden tanımlı — ilk PUT eklendiğinde renksiz düz rozet çıkmasın. */
.ep-method.put    { color: var(--warn); background: rgba(var(--warn-rgb),0.12); border: 1px solid rgba(var(--warn-rgb),0.28); }
.ep-method.delete { color: var(--down);    background: rgba(var(--down-rgb),0.12); border: 1px solid rgba(var(--down-rgb),0.28); }
.ep-path { color: var(--text); }
.ep-flags { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-limit { font-size: 10.5px; color: var(--text-mute); white-space: nowrap; }
.ep-body { padding: 18px; }
.ep-body .code-block { margin-top: 0; }

/* Kart içi metin: uç açıklaması prose gövdesiyle aynı okunurlukta olmalı,
   .dtable'ın mono/nowrap düzeni burada açıklama sütununu kesiyordu. */
.ep-lead { font-size: 13.5px; line-height: 1.7; color: var(--text-dim); margin: 0 0 14px; }
.ep-none { font-family: var(--font-ui); font-size: 12px; color: var(--text-mute); margin: 0 0 14px; }
.ep-sub {
  display: block; margin-bottom: 8px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--text-mute);
}
.ep-body .table-wrap { margin-top: 0; margin-bottom: 16px; }
.ep-body .dtable td:last-child { white-space: normal; min-width: 220px; }
.ep-errors { margin-top: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ep-errors .ep-sub { margin-bottom: 0; }
.ep-errors code {
  font-family: var(--font-ui); font-size: 11.5px; color: var(--warn);
  padding: 3px 8px; border-radius: 5px;
  background: rgba(var(--warn-rgb),0.08); border: 1px solid rgba(var(--warn-rgb),0.2);
}

/* ---------------- Basın ---------------- */
.press-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* ---------------- Tema düğmesi ---------------- */
/*
 * ⚠️ JS YOKSA GİZLİ. `.no-js` sınıfı `<html>` üzerinde duruyor ve JS açılışta
 * onu siliyor; düğme JS olmadan hiçbir şey yapamayacağı için çizilmiyor da.
 * Görünüp çalışmayan bir düğme, hiç olmayandan kötü.
 */
.no-js .theme-toggle { display: none; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  transition: border-color 200ms, background 200ms;
}
.theme-toggle:hover { border-color: var(--line-strong); background: var(--wash-2); }

/*
 * İkon TEK ELEMENT, iki tema iki çizim: açıkta içi dolu daire (güneş),
 * koyuda içine gölge düşmüş hilal. `box-shadow: inset` ile hilal
 * oluşturuluyor — ikinci bir SVG yüklemeye gerek yok.
 */
.theme-toggle-ico {
  /*
   * GÜNEŞ: küçük bir çekirdek + sekiz ışın. Işınlar `box-shadow` ile
   * çiziliyor, ikinci bir elemana ya da SVG'ye gerek yok.
   *
   * ⚠️ İLK SÜRÜM DÜZ BİR DAİREYDİ ve ekranda gri bir leke gibi okunuyordu —
   * kullanıcı ekran görüntüsüyle gösterdi. Sorun renk değil BİÇİMDİ: güneşi
   * güneş yapan şey çekirdek değil ışınlar.
   */
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-dim);
  box-shadow:
     0 -7px 0 -3px var(--text-dim),  0  7px 0 -3px var(--text-dim),
    -7px  0   0 -3px var(--text-dim),  7px 0   0 -3px var(--text-dim),
    -5px -5px 0 -3.5px var(--text-dim),  5px  5px 0 -3.5px var(--text-dim),
    -5px  5px 0 -3.5px var(--text-dim),  5px -5px 0 -3.5px var(--text-dim);
  transition: box-shadow 200ms, background 200ms, width 200ms, height 200ms;
}
/*
 * HİLAL: aynı elemanın içine kaydırılmış bir gölge düşürülüyor; ışınlar
 * kapanıyor. Tek elemanla iki simge, geçiş de yumuşak.
 */
.theme-dark .theme-toggle-ico {
  width: 15px; height: 15px;
  background: transparent;
  box-shadow: inset -4px -2px 0 0 var(--text-dim);
}

.press-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  transition: border-color 200ms;
}
.press-card:hover { border-color: var(--line-strong); }
.press-card h4 { font-size: 17px; letter-spacing: -0.02em; }
.press-card p { margin-top: 8px; font-family: var(--font-ui); font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }
.press-card .go { margin-top: 16px; display: inline-flex; font-family: var(--font-ui); font-size: 11px; color: var(--accent-ink); letter-spacing: var(--track-tech); }

/*
 * Partner logosu — press kartının içinde.
 *
 * ⚠️ ÖLÇÜ SINIRLI, oran KORUNUYOR. Logolar medya kütüphanesinden geliyor ve
 * kurumların gönderdiği dosyalar her ölçüde: sınırsız bırakılan bir logo
 * kartı tek başına ekran boyu uzatıyordu. `object-fit: contain` oranı
 * bozmuyor — logo esnetmek marka kılavuzu ihlali sayılır.
 */
.partner-logo {
  display: block; max-width: 140px; max-height: 40px; width: auto; height: auto;
  margin-bottom: 14px; object-fit: contain;
}

/* ---------------- İletişim formu ---------------- */
.contact-grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.channels { display: flex; flex-direction: column; gap: 14px; }
.channel {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  transition: border-color 200ms;
}
.channel:hover { border-color: var(--line-strong); }
.channel .ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.22); color: var(--accent-ink);
  font-family: var(--font-ui); font-size: 14px;
}
.channel h4 { font-size: 15px; letter-spacing: -0.02em; }
.channel p { margin-top: 6px; font-family: var(--font-ui); font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-mute);
}
.field input, .field textarea, .field select {
  width: 100%; background: var(--shadow-1); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 13px 15px; color: var(--text);
  font-family: var(--font-ui); font-size: 13px; outline: none;
  transition: border-color 180ms, box-shadow 180ms;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: rgba(var(--accent-rgb),0.5); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.08);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Turnstile widget'ı — iframe ölçüsünü Cloudflare veriyor (300×65), biz
   yalnız boşluğu ve dar ekranda taşmayı yönetiyoruz. `.cf-turnstile` sınıfını
   biz basıyoruz (`app/turnstile.php`); iframe'in İÇİNE hiçbir stil geçmiyor. */
.bot-check .cf-turnstile { max-width: 100%; overflow: hidden; }
.bot-check noscript .form-note { display: block; margin-top: 10px; }

.form-note { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; color: var(--text-mute); }
.form-note.ok  { color: var(--ok); }
.form-note.bad { color: var(--down); }

/* ---------------- 404 ---------------- */
.nf { text-align: center; padding: 120px 24px 140px; max-width: 720px; margin: 0 auto; position: relative; z-index: 3; }
.nf .code {
  font-family: var(--font-ui); font-size: clamp(72px, 14vw, 140px); line-height: 1;
  letter-spacing: -0.04em; font-weight: 600;
}
.nf h1 { margin-top: 24px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.04em; font-weight: 700; }
.nf p { margin-top: 18px; font-family: var(--font-ui); font-size: 13.5px; color: var(--text-dim); line-height: 1.65; }
.nf-actions { margin-top: 34px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.nf-links { margin-top: 56px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------------- Sayfa altı CTA ---------------- */
.page-cta {
  margin-top: 72px; border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: rgba(var(--accent-rgb),0.05);   /* düz (13.6) */
  padding: 36px 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.page-cta h3 { font-size: 24px; letter-spacing: -0.03em; font-weight: 700; }
.page-cta p { margin-top: 8px; font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--text-dim); }
.page-cta .acts { margin-inline-start: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- Alt sayfa responsive ---------------- */
@media (max-width: 1000px) {
  .doc-layout { grid-template-columns: 1fr; gap: 32px; }
  .doc-aside { position: static; }
  .doc-toc { flex-direction: row; flex-wrap: wrap; }
  .doc-toc a { border-inline-start: none; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; padding: 7px 14px; }
  .doc-toc a.active { border-color: rgba(var(--accent-rgb),0.4); }
  .mcards { grid-template-columns: repeat(2, 1fr); }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .press-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .dl-card { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .rm-phase { grid-template-columns: 1fr; gap: 20px; }
  .rm-items { grid-template-columns: 1fr; }
  .logo-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-head { padding: 44px 0 30px; }
  .mcards, .spec-grid, .swatches, .press-grid { grid-template-columns: 1fr; }
  .status-row { grid-template-columns: 1fr; gap: 12px; }
  .page-cta { padding: 28px 24px; }
  .page-cta .acts { margin-inline-start: 0; }
  .prose h2 { font-size: 24px; }
}

/* Tabloda tür etiketi (terminal etiketleriyle aynı renk sınıflarını kullanır) */
.dtable .tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; letter-spacing: var(--track-caps); min-width: 64px; text-align: center;
}

/* ============ YARDIMCI SINIFLAR ============
   CSP'de `style-src` `'unsafe-inline'` olmadan satır içi `style=""`
   çalışmıyor ve nonce ÖZNİTELİKLERE uygulanmıyor. Bu blok, işaretlemede
   dağınık duran statik bildirimlerin tamamının karşılığı — çoğu tablo
   sütun genişliği.
   ELLE GENİŞLETMEYİN: yeni bir ölçü gerekiyorsa anlamlı bir sınıf yazın.
   ======================================== */
.u-w20p { width:20%; }
.u-w18p { width:18%; }
.u-minw180 { min-width:180px; }
.u-ms10 { margin-inline-start:10px; }

/* ── Sparkline ve QR: renk artık nitelikte değil sınıfta ──────────────────
 | Üç hex literali `stats.php`de, biri `download.php`de gömülüydü. "PHP'de
 | hex" bilinçli bir istisnaydı ama koşulu "TEK YERDE ve tests/theme.sh'in
 | gördüğü bir yerde" olmasıydı; bu dördü ikisini de sağlamıyordu.
 | ⚠️ `stop-color` ve `stroke` CSS'ten verilebilen SVG sunum öznitelikleri —
 | öznitelik yazmak zorunlu değil, sınıf yeterli. */
.spark-stop.up   { stop-color: var(--ok); }
.spark-stop.down { stop-color: var(--down); }
.spark-line.up   { fill: none; stroke: var(--ok); }
.spark-line.down { fill: none; stroke: var(--down); }
.dl-qr svg rect  { fill: var(--text); }

/* Devre dışı kopyala düğmesi — `is-disabled` sınıfının CSS karşılığı yoktu,
   düğme devre dışıyken bile hover'da vurguya yanıyordu. Gerçek `:disabled`
   sözde-sınıfı kullanılıyor; hover artık yalnız etkin düğmede. */
.copy-btn:disabled { color: var(--text-mute); cursor: not-allowed; }

/* Form select'i input'la aynı yükseklikte değildi (47.5 / 45.5 — ölçüldü):
   tarayıcının kendi ok/dolgu çizimi. Dosyanın tamamında tek `appearance`
   bildirimi yoktu. */
.field select { appearance: none; -webkit-appearance: none; }

/* ═══════════════════════════════════════════════════════════════════════
 | ⚠️ AŞAĞIDAKİ 25 KURAL EKSİKTİ — SINIF ADLARI İŞARETLEMEDE, KARŞILIKLARI
 | HİÇBİR YERDE (Faz 13.7'de bulundu)
 |
 | `f274d9c` ("style-src'den de unsafe-inline kalktı — 150 satır içi stil
 | taşındı") satır içi `style=""` bildirimlerini sınıf adlarına çevirdi ama
 | yukarıdaki DÖRT kural dışında hiçbirinin gövdesi yazılmadı. Git geçmişi
 | doğruladı: bu seçiciler hiçbir commit'te var olmamış.
 |
 | Sessizliğin nedeni: eksik bir CSS sınıfı HATA ÜRETMEZ. Sayfa açılır,
 | konsol temizdir, test yeşildir — yalnız düzen sessizce yanlıştır.
 | Ölçülen üç somut sonuç:
 |
 |   1. `.grid-1` → 5 sayfada (api, marka-kiti ×2, indir, basın-kiti,
 |      doğrulayıcılar) metin, iki sütunlu `.doc-layout`ın 240px'lik YAN
 |      MENÜ sütununa düşüyordu; 936px'lik metin sütunu bomboş duruyordu.
 |      Tarayıcıda ölçüldü: prose genişliği 240px.
 |   2. `.logo-text` + `.hdr-signin` → 375px'te üst bar 431px genişliğe
 |      taşıyordu (ölçüldü: scrollWidth 431 > 375), "Giriş yap" kırpılıyordu.
 |   3. `.wrap` → `.dtable td`nin `white-space: nowrap` değerini ezmesi
 |      gerekiyordu; ezmiyordu, uzun hücreler tabloyu yatay kaydırıyordu.
 |
 | Değerler mevcut tasarım dilinden türetildi (başlık ölçekleri `.prose h2`
 | ve `.prose h3` ile, mono metin `.section-sub` ile hizalı).
 * =================================================================== */

/* ── Düzen ── */
/* Özgüllük: `.doc-layout.grid-1` (0,2,0) tek sınıflı `.doc-layout`ı (0,1,0)
   yener. Yalnız `.grid-1` yazmak YETMEZDİ. */
.doc-layout.grid-1 { grid-template-columns: 1fr; }
.doc-layout.pt-20  { padding-top: 20px; }
.doc-layout.pt-32  { padding-top: 32px; }

/* ── Ölçü ve boşluk ── */
.u-maxw820 { max-width: 820px; }
.u-maxw900 { max-width: 900px; }
.u-mt16 { margin-top: 16px; }
.u-mt20 { margin-top: 20px; }
.u-mt24 { margin-top: 24px; }
.u-mt32 { margin-top: 32px; }
.u-w38p { width: 38%; }

/* ── Bölüm başlıkları — .prose h2/h3 ölçeğiyle aynı ailede ── */
.sub-h1 { margin-top: 56px; font-size: 28px; letter-spacing: -0.025em; font-weight: 800; }
.sub-h2 { margin-top: 48px; font-size: 24px; letter-spacing: -0.025em; font-weight: 800; }
.sub-h2-wide { max-width: none; }

/* ── Giriş paragrafları (durum sayfası) ──
   ⚠️ Sınıf adları "mono-" ile başlıyor ama artık mono DEĞİL. Ad markup'ta
   da geçtiği için burada bırakıldı; tek aileye geçişte anlamını yitirdi. */
.mono-lead {
  font-family: var(--font-ui); font-size: 16px; line-height: 1.7;
  color: var(--text-dim); margin-top: 12px; max-width: 640px;
}
.mono-note {
  font-family: var(--font-ui); font-size: 14.5px; line-height: 1.7;
  color: var(--text-mute); margin-top: 10px; max-width: 640px;
}

/* ── Tablo ── */
/* ⚠️ `.dtable td` (0,1,1) düz `.wrap`ı (0,1,0) YENER — eleman seçicisi şart. */
.dtable td.wrap { white-space: normal; }
.kv-key { width: 32%; }

/* ── Terminal metni ── */
.txt-mute { color: var(--text-mute); }
/* ⚠️ Adı "matrix": eski palette YEŞİL token'ın adıydı. Yeşil politikası
   gereği dekoratif yeşil öldü, terminalin geri kalanıyla aynı kora döndü. */
.txt-matrix { color: var(--accent-2); }

/* ── Ufak ayarlar ── */
.dim { opacity: 0.55; }
.display-22 { font-size: 22px; }
.tight { letter-spacing: -0.04em; }

/* Tokenomi halkası — SVG boyaları tema token'larından (bkz. tokenomics.php) */
.tk-track     { stroke: var(--wash-4); }
.tk-total     { fill: var(--text); font-family: var(--font-display); font-weight: 800; }
.tk-total-cap { fill: var(--text-mute); font-family: var(--font-ui); font-weight: 600; }
.logo-text { white-space: nowrap; }
.f-news-form { min-width: 0; }

/* ⚠️ 460px'te MARKA ADI DÜŞÜYOR, GİRİŞ BUTONU KALIYOR.
   Ölçüldü: rozet(34) + sağ blok(227) + boşluk(30) + dolgu(48) = 339 < 375.
   Kelime işareti yerine butonu feda etmek yanlış olurdu — biri kimlik,
   diğeri eylem; dar ekranda eylem kazanır. Rozet zaten markayı taşıyor. */
@media (max-width: 460px) {
  .logo-text { display: none; }
}

/* Marka rozeti — renkleri koleksiyondan geldiği için ölçüler burada,
   renkler `css_rule()` ile <head>'e basılıyor. */
.brand-badge {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 32px; letter-spacing: -0.04em;
}

/* ===================================================================
   BLOG — liste ızgarası, yazı gövdesi, sayfalama

   Sıfırdan yazıldı: dosyada blogla ilgili tek satır yoktu (ölçüldü).
   Yeniden kullanılanlar: .page/.page-narrow sarmalayıcıları, .page-head
   ve .crumbs başlık bloğu, .badge rozeti, .btn-ghost düğmesi.

   ── SATIR İÇİ style YOK ────────────────────────────────────────────
   CSP'de `style-src` nonce'lu ve `'unsafe-inline'` kapalı. Kart
   kapaklarının ölçüsü HTML `width`/`height` ÖZNİTELİĞİYLE geliyor;
   öznitelik satır içi stil değil, politikayı ihlal etmiyor.
   =================================================================== */

/* IZGARA EKSİK KART BIRAKMIYOR — `auto-fit`, sabit 3 sütun DEĞİL.
   Sabit üç sütunda 4 yazı "3 + 1 kart ve iki boş hücre" olarak çıkıyordu;
   proje kuralı "ızgarada eksik kart bırakma: ya yay ya tamamla".
   `auto-fit` + `minmax` boş izleri çökertip kalan kartları satıra yayıyor,
   yani 4 yazı iki sıraya 2+2 olarak dağılıyor ve delik kalmıyor.
   `minmax(280px, 1fr)` ayrıca ara genişliklerde kendiliğinden 2 sütuna
   düşüyor — aşağıdaki 1000px kırılımı yalnız üst sınırı netleştiriyor. */
.blog-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.blog-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 200ms;
}
.blog-card:hover { border-color: var(--line-strong); }
/* ⚠️ `transition`dan `transform` DÜŞTÜ: hiçbir kural transform kurmuyordu,
   yani bildirilen geçiş hiç çalışmıyordu (üç kartta birden). Kaldırmak,
   var olmayan bir hover'ı eklemekten dürüst. */
/* Öne çıkan kartın hover'ı: özgüllük eşit + sonra geldiği için taban kural
   onu eziyordu ve öne çıkan kart hover'a HİÇ yanıt vermiyordu (ölçüldü). */
.blog-card.is-featured:hover { border-color: rgba(var(--accent-rgb),0.6); }

/* Öne çıkan kart yalnız kenarlıkla ayrılıyor: ızgarada satır atlatan bir
   büyütme (grid-column: span 2) tek yazılı bir blogda tek başına duran dev
   bir kart üretirdi ve "eksik kart bırakma" kuralını çiğnerdi. */
.blog-card.is-featured { border-color: rgba(var(--accent-rgb),0.35); }

.blog-card-cover { display: block; background: var(--surface-2); }

/* GÖRSEL ORANI SABİT — kapak inmeden ÖNCE de.
   `aspect-ratio` + `object-fit: cover`, farklı oranlardaki kapakların
   ızgarayı bozmasını engelliyor.

   `height: auto` ŞART VE ÖLÇÜLEREK EKLENDİ. HTML'deki `height="630"`
   özniteliği bir sunum ipucu ve CSS'te `height` verilmediğinde KULLANILAN
   değer oluyor; `aspect-ratio` ise yalnız `height: auto` iken yüksekliği
   hesaplıyor. Yani öznitelik sessizce oranı iptal ediyordu: 395px genişlikte
   kart, 222px yerine 630px yüksek bir kapak çiziyordu (tarayıcıda
   `getBoundingClientRect()` ile ölçüldü). CSS'i OKUYARAK görülmüyor —
   kural doğru yazılmış görünüyor, yalnız hiç uygulanmıyor. Faz 4'teki
   "height:100% grid öğesinde dairesel" bulgusuyla aynı sınıf. */
.blog-card-cover img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.blog-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.blog-card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 12px; color: var(--text-mute);
}

.blog-card-title { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; margin: 0; }
.blog-card-title a { color: var(--text); transition: color 160ms; }
.blog-card-title a:hover { color: var(--accent-ink); }

/* Özet üç satırda kesiliyor: kart yükseklikleri hizalı kalsın diye.
   `-webkit-line-clamp` desteklenmeyen tarayıcıda metin tam görünür —
   bozulma değil, yalnız daha uzun kart. */
.blog-card-excerpt {
  color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.blog-card-more { margin-top: auto; font-family: var(--font-ui); font-size: 12px; color: var(--accent-ink); }

.blog-empty {
  margin-top: 48px; padding: 32px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  color: var(--text-mute); font-family: var(--font-ui); font-size: 14px;
}

/* ── Sayfalama ─────────────────────────────────────────────────── */
.blog-pager { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.blog-pager-info { font-family: var(--font-ui); font-size: 13px; color: var(--text-mute); }

/* Pasif uç `<span>`, yani zaten tıklanamıyor. Ama `.btn-ghost:hover` kuralı
   ETİKETE BAKMIYOR: fare üstüne gelince arka planı ve kenarlığı AKTİF düğme
   gibi parlıyordu (ölçüldü) — kullanıcıya tıklanabilir olduğunu söyleyen
   yanlış bir işaret. Hover'ı geri almak, sönük görünümü sabit tutuyor. */
.btn-ghost.is-off { opacity: 0.4; cursor: default; }
.btn-ghost.is-off:hover { background: transparent; border-color: var(--line); }

/* ── Tek yazı ──────────────────────────────────────────────────── */
.post-meta time { font-family: var(--font-ui); }

.post-cover { margin: 32px 0 0; }
.post-cover img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}

/* ⚠️ Okuma ölçüsü BURADA, sayfa kabında değil: `.page-narrow` kalkınca
   gövde 1232px'e yayılırdı ve 16px punto ile satır ~150 karaktere çıkardı.
   760px, `.prose` ile aynı ölçü. */
.post-body { max-width: 760px; margin-top: 32px; font-size: 16px; line-height: 1.75; color: var(--text-dim); }
.post-body > p { margin: 0 0 18px; }
.post-body h3 { margin: 36px 0 14px; font-size: 20px; color: var(--text); letter-spacing: -0.01em; }
/* Blogda blok boşluğu ELEMANIN KENDİSİNDE (prose'da `> * + *` ile veriliyor);
   yalnız o kalıyor, görünüm kuralları yukarıda paylaşıldı. */
.post-body ul, .post-body ol { margin: 0 0 18px; }
/* ⚠️ Uyarı kutusu SONRAKİ paragrafa 0px ile yapışıyordu (üstünde 18px vardı). */
.post-body .notice { margin: 0 0 18px; }

.post-figure { margin: 28px 0; }
.post-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.post-figure figcaption {
  margin-top: 10px; text-align: center;
  font-size: 13px; color: var(--text-mute);
}

.post-back { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-pager { flex-direction: column; gap: 12px; }
  .post-body { font-size: 15px; }
}

/* Çevirisi olmayan dil satırı — bağlantı çalışıyor (o dilin blog listesine
   iniyor) ama hedefin yazı OLMADIĞINI göz de söylüyor. `title` özniteliği
   yalnız fareyle görülüyor; sönüklük klavye ve dokunmatikte de duruyor. */
.lang-row.is-untranslated .lang-native { opacity: 0.55; }