/* ══════════════════════════════════════════════════════════════════════
   3 · KABUK — `dd-shell.css`, DadaDiet'in kendi kabuğu.

   🔴 GEÇİŞ KİPİ (2026-09-01). Kabuk kapsayıcıları ARTIK İKİ AD TAŞIYOR:
     <div  class="topbar ust-bant">      <header class="header kabuk-basi">
     <nav  class="nav ana-menu">         <footer class="footer orange dip">
     .foot-grid dip-izgara · .foot-col dip-kolon · .foot-legal dip-yasal
     .foot-bottom dip-alt
   Eski ad dd-shell'in 54 SÜS kuralını (marka değiştirici hapları, mağaza
   rozetleri, avatar menüsü, mega menü, çekmece) ayakta tutar; kanon adı
   §27'nin TİPOGRAFİSİNİ getirir. Kanon sonra yüklendiği için eşit
   özgüllükte o kazanır — yani yazı boyu/ağırlığı/renk kaynağın, süsler
   markanın.

   ⚠ BU BİLEREK İKİ SÖZLÜKTÜR ve geçicidir. Adları tek dile indirmek
     dd-shell'in o 54 kuralını da kanona taşımayı gerektiriyor; o dilim
     ayrı bir tur (HANDOFF §6). Kazayla değil, sınırı çizilerek yapıldı:
     kanon YALNIZ tipografiyi bildiriyor, süse hiç dokunmuyor.
   Kaynak: dump/diet-hesap ekranının yüklediği dosya. Üst bant · header ·
   mega menü · çekmece · footer · "Görüş Bildir" sekmesi buradan gelir.
   ⚠ Kendi `@font-face` blokları SÖKÜLDÜ — Gilroy §2'de zaten gömülü ve
     onların `url("../fonts/…")` yolu çevrimdışı 404 verirdi.
   🔴 KANONDAN ÖNCE YÜKLENİR. Canlı sayfanın sırası da bu
     (`layouts/diet.blade.php:164` → `@stack('diet-styles')`): eşit
     özgüllükte kanon sonra geldiği için gövdede kanon kazanır, kabukta
     kabuk. Çakışma ölçüldü: kanonun 63 sınıf adının hiçbiri bu dosyada
     geçmiyor, token adları da ayrışık (`--murekkep` ↔ `--slate`).
   ══════════════════════════════════════════════════════════════════════ */
/* =====================================================================
   DD-SHELL.CSS — DADADIET PUBLIC KABUK (paylaşılan)
   37 public Diet sayfasının ortak kabuğu: token'lar, tipografi, utilities,
   topbar + brand-switch, header + nav/mega/dropdown/hesap menüsü, mobil
   drawer, bottom-nav, çerez bandı, görüş bildir modalı, lg-gate, footer,
   DadaMentor FAB, scroll-reveal, scroll-top.

   sa-shell.css'in public kardeşi. Kaynak: gunluk-su-v1.html içindeki gömülü
   kabuk CSS'i BİREBİR — yeni kural yazılmadı, değer değiştirilmedi.
   Sıra korundu: chrome → w3-nav-sweep → ADIM 3 kabuk → footer lockup.

   Sayfa CSS'i bu dosyaya GİRMEZ; sayfanın kendi <style> bloğunda kalır ve
   bu dosyadan SONRA yüklenir. Kabuk elemanı + sayfa bağlamı karışımı seçici
   (.calc-top .calc-switch, .nav a.active[href="..."] gibi) sayfada kalır.

   Markup ve davranış: assets/js/dd-shell.js
   ===================================================================== */

/* =====================================================================
   _SHELL.HTML — KANONİK İSKELET (anasayfa-portal-v3a.html'den BİREBİR)
   Token + tipografi + utilities + topbar + header + mega menü (KİLİTLİ)
   + footer + drawer/bottom-nav + çerez/görüş modal + ortak JS.
   Yeni sayfa = bu dosyanın kopyası; SAYFA İÇERİĞİ bloğu doldurulur,
   sayfa-spesifik CSS "SAYFA CSS" işaretinin altına eklenir.
   Header varsayılan KATI; hero'lu sayfa ?hdr=hero benzeri davranış için
   JS'teki heroMode bayrağını açar.
   ===================================================================== */

/* ============ GERÇEK SİTE FONTU: Gilroy-Medium — TEK YÜZ (eski site DNA'sı) ============
   Eski site (main.css): @font-face myBrandFont = Gilroy-Medium.ttf, universal reset ile
   başlık/gövde/buton dahil HER eleman bu tek yüzle render olur; 600/700 bold'lar
   tarayıcının sentetik bold'udur. Light/ExtraBold dosyaları klasörde var ama
   eski site CSS'i hiç yüklemez — bu yüzden burada da yalnız Medium yüklenir. */

/* R2: marka lockup — "Dada"=.bd, suffix=.sf.
   🔴 ŞARTNAME A5 (Dalga 1, 2026-08-29): kayıtlı @font-face yüzü İKİdir —
   Gilroy@500 ve GilroyBd@700. GilroyXB@800 ve GilroyLt@300 KULLANIMDAN
   KALKTI. Dosyaları diskte DURUYOR (A8 üç dosyayı bağlar), yalnız
   yüklenmiyorlar.
   · .bd → GilroyBd@700. Görünüm DEĞİŞMEZ: A9'un kayda geçmiş kusuru gereği
     700 de 800 de aynı dosyaya (Gilroy-ExtraBold.otf) çözülür, istenen
     ağırlık yüzün ilan ettiğiyle birebir eşleşir.
   · .sf → Gilroy@500. Light@300 kalktığı için A7'nin tabanına iner:
     *"en hafif metin yüzü Medium@500'dür"*. Bu GÖRÜNÜR bir değişikliktir —
     lockup'ın son eki 300'den 500'e kalınlaşır. Şartnamede .sf'ye ayrı bir
     ağırlık yazılmamıştır; 500 A5+A7'nin bıraktığı tek değerdir. */

.bd{font-family:"GilroyBd","Gilroy",sans-serif;font-weight:700;letter-spacing:-.01em}
.sf{font-family:"Gilroy",sans-serif;font-weight:500}

/* ============ KİMLİK TOKEN'LARI (brand-tokens.md) ============ */
:root{
  --tomato:#009A44;          /* DadaDiet kabuk aksanı — NANE (Beyar kararı A5; site default domatesten bilinçli sapma, --green token'ı). DadaFit'in doygun #0093d0 sporcu yeşilinden daha yumuşak/klinik → beslenme tonu */
  --tomato-dark:#007E38;     /* hover türevi (nane koyu, --green-deep ile aynı) */
  --tomato-deep:#00602b;     /* gradient ucu (nane derin) */
  --tomato-tint:#DDF2E6;     /* nane fısıltısı zemin */
  --slate:#211E16;           /* Pantone Process Black C — başlık/koyu metin/panel */
  --slate-2:#56514a;           /* sıcak muted koyu */
  --green:#009A44;           /* yalnız sağlık bloğu */
  --green-deep:#00602b;
  --yellow:#FAC045;          /* yalnız puan */
  --muted:#717171;           /* ikincil metin */
  --line:#ECECEC;            /* hairline ayraç */
  --cream:#EFE5D3;           /* sıcak nötr */
  --cream-2:#F7F1E6;
  /* kurumsal alternatif renkler (kılavuz) */
  --c-purple:#b14fc5; --c-mint:#6cca98; --c-green:#0093d0; --c-petrol:#006072;
  --c-gastro:#E14827;        /* ailenin eksik üyesi — .bs-gastro'daki LİTERAL #E14827 ile birebir (KOL A4, 2026-08-16) */
  --c-fit:#0093d0;           /* DadaFit'in doygun sporcu yeşili — yukarıdaki --tomato yorumunun kaynağı (D5 kararı, Beyar 2026-08-24) */
  --paper:#ffffff;
  --bg:#f9f9f9;              /* eski site grisi — sayfa zemini (Revize T3 M12) */
  --ink:#211E16;
  /* section zemin ritmi — açık bölüm alternasyonu (gri ↔ beyaz, eski site ekseni) */
  --bg-white:#ffffff;        /* saf beyaz */
  --bg-cream:#f9f9f9;        /* eski site section grisi (own.css'teki en yaygın zemin) */

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; --radius-circle:50%;
  /* marka işareti (logo chip) köşe yarıçapı — YENİ DEĞER DEĞİL: 11, Diet header
     işaretinin KENDİ SVG'sinde zaten duruyor (.dd-mark <rect rx="11">, 44'lük
     viewBox) ve kardeş kabuklarda da aynı (portal .brand-mark, gourmet .dg-mark).
     Beyar'ın 2026-08-14 header kararı 2026-08-16'da footer'a genişletildi;
     ölçek tablosunda karşılığı olmadığı için değer ADLANDIRILDI, uydurulmadı. */
  --radius-mark:11px;
  /* legacy alias → yeni ölçek */
  --r:var(--radius-lg); --r-sm:var(--radius-sm); --r-lg:var(--radius-xl);
  --sh-sm:0 1px 2px rgba(33,30,22,.04), 0 2px 6px rgba(33,30,22,.05);
  --sh-md:0 6px 22px rgba(33,30,22,.09);
  --sh-lg:0 18px 50px rgba(33,30,22,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1240px;
  /* GÖVDE METNİ HİZASI — Beyar kararı 2026-08-17. Diet gövde paragrafı iki
     yana yaslıdır. Tek kaynak burasıdır; Blade'e sınıf serpilmez.
     Kırılım kapatması AŞAĞIDA, aynı token üzerinden. */
  --tx-body-align:start; /* 2026-09-14 Beyar: gövde metni sola yaslı — justify kelime aralarını açıyordu */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Gilroy",system-ui,sans-serif;
  font-weight:500;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:700;color:var(--slate);line-height:1.12;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.muted{color:var(--muted);font-weight:500}

/* ── YALNIZ EKRAN OKUYUCUYA GÖRÜNEN METİN ─────────────────────────────
   🔴 SINIF BU DEPODA HİÇ TANIMLI DEĞİLDİ (ölçüldü: geçiş 0) ama markup'ta
   kullanılabiliyordu — kural olmadan metin ekranda GÖRÜNÜR basılırdı.

   İhtiyaç kırıntıdan doğdu: ev halkası yalnız bir ikon taşıyor ve ikon
   fontu ekran okuyucuya hiçbir şey söylemez; bağlantı "link" diye
   duyurulup nereye gittiği okunmuyordu (18 sayfada birden).

   ⚠ KABUKTA, `planim.css`te DEĞİL: kırıntı bileşeni yalnız Planım
     ailesinde değil, `dd-shell.css` yükleyen her sayfada kullanılabiliyor.
   Değer ÜRETİLMEDİ — kardeş deponun `fit-shell.css:2451` tanımı bayt-özdeş
   alındı; dört marka aynı metni aynı biçimde gizlemeli. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ GÖVDE METNİ İKİ YANA YASLI (Beyar kararı, 2026-08-17) ============
   KAPSAM `#pageMain` — kabuk metinleri (çerez şeridi .cookie-text, giriş kapısı
   .lg-panel, görüş modalı .fb-q, footer .foot-tag) #ddChrome* div'lerinde durur
   ve bu kapsamın DIŞINDA kalır; ölçüldü (anasayfa: 49 p, 42'si #pageMain içinde,
   7'si kabukta). Başlık, çip, rozet, tablo hücresi, menü ve footer bağlantısı
   zaten p değildir — ayrıca elenmelerine gerek yok.

   `:where()` ÖZGÜLLÜĞÜ SIFIRLAR. Kural bir VARSAYILAN kurar; sayfanın kendi
   text-align bildirimleri (.pagi-note, .food-empty, .wzp-hero .lead gibi
   ortalanmış olanlar dahil) olduğu gibi kazanır, hiçbiri ezilmez.

   KAPALI KALDIĞI YERLER — hepsi ölçüm sonucu, tahmin değil. Ölçüt sütun
   ÖLÇÜSÜdür (genişlik değil): esneme oranı = justify'ın her kelime arasına
   ekleyeceği boşluğun doğal boşluğa oranı.
     .hub-body p      238-438px ölçü   medyan 2,09x   tepe 7,61x
     .prog-body p     305-433px        medyan 1,78x   tepe 5,55x
     .bg-fact p       335px            medyan 2,66x
     .calc-card-box p 439-517px        tepe 3,70x  (hesaplayıcı kartının
                                       içine gömülü şerh; .reh-note başka
                                       yerde 646-1102px ölçüde akar)
     p.lead           520-680px        medyan 2,00-2,72x  (iki satırlık; tek
                                       satır esner, kaza gibi durur)
     tüm sayfalar     640px altı kırılım  medyan 2,56x  tepe 23,42x

   YASLI BASILAN NÜFUSUN GERÇEK DAĞILIMI (40 yüzey, sevk edilen hâl —
   bant medyanı değil, ekrana çıkanın kendisi):
     1440  n=40  medyan 1,56x  p90 2,60x  tepe 2,64x   eklenen px tepe +6,55
     1024  n=40  medyan 1,78x  p90 2,60x  tepe 2,64x   eklenen px tepe +6,55
      768  n=39  medyan 1,77x  p90 2,15x  tepe 2,73x   eklenen px tepe +6,93
   2,0x üstünde 6-7 paragraf kalıyor ve hepsi 672-760px ölçüde; oradaki
   fazlalık kelime arasına +6,4 ila +6,9px ekliyor. Kapalı tutulan kart
   ailelerinde aynı sayı +18 ila +26px'ti — büyüklük mertebesi farklı.

   Emsal: kararlar.md EDR-15 (Gastro ders ekranı) justify'ı DAR ölçüde geri
   almıştı; bu kural o dersi kırılım ve aile listesiyle sayıya bağlar.
   Ölçüm betiği: scripts/diet-yasli-olc.mjs — metin YASLI iken satır kutuları
   zaten esnetilmiş geldiği için betik ölçümden önce hedefi start'a zorlar;
   zorlamayan bir ölçüm her paragrafa 1,0x der (yanlış-temiz).

   🔴 LİSTEYE İKİ AİLE SONRADAN EKLENDİ (Beyar kararı, 2026-08-20). Bu, yukarıdaki
   2026-08-17 kararını GERİ ALMAZ — eksik kalmış uygulamasını tamamlar.
     .val-card p     331px ölçü   medyan 2,61x   tepe 4,89x   eklenen px tepe +13,13
     .bridge-card p  531px ölçü   medyan 2,62x   tepe 2,64x   eklenen px tepe  +5,54
   Eşik referansı bu listenin kendi kalemi: `.hub-body p` 2,09x medyanla
   KAPATILMIŞTI. 2,09x'te kapatılan bir aile varken 2,61x ve 2,62x açık kalamaz.

   ⚠ 2,09x BU TURDA BİREBİR YENİDEN ÜRETİLMEDİ — ÖRNEKLEM FARKI. Yukarıdaki
   iki satır bu turun kendi ölçümüdür; 2,09x ise 2026-08-17'de KAYITLI değer ve
   40 yüzeyin tamamından alınmış. Aynı aleti (`scripts/diet-yasli-olc.mjs`) iki
   sayfada koşturunca `/beslenme` n=118 → **1,93x**, `/hakkimizda` n=12 →
   **2,26x** çıktı. Aynı büyüklük mertebesi, ama 2,09x'in kendisi DEĞİL.
   Yazıldığı gibi bırakıldı: "2,09 çıktı" demek uydurma bir kesinlik olur ve
   bir sonraki tur ona dayanırdı (`CLAUDE.md §6`: *"başkasının ölçümü, kendi
   belgene yazdığın anda SENİN iddian olur"*).
   ⚠ KARAR BU FARKA DAYANMIYOR: 1,93x de 2,26x de, justify'ın AÇIK kaldığı
   nüfusun medyanının (1,56x) üstünde ve hikâye kolonunun (1,18x) çok üstünde.
   Örneklem hangisi olursa olsun iki kart ailesi kapatılan tarafta kalıyor.

   ⚠ NEDEN BAŞTAN LİSTEDE DEĞİLLERDİ: iki sınıf da bu liste yazıldıktan SONRA
   doğdu (`kurumsal-v1.css`, kurumsal bölüm düzeni turu). Liste eksik kalmadı —
   DÜNYA BÜYÜDÜ ve listeye kimse geri bakmadı. Ders `docs/lessons.md`de.

   ⚠ Hikâye kolonu (`.reh-article p`, 702px, 1,18x) LİSTEYE GİRMEDİ ve yaslı
   KALIR: kararın kendi ölçütü onu zaten geçiriyor. */
:where(#pageMain) p{text-align:var(--tx-body-align)}
:where(#pageMain) :is(p.lead,p.fs-lead,.hub-body p,.prog-body p,.bg-fact p,.calc-card-box p,.val-card p,.bridge-card p){text-align:start}
/* KALITIM KORUMASI. Bir paragrafa doğrudan yazılan text-align, ATASINDAN
   MİRAS ALDIĞI hizayı özgüllükten bağımsız olarak ezer — ortalanmış bir
   kabın içindeki paragraf sola/yaslıya düşer. Aşağıdaki kaplar hizayı
   KENDİ üzerlerinde ortalıyor ve içlerinde paragraf taşıyor; `inherit`
   onlara kabın kararını geri verir.
   Liste tahminle değil taramayla çıkarıldı: 40 Diet yüzeyi × 2 genişlik,
   her paragrafın ebeveyninin hesaplanmış hizası okundu; 80 ihlal, 8 aile.
   Tarama betiği: scripts/diet-hiza-tarama.mjs — kapı olarak koşulabilir. */
:where(#pageMain) :is(.wz-q,.wz-res-head,.wzp-hero,.dz-id,.apt-success,.ol-success,.food-empty,.fs-empty) p{text-align:inherit}
/* Planım (`layouts.diet` kullanır, yani bu kapsamdadır) oturum arkasında
   olduğu için tarayıcı taramasına giremedi; kapları KAYNAKTAN çıkarıldı
   (planim.css `.pnl-empty` ve `.tsr-none` ortalıyor, ikisi de <p> taşıyor —
   12 yer). Diyetisyen paneli `layouts.diet-panel` kullanır ve `#pageMain`
   TAŞIMAZ; bu kural oraya hiç ulaşmaz. */
:where(#pageMain) :is(.pnl-empty,.tsr-none) p{text-align:inherit}
@media (max-width:1023px){
  /* .pa-lead (program açıklaması) 1024 altında 387px ölçüye düşüyor: 5,29x. */
  :where(#pageMain) p.pa-lead{text-align:start}
}
@media (max-width:640px){
  :root{--tx-body-align:start}
}

/* eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tomato);
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:var(--radius-sm)}

/* ---- R37 (Beyar kararı, 2026-08-24): AÇIK ZEMİNDE EYEBROW AA EŞİĞİNİ GEÇER ----

   Ölçüldü (gerçek piksel, 1440px, 16 sayfa / 42 eyebrow):
     · taban `.eyebrow` rengi `--tomato` (#009A44) BEYAZ zeminde  2,54:1
     · `.sec-green .eyebrow` `--green-deep` kremde 3,41 / beyazda 3,59:1
   WCAG AA metin eşiği 4,5:1 — üçü de altındaydı.

   ÇÖZÜM MEVCUT TOKEN'DAN: `--tomato-deep` (#00602b). Yeni renk AÇILMADI;
   token'ın kendi yorumu zaten bu işi tarif ediyor: *"CTA/footer/aksan metin
   (WCAG AA: beyaz üstü & beyaz zeminde ≥4.5)"*. Ölçüm: beyazda 5,33:1,
   kremde 5,06:1.

   🔴 KAPSAM `.sec` İLE SINIRLI — VE BU BİLİNÇLİ.
   Tabanı topluca değiştirmek KOYU banner'ları kırardı: `.below-header
   .tst-top` / `.dl-top` gibi bölümlerde eyebrow aynı `--tomato`yu KOYU
   zeminde kullanıyor ve orada 6,18–6,33:1 ile zaten geçiyor; `--tomato-deep`
   o zeminde 3,02:1'e düşerdi. Yani "hepsini koyulaştır" üç kusuru düzeltip
   iki yenisini açardı. Ayrım ölçümle bulundu: kırmızıların hepsi
   `section.sec` içinde, geçenlerin hepsi `section.below-header.*-top`
   içinde.

   ⚠ Kural KABUKTA durur, sayfalara kopyalanmaz. Sayfa kopyaları bu kusurun
   sebebiydi: `--green-deep` 13 yerde `#007e38`e yeniden tanımlanıp kanondan
   kaymıştı (o tanımlar bu turda kaldırıldı, kanon değer #00602b geçerli). */
.sec .eyebrow{color:var(--tomato-deep)}
.eyebrow i{font-size:13px}

/* section head */
.sec{padding:74px 0}
/* fixed header offseti — sayfanın İLK section'ına bu class verilir
   (topbar 40 + header 72 = 112px · mobil 62px) */
.below-header{padding-top:112px}
/* ortak section header grid'i — aksiyon grubu (Tamamını Gör + oklar/tablar) h2 ile
   aynı satırda, açıklama altta tek başına: [eyebrow] / [h2 | tools] / [lead] (Revize T4 M1).
   Sol blok display:contents ile grid'e açılır — DOM aynı, ≤640 pattern'ı ile uyumlu */
.sec-head,.cat-head,.guide-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;
  align-items:center;margin-bottom:34px;
}
.sec-head>div:first-child,.cat-head>div:first-child,.guide-head>div:first-child{display:contents}
.sec-head .eyebrow,.cat-head .eyebrow,.guide-head .eyebrow{grid-row:1;grid-column:1/-1;justify-self:start;margin-bottom:14px}
.sec-head h2,.cat-head h2,.guide-head h2{grid-row:2;grid-column:1}
.sec-head .sec-tools,.sec-head .disc-tools,.cat-head .sec-tools,.guide-head .sec-tools{grid-row:2;grid-column:2;align-self:center}
.sec-head .lead,.cat-head .lead,.guide-head .lead{grid-row:3;grid-column:1/-1;margin-top:10px;color:var(--muted);font-weight:500;font-size:15.5px;max-width:520px}
.sec-head h2{font-size:34px}
.see-all{
  flex:none;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;
  color:var(--slate);padding:11px 18px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--paper);transition:.25s var(--ease);white-space:nowrap;
}
.see-all i{font-size:13px;transition:.25s var(--ease)}
.see-all:hover{border-color:var(--tomato);color:var(--tomato)}
.see-all:hover i{transform:translateX(3px)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;border:none;
  padding:14px 26px;border-radius:var(--radius-md);transition:.25s var(--ease);
}
.btn-primary{background:var(--tomato-deep);color:#fff}
.btn-primary:hover{background:var(--tomato-dark);transform:translateY(-2px)}
.btn-ghost{background:var(--paper);color:var(--slate);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--slate);transform:translateY(-2px)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.chips .lbl{font-size:13px;color:var(--muted);font-weight:500;margin-right:2px}
.chip{
  font-size:13px;font-weight:500;color:var(--slate);background:var(--paper);border:1px solid var(--line);
  padding:8px 15px;border-radius:var(--radius-sm);cursor:pointer;transition:.2s var(--ease);
}
.chip:hover{border-color:var(--tomato);color:var(--tomato);background:var(--tomato-tint)}

/* ---- FİLTRE / ARAÇ ŞERİDİ — solda içerik, sağda kontrol, tek satır.
   diyetisyen-dizin-v1'de tanımlıydı (özet solda, sıralama menüsü sağda) ve
   ikinci bir sayfa (kac-kalori-v1: kategori sekmeleri solda, sıralama sağda)
   aynısına ihtiyaç duyunca kopyalanmayıp buraya taşındı, kaynaktan silindi.
   Sayfaya özel duyarlı ayarlar (dizin'in ≤640 align-items değeri gibi)
   sayfanın kendi <style>'ında kalır. ---- */
/* ---- LİSTE ŞERİDİ — ALTINDA NEFES (Beyar, 2026-08-24) ----
   Ölçüldü: `/diyetin-puf-noktalari/liste`de `.pf-tabs` ile `.pufl-grid`
   arasındaki boşluk **0px**ti; sekme çubuğu kartların üstüne yapışıyordu.
   `.lst-bar`ın hiç alt boşluğu yoktu ve bu şerit **7 sayfada** kullanılıyor,
   yani kusur tekil değil sistemik. Kural kabukta durur, sayfa sayfa yama
   yapılmaz.

   Değer UYDURULMADI: aynı işi yapan `.pf-tabbar`ın kendi alt boşluğu
   (30px, diyetisyen profili sekme şeridi) aynen alındı — sekme çubuğu ile
   içerik arasındaki mesafe artık sitede TEK bir değer. */
.lst-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}

/* ---- YATAY KART: SOLDA GÖRSEL, SAĞDA GÖVDE (.puf-card ailesi)
   diyetisyen-profil-v1'de tanımlıydı; kac-kalori-v1 ve kac-kalori-detay-v1 de
   aynı kartı kullandığı için kopyalanmayıp buraya taşındı ve kaynaktan silindi.
   Izgara (.pufl-grid) sayfada kalır: profil kartı dar bir kolonun içinde
   durduğu için 640'ta tek kolona iner, liste sayfası 1024'te. ---- */
.puf-card{position:relative;display:block;padding:0;overflow:hidden;min-height:118px;border-radius:var(--radius-lg);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-sm);
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.puf-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.puf-fig{position:absolute;left:0;top:0;bottom:0;width:166px;background-size:cover;background-position:center;
  transition:transform .4s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,#000 34%,rgba(0,0,0,.5) 66%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg,#000 34%,rgba(0,0,0,.5) 66%,rgba(0,0,0,0) 100%)}
.puf-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(33,30,22,.24),transparent 58%)}
.puf-card:hover .puf-fig{transform:scale(1.05)}
.puf-ico{position:absolute;left:13px;bottom:13px;z-index:3;width:34px;height:34px;border-radius:var(--radius-md);background:var(--tomato);color:#fff;display:grid;place-items:center;font-size:15px;box-shadow:0 4px 12px rgba(20,18,12,.4)}
.puf-body{position:relative;z-index:2;padding:20px 24px 20px 180px;min-height:118px;display:flex;flex-direction:column;justify-content:center}
.puf-body h4{font-size:16.5px;margin-bottom:5px}
.puf-body p{font-size:13.5px;color:var(--muted);font-weight:500}
/* R22a (Beyar, 2026-08-24): baş harf büyük — HTML zaten "Alışkanlık" biçiminde
   basıyordu (<span class="puf-tag">Alışkanlık</span>), büyütmeyi CSS
   yapıyordu (text-transform:uppercase). letter-spacing .06em büyük-harf
   dizgi içindi; baş-harf-büyük düz metinde fazla açık durur, .02em'e indi.
   5 kullanım yerinin tamamına iner: articles/_p/card-puf.blade.php (ortak
   kart) + püf noktaları liste/detay + kaç kalori liste/detay (B3 kararı). */
.puf-tag{display:inline-block;margin-top:9px;font-size:11px;font-weight:700;color:var(--tomato);letter-spacing:.02em}
/* kartın okunma sayacı — ailenin tek eksik üyesiydi, .puf-tag'in yanına
   oturur. Aynı satırda iki bilgi: solda kategori, sağında okunma. */
.puf-reads{display:inline-flex;align-items:center;gap:6px;margin-top:9px;margin-left:14px;font-size:11.5px;color:var(--muted);font-weight:500}
.puf-reads i{font-size:11px}
@media (max-width:640px){
  .puf-fig{width:112px}
  .puf-body{padding:15px 16px 15px 126px;min-height:140px}
  .puf-body h4{font-size:15.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .puf-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============ TOP UTILITY BAR ============ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--ink);color:#e9e2d6;font-size:12.5px;font-weight:500}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:40px}
.topbar a{display:inline-flex;align-items:center;gap:7px;color:#e9e2d6;transition:.2s}
.topbar a:hover{color:#fff}
.topbar .tb-left{display:flex;align-items:center;gap:16px}
.topbar .tb-left b{font-weight:600;color:#fff}
.tb-div{width:1px;height:14px;background:rgba(233,226,214,.22);flex:none}
.topbar .tb-right{display:flex;gap:18px;align-items:center}
.topbar .tb-soc{display:flex;gap:14px}
.topbar .tb-soc a:hover{color:var(--yellow)}
/* dil seçici — üst bant (ince, açık zemin yazı) */
.tb-lang{position:relative;display:flex;align-items:center}
/* Ayraç boşluğu emsale HİZALANDI (2026-08-15). Diet kopyası tek-düğme
   turundan (2026-08-11) ÖNCEKİ hâli taşıyordu: `margin-right:4px`, sol boşluk
   yok. Ölçüldü (1440px, gerçek tarayıcı): ayraç→tetikleyici mesafesi Diet'te
   **5px**, Gastro ve Gourmet'te **13px**. Kaynak `resources/css/portal.css:152`
   (Gourmet karşılığı `gourmet.css:234`) — BİREBİR kopya, yeni değer icat
   edilmedi. `--sp-1`/`--sp-2` bu token setinde tanımlı değil; emsal zaten
   yedekli yazıyor, yedekler devreye girer (4px / 8px). */
.tb-lang::before{content:"";width:1px;height:14px;background:rgba(233,226,214,.22);margin-right:var(--sp-2,8px);margin-left:var(--sp-1,4px)}
.tb-lang-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;cursor:pointer;color:#e9e2d6;font-family:inherit;font-size:12.5px;font-weight:500;padding:0;transition:color .2s}
.tb-lang-btn:hover{color:#fff}
.tb-lang-btn>span{font-weight:600;letter-spacing:.03em}
.tb-lang-caret{font-size:9px;transition:transform .2s var(--ease)}
.tb-lang.open .tb-lang-caret{transform:rotate(180deg)}
.tb-lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:148px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--sh-md);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:80}
.tb-lang.open .tb-lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.tb-lang-menu a{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:13px;font-weight:600;padding:9px 11px;border-radius:var(--radius-sm);transition:.18s var(--ease)}
.tb-lang-menu a span{color:var(--muted);font-weight:500;font-size:12.5px}
.tb-lang-menu a:hover{background:var(--tomato-tint);color:var(--tomato)}
.tb-lang-menu a.active,.tb-lang-menu a.active span{color:var(--tomato)}
/* TEK DÜĞME modu (2026-08-15) — geçilecek dil TEK ise açılır liste hiç
   kurulmaz, düğmenin üstünde SEÇİLİ değil GEÇİLECEK dil yazar ve tek tık dili
   değiştirir. Kabuk bu markup'ı `x-lang-switch variant=bare`den birebir
   alıyor, stil de emsalinden: `resources/css/portal.css:171-174` (Gourmet
   karşılığı `gourmet.css:251-254`). Görsel dil `.tb-lang-btn`ten gelir; tek
   fark 44×44 şeffaf dokunma kutusu. Seçici `.tb-lang .tb-lang-one` (0,2,0) —
   `.topbar a` (0,1,1) aksi hâlde rengi ve gap'i kazanırdı. Odak halkası
   Diet'in kendi vurgusuyla (`--tomato`) çizilir; portal.css orada `--yellow`
   yazıyor çünkü Gastro'nun vurgusu o. */
.tb-lang .tb-lang-one{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;color:#e9e2d6;font-size:12.5px;font-weight:500;transition:color .2s}
.tb-lang .tb-lang-one:hover{color:#fff}
.tb-lang .tb-lang-one>span{font-weight:600;letter-spacing:.03em}
.tb-lang .tb-lang-one:focus-visible{outline:2px solid var(--tomato);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---- üst bant dünya kapıları: DadaStore + DadaAkademi markalı geçiş (CİLA-2 Faz 5) ---- */
.topbar .tb-util{color:#cfc7ba}
.topbar .tb-util:hover{color:#fff}
/* DadaStore — domates dünyası (sıcak, e-ticaret) */
/* DadaAkademi — petrol dünyası (serin, öğrenme) */

/* ============ HEADER — TEK KAT (marka · ortalanmış nav · aksiyonlar) — Revize T3 M2 ============ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  top:40px;background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);box-shadow:0 4px 20px rgba(33,30,22,.05);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
/* hero üstünde: şeffaf + beyaz — yalnız heroMode açık sayfalarda kullanılır (JS) */
.header.at-top{background:transparent;backdrop-filter:none;border-color:rgba(255,255,255,.14);box-shadow:none}
.h-top>.wrap{display:flex;align-items:center;gap:22px;height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:40px;width:auto;display:block}
.brand .logo-white{display:none}
.header.at-top .brand .logo-color{display:none}
.header.at-top .brand .logo-white{display:block}
/* ---- DadaDiet kabuk markası (akademi .ak-* pattern'inden türetildi) ---- */
.dd-brand{display:flex;align-items:center;gap:11px}
.dd-mark{flex:none;display:block;width:40px;height:40px}
.dd-word{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.dd-word b{color:var(--slate);font-family:"GilroyBd","Gilroy",sans-serif;font-weight:700}
.dd-word .dd-st{color:var(--tomato);font-family:"Gilroy",sans-serif;font-weight:500}
.header.at-top .dd-word b,.header.at-top .dd-word .dd-st{color:#fff}
.drawer-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.drawer-brand .dd-mark{width:32px;height:32px}
.drawer-brand .dd-word{font-size:18px}
/* nav, logo ile aksiyonlar arasında ortalanır */
.nav{display:flex;gap:2px;flex-wrap:nowrap;flex:1;justify-content:center;min-width:0}
.nav a{
  position:relative;font-weight:700;font-size:15px;color:var(--slate);white-space:nowrap;
  padding:9px 12px;border-radius:var(--radius-md);transition:color .2s var(--ease),background .2s var(--ease);
}
.nav a .fa-chevron-down{font-size:9px;margin-left:5px;opacity:.5}
.nav a:hover{color:var(--tomato);background:var(--tomato-tint)}
.nav a.active{color:var(--tomato)}
.nav a.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--tomato);border-radius:var(--radius-sm);
}
/* at-top nav beyaz */
.header.at-top .nav>.nav-item>a{color:#fff}
.header.at-top .nav>.nav-item>a:hover{background:rgba(255,255,255,.14);color:#fff}
.header.at-top .nav>.nav-item>a.active{color:#fff}
.header.at-top .nav>.nav-item>a.active::after{background:#fff}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.icon-btn{
  width:43px;height:43px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--paper);
  display:grid;place-items:center;color:var(--slate);font-size:16px;cursor:pointer;transition:.2s var(--ease);position:relative;
}
.icon-btn:hover{border-color:var(--tomato);color:var(--tomato)}
.header.at-top .icon-btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);color:#fff}
.header.at-top .icon-btn:hover{background:rgba(255,255,255,.20);border-color:#fff;color:#fff}
/* hesap düğmesi at-top'ta .icon-btn ile aynı dile geçer — beyaz zeminli bir pil
   olarak kalıyordu, şeffaf header'daki tek opak parça oydu. Avatar ve karet
   koyu banner üzerinde okunur kalsın diye kenarlık ve karet açık tona döner. */
.header.at-top .acct-btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30)}
.header.at-top .acct-btn:hover{background:rgba(255,255,255,.20);border-color:#fff}
.header.at-top .acct-caret{color:#fff}
/* minimal giriş butonu — kompakt boy, marka rengi (Beyar: eski renk kalsın), flat */
.btn-login{
  display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:700;font-size:14px;
  color:#fff;background:var(--tomato-deep);border:1px solid var(--tomato-deep);border-radius:var(--radius-md);
  height:43px;padding:0 18px;margin-left:3px;cursor:pointer;white-space:nowrap;transition:.2s var(--ease);
}
.btn-login i{font-size:14px}
.btn-login:hover{background:var(--tomato-dark);border-color:var(--tomato-dark)}

/* ===== LOGIN-STATE (cila-2 faz 2) — header logged-in chrome ===== */
/* varsayılan logged-out: ekle/zil/avatar gizli. body.is-auth → açılır, btn-login gizlenir */
.head-add,.head-bell,.acct-wrap{display:none}
body.is-auth #btnLogin{display:none}   /* GİRİŞ butonu girişli kullanıcıda gizlenir */
/* PLANIM DÜĞMESİ — 🔴 KARAR DEĞİŞTİ (Beyar, 2026-08-21).
   Bu satırın eski yorumu Planım'ın *"her iki durumda da durduğunu"* yazıyordu;
   2026-08-20 kararının o maddesi İPTAL edildi. Yeni sözleşme iki satırdır:
     · misafirde GÖRÜNMEZ (madde c)
     · girişli kullanıcıda HER genişlikte görünür (madde d) — ≤640'taki
       `.btn-login{display:none}` (satır ~1002) bu kuralı YENEMEZ, çünkü
       `body.is-auth #btnPlanim` id taşır ve özgüllüğü daha yüksektir.
   Düğme aynı `.btn-login` dilini kullanmaya devam eder; yeni sınıf/yeni
   tasarım dili üretilmedi (CLAUDE.md §2 md.3, §3.1 md.1). */
#btnPlanim{display:none}
body.is-auth #btnPlanim{display:inline-flex}
body.is-auth .head-add,body.is-auth .acct-wrap{display:flex}
body.is-auth .head-bell{display:grid}
/* ekle + hesap menüsü ortak konteyner (header sağ blok dropdown'ı)
   NOT: display BASE'te VERİLMEZ — gizle/göster yalnız .head-add/.acct-wrap kurallarınca
   yönetilir (aksi halde display:flex, üstteki display:none'ı kaynak sırasıyla yener → logged-out sızıntı) */
.acct-item{position:relative;align-items:center;height:72px}
.acct-btn{display:inline-flex;align-items:center;gap:7px;height:43px;padding:0 9px 0 5px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);cursor:pointer;font-family:inherit;transition:.2s var(--ease)}
.acct-btn:hover{border-color:var(--tomato)}
.acct-ava{width:33px;height:33px;border-radius:var(--radius-circle);background-size:cover;background-position:center;flex:none}
/* BAS HARF DUSMESI — avatar yuklenmemis kullanici.
   Kusur (Beyar canlida gordu, 2026-08-20): daire BOS basiliyordu; kullanici
   header'da kendi hesabini goremiyordu. Harf yalniz `background-image` YOKKEN
   basilir (`.is-harf`), yani gorselin ustune hicbir zaman binmez.
   Renk ve olcu ICAT EDILMEDI: zemin `--tomato` (bu markada nane), harf
   beyaz — kabugun `.btn-login` dugmesiyle ayni cift. */
.acct-ava.is-harf,.da-ava.is-harf{
  display:grid;place-items:center;background:var(--tomato);color:#fff;
  font-weight:700;letter-spacing:0;line-height:1;
}
.acct-ava.is-harf{font-size:14px}
.acct-id .acct-ava.is-harf{font-size:17px}
.da-ava.is-harf{font-size:18px}
.acct-caret{font-size:9px;color:var(--muted);transition:transform .2s var(--ease)}
.acct-item.open .acct-caret{transform:rotate(180deg)}
/* bildirim zili + sayaç */
.head-bell{position:relative}
.hb-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--radius-circle);background:var(--tomato);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
/* dropdown panel (header sağa hizalı; nav dropdown diliyle aynı) */
/* R35a (Beyar, revizyon turu 2026-08-24 · C4 kararı: YALNIZ sunum eşitlenir):
   "Aboneliğim ve Ödemelerim" diğer GRUP 3 kalemlerinden ("Hesap ve Ayarlar",
   "Destek Merkezi") uzun olduğu için 236px'te satıra kırılıyor, tek başına
   iki satır yüksekliğine çıkıp sıra dışı duruyordu. Metin AYNEN kalıyor
   (2026-08-20/22 Beyar kararı, sıra da değişmiyor) — min-width büyütüldü ve
   etiket sarmasız yapıldı ki üç kalem aynı satır yüksekliğinde dursun. */
/* ŞARTNAME G16 (Dalga 1, 2026-08-29) — MENÜ TAŞARSA KAYAR.
   Ölçülen kusur: menü uzadıkça (13 kalem + kimlik bloğu + 4 ayraç) ekrana
   sığmıyor ve ALT KALEMLER GÖRÜNMÜYORDU — kap `max-height` taşımıyordu,
   yani taşan parça sessizce kırpılıyordu.

   Üç girdi kabuktan ölçüldü, sayı İCAT EDİLMEDİ:
     112px  yapışkan kabuk yüksekliği (topbar 40 + header 72)
      12px  tetikleyicinin altındaki mesafe (bu kuralın kendi `top`u)
      10px  kabın kendi dolgusu (aşağıdaki `padding`)
   → max-height: calc(100dvh - 134px)

   🔴 MASAÜSTÜNDE NORMAL HÂLDE ÇUBUK ÇIKMAZ: `auto`, `scroll` DEĞİL. En uzun
   menü ≈719px (§G18); 1080px ekranda sınır 946px'e düşer, yani taşma yok.
   Çubuk yalnız gerçekten taşınca belirir.

   `dvh` bilerek: mobil tarayıcıda adres çubuğu gizlenince `vh` eski değeri
   tutuyor ve menü ekranın altından taşıyordu. */
.acct-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:268px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s var(--ease);z-index:80;max-height:calc(100dvh - 134px);overflow-y:auto;overscroll-behavior:contain}
/* İnce kaydırma çubuğu — kendi içinde kayan kutunun kanon çubuğu (6px,
   raysız, yuvarlak uçlu, kartın kendi hairline tonunda). Yeni bir çubuk
   dili üretilmedi; ölçü bu dosyadaki öteki kayan kutularla aynı. */
.acct-menu{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.acct-menu::-webkit-scrollbar{width:6px}
.acct-menu::-webkit-scrollbar-track{background:transparent}
.acct-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.acct-item:hover .acct-menu,.acct-item.open .acct-menu{opacity:1;visibility:visible;transform:translateY(0)}
.acct-menu::before{content:"";position:absolute;top:-7px;right:24px;width:13px;height:13px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.acct-menu>a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--slate);transition:.16s var(--ease)}
.acct-menu>a i{width:18px;text-align:center;color:var(--tomato);font-size:14px}
.acct-menu>a span{display:block;white-space:nowrap}
.acct-menu>a small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px}
.acct-menu>a:hover{background:var(--tomato-tint);color:var(--tomato);padding-left:16px}
.acct-menu .acct-logout,.acct-menu .acct-logout i{color:var(--tomato)}
/* hesap menüsü kimlik başlığı */
.acct-id{display:flex;align-items:center;gap:11px;padding:8px 11px 12px}
.acct-id .acct-ava{width:42px;height:42px}
.acct-id-txt{min-width:0}
.acct-id-txt b{display:block;font-size:14.5px;color:var(--slate);font-weight:700}
.acct-id-txt small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.acct-div{height:1px;background:var(--line);margin:6px 4px}
.nav-div{height:1px;background:var(--line);margin:5px 4px}
/* drawer logged-in kimlik satırı (mobil) */
.drawer-acct{display:none;align-items:center;gap:12px;padding:2px 2px 12px}
body.is-auth .drawer-acct{display:flex}
body.is-auth .drawer-login{display:none}
.drawer-acct .da-ava{width:46px;height:46px;border-radius:var(--radius-circle);background-size:cover;background-position:center;flex:none}
.drawer-acct .da-info{min-width:0}
.drawer-acct .da-info b{display:block;font-size:15px;color:var(--slate);font-weight:700}
.da-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}
.da-links a{font-size:12.5px;font-weight:700;color:var(--tomato)}
.da-links a:not(:last-child)::after{content:"·";margin-left:8px;color:var(--muted);font-weight:500}
/* ===== /LOGIN-STATE ===== */

/* ===== LG-GATE (cila-2 faz 2) — logged-out mikro-aksiyon giriş kapısı ===== */
.lg-overlay{position:fixed;inset:0;background:rgba(20,18,12,.5);z-index:97;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.lg-overlay.show{opacity:1;visibility:visible}
.lg-gate{position:fixed;inset:0;z-index:98;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),visibility .25s}
.lg-gate.show{opacity:1;visibility:visible;pointer-events:auto}
.lg-panel{position:relative;width:min(382px,100%);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--sh-lg);padding:32px 26px 26px;text-align:center;transform:translateY(14px);transition:transform .3s var(--ease)}
.lg-gate.show .lg-panel{transform:translateY(0)}
.lg-close{position:absolute;top:13px;right:13px;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--paper);color:var(--slate);font-size:15px;cursor:pointer;display:grid;place-items:center;transition:.2s var(--ease)}
.lg-close:hover{border-color:var(--tomato);color:var(--tomato)}
.lg-ico{width:62px;height:62px;border-radius:var(--radius-circle);background:var(--tomato-tint);color:var(--tomato);display:grid;place-items:center;font-size:25px;margin:0 auto 16px}
.lg-gate h4{font-size:19px;margin-bottom:8px}
.lg-gate p{font-size:13.5px;color:var(--muted);font-weight:500;max-width:300px;margin:0 auto 22px;line-height:1.55}
.lg-acts{display:flex;gap:10px}
.lg-acts .btn{flex:1}
/* ===== /LG-GATE ===== */

/* ---- NAV DROPDOWNS ---- */
.nav .nav-item{position:relative}
/* nav item tek katın tam yüksekliğini doldursun → hover sürekliliği (mega'ya geçişte kopmaz) */
.h-top .nav-item{display:flex;align-items:center;height:72px}
.nav .nav-item>a{display:inline-flex;align-items:center}
.soon{margin-left:7px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--green);padding:3px 7px;border-radius:var(--radius-sm);vertical-align:middle}
/* top:100% — panel tetikleyiciye YAPIŞIK. Önceki calc(100% + 12px) 12px'lik
   ölü bir şerit bırakıyordu; panel yalnız hover ile açıldığı ve kapalıyken
   visibility:hidden olduğu için imleç o şeride girince menü kapanıp bir daha
   açılamıyordu. .mega da aynı sebeple top:100% kullanır. */
.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-lg);
  padding:10px;opacity:0;visibility:hidden;transition:.22s var(--ease);z-index:80;
}
.nav-item:hover .dropdown,.nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:13px;height:13px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.dropdown a{
  display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border-radius:var(--radius-md);font-size:14px;font-weight:500;
  color:var(--slate);transition:.16s var(--ease);
}
.dropdown a i{width:18px;text-align:center;color:var(--tomato);font-size:14px;margin-top:2px}
.dropdown a small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px}
.dropdown a:hover{background:var(--tomato-tint);color:var(--tomato);padding-left:16px}
.dd-head{padding:8px 13px 4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dd-col{display:flex;flex-direction:column}

/* ---- MEGA MENÜ (Tarifler) — header'a bağlı tam genişlik panel — KİLİTLİ ---- */
.nav-item.has-mega{position:static}            /* containing block = .header (fixed) */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:var(--sh-lg);padding:28px 0 26px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.22s var(--ease);z-index:80;
}
.nav-item:hover .mega,.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:22px;align-items:start}
.mega-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 16px;align-content:start}
.mega-cats a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);
  font-size:14.5px;font-weight:500;color:var(--slate);transition:.16s var(--ease);line-height:1.25;
}
.mega-cats a i{width:20px;text-align:center;color:var(--tomato);font-size:15px;flex:none}
.mega-cats a small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px}
.mega-cats a:hover{background:var(--tomato-tint);color:var(--tomato)}
.mega-feat{min-width:0;border-left:1px solid var(--line);padding-left:22px}
.mf-fig{
  position:relative;aspect-ratio:16/10;border-radius:var(--radius-md);overflow:hidden;
  background-size:cover;background-position:center;display:flex;align-items:flex-end;cursor:pointer;
}
.mf-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,30,22,0) 35%,rgba(15,13,9,.78))}
.mf-fig .r-chip{position:absolute;top:12px;left:12px;background:var(--tomato);color:#fff;z-index:2}
.mf-fig h4{position:relative;z-index:2;color:#fff;font-size:17px;padding:16px;line-height:1.25}
/* "Tüm Tarifler" — kategori grid'inin 13. hücresi, buton dilinde (Revize T3 M1) */
.mega-cats .mega-cat-all{
  font-weight:700;color:var(--tomato);
  background:var(--tomato-tint);border:1px solid rgba(0,154,68,.22);
}
.mega-cats .mega-cat-all small{color:var(--tomato);opacity:.75}
.mega-cats .mega-cat-all .mca-arrow{margin-left:auto;width:auto;font-size:13px;transition:transform .2s var(--ease)}
.mega-cats .mega-cat-all:hover{background:var(--tomato);color:#fff;border-color:var(--tomato)}
.mega-cats .mega-cat-all:hover i,.mega-cats .mega-cat-all:hover small{color:#fff;opacity:1}
.mega-cats .mega-cat-all:hover .mca-arrow{transform:translateX(3px)}
/* Tarif Bulucu CTA — mega-feat kolonunda (Faz3 #22; finder giriş noktası) */
/* mega içindeki r-chip (mf-fig rozeti) için minimal taban */
.r-chip{background:rgba(255,255,255,.94);color:var(--slate);font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:var(--radius-sm);letter-spacing:.02em}

/* ---- PARALAKS BANNER — fotoğraflı hero'ların arka planı sabit kalır,
   içerik üzerinden kayar. 11. turda .dl-top'ta dokuz sayfaya girdi; koşul
   aynen korunarak fotoğraf taşıyan bütün public hero ailelerine yayıldı ve
   dokuz sayfadaki kopyalar silinip tek kaynağa indi.

   Opt-in, üç koşul birden sağlanmazsa normal banner:
     hover:hover + pointer:fine → dokunmatik cihazlar dışarıda kalır.
       iOS Safari background-attachment:fixed'i desteklemez ve arka planı
       bozar; bu sorgu iPad dahil tüm iOS'u genişlikten bağımsız eler —
       yalnız genişlik sorgusu iPad Pro'yu (1366px) kaçırırdı.
     min-width:1025px           → telefon ve tablet genişlikleri dışarıda.
     prefers-reduced-motion: no-preference → hareket azaltma tercihinde kapalı.

   Yalnız background-attachment değişir; yükseklik, iç boşluk, breadcrumb
   konumu ve metin yerleşimi aynı kalır — düzen üretmeyen bir özelliktir.
   Fotoğrafsız hero'lar (.tb-top, .pf-top, .sh-top) listede yoktur:
   arka planlarında görsel yok, özelliğin tutacağı bir katman da yok.
   .wzp-top 17. turda krem zeminden koyu görselli banner'a geçti ve listeye
   katıldı. ---- */
@media (min-width:1025px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .dl-top,      /* 9 program sayfası */
  .reh-hero,    /* 8 beslenme sayfası */
  .calc-top,    /* 10 hesaplayıcı sayfası */
  .tst-top,     /* 4 araç/test sayfası */
  .nb-top,      /* besin-kutuphanesi-v1 */
  .fs-top,      /* arama-diet-v1 */
  .lst-top,     /* diyetisyen-dizin-v1 */
  .ol-top,      /* diyetisyen-ol-v1 */
  .wzp-top      /* 4 sihirbaz sayfası */
  {background-attachment:fixed}
}

/* ---- BANNER YÜKSEKLİĞİ — grup içinde tek ölçü, tek kaynak ----------------
   Banner taşıyan public sayfalar iki role ayrılır (liste/merkez ve detay) ve
   her rol kendi içinde tek yükseklikte durur. Üyelik dd-shell.js'teki
   BG_LISTE / BG_DETAY / BG_SIHIRBAZ dizilerinde; oradan <body data-banner>
   basılır. Sayfalar kendi ölçüsünü taşımaz.

   Seçici neden yapısal: 46 banner sayfasının 46'sında da banner
   #pageMain'in ilk eleman çocuğudur ve içinde tam olarak bir > .wrap vardır
   (tarayıcıda ölçüldü). Böylece on bir hero ailesini tek tek saymak
   gerekmiyor; yeni bir hero ailesi eklendiğinde bu kural onu da kapsar.

   Ölçü nasıl bulundu: her genişlik bandında gruptaki EN UZUN banner ölçüldü
   (bant içinde birkaç genişlikte tarandı, bandın tepesi alındı). Kısa olan
   ona yükselir, uzun olan kısalmaz — min-height, height değil.

     bant            liste  detay  sihirbaz   bandın tepesini kim belirledi
     >1024px          544    560     434      hesaplayicilar / ogun-planlama
     641–1024px       607    617     427      diyetisyen-dizin / ipucu-detay@641
     ≤640px           587    726     455      hesaplayicilar / ipucu-detay@320

   Detay grubunun ≤1024 tavanı 834/887'den 617/726'ya indi: beş beslenme
   rehberi yazısının .reh-arthero grafiği o iki bantta gizlendi, çünkü iki
   kolon üst üste binince grafiğin yüksekliği doğrudan banda ekleniyordu ve
   tavanı tek başına o beş sayfa belirliyordu (HANDOFF §6.9). >1024'te grafik
   yerinde durduğu için masaüstü tavanı 560'ta kaldı.

   Sihirbaz grubunun üç tavanı da 17. turda yükseldi (414→434, 407→427,
   408→455): .wzp-top krem düz zeminden koyu görselli banner'a geçti ve
   ailenin alt boşluğu kardeşlerininkine (50px) hizalandı. ≤640'taki sıçrama
   ondan büyük çünkü eski 408 değeri bandın tepesini eksik ölçüyordu: gerçek
   tepe 320px'te 435'ti, yani grup o genişlikte zaten eşit değildi. Yeni
   değerler bandın en dar ucuna kadar tarandı.

   Bant sınırları repoda hâlihazırda kullanılan 1024 ve 640; yeni kırılma
   noktası açılmadı. 1024 ile 768 aynı bandın içindedir ve aynı değeri alır —
   istenen "her genişlikte grup içi eşitlik" bu şekilde sağlanır. Tavanlar
   bandın en dar ucuna kadar tarandı (>1024: 1440…1025 · 641–1024:
   1024…641 · ≤640: 640…320), çünkü bir bandın en uzun banner'ı çoğu zaman
   en dar genişlikte çıkar: detay grubu 360–390'da 696, 320'de 726'dır.

   İçerik dikeyde ortalanır: bölüm column-flex olur, tek çocuğu .wrap
   ortalanır. padding-top yerinde kalır ve taban görevi görür — 128px (bir
   sayfada 112px) sabit header'ın 113px'lik alt kenarını geçer, yani
   breadcrumb hiçbir ölçüde şeffaf header'ın altına girmez. Kısa içerikli
   sayfada metin artık banner'ın üstüne yapışmaz, bandın ortasında durur.
   Paralaks etkilenmez: o kural yalnız background-attachment yazar. -------- */
body[data-banner] #pageMain>:first-child{
  display:flex;flex-direction:column;justify-content:center;
}
body[data-banner] #pageMain>:first-child>.wrap{width:100%}
body[data-banner="liste"]    #pageMain>:first-child{min-height:544px}
body[data-banner="detay"]    #pageMain>:first-child{min-height:560px}
body[data-banner="sihirbaz"] #pageMain>:first-child{min-height:434px}
@media (max-width:1024px){
  body[data-banner="liste"]    #pageMain>:first-child{min-height:607px}
  body[data-banner="detay"]    #pageMain>:first-child{min-height:617px}
  body[data-banner="sihirbaz"] #pageMain>:first-child{min-height:427px}
}
@media (max-width:640px){
  body[data-banner="liste"]    #pageMain>:first-child{min-height:587px}
  body[data-banner="detay"]    #pageMain>:first-child{min-height:726px}
  body[data-banner="sihirbaz"] #pageMain>:first-child{min-height:455px}
}

/* ---- R1 (Beyar, canlı gezinti turu 2026-08-23/24): banner altındaki beyaz
   panelin üst köşe yarıçapı — kardeş markanın liste sayfasındaki dikişin
   aynısı (salt-okuma, kod bağı yok): beyaz panel banner'ın içine biraz biner,
   üst iki köşe yuvarlanır, altında yumuşak gölge var. DadaDiet'te #pageMain'in
   ilk eleman çocuğu (banner) 12 ayrı sınıf ailesinden geliyor (.below-header
   varyantları · .reh-hero(+-article) · .wzp-top · .lst-top · .ol-top ·
   .fs-top · .au-top …) — kural sınıf saymak yerine bu dosyanın zaten kurduğu
   "banner = #pageMain'in ilk eleman çocuğu" çapasına bağlanıyor (üstteki
   body[data-banner] bloğuyla aynı çapa). `.sec` ile başlayan üst bantlar
   (planım/hesabım/destek/abonelik/hata — banner DEĞİL, beyaz kimlik bandı)
   ilk-çocuk konumundaysa hariç tutulur.
   🔴 STICKY İSTİSNASI (grep ile doğrulandı): search.blade.php'de banner'ın
   DİREKT sonraki kardeşi `.fs-tabbar`, programs/pages/liste.blade.php'de
   `.dl-filter` — ikisi de kendi sayfa CSS'inde position:sticky taşıyor.
   #pageMain'in ID'si (100,0,0,0) sayfa CSS'indeki tek sınıf seçiciyi cascade
   sırasından bağımsız ezer; yani buradan gelecek bir position:relative o
   yapışkanlığı gerçekten öldürürdü. Bu yüzden ikisi ana kuraldan hariç
   tutulup aşağıda `position` VERMEYEN ikinci bir kuralla kapsandı — görsel
   etki (üst köşe + gölge) aynı, yapışkanlık dokunulmadan kalıyor. */
#pageMain > :first-child:not(.sec) + *:not(.fs-tabbar):not(.dl-filter) {
  position:relative; z-index:2;
  margin-top:-22px;
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 32px rgba(20,16,10,.18);
}
#pageMain > :first-child:not(.sec) + .fs-tabbar,
#pageMain > :first-child:not(.sec) + .dl-filter {
  z-index:2;
  margin-top:-22px;
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 32px rgba(20,16,10,.18);
}

/* ---- İSTİSNA: BANNER'IN KENDİ YUVARLAĞI VARSA PANEL YUVARLANMAZ ----
   Beyar (2026-08-24): *"burada radius var, burada panelde radius uygulamana
   gerek yok."*

   Ölçüldü (`/diyetisyen/{slug}`, 1440px): `.pf-banner` zaten `24px` yarıçap
   taşıyor; üstüne yukarıdaki kural `.sec`e `22px` + `-22px` biniş veriyordu.
   Sonuç ÇİFT yuvarlamaydı — iki farklı yarıçap (24 ve 22) üst üste biniyor
   ve kenar kırık görünüyordu.

   Kural yalnız bu banner ailesini hedefler: `.pf-top` kendi yuvarlağını
   çizdiği için panelin ayrıca yuvarlanmasına gerek yok. Diğer 11 banner
   ailesi R1 davranışını AYNEN sürdürür.

   ⚠ SEÇİCİ ÖZGÜLLÜĞÜ EŞİTLENDİ — ölçüldü. İlk hâl `#pageMain > .pf-top + *`
   idi (özgüllük 110) ve yukarıdaki kuralı (140) YENEMİYORDU: kural yazılıydı
   ama hiç uygulanmıyordu, panel 22px'te kalıyordu. `:first-child` ve iki
   `:not()` eklenerek 140'a çıkarıldı; dosyada SONRA geldiği için artık
   kazanıyor. */
#pageMain > .pf-top:first-child + *:not(.fs-tabbar):not(.dl-filter){
  margin-top:0;
  border-radius:0;
  box-shadow:none;
}

/* ---- HESAPLAYICI GEÇİŞ RAYI (.calc-switch) --------------------------------
   On hesaplayıcı sayfasının onunda da bu kural birebir aynıydı (aynı md5);
   §5.2 gereği kopyalanmadı, buraya taşındı ve on sayfadan silindi. Markup
   .calc-switch-band > .wrap > nav.calc-switch, banner'ın DIŞINDA.

   Ray TEK SATIRDIR: sığmadığında sarmaz, yatay kaydırır ve kaydırma çubuğu
   görünmez. Reçete .pf-tabs'ın (saglik-testler-v1) birebir aynısıdır —
   overflow-x:auto + scrollbar-width:none + ::-webkit-scrollbar{display:none},
   çocuklarda flex:none + white-space:nowrap. width:fit-content ile max-width
   100% birlikte çalışır: ray sığarken kutu içerik kadar olup margin:0 auto
   ile ortalanır, taşarken kutu tam genişliğe oturur ve baştan kaydırılır.
   (flex-wrap:wrap ve justify-content:center kaldırıldı — ikincisi taşan
   içerikte ilk kalemi erişilemez kılıyordu.) */
.calc-switch{display:flex;gap:4px;padding:4px;width:fit-content;max-width:100%;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);overflow-x:auto;scrollbar-width:none}
.calc-switch::-webkit-scrollbar{display:none}
.calc-switch a{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);background:transparent;border:0;padding:9px 14px;border-radius:var(--radius-sm);transition:.2s var(--ease);white-space:nowrap}
.calc-switch a i{font-size:14px;color:var(--green)}
.calc-switch a:hover{color:var(--tomato-deep);background:rgba(0,154,68,.08)}
.calc-switch a.active{background:var(--tomato-deep);border-color:var(--tomato-deep);color:#fff}
.calc-switch a.active i{color:#fff}
.calc-switch-band{background:var(--bg-white);border-bottom:1px solid var(--line)}
.calc-switch-band .wrap{padding-top:18px;padding-bottom:4px}
.calc-switch-band .calc-switch{margin-bottom:14px}

/* ---- "TÜMÜNÜ GÖR" SLIDER ALTYAPISI (oklar + snap track) ---- */
.sec-tools{flex:none;display:flex;align-items:center;gap:12px}
.row-nav{display:flex;gap:8px}
.row-nav button{width:42px;height:42px;font-size:13px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--paper);color:var(--slate);cursor:pointer;transition:.2s var(--ease)}
.row-nav button:hover{background:var(--tomato);border-color:var(--tomato);color:#fff}
.row-track{
  display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:6px 2px 10px;
}
.row-track::-webkit-scrollbar{display:none}
.row-track>*{flex:none;width:274px;scroll-snap-align:start}

/* ---- FOOTER REVEAL (gaviaworks perde efekti) — yalnız desktop/tablet ----
   Footer sayfanın arkasında sabit bekler (z düşük); opak içerik wrapper'ı
   üstünde durur ve sonuna JS ile footer yüksekliği kadar boşluk açılır —
   scroll sonunda içerik kalkar, footer alttan ortaya çıkar. Mobil: statik. */
@media (min-width:641px){
  .footer.orange{position:fixed;left:0;right:0;bottom:0;z-index:1}
  .page-main{position:relative;z-index:2;background:var(--bg)}
}

/* ============ FOOTER ============ */
.footer{background:var(--slate);color:#aebcc6;padding:70px 0 0}
/* kolon ritmi: logo bloğu geniş, 4 link kolonu eşit dağılır → sağ kenara kadar dengeli */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.05fr;gap:44px 28px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-col a{white-space:nowrap}
.foot-brand img{height:42px;width:auto;margin-bottom:22px}
.foot-soc{display:flex;gap:11px}
.foot-soc a{width:42px;height:42px;border-radius:var(--radius-md);background:rgba(255,255,255,.07);display:grid;place-items:center;color:#cdd8e0;font-size:16px;transition:.2s var(--ease)}
.foot-soc a:hover{background:var(--tomato);color:#fff;transform:translateY(-3px)}
.foot-col h5{color:#fff;font-size:15px;font-weight:700;margin-bottom:18px}
/* Ikinci grup basligi (4. sutun: Kurumsal + Iletisim, talimat 4.B). Yeni SINIF
   icat edilmedi, bitisiklik seciciyle cozuldu; aralik yukaridaki 18px h5
   ritminden turetildi. Grid oranlarina DOKUNULMADI. */
.foot-col a + h5{margin-top:18px}
.foot-col a{display:block;font-size:14px;font-weight:500;color:#9fb0bc;padding:7px 0;transition:.2s}
.foot-col a:hover{color:var(--tomato);padding-left:5px}
/* legal bar — 9 link, ince dikey ayraçlı, wrap'li */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;padding:24px 0 0;font-size:12px;font-weight:500}
.foot-legal a{white-space:nowrap;transition:.2s}
.foot-legal .sep{width:1px;height:11px;background:rgba(255,255,255,.28);flex:none}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding:16px 0 26px;font-size:13px;font-weight:500;color:#7e8e9a}
.foot-bottom a:hover{color:#cdd8e0}

/* ---- TIBBİ UYARI BANDI (Faz 2, doküman §2.1) ----
   Footer'ın İLK çocuğu, tam genişlikte (yatay padding .footer'da 0 — bant
   kenardan kenara akar, metin .wrap ile hizalanır). Üstteki 70px'i bandın
   kendi dolgusu devraldığı için orange footer'ın padding-top'u sıfırlanır. */
.footer.orange{padding-top:0}
.foot-med{background:rgba(0,0,0,.16);border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:52px}
.foot-med>.wrap{display:flex;gap:14px;align-items:center;padding-top:18px;padding-bottom:18px}
.foot-med>.wrap>i{color:#fff;font-size:17px;flex:none;align-self:flex-start;margin-top:2px}
.foot-med p{font-size:13px;line-height:1.65;font-weight:500;color:rgba(255,255,255,.92)}
.foot-med .fm-link{color:#fff;font-weight:700;font-size:13px;white-space:nowrap;text-decoration:underline;flex:none}
.foot-med .fm-link:hover{text-decoration:none}
@media (max-width:860px){
  .foot-med>.wrap{flex-wrap:wrap;align-items:flex-start}
  .foot-med .fm-link{margin-left:31px}
}

/* ---- ORANGE FOOTER (gaviaworks yapısı) ---- */
.gw-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:700;letter-spacing:-.04em;margin-right:2px}
.footer.orange{background:var(--tomato-deep);color:rgba(255,255,255,.88)}
.footer.orange .foot-grid{border-bottom-color:rgba(255,255,255,.18)}
.footer.orange .foot-soc a{background:rgba(255,255,255,.14);color:#fff}
.footer.orange .foot-soc a:hover{background:#fff;color:var(--tomato);transform:translateY(-3px)}
.footer.orange .foot-col h5{color:#fff}
.footer.orange .foot-col a{color:rgba(255,255,255,.92)}
.footer.orange .foot-col a:hover{color:#fff;padding-left:5px}
.footer.orange .foot-legal a{color:rgba(255,255,255,.84)}
.footer.orange .foot-legal a:hover{color:#fff}
.footer.orange .foot-bottom{color:rgba(255,255,255,.84)}
.footer.orange .foot-bottom a{color:rgba(255,255,255,.84)}
.footer.orange .foot-bottom a:hover{color:#fff}

/* =========================================================
   RESPONSIVE TABAN  ·  desktop ≥1025px DEĞİŞMEZ
   tablet 641–1024px · mobil ≤640px
   ========================================================= */

/* yatay taşmayı global engelle */
html,body{overflow-x:hidden}

/* sürükle-kaydır (mouse) imleci — yatay slider'lar */
.drag-scroll.dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
.drag-scroll.dragging *{pointer-events:none}

/* ---- MOBİL KOMPONENTLER (desktop'ta gizli) ---- */
.hamburger{display:none}
.drawer,.drawer-overlay,.bottom-nav{display:none}

/* drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(20,18,12,.5);z-index:95;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(360px,86vw);background:#fff;z-index:96;
  transform:translateX(100%);transition:transform .32s var(--ease);
  flex-direction:column;box-shadow:-12px 0 44px rgba(20,18,12,.22);
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);flex:none}
.drawer-logo{height:34px;width:auto;display:block}
.drawer-close{width:42px;height:42px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--paper);color:var(--slate);font-size:18px;cursor:pointer;display:grid;place-items:center}
.drawer-close:hover{border-color:var(--tomato);color:var(--tomato)}
.drawer-nav{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.d-item{border-bottom:1px solid var(--line)}
.d-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font-family:inherit;font-weight:700;font-size:16px;color:var(--slate);
  background:none;border:none;text-align:left;padding:16px 22px;cursor:pointer;
}
.d-link .fa-chevron-down{font-size:12px;color:var(--muted);transition:transform .25s var(--ease),color .25s var(--ease)}
.d-item.open>.d-link .fa-chevron-down{transform:rotate(180deg);color:var(--tomato)}
.d-link .soon{font-size:9.5px}
.d-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);background:var(--bg)}
.d-item.open>.d-sub{max-height:760px}
.d-sub a{display:flex;align-items:center;gap:11px;padding:13px 22px 13px 36px;font-size:14.5px;font-weight:500;color:var(--slate-2)}
.d-sub a i{width:18px;text-align:center;color:var(--tomato);font-size:13px}
.d-sub a:hover{color:var(--tomato);background:var(--tomato-tint)}
.drawer-foot{padding:18px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;flex:none}
.drawer-add{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14.5px;color:var(--slate);padding:13px;border:1px solid var(--line);border-radius:var(--radius-md);transition:.2s var(--ease)}
.drawer-add:hover{border-color:var(--tomato);color:var(--tomato)}
/* drawer dil seçici (mobilde üst bant yok) — aç/kapa liste: N dile ölçeklenir */
.drawer-lang{display:flex;flex-direction:column;margin-top:3px}
.drawer-lang-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:none;font-family:inherit;padding:4px 0;cursor:pointer}
.drawer-lang-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.drawer-lang-cur{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--slate)}
.drawer-lang-cur i{font-size:10px;color:var(--muted);transition:transform .25s var(--ease)}
.drawer-lang.open .drawer-lang-cur i{transform:rotate(180deg)}
.drawer-lang-list{display:none;flex-direction:column;gap:5px;margin-top:10px;max-height:212px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer-lang.open .drawer-lang-list{display:flex}
.drawer-lang-list button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--slate);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 13px;cursor:pointer;transition:.18s var(--ease)}
.drawer-lang-list button b{font-weight:700;letter-spacing:.03em;width:26px;flex:none}
.drawer-lang-list button:hover{border-color:var(--tomato);color:var(--tomato)}
.drawer-lang-list button.active{border-color:rgba(0,154,68,.4);background:var(--tomato-tint);color:var(--tomato)}
.drawer-lang-list button.active::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:12px}

/* mobil alt navigasyon — Instagram tarzı floating frosted pill */
.bottom-nav{
  position:fixed;left:16px;right:16px;z-index:90;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  justify-content:space-around;align-items:center;gap:4px;
  padding:6px 8px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  border:none;
  box-shadow:0 10px 30px rgba(33,30,22,.16),0 2px 8px rgba(33,30,22,.07),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .26s var(--ease);
}
.bottom-nav.bn-hidden{transform:translateY(calc(100% + 30px));pointer-events:none}
.bn-item{
  flex:none;position:relative;display:grid;place-items:center;
  width:40px;height:40px;border-radius:var(--radius-lg);
  color:var(--slate-2);font-size:19px;transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
}
/* etiketler görsel gizli (icon-only, IG tarzı) — erişilebilirlik için DOM'da kalır */
.bn-item>span:last-child{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* aktif: yarı saydam domates (primary) — glass korunur, radius-lg pill ile uyumlu */
.bn-item.active{color:var(--tomato);background:rgba(0,154,68,.15)}
.bn-item:active{transform:scale(.9)}
/* orta FAB: bar'dan çıkık (raised) — düz domates, token radius, halka yok */
.bn-center{width:auto;height:auto;background:none;transform:translateY(-14px)}
.bn-center:active{transform:translateY(-14px) scale(.92)}
.bn-fab{
  width:52px;height:52px;border-radius:var(--radius-lg);border:none;color:#fff;
  background:var(--tomato);
  display:grid;place-items:center;font-size:19px;
  box-shadow:0 8px 20px rgba(0,154,68,.5);
}

/* ===================== GÖRÜŞ BİLDİR (eski site "Öneri ve Şikayet" mirası) =====================
   Eski sitedeki sunum: sağ kenarda 90° döndürülmüş sabit buton (open-feedback-modal).
   Aynı desen, yeni dile çevrildi.

   REVİZE R2 (Beyar, 2026-08-23 — docs/REVIZE-2026-08-23.md):
   şerit dili dadahaber v2'deki dikey şeride yaklaştırıldı ve dikeyde banner
   hizasına çekildi. Dört ölçü değişti, hiçbiri yeni token icat etmiyor:

   (a) DİKEY KONUM 50% → 42%. Şerit `position:fixed` olduğu için banner'ı
       gerçekten TAKİP EDEMEZ; ölçülebilir hedef "açılış ekranında bandın
       hizasına denk gelmek"tir. Ölçüm: 1440x900'de banner alt kenarı
       viewport'un ~%62'sinde bitiyor, 50% şeridi bandın alt çeyreğine
       düşürüyordu; 42% şeridi bandın gövdesine oturtuyor.

   🔴 (b) DÖNÜŞÜME DOKUNULMADI ve bu bilinçli. `transform-origin:100% 0` +
       `rotate(90deg)` elemanı origin'den YUKARI doğru bir boy uzatır (yerel
       +x ekseni sayfada -y'ye düşer); ardından gelen `translateX(50%)` onu
       yarım boy aşağı çekip tam olarak `top` çizgisinde ORTALAR. Yani `top`
       zaten şeridin MERKEZİDİR — dikeyde oynatmak için tek gereken odur.
       (`translateX(-50%)` kardeş markada denenmiş ve şerit yarım boy yukarı
       kaçmış; ölçümü orada kayıtlı.)

   🔴 (c) YARIÇAP `0 0 X X` YAZILIR, `X X 0 0` DEĞİL. 90° dönüş sonrası ALT
       iki köşe SOL kenara düşer — yani şerit sayfaya bakan tarafından
       yuvarlanır, sağ kenara yapışık düz tarafı kalır. Kart diliyle aynı
       ölçüye çıktı: --radius-md → --radius-lg.

   (d) Dolgu ve yazı büyüdü, kart gölgesi eklendi (--sh-md).

   RENK DEĞİŞMEDİ ve DEĞİŞMEZ: bu projede `--tomato` token'ı nane yeşiline
   (#009A44) bağlıdır (bkz. §token, Beyar kararı A5). Şerit yeşilini ayrıca
   yazmak ikinci bir kaynak yaratır ve token değişince sessizce ayrışır. */
/* ---- SAĞ KENAR DİKEY ŞERİT (.edge-rail) — Beyar kararı 2026-08-24 ----

   🔴 KARAR DEĞİŞTİ. Bu madde (R39) daha önce *"bant EKLENMESİN"* diye
   ölçümüyle kapatılmıştı; Beyar kararı tersine çevirdi ve şeridi istedi.
   Eski gerekçe kayıtta durur, hüküm bu satırla değişmiştir.

   Ölçü kardeş markadan ALINMADI, ölçülüp karşılığı kuruldu: 8px genişlik,
   viewport boyu sürekli bant, kenara yaslı. RENK bu markanın kendi
   token'ıdır (`--tomato` = nane yeşili, A5 kararı); kardeş markanın turuncusu
   KOPYALANMADI — `§1` sınır kuralı renk için de geçerli.

   `z-index:54` — "Görüş Bildir" etiketinin (55) hemen ALTINDA, yani etiket
   şeridin üstünde durur; sayfa içeriğinin (2) üstünde.

   ⚠ Etiketle AYNI kırılımda düşer: ≤640px'te `.feedback-tab` gizleniyor,
   şerit de gizlenir — yoksa mobilde sahibi olmayan bir bant kalırdı. */
.edge-rail{
  /* 🔴 z-index 54 -> 72 (Beyar, 2026-08-25): şerit siyah üst bandın ALTINDA
     kalıyordu ve ekranın en üstünde kesiliyordu. Kanon kardeş ekranda şerit
     bandın ÜSTÜNDEN geçip tam yüksekliği kaplıyor. 72 seçildi çünkü üst bant
     70'te; 72 onun hemen üstü ve dosyadaki 90+ katmanların (çekmece, modal,
     bildirim) hiçbirinin altını oymuyor. */
  position:fixed;top:0;right:0;z-index:72;
  width:8px;height:100vh;
  background:var(--tomato);
  pointer-events:none;
}

.feedback-tab{
  position:fixed;top:42%;right:0;z-index:55;
  transform-origin:100% 0;transform:rotate(90deg) translateX(50%);
  display:inline-flex;align-items:center;gap:8px;
  background:var(--tomato);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;
  padding:15px 24px 17px;border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--sh-md);
  white-space:nowrap;
  transition:background .2s var(--ease),transform .25s var(--ease);
}
.feedback-tab i{font-size:13px}
.feedback-tab:hover{background:var(--tomato-dark);transform:rotate(90deg) translateX(50%) translateY(3px)}

/* görüş bildir modal'ı — eski site akışı (konu seç → form → teşekkür) tek panelde */
.fb-overlay{position:fixed;inset:0;background:rgba(20,18,12,.5);z-index:97;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.fb-overlay.show{opacity:1;visibility:visible}
.fb-modal{position:fixed;inset:0;z-index:98;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),visibility .25s}
.fb-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.fb-panel{width:min(520px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--sh-lg);transform:translateY(14px);transition:transform .3s var(--ease)}
.fb-modal.show .fb-panel{transform:translateY(0)}
.fb-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.fb-head h3{font-size:19px}
.fb-head p{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.fb-close{flex:none;width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--paper);color:var(--slate);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.2s var(--ease)}
.fb-close:hover{border-color:var(--tomato);color:var(--tomato)}
.fb-body{padding:22px 24px 24px}
.fb-topics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.fb-topic{display:flex;align-items:center;gap:10px;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--slate);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;cursor:pointer;transition:.18s var(--ease);text-align:left}
.fb-topic i{width:18px;text-align:center;color:var(--tomato);font-size:14px;flex:none}
.fb-topic:hover{border-color:var(--tomato);color:var(--tomato)}
.fb-topic.active{border-color:rgba(0,154,68,.4);background:var(--tomato-tint);color:var(--tomato);font-weight:700}
.fb-topic[data-topic="puan"]{grid-column:1/-1;justify-content:center} /* 5. tip (Puan ver — Yasin Bey'e öneri) tam satır */
.fb-field{margin-bottom:11px}
.fb-field input,.fb-field textarea{width:100%;font-family:inherit;font-size:14px;font-weight:500;color:var(--slate);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 15px;outline:none;transition:border-color .2s var(--ease)}
.fb-field input::placeholder,.fb-field textarea::placeholder{color:#a7a7a7}
.fb-field input:focus,.fb-field textarea:focus{border-color:var(--tomato)}
.fb-field textarea{min-height:108px;resize:vertical}
/* M17 — tipe göre alan setleri */
.fb-fields{display:none}
.fb-fields.active{display:block;animation:fadeUp .3s var(--ease)}
.fb-q{font-size:13.5px;font-weight:700;color:var(--slate);margin-bottom:10px}
.fb-select{
  appearance:none;-webkit-appearance:none;width:100%;font-family:inherit;font-size:14px;font-weight:500;color:var(--slate);
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237E7E7E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 15px center;
  border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 40px 13px 15px;outline:none;cursor:pointer;transition:border-color .2s var(--ease);
}
.fb-select:focus{border-color:var(--tomato)}
.fb-select:invalid{color:#a7a7a7}
.fb-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.fb-chiprow .chip.active{border-color:var(--tomato);color:var(--tomato);background:var(--tomato-tint);font-weight:700}
.fb-emoji{display:flex;gap:8px;margin-bottom:13px}
.fb-emoji button{
  flex:1;font-size:25px;line-height:1;padding:13px 0;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-md);cursor:pointer;filter:grayscale(1);opacity:.65;transition:.18s var(--ease);
}
.fb-emoji button:hover{filter:none;opacity:1;border-color:var(--tomato)}
.fb-emoji button.active{filter:none;opacity:1;border-color:rgba(0,154,68,.4);background:var(--tomato-tint);transform:scale(1.06)}
.fb-shot{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-family:inherit;font-size:13px;font-weight:700;
  color:var(--muted);background:transparent;border:1.5px dashed #d9d9d9;border-radius:var(--radius-md);padding:13px;margin-bottom:11px;
  cursor:pointer;transition:.18s var(--ease);
}
.fb-shot small{font-weight:500}
.fb-shot:hover{border-color:var(--tomato);color:var(--tomato)}
.fb-kvkk{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.5;margin:14px 0 16px;cursor:pointer}
.fb-kvkk input{margin-top:3px;accent-color:var(--tomato);flex:none}
.fb-kvkk a{color:var(--tomato);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.fb-send{width:100%}
.fb-success{text-align:center;padding:18px 0 10px}
.fb-success .ok{width:62px;height:62px;border-radius:var(--radius-circle);background:#E3F4EA;color:var(--green);display:grid;place-items:center;font-size:26px;margin:0 auto 16px}
.fb-success h4{font-size:18px;margin-bottom:7px}
.fb-success p{font-size:13.5px;color:var(--muted);font-weight:500;max-width:340px;margin:0 auto}

/* ===================== ÇEREZ ONAY BANNER ===================== */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:24px;z-index:95;
  width:min(1180px,calc(100% - 48px));margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--sh-lg);padding:16px 20px;
  transform:translateY(140%);opacity:0;visibility:hidden;
  transition:transform .42s var(--ease),opacity .35s var(--ease),visibility .42s;
}
.cookie-banner.show{transform:translateY(0);opacity:1;visibility:visible}
/* ===== E2E turu, 2026-08-21 — BANT ICERIGI ORTUYORDU =====================
   OLCULDU (gercek tarayici, elementFromPoint): `/giris` ekraninda formun
   kendi "Giris Yap" dugmesi y 802-850 arasinda; bant y 781-876 arasini
   kapliyor ve dugmenin MERKEZINDE elementFromPoint `div.cookie-inner`
   donduruyor. Yani ilk ziyaretinde kullanici, bandi kapatmadan giris
   yapamiyordu. Ayni ekranda bant kunye baglantilarinin da ustundeydi
   (390/414'te e-posta alanina yapilan gercek `tap` odagi alana goturmuyor).

   COZUM: bant GORUNURKEN sayfanin altina onun kadar bosluk birakilir.
   Deger UYDURULMADI, olculdu: bant + `bottom` bosluğu 1440'ta 119px,
   414'te 329px, 390'da 349px. Asagidaki degerler o olcumun ustune
   birakilan paydir.

   ⚠ BANDIN KENDI GORUNUMU DEGISMEDI: konum, golge, radius, gecis, renk —
   hicbiri elle tutulmadi. Degisen tek sey SAYFANIN alt boslugudur ve o da
   yalniz bant EKRANDAYKEN. Bant kapatilinca (`.show` dusunce) bosluk da
   kalkar; yeni tasarim dili uretilmedi. */
body:has(.cookie-banner.show){padding-bottom:140px}
.cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cookie-text{display:flex;align-items:center;gap:14px}
.cookie-ico{flex:none;width:44px;height:44px;border-radius:var(--radius-md);background:var(--tomato-tint);color:var(--tomato);display:grid;place-items:center;font-size:19px}
.cookie-text p{font-size:13.5px;font-weight:500;color:var(--slate-2);line-height:1.5;max-width:700px}
.cookie-text a{color:var(--tomato);font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cookie-text a:hover{color:var(--tomato-dark)}
.cookie-actions{flex:none;display:flex;align-items:center;gap:10px}
.btn-cookie-reject,.btn-cookie-accept{font-family:inherit;font-size:13.5px;font-weight:700;border-radius:var(--radius-md);padding:11px 22px;cursor:pointer;transition:.2s var(--ease);white-space:nowrap}
.btn-cookie-reject{color:var(--slate);background:transparent;border:1px solid var(--line)}
.btn-cookie-reject:hover{border-color:var(--slate);color:var(--ink)}
.btn-cookie-accept{color:#fff;background:var(--tomato-deep);border:1px solid var(--tomato-deep)}
.btn-cookie-accept:hover{background:var(--tomato-dark);border-color:var(--tomato-dark);transform:translateY(-1px)}

/* ===================== TABLET (≤1024px) — chrome katmanı ===================== */
@media (max-width:1024px){
  .wrap{padding:0 24px}

  /* yatay menü → hamburger + drawer */
  .h-top .nav{display:none}
  .hamburger{display:grid}
  .drawer{display:flex}
  .drawer-overlay{display:block}

  /* üst bant sadeleşir — yatay taşma engeli */
  .topbar .tb-soc,.topbar .tb-div{display:none}

  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 28px}
  .foot-brand{grid-column:1/-1}
  .sec-head h2{font-size:30px}
}

/* ===================== MOBİL (≤640px) — chrome katmanı ===================== */
@media (max-width:640px){
  .wrap{padding:0 16px}

  /* üst bant gizli, header en üste (tek kat 62px) */
  .topbar{display:none}
  .header{top:0}
  .h-top>.wrap{height:62px;gap:10px}
  .brand img{height:32px}
  .head-actions{gap:6px}
  .btn-login{display:none}                                   /* giriş → drawer + bottom-nav */
  /* ⚠ ÜSTTEKİ SATIR ARTIK PLANIM'I DÜŞÜRMÜYOR: `body.is-auth #btnPlanim`
     (satır ~424) daha özgül. Beyar 2026-08-21 md.d — Planım'a erişim hiçbir
     genişlikte kapanmaz; ≤640'ta girişli kullanıcının header düğmesi durur. */
  /* logged-in header öğeleri mobilde drawer + bottom-nav'a devreder (kaynak sıra ile is-auth'u yener) */
  body.is-auth .head-add,body.is-auth .head-bell,body.is-auth .acct-wrap{display:none}
  .icon-btn{width:40px;height:40px;font-size:15px}

  /* fixed header offseti mobilde tek kat */
  .below-header{padding-top:62px}

  /* bölüm ritmi */
  .sec{padding:44px 0}

  /* section başlık araçları: oklar h2 satırında, "Tamamını Gör" kompakt metin-link.
     DOM aynı — sol blok + sec-tools display:contents ile grid'e açılır:
     [eyebrow] / [h2 | oklar] / [lead] / [see-all] */
  .sec-head,.cat-head,.guide-head{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:14px;align-items:center;margin-bottom:24px;
  }
  .sec-head>div:first-child,.cat-head>div:first-child,.guide-head>div:first-child,
  .sec-head .sec-tools,.cat-head .sec-tools,.guide-head .sec-tools{display:contents}
  .sec-head .eyebrow,.cat-head .eyebrow,.guide-head .eyebrow{grid-row:1;grid-column:1/-1}
  .sec-head h2,.cat-head h2,.guide-head h2{grid-row:2;grid-column:1;font-size:24px}
  .row-nav,.cat-nav{grid-row:2;grid-column:2;align-self:center}
  .row-nav button,.cat-nav button{width:38px;height:38px;font-size:12px}
  .sec-head .lead,.cat-head .lead,.guide-head .lead{grid-row:3;grid-column:1/-1;font-size:14.5px}
  /* kompakt see-all: buton kabuğu kalkar, metin-link kalır */
  .see-all{padding:0;border:none;background:transparent;font-size:13.5px;color:var(--tomato)}
  .sec-tools>.see-all{grid-row:4;grid-column:1/-1;justify-self:start;margin-top:14px}

  .chip{font-size:12px;padding:7px 12px;white-space:nowrap}

  /* görüş bildir etiketi mobilde gizli — bottom-nav + FAB yeterli */
  .feedback-tab{display:none}
  .edge-rail{display:none}

  /* footer — floating pill nav'ı örtmesin */
  .footer.orange{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-legal{justify-content:center;text-align:center}
  .foot-bottom{flex-direction:column;gap:14px;text-align:center}

  /* mobil alt bar aç */
  .bottom-nav{display:flex}

  /* çerez banner: floating bottom-nav'ın ÜSTÜNDE, alt alta */
  .cookie-banner{
    width:calc(100% - 24px);padding:15px 16px;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
  }
  .cookie-inner{flex-direction:column;align-items:stretch;gap:13px}
  /* Mobilde bant dikey yigiliyor: olculen toplam 329px (414) / 349px (390). */
  body:has(.cookie-banner.show){padding-bottom:370px}
  .cookie-text{align-items:flex-start}
  .cookie-actions{gap:9px}
  .cookie-actions button{flex:1;padding:12px 8px;font-size:12.5px}
}

/* ============ w3-nav-sweep ============ */
/* w3-nav-sweep */
.dropdown .dd-group{margin:6px 0 2px;padding:9px 13px 4px;border-top:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.d-sub .d-sub-group{margin-top:6px;padding:10px 22px 4px 36px;border-top:1px solid var(--line);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.acct-menu .acct-pro i{color:#d99812}
.acct-menu .acct-pro:hover{background:linear-gradient(180deg,rgba(251,230,180,.55),rgba(243,209,120,.32))}
.acct-menu .acct-pro:hover,.acct-menu .acct-pro:hover i{color:#8a6410}
/* Pro Menü maddesi — altın PRO pill (acct-pro crown diliyle tutarlı); pro içerik işareti */
.acct-menu .pm-badge{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a6410;background:linear-gradient(180deg,#fbe6b4,#f3d178);border:1px solid #e0bc63;padding:2px 7px;border-radius:999px}
.acct-menu .pm-badge i{font-size:9px;color:#b8860b}
.vid-pro{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a6410;background:linear-gradient(180deg,#fbe6b4,#f3d178);border:1px solid #e0bc63;padding:2px 8px;border-radius:999px;vertical-align:middle;margin-left:9px}
.vid-pro i{font-size:9px}

/* ============ ADIM 3 — KABUK: brand-switch band (Diet, .bs-diet aktif) ============ */
/* NOT: .bs-gastro --bs-c artık var(--c-gastro) (KOL A4, 2026-08-16 — eskiden LİTERAL
   #E14827 idi, tek kaynağa toplandı) — bu sayfada --tomato NANE'ye swap'lı (Diet aksanı),
   var(--tomato) kullanılsaydı Gastro pill'i mint render olurdu. Diğer markalar page-bağımsız token. */
:root{--c-mint-deep:#009A44}
.brand-switch{display:flex;align-items:center;gap:5px}
.bs-item{display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 11px;border-radius:var(--radius-sm);color:#e9e2d6;font-size:12px;font-weight:800;letter-spacing:.01em;line-height:1;border:1px solid transparent;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.bs-item i{font-size:13px;color:var(--bs-ic);transition:color .2s var(--ease)}
.bs-name{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transform:translateX(-4px);transition:max-width .26s var(--ease),opacity .2s var(--ease),transform .22s var(--ease)}
.bs-item:hover,.bs-item:focus-visible{background:var(--bs-c);border-color:var(--bs-c);color:#fff;outline:none}
.bs-item:hover i,.bs-item:focus-visible i{color:#fff}
.bs-item:hover .bs-name,.bs-item:focus-visible .bs-name{max-width:140px;opacity:1;transform:none}
.bs-item.is-active{background:var(--bs-bg);border-color:var(--bs-bd);color:#fff;cursor:default;box-shadow:inset 0 -2px 0 var(--bs-ic)}
.bs-item.is-active .bs-name{max-width:140px;opacity:1;transform:none}
.bs-item.is-active i,.bs-item.is-active:hover i{color:var(--bs-ic)}
.bs-item.is-active:hover{background:var(--bs-bg);border-color:var(--bs-bd)}
.bs-gastro {--bs-c:var(--c-gastro);    --bs-bg:rgba(225,72,39,.18); --bs-bd:rgba(225,72,39,.46); --bs-ic:#ff7d5e}
.bs-diet   {--bs-c:var(--c-mint-deep); --bs-bg:rgba(0,154,68,.20);--bs-bd:rgba(0,154,68,.5); --bs-ic:#66c28f}
.bs-fit    {--bs-c:var(--c-green);     --bs-bg:rgba(0,147,208,.22);  --bs-bd:rgba(0,147,208,.5);   --bs-ic:#66bee3}
.bs-gourmet{--bs-c:var(--c-purple);    --bs-bg:rgba(177,79,197,.22);--bs-bd:rgba(177,79,197,.5); --bs-ic:#c97ad6}
.bs-campus {--bs-c:var(--c-petrol);    --bs-bg:rgba(0,96,114,.30);  --bs-bd:rgba(95,203,216,.40);--bs-ic:#5fcbd8}
/* ── DÖRT MARKA BANDI · İKİ KİLİTLİ DÜNYA (Beyar, 2026-08-30) ──────────
   Beyar: *"Üst siyah bant Fit'tekiyle aynı olacak."* DadaAkademi ve
   DadaStore kalemleri geldi; Campus kalemi kalktı (kardeş depoda
   2026-08-29'da söküldü).

   🔴 RENK ÜRETİLMEDİ. Dört değerin dördü de kardeş deponun kendi
   `fit-shell.css`inden BİREBİR alındı (orada §O11 diye kayıtlı). Bant dört
   depoda aynı pikseli basmak zorunda; burada yeni bir ton türetmek bandı
   markadan markaya ayrıştırırdı.
   ⚠ Renkler yalnız İKON tonunda görünür: iki kalem de kilitli, hover'ları
     hiç çalışmıyor.
   ⚠ `.bs-campus` SİLİNMEDİ — kalem bugün basılmıyor ama kural burada
     duruyor; kalem geri istenirse markup'ı iki komşusundan kopyalanır. */
.bs-akademi{--bs-c:#6c7a89;            --bs-bg:rgba(108,122,137,.22);--bs-bd:rgba(108,122,137,.45);--bs-ic:#9aa8b5}
.bs-store  {--bs-c:#a8763a;            --bs-bg:rgba(168,118,58,.22); --bs-bd:rgba(168,118,58,.45); --bs-ic:#d3a067}

/* KİLİTLİ KALEM — görünüm `.is-soon`, erişilebilirlik `aria-disabled`
   (markup'ta). İkisi BİRLİKTE kullanılır: yalnız görünüm, ekran okuyucuya
   kalemin tıklanamaz olduğunu söylemez.
   🔴 "Yakında" METNİ YAZILMAZ — yalnız kilit rozeti basılır. Bu deponun
   kendi kuralı (`SOONB` rozetinin bantta basılmaması) ve kardeş deponun
   §O8'i aynı şeyi söylüyor.
   Kurallar yine kardeş deponun `fit-shell.css`inden birebir. */
.bs-item.is-soon{color:rgba(233,226,214,.26);cursor:not-allowed;position:relative}
.bs-item.is-soon i{color:rgba(233,226,214,.26)}
.bs-item.is-soon:hover,.bs-item.is-soon:focus-visible{background:transparent;border-color:transparent;color:rgba(233,226,214,.26)}
.bs-item.is-soon:hover i,.bs-item.is-soon:focus-visible i{color:rgba(233,226,214,.26)}
.bs-item.is-soon:hover .bs-name,.bs-item.is-soon:focus-visible .bs-name{max-width:0;opacity:0}
.bs-item .sr-lock{font-size:8.5px;color:rgba(233,226,214,.42);margin-left:1px}

/* ============ ADIM 3 — KABUK: reveal + scroll-top + DadaMentor FAB (Diet) ============ */
html.reveal-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.reveal-ready .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.reveal-ready .reveal{opacity:1 !important;transform:none !important;transition:none}}
/* scroll-to-top (sağ-alt) — var(--tomato) bu sayfada NANE
   Alt kenarı DadaMentor mini panelininkiyle AYNI: ikisi tek sıra oluşturur.
   Gastro tarafında sağ altta ikinci bir yüzen düğme (yol güzergâhı) olduğu
   için burası bir kat yukarıdaydı (92px / mobilde 148px); Diet'te o düğme
   yok, sıra boş kaldı. Değer .mentor-panel.mini ile aynı yerden okunur:
   24px (>640) ve 88px + güvenli alan (≤640). */
.to-top{position:fixed;right:22px;bottom:24px;z-index:55;width:54px;height:54px;border-radius:var(--radius-lg);background:#fff;color:var(--tomato);border:1px solid var(--line);cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(33,30,22,.16);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s,background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--tomato);color:#fff;border-color:var(--tomato);transform:translateY(-2px)}
.to-top:focus-visible{outline:3px solid var(--tomato-tint);outline-offset:2px}
@media (max-width:640px){.to-top{right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .15s linear}.to-top:hover{transform:none}}
/* ---- DadaMentor asistan token'lar (Diet: --tomato-rgb NANE 59,183,126 → atmos/av glow mint; gövde koyu kanonik) ---- */
:root{
  --d-3:#322D26; --d-deep:#161310;
  --dline:rgba(251,248,243,.16);
  --r-md:12px; --r-lg:16px; --r-xl:24px; --r-circle:50%;
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --tomato-rgb:59,183,126;
  --sh-3:0 18px 50px rgba(33,30,22,.16);
  --panel-fl:360px;
  --b-gastro:#E14827;  --b-gastro-l:#F0613F;
  --b-gourmet:#b14fc5; --b-gourmet-l:#C66BD8;
  --b-diet:#009A44;    --b-diet-l:#7FCCA1;
  --b-fit:#0093d0;     --b-fit-l:#4DB4DE;
  --b-akademi:#006072; --b-akademi-l:#2E97AB;
}
.w-gastro{--bc:var(--b-gastro);--bl:var(--b-gastro-l)}
.w-gourmet{--bc:var(--b-gourmet);--bl:var(--b-gourmet-l)}
.w-diet{--bc:var(--b-diet);--bl:var(--b-diet-l)}
.w-fit{--bc:var(--b-fit);--bl:var(--b-fit-l)}
.w-akademi{--bc:var(--b-akademi);--bl:var(--b-akademi-l)}
.mentor-panel{overflow:hidden;border:1px solid var(--dline);border-radius:var(--r-xl);box-shadow:var(--sh-3);background:var(--d-deep);display:flex;flex-direction:column;justify-content:space-between;transition:width .5s var(--ease-spring),height .5s var(--ease-spring),border-radius .5s var(--ease-spring),box-shadow .42s var(--ease),transform .45s var(--ease-spring),opacity .35s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.mp-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.mp-atmos{position:absolute;inset:0;background:radial-gradient(110% 60% at 34% 24%, rgba(var(--tomato-rgb),.24), transparent 58%),linear-gradient(162deg,var(--d-3) 0%,var(--d-deep) 92%)}
.mp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-fade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg, rgba(22,19,16,.05) 0%, transparent 30%, rgba(22,19,16,.34) 54%, rgba(22,19,16,.82) 78%, rgba(22,19,16,.97) 100%)}
.mp-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:15px 16px;flex:none;transition:opacity .25s var(--ease)}
.mp-tag{display:inline-flex;align-items:center;gap:8px;font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.mp-tag i{font-size:11px;color:var(--tomato)}
.mp-toggle{width:30px;height:30px;border-radius:var(--r-circle);border:1px solid var(--dline);background:rgba(22,19,16,.40);backdrop-filter:blur(4px);color:rgba(255,255,255,.8);display:grid;place-items:center;cursor:pointer;font-size:12px;transition:.2s var(--ease)}
.mp-toggle:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.mp-chat{position:relative;z-index:3;padding:0 16px 17px;display:flex;flex-direction:column;gap:11px;flex:1;min-height:0;justify-content:flex-end;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mp-id{display:flex;align-items:center;gap:11px;flex:none}
.mp-av{width:38px;height:38px;border-radius:var(--r-circle);background:var(--tomato);color:#fff;display:grid;place-items:center;font-size:15px;flex:none;box-shadow:0 0 0 4px rgba(var(--tomato-rgb),.22)}
.mp-id .nm{font-weight:800;font-size:15.5px;color:#fff;line-height:1.1}
.mp-id .on{display:inline-flex;align-items:center;gap:6px;font-weight:300;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.74)}
.mp-id .on .d{width:7px;height:7px;border-radius:var(--r-circle);background:var(--b-diet-l);box-shadow:0 0 0 3px color-mix(in srgb,var(--b-diet-l) 28%,transparent)}
.mp-bubble{flex:none;align-self:flex-start;max-width:94%;background:rgba(38,34,29,.86);backdrop-filter:blur(7px);border:1px solid var(--dline);border-radius:4px 15px 15px 15px;padding:12px 15px;font-weight:600;font-size:15.5px;line-height:1.4;color:#fff}
.mp-row{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mp-opt{display:inline-flex;align-items:center;justify-content:center;min-width:0;cursor:pointer;white-space:nowrap;text-decoration:none;padding:9px 10px;border-radius:var(--r-md);background:rgba(22,19,16,.50);backdrop-filter:blur(7px);border:1px solid var(--dline);color:rgba(255,255,255,.92);font-weight:600;font-size:12.5px;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.mp-opt:hover{background:rgba(42,38,32,.86);border-color:var(--bc,var(--tomato));color:#fff;transform:translateY(-1px)}
.mp-opt.active{background:var(--bc,var(--tomato));border-color:transparent;color:#fff;box-shadow:0 5px 18px color-mix(in srgb,var(--bc,var(--tomato)) 42%,transparent)}
.mp-mini-overlay{display:flex;position:absolute;inset:0;z-index:5;align-items:center;justify-content:flex-start;gap:11px;padding:0 22px 0 8px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.mp-mini-overlay .mav{width:40px;height:40px;border-radius:var(--r-circle);background:var(--tomato);color:#fff;display:grid;place-items:center;font-size:17px;flex:none;box-shadow:0 0 0 3px rgba(var(--tomato-rgb),.26);transform:scale(.55);transition:transform .45s var(--ease-spring)}
.mp-mini-lbl{font-weight:800;font-size:14.5px;letter-spacing:-.01em;color:#fff;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease) .05s,transform .35s var(--ease-spring) .05s}
.mentor-panel.mini .mp-mini-lbl{opacity:1;transform:none}
.mentor-panel.floating{position:fixed;left:24px;right:auto;bottom:24px;top:auto;width:var(--panel-fl) !important;height:min(72vh,540px);z-index:94;border-radius:var(--r-xl);box-shadow:0 28px 80px rgba(16,14,9,.46);animation:floatIn .5s var(--ease-spring)}
@keyframes floatIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
.mentor-panel.foot-hide{transform:translateY(150%) !important;opacity:0;pointer-events:none}
.mentor-panel.floating .mp-chat{flex:none;justify-content:flex-end}
.mentor-panel.mini{position:fixed;left:24px;right:auto;bottom:24px;top:auto;width:148px !important;height:56px !important;max-height:56px;border-radius:var(--r-lg);z-index:94;cursor:pointer;overflow:hidden;background:var(--slate);border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 38px rgba(16,14,9,.46)}
.mentor-panel.mini .mp-media,.mentor-panel.mini .mp-fade{opacity:0}
.mentor-panel.mini .mp-top,.mentor-panel.mini .mp-chat{position:absolute;left:0;right:0}
.mentor-panel.mini .mp-chat{bottom:0;opacity:0;pointer-events:none;transform:translateY(6px)}
.mentor-panel.mini .mp-top{top:0;opacity:0;pointer-events:none}
.mentor-panel.mini .mp-mini-overlay{position:relative;inset:auto;height:56px;opacity:1;pointer-events:auto}
.mentor-panel.mini .mp-mini-overlay .mav{transform:scale(1)}
/* ≤640: açık panel ekran genişliğini alır. Mini pil ALMAZ — panel iki sınıfı
   birlikte taşıdığı için (.floating.mini) buradaki genişlik mini'nin kendi
   148px'ini eziyordu ve pil neredeyse tam genişlikte bir şerit oluyordu.
   Mini kendi ölçüsünü burada tekrar beyan eder; böylece sağ alttaki .to-top
   ile aynı sırada yan yana durabiliyorlar. */
@media (max-width:640px){.mentor-panel.floating{left:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:calc(100vw - 32px) !important;max-width:360px;height:min(64vh,520px)}.mentor-panel.mini{left:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:148px !important}}

/* ===== Footer marka hizalama (Gastro footer dili; marka-nötr, sızma yok) ===== */
.foot-lockup{display:inline-flex;align-items:center;gap:11px;margin-bottom:15px}
/* İŞARET BİÇİMİ HEADER'DAN GELİR (Beyar, 2026-08-16). Diet header'ı ikon-çipi
   DEĞİL, çizilmiş bir SVG (.dd-mark) — yuvarlatılmış kareyi kendi <rect rx="11">
   niteliğiyle taşır, CSS yarıçapı yoktur. Bu yüzden footer, kardeş kabukların
   ÖLÇÜLEN header kanonuna hizalandı (canlı, 4 genişlik): 40px kutu / 11px yarıçap /
   18px ikon → iç boşluk oranı 18÷40 = 0,450.
   Footer 42px kutuda aynı oran → 42 × 0,450 = 18,9 ≈ 19px ikon.
   Öncesi: radius %50 (DAİRE), ikon 17px (oran 0,405). Kutu boyutu ve ters renk
   (beyaz zemin + marka rengi, koyu bant üstünde) DEĞİŞMEDİ. */
.foot-lockup .fl-mark{width:42px;height:42px;border-radius:var(--radius-mark);background:#fff;color:var(--tomato);display:grid;place-items:center;font-size:19px;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.16)}
.foot-lockup .fl-word{font-weight:800;font-size:23px;letter-spacing:-.015em;color:#fff;line-height:1}
.foot-lockup .fl-word .bd,.foot-lockup .fl-word .sf{color:#fff}
.foot-brand .foot-tag{font-size:14px;font-weight:500;color:rgba(255,255,255,.82);line-height:1.6;max-width:34ch;margin:0 0 18px}
.foot-bottom .fb-left b{color:#fff;font-weight:700}
.foot-bottom .fb-left b .bd,.foot-bottom .fb-left b .sf{color:#fff}

/* ===== Çapraz-marka wordmark, küçük etiket kapları içinde (KOL 4, 2026-08-15)
   Diet'te DadaGastro'ya köprü kuran etiketler iki kaba giriyor ve İKİSİ DE
   marka lockup'ını bozuyor — ölçüldü, canlı yerel aynada:
     .eyebrow    → text-transform:uppercase · letter-spacing:1.92px (bu dosya, 96-100)
     .brg-brand  → text-transform:uppercase · letter-spacing:0.46px
                   (beslenme-rehberi sayfalarının kendi <style>'ı, ör.
                    dengeli-tabak.blade.php:315)
   Wordmark bu markada HİÇBİR yerde büyük harf/geniş tracking ile basılmaz
   (topbar .bs-name, footer .fb-left b, .foot-lockup .fl-word, mp-opt,
   partials/topbar.blade.php:32 — hepsi karışık harf). .bd/.sf'nin yüzleri
   (GilroyBd 700 / Gilroy 500) bu dosyanın başında ZATEN tanımlı — şartname
   A5 gereği kayıtlı yüz İKİdir, eski GilroyXB/GilroyLt yüzleri kalktı;
   burada yalnız kabın dayattığı dönüşüm geri alınır, yeni tipografi YOK. */
.eyebrow .brand-word,.brg-brand .brand-word{text-transform:none;letter-spacing:normal}

/* ===== Çapraz-marka wordmark boyutu — ÜÇ markaya da eşit (R16a, Beyar
   canlı gezinti turu 2026-08-23/24: "diet niye küçük ki").
   KÖK NEDEN (ölçüldü): 23px büyütme yalnız .is-gastro değiştiricisine
   yazılmıştı (KOL A4, 2026-08-16); DadaDiet ve DadaFit lockup'ları
   değiştirici taşımadığı için .eyebrow/.brg-brand'ın kendi 11.5px/12px
   "kategori etiketi" ölçeğinde kalıyordu. Kural artık DEĞİŞTİRİCİSİZ temel
   seçiciye yazılı — üç marka da aynı 23px'i alır. 23px İCAT DEĞİL, KOL
   A4'ün zaten kayda geçirdiği ölçü: bu dosyadaki .foot-lockup .fl-word
   (satır ~1010, 23px) VE Gastro'nun kendi header logosu
   resources/css/portal.css:231 .brand .brand-word (23px) ile birebir.
   İkon (.eyebrow i 13px sabit, .brg-brand i 12px sabit) ve ::before çizgisi
   (26x2px sabit) bu kuraldan ETKİLENMEZ. Kapı:
   tests/Feature/Diet/DietCrossBrandSectionTest.php */
.eyebrow .brand-word,.brg-brand .brand-word{font-size:23px}

/* ===== Çapraz-marka DadaGastro etiketi — turuncu (KOL A4, 2026-08-16)
   .eyebrow/.brg-brand içindeki DadaGastro köprü etiketleri Diet naneşiyle
   (--green-deep, INLINE style idi — 28 basımdan kaldırıldı) değil kendi
   markasının rengiyle (--c-gastro, yukarı 61-62'de token'landı, .bs-gastro'daki
   LİTERAL'le birebir) basılır — değiştirici sınıf .is-gastro, yeni sınıf
   AİLESİ değil var olan .eyebrow/.brg-brand'ın değiştiricisi. Boyut kuralı
   üstteki temel seçiciye taşındığı için burada yalnız RENK kalıyor.
   Kapı: tests/Feature/Diet/DietCrossBrandSectionTest.php */
.eyebrow.is-gastro,.brg-brand.is-gastro{color:var(--c-gastro)}
.brg-brand.is-gastro i{color:var(--c-gastro)}

/* ===== Çapraz-marka DadaFit etiketi — sporcu yeşili (R16a, D5 kararı
   Beyar 2026-08-24: "#0093d0" olarak token açılsın. Kaynağı yukarı 47'deki
   --tomato yorumu: "DadaFit'in doygun #0093d0 sporcu yeşili" — İCAT DEĞİL,
   dosyanın kendi kaydettiği değer. Simetri: .is-gastro ile aynı kalıp,
   yalnız renk kaynağı farklı. Lockup GERÇEK LOGO DOSYASI DEĞİL — ikon +
   <x-brand-word> kalıbı korunuyor, hiçbir görsel dosya eklenmedi (D5). */
.eyebrow.is-fit,.brg-brand.is-fit{color:var(--c-fit)}
.brg-brand.is-fit i{color:var(--c-fit)}

/* ===== Lockup altına ayraç (R16) — kart başlığından ayrışsın diye lockup
   tam genişlik alıp altına ince çizgi + boşluk kazanıyor. Değer --line
   token'ından, yeni renk/kalınlık icat edilmedi. */
.brg-card .brg-brand{display:flex;width:100%;padding-bottom:11px;border-bottom:1px solid var(--line)}

/* =========================================================================
   B1 KANON — `.hub-foot` ayraç hizası (Beyar, revizyon turu 2026-08-24;
   R3/R10/R20'nin ölçtüğü aynı kusurun 13 kopyası)
   =========================================================================
   KÖK NEDEN (ölçüldü): repodaki 13 kopyanın 11'i `margin-top:auto` hiç
   yazmıyordu (doğrudan 16px), ikisi (home.blade.php:207,
   beslenme-dengeli-tabak-v1.css:165) `margin-top:auto` yazıp HEMEN ARDINDAN
   `margin-top:16px` ile eziyordu. `.hub-body` her yerde zaten
   `display:flex;flex-direction:column;flex:1` — altyapı doğru, eksik olan
   tek şey ayrağı tabana iten `auto`nun tek başına, ikinci bir bildirimle
   ezilmeden durması. Üstteki boşluk zaten `padding-top:14px` ile var, ikinci
   bir margin-top YAZILMAZ.
   Tek kaynak burada; B kararı (Beyar 2026-08-24) gereği kopyaların
   kullanıldığı 13 dosya kendi sahibi grup tarafından dalga 2-3'te silinir
   (bu grup `kabuk` yalnız kaynağı açar, sayfa dosyalarına dokunmaz). Ara
   dönemde kopya duran sayfada görünür değişiklik olmaz — bu bilinen ve
   kabul edilmiş bir ara durumdur (aynı spesifiklik, sonradan yüklenen kopya
   kazanır), hata değildir. */
/* ---- KART GÖVDESİ — HİZALI SATIRLAR + AYRACIN İKİ YANINDA NEFES ----
   Beyar (2026-08-24): *"kartlar hizalı değil… 2 satırlık başlık, 2 satırlık
   açıklama, dividerın üstü ve altı boşluk olsun."*

   ÖLÇÜLDÜ (ipucu listesi, 1440px): başlık 18px (1 satır) ↔ 37px (2 satır),
   açıklama 42px (2 satır) ↔ 63px (3 satır), kart 204 ↔ 225px. Ayraç bu yüzden
   her kartta başka yükseklikte duruyordu.

   Çözüm satır sayısını SABİTLEMEK: başlık ve açıklama iki satıra kilitlenir
   (kısa olan boşluğu korur, uzun olan kırpılır), böylece ayraç her kartta
   aynı Y'ye düşer ve ızgara hizalanır.

   Ayracın ALTINDA zaten 14px vardı (`.hub-foot{padding-top:14px}`), ÜSTÜNDE
   0'dı — çizgi metne yapışıyordu. Ayracın hemen öncesindeki öğeye aynı 14px
   verildi; iki yan simetrik. Yeni ölçü üretilmedi, mevcut değer kullanıldı.

   ⚠ `margin-top:auto` KORUNUR (ayracı kartın dibine iter); onun yerine
   sabit bir üst boşluk yazılamaz, o yüzden boşluk ÖNCEKİ öğeden verilir. */
.hub-body{padding:18px;display:flex;flex-direction:column;flex:1}
.hub-body h4{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.12em);
}
.hub-body p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.55em);
}
.hub-body > :not(.hub-foot):has(+ .hub-foot){margin-bottom:14px}
.hub-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:500}

/* =========================================================================
   B2 KANON — `.qa-head` accordion ayracı (Beyar, revizyon turu 2026-08-24;
   R15/R21'in ölçtüğü aynı kusurun 22 kopyası)
   =========================================================================
   Kural kopyalardaki birebir değerlerle taşındı, tek eklenen satır AÇIKKEN
   alt ayraç: kapalı kutuda çizgi kutunun içinde asılı kalırdı, bu yüzden
   yalnız `.qa.open .qa-head` altına iniyor. Tek kaynak burada; 22 kopya
   (8 beslenme rehberi + 8 program + kaç-kalori/beslenme-ipuçları detayları +
   4 referans CSS) B kararı gereği sahibi gruplar tarafından silinir. */
.qa-head{display:flex;align-items:center;gap:14px;width:100%;background:none;border:none;font-family:inherit;font-size:15.5px;font-weight:700;color:var(--slate);padding:18px 22px;cursor:pointer;text-align:left;transition:color .2s var(--ease)}
.qa-head:hover{color:var(--tomato-deep)}
.qa.open .qa-head{color:var(--tomato-deep);border-bottom:1px solid var(--line)}
/* AYRACIN ALTINA NEFES (Beyar, 2026-08-25). Ayracın ÜSTÜNDE başlığın kendi
   18px dikey dolgusu vardı, ALTINDA hiç yoktu: `.qa-body p` dolgusu
   `0 26px 18px 70px`, yani üstten sıfır. Çizgi metne yapışıyordu.
   Değer UYDURULMADI — bileşenin kendi 18px'i aynadan yansıtıldı, ayracın
   iki yanı artık eşit. Yalnız AÇIK kutuda uygulanır, çünkü ayraç da yalnız
   orada var. Kapsam `> :first-child`: gövde bazı sayfalarda paragrafla
   değil küçük bir alt etiketle (`.qa-sub`) başlıyor; kural neyle
   başladığını sormadan ayracın altını açar. */
.qa.open .qa-body > :first-child{padding-top:18px}

/* =========================================================================
   FOOTER REVİZYONU — "Dada Diet Footer" belgesi (2026-08-17)
   =========================================================================
   Belgenin sabit mimarisi:
     Marka Alanı | Beslenme ve Araçlar | Öğren ve İlerle | Uzman Desteği | Uygulama
   + altında YATAY KURUMSAL BANT, onun altında MEVCUT YASAL BANT.

   🔴 DOKUNULMAYANLAR (kanıt: scripts/diet-footer-parity.mjs):
     · .foot-grid'in grid-template-columns'ı — beş hücre aynen duruyor
       (1.5fr 1fr 1fr 1fr 1.05fr, satır 595). Dördüncü sütun kalkmadı,
       İÇERİĞİ değişti: "Kurumsal" bandına, hücre uygulama alanına geçti.
     · .foot-legal / .foot-bottom — belgenin dipnotu gereği tek kural bile
       yazılmadı; renk, sıra, ayraç, hizalama aynen.
     · .foot-med tıbbi bandı — dokunulmadı.

   Bu blok dosyanın SONUNA eklendi (öncekilerin hiçbirini ezmez, kendi
   mobil media query'sini taşır — 858'deki bloktan sonra geldiği için
   eşit özgüllükte kaynak sırası kazanır).
   ========================================================================= */

/* ---- MOBİL ACCORDION İSKELETİ (masaüstünde görünmez) ----
   Başlık metni <h5> içindeki bir <button>'a taşındı. Masaüstünde buton
   düz metin gibi davranır: kabuk yok, imleç yok, chevron yok — h5'in
   kendi tipografisini miras alır, tek piksel kaymaz. */
.foot-col h5>.fc-toggle{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;letter-spacing:inherit;text-align:left;
  cursor:default;
}
.foot-col .fc-chev{display:none}

/* ---- SAĞ SABİT UYGULAMA ALANI (belge §5) ----
   Mağaza butonu değerleri Diyet'in KENDİ referansından birebir alındı
   (public/reference/diet/css/pages/diyet-listeleri-v1.css:83-88 — aynı
   sayfanın .app-store bandı). Yeni ölçü/renk İCAT EDİLMEDİ; yalnız
   footer'ın turuncu zemininde okunacak şekilde .footer.orange altında
   opaklıkları eşlenir (aşağıda). */
.foot-app h5{color:#fff;font-size:15px;font-weight:700;margin-bottom:12px}
.foot-app h5 .bd,.foot-app h5 .sf{color:#fff}
.foot-app-lead{font-size:13.5px;font-weight:500;color:#9fb0bc;line-height:1.6;margin:0 0 18px}
/* Diyet'in kendi .app-stores kuralıyla AYNI (diyet-listeleri-v1.css:83):
   satır + wrap. Dar footer sütununda (1.05fr) butonlar zaten alt alta düşer,
   geniş yerleşimde yan yana gelir — sabit bir yön dayatılmadı. */
.foot-app-stores{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
/* 🔴 İKİ BUTON EŞİT GENİŞLİKTE (revizyon, 2026-08-20).
   Önceki hâlinde genişliği METİN belirliyordu ve iki buton eşit değildi —
   ölçüldü (1440·768·390'ın üçünde de): App Store 130.81px · Google Play
   151.91px, yani 21.10px'lik bir fark. Alt alta düştükleri yerleşimde
   (1.05fr'lik dar sütun) bu fark sağ kenarları da kaydırıyordu.

   İKİ BİLDİRİM BİRLİKTE çalışır ve ikisi de gerekli:
     · `max-width` SABİT genişliği verir — 164px = ölçülen en geniş butonun
       max-content'i (151.91 → 152) + kabın kendi `gap` değeri kadar (12px)
       pay. Yeni bir ölçü icat edilmedi, ikisi de bu bloğun kendi sayıları.
     · `width:100%` yalnızca TAŞMA EMNİYETİDİR. Beş sütunlu yerleşimin en dar
       ucunda (1025px viewport) kap 157.92px'e iner; sabit 164px orada sütunu
       taşırırdı. Yüzde, butonu kabın genişliğine kilitler — iki buton yine
       EŞİT kalır, çünkü ikisi de aynı kaba bakar.

   Yerleşim yönü DAYATILMADI, eskisi gibi `flex-wrap`e bırakıldı: 164+12+164
   sığdığı genişlikte (768 · 390) yan yana, sığmadığı yerde (1440 · 1025) alt
   alta durur — ve alt alta düştüğünde sol/sağ kenarlar artık hizalıdır. */
.foot-app-store{
  display:inline-flex;align-items:center;gap:11px;
  width:100%;max-width:164px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);padding:11px 18px;
  transition:.2s var(--ease);
}
/* 🔴 Uygulama yayımlanmadığı için buton bugün <span> olarak basılır (hedefi
   yok). Hover yükselmesi YALNIZ gerçek <a>'ya verilir — hedefsiz butonun
   tıklanabilir görünmesi belgenin sert kuralını çiğnerdi. */
a.foot-app-store:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
span.foot-app-store{cursor:default}
.foot-app-store i{font-size:24px;color:#fff;flex:none}
.foot-app-store span{display:block;font-size:10.5px;color:#9fb0bc;font-weight:500;line-height:1.2}
.foot-app-store b{display:block;font-size:14px;color:#fff;font-weight:700}

/* ---- YATAY KURUMSAL BANT ----
   Belge: "geniş masaüstü ekranlarında tek satırda, daha dar ekranlarda iki
   dengeli satır halinde gösterilebilir." flex-wrap + ortalama tam olarak
   bunu yapar; sabit sütun sayısı DAYATILMADI, satır sayısı genişliğe göre
   kendiliğinden 1'den 2'ye iner. */
.foot-corp{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 26px;padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.foot-corp a{font-size:13px;font-weight:600;white-space:nowrap;transition:.2s}
.foot-corp a:hover{color:var(--tomato)}
/* Mobilde de ortalı akar, yalnız aralık daralır; belge "iki dengeli satır"
   diyor, dar ekranda daha fazlasına sarar — dayatılan satır sayısı yok. */
@media (max-width:640px){
  .foot-corp{gap:10px 18px;padding:20px 0}
}

/* ---- ORANGE FOOTER EŞLEMESİ ----
   Turuncu zeminde gri tonlar okunmaz; kardeş kurallar (satır 633-644) hangi
   opaklıkları kullanıyorsa yeni bloklar da AYNILARINI kullanır. */
.footer.orange .foot-app h5{color:#fff}
.footer.orange .foot-app-lead{color:rgba(255,255,255,.82)}
.footer.orange .foot-app-store{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
.footer.orange a.foot-app-store:hover{background:rgba(255,255,255,.22)}
.footer.orange .foot-app-store span{color:rgba(255,255,255,.78)}
.footer.orange .foot-corp{border-bottom-color:rgba(255,255,255,.18)}
.footer.orange .foot-corp a{color:rgba(255,255,255,.92)}
.footer.orange .foot-corp a:hover{color:#fff;text-decoration:underline}

/* ===================== MOBİL (≤640px) — belge "Mobil sıralama" =====================
   Sıra DOM'un kendisidir (logo+açıklama+sosyal · üç menü · uygulama ·
   kurumsal · yasal), bu yüzden tek bir `order` kuralı yazılmadı.
   Burada yalnız üç orta menü accordion'a döner. */
@media (max-width:640px){
  /* Accordion satırları bitişik dursun: grid'in 30px satır boşluğu kalkar,
     boşluk marka ve uygulama bloklarına ELDEN verilir (aynı 30px). */
  .foot-grid{row-gap:0}
  .foot-brand{margin-bottom:30px}
  .foot-app{margin-top:30px}

  .foot-col{border-bottom:1px solid rgba(255,255,255,.16)}
  .foot-col:first-of-type{border-top:1px solid rgba(255,255,255,.16)}
  .foot-col h5{margin-bottom:0}
  .foot-col h5>.fc-toggle{cursor:pointer;justify-content:space-between;padding:15px 0}
  .foot-col .fc-chev{display:block;font-size:12px;flex:none;transition:transform .2s var(--ease)}
  .foot-col h5>.fc-toggle[aria-expanded="true"] .fc-chev{transform:rotate(180deg)}
  /* Kapalı durum YALNIZ JS'in eklediği sınıfla oluşur — script çalışmazsa
     kalemler görünür kalır, menü yutulmaz. Sınıf, butonun `aria-controls`
     ile İŞARET ETTİĞİ kutuya konur (sütuna değil): bir sütun ileride ikinci
     bir gruba bölünürse ötekini yanlışlıkla kapatmaz. */
  .fc-links.is-closed{display:none}
  .fc-links{padding-bottom:10px}
  .foot-col a{white-space:normal}
}


/* =====================================================================
   SAYFALAMA — ORTAK BİLEŞEN (R28 · Beyar, 2026-08-25)
   ---------------------------------------------------------------------
   🔴 NEDEN BURAYA TAŞINDI — ÖLÇÜLDÜ, TERCİH DEĞİL.

   Bu kurallar on liste yüzeyinin ALTISINDA ayrı ayrı, elle kopyalanmış
   duruyordu; DÖRDÜNDE ise hiç yoktu (`articles/index` ·
   `articles/kategori` · `nutrition-hub` · `programs/index`). Yani aynı
   bileşen bazı sayfalarda düğme, bazılarında çıplak metin olarak
   basılıyordu. Kopyalar ayrıca birbirinden SAPMIŞTI:

     · `kac-kalori/liste` kopyasında `.pagi-note` kuralı HİÇ YOKTU —
       özet satırı biçimsiz basılıyordu,
     · `.pg:hover` altı kopyanın altısında da korumasızdı: AKTİF sayfa ve
       PASİF oklar da renk değiştiriyordu,
     · klavye odak halkası (`:focus-visible`) hiçbir kopyada yoktu,
     · dar ekran sıkıştırma bloğu hiçbir kopyada yoktu.

   `09 §3.1` md.1: *"İhtiyaç varsa ortak arayüz paketine eklenir."*
   Referans da aynı yolu izlemiş ve kuralları kendi kabuk dosyasına
   taşımış. Tek kaynak burasıdır; sayfa içi kopyalar KALDIRILDI.

   ÖLÇÜ REFERANSTAN BİREBİR, PALET BU MARKANIN:
     `.pagi{gap:8px;justify-content:center;margin-top:40px}`
     `.pg{min-width:44px;height:44px;padding:0 13px;font-size:14px/700}`
     `.pagi-note{width:100%;text-align:center;font-size:12.5px;margin-top:6px}`
   ⚠ 44×44 tesadüf değil: dokunma hedefi eşiği. Küçültme.
   ===================================================================== */
.pagi{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pg{
  min-width:44px;height:44px;padding:0 13px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--slate);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  cursor:pointer;transition:.2s var(--ease);text-decoration:none;
}
/* İki koruma ŞART: bunlar olmadan aktif sayfa ve pasif oklar da imleçle
   renk değiştiriyordu — tıklanamayan bir öğenin tıklanır gibi davranması. */
.pg:hover:not([disabled]):not(.active){border-color:var(--green);color:var(--green-deep)}
.pg:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.pg.active{background:var(--tomato-deep);border-color:var(--tomato-deep);color:#fff;cursor:default}
.pg.arrow i{font-size:12px}
.pg[disabled]{opacity:.4;pointer-events:none}
.pg-dots{color:var(--muted);font-weight:700;padding:0 2px;font-size:14px;user-select:none}
/* Sayfalamanın ALTINDAKİ özet satırı: `width:100%` onu kendi satırına
   düşürür (`.pagi` sarmalı `flex-wrap` taşıyor), `margin-top` de aradaki
   boşluğu verir. İkisinden biri düşerse satır düğmelerin YANINA geçer. */
.pagi-note{width:100%;text-align:center;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:6px}
@media (max-width:640px){
  .pagi{gap:6px;margin-top:32px}
  .pg{min-width:40px;height:40px;font-size:13px;padding:0 10px}
}


/* ══════════════════════════════════════════════════════════════════════
   4 · KANON · TOKEN KATMANI — marka yuvalarını TANIMLAR ama DOLDURMAZ
   Kaynak: ~/Revenge/kanon/tokenlar.css — BAYT-ÖZDEŞ kopya, tek satır değişmedi.
   🔴 SIRA DEĞİŞMEZ: token → marka → bileşen.
   ══════════════════════════════════════════════════════════════════════ */
/* =====================================================================
   KANON — TOKEN KATMANI (marka-bağımsız)
   ---------------------------------------------------------------------
   Kaynak: dump/fit-prototip/assets/css/fit-shell.css (birincil),
           fit-type.css, 61 public sayfanın <style> blokları (ikincil).
   Yöntem: frekans. Her değerin kaç yerde geçtiği 01-tokenlar.md'de.

   BU DOSYADA MARKA RENGİ YOK. Aksan rengi `--marka-*` yuvalarından gelir;
   yuvaları `markalar/fit.css` (ya da başka bir marka dosyası) doldurur.
   Yükleme sırası:  tokenlar.css  →  markalar/<marka>.css  →  bilesenler.css

   "// DOĞRULA:" notları, kaynakta ölçülemeyen ya da çelişkili çıkan
   yerleri işaretler. Uydurulmuş değer yoktur.
   ===================================================================== */

:root{

/* ── 1 · NÖTR RENK ───────────────────────────────────────────────────
   Ölçüm: fit-shell.css :root + 61 sayfa. Değerler birebir taşındı. */

  --murekkep:#211E16;          /* Pantone Process Black C · başlık, koyu metin
                                  KAYNAKTA İKİ AD: --ink ve --slate, DEĞER AYNI */
  --murekkep-yumusak:#56514a;  /* kaynak: --slate-2 · ikincil koyu metin */
  --metin-ikincil:#717171;     /* kaynak: --muted · beyazda 4.88:1 (AA) */
  --cizgi:#ECECEC;             /* kaynak: --line · hairline ayraç */
  /* 🔴 KAYNAĞIN YAKIN-İKİZİ — `--cizgi` (#ececec) DEĞİL, bir birim koyu.
     Ölçer zeminini `--cizgi`ye bağlamak sessiz bir düzeltme olurdu;
     kaynakta iki ayrı gri var ve kanon çizileni basar. Beyar'a bildirildi:
     iki grinin birleştirilmesi bir KARAR, ajanın tercihi değil. */
  --olcer-zemin:#ececeb;       /* .fp-bar · ilerleme çubuğunun zemini (§46) */
  /* 🔴 #dcdcdc → #dddddd (2026-09-02). §5.3 bu tokeni "8 sayfa ham hex,
     kontrastı ÖLÇÜLMEDİ" diye açık kalem olarak tutuyordu. Bu dalgada
     ilk kez ölçüldü: kaynağın `.badge-card` kesikli kenarı rgb(221,221,221).
     Frekansla alınan değer bir birim şaşmış. §5.3'ün `--yer-tutucu`
     dersinin aynısı — frekans, ölçümü yenmez.
     ⚠ Tek ölçüm yerinden geliyor; başka bir yerde farklı ölçülürse
     ayrılır, birleştirilmez. */
  /* 🔴 SEÇİM OKU — GLİF, RENK DEĞİL. Kaynağın `<select>` oku 10×6'lık
     ince bir çentik (`M1 1l4 4 4-4`, gri #7E7E7E, 1.6px, yuvarlak uç).
     Kanon onu iki CSS üçgeniyle ve `currentColor`dan türeterek çiziyordu
     — DOLU KOYU bir karet, farklı konumda ve boyda. Gerekçe "kaynakta
     ham hex gömülüydü" idi ve `bilesenler.css`te sabit renk yasak (§3/2);
     ama bu bir renk kararı değil KİP değişikliğiydi ve "ikon seçimi
     kaynaktan gelir, sessizce glif değiştirilmez" kuralına aykırıydı.
     Çözüm: glif bir DEĞER olarak token katmanına taşındı — renkler
     zaten burada yaşıyor, `bilesenler.css` yalnız yuvayı çağırıyor.
     ⚠ Gri gliflerin içinde LİTERAL: data URI'ye `var()` giremez. Kaynağın
     kendi değeri, uydurulmadı.
     🔴 SLOT-2 GÖZLE BULDU: kanon AYNI SAYFADA İKİ ÇİZİM basıyordu —
     17 `.alan-secim` üçgeni + 3 `.fb-select` çentiği (Diyet'in kendi
     kabuğu, kaynakla bayt-özdeş). Doğru çizim sayfada zaten vardı. */
  --secim-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237E7E7E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Kart hover'ında çizginin KOYULAŞMIŞ adımı — ölçüldü
     (FIT `.badge-card:hover` #dddddd → #c9c9c9). `--metin-pasif-3`
     (#c8c8c8) yakın ama o bir METİN tokeni; çizgi ailesi ayrı. */
  /* 🔴 DURUM VARYANTI TABAN SANILMIŞTI — ÖLÇÜLDÜ, 2026-09-02 (§63d).
     Yukarıdaki iki tokenin ikisi de kaynağın KİLİTLİ kartından alındı:
       .badge-card.locked        kenar  #dddddd  → --cizgi-vurgu       ✅
       .badge-card.locked:hover  kenar  #c9c9c9  → --cizgi-vurgu-koyu  ✅
     İkisi de DOĞRU değer ama YANLIŞ role yazıldı: bunlar kilitli kartın
     çifti; KAZANILMIŞ kartın hover kenarı kaynakta #dcdcdc'dir
     (`.badge-card:hover`). "#dcdcdc → #dddddd" düzeltmesi de bu yüzden
     yalnız kilitli kalem için doğruydu — tabanın kendi değeri geri geldi. */
  --cizgi-vurgu-acik:#dcdcdc;  /* KAZANILMIŞ rozet kartının hover kenarı (§63d) */
  --cizgi-vurgu-2:#d6d6d6;     /* ÖLÇÜSÜZ rozet kartının noktalı kenarı (§63d) */
  --zemin-3:#efefef;           /* ölçüsüz rozetin madalyon zemini (§63d) */
  --metin-pasif-5:#b4b4b4;     /* ölçüsüz rozetin madalyon ikonu (§63d) */
  --cizgi-vurgu-koyu:#c9c9c9;
  --cizgi-vurgu:#dddddd;       /* kart hover kenarı + kesikli boş durum kenarı
                                  — kaynakta TOKEN DEĞİLDİ, 8 sayfada ham hex */
  --kontrol-kapali:#8f8a82;    /* kapalı anahtar rayı — Beyar kararı, 2026-09-01.
                                  Kaynakta tokensizdi (fit-shell.css `.tgl .tk`).
                                  Beyazla 3.43:1 → WCAG 1.4.11 (3:1) GEÇER.
                                  Kabuk bu değeri ölçerek seçmiş ve #cfcac1'i
                                  (1.63:1) elemiş; profil-v1'in kendi anahtarı
                                  #dcd8d0 (1.42:1) kullanıyor — bkz. 02 §4. */
  /* 🔴 DEVRE DIŞI METİN — kaynakta TOKENSİZ ham hex (`.fk-tar-grid
     button:disabled{color:#c4c4c4}`). `--metin-ikincil` (#717171) de
     `--yer-tutucu` (#6f6f6f) de DEĞİL, üçüncü bir gri. Beyazla 2.02:1 —
     AA'nın altında ama `disabled` olduğu için WCAG 1.4.3 istisnasına
     giriyor (devre dışı denetimler kontrast eşiğinden muaf).
     Uydurulmadı, ölçüldü (slot-2). */
  /* ── KADEME KARTI RENKLERİ (§55) ────────────────────────────────
     🔴 YEDİ HAM HEX, BEYAR KARARI 2026-09-01: "yeni token yuvası aç,
     yuvarlama yok." Hiçbiri mevcut bir kanon değerine EŞİT değil —
     yakın ama eşit değil (slot-3 tek tek ölçtü):
       #fafafa ↔ --zemin  #f9f9f9        bir birim uzak
       #e4e4e4 ↔ --cizgi  #ECECEC ile --cizgi-vurgu #dcdcdc ARASINDA
       #FBF3DC ↔ --altin-zemin #fff6e6   eşit değil
       #B8860B ↔ --altin-metin #8a6410   eşit değil
     §5.3'ün dersi burada tersinden geçerli: yakınlık aynılık değildir. */
  --kademe-notr-zemin:#fafafa;    /* ücretsiz kademe kartının zemini */
  --kademe-notr-cizgi:#e4e4e4;    /* ve kenarı */
  --kademe-notr-cip:#ebebeb;      /* ücretsiz kademenin ikon çipi */
  --kademe-notr-cip-metin:#6b6b6b;
  --kademe-altin-cip:#FBF3DC;     /* en üst kademenin ikon çipi */
  --kademe-altin-cip-metin:#B8860B;
  --tablo-bas-zemin:#fafbf9;      /* karşılaştırma tablosunun başlık zemini
                                     — yeşile çalan beyaz, `--zemin` DEĞİL */

  /* ── BİLDİRİM AKIŞI (§59) ─────────────────────────────────────────
     🔴 Kaynakta DÖRDÜ DE HAM HEX, tokeni yok (slot-1 B2):
       .ntr.unread              #EDF8F2   okunmamış satır zemini
       .ntr.unread:hover        #DEF2E7
       [data-op=del]:hover      #a2261a / #e8cfcb
     İlk ikisi FIT yeşilinin çok açık adımları → MARKA YUVASI, çünkü
     Diyet'in yeşili başka. Son ikisi tehlike ailesinden ama
     `--tehlike` (#b3261e) ve `--tehlike-cizgi-yumusak` (#f3cdc0)
     DEĞİL — ayrı adımlar; marka-nötr katmanda duruyorlar. */
  --bildirim-yeni:var(--marka-bildirim-yeni);
  --bildirim-yeni-2:var(--marka-bildirim-yeni-2);
  --bildirim-sil:#a2261a;
  --bildirim-sil-cizgi:#e8cfcb;

  --zemin-2:#f4f4f3;           /* sohbet gün ayracının zemini (§62) — `--zemin`
                                  (#f9f9f9) DEĞİL, ölçülen ayrı bir adım */
  /* ── ÜÇ AYRI PASİF GRİ (§63) ──────────────────────────────────────
     🔴 ÜÇÜ DE AYRI DEĞER, ölçüldü (slot-2) ve hiçbiri diğerine EŞİT
     değil. Tek yuvaya indirmek §5.3'ün dersini çiğnerdi ("yakınlık
     aynılık değildir"); üç yuva açıldı, hepsi kaynakta ham hex'ti.
       #c4c4c4  devre dışı takvim günü      (2.02:1 · WCAG 1.4.3 istisnası)
       #bdbdbd  kilitli basamağın ikonu
       #c8c8c8  basamağın kilit simgesi
       #c2c2c2  kilitli rozetin ikonu
     Dördü de DEVRE DIŞI/KİLİTLİ durum işareti — kontrast eşiğinden muaf. */
  --metin-pasif:#c4c4c4;
  --metin-pasif-2:#bdbdbd;
  --metin-pasif-3:#c8c8c8;
  --metin-pasif-4:#c2c2c2;
  --metin-ucuncul:#c7c7c7;     /* son arama satırının ok işareti (§60) —
                                  kaynakta ham hex, `--metin-pasif` DEĞİL */
  --yer-tutucu:#6f6f6f;        /* input placeholder — Beyar kararı, 2026-09-01.
                                  Kabuk form kitinin ölçtüğü değer: --zemin
                                  üstünde 4.77:1 (AA). Kanonun ilk turunda
                                  frekansla alınan #a7a7a7 (6 sayfa) aynı
                                  zeminde 2.29:1 idi — kitin ölçümle ELEDİĞİ
                                  değer. Frekans yanlış cevap vermişti;
                                  #a7a7a7 kanondan DÜŞTÜ, sapma listesinde. */
  --dip-metin:rgba(255,255,255,.88);      /* dip gövde metni */
  --dip-link:rgba(255,255,255,.92);       /* dip bağlantısı */
  --dip-alt-metin:rgba(255,255,255,.84);  /* dip alt satırı (telif) */
  --dip-cizgi:rgba(255,255,255,.20);      /* dip ayracı */
  /* KOYU YÜZEY ÜSTÜNDEKİ AYRAÇ VE ÜÇÜNCÜL METİN (§63 · R7) — dip
     rampasının kardeşi ama AYRI: dip ayracı .20 alfa, koyu kartınki .12;
     dip metni .84, kartınki .74. Dördü de ölçüldü, eşitlenmedi. */
  --koyu-cizgi:rgba(255,255,255,.12);     /* koyu kart ayracı ve kenarı */
  --koyu-metin-6:rgba(255,255,255,.74);   /* koyu kartın ikincil metni */
  --kagit:#ffffff;             /* kaynak: --paper / --bg-white (aynı değer) */
  --zemin:#f9f9f9;             /* kaynak: --bg / --bg-cream (aynı değer)
                                  ⚠ DOĞRULA: fit-shell.css'te tanımlı ama
                                  hiçbir kural okumuyor (0 kullanım) */
  --krem-2:#F7F1E6;            /* kaynak: --cream-2 · 6 kullanım */

/* ── 2 · KOYU ZEMİN AİLESİ ───────────────────────────────────────────
   Banner / hero / footer gibi koyu yüzeyler ve üstlerindeki metin.
   Kaynakta hiçbiri token değildi; 21–26 sayfada ham hex olarak geçiyor. */

  /* 🔶 BU ÜÇÜ MARKA YUVASI OLDU (2026-09-01 · diet ölçümü).
     İlk turda nötr sanmıştım. dump/diet ölçüldüğünde ayrıştıkları görüldü:
     Fit'in koyu yüzeyi SICAK siyah (#211E16), Diet'inki YEŞİLE ÇALAN
     siyah (#15241c, 14 sayfa); koyu zemin metni de öyle (#cfc8be ↔
     #bcd0c4, 43 sayfa). Yani koyu yüzey markanın parçası, nötr değil.
     Değerleri markalar/<marka>.css doldurur. */
  /* 🔴 ÜÇÜNCÜ KOYU ADIM — gradyanın YEŞİLE ÇALAN ucu (§63 · R7).
     Koyu özet kartı `linear-gradient(160deg, X, --koyu-zemin)` basıyor ve
     X ne `--koyu-zemin` (FIT #211E16) ne `--koyu-zemin-2` (#1b1913) —
     ölçülen rgb(15,47,30) = #0f2f1e, ikisinden de YEŞİL. Yani markanın
     koyu tabanının üçüncü adımı; uydurulmadı, render edilmiş DOM'dan
     okundu (slot-2). */
  --koyu-zemin-yesil:var(--marka-koyu-zemin-yesil);
  --koyu-zemin:var(--marka-koyu-zemin);
  --koyu-metin:var(--marka-koyu-metin);
  --koyu-metin-2:#a9a297;      /* koyu zeminde üçüncül metin · 4 sayfa
                                  // DOĞRULA: yakın komşuları var (#9a9389 4
                                  sayfa · #b8afa3 4 sayfa · #b7b0a6 3 sayfa);
                                  hangisinin kanon olduğu ölçümle ayrışmadı */
  --koyu-metin-ust:#e9e2d6;
  /* ── KOYU ZEMİN RAMPASININ DEVAMI (§61) ───────────────────────────
     🔴 Giriş panosunda ALTI ham hex ölçüldü (slot-1) ve hiçbirinin
     tokeni yoktu. §27'nin dip rampası (`--dip-metin` ailesi) aynı sorunu
     çözmüştü; burada da aynı yol: koyu görselin üstündeki metin
     kademeleri yuva alıyor. Aksan tarafı MARKA yuvası, nötr tarafı
     doğrudan — ikisi de ölçülen değer, uydurma yok. */
  --koyu-metin-3:#e7edf1;      /* pano giriş metni */
  --koyu-metin-4:#f3efe8;      /* avantaj satırı */
  --koyu-metin-5:#f0efec;      /* rozet ipucu BALONUNUN kendi rengi (§63) */
  --koyu-metin-7:#c9c7c2;      /* balonun GÖVDE metni — balondan bir adım soluk
                                  🔴 #f0efec → #c9c7c2 (2026-09-02, slot-2).
                                  İlk değer balonun BAŞLIĞINDAN (`b`) okunmuştu;
                                  başlık `--kagit`, gövde ondan bir adım soluk.
                                  Ölçülen: rgb(201,199,194). Balonun zemini
                                  `--murekkep` (#211E16) — kontrast 9.9:1. */
  --koyu-aksan:var(--marka-koyu-aksan);        /* h2 vurgusu */
  --koyu-aksan-2:var(--marka-koyu-aksan-2);    /* üst etiket */
  --koyu-aksan-zemin:var(--marka-koyu-aksan-zemin);  /* avantaj ikon dairesi */    /* üst bant metni · fit-shell.css'te 7 kez ham */

  /* ── DİP (footer) METİN RAMPASI ─────────────────────────────────────
     🔴 İKİ MARKA AYRIŞIYOR, ölçüldü (2026-09-01, render edilmiş DOM):
       fit  → beyazın alfası:  .88 gövde · .92 link · .84 alt · .20 çizgi
       diet → mavi-gri hex:    #aebcc6 · #9fb0bc · #7e8e9a
     Dip zemini her iki markada da `--aksan-koyu`; üstündeki metin FIT'te
     zeminin kendi tonunu taşıyor (alfa), Diet'te ayrı bir mavi-gri
     rampa. Kanon FIT'in yolunu alır: alfa, zemin markadan markaya
     değişse de okunurluğu koruyor; sabit mavi-gri yeşil zeminde
     markanın dışına düşüyordu. */    /* üst bant metni · fit-shell.css'te 7 kez ham */

/* ── 3 · DURUM RENKLERİ ──────────────────────────────────────────────
   Tehlike ve uyarı kaynakta token; hesabim-v1 :root'unda tanımlı,
   sonradan fit-shell.css'e taşınmış. Pro/altın ailesi TOKEN DEĞİLDİ. */

  --tehlike:#b3261e;                     /* kaynak: --hs-danger */
  --tehlike-koyu:#8c1d17;                /* kaynak: --hs-danger-dark
                                            // DOĞRULA: 3 sayfa #8c1d18 (son
                                            hane farkı) kullanıyor */
  /* Tehlike yıkamasının İKİNCİ adımı — bandın ikon çipi, gövdeden bir
     tık koyu (§61b `.serit-ikon`, ölçüldü). */
  --tehlike-yikama-2:#fbdcd8;
  --tehlike-yikama:#fdecea;              /* kaynak: --hs-danger-tint
                                            // DOĞRULA: giris-v1 #fdeceb yazıyor */
  --tehlike-cizgi:rgba(179,38,30,.34);   /* kaynak: --hs-danger-line */
  --tehlike-cizgi-yumusak:#f3cdc0;       /* uyarı kutusu kenarı · 6 sayfa, ham */
  --tehlike-cizgi-ozet:#efc2bd;          /* form düzeyi hata özetinin kenarı (§3
                                            `.alan-ozet`) — kaynak `.fk-summary`,
                                            destek-v1.html:158. `--tehlike-cizgi-
                                            yumusak` DEĞİL: ölçüldü, iki ayrı
                                            değer ve ikisi de kullanımda. */

  --uyari:#8a4b00;                       /* kaynak: --hs-warn */
  --uyari-yikama:#fdf3e4;                /* kaynak: --hs-warn-tint */
  --uyari-cizgi:rgba(138,75,0,.30);      /* kaynak: --hs-warn-line */

  /* ALTIN / KEHRİBAR AİLESİ — kaynakta tokensiz, ÜÇ ROLE birden hizmet
     ediyor. 2. adımda (hesap alanı) doğrulandı, `--pro-*` adından
     `--altin-*`a çevrildi çünkü "Pro" rolün yalnız biri:
       1) Pro rozeti      `.hub-pro` · `.pro-pill`
       2) BEKLEYEN DURUM  `.fp-badge.wait`
       3) yumuşak uyarı   `.ba-warn` · `.ba-mapc.is-out li i`
     `--uyari` ailesiyle BİRLEŞTİRİLMEDİ — değerler farklı, ikisi de
     bağımsız olarak ≥3 sayfada. */
  --altin-metin:#8a6410;       /* 9 sayfa */
  --altin-cizgi:#e0bc63;       /* 7 sayfa
                                  // DOĞRULA: `.fp-badge.wait` aynı rolde
                                  #e8d5a8 kullanıyor (5 sayfa). İki değer,
                                  tek rol; ölçüm ayırmadı. */
  --altin-zemin:#fff6e6;       /* 5 sayfa */

  /* ── KART ŞEMASI RENKLERİ — MARKA DEĞİL ───────────────────────────
     Visa'nın laciverti ve Mastercard'ın kırmızısı kart şemasının kendi
     kurumsal rengidir; DadaDiet'e ya da DadaFit'e göre DEĞİŞMEZ. Bu
     yüzden marka katmanında değil, marka-nötr katmanda duruyorlar.
     Ölçüm: slot-3 (odemelerim/kartlar) — kaynakta ham hex, token yoktu. */
  --kart-semasi-visa:#1a1f71;
  --kart-semasi-mc:#c7001b;


  /* ── DURUM HAPI RENKLERİ — §28 ──────────────────────────────────────
     Kaynak `.pstat` (fit-shell.css:1498-1503) · destek modülünde ölçüldü
     (2026-09-01). DÖRT DURUM DÖRT AYRI ÇİFT: kaynağın kendi şerhi
     "iki durum aynı rozeti paylaşamaz" diyor (destek-v1.html §Ö25).

     İkisi var olan aileye bağlandı, ikisi yeni:
       bekleyen → `--uyari` ailesi   (#8a4b00 / #fdf3e4 — BİREBİR aynı çift)
       çözülen  → marka yuvası       (--aksan-koyu / --aksan-yikama)
     Kalan ikisinin değerleri kaynakta ham hex; uydurulmadı, ölçüldü. */

  /* ✅ §5.1 · A1 ONAYLANDI (Beyar, 2026-09-01) — petrol rampası.
     "Açık talep" hapı DadaAkademi'nin petrolünü kullanır. Rampanın bu
     ekranın kullandığı İKİ basamağı da kaynakta ölçülü:
       #006072 (`--eko-akademi`, iki markanın :root'unda da tanımlı)
       #e6f1f4 (`fit-shell.css:1500` + `destek-talebi-detay-v1.html:66`)
     Kaynağın kendi şerhi kontrastı da yazmış: "≈6.3:1" (bağımsız hesap
     6.26:1 · AA ✓). A1 hover adımını ÜRETMEZ; `--c-petrol-deep` petrolün
     kendisine düşer (markalar/fit.css · eski ad köprüsü).
     Envanter ve gerekçe: kanon/petrol-envanter.md */
  /* 🔴 TANIMSIZ TOKEN — `bilesenler.css:3500` (`.rozet-sol`) bunu
     kullanıyordu ama :root'ta HİÇ tanımlı değildi. Tanımsız bir özel
     özellik bildirimi "hesaplanmış değer anında geçersiz" yapar ve
     `color` MİRASA düşer — `.rozet-sol` sessizce `--eko-akademi`
     (#006072) çiziliyordu, ölçülen #3f6d78 değil.
     ⚠ `s2-token-denetim.mjs` bunu GÖRMEZ: o, :root'ta BİLDİRİLEN
     tokenlerin çözülüp çözülmediğine bakıyor; burada eksik olan
     bildirimin kendisi. Denetime "kullanılan ama bildirilmeyen" taraması
     eklenmeli. Değer HANDOFF §2'de bu dalgada ölçülmüş diye duruyordu,
     kanona hiç girmemiş. */
  --eko-akademi-2:#3f6d78;                     /* petrol rampasının AÇIK adımı */
  /* Rozet ilerleme çubuğunun dolgusu petrol rampasının PARLAK adımıyla
     başlar (kaynak `.b-prog span`: linear-gradient(90deg,#4aa6b6,#006072)).
     Marka-nötr DEĞİL sayılmaz — petrol ailesi ekosistem rengidir, markadan
     türemez (§5.1'in kaydı). Ölçülen değer, uydurulmadı. */
  --eko-akademi-3:#4aa6b6;                     /* petrol rampasının PARLAK adımı (§63d) */
  --durum-acik-metin:var(--eko-akademi);        /* #006072 · beyazla 7.20:1 */
  --durum-acik-zemin:var(--eko-akademi-yikama); /* #e6f1f4 · metinle 6.26:1 */

  --durum-bekleyen-metin:var(--uyari);          /* #8a4b00 — kaynakla birebir */
  --durum-bekleyen-zemin:var(--uyari-yikama);   /* #fdf3e4 — kaynakla birebir */

  /* Kapalı/pasif hap zemini. Kaynakta 3 dosyada aynı rolde ham hex
     (`fit-shell.css:1503` · `odemelerim-v1.html:87` · `destek-talebi-
     detay-v1.html:68`) ve kontrastı İKİ dosyada ayrıca yazılmış:
     "#56514a / #f1f1f1 6.96:1". `--zemin` (#f9f9f9) DEĞİL — hap kendi
     zemininden ayrışsın diye bir adım koyu, ölçülen fark gerçek. */
  --durum-kapali-zemin:#f1f1f1;                 /* metinle 6.96:1 */
  --durum-kapali-metin:var(--murekkep-yumusak); /* #56514a */
  /* 🔴 Aynı kaynak satırının KENARI (`odemelerim-v1.html:87`
     `.od-pill.off{background:#f1f1f1;border:1px solid #e2e2e2}`). Zemin
     alınmış, kenar atlanmıştı; §45 onun yerine `transparent` yazıyordu ve
     hap KENARSIZ çiziliyordu (Beyar gözle yakaladı, 2026-09-02). */
  --durum-kapali-cizgi:#e2e2e2;                 /* zeminle bir adım koyu */

  /* BAŞARI RENGİ YOK. Kaynakta ayrı bir "başarı" tokeni bulunamadı;
     olumlu durumlar marka yeşilini kullanıyor (bkz. markalar/fit.css).
     // DOĞRULA: marka yeşili ile durum yeşilinin ayrışması gerekiyorsa
     bu ayrım kaynakta yapılmamış, kanon da uydurmuyor. */

/* ── 4 · MARKA YUVALARI (değeri markalar/*.css doldurur) ─────────────
   Burada DEĞER YOK, yalnız anlamsal yuva → marka rampası eşlemesi. */

  --aksan:var(--marka);                    /* vurgu, ikon, çip, odak halkası */
  --aksan-koyu:var(--marka-koyu);          /* birincil düğme zemini (AA) */
  --aksan-koyu-2:var(--marka-koyu-2);      /* birincil düğme hover */
  --aksan-murekkep:var(--marka-murekkep);  /* zorunlu alan yıldızı, gradyan ucu */
  --aksan-yikama:var(--marka-yikama);      /* ikon çipi, açık band zemini */
  --aksan-yikama-2:var(--marka-yikama-2);  /* kabuk bileşeni yıkaması */
  --aksan-cizgi:var(--marka-cizgi);
  /* Aksanın alfalı kenarı — kaynak `.od-git` gibi kalemlerde
     `rgba(<marka>,.30)` yazıyor; marka rengi değiştiğinde birlikte
     değişsin diye marka yuvası (§47). */
  --aksan-cizgi-2:var(--marka-cizgi-2);
  /* Ücretli kademe rozetinin zemini — kaynak gradyan (§49). */
  --paket-rozet-zemin:var(--marka-paket-rozet);
  /* Sayaç rozetinin alfalı kenarı — kaynak `rgba(<marka>,.25)` (§34). */
  --aksan-cizgi-3:var(--marka-cizgi-3);
  --aksan-cizgi-4:var(--marka-cizgi-4);        /* öne çıkan kademe kartının kenarı (§55) */
  --aksan-cizgi-5:var(--marka-cizgi-5);        /* açık durum hapının kenarı (§45 · kaynak rgba(marka,.24)) */
  --aksan-golge:var(--marka-golge-aksan);
  --aksan-golge-2:var(--marka-golge-aksan-2);   /* basamak hapının gölgesi (§63) */      /* kademe bayrağının gölgesi (§55) */
  --aksan-yikama-5:var(--marka-yikama-5);      /* tablo vurgulu sütun zemini (§55) */

  /* ── BANDIN ARAÇ DÜĞMELERİ — koyu zeminde cam kipi (§34) ───────────
     Dört değer de BEYAZIN alfası; markadan bağımsız ama `bilesenler.css`
     alfa yazamadığı için token katmanında duruyorlar. Ölçüldü (slot-1). */
  /* Kapak düzenleme düğmesinin cam zemini — görselin üstünde okunur olsun
     diye neredeyse opak beyaz (§51, ölçüldü). */
  --kapak-duzenle-zemin:rgba(255,255,255,.93);
  /* Kod hanesinin odak halkası — aksanın düşük alfası (§54). */
  --aksan-halka:var(--marka-halka);
  --aksan-halka-2:var(--marka-halka-2);   /* okunmadı beneğinin halkası (§59) */
  --aksan-halka-3:var(--marka-halka-3);   /* YENİ kazanılan rozet kartının 3px halkası (§63d) */
  --aksan-golge-3:var(--marka-golge-aksan-3);  /* şimdiki kademe kartının gölgesi (§63d) */
  --aksan-nisan-dolu:var(--marka-nisan-dolu);  /* şimdiki kademenin madalyon dolgusu (§63d) */
  /* Cam yüzeyler — yapışkan ray ve kart rozeti (§60). Beyazın alfası;
     markadan bağımsız ama `bilesenler.css` alfa yazamıyor. */
  --cam-zemin:rgba(255,255,255,.93);
  --cam-zemin-2:rgba(255,255,255,.95);
  /* Sonuç kartı görselinin dip perdesi — metin okunur kalsın diye. */
  --kart-perde:linear-gradient(180deg, rgba(33,30,22,0) 55%, rgba(20,18,12,.34) 100%);
  --bant-arac-zemin:rgba(255,255,255,.12);
  --bant-arac-kenar:rgba(255,255,255,.22);
  --bant-arac-zemin-2:rgba(255,255,255,.20);
  --bant-arac-kenar-2:rgba(255,255,255,.38);
  /* Saydam header (§27 `.tepede`) — kaynak `fit-shell.css:378` `:429`. */
  --bant-arac-kenar-2b:rgba(255,255,255,.14);   /* header alt çizgisi */
  --bant-arac-zemin-3:rgba(255,255,255,.10);    /* ikon düğmesi zemini */
  --bant-arac-kenar-3:rgba(255,255,255,.30);    /* ikon düğmesi kenarı */        /* aksan-nötr hairline */
  --aksan-parlak:var(--marka-parlak);      /* koyu zeminde okunur aksan metni */

/* ── 5 · TİPOGRAFİ ───────────────────────────────────────────────────
   Tek yüz: Gilroy. Medium(500) taban; 700/800 aynı dosyaya (ExtraBold)
   çözülür — kaynakta kayda geçmiş kusur, kanon da bunu miras alır. */

  --yuz:"Gilroy",system-ui,sans-serif;
  /* Tek aralıklı yüz — kod, sır ve kurtarma kodları için (§54).
     Sistem yığını; kanon dışarıdan yüz yüklemez. */
  --yuz-tek:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* AĞIRLIK — ölçülen dört basamak (500 taban · 600 · 700 · 800) */
  --agirlik-govde:500;
  --agirlik-orta:600;
  --agirlik-kalin:700;
  --agirlik-ekstra:800;
  --agirlik-siyah:900;   /* segment okunun ağırlığı (§61b) — ölçüldü */

  /* ÖLÇEK — kaynakta modüler ölçek YOK, 0.5px adımlı bir merdiven var.
     Değerler frekans sırasına göre alındı; adlar rol adı DEĞİL boy adıdır,
     çünkü kaynakta rol↔boy eşlemesi bileşen bazında değişiyor.
     TABAN GÖVDE ÖLÇÜSÜ YOK: body{} font-size taşımıyor, tarayıcı 16px'i
     miras kalıyor ve her bileşen kendi ölçüsünü yazıyor. */
  --yazi-9:9px;        /* 44 kullanım — mikro etiket */
  --yazi-10:10px;      /* 51 */
  --yazi-10-5:10.5px;  /* 49 */
  --yazi-11:11px;      /* 198 */
  --yazi-11-5:11.5px;  /* 141 */
  --yazi-12:12px;      /* 294 — eyebrow / etiket standardı */
  --yazi-12-5:12.5px;  /* 347 — üst bant, meta satırı · EN SIK */
  --yazi-13:13px;      /* 323 — çip, yardımcı metin */
  --yazi-13-5:13.5px;  /* 230 — düğme ikincil */
  --yazi-14:14px;      /* 262 — kart gövdesi */
  --yazi-14-5:14.5px;  /* 87  — .btn standardı */
  --yazi-15:15px;      /* 176 */
  --yazi-15-5:15.5px;  /* 55  — .lead / banner alt metni */
  --yazi-16:16px;      /* 91 */
  --yazi-16-5:16.5px;  /* 43 */
  --yazi-17:17px;      /* 47 */
  --yazi-17-5:17.5px;  /* sohbet panelinin başlığı (§62) */
  --yazi-18:18px;      /* 73  — h3 en sık */
  --yazi-19:19px;      /* 33 */
  --yazi-20:20px;      /* 37 */
  --yazi-21:21px;      /* 18 */
  --yazi-22:22px;      /* 23 */
  --yazi-23:23px;      /* 22 */
  --yazi-24:24px;      /* 20 */
  --yazi-25:25px;      /* 17  — banner h1 @≤640 — ÖLÇÜLEN */
  --yazi-26:26px;      /* 14 */
  --yazi-29:29px;      /* kimlik kartındaki ad — kaynak `.fp-kimlik-id h1`
                          (ölçüldü 2026-09-01; ilk turda 28'e yuvarlanmıştı) */
  --yazi-30:30px;      /* 25  — .sec-head h2 @≤1024 */
  --yazi-31:31px;      /* banner h1 @≤900 — ÖLÇÜLEN (kırılım 901, 1024 DEĞİL) */
  --yazi-32:32px;      /* koyu özet kartının büyük sayısı (§63 · R7) */
  --yazi-34:34px;      /* .sec-head h2 masaüstü */
  /* 🔴 BANNER H1 MERDİVENİ — ÖLÇÜLDÜ, 42 / 31 / 25 (02 §36 · B43).
     Aşağıdaki 39 · 33 · 27 kaynakta GERÇEKTEN YAZILI ama banner başlığını
     ONLAR ÇİZMİYOR: `fit-shell.css:2618` `@media(min-width:901px)` içinde
     `body[data-fit-hero-kind] .lib-top h1{font-size:42px}` onları eziyor ve
     `data-fit-hero-kind`i her banner sayfasında kabuk JS'i basıyor. B25'in
     birebir tekrarı — CSS okuyup durmak yanlış değer verir.
     ⚠ İKİ AYRI KIRILIM NOKTASI, karıştırılmasın:
        tipografi  min-width:901  → 42 / 31 / 25
        yükseklik  max-width:1024 → 544 / 607 / 587
     901–1024 arasında bant 607px yüksek ama başlık hâlâ 42px. */
  --yazi-36:36px;      /* giriş panosunun başlığı (§61) */
  --yazi-42:42px;      /* banner h1 masaüstü — ÖLÇÜLEN değer (lh 1.12 · ls -.03em) */
  --yazi-51:51px;      /* baş harf avatarı — kaynak diet `.pf-ava.is-harf`
                          (planim.css:402). Kardeş markada karşılığı YOK:
                          orada avatar fotoğraf, harf kipi hiç doğmuyor. */      /* 14  — ana sayfa tam-ekran hero h1 */

  /* SATIR YÜKSEKLİĞİ */
  --satir-tek:1;
  --satir-baslik:1.12;   /* h1–h4 kabuk kuralı */
  --satir-baslik-2:1.3;  /* durum ekranı h2 — kaynak `.dr-lead h2` (§35) */
  --satir-sik-2:1.25;    /* öneri kalemi başlığı — tek satır, sıkı (§60) */
  --satir-sik:1.45;
  --satir-orta:1.5;
  --satir-govde:1.55;    /* body kabuk kuralı · en sık */
  --lh-body:var(--satir-govde);
  /* // TÜRETİLDİ: destek-v1 `.qa-head{line-height:var(--lh-body)}` yazıyor,
     token hiçbir yerde tanımlı değildi. Adı "body" diyor, kabuk `body`
     kuralı 1.55 → --satir-govde. Değer uydurulmadı, eşleştirildi. */
  --satir-genis-2:1.65;  /* plan içi boş durum metni — kaynak `.fpx-bos p` (§48) */
  --satir-genis:1.6;     /* sayfa katmanında en sık */
  /* 🔴 KUTULU BİLGİ NOTUNUN SATIR ARASI — kaynağın KENDİ ölçülmüş kararı
     (`fit-shell.css:3831-3841`, 17 satırlık gerekçesiyle): not kutusunun
     ölçü sınırı kalkınca satır uzuyor, "uzun ölçü → daha çok interlinye"
     kuralıyla 1.6'dan 1.72'ye çıkarılmış. Kapsam YALNIZ kutulu bilgi/uyarı
     notu; akan gövde metinleri `--measure`da kalıyor. */
  --satir-not:1.72;
  --satir-bol:1.7;       /* akordeon cevap metni — kaynak `.qa-body p`
                            (ölçüldü 2026-09-01; merdivende karşılığı
                            yoktu, `--satir-genis`e yuvarlanıyordu) */

  /* HARF ARALIĞI */
  --aralik-baslik:-.02em;  /* h1–h4 kabuk kuralı */
  --aralik-baslik-2:-.03em;/* banner h1 — kaynak `body[data-fit-hero-kind] h1` (§34) */
  --aralik-sik:-.01em;
  --aralik-genis:.02em;
  --aralik-versal:.06em;   /* versal başlık aralığı — tablo başlığı · künye dt ·
                              çip şeridi başlığı; üç yerde tekrarlanan ölçülmüş değer */
  --aralik-sir:.12em;      /* 2FA sırrının harf aralığı — kaynak `.tfa-sir code` */
  --aralik-ince:0.105px;   /* rozet madalyonunun ince izi (§63)
                              🔴 .0105em → 0.105px (2026-09-02).
                              `letter-spacing` bildirildiği yerde UZUNLUĞA
                              çözülür ve öyle miras alınır; em olarak
                              yazılınca her çocuk kendi punto'suna göre
                              yeniden hesaplanıyordu ve `.rozet-not`
                              (10.5px) 0.11 çıkıyordu — ölçüm 0.105 diyor.
                              Uzunluk yazılınca üç kalem de birebir. */
  --aralik-etiket-3:.05em; /* basamak hapı ve rozet kademesi (§63) */
  --aralik-versal-3:.07em; /* karşılaştırma tablosunun grup satırı — kaynak `.cmp-group th` */
  --aralik-versal-2:.08em; /* kanal matrisi başlık satırı — kaynak `.ntf-row.head span` */
  --aralik-etiket-2:.03em; /* küçük ikonlu durum hapı — kaynak `.hs-pill` (§45) */
  --aralik-vurgu:.04em;    /* dikey kenar sekmesi — kaynak `.feedback-tab`
                              (fit-shell.css:1037 · diet dd-shell:1078, aynı) */
  --aralik-etiket:.16em;   /* .eyebrow — versal + geniş aralık */
  --aralik-muhur:.1em;     /* kapak mührü — versal hap (kaynak:
                              fit-shell.css:4121 `.fp-kapak-mark`) */

  --olcu:78ch;             /* kaynak: --measure · akan metin satır ölçüsü */

/* ── 6 · BOŞLUK ──────────────────────────────────────────────────────
   4px TABANLI ÖLÇEK — Beyar kararı, 2026-09-01.
   Kaynakta ölçek YOKTU: 1–180px arasında 60 farklı değer, 6282 bildirimin
   yalnızca %2'si token. Ölçek türetilmedi, KARARLA konuldu.
   Yuvarlama kuralı: en yakın kademe, eşitlikte YUKARI (14→16, 6→8, 10→12).
   Tam eşleme tablosu 01-tokenlar.md §3.3'te (eski değer · adet · yeni kademe).
   4px altı (1·2·3px) çizgi/kenarlık kalınlığıdır, ölçeğe girmez → §6b. */

  --bosluk-4:4px;
  --bosluk-8:8px;
  --bosluk-12:12px;
  --bosluk-16:16px;
  --bosluk-20:20px;
  --bosluk-24:24px;
  --bosluk-32:32px;
  --bosluk-40:40px;
  --bosluk-48:48px;
  --bosluk-64:64px;

/* ── 5a-2 · ARA KADEMELER — 2px adım ─────────────────────────────────
   🔴 ÖLÇÜMLE EKLENDİ (2026-09-01). Yukarıdaki 4px ölçeği bir KARARDI ve
   ölçüm onu çürüttü: ilk ekran kardeş markanın yanına konduğunda 45
   hesaplanmış değerden 20'si YALNIZ yuvarlamadan sapıyordu. Sapmalar
   tek tek küçük (1-2px) ama üst üste binince kart dolgusu, kırıntı
   boşluğu ve dikey ritim gözle görülür kayıyordu.

   Kaynağın gerçeği 2px adımlıdır, 4px değil — kanıt kaynağın kendi
   kullandığı değerler: 3 · 7 · 9 · 11 · 13 · 14 · 15 · 18 · 22 · 26 ·
   30 · 38. Bunların hiçbiri 4px kademesine düşmüyor ve hepsi kaynakta
   ölçülmüş, tekrarlanan değerler.

   ⚠ 4px KADEMELERİ HÂLÂ TERCİH EDİLİR. Bu ara kademeler yalnız
     KAYNAKTA ÖLÇÜLMÜŞ bir değeri birebir aktarmak için kullanılır;
     yeni bir boşluk uydururken 4px merdiveni geçerlidir. */

  --bosluk-2:2px;   /* ana menü kalem arası — kaynak `.nav{gap:2px}` */
  --bosluk-44:44px;   /* dip ızgarası satır arası — kaynak `.foot-grid` */
  --bosluk-3:3px;
  --bosluk-10:10px;
  --bosluk-5:5px;
  --bosluk-6:6px;
  --bosluk-7:7px;
  --bosluk-9:9px;
  --bosluk-11:11px;
  --bosluk-13:13px;
  --bosluk-14:14px;
  --bosluk-15:15px;
  --bosluk-17:17px;
  --bosluk-18:18px;
  --bosluk-22:22px;
  --bosluk-26:26px;
  --bosluk-28:28px;
  --bosluk-30:30px;
  --bosluk-34:34px;
  --bosluk-36:36px;          /* satır içi seçimin sağ dolgusu — okun yeri (02 §36) */
  --bosluk-38:38px;

/* ── 5b · KESİKLİ KENAR ──────────────────────────────────────────────
   Boş durum kutusunun kenarı. Kaynak `1.5px dashed #ddd` yazıyordu —
   kalınlık ölçek dışıydı, renk tokensizdi. Beyar kararı (2026-09-01):
   2px, renk tokenlı. #ddd ile --cizgi-vurgu (#dcdcdc) arasında bir birim
   fark var; yeni değer üretilmedi, var olan token kullanıldı. */

  --kesikli-kenar:var(--cizgi-2) dashed var(--cizgi-vurgu);

/* ── 6b · ÇİZGİ / KENARLIK KALINLIĞI ─────────────────────────────────
   Ölçek dışı. Bunlar boşluk değil, çizgidir; yuvarlanmadı.
   Kaynakta 381 bildirim (1px:59 · 2px:198 · 3px:124). */

  --cizgi-1:1px;   /* hairline — border standardı */
  --cizgi-2:2px;   /* vurgu çizgisi, aktif sekme altı, .eyebrow::before */
  --cizgi-3:3px;   /* odak halkası kalınlığı (bkz. §11) */

/* ── 6c · BÖLÜM VE KAP ───────────────────────────────────────────────*/

  --bosluk-60:60px;
  --bosluk-50:50px;          /* giriş hero'sunun DAR EKRAN alt payı (§61) */
  --bosluk-74:74px;          /* giriş hero'sunun alt payı (§61) */          /* arama sonuç bandının alt payı (§60) */
  --bolum-nefes:74px;        /* 🔴 64 → 74 (2026-09-01 · 02 §36 · B41).
                                Kaynak `--sec-pad:74px` — dadadiet.com/beslenme'den
                                ÖLÇÜLMÜŞ bir sabit (74·74·74·44 ritmi). İlk tur
                                onu 4px ölçeğine yuvarlamıştı ve kendi şerhi
                                "geri almak tek satır" diyordu. B22 o kararı
                                zaten çürütmüştü; yuvarlama bugüne kadar HİÇ
                                ölçüme girmedi çünkü üç destek ekranı da
                                `.zebra>.bolum` üzerinden `--bolum-nefes-sik`
                                okuyor. Durum ekranlarının düz `.bolum`u ve
                                arama ekranının `.fs-pop`u ilk tüketicileri. */
  --bolum-nefes-sik:32px;    /* kaynak: --sec-pad-sm 32px — zaten kademede */
  --kap-genislik:1240px;     /* kaynak: --wrap — genişlik, ölçek dışı */
  --kap-yan:32px;            /* .wrap yan dolgusu — zaten kademede */
  --kap-yan-dar:16px;        /* @≤640 — zaten kademede */
  --kenar-sekmesi-ust:272px; /* dikey kenar sekmesinin üst konumu.
                                🔴 SABİT, hesaplanan değil — kaynağın kararı
                                (`fit-shell.js:4787`, Beyar 2026-08-29):
                                önce banner merkezine hizalanıyordu ve sayfa
                                tipine göre 272/280/323/511 diye AYRIŞIYORDU;
                                karar "hepsi aynı konumda" oldu ve taban
                                liste/detay hâli olan 272 alındı. */
  --kenar-serit-g:8px;       /* sağ dikey şeridin genişliği — kaynak
                                `.fb-rail` (fit-shell.css:1028) */
  --okuma-kolonu:860px;      /* akan metnin okunduğu dar kolon — genişlik,
                                ölçek dışı.
                                🔴 UYDURULMADI, İKİ MARKADA DA AYNI ÖLÇÜLDÜ:
                                  fit  · destek-v1.html `.faq-list`
                                         `.faq-kat-note` `.faq-none`
                                         `.coll-cta` `.ds-list`   → 860px
                                  diet · beslenme-ipucu-detay-v1.css:57
                                         `.reh-article`           → 860px
                                `--kap-genislik` (1240px) kartın kendi
                                dolgusundan sonra ~1090px'lik bir satır
                                bırakıyor; bu token onu okunur uzunluğa
                                indirir. `--olcu` (78ch) ile karışmaz:
                                o AKAN METNİN kendi ölçüsü, bu KOLONUN
                                genişliği — biri ch, öbürü px. */

/* ── 7 · KABUK ÖLÇÜLERİ ──────────────────────────────────────────────
   Sabit üst kabuk: üst bant + header. Mobilde üst bant gizlenir. */

  --ust-bant-h:40px;
  --header-h:72px;
  --header-h-dar:62px;        /* @≤640 · üst bant gizli */
  /* §27b kelime markası — patron .ai vektörünün ink yüksekliği.
     Kaynağın metin kutusuyla DEĞİL, optik x-yüksekliğiyle eşitlendi
     (23px × 0.52 ÷ 0.714 ≈ 16.8). Genişlik 3.9182 oranıyla gelir. */
  --marka-kelime-h:24px;
  --kabuk-h:113px;            /* kaynak: --fit-header-h
                                 // DOĞRULA: 40 + 72 = 112, token 113 diyor.
                                 Kaynakta `.below-header{padding-top:112px}` ve
                                 `scroll-padding-top:112px` LİTERAL 112 yazıyor.
                                 1px'lik bu çelişki kaynakta çözülmemiş. */
  /* 🔴 62 → 63 (2026-09-01, 02 §35). Kaynak ≤640'ta `--fit-header-h:63px`
     bildiriyor (`fit-shell.css:1853`); kanon bu yuvayı `--header-h-dar`
     (62px, HEADER elemanının kendi yüksekliği) ile karıştırmıştı. Fark
     `.kimlik-bant` üst dolgusunda 1px olarak ölçüldü. */
  --kabuk-h-dar:63px;

  /* BANNER AİLE YÜKSEKLİKLERİ — dadadiet.com'dan ölçülmüş sabitler */
  /* 🔴 v3 · YAZI YÜZÜ KANONDA HİÇ YOKTU — 2026-09-02, slot-3 yakaladı.
     `tokenlar.css` ve `markalar/*.css` SIFIR `@font-face` ve sıfır kök
     `font-family` bildiriyor. Ölçüldü: kanonu tek başına yükleyen bir
     sayfa SERİF çizilir. Yazı BOYUTLARI (`--yazi-*`) tokendı ama YÜZ
     değildi — eksik yarım.
     Yüz marka-nötr: iki markanın kabuğu da Gilroy ölçüyor.
     ⚠ `@font-face` BİLDİRİMİ BURAYA YAZILMAZ ve bu bilinçli: font
       dosyasının yolu tüketiciye göre değişiyor (`deneme/*.html` gömülü
       base64 taşıyor, `kanon/demo.html` göreli yol veriyor). Kanon YÜZÜN
       ADINI verir, YÜKLENMESİ tüketicinin işidir.
     ⚠ Yedek yığın uydurulmadı: kaynağın kendi `body` bildiriminden
       (`fit-shell.css`) birebir alındı. */
  --yazi-yuzu:"Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yazi-yuzu-baslik:"GilroyBd", var(--yazi-yuzu);

  --banner-h-liste:544px;
  /* 🔴 v3 · 2026-09-02 — TABAN DALDA HİÇ BİLDİRİLMEMİŞTİ.
     `--banner-h-detay` yalnız ≤1024 (617) ve ≤640 (726) dallarında
     vardı; MASAÜSTÜNDE TANIMSIZDI. Ölü değildi, YARIMdı — detay ailesi
     kanonda tanımlı ama 1440'ta yüksekliksiz kalıyordu. §66 `.bant.derin`
     tüketicisini doğurunca boşluk göründü.
     Değer uydurulmadı: `01-tokenlar.md:718` zaten 560px diye
     belgeliyordu ve v3 banner turu 60 sayfada 1440'ta **560** ölçtü
     (challenge-v1 · egzersiz-detay-v1 · sozluk-detay-v1 · fit-testi-detay-v1
     · program-detay-v1 — beşi de birebir). Belge ile ölçüm aynı sayıyı
     verdi; eksik olan yalnız CSS bildirimiydi. */
  --banner-h-detay:560px;
  --banner-h-profil:280px;
  /* 🔴 MOBİL KAPAK — kaynak `fit-shell.css:4312` (`@media ≤640`).
     Kanon 2026-09-01'e kadar mobil dalda kapak yüksekliğini HİÇ
     bildirmiyordu: 390px'te 280px'lik masaüstü bandı basılıyor, kimlik
     kartı onun üstüne bindiğinde ekranın yarısı boş koyu alan kalıyordu.
     Ölçüldü, uydurulmadı. */
  /* 🔴 170 → 280 · BEYAR KARARI, 2026-09-02 — "kanon yanlış, ölçüm doğru".
     Kanon dar ekranda kapağın 170px'e düştüğünü söylüyordu. v3 banner
     turu 60 sayfa ölçtü ve kapak ailesinin 11 sayfasının 11'inde de
     280 → **280** buldu: KÜÇÜLMÜYOR.
     170 değeri `.pf-banner`ın (profil-v1) değeriydi ve TEK sayfadan
     geliyordu; yaygın olan `.fp-kapak` (11 sayfa) küçülmüyor.
     ⚠ Ölçüm üç ayrı kapak reçetesi buldu — .fp-kapak 280→280 ·
       .pf-banner 280→170 · .cp-banner 150→120. Kanon en yaygın ve tek
       tutarlı olanı alır; kalan ikisi §66a'da kusur olarak kayıtlı. */
  --banner-h-profil-dar:280px;

  /* ── BANT (§34) — koyu banner'ın katmanları ────────────────────────
     🔴 GÖRSEL İSTEĞE BAĞLI. `--bant-gorsel` boş (`none`) bırakılırsa üç
     gradyan tek başına bandı çizer — ölçüldü, kaynağın 404'ü zaten öyle.
     Kanon dış kaynak GÖMMEZ; görseli canlı blade doldurur.
     ⚠ ŞERH DÜZELTİLDİ (Beyar · 2026-09-02): bu karar bir zamanlar
     "deneme dosyalarının dış kaynak 0 sözü" ile gerekçelendiriliyordu
     ve O SÖZ ÖLÇÜLDÜĞÜNDE TUTULMADIĞI GÖRÜLDÜ — `bildirimler` 6,
     sorgulu `arama` 1 dış istek atıyor (slot-2, ağdan ölçtü).
     Beyar: "görseller kalsın, sadece şerhi düzelt, gerçeği yazsın."
     Kararın kendisi (bandın görselini gömmemek) AYAKTA; ama artık
     tutulmayan bir söze değil, kendi gerekçesine dayanıyor: bant
     görseli İÇERİKTİR ve canlı blade'in verisidir, kanonun değil.
     Kapı ölçütü `s2-diskaynak-denetim.mjs` bunu 🔴 6 olarak, bilinen
     ve onaylı bir açık kalem olarak raporlar. */
  /* Bandın perde katmanları MARKA YUVASIDIR — içlerinde marka rengi ve
     markanın kendi koyu tabanı var (FIT sıcak siyah, Diet yeşile çalan
     siyah). `bilesenler.css` sabit renk yazamaz, bu yüzden katmanların
     tamamı marka dosyasından gelir. */
  --bant-perde-aksan:var(--marka-bant-perde-aksan);
  /* 🔴 AD YÖN DEĞİL ROL SÖYLER (Beyar kararı · 2026-09-02).
     Yuvalar önce `-yatay` / `-dikey` diye adlandırılmıştı — FIT'in kendi
     katmanlarının YÖNÜNE göre (90deg / 180deg). Ama perdenin yönü MARKAYA
     bağlı: Diyet'in ana perdesi `linear-gradient(180deg,…)`, yani "yatay"
     adlı yuvada DİKEY bir gradyan duruyordu ve ad değeriyle çelişiyordu
     (slot-2 bildirdi).
     Ad artık katmanın ROLÜNÜ söylüyor — üç katman, üç rol:
       -aksan  markanın parıltısı (radial)
       -ana    ana koyulaştırma perdesi     ← yönü marka belirler
       -dip    dipteki koyulaşma
     Rol markadan bağımsız, yön değil; bir daha çelişemez. */
  --bant-perde-ana:var(--marka-bant-perde-ana);
  --bant-perde-dip:var(--marka-bant-perde-dip);
  --bant-zemin:var(--marka-bant-zemin);
  /* Arama hero'sunun perdeleri — §34'ün üç katmanından AYRI: iki katman
     ve farklı açı/konum. Aksan parıltısı içerdiği için marka yuvası. */
  --giris-perde:var(--marka-giris-perde);
  --giris-parilti:var(--marka-giris-parilti);
  --giris-pano-perde:var(--marka-giris-pano-perde);
  --arama-perde:var(--marka-arama-perde);
  --arama-parilti:var(--marka-arama-parilti);
  --arama-parilti-2:var(--marka-arama-parilti-2);
  --bant-gorsel:none;
  --bant-gorsel-yeri:center 26%;
  --dikis-r:22px;             /* banttan gövdeye geçişin yuvarlak köşesi */
  --durum-kolon:900px;        /* §35 okuma kabı — §23'ün 860'ı DEĞİL */
  --banner-gap:20px;          /* banner içi dikey ritim — zaten kademede */

  /* HERO NEFESLERİ */
  --hero-ust:15px;            /* 🔴 16 → 15 · kaynak --hero-pt (B41) */
  --hero-alt:46px;            /* 🔴 48 → 46 · kaynak --hero-pb (B41) */
  --hero-gap:10px;            /* 🔴 12 → 10 · kaynak --hero-gap (B41) */

/* ── 8 · YUVARLAKLIK ─────────────────────────────────────────────────
   Kaynağın en temiz katmanı: sayfaların %98'i token kullanıyor. */

  --yuvarlak-sm:8px;
  --yuvarlak-md:12px;         /* en sık — kart, düğme, çip */
  --yuvarlak-lg:16px;
  --yuvarlak-xl:24px;
  --yuvarlak-hap:999px;
  --yuvarlak-rozet:6px;       /* sayaç ve fiyat rozeti */
  --yuvarlak-cip:var(--yuvarlak-md);
  --yuvarlak-daire:50%;

/* ── 9 · GÖLGE ───────────────────────────────────────────────────────
   Üç basamak + odak halkası. Değerler --murekkep'in rgb'sinden türer. */

  --golge-sm:0 1px 2px rgba(33,30,22,.04), 0 2px 6px rgba(33,30,22,.05);
  --golge-md:0 6px 22px rgba(33,30,22,.09);
  /* Kapak görselinin üstündeki karartma perdesi. Görsel ne olursa olsun
     mührün ve kartın okunmasını garantiler — kaynak fit-shell.css:4111
     (`.fp-kapak::after`), iki durak birebir. Bileşen katmanı alfa yazamaz
     (kural 2), bu yüzden perde BURADA token olur. */
  --perde:rgba(20,18,12,.5);   /* sohbet perdesi (§62) — ölçülen değer */
  --kapak-perde:linear-gradient(180deg,rgba(33,30,22,.14),rgba(20,18,12,.38));
  /* Kapak üstündeki mührün zemini — okunurluk için neredeyse opak beyaz.
     Kaynak fit-shell.css:4120. */
  --muhur-zemin:rgba(255,255,255,.93);
  --golge-lg:0 18px 50px rgba(33,30,22,.16);
  /* Yüzen düğme gölgesi — `--golge-lg`den AYRI: yayılım dar, kayma az.
     Kaynak `.to-top` (fit-shell.css:1616) ve `.ddm-fab` (dd-mesaj.css:56),
     iki markada da birebir aynı. */
  --golge-kabuk:0 4px 20px rgba(33,30,22,.05);  /* sabit header gölgesi */
  --golge-yuzen:0 8px 20px rgba(33,30,22,.16);
  --golge-halka:0 0 0 3px var(--aksan-yikama);   /* alan odağı (form) */
  /* // DOĞRULA: sayfa katmanında halkanın dört varyantı ölçüldü — aksan
     renginin .12 ve .14 alfalı iki rgba() yazımı, aksan yıkama tokeni, ve
     hata durumu için --tehlike'nin .14 alfalı rgba() yazımı. Kanon
     marka-bağımsız olanı seçti; hata varyantı bileşen katmanına bırakıldı. */

/* ── 10 · HAREKET ────────────────────────────────────────────────────*/

  --yumusama:cubic-bezier(.22,.61,.36,1);   /* kaynak: --ease */
  --sure-hizli:.12s;
  --sure-cabuk:.18s;
  --sure:.2s;        /* en sık — 89 kullanım */
  --sure-yavas:.25s;
  --sure-agir:.3s;

/* ── 11 · ODAK ───────────────────────────────────────────────────────*/

  --odak-kalinlik:var(--cizgi-3);
  --odak-ofset:var(--cizgi-2);
  --odak-renk:var(--aksan);

/* ── 12 · KATMAN (z-index) ───────────────────────────────────────────
   Kaynaktan ÖLÇÜLDÜ, ad verildi. Ham değerler korundu ki mevcut
   sayfalarla çakışmasın. Çelişki notu 01-tokenlar.md §12'de. */

  --kat-icerik:2;              /* en sık kullanılan (111 kez) */
  --kat-kimlik:3;              /* kimlik kartı kapağa BİNER — kaynak
                                  `.fp-kimlik{z-index:3}` (fit-shell.css:4125).
                                  `--kat-icerik` (2) kaynaktan sapıyordu;
                                  konum ailesi ölçüme girince yakalandı. */
  --kat-avatar-dugme:4;        /* avatar düzenleme düğmesi — `.fp-ava-edit{z-index:4}` */
  --kat-ipucu:30;              /* rozet ipucu balonu (§63) — ölçüldü.
                                  `--kat-icerik` (2) YETMİYOR: balon kendi
                                  kartının dışına taşıyor ve KOMŞU kartların
                                  üstünden geçmesi gerekiyor. */
  --kat-yapiskan-2:40;         /* arama sekmesi rayı — kaynak `.fs-tabbar` (§60) */           /* yapışkan filtre çubuğu */
  --kat-yuzen:55;              /* yukarı çık düğmesi */
  --kat-header:60;             /* sabit header + popover */
  --kat-ust-bant:70;
  --kat-kenar-serit:71;        /* sağ dikey şerit — üst bandın ÜSTÜNDEN geçer */
  --kat-geri-bildirim:72;      /* kenar sekmesi */
  --kat-yuzen-dugme:73;        /* sohbet düğmesi — kenar sekmesinin üstünde */
  --kat-sohbet-dugme:73;       /* sohbet açma düğmesi — §26'nın istifinde
                                  `.basa-don`ın (55) ÜSTÜNDE, kenar
                                  şeridinin (71) hemen üstünde (§62) */
  /* 🔴 v3 · 2026-09-02 — ALT BAR MERDİVENDE TANIMLI DEĞİLDİ (§67).
     Ölçüldü: FIT'in `.bottom-nav`u z-index **90** kullanıyor.
     ⚠ AD UYDURULMADI: `01-tokenlar.md:650` bu kademeyi ZATEN
       `--kat-alt-bar` = 90 diye belgelemişti; eksik olan yalnız CSS
       bildirimiydi. İlk yazımda `--kat-alt-cubuk` diye İKİNCİ bir ad
       üretildi ve geri alındı — "token yazmadan önce 01-tokenlar.md
       taranır" kuralının bu turdaki ikinci ihlali.

     🔴 BELGE/CSS KAYMASI — 01-tokenlar.md'nin kat merdiveninde YEDİ
        kademe belgelenmiş ama `tokenlar.css`te bildirilmemiş:
          --kat-taban 1 · --kat-yapiskan 42 · --kat-menu 80 ·
          --kat-ray 85 · --kat-alt-bar 90 · --kat-sayfa-orte 93 ·
          --kat-sayfa 94
        Hiçbirinin CANLI tüketicisi yok, yani sessiz bir kusur DEĞİL —
        ama merdiven yarım ve §68 (yüzen istif) bunun üstüne oturacak.
        Bu turda YALNIZ `--kat-alt-bar` bildirildi (tüketicisi doğdu);
        kalan altısı tüketicisi olmadan bildirilmez (ölü token üretmez). */
  --kat-alt-bar:90;
  --kat-sohbet-ortu:94;        /* sohbet perdesi — alt sayfayla aynı kat */
  --kat-sohbet:95;
  --kat-cekmece-ortu:95;       /* mobil çekmece perdesi (§64) — ölçüldü */
  --kat-cekmece:96;            /* mobil çekmecenin kendisi (§64) */
  --kat-ortu:97;               /* modal örtüsü — `.lg-ortu` `.pg-ortu` `.fb-ortu` */
  --kat-modal:98;              /* tam ekran kapılar — `.lg-gate` `.pro-kapi` `.fb-modal` */
  --kat-atla:200;              /* atlama bağlantısı (§26b) — odakta hiçbir
                                  katman onu örtemez */
}

/* ── 13 · KIRILIM NOKTALARI ──────────────────────────────────────────
   CSS değişkeni @media koşulunda okunamaz; bu yüzden token DEĞİL, sabit
   olarak burada belgelenir ve elle aynalanır (kaynak da böyle yapıyor).

     ≤1024px  tablet   — 74 kural · KANON
     ≤640px   mobil    — 112 kural · KANON
     ≤900px   ara      — 20 kural  · aday
     ≤760px   ara      — 18 kural  · aday
     ≤400px   küçük    — 14 kural  · aday
     ≤520px · ≤860px · ≤720px · ≤1100px · ≤1180px · ≤1303px · ≤380px · ≤680px
              → SAPMA (1–4 kural), kanona alınmadı
   -------------------------------------------------------------------- */

/* ── 14 · MOBİL KAP ──────────────────────────────────────────────────*/
@media (max-width:640px){
  :root{ --kap-yan:var(--kap-yan-dar); }
}

/* ── 15 · HAREKETİ AZALT ─────────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  :root{
    --sure-hizli:0s; --sure-cabuk:0s; --sure:0s;
    --sure-yavas:0s; --sure-agir:0s;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   DAR EKRAN — TOKEN KATMANININ MOBİL DALI          (2026-09-01 · 02 §35)
   -----------------------------------------------------------------------
   🔴 BU BLOK KANONDA HİÇ YOKTU. Kaynak ≤640'ta :root'un kendisini yeniden
   bildiriyor (`fit-shell.css:1853`); kanon yalnız masaüstü değerlerini
   taşıdığı için 390px'te bölüm nefesleri masaüstü ölçüsünde kalıyordu.
   Ölçülen sonuç: her bölüm geçişinde +19/+20px fazla boşluk (bir bölümün
   ALT payı + sonrakinin ÜST payı = 2 × 10px sapma). Üç destek ekranında
   beş aralık birden bu yüzden kırmızıydı.

   Değerler kaynağın kendi satırından birebir; yuvarlama yapılmadı —
   44 ve 22 zaten kademede.
   ⚠ Bu blok ilk yazıldığında masaüstü `--bolum-nefes` hâlâ 74→64
     yuvarlamasını taşıyordu; B41 onu da kaynağın değerine çekti. Artık
     iki kademede de yuvarlama YOK.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── ARA KADEME (≤1024) — kanonda HİÇ YOKTU ─────────────────────────
   Kaynak bu genişlikte altı yuvayı değiştiriyor; kanon yalnız 1440 ve 640
   biliyordu, arada masaüstü değerleri kalıyordu. Ölçüm: render anında
   `:root` okuması, üç genişlikte (B41). */
@media (max-width:1024px){
  :root{
    --hero-gap:9px;
    --bolum-nefes-sik:26px;
    --banner-h-liste:607px;
    --banner-h-detay:617px;
    --banner-gap:18px;
    /* --bolum-nefes 74 KALIR — kaynak bu kademede onu değiştirmiyor */
  }
}
@media (max-width:640px){
  :root{
    --bolum-nefes:44px;         /* kaynak ≤640: --sec-pad:44px */
    --bolum-nefes-sik:22px;     /* kaynak ≤640: --sec-pad-sm:22px */
    /* Banner aile yükseklikleri dar ekranda BÜYÜR (metin sarınca bant
       uzuyor) — kaynağın kendi ölçüsü, sezgiye ters ama ölçülmüş. */
    --banner-h-liste:587px;     /* kaynak ≤640: --banner-h-liste:587px */
    --banner-h-detay:726px;     /* kaynak ≤640: --banner-h-detay:726px */
    /* Hero ritmi dar ekranda TERSİNE döner: üst pay büyür (15→33), alt pay
       küçülür (46→34). Kaynağın kendi ölçüsü; kanonda dal yoktu. */
    --hero-ust:33px;
    --hero-alt:34px;
    --hero-gap:8px;
    --banner-gap:9px;
    --kabuk-h:63px;             /* ≤640 üst bant gizli — `--kabuk-h-dar` ile aynı */
  }

  /* ── A3 · HATA AİLESİ · Beyar kararı 2026-09-03 ────────────────────
     Ölçüldü: kanonda `--uyari` (kehribar) vardı, HATA (kırmızı) ailesi
     yoktu. Kaynak `role="alert"` özetini kendi renkleriyle basıyor
     (`#8c1d18` metin · `#fdecea` zemin · `#efc2bd` kenar) ve o özeti
     kehribara düşürmek anlamı bozardı. Yuva marka dosyalarında dolar;
     kanonun sabit renk sayısı 1'de KALIR. */
  --hata: var(--marka-hata, #8c1d18);
  --hata-yikama: var(--marka-hata-yikama, #fdecea);
  --hata-cizgi: var(--marka-hata-cizgi, #efc2bd);
}


/* ══════════════════════════════════════════════════════════════════════
   5 · KANON · MARKA KATMANI — yuvaları DadaDiet değerleriyle doldurur
   Kaynak: ~/Revenge/kanon/markalar/diet.css — BAYT-ÖZDEŞ kopya, tek satır değişmedi.
   🔴 SIRA DEĞİŞMEZ: token → marka → bileşen.
   ══════════════════════════════════════════════════════════════════════ */
/* =====================================================================
   KANON — MARKA KATMANI · DadaDiet
   ---------------------------------------------------------------------
   markalar/fit.css'in kardeşi. Aynı yuvalar, başka değerler.
   tokenlar.css ve bilesenler.css'e DOKUNULMADAN marka değişir.

   Yükleme sırası:  tokenlar.css  →  markalar/diet.css  →  bilesenler.css

   KAYNAK: dump/diet/ — dadadiet.com canlı çıktısı, 71 HTML.
   Hiçbir değer uydurulmadı. Her satırın yanında ölçüm var:
   ya 10 sayfanın :root'unda tanımlı bir token, ya da N sayfada
   sayılmış ham hex. Çıkaramadığım yuvalara "// DOĞRULA" düştüm.

   YÖNTEM NOTU — yuvalar ROLE göre dolduruldu, sıraya göre değil.
   Diet'in rampası Fit'inkinden AÇIK; sırayla eşlenseydi birincil düğme
   zemini #007E38 olurdu (beyaz metinle 3.59:1, AA ALTI) ve yuvanın kendi
   sözleşmesi ("birincil düğme zemini · AA") çiğnenirdi. Ölçüm zaten
   cevabı veriyor: diet'in KENDİ `.btn-primary` kuralı `--tomato-deep`
   kullanıyor —
       dump/diet · `.btn-primary{background:var(--tomato-deep)}`
   yani #00602b (5.33:1, AA). Rol eşlemesi diet'in kendi kararıdır.
   ===================================================================== */

:root{

/* ── AKSAN RAMPASI ───────────────────────────────────────────────────
   Diet'in rampası eski `--tomato-*` adlarıyla yaşıyor (Fit'in R7'de
   temizlediği adlandırmanın aynısı; değer yeşil, ad kırmızı söylüyor). */

  --marka:#009A44;          /* --tomato / --b-diet · 10 sayfa :root token
                               beyazla 2.54:1 → AA ALTI.
                               Fit'teki gibi YALNIZ vurgu/ikon/çip/odak. */
  --marka-koyu:#00602b;     /* --tomato-deep · 19 sayfa
                               beyazla 5.33:1 → AA ✓
                               diet'in KENDİ `.btn-primary` zemini */
  --marka-murekkep:#007E38;  /* --tomato-dark · 13 sayfa
                                beyazla 3.59:1 · `.diet-all:hover` metni */

  /* 🔴 DOĞRULA — --marka-koyu-2 (birincil düğme HOVER'ı)
     Diet'in rampası ÜÇ adım: #009A44 → #007E38 → #00602b.
     Fit'te dört adım var ve dördüncüsü (#00572b) yalnız hover için.
     Diet'te dördüncü adım HİÇBİR YERDE yok — 71 sayfa tarandı.
     Uydurulmadı. Yuva `--marka-koyu`ya düşürüldü: hover'da renk
     değişmez, yalnız `translateY(-2px)` kalkışı olur.
     Gerçek bir hover adımı isteniyorsa tek satırda eklenir. */
  --marka-koyu-2:var(--marka-koyu);

/* ── YIKAMA VE ÇİZGİ ─────────────────────────────────────────────────
   Fit'te de olduğu gibi iki yıkama var ve birbirine çok yakın. */

  --marka-yikama:#e3f4ea;   /* 44 sayfa ham — `.calc-ico` · `.nr-ico` zemini
                               (Fit'teki --marka-yikama ile aynı rol)
                               NOT: diet'in :root'unda --tomato-tint:#DDF2E6
                               diye bir token da var ama YALNIZ 10 sayfada;
                               frekans #e3f4ea diyor, token #DDF2E6.
                               Aşağıdaki yuvaya token değeri kondu. */
  --marka-yikama-2:#DDF2E6; /* --tomato-tint · 10 sayfa :root token */
  --marka-cizgi:#bae4cc;    /* 40 sayfa ham — `.reh-note` · `.wz-relax`
                               kenarı; Fit'in --marka-cizgi'siyle birebir
                               aynı rol (açık yeşil kartın hairline'ı) */

/* ── KOYU ZEMİNDE ────────────────────────────────────────────────────
   Ölçüldü (diet'in koyu yüzeyi #15241c üstünde). */

  --marka-parlak:#99d7b4;    /* 44 sayfa — `.eyebrow` koyu zeminde · 10.14:1 */
  --marka-parlak-2:#7fcca1;  /* 38 sayfa — `h1 .accent` koyu zeminde · 8.58:1 */
  --marka-parlak-3:#7FCCA1;  /* --b-diet-l · 10 sayfa :root token */
  --marka-yikama-koyu:#e3ede7; /* 39 sayfa — koyu zeminde `.lead` · 13.48:1 */

/* ── KOYU YÜZEY ──────────────────────────────────────────────────────
   🔶 BURASI FIT'TEN AYRIŞAN ASIL YER. Fit'in koyu yüzeyi sıcak siyah
   (#211E16 · Process Black C), Diet'inki YEŞİLE ÇALAN siyah. İlk turda
   bu üçünü nötr sanmıştım; diet ölçümü marka yuvası olduklarını gösterdi
   (tokenlar.css §2 notu). */

  --marka-koyu-zemin:#15241c;    /* 14 sayfa — `.sh-top` · `.sh-hero-media`
                                    · `#nasil-calisir` zemini */
  --marka-koyu-metin:#bcd0c4;    /* 43 sayfa — koyu zeminde `.rd-crumb` · 9.96:1
                                    (Fit'te #cfc8be · 10.03:1 — aynı rol,
                                    aynı kontrast sınıfı, farklı sıcaklık) */

  /* 🔴 DOĞRULA — --marka-koyu-zemin-2 (gradyanın koyu ucu)
     Fit'te #211E16 → #1b1913 diye iki uçlu bir gradyan var (21 sayfa).
     Diet'te ikinci uç bulunamadı: `#15241c` tek başına, düz zemin olarak
     kullanılıyor. Diet'in :root'undaki `--d-deep:#161310` ve
     `--d-3:#322D26` SICAK darklar (Gastro paletinden), yeşil yüzeyin
     eşi değiller — ölçüldü, karıştırılmadı.
     Yuva `--marka-koyu-zemin`e düşürüldü: gradyan tek renge iner. */
  --marka-koyu-zemin-2:var(--marka-koyu-zemin);

  /* ✅ KARAR VERİLDİ (Beyar · 2026-09-02): --marka-koyu-zemin-yesil
     — koyu özet kartı Diyet'te DÜZ LEVHA kalır, gradyan UYDURULMAZ.
     Beyar: "düz levha kalsın, gradyan uydurma."
     Yani aşağıdaki düşürme artık geçici bir çözüm değil, verilmiş bir
     karardır; gradyanın iki ucu tek renge iner ve kutu markanın kendi
     koyu zeminiyle çizilir. Diyet'te ölçülecek bir ikinci uç YOK.
     ⚠ Kararın bedeli kayıtlı: kaynağın 160°'lik derinliği kaybolur
     (slot-2 gözle doğruladı — kutu okunuyor, beyaz metin koyu zeminde).
     Aşağıdaki gerekçe metni ölçüm kaydı olarak DURUYOR: */
  /* ── ölçüm kaydı ──
     FIT'te #0f2f1e (ölçüldü). Diyet'te bu kartın karşılığı YOK: canlı
     rozetlerim sayfası koyu özet kartı basmıyor, yani ölçülecek bir
     yüzey de yok. UYDURULMADI. Yuva Diyet'in KENDİ koyu zeminine
     (#15241c, 14 sayfada ölçülü) düşürüldü — o da yeşile çalan siyah,
     yani gradyan tek renge iner ama markanın kendi rengine iner.
     `--marka-koyu-zemin-2`ye verilen kararın aynısı. */
  --marka-koyu-zemin-yesil:var(--marka-koyu-zemin);

/* ── EKOSİSTEM MARKALARI ─────────────────────────────────────────────
   Diet'in :root'u bunları `--b-*` adıyla taşıyor (10 sayfada birebir). */

  --eko-gastro:#E14827;      --eko-gastro-rgb:225,72,39;
  --eko-diet:#009A44;        --eko-diet-rgb:59,183,126;   /* --b-diet */
  --eko-gourmet:#b14fc5;     --eko-gourmet-rgb:177,79,197;
  --eko-fit:#0093d0;         --eko-fit-rgb:0,157,79;      /* --b-fit */
  --eko-fit-acik:#4DB4DE;                                 /* --b-fit-l */
  --eko-diet-acik:#7FCCA1;                                /* --b-diet-l */
  --eko-akademi:#006072;     --eko-akademi-rgb:0,96,114;  /* --b-akademi */
  --eko-akademi-acik:#2E97AB;                             /* --b-akademi-l */
  /* ✅ §5.1 · A1 ONAYLANDI (Beyar, 2026-09-01). Petrolün yıkaması.
     Kaynakta token değil, iki yerde ham hex — ama kontrastı kaynağın
     kendi yorumunda yazılı, yani uydurma değil ölçüm:
       fit-shell.css:1500              `.pstat.wait{background:#e6f1f4}`
       destek-talebi-detay-v1.html:66  `.st-wait{background:#e6f1f4}`
       destek-talebi-detay-v1.html:57  yorum: "#006072 on #e6f1f4 ≈ 6.3:1"
     Bağımsız hesap 6.26:1 · AA ✓. Destek modülünün "Açık talep" hapı
     (§28) bunu kullanıyor. */
  --eko-akademi-yikama:#e6f1f4;
  /* ✅ §5.1 · A1 — petrolün hairline'ı, yeşildeki `--marka-cizgi`nin eşi.
     Kaynak: `destek-talebi-detay-v1.html:66` → `.st-wait{border:1px solid #cadfe5}` */
  --eko-akademi-cizgi:#cadfe5;
  --eko-kilitli:#e9e2d6;     --eko-kilitli-rgb:233,226,214;
  /* 🔴 DOĞRULA — --eko-akademi-parlak: Fit'te #5fcbd8 (`.bs-campus`),
     diet'te karşılığı yok. Tanımlanmadı. */

/* ── KURUMSAL YARDIMCI RENKLER ───────────────────────────────────────
   Diet'in :root'unda Fit'inkiyle BİREBİR aynı blok duruyor. */

  --kurumsal-yesil:#0093d0;      /* --c-green */
  --kurumsal-yesil-koyu:#007e38; /* --green-deep */
  --kurumsal-mor:#b14fc5;        /* --c-purple */
  --kurumsal-nane:#6cca98;       /* --c-mint */
  --kurumsal-nane-koyu:#009A44;  /* --c-mint-deep — YALNIZ diet'te tanımlı */
  --saglik-yesil:#009A44;        /* --green */

/* ── BANT PERDELERİ (§34) ──────────────────────────────────────────────
   🔴 KAYNAK YAPISI ÜÇ KATMAN, DİYET'İN ÖLÇÜLENİ TEK KATMAN.
   FIT `.lib-top`u üç perde taşıyor (aksan parıltısı · yatay koyulaşma ·
   dipte dikey koyulaşma). Diyet'in canlı `/arama`sından ölçülen ise TEK
   dikey gradyan:
     linear-gradient(180deg, rgba(16,32,24,.92) 0%,
                             rgba(22,40,30,.80) 52%,
                             rgba(18,28,22,.88) 100%)
   Ölçülen katman "yatay" yuvasına konuyor (bandın gövdesini o boyuyor);
   diğer iki yuva `none`.

   // KARAR BEKLİYOR: Diyet'e FIT'in aksan parıltısı ve dip perdesi
   üretilsin mi? Üretilirse marka yeşilinden türetilmeleri gerekir ve o
   TÜRETME bir karardır — ölçüm değil. Uydurulmadı, Beyar'a soruldu. */
  --marka-bant-perde-aksan:none;
  --marka-bant-perde-ana:linear-gradient(180deg,
      rgba(16,32,24,.92) 0%, rgba(22,40,30,.80) 52%, rgba(18,28,22,.88) 100%);
  --marka-bant-perde-dip:none;
  --marka-bant-zemin:var(--marka-koyu-zemin);

  /* ── §47/§49 YUVALARI (2026-09-01) ────────────────────────────────
     `--marka-cizgi-2`     aksanın alfalı kenarı (kaynak `rgba(<marka>,.30)`)
     `--marka-paket-rozet` ücretli kademe rozetinin gradyan zemini
     İkisi de markanın KENDİ renginden türer — sabit hex yazılmadı. */
  --marka-cizgi-2:color-mix(in srgb, var(--marka) 30%, transparent);
  --marka-paket-rozet:linear-gradient(180deg,var(--marka),var(--marka-murekkep));

  --marka-cizgi-3:color-mix(in srgb, var(--marka) 25%, transparent);

  --marka-halka:color-mix(in srgb, var(--marka) 12%, transparent);

  /* §55 kademe kartı — aksanın üç alfa adımı (kart kenarı · bayrak gölgesi ·
     tablo vurgulu sütunu). Markanın kendi renginden türer. */
  --marka-cizgi-4:color-mix(in srgb, var(--marka) 45%, transparent);
  /* %24 — kaynağın `.hs-pill.on` kenarı (`fit-shell.css:4970`). %25'lik
     `--marka-cizgi-3`e YUVARLANMADI: ölçülen değer bu (KOPYALAMA §2). */
  --marka-cizgi-5:color-mix(in srgb, var(--marka) 24%, transparent);
  --marka-golge-aksan:color-mix(in srgb, var(--marka) 32%, transparent);
  --marka-yikama-5:color-mix(in srgb, var(--marka) 5%, transparent);

  /* §59 bildirim akışı — okunmamış satırın iki zemin adımı.
     FIT'te ölçülen #EDF8F2 / #DEF2E7; markanın kendi yeşilinden
     türer, sabit hex yazılmadı. */
  --marka-bildirim-yeni:color-mix(in srgb, var(--marka) 7%, #fff);
  --marka-bildirim-yeni-2:color-mix(in srgb, var(--marka) 12%, #fff);
  --marka-halka-2:color-mix(in srgb, var(--marka) 16%, transparent);

  /* §60 arama hero'su — Diyet'in canlı /arama'sından ÖLÇÜLDÜ (slot-1,
     salt-okuma dökümü). Perde tek katman; parıltılar markanın kendi
     yeşilinden türer, sabit hex yazılmadı. */
  --marka-arama-perde:linear-gradient(180deg, rgba(16,32,24,.92) 0%,
      rgba(22,40,30,.80) 52%, rgba(18,28,22,.88) 100%);
  --marka-arama-parilti:radial-gradient(1100px 460px at 16% -10%,
      color-mix(in srgb, var(--marka) 30%, transparent), transparent 60%);
  --marka-arama-parilti-2:radial-gradient(circle,
      color-mix(in srgb, var(--marka-parlak-3, var(--marka)) 22%, transparent), transparent 70%);

  /* §61 giriş akışı — hero iki perde + pano kendi perdesi.
     Aksan tarafı markanın kendi renginden türer (slot-1 ölçümü:
     parıltı rgba(<marka>,.34) · avantaj dairesi rgba(<marka>,.92)). */
  --marka-giris-perde:linear-gradient(90deg,
      rgba(14,44,28,.94), rgba(33,30,22,.74));
  --marka-giris-parilti:radial-gradient(900px 380px at 88% 0%,
      color-mix(in srgb, var(--marka) 34%, transparent), transparent 62%);
  --marka-giris-pano-perde:linear-gradient(180deg, rgba(14,44,28,.32) 0%,
      rgba(20,34,25,.58) 55%, rgba(13,22,16,.88) 100%);
  --marka-koyu-aksan:var(--marka-parlak-2, var(--marka-parlak));
  --marka-koyu-aksan-2:var(--marka-parlak);
  --marka-koyu-aksan-zemin:color-mix(in srgb, var(--marka) 92%, transparent);

  --marka-golge-aksan-2:color-mix(in srgb, var(--marka) 28%, transparent);

  /* §63d · ROZET VE KADEME DURUM VARYANTLARI — 2026-09-03.
     🔴 `token-envanteri` agent'ı ölçtü (B3): bu üç yuva yalnız
     `markalar/fit.css`te vardı; `tokenlar.css:349-351` onları üç alias'a
     bağlıyor ve alias'lar `bilesenler.css` §63d'de BEŞ yerde çağrılıyor
     → DadaDiet'te rozet durum varyantları RENKSİZ kalıyordu.
     Kusur §63d'yi yazan turun (lead) eksiğidir: yuva FIT'e eklenip
     Diyet'e eklenmemiş. Oranlar FIT'tekiyle AYNI — değer markadan
     türediği için tek satır kopya değil, aynı oranın kendi markası. */
  --marka-halka-3:color-mix(in srgb, var(--marka) 14%, transparent);
  --marka-golge-aksan-3:color-mix(in srgb, var(--marka) 16%, transparent);
  --marka-nisan-dolu:radial-gradient(circle at 35% 30%,
                       var(--marka-parlak-2), var(--marka) 65%, var(--marka-murekkep));


  /* A3 · hata ailesi — kaynağın ölçülmüş değerleri (marka-nötr kırmızı;
     hata rengi markaya göre dönmez, uyarı gibi evrensel okunur). */
  --marka-hata: #8c1d18;
  --marka-hata-yikama: #fdecea;
  --marka-hata-cizgi: #efc2bd;
}

/* ---------------------------------------------------------------------
   DOLDURULAMAYAN YUVALAR — özet

     --marka-koyu-2         hover adımı yok (3 basamaklı rampa)
     --marka-koyu-zemin-2   gradyanın ikinci ucu yok (düz zemin)
     --eko-akademi-parlak   koyu zeminde Akademi aksanı yok

   Üçü de `var(--…)` ile bir üst basamağa düşürüldü, yani hiçbir kural
   kırılmıyor — yalnız o üç yerde Fit'e göre daha az derinlik var.

   BULUNAN AMA KANONA GİRMEYEN diet değerleri (rol eşleşmedi):
     #eff9f3   22 sayfa · `.nut-entry` gradyanının açık ucu — üçüncü yıkama
     #c9ead8   38 sayfa · `.nut-*` kenarı — ikinci çizgi rengi
     #dcdcdc   38 sayfa · = Fit'in --cizgi-vurgu'su (nötr, marka değil)
     #c7c7c7   31 sayfa · ikinci gri (Fit'te sapma listesinde)
   --------------------------------------------------------------------- */


/* ══════════════════════════════════════════════════════════════════════
   6 · KANON · BİLEŞEN KATMANI — ikisini okur, sabit renk taşımaz
   Kaynak: ~/Revenge/kanon/bilesenler.css — BAYT-ÖZDEŞ kopya, tek satır değişmedi.
   🔴 SIRA DEĞİŞMEZ: token → marka → bileşen.
   ══════════════════════════════════════════════════════════════════════ */
/* =====================================================================
   KANON — BİLEŞEN KATMANI
   ---------------------------------------------------------------------
   SABİT RENK YOK. Her renk, ölçü, boşluk ve yuvarlaklık tokenlar.css'ten
   gelir; aksan renkleri markalar/<marka>.css'in doldurduğu yuvalardan.
   Bu dosyada tek bir hex, tek bir ham px yoktur.

   Yükleme sırası:  tokenlar.css → markalar/<marka>.css → bilesenler.css

   Kaynak: dump/fit-prototip · 61 public sayfa (admin hariç).
   Sayım DESEN üzerinden: aynı kutu N adla yazılmışsa tek bileşendir ve
   yayılımı N adın birleşimidir. Gerekçe 02-bilesenler.md §0.

   Her bloğun başındaki sayı, o bileşenin kaç sayfada geçtiğidir.
   3'ten az geçenler bu dosyada YOKTUR (02-bilesenler.md §ADAY).

   🔴 işaretli satırlar kaynaktaki ölçülmüş kusurları DÜZELTİR; hangi
   ölçümle düzeldiği 02-bilesenler.md'de yazılı.
   ===================================================================== */


/* =====================================================================
   1 · KART — 39 sayfa · kaynakta 51 ad
   `.fp-card` `.pnl-card` `.form-card` `.tips-card` `.od-card` `.au-card`
   `.info-card` `.svc-card` `.demo-card` `.coach-card` … (tam liste 02 §14)
   ===================================================================== */

.kart{
  background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-lg);
  box-shadow:var(--golge-sm);
}
/* 🔴 TABAN ÇAĞRISI TAŞINMADI — `token-envanteri` ölçtü (B7), 2026-09-03.
   §63d'de `--cizgi-vurgu` (#dddddd) KİLİTLİ kartın kenarı olarak ayrıldı
   ve tabanın hover kenarı için `--cizgi-vurgu-acik` (#dcdcdc) açıldı;
   ama YUVA AYRILDI, ÇAĞRI YERLERİ TAŞINMADI. Bu iki satır hâlâ kilitli
   kartın değerini taban rolünde kullanıyordu. */
.kart:hover{ border-color:var(--cizgi-vurgu-acik); }

.kart-bas{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--bosluk-16);
  padding:var(--bosluk-20) var(--bosluk-24);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
.kart-bas:has(p){ align-items:flex-start; }
.kart-bas:has(p)>:first-child{ min-width:0; }
.kart-bas p{
  font-size:var(--yazi-13); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); margin-top:var(--bosluk-4);
  /* 🔴 YASLAMA İSTİSNASI — kabuk katmanı `p`ye `text-align:justify` yazıyor
     ve DOĞRUDAN bildirim, kabın kalıtımını yener. Ölçüldü 2026-09-01:
     kart açıklaması iki yana yaslanıyordu, kaynakta `start`. §21'in aynısı. */
  text-align:left; text-align-last:auto;
}
.kart-baslik{
  display:flex; align-items:center; gap:var(--bosluk-8);
  font-size:var(--yazi-16); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); line-height:var(--satir-govde);
  letter-spacing:normal;
}
/* 🔴 KANON ADI YOKLUĞU İÇERİK KAYBETTİRDİ — ölçüldü 2026-09-03.
   slot-egzersiz `.kart.dolgulu` + `.ozet-bas` kabında gövde metnini
   saracak bir kanon adı BULAMADI (`.kart-bas p` var ama `.kart-bas`a
   bağlı) ve sınıfsız `<p>` bırakmak tarayıcı varsayılanı basmak olacağı
   için kaynağın KATALOG TANITIM CÜMLESİNİ ÇIKARDI.
   🔴 Kanon boşluğunun en pahalı biçimi: ad yokluğu İÇERİK siliyor.
   Ölçüt kaynağın kendi kart gövde metni: 13px · `--muted` · gövde satırı.
   Bileşen değil KALEM — §1'in içinde, yeni bölüm açılmadı (K8/1). */
.kart-metin{
  font-size:var(--yazi-13); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); line-height:var(--satir-govde);
}
.kart-metin + .kart-metin{ margin-top:var(--bosluk-9); }
.kart-metin a{ color:var(--aksan-koyu); font-weight:var(--agirlik-kalin); }

.kart-baslik i{ color:var(--aksan); font-size:var(--yazi-15); }

.kart-govde{ padding:var(--bosluk-24); }
.kart-govde.bosluksuz{ padding:0; }

.kart-alt{
  display:flex; align-items:center; gap:var(--bosluk-16); flex-wrap:wrap;
  padding:var(--bosluk-16) var(--bosluk-24);
  border-top:var(--cizgi-1) solid var(--cizgi);
}
.kart-alt>.dugme{ margin-left:auto; }
/* 🔴 PANEL KARTININ AYAĞI SARMAZ. Taban `.kart-alt` `flex-wrap:wrap`
   yazıyor; kaynağın karşılığı (`fit-shell.css:1477`) yalnız `padding` ve
   `border-top` bildiriyor, sarma varsayılanda kalıyor → `nowrap`.
   Kaynağın seçicisiyle AYNI kapsama yazıldı (`.pnl-card .pc-foot`);
   taban değiştirilmedi, çünkü `.kart-alt`ı başka kaplar da kullanıyor ve
   onların ölçülmüş çifti yok — ölçülmemiş bir kalemi değiştirmek,
   ölçülmüş bir kalemi düzeltmekle aynı şey değildir.
   ⚠ ÜÇ TUR GÖRÜNMEDİ: `flexWrap` ölçüm listesinde yoktu (2026-09-02'de
   eklendi). Sarma kararını hiçbir özellik okumuyordu. */
.kart.panel .kart-alt{ flex-wrap:nowrap; }
.kart-alt .not{
  font-size:var(--yazi-12-5); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde);
}
.kart-alt .not a{ color:var(--aksan-koyu); font-weight:var(--agirlik-kalin); }
.kart-alt .not a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ---- varyantlar ---- */
.kart.dolgulu{ padding:var(--bosluk-24); }
.kart.tasma-kapali{ overflow:hidden; }     /* içindeki tablo köşeleri kırpılsın */
.kart.genis{                                /* giriş kartı ailesi — 02 §1 B12 */
  border-radius:var(--yuvarlak-xl);
  padding:var(--bosluk-32) var(--bosluk-40) var(--bosluk-32);
  display:flex; flex-direction:column;
}
/* ---- PANEL VARYANTI — kaynak `.pnl-card` (fit-shell.css:1456-1478) ----
   🔴 ÖLÇÜMLE AYRILDI (2026-09-01, destek modülü turu). Kanon 51 kart adını
   tek `.kart`e indirmişti; render edilmiş DOM kaynakta İKİ ayrı kart kiti
   olduğunu gösterdi ve ikisi de yayılımlı:
       `.fp-card` ailesi (taban)   başlık 20/24 · gap 8  · ayak 16/24
       `.pnl-card` ailesi (panel)  başlık 18/22 · gap 10 · ayak 14/22
   Kaynak kendi şerhinde bunu numaralandırmış bile: §C3 "başlık kabı
   18px 22px", §C5 "gövde 22px", §C6 "ayak 14px 22px".
   Aynı gerekçe §11'de de yaşandı (modül şeridi ≠ kategori şeridi):
   ölçüm iki kalemin ayrı olduğunu söylüyorsa kanon onları birleştirmez.
   ✅ Gövde dolgusu ÖLÇÜLDÜ (2026-09-01, hesabim turu · B41): kaynağın
     bildirimi (22px) doğrulandı. `hesabim-v1 .pnl-card .pc-body` → 22px,
     `destek-v1` → 0px çünkü orada sınıf `pc-body flush`. İki ekran çelişmiyor,
     ikinci `.bosluksuz` kipinde. Kural aşağıda yazılı; not kapandı. */
.kart.panel+.kart.panel{ margin-top:var(--bosluk-16); }
.kart.panel>.kart-bas{ padding:var(--bosluk-18) var(--bosluk-22); gap:var(--bosluk-14); }
.kart.panel>.kart-bas .kart-baslik{ gap:var(--bosluk-10); }
.kart.panel>.kart-bas p{ margin-top:var(--bosluk-5); }
/* §C5 · panel gövdesi 22px (taban `.kart-govde` 24px değil).
   ⚠ `:not(.bosluksuz)` ZORUNLU: bu seçici (0,3,0), `.kart-govde.bosluksuz`
   ise (0,2,0) — kapsam daraltılmazsa panel kuralı `.bosluksuz`u yener ve
   destek panelinin kenardan kenara akan listesi 22px içeri kaçar. Ölçümde
   yakalandı (taleplerim, 2 kırmızı). */
.kart.panel>.kart-govde:not(.bosluksuz){ padding:var(--bosluk-22); }
/* Panel ayağı BLOKTUR, taban `.kart-alt` gibi flex satır DEĞİL — ölçüldü
   (`.pnl-card .pc-foot` display:block). Taban ayak birden çok düğmeyi yan
   yana dizer; panel ayağı tek bir bloğu (sayfalama) taşır ve o blok kendi
   ortalamasını yapar. Flex kalsaydı sayfalama içeriği kadar daralır,
   `justify-content:center` görünmez olurdu. */
.kart.panel>.kart-alt{ display:block; gap:normal; padding:var(--bosluk-14) var(--bosluk-22); }
/* 🔴 AYAĞIN İKİNCİ KİPİ — `.kart-alt.eylem` (02 §36 · B41).
   Yukarıdaki blok kipi destek panelinin sayfalaması için doğru; hesabim'in
   ALTI ayağı ise `not + kaydedildi rozeti + düğme` üçlüsünü yan yana taşıyor
   ve düğme sağa yapışıyor. Blok kipte üçü alt alta düşer. İki ayrı KULLANIM,
   kusur değil — §11'in "modül şeridi ≠ kategori şeridi" deseninin aynısı.
   Ölçüm: `hesabim-v1 .pnl-card .pc-foot` render edilmiş DOM. */
.kart.panel>.kart-alt.eylem{
  display:flex; align-items:center; gap:var(--bosluk-14); flex-wrap:wrap;
}
.kart.panel>.kart-alt.eylem>.dugme{ margin-left:auto; padding:var(--bosluk-14) var(--bosluk-26); }
.kart.panel>.kart-alt.eylem .not{ font-size:var(--yazi-12-5); color:var(--metin-ikincil); }

/* ---- FORM VARYANTI — kaynak `.form-card` / `.fc-head` ---------------
   Kaynağın ÜÇÜNCÜ kart kiti (bkz. B31: taban `.fp-card`, panel
   `.pnl-card`). Ayrımı yapısal, süs değil: form kartının başlığı kabın
   İÇİNDE yaşar — kart tek bir dolgu taşır (26px) ve başlık o dolgunun
   içinde alt ayraçla ayrılır. Taban/panel kitinde başlık KENDİ dolgusunu
   taşıyan ayrı bir şerittir ve kart dolgusuzdur.
   Sebebi de belli: form alanları kart kenarına kadar uzanmalı; ayrı
   şeritli başlık iki farklı sol kenar üretirdi (B34'ün ta kendisi). */
.kart.form{ padding:var(--bosluk-26); }
.form-bas{
  margin-bottom:var(--bosluk-22);
  padding-bottom:var(--bosluk-18);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
.form-bas h2{
  font-size:var(--yazi-20); font-weight:var(--agirlik-kalin);
  display:flex; align-items:center; gap:var(--bosluk-11);
}
.form-bas h2 i{
  flex:none; width:38px; height:38px;
  border-radius:var(--yuvarlak-md);
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  display:grid; place-items:center; font-size:var(--yazi-15);
}
.form-bas p{
  font-size:var(--yazi-13); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); margin-top:var(--bosluk-7);
  text-align:left; text-align-last:auto;      /* yaslama istisnası — B33 */
}

.kart.uyari-kart   > .kart-bas{ border-bottom-color:var(--uyari-cizgi); }
.kart.uyari-kart   .kart-baslik i{ color:var(--uyari); }
.kart.tehlike-kart > .kart-bas{ border-bottom-color:var(--tehlike-cizgi); }
.kart.tehlike-kart .kart-baslik i{ color:var(--tehlike); }

@media (max-width:640px){
  /* 🔴 `flex-direction` TABANDA YAZILMAZ — kaynak İKİYE AYRILIYOR ve
     ikisi de ölçüldü (@390):
       destek-v1  `.pc-head` → row      (≤640 dalı bildirmiyor)
       hesabim-v1 `.pc-head` → column   (sayfa CSS'i açıkça yazıyor)
     `.alan` 20/22 · `.kart-alt` block/flex · `.zorunlu` renginin DÖRDÜNCÜ
     örneği: aynı kit, iki sayfada iki ayrı karar. Ayrım kusur değil
     KULLANIM: hesabim'in 10 kart başlığının onu da uzun açıklama taşıyor
     ve 390px'te satır kipinde başlığı eziyor; destek'inkiler kısa.
     §11'in "ölçüm iki kalemin ayrı olduğunu söylüyorsa birleştirme"
     kuralı (B24) — kip aşağıda, `.acikli`. */
  .kart-bas{ align-items:flex-start; gap:var(--bosluk-12); padding:var(--bosluk-16); }
  /* AÇIKLAMALI PANEL — başlığı uzun açıklama taşıyan kart. Dar ekranda
     başlık ve sağ kalem alt alta iner. */
  .kart.panel.acikli>.kart-bas,
  .kart.uyari-kart>.kart-bas,
  .kart.tehlike-kart>.kart-bas{ flex-direction:column; }

  /* MD2 · ayağın eylem kipi — düğme TAM GENİŞLİK ve ÜSTTE. Taban
     `margin-left:auto` dar ekranda düğmeyi nota yapıştırıyordu. */
  .kart.panel>.kart-alt.eylem>.dugme{ width:100%; margin-left:0; order:1; }
  .kart.panel>.kart-alt.eylem .not{ order:2; }
  .kart.panel>.kart-alt.eylem .kaydedildi{ order:3; }

  /* MD3 · modal ayağının yatay dolgusu geri gelir (kaynakta `.pc-foot`un
     ≤640 dalı `.tfa-foot`un sıfırlamasını eziyor). */
  .modal-ayak{ padding-inline:var(--bosluk-16); }

  /* MD4 · adım şeridi küçülür */
  .adim-serit li{ font-size:var(--yazi-11-5); }

  /* MD5 · kapak düzenleme düğmesi — `.kapak-muhur`un kardeşi, aynı köşe
     ailesi; mühürün dalı yazılırken atlanmıştı. */
  .kapak-duzenle{
    top:var(--bosluk-12); right:var(--bosluk-12);
    padding:var(--bosluk-8) var(--bosluk-13); gap:var(--bosluk-6);
    font-size:var(--yazi-11);
  }
  .kart-govde{ padding:var(--bosluk-16); }
  .kart.dolgulu{ padding:var(--bosluk-20); }
  .kart.genis{ padding:var(--bosluk-24) var(--bosluk-20); border-radius:var(--yuvarlak-lg); }
  /* Form kartı dar ekranda küçülür VE köşesi düşer — kaynak
     `destek-v1.html:224` (`.form-card{padding:20px 16px;border-radius:
     var(--radius-md)}`). Kanonda mobil dal hiç yoktu, 26px/16r kalıyordu. */
  .kart.form{ padding:var(--bosluk-20) var(--bosluk-16); border-radius:var(--yuvarlak-md); }
}


/* =====================================================================
   2 · DÜĞME — 51 sayfa
   Kaynağın EN DERLİ TOPLU bileşeni: 61 sayfanın 50'si tek `.btn` adını
   kullanıyor. Kanon yalnız varyant adlarını Türkçeleştiriyor.
   ===================================================================== */

.dugme{
  display:inline-flex; align-items:center; justify-content:center;
  /* 🔴 `justify-content` KUTUYU ortalar, METNİ değil — iki satıra düşen
     düğmede ikinci satır sola yaslanıyordu. Kaynak `fit-shell.css:242`
     açıkça `text-align:center` yazıyor (02 §36 · B44 · slot-3).
     B36'nın düğme ailesindeki karşılığı; §2'yi kullanan HER ekranı etkiler. */
  text-align:center;
  gap:var(--bosluk-10);                    /* kaynak 10px */
  font-family:inherit; font-weight:var(--agirlik-kalin);
  font-size:var(--yazi-14-5);
  cursor:pointer; border:none;
  /* Kaynak `14px 26px` (fit-shell.css:245). İlk turda 4px ölçeğine
     yuvarlanıp 16/24 olmuştu; ara kademeler geldikten sonra birebir. */
  padding:var(--bosluk-14) var(--bosluk-26);
  border-radius:var(--yuvarlak-md);
  transition:var(--sure-yavas) var(--yumusama);
  min-height:44px;                 /* WCAG 2.5.8 — kaynakta bazı düğmelerde eksikti */
}
.dugme:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset:var(--odak-ofset);
}

.dugme.birincil{ background:var(--aksan-koyu); color:var(--kagit); }
.dugme.birincil:hover{ background:var(--aksan-koyu-2); transform:translateY(-2px); }

.dugme.hayalet{
  background:var(--kagit); color:var(--murekkep);
  border:var(--cizgi-1) solid var(--cizgi);
}
.dugme.hayalet:hover{ border-color:var(--murekkep); transform:translateY(-2px); }

.dugme.uyari{
  background:var(--kagit); color:var(--uyari);
  border:var(--cizgi-1) solid var(--uyari-cizgi);
}
.dugme.uyari:hover{ border-color:var(--uyari); background:var(--uyari-yikama); transform:translateY(-2px); }

.dugme.tehlike{ background:var(--tehlike); color:var(--kagit); }
.dugme.tehlike:hover{ background:var(--tehlike-koyu); transform:translateY(-2px); }

.dugme.cizgili{                    /* koyu zeminde ince kenarlı */
  background:transparent; color:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
}

.dugme.kucuk{ padding:var(--bosluk-12) var(--bosluk-20); font-size:var(--yazi-13-5); }

.dugme[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* 🔴 KAYNAKTAN AYRILDI — kaynakta İKİ birincil düğme vardı, İKİ kontrastla:
   biri aksanın kendisini (3.54:1, AA ALTI · 23 sayfa), öteki koyu adımını
   (5.45:1, AA · 30 sayfa) kullanıyordu. Kanonda tek birincil var ve AA
   geçen adımı kullanır. Ayrım kaybolmuyor: ikisi de aynı işi yapıyordu.
   Ölçüm ve sayfa listesi 02-bilesenler.md §16 G5. */


/* =====================================================================
   3 · FORM ALANI KİTİ — 11 sayfa · kaynak `.fk-*`
   ===================================================================== */

/* 🔴 ÖLÇÜM DÜZELTMELERİ · 2026-09-01 (destek `#yeni` turu) — B35.
   Kitin ALTI değeri 4px merdivenine yuvarlanmıştı; ikisi hariç hepsi
   İKİ BAĞIMSIZ SAYFADA da aynı çıktı (`destek-v1` · `hesabim-v1`), yani
   yuvarlama kanonun kendi hatasıydı, sayfa sapması değil:
       etiket alt payı   8 → 9      girdi dolgusu 12/16 → 13/15
       etiket boşluğu    8 → 7      yardım boşluğu    8 → 7
       ızgara boşluğu 16/20 → 16/18
   ⚠ `.alan` alt payı İKİ SAYFADA FARKLI: destek 20px · hesabim 22px
     (kanon 24 yazıyordu, ikisine de uymuyordu). Kanona ölçülen ikisinden
     biri kondu (20); hesabim turunda yeniden bakılacak — 02 §34'te
     "kaynak çelişkisi" olarak bildirildi. */
/* 🔴 20 → 22 · BEYAR KARARI 2026-09-01 (02 §29 md.14). Kaynak kendi içinde
   çelişiyordu: `hesabim-v1` 22 (6 örnek) · `odemelerim-v1` 22 · `destek-v1`
   20 (4 örnek). Üç bağımsız ölçümün ikisi 22 dedi ve 22 kartın kanonik iç
   nefesi (`.ayar-satir` 17/22 · `.kart-bas` 18/22 · panel gövdesi 22).
   Destek ekranlarındaki 20 artık BELGELENMİŞ SAPMA. */
.alan{ margin-bottom:var(--bosluk-22); }
.alan:last-child{ margin-bottom:0; }

.alan-etiket{
  display:flex; align-items:baseline; gap:var(--bosluk-7);
  font-size:var(--yazi-14); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); margin-bottom:var(--bosluk-9);
}
.alan-etiket .zorunlu{ color:var(--aksan-koyu); }
.alan-etiket .istege-bagli{
  font-size:var(--yazi-11-5); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde);
}
.alan-etiket .alan-sayac{
  margin-left:auto; font-size:var(--yazi-11-5);
  color:var(--metin-ikincil); font-weight:var(--agirlik-govde);
  letter-spacing:var(--aralik-genis);
}

.alan-girdi,.alan-secim,.alan-metin{
  width:100%; min-height:44px;              /* WCAG 2.5.5 — kit ölçüsü */
  font-family:inherit; font-size:var(--yazi-14);
  font-weight:var(--agirlik-govde); color:var(--murekkep);
  background:var(--zemin);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md);
  padding:var(--bosluk-13) var(--bosluk-15);
  outline:none;
  transition:border-color var(--sure) var(--yumusama),
             box-shadow  var(--sure) var(--yumusama);
}
.alan-girdi::placeholder,.alan-metin::placeholder{ color:var(--yer-tutucu); }
.alan-girdi:focus,.alan-secim:focus,.alan-metin:focus{
  border-color:var(--aksan);
  box-shadow:var(--golge-halka);
}
.alan-metin{ min-height:104px; resize:vertical; line-height:var(--satir-genis); }
/* UZUN kip — serbest anlatım alanı (destek talebi gövdesi, mesaj).
   Kaynakta ölçülen İKİNCİ değer: `destek-v1.html:122` 140px, `hesabim-v1`
   104px. İkisi de gerçek; rol farklı, o yüzden birleştirilmedi. */
.alan-metin.uzun{ min-height:140px; }
.alan-secim{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-repeat:no-repeat;
  background-position:right var(--bosluk-16) center;
  padding-right:var(--bosluk-40);
  /* 🔴 OK KAYNAĞIN GLİFİ — token katmanında, gerekçesiyle (`--secim-ok`).
     Eskiden iki CSS üçgeniyle çiziliyordu; kip farkıydı ve ölçüm
     görmüyordu (`backgroundImage` OZ listesinde yoktu). */
  background-image:var(--secim-ok);
  background-size:auto;
  background-position:right var(--bosluk-15) center;
}

.alan-yardim{
  display:flex; align-items:flex-start; gap:var(--bosluk-7);
  font-size:var(--yazi-12-5); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); margin-top:var(--bosluk-8);
  line-height:var(--satir-orta);
  text-align:left; text-align-last:auto;      /* yaslama istisnası — B33 */
}
/* Uzun yardım metni ikonun ALTINA sarmasın diye metin kendi kutusunda. */
.alan-yardim>span{ min-width:0; }
.alan-yardim i{
  color:var(--aksan-koyu); font-size:var(--yazi-12);
  margin-top:2px; flex:none;
}
.alan-yardim.tamam{ color:var(--aksan-koyu); }

/* Hata — kaynakta İKİ ad, İKİ mekanizma, İKİ renk vardı
   (`.fk-hata.show` + `--hs-danger` · `.fk-field.has-error .fk-error` +
   yerel `--au-danger`). Kanon çoğunluğu ve kabukta tanımlı olanı aldı. */
/* 🔴 K3 GERİ ALINDI — İKİ AYRI BİLEŞEN TEK ADA İNDİRİLMİŞ.
   Kaynakta iki farklı sınıf var ve adları bir harf ayrı:
     .fk-err    (destek-v1)  form ALANININ hatası — flex-start · 600 · 1.45
     .fk-error  (giris-v1)   kimlik formunun hatası — center · 700 · display:none
   `.alan-hata` BİRİNCİSİNİN karşılığı; ikincisininki `.giris-hata`.
   Bir tur önce ikincisinin ölçüsü birinciye yazıldı ve `olustur` ekranı
   dört 🔴 verdi — ölçüm iki ekranın çeliştiğini gösterdi ve haklıydı.
   ⚠ "Aynı seçici birden fazla kez tanımlı" tuzağının kardeşi: burada
   seçici aynı değil, ADI BİR HARF FARKLI. `.fk-err` ↔ `.fk-error`.
   (2026-09-02) */
.alan-hata{
  display:none; align-items:flex-start; gap:var(--bosluk-7);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta);
  color:var(--tehlike); margin-top:var(--bosluk-8);
  line-height:var(--satir-sik);
  text-align:left; text-align-last:auto;      /* yaslama istisnası — B33 */
}
.alan-hata.goster{ display:flex; }
.alan-hata i{ font-size:var(--yazi-12); margin-top:2px; flex:none; }
.alan-girdi.hatali,.alan-secim.hatali{
  border-color:var(--tehlike);
  box-shadow:0 0 0 var(--odak-kalinlik) var(--tehlike-yikama);
}

/* 🔴 K2 — ALT PAYI KAYNAKTA YOK. `.fk-grid{display:grid;gap:16px 18px}`;
   ızgaradan sonraki nefesi `.fk-grid + .fk-field{margin-top:22px}` veriyor
   ve o kural kanonda da var. Kanonun eklediği `margin-bottom:20` çoğu
   yerde marj çakışmasıyla 22'ye yeniliyordu (zararsız) ama ızgaradan
   sonra payı 20'den KÜÇÜK bir kardeş gelirse 20'ye yuvarlıyordu —
   kayıt panosunda `.onay-satirlari`nin 18'i tam öyle (slot-1 ölçtü).
   Ölçüm: FIT `0px` ↔ kanon `0px 0px 20px`. */
.alan-izgara{ display:grid; gap:var(--bosluk-16) var(--bosluk-18); margin-bottom:var(--bosluk-20); }
/* 🔴 ALT PAYI SAYFA YERELDİR. Kabuk (`fit-shell.css:4852`) `.fk-grid`e
   alt pay YAZMIYOR; `destek-v1` sayfa yerel olarak `margin-bottom:20px`
   ekliyor, `giris-v1` eklemiyor. Kanonun sayfa yerel katmanı yok, o
   yüzden aynı çizim taban + kapsam ezmesiyle üretiliyor: taban destek'in
   20'sini taşır, kimlik kartı sıfırlar.
   ⚠ Kayıt panosunda bu fark GÖRÜNÜR bir sonuç veriyordu: ızgaradan
   sonraki `.onay-satirlari`nin 18'i marj çakışmasında 20'ye yuvarlanıyordu
   (slot-1 ölçtü). */
.giris-kart .alan-izgara{ margin-bottom:0; }
/* Koşullu alan grubu `hidden` ile kapanır — kural AÇIKÇA yazılmalı:
   `.alan-izgara`nın kendi `display:grid`i (0,1,0) UA'nın `[hidden]`
   kuralını (0,0,1) ezer ve grup gizlenmez (kaynağın kendi şerhi,
   destek-v1.html:142-146; `.alan-hata[hidden]` ile aynı desen). */
.alan-izgara[hidden]{ display:none; }
.alan-izgara .alan{ margin-bottom:0; }
.alan-izgara.c2{ grid-template-columns:1fr 1fr; }
.alan-izgara.c3{ grid-template-columns:repeat(3,1fr); }
/* 🔴 24 → 22 · ÖLÇÜLDÜ 2026-09-01 (`.fk-grid` üst payı) — B35 ailesi. */
.alan-izgara+.alan-izgara,
.alan-izgara+.alan,.alan+.alan-izgara{ margin-top:var(--bosluk-22); }

/* ---- FORM DÜZEYİ HATA ÖZETİ — kaynak `.fk-summary` ------------------
   Alan hatası (`.alan-hata`) DEĞİLDİR: o tek alanı, bu FORMU anlatır ve
   gönderide `role="alert"` ile duyurulur. §13 `.uyari-kutu.tehlike` ile
   birleştirilmedi — ölçüm ayırdı: 13/600 · dolgu 13/15 · boşluk 9
   (kutu: 13.5/500 · dolgu 16 · boşluk 12). */
.alan-ozet{
  display:none; align-items:flex-start; gap:var(--bosluk-9);
  font-size:var(--yazi-13); font-weight:var(--agirlik-orta);
  line-height:var(--satir-orta);
  padding:var(--bosluk-13) var(--bosluk-15);
  margin:0 0 var(--bosluk-20);
  border-radius:var(--yuvarlak-md);
  background:var(--tehlike-yikama);
  border:var(--cizgi-1) solid var(--tehlike-cizgi-ozet);
  color:var(--tehlike-koyu);
  text-align:left; text-align-last:auto;      /* yaslama istisnası — B33 */
}
.alan-ozet.goster{ display:flex; }
.alan-ozet i{ font-size:var(--yazi-14); margin-top:1px; flex:none; }

/* ---- DOSYA SEÇİCİ — kaynak `.fk-file` kiti -------------------------
   Gerçek `<input type=file>` GİZLENMEZ, `.yalniz-okuyucu` ile ekran
   okuyucuya açık kalır; görünen kalem onun `<label>`ıdır. Böylece klavye
   odağı gerçek girdide durur ve odak halkası etikete yansıtılır. */
.alan-dosya{ display:flex; align-items:center; gap:var(--bosluk-12); flex-wrap:wrap; }
.alan-dosya-dugme{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--bosluk-9); min-height:44px;
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md);
  padding:var(--bosluk-11) var(--bosluk-16);
  cursor:pointer; transition:var(--sure) var(--yumusama);
}
.alan-dosya-dugme:hover{ border-color:var(--aksan); color:var(--aksan-koyu); }
/* 🔴 KAYNAKTAN AYRILDI — halka aksan YIKAMASI idi (`3px var(--fit-wash)`),
   beyaz düğme zeminine karşı 1.11:1: klavye odağı görünmüyordu. §11'in
   sekme odağıyla birebir aynı kusur ve aynı düzeltme (02 §29 md.2). */
.alan-dosya input[type="file"]:focus-visible+.alan-dosya-dugme{
  outline:var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset:var(--odak-ofset);
}
.alan-dosya-ad{
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta);
  color:var(--murekkep-yumusak); min-width:0; overflow-wrap:anywhere;
}
.alan-dosya-sil{
  border:none; background:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:var(--yazi-12-5);
  font-weight:var(--agirlik-kalin); color:var(--aksan-murekkep);
}
.alan-dosya-sil[hidden]{ display:none; }

/* ---- GÖNDERİ ŞERİDİ — kaynak `.tk-submit` --------------------------
   Not SOLDA, düğme SAĞDA; ikisi arasında `space-between`. Üstünde 1px
   ayraç: form biter, karar başlar. */
.alan-gonder{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--bosluk-16); flex-wrap:wrap;
  margin-top:var(--bosluk-22); padding-top:var(--bosluk-20);
  border-top:var(--cizgi-1) solid var(--cizgi);
}
.alan-gonder .not{
  font-size:var(--yazi-12-5); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); max-width:300px;
  text-align:left; text-align-last:auto;      /* yaslama istisnası — B33 */
}
/* Gönder düğmesi taban `.dugme`den BÜYÜK — kaynağın kendi kuralı
   (`.tk-submit .btn{padding:14px 28px;font-size:15px}`). Formun son
   kararı, ekranın en ağır kalemi. */
.alan-gonder .dugme{ padding:var(--bosluk-14) var(--bosluk-28); font-size:var(--yazi-15); }

@media (max-width:640px){
  .alan-izgara.c2,.alan-izgara.c3{ grid-template-columns:1fr; }
  .alan-gonder .dugme{ width:100%; justify-content:center; }
  .alan-gonder .not{ max-width:none; }
}


/* =====================================================================
   4 · TABLO — 4 sayfa
   Kaynakta ortak sınıf YOK (`.od-tab` · `.fd-tablo` · `.ld-tablo`).
   Desen aynı: versal başlık, hairline satır ayracı, hover zemini.
   ===================================================================== */

.tablo{ width:100%; border-collapse:collapse; }
.tablo th,.tablo td{
  padding:var(--bosluk-13) var(--bosluk-16);   /* 🔴 12 → 13 · B22 ailesi (02 §36) */
  border-bottom:var(--cizgi-1) solid var(--cizgi);
  font-size:var(--yazi-13-5);
  text-align:left; vertical-align:middle;
}
.tablo thead th{
  font-size:var(--yazi-11); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-versal); text-transform:uppercase;   /* 🔴 .02 → .06 (B44) */
  color:var(--murekkep-yumusak); background:var(--zemin);
}
.tablo tbody tr:last-child td{ border-bottom:0; }
.tablo tbody tr:hover{ background:var(--zemin); }
.tablo td b{ display:block; color:var(--murekkep); font-weight:var(--agirlik-kalin); }
.tablo td small{
  display:block; font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde);
  color:var(--metin-ikincil); margin-top:3px;
}
.tablo .sag{ text-align:right; }
/* ---- HÜCRE TİPLERİ (slot-3 T3) — sayı hizası ve ağırlık ölçüldü ------
   `tabular-nums` ZORUNLU: referans numaraları ve tutarlar alt alta
   dizildiğinde orantılı rakamlarla kolon kayıyor. */
.tablo .no{
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-genis); font-variant-numeric:tabular-nums;
  color:var(--murekkep);
}
/* Kaynak mirası AÇIKÇA kesiyor — `.no`nun tabular aralığı alt satıra inmesin. */
.tablo .no small{ letter-spacing:normal; }
.tablo .tarih{
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-orta);
  color:var(--metin-ikincil); white-space:nowrap;
}
.tablo .tutar{
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-ekstra);
  color:var(--murekkep); white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* Defter kipi — yatay kaydırmanın anlam kazandığı eşik (slot-3 V7). */
.tablo.defter{ min-width:640px; }

/* dar ekranda yatay kaydırma — tablo sayfayı taşırmaz */
/* `border-radius` — kap kartın DIŞINDA kullanıldığında köşeyi kırpsın diye.
   Kart içinde `overflow:hidden` zaten kırpıyor, o yüzden görünürde fark
   yoktu ve kanonda eksik kalmıştı (B44 · slot-3). */
.tablo-kap{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--yuvarlak-lg);
}


/* =====================================================================
   5 · ROZET — 37 sayfa · kaynakta 72 ad (yayılımı olan tek ad `.fp-badge`)
   ===================================================================== */

.rozet{
  /* 🔴 gap 4 → 6 (2026-09-02). Kanon 4 yazıyordu; kaynağın `.fp-badge`i
     6 yazıyor ve DÖRT bağlamda doğrulandı (FIT pk-paketim · od-abonelik
     ↔ kanon paketlerim · odemelerim). `.rozet` ↔ `.fp-badge` çifti
     hiçbir ekran dosyasında yoktu, o yüzden bugüne kadar hiç ölçülmedi;
     sohbet panelinin künye rozetinde ortaya çıktı (slot-3). */
  display:inline-flex; align-items:center; gap:var(--bosluk-6);
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-genis);
  padding:var(--bosluk-4) var(--bosluk-12);
  border-radius:var(--yuvarlak-sm);
  border:var(--cizgi-1) solid;
  /* ⚠ `white-space` TABANDA BİLDİRİLMEZ — kaynağın `.fp-badge`i hiç
     bildirmiyor. Sayfa akışında satır kutusu zaten sarmıyor; dar bir
     kapta (sohbet balonunun künyesi) `normal`e düşmesi kaynağın
     davranışı. Kanonun `nowrap`ı orada ayrışıyordu.
     🔴 `.cipler.tek-satir>*` ve `.cip.hap` kendi `nowrap`larını yazıyor —
     ihtiyacı olan KAP yazar, taban değil. Bu dalgada altıncı kez aynı
     desen: iki kaynak sınıfı tek ada indiğinde davranış ayrışır. */
}
.rozet.olumlu{  background:var(--aksan-yikama); color:var(--aksan-koyu); border-color:var(--aksan-cizgi); }
.rozet.bekleme{ background:var(--altin-zemin);  color:var(--altin-metin); border-color:var(--altin-cizgi); }
.rozet.pasif{   background:var(--zemin);        color:var(--murekkep-yumusak); border-color:var(--cizgi); }
.rozet.durdu{   background:var(--tehlike-yikama); color:var(--tehlike-koyu); border-color:var(--tehlike-cizgi-yumusak); }
/* 🔴 KENAR BEYAZ — Beyar kararı, 2026-09-02: "KAYNAK kazanır."
   Ölçüldü: kaynak `1px solid #fff` basıyor, kanon `transparent` yazmıştı.
   Kapak fotoğrafının üstünde duran rozeti beyaz kenar AYIRIYOR; saydam
   kenarda rozet zemine karışıyor. Kanon kaynağa döndü. */
.rozet.dolu{    background:var(--aksan-koyu);   color:var(--kagit); border-color:var(--kagit); font-weight:var(--agirlik-kalin); }
.rozet.dolu i{  color:var(--kagit); font-size:var(--yazi-12); }


/* =====================================================================
   6 · ÇİP — 13 sayfa (filtre/etiket seçimi)
   ===================================================================== */

/* 🔴 gap 8 → 9 · dolgu 0 → 7px 0 (B44). Kaynak `fit-shell.css:2049`
   (`.fgroup`) ikisini de bildiriyor; kanon ikisini de kaçırmıştı. */
.cipler{ display:flex; flex-wrap:wrap; gap:var(--bosluk-9); align-items:center; padding:var(--bosluk-7) 0; }
/* TEK SATIR — kalemler sarmaz, sığmayan yatay kaydırılır.
   Ölçüm: `fit-shell.css:1112-1119` (`.fb-chiprow`).
   ⚠ `padding-block:5px` ÖLÇÜLDÜ ve gerekli: kalem `::before` ile 44px
     dokunma hedefi açıyor, `overflow-x` verilince dikey eksen de `auto`ya
     döner ve o hedef kırpılırdı. Dolgu hedefi kabın içinde tutar.
   ⚠ Kaydırma çubuğu gizlenir — şerit bir liste değil, bir seçim satırı;
     çubuk kalemlerin altında ikinci bir çizgi gibi okunuyordu. */
.cipler.tek-satir{
  flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:var(--bosluk-6);
}
.cipler.tek-satir::-webkit-scrollbar{ display:none; }
/* Kural ÇOCUĞA yazılır, `.cip`e değil: tek satır kabının garantisi
   "içindeki hiçbir kalem daralmaz ve kırılmaz"dır — kalemin sınıf adı ne
   olursa olsun geçerli. `.cip` hedeflenseydi kabı başka bir kalem
   ailesiyle kullanan ekran sessizce iki satıra düşerdi (ölçüldü). */
.cipler.tek-satir>*{ flex:0 0 auto; white-space:nowrap; }
/* ORTALI KİP — bandın altındaki tip şeridi. Taban `.cipler` kart içi
   şerit için ölçüldü (gap 9 · dolgu 7px 0); bu KAP AYRI ve kaynağın
   kendi ölçüsü farklı: ortalı · gap 8 · dolgusuz. İki ölçüm çelişmiyor,
   iki ayrı kabı ölçüyorlar (slot-1 ↔ slot-3). */
.cipler.ortali{ justify-content:center; gap:var(--bosluk-8); padding:0; }
/* 🔴 ORTALI + KAYAN KAP = İLK KALEM ERİŞİLEMEZ. Ölçüldü: içerik kaba
   sığmayınca `center` taşmayı İKİ YANA dağıtır, ama `scrollLeft` negatif
   olamaz — soldaki pay geri getirilemez ve ilk çipin bir kısmı hiçbir
   kaydırmayla ortaya çıkmaz.
     kanon @1440  ilk çipin 18px'i kesik      (tek-satir açılınca doğdu)
     FIT   @ 390  ilk çipin 111px'i kesik     ← KAYNAKTA DA VAR
   `safe` anahtar sözcüğü tam bunun için: sığdığında ortalar, taşınca
   `start`a düşer. Kaynağın düz `center`ı taştığı anda kalem kaybediyor;
   kanon sığan hâlde AYNI görünür, taşan hâlde kalem kaybetmez.
   ⚠ Yalnız kayan kaba yazılır — sarmalı kapta taşma olmaz, gerekmez. */
.cipler.ortali.tek-satir{ justify-content:safe center; }
.cipler .etiket{
  font-size:var(--yazi-13); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); margin-right:2px;
}
/* 🔴 `.cip`in KENDİSİ §43'TE — burada BİLEREK YOK.
   Eskiden burada ikinci bir tanım vardı; §43 onu kaynağa çekmek için
   yazıldı ama ESKİ BLOK SİLİNMEMİŞTİ, o yüzden §43'te yeniden
   bildirilmeyen her özellik (özellikle kaldırılması gereken
   `min-height:44px`) sızmaya devam ediyordu.
   🔴 B25'İN KANONA SIZMIŞ HÂLİ: "aynı seçici iki kez tanımlı, son
   bildirim geçerli" tuzağı kaynakta değil, KANONUN KENDİSİNDE oluştu.
   slot-1 ölçümle yakaladı (2026-09-01).
   ⚠ Durum adı da tekti: §6 `.cip.secili`, §43 `.cip.aktif` yazıyordu ve
   ikisi yan yana yaşıyordu. Tek ad kaldı: `.aktif`.
   Yeni bir bileşen bir öncekini EZMEK için yazılıyorsa, eskisi SİLİNİR. */


/* =====================================================================
   7 · BOŞ DURUM — 24 sayfa · kaynakta 14 ad
   `.lib-empty` `.pe-ico` `.fpx-bos` `.pf-empty` `.pnl-empty` `.faq-none` …
   DÖRT PARÇA ZORUNLU: ikon · başlık · açıklama · eylem.
   (Kaynağın kendi kuralı — mesajlarim-v1 Kit §9: "boş ekran bir davettir")
   ===================================================================== */

.bos-durum{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:var(--bosluk-40) var(--bosluk-24);
}
.bos-durum[hidden]{ display:none; }

.bos-ikon{
  width:58px; height:58px;
  border-radius:var(--yuvarlak-md);
  /* 🔴 KAYNAKTAN AYRILDI — büyük boy `--aksan`/`--aksan-yikama` (3.18:1)
     kullanıyordu, küçük boy `--aksan-koyu`/`--aksan-yikama` (4.91:1).
     Kanon geniş paylı olanı iki boyda da kullanır. */
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  display:grid; place-items:center;
  font-size:var(--yazi-22);
  margin-bottom:var(--bosluk-16);
}
.bos-durum h3,.bos-durum h4{
  font-size:var(--yazi-15-5); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); margin-bottom:var(--bosluk-4);
}
.bos-durum p{
  font-size:var(--yazi-13); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); line-height:var(--satir-govde);
  max-width:38ch; margin-bottom:var(--bosluk-16);
  /* Kap `text-align:center` yazıyor ama kabuğun `p{text-align:justify}`
     kuralı KALITIMI yener — açıkça bildirilmeli (§21 · §24 ile aynı tuzak). */
  text-align:center; text-align-last:auto;
}

/* KART İÇİ boy — kaynak `.pnl-empty` (fit-shell.css:1505-1508).
   §D1: bağımsız kutu değildir, kartın İÇİNDE yaşar; §D5: tek eylem taşır.
   Ölçüldü (2026-09-01): taban `.bos-durum`dan dört yerde ayrılıyor ve
   dördü de kaynağın kendi bildirimi. `.buyuk` gibi ayrı bir kip. */
.bos-durum.kart-ici{ padding:var(--bosluk-44) var(--bosluk-24); }
.bos-durum.kart-ici .bos-ikon{ margin-bottom:var(--bosluk-14); }
.bos-durum.kart-ici h3,.bos-durum.kart-ici h4{ margin-bottom:var(--bosluk-5); }
/* 300px, `38ch` DEĞİL: kart içinde satır uzunluğu kabın genişliğinden
   bağımsız sabitlenmiş — kaynağın ölçüsü piksel. */
.bos-durum.kart-ici p{ max-width:300px; }

/* büyük boy — kendi kartı olan, sayfayı dolduran boş durum */
.bos-durum.buyuk{
  background:var(--kagit);
  border:var(--kesikli-kenar);
  border-radius:var(--yuvarlak-lg);
  padding:var(--bosluk-48) var(--bosluk-20) var(--bosluk-48);
}
.bos-durum.buyuk .bos-ikon{ width:64px; height:64px; font-size:var(--yazi-24); margin-bottom:var(--bosluk-20); }
.bos-durum.buyuk h3,.bos-durum.buyuk h4{ font-size:var(--yazi-20); margin-bottom:var(--bosluk-8); }
.bos-durum.buyuk p{ font-size:var(--yazi-14); max-width:50ch; margin-bottom:var(--bosluk-24); }

@media (max-width:640px){
  .bos-durum.buyuk{ padding:var(--bosluk-40) var(--bosluk-20); }
}


/* =====================================================================
   8 · SAYFALAMA — 3 sayfa · kaynak `.pagi` / `.pg`
   Biçim kabukta, davranış `fit-shell.js` FIT_PAGI'de.
   Kalemler:  «  ‹  1 2 3 … N  ›  »  + altında özet satırı
   ===================================================================== */

.sayfalama{
  display:flex; align-items:center; justify-content:center;
  gap:var(--bosluk-8); margin-top:var(--bosluk-40); flex-wrap:wrap;
}
.sayfa-dugme{
  /* 🔴 12px→13px · ÖLÇÜLDÜ 2026-09-01 (destek modülü, render edilmiş DOM):
     kaynak `.pg{padding:0 13px}`. Kanon 4px merdivenine yuvarlamıştı —
     §10 md.8'in tam olarak uyardığı hata. */
  min-width:44px; height:44px; padding:0 var(--bosluk-13);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:var(--yazi-14);
  font-weight:var(--agirlik-kalin); color:var(--murekkep);
  background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md);
  cursor:pointer; transition:var(--sure) var(--yumusama);
}
.sayfa-dugme:hover:not([disabled]):not(.aktif){ border-color:var(--aksan); color:var(--aksan-koyu); }
.sayfa-dugme:focus-visible{ outline:var(--odak-kalinlik) solid var(--odak-renk); outline-offset:var(--odak-ofset); }
.sayfa-dugme.aktif{ background:var(--aksan); border-color:var(--aksan); color:var(--kagit); cursor:default; }
.sayfa-dugme.ok i{ font-size:var(--yazi-12); }
.sayfa-dugme[disabled]{ opacity:.4; pointer-events:none; }

.sayfa-nokta{
  color:var(--metin-ikincil); font-weight:var(--agirlik-kalin);
  padding:0 2px; font-size:var(--yazi-14); user-select:none;
}
.sayfalama-not{
  width:100%; text-align:center;
  font-size:var(--yazi-12-5); color:var(--metin-ikincil);
  /* 🔴 8px→6px · ÖLÇÜLDÜ 2026-09-01: kaynak `.pagi-note{margin-top:6px}`.
     Aynı yuvarlama hatası. */
  font-weight:var(--agirlik-govde); margin-top:var(--bosluk-6);
}

@media (max-width:640px){
  .sayfalama{ gap:var(--bosluk-6); margin-top:var(--bosluk-32); }
  .sayfa-dugme{ min-width:40px; height:40px; font-size:var(--yazi-13); padding:0 var(--bosluk-10); }
}


/* =====================================================================
   9 · AYAR SATIRI — 3 sayfa · kaynak `.set-row` / `.sr-*`
   ===================================================================== */

.ayar-liste{ display:flex; flex-direction:column; }
/* DİKEY · 🔴 16px→17px · ÖLÇÜLDÜ 2026-09-01 (render edilmiş DOM):
   kaynak `.set-row{padding:17px 2px}`. Kanon 4px merdivenine yuvarlamıştı.

   YATAY · 🔴 KANON KARARI (02 §29 md.13) — 2px → 22px.
   Beyar istedi (2026-09-01), ölçümle doğrulandı. Kaynakta satırın yatay
   dolgusu 2px'ti; kartın KENDİ başlığı ve ayağı 22px kullanıyor, yani
   aynı kartın içinde iki ayrı sol kenar vardı:
       .pnl-card iç kenarı  291      (@1440, 860px okuma kolonu)
       .pc-head  başlığı    313      → nefes 22px
       .set-row  ikonu      293      → nefes  2px   ← 20px kayma
       satır sağı chevron  1147      → nefes  2px
   Satır kartın kenarına yapışıyor, başlıkla hizası kırılıyordu. Kanon
   satırı kartın kendi ölçüsüne çekti; artık üç kalem de 313'te başlar.
   ⚠ Değer `--kap-yan` (32px) DEĞİL: o SAYFA kabının yan dolgusu. Kart
     içindeki kanonik yatay nefes 22px — bu kartın kendi ölçülmüş değeri. */
.ayar-satir{
  display:flex; align-items:center; gap:var(--bosluk-16);
  padding:var(--bosluk-17) var(--bosluk-22);
}
.ayar-satir+.ayar-satir{ border-top:var(--cizgi-1) solid var(--cizgi); }
.ayar-satir[hidden]{ display:none; }

.as-ikon{
  flex:none; width:40px; height:40px;
  border-radius:var(--yuvarlak-md);
  background:var(--zemin); color:var(--murekkep-yumusak);
  display:grid; place-items:center; font-size:var(--yazi-15);
}
.as-metin{ flex:1; min-width:0; }
.as-metin b{ display:block; font-size:var(--yazi-14); color:var(--murekkep); }
.as-metin span{
  display:block; font-size:var(--yazi-12-5); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); margin-top:2px; line-height:var(--satir-sik);
}
.as-eylem{ flex:none; display:flex; align-items:center; gap:var(--bosluk-8); }

a.ayar-satir{ color:inherit; transition:background var(--sure-cabuk) var(--yumusama); }
a.ayar-satir:hover{ background:var(--aksan-yikama-2); }
a.ayar-satir:hover .as-ikon{ background:var(--aksan-yikama); color:var(--aksan-koyu); }

/* 🔴 DOLGU DA KÜÇÜLÜR (02 §36 · B42): kaynak satır içi seçime taban
   select'ten farklı dolgu veriyor — taban 13/40/13/15, satır içi 10/36/10/13.
   Kanon yalnız genişlik ve puntoyu almıştı, dolgu tabanda kalıyordu.
   slot-2 üç ayrı satırda doğruladı (`#vsGecmis` · `#ntfSessiz` · `#dlTarih`). */
.ayar-satir .alan-secim{
  width:220px; flex:none; font-size:var(--yazi-13);
  padding:var(--bosluk-10) var(--bosluk-36) var(--bosluk-10) var(--bosluk-13);
}
.ayar-satir .anahtar,.ayar-satir .as-eylem{ margin-left:auto; }

@media (max-width:640px){
  .ayar-satir{ flex-wrap:wrap; gap:var(--bosluk-10) var(--bosluk-14); }
  .ayar-satir .alan-secim{ width:100%; }
  /* Satır sarınca sağ kalem sola yığılmasın — kaynak `:5074` */
  .ayar-satir .anahtar,.ayar-satir .as-eylem{ margin-left:auto; }
}


/* =====================================================================
   10 · ANAHTAR — 3 sayfa · kaynak `.tgl`/`.tk` (+ profil'in `.hz-tgl`si)
   🔴 `.hz-tgl` DÜŞTÜ: ayrı bir kopyaydı, kapalı rayı 1.42:1 ile
   WCAG 1.4.11'i geçmiyordu ve dokunma hedefi 25px'ti (02 §4 B4).
   ===================================================================== */

.anahtar{
  position:relative; display:inline-flex; align-items:center;
  min-height:44px; flex:none; cursor:pointer;
}
.anahtar input{ position:absolute; opacity:0; pointer-events:none; }
.anahtar-ray{
  width:46px; height:26px;
  border-radius:var(--yuvarlak-md);
  background:var(--kontrol-kapali);      /* beyazla 3.43:1 → WCAG 1.4.11 */
  transition:background var(--sure) var(--yumusama);
  position:relative;
}
.anahtar-ray::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px;
  border-radius:var(--yuvarlak-daire);
  background:var(--kagit);
  box-shadow:var(--golge-sm);
  transition:transform var(--sure) var(--yumusama);
}
.anahtar input:checked+.anahtar-ray{ background:var(--aksan); }
.anahtar input:checked+.anahtar-ray::after{ transform:translateX(20px); }
.anahtar input:focus-visible+.anahtar-ray{
  box-shadow:0 0 0 var(--odak-kalinlik) var(--aksan-yikama);
}


/* =====================================================================
   11 · SEKME RAYI — 4 sayfa · kaynak `.pf-tabbar`/`.pf-tabs`/`.dt`
   ===================================================================== */

.sekme-ray{ position:static; padding:0; margin:var(--bosluk-24) 0 var(--bosluk-22); }
.sekmeler{
  display:flex; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  gap:var(--bosluk-4);
  background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md);
  padding:var(--bosluk-4);
  scrollbar-width:none;
  margin-inline:auto;
}
.sekmeler::-webkit-scrollbar{ display:none; }

.sekme{
  font-family:inherit; font-weight:var(--agirlik-kalin);
  font-size:var(--yazi-13); color:var(--metin-ikincil);
  background:transparent; border:none;
  border-radius:var(--yuvarlak-sm);
  padding:var(--bosluk-9) var(--bosluk-16);
  min-height:44px; cursor:pointer; text-align:left;
  display:inline-flex; align-items:center; gap:var(--bosluk-7);
  transition:var(--sure) var(--yumusama);
  white-space:nowrap; flex:none; text-decoration:none;
}
/* 🔴 KALDIRMA GERİ ALINDI (2026-09-02) — kural kaynakta VAR, eksik olan
   AKTİF EZMESİYDİ:
     `.pf-tabs .dt i{ opacity:.85 }` + `.pf-tabs .dt.active i{ opacity:1 }`
   Kanonda taban vardı, `.aktif` ezmesi yoktu → İKİ sekmenin ikisi de
   soluktu ve ölçüm "FIT 1 ↔ kanon 2" dedi. O satır "kaynakta yok" diye
   okundu ve kural tamamen kaldırıldı; ölçüm ters yönden konuştu.
   🔴 DERS: bir sayı farkını okurken YÖN yetmez — farkı HANGİ ELEMANIN
   taşıdığına bakılır. "FIT 1 ↔ kanon 2" bir yokluk değil, bir FAZLALIK
   ve fazlalığın sebebi eksik bir EZMEYDİ. */
.sekme i{ font-size:var(--yazi-12-5); opacity:.85; }
.sekme.aktif i{ opacity:1; }
.sekme:hover{ color:var(--aksan-koyu); background:var(--aksan-yikama); }
.sekme.aktif{ background:var(--aksan); color:var(--kagit); }
/* 🔴 KAYNAKTAN AYRILDI — halka aksan YIKAMASI idi: liste zeminine karşı
   1.11:1, yani klavye odağı GÖRÜNMÜYORDU (02 §5 B11). */
.sekme:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset:var(--odak-ofset);
}
.sekme-sayi{ font-size:var(--yazi-11); font-weight:var(--agirlik-kalin); opacity:.6; }

.sekmeler.esit .sekme{ flex:1; justify-content:center; }
/* Modül şeridi: kap genişliğini alır ve kalemleri ORTALAR.
   Kaynak `.pf-tabbar .fit-tabs{display:flex;flex-wrap:wrap;width:100%}`
   + `.fp-tabbar .fit-tabs{justify-content:center}`. */
/* 🔴 ŞERİT HİÇBİR GENİŞLİKTE İKİ SATIRA DÜŞMEZ — BEYAR KURALI, 2026-09-02:
       "kategoriler hiçbir zaman 2 satır olmaz, gerekirse slider olur"
   Gözle bulundu: `antrenorum`un SEKİZ sekmesi 1440'ta sarıyor ve
   "Görüşme Geçmişi" tek başına ikinci satıra düşüyor. `hareket-profilim`
   DOKUZ sekme alacak — kural şimdi gerekiyor.
   Kök: burada `flex-wrap:wrap` yazılıydı ve `nowrap` yalnız ≤900'de
   geliyordu (aşağıdaki medya dalı). Kaynak da öyle yapıyor
   (`fit-shell.css` `.pf-tabbar .fit-tabs{flex-wrap:wrap}` + ≤900 nowrap),
   yani bu kaynağın kendi kararıydı; Beyar onu DEĞİŞTİRDİ.
   Kip kaynağın KENDİ ortalama kalıbından alındı — uydurulmadı:
       .fit-tabs.is-center{ width:fit-content; max-width:100%;
                            margin-inline:auto; justify-content:center }
   Sığdığında ORTALI, sığmadığında KAYAR. `width:fit-content` olmadan
   `justify-content:center` taşan şeridin BAŞINI kırpar (kaydırılamaz
   bir orta) — ortalamayı kap değil içerik yapmalı. */
.sekmeler.ortali{
  display:flex; flex-wrap:nowrap;
  width:fit-content; max-width:100%; margin-inline:auto;
  justify-content:center;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sekmeler.ortali::-webkit-scrollbar{ display:none; }
/* Kayan şeritte kalem BÜZÜLMEZ: `flex-shrink` serbest kalırsa sekme adı
   iki satıra kırılır ve "iki satır olmaz" kuralı ADIN içinde ihlal olur. */
.sekmeler.ortali .sekme{ flex:0 0 auto; white-space:nowrap; }
/* MODÜL ŞERİDİ KATEGORİ ŞERİDİNDEN BÜYÜKTÜR — kaynakta iki ayrı kalem:
   `.fit-tab` (modül, 13.5px · 10/18) ve `.dt` (kategori, 13px · 9/16).
   Kanon ilk turda ikisini tek ölçüye indirmişti; ölçüm ayrıldıklarını
   gösterdi (2026-09-01). */
.sekmeler.ortali .sekme{
  font-size:var(--yazi-13-5); padding:var(--bosluk-10) var(--bosluk-18);
  gap:var(--bosluk-8); text-align:center; line-height:normal;
}
/* 🔴 MODÜL ŞERİDİNİN AKTİF KALEMİ KOYU ADIMI KULLANIR, kategori şeridi
   parlak olanı — kaynakta iki ayrı değer (ölçüldü 2026-09-01):
     `.fit-tab[aria-selected="true"]` → `--fit-deep`
     `.dt.active`                     → `--fit`
   Kanon ikisini de `--aksan`a bağlamıştı. Ayrım geri geldi; yan etkisi
   erişilebilirlik kazancı: beyaz metin parlak aksanda 3.54:1, koyu
   adımda 5.45:1. */
.sekmeler.ortali .sekme.aktif{ background:var(--aksan-koyu); }
/* 🔴 `justify-content:flex-start` UYDURULMUŞTU — kaynak `fit-shell.css:2204`
   ≤900'de YALNIZ `flex-wrap:nowrap` bildiriyor, ortalamayı bozmuyor.
   Ölçüm: FIT `center` ↔ kanon `flex-start` (02 §36 · B45). B40'ın ailesi;
   OZ listesine `justifyContent` eklenince görünür oldu. */
/* ≤900 dalı KALKTI: `nowrap` artık TABANDA (yukarı bak). Kaynağın
   `fit-shell.css:2204` ölçümü hâlâ geçerli, yalnız eşiği kalmadı. */
/* 🔴 DAR EKRAN — 2026-09-01'de eklendi (02 §35 · B39). Kanonda mobil dal
   HİÇ YOKTU: 390px'te modül sekmesi masaüstü ölçüsünde (13.5px · 10/18)
   basılıyordu, kaynak ise küçültüyor. Ölçüm `fit-shell.css:3627-3631`
   (`.fit-tab`) ve `:2356-2358` (`.pf-tabbar`).
   ⚠ `min-height:44px` KÜÇÜLTÜLMEZ: dolgu inerken dokunma hedefi 44'ün
   altına düşmesin diye kaynak onu ayrıca bildiriyor — şerhi de bunu
   söylüyor ("dolgu yerine min-height"). */
@media (max-width:640px){
  .sekme-ray{ padding:var(--bosluk-10) 0; }
  /* 🔴 ÇİPİN MOBİL DALI — kanonda HİÇ YOKTU (`fit-shell.css:1283`).
     "Mobil dalı olmayan bileşen kanona girmesin" kuralının tam örneği:
     §43 masaüstünde kaynağa çekildi ama dar ekran dalı atlandı. */
  .cip{ font-size:var(--yazi-12); padding:var(--bosluk-7) var(--bosluk-12); }
  /* 🔴 `white-space:nowrap` TABANDA DEĞİL, YATAY KAYAN KAPTA. Kaynağın
     ≤640 kuralı `.chip`e yazılı (`fit-shell.css:1283`) ama kanon iki ayrı
     kaynak sınıfını (`.chip` ve `.df-fchip`) tek `.cip`e indiriyor ve
     ikisinin mobil davranışı AYRI: ortalı şerit yatay kayar (sarmamalı),
     kart içi süzgeç sarar. İki slot iki ayrı değer ölçtü, ikisi de
     haklıydı — kural ihtiyacı olan kaba taşındı.
     (§6'nın `.cipler.tek-satir>*`ı zaten aynı işi yapıyor.) */
  .cipler.ortali .cip,
  .cipler.ortali .cip-sayi{ white-space:nowrap; }
  /* Ortalı şerit dar ekranda SARMAZ, yatay kayar — altı çip tek satırda. */
  .cipler.ortali{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--bosluk-4);
    scrollbar-width:none;
  }
  .cipler.ortali::-webkit-scrollbar{ display:none; }

  /* Kategori/süzgeç sekmesi — kaynak `.pf-tabs .dt` (`fit-shell.css:2358`) */
  .sekme{ font-size:var(--yazi-12-5); padding:var(--bosluk-9) var(--bosluk-13); }
  /* Modül sekmesi AYRI ve daha büyük — kaynak `.fit-tab` (`:3628`) */
  .sekmeler.ortali .sekme{
    font-size:var(--yazi-12-5); padding:var(--bosluk-9) var(--bosluk-14);
    min-height:44px;
  }
}

/* ARAMA KİPİ — şerit bir süzgeçse ve arama TÜM kalemleri geziyorsa, şerit
   söner ve tıklanamaz olur. Kaynak: `destek-v1.html:362`
   (`.pf-tabs.searching .dt`) — 02 §11 varyant tablosunda ölçülmüştü,
   kural ilk kez §21-24 turunda kanona yazıldı (Bölüm III).
   ⚠ Yalnız görünürlük: sönen sekme hâlâ odaklanabilir olsaydı klavye
   kullanıcısı görünmez bir kaleme takılırdı — `pointer-events` yetmiyor,
   bu yüzden liste ayrıca JS tarafında süzülür. */
/* SÜZGEÇ ŞERİDİ — 🔴 KANON KARARI (02 §29 md.13, aynı kalem).
   Kaynakta durum süzgeci `.sekmeler`in taban 4px'ini kullanıyordu ve ilk
   çip kabın sol kenarına yapışıyordu (@1440: kap iç kenarı 291, ilk çip
   295). Şerit bir seçim rayı değil, panelin BAŞLIK HİZASINDA duran bir
   süzgeci; aynı kolondaki kart başlığı 313'te başlıyor.
   Taban `.sekmeler` DEĞİŞMEDİ — modül şeridi ve kategori şeridi 4px'lik
   ray kipinde kalır (o ikisinde aktif hap rayın kenarına oturur ve
   segment kontrolü öyle okunur). Nefes yalnız bu kipe verildi. */
/* BANT İÇİ RAY — zebra bandının İÇİNDE duran şeritte dikey marj sıfırdır.
   Kaynağın kendi kuralı ve gerekçesi (destek-v1.html:478, ölçümüyle):
   bandın dolgusu 32/32 ama şeridin kendi `margin:24px … 22px`i binince
   içeriğin banda uzaklığı 56/54 çıkıyordu — hem fazladan boşluk, hem
   24≠22 olduğu için içerik bandın MERKEZİNDE değil. Zemin ve dolgu
   yazılmaz; ikisi de §18 zebra kuralında. */
.sekme-ray.bant-ici{ margin-block:0; }

.sekmeler.suzgec{ padding:var(--bosluk-4) var(--bosluk-22); }
/* SÜZGEÇ SAYACI KATEGORİ SAYACINDAN BÜYÜKTÜR — ölçüm ayırdı (2026-09-01),
   kaynakta iki ayrı kalem ve ikisi de aynı ekranda:
     `#faqTabs .dt .cnt`   11px · 700 · opacity .6   (kategori şeridi)
     `#tkFilter .dt .muted` 13px · 500 · opacity 1   (durum süzgeci)
   Süzgeçte sayı bilginin kendisi ("Kapatılan 4"), kategoride yardımcı bir
   not; kaynak ikincisini soluklaştırıyor, ilkini soluklaştırmıyor.
   ⚠ RENK YAZILMAZ: `.sekme`den miras gelir ve aktif kalemde beyaza döner.
     Kaynak bunu ayrı bir kuralla çözmüş (`.dt.active .muted` → beyaz);
     gerekçesi de ölçülü — `--muted` aksan zemininde 1.38:1, sayı
     OKUNMUYORDU. Kanonda kalıtım zaten doğru rengi veriyor. */
/* 🔴 PUNTO SABİT DEĞİL, KALITIM. Kaynağın `.muted`u yalnız renk ve ağırlık
   bildirir (`fit-shell.css:185`); punto `.dt`den kalıtımla gelir. Kanon
   burayı `--yazi-13`e sabitlemişti — masaüstünde `.sekme` zaten 13px
   olduğu için denk geliyordu, ≤640'ta `.sekme` 12.5px'e inince sayı 13px'te
   TAKILI kalıyordu (390px ölçümü, 02 §35). Kalıtım her genişlikte doğru. */
.sekmeler.suzgec .sekme-sayi{
  font-size:inherit; font-weight:var(--agirlik-govde); opacity:1;
}

.sekmeler.arama-modu .sekme{ opacity:.45; pointer-events:none; }


/* =====================================================================
   12 · KÜNYE IZGARASI — 3 sayfa · kaynak `.hs-facts`
   Hairline ızgara: hücreler kağıt, aradaki 1px boşluk çizgi rengini gösterir.
   ===================================================================== */

.kunye{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--cizgi-1);
  background:var(--cizgi);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md);
  overflow:hidden; margin:0;
}
.kunye>div{ background:var(--kagit); padding:var(--bosluk-16); min-width:0; }
.kunye dt{
  font-size:var(--yazi-11); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-genis); text-transform:uppercase;
  color:var(--murekkep-yumusak);
}
.kunye dd{
  font-size:var(--yazi-14-5); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); margin:var(--bosluk-4) 0 0;
  letter-spacing:var(--aralik-sik);
}
@media (max-width:1024px){ .kunye{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){  .kunye{ grid-template-columns:1fr; } }


/* =====================================================================
   13 · UYARI KUTUSU — 3 sayfa · kaynak `.hs-warn`
   🔴 Tehlike varyantı kaynakta KABIN sınıfıyla açılıyordu
   (`.danger-card .hs-warn`). Kanon kendi sınıfını verir; kap kuralı
   mevcut markup kırılmasın diye köprü olarak kalır (02 §9 B9).
   ===================================================================== */

.uyari-kutu{
  display:flex; align-items:flex-start; gap:var(--bosluk-11);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde);
  border-radius:var(--yuvarlak-md);
  /* 🔴 16 → 14/16 · gap 12 → 11 · alt marj 20 → 18 (02 §36 · B41).
     hesabim-v1 `#dondur .hs-warn` render edilmiş DOM'undan ölçüldü;
     üçü de 4px yuvarlamasıydı (B22 ailesi). */
  padding:var(--bosluk-14) var(--bosluk-16);
  margin-bottom:var(--bosluk-18);
  /* 🔴 B36 — kaynak bunu `<p class="hs-warn">` olarak da kullanıyor, yani
     kabuğun `p{text-align:justify}` kuralı DOĞRUDAN vuruyor ve metni
     yaslıyor. Ölçüldü: FIT start ↔ kanon justify (02 §36 · B42). */
  text-align:left; text-align-last:auto;
  color:var(--uyari);
  background:var(--uyari-yikama);
  border:var(--cizgi-1) solid var(--uyari-cizgi);
}
/* 🔴 OKUMA KOLONUNDA ALT PAYI 22, 18 DEĞİL. Ölçüldü (`odemelerim`
   diyetisyen paneli, `.hs-warn`): FIT `0 0 22px` ↔ kanon `0 0 18px`.
   slot-3'ün `s3-sira.mjs`te bulduğu −4px aralık hatasının kökü; temiz bir
   token adımı, yani içerik değil BİLDİRİM farkı — ilk okuması doğruydu.
   ⚠ BU KURAL İKİ KEZ YANLIŞ YERE DÜŞTÜ ve ikisinde de SESSİZCE ÖLÜ KALDI:
   önce bir şerhin içine, sonra kuralın kendi gövdesine — ikinci seferinde
   şerhi de kırdı. Sebep aynı: çapa olarak kullandığım dize dosyada birden
   çok yerde geçiyor ve biri bir açıklamanın içinde ALINTI olarak duruyor.
   §0c/2 ile §0c/6'nın birleşimi. Ders: çapa SATIR BAŞINDAN aranır ve
   yazımdan sonra kuralın GERÇEKTEN eşleştiği ölçülür — ölçüm iki kez
   "18px" dedi ve iki kez de haklıydı, yazan bendim. */
.okuma-kolonu>.uyari-kutu{ margin-bottom:var(--bosluk-22); }
.uyari-kutu i{ flex:none; font-size:var(--yazi-15); margin-top:2px; }
.uyari-kutu b{ font-weight:var(--agirlik-ekstra); }
/* ⚠ ÇOCUKLARA DA — bkz. §14'ün aynı şerhi (slot-2 sızıntı taraması). */
.uyari-kutu>span,.uyari-kutu>b{ text-align:left; text-align-last:auto; }

.uyari-kutu.tehlike,
/* 🔴 KARTIN KENDİ KENARLIK RENGİ (02 §36 · B42 · slot-2 K6). Kanon yalnız
   başlık ayracını ve ikon rengini boyuyordu; kartın `border-color`u
   `--cizgi`de kalıyordu. Kaynak `.warn-card{border-color:var(--hs-warn-line)}`
   ve `.danger-card{border-color:var(--hs-danger-line)}` diyor — ölçüldü. */
.kart.uyari-kart{ border-color:var(--uyari-cizgi); }
.kart.tehlike-kart{ border-color:var(--tehlike-cizgi); }

.kart.tehlike-kart .uyari-kutu{        /* köprü — eski markup için */
  color:var(--tehlike-koyu);
  background:var(--tehlike-yikama);
  border-color:var(--tehlike-cizgi);
}


/* =====================================================================
   14 · DURUM SATIRI — 4 sayfa · kaynak `.hs-state`
   İkon ZORUNLU: renk tek başına taşıyıcı değildir (WCAG 1.4.1).
   ===================================================================== */

.durum-satir{
  flex:1; min-width:200px;
  display:flex; align-items:flex-start; gap:var(--bosluk-8);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta);
  color:var(--murekkep-yumusak); line-height:var(--satir-orta);
  margin:0;
  /* 🔴 B36 — kaynak bunu `<p class="hs-state">` olarak basıyor (odemelerim'de
     4 yerde), kabuğun `p{text-align:justify}`i doğrudan vuruyor. İki bağımsız
     ölçüm (slot-2 hesabim · slot-3 odemelerim) aynı sonucu verdi:
     FIT start ↔ kanon justify (02 §36 · B42). */
  text-align:left; text-align-last:auto;
}
/* ⚠ ÇOCUKLARA DA YAZILIR. slot-2'nin sızıntı taraması (altı sekme, görünür
   her p/li/span/dd/b) kanonda 15 yaslanan kalem buldu, kaynakta 0; 13'ü bu
   iki bileşenden geliyordu. `<b>` inline olsa da `text-align` kalıtımla
   iniyor ve `text-align-last` üzerinden çiziliyor. */
.durum-satir>span,.durum-satir>b{ text-align:left; text-align-last:auto; }
.durum-satir i{ flex:none; margin-top:3px; font-size:var(--yazi-11-5); color:var(--aksan-koyu); }
.durum-satir.kapali{ color:var(--uyari); }
.durum-satir.kapali i{ color:var(--uyari); }
.durum-satir.tamam{ color:var(--aksan-koyu); }


/* =====================================================================
   15 · ALT NOT — 3 sayfa · kaynak `.ntf-foot`
   Kartın kapanışı: üst çizgiyle ayrılmış ikonlu not şeridi.
   ===================================================================== */

.alt-not{
  display:flex; align-items:flex-start; gap:var(--bosluk-8);
  font-size:var(--yazi-12-5); color:var(--murekkep-yumusak);
  font-weight:var(--agirlik-govde); line-height:var(--satir-govde);
  margin-top:var(--bosluk-16);
  padding-top:var(--bosluk-14);   /* 🔴 16 → 14 · hesabim `#sil .ntf-foot` (B41) */
  border-top:var(--cizgi-1) solid var(--cizgi);
}
.alt-not i{ color:var(--aksan-koyu); font-size:var(--yazi-12); margin-top:3px; flex:none; }
.alt-not a{ color:var(--aksan-koyu); font-weight:var(--agirlik-kalin); }
.alt-not a:hover{ text-decoration:underline; text-underline-offset:2px; }


/* =====================================================================
   16 · BİLGİ NOTU — 43 sayfa · kaynak `.hr-note`
   Hesap alanı dışında da en yaygın bileşenlerden. `fit-type.css` bunu
   yaslama istisnası olarak işaretlemiş (2–4 satırlık blok, nehir üretir).
   ===================================================================== */

/* 🔴 ÜÇ ÖLÇÜM DÜZELTMESİ · 2026-09-01 — B35'in aynı ailesi. Kaynak
   `fit-shell.css:2100` üçünü de yazıyor, kanon üçünü de yuvarlamıştı:
       boşluk 16 → 14 · dolgu 20/24 → 20/22 · üst pay 32 → 34
   İki ekranda da doğrulandı (destek `#taleplerim` maket şeridi ve
   `#yeni` sağlık sınırı). */
.bilgi-notu{
  display:flex; gap:var(--bosluk-14); align-items:flex-start;
  background:var(--aksan-yikama);
  border:var(--cizgi-1) solid var(--aksan-cizgi);
  border-radius:var(--yuvarlak-lg);
  padding:var(--bosluk-20) var(--bosluk-22);
  margin-top:var(--bosluk-34);
}
/* Kural AÇIKÇA yazılmalı: kutunun kendi `display:flex`i (0,1,0) UA'nın
   `[hidden]{display:none}` kuralını (0,0,1) ezer ve gizlenmesi istenen not
   ekranda kalır (ölçüldü 2026-09-01 — oluştur ekranının çevrimdışı
   bildirimi açılışta görünüyordu). `.alan-izgara[hidden]` ile aynı desen. */
.bilgi-notu[hidden]{ display:none; }
.bilgi-notu>i{ color:var(--aksan-koyu); font-size:var(--yazi-18); margin-top:2px; flex:none; }
.bilgi-notu p{
  font-size:var(--yazi-14); color:var(--murekkep-yumusak);
  /* 🔴 1.6 DEĞİL 1.72 — kaynağın kendi ölçülmüş kararı, 17 satırlık
     gerekçesiyle (`fit-shell.css:3825-3841`): notun ölçü sınırı kalkınca
     satır uzuyor, "uzun ölçü → daha çok interlinye". */
  font-weight:var(--agirlik-govde); line-height:var(--satir-not); margin:0;
  max-width:none;
  text-align:left; text-align-last:auto;      /* yaslama istisnası */
}
/* 🔴 9px, 8 DEĞİL — kaynak ölçüldü (02 §36 · B43 · slot-1). */
.bilgi-notu p+p{ margin-top:var(--bosluk-9); }
/* 🔴 KABIN İLK ÇOCUĞUYSA ÜST PAY DÜŞER — kaynak `fit-shell.css:2114`.
   Kanonda yoktu: not bir kabın ilk çocuğuyken 34px pay sarmalayıcının
   DIŞINA taşıyordu; kaynağın şerhi bu kusuru 7 sayfada ölçmüş. */
.kap>.bilgi-notu:first-child{ margin-top:0; }
.bilgi-notu p a{
  color:var(--aksan-koyu); font-weight:var(--agirlik-kalin);
  text-decoration:underline; text-underline-offset:2px;
}
.bilgi-notu.ortali{
  align-items:center;
  background:var(--aksan-yikama-2); border-color:var(--aksan-cizgi);
}
.bilgi-notu.ortali>i{
  margin-top:0; width:38px; height:38px;
  border-radius:var(--yuvarlak-daire);
  background:var(--kagit); display:grid; place-items:center;
  font-size:var(--yazi-16);
}


/* =====================================================================
   17 · KIRINTI — 49 sayfa · kaynak `.lib-crumb`/`.crumb-home`/`.cur`
   KOYU ZEMİN BİLEŞENİ — banner içinde yaşar.
   🔴 Ev ikonunun `13px` taban kuralı kaynakta 8 sınıflık bir
   `9px !important` zinciriyle eziliyordu; kanon 9px alır, zinciri atar.
   ===================================================================== */

.kirinti{
  display:flex; align-items:center; gap:var(--bosluk-9);   /* 🔴 8 → 9 · banner'da ölçüldü (B43) */
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta);
  color:var(--koyu-metin); margin-bottom:var(--bosluk-20);
  flex-wrap:wrap;
}
.kirinti a{ color:var(--koyu-metin); transition:color var(--sure) var(--yumusama); }
.kirinti a:hover{ color:var(--kagit); }
.kirinti>i{ font-size:var(--yazi-9); color:var(--koyu-metin-2); }
.kirinti-ev{ display:inline-flex; align-items:center; line-height:1; }
.kirinti-ev i{ font-size:var(--yazi-9); line-height:1; width:auto; color:var(--aksan-parlak); }
.kirinti-ev:hover i{ color:var(--kagit); }
.kirinti-simdi{ color:var(--aksan-parlak); }


/* =====================================================================
   18 · BÖLÜM BAŞLIĞI — 30 sayfa · kaynak `.sec-head`
   [üst etiket] / [h2 | araçlar] / [açıklama]
   ===================================================================== */

/* 🔴 KISAYOL, KARDEŞ SINIFI EZİYORDU — ölçüldü 2026-09-03 (slot-program).
   `.bolum{padding:X 0}` ve `.kap{padding:0 var(--kap-yan)}` İKİSİ DE
   kısayol; ikisi aynı elemana yazıldığında sonra yüklenen (`.kap`,
   `:1380`) diğerini TÜMÜYLE eziyor ve dikey nefes 0'a düşüyordu.
   Bedeli ölçüldü: `kaynak` sekmelerinde şeritle ilk kart arası 22px,
   kurulan sekmelerde 54px — yani kaynaktan derlenen sekmeler NEFESSİZ.
   Bestecinin `sar` alanı TEK sarmalayıcı basıyor; iki sınıfı birlikte
   vermek (`sar:"bolum kap"`) tam bu yüzden çalışmıyordu.
   Düzeltme: iki kural AYRI özelliğe yazılır — sıra artık fark etmez ve
   `.bolum.kap` birlikte çalışır.
   ⚠ Genel ders: kısayol bildirimi, aynı elemana yazılabilecek KARDEŞ
     sınıfların bildirimlerini de siler. Kanonda bir sınıf başka bir
     sınıfla BİRLİKTE kullanılabiliyorsa kısayol yazılmaz. */
.bolum{ padding-block:var(--bolum-nefes); }
.bolum.sik{ padding-block:var(--bolum-nefes-sik); }

/* 🔴 ÜÇ YUVARLAMA DÜZELTİLDİ (02 §36 · B42): margin-bottom 32→34 ·
   `.ust-etiket` 16→14 · `.giris-metni` 8→10. Kaynak `fit-shell.css:225·227·230`
   ORTAK blokta (`.sec-head,.cat-head,.guide-head`) — sayfa yaması değil, her
   ekranda geçerli. Destek turunda §18 ölçüm çiftlerinde yoktu, o yüzden kaçtı. */
.bolum-bas{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--bosluk-24); align-items:center;
  margin-bottom:var(--bosluk-34);
}
.bolum-bas>div:first-child{ display:contents; }
.bolum-bas .ust-etiket{ grid-row:1; grid-column:1/-1; justify-self:start; margin-bottom:var(--bosluk-14); }
.bolum-bas h2{ grid-row:2; grid-column:1; font-size:var(--yazi-34); }
.bolum-bas .bolum-araclar{ grid-row:2; grid-column:2; align-self:center; }
.bolum-bas .giris-metni{
  grid-row:3; grid-column:1/-1; margin-top:var(--bosluk-10);
  color:var(--metin-ikincil); font-weight:var(--agirlik-govde);
  font-size:var(--yazi-15-5); max-width:520px;
  text-align:left; text-align-last:auto;      /* yaslama istisnası */
}
@media (max-width:1024px){ .bolum-bas h2{ font-size:var(--yazi-30); } }
/* §18'in DAR EKRAN dalı — kanonda hiç yoktu (slot-3 ölçtü, kaynak
   `fit-shell.css:1255-1259`). */
@media (max-width:640px){
  .bolum-bas{ margin-bottom:var(--bosluk-24); column-gap:var(--bosluk-14); }
  .bolum-bas h2{ font-size:var(--yazi-24); }
  .bolum-bas .giris-metni{ font-size:var(--yazi-14-5); }
}

/* ---- ZEBRA — ardışık bantlar dönüşümlü boyanır ----------------------
   Kaynak: `fit-shell.css:4271-4276` (`.modul-govde .fit-pane > section`).
   Kural KAPTA durur, bantta değil: sayfa yalnız `<section class="bolum">`
   yazar, sıra ve zemin kendiliğinden gelir. Bant tarafı zemin ya da dolgu
   YAZMAZ — yazarsa iki sözlük olur ve zebra sırası kırılır.

   ⚠ BANTLAR TAM GENİŞLİKTİR, `.kap` bandın İÇİNDE durur. `.kap` dışarıda
     kalırsa zemin dar kolona hapsolur ve zebra görünmez.

   Dikey nefes `--bolum-nefes-sik` (32px): kaynağın `--sec-pad-sm`i, üst=alt.
   `.bolum`un tek başına kullanıldığındaki 64px'i değil — zebra sıkı ritim
   ister, bantlar arka arkaya geliyor. */
.zebra>.bolum{ padding:var(--bolum-nefes-sik) 0; }
/* 🔴 KENDİ ZEMİNİNİ TAŞIYAN BANT ŞERİTLENMEZ — ölçüldü, 2026-09-02.
   `antrenor-ol`un koyu hero bandı (`.ol-top`) kendi zeminini bildiriyor:
   radial + üç linear gradyan + fotoğraf + `#1b1913`. Üretici bandı `.zebra`
   sözleşmesine sokmak için `bolum` yazınca aşağıdaki şeritleme kuralı
   (0,3,0) sayfanın kendi kuralını (0,1,0) EZDİ: zemin BEYAZ oldu, beyaz
   `h1` ve giriş metni GÖRÜNMEZ hâle geldi.
   Ölçülen kontrast: donör 17.57 → çıktı 1.00.
   Zebra bir RİTİM sözleşmesidir, bir zemin dayatması değil; kendi yüzeyini
   taşıyan bant onun dışındadır. Sınıfı üretici SAYFA CSS'İNDEN TÜRETİR
   (elle liste yazılmaz — "yeşil listesi elle yazılmıştı" kusurunun dersi). */
/* 🔴 `:not()` ÖZGÜLLÜĞÜ KENDİ SÖZLEŞMESİNİ EZDİ — ölçüldü, 2026-09-02,
   Beyar gözle gördü ("zebra desenini düzgün kopyala, burda farklı").
   `:not(.kendi-zemini)` eklenince bu kuralın özgüllüğü (0,3,1) aşağıdaki
   `.zebra>.bolum.kimlik-bant` kuralının (0,3,0) ÜSTÜNE çıktı ve kimlik
   bandının zeminini beyaza çevirdi:
       donör  kimlik bandı rgb(249,249,249)  (--zemin)
       çıktı  kimlik bandı rgb(255,255,255)  (--kagit)  🔴
   Şerit ve gövde ikisinde de aynıydı; fark TEK bir değerdeydi.
   Ders: bir kurala süzgeç eklemek onun ÖZGÜLLÜĞÜNÜ de değiştirir ve
   aynı dosyadaki istisnalarını sessizce yener. Kendi yüzeyini bildiren
   iki kalem de artık aynı süzgeçte: `kendi-zemini` (üreticinin sayfa
   CSS'inden türettiği) ve `kimlik-bant` (kanonun kendi istisnası). */
.zebra>.bolum:nth-of-type(odd):not(.kendi-zemini):not(.kimlik-bant){ background:var(--kagit); }
.zebra>.bolum:nth-of-type(even):not(.kendi-zemini):not(.kimlik-bant){ background:var(--zemin); }

/* Sabit kabuğun altına inen ilk bant. Kaynak `.below-header`
   (dd-shell.css:260 — 112px, @≤640 62px); kanon token'ı zaten vardı.
   Değer TOPLAMDIR, bandın kendi nefesine eklenmez: kaynak da 74px'lik
   taban dolguyu ezip yerine geçiyor. */
.zebra>.bolum.kabuk-alti{ padding-top:var(--kabuk-h); }
/* Kimlik bandı ALT DOLGU TAŞIMAZ — kaynak `.fp-profil` yalnız üst dolgu
   bildiriyor (`fit-shell.css:4105`). Bandın altındaki nefesi sekme
   şeridinin kendi `margin-top`u (24px) verir; bant da dolgu koyarsa iki
   boşluk üst üste biner. ÖLÇÜLDÜ: şerit 32px aşağı kayıyordu. */
/* 🔴 KİMLİK BANDI ZEMİNİ GRİ, BEYAZ DEĞİL — ölçüldü (2026-09-01).
   Kaynak dosyada İKİ bildirim var ve İKİNCİSİ geçerli:
     fit-shell.css:4105  .fp-profil{…;background:var(--bg-white)}   ← eskimiş
     fit-shell.css:4444  .fp-profil{background:var(--bg)}           ← geçerli
   İkincisinin şerhi gerekçeyi yazıyor: profil beyaz · şerit gri · gövde
   beyaz olunca ÜÇ ZEMİN arka arkaya geliyordu. Kart kendi beyazını,
   kenarlığını ve gölgesini zaten taşıyor; zemin grileşince kart okunur
   kalıyor. 15 sayfada tek değer.
   ⚠ İlk turda 4105'i okuyup DURMUŞTUM. Ders: kaynakta bir seçici birden
     fazla kez bildirilebilir; son bildirim geçerlidir (KOPYALAMA-KURALI §2). */
.zebra>.bolum.kimlik-bant{ padding-bottom:0; background:var(--zemin); }
@media (max-width:640px){ .zebra>.bolum.kabuk-alti{ padding-top:var(--kabuk-h-dar); } }

.ust-etiket{
  display:inline-flex; align-items:center; gap:var(--bosluk-8);
  font-size:var(--yazi-12); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-etiket); text-transform:uppercase;
  color:var(--aksan-koyu);
}
.ust-etiket::before{
  content:""; width:26px; height:var(--cizgi-2);
  background:currentColor; border-radius:var(--yuvarlak-sm);
}
.ust-etiket i{ font-size:var(--yazi-13); }


/* =====================================================================
   19 · KAP — 60 sayfa · kaynak `.wrap`
   ===================================================================== */

.kap{ max-width:var(--kap-genislik); margin:0 auto; padding-inline:var(--kap-yan); }


/* =====================================================================
   20 · EKRAN OKUYUCU YARDIMCISI — 55 sayfa · kaynak `.sr-only`
   ===================================================================== */

.yalniz-okuyucu{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}



/* =====================================================================
   21 · AKORDEON — kaynak `.qa` / `.qa-head` / `.qa-body`
   ---------------------------------------------------------------------
   Ölçüm: `dump/fit-prototip/destek-v1.html` satır 279-307 (`.ds-list`
   konu akordeonu) ve 370-390 (`.faq-list` soru akordeonu). İki blok
   BİREBİR aynı kuralları yazıyor — tek desen, iki yer.
   Kardeş yüzey doğrulaması: `dump/diet-hesap/hesabim-destek-cozum-merkezi`
   aynı sınıf ailesini aynı yapıyla basıyor (`dd-shell.css` B2 kanonu).

   YAPI — dördü de zorunlu:
     .akordeon              liste kabı
       .akordeon-kalem      tek soru (açık kip: .acik)
         .akordeon-bas      <button aria-expanded>  ← tıklanan yüzey
           .akordeon-ikon   soru ikonu
           .akordeon-ok     ▾ dönen ok
         .akordeon-govde    cevap kabı (max-height ile açılır)

   🔴 TEK AÇIK KALEM KURALI — Beyar kararı, 2026-09-01. BÜTÜN EKRANLARDA
      GEÇERLİ: bir `.akordeon` grubunda aynı anda YALNIZ BİR kalem açık
      olabilir. Yeni bir kalem açılırken aynı gruptaki diğerleri kapanır;
      açık kaleme tekrar basmak onu kapatır (hepsi kapalı geçerli bir hâl).
      Kural DAVRANIŞTIR, CSS değil — aşağıdaki mekanizma gereği açılma JS'in
      elinde, o yüzden kanon burada yalnız SÖZLEŞMEYİ yazar. Referans
      uygulama `deneme/cozum-merkezi.html`:
          kalem.forEach(kapa); if(!acikMiydi) ac(kalem);
      ⚠ Sözleşme hem `.acik` sınıfını hem `aria-expanded`i kapsar: ikisi
        birlikte güncellenmezse ekran okuyucu kapalı kalemi açık okur.

   ⚠ AÇILMA MEKANİZMASI CSS DEĞİL JS'TİR: `.akordeon-govde` kapalıyken
     `max-height:0`, açılırken JS ölçülen `scrollHeight`i piksel olarak
     yazar. Kanon yalnız geçişi ve kapalı hâli tanımlar; yüksekliği
     yazmaz, çünkü içerik uzunluğu bilinemez.
   ===================================================================== */

.akordeon{ display:flex; flex-direction:column; gap:var(--bosluk-12); }

.akordeon-kalem{
  background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-lg);
  overflow:hidden;
  transition:border-color var(--sure-yavas) var(--yumusama),
             box-shadow   var(--sure-yavas) var(--yumusama);
}
.akordeon-kalem[hidden]{ display:none; }
/* Kaynak açık kenarı aksanın DÜŞÜK ALFALI yazımıydı: fit .35, diet .40
   alfayla kendi yeşilini yazıyor. Bu dosyada alfa yazımı YASAK (kural 2)
   ve iki marka iki ayrı alfa kullanıyor; ikisinin de rolü "aksan tonlu
   hairline" — kanonun `--aksan-cizgi` yuvası tam bu.
   ÖLÇÜM (değerler 01-tokenlar.md ve markalar/*.css'te): fit'in alfalı
   bileşiği kağıt üstünde `--aksan-cizgi`den bir kademe koyu düşüyor,
   yani kanon kenarı bir tık açık. Açık kipi taşıyan İKİNCİ işaret olan
   `--golge-sm` yerinde durduğu için vurgu tek ayağa binmiyor. */
.akordeon-kalem.acik{ border-color:var(--aksan-cizgi); box-shadow:var(--golge-sm); }

.akordeon-bas{
  display:flex; align-items:center; gap:var(--bosluk-14);
  width:100%; text-align:left;
  background:none; border:none;
  font-family:inherit;
  font-size:var(--yazi-15-5); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-govde); color:var(--murekkep);
  padding:var(--bosluk-18) var(--bosluk-22);
  cursor:pointer;
  transition:color var(--sure) var(--yumusama);
}
.akordeon-bas:hover{ color:var(--aksan-koyu); }
.akordeon-kalem.acik .akordeon-bas{ color:var(--aksan-koyu); }
/* 🔴 KAYNAKTAN AYRILDI — halka aksan YIKAMASI idi (`--fit-wash`): kağıt
   zeminde 1.11:1, klavye odağı görünmüyordu. Sekme rayında ölçülen
   kusurun (02 §5 B11) aynısı, aynı düzeltme. */
.akordeon-bas:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk);
  /* içeri ofset: kalem `overflow:hidden` taşıyor, dışa çizilen halka
     kırpılırdı */
  outline-offset:calc(-1 * var(--odak-kalinlik));
}

.akordeon-ikon{
  flex:none; width:34px; height:34px;
  border-radius:var(--yuvarlak-md);
  /* 🔴 KAYNAKTAN AYRILDI — kaynak `--fit` / `--fit-wash` (3.18:1).
     Boş durum ikonunda ölçülen kusurun (02 §5 B7) aynısı, aynı
     düzeltme: `--aksan-koyu` yıkama üstünde 4.91:1. */
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  display:grid; place-items:center;
  font-size:var(--yazi-14);
}

.akordeon-ok{
  margin-left:auto; flex:none;
  font-size:var(--yazi-12); color:var(--metin-ikincil);
  transition:transform var(--sure-yavas) var(--yumusama);
}
/* Ok KAĞIT zeminde duruyor (ikon çipinde değil): `--aksan` orada 3.54:1
   ve ikon eşiğini (3:1) geçiyor → kaynak değeri korundu. */
.akordeon-kalem.acik .akordeon-ok{ transform:rotate(180deg); color:var(--aksan); }

.akordeon-govde{
  max-height:0; overflow:hidden;
  transition:max-height var(--sure-agir) var(--yumusama);
}
/* Sol dolgu İKON HİZASIDIR, boşluk değil: baş dolgusu + ikon kutusu +
   ikon boşluğu. Ham 74px yazmak yerine parçalardan kuruldu — ikon boyu
   değişirse hiza kendiliğinden takip eder. */
.akordeon-govde p{
  padding:0 var(--bosluk-24) var(--bosluk-20)
          calc(var(--bosluk-22) + 34px + var(--bosluk-14));
  font-size:var(--yazi-14-5); color:var(--murekkep-yumusak);
  font-weight:var(--agirlik-govde);
  line-height:var(--satir-bol);
  /* 🔴 YASLAMA İSTİSNASI — kabuk katmanı `p`ye `text-align:justify`
     veriyor ve eleman seçicisi olduğu için kalıtımla gelen hizayı ezer.
     Kaynakta cevap metni SOLA yaslı (ölçüldü: `start`); yaslanınca
     kelime araları açılıyor ve okuma kolonunda göze batıyor.
     §18'in `.giris-metni` kuralı aynı istisnayı zaten taşıyor. */
  text-align:left; text-align-last:auto;
}
.akordeon-govde p+p{ padding-top:0; margin-top:calc(-1 * var(--bosluk-8)); }
.akordeon-govde a{
  color:var(--aksan-koyu); font-weight:var(--agirlik-kalin);
  text-decoration:underline; text-underline-offset:2px;
}

@media (max-width:640px){
  .akordeon-bas{ font-size:var(--yazi-14-5); padding:var(--bosluk-15) var(--bosluk-16); gap:var(--bosluk-11); }
  .akordeon-ikon{ width:30px; height:30px; font-size:var(--yazi-12-5); }
  .akordeon-govde p{
    padding:0 var(--bosluk-16) var(--bosluk-18)
            calc(var(--bosluk-16) + 30px + var(--bosluk-11));
    font-size:var(--yazi-14);
  }
}


/* =====================================================================
   22 · ARAMA KUTUSU — kaynak `.lib-search` (+ `.faq-search .sx`)
   ---------------------------------------------------------------------
   Ölçüm: `fit-shell.css:2004-2016` (taban kit) + `destek-v1.html:345-358`
   (AÇIK YÜZEY kipi). Kabuğun tabanı KOYU banner için yazılmış — cam
   zemin, beyaz metin, alfalı renk üçlüsü. Gövdeye inen kutu o kipte
   okunmuyordu ve kaynağın kendisi onu açık yüzey diline çevirmiş:
   kağıt zemin · `--line` kenar · `--slate` metin. KANON O KİPİ ALIR;
   koyu banner kipi bu dosyada yok (alfa yazımı yasak + tek kip yeter).

   Kardeş yüzey: diet `.nb-searchbar` aynı işi MUTLAK konumlu ikonla
   yapıyor. Kanon flex mekanizmasını seçti — kaynağın kendi mekanizması
   bu ve temizle düğmesi için üçüncü bir çocuk yeri açıyor.

   YAPI:
     .arama                 <form role="search">
       > i                  büyüteç
       .arama-girdi         <input type="search">
       .arama-temizle       × düğmesi · İSTEĞE BAĞLI, JS ile .gorunur
   ===================================================================== */

.arama{
  display:flex; align-items:center; gap:var(--bosluk-12);
  max-width:520px;
  background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md);
  padding:var(--bosluk-4) var(--bosluk-4) var(--bosluk-4) var(--bosluk-18);
  transition:border-color var(--sure) var(--yumusama);
}
.arama:focus-within{ border-color:var(--aksan); }
.arama>i{ flex:none; font-size:var(--yazi-15); color:var(--metin-ikincil); }

/* 🔴 KANON SINIFA BAĞLIYDI, KAYNAK ETİKETE — ölçüldü, 2026-09-02.
   Kanon `.arama-girdi` SINIFINI bekliyor; kaynağın markup'ında o sınıf
   YOK, kural ETİKETE yazılmış:
       .lib-search input{flex:1;background:none;border:none;padding:11px 0…}
   Sonuç ekranda görüldü: girdi HAM TARAYICI ALANI olarak çizildi —
   809×39 yerine 149×19, `2px inset rgb(118,118,118)` UA çerçevesiyle.
   Arama kutusu 49px yerine 29px'e indi.

   🔴 Bu, "KAPI OLMAYAN ADI GÖREMEZ" tuzağının kardeşi: kanonun kuralı
   VARDI, markup'ta karşılığı YOKTU. Ad kapısı yanlış adı yakalar, HİÇ
   OLMAYAN adı yakalayamaz.

   Çözüm kanonun kendi §72 emsalini izler (`page-main` · `wrap` gibi
   kaynak adı korunur): kural ETİKETE de bağlanır. Sınıf kipi duruyor —
   kanon ekranları onu kullanmaya devam eder. */
.arama>input,
.arama-girdi{
  flex:1; min-width:0;
  background:none; border:none; outline:none;
  font-family:inherit; font-size:var(--yazi-14-5);
  font-weight:var(--agirlik-govde); color:var(--murekkep);
  padding:var(--bosluk-11) 0;
}
.arama>input::placeholder,
.arama-girdi::placeholder{ color:var(--yer-tutucu); }
/* 🔴 TARAYICININ KENDİ TEMİZLE DÜĞMESİ KAPATILIR. `type="search"` girdisi
   WebKit/Blink'te kendi × düğmesini basar; kit zaten kendi `.arama-temizle`
   kalemini taşıyor ve ikisi yan yana çıkıyordu (ölçüldü: kutuda İKİ ×,
   biri mavi sistem düğmesi biri gri kit düğmesi). Kaynakta tek düğme var.
   ⚠ `appearance:none` TEK BAŞINA YETMEZ bazı sürümlerde; `display:none`
     ikinci kilit. */
.arama-girdi::-webkit-search-cancel-button,
.arama-girdi::-webkit-search-decoration{
  -webkit-appearance:none; appearance:none; display:none;
}

.arama-temizle{
  /* 🔴 KAYNAKTAN AYRILDI — kaynak 40×42px, dokunma hedefi eşiğinin
     (44×44, WCAG 2.5.5/2.5.8) altında. Anahtarda ölçülen kusurun
     (02 §5 B4) aynı ailesi, aynı düzeltme. */
  flex:none; min-width:44px; height:44px; padding:0;
  border:none; border-radius:var(--yuvarlak-sm);
  background:var(--zemin); color:var(--murekkep);
  font-size:var(--yazi-14); cursor:pointer;
  display:none; place-items:center;
  transition:background var(--sure) var(--yumusama);
}
.arama-temizle.gorunur{ display:grid; }
.arama-temizle:hover{ background:var(--cizgi); }
.arama-temizle:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset:var(--odak-ofset);
}


/* =====================================================================
   23 · OKUMA KOLONU — kaynak `.faq-list`/`.faq-kat-note` max-width kuralı
   ---------------------------------------------------------------------
   Kap (`--kap-genislik` 1240px) SAYFANIN genişliğidir; akan metin orada
   okunmaz. Kaynak bunu her akan blokta tek tek yazıyor
   (`max-width:860px;margin:0 auto` — fit `.faq-list` `.faq-kat-note`
   `.faq-none` `.coll-cta` `.ds-list`); kanon tek bir kaba topladı.

   ⚠ `--olcu` (78ch) İLE KARIŞTIRMA: o akan metnin KENDİ satır ölçüsü
     (karakter tabanlı), bu KOLONUN genişliği (piksel tabanlı). Biri
     paragrafa, öbürü yerleşime aittir.

   `.okuma-notu` — kolonun tepesindeki "N sonuç" satırı. Kaynak
   `.faq-kat-note`, iki markada da birebir aynı kural.
   ===================================================================== */

.okuma-kolonu{ max-width:var(--okuma-kolonu); margin-inline:auto; }
/* Kolonun içindeki arama kutusu kendi 520px'ini bırakır, kolonu doldurur —
   kaynağın `.faq-searchbar .lib-search{max-width:860px}` kuralının karşılığı. */
.okuma-kolonu>.arama{ max-width:none; }

.okuma-notu{
  font-size:var(--yazi-13-5); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde);
  margin:0 0 var(--bosluk-18);
  overflow-wrap:anywhere;
  text-align:left; text-align-last:auto;    /* yaslama istisnası — bkz. §21 */
}
.okuma-notu b{ color:var(--murekkep); font-weight:var(--agirlik-kalin); }
/* 🔴 KAYNAKTA YOK, KANON EKLEDİ. Not sunucuda BOŞ basılıp JS ile
   doldurulan bir `role="status"` bölgesidir; boşken alt payı duruyor ve
   liste 20px aşağı kayıyordu. Sonuç yokken cümleyi boş durum kutusu
   söylüyor — o hâlde bu satırın yer kaplamaması gerekir. */
.okuma-notu:empty{ display:none; }

/* ── 23b · MODÜL OKUMA KOLONU — kaynak R15/3, ölçülmüş sözleşme ───────
   🔴 KANONA GEÇ GİRDİ VE BEDELİ ÖLÇÜLDÜ (2026-09-02, FIT v3 · slot turu).
   Kural kaynakta `destek-v1.html`in KENDİ <style> bloğundaydı, kabuk
   dosyasında değil; üretici sayfa stilini almadığı için sessizce düştü.
   Sonuç Beyar'ın v2 ile yan yana kıyasında görüldü: panel kartları
   860 yerine 1120 basılıyordu.

   ⚠ Bu, KOPYALAMA-KURALI'nın "kaynağın kuralı DOSYASINDA yazılıdır"
     maddesinin ikinci kez gerçekleşmesi. Aynı 860px, aynı dosya, aynı
     24 satırlık gerekçe bir tur önce de atlanmıştı ("Çip şeridi 1176px
     basıldı, Beyar 'tablar dar' dedi"). Kural artık KANONDA — sayfa
     stiline geri düşmesin diye.

   ── KAYNAĞIN ÖLÇÜMÜ (destek-v1.html, 1440px) ─────────────────────────
   Panelde ÜÇ ayrı genişlik vardı ve göz her blokta yeniden hizalanıyordu:
       arama kutusu      132 →  652   520px · SOLA yaslı
       kategori çipleri  132 → 1308   tam genişlik
       akordiyon         289 → 1150   860px · ortalı
   Talep satırı da 1176px'ti: ikon 135'te, konu 191'de, durum rozeti
   1287'de — arada ~600px boşluk kalıyordu. "Satır dar değil, KAP geniş."

   Karar: MODÜLÜN okuma kolonu 860px'tir; arama · çipler · akordiyon ·
   panel kartı · bilgi notu aynı kolona oturur. Yeni ölçü İCAT EDİLMEDİ —
   860 zaten akordiyonun kendi genişliğiydi, diğerleri ona çekildi.

   🔴 KAPSAM `.modul-govde` İLE SINIRLI, `main` İLE DEĞİL. Kimlik bandı
   (kapak 1176 · kimlik kartı 1120 · sayaç şeridi 1176) bu kolona
   GİRMEZ; o kabuk kalemidir ve `.modul-govde`nin KARDEŞİDİR. Kapsamı
   `main`e açmak kapağı 860'a düşürürdü — üretici bir tur bu hatayı
   yaptı (gövdeyi ikinci bir `.modul-govde`ye sarmıştı).
   --------------------------------------------------------------------- */
/* 🔴 PANEL İÇİ ÇİP ŞERİDİ DE KOLONA GİRER — ölçüldü, 2026-09-02.
   Kaynağın kuralı bunu ayrıca yazıyor:
     .fit-pane[data-pane="cozum"] .pf-tabbar .wrap > .pf-tabs{max-width:860px}
   Kanonda atlanmıştı; kategori çipleri 1440'ta duruyor, akordiyon 860'ta —
   göz her blokta yeniden hizalanıyordu (kaynağın kendi şerhinin
   ölçtüğü kusurun aynısı, bu kez kanonda).
   ⚠ KAPSAM `.fit-pane` İÇİ. Modül şeridi `.modul-govde`nin KARDEŞİDİR
     ve 1176'da kalır; kapsamsız yazılsaydı o da 860'a düşerdi. */
.modul-govde .fit-pane .sekmeler,
.modul-govde .kart.panel,
.modul-govde .sekme-ray.hesap,
.modul-govde .sekme-ray.bant-ici,
.modul-govde .bilgi-notu,
.modul-govde .akordeon,
.modul-govde .okuma-notu,
.modul-govde .arama,
.modul-govde .kapanis,
/* 🔴 KAYNAĞIN LİSTESİNDE SON MADDE BİR JOKERDİ, ATLANMIŞTI:
       .modul-govde .ds-body .wrap > * { max-width:860px; margin-inline:auto }
   Yani "hızlı çözümler" bandındaki HER doğrudan çocuk kolona girer —
   akordiyon (`.ds-list`), ipucu kabı (`.tk-aside` → `.ipucu-kap`) ve
   bandın kendi notu. Tek tek ad sayarak taşımak ikisini düşürdü:
   ölçüldü, ikisi de 1176'da duruyordu, kaynakta 860.
   Joker olarak taşınır — kaynağın kararı da joker. */
.modul-govde .ds-body .kap > *{
  max-width:var(--okuma-kolonu); margin-inline:auto;
}
/* 🔴 DİKEY MARJ SIFIRLANIR, YATAY `auto` KALIR. Ölçüldü @1440: bandın
   kendi dolgusu 32/32 ama içeriğin banda uzaklığı 56/54 çıkıyordu —
   `.sekme-ray.hesap` kabuktan `margin:24px … 22px` taşıyor. İki kusur
   birden: bant dolgusuna binen ikinci boşluk, ve 24≠22 olduğu için
   içerik bandın MERKEZİNDE değil. Zemin ve dolgu YAZILMAZ — ikisi de
   zebra kuralında. */
.modul-govde .sekme-ray.hesap,
.modul-govde .sekme-ray.bant-ici{ margin-block:0; }


/* =====================================================================
   24 · KAPANIŞ BANDI — kaynak `.coll-cta` / `.cc-ico` / `.cc-btns`
   ---------------------------------------------------------------------
   Ölçüm: `destek-v1.html:410-414` (+ mobil 417). Ekranın dibinde,
   aradığını bulamamış kullanıcıya NE YAPACAĞINI söyleyen ortalı bant.
   Boş durumdan (§7) farkı: boş durum bir yokluğu bildirir, bu bant
   içerik DOLUYKEN de durur ve bir sonraki adımı verir.

   DÖRT PARÇA: ikon · başlık · neden · eylem(ler).
   ===================================================================== */

.kapanis{
  text-align:center;
  background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-lg);
  padding:var(--bosluk-38) var(--bosluk-30);
  max-width:var(--okuma-kolonu); margin-inline:auto;
}
.kapanis-ikon{
  width:62px; height:62px;
  border-radius:var(--yuvarlak-lg);
  /* 🔴 KAYNAKTAN AYRILDI — §21 ve §7 ile aynı ölçüm: aksan, aksan
     yıkaması üstünde 3.18:1. `--aksan-koyu` 4.91:1. */
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  display:grid; place-items:center;
  font-size:var(--yazi-25);
  margin:0 auto var(--bosluk-16);
}
.kapanis h3{
  font-size:var(--yazi-21); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); margin-bottom:var(--bosluk-8);
}
.kapanis p{
  font-size:var(--yazi-14); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); line-height:var(--satir-genis);
  max-width:420px; margin:0 auto var(--bosluk-20);
  /* Kap `text-align:center` yazıyor ama kabuğun `p` kuralı kalıtımı
     eziyor — ortalama burada AÇIKÇA tekrarlanmalı (ölçüldü). */
  text-align:center; text-align-last:auto;
}
.kapanis-eylemler{
  display:flex; gap:var(--bosluk-12);
  justify-content:center; flex-wrap:wrap;
}

@media (max-width:640px){
  /* dar dolgu diet'in kendi kitinden ölçüldü (30px 20px → 32/20);
     fit mobilde yalnız düğmeleri esnetiyor, dolguyu bildirmiyor */
  /* ⚠ KAPANIŞ BANDININ MOBİL DOLGUSU YOKTUR. Kaynak `destek-v1.html:407`
     `38px 30px` yazar ve ≤640 için AYRI kural bildirmez — yani dolgu her
     genişlikte aynıdır. Kanon burada `32px 20px` uydurmuştu; 390px
     ölçümü yakaladı (02 §35). Kural silindi, taban değer geçerli. */
  .kapanis-eylemler .dugme{ flex:1; min-width:0; }
}



/* =====================================================================
   25 · KİMLİK KARTI — kaynak `.fp-kapak` / `.fp-kimlik` / `.pf-stats`
   ---------------------------------------------------------------------
   Ölçüm: `fit-shell.css:4105-4164` (kapak · kart · meta),
          `:4204-4211` (sayaç kutusu), `:4231-4233` (sayaç şeridi),
          `:4278-4293` (mobil), `:4335-4339` (kırıntı kipi).
   Kardeş doğrulama: diet `.pf-banner`/`.pf-head`/`.pf-ava`/`.pf-stats`
   AYNI geometriyi taşıyor (`planim.css:381` — avatar 128px, 4px beyaz
   kenar, `margin-top:-70px`; kart binmesi de aynı). İki marka, tek yapı.

   YAPI — sıra değişmez:
     .kapak                 görsel bant, perdesi ::after ile
       .kapak-muhur         sol üstte versal hap
     .kimlik                kapağa BİNEN kart (negatif margin)
       .kimlik-avatar       yuvarlak, karttan yukarı taşar
       .kimlik-govde
         h1 + .rozet        ad ve rozet(ler) AYNI satırda
         .kimlik-kullanici  @kullanıcı adı
         .kimlik-meta       ikonlu ikincil bilgi satırı
     .sayac-serit           kartın ALTINDA, hairline ızgara
       .sayac               tek kutu: ikon + etiket + sayı

   ⚠ ROZET YENİ BİLEŞEN DEĞİL: adın yanındaki kalemler §5 `.rozet`tir.
     Kaynağın `.fp-badge.ok/.wait/.off/.stop` dörtlüsü kanonda
     `.olumlu/.bekleme/.pasif/.durdu` olarak zaten var; burada yalnız
     başlık satırındaki ölçüsü bildiriliyor.

   ⚠ SAYAÇ ŞERİDİ AYIRICISINI KENARLIKLA DEĞİL IZGARA BOŞLUĞUYLA ÇİZER:
     kap `gap:1px` + çizgi rengi zemin, kutular kağıt. Kenarlıkla
     yazılsaydı satır kırıldığında (mobil) sarkan çizgiler kalırdı —
     kaynağın kendi çözümü bu ve ölçülerek alındı.
   ===================================================================== */

.kapak{
  position:relative;
  height:var(--banner-h-profil);
  border-radius:var(--yuvarlak-xl);
  overflow:hidden;
  background-size:cover; background-position:center;
  box-shadow:var(--golge-md);
}
/* Perde: görsel ne olursa olsun mührün ve kartın okunmasını garantiler. */
.kapak::after{ content:""; position:absolute; inset:0; background:var(--kapak-perde); }

.kapak-muhur{
  /* 🔴 ÜST 18, SOL 20 — ASİMETRİK VE KASITLI. Üç kaynak dosyasında da
     aynı ölçüldü (hesabim · destek · paketlerim). Kanon ikisini de 20
     yapmıştı; ilk turda `--bosluk-18` kademesi yoktu, artık var.
     B22 ailesi (slot-2 K8, 2026-09-01). */
  position:absolute; top:var(--bosluk-18); left:var(--bosluk-20);
  z-index:var(--kat-icerik);
  display:inline-flex; align-items:center; gap:var(--bosluk-8);
  background:var(--muhur-zemin); color:var(--murekkep);
  font-size:var(--yazi-11); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-muhur); text-transform:uppercase;
  padding:var(--bosluk-8) var(--bosluk-14);
  border-radius:var(--yuvarlak-sm);
}

/* Kart kapağa BİNER — negatif margin geometridir, boşluk değil. */
.kimlik{
  position:relative; z-index:var(--kat-kimlik);   /* 🔴 2 → 3 · kaynak `.fp-kimlik` */
  display:flex; gap:var(--bosluk-26); align-items:flex-start;
  background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-lg);
  box-shadow:var(--golge-md);
  padding:var(--bosluk-26) var(--bosluk-30) var(--bosluk-28);
  margin:-78px var(--bosluk-28) 0;
}

.kimlik-avatar{
  flex:none; width:128px; height:128px;
  border-radius:var(--yuvarlak-daire);
  background-size:cover; background-position:center;
  border:4px solid var(--kagit);
  box-shadow:var(--golge-md);
  margin-top:-70px;
}
/* Fotoğrafı olmayan üye — baş harf. Kaynak diet `.pf-ava.is-harf`
   (`planim.css:402`), oradaki beyaz metin marka renginin üstünde duruyordu.
   🔴 KAYNAKTAN AYRILDI: zemin `--aksan-koyu`. Beyaz metin aksanın kendisi
   üstünde 3.54:1 ile AA altında kalıyor (§2'de ölçülen G5'in aynısı);
   koyu adım 5.45:1. */
.kimlik-avatar.harf{
  display:grid; place-items:center;
  background:var(--aksan-koyu); color:var(--kagit);
  font-weight:var(--agirlik-kalin); font-size:var(--yazi-51);
  line-height:var(--satir-tek); letter-spacing:normal;
}

.kimlik-govde{ flex:1; min-width:0; }
.kimlik-govde h1{
  font-size:var(--yazi-29); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-baslik);
  display:flex; align-items:center; gap:var(--bosluk-12); flex-wrap:wrap;
}
.kimlik-govde h1 .rozet{ font-size:var(--yazi-11-5); }

.kimlik-kullanici{
  display:block; font-size:var(--yazi-14);
  color:var(--metin-ikincil); font-weight:var(--agirlik-govde);
  margin-top:var(--bosluk-3);
}

.kimlik-meta{
  display:flex; flex-wrap:wrap;
  gap:var(--bosluk-7) var(--bosluk-20);
  margin-top:var(--bosluk-13);
  font-size:var(--yazi-13); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde);
}
.kimlik-meta span{ display:inline-flex; align-items:center; gap:var(--bosluk-8); }
.kimlik-meta i{ color:var(--aksan-koyu); }

/* Kartın tanıtım cümlesi — kartın İÇİNDE kalır. Dışına alınsaydı sayaç
   şeridinin altında öksüz bir paragraf olurdu (kaynağın kendi ölçümü). */
.kimlik-giris{
  font-size:var(--yazi-14-5); color:var(--murekkep-yumusak);
  font-weight:var(--agirlik-govde); line-height:var(--satir-genis);
  margin-top:var(--bosluk-12);
  text-align:left; text-align-last:auto;    /* yaslama istisnası — bkz. §21 */
}
/* Kullanıcı adı aksanlı — kaynak `.fp-uad`. */
.kimlik-uad{ color:var(--aksan-koyu); font-weight:var(--agirlik-kalin); }

/* ---- sayaç şeridi — KARTIN DIŞINDA, KENDİ KARTI ----------------------
   🔴 DÜZELTİLDİ (2026-09-01). İlk yazımda şerit `.kimlik-govde`nin içine
   konmuştu; ÖLÇÜLDÜ ve yanlıştı: kaynak onu `.fp-kimlik`in KARDEŞİ olarak
   basıyor (`fit-shell.js:1706` — `.cp-stats.pf-stats` bloğu kartın dışında,
   `.wrap`ın doğrudan çocuğu).
   Kusur görünürdü: kartın iç genişliği avatar + dolgu düştükten sonra
   ~900px kalıyor, 5 kutu × `flex-basis:200px` oraya sığmıyor ve sıra
   4+1'e kırılıyordu. Kardeş olarak kap genişliğinin tamamını (1240px)
   alıyor ve beşi TEK SIRADA duruyor — kaynağın görüntüsü bu.
   Kutu ayırıcısı kenarlık değil ızgara boşluğu: kap `gap:1px` + çizgi
   rengi, kutular kağıt. Satır kırıldığında sarkan çizgi kalmaz. */
.sayac-serit{
  display:flex; flex-wrap:wrap;
  margin-top:var(--bosluk-14);
  gap:var(--cizgi-1);
  background:var(--cizgi);
  border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md);
  box-shadow:var(--golge-sm);
  overflow:hidden;
}
.sayac{
  flex:1 1 200px; min-width:0;
  display:flex; align-items:center; gap:var(--bosluk-12);
  background:var(--kagit);
  padding:var(--bosluk-15) var(--bosluk-20);
}
.sayac>i{
  flex:none; width:38px; height:38px;
  border-radius:var(--yuvarlak-md);
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  display:grid; place-items:center; font-size:var(--yazi-15);
}
.sayac>div{ min-width:0; }
.sayac span{
  display:block; font-size:var(--yazi-11);
  line-height:var(--satir-govde); font-weight:var(--agirlik-govde);
  letter-spacing:var(--aralik-genis); color:var(--metin-ikincil);
}
.sayac b{
  display:block; font-size:var(--yazi-16-5);
  line-height:var(--satir-govde); font-weight:var(--agirlik-kalin);
  color:var(--murekkep);
}

/* Kırıntı bu bantta AÇIK zeminde durur — §17'nin kendisi KOYU zemin
   içindir. Kaynak da aynı ayrımı yapıyor (`fit-shell.css:4335-4339`:
   `.fp-profil .lib-crumb` kendi açık kipini yazıyor). */
.kimlik-bant .kirinti{
  color:var(--metin-ikincil); font-weight:var(--agirlik-govde);
  font-size:var(--yazi-13); gap:var(--bosluk-9);
  /* ⚠ ÜST=18 ALT=14+18: kaynak kırıntıya kendi dikey dolgusunu veriyor
     (`fit-shell.css:4335`), bandın dolgusuna EKLENİR. Header ile kırıntı
     ve kırıntı ile kapak arasındaki nefes bu üç sayıdan doğar. */
  padding:var(--bosluk-18) 0 var(--bosluk-14);
  margin-bottom:var(--bosluk-18);
}
.kimlik-bant .kirinti a{ color:var(--metin-ikincil); }
.kimlik-bant .kirinti a:hover{ color:var(--aksan-koyu); }
.kimlik-bant .kirinti>i{ color:var(--cizgi-vurgu); }
.kimlik-bant .kirinti-ev i{ color:var(--aksan-koyu); }
.kimlik-bant .kirinti-ev:hover i{ color:var(--aksan-koyu); }
.kimlik-bant .kirinti-simdi{ color:var(--murekkep); font-weight:var(--agirlik-kalin); }

/* ── DAR EKRAN ────────────────────────────────────────────────────────
   🔴 BU BLOK 2026-09-01'DE YENİDEN ÖLÇÜLDÜ (02 §35 · B39). Önceki hâli
   ÖLÇÜLMEDEN yazılmıştı ve dokuz değeri birden kaynaktan sapıyordu;
   390px ölçümü açığa çıkardı (üç destek ekranında 99 gerekçesiz fark,
   yığılma bu bileşende). Aşağıdaki değerlerin tamamı
   `fit-shell.css:4307-4325` ve `:4284-4286`den birebir alındı.       */
@media (max-width:1180px){ .sayac{ flex:1 1 30%; } }
@media (max-width:900px){  .sayac{ flex:1 1 140px; } }
/* Ara kademe — kaynak `:4307`. Kanonda HİÇ YOKTU: 1024↔640 arasında
   kart tam genişlikte kalıyor, kapağa binmesi bozuluyordu. */
@media (max-width:1024px){
  .kimlik{ margin:-70px var(--bosluk-16) 0; padding:var(--bosluk-22) var(--bosluk-22) var(--bosluk-24); }
}
/* ⚠ `.sayac-serit` BU BLOĞA GİRMEZ. Kaynağın `:4309`daki
   `.fp-sayac{margin:18px 16px 0}` kuralı BAŞKA bir kite aittir (plan
   profilinin `.fp-sayac`/`.pfs`i); kanonun `.sayac-serit`i `.pf-stats`
   karşılığıdır ve onun yan payı YOKTUR (`:4231` — yalnız `margin-top`).
   İlk yazımda karıştırıldı, 390px ölçümü yakaladı. */
@media (max-width:640px){
  /* Kapak ve mühür mobil dalda hiç bildirilmiyordu — bkz. token şerhi. */
  .kapak{ height:var(--banner-h-profil-dar); border-radius:var(--yuvarlak-lg); }
  .kapak-muhur{
    top:var(--bosluk-12); left:var(--bosluk-12);
    padding:var(--bosluk-7) var(--bosluk-11); font-size:var(--yazi-10);
  }
  .kimlik{
    flex-direction:column; align-items:center; text-align:center;
    margin:-52px var(--bosluk-4) 0;
    padding:var(--bosluk-20) var(--bosluk-18) var(--bosluk-22);
    gap:var(--bosluk-14);
  }
  .kimlik-avatar{ width:104px; height:104px; margin-top:-66px; }
  .kimlik-avatar.harf{ font-size:var(--yazi-34); }
  .kimlik-govde{ width:100%; }
  .kimlik-govde h1{ justify-content:center; font-size:var(--yazi-23); }
  .kimlik-meta{ justify-content:center; gap:var(--bosluk-6) var(--bosluk-16); font-size:var(--yazi-12-5); }
  /* B36'nın yan etkisi: bileşen kendi `text-align`ini bildirdiği için
     kaptan gelen `center` kalıtımını ALMAZ — mobilde açıkça tekrarlanır. */
  .kimlik-giris{ text-align:center; }
  .sayac-serit{ margin-top:var(--bosluk-12); }
  .sayac{ flex:1 1 44%; padding:var(--bosluk-13) var(--bosluk-14); }
}

/* =====================================================================
   26 · KABUK KENAR KALEMLERİ — sağ şerit · kenar sekmesi · yüzen düğmeler
   ---------------------------------------------------------------------
   Ölçüm: render edilmiş kaynak DOM (`dump/fit-render/destek-cozum.html`),
   1440×1000. CSS okunarak değil, EKRANDAN ölçüldü — kaynakta bu kalemleri
   basan şey kabuk JS'i ve birkaç geç-ezme kuralı; dosyayı okumak yanlış
   değer veriyordu (bkz. §25 kimlik bandı zemini).

   Ölçülen kutular:
     .fb-rail       8×100dvh @ sağ 0   · aksan   · z 71
     .feedback-tab  52×144   @ sağ 0   · aksan   · z 72 · dikey yazı
     .to-top        54×54    @ sağ 22  · kağıt   · z 55

   ⚠ BU BLOK KABUĞUN TAMAMI DEĞİL. Üst bant · header · footer hâlâ
     markanın kendi kabuk dosyasından geliyor. Buradakiler o dosyalarda
     KARŞILIĞI OLMAYAN ya da iki markada ayrışan kenar kalemleridir.
   ===================================================================== */

/* Sağ kenarda tam boy dikey şerit. Üst bandın ÜSTÜNDEN geçer (z 71 > 70):
   altında kalsaydı ekranın en üstünde kesilirdi — kardeş markada da
   ölçülmüş ve aynı gerekçeyle 71'e alınmış bir kusur. */
.kenar-serit{
  position:fixed; top:0; right:0;
  width:var(--kenar-serit-g); height:100dvh;
  background:var(--aksan);
  z-index:var(--kat-kenar-serit);
  pointer-events:none;
}

/* Dikey kenar sekmesi. Kaynak `writing-mode` kullanıyor, `rotate()` değil:
   döndürme kutunun akış içindeki ölçüsünü değiştirmediği için sekme
   kendi yüksekliğini bildiremiyordu. */
/* 🔴 `<button>`/`<a>` YAZI YÜZÜNÜ MİRAS ALMAZ — sekme ARIAL çiziliyordu
   ve bu HER EKRANDA görünüyordu (kabuk kalemi). `.rozet-karti`/`.basamak`
   ile aynı kusur; `fontFamily` OZ'ye girince üçü birden çıktı. */
.kenar-sekmesi{
  font-family:inherit;
  position:fixed; right:0;
  /* Kaynak JS ile yazıyor; kanon aynı kuralı CSS'te ifade eder:
     sabit 272px, pencereden taşarsa iki uçtan 140px pay bırakacak
     şekilde kırpılır. `clamp` bu kırpmanın birebir karşılığı. */
  top:clamp(140px, var(--kenar-sekmesi-ust), calc(100dvh - 140px));
  transform:translateY(-50%);
  z-index:var(--kat-geri-bildirim);
  display:inline-flex; flex-direction:row; align-items:center;
  gap:var(--bosluk-9);
  writing-mode:vertical-rl;
  background:var(--aksan); color:var(--kagit);
  font-size:var(--yazi-13); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-vurgu);
  line-height:var(--satir-govde); text-align:left;
  padding:var(--bosluk-24) var(--bosluk-16);
  min-height:144px;
  border-radius:var(--yuvarlak-lg) 0 0 var(--yuvarlak-lg);
  box-shadow:var(--golge-md);
  white-space:nowrap; cursor:pointer; border:none;
}
/* İkon dikey akışta YATAY kalır — yoksa glif de döner ve kalem 9px uzar
   (ölçüldü: 153 → 144). */
.kenar-sekmesi i{ font-size:var(--yazi-13); writing-mode:horizontal-tb; }
.kenar-sekmesi:hover{ background:var(--aksan-koyu); padding-right:var(--bosluk-20); }
.kenar-sekmesi:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset:var(--odak-ofset);
}

/* "Başa dön" — kaydırma eşiğini JS geçer, kanon yalnız iki hâli tanımlar. */
.basa-don{
  /* 🔴 İSTİF ÖLÇÜLDÜ (render edilmiş kaynak DOM): sohbet düğmesi ALTTA
     (22px), "başa dön" ONUN ÜSTÜNDE (92px). Kaynakta `.to-top` tam olarak
     bu yükseklikte duruyor; ilk yazımda ikisini ters koymuştum. */
  position:fixed; right:var(--bosluk-22); bottom:92px;
  z-index:var(--kat-yuzen);
  width:54px; height:54px;
  border-radius:var(--yuvarlak-lg);
  background:var(--kagit); color:var(--aksan-koyu);
  border:var(--cizgi-1) solid var(--cizgi);
  font-size:var(--yazi-16); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--golge-yuzen);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--sure-yavas) var(--yumusama),
             transform var(--sure-yavas) var(--yumusama),
             visibility var(--sure-yavas),
             background var(--sure) var(--yumusama),
             color var(--sure) var(--yumusama),
             border-color var(--sure) var(--yumusama);
}
.basa-don.gorunur{ opacity:1; visibility:visible; transform:none; }
.basa-don:hover{ background:var(--aksan-koyu); color:var(--kagit); border-color:var(--aksan-koyu); transform:translateY(-2px); }
.basa-don:focus-visible{ outline:var(--odak-kalinlik) solid var(--odak-renk); outline-offset:var(--odak-ofset); }

/* Yüzen eylem düğmesi — sohbet/uzman kalemi. "Başa dön"ün ÜSTÜNDE durur
   (bottom 92 > 24) ki ikisi çakışmasın; iki markada da aynı istif. */
.yuzen-dugme{
  position:fixed; right:var(--bosluk-22); bottom:var(--bosluk-22);
  z-index:var(--kat-yuzen-dugme);
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--bosluk-10);
  font-family:inherit; font-size:var(--yazi-14-5);
  font-weight:var(--agirlik-kalin); line-height:var(--satir-sik);
  text-decoration:none; text-align:left;
  color:var(--kagit); background:var(--aksan-koyu);
  border:var(--cizgi-1) solid var(--aksan-koyu);
  border-radius:var(--yuvarlak-lg);
  box-shadow:var(--golge-yuzen);
  cursor:pointer;
  transition:background var(--sure) var(--yumusama), transform var(--sure) var(--yumusama);
}
.yuzen-dugme i{ font-size:var(--yazi-18); flex:none; }
.yuzen-dugme:hover{ background:var(--aksan-koyu-2); border-color:var(--aksan-koyu-2); transform:translateY(-2px); }
.yuzen-dugme:focus-visible{ outline:var(--odak-kalinlik) solid var(--odak-renk); outline-offset:var(--odak-ofset); }
/* Uzmanı olmayan üye: düğme yuvarlak bir rozet değil, DOĞRUYU SÖYLEYEN
   bir satırdır — "Sohbet" yazıp boş panel açmak yalan olurdu. */
.yuzen-dugme.bos{ width:auto; height:52px; padding:0 var(--bosluk-20); }
.yuzen-dugme.bos i{ font-size:var(--yazi-15); }

@media (max-width:640px){
  .kenar-serit,.kenar-sekmesi{ display:none; }
  .basa-don{ right:var(--bosluk-16); }
  .yuzen-dugme{ right:var(--bosluk-16); width:52px; height:52px; }
}


/* =====================================================================
   27 · KABUK GÖVDESİ — üst bant · sayfa başı · dip
   ---------------------------------------------------------------------
   Ölçüm: render edilmiş kaynak DOM (`dump/fit-render/destek-cozum.html`),
   1440px. TİPOGRAFİ KAYNAĞIN, İÇERİK VE RENK MARKANIN.

   Kaynağın ölçülen değerleri:
     üst bant   h40 · 12.5px/500 · zemin --murekkep · metin --koyu-metin-ust
     sayfa başı h73 · top 40 · zemin --kagit · alt kenar --cizgi
     ana menü   15px/700 · dolgu 9/12 · yuvarlaklık md · gap 2
     dip        zemin --aksan-koyu · üst dolgu 70
       başlık   15px/700 · beyaz · alt boşluk 18
       bağlantı 14px/500 · dolgu 7/0
       yasal    12px/500 · dolgu 24/0/0
       alt      13px/500 · dolgu 16/0/26

   🔴 DİP METNİ ALFA, SABİT RENK DEĞİL. Kaynak beyazın alfasını kullanıyor
   (.88/.92/.84); markanın kendi kabuğu mavi-gri bir rampa
   kullanıyordu ve yeşil zeminde markanın dışına düşüyordu. Rampa
   `tokenlar.css §1`de.

   ⚠ BU BLOK KABUĞUN TİPOGRAFİ KATMANIDIR, TAMAMI DEĞİL. Süs kalemleri
     (marka değiştirici hapları, mağaza rozetleri, avatar menüsü, mega
     menü, çekmece) hâlâ markanın kendi kabuk dosyasından geliyor. Sıradaki
     dilim orası; bu blok yalnız YAZI farkını kapatır.
   ===================================================================== */

/* ---- üst bant ---- */
/* ── 27b · KELİME MARKASI — patron dosyasından, vektör ────────────────
   🔴 KANONA 2026-09-02'DE GİRDİ · Beyar kararı (seçenek A).
   Kaynak: `Revenge - Docs/DadaMentor-Logos.ai` (PDF-1.6) → pdftocairo -svg
           → yedi path (d·a·d·a·f·i·t) → `kanon/varlik/dadafit-kelime.svg`

   NEDEN DEĞİŞTİ — prototipin kelime markası üç yerde dokümanla çelişti,
   üçü de ÖLÇÜLDÜ:
     yazım    prototip "DadaFit" (büyük harfle)  ·  doküman "dadafit"
     renk     prototip İKİ renkli (#211E16 + aksan) · doküman TEK renk
     değer    prototip #0093d0  ·  doküman #0093D0 (Pantone 299 C)
   EKSİ İKİNCİ MADDE: dokümanla kaynak çelişirse doküman kazanır.

   ⚠ İŞARET (kare + şimşek) DOKUNULMADI. Patron dosyasında hiçbir
     karşılığı yok, ama o dosya bir RENK/KELİME sayfası; işaretin
     YOKLUĞU "işaret olmayacak" demek mi belirsiz. HANDOFF'ta açık
     kalem — karar Beyar'ın, kanon kendi kararıyla işaret SİLMEZ.

   ── ÖLÇÜ ─────────────────────────────────────────────────────────────
   Vektörün kendi oranı  3.9182 : 1   (tarayıcıda getBBox ile ölçüldü)
   Kaynağın kelime kutusu 81.4 × 24.0 px  ·  oranı 3.390 : 1
   İkisi AYNI DEĞİL çünkü kaynağınki bir METİN kutusu (satır boşluğu
   dahil), vektörünki İNK kutusu (`d` çıkanından taban çizgisine).
   Bu yüzden kutu yüksekliği DEĞİL, OPTİK boy eşitlendi:
     kaynağın küçük harf x-yüksekliği  ≈ 23px × 0.52  = 12.0px
     vektörün x/ink oranı              = 426/597      = 0.714
     → ink yüksekliği = 12.0 / 0.714   ≈ 16.8 → 17px

   🔴 BEYAR ÜSTÜNE KARAR VERDİ (K15, 2026-09-02): işaret kalktığı için
   optik eşitleme gerekçesi de düştü — kelime markası artık kabuktaki
   marka bloğunun TAMAMI. Ölçülen kutu yüksekliği KORUNUR: 24px.
   Genişlik oranla gelir: 24 × 3.9182 ≈ 94.0px. Uydurma yok.
   ⚠ İşaretin kutusu (40×40) ve aradaki boşluk KALKTI; kelime markası
     kabuk kabının sol kenarına oturur.
   ⚠ `width:auto` + `height` — oran vektörün, kanon ONU EZMEZ. */
.fit-word-mark{
  height:var(--marka-kelime-h);
  width:auto;
  display:block;
  flex:0 0 auto;
  /* 🔴 RENK YÜZEYDEN GELİR, SVG'YE SABİTLENMEZ — ölçüldü, 2026-09-02.
     İlk yazımda path'ler `fill="var(--marka)"` taşıyordu ve kelime
     markası HER yüzeyde marka mavisi basıyordu. Beyar footer'da gördü:
         dolgu  rgb(0,147,208)   --marka
         zemin  rgb(0,114,161)   --marka-koyu (dip zemini)
         KONTRAST 1.54:1  ← mavi üstüne mavi, OKUNMUYOR
     WCAG 1.4.11'in grafik nesne tabanı 3:1; 1.54 onun yarısı bile değil.

     Çözüm: path'ler `currentColor` taşır, rengi KAP verir. Böylece
     yüzey değişince marka da döner ve dört markada tek kural çalışır. */
  color:var(--marka);
}
/* Koyu marka zemininde — dip. Kaynağın kendi çözümü de buydu:
   footer kelime markası beyaz basılıyordu (`.fl-word .bd` #fff). */
.dip .fit-word-mark,
.footer .fit-word-mark{ color:var(--kagit); }

/* ── 27c · DİP BAŞLIKLARINDA ALT ÇİZGİ YOK ────────────────────────────
   🔴 K16 · Beyar kararı, 2026-09-02: *"footer'daki bu ana başlıkların
   altında çizgi olmayacak, gerek yok, kaldır."*

   ⚠ BU BİR KUSUR DÜZELTMESİ DEĞİL, KANON KARARIDIR. Kaynak çizgiyi
     bilerek çiziyor ve ölçüldü — İKİ tarafta da aynı:
         .foot-col h5 { border-bottom: 1px solid rgb(236,236,236) }
     Yani kanon kaynakla AYNIYDI; fark Beyar'ın kararıyla doğdu.
     KUSURU BİLDİR-DÜZELTME kuralı burada çiğnenmiyor: kural
     "ajan kendi kararıyla düzeltmez" der, bu karar ajanın değil.
   ⚠ `02-bilesenler.md §29`a kanon kararı olarak girer. */
.dip-kolon h5,
.dip-kolon .fc-head{ border-bottom:0; }

.ust-bant{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--kat-ust-bant);
  background:var(--murekkep); color:var(--koyu-metin-ust);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde);
}
.ust-bant>.kap{ display:flex; align-items:center; justify-content:space-between; height:var(--ust-bant-h); }
.ust-bant a{
  display:inline-flex; align-items:center; gap:var(--bosluk-7);
  color:var(--koyu-metin-ust);
  transition:color var(--sure) var(--yumusama);
}
.ust-bant a:hover{ color:var(--kagit); }
.ust-bant b{ font-weight:var(--agirlik-orta); color:var(--kagit); }

/* ---- sayfa başı (header) ---- */
.kabuk-basi{
  position:fixed; left:0; right:0; top:var(--ust-bant-h);
  z-index:var(--kat-header);
  background:var(--kagit);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
  box-shadow:var(--golge-kabuk);
  transition:background var(--sure-agir) var(--yumusama),
             border-color var(--sure-agir) var(--yumusama),
             box-shadow var(--sure-agir) var(--yumusama);
}

/* ── TEPEDE KİPİ (`.tepede`) — GÖRSELLİ BANDIN ÜSTÜNDE SAYDAM ─────────
   🔴 KANONDA HİÇ YOKTU. Kaynak `fit-shell.css:378` ve ailesi
   (`:401` `:419-422` `:429-430` `:2439`): sayfa görselli bir bandın
   üstündeyken ve kaydırma 0'dayken header ŞEFFAFLAŞIR, kenarı beyazın
   alfasına döner, gölgesi ve cam bulanıklığı KALKAR. Kabuk JS'i sınıfı
   kaydırmaya göre ekleyip kaldırıyor (kaynakta `.at-top`).

   Ölçüldü (`dump/fit-render/hata-404.html` ↔ `deneme/404.html`):
     FIT    background rgba(0,0,0,0) · border rgba(255,255,255,.14)
            backdrop-filter none · box-shadow none
     kanon  background #fff · border --cizgi
            backdrop-filter saturate(1.5) blur(10px) · gölge var
   Yani görselli bandın üstünde header SOLID BEYAZ duruyordu ve bandın
   üst şeridini kesiyordu (Beyar gözle yakaladı).

   ⚠ İçerik de beyaza döner — marka yazısı, menü, ikon düğmeleri. Renk
   tek tek yazılmaz: hepsi `--kagit`e bağlanır, çünkü koyu bandın üstünde
   okunur olan o. Alfa değerleri token katmanından (bant araç düğmeleri
   §34 ile aynı aile). */
.kabuk-basi.tepede{
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:var(--bant-arac-kenar-2b);
  box-shadow:none;
}
.kabuk-basi.tepede .ana-menu>*>a{ color:var(--kagit); }
.kabuk-basi.tepede .ana-menu>*>a:hover{ background:var(--bant-arac-kenar); color:var(--kagit); }
.kabuk-basi.tepede .ana-menu>*>a.aktif{ color:var(--kagit); }
.kabuk-basi.tepede .ana-menu>*>a.aktif::after{ background:var(--kagit); }
.kabuk-basi.tepede .ikon-dugme{
  background:var(--bant-arac-zemin-3); border-color:var(--bant-arac-kenar-3); color:var(--kagit);
}
.kabuk-basi.tepede .ikon-dugme:hover{
  background:var(--bant-arac-zemin-2); border-color:var(--kagit); color:var(--kagit);
}
/* Odak halkası koyu zeminde beyaz olur — aksan orada görünmüyor. */
.kabuk-basi.tepede .ana-menu a:focus-visible{ outline-color:var(--kagit); }
/* 🔴 MARKA KİLİDİ DE DÖNER — logo ve kelime işareti. Kanonda eksikti ve
   slot-1 gözle yakaladı: "DadaDiet"in "Dada" hecesi koyu bandın üstünde
   KOYU kalıyor ve kayboluyordu. Bu eksik yüzünden slot-1 markup'a iki ad
   birden yazmak zorunda kaldı (`tepede` + kabuğun `at-top`u); bu üç kural
   girince `at-top`a gerek kalmaz.
   Kaynak: `dd-shell.css` `.header.at-top .brand .logo-color/.logo-white`
   ve `.header.at-top .dd-word b, … .dd-st`. */
.kabuk-basi.tepede .marka .logo-renkli{ display:none; }
.kabuk-basi.tepede .marka .logo-beyaz{ display:block; }
.kabuk-basi.tepede .marka-kelime b,
.kabuk-basi.tepede .marka-kelime .marka-son{ color:var(--kagit); }

.kabuk-basi>.kap{
  display:flex; align-items:center; gap:var(--bosluk-22);
  height:var(--header-h);
}

.ana-menu{ display:flex; gap:var(--bosluk-2); flex-wrap:nowrap; flex:1; justify-content:center; min-width:0; }
/* 🔴 YALNIZ ÜST DÜZEY KALEM — `.ana-menu a` yazılırsa açılır menünün
   kalemlerine de sızar ve onların kendi tipografisini (14px/500) ezer.
   ÖLÇÜLDÜ: sızıntı dropdown başlıklarını 15px/700 yapıyordu, kaynakta
   14px/500. Çocuk birleştiricisi kapsamı menü çubuğuyla sınırlar. */
.ana-menu>a,
.ana-menu>*>a{
  position:relative; white-space:nowrap;
  font-size:var(--yazi-15); font-weight:var(--agirlik-kalin);
  color:var(--murekkep);
  padding:var(--bosluk-9) var(--bosluk-12);
  border-radius:var(--yuvarlak-md);
  transition:color var(--sure) var(--yumusama), background var(--sure) var(--yumusama);
}
.ana-menu>a:hover,
.ana-menu>*>a:hover{ color:var(--aksan-koyu); background:var(--aksan-yikama); }
.ana-menu>a.aktif,
.ana-menu>*>a.aktif{ color:var(--aksan-koyu); }
/* Aktif kalemin altındaki çizgi kalemin İÇİNE hizalanır (12px), kutunun
   kenarına değil — dolgu değişirse çizgi metinle beraber kayar. */
.ana-menu>a.aktif::after,
.ana-menu>*>a.aktif::after{
  content:""; position:absolute; left:var(--bosluk-12); right:var(--bosluk-12); bottom:2px;
  height:var(--cizgi-2); background:var(--aksan-koyu); border-radius:var(--yuvarlak-sm);
}
.ana-menu>a i,
.ana-menu>*>a i{ font-size:var(--yazi-9); margin-left:var(--bosluk-4); opacity:.5; }

/* ---- dip (footer) ---- */
.dip{
  background:var(--aksan-koyu); color:var(--dip-metin);
  padding:var(--bosluk-64) 0 0;
}
.dip a{ color:var(--dip-link); transition:color var(--sure) var(--yumusama); }
.dip a:hover{ color:var(--kagit); }

.dip-izgara{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.05fr;
  gap:var(--bosluk-44) var(--bosluk-28);
  padding-bottom:var(--bosluk-48);
  border-bottom:var(--cizgi-1) solid var(--dip-cizgi);
}
.dip-kolon h5,.dip-kolon h4{
  color:var(--kagit); font-size:var(--yazi-15); font-weight:var(--agirlik-kalin);
  /* Başlığın ALTINDA ayraç var — ölçüldü (render edilmiş kaynak DOM):
     `padding-bottom:18px` + `1px solid` açık nötr çizgi. CSS dosyasında
     `.foot-col h5` kuralı bunu yazmıyor; geç bir ezme getiriyor. Çizgi
     dipteki alfa ayracı (`--dip-cizgi`) DEĞİL, opak açık çizgi: yeşil
     zeminde alfa ayraç neredeyse görünmüyordu. */
  padding-bottom:var(--bosluk-18);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
  margin-bottom:var(--bosluk-18);
}
.dip-kolon a{
  display:block; font-size:var(--yazi-14); font-weight:var(--agirlik-govde);
  padding:var(--bosluk-7) 0;
}
.dip-kolon a:hover{ padding-left:var(--bosluk-4); }

.dip-yasal{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--bosluk-8) var(--bosluk-10);
  padding:var(--bosluk-24) 0 0;
  font-size:var(--yazi-12); font-weight:var(--agirlik-govde);
}
.dip-yasal a{ white-space:nowrap; }
.dip-yasal .ayrac{ width:var(--cizgi-1); height:11px; background:var(--dip-cizgi); flex:none; }

.dip-alt{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--bosluk-16) 0 var(--bosluk-26);
  font-size:var(--yazi-13); font-weight:var(--agirlik-govde);
  color:var(--dip-alt-metin);
}

@media (max-width:640px){
  .ust-bant{ display:none; }
  .kabuk-basi{ top:0; }
  .kabuk-basi>.kap{ height:var(--header-h-dar); }
  .dip-izgara{ grid-template-columns:1fr; gap:var(--bosluk-24); }
  .dip-alt{ flex-direction:column; gap:var(--bosluk-8); }
}


/* ---- PASİF ROTA ------------------------------------------------------
   `deneme/` karşılığı olmayan her bağlantı hem erişilebilirlikte hem
   GÖRÜNÜMDE pasif olur. İkisi birlikte olmazsa kullanıcı tıklar ve
   hiçbir şey olmaz — Diyet'in kendi şerhi de tam bunu yazıyor:
   "Hedefi olmayan bir bağlantı ekran okuyucuya 'bağlantı' diye
   duyurulur ve tıklanınca hiçbir şey olmaz." */
/* 🔴 SOLUKLUK AYRILDI — `aria-disabled` İKİ AYRI DURUMU işaretliyordu
   ve kural ikisini tek çizime indiriyordu (2026-09-02, slot-1 ölçtü):
     KİLİTLİ ROTA   Diyet'te henüz yok, ekranda "yakında" anlamında soluk
     HEDEFSİZ BAĞ.  çevrimdışı dosyada varış adresi olmayan gövde bağlantısı
   İkincisi KİLİTLİ DEĞİL, yalnız hedefsiz — ve kural onu da %45'e
   düşürüyordu: **13 ekranda 63 gövde bağlantısı yarı saydam çiziliyordu**
   (404'ün üç çıkış kartı ve altı çipi · bildirimlerin 13 satırı · …).
   Görsel bir YALAN: kaynakta o bağlantılar tam güçte.
   🔴 Erişilebilirlik bildirimi KALIR (`cursor` + `aria-disabled`), soluklukw
   yalnız KİLİTLİ kaleme gider. Kaynağın kendi şerhi de ikisini birlikte
   kullanmayı söylüyor (`.is-soon` + `aria-disabled`); kanon `.pasif`
   adıyla aynı ayrımı yapar. */
a[aria-disabled="true"]{ cursor:not-allowed; }
a[aria-disabled="true"].pasif{ opacity:.45; }


/* =====================================================================
   28 · DURUM HAPI — kaynak `.pstat` (+ `.od-pill` `.st-*` `.hs-pill`)
   ---------------------------------------------------------------------
   §ADAY listesindeki "durum hapı" bu turda ölçüldü ve kanona girdi
   (destek modülü · 16 kullanım tek ekranda).

   ROZETTEN (§5) AYRI BİR KALEM — ölçüm ayırdı, tercih değil:
       .rozet      dolgu 4/12 · yuvarlak-rozet · 1px kenar · aralık .02em
       .durum-hapi dolgu 4/10 · yuvarlak-sm   · kenar YOK  · aralık normal
                   + 6px nokta (`::before`)
   Nokta hapı rozetten ayıran asıl işaret: rozet bir ETİKET, hap bir
   DURUM — noktanın rengi metinden miras alınır (`currentColor`), yani
   dört durumda dört ayrı nokta rengi tek kuralla gelir.

   DÖRT DURUM DÖRT AYRI SINIF taşır; kaynağın kendi şerhi (destek-v1
   §Ö25) "iki durum aynı rozeti paylaşamaz" diyor. Anlam:
       .acik      top DESTEKTE   — talep açıldı, yanıt bekleniyor
       .bekleyen  top ÜYEDE      — destek yanıtladı, sıra üyede
       .cozulen   çözüldü
       .kapali    kapatıldı
   ===================================================================== */

.durum-hapi{
  display:inline-flex; align-items:center; gap:var(--bosluk-6);
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-kalin);
  padding:var(--bosluk-4) var(--bosluk-10);
  border-radius:var(--yuvarlak-sm);
  white-space:nowrap;
}
.durum-hapi::before{
  content:""; width:6px; height:6px; flex:none;
  border-radius:var(--yuvarlak-hap);
  background:currentColor;
}
.durum-hapi.acik    { background:var(--durum-acik-zemin);     color:var(--durum-acik-metin); }
.durum-hapi.bekleyen{ background:var(--durum-bekleyen-zemin); color:var(--durum-bekleyen-metin); }
.durum-hapi.cozulen { background:var(--aksan-yikama);         color:var(--aksan-koyu); }
.durum-hapi.kapali  { background:var(--durum-kapali-zemin);   color:var(--durum-kapali-metin); }


/* =====================================================================
   33 · İPUCU KARTI — kaynak `.tips-card` / `.tips-head` / `.tips-links`
   ---------------------------------------------------------------------
   "Aradığın burada da olabilir" kartı: bir başlık, bir cümle ve YATAY bir
   yönlendirme ızgarası. Boş durumdan (§7) farkı, ekranın boş olmaması —
   kullanıcı zaten iş yapıyor, kart alternatif yolları hatırlatıyor.
   Kapanış bandından (§24) farkı, ORTALANMAMIŞ ve TEK eylem taşımıyor
   olması: bant ekranı kapatır, ipucu kartı yanına eklenir.
   ===================================================================== */

.ipucu-kap{ display:block; margin-top:var(--bosluk-22); }
.kart.ipucu{ padding:var(--bosluk-20) var(--bosluk-22); }
.ipucu-bas{
  font-size:var(--yazi-15); font-weight:var(--agirlik-kalin);
  display:flex; align-items:center; gap:var(--bosluk-10);
  margin-bottom:var(--bosluk-14);
}
.ipucu-bas i{ color:var(--aksan-koyu); font-size:var(--yazi-14); }
.ipucu-metin{
  font-size:var(--yazi-13); color:var(--metin-ikincil);
  font-weight:var(--agirlik-govde); line-height:var(--satir-genis);
  margin:0 0 var(--bosluk-14);
  text-align:left; text-align-last:auto;      /* yaslama istisnası — B33 */
}
.ipucu-baglantilar{
  display:grid; gap:var(--bosluk-10);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.ipucu-baglanti{
  display:flex; align-items:center; gap:var(--bosluk-9);
  min-height:44px;                            /* WCAG 2.5.5 */
  font-size:var(--yazi-13); font-weight:var(--agirlik-kalin);
  color:var(--aksan-koyu);
  background:var(--aksan-yikama);
  border:var(--cizgi-1) solid var(--aksan-cizgi);
  border-radius:var(--yuvarlak-md);
  padding:var(--bosluk-12) var(--bosluk-14);
  text-decoration:none; transition:var(--sure) var(--yumusama);
}
.ipucu-baglanti:hover{
  background:var(--aksan-koyu); border-color:var(--aksan-koyu);
  color:var(--kagit);
}
.ipucu-baglanti:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset:var(--odak-ofset);
}
.ipucu-baglanti>i:first-child{ flex:none; }
/* Ok kalemi sağa yaslanır — kalemin genişliği metne göre değişse de
   oklar aynı hizada kalsın diye `margin-left:auto`. */
.ipucu-baglanti .ok{ margin-left:auto; font-size:var(--yazi-11); }

/* Üç kalem 860px kolonda ~265px'e düşüyor; daha darda alt alta.
   860 kırılımı kaynağın kendi değeri (`destek-v1.html:212`) — kolonun
   genişliğiyle aynı sayı, tesadüf değil: kalemler kolona sığmıyorsa iner. */
@media (max-width:860px){
  .ipucu-baglantilar{ grid-template-columns:minmax(0,1fr); }
}


/* =====================================================================
   DENETİM NOTU — bu dosyada ne token DEĞİL ve neden
   ---------------------------------------------------------------------
   Ham hex: 0 · rgb(): 0 · tanımsız token: 0 (ölçüldü)

   Tokenlanmamış ham px'lerin tamamı BOŞLUK DEĞİL, ve hiçbiri 4px
   ölçeğine ait değil:

     44px          dokunma hedefi (WCAG 2.5.5 / 2.5.8) — erişilebilirlik
                   sabiti, ölçekle oynatılamaz
     640 · 860 · 1024px  kırılım noktası — @media var() kabul etmez (bkz.
                   tokenlar.css §13)
     40 · 46 · 26 · 20 · 58 · 64 · 38 · 34 · 30 · 62 · 128 · 96px
                   eleman ÖLÇÜSÜ (ikon kutusu, anahtar rayı, topuz)
                   34/30  · akordeon ikon çipi (masaüstü/mobil, §21)
                   62     · kapanış bandı ikonu (§24)
                   128/96 · kimlik avatarı (masaüstü/mobil, §25)
                   38     · sayaç kutusu ikonu (§25)
     38px          form kartı başlık ikonu (§1 `.form-bas h2 i`)
     300px         gönderi şeridi notunun ölçüsü (§3 `.alan-gonder .not`)
     140px         uzun anlatım alanının taban yüksekliği (§3 `.alan-metin.uzun`)
     1px           hata özeti ikonunun optik hizalama payı (§3 `.alan-ozet i`)
     6px           durum hapının noktası (§28) — eleman ölçüsü; hapın
                   dolgusu (`--bosluk-4`/`--bosluk-10`) tokenlı
     4px           avatarın beyaz halkası (§25) — kenarlık kalınlığı,
                   boşluk değil; --cizgi-* merdiveni hairline içindir
     54 · 56 · 52 · 144px
                   kenar kalemlerinin ÖLÇÜSÜ (§26): başa-dön 54, yüzen
                   düğme 56 (mobil 52), kenar sekmesi min-yükseklik 144
     92px          yüzen düğmenin alt payı — "başa dön"ün (24px) ÜSTÜNDE
                   durması için; iki markada da aynı istif
     8px           .basa-don gizli hâlinin kayması (transform) — hareket
     -78 · -70 · -64 · -52 · -66px
                   BİNME geometrisi (§25): kart kapağa, avatar karta
                   biner. Negatif margin bir boşluk değil bir KONUMDUR;
                   4px ölçeğine sokulursa binme oranı bozulur ve avatar
                   kartın içine düşer.
                   -70 (≤1024) · -52 kart / -66 avatar (≤640) — üçü de
                   2026-09-01 mobil ölçümünde eklendi (02 §35)
     96 · 104px    kimlik avatarının dar ekran ölçüsü (§25) — 104 ≤640,
                   96 daha dar kademe yok; eleman ölçüsü
     44px          dokunma hedefi (§11 mobil · WCAG 2.5.8). Dolgu inerken
                   min-height ile korunur — kaynağın kendi çözümü
     104px         textarea taban yüksekliği (kit ölçümü)
     200 · 220 · 420 · 520px   min/max genişlik
                   420 · kapanış bandı açıklama satırı (§24)
                   520 · arama kutusu taban genişliği (§22)
     translateY(-2px)    hover kalkışı — hareket, boşluk değil
     text-underline-offset:2px · margin-top:2px
                   tipografik hizalama payı; 4px'e yuvarlanırsa ikon
                   satırdan kayar
     5 · 15 · 20px (yalnız .alan-secim'de)
                   ok işaretinin gradient geometrisi
     1px           .yalniz-okuyucu kırpma kutusu

   Yeni bir ham px eklenecekse: önce §6 merdiveninde karşılığı var mı
   diye bakılır; yoksa buraya bir satır eklenir.
   ===================================================================== */

/* =====================================================================
   36 · HESAP EKRANI KABI — kaynak `.hs-col` / `.pf-tabbar.hs-rail`
   ---------------------------------------------------------------------
   Ölçüm: slot-2, render edilmiş DOM @1440 (`hesabim-v1`).

   ÜÇ KAP TEK HİZAYA: kimlik kartı · sekme rayı · içerik sütunu üçü de
   AYNI yan payı taşır. Kaynak bunu kendi şerhinde ölçüm tablosuyla
   yazmış; kanonun `.kimlik`i zaten `--bosluk-28` kullanıyor, yani değer
   uydurulmadı — üçüncü kap ona hizalanıyor.
   Ölçülen: `.kap` 1240 − 2×32 = 1176 iç genişlik; 1176 − 2×28 = 1120 ✓
   ===================================================================== */

.hesap-kolonu{ margin:0 var(--bosluk-28); }
.sekme-ray.hesap{ margin:var(--bosluk-24) var(--bosluk-28) var(--bosluk-22); }
/* `safe center` — düz `center` sığmayınca rayın BAŞINI erişilemez yapar
   (taşan içerik sola kesilir ve kaydırılamaz). Kaynağın kendi çözümü. */
.sekme-ray.hesap .sekmeler{ justify-content:safe center; }
@media (max-width:1024px){
  .hesap-kolonu{ margin:0 var(--bosluk-16); }
  .sekme-ray.hesap{ margin:var(--bosluk-24) var(--bosluk-16) var(--bosluk-22); }
}
@media (max-width:640px){
  .hesap-kolonu{ margin:0 var(--bosluk-4); }
  .sekme-ray.hesap{ margin:var(--bosluk-24) var(--bosluk-4) var(--bosluk-22); }
}
/* 🔴 ÜST NEFESİ RAY VERİR, BANT DEĞİL (slot-2 K1). Kaynak
   `.hs-body{padding:0 0 74px}` — üst pay yok, çünkü rayın kendi
   `margin-top:24px`i onu zaten veriyor. Kanonun `.zebra>.bolum`u 32px
   daha ekliyordu: ölçülen `kimlik kartı → ray` FIT 24 ↔ kanon 56.
   §25'in "bant dolgusu iki kez binebilir" tuzağının aynısı. */
.zebra>.bolum.hesap-govde{ padding:0 0 var(--bolum-nefes); }

/* Sekme panelinin kendisi (slot-2 T1c). Odak halkası panelin TAMAMINI
   sarıyor; taban `--odak-ofset` (2px) halkayı kartın gölgesine sokuyordu,
   kaynak 6px veriyor — ölçülen değer yazıldı.
   ⚠ `scroll-margin-top` YAZILMADI ve bu bilinçli: kaynak onu sticky ray
   yüksekliğinden (`--hs-anchor-pad`) alıyor, bu ekranda ray STATIC
   (ölçüldü) ve kaynağın kendi şerhi de "tek panel görünürken gereksiz"
   diyor. Taşımak ölü kural olurdu. */
.hesap-bolme:focus{ outline:none; }
.hesap-bolme:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset:var(--bosluk-6);
  border-radius:var(--yuvarlak-lg);
}


/* =====================================================================
   37 · KANAL MATRİSİ — kaynak `.ntf-matrix` / `.ntf-row`
   ---------------------------------------------------------------------
   "Hangi konu hangi kanaldan gelsin" ızgarası: konu adı + iki kanal
   sütunu. HANDOFF §ADAY listesindeki `.ntf-matrix` budur.
   Ölçüm: slot-2 (hesabim/bildirim · 7 konu × 2 kanal + başlık satırı).
   ===================================================================== */

.kanal-matris{ width:100%; }
.kanal-satir{
  display:grid; grid-template-columns:minmax(0,1fr) 92px 92px;
  gap:var(--bosluk-12); align-items:center; padding:var(--bosluk-14) 2px;
}
.kanal-satir+.kanal-satir{ border-top:var(--cizgi-1) solid var(--cizgi); }
/* Başlık satırı üst çizgi TAŞIMAZ — ilk veri satırının çizgisi zaten
   ayracı çiziyor, iki çizgi üst üste binerdi. */
.kanal-satir.bas{ padding:var(--bosluk-4) 2px var(--bosluk-12); border-top:none; }
.kanal-satir.bas span{
  font-size:var(--yazi-11); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-versal-2); text-transform:uppercase;   /* 🔴 .04 → .08 (B44) */
  color:var(--murekkep-yumusak); text-align:center;
}
.kanal-satir.bas span:first-child{ text-align:left; }
.kanal-metin b{
  display:block; font-size:var(--yazi-14); font-weight:var(--agirlik-kalin);
  color:var(--murekkep);
}
.kanal-metin span{
  display:block; font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); color:var(--metin-ikincil); margin-top:2px;
  text-align:left; text-align-last:auto;    /* B36 */
}
.kanal-hucre{ display:flex; justify-content:center; }
@media (max-width:640px){
  .kanal-satir{ grid-template-columns:minmax(0,1fr) 56px 56px; gap:var(--bosluk-8); }
}


/* =====================================================================
   38 · YÖNLENDİRME IZGARASI — kaynak `.hs-go` / `.go-ico` / `.go-txt`
   ---------------------------------------------------------------------
   "Buradan şuraya git" kartları. §35 `.durum-cikis`la AKRABA ama AYRI:
   orada `auto-fit` ile kolon sayısı kendi düşer ve kart ikonu çıplak;
   burada sabit iki kolon ve ikon ÇİPLİ. Ölçüm: slot-2 (hesabim/diger).
   ===================================================================== */

.yonlendirme{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bosluk-12); }
.yonlendirme-kalem{
  display:flex; align-items:flex-start; gap:var(--bosluk-14);
  padding:var(--bosluk-16) var(--bosluk-18);
  border-radius:var(--yuvarlak-lg);
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi);
  transition:var(--sure) var(--yumusama);
}
.yonlendirme-kalem:hover{
  border-color:var(--aksan); box-shadow:var(--golge-sm); transform:translateY(-2px);
}
.yonlendirme-ikon{
  flex:none; width:38px; height:38px; border-radius:var(--yuvarlak-md);
  background:var(--aksan-yikama-2); color:var(--aksan-koyu);
  display:grid; place-items:center; font-size:var(--yazi-15);
}
.yonlendirme-metin b{
  display:flex; align-items:center; gap:var(--bosluk-8);
  font-size:var(--yazi-14-5); font-weight:var(--agirlik-kalin); color:var(--murekkep);
}
.yonlendirme-metin b i{ font-size:var(--yazi-11); color:var(--aksan-koyu); }
.yonlendirme-metin span{
  display:block; font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-orta); color:var(--metin-ikincil); margin-top:3px;
  text-align:left; text-align-last:auto;    /* B36 */
}
@media (max-width:640px){ .yonlendirme{ grid-template-columns:1fr; } }


/* =====================================================================
   39 · ONAY KAPISI — kaynak `.hs-gate` / `.hs-check` / `.hs-gate-acts`
   ---------------------------------------------------------------------
   Yıkıcı işlemin önündeki kapı. İKİ SLOT BAĞIMSIZ ÖLÇTÜ ve değerler
   birebir aynı çıktı (slot-2 hesabim/veri · slot-3 odemelerim/iade) —
   tek bileşen, iki ekran. HANDOFF §ADAY listesindeki `.hs-gate` budur.

   🔴 SÖZLEŞME (JS'in elinde, kanon kapalı hâli yazar): onay kutusu
   işaretlenmeden gönder düğmesi `disabled` durur ve sebebi
   `.durum-satir.kapali` (§14) ile YAZIYLA söylenir. §21 akordeonun
   "tek açık kalem" sözleşmesiyle aynı desen.
   ===================================================================== */

.onay-kapisi{ display:flex; flex-direction:column; gap:var(--bosluk-14); margin-top:var(--bosluk-4); }
.onay-kutusu{
  display:flex; align-items:flex-start; gap:var(--bosluk-11);
  padding:var(--bosluk-14) var(--bosluk-16);
  border-radius:var(--yuvarlak-md);
  background:var(--zemin); border:var(--cizgi-1) solid var(--cizgi);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-orta);
  line-height:var(--satir-orta);
  text-align:left; text-align-last:auto;    /* B36 */
}
/* `accent-color` kutunun rengini KARTIN durumundan alır — uyarı kartında
   kehribar, tehlike kartında kırmızı. Tek yerde yazılır, ikisi de doğru. */
.onay-kutusu input{ width:19px; height:19px; margin-top:1px; accent-color:var(--aksan); }
.kart.uyari-kart .onay-kutusu input{ accent-color:var(--uyari); }
.kart.tehlike-kart .onay-kutusu input{ accent-color:var(--tehlike); }
.onay-eylemler{ display:flex; align-items:center; gap:var(--bosluk-14); flex-wrap:wrap; }
.onay-eylemler.ustlu{ margin-top:var(--bosluk-22); }


/* =====================================================================
   40 · MADDE LİSTESİ — kaynak `.hs-list`
   ---------------------------------------------------------------------
   İkonlu, işaretsiz madde dökümü. Ölçüm: slot-2 (hesabim/veri).
   🔴 B36 İSTİSNASI ZORUNLU ve kaynağın KENDİSİ de böyle yazmış — ölçümü
   şerhinde duruyor: 390px'te kutu 324px kalıyor, `fit-type.css`in 20rem
   container-query istisnası açılmıyor ve en geniş kelime arası 46.9px'e
   çıkıyor (normali 3.4px).
   ===================================================================== */

.madde-liste{
  display:flex; flex-direction:column; gap:var(--bosluk-9);
  margin-bottom:var(--bosluk-20); list-style:none; padding:0;
}
.madde-liste li{
  display:flex; align-items:flex-start; gap:var(--bosluk-10);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-orta); color:var(--murekkep-yumusak);
  text-align:left; text-align-last:auto;
}
.madde-liste li>span{ text-align:left; text-align-last:auto; }
.madde-liste li i{
  font-size:var(--yazi-11); margin-top:5px; color:var(--metin-ikincil); flex:none;
}


/* =====================================================================
   41 · ŞİFRE ALANI — kaynak `.fk-pass` / `.fk-eye`
   ---------------------------------------------------------------------
   §3 form kitinin varyantı: girdi + içine gömülü göster/gizle düğmesi.
   HANDOFF §ADAY listesindeki `.fk-pass` budur. Ölçüm: slot-2.
   Düğme 44×44 — dokunma hedefi, girdinin kendi yüksekliğinden bağımsız.
   ===================================================================== */

/* 🔴 K1 — YAZILAN ŞİFRE GÖZ DÜĞMESİNİN ALTINA GİRİYORDU. Kaynak
   `fit-shell.css:4865` `.fk-pass .fk-input{padding-right:56px}` yazıyor;
   kanonda hiç yoktu. Ölçüm: FIT `13px 56px 13px 15px` ↔ kanon `13px 15px`.
   Üç alanda birden (giris · kayit · yeni-sifre ×2) ve GÖZLE görülüyor.
   ⚠ 56px ham: dokunma hedefi + göz düğmesinin genişliği, boşluk ölçeği
   değil (§3'ün üçüncü kuralı). */
.alan-sifre{ position:relative; }
.alan-sifre .alan-girdi{ padding-right:56px; }
.alan-goz{
  position:absolute; right:var(--bosluk-4); top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; background:transparent;
  border-radius:var(--yuvarlak-sm); display:grid; place-items:center;
  color:var(--metin-ikincil); font-size:var(--yazi-14); cursor:pointer;
}
.alan-goz i{ font-size:var(--yazi-14); }
.alan-goz:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk); outline-offset:var(--odak-ofset);
}


/* =====================================================================
   42 · AYAR SATIRI EK PARÇALARI — `.as-acik` · `.satir-dugme` · `.kaydedildi`
   ---------------------------------------------------------------------
   Üçü de §9'un kalemleri ama ayrı adlandırıldılar çünkü §9 dışında da
   kullanılıyorlar. `.satir-dugme`yi İKİ SLOT bağımsız ölçtü (slot-2
   `hesabim/guvenlik` 7 kullanım · slot-3 `odemelerim` paket ve ödeme
   satırı eylemleri) ve değerler birebir aynı çıktı — tek ad, iki ekran.
   ===================================================================== */

/* Değiştirilemez durum etiketi — "her zaman açık". §28 `.durum-hapi`den
   AYRI: hapın zemini ve kenarlığı var, bunun yok. Düz ikon + metin. */
/* ── METİN İÇİ BAĞLANTILAR ────────────────────────────────────────────
   Kaynak bunları SATIR İÇİ stille yazmış; kanon kural yazar (`.alt-not a`
   ve `.kart-alt .not a` zaten öyle). slot-2 ölçtü: kanonda gri/normal,
   kaynakta yeşil/kalın çiziliyorlardı.
   ⚠ `.alan-yardim a` ve `.kimlik-giris a` KURAL İSTEMEZ — kaynakta da
   kalıtımla gri kalıyorlar; kural yazmak SAPMA olurdu. */
.kart-bas p a,
.as-metin a,
.durum-satir a{ color:var(--aksan-koyu); font-weight:var(--agirlik-kalin); }

/* Yıkıcı kartın içindeki bağlantı kartın DURUM rengini alır ve ALTI
   ÇİZİLİR — renk tek başına taşıyıcı olmasın diye (WCAG 1.4.1). Kaynak
   ikisini de satır içi yazmış; kanon kartın sınıfından türetiyor. */
.kart.uyari-kart .kart-bas p a{ color:var(--uyari); }
.kart.tehlike-kart .kart-bas p a{ color:var(--tehlike-koyu); }
.kart.uyari-kart .madde-liste a,
.kart.tehlike-kart .madde-liste a{
  font-weight:var(--agirlik-ekstra);
  text-decoration:underline; text-underline-offset:2px;
}
.kart.uyari-kart .madde-liste a{ color:var(--uyari); }
.kart.tehlike-kart .madde-liste a{ color:var(--tehlike-koyu); }

.as-acik{
  display:inline-flex; align-items:center; gap:var(--bosluk-6);
  flex:none; white-space:nowrap;
  font-size:var(--yazi-12); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-govde); color:var(--aksan-koyu);
}
.as-acik i{ font-size:var(--yazi-12); }

/* Satır içi ikincil düğme — `.dugme` (14/26 · 14.5) ile `.dugme.kucuk`
   (12/20 · 13.5) arasında ÜÇÜNCÜ boy; ikisi de tutmuyor, ölçüldü. */
.satir-dugme{
  display:inline-flex; align-items:center; gap:var(--bosluk-7);
  padding:var(--bosluk-10) var(--bosluk-16); min-height:44px;
  border-radius:var(--yuvarlak-md);
  font-family:inherit; font-size:var(--yazi-13); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  white-space:nowrap; cursor:pointer;
  transition:var(--sure) var(--yumusama);
}
.satir-dugme i{ font-size:var(--yazi-13); }   /* renk miras — kaynağın kipi */
.satir-dugme:hover{ border-color:var(--aksan); color:var(--aksan-koyu); }
.satir-dugme:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk); outline-offset:var(--odak-ofset);
}

/* Kaydedildi rozeti — kart ayağında, kaydetmeden sonra belirir.
   Kaynak `.hs-saved{display:none}` / `.hs-saved.show{…}` kipinde; kanon
   `[hidden]` ile de çalışır (dosya sonundaki tek yetkili kural). */
.kaydedildi{
  display:none; align-items:center; gap:var(--bosluk-7);
  font-size:var(--yazi-13); font-weight:var(--agirlik-kalin);
  color:var(--aksan-koyu);
}
.kaydedildi.gorunur{ display:inline-flex; }




/* =====================================================================
   58 · BELGE PENCERESİ — kaynak `.fd-*` (fatura belgesi)
   ---------------------------------------------------------------------
   ⚠ PENCERE KABUĞU KANONDA DEĞİL. `.fb-*` kiti markanın kendi kabuğundan
   geliyor (HANDOFF §12'nin "54 süs kuralı" kalemi); burada YALNIZ belgenin
   iç parçaları var. Ölçüm: slot-3, @1440.

   🔴 PENCERE ANA BÖLÜMÜN DIŞINDA BASILIR — yani `main.page-main`
   kapandıktan SONRA. `.page-main{position:relative;z-index:2}` bir YIĞIN
   BAĞLAMI açıyor; içeride kalan pencerenin `z-index`i o bağlamın 2'siyle
   sınırlanıyor ve kabuğun üst bandı (70) pencerenin ÜSTÜNDE kalıyor.
   slot-3 `elementFromPoint(12,12)` ile ölçtü — `.topbar` dönüyordu.
   Kaynak da pencereyi ana bölümden sonra basıyor.
   ⚠ BU ŞERH BİLEREK HTML ETİKETİ YAZMIYOR. Kanon `deneme/*.html`e GÖMÜLÜ
   gidiyor; şerhte geçen bir kapanış etiketi, o dosyaları işleyen her
   betiğin aramasına düşer. İlk yazımda burada gerçek bir kapanış etiketi
   vardı ve slot-3'ün üreticisi onu markup sanıp pencereyi gömülü CSS'in
   ORTASINA yazdı — üretici hata vermedi, sayfa açıldı, 189 ölçü birden
   bozuldu. Şerh metni de kod kadar dikkat ister.
   🔴 AÇMA/KAPAMA `.show` İLE, `[hidden]` İLE DEĞİL: kabuğun `.fb-modal`ı
   `display:grid` + `visibility/opacity` geçişiyle çalışıyor, `[hidden]`
   (0,0,1) onu yenemiyor. B37'nin modal hâli.
   ===================================================================== */

.belge-pencere{ width:min(760px,100%); }

/* Künye — §12 `.kunye`nin ÜÇ KOLONLU ve dar dolgulu kipi. */
.kunye.belge{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:var(--bosluk-20); }
.kunye.belge dt,
.kunye.belge dd{ padding:var(--bosluk-13) var(--bosluk-15); }
.kunye.belge dd{ font-size:var(--yazi-14); font-weight:var(--agirlik-kalin); margin-top:var(--bosluk-5); word-break:break-word; }
.kunye.belge dd small{ display:block; margin-top:3px; font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde); letter-spacing:var(--aralik-genis); }

.belge-taraflar{ display:grid; grid-template-columns:1fr 1fr; gap:var(--bosluk-14); margin-bottom:var(--bosluk-20); }
.belge-taraflar section{
  padding:var(--bosluk-15) var(--bosluk-16); border-radius:var(--yuvarlak-md);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--zemin);
}
.belge-taraflar h4{
  font-size:var(--yazi-11); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-versal); text-transform:uppercase;
  margin-bottom:var(--bosluk-8);
}
.belge-taraflar b{ display:block; font-size:var(--yazi-14-5); font-weight:var(--agirlik-kalin); margin-bottom:var(--bosluk-5); }
.belge-taraflar p span{ display:block; }   /* üç bilgi üç ayrı satır */
.belge-taraflar p{
  margin:0; font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-genis); color:var(--murekkep-yumusak);
  text-align:left; text-align-last:auto;    /* B36 */
}

.belge-toplam{
  display:flex; flex-direction:column; gap:var(--bosluk-9);
  padding:var(--bosluk-16) var(--bosluk-18); margin-top:var(--bosluk-18);
  border-radius:var(--yuvarlak-md); border:var(--cizgi-1) solid var(--cizgi);
  background:var(--zemin); list-style:none;
}
.belge-toplam li{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--bosluk-16);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-orta); color:var(--metin-ikincil);
}
.belge-toplam li>span:last-child{ font-weight:var(--agirlik-kalin); color:var(--murekkep); }
.belge-toplam li.genel{
  border-top:var(--cizgi-1) solid var(--cizgi);
  padding-top:var(--bosluk-11); margin-top:2px;
  font-size:var(--yazi-15); font-weight:var(--agirlik-ekstra); color:var(--murekkep);
}
.belge-toplam li.genel>span:last-child{
  font-size:var(--yazi-19); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-baslik); font-variant-numeric:tabular-nums;
}

.belge-odeme{
  display:flex; align-items:center; gap:var(--bosluk-14); flex-wrap:wrap;
  padding:var(--bosluk-14) var(--bosluk-16); margin-top:var(--bosluk-18);
  border-radius:var(--yuvarlak-md); border:var(--cizgi-1) solid var(--cizgi);
  background:var(--kagit);
}
/* Kart markası kutusu §50 `.odeme-marka` ile BİREBİR aynı ölçü — tek
   bileşen, iki yer (slot-3 doğruladı). Ayrı kural yazılmadı. */
.belge-odeme-metin b{ font-size:var(--yazi-14); font-weight:var(--agirlik-kalin); letter-spacing:var(--aralik-vurgu); }
.belge-odeme-metin span{ display:block; margin-top:2px; font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde); color:var(--metin-ikincil); }

/* Belgenin kendi tablosu — §4'ün DAR kipi (11/12 dolgu · 13px · 520px). */
.tablo.belge{ min-width:520px; }
.tablo.belge th,
.tablo.belge td{ padding:var(--bosluk-11) var(--bosluk-12); font-size:var(--yazi-13); }
.tablo.belge .sag{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

.belge-ayak{
  display:flex; justify-content:flex-end; align-items:center; gap:var(--bosluk-12); flex-wrap:wrap;
  border-top:var(--cizgi-1) solid var(--cizgi);
  padding:var(--bosluk-20) 0 var(--bosluk-24); margin-top:var(--bosluk-24);
}
.belge-ayak .not{
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde); color:var(--murekkep-yumusak);
  text-align:left; text-align-last:auto;    /* B36 */
}


/* =====================================================================
   60 · ARAMA YÜZEYİ — kaynak `.fs-*` (hero · kutu · sekme · sonuç)
   ---------------------------------------------------------------------
   Ölçüm: slot-1, @1440 · dört durum (boş · sorgulu · öneri boş · öneri
   yazılmış). `.df-*` (50 seçici) ÖLÜ CSS'ti — hub'dan kopyalanmış artık,
   gövdede sıfır kullanım; kanona GİRMEDİ.

   🔴 `.arama-hero` §34 `.bant` DEĞİL. İkisi de koyu tam-bleed bant ama:
     .bant         yükseklik SABİT (token) · `overflow:hidden` · 3 perde
     .arama-hero   yükseklik SABİT (aynı token) · `overflow:VISIBLE` · 2 perde
   🔴 "yükseklik İÇERİK" YAZIYORDU VE YANLIŞTI (2026-09-02 · ölçüm).
   Kaynak bandın boyunu `.bant`la AYNI tokenden veriyor:
     `body[data-fit-hero-kind="liste"] .fs-top{height:var(--banner-h-liste)}`
     (`fit-shell.css:2590`) — 544 · @≤1024 607 · @≤640 587.
   Üç kırılımın üçü de `tokenlar.css`te ZATEN doğruydu; eksik olan tek şey
   kuralın `.arama-hero`ya bağlanmasıydı. İki bant arasındaki gerçek fark
   yükseklik değil KIRPMA (`hidden` ↔ `visible`) ve perde sayısı.
   ⚠ NEDEN ON TUR GÖRÜNMEDİ: `width`/`height` ölçüme alınmayanlar
   listesinde (§0b) ve durum `body`nin SINIFINDA değil `data-` özniteliğinde
   (`data-fit-hero-kind="liste"`), yani SINIF bloğu da göremiyor. Kusur
   ancak sorgulu durumda SIRA/aralık farkı olarak dolaylı göründü:
   −84 (@1440) · −244 (@390). `.giris-pano`nun R15 bulgusuyla aynı aile.
   `visible` zorunlu: öneri paneli kutunun DIŞINA taşıyor. Süslemeler
   ayrı bir kırpma katmanına (`.arama-susleme`) alınmış — kaynağın çözümü.
   ===================================================================== */

.arama-hero{
  position:relative; overflow:visible;
  /* Bandın boyu İÇERİKTEN DEĞİL tokenden gelir — `.bant`la aynı yuva
     (bkz. yukarıdaki şerh). Kırılımlar tokenin kendi kademelerinde. */
  height:var(--banner-h-liste);
  padding:calc(var(--kabuk-h) + var(--hero-ust)) 0 var(--hero-alt);
  background:
    var(--arama-perde),
    var(--bant-gorsel) var(--bant-gorsel-yeri)/cover no-repeat,
    var(--bant-zemin);
}
.arama-hero.oneri-acik{ z-index:45; }      /* panel açıkken bant üste çıkar */
.arama-susleme{
  position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none;
}
.arama-susleme::before{
  content:""; position:absolute; inset:0; background:var(--arama-parilti);
}
.arama-susleme::after{
  content:""; position:absolute; right:-120px; bottom:-140px;
  width:420px; height:420px; border-radius:var(--yuvarlak-daire);
  background:var(--arama-parilti-2);
}
.arama-hero>.kap{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:stretch;
  row-gap:var(--banner-gap);
}
.arama-hero>.kap>*{ margin-top:0; margin-bottom:0; }
/* 🔴 KIRINTI AKIŞTA KALIR — §34'ün `absolute`u BURADA YOK. Bant yüksekliği
   içerikten geldiği için kırıntıyı akıştan çıkarmaya gerek yok. */
.arama-hero .kirinti{ position:static; margin-bottom:var(--bosluk-12); }
.arama-hero .ust-etiket{ color:var(--aksan-parlak); }
.arama-hero .ust-etiket::before{ background:var(--aksan-parlak); }
.arama-hero h1{
  font-size:var(--yazi-42); line-height:var(--satir-baslik);
  letter-spacing:var(--aralik-baslik-2); color:var(--kagit); margin:0;
}
.arama-hero h1 .vurgu{ color:var(--aksan-parlak); }
.arama-giris{
  font-size:var(--yazi-15-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-genis); max-width:600px;
  color:var(--koyu-metin); margin-bottom:var(--bosluk-26);
  text-align:left; text-align-last:auto;    /* B36 */
}
.arama-ozet{
  margin-top:var(--bosluk-18);
  font-size:var(--yazi-14-5); font-weight:var(--agirlik-govde);
  color:var(--koyu-metin-2);
  text-align:left; text-align-last:auto;    /* B36 */
}
.arama-ozet b{ color:var(--kagit); font-weight:var(--agirlik-kalin); }
.arama-ozet .sorgu{ color:var(--aksan-parlak); font-weight:var(--agirlik-kalin); }

/* ---- ARAMA KUTUSU --------------------------------------------------- */
.arama-kutu{
  position:relative; max-width:680px; padding:var(--bosluk-10);
  background:var(--kagit); border:var(--cizgi-1) solid var(--aksan-cizgi);
  border-radius:var(--yuvarlak-lg); box-shadow:var(--golge-lg);
}
.arama-satir{ display:flex; gap:var(--bosluk-8); padding:var(--bosluk-6); }
.arama-girdi-kap{
  flex:1; display:flex; align-items:center; gap:var(--bosluk-12);
  background:var(--zemin); border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md); padding:0 var(--bosluk-18);
}
.arama-girdi-kap>i{ color:var(--aksan-koyu); font-size:var(--yazi-16); }
.arama-kutu input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:inherit; font-size:var(--yazi-15-5); font-weight:var(--agirlik-govde);
  color:var(--murekkep); padding:var(--bosluk-16) 0;
}
/* 🔴 KAYNAKTA KUSUR — kaynak `#a7a7a7` yazıyor, `--zemin` üstünde 2.29:1.
   HANDOFF §5.3 o değeri ÖLÇÜMLE elemişti; kanon kendi tokenini kullanır
   (#6f6f6f · 4.77:1). slot-1 K4 olarak bildirdi, Beyar onayladı. */
.arama-kutu input::placeholder{ color:var(--yer-tutucu); font-weight:var(--agirlik-govde); }
.arama-satir .dugme{ flex:none; padding:0 var(--bosluk-26); }

/* ---- ÖNERİ KUTUSU --------------------------------------------------- */
.arama-oneri{
  position:absolute; left:-1px; right:-1px; top:calc(100% + var(--bosluk-4));
  z-index:60; padding:var(--bosluk-8);
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md);
  box-shadow:var(--golge-sm), var(--golge-lg);
  max-height:min(440px,72vh); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--sure-cabuk) var(--yumusama),
             transform var(--sure-cabuk) var(--yumusama),
             visibility var(--sure-cabuk) var(--yumusama);
  scrollbar-width:thin;
}
.arama-kutu.oneri-acik .arama-oneri{ opacity:1; visibility:visible; transform:translateY(0); }
.arama-oneri::-webkit-scrollbar{ width:8px; }
.arama-oneri::-webkit-scrollbar-thumb{
  background:var(--cizgi-vurgu); border-radius:var(--yuvarlak-hap);
  border:2px solid var(--kagit);
}
.oneri-grup{
  display:flex; align-items:center; gap:var(--bosluk-8);
  padding:var(--bosluk-6) var(--bosluk-12) var(--bosluk-7);
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-vurgu); text-transform:uppercase;
  color:var(--murekkep-yumusak);
}
.oneri-grup:not(:first-child){
  margin-top:var(--bosluk-8); padding-top:var(--bosluk-15);
  border-top:var(--cizgi-1) solid var(--cizgi);
}
.oneri-grup i{ font-size:var(--yazi-11); color:var(--aksan); }
.oneri-temizle{
  margin:-9px -8px -9px auto; display:inline-flex; align-items:center;
  min-height:38px; padding:0 var(--bosluk-8);
  font-family:inherit; font-size:var(--yazi-11-5); font-weight:var(--agirlik-orta);
  letter-spacing:normal; text-transform:none;
  color:var(--murekkep-yumusak); background:none; border:none;
  border-radius:var(--yuvarlak-sm); cursor:pointer;
}
.oneri-temizle:hover{ color:var(--aksan-koyu); background:var(--aksan-yikama-2); }
.oneri-temizle:focus-visible{ outline:2px solid var(--aksan-koyu); outline-offset:1px; }

.oneri-kalem{
  position:relative; display:flex; align-items:center; gap:var(--bosluk-13);
  padding:var(--bosluk-10) var(--bosluk-12);
  border-radius:var(--yuvarlak-md); color:inherit; text-decoration:none;
}
/* Sol vurgu çubuğu — seçili kalemi renkten BAĞIMSIZ olarak da işaretler. */
.oneri-kalem::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  border-radius:var(--yuvarlak-hap); background:transparent;
}
.oneri-kalem:hover,
.oneri-kalem.etkin{ background:var(--aksan-yikama-2); }
.oneri-kalem:hover::before,
.oneri-kalem.etkin::before{ background:var(--aksan-koyu); }
.oneri-kalem:hover .oneri-baslik,
.oneri-kalem.etkin .oneri-baslik{ color:var(--aksan-koyu); }
.oneri-ikon{
  flex:none; width:38px; height:38px; border-radius:var(--yuvarlak-sm);
  background:var(--zemin); border:var(--cizgi-1) solid var(--cizgi);
  display:grid; place-items:center; color:var(--murekkep-yumusak);
  font-size:var(--yazi-15); background-size:cover; overflow:hidden;
}
.oneri-govde{ min-width:0; flex:1; }
.oneri-baslik{
  display:block; font-size:var(--yazi-15); font-weight:var(--agirlik-orta);
  line-height:var(--satir-sik-2); color:var(--murekkep);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oneri-baslik mark{ background:none; color:var(--aksan); font-weight:var(--agirlik-kalin); padding:0; }
.oneri-alt{
  display:block; margin-top:1px;
  font-size:var(--yazi-12); font-weight:var(--agirlik-govde); color:var(--metin-ikincil);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oneri-rozet{
  flex:none; display:inline-flex; align-items:center; gap:var(--bosluk-5);
  padding:var(--bosluk-4) var(--bosluk-9); border-radius:var(--yuvarlak-hap);
  font-size:var(--yazi-11); font-weight:var(--agirlik-kalin);
  background:var(--aksan-yikama-2); color:var(--aksan-koyu);
  border:var(--cizgi-1) solid var(--aksan-cizgi);
}
.oneri-rozet i{ font-size:9.5px; }
/* Sorgu satırı — "<q> için ara". İkonu dolu aksan, çünkü bu bir EYLEM,
   bir sonuç değil. */
.oneri-kalem.sorgu .oneri-ikon{ background:var(--aksan); border-color:var(--aksan); color:var(--kagit); }
.oneri-bos{
  padding:var(--bosluk-18) var(--bosluk-14); text-align:center;
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-govde); color:var(--metin-ikincil);
  text-align-last:auto;    /* B36 */
}

/* ---- YAPIŞKAN SEKME RAYI -------------------------------------------
   §11'in üçüncü kipi: yapışkan + cam zemin. Taban ray aynı; farkı
   konum ve zemin (slot-1 D). */
.sekme-ray.yapiskan{
  position:sticky; top:var(--kabuk-h); z-index:var(--kat-yapiskan-2);
  padding:var(--bosluk-12) 0; margin:0;
  background:var(--cam-zemin);
  backdrop-filter:blur(10px) saturate(150%);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
/* Taban `.sekmeler` `margin-inline:auto` ile ortalanır; yapışkan ray
   kendi kabında zaten tam genişlikte, ortalama onu kaydırıyor. */
.sekme-ray.yapiskan .sekmeler{ margin:0; }

/* ---- SONUÇ IZGARASI ------------------------------------------------- */
.sonuc-bant{ padding:var(--bosluk-34) 0 var(--bosluk-60); background:var(--kagit); }
.sonuc-not{
  margin:0 0 var(--bosluk-20);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-govde); color:var(--metin-ikincil);
  text-align:left; text-align-last:auto;    /* B36 */
}
.sonuc-not b{ color:var(--aksan-koyu); font-weight:var(--agirlik-kalin); }
.sonuc-izgara{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bosluk-24); }
.sonuc-izgara.kisi{ grid-template-columns:repeat(5,1fr); gap:var(--bosluk-18); }
.sonuc-kart{
  position:relative; display:flex; flex-direction:column;
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-lg); overflow:hidden;
}
.sonuc-kart:hover{ box-shadow:var(--golge-md); }
.sonuc-gorsel{
  position:relative; height:158px; background-size:cover; background-position:center;
}
.sonuc-gorsel::after{ content:""; position:absolute; inset:0; background:var(--kart-perde); }
/* Görselsiz sonuç yüzeyi — ikon, fotoğraf değil. */
.sonuc-yuzey{
  position:relative; height:120px; display:grid; place-items:center;
  background:var(--aksan-yikama-2); color:var(--aksan); font-size:var(--yazi-34);
}
.sonuc-rozet{
  position:absolute; top:11px; left:11px; z-index:2;
  display:inline-flex; align-items:center; gap:var(--bosluk-6);
  padding:var(--bosluk-5) var(--bosluk-11); border-radius:var(--yuvarlak-hap);
  font-size:var(--yazi-11); font-weight:var(--agirlik-kalin);
  background:var(--cam-zemin-2); color:var(--aksan-koyu);
}
.sonuc-rozet i{ font-size:var(--yazi-10); }
.sonuc-yuzey .sonuc-rozet{ background:var(--kagit); box-shadow:var(--golge-sm); }
.sonuc-govde{ display:flex; flex-direction:column; flex:1; padding:var(--bosluk-15) var(--bosluk-16) var(--bosluk-17); }
.sonuc-govde h4{
  font-size:var(--yazi-16); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-sik); line-height:var(--satir-baslik-2);
  margin-bottom:var(--bosluk-6);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sonuc-kart:hover .sonuc-govde h4{ color:var(--aksan-koyu); }
.sonuc-govde p{
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-sik); color:var(--metin-ikincil);
  text-align:left; text-align-last:auto;    /* B36 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sonuc-git{
  margin-top:auto; padding-top:var(--bosluk-13);
  display:inline-flex; align-items:center; gap:var(--bosluk-7);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin); color:var(--aksan-koyu);
}
.sonuc-git i{ font-size:var(--yazi-10); }
.sonuc-kart:hover .sonuc-git{ transform:translateX(3px); }

/* Kişi kartı — ortalı, avatar üstte. */
.sonuc-kart.kisi{ align-items:center; text-align:center; padding:var(--bosluk-20) var(--bosluk-14) var(--bosluk-18); }
.sonuc-avatar{
  width:92px; height:92px; border-radius:var(--yuvarlak-daire);
  background-size:cover; background-position:center;
  border:var(--cizgi-3) solid var(--kagit); box-shadow:var(--golge-sm);
}
.sonuc-kart.kisi:hover .sonuc-avatar{ border-color:var(--aksan); transform:translateY(-3px); }
.sonuc-kart.kisi .sonuc-govde{ padding:0; align-items:center; flex:none; }
.sonuc-kart.kisi .sonuc-govde h4{ margin-top:var(--bosluk-13); font-size:var(--yazi-15-5); }
.sonuc-kart.kisi .sonuc-govde p{ -webkit-line-clamp:1; }
.sonuc-kart.kisi .sonuc-rozet{
  position:static; margin-top:var(--bosluk-9);
  background:var(--aksan-yikama-2); color:var(--aksan-koyu);
}

/* ---- POPÜLER / SON ARAMALAR ----------------------------------------- */
.arama-pop{ padding:var(--bolum-nefes) 0; background:var(--kagit); }
.arama-pop-izgara{ display:grid; grid-template-columns:1.25fr 1fr; gap:var(--bosluk-48); align-items:start; }
.arama-pop h3{
  display:inline-flex; align-items:center; gap:var(--bosluk-10);
  font-size:var(--yazi-18); font-weight:var(--agirlik-kalin); margin-bottom:var(--bosluk-18);
}
.arama-pop h3 i{ font-size:var(--yazi-15); color:var(--aksan); }
.son-arama{ display:flex; flex-direction:column; }
.son-arama-satir{
  display:flex; align-items:center; gap:var(--bosluk-12);
  padding:var(--bosluk-12) var(--bosluk-4);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
  font-size:var(--yazi-14); font-weight:var(--agirlik-govde); color:var(--murekkep-yumusak);
}
.son-arama-satir:last-child{ border-bottom:none; }
.son-arama-satir>i:first-child{ color:var(--metin-ikincil); font-size:var(--yazi-13); flex:none; width:18px; text-align:center; }
.son-arama-satir .terim{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.son-arama-satir .ok{ margin-left:auto; flex:none; font-size:var(--yazi-11); color:var(--metin-ucuncul); }
.son-arama-satir:hover{ color:var(--aksan-koyu); }
.son-arama-satir:hover .ok{ color:var(--aksan); transform:translateX(3px); }

/* ---- TIBBİ BİLGİLENDİRME ŞERİDİ (Beyar kararı C2 — korunur) ---------- */
.uyari-serit{ background:var(--aksan-yikama-2); border-top:var(--cizgi-1) solid var(--aksan-cizgi-3); }
.uyari-serit>.kap{
  display:flex; align-items:flex-start; gap:var(--bosluk-14);
  padding:var(--bosluk-22) var(--kap-yan);
}
.uyari-serit i{ font-size:var(--yazi-17); color:var(--aksan-koyu); margin-top:2px; flex:none; }
/* 🔴 KAYNAKTA YASLI (`justify`) — kabuğun `p` kuralının sızıntısı ve
   B36'nın tam örneği. Kanon SOLA çeker: bu bir yasal uyarı metni ve
   yaslama okuma akışını bozuyor (§21/§24 ile aynı istisna). */
.uyari-serit p{
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-genis-2); max-width:960px;
  text-align:left; text-align-last:auto;
}

@media (max-width:1024px){
  /* Kaynak `1fr 1fr` yazıyor; `repeat(2,1fr)` ile ÇİZİM aynı ama
     hesaplanmış değer farklı seri-leşiyor. Kaynağın yazımı alındı —
     eşdeğer gerekçesi yazmaktansa birebir yazmak ucuz. */
  .sonuc-izgara{ grid-template-columns:1fr 1fr; }
  .sonuc-izgara.kisi{ grid-template-columns:repeat(3,1fr); }
  .arama-pop-izgara{ grid-template-columns:1fr; gap:var(--bosluk-34); }
}
/* §60'ın DAR EKRAN dalı. Beşi de kaynağın render edilmiş DOM'undan
   @390 ölçüldü (slot-1); hiçbiri 4px merdiveninden türetilmedi. */
@media (max-width:900px){
  /* 🔴 §34'e yazılmıştı, `.arama-hero h1`e yazılmamıştı: bant başlığı
     dar ekranda dar aralığa (-.02em) düşüyor, arama başlığı -.03em'de
     kalıyordu. Ölçüldü @390: FIT -0.5px ↔ kanon -0.75px. */
  .arama-hero h1{ letter-spacing:var(--aralik-baslik); }
}
@media (max-width:640px){
  /* 🔴 ALT DOLGU `--hero-alt` DEĞİL. Kaynak bu bantta KENDİ alt dolgusunu
     yazıyor (24px) ve token kademesini (34px) kullanmıyor; üst dolgu
     birebir tutuyor. Ölçüldü: FIT `96px 0 24px` ↔ kanon `96px 0 34px`. */
  .arama-hero{ padding:calc(var(--kabuk-h-dar) + var(--hero-ust)) 0 var(--bosluk-24); }
  .arama-hero h1{ font-size:var(--yazi-25); }
  /* 🔴 KAYNAĞIN ÖLÇÜLMÜŞ DÜZELTMESİ: esnek kalemin `min-width:auto`su
     içeriğinden küçülmeyi engelliyor ve satır 360px'te kutuyu taşırıyordu.
     Kaynak bunu kendi şerhinde yazıyor; kanon aynı düzeltmeyi alır. */
  .arama-girdi-kap{ min-width:0; }
  /* 🔴 ARAMA RAYININ SEKMESİ KÜÇÜLMEZ. §11'in mobil dalı sekmeyi
     12.5/9-13'e çekiyor; kaynağın yapışkan arama rayı 13/9-16'da KALIYOR.
     İki ray iki ayrı ölçü — kural rayın KENDİ kabına yazılır. */
  .sekme-ray.yapiskan .sekme{ font-size:var(--yazi-13); padding:var(--bosluk-9) var(--bosluk-16); }
  /* 🔴 IZGARA DEĞİL, YATAY KAYDIRICI. Kaynak ≤640'ta sonuç ızgarasını
     `display:flex` + `overflow:auto` yapıyor ve kartları 280px'te
     sabitliyor — dar ekranda dikey liste yerine yandan kayan şerit.
     Ölçüldü (sorgulu durum, üç kart kipinde de aynı).
     ⚠ `grid-template-columns` BİLEREK yazılmıyor: kap artık esnek kutu,
     bildirim ölü kalıyor ve kaynak da onu ≤1024'ten devralıyor
     (2 kolon · kişi 3 kolon). Ölçüm ikisini de o hâliyle görüyor.
     ⚠ Alt dolgu 6px kaydırma çubuğunun payı — kaynağın kendi ölçüsü. */
  .sonuc-izgara,.sonuc-izgara.kisi{
    display:flex; gap:var(--bosluk-14);
    padding:0 0 var(--bosluk-6); overflow:auto;
  }
  /* Kart daralmaz ve 280px'i geçmez — şerit ancak böyle kayar.
     Eleman ölçüsü, boşluk değil (§3'ün üçüncü kuralı). */
  .sonuc-kart{ max-width:280px; flex-shrink:0; }
  /* Kişi kartı DAHA DAR: 200px. Aynı şeritte üç kart yerine daha çok
     kişi görünsün diye — kaynağın kendi ölçüsü (ölçüldü). */
  .sonuc-izgara.kisi .sonuc-kart{ max-width:200px; }
  .sekme-ray.yapiskan{ top:var(--kabuk-h-dar); }
}


/* =====================================================================
   26b · "İÇERİĞE ATLA" BAĞLANTISI — kaynak `.skip-link`
   ---------------------------------------------------------------------
   Klavyeyle gezen kullanıcının kabuğu atlayıp gövdeye inmesini sağlayan
   İLK sekme durağı. 16 ekranın 16'sında eksikti ve hiçbir kapı görmedi:
   kabuk kapsam dışıydı (§0-D10).
   🔴 GİZLEME BİÇİMİ KALEMİN İŞLEVİDİR. `display:none` YAZILMAZ — o zaman
   klavye odağı hiç almaz ve bağlantı işlevini kaybeder. Kaynak onu
   EKRAN DIŞINA İTİYOR (`left:-9999px`): ekran okuyucudan gizlenmez,
   sekme sırasında durağı korur, `:focus`ta içeri gelir.
   Ölçüm (slot-2, render'dan): kutu 109.4×45.7 · dolgu 12/18 · z 200.
   ===================================================================== */
.atlama-baglantisi{
  position:absolute; left:-9999px; top:0; z-index:var(--kat-atla);
  padding:var(--bosluk-12) var(--bosluk-18);
  background:var(--aksan); color:var(--kagit);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-kalin);
  text-decoration:none;
}
.atlama-baglantisi:focus{ left:0; }


/* =====================================================================
   60b · SAYFA KÖKÜ — YATAY TAŞMA VE `position:sticky`
   ---------------------------------------------------------------------
   🔴 KANON KAYNAĞIN *DEĞİŞTİRDİĞİ* HÂLİ KOPYALAMIŞ. Donör kabuğu
   `html,body{overflow-x:hidden}` basıyor; kaynak bunu 2026'da BİLEREK
   terk etmiş ve yerine `clip` koymuş — üstüne 20 satırlık gerekçe
   yazmış (`fit-shell.css:835-860`). Şerhin kendi cümlesi:

     "overflow-x:hidden kökü YATAY KAYDIRMA KONTEYNERİNE çevirir…
      Ayrıca overflow:hidden, içindeki position:sticky öğelerin
      yapışmasını bozar."

   Ölçülen sonuç (Beyar gözle bildirdi, kaydırma sınamasıyla doğrulandı):
     FIT    html/body overflow-x:clip   → y `visible` kalır
            .au-visual  369px YAPIŞIYOR
     kanon  html/body overflow-x:hidden → y `auto`ya döner, kök bir
            kaydırma konteyneri olur
            .giris-pano  HİÇ YAPIŞMIYOR   (§61'in R15 kuralı işlevsiz)

   🔴 Yani §61'e clamp yüksekliğini ve sticky'yi yazmak YETMEDİ: kural
   doğruydu, KÖK onu öldürüyordu. "Bir kural yazılmış olması uygulandığı
   anlamına gelmez"in üçüncü yüzü — burada kuralı ezen şey başka bir
   kural değil, KAPSAYICININ kaydırma bağlamı.

   `clip` kırpar ama kaydırma konteyneri YARATMAZ; dikey kaydırma normal
   kalır ve sticky çalışır. `scrollbar-gutter:stable` da kaynağın aynı
   şerhinden: modal açılıp gövde kilitlenince çubuk kaybolsa bile
   `clientWidth` değişmez, `.kap` yeniden ortalanmaz, sıçrama olmaz.
   ⚠ Kanon donör kabuğundan SONRA yüklendiği için bu kural onu ezer.
   ⚠ `@supports` yedeği kaynağın kendi yedeği: `clip` desteklemeyen eski
   tarayıcıda eski davranışa düşülür.
   ===================================================================== */
html{ overflow-x:clip; scrollbar-gutter:stable; }
body{ overflow-x:clip; }
@supports not (overflow-x:clip){ html,body{ overflow-x:hidden; } }


/* =====================================================================
   65 · PRO KAPISI — kaynak `.pro-gate` · `.pg-*` (`fit-shell.css`)
   ---------------------------------------------------------------------
   Kilitli içeriğin üstüne açılan tam ekran katman. Kardeşi GİRİŞ KAPISI
   (`.lg-gate`) kabuğun kendi dosyasında zaten var; Pro kapısı hiç
   yazılmamıştı — Diyet'in canlı sayfasında da yok, kaynağınki basıldı.

   İki katman: perde (97) ve kapı (98) — `.sohbet-ortu`/`.cekmece-ortu`
   deseniyle aynı. Kapalı hâl `visibility:hidden` + `pointer-events:none`;
   `display:none` DEĞİL, yoksa geçiş ölür (§64'ün aynı şerhi).
   ===================================================================== */

.pg-ortu{
  position:fixed; inset:0; z-index:var(--kat-ortu);
  background:var(--perde);
  opacity:0; visibility:hidden;
  transition:opacity var(--sure-yavas) var(--yumusama), visibility var(--sure-yavas);
}
.pg-ortu.acik{ opacity:1; visibility:visible; }

.pro-kapi{
  position:fixed; inset:0; z-index:var(--kat-modal);
  display:grid; place-items:center; padding:var(--bosluk-20);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--sure-yavas) var(--yumusama), visibility var(--sure-yavas);
}
.pro-kapi.acik{ opacity:1; visibility:visible; pointer-events:auto; }

.pg-pano{
  position:relative; width:min(420px, 100%);
  background:var(--kagit); border-radius:var(--yuvarlak-lg);
  box-shadow:var(--golge-lg);
  padding:var(--bosluk-32) var(--bosluk-26) var(--bosluk-26);
  text-align:center; transform:translateY(8px);
  transition:transform var(--sure-yavas) var(--yumusama);
}
.pro-kapi.acik .pg-pano{ transform:translateY(0); }

.pg-kapat{
  position:absolute; top:13px; right:13px;
  width:36px; height:36px; display:grid; place-items:center;
  border:var(--cizgi-1) solid var(--cizgi); border-radius:var(--yuvarlak-md);
  background:var(--kagit); color:var(--murekkep-yumusak); cursor:pointer;
}
.pg-ikon{
  width:62px; height:62px; border-radius:var(--yuvarlak-daire);
  background:var(--aksan-yikama); color:var(--aksan);
  display:grid; place-items:center; font-size:var(--yazi-25);
  margin:0 auto var(--bosluk-14);
}
.pg-etiket{
  display:inline-flex; align-items:center; gap:var(--bosluk-6);
  font-size:var(--yazi-11); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-versal); text-transform:uppercase;  /* Beyar: .08 → .06 */
  color:var(--aksan); background:var(--aksan-yikama);
  padding:var(--bosluk-4) var(--bosluk-10); border-radius:var(--yuvarlak-sm);
}
.pro-kapi h4{ font-size:var(--yazi-19); margin-bottom:var(--bosluk-8); }
.pro-kapi p{
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-govde);
  color:var(--metin-ikincil); max-width:320px;
  margin:0 auto var(--bosluk-16); line-height:var(--satir-govde);
  text-align:center; text-align-last:auto;
}
.pg-ozellikler{
  list-style:none; max-width:300px; margin:0 auto var(--bosluk-20);
  text-align:left; display:flex; flex-direction:column; gap:var(--bosluk-9);
}
.pg-ozellikler li{
  display:flex; gap:var(--bosluk-9);
  font-size:var(--yazi-13); font-weight:var(--agirlik-orta); color:var(--murekkep-yumusak);
}
.pg-ozellikler li i{
  flex:none; margin-top:3px; font-size:var(--yazi-12); color:var(--aksan-koyu);
}
.pg-eylemler{ display:flex; gap:var(--bosluk-10); }
.pg-eylemler .dugme{ flex:1; }


/* =====================================================================
   64 · MOBİL ÇEKMECE — kaynak `.drawer` · `.d-*` (`fit-shell.css`)
   ---------------------------------------------------------------------
   Sağdan kayan mobil menü. Kabuğun `#hamburger` düğmesi açar; perde ve
   panel iki ayrı katman (95 · 96). Ölçüm: render edilmiş DOM @390,
   giriş yapılmış hâl. Kanonda hiç yoktu — düğme vardı, çekmece yoktu.

   🔴 AÇILMA `max-height` İLE — `display` ile DEĞİL. Kaynağın kapalı alt
   listesi `overflow:hidden` + `max-height:0`; geçiş `.15s`. `display:none`
   yazmak geçişi öldürür.
   ===================================================================== */

.cekmece-ortu{
  position:fixed; inset:0; z-index:var(--kat-cekmece-ortu);
  background:var(--perde);
  opacity:0; visibility:hidden;
  transition:opacity var(--sure-agir) var(--yumusama), visibility var(--sure-agir);
}
.cekmece-ortu.acik{ opacity:1; visibility:visible; }

.cekmece{
  position:fixed; inset:0 0 0 auto; z-index:var(--kat-cekmece);
  /* Ekranın tamamını KAPLAMAZ: solda perde şeridi kalır ki dokunup
     kapatılabilsin (kaynak @390'da 335px çiziyor). */
  width:min(335px, 86vw);
  display:flex; flex-direction:column;
  background:var(--kagit); box-shadow:-12px 0 44px rgba(20,18,12,.22);
  transform:translateX(100%);
  transition:transform var(--sure-agir) var(--yumusama);
}
.cekmece.acik{ transform:translateX(0); }

.cekmece-bas{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--bosluk-16) var(--bosluk-20);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
.cekmece-marka{ display:flex; align-items:center; gap:var(--bosluk-10); }
.cekmece-kapat{
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  border:var(--cizgi-1) solid var(--cizgi); border-radius:var(--yuvarlak-md);
  background:var(--kagit); color:var(--murekkep);
  font-size:var(--yazi-18); cursor:pointer;
}

.cekmece-nav{ overflow-y:auto; flex:1; min-height:0; }
.c-kalem{ border-bottom:var(--cizgi-1) solid var(--cizgi); }
.c-satir{ display:flex; align-items:stretch; }
.c-link{
  flex:1; display:flex; align-items:center; gap:var(--bosluk-11);
  padding:var(--bosluk-16) var(--bosluk-22);
  font-size:var(--yazi-16); font-weight:var(--agirlik-kalin); color:var(--murekkep);
}
.c-link i{ width:20px; font-size:var(--yazi-15); color:var(--aksan); }
.c-ok{
  flex:none; width:56px; display:grid; place-items:center;
  /* 🔴 SOL KENAR HAİRLİNE — ok bağlantıdan bir çizgiyle ayrılır (kaynağın
     `border-left`i). Gözle yakalandı, sonra ölçüldü. */
  border:none; border-left:var(--cizgi-1) solid var(--cizgi);
  background:none; cursor:pointer;
  font-size:var(--yazi-12); color:var(--metin-ikincil);
  transition:color var(--sure-cabuk) var(--yumusama),
             background var(--sure-cabuk) var(--yumusama);
}
.c-ok i{ transition:transform var(--sure-yavas) var(--yumusama); }
.c-kalem.acik .c-ok i{ transform:rotate(180deg); }

/* 🔴 Kapalı hâl `max-height:0` — `display:none` DEĞİL (yukarıdaki şerh). */
.c-alt{
  background:var(--zemin); overflow:hidden;
  max-height:0; transition:max-height var(--sure-hizli) var(--yumusama);
}
.c-kalem.acik .c-alt{ max-height:600px; }
.c-alt a{
  display:flex; align-items:center; gap:var(--bosluk-11);
  padding:var(--bosluk-13) var(--bosluk-22) var(--bosluk-13) var(--bosluk-36);
  font-size:var(--yazi-14-5); font-weight:var(--agirlik-govde);
  color:var(--murekkep-yumusak);
}
.c-alt a i{ width:18px; font-size:var(--yazi-13); color:var(--aksan); }
.c-grup{
  padding:var(--bosluk-10) var(--bosluk-22) var(--bosluk-4) var(--bosluk-36);
  margin-top:var(--bosluk-6);
  border-top:var(--cizgi-1) solid var(--cizgi);
  font-size:var(--yazi-10); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-etiket); text-transform:uppercase;
  color:var(--metin-ikincil);
}

.cekmece-ayak{
  display:flex; flex-direction:column; gap:var(--bosluk-11);
  padding:var(--bosluk-18) var(--bosluk-20);
  border-top:var(--cizgi-1) solid var(--cizgi);
}
.cekmece-hesap{
  display:flex; align-items:center; gap:var(--bosluk-12);
  padding:var(--bosluk-2) var(--bosluk-2) var(--bosluk-12);
}
/* 🔴 §25 `.kimlik-avatar` BURAYA GİRMEZ. Denendi ve ölçüldü: o avatar
   profil kartının KAPAĞA BİNEN kalemi — `margin-top:-70px` · 4px kâğıt
   çerçeve · gölge taşıyor ve çekmecede kullanıcı kartını 66px yukarı
   çekip menü listesinin ÜSTÜNE bindiriyordu (gözle görüldü, sonra
   ölçüldü). Kaynağın `.da-ava`sı düz bir 46px daire; çekmece kendi
   kalemini alır. Ad benzerliği değil, KONUM devraldığı için tehlikeli —
   `.kunye` ↔ `.sohbet-kunye` karışıklığının aynısı. */
.cekmece-avatar{
  flex:none; width:46px; height:46px; border-radius:var(--yuvarlak-daire);
  display:grid; place-items:center;
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  font-size:var(--yazi-16); font-weight:var(--agirlik-ekstra);
  background-size:cover; background-position:center;
}
.cekmece-hesap b{ display:block; font-size:var(--yazi-15); font-weight:var(--agirlik-kalin); }
.cekmece-hesap-baglar{ display:flex; gap:var(--bosluk-12); }
.cekmece-hesap-baglar a{
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin); color:var(--aksan);
}
/* İki bağlantı arasındaki NOKTA AYRAÇ — kaynağın kendi kuralı; olmadan
   "Bildirimler Çıkış" tek bir öbek gibi okunuyordu. */
.cekmece-hesap-baglar a:not(:last-child)::after{
  content:"·"; margin-left:var(--bosluk-8);
  color:var(--metin-ikincil); font-weight:var(--agirlik-govde);
}
.cekmece-dil{ display:flex; flex-direction:column; margin-top:3px; }
.cekmece-dil-dugme{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--bosluk-12); padding:var(--bosluk-4) 0;
  border:none; background:none; font-family:inherit; cursor:pointer;
}
.cekmece-dil-etiket{
  display:flex; align-items:center; gap:var(--bosluk-8);
  font-size:var(--yazi-13); font-weight:var(--agirlik-orta); color:var(--metin-ikincil);
}
.cekmece-dil-simdi{
  display:flex; align-items:center; gap:var(--bosluk-8);
  font-size:var(--yazi-13); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-genis); color:var(--murekkep);
}


/* =====================================================================
   63 · ROZET VE KADEME KİTİ — kaynak `.badge-*` · `.rank-*` · `.pd-*` · `.ld-*`
   ---------------------------------------------------------------------
   Ölçüm: slot-2, render edilmiş DOM @1440 ve @390 (dört pane).

   🔴 `.ld-tablo` §4 `.tablo` DEĞİL — §4'ün kaynak listesindeki kayıt
   YANLIŞ. Ölçüldü: `<table>` hiç yok, `.ld-tablo` bir `<div>` ve kutusu
   tam olarak §1 `.kart` (radius 16 · 1px çizgi · kağıt · golge-sm ·
   overflow hidden). Sıralama tablosu için yeni bir tablo bileşeni
   GEREKMİYOR; `.kart.tasma-kapali` + satır kiti yetiyor.

   ⚠ `.badge-*` §5 `.rozet` DEĞİL: o küçük durum etiketi, bu MADALYON.
   ===================================================================== */

/* ---- SIRALAMA SATIRI (liderlik) ------------------------------------ */
.siralama-satir{
  display:flex; align-items:center; gap:var(--bosluk-14);
  padding:var(--bosluk-14) var(--bosluk-20);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
/* Kullanıcının kendi satırı — zemin DEĞİŞİR ve alt çizgi kalkar, ikisi
   birlikte: renk tek sinyal olmasın (§56'nın "var/yok" kuralıyla aynı). */
.siralama-satir.ben{ background:var(--aksan-yikama-2); border-bottom:none; }
.siralama-sira{
  flex:none; width:38px; height:38px; border-radius:var(--yuvarlak-daire);
  display:grid; place-items:center;
  font-size:var(--yazi-13); font-weight:var(--agirlik-ekstra);
  background:var(--aksan-yikama); color:var(--aksan-koyu);
}
/* R10 · METİN ÇOCUKLARI — kap yazılmış, çocukları yazılmamıştı. Beş kitin
   hepsinde aynı desen ve aynı görünür kusur: ad ile alt satır YAN YANA
   akıyordu ("Zeynep Y.@zeynepy · 26 rozet"). Kaynakta ikisi de blok.
   🔴 Ölçüm bunu gösteriyordu ama asıl yakalayan GÖZ oldu (slot-2, 1440
   ekran görüntüsü) — §13'ün "ölç · ara · bak" dersinin bu turdaki üçüncü
   örneği. */
.siralama-kim{ flex:1; min-width:0; }
.siralama-kim b{
  display:block;
  font-size:var(--yazi-14); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-sik-2); color:var(--murekkep);
}
.siralama-kim small{
  display:block; margin-top:2px;
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); color:var(--metin-ikincil);
}
.siralama-puan{ flex:none; text-align:right; }
.siralama-puan b{
  display:block; text-align:right;
  font-size:var(--yazi-16); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-sik); color:var(--murekkep);
}
.siralama-puan small{
  display:block; margin-top:1px; text-align:right;
  font-size:var(--yazi-10-5); font-weight:var(--agirlik-orta);
  letter-spacing:var(--aralik-versal); text-transform:uppercase;
  color:var(--metin-ikincil);
}

/* ---- PUAN KARTI — kademe VE puan pane'inde, tek bileşen ------------- */
.puan-izgara{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--bosluk-12); }
.puan-karti{
  padding:var(--bosluk-16) var(--bosluk-18);
  border-radius:var(--yuvarlak-md);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
}
.puan-bas{
  display:flex; align-items:center; gap:var(--bosluk-9);
  font-size:var(--yazi-13); font-weight:var(--agirlik-kalin); color:var(--murekkep);
}
.puan-sayi{
  display:block;   /* R10 — ölçüler zaten tutuyordu, eksik olan tek bu */
  font-size:var(--yazi-22); font-weight:var(--agirlik-ekstra);
  line-height:var(--satir-govde); letter-spacing:var(--aralik-sik);
  margin-top:var(--bosluk-9);
}
.puan-alt{
  display:block;   /* R10 */
  margin-top:2px;
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); color:var(--metin-ikincil);
  text-align:left; text-align-last:auto;    /* B36 */
}

/* ---- KADEME MERDİVENİ ----------------------------------------------- */
.merdiven{ display:grid; grid-template-columns:repeat(8,1fr); gap:var(--bosluk-10); margin-top:var(--bosluk-12); }
/* R10 · basamağın ad ve özet satırı — ikisi de blok, ikisi de ortalı.
   Kaynakta "Başlangıç" ile "0 puan · 0 gün · 0 hedef" alt alta. */
.basamak b{
  display:block; text-align:center;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin);
  line-height:1.2; color:var(--murekkep);
}
/* 🔴 `:not(.basamak-sec)` ŞART. `.basamak>span` (0,2,0) hapın kendi
   kuralını (`.basamak-sec`, 0,1,0) YENİYOR ve "Seçili" hapı eşik
   satırının tipografisine dönüşüyordu (9/800/--kagit → 10.5/600/gri).
   Bu turda üçüncü kez: `.kart.panel>.kart-govde` `.bosluksuz`u,
   `.ana-menu a` açılır menüyü (B28), şimdi bu. Çocuk birleştiricisi
   yazılırken KARDEŞ kalemler dışarıda bırakılır. */
.basamak>span:not(.basamak-sec):not(.basamak-sayi){
  display:block; text-align:center; margin-top:3px;
  font-size:var(--yazi-10-5); font-weight:var(--agirlik-orta);
  color:var(--metin-ikincil);
}
/* 🔴 `<button>` NE ZEMİNİNİ NE YAZI YÜZÜNÜ MİRAS ALIR. İkisi de
   bildirilmezse tarayıcının kendi paleti ve Arial'i geçer — kanonda
   38 düğme (30 rozet kartı + 8 basamak) Arial çiziliyordu ve zeminleri
   ButtonFace'ti. Kaynağın karşılıkları ikisini de açıkça yazıyor. */
.rozet-karti,
.basamak{ background:var(--kagit); font-family:inherit; }
.basamak{
  position:relative; text-align:center;
  padding:var(--bosluk-26) var(--bosluk-8) var(--bosluk-24);
  border-radius:var(--yuvarlak-md);
  /* 🔴 TABAN DÜZ ÇİZGİ (§63d) — `dashed` kaynakta `.rank-step.locked`ın
     kipidir. Zemin de kâğıt; saydamlık kilitli basamağın işareti. */
  border:var(--cizgi-1) solid var(--cizgi);
}
.basamak-ikon{
  width:46px; height:46px; margin:0 auto var(--bosluk-9);
  border-radius:var(--yuvarlak-daire); display:grid; place-items:center;
  font-size:var(--yazi-18);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--zemin);
  color:var(--metin-pasif-2);
}
/* ⚠ `:not(.basamak-sayi)` kardeş kuralı dışarıda bıraktı ama bu kalem
   `display`ini kendisi bildirmiyordu — bir kural kapsamdan ÇIKARILDIĞINDA
   ondan miras alınan bildirimler de düşer. Kapsam daraltmanın bedeli:
   çıkarılan kalem kendi tabanını yazmak zorunda. */
.basamak-sayi{
  display:block;
  margin-top:var(--bosluk-4);
  font-size:9.5px; font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-genis); color:var(--kademe-notr-cip-metin);
}
.basamak-kilit{
  position:absolute; top:var(--bosluk-8); right:var(--bosluk-9);
  font-size:9px; font-weight:900; color:var(--metin-pasif-3);
}
/* Seçili basamağın hapı — görünmez doğar, seçimle belirir. */
.basamak-sec{
  position:absolute; left:50%; bottom:0; transform:translate(-50%,50%);
  padding:var(--bosluk-4) var(--bosluk-10); border-radius:var(--yuvarlak-hap);
  font-size:9px; font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-etiket-3); text-transform:uppercase;
  background:var(--aksan); color:var(--kagit);
  box-shadow:0 2px 6px var(--aksan-golge-2);
  opacity:0; transition:opacity var(--sure) var(--yumusama);
}
.basamak.secili .basamak-sec{ opacity:1; }
/* Hap mutlak konumlu ve basamak kenarına biniyor: satır boyu kilitli
   olmazsa dikey ortası kayar, katmanı olmazsa kesikli kenarın altında
   kalır (ölçüldü: lh 9px · z 2). */
.basamak-sec{ line-height:9px; z-index:var(--kat-icerik); }

/* ---- ROZET MADALYONU ------------------------------------------------ */
/* 🔴 AİLE KABI PAY TAŞIMAZ — nefesi İÇİNDEKİ not satırı veriyor
   (`.rozet-aile-not{margin-bottom:24}`). Kap da pay koyunca iki nefes
   üst üste biniyordu; `.fp-profil`in alt dolgu tuzağının (KOPYALAMA-KURALI
   §3) rozet ekranındaki tekrarı. Ölçüldü: FIT `0px`. */
/* 🔴 AİLE GRUPLARI ARASI NEFES — 8 aralık × 32px = 256px kayıp ritim.
   Eski kural `margin:0` idi ve şerhi "Ölçüldü: FIT 0px" diyordu —
   ölçüm FIT'in İLK grubundan alınmış ve kurala genellenmiş. FIT'te 0
   olan tek grup o; kaynak `.badge-cat{margin-top:var(--sec-pad-sm)}` +
   `:first-of-type{0}` yazıyor (slot-2 sekiz aralığı da ölçtü).
   🔴 "Tek örneği ölçüp kural yazmak" bu dalgada ÜÇÜNCÜ kez oldu
   (`--koyu-metin-5` balonun başlığından, `--cizgi-vurgu` frekanstan,
   bu ilk gruptan). Bir kural yazmadan önce ÖRNEĞİN TEMSİL EDİP
   ETMEDİĞİ sorulur.
   ⚠ Literal seçici çifti ancak sarmalayıcı `div` geri konduğu için
   çalışıyor; sarmalayıcı yokken `:first-of-type` `.bolum-bas`ı tutuyordu
   (slot-2 tarayıcıda ikisini de denedi).
   ⚠ `--bolum-nefes-sik` mobil dalı zaten taşıyor: 32/26/22, iki tarafta
   da birebir — ayrıca yazılmaz. */
.rozet-ailesi{ margin-top:var(--bolum-nefes-sik); }
.rozet-ailesi:first-of-type{ margin-top:0; }
.rozet-aile-bas{ display:flex; align-items:center; gap:var(--bosluk-10); margin-bottom:var(--bosluk-10); }
.rozet-aile-bas h3{
  display:flex; align-items:center; gap:var(--bosluk-9);
  font-size:var(--yazi-17); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-baslik); letter-spacing:var(--aralik-baslik);
}
.rozet-aile-sayi{
  margin-left:auto;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta); color:var(--metin-ikincil);
}
.rozet-aile-not{
  margin-bottom:var(--bosluk-24);
  font-size:var(--yazi-12); font-weight:var(--agirlik-govde); color:var(--metin-ikincil);
  text-align:left; text-align-last:auto;    /* B36 */
}
.rozet-izgara{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--bosluk-12); }

.rozet-karti{
  position:relative; display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--bosluk-13); padding:var(--bosluk-24);
  border-radius:var(--yuvarlak-md);
  /* 🔴 TABAN = KAZANILMIŞ KART (§63d). Buraya eskiden kaynağın
     KİLİTLİ kartı yazılıydı (`dashed var(--cizgi-vurgu)` + saydam zemin);
     tohumsuz render'da 30 rozetin 30'u kilitli olduğu için ölçülebilen tek
     hâl oydu ve varyant TABAN sanıldı. Kaynağın tabanı düz çizgi + kâğıt:
       .badge-card { background:var(--paper); border:1px solid var(--line) } */
  border:var(--cizgi-1) solid var(--cizgi);
  /* 🔴 TARAYICI ZEMİNİ SİLİNİR. Kart bir `<button>` ve zemin bildirmiyordu:
     `rgb(239,239,239)` — ButtonFace, yani GRİ 3B TARAYICI DÜĞMESİ.
     Kaynak `rgba(0,0,0,0)` bırakıyor. `.giris-unuttum`la aynı kusur ve
     aynı gün bulundu; ikisini de motorun `renk` gerekçesi "marka farkı"
     sayıp gizliyordu (2026-09-02'de kapatıldı). */
  background:var(--kagit);
  /* 🔴 TEK KÖK, ALTI ÇOCUK. Kart bir `<button>` ve UA varsayılanı
     `text-align:center`; ikon · puan · not · çubuk · sol satır ve kartın
     kendisi ALTI ölçümde birden ortada duruyordu. Kaynakta hepsi solda.
     B36'nın düğme ailesindeki karşılığı — `.cip`te aynı satır duruyor.
     🔴 Altı 🔴'yı tek tek yamalamak yanlış olurdu: kök buydu (§0c/3). */
  text-align:left;
}
.rozet-ikon{
  /* Madalyon DARALMAZ — kart sarınca metin kolonu küçülür, ikon değil. */
  flex-shrink:0;
  width:42px; height:42px; border-radius:var(--yuvarlak-md);
  display:grid; place-items:center; font-size:var(--yazi-17);
  /* 🔴 TABAN MARKA RENGİNDEDİR (§63d) — eskiden burada kilitli kartın
     nötr çifti (`--zemin`/`--metin-pasif-4`) duruyordu. Kaynak:
       .badge-ico { background:var(--fit-wash); color:var(--fit) } */
  background:var(--aksan-yikama); color:var(--aksan);
}
.rozet-puan{
  position:absolute; top:var(--bosluk-12); right:var(--bosluk-14);
  display:flex; align-items:center; gap:var(--bosluk-5);
  font-size:var(--yazi-10); font-weight:var(--agirlik-ekstra);
  /* Kaynak satır boyunu KİLİTLİYOR (12px = 1.2), `normal` bırakmıyor:
     puan rozeti kartın köşesinde mutlak konumlu ve satır boyu oynarsa
     üst kenara göre kayıyor. Ölçüldü: FIT 12px ↔ kanon `normal`. */
  line-height:1.2;
  /* 🔴 TABAN `--aksan-koyu` (§63d) — `--metin-ikincil` kaynakta
     `.badge-card.locked .b-puan` / `.olcusuz .b-puan` değeridir. */
  letter-spacing:var(--aralik-genis); color:var(--aksan-koyu);
}
/* 🔴 PETROL AİLESİ — `--eko-akademi`nin açık adımı (§5.1'in "üretilmedi"
   dediği hover adımı DEĞİL; kaynakta ölçülmüş ayrı bir değer). */
.rozet-sol{
  flex:0 1 100%; margin-top:1px;
  font-size:var(--yazi-10); font-weight:var(--agirlik-orta);
  letter-spacing:var(--aralik-ince); color:var(--eko-akademi-2);
}
.rozet-not{
  /* 🔴 KENDİ SATIRINI KAPAR: `flex-basis:100%` olmadan not, ikonun ve
     başlığın yanına sıkışıyor ve ilerleme çubuğu 60px'in altına iniyordu.
     `align-items:center` çubuğu metinle aynı eksende tutar. */
  display:flex; flex-wrap:wrap; align-items:center; flex-basis:100%;
  gap:var(--bosluk-7); margin-top:var(--bosluk-10);
  font-size:var(--yazi-10-5); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-ince);   /* çubuk BURADAN miras alır */
  /* 🔴 TABAN RENK YAZMAZ (§63d). `--eko-akademi` kaynakta
     `.b-note.locked`ın rengidir; `.b-note` tabanı renk bildirmez ve
     karttan miras alır. Petrol artık `.rozet-not.kilitli`de. */
}
/* Çubuğun taban genişliği — kaynağın ölçtüğü 60px. Altına inince yüzde
   okunamıyor (kaynağın kendi şerhi). Boşluk değil ELEMAN ölçüsü, ham px
   serbest (§3'ün üçüncü kuralı). */
.rozet-cubuk{ flex:1; min-width:60px; height:5px; border-radius:var(--yuvarlak-hap); background:var(--cizgi); overflow:hidden; }
/* Çubuğun DOLGUSU — kaynak `.b-prog span`. Kanonda HİÇ YOKTU: çubuk
   zemini vardı, dolgusu yoktu; %60 dolu bir çubuk ekranda BOŞ çiziliyordu.
   Petrol rampası (parlak → koyu), ölçülen gradyanın kendisi. */
.rozet-cubuk span{
  display:block; height:100%; border-radius:var(--yuvarlak-hap);
  background:linear-gradient(90deg, var(--eko-akademi-3), var(--eko-akademi));
}

/* =====================================================================
   63d · ROZET VE KADEMENİN DURUM VARYANTLARI
   ---------------------------------------------------------------------
   🔴🔴 KANONUN ALTINCI KIRILMA NOKTASI — ÖLÇÜLDÜ, 2026-09-02

     kural yok · markup yok · ad tutmuyor · bağlam öldürüyor · ayrışmadı
     · **DURUM VARYANTI TABAN SANILDI**

   §63 kaynağın rozet kartını `fit-rozetlerim-kademe-auth.html`den ölçtü.
   O render TOHUMSUZDUR (K20): 30 rozetin 30'u, 8 basamağın 8'i KİLİTLİ.
   Ölçülebilen tek hâl kilitli hâldi ve kanona TABAN olarak yazıldı —
   altı bildirimde birden:

     kalem              kanonda (kilitli)        kaynağın TABANI
     .rozet-karti       dashed --cizgi-vurgu     solid --cizgi
                        background transparent   background --kagit
     .rozet-ikon        --zemin / --metin-pasif-4  --aksan-yikama / --aksan
     .rozet-puan        --metin-ikincil          --aksan-koyu
     .rozet-karti div b --metin-ikincil          --murekkep
     .rozet-not         --eko-akademi            (renk yazmaz)
     .basamak           dashed --cizgi           solid --cizgi

   Bedeli: rozet ikonu HİÇBİR koşulda marka rengine dönemiyordu — veri
   gelse de, tohum atılsa da. "Kazanıldı" durumunun kuralı YOKTU, yokluğu
   da görünmüyordu çünkü kilitli hâl ekranda doğru duruyordu.

   ⚠ AYNI KUSUR TOKEN KATMANINA DA SIZMIŞTI: `--cizgi-vurgu` (#dddddd) ve
     `--cizgi-vurgu-koyu` (#c9c9c9) kilitli kartın çiftidir; tabanın hover
     kenarı #dcdcdc'dir ve tokeni YOKTU (`--cizgi-vurgu-acik` eklendi).

   ÖLÇÜT: `rozetlerim-v1.html`in kendi `<style>`ı — dört kart durumu
   (taban · yeni · kilitli · ölçüsüz) ve dört basamak durumu (taban ·
   tamam · şimdiki · kilitli · seçili). Değerler ORADAN, uydurma yok.

   🔴 KAPI: `kapi-durum.mjs` — bir bileşenin kaynakta N durumu varsa
      kanonda da N kuralı olmalı. Durum sınıfı ENJEKTE EDİLİP hesaplanan
      değerin DEĞİŞTİĞİ ölçülür; "kural dosyada var" yetmez.
   ===================================================================== */

/* ---- ROZET KARTI · YENİ KAZANILAN -----------------------------------
   Kaynak: `.badge-card.yeni{border-color:var(--fit);box-shadow:0 0 0 3px
   rgba(0,147,208,.14)}` — "bir kez görülünce söner" (kaynağın şerhi). */
.rozet-karti.yeni{
  border-style:solid; border-color:var(--aksan);
  box-shadow:0 0 0 var(--cizgi-3) var(--aksan-halka-3);
}
.rozet-not.kazanildi{ color:var(--aksan-koyu); }

/* ---- ROZET KARTI · KİLİTLİ ------------------------------------------
   Kesikli kenar + saydam zemin: rozetin YERİ görünür, kendisi görünmez. */
.rozet-karti.kilitli{
  border-style:dashed; border-color:var(--cizgi-vurgu);
  background:transparent;
}
.rozet-karti.kilitli .rozet-ikon{ background:var(--zemin); color:var(--metin-pasif-4); }
.rozet-karti.kilitli div b{ color:var(--metin-ikincil); }
.rozet-karti.kilitli .rozet-puan{ color:var(--metin-ikincil); }
/* Petrol — kilitli rozetin "yolda" notu. Kaynak `.b-note.locked`. */
.rozet-not.kilitli{ color:var(--eko-akademi); flex-wrap:wrap; }

/* ---- ROZET KARTI · ÖLÇÜSÜZ ------------------------------------------
   Kaynağın kendi şerhi: "ölçüsü HENÜZ HİÇBİR EKRAN TARAFINDAN
   KAYDEDİLMİYOR. Üçüncüsünü 'yolda' göstermek ilerlediğini ima ederdi."
   Noktalı kenar kesikliden AYRI bir işaret — iki yokluk iki şey. */
.rozet-karti.olcusuz{
  border-style:dotted; border-color:var(--cizgi-vurgu-2);
  background:var(--zemin);
}
.rozet-karti.olcusuz .rozet-ikon{ background:var(--zemin-3); color:var(--metin-pasif-5); }
.rozet-karti.olcusuz div b{ color:var(--metin-ikincil); }
.rozet-karti.olcusuz .rozet-puan{ color:var(--metin-ikincil); }
.rozet-not.olcusuz{ color:var(--metin-ikincil); }

/* ---- ROZET KARTI · HOVER · ÜÇ DURUM AYRI ---------------------------- */
.rozet-karti:hover{
  border-color:var(--cizgi-vurgu-acik);
  transform:translateY(-2px); box-shadow:var(--golge-sm);
}
/* Kilitli ve ölçüsüz kart YÜKSELMEZ: kazanılmamış rozet dokunulabilir
   görünmemeli (kaynağın kendi kararı — `transform:none;box-shadow:none`). */
.rozet-karti.kilitli:hover,
.rozet-karti.olcusuz:hover{
  border-color:var(--cizgi-vurgu-koyu); transform:none; box-shadow:none;
}

/* ---- KADEME · TAMAMLANAN ------------------------------------------- */
.basamak.tamam .basamak-ikon{
  background:var(--aksan-yikama); color:var(--aksan);
  border-color:var(--aksan-cizgi-3);
}
/* ---- KADEME · ŞİMDİKİ ---------------------------------------------- */
.basamak.simdiki{
  border-color:var(--aksan); background:var(--kagit);
  box-shadow:0 6px 18px var(--aksan-golge-3);
}
.basamak.simdiki .basamak-ikon{
  background:var(--aksan-nisan-dolu); color:var(--kagit);
  border-color:var(--aksan);
}
.basamak.tamam .basamak-sayi,
.basamak.simdiki .basamak-sayi{ color:var(--aksan-koyu); }
/* ---- KADEME · KİLİTLİ ---------------------------------------------- */
.basamak.kilitli{ border-style:dashed; background:transparent; }
/* ---- KADEME · SEÇİLİ (hap kuralı yukarıda, kenar burada) ------------ */
.basamak.secili{
  border-style:solid; border-color:var(--aksan);
  box-shadow:0 0 0 var(--cizgi-3) var(--aksan-halka-3), 0 8px 20px var(--aksan-golge-3);
}

/* Kartın metin kolonu — ad ve durum. İkisi de `<div>` içinde satır
   kutusu olarak doğuyor; kaynak ikisini de BLOK yapıyor, yoksa ad ile
   durum aynı satıra düşüyor (ölçüldü: display `block` · 13.5/1.2 ve
   11.5/500 · üst pay 3). Kabuğun 13.3333px'i (0.8333rem) buraya kadar
   sızıyordu — kalem kendi ölçüsünü yazmadığı için. */
.rozet-karti div b{
  display:block;
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-kalin);
  line-height:1.2;
  /* ✅ ŞÜPHE DOĞRULANDI (§63d). Bu şerh "kazanılmış kartta değişiyor
     olabilir — bildirildi, uydurulmadı" diyordu; kaynağın CSS'i okundu ve
     DEĞİŞİYOR: taban `.badge-card b{color:var(--slate)}`, soluk hâl
     `.badge-card.locked b{color:var(--muted)}`. Taban geri kondu. */
  color:var(--murekkep);
}
.rozet-karti div span{
  display:block; margin-top:3px;
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde);
  color:var(--metin-ikincil);
}

/* İpucu balonu — hover'da belirir, koyu zeminde. */
.rozet-ipucu{
  /* 🔴 KONUM BİLDİRİMİ HİÇ YOKTU. `position:absolute` yazılıydı ama
     `left`/`bottom`/`width`/`transform` yoktu — balon STATİK yerinde,
     yani KARTIN İÇİNDE duruyordu ve rozetin adını örtüyordu. Üstelik
     kapalıyken `pointer-events:auto` olduğu için tıklamayı yutuyordu.
     Kaynak balonu kartın ÜSTÜNDE, ortalanmış ve tıklama-geçirgen
     çiziyor (slot-2 ölçtü, tarayıcıda simüle edip FIT'le karşılaştırdı:
     left · width · transform · pointer-events dördü de birebir).
     ⚠ Görünürlük `opacity` DEĞİL `visibility` ile de kapanır — yoksa
     saydam balon tıklamayı yutmaya devam eder (§62'nin `transitionend`
     dersinin kardeşi). */
  position:absolute; z-index:var(--kat-ipucu);
  left:50%; bottom:calc(100% + 10px); width:100%;
  transform:translate(-50%, 6px);
  pointer-events:none; visibility:hidden;
  padding:var(--bosluk-12) var(--bosluk-14); border-radius:var(--yuvarlak-md);
  /* Balonun KENDİ rengi gövdesinden bir adım açık — ilk ölçüm ikisini
     ayırmamıştı ve tek yuvaya bağlanmıştı (slot-2 düzeltti). */
  background:var(--murekkep); color:var(--koyu-metin-5);
  box-shadow:var(--golge-lg);
  opacity:0;
  transition:opacity var(--sure) var(--yumusama),
             visibility var(--sure) var(--yumusama);
  text-align:left; text-align-last:auto;    /* B36 */
}
/* R8 · BALONUN İÇ TİPOGRAFİSİ — başlık ve gövde AYRI kalem.
   Ölçüldü (slot-2, @1440 ve @390 aynı): başlık blok, gövdeden bir adım
   parlak; gövde 11.5/500 · 1.5 satır. `text-align-last:auto` B36 —
   kabuğun `p{text-align:justify}`i balonun içine de sızıyordu ve
   30 ipucunun 30'u yaslanıyordu (slot-2 sızıntı taraması). */
.rozet-ipucu b{
  display:block; margin-bottom:var(--bosluk-4);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-ekstra);
  line-height:1.2; color:var(--kagit);
}
.rozet-ipucu p{
  margin:0; font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-orta); color:var(--koyu-metin-7);
  text-align:left; text-align-last:auto;    /* B36 */
}
/* 🔴 HOVER KANONDA HİÇ YOKTU — motor hover durumunu ölçmüyor
   (`getComputedStyle` varsayılan durumu okur), o yüzden görünmedi.
   Doğru kapı `s2-hover-olc.mjs`; `transform`ı OZ'ye eklemek İŞE YARAMAZ,
   çünkü varsayılan durumda iki taraf da `none` der.
   Ölçüldü (slot-2, 1440 ve 390'da birebir aynı):
     .badge-card:hover  kenar #dddddd → #c9c9c9, BAŞKA HİÇBİR ŞEY değişmiyor
     .rank-step:hover   translateY(-2px) + marka gölgesi + marka kenarı */
.rozet-karti:hover{ border-color:var(--cizgi-vurgu-koyu); }
.basamak:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px var(--aksan-golge);
  border-color:var(--aksan);
}
.rozet-karti:hover .rozet-ipucu,
.rozet-karti:focus-within .rozet-ipucu,
.rozet-karti.ipucu-acik .rozet-ipucu{ opacity:1; visibility:visible; }
/* 🔴 MOBİLDE BALON KARTIN ALTINA DÖNER — ölçüldü, 390'da kaynak da öyle
   yapıyor (kart üstünde yer kalmıyor). Tek kural değil, İKİ DAL. */
@media (max-width:640px){
  .rozet-ipucu{ bottom:auto; top:calc(100% + 10px); transform:translate(-50%, -6px); }
}
.rozet-ipucu .nasil{
  /* İki satıra sarınca ikon ÜSTTE kalır, ortada değil (ölçüldü:
     FIT `flex-start`). "Nasıl kazanılır" metni uzun ve sık sarıyor. */
  display:flex; align-items:flex-start; gap:var(--bosluk-7);
  padding-top:var(--bosluk-8); margin-top:var(--bosluk-8);
  /* Üst çizgi `--dip-cizgi` (.20) DEĞİL `--koyu-cizgi` (.12) — ikisi
     aynı ailede ama alfaları ayrı, ölçüldü. */
  border-top:var(--cizgi-1) solid var(--koyu-cizgi);
  font-size:var(--yazi-11); font-weight:var(--agirlik-orta); color:var(--aksan-parlak);
}
/* 🔴 AD KANONUN ADI DEĞİLDİ. Kural `.kademe` yazıyordu, markup ve ölçüm
   çifti `.ipucu-kademe` kullanıyor — yani kural HİÇBİR ELEMANA DEĞMİYORDU
   ve balonun kademe etiketi tarayıcı varsayılanıyla (13.33px/400) çiziliyordu.
   §10 md.7'nin ("kanon adı ile kaynak adı karışır") kanon içi hâli:
   burada karışan kaynak adı değil, kanonun KENDİ iki adı.
   ⚠ Bu kural bir tur önce "bugün tüketicisiz ama bilerek duruyor" diye
   kaydedilmişti — tüketicisiz değilmiş, ADI YANLIŞMIŞ. "Ölü kural"
   teşhisi koymadan önce adın markup'takiyle aynı olduğu doğrulanmalı.
   Ölçüm (`.tip-rank`): inline-flex · gap 5 · üst pay 8 · 9.5/800 ·
   .05em · uppercase. */
/* 🔴 KANONDA HİÇ TANIMLI DEĞİLDİ (grep → 0). Bir tur önce `.kademe` adıyla
   yazılıydı ve markup `.ipucu-kademe` çağırıyordu; ad düzeltilince eksik
   bildirimler de görüldü. Ölçüm (FIT `.tip-rank`): 1440 ve 390'da
   BİREBİR AYNI — mobil dalı yok (slot-2 iki kipte de ölçtü). */
.ipucu-kademe{
  display:inline-flex; align-items:center; gap:var(--bosluk-5);
  margin-top:var(--bosluk-8);
  font-size:9.5px; font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-etiket-3); text-transform:uppercase;
  color:var(--aksan-parlak);
}

/* ---- KOYU ÖZET KARTI (R7) -------------------------------------------
   Kaynak `.fp-card.is-dark` + `.fp-head` · `.fp-badge` · `> b` · `p` ·
   `.fp-meta`. Puan panelinin tepesinde duran koyu kutu.

   🔴 §1 `.kart` DEĞİL ve bu ÖLÇÜMLE ÇÜRÜTÜLDÜ: slot-2 ilk yazımda
   `.kart.panel.ozet-koyu` diye sarmıştı, ölçüm sekiz bildirimde ayrıştı.
   Kart kağıt zemin · hairline · 24px yuvarlak yazıyor; bu kutu gradyan
   zemin · alfalı kenar · 16px yuvarlak ve kendi başlık ızgarasını
   taşıyor. Ortak ata yok, ayrı bileşen.

   ⚠ Gradyanın yeşil ucu `--koyu-zemin-yesil` — token katmanında
   gerekçesiyle duruyor; Diyet karşılığı DOĞRULA notlu.
   ===================================================================== */
.ozet-karti{
  padding:var(--bosluk-24) var(--bosluk-26);
  border-radius:var(--yuvarlak-lg);
  /* 🔴 KARTIN KENDİ KENARLIĞI ŞEFFAF. Kaynak (`.fp-card.is-dark`) kenar
     rengi bildirmiyor; beyaz alfa YALNIZ başlık şeridinin ALTINDA.
     Kanon `--koyu-cizgi`yi kartın DÖRT kenarına yazmıştı — koyu kutunun
     çevresine beyaz bir çerçeve çiziyordu. */
  border:var(--cizgi-1) solid transparent;
  background-image:linear-gradient(160deg, var(--koyu-zemin-yesil), var(--koyu-zemin));
  color:var(--kagit);
  box-shadow:var(--golge-sm);
}
/* 🔴🔴 §63d · TABAN AÇIK KART, KOYU HÂL VARYANT — ölçüldü 2026-09-03.
   Bu bloğun ilk yazımı `.ozet-bas`ı YALNIZ KOYU karttan ölçmüş ve koyu
   değerleri TABAN yazmıştı (kendi şerhi de öyle diyor: "Gözle bulundu").
   Bedeli iki yönlü ölçüldü:
     · harita `fp-head → ozet-bas` etkinken 23 AÇIK kartın başlığı
       BEYAZ ÜSTÜNE BEYAZ oldu (kontrast 1.00 ↔ donör 16.64)
     · eşlemeyi sökünce 23'ü düzeldi ama TEK KOYU kart KOYU ÜSTÜNE KOYU
       oldu (h3 rgb(33,30,22) ↔ donör rgb(255,255,255), kontrast ~1:1)
   İkisi de aynı kökten: taban yanlış katmanda. Eşlemeyi sökmek kusuru
   TAŞIR, çözmez — `.ozet-bas` bir daha kullanıldığı gün geri gelir.
   Artık taban AÇIK, koyu hâl `.ozet-karti` kapsamasıyla geliyor.
   ⚠ Kaynağın DÖRT koyu kuralı da `.fp-card.is-dark` BİLEŞİĞİNE bağlı
     (`fit-shell.css:2276·2280·2283·2285`); harita `is-dark → ozet-karti`
     çevirdiği için kapsama kanonda `.ozet-karti` üzerinden kurulur. */
.ozet-bas{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--bosluk-14);
  padding-bottom:var(--bosluk-14); margin-bottom:var(--bosluk-16);
  border-bottom:var(--cizgi-1) solid var(--cizgi);      /* AÇIK taban */
}
.ozet-karti .ozet-bas{ border-bottom-color:var(--koyu-cizgi); }   /* KOYU varyant */
.ozet-karti .ozet-bas h3{ color:var(--kagit); }                   /* KOYU varyant */
/* Başlığın ikon karosu — kaynakta 34×34, açık kartta marka yıkaması,
   koyu kartta markanın alfalı hâli (`fit-shell.css:2283`). Kanonda
   `h3 i` kuralı HİÇ YOKTU: ikon karosunu kaybediyordu (34×34 → 13×18,
   zemin saydam, yuvarlak 0). */
.ozet-bas h3 i{
  flex:none; width:34px; height:34px; border-radius:var(--yuvarlak-md);
  display:grid; place-items:center; font-size:var(--yazi-14);
  background:var(--aksan-yikama); color:var(--aksan-murekkep);
}
.ozet-karti .ozet-bas h3 i{
  background:var(--aksan-cizgi-3); color:var(--aksan-parlak);
}
/* Koyu kartın torun metinleri — kanonun karşılığı ÇOCUK seçiciydi
   (`.ozet-karti>p`) ve kaynağın `.pp-onay p`si TORUN olduğu için
   eşleşmiyordu (`kapi-iskelet` K4'ün üç ekranda tekrarlayan
   `rgba(255,255,255,.74) ≠ .78` kırmızısının kökü buydu). */
.ozet-karti p,
.ozet-karti .kart-sayac{ color:var(--koyu-metin-6); }
.ozet-bas h3{
  display:flex; align-items:center; gap:var(--bosluk-10);
  font-size:var(--yazi-17-5); font-weight:var(--agirlik-kalin);
  line-height:1.12; letter-spacing:var(--aralik-baslik);
  /* 🔴 KOYU ZEMİNDE KOYU METİN — kontrast 1:1, başlık OKUNMUYORDU.
     Kartın kendisi `color:--kagit` yazıyor ama `h3` kabuğun kendi
     başlık rengini (`--murekkep`) alıyor ve mirası kesiyor.
     Geometri ve tipografi birebir tuttuğu için kural "yazıldı" görünüyordu;
     eksik olan tek satır buydu. Gözle bulundu (slot-2), ölçüm göremiyordu
     çünkü `.ozet-bas h3` çifti yeni eklendi. */
  color:var(--murekkep);
}
.ozet-karti>b{
  /* ⚠ `display:block` DENENDİ VE ÖLÇÜM ÇÜRÜTTÜ: kaynak `inline` bırakıyor
     ve satır kutusu içinde çiziliyor (bu yüzden 1.55 satır boyu görünür
     bir pay üretiyor — blok yapılınca o pay kayboluyordu). */
  font-size:var(--yazi-32); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-govde); letter-spacing:var(--aralik-baslik);
  color:var(--kagit);
}
.ozet-karti>p{
  margin-top:var(--bosluk-6);
  font-size:var(--yazi-16); font-weight:var(--agirlik-govde);
  color:var(--koyu-metin-6);
  text-align:left; text-align-last:auto;    /* B36 — 1 kalem yaslanıyordu */
}
/* 🔴 §63d'NİN ÜÇÜNCÜ ÖRNEĞİ — ölçüldü 2026-09-03 (slot-program bildirdi,
   lead kaynaktan doğruladı). Kanon buraya da KOYU kartın rengini TABAN
   yazmıştı; açık kartta beyaz-üstüne-beyaz oluyordu. Kaynak iki katmanı
   AÇIKÇA ayırıyor (`fit-shell.css`):
       .fp-meta   { color:var(--muted) }              ← TABAN
       .fp-meta b { color:var(--slate) }              ← TABAN
       (.is-dark) .fp-meta   { color:rgba(255,255,255,.74) }   ← KOYU
       (.is-dark) .fp-meta b { color:#fff }                    ← KOYU
   Üç örnek aynı kalıptan çıktı (`.ozet-bas` · `.ozet-bas h3` · `.ozet-kunye`):
   koyu özet kartı kanona TEK ÖLÇÜM olarak girmiş ve o ölçüm taban sayılmış.
   §63d'nin kaydı bu yüzden bir bileşen notu değil, bir YÖNTEM notudur:
   bir bileşen tek yüzeyde ölçüldüyse TABANI ölçülmüş sayılmaz. */
.ozet-kunye{
  display:flex; flex-wrap:wrap; gap:var(--bosluk-18); margin-top:var(--bosluk-12);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta);
  color:var(--metin-ikincil);                                   /* AÇIK taban */
}
.ozet-kunye span b{ font-size:var(--yazi-12-5); font-weight:var(--agirlik-ekstra); color:var(--murekkep); }
.ozet-karti .ozet-kunye{ color:var(--koyu-metin-6); }           /* KOYU varyant */
.ozet-karti .ozet-kunye span b{ color:var(--kagit); }

/* ---- GALERİ SÜZGEÇ ŞERİDİ ------------------------------------------- */
.galeri-ozet{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--bosluk-10); margin-bottom:var(--bosluk-12); }
.galeri-hap{
  display:inline-flex; align-items:center; gap:var(--bosluk-8);
  padding:var(--bosluk-8) var(--bosluk-15); border-radius:var(--yuvarlak-hap);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
  font-size:var(--yazi-13); font-weight:var(--agirlik-orta); color:var(--murekkep-yumusak);
}
/* Hapın içindeki sayı ve üç durum ikonu. Ölçüldü (slot-2): sayı 800
   (kabuğun `b{font-weight:900}`i sızıyordu), ikonlar 12px ve satır boyu
   KİLİTLİ (12px = 1) — hapın yüksekliğini yazı değil dolgu belirlesin. */
.galeri-hap b{ font-size:var(--yazi-13); font-weight:var(--agirlik-ekstra); color:var(--murekkep); }
.galeri-hap i{ font-size:var(--yazi-12); line-height:1; }
/* 🔴 HAP İKONU DURUMU RENKLE AYIRIYOR — kanon üçünü de tek griye
   bağlamıştı. Kazanılan yeşil · yolda petrol · ölçüsüz gri.
   ⚠ `--eko-akademi`nin (#006072) İKİNCİ tüketicisi: §5.1'de "Açık talep"
   hapı için kanona alınmıştı, burada rozet galerisinde tekrar çıktı.
   Petrol rampasının sistemsel olduğunu doğruluyor (slot-2). */
.hap-kazanildi{ color:var(--aksan-koyu); }
.hap-yolda{     color:var(--eko-akademi); }
.hap-olcusuz{   color:var(--metin-ikincil); }

.galeri-not{
  /* Okuma genişliği — kaynağın ölçülen sınırı, iki kipte de aynı
     (551.25px @1440 ve @390). Türetilmiş bir birimden geliyor (kesirli
     piksel) ama hangi birim olduğu ölçümden okunamıyor; çizimi birebir
     veren uzunluk yazıldı. §23'ün 860px'i ve §59'un 880px'iyle aynı
     aile: okuma kolonu ölçüsü, boşluk değil. */
  max-width:551.25px;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); color:var(--metin-ikincil);
  text-align:left; text-align-last:auto;    /* B36 */
}
.galeri-suzgec{
  /* 🔴 ZEMİN DÜZ DEĞİL, GRADYAN. Kaynak yıkamadan kâğıda %80'de geçen
     120°'lik bir gradyan basıyor; kanonda hiç yoktu ve ölçüm görmüyordu
     (`backgroundImage` OZ listesinde değildi — dördüncü kör nokta). */
  background-image:linear-gradient(120deg, var(--aksan-yikama-2), var(--kagit) 80%);
  display:flex; align-items:center; gap:var(--bosluk-12);
  padding:var(--bosluk-13) var(--bosluk-18); margin-bottom:var(--bosluk-22);
  border-radius:var(--yuvarlak-md); border:var(--cizgi-1) solid var(--aksan-cizgi-3);
}
/* R9 · şeridin üç parçası. Kap yazılıydı, çocukları değildi — 13 🔴.
   Ölçüm: slot-2, şerit AÇIKKEN @1440; mobil dalı YOK (iki kipte aynı). */
.suzgec-ikon{
  flex:none; width:34px; height:34px; border-radius:var(--yuvarlak-sm);
  display:grid; place-items:center;
  font-size:var(--yazi-14);
  background:var(--aksan); color:var(--kagit);
}
.suzgec-metin{
  /* `min-width:0` şart: esnek kalemin `auto` tabanı uzun aile adında
     şeridi taşırıyor (§60'ın `.arama-girdi-kap`ıyla aynı düzeltme). */
  /* Masaüstünde taban 0% (düz `flex:1`); DAR EKRANDA kaynak tabanı
     `calc(100% - 46px)`e çekiyor — 46 = ikonun 34'ü + şeridin 12px
     boşluğu — ve metin şeridi sarınca tam satırı kapıyor. İlk yazımda
     calc TABANA konmuştu, ölçüm masaüstünde çürüttü. Mobil dal aşağıda. */
  flex:1; min-width:0;
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-orta);
  line-height:var(--satir-govde);
}
.suzgec-metin b{ font-size:var(--yazi-13-5); font-weight:var(--agirlik-ekstra); color:var(--aksan); }
.suzgec-metin small{
  display:block; margin-top:1px;
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); color:var(--murekkep-yumusak);
}

/* §48'İN DÖRDÜNCÜ BOYU DEĞİL, İKİNCİ KİPİ. Kaynak `.fpx-bos`ı çoğu
   ekranda `.fp-card` ile SARIYOR ve o zaman dolgu değişiyor:
     odemelerim-v1     .fpx-bos          44px 20px 38px   çıplak
     rozetlerim-v1     .fp-card.fpx-bos  38px 24px        kartlı
     egzersizlerim-v1  aynı · challengelarim-v1 aynı
   Üç ekranda kartlı, bir ekranda çıplak; ikon (56 · daire · 21px) ve
   `gap:10` ikisinde de aynı. slot-3'ün ölçümü YANLIŞ DEĞİL, EKSİKTİ —
   kendi ekranındaki hâli doğru ölçmüş, kardeş kip görülmemişti.
   `.sekmeler.ortali`/`.dt` ve `.pc-foot` block/flex ile aynı aile. */
.kart.bos-durum.plan-ici{ padding:var(--bosluk-38) var(--bosluk-24); }

.galeri-cipler{ display:flex; flex-wrap:wrap; gap:var(--bosluk-8); margin-bottom:var(--bosluk-22); }
.galeri-temizle{
  /* Şeridin sağ ucunda, DARALMAZ ve yazısı ortalı — geometrisi
     (12.5/700 · 8/14 · radius 8 · min-height 44) zaten tutuyordu,
     eksik olan bu iki bildirimdi (slot-2 R9). */
  flex:none; justify-content:center;
  display:inline-flex; align-items:center; gap:var(--bosluk-7); min-height:44px;
  padding:var(--bosluk-8) var(--bosluk-14); border-radius:var(--yuvarlak-sm);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
  font-family:inherit; font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); cursor:pointer;
}

@media (max-width:640px){
  /* R7'nin TEK mobil farkı — dolgu daralır, gerisi aynı (slot-2 ölçtü). */
  .ozet-karti{ padding:var(--bosluk-20) var(--bosluk-18); }
  /* Süzgeç metni dar ekranda TAM SATIR kapar (kap `flex-wrap:wrap`). */
  .suzgec-metin{ flex-basis:calc(100% - 46px); }
  .siralama-satir{ padding:var(--bosluk-13) var(--bosluk-15); gap:var(--bosluk-11); }
  .puan-izgara,
  .rozet-izgara{ grid-template-columns:1fr; }
  .merdiven{ grid-template-columns:repeat(2,1fr); }
  .galeri-suzgec{ flex-wrap:wrap; }
  .galeri-temizle{ margin-left:46px; }
}


/* =====================================================================
   62 · SOHBET PANELİ — kaynak `.msj-*` (`fit-mesaj.css` · `fit-mesaj.js`)
   ---------------------------------------------------------------------
   Sağdan kayan yazışma paneli + onu açan yüzen düğme. Kaynak bunu KENDİ
   KENDİNE YETEN bir modül olarak yazmış: kabuğun dosyalarına dokunmuyor,
   kendi `<link>`ini ve DOM'unu enjekte ediyor, `.fb-*` modal kitiyle
   çakışacak tek bir ad kullanmıyor (hepsi tek önekli). Kanon aynı sınırı
   korur — §26'nın yüzen düğmeleriyle aynı köşede yaşar ama ayrı kalemdir.

   Ölçüm: render edilmiş DOM @1440 (`dump/fit-render/sohbet-panel.html`).
   Panel `hidden` doğduğu ve iki koşula bağlı olduğu için ölçüm ayrı bir
   betikle alındı (`scripts/olcum/sohbet-render.mjs`): kabuğun kendi
   `?auth=1` yolu + kabuğun kendi `state.write()`i ile randevu tohumu.
   ⚠ localStorage'a elle anahtar yazmak İŞE YARAMIYOR — kabuk `dm_user`
   içindeki `auth` bayrağına bakıyor; iki tur bu tuzağa gidildi.

   YAPI — sıra değişmez:
     .sohbet-ortu            arkadaki perde
     .sohbet-panel           sağdan kayan yüzey
       .sohbet-bas           monogram + kişi adı + durum + tam ekran + kapat
       .sohbet-kisiler       kişi seçici şeridi
       .sohbet-uyari         maket dürüstlük satırı
       .sohbet-akis          gün ayracı + baloncuklar
       .sohbet-yaz           ek + girdi + gönder
         .sohbet-kunye       dosya eki dürüstlük satırı
     .sohbet-dugme           yüzen açma düğmesi (+ sayaç rozeti)

   🔴 ÜÇ DÜRÜSTLÜK KURALI — kaynağın kendi sözleşmesi, kanon taşır:
     1 · KARŞI TARAF CEVAP ÜRETMEZ. "yazıyor…", gecikmeli otomatik yanıt,
         okundu tiki YOKTUR. Karşıda kimse yok ve ekran bunu söylüyor.
     2 · AÇILIŞ ÖRNEĞİ DEPOYA YAZILMAZ ve her balonu "Örnek" rozeti taşır.
     3 · DOSYA EKİ: ad · boyut · tür gerçekten okunur ve kaydedilir,
         DOSYANIN KENDİSİ hiçbir yere yüklenmez — `.sohbet-kunye` bunu
         yazıyla söyler. "Yükleniyormuş gibi yapan" çubuk YOKTUR.
   ===================================================================== */

.sohbet-ortu{
  position:fixed; inset:0; z-index:var(--kat-sohbet-ortu);
  background:var(--perde);
  opacity:0; visibility:hidden;
  transition:opacity var(--sure-yavas) var(--yumusama), visibility var(--sure-yavas);
}
.sohbet-ortu.acik{ opacity:1; visibility:visible; }

.sohbet-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:var(--kat-sohbet);
  width:min(420px,100%);
  display:flex; flex-direction:column;
  background:var(--kagit); box-shadow:var(--golge-lg);
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--sure-agir) var(--yumusama), visibility var(--sure-agir);
}
.sohbet-panel.acik{ transform:translateX(0); visibility:visible; }

/* ---- BAŞLIK — panelin adını değil KONUŞULAN KİŞİYİ taşır ------------ */
.sohbet-bas{
  display:flex; align-items:center; gap:var(--bosluk-10);
  padding:var(--bosluk-14) var(--bosluk-16);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
.sohbet-bas-kimlik{ flex:1; min-width:0; }
.sohbet-bas-kimlik h2{
  font-size:var(--yazi-17-5); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-baslik);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sohbet-bas-alt{
  margin-top:2px;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde);
  color:var(--murekkep-yumusak);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:left; text-align-last:auto;    /* B36 */
}
/* Monogram — antrenör avatarı UYDURULMAZ: randevu kaydında görsel alanı
   yok, o yüzden adın baş harfi basılır (kaynağın kendi kuralı). */
.sohbet-mono{
  flex:none; width:34px; height:34px; border-radius:var(--yuvarlak-daire);
  display:grid; place-items:center;
  font-size:var(--yazi-13); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-genis);
  /* Taban YIKAMA; SEÇİLİ çipte beyaza döner (çip zemini yıkama olduğu için
     monogram ondan ayrışsın diye). Kaynak ikisini de böyle basıyor. */
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  position:relative;                 /* onay rozetinin kabı */
}
.sohbet-kisi.secili .sohbet-mono{ background:var(--kagit); }
.sohbet-mono.buyuk{
  width:44px; height:44px; font-size:var(--yazi-15);
  background:var(--aksan-yikama);
}
/* Onay rozeti — randevu/görüşme ONAYLANDIĞINDA monogramın köşesinde
   yeşil nokta. Kaynağın kendi işareti (`.msj-mono.ok::after`); beyaz
   kenar rozeti monogramdan ayırır, ikisi de aynı yuvarlaklıkta. */
/* 🔴 DURUM NOKTASI DÖRT HÂLLİ, İKİ DEĞİL. Kanon `.onayli` diye tek
   boolean yazmıştı; kaynağın kiti dört durum taşıyor ve rozet HER
   monogramda basılıyor — hangi renkte olacağını durum belirliyor:
     .ok   onaylandı        --aksan-koyu
     .bekleme bekliyor      --altin-metin
     .pasif  kapalı         --metin-ikincil
     .durdu  iptal/durdu    --tehlike-koyu
   Ölçüldü (`fit-mesaj.css:206-214`, render doğrulamalı): kutu 11×11 ·
   2px kâğıt kenar · sağ/alt −2 · daire. Geometri kanonda zaten doğruydu,
   eksik olan DURUM AİLESİydi ve rozetin koşulsuz basılması.
   ⚠ Beyar gözle bildirdi: "FIT'te ikisinde de sağ altta durum noktası
   var." Kaynağın iki çipi de `.msj-mono.ok` taşıyor; kanon ikincisine
   `data-onayli="0"` verip rozeti hiç basmıyordu — yani "onaylı değil"i
   "durumu yok" diye çizmişti. Durum hep vardır, rengi değişir. */
.sohbet-mono::after{
  content:""; position:absolute; right:-2px; bottom:-2px;
  width:11px; height:11px; border-radius:var(--yuvarlak-daire);
  border:2px solid var(--kagit);
  background:var(--metin-ikincil);        /* durum verilmezse nötr */
}
.sohbet-mono.ok::after{       background:var(--aksan-koyu); }
.sohbet-mono.bekleme::after{  background:var(--altin-metin); }
.sohbet-mono.pasif::after{    background:var(--metin-ikincil); }
.sohbet-mono.durdu::after{    background:var(--tehlike-koyu); }
.sohbet-mono.buyuk::after{ right:-1px; bottom:-1px; width:13px; height:13px; }
/* 🔴 `.msj-tumu` AYRI BİR BİLEŞEN, `.btn`in varyantı DEĞİL — kanon onu
   §2'nin `.dugme.ikon`una bağlayınca metin düğmesinin kutusunu ve
   tipografisini miras aldı. Geometri (44x44 · yuvarlak · kenar · zemin)
   zaten doğruydu, ama sekiz bildirim ayrışıyordu (ölçüldü @1440):
     dolgu 14/26 ↔ 0 · gap 10 ↔ normal · min-height 44 ↔ auto
     yaslama center ↔ start · 14.5/700 ↔ 14/500 · satır 22.475 ↔ 21.7
   Görünür fark üretmiyordu (ikon `place-items:center` ile ortalanıyor)
   ama bileşen sınırı yanlıştı; `bildirimler`in `.dugme.cam.ikon`
   kaleminin aynısı. Kaynak: `fit-mesaj.css:145`. */
.sohbet-bas .dugme.ikon{
  padding:0; min-height:auto; gap:normal;
  justify-content:normal; text-align:start;
  font-size:var(--yazi-14); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde);
}
.sohbet-bas .dugme.ikon,
.sohbet-kapat{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:var(--yuvarlak-md);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
  color:var(--murekkep-yumusak); cursor:pointer; font-family:inherit;
}
.sohbet-kapat{ font-size:var(--yazi-16); }
.sohbet-kapat:hover{ border-color:var(--aksan); color:var(--aksan); }
.sohbet-kapat:focus-visible{
  outline:var(--odak-kalinlik) solid var(--aksan-yikama); outline-offset:var(--odak-ofset);
}

/* ---- KİŞİ SEÇİCİ ---------------------------------------------------- */
.sohbet-kisiler{
  display:flex; gap:var(--bosluk-8);
  padding:var(--bosluk-12) var(--bosluk-20);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
  overflow-x:auto; scrollbar-width:none;
}
.sohbet-kisiler::-webkit-scrollbar{ display:none; }
.sohbet-kisi{
  flex:none; display:flex; align-items:center; gap:var(--bosluk-9);
  min-height:44px; padding:var(--bosluk-5) var(--bosluk-14) var(--bosluk-5) var(--bosluk-5);
  border-radius:var(--yuvarlak-md);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
  font-family:inherit; font-size:var(--yazi-13-5); font-weight:var(--agirlik-kalin);
  /* Seçili DEĞİLKEN yumuşak mürekkep, seçiliyken aksan — kaynağın iki
     rengi de ölçüldü (86,81,74 ↔ 0,122,61). Kanon `--murekkep` basıyordu
     ve iki durum ayrışmıyordu. */
  color:var(--murekkep-yumusak); cursor:pointer; white-space:nowrap;
}
.sohbet-kisi.secili{
  background:var(--aksan-yikama); border-color:var(--aksan-koyu);
  color:var(--aksan-koyu);
}
/* Okunmamış noktası — kişinin yanında, sayı değil VARLIK bildirir. */
.sohbet-nokta{
  flex:none; width:8px; height:8px; border-radius:var(--yuvarlak-hap);
  background:var(--bildirim-sil);
}

/* ---- MAKET DÜRÜSTLÜK SATIRI ----------------------------------------
   🔴 YANLIŞ KAYNAK ELEMANI EŞLENMİŞTİ. Kanon bunu `.msj-uyari`ya
   bağlamıştı — o, panelin DİBİNDEKİ "depolama kapalı" uyarısı: düz
   kırmızı metin, kutusuz, ikonsuz (`fit-mesaj.css:370`).
   Panelin ÜSTÜNDEKİ maket dürüstlük satırı bambaşka bir kalem:
     <div class="hr-note"><i class="fa-solid fa-flask"></i><p>…</p></div>
   yani kaynağın `.hr-note`u = kanonun §16 `.bilgi-notu`su — aksan
   yıkamalı KUTU, solda deney şişesi ikonu. Beyar gözle bildirdi.
   ⚠ İki uyarı iki ayrı şey: biri "bu ekran maket" (üstte, bilgi kutusu),
   öbürü "depolama kapalı" (dibte, kırmızı satır). Kanon ikisini tek ada
   indirmişti — "iki kaynak sınıfı tek ada indi" dersinin YEDİNCİ örneği,
   ve bu seferki iki AYRI KİPİ birleştirmiş.
   Maket satırı artık §16'yı kullanır; aşağıdaki kural yalnız DİPTEKİ
   depolama uyarısında kalır. */
/* Maket dürüstlük notu §16 `.bilgi-notu`dur; panelin dar kolonunda kaynak
   onu yeniden ölçüyor: üst payı sıfır, köşe yok, yan kenar yok — kutu iki
   kenara dayanır. Yeni sınıf ÜRETİLMEZ (kaynağın kendi kararı). */
.sohbet-panel .bilgi-notu{
  flex:none; margin-top:0; border-radius:0;
  border-left:none; border-right:none;
  padding:var(--bosluk-14) var(--bosluk-20);
}
.sohbet-panel .bilgi-notu p{
  font-size:var(--yazi-13); line-height:var(--satir-govde);
}

.sohbet-depo-uyari{
  margin-top:var(--bosluk-9);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta);
  line-height:var(--satir-orta); color:var(--bildirim-sil);
  text-align:left; text-align-last:auto;    /* B36 */
}

/* ---- MESAJ AKIŞI ---------------------------------------------------- */
.sohbet-akis{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--bosluk-10);
  padding:var(--bosluk-20); background:var(--zemin);
}
/* 🔴 AZ MESAJ VARKEN YAZIŞMA DİBE YASLANIR, tepede asılı kalmaz.
   Kaynağın kendi şerhi gerekçesini de yazıyor (`fit-mesaj.css:245-250`):
   `justify-content:flex-end` taşan kabın TEPESİNİ kırpar; ilk kalemin
   `margin-top:auto`su boşluk varken iter, taşarken hiçbir şey yapmaz.
   Ölçüldü: FIT ilk gün ayracı `margin-top:389.578px` (auto çözülmüş),
   kanon 4px — yazışma tepede duruyordu.
   ⚠ Kural ilk kalemin AKIŞIN İÇİNDE olmasına bağlı: maket dürüstlük
   satırı `.sohbet-uyari` akışın DIŞINDA durmalı (§62'nin kendi yapı
   listesi zaten böyle diyor; markup bunu çiğniyordu, düzeltildi). */
.sohbet-akis > .sohbet-gun:first-child,
.sohbet-akis > .sohbet-balon:first-child{ margin-top:auto; }
.sohbet-gun{
  align-self:center;
  padding:var(--bosluk-4) var(--bosluk-10); margin:var(--bosluk-4) 0 2px;
  border-radius:var(--yuvarlak-sm);
  background:var(--zemin-2); border:var(--cizgi-1) solid var(--cizgi);
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-genis); color:var(--murekkep-yumusak);
}
/* 🔴 HİZA VE RENK BİRLİKTE — kaynağın kendi şerhi: "tek başına hiza da
   tek başına renk de yeterli değil". Yön iki sinyalle okunur. */
.sohbet-balon{
  max-width:78%; padding:var(--bosluk-12) var(--bosluk-14);
  border:var(--cizgi-1) solid; border-radius:var(--yuvarlak-md);
  font-size:var(--yazi-14); font-weight:var(--agirlik-govde);
  line-height:var(--satir-genis); color:var(--murekkep);
  overflow-wrap:anywhere;
  text-align:left; text-align-last:auto;    /* B36 */
}
.sohbet-balon p{ margin:0; color:inherit; font-size:inherit; line-height:inherit; }
.sohbet-balon.uye{
  align-self:flex-end;
  background:var(--aksan-yikama); border-color:var(--aksan-cizgi);
  border-bottom-right-radius:var(--yuvarlak-sm);
}
.sohbet-balon.karsi{
  align-self:flex-start;
  background:var(--kagit); border-color:var(--cizgi);
  border-bottom-left-radius:var(--yuvarlak-sm);
}
/* Künyenin içindeki rozet KÜÇÜLÜR — kaynağın kendi kapsamlı kuralı
   (`fit-mesaj.css:282`). Balon dar, taban rozet orada büyük kalıyor. */
.sohbet-kunye .rozet{
  font-size:var(--yazi-10-5); padding:3px var(--bosluk-8);
}

.sohbet-ipucu{
  margin-top:var(--bosluk-8);
  font-size:var(--yazi-12); font-weight:var(--agirlik-govde); color:var(--metin-ikincil);
  text-align:left; text-align-last:auto;    /* B36 */
}
/* Balonun künyesi — saat ve "Örnek" rozeti. */
.sohbet-balon .kunye{
  display:flex; align-items:center; gap:var(--bosluk-8); flex-wrap:wrap;
  margin-top:var(--bosluk-7);
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-kalin);
  color:var(--murekkep-yumusak);
}
.sohbet-balon .kunye .rozet{ font-size:var(--yazi-10-5); padding:3px var(--bosluk-8); }

/* Dosya eki künyesi — GERÇEK ad ve GERÇEK boyut (dürüstlük kuralı 3). */
.sohbet-ek{
  display:inline-flex; align-items:center; gap:var(--bosluk-9);
  max-width:100%; margin-top:var(--bosluk-9);
  padding:var(--bosluk-9) var(--bosluk-12);
  border-radius:var(--yuvarlak-sm);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta); color:var(--murekkep-yumusak);
}
.sohbet-balon.karsi .sohbet-ek{ background:var(--zemin); }
.sohbet-ek i{ color:var(--aksan-koyu); font-size:var(--yazi-13); flex:none; }
.sohbet-ek b{ font-weight:var(--agirlik-kalin); color:var(--murekkep); overflow-wrap:anywhere; }
.sohbet-ek small{ font-weight:var(--agirlik-orta); color:var(--metin-ikincil); }

/* ---- YAZMA ALANI ---------------------------------------------------- */
.sohbet-yaz{
  padding:var(--bosluk-14) var(--bosluk-16);
  border-top:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
}
.sohbet-yaz-satir{ display:flex; align-items:flex-end; gap:var(--bosluk-8); }
.sohbet-yaz textarea{
  flex:1; min-width:0; resize:none;
  min-height:44px; max-height:120px; padding:var(--bosluk-12) var(--bosluk-14);
  border-radius:var(--yuvarlak-md);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--zemin);
  font-family:inherit; font-size:var(--yazi-14); font-weight:var(--agirlik-govde);
  color:var(--murekkep); outline:none;
  text-align:left; text-align-last:auto;    /* B36 */
}
.sohbet-yaz textarea:focus{ border-color:var(--aksan-koyu); }
.sohbet-yaz textarea::placeholder{ color:var(--yer-tutucu); }
.sohbet-dugme-kucuk{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:var(--yuvarlak-md);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
  color:var(--murekkep-yumusak); font-size:var(--yazi-15);
  cursor:pointer; font-family:inherit;
}
/* Kaynak gönder düğmesine `border:none` yazıyor (`fit-mesaj.css:341`);
   kanon kenarı zemin rengine boyuyordu — çizim yakın, bildirim değil. */
.sohbet-dugme-kucuk.gonder{ background:var(--aksan-koyu); border:none; color:var(--kagit); }
.sohbet-dugme-kucuk:focus-visible{
  outline:var(--odak-kalinlik) solid var(--aksan-yikama); outline-offset:var(--odak-ofset);
}
.sohbet-kunye{
  display:flex; align-items:center; gap:var(--bosluk-8); flex-wrap:wrap;
  margin-top:var(--bosluk-7);
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-kalin); color:var(--murekkep-yumusak);
  text-align:left; text-align-last:auto;    /* B36 */
}

/* ---- YÜZEN AÇMA DÜĞMESİ --------------------------------------------
   §26'nın kenar kalemleriyle AYNI köşede yaşar; kaynağın şerhi istifi
   ölçmüş: `.basa-don` 92px'te başlıyor, bu 22'de — üst kenarı 78px,
   arada 14px. Kesişim yok.
   🔴 RANDEVUSU OLMAYAN ÜYEDE DÜĞME SOHBET AÇMAZ. Yuvarlak rozet yerine
   DOĞRUYU SÖYLEYEN bir satıra dönüşür ve antrenör listesine götürür —
   "Sohbet" yazıp boş panel açmak yalan olurdu (kaynağın kuralı). */
.sohbet-dugme{
  position:fixed; right:var(--bosluk-22); bottom:var(--bosluk-22);
  z-index:var(--kat-sohbet-dugme);
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--bosluk-10);
  border:none; border-radius:var(--yuvarlak-lg);
  background:var(--aksan-koyu); color:var(--kagit);
  font-family:inherit; font-size:var(--yazi-14-5); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-sik-2); text-align:left; text-decoration:none;
  box-shadow:var(--golge-yuzen); cursor:pointer;
  transition:background var(--sure-agir) var(--yumusama), transform var(--sure-agir) var(--yumusama);
}
.sohbet-dugme i{ font-size:var(--yazi-18); flex:none; }
.sohbet-dugme:hover{ background:var(--aksan-koyu-2); transform:translateY(-2px); }
.sohbet-dugme:focus-visible{ outline:var(--odak-kalinlik) solid var(--aksan-parlak); outline-offset:3px; }
.sohbet-dugme.bos{ width:auto; height:52px; padding:0 var(--bosluk-20); }
.sohbet-dugme.bos i{ font-size:var(--yazi-15); }
/* Okunmamış sayacı — §5 `.rozet.durdu` renkleriyle aynı, yeni renk yok. */
.sohbet-rozet{
  position:absolute; top:-6px; right:-6px;
  min-width:22px; height:22px; padding:0 var(--bosluk-6);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--yuvarlak-sm);
  font-size:var(--yazi-11-5); font-weight:900; letter-spacing:var(--aralik-genis);
  background:var(--tehlike-yikama); color:var(--tehlike-koyu);
  border:var(--cizgi-1) solid var(--tehlike-cizgi-yumusak);
}
/* Alt şerit düğmenin üstüne bindiğinde çekilir — kabuğun "ekranda en
   fazla bir sabit alt şerit" kuralı. */
.sohbet-dugme.serit-altinda{ display:none; }

@media (max-width:640px){
  .sohbet-panel{ width:100%; }
  /* ≤640'ta bant DAR: alt bar 78px'te biter, `.basa-don` 148'te başlar →
     70px'lik boşluğa 56px'lik düğme oturur. 85 ikisine de EŞİT 7px pay
     bırakır (kaynak @390×844'te ölçmüş). */
  .sohbet-dugme{
    right:var(--bosluk-16);
    bottom:calc(85px + env(safe-area-inset-bottom,0px));
  }
  .sohbet-dugme.bos{
    max-width:calc(100vw - 32px); height:auto;
    padding:var(--bosluk-11) var(--bosluk-16);
    white-space:normal; line-height:var(--satir-sik);
  }
}
@media (prefers-reduced-motion:reduce){
  .sohbet-dugme{ transition:background var(--sure-hizli) linear; }
}


/* =====================================================================
   59 · BİLDİRİM AKIŞI — kaynak `.nt-*` / `.ntr-*`
   ---------------------------------------------------------------------
   Gün gruplarına bölünmüş bildirim listesi. Ölçüm: slot-1, @1440 ve @390.

   YAPI:
     .bildirim-kolonu          880px  ⚠ §23 `.okuma-kolonu` 860 — AYRI ölçü
       .gun-etiketi            versal gün başlığı, sağında hairline çizgi
       .bildirim-liste         kart kabuğu
         .bildirim-satir       ico|avatar + metin + [görsel] + [aksiyon]
                               + kalem işlemleri + okunmadı beneği
       .geri-al                silme/kapatma geri alma şeridi

   🔴 SATIR 390px'TE KIRILIYOR — KAYNAĞIN KUSURU, KANONUN DEĞİL.
   Kaynağın `@media(max-width:640px)` bloğu `.ntr-txt{flex:1 1 0}` tabanını
   YALNIZ aksiyonlu satıra veriyor (`:has(.ntr-act)`); aksiyonsuz satırda
   taban 0 kalıyor ve `flex-wrap:wrap` ile metin min-content'e çöküyor —
   ölçüldü: metin kolonu 35px, satır 84→399px. Kaynağın kendi şerhi
   kapsamı bilerek daralttığını yazıyor ("tüm satırlara verilince
   görselli satırlarda `.ntr-th` ve `.ntr-dot` alt satıra sarıp sola
   yığılıyordu") — yani yazar iki kusurdan birini seçmiş.
   KANON KAYNAĞIN HÂLİNİ BASAR (slot-1 K6, ekran görüntüsüyle bildirildi).
   ===================================================================== */

/* 🔴 GÖVDE NEFESİ ASİMETRİK — ne `.bolum` ne `.bolum.sik` uyuyor.
   Kaynak `.nt-body` üstte 32 · altta 74 basıyor (@390: 22 · 44) — yani
   üst `--bolum-nefes-sik`, alt `--bolum-nefes`. `.bolum` 74/74,
   `.bolum.sik` 32/32; ikisi de yanlış. İki token zaten kademeli olduğu
   için mobil dal AYRICA yazılmaz, kendiliğinden düşer. (slot-1 ④)
   ⚠ Sınıf dikişin ÜSTÜNE değil, aynı elemana verilir: `.dikis` yalnız
   köşe ve binme yazar, dolgu gövdenin kendi kalemidir. */
.bildirim-govde{ padding:var(--bolum-nefes-sik) 0 var(--bolum-nefes); }

.bildirim-kolonu{ max-width:880px; margin:0 auto; }

.gun-etiketi{
  display:flex; align-items:center; gap:var(--bosluk-12);
  font-size:var(--yazi-12); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-muhur); text-transform:uppercase;
  color:var(--metin-ikincil); margin:var(--bosluk-26) 0 var(--bosluk-12);
}
.gun-etiketi::after{ content:""; flex:1; height:1px; background:var(--cizgi); }
.bildirim-kolonu>.gun-etiketi:first-child{ margin-top:0; }

.bildirim-liste{
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-lg); overflow:hidden; box-shadow:var(--golge-sm);
}

.bildirim-satir{
  position:relative; display:flex; align-items:center; gap:var(--bosluk-15);
  width:100%; text-align:left; font-family:inherit;
  background:var(--kagit); border:none;
  padding:var(--bosluk-16) var(--bosluk-20); cursor:pointer;
  transition:background var(--sure-agir) var(--yumusama);
}
.bildirim-satir+.bildirim-satir{ border-top:var(--cizgi-1) solid var(--cizgi); }
.bildirim-satir:hover{ background:var(--zemin); }
.bildirim-satir.okunmadi{ background:var(--bildirim-yeni); }
.bildirim-satir.okunmadi:hover{ background:var(--bildirim-yeni-2); }

.bs-ikon{
  flex:none; width:46px; height:46px; border-radius:var(--yuvarlak-md);
  display:grid; place-items:center; font-size:var(--yazi-17);
  background:var(--aksan-yikama); color:var(--aksan);
}
.bs-ikon.sistem{ background:var(--zemin); color:var(--murekkep-yumusak); }
.bs-avatar{
  flex:none; width:46px; height:46px; border-radius:var(--yuvarlak-daire);
  background-size:cover; background-position:center;
}
.bs-metin{ flex:1; min-width:0; }
/* 🔴 B36 — kaynak da bunu KENDİSİ yazıyor ve gerekçesini ölçmüş:
   "768/390'da yaslama 'Bu hafta 4 gün üst' gibi satırlarda kelime araları
   açıp nehir üretiyordu." Seçici (0,1,1), kabuğun `p{…justify}`sini
   (0,0,1) yükleme sırasından bağımsız yener. */
.bs-metin p{
  font-size:var(--yazi-14); font-weight:var(--agirlik-govde);
  line-height:var(--satir-orta); color:var(--murekkep-yumusak);
  text-align:left; text-align-last:auto; hyphens:manual;
}
.bs-metin p b{ color:var(--murekkep); font-weight:var(--agirlik-kalin); }
.bs-meta{
  display:flex; align-items:center; gap:var(--bosluk-10);
  margin-top:var(--bosluk-4);
  font-size:var(--yazi-12); font-weight:var(--agirlik-govde); color:var(--metin-ikincil);
}
.bs-meta .tur{ display:inline-flex; align-items:center; gap:var(--bosluk-5); }
.bs-meta .tur i{ font-size:var(--yazi-10-5); color:var(--aksan); }
.bs-gorsel{
  flex:none; width:52px; height:52px; border-radius:var(--yuvarlak-md);
  background-size:cover; background-position:center;
}

/* Okunmadı beneği — halkası aksanın alfası, benek aksan. */
.bs-benek{
  flex:none; width:9px; height:9px; border-radius:var(--yuvarlak-daire);
  background:var(--aksan); box-shadow:0 0 0 3px var(--aksan-halka-2);
  opacity:0; transform:scale(.4);
  transition:var(--sure-yavas) var(--yumusama);
}
.bildirim-satir.okunmadi .bs-benek{ opacity:1; transform:scale(1); }

/* Satır aksiyonu (kaydet / kaydedildi) — kalem işlemlerinden AYRI. */
.bs-eylem{
  flex:none; font-size:var(--yazi-12); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi); border-radius:var(--yuvarlak-sm);
  padding:var(--bosluk-8) var(--bosluk-15);
  white-space:nowrap; cursor:pointer; font-family:inherit;
  transition:var(--sure) var(--yumusama);
}
.bs-eylem:hover{ border-color:var(--aksan); color:var(--aksan); background:var(--aksan-yikama); }
.bs-eylem.secili{ background:var(--aksan); border-color:var(--aksan); color:var(--kagit); }

/* ---- KALEM İŞLEMLERİ — satır başına dört ----------------------------
   Sessiz dururlar, satıra gelince ya da odaklanınca belirirler.
   🔴 DOKUNMATİKTE HER ZAMAN GÖRÜNÜR: `hover` yok, yoksa işlemler
   erişilemez kalırdı. Kaynağın kendi çözümü. */
.bs-islemler{
  flex:none; display:flex; align-items:center; gap:var(--bosluk-4);
  opacity:0; transition:opacity var(--sure-cabuk) var(--yumusama);
}
.bildirim-satir:hover .bs-islemler,
.bildirim-satir:focus-within .bs-islemler{ opacity:1; }
@media (hover:none),(pointer:coarse){ .bs-islemler{ opacity:1; } }
.bs-islem{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border:var(--cizgi-1) solid transparent; border-radius:var(--yuvarlak-sm);
  background:none; color:var(--metin-ikincil); font-size:var(--yazi-13);
  font-family:inherit; text-decoration:none; cursor:pointer;
  transition:var(--sure-cabuk) var(--yumusama);
}
.bs-islem:hover{ background:var(--kagit); border-color:var(--cizgi); color:var(--murekkep); }
.bs-islem:focus-visible{
  opacity:1; outline:var(--odak-kalinlik) solid var(--aksan-yikama);
  outline-offset:1px; border-color:var(--aksan);
}
.bs-islem.sil:hover{ color:var(--bildirim-sil); border-color:var(--bildirim-sil-cizgi); }
.bildirim-satir.okunmadi .bs-islem.okundu{ color:var(--aksan); }
/* Okunmuş satırda "okundu işaretle" İŞLEVSİZ — gizlenir, yer tutmaz. */
.bildirim-satir:not(.okunmadi) .bs-islem.okundu{ display:none; }

/* ---- GERİ ALMA ŞERİDİ ----------------------------------------------
   Silme ve tür kapatma geri alınabilir; hiçbir şey sessizce kaybolmaz. */
.geri-al{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--bosluk-14); flex-wrap:wrap;
  margin:0 0 var(--bosluk-14); padding:var(--bosluk-13) var(--bosluk-18);
  border-radius:var(--yuvarlak-md);
  background:var(--aksan-yikama); border:var(--cizgi-1) solid var(--aksan-cizgi);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-orta); color:var(--murekkep);
  text-align:left; text-align-last:auto;    /* B36 */
}
.geri-al button{
  font-family:inherit; font-size:var(--yazi-13); font-weight:var(--agirlik-kalin);
  color:var(--aksan-koyu); background:none; border:none; cursor:pointer;
  text-decoration:underline; padding:var(--bosluk-4) 2px;
}
.geri-al button:focus-visible{
  outline:var(--odak-kalinlik) solid var(--aksan-yikama); outline-offset:var(--odak-ofset);
}

/* §15'in ÜÇÜNCÜ kipi — ÇIPLAK: çizgi YOK, dolgu YOK, üst payı 14.
   Ölçüldü (`odemelerim` fatura bilgilerim paneli, `.ntf-foot`):
     FIT   border none · margin 14px 0 0 · padding 0
     kanon border-top solid · margin 16 · padding-top 14
   §15'in tanımı "kartın ÜST ÇİZGİYLE ayrılmış kapanış notu" — bu panelde
   kaynak o çizgiyi basmıyor ve notu doğrudan içeriğe bitişik bırakıyor.
   `.ortali` kipiyle aynı aile (o da çizgisiz), farkı hizası ve payı.
   ⚠ slot-3 bunu `s3-sira.mjs`te bir ARALIK hatası olarak bulmuştu
   (+3px) ve `kanon-fark.mjs` göremiyordu — çünkü çifti yoktu. slot-2
   çifti ekleyince bildirim farkı olarak göründü: aralık hatası bir
   SONUÇTU, kök buydu. */
/* 🔴 SINIF MARKUP'TA VARDI, KURALI KANONDA HİÇ YAZILMAMIŞTI.
   `deneme/odemelerim.html` `.alt-not cizgisiz` basıyor ve `cizgisiz`
   diye bir kural yok — yani markup olmayan bir kuralı çağırıyor ve
   çizgi sessizce kalıyordu. Bu, "ölü varyant"ın (kural var, markup
   çağırmıyor) TAM AYNADAKİ hâli: markup çağırıyor, kural yok.
   İkisi de aynı denetimle yakalanır: markup'ın kullandığı sınıf
   listesi ile kanonun tanımladığı sınıf listesi yan yana konmalı. */
.alt-not.cizgisiz{
  margin-top:var(--bosluk-14); padding-top:0; border-top:0;
}

/* §15 `.alt-not`un ORTALI kipi — çizgisiz, ortalı, üst payı 24.
   Kaynak `.nt-foot`: üst çizgi YOK, `padding-top` YOK (slot-1 Ç3). */
/* Bandın altındaki tip şeridi kabı — alt payı bölüm nefesinin sıkı adımı. */
.bildirim-suzgec{ margin:0 auto var(--bolum-nefes-sik); }

.alt-not.ortali{
  justify-content:center; align-items:center;
  border-top:none; padding-top:0; margin-top:var(--bosluk-24);
  font-size:var(--yazi-12-5);
}
/* Ortalı kipte ikon satırla aynı hizada — §15'in `margin-top:3px` ve
   `flex:none`u burada geçerli değil (kaynak ikisini de bildirmiyor). */
.alt-not.ortali i{ margin-top:0; flex:0 1 auto; }

@media (max-width:640px){
  .bildirim-satir{ padding:var(--bosluk-13) var(--bosluk-14); gap:var(--bosluk-11); flex-wrap:wrap; }
  .bs-ikon,.bs-avatar{ width:40px; height:40px; font-size:var(--yazi-15); }
  .bs-gorsel{ width:42px; height:42px; }
  .bs-metin p{ font-size:var(--yazi-13); }
  /* Kaynağın `:has()` kapsamı — yukarıdaki şerhte anlatılan kusuru
     BİLEREK olduğu gibi taşıyoruz. */
  .bildirim-satir:has(.bs-eylem) .bs-metin{ flex:1 1 calc(100% - 51px); }
  .bs-eylem{ order:5; margin-left:51px; }
  .bs-benek{ order:6; }
  .bs-islemler{ gap:2px; }
  .bs-islem{ width:38px; height:38px; }
}


/* =====================================================================
   55 · KADEME KARTI — kaynak `.pro-*` (paketlerim-v1 · `pro-v1.html` kiti)
   ---------------------------------------------------------------------
   Fiyat/kademe karşılaştırma kartı. §49 `.paket-karti`den AYRI: o
   ÜYENİN MEVCUT paketini gösteren yatay bir kart, bu SATIN ALINABİLİR
   kademeleri yan yana dizen dikey bir kart. Ölçüm: slot-3, @1440.

   🔴 `align-items:stretch` + `.kademe-ozellikler{flex:1}` BİR BÜTÜNDÜR.
   Kaynağın kendi şerhi ölçümle gerekçelendiriyor: "`start` iken üç kart
   üç farklı boydaydı (Ücretsiz 15, Pro 23, Pro Max 4 kalem) ve düğmeler
   üç ayrı yükseklikte kalıyordu — fiyat kartlarında karşılaştırmayı
   bozan kusur." `flex:1` boşluğu yutar, düğmeler tek çizgide kalır.
   İkisinden biri düşerse kusur geri gelir.
   ===================================================================== */

.kademe-izgara{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--bosluk-18); align-items:stretch; margin-top:var(--bosluk-26);
}
/* §55'in ONUNCU parçası — "ve N özellik daha" bağlantısı.
   Kaynak `.pro-daha` (`pk-kademeler`): görünür özellik listesi KIRPILDIĞINDA
   kartın altına düşen, karşılaştırma sekmesine giden bağlantı.
   Ölçüm (slot-3'ün panel denetimi + lead'in `kalem-olc.mjs` koşusu):
     inline-flex · gap 7 · min-height 44 · 12.5px/700 · --aksan-koyu
     ikon 10px · hover'da alt çizgi, ofset 3
   🔴 BUGÜN GÖRÜNMÜYOR VE BU DOĞRU: bağlantı VERİYE bağlı. Kaynak görünür
   listeyi 8 kalemde kırpıp kalanı buraya taşıyor; Diyet'in üç kademesinin
   listeleri 6 · 8 · 0 kalem, yani hiçbiri kırpılmıyor ve "ve 0 özellik
   daha" demek anlamsız olurdu.
   ⚠ Beyar bu bağlantının EKSİK olduğunu gözle bildirdi (2026-09-02) ve
   haklıydı — ama kökü yapı değil VERİ. Kip yine de kanona yazılır: Diyet'in
   listesi sekiz kalemi geçtiği gün bağlantı kendiliğinden doğar. Kuralı
   yazmamak, o günü sessiz bir eksiğe çevirirdi.
   🔴 İLK GEREKÇE ("eşik ≤8, bileşen kanona girmedi") YANLIŞTI — eşik bir
   desenin PAYLAŞILAN BİLEŞEN olup olmayacağını belirler, bir ekranın kendi
   kalemini basıp basmayacağını değil. Ama sonraki ölçüm daha iyisini
   getirdi ve BENİM "satırı bas" talimatımı da geri aldı:
     · kaynağın kuralı KOŞULLU, yapısal değil — `KART_LIMIT=8` ve
       `if (gizli > 0)` (`fit-paket.js:341-361`, 8 satırlık şerhiyle);
     · 🔴 KAYNAĞIN KENDİ ÜÇÜNCÜ KARTINDA DA BU SATIR YOK (5 açık kalem,
       eşiğin altında). Yani "her kartta iki açılır satır" diye bir yapı
       kuralı hiç yok.
     · Diyet'in üç kademesinde de gizli = 0.
   "ve 0 özellik daha" basmak satırı UYDURMAK ve gidecek kalemi olmayan
   ÖLÜ bir bağlantı doğurmak olurdu.
   ⚠ VE BU KALEM BİR KARARA BAĞLI: Diyet'in sayılarının düşük olmasının
   sebebi kademelerin AYRIK modellenmesi (her biri tam 14 kalem: 6+8 ·
   8+6 · 0+14); kaynak KÜMÜLATİF (üst kademe alttakinin tamamını içerir).
   Beyar kademeleri kümülatif yaparsa Pro 14 açık kaleme çıkar, gizli 6
   olur ve satır KENDİLİĞİNDEN doğar. Kural o gün için burada duruyor. */
.kademe-daha{
  display:inline-flex; align-items:center; gap:var(--bosluk-7);
  min-height:44px;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin);
  color:var(--aksan-koyu); text-decoration:none;
}
.kademe-daha i{ font-size:var(--yazi-10); }
.kademe-daha:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:900px){ .kademe-izgara{ grid-template-columns:1fr; gap:var(--bosluk-26); } }

.kademe-karti{
  position:relative;                      /* bayrak buna asılır */
  display:flex; flex-direction:column;
  padding:var(--bosluk-22) var(--bosluk-20);
  border-radius:var(--yuvarlak-lg);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
  transition:var(--sure-yavas) var(--yumusama);
}
.kademe-karti:hover{ transform:translateY(-5px); box-shadow:var(--golge-md); }
.kademe-karti.one-cikan{ border-color:var(--aksan-cizgi-4); box-shadow:var(--golge-md); }
.kademe-karti.aktif{ border-color:var(--aksan); box-shadow:var(--golge-md); }
.kademe-karti.notr{ background:var(--kademe-notr-zemin); border-color:var(--kademe-notr-cizgi); }
.kademe-karti.notr:hover{ transform:translateY(-5px); box-shadow:var(--golge-sm); }
/* "ve N özellik daha" — TAŞMA GÖSTERGESİ, kart süsü değil.
   Kaynağın kuralı: kart en fazla 8 kalem gösterir; kesilen kalem
   kaybolmaz, bu satır karşılaştırma tablosuna götürür ve tablo aynı
   veriden basılır (`fit-paket.js:341`). Satır yalnız gizli kalem
   VARKEN doğar — kaynağın kendi en üst kademe kartında da yoktur.
   Yeri: özellik listesi ile "kapalı" akordeonu ARASINDA; ikisi de kendi
   payını taşıdığı için bu satırın kendi payı yok.
   `min-height:44` kaynakta bildirili — §29 md.15 sapması gerekmiyor. */
.kademe-daha{
  display:inline-flex; align-items:center; gap:var(--bosluk-7);
  min-height:44px; padding:0;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-govde); color:var(--aksan-koyu);
  text-decoration:none;
}
.kademe-daha i{ font-size:var(--yazi-10); }
.kademe-daha:hover{ text-decoration:underline; text-underline-offset:3px; }

.kademe-karti .dugme{ width:100%; justify-content:center; margin-top:var(--bosluk-4); }
.kademe-karti .dugme[disabled]{ opacity:.45; pointer-events:none; }

/* Kartın üstüne binen bayrak — "en çok tercih edilen" / "şu anki kademen". */
.kademe-bayrak{
  position:absolute; top:0; right:var(--bosluk-18); transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:var(--bosluk-6);
  padding:var(--bosluk-6) var(--bosluk-12);
  border-radius:var(--yuvarlak-sm);
  font-size:var(--yazi-10-5); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-versal-2); text-transform:uppercase; white-space:nowrap;
  background:var(--aksan); color:var(--kagit);
  box-shadow:0 6px 16px var(--aksan-golge);
}
.kademe-bayrak.simdi{ background:var(--aksan-koyu-2); }
@media (max-width:900px){ .kademe-bayrak{ right:auto; left:var(--bosluk-20); } }

.kademe-bas{ display:flex; align-items:center; gap:var(--bosluk-11); margin-bottom:var(--bosluk-6); }
.kademe-bas i{
  flex:none; width:44px; height:44px; border-radius:var(--yuvarlak-md);
  display:grid; place-items:center; font-size:var(--yazi-18);
  background:var(--aksan-yikama-2); color:var(--aksan-koyu);
}
.kademe-karti.notr .kademe-bas i{ background:var(--kademe-notr-cip); color:var(--kademe-notr-cip-metin); }
.kademe-karti.ust  .kademe-bas i{ background:var(--kademe-altin-cip); color:var(--kademe-altin-cip-metin); }
.kademe-bas b{ font-size:var(--yazi-21); letter-spacing:var(--aralik-sik); color:var(--murekkep); }
/* Kademe özeti — kartın başlığı altındaki tek cümle.
   🔴 B36'nın "kaynak bile önlem almış" örneği: `paketlerim-v1.html:97`
   `text-align:left; text-align-last:auto` yazıyor, çünkü kabuğun
   `p{text-align:justify}`i doğrudan vuruyor. */
.kademe-ozet{
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); color:var(--yer-tutucu);
  margin:var(--bosluk-4) 0 0;
  text-align:left; text-align-last:auto;
}

.kademe-fiyat{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--bosluk-6);
  padding:var(--bosluk-16) 0; margin-top:var(--bosluk-16);
  border-top:var(--cizgi-1) solid var(--cizgi);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
.kademe-fiyat b{ font-size:var(--yazi-30); letter-spacing:var(--aralik-baslik); color:var(--murekkep); }
.kademe-fiyat span{ font-size:var(--yazi-13); font-weight:var(--agirlik-govde); color:var(--yer-tutucu); }

.kademe-ozellikler{
  list-style:none; display:flex; flex-direction:column; gap:var(--bosluk-10);
  padding:var(--bosluk-18) 0; margin:0; flex:1;      /* 🔴 flex:1 — yukarıdaki şerh */
}
.kademe-ozellikler li{
  display:flex; gap:var(--bosluk-9);
  font-size:var(--yazi-13); font-weight:var(--agirlik-govde);
  color:var(--murekkep-yumusak); line-height:var(--satir-sik);
  text-align:left; text-align-last:auto;    /* B36 — kaynak açıkça yazıyor */
}
.kademe-ozellikler li i{ flex:none; margin-top:3px; font-size:var(--yazi-11-5); color:var(--aksan-koyu); }
.kademe-ozellikler li b{ font-weight:var(--agirlik-kalin); color:var(--murekkep); }
.kademe-ozellikler li.nitelik i{ color:var(--yer-tutucu); }
/* 🔴 KAPALI ÖZELLİK — kaynak #8e8e8e (3.23:1) ve #bdbdbd (2.00:1) yazıyor,
   ikisi de AA altında. BEYAR KARARI 2026-09-01 (§29 md.17): `--yer-tutucu`
   (#6f6f6f · 4.77:1). Ekran okuyucuda kayıp zaten yoktu (`.yalniz-okuyucu`
   "var/yok" basıyor); kayıp yalnız görseldi. */
.kademe-ozellikler li.yok,
.kademe-ozellikler li.yok i{ color:var(--yer-tutucu); }

/* Çip şeridinin altındaki sayı satırı — kaynakta inline `margin-top:12px`
   ama KONUMA BAĞLI ve tekrarlanabilir (kartın kendi ritmi), tek örneklik
   bir süs değil. `.hs-warn`ın 22'sinden bu yüzden ayrı davranıldı. */
.paket-ozellikler+.durum-satir{ margin-top:var(--bosluk-12); }

.kademe-daha{
  display:inline-flex; align-items:center; gap:var(--bosluk-7); min-height:44px;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin); color:var(--aksan-koyu);
}
.kademe-daha i{ font-size:var(--yazi-10); }
.kademe-daha:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---- KAPALI ÖZELLİK DÖKÜMÜ -----------------------------------------
   🔴 §21 AKORDEON DEĞİL. Akordeonun "tek açık kalem" sözleşmesi burada
   GEÇERSİZ: üç kartın dökümü BAĞIMSIZ açılır (slot-3 davranış sınamasında
   doğruladı). Ayrı bileşen ki kural karışmasın.
   ⚠ `\f078` glifi MARKUP'TA GEÇMEZ, yalnız CSS `content`inde — glif
   listesi üreticileri `class="fa-*"` tarar ve bu glifi KAÇIRIR, ok boş
   çizilir. Üreticiye elle eklenmeli (`destek-taleplerim` turundaki
   "9 ikon sessizce boş" hatasının aynısı). */
.kademe-kapali{ border-top:var(--cizgi-1) solid var(--cizgi); padding-top:var(--bosluk-4); }
.kademe-kapali summary{
  list-style:none; cursor:pointer; min-height:44px;
  display:flex; align-items:center; gap:var(--bosluk-8);
  padding:var(--bosluk-10) 0;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin); color:var(--yer-tutucu);
}
.kademe-kapali summary::-webkit-details-marker{ display:none; }
.kademe-kapali summary::before{
  content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:var(--yazi-10);
  transition:transform var(--sure) var(--yumusama);
}
.kademe-kapali[open] summary::before{ transform:rotate(180deg); }
.kademe-kapali summary:hover{ color:var(--aksan-koyu); }
.kademe-kapali summary:focus-visible{
  outline:var(--odak-kalinlik) solid var(--aksan-yikama);
  outline-offset:var(--odak-ofset); border-radius:var(--yuvarlak-sm);
}
.kademe-kapali .kademe-ozellikler{ padding-top:var(--bosluk-4); }


/* =====================================================================
   56 · KARŞILAŞTIRMA TABLOSU — kaynak `.cmp-*`
   ---------------------------------------------------------------------
   §4 `.tablo`nun varyantı ama ÜÇ yerde tabandan ayrılıyor ve üçü de
   ölçüldü: hücre dolgusu 12/16 (taban 13/16) · başlık 12/700 DÜZ
   (taban 11/800 VERSAL) · kap kendi kartı (taban çerçevesiz).

   🔴 SÖZLEŞME — RENK TEK SİNYAL DEĞİL: "var/yok" hücresi ikonun yanına
   `<span class="yalniz-okuyucu">var|yok</span>` basar. Kaynak da böyle
   yapıyor; §14'ün "ikon zorunlu" kuralının tablo karşılığı (WCAG 1.4.1).
   ===================================================================== */

.tablo-kap.cerceveli{
  border-radius:var(--yuvarlak-lg); overflow-x:auto;
  border:var(--cizgi-1) solid var(--cizgi); box-shadow:var(--golge-sm);
  background:var(--kagit); margin-top:var(--bosluk-26);
}
.tablo-kap.cerceveli:focus-visible{
  outline:var(--odak-kalinlik) solid var(--aksan); outline-offset:var(--odak-ofset);
}
.tablo.karsilastirma{ min-width:640px; background:var(--kagit); }
.tablo.karsilastirma th,
.tablo.karsilastirma td{ padding:var(--bosluk-12) var(--bosluk-16); font-size:var(--yazi-13-5); }
/* Taban `thead th` VERSAL ve 11/800; bu tablo DÜZ ve 12/700 — ezilir. */
.tablo.karsilastirma thead th{
  font-size:var(--yazi-12); font-weight:var(--agirlik-kalin);
  letter-spacing:normal; text-transform:none;
  color:var(--murekkep-yumusak); background:var(--tablo-bas-zemin);
  text-align:center; vertical-align:bottom;
}
.tablo.karsilastirma thead th:first-child{ text-align:left; }
.tablo.karsilastirma thead th.one-cikan{ color:var(--aksan-koyu); }
.kademe-ad{
  display:flex; align-items:center; justify-content:center; gap:var(--bosluk-7);
  font-size:var(--yazi-14); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-sik); color:var(--murekkep);
}
.tablo.karsilastirma thead th:first-child .kademe-ad{ justify-content:flex-start; }
.tablo.karsilastirma thead th.one-cikan .kademe-ad{ color:var(--aksan-koyu); }
/* 🔴 `display:block` ŞART — yoksa "ÜCRETSİZ₺0 / AY" tek satırda birleşiyor
   (slot-3, ekran görüntüsünde görüldü). */
.kademe-fiyat-not{
  display:block; margin-top:var(--bosluk-5);
  font-size:var(--yazi-12); font-weight:var(--agirlik-orta); color:var(--yer-tutucu);
}
.tablo.karsilastirma tbody td{
  text-align:center; font-weight:var(--agirlik-orta); color:var(--murekkep-yumusak);
}
.tablo.karsilastirma tbody th[scope="row"]{
  text-align:left; font-weight:var(--agirlik-govde); color:var(--murekkep);
}
.tablo.karsilastirma tbody tr:last-child td{ border-bottom:0; }
.tablo.karsilastirma td.one-cikan{ background:var(--aksan-yikama-5); }
.tablo.karsilastirma .var{ color:var(--aksan-koyu); }
.tablo.karsilastirma .yok{ color:var(--yer-tutucu); }   /* §29 md.17 — kontrast */
/* 🔴 `.tablo.karsilastirma` KAPSAMI ŞART. Çıplak `.tablo-grup th` (0,1,1)
   taban `.tablo.karsilastirma th` (0,2,1) kuralının içine düşüyor ve
   ÖLÜYOR. Bu, bu turun ÜÇÜNCÜ aynı hatası (`.kart-govde.ustsuz` ·
   `.yalniz-yan` · şimdi bu): bir varyant, kendisinden daha özgül bir
   TABAN kuralının kapsamına girdiğinde sessizce düşüyor.
   ⚠ Yeni varyant yazarken sorulacak soru: "bu kalem hangi kap kuralının
   İÇİNDE yaşıyor ve o kural benden daha mı özgül?" */
.tablo-grup th,
.tablo.karsilastirma .tablo-grup th{
  display:table-cell; background:var(--zemin); text-align:left;
  padding:var(--bosluk-11) var(--bosluk-16);
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-versal-3); text-transform:uppercase; color:var(--murekkep);
}
.tablo-grup th i,
.tablo.karsilastirma .tablo-grup th i{ color:var(--aksan-koyu); margin-right:var(--bosluk-8); font-size:var(--yazi-11); }

.tablo-ipucu{
  display:flex; align-items:center; gap:var(--bosluk-8); margin-top:var(--bosluk-14);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta); color:var(--murekkep-yumusak);
  text-align:left; text-align-last:auto;    /* B36 */
}
.tablo-ipucu i{ font-size:var(--yazi-11); color:var(--aksan-koyu); }


/* =====================================================================
   57 · AYRIM KUTUSU — kaynak `.pk-ayri`
   ---------------------------------------------------------------------
   "Bu iki şey karışmasın" kutusu. §16 `.bilgi-notu`ndan AYRI: o aksan
   yıkamasında yaşar, bu KREM zeminde — kaynak ikisini bilerek ayırıyor.
   `--krem-2` (#F7F1E6) kanonda ZATEN VAR ve ölçülenle birebir.
   ===================================================================== */

.ayrim-kutusu{
  display:flex; align-items:flex-start; gap:var(--bosluk-14);
  padding:var(--bosluk-18) var(--bosluk-20); margin-top:var(--bosluk-22);
  border-radius:var(--yuvarlak-lg);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--krem-2);
}
.ayrim-kutusu>i{
  flex:none; width:38px; height:38px; border-radius:var(--yuvarlak-md);
  display:grid; place-items:center; font-size:var(--yazi-15);
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi); color:var(--aksan-koyu);
}
.ayrim-kutusu b{
  display:block; font-size:var(--yazi-14-5); font-weight:var(--agirlik-kalin);
  margin-bottom:var(--bosluk-5);
}
.ayrim-kutusu p{
  margin:0; font-size:var(--yazi-13); font-weight:var(--agirlik-govde);
  line-height:var(--satir-genis); color:var(--murekkep-yumusak);
  text-align:left; text-align-last:auto;    /* B36 */
}
.ayrim-kutusu p.ikinci{ margin-top:var(--bosluk-8); }
.ayrim-kutusu p a{ color:var(--aksan-koyu); font-weight:var(--agirlik-kalin); }
.ayrim-kutusu p a:hover{ text-decoration:underline; text-underline-offset:2px; }
@media (max-width:640px){ .ayrim-kutusu{ flex-direction:column; gap:var(--bosluk-10); } }


/* =====================================================================
   51 · KAPAK VE AVATAR DÜZENLEME DÜĞMELERİ — kaynak `.fp-kapak-edit` / `.fp-ava-edit`
   ---------------------------------------------------------------------
   §25'in DÜZENLENEBİLİR kipinde doğarlar (`.fp-profil.is-editable`).
   Kaplar kanonda hazır: `.kapak{position:relative}` ✓ ·
   `.kimlik-avatar{position:relative}` ✓ — eksik olan yalnız iki düğme.

   🔴 `position:absolute` ŞART. `.kimlik-avatar.harf` `display:grid`
   olduğu için düğme akışta kalırsa ızgara hücresine düşüyor ve baş harfi
   ittiriyor (slot-2 ölçümü).
   ===================================================================== */

.kapak-duzenle{
  position:absolute; top:var(--bosluk-20); right:var(--bosluk-20); z-index:var(--kat-icerik);
  display:flex; align-items:center; gap:var(--bosluk-8);
  padding:var(--bosluk-9) var(--bosluk-16); min-height:44px;
  border:0; border-radius:var(--yuvarlak-hap);
  font-family:inherit; font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin);
  background:var(--kapak-duzenle-zemin); color:var(--murekkep);
  cursor:pointer;
}
/* 🔴 `position:relative` YALNIZ DÜZENLENEBİLİR KİPTE. Kaynak da öyle
   yapıyor (`fit-shell.css:4484` — `.fp-profil.is-editable` altında).
   İlk yazımda koşulsuz verilmişti ve ölçüm yakaladı: destek ekranlarının
   avatarı `static` olmalı, `relative` değil. Düzenleme düğmesi bu kap
   olmadan KİMLİK KARTININ köşesine düşüyor (slot-2 gözle buldu). */
/* İki seçici birden: markup `.duzenlenebilir` taşıyorsa da, yalnız düğmeyi
   basıyorsa da çalışır. `:has()` markup koordinasyonu gerektirmiyor —
   düğme zaten YALNIZ düzenlenebilir kipte basılıyor, yani koşul aynı. */
.duzenlenebilir .kimlik-avatar,
.kimlik-avatar:has(.kimlik-avatar-duzenle){ position:relative; }

/* MD5 · §51'in DAR EKRAN dalı — kanonda hiç yoktu. Kapak düzenleme
   düğmesi @390'da küçülüyor; üçü de ölçüldü (slot-2, render edilmiş DOM):
     yazı    12.5 → 11        dolgu  9/16 → 8/13        gap  8 → 6
   🔴 Blok §51'in tanımından SONRA duruyor — `@media` özgüllük artırmaz,
   sıra belirler (bu dalganın en pahalı dersi). */
@media (max-width:640px){
  .kapak-duzenle{
    font-size:var(--yazi-11); gap:var(--bosluk-6);
    padding:var(--bosluk-8) var(--bosluk-13);
    /* Düğme kapağın köşesine YAKLAŞIR — 20 → 12 (ölçüldü). */
    top:var(--bosluk-12); right:var(--bosluk-12);
  }
}
.kimlik-avatar-duzenle{
  position:absolute; right:-3px; bottom:-3px; z-index:var(--kat-avatar-dugme);
  width:34px; height:34px; border-radius:var(--yuvarlak-daire);
  border:var(--cizgi-3) solid var(--kagit);
  background:var(--aksan-koyu); color:var(--kagit);
  font-size:var(--yazi-13); display:grid; place-items:center;
  box-shadow:var(--golge-md); cursor:pointer;
}


/* =====================================================================
   52 · ÜLKE KODLU TELEFON — kaynak `.fk-tel` / `.fk-cc*`
   ---------------------------------------------------------------------
   §3 form kitinin varyantı. HANDOFF §ADAY listesindeki `.fk-tel` budur.
   Açılır liste JS'in elinde; kanon kapalı hâli ve seçici kutusunu yazar.
   ===================================================================== */

.alan-telefon{ position:relative; }
/* 🔴 SOL DOLGU ŞART — girdi metni ülke düğmesinin ALTINDA kalıyordu
   (slot-2 gözle buldu, ölçüm görmedi). 104 = 96 (düğme) + 8. */
.alan-telefon .alan-girdi{ padding-left:104px; }
.alan-ulke{
  position:absolute; left:var(--cizgi-1); top:0; width:96px; height:45px;
  z-index:2;
  /* Düğme UA varsayılanında kalıyordu: siyah metin + 2px kenar (slot-2 M1). */
  border:0; border-right:var(--cizgi-1) solid var(--cizgi);
  color:var(--murekkep); font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:var(--bosluk-6);
  background:var(--zemin);
  border-right:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md) 0 0 var(--yuvarlak-md);
  font-size:var(--yazi-13); font-weight:var(--agirlik-kalin);
  cursor:pointer;
}
.alan-ulke-bayrak{ font-size:var(--yazi-16); line-height:16px; }
.alan-ulke-kod{ font-size:var(--yazi-13); font-weight:var(--agirlik-kalin); }


/* =====================================================================
   53 · TARİH ALANI — kaynak `.fk-tar` / `.fk-tar-btn`
   ---------------------------------------------------------------------
   §3'ün varyantı: girdi + sağ kenara gömülü takvim düğmesi.
   Açılır takvim JS'in elinde (§21 akordeon gibi sözleşme).
   ===================================================================== */

.alan-tarih{ position:relative; }
.alan-tarih .alan-girdi{ padding-right:52px; }
.alan-tarih-dugme{
  position:absolute; right:0; top:0; bottom:0; width:46px; z-index:var(--kat-icerik);
  background:transparent; border:0;
  border-radius:0 var(--yuvarlak-md) var(--yuvarlak-md) 0;
  color:var(--murekkep-yumusak); font-size:var(--yazi-15);
  display:grid; place-items:center; cursor:pointer;
}


/* ---- ÜLKE KATMANI (§52'nin açılır yüzeyi) --------------------------
   `hidden` doğar, JS açar. Normal ölçüm onu HİÇ GÖRMÜYOR — slot-2 ayrı
   bir araçla (`s2-olc-katman.mjs`) açtırıp ölçtü, 132 fark çıktı. */
.alan-ulke-katman{
  position:absolute; top:calc(100% + var(--bosluk-6)); left:0;
  width:min(360px,100%); z-index:60;
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md); box-shadow:var(--golge-lg);
  overflow:hidden;
}
.alan-ulke-arama{
  display:flex; align-items:center; gap:var(--bosluk-9);
  padding:var(--bosluk-10) var(--bosluk-12);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
/* UA girdisi 2px kenarlık + beyaz zemin basıyordu — kutu kabın kendisi. */
.alan-ulke-arama input{
  flex:1; border:0; background:transparent; padding:var(--bosluk-4) 0;
  font-family:inherit; font-size:var(--yazi-14); font-weight:var(--agirlik-govde);
  color:var(--murekkep); outline:none;
}
/* 🔴 KALEMİN KURALI HİÇ YAZILMAMIŞTI. Kit'in kabı, arama satırı ve boş
   durumu vardı; `li` ve üç span'i yoktu — liste `list-item` doğuyor ve
   bayrak · ad · kod yan yana yapışıyordu ("🇩🇪Almanya+49").
   Görünmemesinin sebebi listenin BOŞ olmasıydı: gövde tek kalem basıyordu
   ve şerhi *"kaynak listeyi ayrı bir modülden sürüyor, o dosya çevrimdışı,
   VERİ eksik"* diyordu. 🔴 O şerh DOĞRULANMADAN yazılmış: modül çevrimdışı
   olabilir ama liste kaynağın RENDER EDİLMİŞ DOM'unda hazır duruyor
   (`hesabim-profil.html` → 199 kalem). "CSS okuma, DOM'u ölç" kuralının
   markup karşılığı: modülü arama, basılmış hâli al. (slot-2)
   Ölçüm 1440 ve 390'da birebir — tek mobil dal hover'da. */
.alan-ulke-liste{ padding:var(--bosluk-6); list-style:none; overflow-y:auto; max-height:264px; }
.alan-ulke-liste li{
  display:flex; align-items:center; gap:var(--bosluk-11);
  padding:0 var(--bosluk-10); min-height:44px;
  border-radius:var(--yuvarlak-sm);
  font-size:var(--yazi-14); font-weight:var(--agirlik-orta);
  color:var(--murekkep); cursor:pointer;
}
.alan-ulke-liste li .bayrak{ flex:none; font-size:var(--yazi-17); line-height:1; }
.alan-ulke-liste li .ad{
  /* `0%` — `0` DEĞİL. `flex-basis:0` uzunluğa, `0%` yüzdeye çözülür ve
     hesaplanmış değer ayrışır (`0px` ↔ `0%`); çizim aynı ama ölçüm
     görüyor. Kaynağın yazımı `0%`. Eşdeğer yazım diye geçiştirmek
     yerine kaynağınkini almak ucuz. */
  flex:1 1 0%; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.alan-ulke-liste li .kod{ flex:none; font-size:var(--yazi-13); color:var(--aksan-koyu); }
.alan-ulke-liste li.secili{ background:var(--aksan-yikama); font-weight:var(--agirlik-kalin); }
/* 🔴 MOBİL DALI ÖLÇÜLDÜ: 390'da hover ZEMİN BIRAKMIYOR. Kaynak bunu
   `@media (hover:hover)` ile ayırıyor — dokunmatikte "yapışan hover"
   olmasın diye. Kanonun ilk `@media (hover:none)` deseninin tersi. */
@media (hover:hover){ .alan-ulke-liste li:hover{ background:var(--aksan-yikama); } }
.alan-ulke-bos{
  padding:var(--bosluk-18) var(--bosluk-14);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); color:var(--murekkep-yumusak);
  text-align:center; text-align-last:auto;    /* B36 — yaslanıyordu */
}

/* ---- TAKVİM KATMANI (§53'ün açılır yüzeyi) ------------------------- */
.alan-tarih-katman{
  position:absolute; top:calc(100% + var(--bosluk-6)); left:0;
  width:min(320px,100%); z-index:60;
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-md); box-shadow:var(--golge-lg);
  overflow:hidden;
}
@media (max-width:520px){ .alan-tarih-katman{ width:100%; } }
.alan-tarih-bas{
  display:flex; align-items:center; gap:var(--bosluk-8); padding:var(--bosluk-10);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
.alan-tarih-ok{
  width:44px; height:44px; flex:none;
  border-radius:var(--yuvarlak-sm); border:var(--cizgi-1) solid var(--cizgi);
  background:var(--kagit); color:var(--murekkep); font-size:var(--yazi-12);
  display:grid; place-items:center; cursor:pointer;
}
.alan-tarih-ok:disabled{ opacity:.4; }
.alan-tarih-secim{
  flex:1; min-width:0; min-height:44px;
  padding:var(--bosluk-10) var(--bosluk-30) var(--bosluk-10) var(--bosluk-10);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-kalin);
}
.alan-tarih-secim.yil{ flex:0 0 92px; }
.alan-tarih-gunler{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  padding:var(--bosluk-10) var(--bosluk-10) 0;
}
.alan-tarih-gunler>span{
  display:block; text-align:center;
  font-size:var(--yazi-11); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-vurgu); color:var(--murekkep-yumusak);
}
.alan-tarih-izgara{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  padding:var(--bosluk-6) var(--bosluk-10) var(--bosluk-10);
}
.alan-tarih-izgara>button{
  aspect-ratio:1; min-height:38px; border:0; background:transparent;
  border-radius:var(--yuvarlak-sm);
  font-family:inherit; font-size:var(--yazi-13-5); font-weight:var(--agirlik-orta);
  color:var(--murekkep); cursor:pointer;
}
.alan-tarih-izgara>button:disabled{ color:var(--metin-pasif); }
.alan-tarih-izgara>button[aria-selected="true"]{
  background:var(--aksan); color:var(--kagit); font-weight:var(--agirlik-ekstra);
}
.alan-tarih-izgara>button.bugun{ box-shadow:inset 0 0 0 1px var(--aksan-cizgi); }
.alan-tarih-izgara>span{ aspect-ratio:1; }   /* ay başındaki boş hücreler */
.alan-tarih-ayak{
  display:flex; align-items:center; gap:var(--bosluk-10); flex-wrap:wrap;
  padding:0 var(--bosluk-10) var(--bosluk-10);
}
.alan-tarih-ayak>p{
  flex:1; min-width:0; margin:0;
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-sik); color:var(--murekkep-yumusak);
  text-align:left; text-align-last:auto;    /* B36 — yaslanıyordu */
}
.alan-tarih-temizle{
  flex:none; min-height:44px; padding:var(--bosluk-10) var(--bosluk-14);
  border:var(--cizgi-1) solid var(--cizgi); border-radius:var(--yuvarlak-sm);
  background:var(--kagit); font-family:inherit;
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); cursor:pointer;
}


/* =====================================================================
   54 · MODAL İÇ PARÇALARI — iki adımlı doğrulama · fotoğraf yükleyici
   ---------------------------------------------------------------------
   ⚠ MODAL KABUĞU KANONDA DEĞİL. `.fb-*` kiti markanın kendi kabuğundan
   geliyor (HANDOFF §12'nin "54 süs kuralı" kalemi); burada YALNIZ iç
   parçalar var. Ölçüm: slot-2, render edilmiş DOM.

   🔴 `[hidden]` MODALDA ÇALIŞMAZ: kabuğun `.fb-modal`ı `display:grid` +
   `visibility/opacity` geçişiyle açılıp kapanıyor, yani `[hidden]` (0,0,1)
   onu yenemiyor — açma/kapama `.show` sınıfıyla yapılır. B37'nin modal
   hâli (slot-3 ölçtü, slot-2 doğruladı).
   ===================================================================== */

/* ---- adım şeridi ---- */
.adim-serit{
  display:flex; align-items:center; gap:var(--bosluk-8);
  margin-bottom:var(--bosluk-20); list-style:none; padding:0;
}
.adim-serit li{
  flex:1; display:flex; align-items:center; gap:var(--bosluk-8);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-govde); padding-bottom:var(--bosluk-10);
  border-bottom:var(--cizgi-2) solid var(--cizgi); color:var(--metin-ikincil);
}
.adim-serit li.acik{ color:var(--aksan-koyu); border-bottom-color:var(--aksan); }
.adim-serit li span{
  width:22px; height:22px; border-radius:var(--yuvarlak-daire);
  display:grid; place-items:center;
  font-size:var(--yazi-11-5); font-weight:var(--agirlik-kalin);
  background:var(--zemin); color:var(--metin-ikincil);
}
.adim-serit li.acik span{ background:var(--aksan-yikama-2); color:var(--aksan-koyu); }
.adim-serit li.bitti span{ background:var(--aksan); color:var(--kagit); }

/* Seçim satırı — §9 `.ayar-satir`ın kipi (kaynak `.tfa-pick` = `.set-row`
   + `cursor:pointer`, ölçüldü: 17px 2px · gap 16 · birebir aynı).
   🔴 `accent-color` radyonun TEK renk kaynağı; olmadan tarayıcının MAVİ
   varsayılanı çiziliyor (slot-2 M8, ekran görüntüsünde görüldü). */
.secim-satir{ cursor:pointer; }
.secim-radyo{ width:20px; height:20px; flex:none; accent-color:var(--aksan); }

/* ---- sır kutusu · kod alanı · kurtarma kodları ---- */
.sir-kutu{
  display:flex; flex-direction:column; gap:var(--bosluk-7);
  margin-bottom:var(--bosluk-18); padding:var(--bosluk-16);
  border-radius:var(--yuvarlak-md);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--zemin);
}
.sir-kutu code{
  font-family:var(--yuz-tek);
  font-size:var(--yazi-16); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-sir); color:var(--murekkep);
}
.kod-alani{ display:flex; gap:var(--bosluk-8); margin-bottom:var(--bosluk-10); }
.kod-hane{
  flex:1; min-width:0; text-align:center; font-family:inherit;
  font-size:var(--yazi-20); font-weight:var(--agirlik-kalin);
  padding:var(--bosluk-14) 0; border-radius:var(--yuvarlak-sm);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--zemin); color:var(--murekkep);
}
.kod-hane:focus{ border-color:var(--aksan); box-shadow:0 0 0 3px var(--aksan-halka); }
.kurtarma-kodlari{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bosluk-8);
  margin:var(--bosluk-16) 0; list-style:none; padding:0;
}
.kurtarma-kodlari li{
  font-family:var(--yuz-tek);
  font-size:var(--yazi-14); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-versal); text-align:center;
  padding:var(--bosluk-11) var(--bosluk-12); border-radius:var(--yuvarlak-sm);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--zemin);
}
.modal-eylemler{ display:flex; gap:var(--bosluk-10); flex-wrap:wrap; margin-bottom:var(--bosluk-16); }
.modal-eylemler .dugme{ padding:var(--bosluk-11) var(--bosluk-18); font-size:var(--yazi-13-5); }
.modal-ayak{
  display:flex; align-items:center; gap:var(--bosluk-14); flex-wrap:wrap;
  margin-top:var(--bosluk-20); padding:var(--bosluk-14) 0;
  border-top:var(--cizgi-1) solid var(--cizgi);
}
.modal-ayak>.dugme{ padding:var(--bosluk-14) var(--bosluk-26); }
.modal-ayak>.dugme.birincil{ margin-left:auto; }
/* Fotoğraf modalının ayağı AYRI kip — 2FA'nınki 20px ve hizasız, bunun
   18px ve sağa yaslı (slot-2 M5). §11'in "iki ayrı kullanım" deseni. */
.modal-ayak.foto{ margin-top:var(--bosluk-18); justify-content:flex-end; }

/* MD3 · MD4 — hesabim'in iki modal/adım kaleminin DAR EKRAN dalı.
   Ölçüldü (slot-2, render edilmiş DOM @390); `kanon-fark.mjs` bu ikisini
   göremiyor (pencere içinde yaşıyorlar), slot-2'nin kendi ölçümü yakaladı.
   🔴 Blok ikisinin tanımından SONRA duruyor. */
@media (max-width:640px){
  /* Pencerenin ayağı sayfa kabıyla değil, kendi dar dolgusuyla nefes alır. */
  .modal-ayak{ padding-inline:var(--bosluk-16); }
  /* Adım şeridi dört adımı 390px'e sığdırmak için bir punto küçülür. */
  .adim-serit li{ font-size:var(--yazi-11-5); }
}
/* Durum satırının üst payı — kaynak bunu ÖLÇÜMLE gerekçelendiriyor:
   22 kitin alan alt boşluğu; 10/9/32 elenmiş (slot-2 M4). */
.durum-satir.ustlu{ margin-top:var(--bosluk-22); }

/* ---- fotoğraf yükleyici ---- */
.birak-alani{
  /* `position:relative` ŞART: içindeki `<input type="file">`
     `.yalniz-okuyucu` ile `position:absolute`a alınıyor; kap konumlu
     değilse girdi en yakın konumlu ataya kaçıyor (slot-2 G4). */
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:var(--bosluk-6);
  text-align:center; padding:var(--bosluk-34) var(--bosluk-22);
  /* 🔴 1.5px DASHED ve `--cizgi` rengi — `--kesikli-kenar` (2px
     `--cizgi-vurgu`) kaynaktan sapıyordu (slot-2 M2). */
  border:1.5px dashed var(--cizgi); border-radius:var(--yuvarlak-lg);
  background:var(--zemin);
}
/* M3 · bu düğme `.modal-eylemler`in İÇİNDE değil, kendi kabında. */
.birak-alani .dosya-sec{
  margin-top:var(--bosluk-12);
  padding:var(--bosluk-11) var(--bosluk-18); font-size:var(--yazi-13-5);
}
.birak-alani.uzerinde{ border-color:var(--aksan); background:var(--aksan-yikama-2); }
/* 🔴 İKON GRİ VE 12.5px ÇİZİLİYOR — kaynağın kendi bildirimi 18px/yeşil
   ama `.fy-drop>span` (0,1,1) onu yeniyor ve `.fy-drop-ico` (0,1,0)
   kaybediyor. KANON ÇİZİLENİ BASAR (`.btn-sm` emsali, 02 §29 dışı).
   Kusur raporda ölçüsüyle bildirildi; düzeltme kararı Beyar'da. */
.birak-ikon{
  width:46px; height:46px; border-radius:var(--yuvarlak-md);
  background:var(--aksan-yikama-2); display:grid; place-items:center;
  margin-bottom:var(--bosluk-6);
  font-size:var(--yazi-12-5); color:var(--metin-ikincil);
}
.birak-alani b{ font-size:var(--yazi-14-5); font-weight:var(--agirlik-kalin); color:var(--murekkep); }
.birak-alani>span{ font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde); color:var(--metin-ikincil); }
.onizleme{ display:flex; flex-direction:column; gap:var(--bosluk-16); }
.cerceve{
  position:relative; overflow:hidden; border-radius:var(--yuvarlak-lg);
  border:var(--cizgi-1) solid var(--cizgi); background:var(--zemin);
  aspect-ratio:1/1; max-width:260px; margin:0 auto;
}
.cerceve.kapak{ aspect-ratio:1176/240; max-width:100%; }
.cerceve img{ width:100%; height:100%; object-fit:cover; transform-origin:center; }
.yakinlastir{ display:flex; flex-direction:column; gap:var(--bosluk-8); }
.aralik-girdi{ width:100%; accent-color:var(--aksan); }
.yikici-dugme{ color:var(--tehlike); margin-right:auto; }
.yikici-dugme:hover{
  border-color:var(--tehlike-cizgi); background:var(--tehlike-yikama); color:var(--tehlike-koyu);
}


/* =====================================================================
   43 · ÇİP AİLESİ — kaynak `.chip` · `.df-fchip` · `.fs-chips .chip`
   ---------------------------------------------------------------------
   🔴 ÜÇ SLOT ÜÇ AYRI ÇİP ÖLÇTÜ ve üçü de farklı çıktı. Kanonun tek `.cip`i
   üçünü de karşılamıyordu; taban kaynağa çekildi, ikisi varyant oldu.

     kaynak                ölçülen                       kanon
     .chip (taban)         13/500 · 8/15 · r8 · min-h yok  .cip
     .df-fchip (süzgeç)    13/600 · 9/16 · r8 · min-h 44   .cip.suzgec
     .fs-chips .chip (hap) 13/600 · 9/16 · r999            .cip.hap

   🔴 TABANIN `min-height:44px`i KALDIRILDI. Kanon onu
   `.fb-chiprow .chip::before`in dokunma hedefinden türetmişti ama kaynak
   hedefi `::before` ile AÇIYOR, kalemi büyütmüyor — yanlış genelleme
   (slot-1 Ç1). Hedef aşağıda kaynağın kendi yöntemiyle veriliyor:
   görünmez bir örtü, kalemin boyunu bozmadan 44px'e tamamlıyor.
   `radius` da 12 → 8'e çekildi (ölçüm).
   ===================================================================== */

.cip{
  display:inline-flex; align-items:center; gap:var(--bosluk-7);
  position:relative;
  padding:var(--bosluk-8) var(--bosluk-15);
  border-radius:var(--yuvarlak-sm);
  font-family:inherit; font-size:var(--yazi-13); font-weight:var(--agirlik-govde);
  color:var(--murekkep-yumusak); background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi);
  /* ⚠ `white-space:nowrap` TABANDA YAZILMAZ — kaynak `.df-fchip` onu
     bildirmiyor; `nowrap` yalnız TEK SATIR kabının çocuğuna veriliyor
     (`.cipler.tek-satir>*`, §6'da zaten var). Tabana çıkarılırsa uzun
     etiketli çip kırılamaz ve şeridi taşırır (slot-3 ölçtü). */
  cursor:pointer; text-decoration:none;
  /* 🔴 `<button>`ın UA varsayılanı `center`; kaynakta çizilen `left`.
     B36'nın düğme ailesindeki karşılığı — sarmalayan çipte metin ortalanırdı. */
  text-align:left;
  transition:var(--sure) var(--yumusama);
}
/* DOKUNMA HEDEFİ — kalemin boyunu DEĞİL, tıklanabilir alanı büyütür.
   Kaynağın kendi yöntemi (WCAG 2.5.8); kalem 33px kalır, hedef 44px olur. */
.cip::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:44px;
}
.cip:hover{ border-color:var(--aksan); color:var(--aksan-koyu); background:var(--aksan-yikama); }
.cip.aktif{
  background:var(--aksan-koyu); border-color:var(--aksan-koyu); color:var(--kagit);
  font-weight:var(--agirlik-kalin);   /* aktif çip KALINLAŞIR — kaynağın kuralı */
}
.cip:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk); outline-offset:var(--odak-ofset);
}

/* Süzgeç kipi — biraz daha kalın ve geniş, ve hedefi KENDİ boyuyla
   karşılıyor (örtüye ihtiyacı yok). */
.cip.suzgec{
  font-weight:var(--agirlik-orta);
  padding:var(--bosluk-9) var(--bosluk-16);
  min-height:44px;
}
.cip.suzgec::before{ content:none; }

/* Hap kipi — arama ekranının popüler terim şeridi. */
/* Çip içi sayaç — `.sekme-sayi`den AYRI: o 700/.6, bu çipten miras alır
   ve .65 opaklıkta durur (slot-1 ①, iki ayrı ölçüm). */
/* Ağırlık MİRAS — aktif çipte 700'e, pasifte 500'e döner. Sabit yazılsaydı
   aktif çipin sayacı ince kalırdı (slot-1 ölçtü). */
.cip-sayi{ font-size:var(--yazi-11); font-weight:inherit; opacity:.65; }
.cip i{ font-size:var(--yazi-11); }          /* slot-1 ② */

/* 🔴 HAP KİPİ TABANIN KUTU DAVRANIŞINI ALMAZ. Kaynağın `.fs-chips .chip`i
   DÜZ bir `<button>` — `display`, `gap` ve `position` bildirmiyor, yalnız
   dolgu/punto/köşe veriyor. Taban `.cip` `inline-flex` + `gap:7` +
   `position:relative` (dokunma hedefi örtüsü için) taşıdığı için hap
   kipinde ÜÇÜ DE geri alınıyor.
   ⚠ Örtü de birlikte kalkar: bu kip kendi dolgusuyla zaten 44px'e yakın
   ve kaynak orada hedef açmıyor (slot-1 ölçtü). */
.cip.hap{
  /* ⚠ `white-space:nowrap` TABANDAN ÇIKARILDI — ölçüm çürüttü. İlk
     ölçüm mobil kipteydi ve "kaynak hapı sarmıyor" sonucuna varmıştım;
     masaüstünde kaynak `normal` bırakıyor. Sarmama kaynağın ≤640
     kuralından geliyor (`fit-shell.css:1283`, `.chip`e yazılı) ve
     mobil dala taşındı. Bir ölçümü tek kipte yapmak yarım ölçümdür. */
  display:inline-block; position:static; gap:normal;
  font-weight:var(--agirlik-orta);
  padding:var(--bosluk-9) var(--bosluk-16);
  border-radius:var(--yuvarlak-hap);
}
.cip.hap::before{ content:none; }

/* Çip şeridinin başlığı — `.cipler .etiket`ten AYRI kalem (slot-3 T8):
   versal, daha küçük, sabit genişlikte. Şeridin solunda durur. */
/* 🔴 §43'ÜN DAR EKRAN DALI — TABANA DEĞİL, KABA YAZILIR.
   Kaynak ≤640 kuralını `.chip`e yazıyor (`fit-shell.css:1283`): 12px ·
   7/12. Ama kanon İKİ kaynak sınıfını (`.chip` ve `.df-fchip`) tek
   `.cip`e indiriyor ve `.df-fchip`e o kural HİÇ değmiyor — tabana
   yazılırsa `odemelerim`in kart içi süzgeç çipi de küçülür ve kapanmış
   bir ekran bozulur. `.cipler.ortali` = `.chip` ailesinin kabı.
   ⚠ `:not(.hap)` şart: hap kipi kendi dolgusunu (9/16) taşıyor ve eşit
   özgüllükte sonra gelen bu blok onu ezerdi (§0c/1'in tersi yönü).
   Bu, "iki kaynak sınıfı tek ada inince mobil davranışları ayrışır"
   dersinin BEŞİNCİ örneği. (slot-1 ⑤) */
@media (max-width:640px){
  .cipler.ortali .cip:not(.hap),
  .cipler.ortali .cip:not(.hap).aktif{
    font-size:var(--yazi-12); padding:var(--bosluk-7) var(--bosluk-12);
  }
  /* Hap kipi dar ekranda SARMAZ — kaynağın ≤640 `.chip` kuralı. */
  .cipler .cip.hap{ white-space:nowrap; }
}

.cipler-basligi{
  font-size:var(--yazi-12); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-versal); text-transform:uppercase;   /* 🔴 .04 → .06 (B44) */
  color:var(--metin-ikincil); min-width:60px;
}


/* =====================================================================
   44 · ÖDEME KARTI — kaynak `.od-card` / `.od-head` / `.od-in`
   ---------------------------------------------------------------------
   §1'in DÖRDÜNCÜ kart kiti (taban · `.panel` · `.form` · `.odeme`).
   Kaynağın kendi şerhi ayırıyor: "kabuğun `.fp-card`ı 38px 24px dolgu
   taşıyor; ödeme listeleri kenardan kenara aksın diye kendi kabı."
   B31'in aynı ailesi. Ölçüm: slot-3 (odemelerim · 5 sekmede 9 kart).

   🔴 BAŞLIK İKONU ÇİPLİ — taban `.kart-baslik i` çıplak ikon. Ayrı kip.
   ===================================================================== */

.kart.odeme+.kart.odeme,
.paket-karti+.kart.odeme{ margin-top:var(--bosluk-18); }
.kart.odeme>.kart-bas{
  padding:var(--bosluk-18) var(--bosluk-22); gap:var(--bosluk-16);
  align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
}
.kart.odeme>.kart-bas .kart-baslik{
  font-size:var(--yazi-16); line-height:var(--satir-govde);
  letter-spacing:normal; gap:var(--bosluk-10);
}
.kart.odeme>.kart-bas .kart-baslik i{
  width:38px; height:38px; border-radius:var(--yuvarlak-md);
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  font-size:var(--yazi-14); display:grid; place-items:center; flex:none;
}
.kart.odeme>.kart-bas p{
  font-size:var(--yazi-13); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); margin-top:var(--bosluk-6);
  max-width:58ch; text-align:left; text-align-last:auto;
}
.kart.odeme>.kart-bas .dugme{ padding:var(--bosluk-11) var(--bosluk-18); font-size:var(--yazi-13-5); flex:none; }
.kart.odeme>.kart-govde{ padding:var(--bosluk-20) var(--bosluk-22); }
.kart.odeme>.kart-govde.bosluksuz{ padding:0; }

/* Kart gövdesinin iki küçük kipi (slot-3 V1 · V2) — kaynakta inline
   stildeydiler, kanona adlı varyant olarak giriyorlar.
   🔴 `.kart.odeme>` KAPSAMI ŞART: taban `.kart.odeme>.kart-govde` (0,2,1)
   çıplak varyantı (0,2,0) yener ve ikisi de ÖLÜ kalır. Ölçümle yakalandı
   (slot-3: üç kutunun üçü de 20/22 basıyordu, panel aralığı −17px sapıyordu).
   `.bosluksuz` için aynı kapsam zaten yazılmıştı — bu ikisi atlanmıştı. */
.kart-govde.ustsuz,
.kart.odeme>.kart-govde.ustsuz{ padding-top:0; }
.kart-govde.yalniz-yan,
.kart.odeme>.kart-govde.yalniz-yan{ padding:0 var(--bosluk-22); }

/* Kart içi süzgeç şeridi ve sayaç satırı (slot-3 T7).
   §11 `.sekmeler.suzgec` bir SEKME rayıdır; bu bir ÇİP şeridi kabı.
   Yatay 22 — md.13'ün kart içi nefesiyle tutarlı. */
.kart-suzgec{ padding:var(--bosluk-16) var(--bosluk-22) var(--bosluk-6); }
/* Kart içi şerit kabın gap'ini DARALTIR — kaynak da kabı adlandırıp orada
   daraltıyor. Taban `.cipler` 9px (kabuğun değeri) doğru; bu 8.
   ⚠ slot-3 önce "taban 8 olsun" demiş, sonra RENDER ölçümüyle kendi
   isteğini geri almıştı — §10 md.3'ün ders örneği. */
.kart-suzgec .cipler{ gap:var(--bosluk-8); }
.kart-sayac{
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta);
  color:var(--metin-ikincil); padding:var(--bosluk-12) var(--bosluk-22) var(--bosluk-4);
  margin:0; text-align:left; text-align-last:auto;    /* B36 — bu da bir <p> */
}
.kart-sayac b{ font-weight:900; color:var(--murekkep); }

/* Kart içi tek düğme kabı (slot-3 V4) — dipnottaki bağlantı EYLEM olarak dursun. */
.kart-eylem{ margin-top:var(--bosluk-18); }


/* =====================================================================
   45 · DURUM HAPININ İKİ İKONLU KİPİ — kaynak `.od-pill` · `.hs-pill`
   ---------------------------------------------------------------------
   §28 `.durum-hapi` `.pstat`in geometrisini aldı: kenarlıksız, 700
   ağırlık, 6px NOKTA. Ölçüm iki ayrı hap daha buldu ve üçü de farklı:

     kalem        dolgu    kenar  ağırlık  aralık   işaret
     .pstat (§28) 4/10     yok    700      normal   6px nokta
     .od-pill     5/10     1px    800      .02em    İKON
     .hs-pill     3/10     1px    800      .03em    İKON

   B24/B31 deseni: ölçüm iki kalemin ayrı olduğunu söylüyorsa kanon
   onları birleştirmez. Ölçüm: slot-3.
   ===================================================================== */

/* Kenar DURUMDAN gelir; taban `.od-pill.off`un grisi (`odemelerim-v1.html:87`
   ham hex çifti: zemin #f1f1f1 · kenar #e2e2e2 — zemin alınmıştı, kenar
   atlanmıştı). Çözülen ve bekleyen kendi ailelerinin hairline'ını kullanır. */
.durum-hapi.ikonlu{
  padding:var(--bosluk-5) var(--bosluk-10);
  border:var(--cizgi-1) solid var(--durum-kapali-cizgi);
  font-weight:var(--agirlik-ekstra); letter-spacing:var(--aralik-genis);
  gap:var(--bosluk-6);
}
.durum-hapi.ikonlu::before{ content:none; }        /* nokta yok, ikon var */
.durum-hapi.ikonlu i{ font-size:var(--yazi-10-5); }
.durum-hapi.ikonlu.cozulen { border-color:var(--aksan-cizgi); }   /* .od-pill.ok   */
.durum-hapi.ikonlu.bekleyen{ border-color:var(--uyari-cizgi); }   /* .od-pill.wait */

.durum-hapi.kucuk-ikonlu{
  padding:3px var(--bosluk-10);
  /* `.hs-pill` ailesi — kenar TABANDA da görünür. Lead'in `.kapali`
     düzeltmesi bu kipin yalnız bir durumunu kapatıyordu; `.cozulen`
     kenarsız kalıyordu. */
  border:var(--cizgi-1) solid var(--cizgi);
  font-size:var(--yazi-11); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-etiket-2); gap:var(--bosluk-6);
}
.durum-hapi.kucuk-ikonlu::before{ content:none; }
/* 🔴 KENARLIK GÖRÜNÜR, ŞEFFAF DEĞİL — Beyar gözle buldu, ölçüm doğruladı.
   Taban `kucuk-ikonlu` kenarı `transparent` bırakıyordu ve `kapali` durumu
   kendi zeminini getiriyordu; kaynağın `.hs-pill.off`u ikisini de yazıyor:
     FIT    kenar rgb(236,236,236) = --cizgi   zemin rgb(249,249,249) = --zemin
     kanon  kenar rgba(0,0,0,0)               zemin rgb(241,241,241)
   Dört bağlamda da ölçüldü (FIT pk-paketim · FIT od-kartlar · kanon
   paketlerim · kanon odemelerim); FIT'in dördü de aynı, kanonun ikisi de
   aynı biçimde yanlıştı — yani kaynak tutarlı, sapma bizimdi.
   ⚠ Kural BİRLEŞİK seçiciye yazılır: `.durum-hapi.kapali` başka kaynak
   sınıflarının da karşılığı ve onların zemini AYRI (§45). Sadece küçük
   ikonlu kip `.hs-pill`den geliyor.
   ⚠ ÖLÇÜM BUNU HİÇ GÖRMÜYORDU — hapın ölçüm çifti yoktu. Düzeltmekle
   bitmez; `paketlerim.mjs` ve `odemelerim.mjs`e çift eklenecek. */
.durum-hapi.kucuk-ikonlu.kapali{
  background:var(--zemin); border-color:var(--cizgi);
}
/* `.hs-pill.on` — kenar markanın %24'ü (`fit-shell.css:4970`). Zemin
   `--aksan-yikama` KALIR: kaynak alfalı yıkama basıyor, kanon opak
   yıkama — belgelenmiş marka kararı (🟡), kenar ise ölçülen değer. */
.durum-hapi.kucuk-ikonlu.cozulen { border-color:var(--aksan-cizgi-5); }
.durum-hapi.kucuk-ikonlu.bekleyen{ border-color:var(--uyari-cizgi); }


/* =====================================================================
   46 · ÖLÇER — kaynak `.od-bar`
   ---------------------------------------------------------------------
   Tek renkli doluluk çubuğu. Ölçüm: slot-3 (odemelerim).
   ===================================================================== */

.olcer{
  height:8px; border-radius:var(--yuvarlak-sm);
  background:var(--cizgi); overflow:hidden; margin-top:var(--bosluk-9);
}
.olcer>span{ display:block; height:100%; background:var(--aksan); border-radius:var(--yuvarlak-sm); }
/* R11 · HAP KİPİ — puan kartının çubuğu (`.fp-bar`). Geometri aynı,
   köşesi hap ve üst payı 11. Zemini de `--cizgi` DEĞİL, kaynağın
   yakın-ikizi `--olcer-zemin` (bkz. token şerhi). */
.olcer.hap{
  border-radius:var(--yuvarlak-hap); margin-top:var(--bosluk-11);
  background:var(--olcer-zemin);
}
.olcer.hap>span{ border-radius:var(--yuvarlak-hap); }


/* =====================================================================
   47 · DÜĞMENİN İKİ ARA BOYU — kaynak `.see-all` · `.od-git`
   ---------------------------------------------------------------------
   Taban `.dugme` 14/26 · 14.5px, `.dugme.kucuk` 12/20 · 13.5px. Ölçüm iki
   ara boy daha buldu ve ikisinin de kaynakta ADI var — uydurma değil:

     .dugme.orta   11/18 · 13.5   kaynak `.see-all` (fit-shell.css:233)
     .dugme.satir  10/14 · 12.5   kaynak `.od-git` — tablo içi belge düğmesi

   `.dugme.satir` `.satir-dugme`den (§42) AYRI: o kağıt zeminli nötr bir
   satır düğmesi, bu aksan kenarlıklı bir belge bağlantısı. İkisi de
   ölçüldü, ikisi de kullanımda (slot-3 T4 · V5).
   ===================================================================== */

.dugme.orta{ padding:var(--bosluk-11) var(--bosluk-18); font-size:var(--yazi-13-5); }
.dugme.satir{
  padding:var(--bosluk-10) var(--bosluk-14); gap:var(--bosluk-7);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin);
  border-radius:var(--yuvarlak-sm); min-height:44px;
  background:var(--kagit); color:var(--aksan-koyu);
  border:var(--cizgi-1) solid var(--aksan-cizgi-2);
  white-space:nowrap;
}
.dugme.satir:hover{ background:var(--aksan-yikama-2); }
.dugme.satir:focus-visible{
  outline:var(--odak-kalinlik) solid var(--odak-renk); outline-offset:var(--odak-ofset);
}
/* Paket kartının eylem kabı düğmeleri inceltir — kabın kendi kipi,
   yeni ölçü değil (`.dugme.kucuk`ün değerine eşit çıktı · slot-3 P12). */
.paket-eylemler .dugme{ padding:var(--bosluk-12) var(--bosluk-20); font-size:var(--yazi-13-5); }


/* =====================================================================
   48 · BOŞ DURUMUN ÜÇÜNCÜ BOYU — kaynak `.fpx-bos`
   ---------------------------------------------------------------------
   🔴 DÖRT AYRI BOY ÖLÇÜLDÜ. Kaynak `.lib-empty`yi KULLANMADIĞINI kendi
   şerhinde yazıyor; bu, plan yüzeylerinin kendi kiti.

     kalem                 dolgu         ikon              başlık  metin
     .bos-durum.buyuk      48/20/48      64 · r-md · 22px  20      14 / 50ch
     .bos-durum.kart-ici   44/24         58 · r-md · 22px  15.5    13 / 300px
     .bos-durum.plan-ici   44/20/38      56 · DAİRE · 21px 16.5    14 / 35ch
     .fs-empty (arama)     70/30         74 · r-lg · 29px  22      14.5 / 420px

   İlk üçü kanonda; dördüncüsü arama ekranıyla gelecek (§ ayrı).
   Ölçüm: slot-3 T9. Ayırt edici: ikon DAİRE ve boşluğu `gap` taşıyor,
   `margin-bottom` değil.
   ===================================================================== */

.bos-durum.plan-ici{
  padding:var(--bosluk-44) var(--bosluk-20) var(--bosluk-38);
  gap:var(--bosluk-10);
}
.bos-durum.plan-ici .bos-ikon{
  width:56px; height:56px; border-radius:var(--yuvarlak-daire);
  font-size:var(--yazi-21); margin-bottom:0;
}
/* 🔴 ÇOCUK MARJLARI SIFIRLANIR — bu kip boşluğu `gap:10px` ile taşıyor,
   `.kart-ici`nin margin'leri miras kalırsa ritim iki kez binerdi (B44). */
.bos-durum.plan-ici h4{
  font-size:var(--yazi-16-5); line-height:var(--satir-baslik);
  letter-spacing:var(--aralik-sik); margin:0;
}
.bos-durum.plan-ici p{
  font-size:var(--yazi-14); line-height:var(--satir-genis-2);
  /* `.kart-ici`nin 300px'iyle AYNI özgüllükte (0,2,1); bu blok dosyada
     SONRA geldiği için kazanıyor — `!important` gerekmiyor.
     🔴 56ch, 35 DEĞİL. İlk istekte 35 bildirilmişti; 1ch'in 14px sanılması
     aritmetik hataydı — Gilroy'da 14px'te 1ch ≈ 8.82px, 56×8.82 = 493.9px
     ve ölçüm tam bunu veriyor. Kaynak `.fpx-bos p{max-width:56ch}`.
     slot-3 kendi isteğini ölçümle düzeltti. */
  max-width:56ch; color:var(--yer-tutucu); margin:0;
}
.bos-durum.plan-ici .dugme{ margin-top:var(--bosluk-6); }


/* =====================================================================
   49 · PAKET KARTI — kaynak `.sub-tier-*`   (fit-shell.css:4944)
   ---------------------------------------------------------------------
   🔴 KABUKTA TANIMLI, SAYFADA DEĞİL — iki ekran (odemelerim/abonelik ve
   paketlerim/paketim) AYNI kiti paylaşıyor. odemelerim-v1'in şerhi
   "burada tanımlandı" diyor ama ölçüm ikisinde de aynı değerleri verdi
   (slot-3 BATCH-4/A). Tek bileşen, iki ekran.
   HANDOFF §ADAY listesindeki "paket kartı" budur.
   ===================================================================== */

.paket-karti{
  border-radius:var(--yuvarlak-lg); overflow:hidden;
  border:var(--cizgi-1) solid var(--cizgi); background:var(--kagit);
  /* gölge YOK — ölçüldü */
}
.paket-bas{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--bosluk-14); padding:var(--bosluk-18) var(--bosluk-20);
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
/* Kademe rozeti — §28 hap ailesinin DÖRDÜNCÜ ölçüsü. */
.paket-rozet{
  display:inline-flex; align-items:center; gap:var(--bosluk-6); flex:none;
  padding:var(--bosluk-6) var(--bosluk-13);
  border-radius:var(--yuvarlak-hap); border:var(--cizgi-1) solid transparent;
  font-size:var(--yazi-12); font-weight:var(--agirlik-ekstra);
  letter-spacing:var(--aralik-vurgu); text-transform:uppercase;
  background:var(--paket-rozet-zemin); color:var(--kagit);
}
.paket-rozet.ucretsiz{ background:var(--zemin); color:var(--metin-ikincil); border-color:var(--cizgi); }
.paket-bilgi{ flex:1; min-width:0; }
.paket-bilgi b{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--bosluk-9);
  font-size:var(--yazi-15-5); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-govde);
}
.paket-yenileme{
  display:inline-flex; align-items:center; gap:var(--bosluk-6);
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-govde);
  margin-top:var(--bosluk-5); color:var(--metin-ikincil);
}
.paket-fiyat{ text-align:right; flex:none; }
.paket-fiyat b{ font-size:var(--yazi-22); font-weight:var(--agirlik-ekstra); letter-spacing:var(--aralik-baslik-2); }
/* 🔴 `display:block` — "/ ay" fiyatın ALTINDA durur. Kanonda yoktu ve
   ikisi aynı satıra düşüyordu; ÇIPLAK GÖZLE görülüyordu, ölçüm görmüyordu
   (slot-3, 1440 ss). KOPYALAMA-KURALI §4'ün "yan yana koy" adımı bunun için. */
.paket-fiyat span{ display:block; font-size:var(--yazi-12); font-weight:var(--agirlik-govde); color:var(--metin-ikincil); }
.paket-govde{ padding:var(--bosluk-18) var(--bosluk-20); border-bottom:var(--cizgi-1) solid var(--cizgi); }
.paket-eylemler{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--bosluk-12); padding:var(--bosluk-16) var(--bosluk-20);
}
/* Özellik çipleri — kartın içinde, paketin neyi açtığını sayar. */
.paket-ozellikler{ display:flex; flex-wrap:wrap; gap:var(--bosluk-8); margin-top:var(--bosluk-16); }
.paket-ozellikler span{
  display:inline-flex; align-items:center; gap:var(--bosluk-7);
  padding:var(--bosluk-7) var(--bosluk-12);
  border-radius:var(--yuvarlak-sm); background:var(--zemin);
  border:var(--cizgi-1) solid var(--cizgi);
  font-size:var(--yazi-13); font-weight:var(--agirlik-orta);
  color:var(--metin-ikincil);
}
.paket-ozellikler span i{ font-size:var(--yazi-11); color:var(--aksan-koyu); }


/* =====================================================================
   50 · LİSTE SATIRLARI — paket satırı · ödeme satırı
   ---------------------------------------------------------------------
   İki ayrı satır kiti, aynı iskelet (görsel/marka + bilgi + fiyat +
   eylemler) ama farklı ölçüler — ikisi de ölçüldü (slot-3 T11 · T12).

   🔴 `.odeme-satiri` KAYNAKTA `.cc-*` ADINI TAŞIYOR ama kanona O ADLA
   GİREMEZ: §24 kapanış bandının `.cc-ico`/`.cc-btns`i ile çakışırdı.
   §10 md.7'nin (kanon adı ↔ kaynak adı karışır) doğrudan uygulaması.
   ===================================================================== */

.paket-satiri{
  display:flex; align-items:center; gap:var(--bosluk-16);
  padding:var(--bosluk-16) var(--bosluk-18);
  border-radius:var(--yuvarlak-lg); border:var(--cizgi-1) solid var(--cizgi);
  background:var(--kagit);
}
.paket-satiri+.paket-satiri{ margin-top:var(--bosluk-14); }
.paket-satiri .avatar{ width:52px; height:52px; border-radius:var(--yuvarlak-daire); flex:none; }
/* HARF KİPİ — kaynak buraya FOTOĞRAF basıyor, Diyet baş harf kullanıyor.
   §29 md.4'ün "içerik" gerekçesi (kardeş markada avatar fotoğraf, harf
   kipi hiç doğmuyor) — kimlik kartında zaten onaylı, aynı karar.
   Zemin `--aksan-koyu`: §29 md.11 (baş harf avatarı 3.54 → 5.45:1).
   Punto 52px kutuya göre; §25'in 34px'i 96px kutu için. */
.paket-satiri .avatar.harf{
  display:grid; place-items:center;
  background:var(--aksan-koyu); color:var(--kagit);
  font-size:var(--yazi-20); font-weight:var(--agirlik-kalin);
  text-transform:uppercase;
}
.paket-satiri .bilgi{ flex:1; min-width:0; }
.paket-satiri .bilgi b{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--bosluk-9);
  font-size:var(--yazi-14-5); font-weight:var(--agirlik-kalin);
}
.paket-satiri .plan{ display:block; font-size:var(--yazi-13); font-weight:var(--agirlik-govde); margin-top:3px; color:var(--metin-ikincil); }
/* Satırın ikincil notu (hak sayacı · yenileme). §49'un `.paket-yenileme`sinden
   AYRI: o 12.5px/mt5 (kart), bu 12px/mt6 (satır) — yarım punto ve 1px,
   B24 deseni; ölçüm ayırdı. */
.paket-satiri .not{
  display:inline-flex; align-items:center; gap:var(--bosluk-6);
  margin-top:var(--bosluk-6);
  font-size:var(--yazi-12); font-weight:var(--agirlik-govde);
  color:var(--murekkep-yumusak);
}
.paket-satiri .not i{ font-size:var(--yazi-11); color:var(--aksan-koyu); }
.paket-satiri .fiyat{ text-align:right; flex:none; }
.paket-satiri .fiyat b{ font-size:var(--yazi-17); font-weight:var(--agirlik-ekstra); letter-spacing:var(--aralik-baslik); }
.paket-satiri .fiyat span{ display:block; font-size:var(--yazi-11-5); font-weight:var(--agirlik-govde); }

.odeme-satiri{
  display:flex; align-items:center; gap:var(--bosluk-14);
  padding:var(--bosluk-16) var(--bosluk-18);
  border-radius:var(--yuvarlak-lg); border:var(--cizgi-1) solid var(--cizgi);
  background:var(--kagit);
  transition:var(--sure) var(--yumusama);
}
.odeme-satiri+.odeme-satiri{ margin-top:var(--bosluk-12); }
.odeme-satiri:hover{ border-color:var(--cizgi-vurgu-acik); box-shadow:var(--golge-sm); }
/* Kart şeması rozeti — Visa/Mastercard. Renkler MARKA DEĞİL, kart
   şemasının kendi kurumsal rengi; DadaDiet'e göre değişmez. */
.odeme-marka{
  width:48px; height:34px; flex:none;
  border-radius:var(--yuvarlak-sm); background:var(--zemin);
  border:var(--cizgi-1) solid var(--cizgi);
  display:grid; place-items:center; font-size:var(--yazi-26);
  color:var(--kart-semasi-visa);
}
.odeme-marka.mastercard{ color:var(--kart-semasi-mc); }
.odeme-satiri .bilgi{ flex:1; min-width:0; }
.odeme-satiri .bilgi b{
  display:block; font-size:var(--yazi-14); font-weight:var(--agirlik-kalin);
  letter-spacing:var(--aralik-vurgu);
}
/* 🔴 `flex:none` ŞART — olmazsa eylem kutusu daralıp düğmeleri sıkıştırıyor.
   slot-3 ilk istekte atlamıştı, genişleyen OZ (`flexShrink`) yakaladı. */
.paket-satiri .eylemler,
.odeme-satiri .eylemler{
  flex:none; display:flex; align-items:center; gap:var(--bosluk-8); flex-wrap:wrap;
}
.odeme-satiri .skt{
  display:block; font-size:var(--yazi-12); font-weight:var(--agirlik-govde);
  margin-top:2px; color:var(--metin-ikincil);
}

/* 🔴 BU BLOK BİLEŞEN TANIMLARINDAN SONRA DURMAK ZORUNDA.
   İlk yazımda 1500 satır ÖNCEYE konmuştu ve HİÇ UYGULANMIYORDU:
   `@media` ÖZGÜLLÜK ARTIRMAZ, eşit özgüllükte SIRA belirler —
   sonra gelen taban kurallar (`.paket-satiri` · `.odeme-satiri` ·
   `.kart.odeme>.kart-bas`) medya bloğunu eziyordu.
   ⚠ slot-3 bunu ÜÇ KEZ bildirdi; ben üç kez `grep`le "var" diye
   yanıtladım. Dosyada bulunması UYGULANDIĞI anlamına gelmiyor —
   ölçüm haklıydı, arama değil. Bu turun en pahalı dersi.
   (`.ustsuz`/`.yalniz-yan`/`.tablo-grup th` ile aynı aile: bir kural
   yazılmış olabilir ama başka bir kural onu yeniyor olabilir.) */
/* ── DAR EKRAN · §44 · §49 · §50 ────────────────────────────────────
   🔴 BU BLOK OLMADAN §50 390px'te OKUNMUYOR. Ölçüldü ve GÖZLE doğrulandı
   (slot-3, `deneme/odemelerim-390-kanon.png`): `.paket-satiri` sarmadığı
   için bilgi kolonu tek kelimelik bir şeride çöküyor, fiyat ve eylemler
   kutunun dışına taşıyor. Kaynak `odemelerim-v1.html:200-210` ve
   `fit-shell.css:5069-5071` — hepsi birebir, uydurma yok.
   Bu bir "iyi olurdu" değil; satır dar ekranda kullanılamaz hâlde. */
@media (max-width:640px){
  /* §44 · ödeme kartı — dolgular daralır, başlık SATIR kipinde KALIR.
     🔴 `flex-direction:row` AÇIKÇA yazılır: §1'in tabanı dar ekranda
     kolona düşüyor ve ödeme kartını da düşürüyordu; kaynağın `.od-head`i
     düşmüyor (slot-3 ölçtü). */
  .kart.odeme>.kart-bas{ padding:var(--bosluk-16); flex-direction:row; }
  .kart.odeme>.kart-govde{ padding:var(--bosluk-16); }
  .kart-suzgec{ padding:var(--bosluk-14) var(--bosluk-16) var(--bosluk-4); }
  .kart-sayac{ padding:var(--bosluk-10) var(--bosluk-16) 2px; }

  /* §49 · paket kartı — fiyat alta iner ve SOLA yaslanır */
  .paket-bas{ gap:var(--bosluk-12); }
  .paket-fiyat{ order:3; margin-left:auto; text-align:left; }
  .paket-eylemler .dugme{ width:100%; }
  /* Eylem düğmeleri satırı doldurur ve ortalanır — dar ekranda yan yana
     sıkışmasınlar diye (kaynağın kendi kuralı). */
  .paket-satiri .eylemler .satir-dugme,
  .odeme-satiri .eylemler .satir-dugme{ flex:1; justify-content:center; }

  /* §50 · liste satırları — `order` ile alt alta iner.
     ⚠ `order` sırası KRİTİK: bilgi 2 · fiyat 3 · eylemler 4. Verilmezse
     avatar/marka kutusu ile fiyat aynı satırda kalıp sola yığılıyor
     (kaynağın kendi şerhi bunu bildirim satırında da yazıyor). */
  .paket-satiri{ flex-wrap:wrap; }
  .paket-satiri .bilgi{ flex:1 1 100%; order:2; }
  .paket-satiri .fiyat{ order:3; margin-left:auto; text-align:left; }
  .paket-satiri .eylemler{ order:4; flex:1 1 100%; }
  .paket-satiri .eylemler .satir-dugme{ flex:1; justify-content:center; }
  .odeme-satiri{ flex-wrap:wrap; }
  .odeme-satiri .bilgi{ flex:1 1 60%; }
  .odeme-satiri .eylemler{ flex:1 1 100%; }
  .odeme-satiri .eylemler .satir-dugme{ flex:1; justify-content:center; }
}



/* =====================================================================
   34 · BANT — kaynak `.lib-top` / `.lib-sub` (+ `.fit-seam` dikişi)
   ---------------------------------------------------------------------
   Ölçüm: render edilmiş DOM (`dump/fit-render/404.*`, yedi genişlik) —
   slot-1, 2026-09-01. CSS okunmadı (§10 md.3).

   🔴 §25 `.kapak` DEĞİL. İkisi de "üstteki koyu bant" ama ayrı kalemler:
     .kapak  profil kapağı · `--banner-h-profil` 280px · üstüne kimlik
             kartı biner · görsel ZORUNLU
     .bant   liste/duyuru banner'ı · `--banner-h-liste` 544px · içinde
             kırıntı + üst etiket + h1 + alt satır · görsel İSTEĞE BAĞLI
   Karıştırılırsa bant 280px'e düşer ve başlık dikey ortadan kayar.

   🔴 İKİ AYRI KIRILIM NOKTASI (bkz. `tokenlar.css` banner h1 şerhi):
     tipografi  min-width:901   → 42 / 31 / 25
     yükseklik  max-width:1024  → 544 / 607 / 587
   901–1024 arasında bant 607px yüksek ama başlık HÂLÂ 42px.

   YAPI — sıra değişmez:
     .bant                    koyu bant, katmanlı zemin
       .kap                   dikey ORTALI kolon
         .kirinti             ⚠ AKIŞTAN ÇIKAR (absolute) — dikey merkezi
                              kaydırmasın diye. Kaynağın kendi çözümü.
         .ust-etiket          §18'in koyu zemin varyantı
         h1
         .bant-alt            iki satıra kırpılan açıklama

   GÖRSEL İSTEĞE BAĞLI: `--bant-gorsel` boş bırakılırsa üç gradyan katmanı
   tek başına bandı çizer (ölçüldü: kaynağın 404'ü zaten öyle çiziliyor).
   Kanon dış kaynak gömmez; görseli canlı blade doldurur.
   ===================================================================== */

.bant{
  position:relative; overflow:hidden;
  /* 🔴 `height`, `min-height` DEĞİL — B25'in aynı deseni. `fit-shell.css:1881`
     `min-height` yazar ve şerhi "yer yetmezse banner büyür" der, ama `:2590`
     aynı elemanı tekrar bildirip `height:var(--banner-h-liste)` verir; SON
     bildirim geçerli ve `overflow:hidden` ile taşan `padding-bottom` KIRPILIR.
     Ölçüldü (slot-1, altı genişlik): fark her seferinde tam `--hero-alt`
     kadar — 1440/1024/901/900'de +46, 640/390'da +34. Yani kırpılan şey
     boş alt dolgu. `--banner-h-liste` üç dalda tanımlı olduğu için tek
     satır üç kırılımı birden kapatır. */
  /* ⚠ İKİSİ DE YAZILIR. `height` kutunun ölçüsünü belirler (kırpma bundan),
     ama kaynağın `:1881`deki `min-height` bildirimi ELEMANIN ÜSTÜNDE
     DURUYOR ve hesaplanmış değer olarak okunuyor. Yalnız `height` yazmak
     `min-height:0` veriyordu (slot-1 ölçtü). */
  min-height:var(--banner-h-liste);
  height:var(--banner-h-liste);
  padding:calc(var(--kabuk-h) + var(--hero-ust)) 0 var(--hero-alt);
  background:
    var(--bant-perde-aksan),
    var(--bant-perde-ana),
    var(--bant-perde-dip),
    var(--bant-gorsel) var(--bant-gorsel-yeri)/cover no-repeat,
    var(--bant-zemin);
}
.bant>.kap{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:stretch;
  justify-content:center; row-gap:var(--banner-gap);
  min-height:calc(var(--banner-h-liste) - var(--kabuk-h) - var(--hero-ust));
}
/* Kabın doğrudan çocukları kendi dikey marjlarını taşımaz — ritmi
   `row-gap` verir. Marj kalırsa `justify-content:center` kayar. */
.bant>.kap>*{ margin-top:0; margin-bottom:0; }

/* ⚠ KIRINTI AKIŞTAN ÇIKAR. Akışta kalsaydı kolonun dikey merkezini
   yukarı iterdi; kaynak onu bandın üstüne mutlak konumluyor. */
.bant .kirinti{ position:absolute; top:0; margin:0; }

/* §18 `.ust-etiket`in KOYU ZEMİN varyantı — geometri aynı, yalnız renk
   değişir (aksan koyu → aksan parlak; koyu zeminde okunur olan o). */
.bant .ust-etiket{ color:var(--aksan-parlak); }
.bant .ust-etiket::before{ background:var(--aksan-parlak); }

.bant h1{
  font-size:var(--yazi-42); line-height:var(--satir-baslik);
  letter-spacing:var(--aralik-baslik-2);
  max-width:none; margin:0; color:var(--kagit);
}
.bant-alt{
  font-size:var(--yazi-15-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); max-width:560px;
  color:var(--koyu-metin);
  text-align:left; text-align-last:auto;    /* B36 */
  /* İki satıra kırpılır — başlık uzadığında bant büyümesin diye. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Tipografi kırılımı 901 — YÜKSEKLİK kırılımı 1024, aynı değil. */
@media (max-width:900px){
  /* `max-width:680px` TABAN kuraldır (`fit-shell.css:2002`); `min-width:901`
     onu yalnız masaüstünde `none`a çeker. 901'in altında geri gelir ve
     başlık 680px'te sarar. ≤640 dalı ayrıca yazmaz — buradan miras kalır. */
  .bant h1{ font-size:var(--yazi-31); letter-spacing:var(--aralik-baslik); max-width:680px; }
}
@media (max-width:640px){
  .bant{ padding:calc(var(--kabuk-h-dar) + var(--hero-ust)) 0 var(--hero-alt); }
  .bant h1{ font-size:var(--yazi-25); }
  .bant-alt{ font-size:var(--yazi-14); }
  /* Başlık satırı kendi ölçüsünü korur: h1 22 (bandın 25'i DEĞİL) ve alt
     metin 13.5'te kalır (bandın 14'üne inmez) — ikisi de ölçüldü. */
  .bant-bas h1{ font-size:var(--yazi-22); letter-spacing:var(--aralik-baslik); max-width:none; }
  .bant-bas .bant-alt{ font-size:var(--yazi-13-5); }
  /* Ortalı alt not dar ekranda ORTALANIR ve sarar — kaynağın şerhi
     ölçmüş: "390px'te yükseklik 39px, 1440'ta 19px; üç kolona bölünmüş
     gibi duruyordu." */
  .alt-not.ortali{ flex-wrap:wrap; justify-content:center; text-align:center; }
}

/* ---- DİKİŞ — bandı izleyen gövde bloğu ------------------------------
   Kaynak `fit-shell.css:3721`. Sınıfı kabuk JS'i çalışma anında basar
   (banttan sonraki ilk opak, yapışkan olmayan blok).
   🔴 GÖLGE YOKTUR. `:3722` `box-shadow:0 -12px 32px …` yazar ama `:3754`
   aynı seçiciyi tekrar bildirip `box-shadow:none` der (Beyar kararı
   2026-08-24: "dikiş yalnız 22px yuvarlak köşe + binmeyle okunacak").
   Render edilmiş DOM'da ölçülen: `none`. CSS okunup durulsaydı gölge
   basılacaktı — §10 md.3'ün ders kitabı örneği (slot-1 yakaladı). */
.dikis{
  position:relative; z-index:2;
  border-radius:var(--dikis-r) var(--dikis-r) 0 0;
}
.dikis.bant-ustunde{ margin-top:calc(-1 * var(--dikis-r)); }
/* Banda KOMŞU olmayan dikiş kendi üst çizgisini taşır — binme yok, ayrım
   çizgiyle okunur. */
.dikis:not(.bant-ustunde){ border-top:var(--cizgi-1) solid var(--cizgi); }


/* ---- BANDIN BAŞLIK SATIRI (slot-1 ⑤) --------------------------------
   Başlık bloğu ve araçlar YAN YANA. `.bant>.kap`ın dikey kolonuna giren
   TEK çocuk; içinde sol blok (h1 + alt metin) ve sağ blok (araçlar) var.

   🔴 h1'İN MARJI BURADA HAYATTA KALIR. `.bant>.kap>*{margin:0}` yalnız
   KABIN DOĞRUDAN çocuklarını sıfırlar; `.bant-bas` bir ARA KAP olduğu için
   içindeki h1 kendi marjını taşır. Ölçülen 10/8 — `--hero-gap` ve ondan
   2px eksiği. Doğrudan `.kap` çocuğu olan h1 ise 0 alır; ikisi AYRI. */
.bant-bas{ display:flex; align-items:center; gap:var(--bosluk-18); padding:2px 0 var(--bosluk-20); }
/* h1 İÇİNDE rozet taşıyabilir ("Bildirimler [3 okunmamış]") — blok
   olursa rozet alt satıra düşüyor (slot-1 ölçtü). */
.bant-bas h1{
  display:flex; align-items:center; gap:var(--bosluk-12); flex-wrap:wrap;
  margin:var(--hero-gap) 0 calc(var(--hero-gap) - 2px);
}
.bant-araclar{ margin-left:auto; flex:none; display:flex; align-items:center; gap:var(--bosluk-10); }
/* 🔴 BAŞLIK SATIRININ ALT METNİ AYRI KİP. Banner ailesinin İKİ alt-metin
   ölçüsü var ve ikisi de ölçüldü (slot-1):
     .bant-alt              bandın KENDİ alt satırı — 15.5 · 560px · 2 satır kırpma
     .bant-bas .bant-alt    başlık satırının alt metni — 13.5 · sınırsız · kırpma YOK
   Kırpma yok çünkü yanında araç düğmeleri var ve blok zaten dar.
   ⚠ §18'in `.giris-metni`si (15.5/520px) de uymuyor — üçüncü bir kalem. */
.bant-bas .bant-alt{
  font-size:var(--yazi-13-5); max-width:none;
  display:block; overflow:visible; -webkit-line-clamp:none;
}

/* Bandın araç düğmeleri — KOYU ZEMİNDE CAM KİPİ. Geometri §47
   `.dugme.orta`nın (11/18 · 13.5), üstüne yalnız renk katmanı geliyor.
   Alfa değerleri marka katmanından: `bilesenler.css` alfa yazamaz. */
/* 🔴 §63d'NİN DÖRDÜNCÜ ÖRNEĞİ — ölçüldü 2026-09-03 (slot-program, GÖZLE).
   Token adları kusuru zaten söylüyordu: `--bant-arac-*` = KİMLİK BANDININ
   araç düğmesi, yani koyu kapak görseli üstünde durması gereken kalem.
   Kanon onu `.dugme`nin KAPSAMSIZ varyantı olarak yazmış; açık kartta
   beyaz-üstüne-beyaz oluyor (ölçüldü: color rgb(255,255,255) ·
   background rgba(255,255,255,.12) · kart zemini #ffffff → ~1:1) ve
   DOKUZ düğme görünmez hâle geliyordu. `kapi-komsu` ve `kapi-standart`
   İKİSİ DE yeşildi.
   Artık taban AÇIK yüzey; cam kipi KOYU bağlamlarda geliyor.
   ⚠ Bileşenin şu an tüketicisi 0 (slot-program parçalarını `.hayalet` ve
     `.sayfa-dugme`ye çevirdi) — yani bu düzeltme bir gerileme riski
     taşımıyor, sözleşmeyi AÇIK hâle getiriyor. */
.dugme.cam{
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi);
  color:var(--murekkep);
}
.kimlik-bant .dugme.cam,
.kapak .dugme.cam,
.ozet-karti .dugme.cam{
  background:var(--bant-arac-zemin); border-color:var(--bant-arac-kenar);
  color:var(--kagit);
}
.kimlik-bant .dugme.cam:hover,
.kapak .dugme.cam:hover,
.ozet-karti .dugme.cam:hover{
  background:var(--bant-arac-zemin-2); border-color:var(--bant-arac-kenar-2);
  color:var(--kagit);
}
/* 🔴 KAYNAKTA `.btn` AİLESİNDEN DEĞİL. `.see-all` ve `.icon-btn` kaynağın
   AYRI bileşenleri; §47 geometriyi doğru almış ama KUTU DAVRANIŞI §2'nin
   `.dugme` tabanından miras kalıyordu ve yedi bildirimde birden ayrışıyordu
   (ölçüldü @1440 · slot-1 ②③). Taban `.dugme` bir ızgara/esnek kutu
   kurar — ortalar, sarar, esner; kaynağın araç düğmesi bunların hiçbirini
   yapmıyor: soldan yazar, sarmaz, daralmaz. */
.dugme.cam{
  gap:var(--bosluk-9); justify-content:normal; text-align:left;
  flex-shrink:0; white-space:nowrap;
}
.dugme.cam:hover{ background:var(--bant-arac-zemin-2); border-color:var(--bant-arac-kenar-2); color:var(--kagit); }
/* Düğmenin içindeki ok/ikon kendi ölçüsünü yazar — §2'nin 13.5'i değil
   13px ve satır boyu KİLİTLİ (13px = 1), yoksa düğmenin dikey ortası
   metne göre kayıyor (ölçüldü). */
.dugme.cam i{ font-size:var(--yazi-13); line-height:1; }
/* ⚠ İKON DÜĞMESİNDE GEÇERSİZ: orada ikon düğmenin KENDİ punto'sunu alır
   (16px · @390 15px). Yukarıdaki kural metin düğmesinin küçük okuna aitti
   ve ikon düğmesine de sızdı — ölçüm yakaladı. */
.dugme.cam.ikon i{ font-size:inherit; line-height:1; }
/* 🔴 METİN DÜĞMESİNDE ÖRTÜ DENENDİ VE ÖLÇÜM ÇÜRÜTTÜ. §43'ün
   `.cip::before` örtüsü `position:relative` ister; kaynağın `.see-all`ı
   `static` ve örtü tek 🔴'yı ikiye çıkardı (`minHeight` + `position`).
   Metin düğmesi §29 md.15'in TABANINDA kalır (`min-height:44px`) ve
   ölçümde `sapma` sayılır — arama ekranının `kutuDugme.minHeight`iyle
   aynı kural, aynı gerekçe (md.21). Çizim 43 → 44, bir piksel.
   ⚠ İkon düğmesi AYRI: kaynağı zaten `position:relative` ve kutusu SABİT
   43×43 kare — md.15 orada çizimi bozar, örtü orada bedava. */
/* İkon düğmesi — kaynak `.icon-btn`. Kare, dolgusuz, ızgara ortalı ve
   kendi yazı kipini taşır (16/500/1.55) — §2'nin 13.5/700'ü DEĞİL.
   `grid-template-columns:none`: §47 tek sütun bildiriyor ve ikon o
   sütuna sıkışıyordu; kaynakta örtük sütun kutuyu dolduruyor (41px). */
.dugme.cam.ikon{
  width:43px; height:43px; min-height:auto; padding:0;
  display:grid; place-items:center; position:relative;
  grid-template-columns:none; gap:normal;
  /* 🔴 `.dugme.cam`ın kutu davranışı BURADA GEÇERSİZ: metin düğmesi
     daralmaz ve sarmaz, ikon düğmesi kaynakta ikisini de yapar
     (ölçüldü: flex-shrink 1 · white-space normal). Kardeş kalemler,
     ortak ata — ama davranışları ayrı. */
  flex-shrink:1; white-space:normal;
  font-size:var(--yazi-16); font-weight:var(--agirlik-govde);
  line-height:var(--satir-govde); text-align:start;
}
/* Dokunma hedefi — kutu 43×43 kalır, hedef 44×44 olur (§43'ün yöntemi).
   Kaynak zaten `position:relative`, örtü bedava. */
.dugme.cam.ikon::before{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
@media (max-width:640px){
  /* Kabuğun ≤640 "kompakt see-all"ı düğme kabuğunu SÖKÜYOR (padding:0 ·
     border:none) — bölüm başlıklarında doğru, ama bu düğmeler KOYU BANT
     üzerinde duruyor ve kaybolyorlardı (390px'te yükseklik 15px / border 0
     ölçülmüş). Banttaki kopya kabuğunu bilerek geri alıyor. */
  /* 🔴 Kaynak metin düğmesini dar ekranda KONUMLU yapıyor (ölçüldü:
     masaüstü `static` → @390 `relative`). Kabuğun kompakt kipinin kendi
     bildirimi; kanon çizileni basar, gerekçesini sormaz. */
  .dugme.cam{ padding:0 var(--bosluk-14); height:38px; font-size:var(--yazi-13); position:relative; }
  /* İkon düğmesi dar ekranda BÜYÜR (43 → 44) ve yazısı küçülür (16 → 15).
     Ölçüldü @390: iç sütun 42px (= 44 − 2×1 kenar) · 15px/23.25.
     ⚠ Kutu 44'e çıkınca örtü kutuyla aynı boyda kalır, sorun değil. */
  .dugme.cam.ikon{ width:44px; height:44px; font-size:var(--yazi-15); }
}

/* Bant başlığının yanındaki sayaç rozeti (slot-1 ④).
   🔴 §5 `.rozet.olumlu` YAKIN ama ÜÇ yerde ayrışıyor — 11.5↔12 punto,
   4/12↔5/11 dolgu, `--aksan-cizgi`↔alfalı kenar. Ayrı varyant. */
.rozet.sayac{
  /* 🔴 KUTU KİPİ §5'İN DEĞİL. Rozet `h1`in İÇİNDE bir `<span>` ve kaynak
     ona display bildirmiyor — akış kutusu olarak, satır kutusunun
     içinde çiziliyor. §5'in `inline-flex`i buraya sızınca hem hiza hem
     harf aralığı ayrışıyordu (ölçüldü @1440: FIT `block` · `-1.26px`
     ↔ kanon `inline-flex` · `+0.24px`).
     `letter-spacing:inherit` şart: -1.26px uydurma bir değer değil,
     h1'in `--aralik-baslik-2`si (-.03em × 42px). Kanonun
     `--aralik-genis`i (+.02em) ters yöne gidiyordu. (slot-1 ①) */
  display:block; align-items:normal; gap:normal; min-width:auto;
  letter-spacing:inherit;
  flex:none; white-space:nowrap;
  font-size:var(--yazi-12); font-weight:var(--agirlik-kalin);
  padding:var(--bosluk-5) var(--bosluk-11);
  border-radius:var(--yuvarlak-sm);
  color:var(--aksan); background:var(--aksan-yikama);
  border:var(--cizgi-1) solid var(--aksan-cizgi-3);
}

@media (max-width:640px){
  .bant-bas{ flex-wrap:wrap; gap:var(--bosluk-12); padding-bottom:var(--bosluk-16); }
  .bant-araclar{ margin-left:0; width:100%; }
}


/* =====================================================================
   35 · DURUM EKRANI — kaynak `.dr-*` (assets/css/fit-durum.css)
   ---------------------------------------------------------------------
   ALTI EKRAN TEK BİLEŞEN: 404 · 403 · 500 · bakım · oturum süresi doldu ·
   çevrimdışı. Kaynak bunları ayrı ayrı yazmamış, tek kit paylaşıyorlar;
   ekranlar yalnız hangi PARÇALARI kullandıklarıyla ayrışıyor.
   Ölçüm: slot-1, render edilmiş DOM @1440.

   YAPI:
     .durum-kolon              900px okuma kabı (§23'ün 860'ı DEĞİL)
       .durum-giris            ikon + başlık + açıklama
         .durum-ikon           62px daire · üç durum rengi
       .durum-arama            isteğe bağlı arama satırı
       .durum-blok             ikincil bölümler
       .durum-cikis            yönlendirme kartları ızgarası
       .durum-sik              sık bağlantı çipleri
       .durum-rozet            bağlantı durumu (çevrimdışı)
       .durum-alan             kesikli kenarlı alan adı (bakım)
   ===================================================================== */

.durum-kolon{ max-width:var(--durum-kolon); }

.durum-giris{ display:flex; gap:var(--bosluk-20); align-items:flex-start; }
.durum-ikon{
  flex:none; width:62px; height:62px;
  border-radius:var(--yuvarlak-daire);
  display:grid; place-items:center; font-size:var(--yazi-25);
  background:var(--aksan-yikama); color:var(--aksan-koyu);
}
.durum-ikon.uyari{ background:var(--uyari-yikama); color:var(--uyari); }
.durum-ikon.dur{   background:var(--tehlike-yikama); color:var(--tehlike); }

.durum-giris h2{
  font-size:var(--yazi-23); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-baslik-2); letter-spacing:var(--aralik-baslik);
  margin:0 0 var(--bosluk-8);
}
.durum-giris p{
  font-size:var(--yazi-15-5); font-weight:var(--agirlik-govde);
  line-height:var(--satir-bol); color:var(--murekkep-yumusak);
  max-width:var(--olcu);
  text-align:left; text-align-last:auto;    /* B36 */
}
.durum-giris p+p{ margin-top:var(--bosluk-11); }

.durum-arama{ display:flex; gap:var(--bosluk-10); margin-top:var(--bosluk-24); flex-wrap:wrap; }
.durum-arama input{
  flex:1 1 260px; min-width:0; height:48px; padding:0 var(--bosluk-16);
  font-family:inherit; font-size:var(--yazi-15); font-weight:var(--agirlik-govde);
  color:var(--murekkep); background:var(--zemin);
  border:var(--cizgi-1) solid var(--cizgi); border-radius:var(--yuvarlak-md);
  outline:none;
}
.durum-arama input:focus{ border-color:var(--aksan-koyu); }
.durum-arama .dugme{ height:48px; flex:none; }

.durum-blok{ margin-top:var(--bosluk-34); }
.durum-blok h3{
  font-size:var(--yazi-17); font-weight:var(--agirlik-kalin);
  line-height:var(--satir-baslik); letter-spacing:var(--aralik-baslik);
  margin:0 0 var(--bosluk-10);
}

/* Yönlendirme kartları — "buradan nereye gidebilirsin". `auto-fit` ile
   ekran daraldıkça kolon sayısı kendi düşer, kırılım kuralı gerekmez. */
.durum-cikis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--bosluk-14); margin-top:var(--bosluk-30);
  list-style:none; padding:0;
}
.durum-cikis a{
  display:flex; gap:var(--bosluk-14); align-items:flex-start; height:100%;
  background:var(--kagit); border:var(--cizgi-1) solid var(--cizgi);
  border-radius:var(--yuvarlak-lg); padding:var(--bosluk-18) var(--bosluk-20);
  box-shadow:var(--golge-sm);
  transition:var(--sure) var(--yumusama);
}
.durum-cikis a:hover{
  border-color:var(--aksan); box-shadow:var(--golge-md);
  transform:translateY(-2px);
}
.durum-cikis a>i{
  color:var(--aksan-koyu); font-size:var(--yazi-17);
  margin-top:2px; flex:none; width:20px; text-align:center;
}
.durum-cikis b{
  display:block; font-size:var(--yazi-15); font-weight:var(--agirlik-kalin);
  color:var(--murekkep); margin-bottom:3px;
}
.durum-cikis small{
  display:block; font-size:var(--yazi-13); font-weight:var(--agirlik-govde);
  color:var(--metin-ikincil); line-height:var(--satir-govde);   /* 🔴 1.5 → 1.55 (ölçüldü) */
  text-align:left; text-align-last:auto;    /* B36 */
}

/* 🔴 `list-style:none` ZORUNLU — bu bir `<ul>` ve kabuğun `*{padding:0}`ı
   yalnız dolguyu sıfırlıyor, madde imini değil. Kanonda eksikti: her çipin
   solunda siyah bir disk çiziliyordu (slot-1, 1440 ekran görüntüsü). */
.durum-sik{
  display:flex; flex-wrap:wrap; gap:var(--bosluk-9); margin-top:var(--bosluk-16);
  list-style:none; padding:0;
}
.durum-sik a{
  display:inline-flex; align-items:center; gap:var(--bosluk-8);
  min-height:38px; padding:0 var(--bosluk-14);
  font-size:var(--yazi-13-5); font-weight:var(--agirlik-orta);
  color:var(--murekkep); background:var(--kagit);
  border:var(--cizgi-1) solid var(--cizgi); border-radius:var(--yuvarlak-cip);
  transition:var(--sure) var(--yumusama);
}
.durum-sik a:hover{ border-color:var(--aksan); color:var(--aksan-koyu); }
.durum-sik a i{ font-size:var(--yazi-12); color:var(--aksan-koyu); }

/* Bağlantı durumu rozeti — çevrimdışı ekranı. Nokta `currentColor`dan
   boyanır, yani durum rengi TEK yerde yazılır. */
.durum-rozet{
  display:inline-flex; align-items:center; gap:var(--bosluk-10);
  margin-top:var(--bosluk-22); min-height:44px; padding:0 var(--bosluk-18);
  border-radius:var(--yuvarlak-cip);
  font-size:var(--yazi-14); font-weight:var(--agirlik-kalin);
  background:var(--tehlike-yikama); color:var(--tehlike);
  border:var(--cizgi-1) solid var(--tehlike-cizgi);
  text-align:left; text-align-last:auto;    /* B36 */
}
.durum-rozet.cevrimici{
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  border-color:var(--aksan-cizgi);
}
.durum-rozet .nokta{
  width:9px; height:9px; border-radius:var(--yuvarlak-daire);
  background:currentColor; flex:none;
}

/* Alan adı — bakım ekranında "hangi adres bakımda" bilgisi. Kesikli kenar
   §7'nin boş durum kenarıyla aynı dili konuşur: "burada içerik yok". */
.durum-alan{
  display:inline-block; padding:3px var(--bosluk-10);
  border-radius:var(--yuvarlak-rozet);
  border:var(--cizgi-1) dashed var(--cizgi);
  background:var(--zemin); color:var(--metin-ikincil);
  font-size:var(--yazi-13); font-weight:var(--agirlik-orta);
  font-style:normal;
}

@media (max-width:640px){
  .durum-giris{ flex-direction:column; gap:var(--bosluk-14); }
  .durum-ikon{ width:54px; height:54px; font-size:var(--yazi-22); }
  .durum-giris h2{ font-size:var(--yazi-20); }
  .durum-giris p{ font-size:var(--yazi-15); }
  .durum-arama .dugme{ width:100%; justify-content:center; }
}


/* =====================================================================
   ⛔ [hidden] — TEK YETKİLİ KURAL                (2026-09-01 · 02 §36 · B42)
   ---------------------------------------------------------------------
   B37 "display bildiren HER bileşen `[hidden]` kuralını da yazmalı" demişti
   ama yalnız o turun altı kalemi kapanmıştı. Denetlendi: bu dosyada
   **display bildiren 72 sınıftan 68'i** `[hidden]` kuralı yazmıyordu.
   Ekranda görünür kusur da üretti — `.rozet{display:inline-flex}` yüzünden
   hesabim'in BOŞ ve `hidden` işaretli ikinci rozeti boş bir hap olarak
   çiziliyordu (slot-2 ölçümü, 1440 ekran görüntüsünde görülüyor).

   🔴 NEDEN 68 AYRI KURAL DEĞİL, TEK KURAL: `[hidden]` bir biçim tercihi
   değil, HTML'in ANLAMSAL sözleşmesidir — "bu eleman ekranda yok". Hiçbir
   bileşen kuralının onu ezmesi doğru değil. 68 satır yazmak aynı hatayı
   69. bileşende tekrar etmeye açık bırakırdı; bu kural kapıyı kapatır.

   🔴 NEDEN `!important`: `[hidden]` (0,0,1) özgüllükte ve kanonda ondan
   güçlü seçiciler var (`.kart.panel>.kart-govde:not(.bosluksuz)` (0,4,0)
   gibi). Dosya sonuna koymak yalnız EŞİT özgüllüktekileri yener, daha
   güçlü olanları yenmez. Dosyadaki İKİNCİ `!important` budur (diğeri
   `.dugme[disabled]`in `transform:none`u) ve gerekçesi anlamsaldır,
   estetik değil.

   ⚠ Yukarıdaki tekil `[hidden]` kuralları (`.alan-izgara` `.bos-durum`
   `.ayar-satir` `.bilgi-notu` `.akordeon-kalem` `.alan-dosya-sil`) BİLEREK
   duruyor: her biri kendi bulgusunun (B37 ailesi) kaydını taşıyor ve bu
   kural onları yalnız pekiştirir, çelişmez.
   ===================================================================== */
[hidden]{ display:none !important; }


/* =====================================================================
   66 · BANT YÜKSEKLİK AİLELERİ — kapı ölçütü
   ---------------------------------------------------------------------
   BEYAR KURALI, 2026-09-02. Marka bağımsız, dört markada geçerli:

     · Liste sayfaları kendi aralarında aynı yükseklik
     · Detay sayfaları kendi aralarında aynı yükseklik
     · Yasal sayfalar DETAY grubuna dahil
     · Görselli ve saydam header'lı banner'lar tutarlı

   ── ÖNCE ŞU: KANONDA DEĞER ZATEN VARDI ───────────────────────────────
   Bu blok yazılırken önce `01-tokenlar.md` TARANMADI ve üç token'ın
   kopyası üretildi (`--bant-h`, `--bant-h-derin`, `--kapak-h`). Hata
   ölçümle yakalandı ve geri alındı; kopyalar SİLİNDİ. Kanonun kendi
   kuralı: "token yazmadan önce 01-tokenlar.md taranır."

   Ölçüm o yüzden bir DOĞRULAMA turu oldu ve kanonu haklı çıkardı:

     token                 kanon      ölçülen (60 sayfa)   sonuç
     --------------------  ---------  -------------------  --------
     --banner-h-liste      544 / 587  544 / 587            ✅ tuttu
     --banner-h-detay      560 / 726  560 / 726            ✅ tuttu
     --banner-h-profil     280 / 170  280 / 280            🔴 ÇELİŞTİ

   ── ÖLÇÜM ────────────────────────────────────────────────────────────
   `dump/fit-prototip` · 60 arayüz sayfası (admin-* hariç) · Playwright ·
   1440×1000 ve 390×844 · `getBoundingClientRect` + `getComputedStyle`.
   Lead 12 sayfada BAĞIMSIZ İKİNCİ ÖLÇÜM yaptı, hepsi birebir tuttu.
   Rapor: `rapor/olcum-banner.md` · ham: `rapor/olcum/banner-ham.json`

   🔴 SEÇİCİ TUZAĞI — `#fitModulTop` ve `#fitPlanTop` kabuk JS'i tarafından
   `outerHTML` ile TAMAMEN değiştiriliyor; id'leri render sonrası DOM'da
   YOK. Statik HTML'de bu elemanların adı bile doğru değil. Kapak ailesi
   `.fp-kapak` ile sorgulanır, id ile DEĞİL.

   ── AİLELER ──────────────────────────────────────────────────────────
     AİLE 1 · LİSTE   `.bant`        --banner-h-liste   544/587
              LISTE(21) + DURUM(6) = 27/27 TAM TUTARLI, tek sapma yok.
     AİLE 2 · DETAY   `.bant.derin`  --banner-h-detay   560/726
              DETAY + YASAL. Çoğunluk 5/11 — sapmalar §66a'da.
     AİLE 3 · KAPAK   `.kapak`       --banner-h-profil  280
              11/11 TAM TUTARLI (MODUL 8 + hesabim + iki fitPlanTop).

   ⚠ GÖRSEL VARLIĞI YÜKSEKLİĞİ ETKİLEMİYOR — ölçüldü: DURUM'un 6 GÖRSELSİZ
     sayfası, LISTE'nin 20 GÖRSELLİ sayfasıyla BİREBİR aynı kutuda.
     Beyar'ın "görselli banner'lar tutarlı" kuralı ölçümle DOĞRULANDI;
     görsel bir yükseklik değişkeni değil.

   ⚠ KİMLİK AKIŞI (giris-v1) BU SÖZLEŞMENİN DIŞINDA. `.au-top` bir banner
     değil, kırıntı + iki kolonlu hero + form bölümünün TAMAMI (1296/1596).
     Kaynakta ayrı, dar bir kimlik bandı YOK — yani "KIMLIK banner
     yüksekliği" diye bir değer kanona YAZILAMAZ; olmayan bir bileşene
     değer vermek uydurma olurdu. §61 kimlik akışının kuralları geçerli.
   ===================================================================== */

/* AİLE 2 · DETAY BANDI — 🔴 `--banner-h-detay` ÖLÜ TOKEN'DI.
   `tokenlar.css`te üç dalda tanımlıydı (560 · 617 · 726) ama
   `bilesenler.css`te HİÇBİR TÜKETİCİSİ YOKTU — yani detay ailesi kanonda
   tanımlı ama BASILAMAZ durumdaydı. HANDOFF §5'in "ölü varyant: kural var
   tüketicisi yok" tuzağının birebir örneği; bu satır onu kapatır.
   `.bant`ın kendi `height` kuralını (B25 şerhi, §34) EZMEZ — yalnız
   değeri değiştirir, kip aynı kalır. */
.bant.derin{ height:var(--banner-h-detay); min-height:var(--banner-h-detay); }

/* ---------------------------------------------------------------------
   66a · 🔴 ÇELİŞKİ · KAPAK DAR EKRANDA KÜÇÜLÜYOR MU
   ---------------------------------------------------------------------
   Kanon `--banner-h-profil-dar:170px` diyor ve `.kapak` @≤640 onu
   kullanıyor (satır 1848). Ölçüm FIT'in kapak ailesinde 280 → **280**
   buldu: 11 sayfanın 11'i de dar ekranda KÜÇÜLMÜYOR.

   Ölçüm üç ayrı "profil kapağı" reçetesi olduğunu gösterdi:

     .fp-kapak   280 → 280   MODUL(8) + hesabim + 2 fitPlanTop = 11 sayfa
     .pf-banner  280 → 170   profil-v1 · 1 sayfa
     .cp-banner  150 → 120   antrenor-detay-v1 · 1 sayfa

   Yani kanonun `170`i `.pf-banner`ın değeridir ve TEK sayfadan gelir;
   yaygın olan (11 sayfa) `.fp-kapak` ve o küçülmüyor.

   ✅ ÇÖZÜLDÜ — BEYAR KARARI, 2026-09-02: "kanon yanlış, ölçüm doğru".
      `--banner-h-profil-dar` **170 → 280** çekildi (tokenlar.css).
      `.kapak`ın @≤640 kuralı DURUYOR çünkü yüksekliğin yanında
      `border-radius`u da düşürüyor; artık yalnız yuvarlaklık değişiyor,
      yükseklik iki genişlikte de 280.

   🔴 KALAN KUSUR — üç bileşen aynı tasarım niyetini paylaşıp üç ayrı
      reçete taşıyor (.fp-kapak · .pf-banner · .cp-banner). Kanon en
      yaygın olanı aldı; diğer ikisi kaynakta kusur olarak kayıtlı ve
      DÜZELTİLMEDİ.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   66b · HEADER SAYDAMLIĞI — banner AİLESİNE bağlı, sayfaya değil
   ---------------------------------------------------------------------
   Ölçüldü: 60 sayfanın 48'inde header saydam, 12'sinde opak beyaz. Ayrım
   %100 tek şeye bağlı — sayfa KAPAK ailesini mi kullanıyor:

     .kapak taşıyan sayfa   →  header OPAK   (12 sayfa)
     diğer her aile         →  header SAYDAM (48 sayfa · `.tepede`)

   Gerekçe ölçümde: kapak bir FOTOĞRAF + üstüne binen kimlik kartıdır ve
   saydam header kartın üst şeridini keser (bu kusur v2'de bir kez
   yakalandı — KOPYALAMA-KURALI "JS'in eklediği durum sınıfları" maddesi).
   Düz/derin bantta perde zaten koyu, saydam header bandın parçası okunur.

   🔴 TEK KURAL DIŞI ÖRNEK — `antrenor-detay-v1` (`.cp-top`). Yapısal
      olarak `profil-v1`in birebir aynısı (kaynağın kendi yorumu da
      "referans `.pf-banner`" / "referans `.pf-head`" diyor) ama header
      SAYDAM, profil-v1'de OPAK. Kaynakta kusur — bildirildi, düzeltilmedi.
   --------------------------------------------------------------------- */
body:has(.kapak) .kabuk-basi.tepede{
  background:var(--kagit);
  box-shadow:var(--golge-sm);
}

/* ---------------------------------------------------------------------
   66c · ÖLÇÜLEN SAPMALAR — kaynakta kusur, DÜZELTİLMEDİ
   ---------------------------------------------------------------------
   | sayfa                   | ölçülen        | ailesi          | fark        |
   |-------------------------|----------------|-----------------|-------------|
   | fit-testi-sonuc-v1      | 544 / 587      | DETAY (560/726) | −16 / −139  |
   | yasal-v1                | 544 / 587      | DETAY (Beyar)   | −16 / −139  |
   | antrenor-detay-v1       | 577.78/736.31  | DETAY           | +17.8/+10.3 |
   | profil-v1               | 687.84/876.09  | KAPAK           | başka bileşen|
   | arama-fit-v1 (@390 pb)  | 24px           | 34px            | −10px       |
   | antrenor-ol-v1 (@390)   | pt 77 / pb 14  | pt 96 / pb 34   | −19 / −20   |

   🔴 `fit-testi-sonuc-v1` KARDEŞİYLE ÇELİŞİYOR: `fit-testi-detay-v1` aynı
      `.lib-top` seçicisini kullanıp 560/726 veriyor, sonuç sayfası 544/587.
      İki kardeş ekran, iki farklı aile.

   🔴 `antrenor-detay-v1` KENDİ NİYETİNE OTURMUYOR. Kaynağın kod yorumu:
      "Yüksekliği flex:1; kabuğun kilitlediği aile sabitinden (560/617/726)
      artan alanı yutuyor, böylece toplam her genişlikte sabite oturuyor."
      Ölçülen değer o sabite oturmuyor — kaynağın kendi hedefiyle çelişen,
      ölçülmüş kusur.

   ⚠ `yasal-v1` fiilen bir LİSTE bandı taşıyor. Beyar "yasal detay grubuna
     dahil" dediği için kanon onu DETAY sayar; kaynak sapması burada kayıtlı.
   --------------------------------------------------------------------- */

/* =====================================================================
   67 · MOBİL KABUK SÖZLEŞMESİ — kapı ölçütü
   ---------------------------------------------------------------------
   BEYAR KURALI, 2026-09-02. Marka bağımsız, DÖRT MARKADA geçerli:

     · Alt gezinti çubuğundaki ikonlar her ekranda AYNI SIRADA
     · Yan menü · üst çubuk · alt çubuk — markanın her ekranında birebir aynı
     · KABUK EKRANIN DEĞİL MARKANIN MALIDIR
     · Alt çubuğun YAPISI dört markada aynı: kaç kalem, hangi sırada,
       hangisi FAB. İçerik markaya göre değişir, POZİSYON ROLÜ SABİT.

   ── BU BLOK NEDEN VAR ────────────────────────────────────────────────
   Kanon kabuğun yalnız İKİ diliminianlatıyordu:
     §26  kenar kalemleri (sağ şerit · kenar sekmesi · yüzen düğmeler)
     §27  kabuk gövdesinin TİPOGRAFİ katmanı
   §27 kendi şerhinde eksiği zaten kaydetmişti:
     "Süs kalemleri (marka değiştirici hapları, mağaza rozetleri, avatar
      menüsü, mega menü, çekmece) hâlâ markanın kendi kabuk dosyasından
      geliyor. SIRADAKİ DİLİM ORASI."
   §67 o dilimdir. Yeni bir standart icat etmiyor; kanonun kendi kaydettiği
   boşluğu kapatıyor.

   ── ÖLÇÜM ────────────────────────────────────────────────────────────
   FIT : `dump/fit-prototip` · 61 sayfa · 390×844 · render edilmiş DOM
   DIET: `dump/diet-hesap/<marka>/sayfa.html` · render edilmiş dump · 3 sayfa
   🔴 YOL ŞERHTE GLOB İLE YAZILAMAZ. Özgün hâlinde <marka> yerine
      yıldız-eğik çizgi vardı ve o iki karakter CSS'te ŞERH KAPANIŞIDIR:
      şerh ORADA bitiyor, kalan düzyazı CSS diye ayrıştırılıyor ve
      ayrıştırıcı arkasındaki `:root{--alt-cubuk-h…}` bloğunu YUTUYORDU.
      Ölçüldü: 13 FIT ekranının 13'ünde `--alt-cubuk-h` sayfada
      ÇÖZÜLMÜYORDU; §67'nin kendi token bloğu ölü doğmuştu.
      Kapı: `scripts/olcum/kapi-yorum.mjs`.
   Rapor: `rapor/olcum-mobil-kabuk.md`
   ⚠ GASTRO ve GOURMET ÖLÇÜLEMEDİ — depoda dump'ları yok. Kural dört
     marka için yazıldı ama YALNIZ İKİSİNDE doğrulandı. Diğer ikisi
     geldiğinde bu blok yeniden sınanır.
   ===================================================================== */

/* ---------------------------------------------------------------------
   67.1 · ALT ÇUBUK — YAPI SÖZLEŞMESİ
   ---------------------------------------------------------------------
   ÖLÇÜLEN YAPI — iki markada da AYNI ve bu tesadüf değil, sözleşmedir:

     kalem sayısı   5
     FAB pozisyonu  3 (orta)
     yükseklik      64px
     dip payı       14px
     kalem kipi     <a> · ikon + etiket, dikey

   FIT'te 59/61 sayfada TEK dizi ölçüldü — sıra hiç bozulmuyor, çünkü
   kabuk tek bir `BOTTOM` dizisinden basılıyor. Yapısal olarak bozulamaz
   ve kanon bunu şart koşar: alt çubuk SAYFA MARKUP'INDAN basılmaz.

   🔴 ALT ÇUBUK GİZLENEBİLİR AMA DEĞİŞTİRİLEMEZ. Meşru OLMAYAN, çubuğu
      farklı kalemlerle basmaktır.

   ⚠ BİR ÖLÇÜM DÜZELTİLDİ. İlk turda `dadafit-hub-v1`in çubuğu
     `display:none` görünmüştü; bu bir ÖLÇÜM ARTIĞIYDI. Sayfa 40+ harici
     Unsplash görseli çekiyor ve `file://` altında `load` olayı hiç
     bitmiyor → Playwright zaman aşımına düşüp kabuk kurulmadan ölçüyordu.
     `domcontentloaded` + `.bottom-nav` beklemesiyle yeniden ölçüldü
     (lead bağımsız doğruladı): çubuk ORADA — `display:flex` · z90 · 64px
     · 5 kalem, diğer 59 sayfayla birebir aynı.
     🔴 DERS: `networkidle` beklemek harici varlık çeken sayfalarda YANLIŞ
        ÖLÇÜM üretir ve yokluk gibi görünür. Kabuk ölçümünde bekleme
        ölçütü `domcontentloaded` + hedef elemanın kendisidir.
     Kabuğu gerçekten olmayan tek sayfa `index.html` — o bir geliştirme
     dizini, ürün ekranı değil.
   --------------------------------------------------------------------- */

:root{
  --alt-cubuk-h:64px;          /* ölçüldü · FIT 59 sayfa */
  --alt-cubuk-dip:14px;        /* ölçüldü */
  --alt-cubuk-kalem:5;         /* SÖZLEŞME · dört markada aynı */
  --alt-cubuk-fab-poz:3;       /* SÖZLEŞME · orta kalem */
}

/* ---------------------------------------------------------------------
   67.2 · POZİSYON ROLLERİ — ✅ BEYAR KARARI, 2026-09-02
   ---------------------------------------------------------------------
   Beyar'ın kuralı: "pozisyon rolü sabit kalır, içerik markaya göre
   değişir." Ölçüm YAPIYI doğruladı (5 kalem · FAB 3) ama ROLLERİ
   doğrulamadı — iki marka yalnız TEK pozisyonda anlaşıyordu:

     poz  DIET (ölçüldü)                  FIT (ölçüldü)                 v2
     ---  ------------------------------  ----------------------------  ------
      1   Sağlık Araçları  fa-toolbox     Ana Sayfa      fa-house       FARKLI
      2   Beslenme         fa-seedling    Hareketler     fa-person-run  ✅ AYNI
      3   Diyetisyen       fa-user-doctor Programlar     fa-dumbbell    FARKLI ← FAB
      4   Programlar       fa-clipboard   Programlarım   fa-dumbbell    FARKLI
      5   Ana Site         fa-house       Profil         fa-user        FARKLI

   `fa-house` Diyet'te 5., FIT'te 1. pozisyondaydı; ortadaki FAB Diyet'te
   UZMANA, FIT'te İÇERİK MERKEZİNE gidiyordu. Beyar'ın gördüğü tutarsızlık
   buydu ("Diyet'in mobilinde ortada profil ikonu var" — ölçüm o ikonun
   `fa-user-doctor`, yani DİYETİSYEN olduğunu gösterdi).

   🔴 ROL TABLOSU ÖLÇÜMLE BELİRLENEMEZ. İki markanın çoğunluğu yok
      (2 marka, 1 kesişim). Kanon tabloyu UYDURMADI, Beyar'a sordu.

   ── KANON TABLOSU (onaylandı) ────────────────────────────────────────
   Her pozisyon, DÖRT markanın da SAYFASI OLAN bir role bağlandı — yani
   hiçbir marka için boş kalmıyor ve "yer tutucu kalem" doğmuyor.

     poz  ROL       ne demek                        diet          fit
     ---  --------  ------------------------------  ------------  --------------
      1   KEŞİF     markanın araç/kütüphane girişi  Sağlık Araç.  Hareketler
      2   ÖZ        markanın ana içerik ekseni      Beslenme      Programlar
      3   UZMAN     uzmanla buluşma          ⭐FAB   Diyetisyen    Antrenörler
      4   KİŞİSEL   kullanıcının kendi alanı        Planım        Programlarım
      5   HESAP     profil / hesap                  Hesabım       Profil

   Gastro'da 3. pozisyon Şef, Gourmet'te İşletme olur — ikisi de ölçülmedi
   (dump yok), tablo onlara UYGULANIR ama DOĞRULANMADI.

   ── 67.3 · ETİKET DE ORTAK · BEYAR KARARI, 2026-09-02 ────────────────
   "Rol tablosunda etiketler de ortak olacak, sadece pozisyon değil.
    Rol aynıysa ETİKET de aynı olmalı. Markaya göre değişen sadece o
    rolün İÇERİĞİ olacak, rolün ADI değil."

   Yani alt çubuk KABUK KELİME DAĞARCIĞI taşır, marka kelime dağarcığı
   değil. Gerekçe ekosistemde: sol marka rayı kullanıcıyı yedi marka
   arasında gezdiriyor; pozisyon sabit ama kelime değişirse kullanıcı her
   geçişte çubuğu yeniden okumak zorunda kalır.

     poz  ETİKET (dört markada AYNI)   İÇERİK (markaya göre değişir)
     ---  --------------------------   ---------------------------------
      1   Keşfet                       fit: hareket kütüphanesi
                                       diet: besin kütüphanesi
      2   Programlar                   fit: program merkezi
                                       diet: beslenme programları
      3   Uzmanlar          ⭐FAB       fit: antrenörler
                                       diet: diyetisyenler
      4   Planım                       fit: programlarım
                                       diet: planım
      5   Hesabım                      dört markada da hesap alanı

   ── ETİKETLERİN KAYNAĞI — hangisi ölçüldü, hangisi seçildi ───────────
   🔴 Bu ayrım önemli: ikisi ölçümle geldi, üçü seçim.

     poz 2 "Programlar"  ✅ ÖLÇÜLDÜ — İKİ MARKADA DA BU KELİME ZATEN VAR.
                            diet `/programlar` · fit `label:'Programlar'`
                            (fit-shell.js). Ortak kelime uydurulmadı,
                            bulundu.
     poz 4 "Planım"      ✅ ÖLÇÜLDÜ — İKİ MARKADA DA VAR. diet-hesap
                            dump'ında `planim` sayfası; fit'te header
                            düğmesi `.btn-plan` metni "Planım" (390px
                            kabuk ölçümünde okundu).
     poz 5 "Hesabım"     ✅ BEYAR SEÇTİ — "kullanıcının kendi alanı,
                            profil sayfasından daha geniş". Diyet zaten
                            "Hesabım" diyordu, FIT "Profil"; Beyar
                            Diyet'inkini dördüne birden verdi.
     poz 1 "Keşfet"      ⚠ SEÇİM — hiçbir markada bu kelime ölçülmedi.
                            Rol adı olarak seçildi çünkü iki markanın
                            kalemi de (Sağlık Araçları · Hareketler) bir
                            KÜTÜPHANE girişiydi ve ortak bir üst ad
                            gerekiyordu.
     poz 3 "Uzmanlar"    ⚠ SEÇİM — hiçbir markada bu kelime ölçülmedi.
                            "Diyetisyen" ve "Antrenörler" aynı rolün iki
                            marka adıdır; ortak ad seçildi.

   ⚠ İKİ SEÇİM KALEMİ (1 ve 3) BEYAR ONAYINA AÇIK. Ölçümle gelmedikleri
     için kanon onları KAYNAK GÖSTEREREK değil SEÇİM olarak kaydediyor;
     başka bir kelime denirse bu satırlar değişir, tablo değişmez.

   ⚠ ALAN ÖZGÜLLÜĞÜ MALİYETİ — lead'in şerhi, kayda geçsin: "Hareketler"
     kullanıcıya "Keşfet"ten daha çok şey söyler. Ortak etiket bu
     özgüllüğü kaybettirir. Beyar bunu bilerek seçti; kazanç markalar
     arası kabuk kararlılığı, bedel alan özgüllüğü.

   ── BU KARARIN İKİ MARKAYA MALİYETİ ──────────────────────────────────
   Ölçülen v2 çubukları ile kanon tablosunun farkı — her satır bir
   DEĞİŞİKLİK, hiçbiri yeni EKRAN değil (beşinin de sayfası zaten var):

     poz  FIT v2 (ölçüldü)   → kanon      DIET v2 (ölçüldü)  → kanon
     ---  ------------------   ---------   -----------------   ---------
      1   Ana Sayfa            Keşfet      Sağlık Araçları     Keşfet
      2   Hareketler           Programlar  Beslenme            Programlar
      3   Programlar     FAB   Uzmanlar    Diyetisyen    FAB   Uzmanlar
      4   Programlarım         Planım      Programlar          Planım
      5   Profil               Hesabım     Ana Site            Hesabım

   🔴 İKİ KAPI KAPANIYOR, İKİSİ DE BAŞKA YERDEN AÇIK KALIYOR:
     · FIT'te "Ana Sayfa" çubuktan düşer — hub'a erişim header'ın marka
       kilidinden ve çekmeceden sürüyor.
     · DIET'te "Ana Site" (dadagastro.com) çubuktan düşer — ekosistem
       geçişi sol marka rayının işi, alt çubuğun değil. Ray zaten her
       ekranda duruyor (§26 · `--kat-ray`).
   ⚠ İkisi de DOĞRULANMALI: kapının gerçekten açık kaldığı, kural
     uygulandıktan sonra ekranda sınanır. "Başka yerden erişilir" bir
     varsayımdır; ölçülmeden kapanmış sayılmaz.

   ✅ YAN KAZANÇ — ÇİFT GLİF KUSURU KENDİLİĞİNDEN KAPANIYOR. v2'de
      "Programlar" (FAB) ve "Programlarım" ikisi de `fa-solid fa-dumbbell`
      taşıyordu; yan yana iki nav kalemi aynı glifle duruyordu. Yeni
      tabloda FAB uzman rolüne geçtiği için glif de ayrışıyor.
      ⚠ Beyar "şimdilik dursun" dedi — glif DEĞİŞTİRİLMEDİ, kusur
        `02-bilesenler.md`de kayıtlı. Rol tablosu uygulandığında bu kalem
        yeniden bakılır; kanon glifi kendi kararıyla değiştirmez (İKON
        SEÇİMİ KANON KARARI DEĞİL).
   --------------------------------------------------------------------- */

/* 🔴 ALT ÇUBUK MOBİL KAPSAMDA BİLDİRİLİR — ölçüldü, 2026-09-02, FIT v3.
   Bu üç kural bir tur önce KAPSAMSIZ yazılmıştı ve 1440'ta da
   `display:flex` veriyordu. Kusur ÜÇ TUR GÖRÜNMEDİ çünkü ölü varyanttı:
   kanonun hiçbir ekranı `.alt-cubuk` adını TAŞIMIYORDU (Diyet ekranları
   kaynak adıyla `<nav class="bottom-nav">` basıyor). Kanonun kendi tuzak
   listesi bunu yazmış: "ölü varyant: kural var tüketicisi yok."

   FIT v3'te kabuk kapsayıcıları ikili ada geçince kural İLK KEZ bir
   tüketiciye kavuştu ve çubuk masaüstünde SAYFANIN TEPESİNE çizildi,
   header'ı örttü (Beyar'a giden ilk ekranda gözle görüldü).

   Ölçüt kaynağın kendi bildirimi — `fit-shell.css`:
       .bottom-nav{display:none}                       ← taban
       @media (max-width:640px){ .bottom-nav{display:flex} }
   Yani çubuk YALNIZ ≤640'ta vardır. Kanon artık aynı kapıyı kuruyor.
   ⚠ "Diyet ekranlarında BAYT-NÖTR, `.alt-cubuk` adını taşıyan eleman yok"
     notu 2026-09-12'de GEÇERSİZ oldu: `components/public/header.blade.php`
     alt çubuğa `class="bottom-nav alt-cubuk"` basıyor. Sarmalayıcı düştüğü
     için `.alt-cubuk` (0,1,0) özgüllükle `.bottom-nav{left:16px}`ı eziyor,
     çubuk 390'da kenardan kenara yapışıyordu (ölçüldü: donör x=16 w=358,
     biz x=0 w=390, align-items center yerine stretch). `alt-cubuk.css`'in
     kendi sözleşmesi zaten "Seçiciler `:where(.alt-cubuk)` ile kapsanır,
     yani kap SIFIR özgüllük" diyor — sarmalayıcı geri kondu. */
:where(.alt-cubuk){ display:none; }
@media (max-width:640px){
:where(.alt-cubuk){
  position:fixed; left:0; right:0;
  bottom:var(--alt-cubuk-dip);
  height:var(--alt-cubuk-h);
  z-index:var(--kat-alt-bar);
  display:flex; align-items:stretch;
}
:where(.alt-cubuk) .ac-kalem{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:var(--bosluk-3);
  font-family:inherit; text-decoration:none;
  /* 🔴 DOKUNMA HEDEFİ — kalem yüksekliği çubuğun tamamı, 64px.
     WCAG 2.5.5'in 44px tabanını kalemin KENDİSİ karşılar; ikon
     ölçüsü değil kalem kutusu hedefi tanımlar. */
  min-height:var(--alt-cubuk-h);
}
/* Ortadaki FAB — pozisyon 3. Kabuk basar, sayfa basmaz. */
:where(.alt-cubuk) .ac-kalem.ac-orta .ac-fab{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:var(--yuvarlak-lg);
  background:var(--aksan-koyu); color:var(--kagit);
  box-shadow:var(--golge-yuzen);
}
}   /* ← @media (max-width:640px) · alt çubuk mobil kapsamı biter */

/* 🔴 GÖVDE ALT DOLGUSU — alt çubuk sabit, içeriğin altına biner.
   Gövde kendi dibine çubuğun yüksekliği + dip payı kadar nefes bırakır;
   yoksa son eleman çubuğun ALTINDA kalır ve okunamaz. */
@media (max-width:640px){
  /* Gövdenin kanonik adı `main.page-main` — kaynak adı korundu (§19'un
     `.kap`ı gibi). Uydurma ad YAZILMADI: `deneme/*.html` ve kaynak
     birlikte `<main class="page-main" id="pageMain">` basıyor. */
  main.page-main{
    padding-bottom:calc(var(--alt-cubuk-h) + var(--alt-cubuk-dip) + var(--bosluk-16));
  }
}


/* =====================================================================
   68 · YÜZEN İSTİF SÖZLEŞMESİ — kapı ölçütü
   ---------------------------------------------------------------------
   BEYAR KURALI, 2026-09-02. Marka bağımsız, dört markada geçerli:

     · Fab'lar üst üste binmeyecek
     · Sohbet paneli açıkken arkasında başka fab görünmeyecek
     · İstif sırası ve z-index KANONDA tanımlı, ekran başına çözülmeyecek

   ── ÖLÇÜM ────────────────────────────────────────────────────────────
   `dump/fit-prototip` · 60 sayfa · 1440×900 ve 390×844 · misafir + oturum
   açık · `position:fixed|sticky` olan TÜM elemanlar taranıp dikdörtgenleri
   ikişerli kesiştirildi (kesişim viewport'a KIRPILARAK — kırpmasız ölçüm
   sahte pozitif veriyor: kapalı `.ff-sheet` `translateY(100%)` ile ekran
   dışında durur ama ham dikdörtgeni yine kesişir).
   Rapor: `rapor/olcum-istif.md`

   ── ✅ KANONUN DOĞRULANAN KISMI ──────────────────────────────────────
   Merdivenin 55/60/70/71/72/73/94/95/96/97/98 kademeleri render'da
   BİREBİR tuttu. §26'nın dip ofset iddiası da bağımsız doğrulandı:

     ölçülen boşluk        1440    390
     fab ↔ başa dön        14px    7px     ✅ kaynağın kendi yorumuyla birebir
     fab ↔ alt çubuk        —      7px     ✅
     44px dokunma hedefi   0 ihlal 0 ihlal ✅ (to-top 48 · fab 56 · nav 44–52)

   Yani "fab'lar üst üste binmeyecek" kuralı DİNLENME HÂLİNDE zaten
   sağlanıyor. İhlaller başka yerde çıktı — aşağıda.
   ===================================================================== */

/* ---------------------------------------------------------------------
   68.1 · 🔴 MERDİVEN YARIM — beş kademe kanonda YOK
   ---------------------------------------------------------------------
   Render'da GERÇEKTEN kullanılan ama `tokenlar.css`te bildirilmemiş
   z-index değerleri:

     z    kim kullanıyor                          durum
     ---  --------------------------------------  ---------------------
     42   `.ff-bar` filtre çubuğu · 6 sayfa       kanonda YOK
     85   `.sa-rail` sol marka rayı               kanonda YOK
     90   `.bottom-nav` mobil alt çubuk           ✅ v3'te bildirildi
     93   `.sheet-overlay` · 1 sayfa              kanonda YOK
     120  `#rpOverlay`  \ profil-v1'in kendi      kanonda YOK
     121  `#rpModal`    / hareket havuzu seçici   🔴 `--kat-modal`ı (98) AŞIYOR

   🔴 `rp-modal` EKRANA ÖZEL KURALIN TA KENDİSİ: bir sayfa kanonun tepe
      kademesini (98) aşan kendi numarasını icat etmiş. Beyar'ın "ekran
      başına çözülmeyecek" dediği şey birebir bu. İç içe modal gerçek bir
      ihtiyaçsa kanonda kendi kademesini alır; değilse 97/98'e iner.
      DÜZELTİLMEDİ — karar Beyar'ın.

   ⚠ BU BEŞİ TÜKETİCİSİYLE BİRLİKTE BİLDİRİLİR, ÖNCE DEĞİL. Kanon ölü
     token üretmez; `--kat-alt-bar` bu turda bildirildi çünkü §67 ona
     tüketici doğurdu. Kalan dördü kendi bileşenleri kanona girdiğinde.

   ⚠ AYRICA `01-tokenlar.md` merdiveni 17 kademe belgeliyor ama
     `tokenlar.css` yedisini hiç bildirmemiş (belge/CSS kayması,
     tokenlar.css `--kat-alt-bar` şerhinde kayıtlı).
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   68.2 · 🔴 z95'İ ÜÇ AYRI BİLEŞEN PAYLAŞIYOR
   ---------------------------------------------------------------------
   Ölçüldü — aynı sayıda üç farklı anlam:

     `#msjPanel`       sohbet panelinin KENDİSİ   (--kat-sohbet:95)
     `#drawerOverlay`  çekmece perdesi            (--kat-cekmece-ortu:95)
     `#cookieBanner`   çerez şeridi               (kanonda TOKENI YOK)

   Üçü aynı anda tetiklenmediği için bugün çakışmıyorlar — ama hangisinin
   üstte kalacağı z-index'le DEĞİL, DOM SIRASIYLA belirleniyor. Bu,
   deponun kendi şerhinin yasakladığı desen: "iki dosya aynı seçiciyi
   tanımlar, yükleme sırası davranışı belirler."

   ⚠ `01-tokenlar.md` bu çelişkiyi ZATEN kaydetmişti ("`.cookie-banner`
     (95) = `.drawer-overlay` (95)"). Ölçüm onu doğruladı ve ÜÇÜNCÜ bir
     kullanıcı ekledi. Çözüm önerisi: çerez şeridi kendi adını alsın;
     karar Beyar'ın, kanon kendi başına ayırmadı.

   ⚠ `--kat-yuzen-dugme:73` ve `--kat-sohbet-dugme:73` TEK bir gerçek
     düğmeyi (`#msjFab`) iki adla tanımlıyor. Çakışma değil, gereksiz
     ikilik; birleştirme ayrı tur işi (tüketici taraması gerektirir).
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   68.2b · 🔴🔴 SAYI YALAN SÖYLEYEBİLİR — YIĞIN BAĞLAMI TAVANI
   ---------------------------------------------------------------------
   Bu bulgu merdivenin ANLAMINI değiştiriyor ve kanonda hiç yazılı değildi.

   `.acct-menu` · `.dropdown` · `.mega` · `.tb-lang-menu` hepsi z **80**
   (`--kat-menu`). Ama dördü de `header`in İÇİNDE yaşıyor ve `header`
   z **60** ile KENDİ YIĞIN BAĞLAMINI kuruyor. Yığın bağlamı bir TAVANdır:
   içerideki hiçbir eleman, kaç numara alırsa alsın, dışarıdaki 60'tan
   büyük bir kardeşi geçemez.

   Sentetik sınamayla kanıtlandı (slot ölçümü): header'ın içine z 9999
   konsa bile `.kenar-sekmesi` (z72, header'ın DIŞINDA kardeş) onu yener.

   🔴 Yani `--kat-menu:80` sayısı YANILTICI. Menüler 71/72/73'ün üstüne
      ÇIKAMAZ; merdivende 80'de görünmeleri gerçeği yansıtmıyor.

   ⚠ BUGÜN GÖRÜNÜR KUSUR YOK — ölçüldü: `.acct-menu`nün sağ kenarı 1308px,
     `.kenar-serit` 1432'de başlıyor, arada 124px boşluk var. Kusur GİZLİ:
     menü genişlerse ya da kenar sekmesi büyürse anında ortaya çıkar.

   🔴 KANON DERSİ: bir kalemin z-index'ini yazmak, onun o kademede
      ÇİZİLECEĞİ anlamına GELMEZ. Kapsayan yığın bağlamı kuralı kalıtımı
      yener — §21 ve §24'ün "kapsayan bağlam öldürüyor" tuzağının
      z-index'teki karşılığı. Merdivene yeni kademe yazılırken kalemin
      KİMİN İÇİNDE olduğu da bakılır.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   68.2c · ✅ ÇÖZÜLEN İKİ BELGELİ ÇELİŞKİ
   ---------------------------------------------------------------------
   `01-tokenlar.md` iki çelişki kaydetmişti; ikisi de ölçüldü:

   1 · "header (60) üst banttan (70) alçakta, ikisi de fixed ve bitişik"
       → ✅ ZARARSIZ. Ölçüldü (2 sayfa × 3 kaydırma konumu): topbar hep
         y 0–40, header hep y 40–113. ASLA piksel paylaşmıyorlar.
         Sıra ters ama geometri hiç dokunmadığı için görünür kusur YOK.
         ⚠ Kırılgan: biri büyürse çakışma anında doğar.

   2 · "`.cookie-banner` (95) = `.drawer-overlay` (95)"
       → 🔴 DOĞRULANDI. `elementFromPoint` ile doğrudan sınandı: DOM
         sırası [drawerOverlay, cookieBanner], eşit z'de SONRAKİ kazanır,
         yani çerez şeridi çekmece perdesinin ÜSTÜNDE boyanıyor.
         Davranış z-index sözleşmesinden değil DOM EKLEME SIRASINDAN
         geliyor — belgelenmemiş, kırılgan bir tesadüf.

   ⚠ ÇAPRAZ DOĞRULAMA: lead'in belge taramasıyla bulduğu yedi eksik kademe
     (1 · 42 · 80 · 85 · 90 · 93 · 94), slotun BAĞIMSIZ render ölçümüyle
     birebir eşleşti — `footer.orange`=1 · `.ff-bar`=42 · `.acct-menu`=80 ·
     `.sa-rail`=85 · `.bottom-nav`=90 · `.sheet-overlay`=93 ·
     `.lst-side`(kaydırmada sticky→fixed)=94. Belge doğru, yalnız
     `tokenlar.css`e geçmemiş.

   ⚠ `--kat-yuzen-dugme` ile `--kat-sohbet-dugme` İKİ AYRI ELEMAN DEĞİL —
     ölçüldü: tek bir `#msjFab` düğmesi iki adla anılıyor. Çakışma yok,
     gereksiz ikilik.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   68.3 · 🔴 ÖLÇÜLEN ÇAKIŞMALAR — kaynakta kusur, DÜZELTİLMEDİ
   ---------------------------------------------------------------------
   A · KASITLI VE DOĞRU (60 sayfanın hepsinde, ✅ kanonla uyumlu)
       `.topbar`(70) ∩ `.fb-rail`(71) · `header`(60) ∩ `.fb-rail`(71) ·
       `.fb-rail`(71) ∩ `.feedback-tab`(72)
       §26'nın "kenar şerit üst bandın ÜSTÜNDEN geçer" kuralı ekranda
       doğrulandı.

   B · 🔴 ALT ÇUBUK SEKME RAYINI ÖRTÜYOR — @390, en ciddi bulgu
       `antrenor-detay-v1` · `nav.bottom-nav`(z90) ∩ `div.cp-tabbar`(z40)
       🔴 İKİ SLOT ÇELİŞTİ, LEAD HAKEMLİK ETTİ. Bir slot çakışmayı
       ölçtü, diğeri CSS'e bakıp ("`position:sticky; top:62px`, yani
       yukarı yapışır") reddetti. Lead dört kaydırma konumunda ölçtü:

         scrollY    cp-tabbar        bottom-nav      kesişim
         -------    --------------   -------------   -------
             0      766.3 – 833.3    766.0 – 830.0   **63.7px** 🔴
           200      566.3 – 633.3    766.0 – 830.0        0px
           600      166.3 – 233.3    766.0 – 830.0        0px
          1500       62.0 – 129.0    766.0 – 830.0        0px

       ÇAKIŞMA GERÇEK AMA YALNIZ AÇILIŞ ANINDA: sticky eleman scroll 0'da
       henüz `top:62px` çapasına ULAŞMAMIŞTIR, doğal akış konumundadır ve
       o konum ekranın dibine denk gelir. Kaydırma başlar başlamaz ray
       yukarı çıkar ve çakışma biter.

       🔴 SLOTUN HATASI ÖĞRETİCİ: `position:sticky; top:62px` bildirimini
          OKUYUP konumu türetmek yanlış sonuç verdi. Sticky bir elemanın
          nerede DURDUĞU kaydırma durumuna bağlıdır ve ancak RENDER
          EDİLEREK bilinir — "kaynağı render et, CSS okuma" kuralının
          konuma düşen hâli. Kural bu turda ilk kez KONUM için kırıldı.

       ⚠ AÇILIŞ ANI İHMAL EDİLEBİLİR DEĞİL: kullanıcının sayfayı ilk
         gördüğü hâl budur ve sekme rayı o an %95 örtülü.
       Kök sebep: `.cp-tabbar` sticky ve z40; alt çubuk fixed ve z90.
       §67'nin gövde alt dolgusu kuralı bunu ÇÖZMEZ — gövde dolgusu
       akıştaki son elemanı korur, akışın ORTASINDAKİ sticky rayı değil.

   C · 🔴 ÇEREZ ŞERİDİ SAYFANIN KENDİ İÇERİĞİNİ GİZLİYOR
       @1440 · 10 sayfada sticky yan panellerin alt 55–78px'i çerez
       şeridinin (z95) altında (`ab-side` `lst-side` `ed-track` `ft-side`
       `au-visual` `about-figs` `plan-sum` `lg-side` `ff-bar`).
       @390 · DAHA AĞIR — `egzersiz-kutuphane-v1` ve `program-liste-v1`de
       filtre çubuğunun **116px'inin 116'sı**, yani TAMAMI örtülü:
       ilk ziyarette süzgeç hiç erişilemiyor.
       ⚠ Bu iki fab'ın binmesi değil ama Beyar'ın istif kuralının ruhuna
         giriyor: geçici bir şerit kalıcı içeriği yutuyor.

   D · ✅ ÇEREZ/YÜZEN ÇÖZÜMÜ ÇALIŞIYOR ama İKİ AYRI STRATEJİ
       `to-top` çerez açıkken `--bc-lift` ile YUKARI KAYIYOR (390'da
       148 → 348px, çakışma sıfır ölçüldü). `#msjFab` ise KAYMIYOR,
       `.msj-cerez` ile tamamen GİZLENİYOR. İkisi de doğru sonuç veriyor
       ama kanon bu ikiliği hiçbir yerde açıklamıyor.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   68.4 · 🔴 SOHBET AÇIKKEN — GÖRSEL DEĞİL, ODAK SIZDIRIYOR
   ---------------------------------------------------------------------
   Beyar'ın kuralı: "Sohbet paneli açıkken arkasında başka fab
   görünmeyecek."

   ✅ GÖRSEL TARAFTA SORUN YOK. Panel açıkken `#msjOrtu` (z94, tam ekran,
      %50 karartma) header · topbar · fb-rail · feedback-tab · footer ·
      `#msjFab`ın kendisi · sayfaya özel sticky panelleri örtüyor; panel
      (z95) onun da üstünde. Fare kullanıcısı gizli hiçbir şeye erişemiyor.

   🔴 KLAVYE TARAFINDA SIZDIRIYOR. `fit-mesaj.js`in `ac()` fonksiyonu
      yalnız `Esc`i dinliyor (`fit-mesaj.js:726`); Tab döngüsü
      KİLİTLENMİYOR, sayfanın geri kalanına `inert`/`aria-hidden`
      uygulanmıyor. Ölçülen sıra (hesabim-v1, 1440, panel açık):

        0–5    panel içi   6 odaklanabilir öğe
        7      panel DIŞI  atlama bağlantısı        ← görünmüyor
        8–11   panel DIŞI  header bağlantıları      ← görünmüyor
        12–15  panel DIŞI  `.bs-item` MARKA GEÇİŞİ  ← görünmüyor
        16     panel DIŞI  dil düğmesi              ← görünmüyor
        22–24  panel DIŞI  zil · "Giriş Yap"        ← görünmüyor

      Yani klavye kullanıcısı "sohbetteyim" sanırken Enter'a basıp BAŞKA
      MARKAYA geçebilir ya da giriş akışını tetikleyebilir. Beyar'ın
      tarif ettiği ihlalin ta kendisi — görünürlük değil, ERİŞİLEBİLİRLİK
      düzeyinde.

   ⚠ LEAD BAĞIMSIZ DOĞRULAYAMADI. Panelin açılması antrenörü olan
     tohumlanmış bir oturum gerektiriyor (`dm_fit_mesaj_v1`); antrenörsüz
     üyede `#msjFab` BOŞ KİPTE (`.is-bos`) bir `<a>` olarak duruyor ve
     panel hiç açılmıyor (§26 `.yuzen-dugme.bos`). Bulgu slot ölçümüne
     dayanıyor, kanıt izi raporda satır satır kayıtlı; lead yalnız
     durumu kuramadığı için ikinci kez ölçemedi. TEKRAR ÖLÇÜLMELİ.

   ⚠ İKİNCİL SONUÇ: Tab kaçışı çekmece düğmesine de ulaşabiliyor. Çekmece
     açılırsa `.drawer-overlay`(95) ile `#msjPanel`(95) aynı sayıda kalır
     ve üstteki DOM sırasına düşer (68.2). Uç durum ama gerçek; kökü aynı.

   ── KANON SÖZLEŞMESİ ────────────────────────────────────────────────
   Aşağıdaki kural görsel katmanı bağlar. ODAK KİLİDİ JS işidir ve kanon
   onu bir SÖZLEŞME olarak yazar (§21 akordeonun JS mekanizmasında
   yapıldığı gibi): panel `.acik` olduğunda panel ve perdesi DIŞINDAKİ
   her kabuk kalemi `inert` olur. `inert` hem odağı hem fareyi keser,
   yani tek bildirimle iki kapı birden kapanır.
   --------------------------------------------------------------------- */

/* Perde açıkken kabuğun yüzen kalemleri görsel olarak da düşer —
   perdenin altında "hayalet" bir düğme bırakmamak için. */
body:has(.sohbet-panel.acik) .basa-don,
body:has(.sohbet-panel.acik) .kenar-sekmesi,
body:has(.sohbet-panel.acik) .kenar-serit,
body:has(.sohbet-panel.acik) .yuzen-dugme,
/* 🔴 `.sohbet-dugme` LİSTEDE UNUTULMUŞTU — paneli AÇAN düğmenin ta
   kendisi (§62, `position:fixed`, z `--kat-sohbet-dugme`). Panel açıkken
   perdenin altında kalıyor ve odak sızıntısıyla (68.4) klavyeye açık
   kalıyordu. §26'nın `.yuzen-dugme`si ile AYNI ŞEY DEĞİL: ikisi ayrı
   bileşen, ikisi de fixed, ikisi de 73'te. */
body:has(.sohbet-panel.acik) .sohbet-dugme{
  opacity:0; visibility:hidden; pointer-events:none;
}
/* Mobilde alt çubuk da düşer: perde onu örtüyor ama odak sızıntısı
   (68.4) onu klavyeye açık bırakıyordu. */
@media (max-width:640px){
  body:has(.sohbet-panel.acik) .alt-cubuk{ visibility:hidden; pointer-events:none; }
}


/* =====================================================================
   69 · KALEM SATIRI — kaynak `.fp-row`
   ---------------------------------------------------------------------
   v3 · 2026-09-02. Kanonun ÜÇÜNCÜ satır kiti. §6b'nin uygulanması:
   "kanonda karşılığı olmayan bir şey çıkarsa ÖLÇÜLÜP KANONA EKLENİR."

   Slot-1 iki ekranda 26 kullanım saydı ve kanonda karşılıksız olduğunu
   bildirdi. Lead RENDER EDEREK doğruladı (CSS okuyarak değil) — mevcut
   iki satır kitiyle SEKİZ değeri birden ayrışıyor:

     ölçülen           .fp-row (kaynak)      .ayar-satir (§9 kanon)
     ---------------   -------------------   ----------------------
     gap                14px                  16px
     dolgu              14px 0                17px 22px
     ayraç              border-BOTTOM         komşu seçici border-TOP
     ayraç rengi        #ececec               —
     satır yüksekliği   76.3px                96.1px
     ikon kutusu        38×38                 40×40
     ikon zemini        #eaf6ef  AKSAN        #f9f9f9  NÖTR
     ikon rengi         #007a3d  AKSAN        #56514a  NÖTR
     ikon yazısı        14px                  15px

   🔴 ASIL AYRIM ÖLÇÜ DEĞİL, ANLAM: `.ayar-satir` bir AYAR satırıdır ve
      ikonu NÖTR; `.fp-row` bir İÇERİK kalemidir (egzersiz · öğün ·
      aktivite kaydı) ve ikonu MARKA AKSANLIDIR. İkisini birleştirmek
      "aynı bileşen, dört ad" bulgusunun (02 §0) tersi olurdu: ölçüm iki
      kalemin AYRI olduğunu söylüyorsa birleştirilmez (§11'in kuralı).

   §50'nin `.paket-satiri`sı da karşılığı DEĞİL: orada 52px avatar ve
   fiyat kolonu var, iskelet başka.

   ⚠ ÖLÇÜLEN RENKLER FIT v2 YEŞİLİDİR (#eaf6ef · #007a3d) — kaynakta ham
     hex. Kanona TOKENLA girer (`--aksan-yikama` · `--aksan-koyu`), yani
     marka maviye dönünce satır da döner. Slot-1'in "altı kalemde sabit
     FIT v2 yeşili" bulgusunun bu kaleme düşen kısmı burada kapandı.
   ===================================================================== */

.kalem-satiri{
  display:flex; align-items:center;
  gap:var(--bosluk-14);
  padding:var(--bosluk-14) 0;
  /* 🔴 AYRAÇ `border-bottom` + `:last-child` — §9'un komşu seçici
     (`+`) kipinden BİLEREK farklı. Ölçüm öyle diyor; iki kip aynı işi
     görüyor ama kanon KAYNAĞIN kipini alır (KOPYALAMA-KURALI: "kip farkı
     bir içerik farkı değildir, kanon kaynağın kipini alır"). */
  border-bottom:var(--cizgi-1) solid var(--cizgi);
}
.kalem-satiri:last-child{ border-bottom:none; }
.kalem-satiri[hidden]{ display:none; }

/* İkon çipi — NÖTR DEĞİL, AKSANLI. §9'dan ayrıldığı yer burası. */
.ks-ikon{
  flex:none; width:38px; height:38px;
  border-radius:var(--yuvarlak-md);
  background:var(--aksan-yikama); color:var(--aksan-koyu);
  display:grid; place-items:center;
  font-size:var(--yazi-14);
}
.ks-metin{ flex:1; min-width:0; }
/* 🔴 RENK KAYNAKTAN AYRIŞIYORDU — ölçüldü 2026-09-03, §69 bağlamlı
   çeviriyle CANLANDIĞI AN görüldü. Kural 14 kural boyunca ölü durduğu
   için değeri hiç sınanmamıştı:
       kaynak `.fp-row .txt b{color:var(--slate)}`  → rgb(33,30,22)
       kanon  `--murekkep-yumusak`                  → rgb(86,81,74)
   Okunabilirlik kusuru değil (ikisi de AA) ama ÖLÇÜT DONÖRDÜR.
   ⚠ Ders: ÖLÜ KURALIN DEĞERİ DE ÖLÜDÜR — kural canlanana kadar
     yanlışlığı görünmez. Vitrinin "§69 ölü (14 kural)" bulgusu bu yüzden
     yalnız bir kapsama sorunu değil, bir DOĞRULUK sorunuydu: kanonun
     ölçülmemiş yarısı, ölçülmüş görünen yarısının içinde saklıydı. */
.ks-metin b{
  display:block;
  font-size:var(--yazi-14-5);
  color:var(--murekkep);
}
.ks-metin small{
  font-size:var(--yazi-12-5);
  color:var(--metin-ikincil);
  font-weight:var(--agirlik-orta);
}
/* Sağ uç — sayı/süre/durum. Kaynak `.end`. */
.ks-uc{
  flex:none;
  font-size:var(--yazi-12-5);
  font-weight:var(--agirlik-kalin);
  color:var(--metin-ikincil);
  text-align:right;
}


/* =====================================================================
   71 · HAFTALIK ÇUBUK GRAFİĞİ — kaynak `.fp-chart` / `.fp-col` / `.bar`
   ---------------------------------------------------------------------
   🔴 BU BÖLÜM BİR KUSUR DÜZELTMESİYLE DOĞDU — KUSURU BİLDİR-DÜZELTME
      KURALINA BEYAR'IN AÇIK İSTİSNASI (K5, 2026-09-02):
      *"Grafik yalan söylüyorsa taşımanın anlamı yok. Kolon yüksekliğini
        çubuğa göre hesapla."*

   ── ÖLÇÜLEN KUSUR ───────────────────────────────────────────────────
   Kaynak çubuğu `height:<v/enb*96>%` ile boyutluyor
   (`programlarim-v1.html:4188`). `.fp-col` 150px'lik bir FLEX kolon ve
   yüzde KOLONUN 150'sine çözülüyor — ama çubuğa kalan yer
   `150 − .val 17.8 − .lbl 17.8 − iki boşluk 16 = 98.375px`.
   Flex fazlayı kırpıyor, yani **%65.6 üstü her değer AYNI yükseklikte**.

   Süpürme ölçümü (lead, gerçek CSS'e enjekte edilerek):
   ```
   %40 → 60.00   %55 → 82.50   %65 → 97.50
   %71 → 98.38   %85 → 98.38   %96 → 98.38   %100 → 98.38
   ```
   Slot-2 bağımsız ölçtü, aynı sayıları verdi. Kusur v2'de İKİ ekranda:
   `programlarim-v1` (İlerlemem) ve `egzersizlerim-v1` ("Bu haftanın
   hareket ritmi").

   ── DÜZELTME ────────────────────────────────────────────────────────
   Kolon FLEX'ten GRID'e geçer ve çubuğa KENDİ SATIRI verilir:
       grid-template-rows: auto 1fr auto      (val · çubuk · etiket)
   Grid'de yüzde yükseklik SATIRA çözülür, kolona değil. `1fr` satırı tam
   olarak boş alan (98.375px) olduğu için `height:X%` artık doğru tabanı
   görür.

   🔴 ELEMAN EKLENMEDİ. Sarmalayıcı bir "ray" elemanı yazmak daha kolay
      olurdu ama EKSİ BİRİNCİ MADDE eleman eklemeyi yasaklıyor. Grid
      çözümü kaynağın üç çocuğunu olduğu gibi bırakır.

   ÖLÇÜLEN SONUÇ — tavan kalktı, her değer orantılı:
   ```
   %40 → 39.34   %55 → 54.09   %65 → 63.94   %71 → 69.84
   %85 → 83.61   %96 → 94.44   %100 → 98.38
   ```
   Doğrulama: %40 × 98.375 = 39.35 ✓ · %85 × 98.375 = 83.62 ✓

   ⚠ ÇARPAN DEĞİŞMEDİ. Kaynağın `v/enb*96` çarpanı korundu — bozuk olan
     çarpan değil TABANDI. Çarpanı oynatmak kaynağın kendi ölçüsünü
     değiştirmek olurdu.

   ⚠ YAN ETKİ ÖLÇÜLDÜ VE KAPATILDI: kaynak `max(4, …)` ile bir görünürlük
     zemini koyuyor ve o zemin de yüzdeye bağlıydı — taban 150'den
     98.375'e inince 6.00px'ten 3.92px'e düşüyordu. Zemin bir GÖRÜNÜRLÜK
     tabanıdır ve tabana bağlı olmamalı; px'e sabitlendi.
     (Slot-2'nin önerisi; ölçüsü onun, karar kanonun.)
   ===================================================================== */

.grafik-hafta{ display:flex; align-items:flex-end; }

.grafik-kolon{
  /* 🔴 FLEX DEĞİL GRID — bölümün tamamının sebebi bu satır. */
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:end;
  justify-items:center;
  flex:1; min-width:0;
}
.grafik-deger{ font-size:var(--yazi-12-5); font-weight:var(--agirlik-kalin); color:var(--metin-ikincil); }
.grafik-cubuk{
  width:100%;
  align-self:stretch;
  border-radius:var(--yuvarlak-sm) var(--yuvarlak-sm) 0 0;
  background:var(--aksan);
  /* Görünürlük zemini — YÜZDEYE DEĞİL PİKSELE bağlı (yukarıdaki şerh). */
  min-height:6px;
}
.grafik-cubuk.bu-hafta{ background:var(--aksan-koyu); }
.grafik-etiket{ font-size:var(--yazi-11); color:var(--metin-ikincil); }


/* =====================================================================
   72 · MODÜL GÖVDESİ VE PANO — kaynak `.modul-govde` / `.fit-pane`
   ---------------------------------------------------------------------
   §11 SEKME RAYI rayı tanımlıyordu ama **rayın AÇTIĞI panoyu
   tanımlamıyordu.** Slot-3 ölçtü: tek başına 24 kullanım, ve on üç
   gövdenin on üçü de bu kap için bir ad uydurmak zorunda kalıyordu —
   yani boşluk takımın ORTAK boşluğuydu.

   ⚠ BİLEŞEN KÜÇÜK, DEĞERİ ANLAMSAL. Ölçülen (1440, `rozetlerim-v1`):
   ```
   .modul-govde   block · tam genişlik · dolgu 0 · marj 0 · zemin #f9f9f9
   .fit-pane      block · tam genişlik · dolgu 0 · marj 0 · saydam
   gizli pano     `hidden` NİTELİĞİYLE gizleniyor → display:none
   ```
   Yani kap neredeyse kuralsız; kanona girmesinin sebebi ADININ olması.
   Adı olmayan kap her gövdede yeniden icat ediliyordu.

   🔴 GÖVDE OPAK OLMAK ZORUNDA. Kaynağın kendi şerhi bunu kaydetmiş
   (§67'nin "PLAN KABUĞU · dikişi rayın dibine çek" bloğu): rayın
   altındaki SAYDAM blokları gövdenin içine taşıyan bir kural var; gövde
   opak olduğu için o kural onu hedef sayıyor ve hiçbir şey taşımıyor.
   Saydam bırakılırsa panel kipi bozulur (kaynakta ölçülmüş).

   ⚠ GİZLEME KURALI YAZILMADI ve yazılmamalı: kanonun `[hidden]` kuralı
     (dosya sonu, TEK YETKİLİ) zaten `display:none !important` veriyor.
     Buraya ikinci bir gizleme kuralı yazmak o kuralın bütün gerekçesini
     çiğnerdi.
   ===================================================================== */

.modul-govde{
  /* Zemin ADI ile alınır — marka değişince kendiliğinden döner. */
  background:var(--zemin);
  position:relative;
}
/* Pano — ray bir kalemi açtığında görünen kap. Kuralı yok denecek kadar
   az; işi KAPSAMAK, biçimlemek değil. */
.pano{ display:block; }

/* =====================================================================
   73 · BEYAR'IN GÖZLE BULDUĞU DÖRT GENEL KURAL — 2026-09-02
   ---------------------------------------------------------------------
   Dördü de AYNI AİLEDEN: kaynağın kuralı VAR, kanonda karşılığı YOK.
   §63d'nin ("durum varyantı taban sanıldı") kardeşi: burada varyant
   değil ALT KALEM düşmüş. Beyar'ın sözü: "kopyalamaları ada akıllı yap."
   Hepsi GENEL kural — tek ekrana yama değil.
   ===================================================================== */

/* ── 73a · KATEGORİ/SEKME ŞERİDİ ORTALIDIR ────────────────────────────
   Beyar: "kategoriler merkezi olur". Ölçüldü (hesabim@1440):
       v2  .pf-tabs.is-center → justify-content: safe center
       v3  .sekmeler          → justify-content: normal   (sola yaslı)
   Kök: kaynağın `is-center` değiştiricisi haritada yok ve kanonun TABAN
   `.sekmeler`i ortalama yazmıyordu — ortalama yalnız `.ortali`da vardı.
   Şerit her hâlde ortalıdır; `safe` anahtar kelimesi kaynağın kendi
   değeri ve taşan şeridin BAŞINI kırpmayı önler (kaydırılabilir kalır). */
.sekmeler{ justify-content:safe center; }

/* ── 73b · KART AYAĞINDAKİ EYLEM SAĞA YASLANIR ────────────────────────
   Beyar: "butonlar sağdaysa güncel fitte de sağda olur". Ölçüldü
   (hesabim@1440 · "Değişiklikleri Kaydet"):
       v2  .pnl-card .pc-foot  display:flex  → düğme sağ kenardan 22px
       v3  .kart.panel>.kart-alt display:block → düğme SOLDA (sol 187px)
   Kanonda `.kart.panel>.kart-alt.eylem` kipi ZATEN VAR ve doğru yazılmış;
   `eylem` sınıfı gelmediği için ölü duruyordu (`pc-foot → kart-alt`
   çevirisi değiştiriciyi taşımıyor). Sınıf beklemek yerine YAPISAL:
   içinde düğme olan kart ayağı zaten eylem ayağıdır. */
.kart.panel>.kart-alt:has(.dugme){
  display:flex; align-items:center; gap:var(--bosluk-14); flex-wrap:wrap;
}
.kart.panel>.kart-alt:has(.dugme)>.dugme{ margin-left:auto; }

/* ── 73c · BANDIN SONUNDAKİ BİLGİ NOTU PERDEYE YAPIŞMAZ ───────────────
   Beyar: "burdaki infolar genel olarak perdenin sonuyla arasında biraz
   boşluk olsun". Ölçüldü: bandın son kalemi bilgi notu olduğunda alt
   payı 0 kalıyor ve not doğrudan dip perdesine dayanıyor.
   Değer kaynağın kendi not aralığından (`.hr-note{margin:0 0 16px}`)
   bir kademe yukarısı — bandın kapanışı satır aralığı değildir. */
.kap>.bilgi-notu:last-child,
.bolum>.bilgi-notu:last-child,
.fit-pane>.bilgi-notu:last-child{ margin-bottom:var(--bosluk-24); }

/* ── 73d · AİLE BAŞLIĞININ İKONU MARKA RENGİNDEDİR ────────────────────
   Beyar: "kopyaladığımız donörde bu section'ların ikonları renkli".
   Ölçüldü — kaynak `.badge-head h3 i{color:var(--fit);font-size:14px}`;
   kanonun `.rozet-aile-bas h3` kuralı var, `h3 i` kuralı YOK → ikon
   `h1..h4{color:var(--slate)}` mirasına düşüp mürekkep rengi oluyor.
   §63d'nin aynı kalıbı: alt kalem çeviride ÖKSÜZ kaldı.
   ⚠ Bölüm başlığının ikonu (`.bolum-bas`) ve kart başlığının ikonu
     (`.kart-baslik i`) kanonda ZATEN marka renginde — bu kalem o
     sözleşmenin rozet ailesindeki eksik halkasıdır, yeni bir karar değil. */
.rozet-aile-bas h3 i{ color:var(--aksan); font-size:var(--yazi-14); }

/* =====================================================================
   74 · BANDIN ALT NEFESİ VE KART ARALIĞI — GENEL KURAL
   ---------------------------------------------------------------------
   🔴 BEYAR, 2026-09-02: *"Bir daha böyle hatalar istemiyorum, KURAL YAZ.
      Kartlar böyle bitişik olmayacak, sayfanın genel boşluk kurallarıyla
      tutarlı olacak."* · *"hepsinde bu var"*

   ÖLÇÜLDÜ (13 ekran · 1440 · `lead-bosluk-olc.mjs`) — sistematikti:
```
   her ekranda üç bandın ÜÇÜNDE de:
       padding-bottom = 0px · son kalemin alt boşluğu 0px (bazen -1px)
   kart aralıkları tek bir kaptan değil, rastgele:
       cozum-merkezi [64, 65, 533, 1245]
       programlarim  [582, 0, 83, 16, 264, 277, 413, 301]
```
   KÖK: `.zebra>.bolum` kendi ritmini (`--bolum-nefes-sik`) alıyor ama
   İÇERİK BANDI (`.modul-govde`) ve ŞERİT (`.pf-tabbar`) `.bolum` DEĞİL —
   hiçbir alt dolgu almıyorlar. Sonuç: panonun son kartı doğrudan dip
   perdesine dayanıyor. Bu bir ekran kusuru değil, EKSİK SÖZLEŞMEydi:
   kanon bandın ÜST telafisini (`kabuk-alti`) yazmış, ALT nefesini
   yazmamıştı.

   ⚠ DEĞER UYDURULMADI: `--bolum-nefes-sik`, `.zebra>.bolum`un kendi
     ritmi. "Sayfanın genel boşluk kurallarıyla tutarlı" şartı ancak
     aynı tokeni kullanmakla sağlanır — yeni bir boşluk değeri
     tanımlamak tutarlılığı BOZARDI.
   ===================================================================== */

/* ── 74a · İÇERİK BANDI ALTTAN NEFES ALIR ───────────────────────────── */
.modul-govde{ padding-bottom:var(--bolum-nefes-sik); }

/* ── 74b · BANDIN SON KALEMİ KENARA YAPIŞMAZ ─────────────────────────
   Pano kendi içinde de bandın son kalemi olabilir (A kararıyla derlenen
   ekranlarda sık): son bölümün alt payı sıfırlanmışsa nefes buradan gelir. */
/* ✅ KAPANDI · 2026-09-03 — ve cevap kapının kendindeydi.
   Kalem şöyle açık kalmıştı: "bandın son kartı 22px, kanon ritmi 32px;
   kapı kusuru mu ekran kusuru mu AYRILMADI." Ayrıldı:
     · §74a gerçek bir YOKLUĞU kapatmıştı — ölçümün başında üç bandın
       üçünde de `padding-bottom: 0px`tı, yani bandın alt nefesi HİÇ YOKTU.
     · Kalan 22px ise KAPININ KİPİNDEN geliyordu: kapı bütün panoları
       `hidden` sökerek açıyor ve kanonun KASITLI kuralı
       (`.modul-govde>.fit-pane:last-child>*:last-child{padding-bottom:0}`)
       o zaman BAŞKA panoya düşüyor; ölçüm 10px kayıyor.
   Kanıt (yalnız görünür pano açıkken, doğrudan ölçüm · rozetlerim@1440):
       bant 755→2176 padAlt=32 · pano 755→2144 · fark TAM 32px
   Kapı pano pano ölçmeye çevrildi (şeritten tıklayarak — bu aynı zamanda
   `hidden` sökmenin `animation:fadeUp`ı tetiklemediği tuzağını da kapatır)
   ve 13 ekranda 185 kalem · 🔴 0 verdi. Olumsuz sınama hâlâ geçiyor.
   🔴 DERS: bir kapı kırmızı verdiğinde ilk şüpheli EKRAN DEĞİL, KAPININ
      ÖLÇÜM KİPİdir. Bu turda dört kez böyle çıktı ve bu, "etkisi
      ölçülmemiş kural kanona yazılmaz" kuralının neden işe yaradığını
      da gösteriyor: yanlış ölçüme dayanan BFC kuralı yazılıp geri
      alınmıştı; ekran hiç bozulmadı.
   ⚠ Eski şerh, kaydın izlenebilmesi için aşağıda bırakıldı. */
/* ⚠ (KAPANDI, yukarı bak) AÇIK KALEM · BANDIN SON KARTI 22px — 2026-09-03.
   slot-egzersiz kapının şerhinin istediğini yaptı: elemanı bastı ve
   panoları TEK TEK açarak force-open artığı OLMADIĞINI gösterdi
   (egzersizlerim 4/6 pano · antrenorum 4/8 pano · 22px).
   Ölçtüğü zincir:
       bant .modul-govde  padÜst=0 padAlt=32   ·  pano .fit-pane marj 0/0
       form #fpxGunSonu   marÜst=14px
       hesap: 10px (üstte) + 1028 + 22px (altta) = 1060
   Teşhis "çocuğun payı panoyu çökererek bandın dolgusunu yiyor" idi ve
   `display:flow-root` ile pano BFC yapıldı — 🔴 ÖLÇÜM DEĞİŞMEDİ, 22px
   kaldı. Yani teşhis eksik: pay çökmesi tek başına açıklamıyor.
   İkinci olasılık ölçülmedi: kapı SON KARTI raporluyor, bandın son
   ELEMANI olmayabilir (araya §73c'nin `.bilgi-notu` alt payı gibi bir
   kalem girerse kart↔bant farkı 32-10=22 çıkar).
   🔴 ETKİSİ ÖLÇÜLMEMİŞ KURAL KANONA YAZILMAZ — bu yüzden BFC kuralı
      geri alındı. Kalem açık: önce kapı "son ELEMANI" da bassın, iki
      olasılık ayrılsın, sonra düzeltme yazılsın. */
.fit-pane>*:last-child{ margin-bottom:0; }
.modul-govde>.fit-pane:last-child>*:last-child{ padding-bottom:0; }

/* ── 74c · KART ARALIĞI TEK KAPTAN GELİR ─────────────────────────────
   Kart ızgaraları `gap`i kendileri yazar; alt alta dizilen kartlar
   (ızgara değil akış) aralığı BU kuraldan alır. İki kural bir arada
   "aynı sayfada iki farklı kart aralığı" hâlini imkânsız kılar. */
.kart + .kart,
.fp-card + .fp-card,
.ozet-karti + .ozet-karti{ margin-top:var(--bosluk-16); }

/* 🔴 KAPI: `kapi-bosluk.mjs` — bandın son kaleminin alt boşluğu eşiğin
   altına inerse ve aynı kap içindeki kart aralıkları BİRDEN ÇOK değer
   taşırsa kırmızı verir. "Bir daha istemiyorum" ancak ölçülürse tutar. */


/* ═══════════════════════════════════════════════════════════════════
   § EYLEM SATIRI · A1 · Beyar kararı 2026-09-03
   -------------------------------------------------------------------
   ÖLÇÜLDÜ: kanon AYNI düzeni İKİ KEZ bağlam adıyla yazmış —
       .modal-eylemler{ flex · gap-10 · wrap · margin-bottom-16 }
       .kart-eylem    { margin-top-18 }
   kaynağın `.fpx-acts`i üçünü birleştiriyor (flex · gap:10 · wrap ·
   margin-top:20). `.modal-eylemler`i modal DIŞINDA kullanmak kanonun
   kendi kırılma noktasına düşer ("ad tutmuyor"), bu yüzden genel ad
   açıldı ve iki bağlam adı buna DEVREDİLDİ: 3 kural → 1 bileşen.
   =================================================================== */
.eylem-satiri{
  display:flex; gap:var(--bosluk-10); flex-wrap:wrap;
}
.eylem-satiri.ust{ margin-top:var(--bosluk-20); }
.eylem-satiri.alt{ margin-bottom:var(--bosluk-16); }
/* Devir: eski adlar genel bileşene bağlanır, biçim TEK yerden gelir. */
.modal-eylemler,.kart-eylem{
  display:flex; gap:var(--bosluk-10); flex-wrap:wrap;
}
.modal-eylemler{ margin-bottom:var(--bosluk-16); }
.kart-eylem{ margin-top:var(--bosluk-18); }

/* ═══════════════════════════════════════════════════════════════════
   § KART IZGARASI · A2 + A5 · Beyar kararı: tek `.kart-izgara`
   -------------------------------------------------------------------
   ÖLÇÜLDÜ: `repeat(3,minmax(0,1fr))` kanonda İKİ KEZ vardı ama ikisi de
   başka rolde (`.kunye.belge` kimlik ızgarası · `.alan-izgara.c3` form
   alanı); kart ızgarası için genel ad YOKTU. `repeat(7` ise kanonda
   SIFIR seçiciydi — haftalık gün şeridi (kaynağın `.fp-days`i) hiçbir
   kanon kuralına tutunamıyordu.
   =================================================================== */
.kart-izgara{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--bosluk-16);
}
.kart-izgara.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.kart-izgara.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.kart-izgara.c7{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--bosluk-8); }
@media (max-width:640px){
  /* 390 kuralı: çok kolonlu ızgaralar tek kolona döner, gün şeridi
     yedi kolonda KALIR (takvim ritmi bozulmaz, hücre küçülür). */
  .kart-izgara.c2,.kart-izgara.c3{ grid-template-columns:minmax(0,1fr); }
  .kart-izgara.c7{ gap:var(--bosluk-4); }
}

/* ═══════════════════════════════════════════════════════════════════
   § A4 · DURUM HAPININ KÖŞE KİPİ
   -------------------------------------------------------------------
   ÖLÇÜLDÜ: perde kanonda VAR (`.kapak::after` · `.sonuc-gorsel::after`)
   ama köşeye çakılı çip YOK (`position:absolute` 4 seçici, hiçbiri çip).
   Yeni hap DEĞİL — mevcut §28/§45 hapının konum varyantı.
   =================================================================== */
.durum-hapi.kose{
  position:absolute; z-index:2;
  white-space:nowrap;
}
.durum-hapi.kose.sol-ust{ top:var(--bosluk-12); left:var(--bosluk-12); }
.durum-hapi.kose.sag-ust{ top:var(--bosluk-12); right:var(--bosluk-12); }

/* ═══════════════════════════════════════════════════════════════════
   § MADDE LİSTESİ · İKİ KOLONLU KİP · Beyar kararı: YÖN B
   -------------------------------------------------------------------
   Özellik listesi üç yön ölçüldü: A tek kolon (liste uzun kalıyor) ·
   B iki kolon (mevcut bileşenin varyantı) · C kart yüzeyli ızgara
   (ölçülmüş kapı bedeli: `gap:1px` komşu kümesine giriyor).
   B seçildi: kanon büyümüyor, kapı bedeli yok.
   =================================================================== */
.madde-liste.ikili{
  display:flex; flex-flow:row wrap;
  gap:var(--bosluk-9) var(--bosluk-24);
}
.madde-liste.ikili>li{ flex:0 0 calc(50% - (var(--bosluk-24) / 2)); min-width:0; }
@media (max-width:640px){
  .madde-liste.ikili>li{ flex:0 0 100%; }
}

/* ── A3 · HATA VARYANTI · §uyarı kutusunun kırmızı kipi ────────────── */
.uyari-kutu.hata{
  color:var(--hata);
  background:var(--hata-yikama);
  border-color:var(--hata-cizgi);
}
.uyari-kutu.hata>i{ color:var(--hata); }


/* ═══════════════════════════════════════════════════════════════════════
   § SÖZLEŞME · 2026-09-03 · Beyar kararı
   ═══════════════════════════════════════════════════════════════════════
   "Bu turdaki kalemler tek aileden — dağınık yazma, tek sözleşme kur."

   Dört kalem, tek yer, tek değer:
       S1 · EYLEM SATIRI   düğmeler kart ayağında, sağa yaslı, tek boy
       S2 · BİLGİ NOTU     alt komşusuyla bölüm nefesi, kolonda tam en
       S3 · KART ARALIĞI   kartlar bitişik değil, tek değer
       S4 · ÇİP ŞERİDİ     tek biçim, aktif durum dahil

   🔴 DÖRT MARKADA GEÇERLİ: bu bölümde tek hex, tek ham px yok. Her
      renk aksan yuvasından (`--aksan*`), her ölçü tokendan. Marka
      dosyası değişince sözleşme değişmez.

   🔴 HER MADDE ÖLÇÜLDÜ. Ölçüm kipi: 13 ekran @1440, her sekme
      TEK TEK TIKLANARAK açıldı (`hidden` sökülmedi — kanonun kendi
      dersi, §74b). Sayılar aşağıda madde madde yazılı.

   🔴 MARKUP'A DOKUNULMADI. Sözleşmenin dördü de yalnız CSS; hiçbir
      ekranda sınıf eklenmedi, eleman taşınmadı, sıra değiştirilmedi
      (KOPYALAMA-KURALI · eksi birinci madde).
   ═══════════════════════════════════════════════════════════════════════ */


/* ── S1 · EYLEM SATIRI ─────────────────────────────────────────────────
   Beyar: "düğmeler kart ayağında, sağa yaslı. Yıkıcı eylem (sil)
   ikincil/hayalet, ana eylem birincil. Tek boy, tek kural."

   ① TEK BOY. ÖLÇÜLDÜ (13 ekran · görünen 123 `.dugme`): AYNI sınıf,
      AYNI dolgu, AYNI punto DOKUZ ayrı yükseklik veriyordu —
          43 · 44 · 45 · 46 · 47 · 48 · 50 · 52 · 53 px
      ve 123'ün 73'ü 52px'ti. Sebep `.dugme`nin satır yüksekliği
      BİLDİRMEMESİ: gövdeden miras alıyor (`--satir-govde` 1.55 →
      14.5×1.55 = 22.475px), yani düğmenin boyunu İÇİNE KONDUĞU KAP
      belirliyordu. Beyar bunu "butonlar çok kötü" diye gördü:
      planlanan egzersizler 52px ↔ bugünkü egzersizler 45px, aynı sınıf.
      Kaynak da bildirmiyor (`fit-shell.css:242` `.btn`) — kaynağın
      ölçülmüş kusuru, kanon düzeltir.
      Değer uydurulmadı: `--satir-tek` tokenların "tek satır" kalemi.
      Düğme etiketi tek satırdır; boyu artık `min-height`in ilan ettiği
      44px'tir, miras aldığı kaptan değil.

   ② KENARLI VARYANT KENARI DOLGUDAN DÜŞER. `*{box-sizing:border-box}`
      kutuyu sabitler ama içerik 44'ü aşınca kutu BÜYÜR:
          dolgu 28 + metin 14.5 + kenar 2 = 44.5 → 46px
      Ölçüldü: ilerlemem'in kart ayağında `.birincil` 44 ↔ `.hayalet` 46,
      yan yana. Kenarı dolgudan düşmek bu ailenin standart çözümü; yeni
      ölçü üretilmez, var olan iki token çıkarılır. Aile artık 44px.

   ③ GRUP SAĞA — TEK TEK DEĞİL. `.kart-alt>.dugme{margin-left:auto}`
      ayakta not + tek düğme varken doğru; ayak YALNIZ düğmelerden
      oluşunca her düğme kendi `auto`sunu alıyor ve boşluk ARALARINDA
      paylaşılıyor. ÖLÇÜLDÜ (ilerlemem · ölçüm formu @1440): kap 1122px,
      iki düğmenin İKİSİNDE de `margin-left:363.5px` — "Ölçümü kaydet"
      satırın ortasında, "Alanları temizle" ta sağ uçta. `auto` yalnız
      İLK düğmeye kalır: boşluk grubun soluna toplanır, düğmeler bitişik
      bir grup olarak sağa yaslanır.

   ④ BİRİNCİL EN SAĞDA — markup sırası ne olursa olsun. Ölçülen hâl
      (ilerlemem): birincil "Ölçümü kaydet" SOLDA, ikincil "Alanları
      temizle" sağda; okuma yönünde son duran kalem ikincil eylemdi.
      Sıra `order` ile kanondan verilir, 13 ekranın hiçbirinde markup'a
      dokunulmaz.
      KİP SEÇİMİ — Beyar'ın kuralı, kanonun kendi ailesiyle:
          onaylayan / kaydeden      → `.dugme.birincil`  dolgu aksan
          geri alan / temizleyen    → `.dugme.hayalet`   kenarlı, sessiz
          YIKICI (sil)              → `.dugme.hayalet`   ✅ ikincil kip
      Yıkıcı eylem dolgu kırmızıyla BAĞIRMAZ: kart ayağındaki "sil"
      bir seçenektir, sayfanın ana eylemi değil. `.dugme.tehlike`
      (§2) yerinde duruyor ama ayak sözleşmesinde kullanılmaz.

   ⑤ MARKA ADLARI DEVREDİLİR. Ölçüldü: 20 düğme `.btn-fit`, 3 düğme
      `.btn-food` — aynı işi gören birincil düğmenin iki marka adı, ve
      ikisi de rengini MARKA dosyasından değil donörün sayfa kabuğundan
      alıyor. Sözleşme "dört markada geçerli" diyorsa birincil düğme
      aksan yuvasından okumalıdır. Ad korunur, biçim tek yerden gelir. */

.dugme{ line-height:var(--satir-tek); }

.dugme.hayalet, .dugme.uyari, .dugme.cizgili{
  padding:calc(var(--bosluk-14) - var(--cizgi-1)) calc(var(--bosluk-26) - var(--cizgi-1));
}

.dugme.btn-fit, .dugme.btn-food{
  background:var(--aksan-koyu); color:var(--kagit);
}
.dugme.btn-fit:hover, .dugme.btn-food:hover{
  background:var(--aksan-koyu-2); transform:translateY(-2px);
}

/* ⚠ `margin-left:auto` KAYNAK SIRASINA göre yazılamaz: ④ görsel sırayı
   `order` ile çeviriyor ve `~` seçicisi KAYNAK sırasını okuyor. İlk
   yazımda `auto` görsel olarak SON düğmeye düştü ve boşluk grubun
   ORTASINDA kaldı — düğmeler yine iki uca dağıldı (ölçüldü: ilerlemem
   ölçüm formu, "Alanları temizle" solda, "Ölçümü kaydet" sağda).
   Doğru kaldıraç düğmede değil AYAKTA: boşluğu notun sağına verirsin,
   düğmelerin sırası ne olursa olsun grup bozulmaz. Not yoksa satırın
   kendi yaslaması yeter. Kaç düğme olduğu da fark etmez (hesabim'in
   üç kalemli modal ayağı ölçüldü). */
/* ⚠ İKİNCİ KALDIRAÇ: modal ayağı aynı işi KENDİ seçicisiyle de yazıyor
   (`.modal-ayak>.dugme.birincil{margin-left:auto}` · (0,3,0)) ve taban
   devrini ezip düğmeyi yine tek başına sağa fırlatıyordu — ölçüldü:
   hesabim'in fotoğraf modalı, iki düğme arası 250px. Aynı özgüllükte
   devredilir; ad korunur, biçim tek yerden gelir. */
.kart-alt{ justify-content:flex-end; }
.kart-alt>.dugme,
.modal-ayak>.dugme.birincil{ margin-left:0; }
.kart-alt>:not(.dugme):first-child{ margin-right:auto; }
.kart-alt>.dugme{ order:1; }
.kart-alt>.dugme.birincil{ order:2; }


/* ── S2 · BİLGİ NOTU ───────────────────────────────────────────────────
   Beyar: "alt komşusuyla bölüm nefesi kadar mesafe, 860 kolonunda tam
   genişlik. Bitişik durmayacak."

   ① ALT NEFES. §16 üst payı (34px) yazıyor, alt payı YAZMIYOR. Not bir
      tabloyu/kartı anlatıyorsa aralık 0px çıkıyor — ölçüldü:
      challengelarim `#puan` (not → `.kart` 0px) ve `#siralama`,
      enerji-defterim. Beyar: "burda info var, altındaki komponentle
      mesafe olacak". Değer `--bolum-nefes-sik` (32px) — S3'ün kart
      aralığı DEĞİL: not bir bileşen değil, bir bölüm başlangıcıdır ve
      §74d'nin blok ritmiyle aynı nefesi alır.
      Yalnız ARDINDAN kardeş geldiğinde uygulanır; son kalemse ölü
      boşluk üretmez.

   ② TAM GENİŞLİK. §23'ün joker kuralı notu dar okuma kolonuna
      (`--okuma-kolonu` 860px) sokuyor. Bu akan metnin YANINDAKİ not
      için doğru; kartın/tablonun ÜSTÜNDE duran not, anlattığı
      bileşenden dar kalınca ekranda kaymış görünüyor.
      ÖLÇÜLDÜ (13 ekran @1440 · görünen 16 not): notların TAMAMI 860px,
      kardeşleri 1176px (bir ekranda 1112). Beyar: "bu infolar
      yayılacak, genişliği".
      Yeni ölçü YAZILMADI — `max-width` kalkınca not kabın kendi içerik
      genişliğini alıyor, yani kardeşleriyle BİREBİR aynı.
      ⚠ `.okuma-kolonu` içindeki not etkilenmez: orada kabın kendisi
        zaten 860 ve kural yalnız `.kap` çocuğuna yazılı. */

.bilgi-notu:has(+ *){ margin-bottom:var(--bolum-nefes-sik); }
.modul-govde .kap > .bilgi-notu{ max-width:none; margin-inline:0; }


/* ── S3 · KART ARALIĞI ─────────────────────────────────────────────────
   Beyar: "kartlar bitişik olmayacak, tek değer."

   §74c bunu zaten iddia ediyordu ("aynı sayfada iki farklı kart aralığı
   imkânsız") — ÖLÇÜM ÜÇ AYRI DEĞER BULDU ve kuralın kendisi ikisinin
   sebebiydi.

   ① GAP YAZAN KAPTA PAY İKİ KEZ SAYILIYOR. Kap `gap` yazıyorsa aralık
      iki kaynaktan gelir:  gap(kap) + margin-top(§74c) = görünen.
      ÖLÇÜLDÜ, dört kap:
          .pp-gunler     16 + 16 = 32px   egzersizlerim · programlarim
          .fp-grid       22 + 16 = 38px   hesabim · hareket-profilim
          .fpx-kural     16 + 16 = 32px   challengelarim
          .ol-formcards  16 + 16 = 32px   antrenor-ol
      Beyar bunu "gün kartları çok ayrık" diye gördü — 32px, aynı
      panonun öteki kartları 16px. Kabın `gap`i KAZANIR: aralığı yazan
      taraf odur, §74c yalnız AKIŞ yığınlarının yedeğidir.
      ⚠ Özgüllük bilerek `:is()` — `:where()` sıfır verir ve §74c'yi
        (0,2,0) ezemezdi.

   ② OKUMA KOLONU BLOKLARI: 0px ile 148px arasında salınıyor. ÖLÇÜLDÜ:
          div.wrap.kap    dolgu 0/0     → bloklar arası    0px  YAPIŞIK
          div.bolum.kap   dolgu 74/74   → bloklar arası  148px  UÇURUM
      Beyar ikisini de gördü: "alttaki kartlar bitişik" (egzersizlerim ·
      antrenorum) ve "böyle çok boşluk olmasın" (ilerlemem ·
      programlarim · hareket-profilim).
      Değer uydurulmadı: `--bolum-nefes-sik` (32px) bu turda ölçülen
      ritimlerin ÇOĞUNLUĞU — pano çocuğu `section` olan beş ekranda
      (challengelarim · cozum-merkezi · enerji-defterim · hesabim ·
      rozetlerim) blok nefesi ZATEN 32px ve §74a `.modul-govde`nin alt
      nefesini de bu tokendan alıyor. Aykırı olan iki `.kap` kipiydi.
      🔴 `section` BANTLARINA DOKUNULMADI — onların dolgusu ZEMİN BOYAR
         (ölçüldü: `section.dikis` bg + 1px dikiş kenarı). Sıfırlamak
         bandı içeriğine yapıştırırdı. Kural yalnız SAYDAM okuma kabına
         (`.kap`) yazılı. */

:is(.pp-gunler, .fp-grid, .fpx-kural, .ol-formcards)
  > :is(.kart, .fp-card, .ozet-karti) + :is(.kart, .fp-card, .ozet-karti){
  margin-top:0;
}

.fit-pane > .kap{ padding-top:0; padding-bottom:0; }
.fit-pane > .kap + .kap{ margin-top:var(--bolum-nefes-sik); }


/* ── S4 · ÇİP ŞERİDİ ───────────────────────────────────────────────────
   Beyar: "tek biçim, aktif durum dahil."

   🔴 BİÇİM ZATEN TEKTİ — ÖLÇÜM BUNU DOĞRULADI, kalem BİÇİMDE DEĞİL
      DURUMDA. §43'ün üç kipi (`.cip` 8/15 · `.cip.suzgec` 9/16 min-h 44
      · `.cip.hap` r999) kaynaktan ölçülmüş KASITLI varyantlar; üçünü
      tek boya indirmek ölçümü geri almak olurdu.

   ÖLÇÜLDÜ (13 ekran · her sekme tıklanarak · görünen 8 şerit):
   ÜÇ ŞERİTTE AKTİF ÇİP PASİFTEN AYIRT EDİLEMİYOR — aktif kalem
   beyaz zemin, gri metin, yani hiçbir şey:

       şerit                   aktif kalemin sınıfı   çizilen
       .cipler (favori)        `cip suzgec on`        beyaz/gri  🔴
       .cipler (kayıt türü)    `cip suzgec on`        beyaz/gri  🔴
       .cipler.fpx-flat        `cip suzgec on`        beyaz/gri  🔴
       .cipler (süzgeç)        `cip suzgec aktif`     aksan/beyaz ✅

   Sebep: markup donörün durum adını (`on`) taşıyor, kanonun durumu
   `.aktif`. §43'ün kendi şerhi bu tuzağı zaten yazmış ("durum adı da
   tekti: `.secili` ↔ `.aktif`, tek ad kaldı") — ama devir YAPILMAMIŞ,
   yalnız kanon içi ikilik kapatılmış. Üçüncü ad dışarıda kaldı.

   İki ad birden devredilir ve durum ÜÇÜNCÜ bir yerden daha okunur:
   `aria-pressed="true"`. Ölçüldü — bu üç şeridin markup'ı zaten
   `aria-pressed`i doğru basıyor. Erişilebilirlik durumu ile görünen
   durum aynı kaynaktan gelince "işaret var ama görünmüyor" hâli
   kapanır; yeni sınıf, yeni renk, yeni ölçü üretilmedi.
   ⚠ `aria-pressed="false"` etkilenmez — yalnız `true`. */

.cip.on,
.cip[aria-pressed="true"]{
  background:var(--aksan-koyu); border-color:var(--aksan-koyu); color:var(--kagit);
  font-weight:var(--agirlik-kalin);
}


/* ── S5 · SEKME ŞERİDİ · TAŞARSA BAŞI KIRPILMAZ ────────────────────────
   🔴 §73a BU KURALI ZATEN YAZMIŞTI — ve KENDİ VARYANTI ONU EZİYORDU.
   §73a taban `.sekmeler`e `justify-content:safe center` verdi ve
   gerekçesini de yazdı ("`safe` … taşan şeridin BAŞINI kırpmayı önler").
   Ama `.sekmeler.ortali` (§6) düz `center` bildiriyor ve (0,2,0) ile
   tabanı (0,1,0) ÖZGÜLLÜKLE yeniyor — dosyadaki sıra değil, özgüllük.
   `width:fit-content` + `max-width:100%` ikilisi bunu önlemeye
   çalışıyor ama şerit kabından genişse `fit-content` zaten %100'e
   kırpılıyor ve düz `center` taşmayı İKİ YANA birden taşırıyor;
   sol taraf kaydırma ile bile erişilemiyor.

   ÖLÇÜLDÜ (fit-antrenorum @1440 · sekiz sekmeli şerit):
       kap 1176px · içerik 1246px · scrollLeft 0
       ilk sekme x=65, kap x=132  →  aktif sekmenin 67px'i KIRPIK
   Beyar: "buradaki default tab nasıl başlıyor, yarısı gözükmüyor bile".

   Aynı kelime kanonda ZATEN iki yerde kullanılıyor
   (`.cipler.ortali.tek-satir` · `.sekme-ray.hesap .sekmeler`) — yani
   düzeltme kanonun kendi çözümü, yeni bir şey değil. Varyant tabanla
   aynı sözü söyler. */
.sekmeler.ortali{ justify-content:safe center; }


/* ── S6 · KÜNYE ŞERİDİ · HÜCRE KİPİ İKİ TÜRLÜ YAZILIYOR ────────────────
   §22'nin `.kunye`si dört eşit hücreyi `gap:1px` + zemin numarasıyla
   çiziyor: ayraç aslında ARKA ZEMİNİN 1px'lik sızıntısı, hücreler
   `--kagit` ile o zemini örtüyor. Örtü kuralı yalnız `>div` için
   yazılmış:  `.kunye>div{ background:var(--kagit); padding:16 }`

   ÖLÇÜLDÜ (13 ekran · altı `.kunye`): ÜÇ ekranda hücreler `<span>`
   (`<span><b>11 hafta</b> arada geçen süre</span>`) —
   fit-ilerlemem · fit-programlarim(2) · fit-hareket-profilim.
   Orada örtü kuralı hiçbir şeye tutunmuyor:
       hücre bg=saydam · dolgu=0 · punto=16px (gövdeden miras)
   yani şerit dört hücreye bölünmüş bir künye değil, ÜSTÜNDE yazı olan
   DÜZ GRİ BİR BANT olarak çiziliyordu. Beyar: "şu component hiç hoş
   değil".

   Kural hücrenin ETİKETİNE değil ROLÜNE yazılır: künyenin çocuğu
   neyse hücredir. Tipografi UYDURULMADI — satır içi
   `<b>değer</b> etiket` kipinin ölçüsü kanonda ZATEN var
   (§`.ozet-kunye`, aynı kaynak kipi): etiket 12.5/orta/ikincil,
   değer 12.5/ekstra/mürekkep. Aynı iki değer buraya devredildi;
   `dt`/`dd` kipi kendi kuralında dokunulmadan duruyor. */
.kunye>div, .kunye>span{
  background:var(--kagit); padding:var(--bosluk-16); min-width:0;
}
.kunye>span{
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-orta);
  color:var(--metin-ikincil);
}
.kunye>span b{
  font-size:var(--yazi-12-5); font-weight:var(--agirlik-ekstra);
  color:var(--murekkep);
}


/* ── S7 · BOŞ DURUM YÜZEYİ BOYAMAZ ─────────────────────────────────────
   Canlı bölge (`role="status"` / `aria-live`) JS doldurana kadar BOŞTUR
   ama zeminini, dolgusunu ve köşesini o hâlde de çiziyor. ÖLÇÜLDÜ
   (egzersizlerim · Favori sekmesi @1440):
       p.fpx-durum  1122×26px · bg=aksan yıkaması · dolgu 12/15 · metin ""
   Ekranda boş durumun altında İÇİ BOŞ MAVİ BİR HAP duruyordu.
   Beyar: "altta gereksiz bir mavi pill var, kaldır, içi boş zaten".

   Kanon bu kararı ZATEN iki kez vermiş ama ikisi de tek kaleme yazılı
   (`.okuma-notu:empty` · `.ptk-durum:empty`) — yani kural bileşen bileşen
   keşfediliyor. Doğru dayanak SINIF değil ROL: bir bölge canlı duyuru
   yüzeyiyse ve içi boşsa görünmez. Böylece bugün olmayan yarınki durum
   yüzeyi de kendiliğinden doğru davranır.
   ⚠ Yalnız GERÇEKTEN boş olan (`:empty`) gizlenir — içinde boşluk bile
     olsa `:empty` tutmaz, yani JS bir kez yazdıysa bölge kalıcı olur. */
[role="status"]:empty,
[aria-live]:empty{ display:none; }


/* ── S8 · BÖLÜM GİRİŞ METNİ ALTINDAKİ KARTLA HİZALIDIR ─────────────────
   Beyar: "bu tarz açıklamaları yay, sayfa genişliğinde, altındaki kart
   ile hizalı."

   ÖLÇÜLDÜ (egzersizlerim · Favori sekmesi @1440), aynı sol kenardan
   başlayan üç kalem üç ayrı ende bitiyordu:
       h2 "Kaydettiklerin"     x=132  w=1152
       giriş metni             x=132  w= 520   ← `max-width:520px`
       altındaki kart          x=132  w=1176
   Paragraf başlığının yarısı kadar bile değil; okuyucu bölümün
   genişliğini üç kez yeniden öğreniyor.

   520px kanonda İKİ ayrı yerde yazılı ve ikisi AYNI ŞEY DEĞİL:
   `.arama`nın 520'si bir GİRDİ genişliği (kalması gerekir), §18'in
   giriş metnindeki 520 ise bir SATIR ÖLÇÜSÜ. Kaldırılan yalnız
   ikincisi; `.bolum-bas` ızgarası kaleme zaten `grid-column:1/-1`
   veriyor, yani kap ne kadarsa metin o kadar — yeni ölçü YAZILMADI,
   var olan bir kapak kaldırıldı.
   Donörden gelen `.lead` adı da aynı kalemin ikinci adı; ikisi birlikte
   devredilir ki 13 ekranda tek davranış kalsın. */
.bolum-bas .giris-metni,
.bolum-bas .lead{ max-width:none; }

/* 2026-09-12 — `.sec-head .lead` bu listeden ÇIKARILDI (Beyar kararı, yukarıdaki
   karar geçersiz kılındı: "donöre dön, paragraflar 520px kalsın").
   Ölçüldü: satır listedeyken anasayfa donörden 1440'ta 634 fark veriyordu, satır
   çıkınca 92 — tek başına 542 farkın kaynağıydı. Donörün `dd-shell.css`'indeki
   `.sec-head .lead{max-width:520px}` artık kazanıyor.
   `.bolum-bas` adları ÜYE tarafının kalemidir, onlarda karar aynen duruyor. */


/* ── S9 · YAPIŞMA KURALI KART'TA BİTMİYOR ──────────────────────────────
   Beyar: "sana kartlar böyle yapışık olmayacak dedim."
   Haklı — S3 kuralı üç ada yazılmıştı (`.kart` `.fp-card` `.ozet-karti`)
   ve okuma kolonundaki öteki bloklar kapsam DIŞINDA kalmıştı. Kural
   adları saydığı sürece her yeni komşuluk yeni bir kusurdur.

   ÖLÇÜLDÜ (29 ekran · her sekme tıklanarak · blok ailesinin TÜM
   komşulukları), yapışık kalan beş çift:
       .kart      + .uyari-kutu   0px   ×2  (hareket-profilim #hp-kisit …)
       .kart      + .tablo-kap    0px
       .tablo-kap + .bos-durum    0px
       .akordeon  + .kart         0px
       .kunye     + .olcer       11px
   Beyar'ın gördüğü kalem birincisi: uyarı kutusu kartın dibine
   yapışıyordu.

   Kural artık ADA değil AİLEYE yazılır: okuma akışında arka arkaya
   gelen iki BLOK bileşen arasında S3'ün tek değeri vardır. Değer aynı
   `--bosluk-16`; yeni ölçü üretilmedi, kapsam düzeltildi.

   ⚠ İKİ İSTİSNA KORUNUR:
     · `.bilgi-notu` kendi üst ritmini (§16 · 34px) taşır — o bir bölüm
       başlangıcıdır, kart komşusu değil. Aynı özgüllükte geri yazılır.
     · `gap` yazan kaplar S3'ün ① maddesindeki muafiyeti korur; çocuk
       listesi de aileye genişletildi, yoksa çift sayım geri gelirdi. */
:is(.kart,.fp-card,.ozet-karti,.uyari-kutu,.bilgi-notu,.kunye,.tablo-kap,.bos-durum,.akordeon,.olcer)
  + :is(.kart,.fp-card,.ozet-karti,.uyari-kutu,.kunye,.tablo-kap,.bos-durum,.akordeon,.olcer){
  margin-top:var(--bosluk-16);
}
:is(.kart,.fp-card,.ozet-karti,.uyari-kutu,.kunye,.tablo-kap,.bos-durum,.akordeon,.olcer)
  + .bilgi-notu{
  margin-top:var(--bosluk-34);
}
:is(.pp-gunler, .fp-grid, .fpx-kural, .ol-formcards)
  > :is(.kart,.fp-card,.ozet-karti,.uyari-kutu,.bilgi-notu,.kunye,.tablo-kap,.bos-durum,.akordeon,.olcer)
  + :is(.kart,.fp-card,.ozet-karti,.uyari-kutu,.bilgi-notu,.kunye,.tablo-kap,.bos-durum,.akordeon,.olcer){
  margin-top:0;
}


/* ── S10 · SÜZGEÇ ŞERİDİ DE BİR BLOKTUR ────────────────────────────────
   S9 aileyi genişletti ama `.cipler` dışarıda kalmıştı; şerit kendi
   7px'lik iç dolgusundan başka nefes almıyor.
   ÖLÇÜLDÜ (29 ekran · her sekme tıklanarak) — yedi ekranda dokuz çift:
       .cipler + .cipler     0px   egzersizlerim  ← iki süzgeç TEK blok
       .cipler + .kart       0px   egzersizlerim
       .cipler + .tablo-kap  0px   challengelarim · programlarim
       .cipler + .fp-list    0px   ilerlemem  (6px egzersizlerim)
       .cipler + .ba-count   0px   hesabim · hareket-profilim
       .cipler + .fpx-kiyas  4px   ilerlemem
   Yani süzgeç, süzdüğü şeyin üstüne yapışıyordu.

   İKİ AYRI ARALIK, ÇÜNKÜ İKİ AYRI İLİŞKİ — ve bu ayrım ölçülmüş bir
   ihtiyaç, süsleme değil:
     · ŞERİT ↔ ŞERİT (`DÖNEM` + `KANIT`): ikisi TEK kontrol kümesidir,
       aynı listeyi birlikte süzer. Blok aralığı verilirse üç eşit blok
       gibi okunur ve "hangisi hangi kümenin parçası" bilgisi kaybolur.
       `--bosluk-9` — kanonun `.cipler` şeridinin KENDİ gap'i, yani
       kümenin içindeki ritim dışına da aynı değerle çıkıyor.
     · ŞERİT ↔ SÜZÜLEN: iki ayrı bloktur, S9'un `--bosluk-16`'sı.
   Şeridin başlıkla arası (34px) zaten §18'in kuralı, dokunulmadı. */
.cipler + .cipler{ margin-top:var(--bosluk-9); }
.cipler + :is(.kart,.fp-card,.ozet-karti,.uyari-kutu,.kunye,.tablo-kap,
              .bos-durum,.akordeon,.olcer,.fp-list,.ba-count,.fpx-kiyas){
  margin-top:var(--bosluk-16);
}


/* ── S11 · SAYFALAMA KART AYAĞINDA KENDİ MARJINI TAŞIMAZ ───────────────
   §8 `.sayfalama`ya `margin-top:40px` veriyor ve bu AKIŞ bağlamında
   doğru: tablo biter, kırk piksel boşluk, sayfalama başlar.
   Ama sayfalama bir KART AYAĞININ (`.kart-alt`) içindeyse bant zaten
   var — ayağın kendi 16px dolgusu ve üst kenar çizgisi.
   İki bant üst üste biniyor.

   ÖLÇÜLDÜ (egzersizlerim `#egz-gecmis` @1440):
       tablonun son satırı → sayfalama          57px
       .kart-alt yüksekliği                    158px
       (dolgu 32 + sayfalama 44+40 + not 19+6 + sarma 16)
   Tablonun altında yarım ekran boş bant kalıyordu; kartın en yoğun
   kalemi (kayıtlar) ile sayfası arasında bağ kopuyor.

   Yeni ölçü YAZILMADI, ikinci bant kaldırıldı: ayak zaten bandın
   kendisidir. Akıştaki sayfalama (`.kart > .sayfalama`, programlarim)
   40px'ini korur — orada ayak yok. */
.kart-alt > .sayfalama{ margin-top:0; }


/* ── S12 · İÇERİĞİ OLMAYAN BANT BASILMAZ ───────────────────────────────
   Beyar: "sayfa sonunda gereksiz gri şerit var, içi boş bir bant.
   Böyle bir şey olmayacak."

   ÖLÇÜLDÜ — ve şerit bir BÖLÜM DEĞİL, §74a'nın kendi dolgusuydu.
   `.modul-govde` hem kendi zeminini boyuyor (`--zemin` #f9f9f9) hem de
   `padding-bottom:--bolum-nefes-sik` yazıyor. Bandın SON çocuğu tam
   enli ve KENDİ zeminini boyayan bir bölümse (beyaz `section.bolum` /
   `.hs-sec`), o bölüm bittikten sonra bandın 32px'i altta BAŞKA RENKTE
   bir şerit olarak görünüyor — içinde hiçbir şey olmayan bir bant.

   29 ekran tarandı · 11 ekranda birebir aynı şerit:
       cozum-merkezi · destek-taleplerim · fit-cozum-merkezi ·
       fit-hesabim · fit-odemelerim · fit-paketlerim · fit-rozetlerim ·
       hesabim · odemelerim · paketlerim · destek-olustur
   Hepsinde: bant #f9f9f9 · son bölüm #fff · şerit tam 32px.
   Kalan ekranların sonu SAYDAM bir okuma kabıyla bitiyor; orada aynı
   32px zemin farkı DEĞİL, nefesin kendisidir ve kalmalıdır.

   🔴 §74a GERİ ALINMIYOR — SAHİBİ DEĞİŞİYOR. O kural gerçek bir
   yokluğu kapatmıştı (üç bantta alt nefes hiç yoktu) ve nefes hâlâ
   gerekli; yanlış olan nefesin KİMDE durduğu. Nefes bandın altına
   değil, bandın son çocuğunun içine yazılır: çocuk kendi zeminini
   boyuyorsa nefes o zeminin içinde kalır, boyamıyorsa görünüş
   birebir eskisi gibi olur. Değer aynı `--bolum-nefes-sik`; yeni ölçü
   üretilmedi, tek bir dolgu bir kademe aşağı taşındı.

   ⚠ Sekmeli ekranlarda bandın son çocuğu GİZLİ bir panodur; kural bu
     yüzden görünür panonun son çocuğunu da hedefler. Aksi hâlde nefes
     hiç kimseye düşmezdi. */
.modul-govde{ padding-bottom:0; }
.modul-govde > *:last-child:not(.fit-pane),
.modul-govde > .fit-pane:not([hidden]) > *:last-child{
  padding-bottom:var(--bolum-nefes-sik);
}


/* ── S13 · SEKME RAYI İLE PANOSU ARASINDA TEK MESAFE ───────────────────
   Beyar: "section'un üst etiketi ve üstündeki taba bak, mesafeye."

   ÖLÇÜLDÜ (29 ekran · her sekme tıklanarak · rayın dibi → panonun ilk
   görünür kalemi) — ON DOKUZ farklı değer, iki küme:
       22–25px × 25 pano   ·   54–58px × 28 pano
       (ve 35 · 44 · 47 · 64 · 98 · 109 · 110 · 129 · 209 tekleri)
   Yani aynı ray, tıklanan sekmeye göre içeriği bazen iki kat daha
   uzağa itiyordu.

   KÖK — ölçüldü, tahmin değil: pano HER ZAMAN rayın 22px altında
   başlıyor; fark panonun İLK BLOĞUNDA:
       `.fit-pane > section`  kendi zeminini boyar, `padding-top:32`  → 54px
       `.fit-pane > .kap`     saydam okuma kabı, S3 dolgusunu sıfırlar → 22px
   İki kip aynı işi görüyor ama nefesi bir tanesi taşıyor.

   DEĞER SEÇİLMEDİ, SAYILDI: 54–58 kümesi ÇOĞUNLUK (28 pano) ve o
   nefes zaten `--bolum-nefes-sik`in kendisi. Saydam kap da aynı
   tokenla aynı mesafeye çıkarılır. `section` bantlarına DOKUNULMADI —
   dolguları zemin boyuyor (S3'ün aynı gerekçesi).
   ⚠ Yalnız İLK blok; ardışık bloklar S3'ün 32px'ini kullanmaya devam
     eder, yani panonun içindeki ritim değişmez. */
.fit-pane > .kap:first-child{ padding-top:var(--bolum-nefes-sik); }
/* 🔴 İLK YAZIMIN KUSURU — Beyar yakaladı, 2026-09-03: "tab ile altındaki
   içerik arasında niye bu kadar boşluk var, standart olacak dedik."
   HAKLI. Kural nefesi EKLİYORDU ama panonun ilk bloğunun İÇİNDEKİ kalem
   çoğu ekranda kendi üst payını zaten taşıyor. Ölçüldü (egzersizlerim
   `#egz-tamamlanan` @1440):
       pano 22 + bu kuralın 32 + `.fpx-sec` marjı 44 = 98px  (mürekkebe 117)
   Yani S3'ün düzelttiği ÇİFT SAYIM hatasını bu kural yeniden üretti.
   Nefes TEK yerden gelir: panonun ilk bloğundan. İçerideki ilk kalemin
   kendi payı sıfırlanır — kaldırılan bir değer, eklenen yok. */
.fit-pane > *:first-child > *:first-child{ margin-top:0; }


/* ── S14 · ARŞİV NESNESİ · SÜZGEÇ SÜZDÜĞÜ ŞEYLE AYNI KUTUDADIR ─────────
   Beyar: "arşivi redesign et."

   ÖLÇÜLDÜ — iki arşiv AYNI İŞİ İKİ AYRI YAPIYLA yapıyordu:
       #egz-gecmis   .kap > [başlık · çip · çip · KART[tablo · ayak]]
       #prg-gecmis   .bolum.kap > [başlık · KART[kart-başı · çip · tablo
                                                 · sayfalama · not]]
   Birincide süzgeç kartın DIŞINDA duruyor — kullanıcı iki ayrı nesne
   görüyor ve "bu çipler neyi süzüyor" sorusu ekranda yazılı değil.
   İkincide süzgeç kartın içinde ama kartın GİRİNTİSİ YOK: `.cipler`
   x=133, kartın kenarı da 133 — "DURUM" etiketi kart kenarına yapışık
   çıkıyordu (ölçüldü @1440).

   YAPI TEKLEŞTİ (markup TAŞINDI, yeniden yazılmadı — KOPYALAMA-KURALI
   eksi birinci madde; hiçbir eleman silinmedi, hiçbiri üretilmedi):
       .kart.tasma-kapali
         .kart-bas      ad + sayaç rozeti      ← sayaç, saydığı tablonun yanında
         .cipler ×N     süzgeçler
         .tablo-kap     kayıtlar
         .kart-alt      sayfalama + not         ← ayak, kenar çizgili
   `#egz-gecmis`in sayacı bölüm başlığının araç yuvasından kart başına
   indi: dört kaydı sayan rozet, dört kaydı gösteren tablonun üstünde
   durmalı — 900px yukarısında değil.

   BU KURAL O YAPIYI AYAKTA TUTAR: kartın içindeki süzgeç şeridi kartın
   kendi girintisini alır. Değer uydurulmadı — `--bosluk-24`, `.kart-bas`
   ve `.kart.dolgulu`nun ZATEN kullandığı kart girintisi. Böylece çip,
   üstündeki başlıkla ve altındaki tablo başlığıyla aynı hizadan başlar.
   ⚠ Kartın DIŞINDAKİ `.cipler` etkilenmez: orada girinti okuma
     kolonunun kendisidir. */
/* Beyar'ın seçimi (2026-09-03, iki alternatif ekran görüntüsüyle
   sunuldu): arşiv süzgeci ÇİP değil AÇILIR LİSTE — 9 ekranın kalıbı.
   Kart içindeki süzgeç yüzeyi, hangi kalıp olursa olsun kartın kendi
   girintisini alır; kural ada değil YUVAYA yazılı. */
.kart > .cipler{ padding-inline:var(--bosluk-24); }
.kart > .alan-izgara{ padding:var(--bosluk-16) var(--bosluk-24); }
.kart > .cipler:first-of-type{ padding-top:var(--bosluk-16); }
.kart > .cipler:last-of-type{ padding-bottom:var(--bosluk-16); }


/* ── S15 · KART BAŞI İKONU VE SAYFALAMA · İKİSİ DE DEVİR ───────────────
   Beyar: "kart ikonu: diğer kartlarda merkezde mi solda mı — ölç,
   tutarlı olsun. Pagination: §8 kuralı, ortalı."

   ① İKON KAROSU. ÖLÇÜLDÜ (29 ekran · her sekme tıklanarak · görünen
      her kart başı ikonu):
          34×34 · yuvarlak 12 · aksan yıkaması · 14px glif   × 58  ← kanon
          çıplak glif · zemin yok · 18.72px                   ×  1  ← `.kart-bas`
      Yani karo TEK ve YERLEŞİK bir kalıp; `.kart-bas` onu almıyordu
      çünkü §46'nın kuralı yalnız `.ozet-bas h3 i`ye yazılmış. Aynı rol,
      iki ad — §43'ün `.aktif`/`.on` ikiliğinin aynısı.
      Ad korunur, biçim tek yerden gelir. Yeni ölçü üretilmedi:
      34×34 · `--yuvarlak-md` · `--yazi-14` · `--aksan-yikama`,
      dördü de §46'nın kendi değerleri. Glif `place-items:center` ile
      karonun MERKEZİNDE — ölçümün cevabı bu.

   ② SAYFALAMA ORTALI. §8 zaten `justify-content:center` yazıyor ve
      akıştaki sayfalama ortalı çiziliyor. Kart ayağına girince ortalama
      KAYBOLUYOR: `.kart-alt` bir flex satırı, `nav.sayfalama` da onun
      esnek kalemi — kutu içeriği kadar büzülüyor (ölçüldü: x=157
      w=148, kap 1174) ve §8'in ortalaması 148px'lik kutunun içinde
      kalıyor. Ortalamanın çalışması için kutunun satırı KAPLAMASI
      gerekir. Yeni hizalama yazılmadı; §8'in kuralına genişlik verildi. */
.kart-bas h3 i{
  flex:none; width:34px; height:34px; border-radius:var(--yuvarlak-md);
  display:grid; place-items:center; font-size:var(--yazi-14);
  background:var(--aksan-yikama); color:var(--aksan-murekkep);
}
.kart-bas h3{ display:flex; align-items:center; gap:var(--bosluk-10); }
.kart-alt > .sayfalama{ flex:1 1 100%; }


/* ── S16 · YÜZEN DÜĞMELER TEK BOYDUR ───────────────────────────────────
   Beyar: "sağ alt antrenör FAB'ı böyle uzun olmasın; antrenör olmasa
   bile yazı koyma, başka bir şey koy; yukarısındaki 'yukarı çık' FAB'ı
   ile eş olsun, bu çok yer kaplıyor."

   ÖLÇÜLDÜ (fit-hesabim @1440, sağ alt köşe, iki yüzen düğme üst üste):
       #msjFab.is-bos   355×52   dolgu 0/20 · içinde 43 karakter metin
       .to-top           54×54   dolgu 0    · yalnız ikon
   Aynı köşede, 32px arayla, biri ötekinin ALTI KATI genişlikte. Sayfanın
   sağ alt kolonu bir düğme sütunu; iki farklı kutu orada bir sütun
   oluşturmuyor, biri ötekinin üstüne binmiş gibi duruyor.

   🔴 KAYNAĞIN GEREKÇESİ BİLİNİYOR VE DEVREDİLİYOR. `.is-bos` kipinin
   kendi şerhi şunu diyor: "randevusu olmayan üye: düğme yuvarlak rozet
   değil, DOĞRUYU SÖYLEYEN bir satırdır. 'Sohbet' yazıp boş panel açmak
   yalan olurdu." Gerekçe doğru — çözümü Beyar değiştiriyor, doğruluk
   şartını DEĞİL: cümle SİLİNMİYOR, `.yalniz-okuyucu`ya (§20) geçiyor.
   Ekran okuyucu hâlâ "Henüz antrenörün yok — antrenörlere göz at"
   duyuyor, `aria-label` de aynı cümleyi taşıyor; ekranda kalan, o
   cümlenin ikonu (`fa-user-tie` — sohbet değil, ANTRENÖR ikonu, yani
   düğme yine yalan söylemiyor).

   Ölçü uydurulmadı: 54×54 · `--yuvarlak-lg`, ikisi de `.to-top`un kendi
   değerleri. Taban `.msj-fab` de 56'dan 54'e çekildi — sütundaki üç
   kutu (sohbet · antrenör kipi · yukarı çık) artık tek boy. */
.msj-fab,
.msj-fab.is-bos{
  width:54px; height:54px; padding:0;
  border-radius:var(--yuvarlak-lg);
}
.msj-fab.is-bos > span{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}


/* ══════════════════════════════════════════════════════════════════════
   7 · SAYFA TABANI
   ---------------------------------------------------------------------
   🔴 BU BÖLÜM NEREDEYSE BOŞ — VE BU BİR ÖLÇÜMÜN SONUCU (2026-09-01).
   İlk yazımda burada bir sıfırlama vardı (`*{box-sizing}`, `.zebra p
   {margin:0}`, `.zebra h1..h4{...}`). İkisi de gereksizdi: kabuk zaten
   `dd-shell.css:101`de `*{margin:0;padding:0;box-sizing:border-box}` ve
   `:111`de `h1,h2,h3,h4{font-weight:700;line-height:1.12}` yazıyor.

   Gereksiz olmakla kalmadı, ZARARLIYDI: kanondan SONRA geldiği için eşit
   özgüllükte dört bileşen kuralını birden eziyordu —
     `.kimlik-giris` margin-top 12 → 0
     `.okuma-notu`   margin-bottom 18 → 0
     `.kapanis h3`   margin-bottom 8 → 0   + ağırlık 700 → 800
     `.kapanis p`    margin-bottom 20 → 0
   Dördü de kardeş markayla kıyaslamada fark olarak çıktı. Sıfırlama
   kalktı; değerler bileşenin kendi kuralından geliyor.
   ══════════════════════════════════════════════════════════════════════ */
body{ background:var(--zemin); font-family:var(--yuz); }