/* =====================================================================
 DADAFIT — ORTAK KABUK CSS (TEK KAYNAK)
 Kaynak: dadafit-hub-v1.html satır içi kabuk bloklarından birebir taşındı
 (2026-08-11 uygulama turu, Faz 0). DadaFit public sayfaları bu dosyayı
 <link> ile çağırır; sayfa dosyasına kabuk kuralı KOPYALANMAZ.
 Eşi: assets/js/fit-shell.js (markup + davranış, tek menü listesi).
 Renk kanonu: --fit = DadaFit kurumsal yeşil #009d4f. R7'ye kadar bu token
 --tomato adını taşıyordu (gastro paletinden kalma; değeri yeşil, adı kırmızı
 söylüyordu). Tek yeşil ailesi artık --fit-* — bkz. aşağıdaki ramp bloğu.
 NOT: font url()'leri bu dosyaya göre relative → ../fonts/
 ===================================================================== */

/* ============ 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. */
@font-face{
  font-family:"Gilroy";
  src:url("../../../dump/fit-prototip/assets/fonts/Gilroy-Medium.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
/* 🔴 KAYITLI YÜZ DÖRDE DÖNDÜ — Beyar kararı, 2026-08-29.
   Bu blok bir tur önce §A5 gereği İKİ yüze inmişti (Gilroy@500 +
   GilroyBd@700) ve marka lockup'ı 800/300'den 700/500'e geçmişti.
   Karar geri alındı: yüz kümesi DÖRT olur ve lockup eski görünümüne döner.

   ⚠ BU §A5'İ İHLAL EDER ve bilerek yapılmıştır. Şartnamenin de dörde
   dönmesi gerekir; o değişikliği YALNIZ Diet terminali yazar (§W3 — kanon
   kopya oradadır, §W6 — dört depoya birden iner). Bu depo yalnız uygular
   ve raporlar.

   Ölçülen dayanak (2026-08-29, canlı): dadagastro.com da DÖRT yüz kayıtlı
   tutuyor ve `Gilroy-Light.otf` indiriyor — yani dörtlü küme kardeş
   markanın bugünkü hâliyle birebir aynıdır, Fit tek başına ayrışmıyor.

   §A6 KORUNUYOR: GilroyBd@700 tanımlı kalır (Dalga 4'ün §V satırındaki
   kalem odur ve ihlal edilmiyor).
   §A9 · 700 ile 800 aynı dosyaya (`Gilroy-ExtraBold.otf`) çözülür —
   kayda geçmiş kusur, v1'de düzeltilmez.
   §A8 · font dosyası kümesi üç dosyadır ve değişmedi. */
@font-face{font-family:"GilroyBd";src:url("../../../dump/fit-prototip/assets/fonts/Gilroy-ExtraBold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"GilroyXB";src:url("../../../dump/fit-prototip/assets/fonts/Gilroy-ExtraBold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"GilroyLt";src:url("../../../dump/fit-prototip/assets/fonts/Gilroy-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
/* marka lockup — "Dada"=.bd, suffix=.sf. Eski hâline döndü. */
.bd{font-family:"GilroyXB","Gilroy",sans-serif;font-weight:800;letter-spacing:-.01em}
.sf{font-family:"GilroyLt","Gilroy",sans-serif;font-weight:300}

/* ============ KİMLİK TOKEN'LARI (brand-tokens.md) ============ */
:root{
  /* DadaFit alt-marka recolor (Store/Akademi pattern'i): chrome aksanı kurumsal yeşil.
 "Yemek/aldığın" kırmızısı --food (#E14827) ile hardcoded → Enerji Defteri korunur.
 Yeşil ailesinin TANIMI tek yerde: dosyanın altındaki "--fit-* ramp" bloğu. */

  /* ---- TEK HERO YÜKSEKLİK ÖLÇEĞİ (D2) --------------------------------
     Önce her banner sınıfının kendi sabit padding'i vardı (.lib-top 30/30 ·
     .df-hero 20/34 · .fs-top 26/32 · .cp-top 20/24 · .chl-hero 18/22 ·
     .pd-hero 12/16 · .ol-top 16/16) ve over-mode padding-top'ları sayfa
     sayfa ölçülmüş sabit sayılardı (152 · 133 · 147 · 131 · 125 · 139 · 129).
     Hepsi TEK ölçeğe indi: banner içi nefes iki token, header ofseti ise
     `calc(--fit-header-h + --hero-pt)` formülüyle türetiliyor. Sayfa bazında
     rastgele değer kalmadı; ölçeği değiştirmek için burası yeter. */
  --fit-header-h:113px;   /* üst bant 40 + header 72 (ölçüldü) */
  --hero-pt:15px;         /* banner üst nefesi — 113 header + 15 = 128, referansla aynı */
  --hero-pb:46px;         /* banner alt nefesi — referans /beslenme ile aynı */
  --hero-gap:10px;        /* banner içi dikey ritim (crumb ↔ h1 ↔ alt metin) */
  --hero-min:0px;         /* banner taban yüksekliği — içerik belirler */
  /* GERİ ALINDI (Beyar, aynı tur): D2'de 74dvh'ye indirilmişti, ana sayfa
     herosu bozuldu. Tam-ekran perde ana sayfanın imzası — dokunulmuyor.
     KARARLAR K15 buna göre düzeltildi. */
  --hero-full:100dvh;     /* tam-bleed hero (ana sayfa) — perde yüksekliği */
  --hero-full-fallback:100vh;
  --sec-pad:74px;         /* bölüm dikey nefesi — R8/K-A: referans dadadiet.com/beslenme 74·74·74·44 */
  /* R8 (4. tur) — DİKEY ÖLÇEĞİN İKİNCİ BASAMAĞI.
     Ölçüm 59 sayfada 26 farklı bölüm dolgusu buldu (0·8·12·14·30·32·34·36·
     38·40·44·46·48·50·52·54·56·58·60·64·66·68·70·72·74·78 px). Ölçek ikiye
     indi: normal nefes `--sec-pad`, sıkı nefes `--sec-pad-sm`; bilerek
     yapışık duran bölümlerde 0. */
  --sec-pad-sm:32px;      /* sıkı bölüm nefesi — bilgi bandı, ara şerit */
  /* Okunur satır ölçüsü (E6/it2 ölçümü). Tipografide okunur aralık 45–75
     karakter; ölçümde .hr-note paragrafı 1098px genişlikte 119 karakter/satır
     veriyordu. Tek token, akan metin kutularına uygulanır. */
  --measure:78ch;
  /* ---- BANNER AİLE YÜKSEKLİKLERİ (R15 · 5. tur) ----
     Beyar: "Sayı uydurulmayacak. Referans canlıdan ölçülüp birebir alınacak."
     ÖLÇÜM — dadadiet.com, üç genişlikte, İKİ BAĞIMSIZ LİSTE SAYFASI:

       genişlik | /beslenme | /diyetisyenler | /beslenme-rehberi/dengeli-tabak
       ---------|-----------|----------------|--------------------------------
        1440    |   544     |      544       |   560
        1024    |   607     |      607       |   617
         390    |   587     |      587       |   726

     İki liste sayfası her genişlikte BİREBİR aynı çıktı — değerler tesadüf
     değil, tasarım sabiti. Detay ölçüsü tek sayfadan (Beyar'ın gösterdiği
     URL); @390'daki 726 px içerik kaynaklı görünüyor, notu KARARLAR K30'da.

     4. turun 344/384 değerleri referanstan DAR olduğu için atıldı: 344'ün
     gerçek içerik alanı yalnız 231 px'ti ve zengin banner ~330 px sürüyordu
     — 28 sayfada içerik kırpılıyordu (B1). 544'te içerik alanı 370 px,
     her şey tek kolonda sığıyor. */
  --banner-h-liste:544px;
  /* banner içi dikey ritim — referans ölçüsü (kırıntı→H1 36.8 · H1→alt metin
     12.1 · alt metin→istatistik 22 · istatistik→CTA 23) ortalaması */
  --banner-gap:20px;
  --banner-h-detay:560px;
  /* §R4 · beş banner token'ı. Liste ve Kurumsal bugün AYNI sayıyı taşır ama
     §R5 gereği AYRI grup kalır — ileride biri değişince öteki etkilenmesin.
     Profil/Hesap grubu §R1'in 280px'i (§R3: ölçülen en uzundan alınır). */
  --banner-h-kurumsal:544px;
  --banner-h-profil:280px;
  /* geriye dönük diğer adlar (4. turdan kalan kurallar bunları okuyor) */
  --hero-h-list:var(--banner-h-liste);
  --hero-h-detail:var(--banner-h-detay);
  --slate:#211E16;           /* Pantone Process Black C — başlık/koyu metin/panel */
  --slate-2:#56514a;           /* sıcak muted koyu */
  --green:#3BB77E;           /* yalnız sağlık bloğu */
  --green-deep:#2c9963;
  --yellow:#FAC045;          /* yalnız puan */
  /* R20 · BOŞ YILDIZ. Gastro'da da ham hex olarak yazılı
     (`public/reference/tarif-detay/tarif-detay.css:1094` ve
     `puf-noktasi-detay.css:319` — ikisinde de `#E2DED6`), token değil.
     Değer ölçülerek alındı, uydurulmadı; ama bu depoda ham renk yazılmaz
     (CLAUDE.md: "değişken varsa o kullanılır, yoksa önce fit-shell.css'e
     eklenir") — o yüzden token'a çevrildi. `--line`den (#ECECEC) farklı
     bir değer ve Gastro'da da öyle: yıldız ayraçtan biraz koyu. */
  --star-bos:#E2DED6;        /* dolmamış yıldız */
  /* R6 · AJAN-E'nin kabuk notu · İKİNCİL METİN KONTRASTI — ÖLÇÜLDÜ.
     #7E7E7E beyazda **4.06:1**, kremde **3.86:1** → 12–13 px etiketlerde
     AA ALTI (eşik 4.5). 66 sayfanın 66'sında bu renkte metin var.
     Yeni değer UYDURULMADI: kardeş markanın aynı işi yapan grisi ölçüldü
     (dadadiet.com/hesaplayicilar `.hub-grid p` → rgb(113,113,113)).
     #717171 beyazda **4.88:1**, kremde **4.64:1** → AA.
     Yalnız renk değişti; hiçbir ölçü, boşluk ya da yerleşim değişmedi.
     KOYU ZEMİN GÜVENDE: bu token koyu banner/footer metinlerinde
     kullanılmıyor (tarandı). */
  --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:var(--marka); --c-petrol:#006072;
  --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;
  /* R7 (4. tur) — SEÇİLİ ETİKET ÇİPİNİN YARIÇAPI.
     Beyar: "Seçili tag'lerdeki çiplerdeki radiuslar fazla yuvarlak.
     Kartlardaki radius piksellerine kadar o şekilde tutarlı yap."
     Çip `--radius-pill` (999px) kullanıyordu; 32px yüksekliğinde tam hap.
     Değer tek token'a bağlandı ki sayfa bazında literal kalmasın. */
  --radius-chip:var(--radius-md);   /* 12px */
  /* R7 · Beyar'ın saydığı ölçeğin kalan iki basamağı da token oldu ki
     "sayfa bazında literal bırakma" kuralı ölçülebilsin. */
  --radius-ctl:10px;                /* eksen düğmesi / küçük kontrol */
  --radius-badge:6px;               /* sayaç ve fiyat rozeti */ --radius-circle:50%;
  /* legacy alias → yeni ölçek */
  /* legacy alias — TEKİL DEĞER: --r-lg 16px (eskiden ayni ad iki degerdeydi: 24px ve 16px) */
  --r:var(--radius-lg); --r-sm:var(--radius-sm); --r-lg:var(--radius-lg);
  --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;
}

*{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}

/* eyebrow */
/* R6 · AJAN-E'nin kabuk notu · EYEBROW KONTRASTI — ÖLÇÜLDÜ VE KAPATILDI
   Taban renk `--fit` (#009d4f) idi. 12px/700 metin WCAG'de "large text"
   sayılmaz, eşik 4.5:1 → beyazda **3.54:1**, kremde **3.36:1**: AA ALTI.
   Site zaten ikiye bölünmüştü (66 sayfa tarandı, açık zeminli eyebrow'lar):
     rgb(0,122,61)  --fit-deep  5.45 / 5.18  AA      → 39 sayfa
     rgb(0,157,79)  --fit    3.54 / 3.36  AA ALTI → 25 sayfa
   Taban `--fit-deep`e çekildi; 25 sayfa tek satırda AA'ya geçti. Sayfa içi
   `.sec-fit .eyebrow` / `.lib-top .eyebrow` gibi kurallar daha yüksek
   özgüllükte olduğu için etkilenmedi.
   KOYU ZEMİN GÜVENDE: 62 banner sayfasının hepsinde banner içi eyebrow zaten
   AÇIKÇA `--fit-bright` (61 sayfa) ya da daha açık (giris-v1) veriyor —
   hiçbiri taban kuralı okumuyor, ölçüldü.
   S4'ün `.btn-fit` için yaptığının aynısı. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fit-deep);
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:var(--radius-sm)}
.eyebrow i{font-size:13px}

/* section head */
/* Bölüm nefesi de tek ölçekten (D2: "perde yapısında yukarı scroll çok fazla").
   Ölçüm: 74px'lik bölüm dolgusu hero'dan sonraki ilk içeriği 6 sayfada
   900px'in altına indirmeyi engelliyordu. */
.sec{padding:var(--sec-pad) 0}
/* fixed header offseti — sayfanın İLK section'ına bu class verilir
 (topbar 40 + header 72 = 112px · mobil 62px) */
.below-header{padding-top:112px}
html{scroll-padding-top:112px}   /* sabit header altı anchor offseti (eski 166: header+subnav → 112: yalnız header) */
.sh-top .rd-crumb{margin-top:16px}    /* header-altı nefes — Dalga 1 standardı (kılavuz §3) */
/* 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(--fit);color:var(--fit)}
.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(--fit);color:#fff}
.btn-primary:hover{background:var(--fit-deep);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)}
/* .btn-fit — DadaFit yeşili birincil düğme.
   KABUĞA SONRADAN TAŞINDI, çünkü kabuğun KENDİSİ bu sınıfı basıyor:
   fit-shell.js'teki Pro kapısı (`?pg=1`) birincil eylemini
   `<a class="btn btn-fit">Pro'ya Geç</a>` diye üretiyor — ama kural
   burada tanımlı DEĞİLDİ. 27 sayfa kuralı kendi <style>'ına kopyalamış
   olduğu için oralarda kazara çalışıyordu; kopyası olmayan 20 sayfada
   düğme çıplak `.btn` olarak, yani ŞEFFAF ZEMİN + KOYU METİN ile
   render ediliyordu ve yanındaki `.btn-ghost` ile aynı görünüp
   birincil vurgusunu kaybediyordu.
   ÖLÇÜM: hareket-merkezi-v1 (kopyası yok) → rgba(0,0,0,0) / rgb(33,30,22);
   antrenorler-v1 (kopyası var) → rgb(0,157,79) / rgb(255,255,255).
   35 kopyanın hepsi bayt bayt aynıydı, buraya birebir taşındı.

   S4 (8. oturum) — ZEMİN --fit'ten --fit-deep'e ÇEKİLDİ.
   Beyar: "site geneli .btn-fit --fit-deep olsun, AA altında kalmasın."
   Hesaplanan kontrast (WCAG 2.1, beyaz metinle):
     --fit        #009d4f → 3.54:1   AA ALTI
     --fit-deep   #007a3d → 5.45:1   AA ✓
   Hover artık normalle çakışmasın diye ramp'in ÜÇÜNCÜ adımı eklendi:
     --fit-deeper #00572b → 8.76:1 · normal↔hover ayrımı 1.61:1
   (eski normal↔hover ayrımı 1.54:1 idi — ayrım azalmadı, arttı).
   --fit token'ının KENDİSİ değişmedi: vurgular, ikonlar, çipler ve odak
   halkası ondan beslenmeye devam ediyor (K29 — renk DadaFit'in).
   Yukarıdaki "antrenorler-v1 → rgb(0,157,79)" ölçümü bu değişiklikten
   ÖNCEKİ durumdur; bugün aynı düğme rgb(0,122,61) döner. */
.btn-fit{background:var(--fit-deep);color:#fff}
.btn-fit:hover{background:var(--fit-deeper);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(--fit);color:var(--fit);background:var(--fit-wash)}

@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}
.tb-lang::before{content:"";width:1px;height:14px;background:rgba(233,226,214,.22);margin-right:4px}
/* =====================================================================
   DİL SEÇİCİ — açılır menü  (Beyar kararı, 2026-08-29)
   ---------------------------------------------------------------------
   §W2 · eski karar silinmez. Bir önceki tur kardeş markanın deseninden
   gidiyordu: dadagastro.com üst bandında açılır menü YOK, tek bağlantı
   var — <a class="tb-lang-one" href="/en" hreflang="en">EN</a>; site
   Türkçeyken "EN", /en'deyken "TR" yazıyor (ikisi de canlıdan ölçüldü,
   html[lang] ve başlık "What should I cook?" ile doğrulandı). Kalem o
   turda deponun kilit dilinde (`.is-soon` + `.sr-lock`) bırakılmıştı,
   çünkü Fit'te çeviri altyapısı yok.
   Beyar: "dil seçimi kilitli olmamalı, kilit yalnız marka kalemlerinde;
   menü kutu içinde açılsın". Karar bağlayıcı — menü geri kuruldu,
   KİLİT ROZETİ KALKTI.
   Düğmede GEÇİLECEK dil yazar (Gastro kuralı korundu): site Türkçe →
   düğme "EN". Menüde aktif olan GERÇEK dildir (TR).
   🔴 Çeviri altyapısı hâlâ YOK (ölçüldü: i18n sözlüğü 0 · data-i18n 0 ·
   /en yüzeyi 0). Sahte çeviri üretilmedi; menünün dibinde tek satır
   dürüst not durur — "Yakında" yazılmadı (§O8).
   KAPALIYKEN `display:none` — `visibility:hidden` seçilseydi kutu
   ölçülebilir kalırdı (getClientRects().length 1 dönerdi).
   ===================================================================== */
.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-btn:focus-visible{outline:2px solid var(--fit-bright);outline-offset:3px;border-radius:var(--radius-sm)}
.tb-lang-menu{display:none;position:absolute;top:calc(100% + 9px);right:0;min-width:196px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--sh-lg);padding:6px;z-index:80}
.tb-lang.open .tb-lang-menu{display:block;animation:fadeUp .18s var(--ease)}
.tb-lang-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-family:inherit;background:none;border:0;cursor:pointer;color:var(--ink);font-size:13px;font-weight:600;padding:9px 11px;border-radius:var(--radius-sm);transition:.18s var(--ease)}
.tb-lang-menu button span{color:var(--muted);font-weight:500;font-size:12.5px}
.tb-lang-menu button:hover{background:var(--fit-wash);color:var(--fit-deep)}
.tb-lang-menu button.active,.tb-lang-menu button.active span{color:var(--fit-deep)}
.tb-lang-menu button.active::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:11px}
.tb-lang-menu button:focus-visible{outline:2px solid var(--fit-deep);outline-offset:-2px}
/* dürüst not — deponun `.hr-note` dilinin menü ölçüsüne indirilmiş hâli */
.tb-lang-note{display:flex;gap:8px;align-items:flex-start;margin:6px 2px 2px;padding:9px 10px;background:var(--fit-tint);border-radius:var(--radius-sm);font-size:11.5px;line-height:1.45;font-weight:500;color:var(--slate-2);transition:background .2s var(--ease)}
.tb-lang-note i{color:var(--fit-deep);font-size:11px;margin-top:2px;flex:none}
.tb-lang-note.is-vurgu{background:var(--fit-wash);outline:1px solid var(--fit-line)}

/* ---- ü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}
.tb-worlds{display:flex;align-items:center;gap:9px}
.tb-world{display:inline-flex;align-items:center;gap:8px;height:27px;padding:0 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;letter-spacing:.01em;border:1px solid transparent;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.tb-world i{font-size:12.5px;transition:color .2s var(--ease)}
.tb-world .tw-name{line-height:1}
.tb-world .tw-arr{font-size:9px;opacity:0;max-width:0;margin-left:-8px;overflow:hidden;transform:translateX(-5px);transition:opacity .2s var(--ease),transform .2s var(--ease),max-width .2s var(--ease),margin-left .2s var(--ease)}
.tb-world:hover .tw-arr{opacity:.92;max-width:16px;margin-left:0;transform:translateX(0)}
.tb-world .tw-soon{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:var(--radius-sm);background:rgba(233,226,214,.18);color:#e9e2d6;line-height:1}
/* DadaStore — domates dünyası (sıcak, e-ticaret) */
.tb-world-store{background:rgba(225,72,39,.18);border-color:rgba(225,72,39,.46);color:#fff}
.tb-world-store i{color:#ff7d5e}
.tb-world-store:hover{background:var(--fit);border-color:var(--fit);color:#fff}
.tb-world-store:hover i,.tb-world-store:hover .tw-arr{color:#fff}
/* DadaAkademi — petrol dünyası (serin, öğrenme) */
.tb-world-akademi{background:rgba(0,96,114,.30);border-color:rgba(95,203,216,.40);color:#fff}
.tb-world-akademi i{color:#5fcbd8}
.tb-world-akademi:hover{background:var(--c-petrol);border-color:var(--c-petrol);color:#fff}
.tb-world-akademi:hover i{color:#fff}

/* ============ HEADER — TEK KAT (marka · ortalanmış nav · aksiyonlar) — Revize T3 M2 ============ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  /* KATI DURUM TAM OPAK (kullanıcı kararı — KARARLAR.md K8).
     Eskiden rgba(255,255,255,.94) + blur idi. Banner görseli olan sayfalarda
     header'ın arkasından koyu fotoğraf sızdığı için "ne şeffaf ne katı" bir
     ara ton oluşuyor, menü yazıları kirli bir zemine oturuyordu. İstenen
     davranış ikili: banner üzerinde TAM ŞEFFAF, kaydırınca TAM KATI.
     %94 opaklık ikisinin de arası olduğu için 1.0'a çekildi; tam opak zeminde
     backdrop blur'un görsel katkısı yok, kaldırıldı (§18 gereksiz iş). */
  top:40px;background:var(--paper,#fff);
  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}
/* ===== DadaFit alt-marka kimliği: topbar dönüş + SVG mark + wordmark (Store/Akademi pattern'i) ===== */
.tb-back{font-weight:600}
.tb-back i{font-size:11px;transition:transform .2s var(--ease)}
.tb-back:hover i{transform:translateX(-3px)}
.tb-promo i{color:var(--marka-parlak-2)}
.tb-news{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:#cfc7ba}
.tb-news:hover{color:#fff}
.tb-news i{color:var(--marka-parlak-2);font-size:12px}
.tb-news b{font-weight:700;color:#fff;margin-left:1px}
.tb-news:hover b{text-decoration:underline;text-underline-offset:3px}
.fit-brand{display:flex;align-items:center;gap:10px}
.fit-mark{flex:none;display:block;width:40px;height:40px}
.fit-word{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.fit-word b{color:var(--slate);font-family:"GilroyXB","Gilroy",sans-serif;font-weight:800}
.fit-word .ft{color:var(--fit);font-family:"GilroyLt","Gilroy",sans-serif;font-weight:300}
/* koyu hero üstünde wordmark beyaz (fit-mark yeşil kare zaten okunur; scroll'da slate+yeşil döner) */
.header.at-top .fit-word b,.header.at-top .fit-word .ft{color:#fff}
.drawer-brand{display:flex;align-items:center;gap:10px}
.drawer-brand .fit-mark{width:32px;height:32px}
.drawer-brand .fit-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(--fit);background:var(--fit-wash)}
.nav a.active{color:var(--fit)}
.nav a.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--fit);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(--fit);color:var(--fit)}
.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}
/* minimal giriş butonu — kompakt boy, marka rengi (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(--fit);border:1px solid var(--fit);border-radius:var(--radius-md);
  /* R16 · `margin-left:3px` KALDIRILDI. Kap `.head-actions` `gap:9px`
     veriyor; bu ek marj yalnız `.btn-login`i taşıdığı için komşu aralıklar
     eşit değildi — ölçüldü (oturum kipi, 1440): 9 · 12 · 9. Yeni değer
     üretilmedi, fazlalık silindi; üç aralık da kabın 9px'i. */
  height:43px;padding:0 18px;cursor:pointer;white-space:nowrap;transition:.2s var(--ease);
}
.btn-login i{font-size:14px}
.btn-login:hover{background:var(--fit-deep);border-color:var(--fit-deep)}

/* ---- PLANIM düğmesi (head-actions) — DadaDiet kişisel buton deseni ----
 Ana menüde DEĞİL: Fit Planım dropdown'ı kaldırıldı, giriş noktası tek düğme.
 İkincil dilde durur ki birincil eylem (Giriş Yap / Pro) ile yarışmasın;
 her iki oturum durumunda da görünür. */
/* SOLID PRIMARY (A2) — eskiden outline/ghost'tu (beyaz zemin, gri kenar).
 Ölçülen referans (dadadiet.com, hem ana sayfa hem /diyetisyenler, 1440px):
 Planım düğmesi .btn-login sınıfını taşıyor ve DOLU yeşil —
 background rgb(28,122,78) · color #fff · border 1px aynı yeşil · radius 12px
 · font-weight 700 · font-size 14px · padding 0 18px. Orada "Giriş Yap" da
 aynı sınıfı taşır, yani iki düğme AYNI solid dilde durur.
 Bizde .btn-login zaten bu solid dili veriyor (--fit = #009d4f kurumsal
 yeşil) → .btn-plan artık onu EZMEZ, yalnız <a> olduğu için gereken
 düzeltmeleri ve aktif-sayfa durumunu ekler. */
/* R8 madde 1 — MİSAFİRDE GİZLİ, GİRİŞTE GÖRÜNÜR.
 Eskiden her iki oturum durumunda da duruyordu (referans dadadiet.com hâlâ
 öyle; ölçüldü, misafirde a.btn-login "Planım" görünür). Beyar misafirde
 gösterilmesini kusur saydı → kapı yalnız girişte açılıyor.
 Gizleme burada: .btn-plan (0,1,0) .btn-login'i (0,1,0) kaynak sırasıyla yener;
 açma aşağıdaki body.is-auth .btn-login.btn-plan (0,3,0) kuralında. */
.btn-plan{text-decoration:none;display:none}
.btn-plan i{color:#fff}
.btn-plan.active{background:var(--fit-deep);border-color:var(--fit-deep)}
.btn-plan:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
/* logged-in'de de kalır (btn-login gizleme kuralının dışında) */
body.is-auth .btn-login.btn-plan{display:inline-flex}
/* NOT: şeffaf header'da (at-top) cam yüzeye DÖNMEZ — ölçüm, kardeş üründe
 at-top durumunda da düğmenin dolu yeşil kaldığını gösterdi
 (scroll 0 · header.at-top · planım background rgb(28,122,78)).
 Bu yüzden eski ".header.at-top .btn-plan{background:rgba(255,255,255,.14)}"
 cam varyantı kaldırıldı; düğme her iki header durumunda da solid primary. */

/* ===== 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 */
/* R9 · K66 — `.head-prog` (İlerlemem) bu listeye KATILDI. Ölçüldü: eklendiği
 hâliyle misafirde de görünüyordu (?auth=0 · 1440 · head-actions'ta
 "icon-btn head-prog"). İlerlemem kişisel gelişim sayfası; Planım ve zil
 nasıl yalnız girişte açılıyorsa o da öyle. Kaynak sırası .icon-btn'i
 (0,1,0) yener, açma aşağıdaki body.is-auth kuralında. */
.head-add,.head-bell,.head-prog,.acct-wrap{display:none}
body.is-auth .btn-login{display:none}
body.is-auth .head-add,body.is-auth .acct-wrap{display:flex}
body.is-auth .head-bell,body.is-auth .head-prog{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(--fit)}
.acct-ava{width:33px;height:33px;border-radius:var(--radius-circle);background-size:cover;background-position:center;flex:none}
.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(--fit);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ı) */
/* Hesap menüsü artık Planım alanının tamamını taşıyor (11 kalem + hesap aksiyonları)
 → ekranı aşmasın diye kendi içinde kaydırılır. */
.acct-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:272px;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:.12s var(--ease);z-index:80;max-height:calc(100dvh - 112px - 12px - 10px);overflow-y:auto;overscroll-behavior:contain}
.acct-menu::-webkit-scrollbar{width:6px}
.acct-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.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,.acct-menu>.acct-soon{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)}
.acct-menu>a i,.acct-menu>.acct-soon i{width:18px;text-align:center;color:var(--fit);font-size:14px;margin-top:2px}
.acct-menu>a span,.acct-menu>.acct-soon span{display:block}
.acct-menu>a small,.acct-menu>.acct-soon small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px}
.acct-menu>a:hover{background:var(--fit-wash);color:var(--fit);padding-left:16px}
/* R8 madde 6 — YER TUTUCU KALEM (hedef sayfa henüz yok).
   Bağlantı DEĞİL: tıklanmaz, hover'da kaymaz, odak sırasına girmez.
   Solgun ama okunur (--muted 4.6:1) + "Yakında" rozeti durumu yazıyla söyler. */
.acct-menu>.acct-soon{color:var(--muted);cursor:default}
.acct-menu>.acct-soon i{color:var(--muted)}
.acct-soon-tag{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:var(--radius-sm);
  background:var(--fit-tint);color:var(--fit-deep);font-size:10px;font-weight:700;font-style:normal;
  letter-spacing:.02em;vertical-align:1px}
.acct-menu .acct-logout,.acct-menu .acct-logout i{color:var(--fit)}
/* 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}
/* R9 · K66 — açılır menü grup başlığı (belge §2: üç başlıklı grup). İlk grubun
   üstünde fazladan boşluk olmasın diye :first-child sıfırlanıyor. */
.acct-grup{margin:12px 4px 5px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.acct-grup:first-child{margin-top:2px}
.acct-menu .acct-uyari,.acct-menu .acct-uyari i{color:#a8320f}
.acct-menu .acct-uyari:hover{background:#fbebe6;color:#8a2a0d}
/* 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(--fit)}
.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(--fit);color:var(--fit)}
.lg-ico{width:62px;height:62px;border-radius:var(--radius-circle);background:var(--fit-wash);color:var(--fit);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}
.dropdown{
  position:absolute;top:calc(100% + 12px);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:.12s 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(--fit);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(--fit-wash);color:var(--fit);padding-left:16px}
.dropdown a+a{border-top:1px solid var(--line)}
.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}
/* grup başlığı (dd-group) — panel içi ayraç */
.dd-group{
  padding:12px 13px 5px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--line);margin-top:6px;
}
.dropdown>.dd-group:first-child{border-top:none;margin-top:0;padding-top:6px}
/* .dd-group'tan hemen sonra gelen bağlantı üst çizgisini tekrarlamaz */
.dd-group+a{border-top:none !important}

/* ---- GENİŞ PANEL (dd-wide) KALDIRILDI ----
 Hareket paneli 11 kalemle iki kolona yayılıyordu; kullanıcı kararıyla üç kaleme
 ve tek kolona indi (KARARLAR.md K7), böylece `.dd-wide` sınıfını kullanan kalan
 öğe olmadı. Beraberinde ≤1280px'te paneli sola yaslayan medya sorgusu da kalktı:
 o kural yalnız 560px'lik geniş panelin ekran dışına taşmasını çözmek için vardı,
 dar panelde (265px) taşma matematiksel olarak mümkün değil — ölçüldü, en dar
 başlık merkezi 200px, panelin yarısı 133px.
 Belge §18 "kullanılmayan CSS'i kaldır". */


/* ---- 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:.12s 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(--fit);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(--fit-wash);color:var(--fit)}
.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(--fit);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(--fit);
  background:var(--fit-wash);border:1px solid color-mix(in srgb, var(--marka) 22%, transparent);
}
.mega-cats .mega-cat-all small{color:var(--fit);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(--fit);color:#fff;border-color:var(--fit)}
.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-find{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 14px;border-radius:var(--radius-md);background:var(--fit-wash);border:1px solid color-mix(in srgb, var(--marka) 22%, transparent);transition:.18s var(--ease)}
.mega-find .mf-ico{flex:none;width:38px;height:38px;border-radius:var(--radius-sm);background:#fff;color:var(--fit);display:grid;place-items:center;font-size:16px}
.mega-find .mf-body{flex:1;min-width:0}
.mega-find .mf-body b{display:block;font-size:14px;font-weight:700;color:var(--fit);line-height:1.2}
.mega-find .mf-body small{display:block;font-size:11.5px;color:var(--fit);opacity:.78;font-weight:500;margin-top:2px}
.mega-find .mf-arr{flex:none;color:var(--fit);font-size:13px;transition:transform .2s var(--ease)}
.mega-find:hover{background:var(--fit);border-color:var(--fit)}
.mega-find:hover .mf-body b,.mega-find:hover .mf-body small,.mega-find:hover .mf-arr{color:#fff;opacity:1}
.mega-find:hover .mf-arr{transform:translateX(3px)}
/* 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}

/* ---- "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:not(:disabled){background:var(--fit);border-color:var(--fit);color:#fff}
.row-nav button:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
/* uçlara gelindiğinde ok DEVRE DIŞI görünür — "bastım ama bir şey olmadı" hâli biter */
.row-nav button:disabled{opacity:.34;cursor:default;background:var(--paper);border-color:var(--line);color:var(--muted)}
/* kaydırılacak içerik yoksa ok grubu hiç görünmez */
.row-nav[hidden]{display:none}

.row-track{
  display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;padding:6px 2px 10px;
  /* klavye: Tab ile ray içindeki karta geçince tarayıcı hizalar; ok tuşları da çalışsın */
  scroll-behavior:smooth;overscroll-behavior-x:contain;
  /* mobil swipe momentumu */
  -webkit-overflow-scrolling:touch;
}
.row-track::-webkit-scrollbar{display:none}
.row-track>*{flex:none;width:274px;scroll-snap-align:start}
/* ray klavyeyle odaklanabilir olduğunda görünür halka */
.row-track:focus-visible{outline:3px solid var(--fit);outline-offset:4px;border-radius:var(--radius-md)}
/* hareket azaltma tercihinde yumuşak kaydırma kapanır */
html.reduce-motion .row-track{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){ .row-track{scroll-behavior:auto} }
/* dar ekranda kart genişliği ekrana oranlanır — sabit 274px taşma yapıyordu */
@media (max-width:640px){
  .row-track{gap:14px;scroll-padding-left:2px}
  .row-track>*{width:min(274px,78vw)}
}

/* ---- 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}
/* ---------------------------------------------------------------
 BEŞ ALAN (9. tur revizyonu):
   Marka | Hareket ve Öğren | Programlar ve Uzman Desteği |
   Enerji ve Denge | Uygulama
 fr oranları ÖLÇÜLEREK seçildi (@1440, wrap içi 1176 px, gap 28×4):
   1 fr = 177.3 px →  marka 257 · hareket 168 · programlar 204 ·
                      enerji 213 · uygulama 222
 En uzun kalem "Günlük Enerji İhtiyacını Hesapla" 200.3 px < 213,
 en uzun başlık "Programlar ve Uzman Desteği" 203.7 px < 204 →
 @1440'ta hiçbiri sarmıyor.
 --------------------------------------------------------------- */
.foot-grid{display:grid;grid-template-columns:1.45fr .95fr 1.15fr 1.2fr 1.25fr;gap:44px 28px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1)}
/* Kalemler dar ekranda sarabilsin — yasal bandın kalemleri nowrap kalır. */
.foot-col a{white-space:normal}
.foot-brand img{height:42px;width:auto;margin-bottom:22px}
.foot-soc{display:flex;gap:11px}
/* 🔴 R18 · İKİ SEÇİCİ, TEK KUTU. Sosyal kutular `<a href="#">` iken footer
   denetimi ikisini de "boş hedef" saydı; hesap adresi gelene kadar mağaza
   kutularının kalıbına (`<span aria-disabled>`) çekildiler. Kutunun görüntüsü
   DEĞİŞMEDİ — aynı 42px, aynı yarıçap, aynı zemin. Değişen tek şey: span'de
   hover yükselmesi ve imleç yok, çünkü tıklanacak bir şey yok. */
.foot-soc a,.foot-soc .fs-soc{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(--fit);color:#fff;transform:translateY(-3px)}
.foot-soc .fs-soc{cursor:default}
.foot-col h5{color:#fff;font-size:15px;font-weight:700;margin-bottom: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(--fit);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}

/* ---- ORTA SÜTUNLAR · ACCORDION BAŞLIĞI ------------------------
 Başlık gerçek <button>. Masaüstünde `disabled` → odak sırasına
 girmez, tıklanamaz; görünüm eski <h5> ile aynı kalsın diye
 opaklık/imleç sıfırlanıyor ve chevron gizleniyor. */
.foot-col .fc-head{margin:0 0 18px}
.fc-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:0;background:none;border:0;font:inherit;color:#fff;font-size:15px;font-weight:700;
  text-align:left;cursor:pointer}
.fc-toggle:disabled{cursor:default;opacity:1;color:#fff}
.fc-chev{font-size:12px;transition:transform .2s var(--ease);flex:none}
.foot-col.is-open .fc-chev{transform:rotate(180deg)}
@media (min-width:641px){ .foot-col .fc-chev{display:none} }

/* ---- 5 · UYGULAMA ALANI --------------------------------------
 Mağaza kutuları <a href> DEĞİL (uygulama yayımlanmadı): <span>,
 tıklanamaz, odaklanamaz, aria-disabled. */
.foot-app h5{color:#fff;font-size:15px;font-weight:700;margin:0 0 12px}
.foot-app .ap-tag{font-size:14px;font-weight:500;color:rgba(255,255,255,.82);line-height:1.6;margin:0 0 16px;text-align:left}
.ap-stores{display:flex;flex-direction:column;gap:10px}
.ap-store{display:flex;align-items:center;gap:11px;padding:9px 14px;border-radius:var(--radius-md);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.72);cursor:default;user-select:none}
.ap-store>i{font-size:22px;flex:none}
.ap-store .fs-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ap-store .fs-txt small{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.ap-store .fs-txt b{font-size:15px;font-weight:700;color:rgba(255,255,255,.86)}
/* ÖLÜ KURALLAR — R11/M4'te `.ap-soon` bloğu footer işaretlemesinden
   çıkarıldı (Beyar: "footer'da sağ altta 'yakında' diye bir şey
   kalmayacak"). Kurallar BIRAKILDI: uygulama yayımlanana kadar blok geri
   istenirse biçimi hazır dursun. Kabuk sözleşmesi: ölü kural silinmez,
   kütüğe yazılır — kütük tasks/REVIZYON-11.md M4. */
.ap-soon{margin:12px 0 0;font-size:12.5px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.78);text-align:left}
.ap-soon-tag{display:inline-block;margin-right:6px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.18);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}

/* ---- 6 · KURUMSAL BANT — ayrı yatay bant ----------------------
 Sekiz kalemin toplam metin genişliği 733.6 px, ayraç payı 147 px →
 @1440 (1176 px) ve @1025+ tek satır. ≤1024'te 4 sütunlu ızgara =
 İKİ DENGELİ SATIR. Sekiz kalem AYNI punto/ağırlık/renk taşır:
 doküman "Çözüm Merkezi ile Öneri ve Şikâyet geri plana atılmamalı"
 diyor, bu yüzden hiçbiri zayıflatılmadı. */
.foot-corp{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  padding:22px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.foot-corp a{font-size:14px;font-weight:500;color:rgba(255,255,255,.92);white-space:nowrap;transition:.2s}
.foot-corp a:hover{color:#fff}
/* =====================================================================
   🔴 R18 · KURUMSAL/YASAL/ALT BANT — DOKUNMA HEDEFİ 24px (WCAG 2.5.8 AA)
   ---------------------------------------------------------------------
   Footer denetimi (docs/qa/footer-denetim.mjs) ölçtü: bu üç banttaki 15
   bağlantının görünür yüksekliği 21.7px / 21.1px — WCAG 2.5.8'in AA
   tabanı olan 24px'in ALTINDA. Kolonlardaki kalemler 35.7px, onlar geçiyor.

   GÖRÜNTÜ DEĞİŞMİYOR. Yasal bant belgede DOKUNULMAZ ("metinleri,
   sıralaması, yönlendirmeleri, renkleri ve görsel yapısı mevcut haliyle
   korunacaktır") — bu kural o şartın hiçbirine dokunmaz: punto, renk,
   sıra, hedef, satır yüksekliği aynı kalır; yalnız görünmez bir `::before`
   tıklama alanını 24px'e açar. Deponun kendi deseni (kit §10 `.kyt-btn`,
   §13 `.adm-ico-btn`, `.fb-chiprow .chip`): "görsel aynı, hedef büyük".

   NEDEN 24 VE 44 DEĞİL: kitin 44px hedefi düğme/çip/sekme içindir. Bu
   bantlar metin bağlantı listesi ve 390px'te satır adımı ÖLÇÜLDÜ — 29px.
   44px'lik kutular komşu satırla çakışır ve tıklama yanlış kaleme
   düşerdi; 24px çakışmıyor (29 > 24, ölçüldü).
   ===================================================================== */
.foot-corp a,.foot-lawband a,.foot-bottom a{position:relative}
.foot-corp a::before,.foot-lawband a::before,.foot-bottom a::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:24px;transform:translateY(-50%)
}
.foot-corp .sep{width:1px;height:12px;background:rgba(255,255,255,.28);flex:none}

/* ---- 7 · YASAL BANT — DOKUNULMAZ ------------------------------
 Kalem metinleri, sırası, hedefleri ve RENGİ eski "Yasal ve Sağlık"
 kolonuyla birebir aynı: 14px / 500 / rgba(255,255,255,.92).
 Altı kalemin toplam genişliği 707 px + 105 px ayraç → @1440 ve
 @1024 tek satır. */
.foot-lawband{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:20px 0 4px}
.foot-lawband .fl-head{margin:0 4px 0 0;color:#fff;font-size:15px;font-weight:700;white-space:nowrap}
.foot-lawband a{font-size:14px;font-weight:500;color:rgba(255,255,255,.92);white-space:nowrap;transition:.2s}
.foot-lawband a:hover{color:#fff}
.foot-lawband .sep{width:1px;height:12px;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}

/* ---- ORANGE FOOTER (gaviaworks yapısı) ---- */
/* DadaFit yeşil footer: #009d4f beyaz metinle AA'ya çıkamaz (~3.5:1) → marka deep-green'i
 (--fit-deep) zemin + beyaz/yüksek-opaklık metin → tüm metin net okunur (≥4.5:1). */
.gw-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:700;letter-spacing:-.04em;margin-right:2px}
.footer.orange{background:var(--fit-deep);color:rgba(255,255,255,.88)}
.footer.orange .foot-grid{border-bottom-color:rgba(255,255,255,.2)}
.footer.orange .foot-soc a,.footer.orange .foot-soc .fs-soc{background:rgba(255,255,255,.15);color:#fff}
.footer.orange .foot-soc a:hover{background:#fff;color:var(--fit-deep);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ŞMA + KAYDIRMA OLUĞU — "layout sağa kayıyor" kökü
 ---------------------------------------------------------
 ESKİ: html,body{overflow-x:hidden}
 overflow-x:hidden kökü YATAY KAYDIRMA KONTEYNERİNE çevirir. Taşan bir
 öğe (dropdown paneli, çip rayı, geniş kart) görsel olarak kırpılır ama
 kök hâlâ programatik olarak kaydırılabilir kalır: içindeki bir bağlantı
 odak alınca tarayıcı onu görünür kılmak için sayfayı yana kaydırır.
 Ayrıca overflow:hidden, içindeki position:sticky öğelerin yapışmasını
 bozar.

 YENİ:
 · overflow-x:clip → kırpar ama KAYDIRMA KONTEYNERİ YARATMAZ; hiçbir
 odak/anchor sayfayı yana kaydıramaz. (clip ↔ visible eşleşmesi
 spesifikasyonda serbesttir, dikey kaydırma normal kalır.)
 · scrollbar-gutter:stable → dikey kaydırma oluğu HER ZAMAN rezerve.
 Modal/drawer açılıp gövde kilitlendiğinde çubuk kaybolsa bile
 clientWidth değişmez → .wrap yeniden ortalanmaz → sıçrama olmaz.
 · body.scroll-locked → kilidin tek CSS kanalı (JS: lockScroll()).
 ========================================================= */
html{overflow-x:clip;scrollbar-gutter:stable}
body{overflow-x:clip}
body.scroll-locked{overflow:hidden}
/* clip desteklemeyen eski tarayıcı: hidden'a düş (davranış eskisi gibi olur) */
@supports not (overflow-x:clip){ 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(--fit);color:var(--fit)}
.drawer-nav{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.d-item{border-bottom:1px solid var(--line)}
/* R8 madde 1 — drawer'daki Planım bölümü de oturuma bağlı. */
.d-item.d-plan{display:none}
body.is-auth .d-item.d-plan{display:block}
/* Tüm kalemler aynı sol eksende hizalanır: [ikon] etiket …………… [chevron]
 (eskiden justify-content:space-between yüzünden panelsiz kalemlerin etiketi
 sağa yapışıyor, panelli olanlarınki solda kalıyordu) */
.d-link{
  display:flex;align-items:center;justify-content:flex-start;gap:11px;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>i:first-child{width:20px;text-align:center;font-size:15px;color:var(--fit);flex:none}
/* satır = bağlantı + ayrı chevron düğmesi */
.d-row{display:flex;align-items:stretch}
.d-row>.d-link{flex:1;min-width:0}
.d-toggle{
  flex:none;width:56px;border:none;background:none;cursor:pointer;
  border-left:1px solid var(--line);color:var(--muted);font-size:12px;
  display:grid;place-items:center;transition:color .2s var(--ease),background .2s var(--ease);
}
.d-toggle:hover{background:var(--fit-wash);color:var(--fit)}
.d-toggle:focus-visible{outline:3px solid var(--fit);outline-offset:-3px}
.d-toggle i{transition:transform .25s var(--ease)}
.d-item.open>.d-row>.d-toggle{color:var(--fit)}
.d-item.open>.d-row>.d-toggle i{transform:rotate(180deg)}
.d-link .fa-chevron-down{margin-left:auto;width:auto;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(--fit)}
.d-link .soon{font-size:9.5px}
.d-sub{max-height:0;overflow:hidden;transition:max-height .15s 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(--fit);font-size:13px}
.d-sub a:hover{color:var(--fit);background:var(--fit-wash)}
.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(--fit);color:var(--fit)}
/* drawer dünya kapıları (mobilde üst bant gizli — DadaStore/DadaAkademi buradan) — tb-world kimliği */
.drawer-worlds{display:grid;grid-template-columns:1fr;gap:9px;margin-top:7px}
.drawer-world{display:flex;align-items:center;gap:9px;min-height:48px;padding:0 15px;border-radius:var(--radius-md);font-size:14px;font-weight:700;letter-spacing:.01em;border:1px solid transparent;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.drawer-world i{font-size:13px}
.drawer-world .dw-name{line-height:1.1}
.drawer-world .dw-arr{font-size:9px;margin-left:auto;opacity:.7}
.drawer-world .dw-soon{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:var(--radius-sm);margin-left:auto;line-height:1}
.dw-store{background:rgba(225,72,39,.10);border-color:rgba(225,72,39,.40);color:var(--fit)}
.dw-store i{color:var(--fit)}
.dw-store:hover{background:var(--fit);border-color:var(--fit);color:#fff}
.dw-store:hover i,.dw-store:hover .dw-arr{color:#fff}
.dw-akademi{background:rgba(0,96,114,.10);border-color:rgba(0,96,114,.34);color:var(--c-petrol)}
.dw-akademi i{color:var(--c-petrol)}
.dw-akademi .dw-soon{background:rgba(0,96,114,.14);color:var(--c-petrol)}
.dw-akademi:hover{background:var(--c-petrol);border-color:var(--c-petrol);color:#fff}
.dw-akademi:hover i{color:#fff}
.dw-akademi:hover .dw-soon{background:rgba(255,255,255,.20);color:#fff}
/* drawer dil seçici (mobilde üst bant yok) — aç/kapa liste: N dile ölçeklenir */
/* çekmece dil satırı — üst banttaki menüyle AYNI karar (kilit yok, not var) */
.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}
.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(--fit-deep);color:var(--fit-deep)}
.drawer-lang-list button.active{border-color:var(--fit-deep);background:var(--fit-wash);color:var(--fit-deep)}
.drawer-lang-list button.active::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:12px}
.drawer-lang-list .tb-lang-note{margin:2px 0 0}

/* 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}
/* 🔴 İKON + ETİKET — BEYAR KARARI 2026-09-04. Önceki hâli "icon-only,
   IG tarzı" idi ve etiketi ekran-okuyucuya gizliyordu; kalem 44×44
   kareydi. Kanon §67.1 çubuğu "5 kalem · <a> · ikon + etiket, dikey"
   diye tanımlıyor ve `.alt-cubuk .ac-kalem` dikey kolonu + 3px boşluğu
   ZATEN yazıyordu — ama 42 yüzey sayfası `kanon/bilesenler.css`i HİÇ
   yüklemiyor (yalnız `tokenlar.css` + `markalar/fit.css`), üstelik kabuk
   onlardan SONRA geliyor. Yani kanon kuralı o sayfalara hiç inmiyordu ve
   çubuk etiketsiz kalıyordu (Beyar canlı ekranda gördü).
   ÖLÇÜ UYDURULMADI — Gastro'nun canlı çubuğundan HTTP üstünden okundu
   (@390): kalem 72×64 · dikey · gap 3px, etiket 9.5px / 700 /
   rgb(86,81,74) · satır 10.925px. `--slate-2` o rengin kabuktaki adı. */
.bn-item{
  flex:1;position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  min-height:64px;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);
}
.bn-item>span:last-child{position:static;width:auto;height:auto;padding:0;overflow:visible;clip:auto;clip-path:none;border:0;white-space:nowrap;font-size:9.5px;line-height:1.15;font-weight:700}
/* aktif: yarı saydam domates (primary) — glass korunur, radius-lg pill ile uyumlu */
.bn-item.active{color:var(--fit);background:color-mix(in srgb, var(--marka) 15%, transparent)}
/* R8 madde 1 — alt bardaki Planım kalemi de oturuma bağlı.
   `display:none` DEĞİL `visibility:hidden`: kalem kapanınca bar beş yuvadan
   dörde iniyordu ve `justify-content:space-around` yüzünden ortadaki kabarık
   FAB (Programlar) 42px sağa kayıyordu — ölçüldü @390, misafir. Yuva yerinde
   kalınca FAB tam ortada duruyor, iki durumda da bar ritmi aynı.
   Erişilebilirlik: visibility:hidden öğe odak sırasına girmez ve ekran
   okuyucuya okunmaz — gizleme gerçek, yalnız kutu ayrılmış durumda. */
.bn-item.bn-plan{visibility:hidden;pointer-events:none}
body.is-auth .bn-item.bn-plan{visibility:visible;pointer-events:auto}
.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(--fit);
  display:grid;place-items:center;font-size:19px;
  box-shadow:0 8px 20px color-mix(in srgb, var(--marka) 50%, transparent);
}

/* ===================== GÖRÜŞ BİLDİR (eski site "Öneri ve Şikayet" mirası) =====================
 Eski sitedeki sunum: sağ kenarda 90° döndürülmüş sabit turuncu buton (open-feedback-modal).
 Aynı desen, yeni dile çevrildi. */
/* =====================================================================
   GÖRÜŞ BİLDİR — ŞERİT + DÜĞME   (Beyar · R11/M19+M20, R11/M21 düzeltme)
   ---------------------------------------------------------------------
   Beyar: "Görüş bildir niye büyüdü olum — sağdaki gibi olacak, konumu fena
   değil. Bir de şeridi koy."

   İLK DENEMEDE HATA BENDE: DadaHaber'in kalın sarı bloğuna bakıp
   kalınlaştırdım (51×169 · BÜYÜK HARF · 800 ağırlık). Beyar'ın istediği
   DadaGastro'nunki. Canlıdan ÖLÇÜLDÜ (dadagastro.com @1440):

     .feedback-tab  52×144 · fixed · right 0 · z-index 72
                    font-size 13px · font-weight 700 · letter-spacing .52px
                    text-transform NONE (büyük harf DEĞİL)
                    padding 15px 24px 17px
                    border-radius 0 0 16px 16px  (döndürülünce SOL köşeler)
                    box-shadow rgba(33,30,22,.09) 0 6px 22px
     .fb-rail       8px × tam ekran · fixed · right 0 · top 0 · z-index 71
                    marka rengi, yarıçap yok

   Renk DadaFit yeşiline çevrildi (K29: ölçü alınır, palet alınmaz).

   DÖNDÜRME YERİNE `writing-mode`: referans `rotate(90deg)` kullanıyor ama
   burada dikey konum `--fb-top` ile banner merkezine oturuyor (R11/M19) ve
   döndürülmüş kutuda `top` artık görsel üstü göstermiyor — hizalama
   bozulurdu. `vertical-rl` kutuyu GERÇEKTEN dikey yapar, `translateY(-50%)`
   beklendiği gibi çalışır. Ölçülen sonuç aynı: 52×144.
   ===================================================================== */
.fb-rail{
  position:fixed;top:0;right:0;width:8px;height:100dvh;
  background:var(--fit);z-index:71;pointer-events:none;
}
.feedback-tab{
  position:fixed;top:var(--fb-top,50%);right:0;z-index:72;
  transform:translateY(-50%);
  display:inline-flex;flex-direction:row;align-items:center;gap:9px;
  writing-mode:vertical-rl;
  background:var(--fit);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.52px;text-transform:none;
  padding:24px 16px;min-height:144px;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow:0 6px 22px rgba(33,30,22,.09);
  white-space:nowrap;
  transition:background .2s var(--ease),padding-right .22s var(--ease);
}
.feedback-tab i{font-size:13px;writing-mode:horizontal-tb}
.feedback-tab:hover{background:var(--fit-deep);padding-right:20px}
.feedback-tab:focus-visible{outline:3px solid var(--fit-bright);outline-offset: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:44px;height:44px;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(--fit);color:var(--fit)}
.fb-body{padding:22px 24px 24px}
/* Bu prototipte görüş GÖNDERİLMİYOR. Deponun kendi dürüst şerit bileşeni
   (`.hr-note`, destek-v1 ve talep detayında canlı) modalin ölçüsüne
   çekildi — yeni bileşen üretilmedi. */
.fb-body .hr-note{margin:0 0 16px;padding:13px 15px;gap:11px;border-radius:var(--radius-md)}
.fb-body .hr-note>i{font-size:15px}
.fb-body .hr-note p{font-size:12.5px;line-height:1.55}
.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;min-height:44px;cursor:pointer;transition:.18s var(--ease);text-align:left}
.fb-topic i{width:18px;text-align:center;color:var(--fit);font-size:14px;flex:none}
.fb-topic:hover{border-color:var(--fit);color:var(--fit)}
/* WCAG 1.4.3 · ölçüldü: eski hâl `--fit` metin / `--fit-wash` zemin = 3.18:1 (KALDI).
   Kit §6 sekme kalıbına geçildi — `--fit-deep` zemin + beyaz metin = 5.45:1.
   Yeni renk üretilmedi; ikisi de kitin kendi tokeni. */
.fb-topic.active{border-color:var(--fit-deep);background:var(--fit-deep);color:#fff;font-weight:700}
.fb-topic.active i{color:#fff}
.fb-topic[data-topic="puan"]{grid-column:1/-1;justify-content:center} /* 5. tip (Puan ver öneri) tam satır */
.fb-field{margin-bottom:11px}
/* Kit §7 · form alanları. Ölçüldü (öncesi): input 45px · yarıçap 12px ·
   dolgu 13px 15px — kitin input satırı 44px · 8px · 0 14px diyor, sapma
   buradaydı. textarea zaten kitle birebirdi (108px · 13px 15px · 12px),
   ona dokunulmadı; iki alanın yarıçapı kitin kendi ayrımıdır. */
.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);outline:none;transition:border-color .2s var(--ease)}
.fb-field input{height:44px;border-radius:var(--radius-sm);padding:0 14px;line-height:21.7px}
.fb-field textarea{border-radius:var(--radius-md);padding:13px 15px}
.fb-field input::placeholder,.fb-field textarea::placeholder{color:#a7a7a7}
.fb-field input:focus,.fb-field textarea:focus{border-color:var(--fit)}
.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(--fit)}
.fb-select:invalid{color:#a7a7a7}
/* Çip görünür yüksekliği kit §5 değeridir (`.df-fchip` 35px) — büyütülmedi.
   WCAG 2.5.5'in 44px dokunma hedefi görünmez `::before` ile açılır.

   🔴 R18 (2026-08-30) — ŞERİT TEK SATIRA İNDİ. Beyar: "bölüm şeridi çift
   satıra taşıyor; TEK SATIR olacak, sığmazsa yatay kaydırılabilir."
   ÖLÇÜLDÜ (öncesi, 1440px): `.fb-panel` iç genişliği 372px, beş çipin
   toplam genişliği 452px → şerit iki satıra kırılıyordu.
   Çözüm kitin kendi deseni: `.fit-tabs` de tam bunu yapıyor
   (`overflow-x:auto` + gizli çubuk, fit-shell.css §SEKME BİLEŞENİ).
   Yeni sınıf ve yeni ölçü üretilmedi.
   ⚠ `padding-block:5px` şart: dokunma hedefi `::before` çipin 4.5px altına
   ve üstüne taşıyor; `overflow-x` verilince dikey eksen de `auto`ya döner
   ve hedef kırpılırdı. Dolgu 44px hedefi kabın içinde tutar. */
.fb-chiprow{
  display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:13px;
  padding-block:5px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.fb-chiprow::-webkit-scrollbar{display:none}
.fb-chiprow .chip{position:relative;min-height:35px;flex:0 0 auto;white-space:nowrap}
.fb-chiprow .chip::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* aynı ölçüm (3.18:1) ve aynı çözüm — kit §5 `.df-fchip` aktif çipi de
   dolu yeşil zemin üstünde beyaz metindir. */
.fb-chiprow .chip.active{border-color:var(--fit-deep);color:#fff;background:var(--fit-deep);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(--fit)}
.fb-emoji button.active{filter:none;opacity:1;border-color:color-mix(in srgb, var(--marka) 40%, transparent);background:var(--fit-wash);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(--fit);color:var(--fit)}
.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{width:18px;height:18px;margin-top:1px;accent-color:var(--fit-deep);flex:none}
.fb-kvkk a{color:var(--fit);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* WCAG 1.4.3 · ölçüldü: `.btn-primary` zemini `--fit` (#009d4f) beyaz metinle
   3.54:1 → KALDI. Kitin kendi ikinci düğme tonu `--fit-deep` (#007a3d) aynı
   metinle 5.45:1 (kit §4 `.btn-fit`). Yeni renk üretilmedi. */
.fb-send{width:100%;background:var(--fit-deep)}
.fb-send:hover{background:var(--fit-deeper)}
.fb-success{text-align:center;padding:18px 0 10px}
/* Yeşil onay dairesi KALDIRILDI: gönderim olmadığı için "başarı" işareti
   yalan oluyordu. Kit §9 boş-durum ikonu (56px daire, `--fit-tint`) alındı. */
.fb-success .ok{width:56px;height:56px;border-radius:var(--radius-circle);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:22px;margin:0 auto 16px}
.fb-success h4{font-size:18px;margin-bottom:7px}
.fb-success p{font-size:13.5px;color:var(--slate-2);font-weight:500;max-width:44ch;margin:0 auto;line-height:1.6}
.fb-success .fb-again{margin-top:18px}

/* ===================== Ç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}
.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(--fit-wash);color:var(--fit);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(--fit);font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cookie-text a:hover{color:var(--fit-deep)}
.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(--fit);border:1px solid var(--fit)}
.btn-cookie-accept:hover{background:var(--fit-deep);border-color:var(--fit-deep);transform:translateY(-1px)}

/* ===================== TABLET (≤1024px) — chrome katmanı ===================== */
/* ---------------------------------------------------------------
   FOOTER SAĞ KOLONU × "GÖRÜŞ BİLDİR" SEKMESİ — 7. oturum, ölçülen çakışma
   .feedback-tab: position:fixed; right:0; genişlik 41px; ≤640px'te gizli.
   .wrap max-width 1240px → viewport 1304px'in üstünde zaten serbest kenar
   boşluğu var, çakışma yok. ARADA KALAN ARALIKTA footer'ın sağ kolonu
   sekmenin ALTINA giriyordu.
   ÖLÇÜM (hareket-merkezi-v1, sayfa sonuna kaydırılmış):
     @1440 çakışan 0 · @1024 çakışan 2 · @900 çakışan 3
     #pageMain her genişlikte 0 — ana içerik zaten pay bırakıyor,
     yeni footer bırakmıyordu. Yani bu footer'ın getirdiği bir gerileme.
   Pay yalnız ızgaranın SON kolonuna veriliyor; diğer kolonlar ve
   @1440 düzeni değişmiyor. --------------------------------------------- */
@media (min-width:641px) and (max-width:1303px){
  .foot-grid > *:last-child{padding-right:52px}
}

@media (max-width:1024px){
  .wrap{padding:0 24px}

  /* yatay menü → hamburger + drawer */
  .h-top .nav{display:none}
  .tb-news{display:none}                 /* dar ekranda topbar sade kalsın */
  .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}
  /* kurumsal bant: 4 sütun → İKİ DENGELİ SATIR (ayraçlar kalkar) */
  .foot-corp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 24px;justify-items:start}
  .foot-corp .sep{display:none}
  .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 */
  /* logged-in header öğeleri mobilde drawer + bottom-nav'a devreder (kaynak sıra ile is-auth'u yener) */
  /* R9 · K66 — `.head-prog` de devrediyor. Ölçüldü: eklendiği hâliyle @390'da
     header'da KALIYORDU (Planım · zil · avatar inerken tek başına ayakta).
     Erişim kaybı yok: drawer'daki Planım bölümü "İlerlemem" bağlantısını
     taşıyor (ölçüldü, @390 drawer .d-plan .d-sub → Plan ve Takvim · İlerlemem)
     ve alt bardaki Planım kalemi aynı raya çıkıyor. */
  body.is-auth .head-add,body.is-auth .head-bell,body.is-auth .head-prog,body.is-auth .acct-wrap{display:none}
  /* KUSUR (R8'de ölçüldü): .btn-login{display:none} (0,1,0) yukarıdaki
     body.is-auth .btn-login.btn-plan (0,3,0) kuralını YENEMİYORDU → giriş
     durumunda @390'da Planım düğmesi header'da kalıyordu (65/66 sayfa).
     Mobilde Planım'ın yeri alt bar; header düğmesi burada da kapanır. */
  body.is-auth .btn-login.btn-plan{display:none}
  .icon-btn{width:44px;height:44px;font-size:15px}

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

  /* bölüm ritmi */
  .sec{padding:var(--sec-pad) 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(--fit-deep)}

  /* ---- R6 · AJAN-E'nin kabuk notu · DOKUNMA HEDEFİ (WCAG 2.5.8, AA) ----
     66 sayfa @390 tarandı. AA eşiği (2.5.8) **24 px**; AAA eşiği (2.5.5) 44 px.
     AA'yı GEÇEMEYEN üç öğe vardı — bunlar AAA konforu değil, AA kusuru:
       .fp-act      13.0 px · 42 örnek / 10 sayfa
       .fp-actbtn   16.0 px · 13 örnek /  3 sayfa
       .see-all     20.1 px · 26 örnek / 19 sayfa
     AA'yı geçenlere DOKUNULMADI (ölçüldü): .chip 30 · .sort-seg button 32 ·
     .df-fchip 34 · .dt 34 · .pf-tabs a 37.4 — hepsi ≥24.

     Üçü de TASARIM GEREĞİ metin-link: ≤640'ta buton kabuğu bilerek
     kaldırılıyor. Dolgu eklemek o kararı bozardı. Bunun yerine görünmez
     bir örtü hedefi 44 px'e çıkarıyor — hiçbir kutu büyümüyor, satır ritmi
     değişmiyor (`.fp-sw`'de kullanılan yöntemin aynısı). */
  .see-all,.fp-act,.fp-actbtn{position:relative}
  .see-all::after,.fp-act::after,.fp-actbtn::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px
  }
  .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,.fb-rail{display:none}   /* R11/M21: şerit de gizlenir */

  /* 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}
  /* accordion: üç orta menü kapalı başlar, açılınca kalemler görünür */
  .foot-col .fc-links{display:none}
  .foot-col.is-open .fc-links{display:block}
  .foot-col .fc-head{margin:0}
  .foot-col.is-open .fc-head{margin:0 0 12px}
  .fc-toggle{padding:4px 0;min-height:44px}
  /* kurumsal bant: 2 sütun (8 kalemin en genişi 174.6 px, dar ekranda
     dört sütun sığmıyor — ölçüldü) */
  .foot-corp{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;justify-items:start;padding:18px 0}
  .foot-corp .sep{display:none}
  .foot-lawband{justify-content:center;text-align:center;gap:8px 10px}
  .foot-lawband .fl-head{flex:0 0 100%;margin:0 0 4px;text-align:center}
  .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(92px + env(safe-area-inset-bottom,0px));
  }
  .cookie-inner{flex-direction:column;align-items:stretch;gap:13px}
  .cookie-text{align-items:flex-start}
  .cookie-actions{gap:9px}
  .cookie-actions button{flex:1;padding:12px 8px;font-size:12.5px}
}


/* ---- DadaFit alt-marka token'ları (kabuk bileşenleri kullanır) ---- */
:root{
  --fit:var(--marka);          /* DadaFit aksanı (Pantone 7482 C) */
  --fit-deep:var(--marka-koyu);     /* birincil düğme zemini + gradient ucu (beyazla 5.45:1 · AA) */
  --fit-deeper:var(--marka-koyu-2);   /* .btn-fit hover'ı — ramp'in üçüncü adımı (beyazla 8.76:1) */
  --fit-ink:var(--marka-murekkep);      /* ramp'in ikinci adımı — beyazla 6.75:1 (küçük metinde AA);
                             zorunlu-alan yıldızı ve gradient koyu ucu */
  --fit-tint:var(--marka-yikama-2);     /* yumuşak yeşil yıkama (ikon çipi, açık band) */
  --fit-wash:var(--marka-yikama);     /* yeşil fısıltısı zemin — kabuk bileşenlerinin yıkaması */
  --fit-line:var(--marka-cizgi);     /* yeşil-nötr hairline (açık yeşil kartlar) */
  --fit-bright:var(--marka-parlak);   /* koyu zeminde okunur aksan metni */
  --fit-dark:#211E16;     /* vurgu/hero zemini — Process Black C */
  --food:#E14827;         /* köprünün "yemek / aldığın" ucu (ana marka) */
}
/* ---- R7 · ADLANDIRMA TEMİZLİĞİ, DEĞER TEMİZLİĞİ DEĞİL ------------------
   R6 açık kalemi: `--tomato` ailesi #009d4f (yeşil) taşıyordu; ad gastro
   paletinden kalmıştı ve rengin tersini söylüyordu. R7'de ad değişti,
   DEĞER HİÇBİR YERDE DEĞİŞMEDİ — 66 sayfanın 66'sında her elemanın çözülmüş
   color/background/border/fill/box-shadow imzası önce-sonra birebir aynı.

     --tomato       #009d4f  →  --fit        (zaten aynı değerle vardı; birleşti)
     --tomato-dark  #007a3d  →  --fit-deep   (zaten aynı değerle vardı; birleşti)
     --tomato-deep  #006a35  →  --fit-ink    (ikizi yoktu; ramp'e adım olarak girdi)
     --tomato-tint  #e8f6ee  →  --fit-wash   (ikizi yoktu; aşağıdaki nota bak)

   AÇIK KALEM (bilerek BİRLEŞTİRİLMEDİ): --fit-wash #e8f6ee ile --fit-tint
   #eaf6ef iki ayrı paletten gelen neredeyse aynı renk (ΔR2 · ΔG0 · ΔB1,
   ΔE00 ≈ 0.5 — gözle ayırt edilemez). Birleştirmek 126 var(--fit-wash)
   kullanımının çözülmüş
   DEĞERİNİ değiştirirdi; bu tur ad temizliğiydi, palet birleştirmesi değil.
   Sonraki tur isterse tek adıma indirebilir. */

/* ---- PRO-GATE modal (ortak kilit katmanı) ---- */
/* ---- PRO-GATE modal (pro-v1 F1 — ücretli kilit) ---- */
.pg-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}
.pg-overlay.show{opacity:1;visibility:visible}
.pro-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}
.pro-gate.show{opacity:1;visibility:visible;pointer-events:auto}
.pg-panel{position:relative;width:min(420px,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)}
.pro-gate.show .pg-panel{transform:translateY(0)}
.pg-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)}
.pg-close:hover{border-color:var(--fit);color:var(--fit)}
.pg-ico{width:62px;height:62px;border-radius:var(--radius-circle);background:var(--fit-wash);color:var(--fit);display:grid;place-items:center;font-size:25px;margin:0 auto 14px}
.pg-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fit);background:var(--fit-wash);padding:4px 11px;border-radius:var(--radius-sm);margin-bottom:10px}
.pro-gate h4{font-size:19px;margin-bottom:8px}
.pro-gate p{font-size:13.5px;color:var(--muted);font-weight:500;max-width:320px;margin:0 auto 16px;line-height:1.55}
.pg-feats{list-style:none;max-width:300px;margin:0 auto 20px;text-align:left;display:flex;flex-direction:column;gap:9px}
.pg-feats li{display:flex;gap:9px;font-size:13px;font-weight:600;color:var(--slate-2)}
.pg-feats li i{color:var(--fit-deep);font-size:12px;margin-top:3px;flex:none}
.pg-acts{display:flex;gap:10px}
.pg-acts .btn{flex:1}


/* ---- topbar + drawer DadaFit dünya kapısı ---- */

/* topbar + drawer DadaFit dünyası (yeşil kimlik — tb-world/drawer-world komponenti) */
.tb-world-fit{background:color-mix(in srgb, var(--marka) 22%, transparent);border-color:color-mix(in srgb, var(--marka) 50%, transparent);color:#fff}
.tb-world-fit i{color:var(--marka-parlak-2)}
.tb-world-fit:hover{background:var(--fit);border-color:var(--fit);color:#fff}
.tb-world-fit:hover i,.tb-world-fit:hover .tw-arr{color:#fff}
.dw-fit{background:color-mix(in srgb, var(--marka) 10%, transparent);border-color:color-mix(in srgb, var(--marka) 36%, transparent);color:var(--fit-deep)}
.dw-fit i{color:var(--fit-deep)}
.dw-fit:hover{background:var(--fit);border-color:var(--fit);color:#fff}
.dw-fit:hover i,.dw-fit:hover .dw-arr{color:#fff}


.nav a.active[href="https://by4r.github.io/dadamutfak-view/v7-6cu356/saglik-hub-v1.html"]{color:var(--green)}
.nav a.active[href="https://by4r.github.io/dadamutfak-view/v7-6cu356/saglik-hub-v1.html"]::after{background:var(--green)}
.header.at-top .nav>.nav-item>a.active[href="https://by4r.github.io/dadamutfak-view/v7-6cu356/saglik-hub-v1.html"]{color:#fff}
.header.at-top .nav>.nav-item>a.active[href="https://by4r.github.io/dadamutfak-view/v7-6cu356/saglik-hub-v1.html"]::after{background:#fff}
/* saglik-dropdown: scoped health chrome */
/* diğer dropdown/mega aktif-item (turuncu kanon, underline gizli) */
.dropdown:not(.dropdown-health) a.active{background:var(--fit-wash)}
.dropdown a.active::after,.mega-cats a.active::after{display:none}
.mega-cats a.active{background:var(--fit-wash)}
.d-sub-health a i{color:var(--green)}
.d-sub-health a:hover{color:var(--green);background:rgba(59,183,126,.10)}
.nav a[href="https://by4r.github.io/dadamutfak-view/v7-6cu356/saglik-hub-v1.html"]:hover{color:var(--green);background:rgba(59,183,126,.10)}
.header.at-top .nav>.nav-item>a[href="https://by4r.github.io/dadamutfak-view/v7-6cu356/saglik-hub-v1.html"]:hover{color:#fff;background:rgba(255,255,255,.14)}
.dropdown-health a i{color:var(--green)}
.dropdown-health a:hover{background:rgba(59,183,126,.12);color:var(--green)}
.dropdown-health a.active{background:rgba(59,183,126,.12);color:var(--green)}
.dropdown-health a.active i{color:var(--green)}
.dropdown-health a.active::after{display:none}

/* ============ ADIM 3 — KABUK: brand-switch band (Fit, .bs-fit aktif) ============ */
/* NOT: .bs-gastro --bs-c LİTERAL #E14827 — bu sayfada --fit YEŞİL'e swap'lı (Fit aksanı),
 var(--fit) kullanılsaydı Gastro pill'i yeşil render olurdu. Diğer markalar page-bağımsız token. */
:root{--c-mint-deep:#3BB77E}
.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:#E14827;            --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(59,183,126,.20);--bs-bd:rgba(59,183,126,.5); --bs-ic:#4ecb91}
.bs-fit    {--bs-c:var(--c-green);     --bs-bg:color-mix(in srgb, var(--marka) 22%, transparent);  --bs-bd:color-mix(in srgb, var(--marka) 50%, transparent);   --bs-ic:var(--marka-parlak-2)}
.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}
/* §O11 · yedi marka sınıfı. DadaAkademi ve DadaStore için iki sınıf eklendi;
   ikisi de kilitli olduğu için renkleri yalnız ikon tonunda görünü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}

/* §O6 · §O7 · §N14 — KİLİTLİ KALEM.
   Pasiflik iki mekanizmayı BİRLİKTE kullanır: `.is-soon` görünümü,
   `aria-disabled="true"` erişilebilirliği verir (markup'ta).
   Hover'da HİÇBİR ŞEY değişmez; köşede `.sr-lock` kilit rozeti durur.
   §O8/§N15 · "Yakında" metni ya da `title`'ı YAZILMAZ — yalnız rozet. */
.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}

/* =====================================================================
   KANON KART KİTİ — §C · §D · §Ö  (Dalga 4, 2026-08-29)
   ---------------------------------------------------------------------
   ⚠ NEDEN KABUKTA: kit bugüne kadar SAYFA İÇİNDE yaşıyordu ve DÖRT ayrı
   kopyası vardı (hesabim · antrenor-panelim · fatura-detay ·
   veri-islem-kaydi). Aynı turda `.lib-empty`de ölçülen kusur tam olarak
   buydu: kopyalardan ikisi kabuğun eski değerlerini taşıyıp kabuğu
   eziyordu. §Ö üç destek ekranını daha bu kite bağladığı için kit tek
   kaynağa alındı. Sayfa kopyaları bu turda SÖKÜLMEDİ (değerleri birebir
   aynı, ölçüldü); sökme ayrı kalem olarak kayda geçti.
   Değerlerin hepsi şartnamenin kendi sayılarıdır — C2·C3·C4·C5·C6·C10·C11,
   D1·D2·D5, Ö19·Ö20·Ö21.
   ===================================================================== */
.pnl-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm)}
.pnl-card+.pnl-card{margin-top:16px}
/* §C3 · başlık kabı `18px 22px`, altında 1px kenarlık. */
.pnl-card .pc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
/* §C2 · 16px/700 · gap 10px · line-height 1.55 · letter-spacing NORMAL.
   Son ikisi ayrıca yazılır: `.pc-title` gerçek bir <h2> olduğunda kabuğun
   `h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em}` kuralını miras alır. */
.pnl-card .pc-title{font-size:16px;font-weight:700;color:var(--slate);display:flex;align-items:center;gap:10px;line-height:1.55;letter-spacing:normal}
.pnl-card .pc-title i{color:var(--fit);font-size:15px}
/* §C4 · kart açıklaması 13px/500 · --muted · margin-top 5px. §B10. */
.pnl-card .pc-head p{font-size:13px;color:var(--muted);font-weight:500;margin-top:5px}
.pnl-card .pc-head:has(p){align-items:flex-start}
.pnl-card .pc-head:has(p)>:first-child{min-width:0}
/* §B9 · açıklamasız kartta başlık satırı görünmez basılır; min-height VERİLMEZ.
   ⚠ v1.9.0 koşulu: yalnız aynı ızgarada açıklamalı komşu kart varsa. */
.pnl-card .ph-hold{visibility:hidden}
/* §C5 · gövde 22px. §C13 · zaman satırı kartında gövde dolgusuzdur. */
.pnl-card .pc-body{padding:22px}
.pnl-card .pc-body.flush{padding:0}
/* §C6 · ayak `14px 22px`, üstünde 1px kenarlık. §C20 · kaydet düğmesi SOLDA;
   `justify-content` YAZILMAZ. */
.pnl-card .pc-foot{padding:14px 22px;border-top:1px solid var(--line)}

/* §C10 · LİSTE KARTI. Ayraç yalnız komşuluk seçicisiyle verilir —
   ilk satırda üst ayraç olmaz. §Ö7/§Ö8: destek listesinde satırın TAMAMI
   bağlantıdır, tablo (`.ptable`) kullanılmaz. */
.set-list{display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;gap:16px;padding:17px 2px}
.set-row+.set-row{border-top:1px solid var(--line)}
.set-row .sr-ico{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg);color:var(--slate-2);display:grid;place-items:center;font-size:15px}
.set-row .sr-txt{flex:1;min-width:0}
.set-row .sr-txt b{display:block;font-size:14px;color:var(--slate)}
.set-row .sr-txt span{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px;line-height:1.45}
.set-row .sr-act{flex:none;display:flex;align-items:center;gap:8px}
a.set-row{color:inherit;transition:background .18s var(--ease)}
a.set-row:hover{background:var(--fit-wash)}
a.set-row:hover .sr-ico{background:var(--fit-tint);color:var(--fit-deep)}

/* §C11 · §Ö24 · DURUM ROZETİ: 11.5px/700 · dolgu `4px 10px` · radius 8px ·
   6px nokta. Ayrı bir rozet biçimi üretilmez.
   §Ö25 · DÖRT DURUM DÖRT AYRI SINIF taşır; iki durum aynı rozeti paylaşamaz.
   Anlam: `wait` top destekte · `warm` top üyede · `ok` çözüldü · `off` kapandı. */
.pstat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:8px;white-space:nowrap}
.pstat::before{content:"";width:6px;height:6px;border-radius:var(--radius-circle);background:currentColor;flex:none}
.pstat.wait{background:#e6f1f4;color:var(--c-petrol)}
.pstat.warm{background:#fdf3e4;color:#8a4b00}
.pstat.ok{background:var(--fit-tint);color:var(--fit-deep)}
.pstat.off{background:#f1f1f1;color:var(--slate-2)}

/* §D1 · §D2 · §D5 · §Ö22 — ÜYE BOŞ DURUMU. Bağımsız kutu değildir, kartın
   içinde yaşar; tek eylem düğmesi taşır. §D4: yönetim kitiyle karıştırılmaz. */
.pnl-empty{padding:44px 24px;text-align:center}
.pnl-empty .pe-ico{width:58px;height:58px;border-radius:var(--radius-md);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:22px;margin:0 auto 14px}
.pnl-empty h4{font-size:15.5px;font-weight:700;color:var(--slate);margin-bottom:5px}
.pnl-empty p{font-size:13px;color:var(--muted);font-weight:500;max-width:300px;margin:0 auto 16px;line-height:1.55}

/* §Ö19 · §Ö20 · §Ö21 — YAZIŞMA KİTİ. Taban Diet (`planim.css:672-677`).
   Düz satır listesi KULLANILMAZ: gönderen ayrımı HEM HİZA HEM RENKLE verilir,
   yalnız biriyle yetinilmez. */
.bub-list{display:flex;flex-direction:column;gap:14px}
.bub{max-width:68%;padding:10px 14px;font-size:13.5px;line-height:1.5;border-radius:var(--radius-md)}
.bub.in{align-self:flex-start;background:var(--bg);border:1px solid var(--line);color:var(--slate);border-bottom-left-radius:var(--radius-sm)}
.bub.out{align-self:flex-end;background:var(--fit-tint);color:var(--slate);border-bottom-right-radius:var(--radius-sm)}
.bt{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.bub.out .bt{color:var(--fit-deep)}

/* =====================================================================
   §N · SOL DAR RAIL — Ekran I · marka geçiş şeridi. Taban GASTRO.
   ---------------------------------------------------------------------
   §N18 · "Fit'e de rail gelir." Ölçüm (2026-08-29): depoda `sa-rail`
   araması 0 eşleşme veriyordu — bileşen hiç yoktu, kuruldu.
   ⚠ KAPSAM: rail kardeş markalarda YÖNETİM kabuğunun parçasıdır
   (`sa-shell.css` · `admin/layout.blade.php`). Fit'te yönetim paneli YOK
   ve bu dalgada KURULMUYOR (§M8 · Dalga P). Bu yüzden bileşen kabukta
   tam ölçüsüyle kuruldu ama YALNIZ `body[data-fit-rail="1"]` taşıyan
   yüzeye biniyor — bugün tek yüzey Fit'in operasyon paneli. Yönetim
   projesi doğduğunda kural hazır, taşıma yalnız montaj olacak.
   §N2 · rail'de AYRAÇ YOKTUR — tek dizidir, `.sa-rail-div` tanımlanmadı.
   ===================================================================== */
:root{ --sa-rail-w:76px; --rail-bg:#19160F; --hair:rgba(233,226,214,.1) }

/* §N8 · genişlik 76px; konum fixed / top 0 / left 0 / bottom 0 / z-index 85.
   §N9 · dolgu `18px 0 18px`, gap 7px, sağ kenarlık 1px solid rgba(0,0,0,.32).
   §N10 · zemin --rail-bg, saç teli --hair. */
.sa-rail{
  position:fixed;top:0;left:0;bottom:0;z-index:85;
  width:var(--sa-rail-w);padding:18px 0 18px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:var(--rail-bg);border-right:1px solid rgba(0,0,0,.32);
}
/* §N11 · logo 46×46 radius 13 margin-bottom 8; görsel 30×30, beyazlatılır. */
.sa-rail-logo{
  flex:none;width:46px;height:46px;border-radius:13px;margin-bottom:8px;
  display:grid;place-items:center;background:rgba(233,226,214,.06);
}
.sa-rail-logo img,.sa-rail-logo svg{width:30px;height:30px;filter:brightness(0) invert(1)}
/* §N12 · marka ikonu 48×48 radius 14. */
.sa-brand{
  position:relative;flex:none;width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;font-size:17px;color:rgba(233,226,214,.62);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.sa-brand:hover{background:rgba(233,226,214,.08);color:#e9e2d6}
/* §N13 · aktif marka: zemin rgba(--acc-rgb,.2), renk --acc,
   solda 3px dikey işaret ::before{left:-14px;top:9px;bottom:9px;width:3px}. */
.sa-brand.is-active{background:rgba(var(--acc-rgb),.2);color:var(--acc)}
.sa-brand.is-active::before{
  content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--acc);
}
/* §N14 · kilitli marka: renk rgba(233,226,214,.26), cursor not-allowed,
   hover'da HİÇBİR ŞEY değişmez, köşede .sr-lock kilit rozeti.
   §N15 · "Yakında" METNİ YAZILMAZ — yalnız rozet. */
.sa-brand.is-locked{color:rgba(233,226,214,.26);cursor:not-allowed}
.sa-brand.is-locked:hover{background:transparent;color:rgba(233,226,214,.26)}
.sa-brand .sr-lock{
  position:absolute;right:5px;bottom:5px;font-size:8px;
  color:rgba(233,226,214,.42);
}
/* §N17 · sayaç rozeti. */
.sa-brand .pl-cnt{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;
  border-radius:999px;background:var(--acc);color:#fff;
  font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px;
}
/* §N16 · ayak: margin-top auto, gap 8px; Gaviaworks imzası + Siteyi Görüntüle. */
.sa-rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.sa-rail-foot a,.sa-rail-foot span{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:rgba(233,226,214,.5);font-size:13px;transition:.2s var(--ease);
}
.sa-rail-foot a:hover{background:rgba(233,226,214,.08);color:#e9e2d6}
.sa-rail-foot .sa-rail-hair{width:24px;height:1px;background:var(--hair);border-radius:0}

/* Rail taşıyan yüzeyde kabuk 76px sağa kayar — public kabuk fixed olduğu
   için topbar/header/footer ayrı ayrı ötelenir. */
body[data-fit-rail="1"] .topbar,
body[data-fit-rail="1"] .header{left:var(--sa-rail-w)}
body[data-fit-rail="1"] .page-main,
body[data-fit-rail="1"] .site-footer{margin-left:var(--sa-rail-w)}
@media (max-width:900px){
  body[data-fit-rail="1"] .sa-rail{display:none}
  body[data-fit-rail="1"] .topbar,
  body[data-fit-rail="1"] .header{left:0}
  body[data-fit-rail="1"] .page-main,
  body[data-fit-rail="1"] .site-footer{margin-left:0}
}

/* ============ KABUK: scroll-reveal + başa dön (Fit) ============ */
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(--fit) bu sayfada YEŞİL.
   `--bc-lift`: çerez şeridi düğmenin altını kapattığında JS bu değişkeni
   yazar, düğme şeridin üstüne çıkar (fit-shell.js "ÇEREZ ONAY BANNER").
   Emsal ölçüldü (dadagastro.com, 2026-08-29): kardeş markada kural birebir
   `bottom:calc(92px + var(--bc-lift,0px))`; ölçülen değerler 1440→92px
   (şerit düğmenin soluna bitiyor, yükselme yok) · 1024→131px · 768→171px.
   Fit'te mekanizma HİÇ YOKTU: üç genişlikte de 92px'te kalıp şeridin
   altında kalıyordu. */
.to-top{position:fixed;right:22px;bottom:calc(92px + var(--bc-lift,0px));z-index:55;width:54px;height:54px;border-radius:var(--radius-lg);background:#fff;color:var(--fit);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(--fit);color:#fff;border-color:var(--fit);transform:translateY(-2px)}
.to-top:focus-visible{outline:3px solid var(--fit-wash);outline-offset:2px}
@media (max-width:640px){.to-top{right:16px;bottom:calc(148px + env(safe-area-inset-bottom,0px) + var(--bc-lift,0px));width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .15s linear}.to-top:hover{transform:none}}

/* =====================================================================
   HERO KAYDIRMA İŞARETİ — "Keşfet"  (kardeş markadan taşındı, §U7 BİREBİR)
   ---------------------------------------------------------------------
   Emsal ölçüldü (dadagastro.com ana sayfa, 1440×1000, 2026-08-29):
     .hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
                  z-index:3;color:rgba(255,255,255,.7);font-size:12px;font-weight:500;
                  letter-spacing:.14em;text-transform:uppercase;
                  display:flex;flex-direction:column;align-items:center;gap:9px}
     .hero-scroll:hover{color:#fff}
     .hero-scroll i{font-size:15px;animation:hero-scroll-bob 1.8s var(--ease) infinite}
     @keyframes hero-scroll-bob{0%,100%{translateY(0)} 50%{translateY(6px)}}
     @media(max-width:640px){.hero-scroll{display:none}}
     @media(prefers-reduced-motion:reduce){.hero-scroll i{animation:none}}
   Ana sayfada taban `bottom:26px` değeri `62px`e eziliyor; ölçülen sonuç
   hero'nun alt kenarından 62px. Fit'te ana sayfa hero'su dikiş payı kadar
   (`--seam-r`) daha uzun olduğu için o pay eklenir — GÖRÜNEN boşluk 62px'te
   kalsın diye. Ölçüm: merkez 719.5 ≈ sayfa merkezi 720.
   YAPI VE ÖLÇÜ Gastro'nun, RENK Fit'in: kalem koyu video hero'nun üstünde
   durduğu için Gastro'da da rgba(255,255,255,.7) — marka rengi taşımıyor,
   sızma yok. Ölçülen kontrast (beyaz .7 / hero'nun dip gradyanı #181610'a
   yakın) 9.8:1.
   FARK: Gastro'da bu bir <div>, yani tıklanmıyor (cursor:auto ölçüldü).
   Deponun dürüstlük kuralı gereği Fit'te <a> — chevron'un vaat ettiği işi
   GERÇEKTEN yapar, hero'nun altındaki ilk bölüme iner.
   ===================================================================== */
.hero-scroll{
  position:absolute;left:50%;bottom:calc(62px + var(--seam-r,0px));
  transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.7);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:color .2s var(--ease);
}
/* Beyar: "renk DadaFit'in". Emsalde dinlenme hâli marka rengi taşımıyor
   (rgba(255,255,255,.7) — koyu hero'nun üstünde nötr); tek renk kararı
   HOVER'da, Gastro orada #fff'e çıkıyor. Fit o tek yerde kendi rengini
   kullanır: `--fit-bright`, koyu hero zemininde ölçülen kontrast 8.17:1. */
.hero-scroll:hover{color:var(--fit-bright)}
.hero-scroll:focus-visible{outline:3px solid var(--fit-bright);outline-offset:6px;border-radius:var(--radius-sm)}
.hero-scroll i{font-size:15px;animation:hero-scroll-bob 1.8s var(--ease) infinite}
@keyframes hero-scroll-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (max-width:640px){.hero-scroll{display:none}}
@media (prefers-reduced-motion:reduce){.hero-scroll i{animation:none}}
/* DadaMentor paneli (.mentor-panel / .mp-*) kaldırıldı — belge §1 ve §21.
   Onunla birlikte YALNIZ o panelin kullandığı ölü token/sınıf bloğu da gitti
   (--d-3 · --d-deep · --dline · --sh-3 · --panel-fl · --ease-spring ·
   --fit-rgb · --b-*-l ve .w-gastro/.w-gourmet/.w-diet/.w-fit/.w-akademi).
   Ölçüm: panel kalktıktan sonra bu adların tek geçişi kendi tanımlarıydı,
   yani hiçbir yerde kullanılmıyorlardı (belge §18: kullanılmayan CSS'i kaldır).
   Yerine başka bir yapay zekâ asistanı EKLENMEZ. İlgili video dosyası
   (assets/video/mentor-panel.mp4) da silindi (belge §18: kaldırıldıktan
   sonra ilgili video ve kodları temizle). */


/* 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)}
/* R9 · K66 — açılır menünün mobil karşılığı (drawer hesap bölümü).
   Drawer'ın kendi dili AYNEN kullanılıyor: satırlar `.d-sub a`, başlıklar
   `.d-sub-group`. Buradaki tek fark KATLANMAMASI — `.d-sub` varsayılanı
   `max-height:0`, bu blok hep açık olduğu için o kilit açılıyor.
   Yalnız girişte görünür: misafirde hesap alanı diye bir şey yok. */
.d-acct-block{display:none;border-top:1px solid var(--line)}
body.is-auth .d-acct-block{display:block}
.d-sub.d-acct-sub{max-height:none;overflow:visible}
/* yer tutucu kalem — bağlantı DEĞİL: odak sırasına girmez, tıklanmaz.
   Biçimi `.d-sub a` ile aynı hizada ama sönük (masaüstündeki `.acct-soon`
   deseninin drawer karşılığı). */
.d-sub .d-soon{display:flex;align-items:center;gap:11px;padding:13px 22px 13px 36px;font-size:14.5px;font-weight:500;color:var(--muted);cursor:default}
.d-sub .d-soon i{width:18px;text-align:center;color:var(--muted);font-size:13px}
.d-sub .d-soon .acct-soon-tag{margin-left:8px}
.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:var(--radius-pill)}
.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:var(--radius-sm);vertical-align:middle;margin-left:9px}
.vid-pro i{font-size:9px}

/* ===== 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}
.foot-lockup .fl-mark{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--fit);display:grid;place-items:center;font-size:17px;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;text-align:left}
.foot-bottom .fb-left b{color:#fff;font-weight:700}
.foot-bottom .fb-left b .bd,.foot-bottom .fb-left b .sf{color:#fff}

/* ---- kabuk tekilleştirme: drawer aktif kalem ---- */
.d-link.active{color:var(--fit)}


/* =====================================================================
 KANONİK KART KABUKLARI — TEK TANIM (Faz 0 tekilleştirme)
 Ölçüm (tasks/ENVANTER-fit.md §5.2): aynı işi yapan kart kabuğu 21 sayfada
 sekiz ayrı adla ayrı ayrı tanımlıydı; `.hub-card` adı iki farklı sayfada
 iki farklı iş için kullanılıyordu — ama iki tanım da BİREBİR aynı kabuktu.
 Karar: iş başına TEK tanım. Sayfa-yerel önekler (ex-/pr-/fs-/prog-/hub-)
 yalnız o kartın iç parçalarını (medya yüksekliği, rozet, etiket) adlandırır;
 kabuk kuralı artık yalnız burada yaşar. Yeni sınıf adı üretilmedi.
 ===================================================================== */

/* TİP A — medya + beyaz gövde kartı (egzersiz · program · rehber · arama · antrenör) */
.hub-card,.ex-card,.pr-card,.fs-card,.prog-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.hub-card:hover,.ex-card:hover,.pr-card:hover,.fs-card:hover,.prog-card:hover{
  transform:translateY(-6px);border-color:#dcdcdc;box-shadow:var(--sh-lg);
}
.hub-card:focus-visible,.ex-card:focus-visible,.pr-card:focus-visible,
.fs-card:focus-visible,.prog-card:focus-visible{outline:3px solid var(--fit);outline-offset:2px}

/* =====================================================================
 KAYIT DÜĞMESİ — .kyt-btn / .kyt-link      (R15/1 · FIT_KAYIT köprüsü)
 ---------------------------------------------------------------------
 Ölçülen kusur: kartlarda kaydet düğmesi YOKTU (egzersiz 25 kart → 0,
 program 9 kart → 0). Düğme eklenince bir HTML sorunu doğdu: kartın
 kendisi <a> idi ve <a> içine <button> koymak geçersizdir (klavye ve
 ekran okuyucu için de bozuk). Bu yüzden kart <div>'e çevrildi ve
 bağlantı BAŞLIĞA taşındı; `.kyt-link::after` kartın tamamını kaplayarak
 "kartın her yerine tıklanır" davranışını korur.

 z-index düzeni (yukarıdan aşağı):
   4  .kyt-btn      → kaydet; kart bağlantısının ÜSTÜNDE kalmalı
   3  .kyt-link::after → kartı kaplayan görünmez bağlantı yüzeyi
   2  .ex-tags/.ex-cat/.ex-level … → süs rozetleri; bağlantının ALTINDA
      kalırlar ki üzerlerine tıklamak da kartı açsın (tıklanamaz ada
      dönüşmesinler)

 🔴 DÖRT KÖŞE SÖZLEŞMESİ (R16/1 · docs/fit-kit.md §12)
 Bu düğme SAĞ ÜST köşeyi TEK BAŞINA tutar. Diğer üç köşe:
   sol üst  → kategori/hedef rozeti      sol alt  → etiket şeridi
   sağ alt  → zorluk/seviye rozeti
 R15'te düğme eklendi ama köşe boşaltılmadı: `.ex-level` ve `.pr-level`
 hâlâ `top:12px;right:12px` idi ve düğmenin (z-index 4) altında kaldı.
 ÖLÇÜLDÜ: kesişim 1162 px², iki sayfada 21 kartın 21'inde, üç genişlikte.
 Bir kart tipine bu düğmeyi eklerken ölçüm kapısı: düğmenin sınır kutusu,
 aynı karttaki `position:absolute` her öğeyle 0 px² kesişmeli.

 Dokunma hedefi 44×44 (WCAG 2.5.8) — görsel daire 40px, kalan 4px
 şeffaf dolgudur; ölçüm bunu hedef sayar, göz görmez.
 ===================================================================== */
.kyt-link{color:inherit;text-decoration:none}
.kyt-link::after{content:"";position:absolute;inset:0;z-index:3}
.kyt-link:focus-visible::after{outline:3px solid var(--fit);outline-offset:-4px;border-radius:var(--radius-lg)}

.kyt-btn{
  position:absolute;top:8px;right:8px;z-index:4;
  width:44px;height:44px;padding:0;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.kyt-btn::before{
  content:"";position:absolute;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.9);border:1px solid rgba(20,18,12,.10);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(20,18,12,.14);
  transition:background .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease);
}
.kyt-btn i{position:relative;font-size:15px;color:var(--slate-2);transition:color .2s var(--ease)}
.kyt-btn:hover::before{transform:scale(1.06)}
.kyt-btn:hover i{color:var(--fit-deep)}
.kyt-btn.is-on::before{background:var(--fit);border-color:var(--fit)}
.kyt-btn.is-on i{color:#fff}
.kyt-btn:focus-visible{outline:3px solid var(--fit);outline-offset:2px;border-radius:50%}
/* depolama kapalı (gizli kip / kota): sessizce "kaydedildi" demeyiz */
.kyt-btn.kyt-hata::before{background:#fdeaea;border-color:#e8b4b4}
.kyt-btn.kyt-hata i{color:#a33}

/* TİP B — tam görsel örtülü kart (challenge · alternatif hareket) */
.cc-card,.ed-altcard{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:var(--radius-xl);overflow:hidden;
  background-size:cover;background-position:center;color:#fff;
  box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cc-card:hover,.ed-altcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.cc-card:focus-visible,.ed-altcard:focus-visible{outline:3px solid var(--fit);outline-offset:2px}

/* ---- OKUNABİLİRLİK ÖRTÜSÜ (challenge kartları) ----
 Bu kabuk fotoğrafın üstüne doğrudan beyaz metin basıyordu; hiçbir overlay
 tanımı YOKTU. Açık gökyüzü / kum / beton fotoğraflarında başlık ve açıklama
 okunmuyordu.
 Çözüm: kartın tamamına taban karartma + metnin oturduğu alt bölgeye daha
 koyu bir gradient. Örtü değerleri TAHMİNLE değil, render edilen sayfadan
 piksel örneklenerek ayarlandı (metin gizlenip metin kutusunun altındaki
 EN AÇIK zemin pikseli ölçüldü — beyaz metin için en kötü durum).
 Ölçüm sonucu (üç kartın en kötüsü):
 · başlık #fff → 8.5:1 (AA ve AAA)
 · açıklama rgba(255,255,255,.94) → 7.6:1 (AA ve AAA)
 Metin gölgesi yalnız emniyet payıdır; kontrastı gradient sağlar. */
/* NOT: .ed-altcard'ın görseli çocuk .ed-altcard-fig üzerinde ve onun kendi
 ::after gradient'i var — bu kural yalnız .cc-card'a uygulanır. */
.cc-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,11,8,.52) 0%,rgba(12,11,8,.18) 30%,rgba(10,9,6,.72) 62%,rgba(8,7,5,.94) 100%),
    linear-gradient(0deg,rgba(10,9,6,.42),rgba(10,9,6,.42));
  transition:opacity .3s var(--ease);
}
.cc-card>*{position:relative;z-index:2}
.cc-card b,.cc-card h3,.cc-card h4{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.cc-card p{color:rgba(255,255,255,.94);text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* hover'da örtü hafifçe koyulaşır — metin okunurluğu artar, azalmaz */
.cc-card:hover::before{opacity:.94}
/* tamamlanmış challenge kartı zaten soluk; örtüsü sabit kalsın */
.cc-card.is-past::before{opacity:1}

/* 2026-08-11 referans kıyaslaması: tekilleştirmede iki kartın kendi değeri kaybolmuştu.
 Sekiz kartın altısı zaten birebir aynıydı (sh-sm dinlenme / sh-lg hover); bu ikisi değildi.
 Ölçülen sapma geri alındı — kanonik kabuk korunur, yalnız o iki değer referansa döner. */
.cc-card{min-height:300px;box-shadow:var(--sh-md)}          /* referans: challenge-v1 */
@media (max-width:640px){ .cc-card{min-height:260px} }       /* referans: dar ekran değeri */
.fs-card{box-shadow:none}                                    /* referans: arama-fit-v1, dinlenmede gölge yok */
.fs-card:hover{box-shadow:var(--sh-md)}                      /* referans: sh-md (sh-lg değil) */

/* =====================================================================
 KANONİK SAYFA BİLEŞENLERİ — TEK TANIM (Faz 1)
 Bu blok, DadaFit sayfalarında birbirinin kopyası olarak duran ve yeni
 merkez sayfalarının da ihtiyaç duyduğu yapıları tek yere alır:
 banner+breadcrumb (.lib-top), kart iç parçaları (.hub-*), filtre çipi
 (.df-fchip), kart ızgarası (.hub-grid/.lib-grid), boş durum (.lib-empty).
 Yeni sınıf adı üretilmedi — hepsi mevcut sayfalardan gelen adlardır.
 ===================================================================== */

@media (max-width:1024px){ :root{ --hero-pt:15px; --hero-pb:46px; --hero-gap:9px; --sec-pad:74px; --sec-pad-sm:26px; --banner-h-liste:607px; --banner-h-detay:617px; --banner-gap:18px } }
@media (max-width:640px){  :root{ --fit-header-h:63px; --hero-pt:33px; --hero-pb:34px; --hero-gap:8px; --sec-pad:44px; --sec-pad-sm:22px; --banner-h-liste:587px; --banner-h-detay:726px; --banner-gap:9px } }

/* ---- BANNER + BREADCRUMB (belge §17: ikisi birlikte gelir) ----
 Sayfa yalnız görselini bildirir: .lib-top{--lib-img:url('…')}
 Yükseklik güvenliği: banner ekran yüksekliğinin yarısını geçmez. */
.lib-top{
  --lib-img:none; --lib-pos:center 26%;
  position:relative;overflow:hidden;margin-top:112px;
  background:
    radial-gradient(820px 360px at 84% 14%,color-mix(in srgb, var(--marka) 20%, transparent),transparent 62%),
    linear-gradient(90deg,rgba(33,30,22,.94) 0%,rgba(29,26,20,.82) 46%,rgba(27,25,19,.74) 100%),
    linear-gradient(180deg,rgba(33,30,22,0) 58%,rgba(24,22,16,.62) 100%),
    var(--lib-img) var(--lib-pos)/cover no-repeat,
    #1b1913;
  padding:40px 0 38px;
}
/* §R1 · §R2 · §R8 (Dalga 4, 2026-08-29) — BANNER YÜKSEKLİĞİ VE BLOK MERKEZİ.
   §R1/§R2 · grup içinde tek yükseklik. Yükseklik `min-height` ile verilir,
   `height` ile DEĞİL: §R10 "yer yetmezse banner yüksekliği artar; blok
   kırpılmaz, sıkışmaz, yazı küçültülmez" der — `min-height` tam olarak bunu
   yapar, `height` kırpardı.
   §R5 · Liste ve Kurumsal bugün aynı sayıyı taşır ama AYRI token okur.
   §R7 · breadcrumb banner'ın üstüne SABİTLENİR (128px), ortalanmaz.
   §R8 · başlık bloğunun dikey merkezi = 128 + (yükseklik − 128) ÷ 2.
   Uygulama: `.wrap` dikey flex; kırıntıdan SONRA ve son çocuktan SONRA birer
   `auto` boşluk bırakılır — iki auto artık alanı eşit böler, yani kırıntının
   ALTINDAKİ blok o bölgenin tam ortasına oturur. Ölçülen eski hâl: 544'lük
   banner'da merkez 309.7 (hedef 336), 560'lıkta 262.4–309.7 (hedef 344). */
.lib-top{--banner-h:var(--banner-h-liste);min-height:var(--banner-h)}
body[data-fit-hero-kind="kurumsal"] .lib-top{--banner-h:var(--banner-h-kurumsal)}
body[data-fit-hero-kind="detay"] .lib-top{--banner-h:var(--banner-h-detay)}
.lib-top .wrap{position:relative;z-index:2}
/* Özgüllük NOTU: kırıntının alt boşluğunu `body[data-brand="fit"] .lib-top
   .lib-crumb` (0,4,1) veriyor; aşağıdaki kurallar onu geçmek için aynı
   `body[data-brand="fit"]` önekini taşır — kabuk sözleşmesine dokunulmadı,
   özgüllük yükseltildi. */
body[data-brand="fit"] .lib-top{padding-bottom:0}
body[data-brand="fit"] .lib-top > .wrap{
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(var(--banner-h) - var(--fit-header-h) - var(--hero-pt));
}
/* §R7 · breadcrumb banner'ın ÜSTÜNE SABİTLENİR, ortalanmaz — akıştan çıkar
   ki §R8'in merkezini kaydırmasın. Konumu §R6'nın ölçülen 128/132'sidir:
   128 zaten `.lib-top`un padding-top'u, 132 `.wrap`ın sol kenarı. */
body[data-brand="fit"] .lib-top > .wrap > .lib-crumb{
  position:absolute;top:0;margin:0;
}
/* §R8 · blok merkezi = 128 + (yükseklik − 128) ÷ 2. `.wrap` tam olarak o
   bölgeyi kaplar (128'den banner sonuna) ve içeriğini ortalar. İçerik
   sığmazsa banner BÜYÜR ve blok ortalı kalır — §R10, kırpma yok. */
body[data-brand="fit"] .lib-top > .wrap > .lib-row{margin:0}

/* §R6 · §R7 · §R8 — AYNI GEOMETRİ ÖTEKİ İKİ BANNER BİLEŞENİNE.
   Fit'te üç banner kabı var ve üçü ayrı kırıntı sınıfı taşıyor:
   `.lib-top`/`.lib-crumb` (44 sayfa) · `.ol-top`/`.rd-crumb` (1) ·
   `.pd-hero`/`.pd-crumb` (1). Kural hepsini bağlar (§R2: grup içinde tek
   yükseklik, §R8: tek merkez formülü), o yüzden geometri üçüne de iner.
   Ölçülen sapma (2026-08-29): `.ol-top` merkez 317.1 (hedef 336),
   `.pd-hero` merkez 285.5 (hedef 344). */
body[data-brand="fit"] .ol-top{--banner-h:var(--banner-h-liste);padding-bottom:0;min-height:var(--banner-h)}
body[data-brand="fit"] .pd-hero{--banner-h:var(--banner-h-detay);padding-bottom:0;min-height:var(--banner-h)}
body[data-brand="fit"] .ol-top > .wrap,
body[data-brand="fit"] .pd-hero > .wrap{
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(var(--banner-h) - var(--fit-header-h) - var(--hero-pt));
}
body[data-brand="fit"] .ol-top > .wrap > .rd-crumb,
body[data-brand="fit"] .pd-hero > .wrap > .pd-crumb{position:absolute;top:0;margin:0}
/* §R8 · ortalanan bloğun KENDİ dikey marjı merkezi kaydırır: `justify-content:
   center` artık alanı eşit böler ama çocuğun `margin-top`u bloğu aşağı iter ve
   merkez marjın YARISI kadar sapar. Ölçülen örnek: `.ol-intro{margin-top:10px}`
   → merkez 341, hedef 336, sapma tam 5px. Üç kapta da blok marjı sıfırlanır;
   üst/alt nefes ortalamanın kendisinden gelir. */
body[data-brand="fit"] .lib-top > .wrap > *:not(.lib-crumb),
body[data-brand="fit"] .ol-top > .wrap > *:not(.rd-crumb),
body[data-brand="fit"] .pd-hero > .wrap > *:not(.pd-crumb){margin-top:0;margin-bottom:0}
/* Kabuğun banner ritim bloğu bu marjları `!important` ile veriyor
   (`.ol-top .ol-intro{margin-top:10px !important}` · `.pd-hero .pd-crumb`…).
   O blok KIRINTI AKIŞTAYKEN doğruydu: marj, kırıntı ile blok arasındaki
   nefesti. §R7 kırıntıyı akıştan çıkardı, nefes anlamını yitirdi ve geriye
   yalnız merkezi kaydıran bir sapma kaldı. Kurala DOKUNULMADI — özgüllük
   yükseltildi (0,4,1 > 0,2,0), gerekçe burada duruyor. */
body[data-brand="fit"] .ol-top > .wrap > *:not(.rd-crumb),
body[data-brand="fit"] .pd-hero > .wrap > *:not(.pd-crumb){margin-top:0 !important;margin-bottom:0 !important}
/* §R6 · kırıntı yazı boyu 12.5px — üç kapta da tek değer. */
body[data-brand="fit"] .lib-top .lib-crumb,
body[data-brand="fit"] .ol-top .rd-crumb,
body[data-brand="fit"] .pd-hero .pd-crumb{font-size:12.5px}

/* ---- BANNER ÜZERİNDE ŞEFFAF HEADER (A2) ----------------------------
 Banner taşıyan sayfada header artık katı değil, banner'ın üzerinde şeffaf
 duruyor (fit-shell.js → body[data-fit-over="1"]; ölçülen referans:
 dadadiet.com/diyetisyenler .lst-top{padding-top:128px} + header.at-top).
 Bu yüzden banner kabuğun ALTINDAN başlar: üst payı margin yerine padding
 olur ve koyu zemin header'ın arkasına uzar.

 İÇERİK KONUMU DEĞİŞMEZ: eski (margin-top + padding-top) toplamı kadar
 padding-top verilir, yani metin bir piksel oynamaz, yalnız koyu zemin
 yukarı uzar:
   ≥1025px  112 (üst bant 40 + header 72) + 40 = 152
   ≤1024px  112 + 30 = 142      (nav gizlenir ama kat yükseklikleri aynı)
   ≤640px    62 (üst bant gizli, header 62) + 24 = 86

 SEÇİCİ NEDEN İKİ SINIF DERİN: 16 sayfa kendi <style> bloğunda
 .lib-top{margin-top:112px} kopyasını taşıyor ve o bloklar fit-shell.css'ten
 SONRA geliyor. body[data-fit-over] .lib-top (0,2,0) o kopyaları (0,1,0)
 özgüllükle yener — böylece 16 sayfayı tek tek düzenlemek gerekmez ve kural
 tek yerde kalır. (Kopyaların kendisi ayrı bir temizlik işi: §23.)
 -------------------------------------------------------------------- */
body[data-fit-over="1"] .lib-top{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}
/* .cp-top (antrenör detay banner'ı) — .lib-top ile aynı desen: eski
   margin-top + padding-top toplamı kadar padding verilir, içerik oynamaz,
   yalnız koyu zemin header'ın arkasına uzar.
   !important ŞART: aşağıda (satır ~1616) medya sorgusu DIŞINDA duran
   `.cp-top{padding:var(--hero-pt) 0 var(--hero-pb) !important}` sıkıştırma kuralı her genişlikte
   geçerli ve normal bir `padding-top`u yeniyor — ilk denemede tam bu yüzden
   breadcrumb header'ın altında kaldı (ölçüm: padding-top 146 yazıldı,
   computed 20px çıktı, crumbTop=20 < headerAlt=113).
   Değerler ölçülen header yüksekliğinden türedi: 113 + 20 · 113 + 18 · 63 + 10. */
body[data-fit-over="1"] .cp-top{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}
/* Diğer banner sınıfları — aynı desen, değerler her sayfada TEK TEK ölçüldü
   (header alt kenarı + o sınıfın özgün padding-top'u):
     .kp-top    1440/1024→147/153px · ≤640→93px
     .chl-hero  1440/1024→131/137px · ≤640→73px
     .pd-hero   1440/1024→125/129px · ≤640→71px
     .fs-top    1440/1024→139/139px · ≤640→83px
     .ol-top    1440/1024→129/133px · ≤640→77px
   !important şart: bu sınıfların hepsinin medya sorgusu dışında duran
   `padding:… !important` sıkıştırma kuralı var. */
body[data-fit-over="1"] .kp-top{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}
body[data-fit-over="1"] .chl-hero{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}
body[data-fit-over="1"] .pd-hero{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}
body[data-fit-over="1"] .fs-top{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}
body[data-fit-over="1"] .ol-top{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}
/* .ed-top (egzersiz detayı) — R2, 4. tur. Diğer koyu banner'larla aynı
   dil (aynı radial + katman + fotoğraf), ama over-mode listesinde YOKTU:
   header koyu görselin üstünde KATI kalıyordu (K11'in düzelttiği kusurun
   aynısı) ve banner 216.3 px'te, detay ailesinin 384 px'inin dışındaydı. */
body[data-fit-over="1"] .ed-top{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}

.lib-crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:18px;flex-wrap:wrap}
.lib-crumb a{color:rgba(255,255,255,.6);transition:color .2s var(--ease)}
.lib-crumb a:hover{color:#fff}
.lib-crumb i{font-size:9px;color:rgba(255,255,255,.34)}
.lib-crumb a i.fa-house{font-size:13px;color:var(--fit-bright)}
.lib-crumb a:hover i.fa-house{color:#fff}
.lib-crumb .cur{color:var(--fit-bright)}
.lib-top .eyebrow{color:var(--fit-bright)}
.lib-top .eyebrow::before{background:var(--fit-bright)}
.lib-top h1{color:#fff;font-size:39px;letter-spacing:-.02em;margin:14px 0 10px;max-width:680px}
.lib-top .lib-sub{color:rgba(255,255,255,.78);font-size:15.5px;font-weight:500;max-width:560px;line-height:1.55}
.lib-search{
  display:flex;align-items:center;gap:12px;margin-top:24px;max-width:520px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:var(--radius-md);padding:4px 4px 4px 18px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.lib-search:focus-within{border-color:var(--fit-bright);background:rgba(255,255,255,.14)}
.lib-search i{color:rgba(255,255,255,.62);font-size:15px;flex:none}
.lib-search input{flex:1;min-width:0;background:none;border:none;outline:none;font-family:inherit;font-size:14.5px;font-weight:500;color:#fff;padding:11px 0}
.lib-search input::placeholder{color:rgba(255,255,255,.5)}
.lib-search button{flex:none;font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;background:var(--fit);border:none;border-radius:var(--radius-sm);padding:0 18px;height:42px;cursor:pointer;transition:background .2s var(--ease)}
.lib-search button:hover{background:var(--fit-deep)}
.lib-stats{display:flex;align-items:center;gap:26px;margin-top:24px;flex-wrap:wrap}
.lib-stat{display:flex;align-items:baseline;gap:8px}
.lib-stat b{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.01em}
.lib-stat span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.62)}

/* ---- KART IZGARASI ---- */
.hub-grid,.lib-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hub-grid.cols-3,.lib-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-grid.cols-2,.lib-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- KART İÇ PARÇALARI (Tip A) ---- */
.hub-media{position:relative;height:168px;background-size:cover;background-position:center}
.hub-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,30,22,0) 50%,rgba(20,18,12,.55))}
.hub-media.icon{display:grid;place-items:center;background:linear-gradient(160deg,var(--marka-yikama-koyu),#e6f3ec)}
.hub-media.icon::after{display:none}
.hub-media.icon i{font-size:46px;color:var(--fit);opacity:.85}
.hub-cat{position:absolute;top:12px;left:12px;z-index:2;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}
.hub-cat.fit{background:var(--fit);color:#fff}
.hub-tags{position:absolute;bottom:12px;left:12px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
.hub-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(20,18,12,.72);color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hub-pro{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a6410;background:linear-gradient(180deg,#fbe6b4,#f3d178);border:1px solid #e0bc63;padding:5px 10px;border-radius:var(--radius-sm)}
.soon-badge{position:absolute;top:12px;right:12px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);background:rgba(255,255,255,.92);padding:5px 11px;border-radius:var(--radius-sm)}
.hub-body{padding:18px;display:flex;flex-direction:column;flex:1}
.hub-body h4{font-size:16.5px;margin-bottom:8px;letter-spacing:-.01em;transition:color .2s var(--ease)}
.hub-card:hover .hub-body h4,a.hub-card:hover .hub-body h4{color:var(--fit-deep)}
.hub-body p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.55}
.hub-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:500}
.hub-foot .go{display:inline-flex;align-items:center;gap:7px;color:var(--fit-deep);font-weight:700}
.hub-foot .go i{transition:.2s var(--ease)}
.hub-card:hover .hub-foot .go i,a.hub-card:hover .hub-foot .go i{transform:translateX(3px)}

/* ---- FİLTRE ÇİPİ + GRUP ---- */
.fgroup{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:7px 0}
.fgroup+.fgroup{border-top:1px solid var(--line);margin-top:3px;padding-top:13px}
/* R16/2 · ÇİP DOKUNMA HEDEFİ 38 → 44px (WCAG 2.5.8).
   ÖLÇÜLDÜ: yazı 13px + dolgu 9px = 38px görünür yükseklik; kitin kendi 44px
   tabanının altında ve bu çip 60 public sayfanın süzgeç yüzeyinde. R15'te
   `.fit-tab` için verilen kararla birebir aynı yöntem: `min-height` eklendi,
   **dolgu değiştirilmedi** — dolgu büyüseydi çipler arası yatay ritim kayardı,
   oysa eksik yalnız dikeydeydi. Görsel yükseklik büyür, kutu genişliği aynı.
   ⚠ Kit §5'te `.df-fchip` yüksekliği 35 diye ölçülmüştü; o ölçüm bu satırdan
   önceydi ve kitin kendi 44px hedefiyle çelişiyordu. Kit §5 güncellendi. */
.df-fchip{font-size:13px;font-weight:600;color:var(--slate);background:var(--paper);border:1px solid var(--line);padding:9px 16px;min-height:44px;border-radius:var(--radius-sm);cursor:pointer;transition:.18s var(--ease);display:inline-flex;align-items:center;gap:7px}
.df-fchip i{font-size:12px;opacity:.8}
.df-fchip:hover{border-color:var(--fit);color:var(--fit-deep);background:var(--fit-tint)}
.df-fchip.on{border-color:var(--fit);color:#fff;background:var(--fit)}
.df-fchip.on i{opacity:1}
.df-fchip:focus-visible{outline:3px solid var(--fit-tint);outline-offset:2px}

/* ---- BOŞ DURUM ---- */
/* §D2 · ÜYE BOŞ DURUM KİTİ — dolgu `44px 24px`; ikon 58×58 `radius:12px`
   `margin:0 auto 14px`; başlık 15.5px `margin-bottom:5px`; metin 13px
   `max-width:300px` `margin:0 auto 16px`.
   ⚠ ÖLÇÜLEN KUSUR (2026-08-29): bu kit `54px 20px` dolgu · 62px ikon ·
   18px başlık · 340px metin taşıyordu — yani §D3'ün YÖNETİM kitine yakındı
   ve §D4'ü ("iki kitin değer kümesi birbirinin yerine kullanılmaz")
   ihliyordu. Değerler §D2'ye çekildi.
   ⚠ Başlık ETİKETİ `h3` olarak KALDI (§D2 `h4` diyor): etiketi değiştirmek
   21 sayfanın başlık hiyerarşisini oynatırdı ve `hesap-ailesi-qa` nöbeti
   hiyerarşiyi kilitliyor. Bağlanan şey ÖLÇÜ (15.5px) — kayda geçti. */
.lib-empty{display:none;flex-direction:column;align-items:center;text-align:center;padding:44px 24px}
.lib-empty.show{display:flex}
.lib-empty .ico{width:58px;height:58px;border-radius:var(--radius-md);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:22px;margin:0 auto 14px}
.lib-empty h3{font-size:15.5px;margin-bottom:5px}
.lib-empty p{font-size:13px;color:var(--muted);font-weight:500;max-width:300px;margin:0 auto 16px}

/* ---- DAR EKRAN ---- */
@media (max-width:1024px){
  .hub-grid,.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .hub-grid.cols-3,.lib-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lib-top{padding:30px 0 28px}   /* margin-top 112px KALIR — ≤1024'te kabuk hâlâ 113px */
  .lib-top h1{font-size:31px}
}
@media (max-width:640px){
  .hub-grid,.lib-grid,.hub-grid.cols-3,.lib-grid.cols-3,.hub-grid.cols-2,.lib-grid.cols-2{grid-template-columns:minmax(0,1fr);gap:16px}
  .lib-top{padding:24px 0 24px}
  body[data-fit-over="1"] .lib-top{padding-top:86px}    /* 62 + 24 — üst bant gizli, header 62px */
  .lib-top h1{font-size:25px}
  .lib-top .lib-sub{font-size:14px}
  .lib-stats{gap:16px}
}

/* ---- SAĞLIK NOTU (belge §14.1: genel bilgi ↔ kişisel tavsiye ayrımı) ---- */
.hr-note{display:flex;gap:14px;align-items:flex-start;background:var(--fit-tint);border:1px solid var(--fit-line);border-radius:var(--radius-lg);padding:20px 22px;margin-top:34px}
.hr-note>i{color:var(--fit-deep);font-size:18px;margin-top:2px;flex:none}
.hr-note p{font-size:14px;color:var(--slate-2);font-weight:500;line-height:1.6;margin:0}
.hr-note p a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.hr-note p+p{margin-top:9px}
/* ---- MARGIN-COLLAPSE DÜZELTMESİ (rehber sayfalarındaki gri boşluk) ----
 .hr-note'un 34px üst boşluğu, kapsayıcı section style="padding-top:0"
 taşıdığında section'ın DIŞINA taşıyordu (margin collapse): "Sırada"
 bölümü ile disclaimer arasında gövde grisini gösteren 34px'lik anlamsız
 bir şerit oluşuyordu. Ölçüm: section 1704→2214 bitiyor, sonraki 2248'de
 başlıyordu. Not bir sarmalayıcının İLK çocuğuysa üst boşluğa gerek yok —
 aradaki nefesi section'ın kendi padding'i verir.
 Yedi rehber sayfasını (yeni-baslayanlar · dogru-form · sureye-gore ·
 hedefe-gore · bolgeye-gore · masa-basi · isinma-soguma · sozluk) birden düzeltir. */
.wrap>.hr-note:first-child,
.sec>.wrap>.hr-note:first-child{margin-top:0}

/* ---- ORTALANMIŞ NOT (is-center) — video erişilebilirlik uyarısı gibi
 tek başına duran, section'a ait olmayan bloklar için. Sayfa genişliğinde
 sola yaslı durmak yerine okuma kolonunda ortalanır. ---- */
/* R8 madde 5 — KUTU İÇERİK KOLONUNA YAYILDI.
 Eskiden `max-width:760px` ile daralıyordu: egzersiz-detay-v1'in sayfa altı
 erişilebilirlik notu 760px kalırken içerik kolonu 1176px'ti (ölçüldü, @1440).
 Sitedeki diğer 34 dipnot zaten kendi kolonunu dolduruyor; bu tek istisnaydı.
 `margin:auto` ve ortalı hizalama korunuyor — daraltılmış kapsayıcı içinde
 kullanılırsa hâlâ ortalanır; genişlik sınırı artık kapsayıcıdan gelir. */
.hr-note.is-center{
  max-width:none;margin-left:auto;margin-right:auto;
  align-items:center;text-align:left;
  background:var(--fit-wash);border-color:var(--fit-line,var(--marka-cizgi));
}
.hr-note.is-center>i{
  margin-top:0;width:38px;height:38px;border-radius:var(--radius-circle);
  background:#fff;display:grid;place-items:center;font-size:16px;
}
.hr-note.is-center p{margin:0;text-align:left}
/* ana mesaj tek satır kalsın; ayrıntı ikinci satıra iner */
.hr-note.is-center .note-more{display:block;margin-top:5px;font-size:13px;color:var(--muted)}
/* notu taşıyan bant: üstündeki içerikle ve altındaki footer'la nefes bırakır */
/* akan uyarı/not metni okunur ölçüde kalır (E6/it2) */
.hr-note p{max-width:var(--measure)}
.note-band{padding:var(--sec-pad-sm) 0 var(--sec-pad);background:var(--bg-white)}
@media (max-width:640px){
  .hr-note.is-center{flex-direction:column;align-items:flex-start;gap:11px}
  .note-band{padding:var(--sec-pad-sm) 0 var(--sec-pad-sm)}
}

/* ---- "ÖRNEK" ETİKETİ (ziyaretçi demo görünümü — belge §9.3/§19) ---- */
/* =====================================================================
 BANNER YÜKSEKLİK KURALI (Faz 1)
 Belge/tur kuralı: banner ekran yüksekliğinin yarısını geçmez.
 İki kolonlu hero'larda ikincil panel (enerji defteri, challenge kartı)
 banner bölümünden ÇIKARILIP bandın alt kenarına taşan bir kart olarak
 yerleşir: bant kısalır, panel ve içeriği aynen kalır.
 ===================================================================== */
/* 2026-08-11 referans kıyaslaması: bu sarmalayıcı ARTIK YALNIZ ≤640'ta iş görür.
 ≥641'de panel kabuk JS'i (relocateBandPanel) tarafından hero ızgarasının ikinci
 kolonuna geri taşınır — referans kompozisyonu (metin solda, panel sağda, ikisi de
 bandın İÇİNDE) aynen geri gelir. Negatif margin kaldırıldı: önceki -40px değeri
 mobilde paneli hero CTA'sının üstüne bindirip düğmeyi tıklanamaz yapıyordu. */
/* R8 · E'nin yapışıklık taraması — ALT BOŞLUK TOKEN'A BAĞLANDI.
 Sabit 26px, sitenin kendi kabul ettiği en dar meşru bölüm nefesinin
 (--sec-pad-sm, @1440'ta 32px) ALTINDAYDI: beş yerde (antrenor-detay ·
 antrenor-ol · challenge-v1 ×2 · dadafit-kopru) panel bir sonraki bloğa
 26px'te yapışıyordu. Sabit sayı yerine token: 32/26/26/22 — her genişlikte
 o genişliğin en dar meşru nefesi kadar, bir daha eşiğin altına düşmez. */
/* R8 kalem 27 (lead, birleştirme) — üst marj da eşiğe çekildi.
   18px < --sec-pad-sm (32/22): AJAN-E'nin taraması bunu 4 sayfada
   yapışık buluyordu. Alt marj daha önce token'a bağlanmıştı; üst marj
   sabit kalınca kutu tek yandan nefes alıyordu. */
.fit-band-panel{position:relative;z-index:3;margin-top:var(--sec-pad-sm);margin-bottom:var(--sec-pad-sm)}
.fit-band-panel>*{max-width:100%;margin-left:0;margin-right:0}
/* ≥641: JS taşımayı yaptığında sarmalayıcı boş kalır — yer kaplamasın */
.fit-band-panel:empty{display:none}

/* =====================================================================
 FİT PLANIM — kişisel alan kabuğu (belge §9 · §16 "kişisel alan ziyaretçi
 içeriklerinden görsel olarak ayırt edilmeli")
 Ayrım işareti: banner fotoğrafsız koyu-yeşil bant + kimlik satırı.
 Sekme rayı hesabim-v1/mutfak-defteri'nin .pf-tabbar/.pf-tabs/.dt kiti —
 yeni bileşen üretilmedi, sekmeler ayrı sayfalara giden <a> oldu.
 ===================================================================== */
.fp-top{
  --lib-img:none;
  background:
    radial-gradient(900px 380px at 88% 0%,color-mix(in srgb, var(--marka) 34%, transparent),transparent 62%),
    linear-gradient(120deg,#0a2839 0%,#1a1a13 52%,#211E16 100%) !important;
}
/* ÖLÜ KURAL (R12 EK TUR · R21, 2026-08-24) — M17'nin eski KOYU banner
   kitiydi (`.fp-top` + bu beşli). M17 beyaz `.fp-profil` kartına geçince
   `.fp-name`/`.fp-state` yanlışlıkla yeni işaretlemede de kullanılmaya
   devam etti (fit-shell.js, PLAN PROFİL BAŞLIĞI şablonu) ve beyaz zeminde
   beyaza yakın metin bıraktı (R21 kökü) — o son iki canlı referans da
   R21'de kaldırıldı. Silinmedi, kütüğe yazıldı (KARARLAR.md K68). */
.fp-who{display:flex;align-items:center;gap:13px;margin-top:20px;flex-wrap:wrap}
.fp-ava{width:44px;height:44px;border-radius:var(--radius-circle);background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.28);flex:none}
.fp-who-txt{display:flex;flex-direction:column;line-height:1.3}
.fp-name{color:#fff;font-size:15px;font-weight:800}
.fp-state{color:rgba(255,255,255,.66);font-size:12.5px;font-weight:600}
/* Sekme rayı G2'de ORTAK bileşene geçti (.fit-tabs / .fit-tab, B1·K13).
   .pf-tabbar yalnız sticky kabuk olarak kaldı; .pf-tabs/.dt kuralları
   Planım rayı için ARTIK KULLANILMIYOR (başka sayfalar hâlâ kullanıyor,
   o yüzden kurallar silinmedi). */
.pf-tabbar .fit-tabs{display:flex;flex-wrap:wrap;width:100%}
@media (max-width:900px){ .pf-tabbar .fit-tabs{flex-wrap:nowrap} }
/* §E9 · sekme şeridi YAPIŞKAN DEĞİLDİR (Diet tabanı). Yapışkanlıkla
   birlikte onun kabuğu da kalktı: z-index, yarı saydam zemin ve
   backdrop-filter yalnız yapışkan şerit içindi.
   §S1 · şeridin üstü 24px, altı 22px — dört markada tek ritim. */
.pf-tabbar{position:static;padding:0;margin-top:24px;margin-bottom:22px}
/* Ray on bir kaleme çıktı (Enerji Köprüsü eklendi). Masaüstünde tek satıra
 sığmıyor; gizli kaydırma çubuğuyla yatay ray olarak bırakmak kalemleri
 görünmez kılıyordu → geniş ekranda SARAR, dar ekranda yatay ray kalır. */
/* §E4 · şerit kutusu: gap 4 · dolgu 4 · yarıçap 12 · overflow-x AUTO.
   Sarma (flex-wrap:wrap) kalktı — şartname şeridi yatay RAY olarak
   bağlıyor, kırılımda ayrıca ele alınmıyor.
   §E5 · şerit `margin-left/right:auto` ile ortalanır;
   `justify-content:center` YAZILMAZ. */
.pf-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:4px;scrollbar-width:none;margin-left:auto;margin-right:auto}
.pf-tabs::-webkit-scrollbar{display:none}
/* §E8 · sekme kalemi 13px/700 · dolgu `9px 16px` · min-height 44px. */
.pf-tabs .dt{font-family:inherit;font-weight:700;font-size:13px;color:var(--muted);background:transparent;border:none;border-radius:var(--radius-sm);padding:9px 16px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.2s var(--ease);white-space:nowrap;flex:none}
.pf-tabs .dt i{font-size:12.5px;opacity:.85}
.pf-tabs .dt:hover{color:var(--fit-deep);background:var(--fit-tint)}
.pf-tabs .dt.active{background:var(--fit);color:#fff}
.pf-tabs .dt.active i{opacity:1}
.pf-tabs .dt:focus-visible{outline:3px solid var(--fit-tint);outline-offset:2px}

/* ---- MİSAFİR GİRİŞ BANDI (R8 madde 36'da bilgi şeridinden dönüştü) ----
   Eskiden "ziyaretçi bilgi şeridi"ydi: ikon + "bu veriler örnektir"
   paragrafı + iki düğme. Paragraf ve ikon kalktı (madde 36), geriye yalnız
   giriş çağrısı kaldı — yani blok artık bir UYARI değil bir EYLEM bandı.

   Biçim buna göre değişti; metin kalkınca eski kural iki düğmeyi geniş
   kutunun SOLUNA yapıştırıp sağında boş alan bırakıyordu:
     · düğmeler ortalandı (`justify-content:center`) — bant simetrik okunuyor
     · dikey dolgu 16 → 14 px: kutu değil bant yüksekliği
     · `>i` ve `p` kuralları SİLİNDİ (karşılıkları kalmadı, ölü CSS bırakılmaz)
   Zemin ve kenarlık korundu: misafir durumunu işaretleyen tek görsel bu. */
/* ALT BOŞLUK (R8 · E'nin taraması): `margin-bottom` HİÇ YOKTU — 9 fit-planim
   sayfasında bant alttaki `section.fp-body`'ye 0px'te yapışıyordu, 4
   enerji-defteri sayfasında 22px kalıyordu. CTA bandının altı da üstü kadar
   nefes alır; token'a bağlandı (32/26/26/22). */
/* HİZA: ORTA DEĞİL, SAYFANIN SOL EKSENİ.
   Kutu içeriği kadar daraltılınca (aşağıdaki `.fp-gate-in`) ölü krem alan
   kapandı ama bant ortalandığı için sayfanın TEK ortalanmış bloğu oldu:
   ölçüm @1440 · fit-planim-v1 → diğer bütün blokların sol kenarı 132px,
   bandınki 548px'ti. Sol eksene alındı; ≤640'ta bant zaten tam genişlik. */
.fp-gate{margin-top:20px;margin-bottom:var(--sec-pad-sm);display:flex;justify-content:flex-start}
/* KUTU İÇERİĞİ KADAR: ilk denemede bant `.wrap` genişliğini (1176 px)
   koruyordu ve içindeki eylem 342 px'ti — iki yanda **417'şer px ölü krem
   alan** kalıyordu (ölçüldü). Ortalamak sorunu çözmedi, boşluğu ikiye böldü;
   lead'in "iki düğme geniş bir kutuda ortada asılı kalmasın" uyarısı tam
   buydu. Kutu artık içeriği kadar geniş ve kendisi ortalanıyor. */
.fp-gate-in{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:var(--cream-2);border:1px solid #e7ddcb;border-radius:var(--radius-lg);padding:14px 20px;width:max-content;max-width:100%}
.fp-gate-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
/* @390: iki düğme alt alta ve FARKLI genişlikteydi (133.2 / 198.9) —
   ortalanınca kenarları tırtıklı okunuyordu. Mobilde ikisi de tam genişlik. */
@media (max-width:640px){
  .fp-gate-in{width:auto;padding:14px}
  .fp-gate-acts{width:100%}
  /* Tam genişlik yapınca ÜÇÜNCÜ kusur çıktı: iki düğme artık aynı genişlikte
     (328 px) ama farklı yükseklikte — birincil 50.5, ikincil 52.5 (ghost'un
     1 px kenarlığı). Yan yanayken bu site geneli desendir ve referansla da
     uyumludur (dadadiet 50.5 / 52.5); ALT ALTA ve aynı genişlikteyken
     görünür bir basamak üretiyor. Yalnız bu bağlamda eşitlenir. */
  .fp-gate-acts .btn{width:100%;justify-content:center;min-height:52.5px}
}

/* kişisel alan gövde kitleri (mevcut adlardan) */
.fp-body{padding:var(--sec-pad-sm) 0 var(--sec-pad);background:var(--bg-cream)}
.fp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.fp-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fp-grid.cols-1{grid-template-columns:minmax(0,1fr)}
.fp-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:24px 26px}
.fp-card.is-dark{background:linear-gradient(160deg,var(--marka-koyu-zemin-yesil),#211E16);border-color:transparent;color:#fff}
.fp-card.is-dark h3,.fp-card.is-dark b{color:#fff}
.fp-card.is-dark p,.fp-card.is-dark .fp-meta{color:rgba(255,255,255,.74)}
.fp-card.span-2{grid-column:1/-1}
.fp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.fp-card.is-dark .fp-head{border-color:rgba(255,255,255,.12)}
.fp-head h3{font-size:17.5px;display:flex;align-items:center;gap:10px}
.fp-head h3 i{flex:none;width:34px;height:34px;border-radius:var(--radius-md);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:14px}
.fp-card.is-dark .fp-head h3 i{background:color-mix(in srgb, var(--marka) 24%, transparent);color:var(--marka-parlak-2)}
.fp-head .fp-act{flex:none;font-size:13px;font-weight:700;color:var(--fit-deep);display:inline-flex;align-items:center;gap:7px}
.fp-card.is-dark .fp-head .fp-act{color:var(--fit-bright)}
.fp-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:12px}
.fp-meta b{color:var(--slate);font-weight:800}
.fp-card.is-dark .fp-meta b{color:#fff}

/* ölçü satırı (istatistik) */
.fp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fp-stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 18px}
.fp-stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--slate)}
.fp-stat span{font-size:12.5px;font-weight:600;color:var(--muted)}
.fp-stat.is-fit b{color:var(--fit-deep)}

/* ilerleme çubuğu */
.fp-bar{height:8px;border-radius:var(--radius-pill);background:#ececeb;overflow:hidden;margin:12px 0 0}
.fp-card.is-dark .fp-bar{background:rgba(255,255,255,.14)}
.fp-bar>span{display:block;height:100%;background:var(--fit);border-radius:var(--radius-pill)}

/* liste satırı */
.fp-list{display:flex;flex-direction:column}
.fp-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.fp-row:last-child{border-bottom:none}
.fp-row .ico{flex:none;width:38px;height:38px;border-radius:var(--radius-md);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:14px}
.fp-row .txt{flex:1;min-width:0}
.fp-row .txt b{display:block;font-size:14.5px;color:var(--slate)}
.fp-row .txt small{font-size:12.5px;color:var(--muted);font-weight:500}
.fp-row .end{flex:none;font-size:12.5px;font-weight:700;color:var(--muted);text-align:right}

/* durum rozeti — renge EK OLARAK metin (belge §14.3) */
.fp-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:5px 11px;border-radius:var(--radius-sm);border:1px solid}
.fp-badge.ok{background:var(--fit-tint);color:var(--fit-deep);border-color:var(--fit-line)}
.fp-badge.wait{background:#fff6e6;color:#8a6410;border-color:#e8d5a8}
.fp-badge.off{background:#f4f4f3;color:var(--slate-2);border-color:var(--line)}
.fp-badge.stop{background:#fff2ee;color:#a8391c;border-color:#f3cdc0}

/* açma-kapama (izin) satırı */
.fp-toggle{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.fp-toggle:last-of-type{border-bottom:none}
.fp-toggle .txt{flex:1;min-width:0}
.fp-toggle .txt b{display:block;font-size:14.5px;color:var(--slate);margin-bottom:3px}
.fp-toggle .txt small{font-size:13px;color:var(--muted);font-weight:500;line-height:1.55;display:block}
.fp-sw{flex:none;position:relative;width:46px;height:26px;border-radius:var(--radius-pill);background:#dcdcdb;border:none;cursor:pointer;transition:.2s var(--ease)}
/* R6 · dokunma hedefi — pil görsel olarak 46×26 kalıyor ama tıklanabilir
   alan ölçüldüğünde 26 px'ti (asgari 44). Görünmez bir örtü hedefi 44 px'e
   çıkarıyor; hiçbir kutu büyümüyor, satır ritmi değişmiyor. */
.fp-sw::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.fp-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s var(--ease)}
.fp-sw[aria-checked="true"]{background:var(--fit)}
.fp-sw[aria-checked="true"]::after{transform:translateX(20px)}
.fp-sw:focus-visible{outline:3px solid var(--fit-tint);outline-offset:2px}
.fp-sw-lbl{flex:none;font-size:12px;font-weight:700;color:var(--muted);min-width:38px;text-align:right}

/* mini takvim / seri ızgarası */
.fp-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:6px}
.fp-day{aspect-ratio:1;border-radius:var(--radius-sm);background:#f2f2f1;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.fp-day.on{background:var(--fit);color:#fff}
.fp-day.rest{background:var(--fit-tint);color:var(--fit-deep)}
.fp-day.today{outline:2px solid var(--fit);outline-offset:-2px;color:var(--fit-deep);background:#fff}

/* basit sütun grafiği — renge ek metinli */
.fp-chart{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:8px}
.fp-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.fp-col .bar{width:100%;background:var(--fit-tint);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-top:3px solid var(--fit)}
.fp-col .lbl{font-size:11.5px;font-weight:700;color:var(--muted)}
.fp-col .val{font-size:11.5px;font-weight:800;color:var(--fit-deep)}

@media (max-width:1024px){
  .pf-tabbar{top:113px}
  .fp-grid,.fp-grid.cols-3{grid-template-columns:minmax(0,1fr)}
  .fp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fp-body{padding:var(--sec-pad-sm) 0 var(--sec-pad)}
}
@media (max-width:640px){
  .pf-tabbar{top:63px;padding:10px 0}
  .pf-tabs .dt{font-size:12.5px;padding:9px 13px}
  .fp-card{padding:20px 18px}
  .fp-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fp-stat b{font-size:20px}
  .fp-who{gap:10px;margin-top:14px}
  .fp-body{padding:var(--sec-pad-sm) 0 var(--sec-pad)}
  .fp-chart{height:120px;gap:6px}
}

/* ---- Fit Planım sayfa aksiyon şeridi (Enerji Defteri hero CTA'sının yeni yeri) ---- */
/* R8 kalem 27 — margin-bottom YOKTU, alt boşluk 0 idi. */
.fp-actions{margin-top:var(--sec-pad-sm);margin-bottom:var(--sec-pad-sm)}
.fp-actions-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:16px 20px}
.fp-actions-in .df-hcta{margin-top:0 !important;display:flex;gap:10px;flex-wrap:wrap}
.fp-actions-in .df-htrust{margin-top:0 !important;display:flex;gap:16px;flex-wrap:wrap}
.fp-actions-in .df-htrust span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.fp-actions-in .df-htrust i{color:var(--fit-deep);font-size:12px}
@media (max-width:640px){
  .fp-actions-in{padding:14px 16px}
  .fp-actions-in .df-hcta .btn{width:100%;justify-content:center}
}

.fp-actbtn{background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;padding:0}
.fp-actbtn:hover{text-decoration:underline;text-underline-offset:3px}
.fp-actbtn:focus-visible{outline:3px solid var(--fit-tint);outline-offset:3px;border-radius:var(--radius-sm)}

/* ---- §9.3 · kalori rakamlarını gizleme tercihi ----
 Açıkken sayı gizlenir, denge göstergesi (çubuk + "dengedesin/açık" etiketi) kalır. */
.ed-pref{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ed-pref .txt{display:flex;flex-direction:column;line-height:1.35}
.ed-pref .txt b{font-size:13.5px;color:var(--slate)}
.ed-pref .txt small{font-size:12px;color:var(--muted);font-weight:500}
body.kcal-off .dl-val,
body.kcal-off .dl-bal-l b,
body.kcal-off .macro.kcal,
body.kcal-off .act-burn,
body.kcal-off .bal-energy,
body.kcal-off .fp-stat b small{display:none !important}
body.kcal-off .dl-row::after{content:"sayı gizli";font-size:11.5px;font-weight:700;color:var(--muted)}

/* Fit Planım kabuğundaki panel banda taşmaz — kabuk banner'ı zaten kısa,
 negatif üst boşluk üstteki aksiyon şeridini örtüyordu (tıklama probu yakaladı). */
/* `margin-bottom:0` üst kuralı eziyordu → enerji-defteri-v1'de panel alttaki
   `section.sec`e 0px'te yapışıyordu (E'nin "−14px binişme" ölçümü reveal
   animasyonu sırasında alınmıştı; animasyon oturunca gerçek değer 0px).
   Üst boşluk 22px KASITLI (yorum yukarıda), alt boşluk token'a döndü. */
/* R8 kalem 27 — üst marj 22px, eşiğin altındaydı.
   NOT: bu blok için önce "−14px binişme" raporlanmıştı; o ölçüm
   `.reveal` animasyonu oturmadan alınmış bir ARTEFAKTTI. Gerçek kusur
   binişme değil, dar üst marjdı. */
.fit-band-panel.fp-inflow{margin-top:var(--sec-pad-sm);margin-bottom:var(--sec-pad-sm)}
.fit-band-panel.fp-inflow>*{max-width:none;margin-left:0}

/* [hidden] her zaman gizler — .btn/.btn-line gibi display kuralları hidden'i yeniyordu */
[hidden]{display:none !important}

/* =====================================================================
 SİHİRBAZ CSS'İ KABUKTAN ÇIKTI — R13 (5. tur)
 `.wz-*` ailesi (örtü katmanı, modal kutu, satır içi kip, adım/sonuç
 blokları) burada duruyordu. Sihirbaz artık pop-up değil, kendi tam
 sayfası: `programini-bul-v1.html`. Stiller o sayfanın kendi `pb-*`
 ailesine taşındı; 60 sayfanın hiçbiri artık modal CSS'i yüklemiyor.
 ===================================================================== */

/* =====================================================================
 FAZ 6 — SAĞLIK, GÜVENLİK VE ERİŞİLEBİLİRLİK KATMANI (belge §14)
 ===================================================================== */

/* ---- R6 · MADDE 2 · sayfa altı sağlık şeridi KALDIRILDI ----
   `.fit-health` / `.fh-*` ailesi (21 kural) buradaydı; üreten IIFE
   `fit-shell.js`'ten kalktığı için ölü CSS bırakılmadı.
   Uyarı metni footer'ın yasal bandında, tercihler
   `fit-planim-veri-izin-v1.html`'de duruyor. */

/* ---- ERİŞİLEBİLİRLİK (§14.3) ---- */
/* görünür ve tutarlı odak göstergesi — tüm etkileşimli öğeler */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:3px solid var(--fit);outline-offset:2px;border-radius:var(--radius-sm);
}
.topbar a:focus-visible,.footer a:focus-visible,.lib-top a:focus-visible,
.fp-top a:focus-visible,.header.at-top .nav a:focus-visible{outline-color:#fff}
/* klavye ile ana menü: hover'a ek olarak odak zinciriyle de açılır.
   DİKKAT — burada `transform:none` YAZILMAZ. Panelin temel konumlandırması
   left:50% + translateX(-50%) ile ortalamadır (bkz. ".dropdown", ~satır 352);
   transform'u sıfırlamak translateX(-50%)'i de siler ve panel kendi
   genişliğinin YARISI kadar sağa zıplar. Ölçüm (2026-08-17, 1440px):
   Hareket paneli Δx=280px (560/2), Programlar Δx=132.6px (265.2/2) —
   hover ile açılan panel tıklanınca yer değiştiriyordu.
   Regresyon testi: tests/dropdown-position.mjs */
.nav-item:focus-within>.dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* tam genişlik mega panel yatayda ortalanmaz; yalnız dikey giriş ofseti sıfırlanır */
.nav-item:focus-within>.mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* "içeriğe atla" — klavye kullanıcısı kabuk menüsünü atlayabilsin */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--fit);color:#fff;
  font-weight:700;font-size:14px;padding:12px 18px;border-radius:0 0 var(--radius-md) 0}
.skip-link:focus{left:0}
/* yalnız ekran okuyucuya görünen metin */
.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}

/* ---- R3 (4. tur) · EKMEK KIRINTISININ ANA SAYFA KALEMİ = YALNIZ İKON ----
   Beyar: "DadaFit zaten ana sayfa, ana sayfa logo şeklinde olacak. Kardeş
   markalarda ana sayfa ikonları daha kompakt. Büyük yapma ve DadaFit'i
   ayrıca yazma, sadece ikon olacak orada."
   Metin `.sr-only` ile ekran okuyucuya bırakıldı; görünen düğüm yalnız ikon.
   Ölçülen kusur: ikon boyutu kırıntı sınıfına göre değişiyordu —
   `.lib-crumb` 13px · `.cp-crumb` 12px · `.ed-crumb` 12.5px ·
   `.rd-crumb`/`.kp-crumb` 9px. Tek kaynağa çekildi.

   R12 (5. tur) — DEĞER REFERANSTAN ÖLÇÜLDÜ, 13px → 9px.
   Beyar: "DadaFit'in crumb-home ikonu referansa göre iri; kırıntı
   satırının ritmini bozuyor." Ölçüm (dadadiet.com @1440 ve @390):
     ev ikonu font-size 9px · kutu 10.1 × 9 · satır yüksekliğine oran 0.45
     ev ikonu ile chevron ayracı AYNI boyutta (ikisi de 9px)
     ikon → ayraç boşluğu 9px
   DadaFit'te ikon 13px, ayraç 9px idi: ev ikonu kendi ayracından **%44
   daha iri**, referansta ise eşitler. Boyut ve boşluk referansa çekildi;
   RENK çekilmedi — referans `rgba(255,255,255,.4)` kullanıyor, DadaFit
   kendi yeşilinde kalıyor (marka kimliği + metinsiz tek bağ olduğu için
   ayırt edilebilir kalmalı). Gerekçe: KARARLAR K29. */
.crumb-home{display:inline-flex;align-items:center;line-height:1}
.lib-crumb .crumb-home i,
.cp-crumb .crumb-home i,
.ed-crumb .crumb-home i,
.rd-crumb .crumb-home i,
.kp-crumb .crumb-home i,
.pd-crumb .crumb-home i,
.pf-crumb .crumb-home i,
.df-crumb .crumb-home i,
.crumb-home i{font-size:9px !important;line-height:1;width:auto}
/* İkon rengi de tek kaynağa çekildi. Ölçülen kusur: sayfa sayfa
   rgba(255,255,255,.72) · rgb(52,196,126) · rgb(199,199,199) ·
   rgba(255,255,255,.34) · rgb(169,205,185) — beşi de farklıydı ve
   antrenor-ol'daki .34 alfa koyu banner üzerinde okunmuyordu.
   Koyu banner'da marka yeşili (--fit-bright), açık zeminde koyu yeşil. */
.crumb-home i{color:var(--fit-bright) !important}
.pf-crumb .crumb-home i,
body:not([data-fit-over="1"]) .rd-crumb .crumb-home i{color:var(--fit-deep) !important}
/* hareket azaltma tercihi — animasyon ve otomatik oynatma kısılır */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .df-hero-media video{display:none !important}
}
/* mobilde sabit arkaplan kullanılmaz (kural) */
@media (max-width:1024px){ [style*="background-attachment:fixed"],.bg-fixed{background-attachment:scroll !important} }
/* METİN YASLAMA: eski kural (".wrap p,.fp-card p,.hr-note p{text-align:left}" —
 "dar kolonda iki yana yaslama yok") kaldırıldı. Yaslama artık site genelinde
 tek kaynaktan yönetiliyor: assets/css/fit-type.css. O dosya bu stil sayfasından
 SONRA yüklenir ve dar kutu istisnasını container query ile kendisi kurar. */

/* ---- BANNER YÜKSEKLİK KURALI — İÇERİK KORUNARAK ----
 Kural: banner ekran yüksekliğinin yarısını geçmez.
 YÖNTEM (2026-08-11 referans kıyaslama turunda yeniden yazıldı):
 yalnız DİKEY BOŞLUK daraltılır. Bu blokta
 · hiçbir kalem display:none ile gizlenmez,
 · hiçbir metin -webkit-line-clamp ile kırpılmaz,
 · tipografi ölçeği referans değerinde bırakılır (h1/lead/gövde sayfa CSS'inden gelir).
 Önceki sürüm 13 kalemi ≤640'ta gizliyor, iki metni kırpıyor ve h1'i 46px→29px
 düşürüyordu; ölçüm bunun referanstan sapma olduğunu gösterdi, geri alındı.
 Mobilde bandın kısalması için ikincil panel ≤640'ta banddan çıkarılır —
 bu iş CSS'te değil kabuk JS'inde (relocateBandPanel) yapılır.
 Sıra ÖNEMLİ: geniş ekran → ≤1024 → ≤640 (hepsi !important, son yazan kazanır). */

/* ---------- geniş ekran: yalnız dikey nefes ---------- */
.df-top .df-crumb{margin-top:10px !important;margin-bottom:2px !important}
.df-top .df-hero{padding:var(--hero-pt) 0 var(--hero-pb) !important}
.df-hmain h1{margin:12px 0 12px !important}
.df-hcta{margin-top:18px !important}
.df-htrust{margin-top:16px !important}
.df-top .ed-demo{margin-top:14px !important}
.kp-top .kp-hero{padding:var(--hero-pt) 0 var(--hero-pb) !important}
.chl-hero{padding:var(--hero-pt) 0 var(--hero-pb) !important}
.chl-hero h1{margin:8px 0 10px !important}
.chl-meta{margin:12px 0 !important}
.chl-cta{margin-top:13px !important}
.cp-top{padding:var(--hero-pt) 0 var(--hero-pb) !important}
.ol-top{padding-top:var(--hero-pt) !important;padding-bottom:var(--hero-pb) !important}
.ol-top .ol-bene{margin-top:12px !important}
.ol-top .ol-intro{margin-top:10px !important}
.ol-top .ol-hero-acts{margin-top:14px !important}
.pd-hero{padding:var(--hero-pt) 0 var(--hero-pb) !important}
.pd-hero .pd-crumb{margin-bottom:8px !important}
.pd-hero h1{margin:6px 0 6px !important}
.pd-hero .pd-meta{margin-top:10px !important}
.pd-hero .pd-hcta{margin-top:12px !important}
.fs-top{padding:var(--hero-pt) 0 var(--hero-pb) !important}
/* .lib-top 37 sayfada kullanılıyor ve 16'sı kendi <style> bloğunda
   `padding:30px 0 30px` kopyasını taşıyor. body seçicisi (0,2,0) o
   kopyaları (0,1,0) yener — sayfaları tek tek düzenlemeye gerek yok. */
body[data-brand="fit"] .lib-top{padding-top:var(--hero-pt);padding-bottom:var(--hero-pb)}
body[data-brand="fit"] .ed-top{padding-top:var(--hero-pt);padding-bottom:var(--hero-pb)}
/* Dış kabuk taşıyan banner'lar (.kp-top/.df-top/.ol-top): iç hero ızgarası
   ölçekten besleniyor ama DIŞ kutunun kendi padding'i sayfa CSS'inde kalıyordu
   (kp-top 34/40 · df-top 112/24). Alt nefesi de tek ölçeğe bağla. */
body[data-brand="fit"] .kp-top,
body[data-brand="fit"] .df-top{padding-bottom:var(--hero-pb)}
/* §R8 · `.ol-top` bu üçlüden ÇIKTI: banner blokunun merkezi `.wrap`ın
   kapladığı bölgeden hesaplanıyor ve alt dolgu o bölgeyi kısaltıp merkezi
   yukarı kaydırıyordu (ölçüldü: 341, hedef 336). Alt nefes artık
   ortalamanın kendisinden geliyor — üst ve alt boşluk eşit. */
body[data-brand="fit"] .ol-top{padding-bottom:0}

/* ============================================================
   R15 (5. tur) · BANNER STANDARDI — SİTE GENELİNDE TEK KURAL
   ------------------------------------------------------------
   Beyar: iki aile, iki sabit yükseklik; değer DadaDiet'ten ölçülüp
   birebir alınacak; imza banner'ları kalkacak; içerik uzunluğu kutuyu
   BÜYÜTMEYECEK, gerekirse tipografi küçülür.

   NELER DEĞİŞTİ (4. tura göre):
   · 344/384 atıldı → referanstan ölçülen 544/560 (@1024 607/617 · @390 587/726)
   · Sabit yükseklik artık ≥901 px ile sınırlı DEĞİL — her genişlikte sabit.
     4. turda mobilde serbest bırakılmıştı çünkü 262 px'lik kutuya içerik
     sığmıyordu; referans değerleriyle (@390 587/726) sığıyor.
   · Sütun-sarmalı iki kolon KALDIRILDI. 4. turda 344 px'e sığdırmak için
     eylem satırı sağa taşınıyordu; R15.2 bunu açıkça yasaklıyor
     ("butonlar sağ üstte / H1 hizasından kopuk"). 544 px'te içerik alanı
     370 px ve zengin banner ~330 px sürüyor — tek kolonda sığıyor.
   · İMZA BANNER'LARI AİLEYE GİRDİ: .kp-top · .ol-top · .chl-hero ·
     .pd-hero · .cp-top. Ana sayfanın tam-ekran perdesi (.df-top,
     data-fit-hero="1") DIŞARIDA — gerekçe KARARLAR K31.

   İç düzen (referanstan çıkarılan sıra):
     kırıntı → eyebrow → H1 → alt metin → istatistik şeridi → CTA
   CTA H1 ile AYNI SOL HİZADA ve istatistik şeridinin ALTINDA.
   ============================================================ */
body[data-fit-hero-kind="liste"] .lib-top,
body[data-fit-hero-kind="liste"] .fs-top,
body[data-fit-hero-kind="liste"] .kp-top,
body[data-fit-hero-kind="liste"] .ol-top{height:var(--banner-h-liste)}
body[data-fit-hero-kind="detay"] .lib-top,
body[data-fit-hero-kind="detay"] .ed-top,
body[data-fit-hero-kind="detay"] .cp-top,
body[data-fit-hero-kind="detay"] .chl-hero,
body[data-fit-hero-kind="detay"] .pd-hero{height:var(--banner-h-detay)}
/* imza banner'larının sayfa CSS'indeki kendi min-height'ları bu kuralı
   eziyordu — sıfırlanır ki aile ölçüsü tek kaynak olsun */
body[data-fit-hero-kind] .kp-top,
body[data-fit-hero-kind] .ol-top,
body[data-fit-hero-kind] .chl-hero,
body[data-fit-hero-kind] .pd-hero,
body[data-fit-hero-kind] .cp-top{min-height:0 !important}

/* alt metin iki satıra kilitli — banner yüksekliğini kart kart değiştiren
   asıl değişken buydu */
body[data-fit-hero-kind] .lib-top .lib-sub{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}

/* ---- İÇ DÜZEN: TEK KOLON, ÜSTTEN HİZALI ----
   `.wrap` blok akışında kalır (margin:0 auto ile 132 px'e oturur).
   4. turun `flex-flow:column wrap` kutusu kaldırıldığı için eylem satırı
   akışta kalır ve H1 ile aynı sol kenardan başlar. */
@media (min-width:901px){
  /* referans tipografisi — banner'a ÖZEL, global paleti değiştirmez */
  body[data-fit-hero-kind] .lib-top h1,
  body[data-fit-hero-kind] .fs-top h1,
  body[data-fit-hero-kind] .ed-top h1,
  body[data-fit-hero-kind] .cp-top h1{
    font-size:42px;line-height:1.12;letter-spacing:-.03em;max-width:none;margin:0
  }
}
/* ---- BLOK SIRASI: istatistik şeridi ÖNCE, CTA SONRA ----
   Referans sırası: kırıntı → eyebrow → H1 → alt metin → istatistik → CTA.
   DadaFit sayfalarında işaretleme sırası tersti (CTA, istatistikten önce
   geliyordu). İşaretleme 21 sayfada tek tek değiştirilmek yerine `.wrap`
   bir sütun flex kutusuna çevrilip yalnız iki blok sıralanıyor.

   DİKKAT — 4. turdaki tuzak: `.wrap`ı flex ITEM yapmak `margin:0 auto`yu
   shrink-to-fit'e düşürüyordu (B2). Burada `.wrap` flex CONTAINER oluyor;
   kendi blok akışındaki yeri ve ortalanması değişmiyor, `align-items:
   stretch` ile çocuklar tam genişlikte kalıyor. */
body[data-fit-hero-kind] .lib-top > .wrap,
body[data-fit-hero-kind] .fs-top > .wrap,
body[data-fit-hero-kind] .ed-top > .wrap{
  display:flex;flex-direction:column;align-items:stretch;
  row-gap:var(--banner-gap)
}
body[data-fit-hero-kind] .lib-top > .wrap > *,
body[data-fit-hero-kind] .fs-top > .wrap > *,
body[data-fit-hero-kind] .ed-top > .wrap > *{margin-top:0;margin-bottom:0}

/* =====================================================================
   R6 · MADDE 4 — İSTATİSTİK ŞERİDİ SAĞDA DİKEY KOLON  (site geneli)
   ---------------------------------------------------------------------
   Beyar: "şerit açıklamanın altında yatay duruyor; kardeş markalarda
   sağda dikey bir kolon."

   ÖLÇÜLDÜ (Playwright, 8. oturum, @1440 · üç bağımsız liste sayfası):
     dadadiet.com/diyetisyenler    kolon x1167.2 w140.8 · kalem 140.8×56.7
     dadagastro.com/tarifler       kolon x1223.5 w 84.5 · kalem  84.5×56.7
     dadagastro.com/mutfak-sozlugu kolon x1251.3 w 56.7 · kalem  56.7×56.7
   Üçünde de:
     · kolon sağ kenarı = wrap sağ kenarı (1308) → kolon SAĞA yaslı
     · flex-direction COLUMN, kalemler arası **16 px**
     · sol kolonla arası **44 px** (sol kolonun sağ kenarı → şeridin sol kenarı)
     · kolonun ALT kenarı sol kolonun alt kenarıyla **Δ 0.0 px** → alta hizalı
     · sayı 29px/700/lh 31.9 · etiket 12.5px/500/lh 19.4 · sayı→etiket 6 px
     · AYRAÇ ÇİZGİSİ YOK
     · ≤1024 → kolon sol kolonun ALTINA düşüyor ve yatay sıraya dönüyor

   ALINMAYAN: renk. Referansın etiket rengi rgb(174,188,198) / rgb(201,195,184);
   DadaFit kendi paletinde kalıyor (K29 — ölçü alınır, palet alınmaz).

   R15'in `.lib-stats{order:1}` numarası SİLİNDİ: işaretlemede CTA'nın
   istatistikten önce gelmesini telafi ediyordu, istatistik kolondan
   çıktığı için karşılığı kalmadı. Sol kolonun sırası artık doğrudan
   referansın sırası: kırıntı → eyebrow → H1 → alt metin → CTA.
   ===================================================================== */
:root{ --banner-stat-gutter:44px; --banner-stat-gap:16px }

/* İKİ KOLONLU SATIR — kabuk JS'i kuruyor (bkz. fit-shell.js):
     .wrap > kırıntı              (tam genişlik, satırın ÜSTÜNDE)
     .wrap > .lib-row > .lib-main | .lib-stats
   Referansın yapısıyla aynı (`.rd-crumb` + `.lh-main` | `.lst-stats`). */
body[data-fit-hero-kind] .wrap > .lib-row{
  display:flex;flex-direction:column;align-items:stretch;
  row-gap:var(--banner-gap);min-width:0
}
body[data-fit-hero-kind] .wrap > .lib-row > .lib-main{
  display:flex;flex-direction:column;align-items:stretch;
  row-gap:var(--banner-gap);min-width:0;flex:1 1 auto
}
body[data-fit-hero-kind] .lib-row > .lib-main > *{margin-top:0;margin-bottom:0}

/* ---- şeridin TABANI: ≤1024'te yatay sıra (referansta da öyle) ----
   Ölçüm: @1024 ve @900 ve @768'de üç referans sayfasının üçünde de
   `.lst-stats` flex/ROW · gap 34px, sol kolonun ALTINDA.
   ≤640'ta gap 10px'e, sayı 29 → 20px'e iniyor (dadagastro.com/tarifler). */
body[data-fit-hero-kind] .wrap > .lib-row > .lib-stats{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;
  column-gap:34px;row-gap:14px;margin-top:0;flex:none
}
body[data-fit-hero-kind] .lib-row > .lib-stats > .lib-stat{
  display:block;align-items:initial
}
body[data-fit-hero-kind] .lib-row > .lib-stats > .lib-stat b{
  display:block;font-size:29px;font-weight:700;line-height:1.1;
  letter-spacing:-.02em;color:#fff
}
body[data-fit-hero-kind] .lib-row > .lib-stats > .lib-stat span{
  display:block;margin-top:6px;font-size:12.5px;font-weight:500;
  line-height:1.55;color:rgba(255,255,255,.85)
}
/* içi boş kalem (işaretlemede yetim kalmış) satırda hayalet boşluk bırakmasın */
body[data-fit-hero-kind] .lib-row > .lib-stats > .lib-stat:empty{display:none}

/* ---------- ≤640: referansın küçük ölçeği ---------- */
@media (max-width:640px){
  body[data-fit-hero-kind] .lib-row > .lib-stats{column-gap:20px;row-gap:12px}
  body[data-fit-hero-kind] .lib-row > .lib-stats > .lib-stat b{font-size:20px}
}

/* =====================================================================
   R6 · MADDE 5 — BANNER CTA SATIRI  (`.lib-cta`)
   ---------------------------------------------------------------------
   Beyar: "İki buton yanlış hiyerarşide ve kötü duruyor."

   ÖLÇÜLDÜ — ÜÇ KUSUR:
   1) `.lib-cta`nın HİÇ CSS'i yoktu: `display:block`, butonlar inline.
      İki buton arasındaki boşluk **4 px**'ti ve bu bir tasarım değeri
      değil, işaretlemedeki satır sonu boşluğuydu. Referansta kapsayıcı
      flex ve aralık **9 px** (dadadiet.com/beslenme ve /diyetisyenler,
      `.chips{gap:9px}` — ikisinde de aynı).
   2) @390'da iki buton yan yana kalıyordu: 173.5 + 4 + 179.3 = 356.8,
      alan 358 → **1.2 px pay**. Referansta @390'da butonlar ALT ALTA
      (`.chips` yüksekliği 52.5 → 111.9). Şimdi `flex-wrap:wrap` ile
      kendiliğinden alt alta geçiyor.
   3) İKİNCİL BUTON BİRİNCİLDEN GÜÇLÜYDÜ. `programlar-merkezi`'nde ikincil
      buton kabuğun `.btn-ghost`'uydu: **dolu beyaz zemin + koyu metin**;
      fotoğraflı koyu banner'ın üstünde bu blok yeşil birincil butondan
      daha çok göze çarpıyordu. Üstelik ikincil buton daha GENİŞTİ
      (179.3 > 173.5). `antrenorler-v1`'de aynı yuvada başka bir dil vardı:
      camsı `rgba(255,255,255,.1)` + beyaz metin — orada hiyerarşi doğru
      okunuyordu. İki sayfa aynı yuvada iki ayrı dil konuşuyordu.

   KARAR: camsı dil kabuğa alındı, iki sayfa da onu kullanıyor.
   REFERANSTAN AYRILAN TEK NOKTA ve GEREKÇESİ: dadadiet'in ikincil butonu
   dolu beyaz (`rgb(255,255,255)` zemin + `rgb(33,30,22)` metin). Ama onun
   banner'ı DÜZ KOYU DOLGU; DadaFit'in banner'ı FOTOĞRAF. Fotoğrafın
   üstünde dolu beyaz blok birincil butondan daha parlak kalıyor. Ölçü
   (aralık, yükseklik, dolgu, yarıçap, punto) referanstan birebir alındı;
   yalnız ikincilin zemin dili değişti — K29'un "ölçü alınır, palet
   alınmaz" kuralının aynısı.
   GERİ ALMA: `.lib-cta-ghost` bloğu silinirse kabuğun düz `.btn-ghost`u
   (dolu beyaz) geri gelir.
   ===================================================================== */
.lib-cta{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.lib-cta-ghost{
  background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}
.lib-cta-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55);color:#fff}
.lib-cta-ghost:focus-visible{outline:3px solid var(--fit-bright) !important;outline-offset:2px}

/* ---------- ≥1025: İKİ KOLON — şerit sağda DİKEY ---------- */
@media (min-width:1025px){
  body[data-fit-hero-kind] .wrap > .lib-row{
    flex-direction:row;align-items:flex-end;
    column-gap:var(--banner-stat-gutter);row-gap:0
  }
  body[data-fit-hero-kind] .wrap > .lib-row > .lib-stats{
    flex-direction:column;flex-wrap:nowrap;
    gap:var(--banner-stat-gap);
    /* kolonun ALT kenarı sol kolonun alt kenarıyla hizalı (referansta Δ 0.0) */
    align-self:flex-end
  }
}

/* Sabit kutuda içerik ÜSTTEN hizalanır.
   `.pd-hero` kendi CSS'inde `display:flex; align-items:flex-end` taşıyordu:
   yükseklik serbestken bu "içeriği bandın altına yasla" demekti, ama sabit
   560 px kutuda içerik yukarı taşıp ŞEFFAF HEADER'IN ALTINA kayıyordu
   (ölçüldü: kırıntı top=96 < header alt kenarı 113; kalite kapısı yakaladı).
   Üstten hizalama, üst dolgunun (header payı) her zaman korunmasını sağlar. */
body[data-fit-hero-kind] .pd-hero,
body[data-fit-hero-kind] .chl-hero,
body[data-fit-hero-kind] .kp-top,
body[data-fit-hero-kind] .ol-top,
body[data-fit-hero-kind] .cp-top{align-items:flex-start !important}

body[data-fit-hero="1"] .df-top{min-height:var(--hero-full)}

/* Sayfa bazında kalan iki "rastgele" taban yükseklik de ölçeğe bağlandı:
   program-detay `.pd-hero{min-height:400px}` (≤1024'te 480px) ve
   antrenör detayda banner içi sabit boşluklar. Taban artık içerik belirler. */
body[data-brand="fit"] .pd-hero,
body[data-brand="fit"] .chl-hero,
body[data-brand="fit"] .cp-top,
body[data-brand="fit"] .fs-top,
body[data-brand="fit"] .ol-top{min-height:var(--hero-min) !important}

/* ---- banner içi dikey ritim de tek ölçekten ---- */
body[data-brand="fit"] .lib-top .lib-crumb{margin-bottom:var(--hero-gap)}
body[data-brand="fit"] .lib-top h1{margin:var(--hero-gap) 0 calc(var(--hero-gap) - 2px)}
/* R6 m4: `.lib-stats` artık sol kolonun kardeşi değil, sağ kolon —
   dikey ritmi `.lib-row` veriyor, kendi margin-top'u kalktı. */
.fs-top .lib-crumb{margin-bottom:12px !important}

/* ---------- ≤1024 ---------- */
@media (max-width:1024px){
  .df-top{padding-top:62px !important}
  .df-top .df-hero{gap:24px !important}

  .df-hmain h1,.kp-hmain h1{margin:10px 0 10px !important}
  .df-hcta{margin-top:14px !important}
  .df-htrust{margin-top:13px !important;gap:12px !important}

  .chl-hero .chl-grid{gap:22px !important}
  .chl-meta{gap:14px !important;margin:13px 0 !important}
  .pd-hero{min-height:0 !important}
  .pd-hero .pd-meta{gap:8px 16px !important;margin-top:11px !important}

  .cp-top .cp-head{gap:12px !important}
  .cp-portre{width:88px !important;height:88px !important}
  .cp-top .cp-cta{gap:8px !important}

  .ol-top .ol-bene{margin-top:12px !important}
  .ol-top .rd-crumb{margin-bottom:8px !important}
}

/* ---------- ≤640 ---------- */
@media (max-width:640px){
  .lib-top,.kp-top,.chl-hero,.cp-top,.pd-hero,.fs-top,.ol-top{margin-top:62px !important}
  /* ---- A2'nin over-mode'u ≤640'ta SESSİZCE İPTAL OLUYORDU ----
     Yukarıdaki satır A2'den ÖNCE yazılmıştı ve `!important` taşıyor; A2'nin
     `body[data-fit-over="1"] .lib-top{margin-top:0}` kuralını (0,2,0, ama
     !important'sız) yeniyordu. Sonuç: ≤640'ta banner header'ın ARKASINDAN
     değil ALTINDAN başlıyor, ama header hâlâ `at-top` (şeffaf) durumda
     kalıyor ve marka yazısı beyaz boyanıyor → BEYAZ ZEMİNDE BEYAZ LOGO.

     ÖLÇÜM (24 banner sayfasından 4'ü, 7 genişlik):
       ≥768px → bannerTop=0, yazı[61,89] banner koyu zemini yazının arkasında ✓
       ≤640px → bannerTop=62, yazı[16,44], marka rgb(255,255,255), arkasında
                banner YOK — okunmuyor. Hiç göç etmemiş antrenorler-v1 ve
                egzersiz-kutuphane-v1'de de aynı, yani sayfa değil kabuk kusuru.
       Hero sayfası (dadafit-hub-v1) her genişlikte DOĞRU — hero y=0'dan
       başlayıp yazının arkasını kaplıyor, beyaz doğru renk.

     Düzeltme yönü: A2'nin özgün niyetine dönmek. Hemen aşağıdaki satır
     zaten `padding-top:86px` (yani 62 + 24) diyor — banner'ın 62px'lik
     header'ın ARKASINDAN başlaması ve kendi 24px payını koruması
     tasarlanmıştı. Aynı desen `.df-top` için 3 satır aşağıda uygulanmış
     durumda (hero → margin 0 + padding 70). Burada da onu tamamlıyoruz;
     over-mode'da OLMAYAN sayfalar 62px margin'ini korur. */
  body[data-fit-over="1"] .lib-top{margin-top:0 !important}
  /* aynı gerekçe: yukarıdaki `.cp-top{margin-top:62px !important}` satırını yener */
  body[data-fit-over="1"] .ol-top{margin-top:0 !important;padding-top:calc(var(--fit-header-h) + var(--hero-pt)) !important}  /* 🔴 77px SABİTİ KALKTI · 2026-09-04 — ölçüldü: aile @390'da 96'da (63 header + 33 nefes), `.ol-top` tek başına 77'de kalıyordu ve kırıntı ofseti 19px yukarıda duruyordu. Değer uydurulmadı: kabuğun kendi over-mode formülü yazıldı (satır ~2053'teki `.lib-top`/`.cp-top` ile aynı). */
  /* hub hero'lu: header şeffaf, bant header'ın ARKASINDAN başlar → padding ile ofset */
  body[data-fit-hero="1"] .df-top{margin-top:0 !important;padding-top:70px !important;padding-bottom:16px !important}
  /* diğer .df-top sayfaları (Enerji Defteri): kabuk yüksekliği margin ile karşılanır */
  body:not([data-fit-hero]) .df-top{margin-top:62px !important;padding-top:14px !important;padding-bottom:16px !important}
  .df-top .df-crumb{margin-top:2px !important;font-size:11.5px !important}
  .df-top .df-hero{padding:6px 0 8px !important;gap:16px !important}
  .df-hmain h1{margin:8px 0 8px !important}
  .df-hcta,.chl-cta{gap:9px !important;margin-top:13px !important}
  .df-hcta .btn,.chl-cta .btn{width:100%;justify-content:center}
  .df-htrust{margin-top:12px !important;gap:8px 14px !important}
  .chl-hero{padding:10px 0 12px !important}
  .chl-hero h1{margin:6px 0 7px !important}
  .chl-meta{margin:9px 0 !important}
  .chl-cta{margin-top:10px !important}
  .cp-top{padding:10px 0 12px !important}
  /* R6 m7 — portre artık yuvarlak; mobilde 72 px (referans profilde 104) */
  .cp-top .cp-portre{width:72px !important;height:72px !important}
  .cp-top .cp-head{gap:10px !important}
  .cp-top .cta-row{gap:7px !important}
  .cp-top .cp-cta{margin-top:12px !important;padding:14px !important}
  .cp-top .cp-htags{margin-top:9px !important;gap:6px !important}
  .pd-hero{padding:8px 0 10px !important}
  .pd-hero .pd-crumb{margin-bottom:6px !important;font-size:11.5px !important}
  /* R6 · S-G — cam panel kalktı, artık kendi yatay dolgusu yok; içerik
     `.wrap`ın 16 px'lik kenarından başlıyor (h1 sol kenarı = kırıntı sol
     kenarı). Dikey pay korunuyor. */
  .pd-hero .pd-panel{padding:16px 0 !important}
  .pd-hero .pd-meta{gap:6px 12px !important;margin-top:9px !important}
  .pd-hero .pd-hcta{margin-top:11px !important}
  .ol-top{padding-top:14px !important;padding-bottom:14px !important}
  .ol-top .ol-hero-acts{margin-top:13px !important}
  .ol-top .ol-hero-acts .btn{width:100%;justify-content:center}
  .ol-top .ol-bene{margin-top:12px !important}
  .fs-top{padding:20px 0 24px !important}
}

/* ---- Banddan çıkan panel: cam yüzey açık zeminde okunur kalsın ----
 ≤640'ta panel banddan çıkar; üstündeki CTA'yı ÖRTMEMESİ için negatif
 margin yok (önceki sürümde -40px panel "Köprüyü Gör" düğmesini kapatıyordu). */
.fit-band-panel>*{background-color:#1e1b14 !important;border-color:rgba(255,255,255,.14) !important;box-shadow:0 22px 54px rgba(16,14,9,.30) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}


/* =====================================================================
 ANA SAYFA HERO'SU TAM EKRAN — KURAL İSTİSNASI (2026-08-11)

 "Banner yüksekliği ekran yüksekliğinin yarısını geçmez" kuralı YALNIZ
 ana sayfa hero'su için geçersizdir. Gerekçe: ana sayfanın işi ürünü tek
 bakışta anlatmak; hero açılışta ekranın tamamını kaplar, kullanıcı önce
 yalnız hero'yu görür. Kapsam `body[data-fit-hero="1"]` ile SADECE
 dadafit-hub-v1'e bağlıdır — diğer 33 sayfada kural aynen yürürlüktedir.
 ⚠ Sonraki oturum: bu blok bilerek konuldu, banner ölçümünde ana sayfayı
 ihlal sanıp geri alma.

 · Yükseklik: 100dvh (adres çubuğu açılıp kapanınca zıplamaz), 100vh yedek.
 · İçerik dikey ortalı; üst dolgu sabit header yüksekliğini karşılar,
 içerik header'ın altına girmez.
 · Enerji Defteri kartı HER genişlikte bandın içinde (JS: relocateBandPanel).
 · Dar ekranda tipografi kademeli daralır; hiçbir kalem gizlenmez.
 ===================================================================== */
body[data-fit-hero="1"] .df-top{
  /* D2 — PERDE KISALDI: eskiden 100dvh idi (1440x900'de 900px ölçüldü,
     içerik yalnız 585px; 315px boş perde). Beyar "yukarı scroll çok fazla"
     dedi, tam-ekran perde kararı bilinçli olarak gevşetildi (KARARLAR K15).
     Tam-bleed video kimliği korunuyor, yalnız yükseklik tek ölçek token'ından
     geliyor — sayfada sabit sayı kalmadı. */
  min-height:var(--hero-full-fallback);  /* yedek: dvh bilmeyen tarayıcı */
  min-height:var(--hero-full);           /* dinamik görüntü alanı */
  justify-content:center !important;
  padding-top:var(--fit-header-h) !important;   /* sabit header karşılanır */
  padding-bottom:var(--hero-pb) !important;
  margin-top:0 !important;
}
/* video kırpılarak kaplar, oran korunur (object-fit zaten cover; burada kilitli) */
body[data-fit-hero="1"] .df-hero-media{position:absolute;inset:0}
body[data-fit-hero="1"] .df-hero-media video{
  width:100%;height:100%;object-fit:cover;object-position:center 28%;
  background-attachment:scroll;          /* mobilde sabit arkaplan YOK */
}
body[data-fit-hero="1"] .df-top .df-hero{padding:0 !important;align-items:center}

@media (max-width:1024px){
  body[data-fit-hero="1"] .df-top{padding-top:var(--fit-header-h) !important;padding-bottom:var(--hero-pb) !important}
  body[data-fit-hero="1"] .df-top .df-hero{gap:20px !important}
  body[data-fit-hero="1"] .df-hmain h1{font-size:31px !important;margin:8px 0 8px !important}
  body[data-fit-hero="1"] .df-hmain .lead{font-size:14.5px !important;line-height:1.5 !important}
  body[data-fit-hero="1"] .df-hcta{margin-top:14px !important}
  body[data-fit-hero="1"] .df-htrust{margin-top:12px !important;gap:10px 16px !important}
}
@media (max-width:768px){
  body[data-fit-hero="1"] .df-top .df-hero{gap:16px !important}
  body[data-fit-hero="1"] .df-hmain h1{font-size:28px !important}
  body[data-fit-hero="1"] .df-hmain .lead{font-size:14px !important}
}
@media (max-width:640px){
  body[data-fit-hero="1"] .df-top{
    padding-top:70px !important;         /* mobil kabuk 62px + nefes */
    /* ALT KABUK PAYI: mobil alt bar (fixed, 64px + safe-area). Hero tam ekran
 olduğu ve SAYFA KAYDIRILMADIĞI için bu şeridin arkasında kalan içerik kalıcı
 olarak görünmez olur — bu yüzden hero içeriği şeridin ÜSTÜNDE bitirilir.
 (Diğer sayfalarda içerik kaydığı için böyle bir pay gerekmiyor.)
 Eskiden 146px'ti: alt barın yanında DadaMentor mini paneli de (bottom:88px,
 56px yüksek → ~144px'e kadar) ekranın altını kaplıyordu. Panel kaldırılınca
 (belge §1/§21) o payın büyük kısmı boşluğa dönüştü; pay yalnız alt barın
 gerçek yüksekliği + nefes olacak şekilde 88px'e indi. */
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;
  }
  body[data-fit-hero="1"] .df-top .df-crumb{margin-top:0 !important;margin-bottom:0 !important}
  body[data-fit-hero="1"] .df-top .df-hero{gap:10px !important}
  /* eyebrow tek satırda kalsın (iki satıra sarınca 18px yiyordu) */
  body[data-fit-hero="1"] .df-hmain .eyebrow{font-size:10.5px !important;letter-spacing:.1em !important}
  body[data-fit-hero="1"] .df-hmain h1{font-size:23px !important;margin:5px 0 5px !important}
  body[data-fit-hero="1"] .df-hmain .lead{font-size:12.8px !important;line-height:1.35 !important}
  body[data-fit-hero="1"] .df-hcta{margin-top:9px !important;gap:6px !important}
  /* üç düğme AYNI yükseklikte ve dokunulabilir olsun: <button> ile <a>'nın
 satır yüksekliği farklı hesaplanıyordu (34px ↔ 41px), min-height ile eşitlendi */
  body[data-fit-hero="1"] .df-hcta .btn{
    padding:0 16px !important;font-size:13.5px !important;
    min-height:42px;line-height:1.2 !important;
  }
  /* güven satırı dar ekranda DİKEY dizilir — gizlenmez */
  body[data-fit-hero="1"] .df-htrust{
    margin-top:8px !important;flex-direction:column;align-items:flex-start;gap:4px !important;
  }
  body[data-fit-hero="1"] .df-htrust span{font-size:12px !important}
  /* Enerji Defteri kartı bandın içinde kalır; alt kabuk payı açılabilsin diye
 yalnız ÖLÇEK küçülür — hiçbir satır, sayı ya da not çıkarılmaz. */
  body[data-fit-hero="1"] .df-ledger{padding:8px 11px !important}
  body[data-fit-hero="1"] .df-ledger .dl-head{margin-bottom:3px !important}
  body[data-fit-hero="1"] .df-ledger .dl-head h3{font-size:13px !important}
  body[data-fit-hero="1"] .df-ledger .dl-row{margin-bottom:3px !important}
  body[data-fit-hero="1"] .df-ledger .dl-rowtop{margin-bottom:2px !important}
  body[data-fit-hero="1"] .df-ledger .dl-tag{font-size:10px !important}
  body[data-fit-hero="1"] .df-ledger .dl-val{font-size:16px !important}
  body[data-fit-hero="1"] .df-ledger .dl-val small{font-size:9.5px !important}
  body[data-fit-hero="1"] .df-ledger .dl-bar{height:4px !important}
  body[data-fit-hero="1"] .df-ledger .dl-net{padding:7px 9px !important;gap:8px !important;margin-top:4px !important}
  body[data-fit-hero="1"] .df-ledger .dl-net b{font-size:12px !important}
  body[data-fit-hero="1"] .df-ledger .dl-net div{line-height:1.28 !important;font-size:11px !important}
  body[data-fit-hero="1"] .df-ledger .dl-net i{font-size:12px !important}
}
/* çok kısa ekran (yatay telefon, küçük dizüstü): taşmadansa daha da daralt */
@media (max-height:680px) and (min-width:641px){
  body[data-fit-hero="1"] .df-hmain h1{font-size:30px !important;margin:6px 0 6px !important}
  body[data-fit-hero="1"] .df-hmain .lead{font-size:14px !important}
  body[data-fit-hero="1"] .df-top .df-hero{gap:22px !important}
}
/* hareket azaltma tercihinde hero videosu durur (kabuk zaten display:none veriyor) */
html.reduce-motion body[data-fit-hero="1"] .df-hero-media video{display:none !important}

/* ---- kullanıcı tercihi: hareketi azalt (sistem tercihinden BAĞIMSIZ anahtar) ---- */
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{
  animation-duration:.01ms !important;animation-iteration-count:1 !important;
  transition-duration:.01ms !important;scroll-behavior:auto !important;
}
html.reduce-motion .df-hero-media video{display:none !important}
html.reduce-motion .reveal{opacity:1 !important;transform:none !important}

/* ---- §14.3 · odak göstergesi HER ZAMAN görünür ----
 Kabuktaki bazı kurallar (.bs-item, .tb-world, .chip …) hover ile birlikte
 outline:none veriyordu; klavye kullanıcısı odağı kaybediyordu. */
.bs-item:focus-visible,.tb-world:focus-visible,.chip:focus-visible,.df-fchip:focus-visible,
.bn-item:focus-visible,.acct-btn:focus-visible,.icon-btn:focus-visible,.d-link:focus-visible,
.nav a:focus-visible,.foot-col a:focus-visible,.dt:focus-visible,.pb-opt:focus-visible,
.fp-sw:focus-visible,.btn:focus-visible,.see-all:focus-visible{
  outline:3px solid var(--fit) !important;outline-offset:2px !important;
}
.topbar .bs-item:focus-visible,.topbar .tb-world:focus-visible,.topbar a:focus-visible,
.footer a:focus-visible,.lib-top a:focus-visible,.fp-top a:focus-visible{
  outline:3px solid #fff !important;outline-offset:2px !important;
}

/* =====================================================================
 ORTAK FİLTRE BİLEŞENİ — .ff (TEK KAYNAK)
 ---------------------------------------------------------------------
 NEDEN: Altı sayfa (program-liste · programlar-merkezi · egzersiz-kutuphane ·
 antrenorler · challenge-merkezi · hareket-merkezi) filtreyi "her facet bir
 satır" olarak diziyordu: HEDEF / SÜRE / SEVİYE / EKİPMAN alt alta dört-beş
 sıra, ekranın üçte birini yiyen bir blok. ≤640px'te satırlar overflow-x:auto
 ile yatay kaydırma rayına dönüşüyordu — gizli seçenek, kaybolan bağlam.

 NE: Kompakt tek satır bar. Her facet bir açılır panel (çoklu seçim), yanında
 seçim sayacı. Seçilenler bar altında tek tek kaldırılabilir çip olur. Sonuç
 sayısı ve sıralama aynı satırda kalır. Bar sticky. ≤900px'te tüm paneller
 alttan açılan "Filtrele" çekmecesine iner.

 NASIL: Bileşen mevcut .df-fchip DÜĞÜMLERİNİ TAŞIR (klonlamaz). Böylece her
 sayfanın kendi filtre motoru — kendi click dinleyicileri, kendi apply()'ı,
 kendi derin bağlantı okuması — hiç değişmeden çalışmaya devam eder.
 Sayfa tarafındaki tek iş: panele data-ff eklemek.
 ===================================================================== */

.ff{position:relative;margin-bottom:22px}

/* ---- sticky bar ---- */
/* NOT — backdrop-filter BİLEREK KULLANILMIYOR:
 Chromium'da backdrop-filter taşıyan öğe kendi "backdrop root"unu kurar ve
 alt öğelerini o katmana hapseder; kutusundan taşan popover, z-index'i ne
 olursa olsun sayfadaki konumlanmış kartların ALTINDA kalıyordu (ölçüldü:
 elementsFromPoint → .pr-media, .pr-card, sonra .ff-pop). Sticky bar zaten
 opak; cam efekti burada işlevsel bir şey kazandırmıyordu. */
/* =====================================================================
 FİLTRE ŞERİDİ — KART GERİ, RADIUS KESKİN
 ---------------------------------------------------------------------
 İki tur geri bildirim:
 1) "kart çok kötü, siteden kopuk ve eski usul" → kutu kaldırılmıştı.
 2) "önceki kart görünümünü geri istiyorum bu filtrele satırında, fakat
    radius'unu daha modern keskin yap" → kart geri geldi, YUVARLAKLIK DÜŞTÜ.
 Sonuç: kart var ama hap yok. Kabuk 12px, düğmeler 10px köşe — 999px'lik
 hap dilinden çıkıldı, kartların (16px) ve panelin (16px) diliyle hizalandı.
 Kutu ayrıca "eski usul" görünmesin diye ince kenarlık + tek katmanlı yumuşak
 gölge; kalın çerçeve ve büyük yarıçap yok.
 ===================================================================== */
.ff-bar{
  position:sticky;top:112px;z-index:42;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:10px 12px;margin:0 0 22px;
  box-shadow:0 1px 2px rgba(20,18,12,.04), 0 10px 24px -18px rgba(20,18,12,.28);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ff.has-sel .ff-bar{border-color:var(--fit-line);box-shadow:0 1px 2px color-mix(in srgb, var(--marka-murekkep) 6%, transparent), 0 12px 26px -18px color-mix(in srgb, var(--marka-murekkep) 34%, transparent)}

.ff-bar-lbl{
  flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin-right:2px;
  border-radius:var(--radius-ctl);background:var(--fit-tint);color:var(--fit-deep);font-size:13px;
}

/* ---- eksen düğmesi: keskin köşeli kart dili ---- */
.ff-facet{position:relative}
.ff-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--slate);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-ctl);
  padding:0 14px;height:40px;min-height:44px;cursor:pointer;white-space:nowrap;
  transition:.16s var(--ease);
}
/* R16/2 · DOKUNMA HEDEFİ 40 → 44px (WCAG 2.5.8).
   ÖLÇÜLDÜ: facet düğmesi 40px, kitin kendi 44px tabanının altındaydı — ve bu
   bileşen 60 public sayfanın süzgeç rayında duruyor, yani kusur tek ekranın
   değil kabuğun. R15'te `.fit-tab` için verilen kararın aynısı uygulandı:
   `min-height` eklendi, **dolgu değiştirilmedi** (dolgu büyüseydi düğmeler
   arası yatay ritim de kayardı, oysa eksik yalnız dikeydeydi). */
.ff-btn:hover{background:#fff;border-color:var(--slate-2)}
.ff-btn:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
.ff-btn .ff-car{font-size:9.5px;color:var(--muted);transition:transform .2s var(--ease)}
.ff-facet.open .ff-btn{background:#fff;border-color:var(--slate);box-shadow:var(--sh-sm)}
.ff-facet.open .ff-btn .ff-car{transform:rotate(180deg)}
/* SEÇİM VARSA: koyu dolu — kart rozetleriyle aynı dil, aynı 10px köşe */
.ff-btn.has-sel{background:var(--slate);border-color:var(--slate);color:#fff}
.ff-btn.has-sel:hover{background:#000;border-color:#000}
.ff-btn.has-sel .ff-car{color:rgba(255,255,255,.66)}
.ff-facet.open .ff-btn.has-sel{background:#000;border-color:#000}
.ff-btn .ff-n{
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-badge);
  background:var(--fit-bright,var(--marka-parlak));color:#0a202d;font-size:11px;font-weight:800;
  display:none;place-items:center;font-variant-numeric:tabular-nums;
}
.ff-btn.has-sel .ff-n{display:grid}

/* ---- sağ uç: sonuç sayısı + sıralama ---- */
.ff-spacer{flex:1 1 auto;min-width:0}
.ff-total{display:none !important}
.ff-reset{
  display:none;align-items:center;gap:6px;flex:none;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--muted);
  background:transparent;border:none;border-radius:var(--radius-sm);
  padding:0 10px;height:34px;cursor:pointer;transition:.18s var(--ease);
}
.ff-reset:hover{background:var(--bg);color:var(--slate)}
.ff-reset i{font-size:11px}
.ff.has-sel .ff-reset{display:inline-flex}

/* R4 (4. tur) — `margin:0` ŞART. Sayaç düğümü sayfaya ait bir <p> ve üç
   sayfada kendi dikey marjını taşıyordu (`.cm-count`/`.pm-count`/`.hm-count`
   → `margin:22px 0 18px`). Flex satırının yüksekliği öğenin MARJLI dış
   ölçüsünden hesaplandığı için çubuk 62 → 85.9 px'e şişiyordu; ölçüm:
   23.9 (sayaç) + 40 (marj) = 63.9 satır + 20 dolgu + 2 kenarlık = 85.9.
   Referans (`.lib-count`) marjsız olduğu için 62 px'te kalıyordu. */
.ff-bar .ff-count{
  flex:none;margin:0;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap
}
.ff-bar .ff-count b{color:var(--slate);font-weight:800;font-variant-numeric:tabular-nums;font-size:15px}
/* R8 madde 20+28 (Beyar kararı) — sayacın solundaki dikey ayraç KALDIRILDI.
   Kural kabuktaydı ve YEDİ sayfayı birden etkiliyordu; brief ayracı yalnız
   iki kalemde istiyordu (20 · egzersiz-kutuphane · 28 · fit-testleri).
   Beyar "7 sayfada da kalksın" dedi — yoksa site iki dil konuşuyordu.
   Aşağıdaki @640 bloğundaki `display:none` karşılığı da bu yüzden kalktı. */
.ff-bar .ff-sort{flex:none;display:inline-flex;align-items:center;gap:10px}
.ff-bar .ff-sort .lbl{display:none}

.ff-pop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:252px;max-width:min(420px,90vw);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--sh-lg);
  padding:9px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s;
  max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;
}
.ff-facet.open .ff-pop{opacity:1;visibility:visible;transform:translateY(0)}
/* sağa taşacaksa panel sağa hizalanır (JS ölçer, sınıf verir) */
.ff-facet.flip .ff-pop{left:auto;right:0}
/* alt kenardan taşacaksa panel YUKARI açılır (JS ölçer; max-height'ı da JS kırpar) */
.ff-facet.up .ff-pop{top:auto;bottom:calc(100% + 9px);transform:translateY(-6px)}
.ff-facet.up.open .ff-pop{transform:translateY(0)}

/* ---- ARAMA ALANI (C3) — seçenek sayısı sekizi geçen eksende ---- */
.ff-search{
  position:sticky;top:-9px;z-index:2;margin:-9px -9px 8px;padding:9px;
  background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px
}
.ff-search>i{flex:0 0 auto;font-size:12.5px;color:var(--muted)}
.ff-search input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);font-family:inherit;font-size:13.5px;font-weight:500;color:var(--slate);
  padding:9px 11px;outline:none;transition:.18s var(--ease);-webkit-appearance:none
}
.ff-search input::placeholder{color:#a7a7a7;font-weight:500}
.ff-search input:focus{border-color:var(--fit);background:#fff;box-shadow:0 0 0 3px var(--fit-wash)}
.ff-search input::-webkit-search-cancel-button{display:none}
.ff-search-x{
  flex:0 0 auto;width:26px;height:26px;border:none;background:transparent;border-radius:var(--radius-sm);
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px
}
.ff-search-x:hover{background:var(--bg);color:var(--slate)}
.ff-empty{margin:10px 4px 6px;font-size:13px;font-weight:500;color:var(--muted)}
.ff-pop .df-fchip[hidden]{display:none !important}
.ff-pop-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 8px 9px;margin-bottom:5px;border-bottom:1px solid var(--line);
}
.ff-pop-h b{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ff-pop-clear{
  font-family:inherit;font-size:12px;font-weight:700;color:var(--fit);
  background:none;border:none;cursor:pointer;padding:2px 4px;
}
.ff-pop-clear:hover{text-decoration:underline}
/* Taşınan .fgroup kutusu popover gövdesi olur — sayfa scriptleri onu hâlâ
 bulabilsin diye silinmiyor, yalnız yatay çip rayından dikey listeye çevriliyor.
 (Sayfaların kendi .fgroup kuralları: flex + wrap + kimi sayfada overflow-x:auto
 ve üst çizgi — hepsi burada sıfırlanır.) */
.ff-pop>.fgroup{
  display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;
  gap:2px;padding:0;margin:0;border-top:none;overflow:visible;
}
.ff-pop>.fgroup::-webkit-scrollbar{display:none}
.ff-pop>.fgroup>.lbl{display:none}          /* başlık popover header'ında */

/* panel içindeki çipler dikey liste gibi davranır — dokunma hedefi büyür */
.ff-pop .df-fchip{
  display:flex;width:100%;justify-content:flex-start;text-align:left;
  border-color:transparent;background:none;padding:10px 11px;border-radius:var(--radius-md);
  font-size:14px;font-weight:500;
}
.ff-pop .df-fchip:hover{background:var(--fit-wash);border-color:transparent;color:var(--fit-deep)}
.ff-pop .df-fchip.on{background:var(--fit-wash);border-color:transparent;color:var(--fit-deep);font-weight:700}
/* seçili kalemin sağına onay işareti (renkten BAŞKA bir sinyal — §14.3) */
.ff-pop .df-fchip::after{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:12px;
  margin-left:auto;color:var(--fit);opacity:0;
}
.ff-pop .df-fchip.on::after{opacity:1}
.ff-pop .df-fchip i{color:currentColor}

/* NOT — bu blokta duran ESKİ .ff-spacer/.ff-reset/.ff-total kuralları
   kaldırıldı: yenileri yukarıda, .ff-bar bloğunun içinde. "N filtre" rozeti
   tamamen çıktı — her facet düğmesi zaten kendi sayısını taşıyor, ikinci bir
   toplam rozet aynı bilgiyi ikinci kez söylüyordu. */
.ff-total{display:none !important}

/* mobil "Filtrele" düğmesi ve çekmecesi — masaüstünde YOK.
 (Çekmece markup'ı panelin içine basıldığı için gizlenmezse ≥901px'te
 normal blok olarak sayfa akışına düşer.) */
.ff-open{display:none}
.ff-sheet,.ff-sheet-ov{display:none}

/* ---- aktif filtre çipleri ---- */
.ff-chips{display:none;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.ff.has-sel .ff-chips{display:flex}
.ff-chips .ff-chips-lbl{font-size:12px;font-weight:600;color:var(--muted);margin-right:2px}
.ff-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--slate);
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-chip);padding:6px 8px 6px 13px;cursor:pointer;
  transition:.18s var(--ease);box-shadow:0 1px 2px rgba(20,18,12,.04);
}
.ff-chip:hover{background:#fff;border-color:var(--fit)}
.ff-chip:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
.ff-chip .ff-chip-g{color:var(--muted);font-weight:600}
.ff-chip .ff-x{
  width:18px;height:18px;border-radius:var(--radius-circle);
  background:color-mix(in srgb, var(--marka) 14%, transparent);color:var(--fit-deep);
  display:grid;place-items:center;font-size:9px;flex:none;
}
.ff-chip:hover .ff-x{background:var(--fit);color:#fff}

/* Sonuç satırı (.ff-res) ARTIK KULLANILMIYOR: sayaç ve sıralama çubuğun
   sağ ucuna taşındı. Boş kalırsa yer kaplamasın. */
.ff-res:empty{display:none}

/* =========================== RESPONSIVE =========================== */
@media (max-width:1024px){
  .ff-bar{top:112px}
}

/* ≤900px: facet panelleri alttan açılan çekmeceye iner */
@media (max-width:900px){
  .ff-bar{gap:8px;padding:9px 10px}
  .ff-bar-lbl{display:none}
  .ff-facet{display:none}                 /* barda tek tek durmaz */
  .ff-open{
    display:inline-flex;align-items:center;gap:9px;
    font-family:inherit;font-size:13.5px;font-weight:700;color:var(--slate);
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
    /* R16/2 · 42 → 44px (WCAG 2.5.8). Aynı turda `.df-fchip` 38→44 ve
       `.ff-btn` 40→44 yapıldı; bu, mobil kipteki kardeşi. Dolgu
       değiştirilmedi, yalnız taban verildi. */
    padding:0 15px;height:42px;min-height:44px;cursor:pointer;white-space:nowrap;transition:.18s var(--ease);
  }
  .ff-open i{color:var(--fit)}
  .ff-open:hover{border-color:var(--fit);color:var(--fit-deep)}
  .ff.has-sel .ff-open{border-color:var(--fit);color:var(--fit-deep);background:var(--fit-wash)}
  .ff-open .ff-n{
    min-width:19px;height:19px;padding:0 5px;border-radius:var(--radius-pill);
    background:var(--fit);color:#fff;font-size:11px;font-weight:800;
    display:none;place-items:center;font-variant-numeric:tabular-nums;
  }
  .ff.has-sel .ff-open .ff-n{display:grid}
  .ff-total{display:none !important}      /* sayaç düğmenin üstünde zaten var */

  /* çekmece */
  .ff-sheet-ov{
    display:block;
    position:fixed;inset:0;background:rgba(20,18,12,.5);z-index:96;
    opacity:0;pointer-events:none;transition:opacity .28s var(--ease);
  }
  .ff-sheet-ov.open{opacity:1;pointer-events:auto}
  .ff-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:97;
    max-height:86vh;display:flex;flex-direction:column;
    background:#fff;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow:0 -14px 44px rgba(20,18,12,.24);
    transform:translateY(100%);transition:transform .3s var(--ease);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .ff-sheet.open{transform:translateY(0)}
  .ff-sheet-h{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 20px;border-bottom:1px solid var(--line);flex:none;
  }
  .ff-sheet-h h3{font-size:17px;display:flex;align-items:center;gap:9px}
  .ff-sheet-h h3 i{color:var(--fit);font-size:15px}
  .ff-sheet-close{
    /* R16/2 · 40 → 44px (WCAG 2.5.8) — çekmeceyi kapatan tek düğme. */
    width:44px;height:44px;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;
  }
  .ff-sheet-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px 14px}
  /* çekmecede facet'ler akordeon değil, açık liste — kaydırma tek eksende kalsın */
  .ff-sheet .ff-facet{display:block;margin-top:12px}
  .ff-sheet .ff-btn{display:none}
  .ff-sheet .ff-pop{
    position:static;opacity:1;visibility:visible;transform:none;
    max-width:none;max-height:none;overflow:visible;
    border:none;box-shadow:none;border-radius:0;padding:0;
  }
  .ff-sheet .ff-pop-h{padding:6px 4px 8px}
  .ff-sheet-foot{
    flex:none;display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--line);
    background:#fff;
  }
  .ff-sheet-foot .btn{flex:1}
}

/* ---- ≤900: çubuk iki satıra iner ----
 Satır 1: "Filtrele" düğmesi (sol) + sonuç sayacı (sağ)
 Satır 2: sıralama şeridi, tam genişlik
 Eskiden sıralama şeridi ikinci satırda sola yapışıp ortada boşluk
 bırakıyordu; ölçüm ekranında da öyle görünüyordu. */
@media (max-width:900px){
  .ff-bar{gap:10px;padding:10px 12px;row-gap:10px}
  .ff-bar-lbl{display:none}
  .ff-open{
    order:1;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
    font-family:inherit;font-size:13.5px;font-weight:700;color:var(--slate);
    background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-pill);
    /* R16/2 · 40 → 44px (WCAG 2.5.8) — dar kırılımdaki hâli. */
    padding:0 16px;height:40px;min-height:44px;cursor:pointer;
  }
  .ff.has-sel .ff-open{background:var(--fit-deep);border-color:var(--fit-deep);color:#fff}
  .ff-open .ff-n{
    min-width:19px;height:19px;padding:0 5px;border-radius:var(--radius-pill);
    background:rgba(255,255,255,.24);color:#fff;font-size:11px;font-weight:800;
    display:none;place-items:center
  }
  .ff.has-sel .ff-open .ff-n{display:grid}
  .ff-spacer{order:2;flex:1 1 auto}
  .ff-bar .ff-count{order:3;flex:0 0 auto}
  .ff-reset{order:4}
  .ff-bar .ff-sort{order:5;flex:1 0 100%;justify-content:space-between}
  .ff-bar .ff-sort .sort-seg{flex:1;justify-content:space-between}
  .ff-bar .ff-sort .sort-seg button{flex:1}
}
@media (max-width:640px){
  .ff-bar{top:62px;border-radius:var(--radius-lg)}
}

/* ---- ESKİ PANEL KABUKLARI BİLEŞENE DEVREDİLDİ ----
 Sayfaların kendi .lib-filters/.pm-panel/.cm-panel/.hm-panel kuralları
 sıfırlanır; görsel kabuk artık .ff-bar'ın.

 backdrop-filter'ı SIFIRLAMAK ZORUNLU: Chromium'da backdrop-filter taşıyan
 öğe bir "backdrop root" kurar ve alt öğelerini kendi border-box'ına KIRPAR.
 Sıfırlanmadığında facet popover'ı panelin alt kenarında kesiliyordu —
 z-index ne yapılırsa yapılsın (999'da bile) kart ızgarası üstte kalıyor,
 daha doğrusu popover'ın alt kısmı hiç boyanmıyordu. */
.lib-filters.ff, .pm-panel.ff, .cm-panel.ff, .hm-panel.ff{
  background:none;border:none;box-shadow:none;padding:0;position:static;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:0;overflow:visible;
}
/* bileşen kurulmadan (JS kapalı) sayfa hâlâ kullanılabilir kalsın:
 .ff-ready gelmeden eski satır düzeni görünür durur */
.ff:not(.ff-ready) .ff-bar,.ff:not(.ff-ready) .ff-chips,.ff:not(.ff-ready) .ff-res{display:none}

/* =====================================================================
 DİZİN SAYFASI KURGUSU — solda filtre kolonu · sağda kart ızgarası · altta sayfalama
 ---------------------------------------------------------------------
 Kaynak: kardeş ürünün diyetisyen dizini (dadadiet.com/diyetisyenler).
 Kurgu ölçülerek alındı (1440px, canlı DOM + stylesheet), DadaFit
 token'larına ve yeşil kimliğine çevrildi — yeni tasarım dili üretilmedi:
   .lst-layout   grid 272px + kalan · gap 30px · align-items:start
   .lst-side     sticky top:130px · paper · 1px line · radius-lg
   .fct          akordeon facet (head + body) · aktif seçimde sayaç noktası
   .lst-bar      sonuç sayısı ←→ sıralama
   .dz-grid      3 kolon · ≤1024 2 · ≤640 1
 ≤1024px'te sol kolon alttan çekmeceye döner (.sheet-*), tıpkı referansta.

 ÖNEMLİ — bu kit filtre MOTORU yazmaz. Sayfa motorları kendi
 .fgroup[data-group] kutularını ve .df-fchip düğmelerini sorgular
 (bkz. HANDOFF §3); bu yüzden facet gövdesine .fgroup'lar TAŞINIR,
 içleri boşaltılmaz ve çipler klonlanmaz.
 ===================================================================== */
.lst-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:30px;align-items:start}
.lst-main{min-width:0}

/* ---- SOL FİLTRE KOLONU ---- */
.lst-side{
  position:sticky;top:130px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:6px 20px 14px;
  max-height:calc(100vh - 154px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
.fil-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 0 12px;border-bottom:1px solid var(--line)}
.fil-top h3{font-size:17px;display:inline-flex;align-items:center;gap:9px}
.fil-top h3 i{color:var(--fit);font-size:15px}
.fil-clear{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--muted);cursor:pointer;transition:.18s var(--ease);padding:4px 2px}
.fil-clear:hover{color:var(--fit)}

/* ---- AKORDEON FACET ---- */
.fct{border-bottom:1px solid var(--line)}
.fct:last-child{border-bottom:none}
.fct-head{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;
  font-family:inherit;font-size:14.5px;font-weight:700;color:var(--slate);
  padding:15px 0;cursor:pointer;text-align:left}
/* aktif seçim sayacı — yalnız o facet'te seçim varsa görünür */
.fct-dot{display:none;flex:0 0 auto;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--radius-pill);background:var(--fit);color:#fff;
  font-size:10.5px;font-weight:700;align-items:center;justify-content:center}
.fct.has-active .fct-dot{display:inline-flex}
.fct-car{margin-left:auto;font-size:11px;color:var(--muted);transition:transform .25s var(--ease)}
.fct.open .fct-car{transform:rotate(180deg)}
.fct-body{display:none;padding:0 0 15px}
.fct.open .fct-body{display:block}

/* Facet gövdesindeki .fgroup: yatay çip rayı DEĞİL, dikey satır listesi.
 Grup kutusu ve çip düğümleri sayfa motoruna ait olduğu için yalnız
 yerleşimleri değişir; DOM kimliği korunur. */
.lst-side .fgroup{display:flex;flex-direction:column;gap:2px;overflow:visible;padding:0;margin:0;border:none;background:none}
.lst-side .fgroup>.lbl{display:none}          /* başlık .fct-head'e taşındı */
/* Çip → tam genişlik satır + kutucuk + etiket (referanstaki .fct-row anatomisi).
 Düğme olarak kalır (aria-pressed ile durum bildirir — belge §20). */
.lst-side .df-fchip{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 0;border:none;background:none;border-radius:var(--radius-sm);
  font-family:inherit;font-size:14px;font-weight:500;color:var(--slate-2);
  text-align:left;cursor:pointer;transition:color .15s var(--ease);white-space:normal;
}
.lst-side .df-fchip::before{
  content:"";flex:0 0 auto;width:18px;height:18px;border:1.5px solid var(--line);
  border-radius:var(--radius-badge);background:var(--paper);transition:.15s var(--ease);
  background-position:center;background-repeat:no-repeat;background-size:11px 11px;
}
.lst-side .df-fchip:hover{color:var(--fit-deep)}
.lst-side .df-fchip:hover::before{border-color:var(--fit)}
/* Seçili satır: kutucuk dolar, SATIR dolmaz. background/border burada açıkça
   sıfırlanmalı — sayfaların kendi `.df-fchip.on{background:var(--fit);color:#fff}`
   kuralı (yatay çip rayı dili) fit-shell.css'ten SONRA yüklenen <style>
   bloğunda duruyor; yalnız color yazmak satırı komple yeşil bırakıyordu. */
.lst-side .df-fchip.on{background:none;border-color:transparent;color:var(--slate);font-weight:700}
.lst-side .df-fchip.on::before{
  border-color:var(--fit);background-color:var(--fit);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}
.lst-side .df-fchip i{font-size:12px;color:var(--muted);flex:0 0 auto}
.lst-side .df-fchip.on i{color:var(--fit)}
.lst-side .df-fchip:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
/* grup içine sıkışmış eski "sıfırla" düğmesi panel başlığına devretti */
.lst-side .fgroup>.fclear{display:none}

/* ---- SONUÇ ÇUBUĞU ---- */
.lst-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- MOBİL FİLTRE TETİĞİ (≥1025px'te gizli) ---- */
.fil-trigger{display:none}

/* ---- ÇEKMECE PARÇALARI — yalnız ≤1024px'te görünür ---- */
.sheet-head,.sheet-foot{display:none}
.sheet-overlay{position:fixed;inset:0;background:rgba(20,18,12,.5);z-index:93;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.sheet-overlay.open{opacity:1;pointer-events:auto}

@media (max-width:1024px){
  /* tek kolona düşer, filtre paneli alttan çekmeceye döner (referans davranışı) */
  .lst-layout{display:block}
  .fil-trigger{
    display:inline-flex;align-items:center;gap:9px;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);
    height:44px;padding:0 16px;cursor:pointer;transition:.2s var(--ease);
  }
  .fil-trigger:hover{border-color:var(--fit);color:var(--fit-deep)}
  .fil-trigger .fct-dot{display:none}
  .fil-trigger.has-active .fct-dot{display:inline-flex}

  .lst-side{
    position:fixed;inset:auto 0 0;z-index:94;max-height:82vh;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;border:none;
    box-shadow:0 -18px 50px rgba(33,30,22,.2);padding:0 20px;
    transform:translateY(105%);transition:transform .34s var(--ease);
    display:flex;flex-direction:column;overflow:hidden;
  }
  .lst-side.open{transform:translateY(0)}
  .fil-top{display:none}                       /* başlık çekmece başlığına devreder */
  .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 0 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .sheet-head h3{font-size:18px;display:inline-flex;align-items:center;gap:10px}
  .sheet-head h3 i{color:var(--fit);font-size:15px}
  .sheet-head .sh-right{display:flex;align-items:center;gap:8px}
  .sheet-close{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)}
  .sheet-close:hover{border-color:var(--fit);color:var(--fit)}
  /* flex-basis AUTO olmalı — 0 DEĞİL. Çekmece yüksekliği içeriğe göre belirlenir
     (position:fixed + inset:auto 0 0, açık height yok). flex-basis:0 verilirse
     konteynerin içerik yüksekliği head+0+foot olur, flex-grow'a dağıtacak boş
     alan kalmaz ve gövde çöker: ölçüm 390px'te height=10px / scrollHeight=732px
     — facet'ler pratikte görünmez oluyordu (Playwright kendi kendine kaydırıp
     tıkladığı için testler yine geçiyordu, gözle bakınca yakalandı).
     basis:auto ile içerik yüksekliği alınır, max-height:82vh onu kırpar,
     shrink+min-height:0 sayesinde gövde kalan alana oturup kendi içinde kayar. */
  .sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:10px}
  .sheet-foot{display:block;flex:0 0 auto;background:var(--paper);border-top:1px solid var(--line);
    padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px))}
  .sheet-foot .btn{width:100%}
}

/* =====================================================================
 TEK SATIR ETİKET RAYI — [data-tagrow] (JS eşi: fit-shell.js)
 Kutu tek satır yüksekliğinde kilitlenir; sığmayan etiketi JS gizler,
 sona "+N" rozeti gelir. Rozet TIKLANAMAZ (kart bağlantısının içinde).
 ===================================================================== */
[data-tagrow]{flex-wrap:nowrap;overflow:hidden;min-width:0}
[data-tagrow]>*{flex:0 0 auto;white-space:nowrap}
.tagrow-more{
  flex:0 0 auto;pointer-events:none;user-select:none;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:var(--slate-2,#4a4f4a);
  background:#f1f2f1;border:1px solid var(--line,#e5e7e5);
  padding:5px 9px;border-radius:var(--radius-sm,8px)
}

/* =====================================================================
 BİLGİ ŞERİDİ — .fit-note (ORTAK · TEK KAYNAK)
 ---------------------------------------------------------------------
 Düz paragraf hâlinde yazılmış uyarı/bilgi metinlerinin kabuk dilindeki
 karşılığı: ikon çipi + kısa başlık + TEK SATIR açıklama.
 Kullanım:
 <div class="fit-note"><span class="fn-ic"><i …></i></span>
   <p><b>Başlık</b> Tek satır açıklama. <a href="…">Ayrıntı</a>.</p></div>
 Renkler: zemin --fit-tint (#eaf6ef), metin --slate-2 (#56514a) → 7.4:1.
 ===================================================================== */
.fit-note{
  display:flex;align-items:center;gap:12px;
  background:var(--fit-tint);border:1px solid var(--fit-line);
  border-radius:var(--radius-md);padding:12px 16px;margin:0 0 18px
}
.fit-note .fn-ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fit);color:#fff;font-size:13px
}
.fit-note p{
  margin:0;min-width:0;font-size:13px;font-weight:500;line-height:1.5;color:var(--slate-2)
}
.fit-note p b{color:var(--slate);font-weight:800}
.fit-note p a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){
  .fit-note{align-items:flex-start;padding:11px 13px;gap:10px}
  .fit-note p{font-size:12.5px}
}

/* =====================================================================
 SEKME BİLEŞENİ — .fit-tabs / .fit-tab / .fit-pane (ORTAK · TEK KAYNAK)
 ---------------------------------------------------------------------
 GÖRSEL KALIP: DadaGastro'nun segment hapı (ölçülerek alındı, bkz.
 KARARLAR.md K13). Kaynak kurallar birebir:
   .disc-tabs{display:flex;gap:4px;background:var(--paper);
              border:1px solid var(--line);border-radius:var(--radius-md);padding:4px}
   .dt{font-weight:700;font-size:13.5px;color:var(--muted);background:transparent;
       border:none;border-radius:var(--radius-sm);padding:10px 18px;gap:8px;
       transition:.2s var(--ease)}
   .dt.active{background:<aksan>;color:#fff}          ← aktif gösterge DOLU HAP
   .dt:hover{color:<aksan>}
   .disc-pane{animation:fadeUp .35s var(--ease)}  .disc-pane[hidden]{display:none}
   ≤mobil: .dt{padding:9px 14px;font-size:12.5px}
 Aksan DadaFit tarafında --fit-deep (#007a3d): beyaz metinle 5.45:1
 (--fit #009d4f ile 3.54:1 ölçüldü, AA altı kalıyordu).

 KAYNAKTA OLMAYIP EKLENEN: ARIA (role=tab/tablist/tabpanel, aria-selected,
 aria-controls) ve klavye (ok tuşları · Home/End · roving tabindex).
 DadaGastro'nun üç sekme kullanımının hiçbirinde role="tab" YOK (ölçüldü:
 dört sayfada 0 eşleşme). Erişilebilirlik eksiği kopyalanmadı — görsel
 kalıp birebir, davranış üstüne eklendi.

 İKİ KİP:
 · <button data-tab="x">  → sayfa içi panel değişimi (JS yönetir)
 · <a href="…">           → sayfa geçişi; JS dokunmaz, aktif sekme
                            aria-selected="true" ile markup'ta işaretlenir
 ===================================================================== */
.fit-tabs{
  display:inline-flex;gap:4px;max-width:100%;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:4px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.fit-tabs::-webkit-scrollbar{display:none}
.fit-tab{
  flex:0 0 auto;font-family:inherit;font-weight:700;font-size:13.5px;
  color:var(--muted);background:transparent;border:none;
  border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:.2s var(--ease);
  /* R15 · Beyar kararı: DOKUNMA HEDEFİ 44px. Ölçülen eski hâl 36px'ti
     (13.5px yazı + 10px alt/üst dolgu) ve WCAG 2.5.8'in 24px tabanını
     geçse de kitin kendi 44px hedefinin ALTINDA kalıyordu — beş modül
     sayfasında birden. Dolguyu büyütmek yerine `min-height` verildi:
     dolgu değişseydi kalemler arası yatay ritim de kayardı, oysa kusur
     yalnız dikeydi. `box-sizing` kabukta zaten `border-box`. */
  min-height:44px
}
.fit-tab i{font-size:12px;transition:color .2s var(--ease)}
.fit-tab .cnt{
  font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);
  padding:2px 8px;border-radius:var(--radius-pill);transition:.2s var(--ease)
}
.fit-tab:hover{color:var(--fit-deep)}
.fit-tab:hover i{color:var(--fit-deep)}
.fit-tab:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
.fit-tab[aria-selected="true"]{background:var(--fit-deep);color:#fff}
.fit-tab[aria-selected="true"] i{color:#fff}
.fit-tab[aria-selected="true"] .cnt{background:rgba(255,255,255,.22);color:#fff}
.fit-pane{animation:fadeUp .35s var(--ease)}
.fit-pane[hidden]{display:none}
@media (max-width:640px){
  /* R6 · dokunma hedefi — ölçülen yükseklik 37.4 px'ti (asgari 44).
     Dolgu yerine `min-height`: punto değişse de hedef 44'ün altına düşmez. */
  .fit-tab{padding:9px 14px;font-size:12.5px;min-height:44px}
  .fit-tabs{display:flex;width:100%}
}

/* =====================================================================
 VİDEO SEANS KARTI — .vs-card ailesi (ORTAK · TEK KAYNAK)
 video-seanslari-v1'den taşındı; E4 ile programlar-merkezi-v1 de kullanıyor.
 ===================================================================== */
/* ---- SEANS KARTI — kabuğun .hub-card kabuğu + sayfaya özgü ölçüler ----
 Kart başlığı h3 (§19 hiyerarşi: h1 banner'da, bölüm h2, kart h3).
 Kabuk .hub-body h4'ü biçimliyor; h3 karşılığı sayfa-yerel. */
.vs-card .hub-body h3{font-size:16.5px;margin-bottom:8px;letter-spacing:-.01em;transition:color .2s var(--ease)}
.vs-card:hover .hub-body h3{color:var(--fit-deep)}

/* Kapak: kabuğun .hub-media kutusu (168px sabit yükseklik + alt gradient)
 korunur, içine gerçek <img> oturur. Kutu sabit olduğu için görsel geç
 yüklense bile yerleşim oynamaz (§18 CLS). */
.vs-shot{overflow:hidden}
.vs-shot .vs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
/* oynat rozeti — kart bir video seansına gittiğini görsel olarak söyler */
.vs-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:var(--radius-circle);
  display:grid;place-items:center;color:#fff;font-size:16px;
  background:rgba(20,18,12,.42);border:1.5px solid rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:.25s var(--ease);
}
.vs-play i{margin-left:3px}
.vs-card:hover .vs-play{background:var(--fit);border-color:var(--fit);transform:translate(-50%,-50%) scale(1.06)}
/* ücretsiz rozeti — .hub-pro'nun (Pro, altın) yeşil karşılığı, aynı konumda */
.vs-free{
  position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--fit);border:1px solid var(--fit-deep);
  padding:5px 10px;border-radius:var(--radius-sm);
}
/* kart içi künye: antrenör + ekipman */
.vs-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vs-meta span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;color:var(--slate-2);
  background:var(--bg);border:1px solid var(--line);
  padding:5px 10px;border-radius:var(--radius-sm);
}
.vs-meta span i{font-size:11px;color:var(--fit-deep)}
.vs-card .hub-foot{margin-top:auto;padding-top:14px}


@media (max-width:640px){ .vs-play{width:44px;height:44px;font-size:14px} }


/* =====================================================================
   BANNER → GÖVDE DİKİŞİ  (Beyar · Revize 1)
   ---------------------------------------------------------------------
   İstek: "Bütün sayfalarda banner'ın altındaki beyaz kısmın sol ve sağ
   üst köşesi yuvarlak olsun." Referans kardeş marka:
   dadagastro.com/tarifler → reference/tarif-liste/tarif-liste.css `.lst-sec`

       border-radius:22px 22px 0 0; margin-top:-22px;
       position:relative; z-index:2;
       box-shadow:0 -12px 32px rgba(20,16,10,.18);

   Değerler ORADAN ölçülerek alındı, birebir (Beyar kararı: "birebir").
   Yarıçap tek yerden döner: --seam-r.

   Neden sınıf, neden `.lib-top + section` değil:
   66 sayfada banner'ın ardından gelen gövde 30'dan fazla farklı sınıf adı
   taşıyor (.lib-body · .fp-body · .sec.sec-fit · .sz-body · .hs-body ·
   .uf-body · .lg-sec · .con-sec · .ck-wrap · .pro-intro · .ladder-sec …)
   ve bir kısmında araya YAPIŞKAN sekme rayı (.pf-tabbar / .fs-tabbar) ya
   da ŞEFFAF sarmalayıcı (.wrap.fit-band-panel · .wrap.fp-gate) giriyor.
   Elle kardeş listesi tutmak kırılgan olurdu: yeni sayfa açan biri listeye
   eklemeyi unutur, dikiş sessizce kaybolur. Bunun yerine kabuk JS'i
   çalışma anında banner'dan sonraki İLK OPAK ve YAPIŞKAN-OLMAYAN bloğu
   bulup `.fit-seam` basıyor (bkz. fit-shell.js → "BANNER → GÖVDE DİKİŞİ").

   İki kip var:
   · .fit-seam        → yalnız yuvarlak köşe + yukarı gölge.
   · .fit-seam.is-onbanner → gövde banner'ın DİBİNE komşu; 22px binerek üstüne
                        çıkar. Koyu banner köşenin arkasında kaldığı için
                        yuvarlaklık burada tam okunur.
   Araya ray/şeffaf blok girdiği sayfalarda (Fit Planım ×9, Enerji Defteri
   ×4, sss, destek, destek-talepleri) `is-onbanner` VERİLMEZ: binme yapılsaydı
   köşe, z-index:40 taşıyan yapışkan rayın ALTINA girer ve hiç görünmezdi.
   Beyar kararı gereği o sayfalarda yuvarlaklık rayın altındaki panelde
   kalıyor; ray düz. Orada gövde zemini çoğu kez sayfa zemini ile aynı
   (#f9f9f9 üstünde #f9f9f9) — köşe yalnız dolguyla okunmaz, bu yüzden
   1px `--line` üst kenarı yayı çiziyor.
   ===================================================================== */
:root{ --seam-r:22px }

.fit-seam{
  border-radius:var(--seam-r) var(--seam-r) 0 0;
  position:relative;
  z-index:2;
  box-shadow:0 -12px 32px rgba(20,16,10,.18);
}

/* banner'a komşu gövde: 22px binerek koyu banner'ın üstüne çıkar */
.fit-seam.is-onbanner{ margin-top:calc(var(--seam-r) * -1) }

/* ray/şeffaf blok araya girdiğinde köşe koyu zemin görmüyor → yayı
   hairline çizsin (aksi hâlde #f9f9f9 üstünde #f9f9f9 = görünmez köşe) */
.fit-seam:not(.is-onbanner){
  border-top:1px solid var(--line);
  box-shadow:0 -10px 26px rgba(20,16,10,.07);
}

/* NOT — `overflow:hidden` ile kırpma YOK: gövdelerin içinde yapışkan
   bileşenler yaşıyor (ör. program-liste `.lib-filters{position:sticky}`),
   kırpma onları öldürürdü. Köşeler zeminin kendisinden kesiliyor. */

/* R12/S1 (Beyar · 2026-08-24) — dikiş gölgesi TÜMÜYLE kalksın.
   R1 · R3 · R4 kütük kayıtlarında Beyar üç ayrı sayfada "burda gölge olmasın"
   dedi; kaynak aynı `.fit-seam` kuralıydı. Karar: dikiş bundan sonra YALNIZ
   22px yuvarlak köşe + `.is-onbanner` binmesiyle okunacak, gölge bandı yok.
   Bu, R11/M1'de DadaGastro'dan birebir alınan gölgeden BİLİNÇLİ bir sapma
   (kütük gerekçesi: `KARARLAR.md`, kaynak sırası burada kazanır — üstteki
   iki box-shadow bildirimi geçersiz kılınıyor, satırlar silinmedi).
   `.fit-seam:not(.is-onbanner)` üzerindeki `border-top:1px solid var(--line)`
   BİLEREK korundu: o gölge değil, ray/şeffaf blok araya girip banner'a komşu
   olmayan gövdelerde köşenin (çoğu zaman #f9f9f9 üstünde #f9f9f9 zemin
   eşleşmesinde) hâlâ görünür kalmasını sağlayan hairline. */
.fit-seam,
.fit-seam:not(.is-onbanner){
  box-shadow:none;
}


/* =====================================================================
   PARALLAX BAND  (Beyar · Revize 11 · M2)
   ---------------------------------------------------------------------
   İstek: "Gastro ana sayfadaki Mutfak Sırları section'u gibi görselli
   olacak — arkası sabit, scroll edildikçe kaydırılabilir bir şekilde."

   Reçete kardeş markadan ÖLÇÜLEREK alındı:
   dadagastro.com/build/assets/parallax-S2t5vFDm.css

   Nasıl çalışıyor: görsel banda `background-attachment:fixed` ile
   basılmıyor (iOS'ta çalışmaz, ayrıca `background-size:cover` ile
   birlikte kırpması bozuk). Bunun yerine görsel, banda `clip-path` ile
   kırpılmış bir kutunun içinde `position:fixed` duruyor:
   · .px-clip  → banda yapışık, taşanı kesen kutu (z-index:-1)
   · .px-media → viewport'u dolduran SABİT görsel; sayfa kayarken yerinde
                 kalır, band üstünden geçer = parallax
   · .px-veil  → görselin üstündeki koyu perde (metin okunurluğu)
   `--px-shift` bandı görselin ortasına oturtur; scroll'da DEĞİŞMEZ,
   yalnız resize/load'da yeniden hesaplanır (bkz. fit-shell.js).

   DadaFit'te bu bileşen OPT-IN: yalnız `data-fit-px` taşıyan banda
   uygulanır. Kardeş markadaki sürüm sayfadaki TÜM tam-en bölümleri
   tarayıp otomatik dönüştürüyor; burada öyle yapılmadı, çünkü DadaFit'te
   her sayfada koyu görselli `.lib-top` banner'ı var ve otomatik tarama
   66 sayfanın banner'ını da parallax'a çevirirdi.
   ===================================================================== */
.px-band{isolation:isolate}
.px-clip{
  position:absolute;inset:0;z-index:-1;
  clip-path:inset(0 round var(--px-r,0px));
  pointer-events:none;
}
.px-media{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background-repeat:no-repeat;background-size:cover;
  background-position:var(--px-x,50%) calc(var(--px-y,50%) + var(--px-shift,0px));
}
.px-veil{
  position:absolute;inset:0;
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
/* hareket azaltma tercihi: sabitleme kalkar, görsel banda yapışır */
@media (prefers-reduced-motion:reduce){
  .px-media{
    position:absolute;inset:0;width:auto;height:auto;
    background-position:var(--px-x,50%) var(--px-y,50%);
  }
}


/* =====================================================================
   BİLGİ KUTULARINDA METİN KUTUYU DOLDURUR  (Beyar · Revize 11 · M5)
   ---------------------------------------------------------------------
   Beyar (üç ayrı yerde, aynı cümle): "bu yeşil infoları yayman lazım,
   kart içerisindeki genişliğe göre — yarım kalmış yatayda."

   ÖLÇÜM (anatomi-v1 `.hr-note`, @1440):
     kutu 1176px · metin 688px = **%58** · 99 karakter/satır
     sınırı koyan: `.hr-note p{max-width:var(--measure)}` → --measure:78ch

   ÇELİŞKİ — BİLEREK DEVRİLDİ:
   `--measure` token'ı önceki bir turda (E6/it2) BİLEREK eklenmişti;
   kabuktaki gerekçesi: "ölçümde .hr-note paragrafı 1098px genişlikte
   119 karakter/satır veriyordu; tipografide okunur aralık 45–75 karakter."
   Yani dar olması kaza değil, karardı.
   Dahası KARDEŞ MARKA DA AYNISINI YAPIYOR: dadagastro.com bilgi metnini
   1180px kutuda 700px'e sınırlıyor = **%59**, DadaFit'in %58'iyle aynı.

   Beyar bunu üç kez tekrarladı; karar onun. Uygulandı, ama kusuru
   körlemesine bırakmadık: ölçü uzayınca gözün satır başını bulması
   zorlaşır, bunun yerleşik karşılığı SATIR ARASINI AÇMAKTIR
   (uzun ölçü → daha çok interlinye). `line-height` 1.6 → 1.72.

   KAPSAM: yalnız KUTULU bilgi/uyarı notları. Akan gövde metinleri
   (`.sz-lead` · `.ft-coach-in p`) `--measure`'da KALIR — onlar kutu
   içinde değil, sayfa akışında; orada dar ölçü doğru.

   GERİ ALMA: bu blok silinirse `--measure` sınırı kendiliğinden geri gelir.
   ===================================================================== */
.hr-note p{
  max-width:none;
  line-height:1.72;
}


/* =====================================================================
   BANNER SAYAÇLARINDA AYRAÇ  (Beyar · Revize 11 · M8)
   ---------------------------------------------------------------------
   Beyar: "Fit'in banner'larındaki bu sayaç kısımlarına divider eklenecek
   — buradaki gibi." (referans ekranı: dadagastro.com liste banner'ı)

   REFERANS ÖLÇÜLDÜ — dadagastro.com/reference/tarif-liste/tarif-liste.css:
     .lst-hero {grid-template-columns:minmax(0,1fr) auto; gap:44px}
     .lst-stats{flex-direction:column; gap:16px;
                padding-left:38px; border-left:1px solid rgba(255,255,255,.18)}
     @≤1024 .lst-stats{flex-direction:row; gap:34px;
                padding-left:0; border-left:none;
                padding-top:18px; border-top:1px solid rgba(255,255,255,.18)}

   DadaFit'te iki kolonlu banner ZATEN var ve gutter'ı `--banner-stat-gutter`
   = **44px**, yani referansın `gap:44px`'i ile birebir aynı. Eksik olan tek
   şey ayracın kendisiydi. Bu blok yalnız onu ekliyor: dikey kipte sol
   kenar çizgisi + 38px iç dolgu, yatay kipte üst çizgi + 18px iç dolgu.

   Mevcut kurallara DOKUNULMADI; blok dosya sonunda, kaynak sırasıyla
   kazanıyor (aynı seçici, aynı özgüllük). Silinirse ayraç kalkar, düzen
   olduğu gibi kalır.
   ===================================================================== */

/* ≤1024 · yatay kip: ayraç ÜSTTE */
body[data-fit-hero-kind] .wrap > .lib-row > .lib-stats{
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.18);
}

/* ≥1025 · dikey kip: ayraç SOLDA */
@media (min-width:1025px){
  body[data-fit-hero-kind] .wrap > .lib-row > .lib-stats{
    padding-top:0;
    border-top:none;
    padding-left:38px;
    border-left:1px solid rgba(255,255,255,.18);
  }
}


/* =====================================================================
   MARKA ETİKETİ  (Beyar · Revize 11 · M7)
   ---------------------------------------------------------------------
   Beyar: "Dada kalın, hepsi ortak — yani Gastro kendi renginde. Buradaki
   kartların üst etiketleri: marka ikonları, yazıları, renkleri kullan.
   Dada kalın, Gastro ince olacak, DadaFit ayrı olacak vs gibi."

   YENİ BİR DİL UYDURULMADI. Kabuk zaten aynı kilidi taşıyor:
   üst banttaki `.brand-switch` → `<span class="bd">Dada</span>` (kalın) +
   `<span class="sf">Gastro</span>` (ince), ve marka renkleri `--bs-c`
   değişkeninde tanımlı (satır ~1246). Bu blok o kilidi kart etiketi
   ölçeğine taşıyor; renkler ORADAN, ikinci bir palet açılmıyor.

   Öncesi (`.brg-brand`, 8 sayfa): "DADA GASTRO" tek ağırlık, BÜYÜK HARF,
   `letter-spacing:.04em`, tek renk (`--slate-2`); marka kimliği yalnız
   ikon renginde kalıyordu.
   ===================================================================== */
.brand-tag{
  --bt-c:var(--slate-2);
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;line-height:1.2;
  letter-spacing:.005em;text-transform:none;   /* BÜYÜK HARF kalktı */
  color:var(--bt-c);
}
.brand-tag i{font-size:12.5px;color:var(--bt-c)}
/* Kabuğun `.bs-name`'i ÜST BANTTA bilerek gizli duruyor
   (`max-width:0;opacity:0` — hover'da açılıyor). Etikette metin her zaman
   görünür olmalı, o yüzden ayrı sarmalayıcı: `.bt-name`. */
.brand-tag .bt-name{display:inline-flex;gap:0;white-space:nowrap}
.brand-tag .bd{font-weight:800}                 /* "Dada" — hepsinde ortak */
.brand-tag .sf{font-weight:400;font-style:normal}   /* marka adı — ince */

/* marka renkleri: kabuğun `.bs-*` kilidiyle BİREBİR aynı değerler */
.brand-tag.bt-gastro { --bt-c:#E14827 }
.brand-tag.bt-diet   { --bt-c:var(--c-mint-deep) }
.brand-tag.bt-fit    { --bt-c:var(--fit-deep) }   /* beyaz zeminde AA: 5.45:1 */
.brand-tag.bt-gourmet{ --bt-c:var(--c-purple) }
.brand-tag.bt-campus { --bt-c:var(--c-petrol) }



/* =====================================================================
   ANTRENÖR KARTI  (Beyar · Revize 11 · M3)
   ---------------------------------------------------------------------
   Beyar: "DadaFit Onaylı antrenörler section'undaki kartları değiştir,
   antrenör kartları olsun — 4'lü. antrenorler-v1.html'deki kartları
   istiyorum."

   Kart artık İKİ sayfada yaşıyor (antrenorler-v1 dizini + dadafit-hub
   teaser'ı), o yüzden biçim sayfa CSS'inden KABUĞA alındı. Kopyalanmadı:
   `antrenorler-v1.html`'deki blok SİLİNDİ ve yerine buraya işaret eden
   yorum bırakıldı — iki kopya olsaydı biri güncellenip diğeri unutulurdu.

   Taşıma sırasında hiçbir değer değişmedi. Kanıt: antrenorler-v1'in kart
   geometrisi taşımadan önce ve sonra ölçüldü, üç genişlikte de BİREBİR
   aynı (kart · medya · gövde · etiket · meta · cta kutuları).
   ===================================================================== */
.coach-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:.3s var(--ease);box-shadow:var(--sh-sm)}
.coach-card:hover{transform:translateY(-6px);border-color:#dcdcdc;box-shadow:var(--sh-lg)}
.coach-card:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
/* full-görsel portre — div+bg cover center (img YOK) */
.coach-media{position:relative;height:268px;background-size:cover;background-position:center top}
.coach-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,30,22,0) 40%,rgba(18,16,11,.72))}
/* DadaFit Onaylı rozeti (sol üst) — yeşil, cam */
/* ---- KART ÜST ROZET SATIRI ----
   Rozetler eskiden ikisi de absolute'tu (biri sol üst, biri sağ üst).
   Sol filtre kolonu gelince kart genişliği ~397px'ten ~275px'e indi ve
   iki rozet ÜST ÜSTE BİNDİ (ölçüldü). Artık tek bir flex satırı içinde
   duruyorlar: satır kartın üstüne absolute konumlanır, rozetler içinde
   akar; yer yetmezse alt satıra sarar, asla çakışmaz. */
.coach-badges{position:absolute;top:12px;left:12px;right:12px;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* Rozetler KÜÇÜLMEZ. Flex öğeleri varsayılan olarak shrink:1 taşır; dar kartta
   uygunluk rozeti kendi içeriğinin altına sıkışıp metnini pilin dışına
   taşırıyordu (beyaz pilde yalnız nokta kalıyor, "Danışan alıyor" yazısı
   kartın üstüne düşüyordu). flex:0 0 auto + nowrap ile rozet bütün kalır;
   yan yana sığmazlarsa satır SARAR ve rozet alta iner. */
.coach-badges>*{flex:0 0 auto;white-space:nowrap}
.coach-verify{display:inline-flex;align-items:center;gap:7px;background:var(--fit);color:#fff;font-size:11px;font-weight:700;padding:6px 11px;border-radius:var(--radius-sm);letter-spacing:.01em;box-shadow:0 2px 8px color-mix(in srgb, var(--marka-murekkep) 34%, transparent)}
.coach-verify i{font-size:11.5px}
/* uygunluk durumu (sağ üst) */
.coach-status{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--slate);font-size:11px;font-weight:700;padding:6px 11px;border-radius:var(--radius-sm)}
.coach-status .dot{width:7px;height:7px;border-radius:50%;background:var(--fit);display:block}
.coach-status.busy{color:var(--slate-2)}
.coach-status.busy .dot{background:#c4c8c4}
/* görsel altı: isim + uzmanlık (overlay) */
.coach-id{position:absolute;left:16px;bottom:14px;right:16px;z-index:2}
/* İSİM VE UZMANLIK TEK SATIRA KİLİTLİ (A2).
   Kart genişliği 275px'e indiğinde uzun ad iki satıra düşüyor ve görselin
   içindeki isim çizgisi kartlar arasında kayıyordu. Tek satır + ellipsis
   ile aynı satırdaki her kartın isim üst kenarı AYNI y'de kalır. */
.coach-id b{display:block;color:#fff;font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coach-id span{display:block;color:rgba(255,255,255,.82);font-size:12.5px;font-weight:600;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- GÖVDE: SABİT DİKEY RİTİM (A1) ----
   Üç şerit de SABİT yükseklikte: etiket rayı 30px · meta 20px · alt bant.
   Böylece içerik uzunluğundan bağımsız olarak her kartta aynı iskelet
   oluşur ve aynı satırdaki kartların meta çizgisi aynı y'ye oturur.
   (Ölçüm öncesi: metaTopSpread 36.8px — etiketler iki satıra taşıyordu.) */
.coach-body{padding:15px 18px 18px;display:flex;flex-direction:column;flex:1;gap:12px}

/* etiket pill'leri — TEK SATIR, sığmayan gizlenir + "+N" (A3, kabuk yardımcısı) */
.coach-tags{display:flex;gap:7px;height:30px;align-items:center}
.coach-tags span{font-size:11.5px;font-weight:600;color:var(--slate-2);background:var(--fit-tint);border:1px solid var(--fit-line);padding:5px 11px;border-radius:var(--radius-sm);line-height:1.5}
.coach-tags .tagrow-more{background:#f1f2f1;border-color:var(--line);color:var(--slate-2);padding:5px 9px;line-height:1.5}

/* mini istatistik şeridi — TEK SATIR, ortak taban çizgisi (A4).
   nowrap: "142 değerlendirme" ve "Yüz yüze" dar kartta alt satıra düşüp
   meta yüksekliğini kart kart farklılaştırıyordu. min-width:0 + ellipsis
   ile şerit taşmadan kısalır, yüksekliği sabit kalır. */
.coach-meta{display:flex;align-items:center;gap:14px;height:20px;font-size:12.5px;color:var(--muted);font-weight:500;
  white-space:nowrap;overflow:hidden;min-width:0}
.coach-meta .m{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:20px}
.coach-meta .m:last-child{flex:0 0 auto}
.coach-meta .m i{flex:0 0 auto;color:var(--fit-deep);font-size:12px;line-height:20px}
.coach-meta .m b{color:var(--slate);font-weight:800}

/* alt bant — TEK BASKIN EYLEM: tam genişlikte "Profili Gör" (A5).
   Seans fiyatı ve para birimi kaldırıldı; kartın çağrısı tek. */
.coach-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.coach-cta{
  display:flex;width:100%;align-items:center;justify-content:center;gap:8px;
  /* zemin --fit değil --fit-deep: beyaz metin #009d4f üstünde 3.54:1 ölçüldü
     (AA altı), #007a3d üstünde 5.45:1. Marka yeşili ailesi korunuyor. */
  background:var(--fit-deep);color:#fff;font-weight:700;font-size:13.5px;
  padding:11px 14px;border-radius:var(--radius-md);
  transition:background .2s var(--ease)
}
.coach-cta i{transition:transform .2s var(--ease)}
.coach-card:hover .coach-cta{background:#005989}
.coach-card:hover .coach-cta i{transform:translateX(3px)}

/* ---- antrenör kartı · dar ekran (antrenorler-v1'den birlikte taşındı) ---- */
@media (max-width:640px){
  .coach-media{height:208px}
  .coach-id b{font-size:16px}
  .coach-body{padding:13px 14px 15px}
}
@media (max-width:400px){
  .coach-media{height:300px}
}


/* =====================================================================
   SAYFALAMA  (Beyar · Revize 11 · M6)
   ---------------------------------------------------------------------
   Beyar: "Egzersiz kütüphanesinde pagination kısmı var ya — sonsuz kısım
   var şimdi, pagination numaraları koyacaksın, Gastro'daki gibi.
   Bir de liste sayfalarında İLK SAYFAYA / SON SAYFAYA ATLA olması lazım,
   DadaHaber'deki gibi. Bir de bu pagination'un altında bir ufak boşluk ve
   yazı olacak."

   İKİ REFERANS BİRLEŞTİRİLDİ:
   · Gastro (`dadagastro.com/reference/tarif-liste/tarif-liste.css` → `.pagi`)
     ölçülen: `.pagi{gap:8px;margin-top:40px;justify-content:center}`
              `.pg{min-width:44px;height:44px;padding:0 13px;font-size:14px;
                   font-weight:700;border:1px solid var(--line);
                   border-radius:var(--radius-md)}`
              `.pg.active{marka zemini + beyaz metin}`
              `.pg[disabled]{opacity:.4;pointer-events:none}`
              `.pg-dots{…}` · `.pagi-note{width:100%;text-align:center;
                   font-size:12.5px;margin-top:6px}`  ← "altındaki ufak boşluk ve yazı"
     @dar: `.pg{min-width:40px;height:40px;font-size:13px}`
   · DadaHaber: baştaki `«` ve sondaki `»` (ilk/son sayfaya atla)

   Değerler referanstan BİREBİR; yalnız marka rengi DadaFit'e çevrildi
   (K29 — "ölçü alınır, palet alınmaz").
   44×44 ölçüsü tesadüf değil: WCAG 2.5.5 dokunma hedefi eşiği
   (tests/uiux-denetim.mjs başlık 2 bunu ölçüyor).
   ===================================================================== */
.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);
}
.pg:hover:not([disabled]):not(.active){border-color:var(--fit);color:var(--fit-deep)}
.pg:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
.pg.active{background:var(--fit);border-color:var(--fit);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}
/* "pagination'un altında bir ufak boşluk ve yazı" — Beyar'ın istediği satır */
.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}
}


/* =====================================================================
   PLAN PROFİL BAŞLIĞI  (Beyar · Revize 11 · M17)
   ---------------------------------------------------------------------
   Beyar: "enerji-defteri'nin profilini DadaGastro'nun aynısı yap —
   burası düz bannerlı; dadagastro.com/sefler/admin, burasının aynısını
   yapacaksın."

   ÖLÇÜM — üç kaynak yan yana konuldu:
     dadagastro.com/sefler/admin  → `.pf-top` · `.pf-banner` 280px / 24px
                                    yarıçap / görselli · avatar 128×128 /
                                    %50 · `.pf-stats` 16px yarıçap · 5 kutu
     DadaFit profil-v1.html       → AYNI SINIF ADLARI, AYNI ÖLÇÜLER
                                    (banner 280/24 · avatar 128 · stats 16)
     DadaFit enerji-defteri       → 544px DÜZ KOYU banner, profil altta
                                    küçük bir avatar+ad satırı
   Yani kalıp DadaFit'te ZATEN VARDI ve referansla birebirdi; plan
   sayfaları onu kullanmıyordu.

   NEDEN 69 KURAL KOPYALANMADI: `profil-v1`'in `.pf-*` ailesi rol koşullu
   (diyetisyen/antrenör/işletme · fiyat · randevu · takip · mesaj).
   Plan sayfasının hiçbirine ihtiyacı yok. Kopyalamak yerine ÖLÇÜLEN
   değerlerle sade bir sürüm yazıldı; `profil-v1`'e DOKUNULMADI.
   Ölçüler birebir: banner 280/24px · avatar 128px/-70px binme ·
   kart -78px binme + 28px yan pay · stats 16px yarıçap.
   ===================================================================== */
.fp-profil{padding-top:calc(var(--fit-header-h) + 0px);background:var(--bg-white)}

.fp-kapak{
  position:relative;height:280px;border-radius:var(--radius-xl);overflow:hidden;
  background-size:cover;background-position:center;box-shadow:var(--sh-md);
}
.fp-kapak::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(33,30,22,.14),rgba(20,18,12,.38));
}
/* referansın `.pf-mark`'ı: sol üstte beyaz hap, 11px/700, harf aralığı .1em */
.fp-kapak-mark{
  position:absolute;top:18px;left:20px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.93);color:var(--slate);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--radius-sm);
}
/* kimlik kartı — kapağa biner (referansta margin -78px) */
.fp-kimlik{
  position:relative;z-index:3;display:flex;gap:26px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--sh-md);padding:26px 30px 28px;margin:-78px 28px 0;
}
.fp-kimlik .fp-ava2{
  flex:none;width:128px;height:128px;border-radius:var(--radius-circle);
  background-size:cover;background-position:center;border:4px solid #fff;
  box-shadow:var(--sh-md);margin-top:-70px;
}
.fp-kimlik-id{flex:1;min-width:0}
/* §A10 · kimlik kartındaki ad 29px. (Sayfa h1'i 24px'tir; Fit'in hesap,
   modül ve profil yüzeylerinde tek h1 vardır ve o KİMLİK KARTININ
   adıdır — ölçüldü, §A11 ✓. Banner h1'i ayrı kalemdir, 42px, §R10
   gereği küçültülmez ve bu dalgada kapsam dışıdır.) */
.fp-kimlik-id h1{font-size:29px;letter-spacing:-.02em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fp-kimlik-id .fp-handle2{display:block;font-size:14px;color:var(--muted);font-weight:500;margin-top:3px}
/* R15/2 · MODÜL KABUĞU (#fitModulTop) — kimlik kartı kiti Planım kabuğuyla
   ORTAK; burada yalnız iki ekleme var, ikisi de şartnameden:
   · .fp-uad  → şartnamenin istediği KULLANICI ADI, adın yanında
   · .modul-govde → sekme panellerinin OPAK kabı. Opak olması şart:
     kabuğun 'dikişi rayın dibine çek' bloğu rayın altındaki saydam
     blokları gövdeye taşır; gövde opaksa onu hedef sayar ve panel
     kipine hiç dokunmaz. */
.fp-kimlik-id .fp-uad{color:var(--fit-deep);font-weight:700}
/* R15 · Beyar: "pill ile aşağısındaki beyaz section arasında boşluk olsun".
   ÖLÇÜLDÜ: sekme şeridi OLAN modül sayfalarında istatistik şeridi ile gövde
   arasında 24px var (şeridin kendi üst dolgusundan geliyor); şerit OLMAYAN
   sayfalarda (mesajlarim · challengelarim) boşluk 0 ve pill beyaz banda
   yapışıyor. Payı `.pf-stats`a vermek çift boşluk yapardı — şeritli
   sayfalarda 24+X olurdu. Bitişik kardeş seçicisi tam da eksik durumu
   yakalıyor: gövde DOĞRUDAN profil bölümünü izliyorsa arada şerit yok
   demektir, aynı 24px oraya konur. */
.fp-profil + .modul-govde{margin-top:24px}

.modul-govde{background:var(--bg-cream);position:relative;z-index:1}
.modul-govde>.fit-pane[hidden]{display:none}
.fp-kimlik-id .fp-lead2{font-size:14.5px;color:var(--slate-2);font-weight:500;line-height:1.6;margin-top:12px}
.fp-kimlik-meta{display:flex;flex-wrap:wrap;gap:7px 20px;margin-top:13px;font-size:13px;color:var(--muted);font-weight:500}
.fp-kimlik-meta span{display:inline-flex;align-items:center;gap:7px}
.fp-kimlik-meta i{color:var(--fit-deep)}

/* =====================================================================
   R16 · MODÜL PROFİL KARTI — kademe rozeti + istatistik şeridi
   ---------------------------------------------------------------------
   Emsal: dadagastro.com/sefler/admin — `.pf-head` (kimlik) + AYRI bir
   `.pf-stats` kartı, beş hücre. Yapı ve ölçüler oradan, RENK kitten.

   İstatistik hücresi YENİ DEĞİL: `antrenor-detay-v1.html`in `.cp-stats` /
   `.cps` kiti emsalin `.pf-stats`/`.pfs`'iyle birebir aynı yapıdadır
   (<i> + <div><span>etiket</span><b>değer</b></div>, ikon 38×38
   `--radius-md` `--fit-tint` zemin `--fit-deep` renk, <b> 16.5px/700).
   Kurallar oradan BİREBİR kopyalandı, sınıf adları korundu — böylece
   antrenör sayfasının kendi yerel kuralıyla çakışmaz, aynı değerleri
   yazar. Yeni sınıf üretilmedi.

   ⚠ KİTTE KARŞILIĞI OLMAYAN TEK KALEM: kademe rozeti. Kit §5'in
   `.fp-badge`i nötr zeminli (`rgb(244,244,243)`), emsalinki marka
   zeminli + beyaz metin. `.fp-badge`in ÖLÇÜSÜ korundu, yalnız rengi
   `--fit-deep` + beyaz oldu (kontrast 5.45:1; `--fit` seçilseydi 3.54:1
   ile WCAG 1.4.3'ü geçemezdi). Yeni renk üretilmedi, ikisi de kit tokeni.
   Beyar onaylarsa kite "kademe rozeti" satırı olarak girer.
   ===================================================================== */
/* R15 · İKİ ROZET, TEK GÖRSEL DİL: `.is-paket` satın alınanı,
   `.is-kademe` kazanılanı gösterir. Ölçüleri ortak, yalnız ikon ve
   metin farklı — Beyar'ın uyarısı ikisinin KARIŞMAMASI üzerineydi,
   birbirine benzememesi üzerine değil. */
.fp-kimlik-id h1 .fp-badge.is-paket,
.fp-kimlik-id h1 .fp-badge.is-kademe{
  background:var(--fit-deep);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:7px 13px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;gap:6px;
  vertical-align:middle;white-space:nowrap;
}
.fp-kimlik-id h1 .fp-badge.is-paket i,
.fp-kimlik-id h1 .fp-badge.is-kademe i{font-size:12px;color:#fff}

/* istatistik şeridi — kimlik kartının ALTINDA ayrı kart (emsalde de ayrı) */
.cp-stats{display:flex;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);overflow:hidden}
.cps{flex:1 1 200px;display:flex;align-items:center;gap:12px;padding:15px 20px;min-width:0}
.cps+.cps{border-left:1px solid var(--line)}
.cps>i{flex:none;width:38px;height:38px;border-radius:var(--radius-md);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:15px}
.cps>div{min-width:0}
.cps span{display:block;font-size:11px;line-height:1.55;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.cps b{display:block;font-size:16.5px;line-height:1.55;font-weight:700;color:var(--slate)}
/* YER TUTUCU — kaynağı olmayan sayı UYDURULMAZ; değer soluk görünür. */
.cps[data-yer-tutucu] b{color:var(--muted);font-weight:600}
/* Ayraçlar `border-left` yerine 1px IZGARA BOŞLUĞUYLA çiziliyor: beş hücre
   dar ekranda satır atlıyor ve `.cps+.cps{border-left}` o zaman ikinci
   satırın İLK hücresine dikey çizgi koyuyordu. Boşluk yöntemi hangi
   sarma düzeninde olursa olsun doğru ayracı verir; renk yine `--line`.
   Ölçüldü (öncesi): @1024 hücreler 233·233·233·233·974 — beşinci kalem
   tek başına tam satır kalıyordu. Sonrası 3+2 ve 2+2+1. */
/* 🔴 AD ÇAKIŞMASI DÜZELTİLDİ — bu kap ÖNCE `.fp-stats` adını taşıyordu, ama
   o ad ZATEN VARDI: fit-shell.css:2221 `.fp-stats{display:grid;
   grid-template-columns:repeat(4,…);gap:14px}` — çocukları `.fp-stat`
   (beyaz kart, 1px --line, --radius-md), programlarim-v1 ve
   fit-testi-sonuc-v1'de canlı. Buradaki `gap:1px` + `background:--line`
   o kaba da uygulanıyordu: dört kartın arası 14px'ten 1px'e düşüyor ve
   arkalarında --line rengi bant olarak taşıyordu (ölçüldü).
   Ad emsalinkine çevrildi: kap `.pf-stats` (Gastro `.pf-stats`/`.pfs`),
   hücre `.cps` kalıyor. `overflow:hidden` + yarıçap: 1px ayraçlar yuvarlak
   köşenin dışına taşmasın.
   DERS: "yeni sınıf üretme" kuralının ters yüzü de geçerli — VAR OLAN bir
   adı yeni bir bileşen için de kullanma. 4290 satırlık kabukta ad çakışması
   grep'siz görünmüyor. */
.pf-stats{margin-top:14px;gap:1px;background:var(--line);border-radius:var(--radius-md);overflow:hidden}
.pf-stats .cps{background:var(--paper)}
.pf-stats .cps+.cps{border-left:0}
.fp-modul-lead{margin-top:16px;max-width:76ch}

/* =====================================================================
   R16 · MODÜL GÖVDESİ — ZEBRA ve DİKEY MERKEZ  (Beyar, 2026-08-29)
   ---------------------------------------------------------------------
   Beyar: "Bölümler sırayla beyaz ve gri; her bölümün içeriği kendi
   bölümünün dikey merkezinde — üst boşluk = alt boşluk."

   ÖLÇÜM (1440, oturum açık, sekiz sayfa):
     yapı her sayfada AYNI →  .modul-govde > .fit-pane > section > .wrap
     ve her `.fit-pane` içinde TEK bir tam genişlik `section` var.
     zemin/dolgu ise sayfadan sayfaya AYRIŞIYORDU:
       .fp-body (egzersizlerim·programlarim·challengelarim·rozetlerim)
                 #f9f9f9 · pt 32 / pb 74
       .pk-body (paketlerim) · .od-body (odemelerim)
                 #ffffff · pt 26 / pb 74
       .hs-body (destek)
                 saydam  · pt 0  / pb 0
   İki kural buradan çıkıyor:

   1 · DİKEY MERKEZ — üst ve alt dolgu EŞİTLENDİ. Değer kitin kendi
       `--sec-pad-sm`i (32px): şeridin hemen altındaki üst boşluk zaten
       oydu, `--sec-pad` (74px) seçilseydi sekme rayıyla içerik arasında
       42px'lik boşluk açılır, ray içerikten kopardı.

   2 · ZEBRA — kural `nth-of-type` ile kurulu ve BUGÜN her panelde tek
       bölüm olduğu için hepsi dizinin İLK rengini, yani BEYAZ'ı alıyor
       (Beyar'ın verdiği sıra: beyaz · gri · beyaz · gri). Böylece sekiz
       sayfanın bugünkü ayrışması da kapandı.
       🔴 AÇIK KALEM: gerçek zebra için panelde BİRDEN FAZLA tam genişlik
       `section` gerekiyor. Bugün bölünecek bloklar `.wrap`ın İÇİNDE
       (1240px, kenar boşluklu) — oraya zemin verilirse bant tam genişlik
       olmaz, üstelik o bloklar kart/başlık/liste ve sayfa ajanlarının
       markup'ı. Sayfa tarafı `.fit-pane` altına ardışık `<section>`
       yazdığı gün BU KURAL onları kendiliğinden dönüşümlü boyar; kabuk
       tarafı hazır. Sayfa markup'ına dokunmadım.
   ===================================================================== */
.modul-govde .fit-pane > section{
  padding-top:var(--sec-pad-sm);
  padding-bottom:var(--sec-pad-sm);
}
.modul-govde .fit-pane > section:nth-of-type(odd){ background:var(--bg-white) }
.modul-govde .fit-pane > section:nth-of-type(even){ background:var(--bg-cream) }
@media (max-width:1180px){ .pf-stats .cps{flex:1 1 30%} }
@media (max-width:900px){
  .cps{flex:1 1 140px}
  .cps+.cps{border-left:none}
  .cps:nth-child(odd)+.cps{border-left:1px solid var(--line)}
  .pf-stats .cps+.cps{border-left:0}
}
@media (max-width:640px){
  .pf-stats{margin-top:12px}
  .pf-stats .cps{flex:1 1 44%;padding:13px 14px}
  /* R15 · İKİ ROZET, TEK GÖRSEL DİL: `.is-paket` satın alınanı,
   `.is-kademe` kazanılanı gösterir. Ölçüleri ortak, yalnız ikon ve
   metin farklı — Beyar'ın uyarısı ikisinin KARIŞMAMASI üzerineydi,
   birbirine benzememesi üzerine değil. */
.fp-kimlik-id h1 .fp-badge.is-paket,
.fp-kimlik-id h1 .fp-badge.is-kademe{font-size:11px;padding:6px 11px}
}
/* sayaç şeridi — referansın `.pf-stats`/`.pfs` ölçüleri birebir */
.fp-sayac{
  display:flex;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);margin:20px 28px 0;overflow:hidden;
}
.fp-sayac .pfs{flex:1;display:flex;align-items:center;gap:12px;padding:15px 20px;min-width:0}
.fp-sayac .pfs + .pfs{border-left:1px solid var(--line)}
.fp-sayac .pfs i{flex:none;width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--fit-wash);color:var(--fit);display:grid;place-items:center;font-size:15px}
.fp-sayac .pfs span{display:block;font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.02em}
.fp-sayac .pfs b{display:block;font-size:16.5px;font-weight:700;color:var(--slate);white-space:nowrap}

/* ---- dar ekran — referansın kırılımları birebir ---- */
@media (max-width:1024px){
  .fp-kimlik{margin:-70px 16px 0;padding:22px 22px 24px}
  .fp-sayac{margin:18px 16px 0}
}
@media (max-width:640px){
  .fp-kapak{height:170px;border-radius:var(--radius-lg)}
  .fp-kapak-mark{top:12px;left:12px;padding:7px 11px;font-size:10px}
  .fp-kimlik{flex-direction:column;align-items:center;text-align:center;gap:14px;margin:-52px 4px 0;padding:20px 18px 22px}
  .fp-kimlik .fp-ava2{width:104px;height:104px;margin-top:-66px}
  .fp-kimlik-id{width:100%}
  .fp-kimlik-id h1{font-size:23px;justify-content:center}
  .fp-kimlik-meta{justify-content:center;gap:6px 16px;font-size:12.5px}
  .fp-sayac{display:grid;grid-template-columns:1fr 1fr;margin:16px 0 0}
  .fp-sayac .pfs + .pfs{border-left:none;border-top:1px solid var(--line)}
  .fp-sayac .pfs:nth-child(2n){border-left:1px solid var(--line)}
  .fp-sayac .pfs:nth-child(-n+2){border-top:none}
}


/* =====================================================================
   R11/M17 ek · PLAN PROFİLİNDE KIRINTI RENGİ
   ---------------------------------------------------------------------
   `.lib-crumb` KOYU banner için yazılmış: bağlantılar rgba(255,255,255,.6).
   Plan başlığı M17'de BEYAZA döndü ve kırıntı beyaz zeminde beyaz kaldı —
   ölçüldü: "DadaFit ana sayfa" ve "Fit Planım" görünmüyordu, yalnız yeşil
   olan aktif kalem okunuyordu.
   Değerler profil-v1'in beyaz zemin kırıntısından (`.pf-crumb`) alındı.
   ===================================================================== */
.fp-profil .lib-crumb{padding:18px 0 14px;font-size:13px;font-weight:500;color:var(--muted)}
.fp-profil .lib-crumb a{color:var(--muted)}
.fp-profil .lib-crumb a:hover{color:var(--fit)}
.fp-profil .lib-crumb i{font-size:9px;color:#c7c7c7}
.fp-profil .lib-crumb .cur{color:var(--slate);font-weight:700}
.fp-profil .lib-crumb .crumb-home{color:var(--muted)}
.fp-profil .lib-crumb .crumb-home:hover{color:var(--fit)}


/* =====================================================================
   GÖRÜŞ BİLDİR ŞERİDİ — BANNER MERKEZİNE HİZALI  (Beyar · R11/M19)
   ---------------------------------------------------------------------
   Beyar: "Görüş Bildir butonu her tarafta yukarı çekilecek, banner'ın
   merkezinin hizasında olacak."

   Öncesi `top:50%` — VIEWPORT'un ortası. Banner yüksekliği sayfaya göre
   değişiyor (544 @1440 liste · 560 detay · 607 @1024 · 726 @390), üstelik
   pencere boyu da değişken; ikisi hiçbir zaman aynı yere denk gelmiyordu.
   Şimdi kabuk JS'i banner'ın dikey merkezini ölçüp `--fb-top` yazıyor;
   banner olmayan sayfada değer basılmıyor ve eski `50%` yedeği kalıyor.
   Kuralın kendisi yukarıdaki `.feedback-tab` bileşeninin İÇİNDE
   (`top:var(--fb-top,50%)`) — burada ikinci kez yazılmıyor.
   ===================================================================== */

/* =====================================================================
   .fit-tabs — OPT-IN ORTALAMA VARYANTI  (R12 hazırlığı, uygulama G7'de)
   ---------------------------------------------------------------------
   R12 (Enerji Defteri) ve R15 (Aktivite Kayıtlarım) sekme rayının
   ortalanmasını istiyor. `.fit-tabs` 66 sayfayı etkileyen ortak kabuk
   bileşeni; varsayılan `justify-content` DEĞİŞTİRİLMEDİ (mevcut kullanım
   sola/gerekirse esneyerek dayalı kalmalı). Bunun yerine opt-in sınıf:
   yalnız `.fit-tabs.is-center` taşıyan sayfada rayı ortalar. Dalga 3'te
   G7/G9 bu sınıfı ilgili sayfalara EKLEYECEK — burada hiçbir sayfaya
   uygulanmadı.
   ===================================================================== */
/* 🔴 R18 · `.is-center` GERÇEKTEN ORTALIYOR — eskiden HİÇBİR ŞEY YAPMIYORDU.
   ÖLÇÜLEN KUSUR: kural yalnız `justify-content:center` idi, ama `.fit-tabs`
   `display:inline-flex` (yukarıda, §SEKME BİLEŞENİ) — kutu zaten içeriği
   kadar geniş, `justify-content` ortalayacak boş alan bulamıyor. Yani
   R12'de "opt-in ortalama varyantı" diye eklenen sınıf, eklendiği günden
   beri ölüydü; modül rayının ortalı GÖRÜNMESİ bu sınıftan değil,
   `.pf-tabbar.fp-tabbar .fit-tabs` kuralından (nav width:100%) geliyordu.
   Kusur R18'de Enerji Defteri alt şeridi `.pf-tabbar` DIŞINDA kurulunca
   ortaya çıktı: sınıf yazılıydı, ray sola yaslıydı.
   ÇÖZÜM hapı bozmadan: kutu `width:fit-content` ile içeriği kadar kalır
   (zemin/kenarlık/yarıçap aynı), `margin-inline:auto` ile kabında ortalanır.
   `justify-content` da duruyor — kutu tam genişliğe zorlandığı bir bağlamda
   (mobil) kalemleri ortalamaya devam etsin diye. */
.fit-tabs.is-center{display:flex;width:fit-content;max-width:100%;margin-inline:auto;justify-content:center}
/* Mobilde şerit zaten tam genişlik ve yatay kaydırmalı (bkz. §SEKME
   BİLEŞENİ @640) — orada `fit-content` kaydırmayı kırardı. */
@media (max-width:640px){ .fit-tabs.is-center{width:100%} }

/* =====================================================================
   .pf-tabs — OPT-IN ORTALAMA VARYANTI  (R11 · K30)
   ---------------------------------------------------------------------
   Beyar: "destek-v1 sekme rayı ('Destek' ve 'Taleplerim') sola dayalı,
   ortalansın. Kanonu diğer ortalanmış sekme raylarından al."

   Ölçüm @1440 — `.pf-tabs` kullanan yedi sayfa:
     destek-v1 · destek-talepleri-v1  içSol 5  · içSağ 953  SOLA DAYALI
     hesabim-v1                       içSol 5  · içSağ  77  SOLA DAYALI
     profil-v1                        içSol 5  · içSağ 241  SOLA DAYALI
     sss-v1                           içSol 5  · içSağ 180  SOLA DAYALI
     uyelik-faturalandirma-v1         içSol 5  · içSağ 383  SOLA DAYALI
     giris-v1                         içSol 5  · içSağ   5  (kutusu 442px,
                                      dar wrap içinde zaten ortada)
   Ortalı kanon (R34 · K3): `.pf-tabbar.fp-tabbar .fit-tabs{justify-content:center}`
   → 14 plan sayfasında içSol=içSağ=405.

   NEDEN OPT-IN SINIF, NEDEN SAYFA KURALI DEĞİL: R34 tam olarak bunun
   tersini temizlemişti — `body[data-fit-page="…"]` ile tek sayfaya
   yazılan ortalama, 13 kardeşi sola dayalı bırakmış ve "tıklayınca sola
   kayıyor" olarak geri dönmüştü (docs/lessons.md §15). Burada kural
   kabukta tek yerde durur, taşıyan sayfa markup'ıyla katılır.

   KAPSAM: destek rayı TEK bir raydır ve İKİ sayfada birden görünür
   (destek-v1 · destek-talepleri-v1). Yalnız birini ortalamak R34'teki
   zıplamayı birebir geri getirirdi, o yüzden ikisi de işaretlendi.
   Diğer dört sola dayalı sayfa (hesabim · profil · sss · uyelik) BİLEREK
   dokunulmadan bırakıldı — ayrı raylar, ayrı karar (kuyruk: Beyar'a soru).

   Taşma güvenliği: `.pf-tabs` ≤900px'te `flex-wrap:nowrap;overflow-x:auto`
   olur; kaydırılabilir bir rayda düz `center` sol kenarı erişilemez kılar.
   İlk deneme bunu `@media (max-width:900px)` ile kapatmıştı — ÖLÇÜM bunun
   fazla kaba olduğunu gösterdi: destek rayı iki kalem, @390'da bile
   sağında 146px boşluk kalıyor ve HİÇ kaydırılabilir olmuyor, yani dört
   dar genişlikte ortalama boşuna kapanıyordu. Onun yerine CSS'in kendi
   taşma hizalama anahtarı: `safe center` içerik sığmadığında kendiliğinden
   başa hizalanır. Desteklemeyen motorlar önceki satırdaki düz `center`'da
   kalır.
   ===================================================================== */
.pf-tabs.is-center{justify-content:center}
.pf-tabs.is-center{justify-content:safe center}

/* =====================================================================
   R12 EK TUR · R20 — PLAN PROFİLİNİN BEYAZ ZEMİNİ KALKTI
   ---------------------------------------------------------------------
   Beyar: "diette arka plan gri ama burda 2 katman var fitte bi profil
   tarafında bide tabin ord" — `.fp-profil` (line 3557) beyaz, hemen
   altındaki `.pf-tabbar` gri, gövde tekrar beyaz: üç zemin arka arkaya.
   Kart (`.fp-kimlik`) zaten kendi beyazını + `border:1px solid var(--line)`
   kenarlığını (line 3578) + `box-shadow:var(--sh-md)` gölgesini (line 3579)
   taşıyor — bu üçü zemin grileşince kartın kenarını okunur tutuyor,
   YENİ GÖLGE EKLENMEDİ (R12/S1 kararına ters düşmesin diye).
   Kaynak sırası line 3557'deki `background:var(--bg-white)` bildirimini
   geçersiz kılıyor; o satır SİLİNMEDİ. 14 plan sayfası + `hesabim-v1`
   ortak — kabuk sözleşmesi gereği tek kural, 15 sayfada tek değer.
   ===================================================================== */
.fp-profil{background:var(--bg)}

/* =====================================================================
   R12 EK TUR · R19 — KAPAK 280px → 240px (DadaDiet paritesi)
   ---------------------------------------------------------------------
   Beyar: "profil birazdaha yaklaşmış ... biraz fazla fark var
   güncellemeni istiyorum tam olmamış bence" — avatar/kart kapağa DadaDiet
   `/planim`'deki oranda binsin istedi. Ölçüldü: binme değerleri (kart
   -78px, avatar -70px, line 3579/3584) zaten DadaDiet ile birebir aynı;
   tek fark kapak yüksekliğiydi (DadaFit 280px — R11/M17'de DadaGastro'nun
   `sefler/admin` kalıbından ölçülmüştü — DadaDiet 240px). Aynı negatif
   margin, 40px daha uzun kapakta avatarı oransal olarak yukarıda bırakıyor.
   Beyar kararı: kapak 240px'e çekilsin, BİNME DEĞERLERİNE DOKUNULMASIN.
   Bilinçli sapma KARARLAR.md'ye işlendi (K68). Kaynak sırası line 3560'taki
   `height:280px` bildirimini geçersiz kılıyor; o satır SİLİNMEDİ. Yalnız
   masaüstü/tablet tabanı (line 3560); @640 kırılımının kendi değeri
   (170px, line 3611) R19 kapsamı dışında, dokunulmadı. Parallax
   (`data-fit-px`) çalışma anında bandın gerçek `getBoundingClientRect`
   yüksekliğini okur — sabit sayı taşımadığı için 240px'te de doğru çalışır.
   ===================================================================== */
/* §E10 · §R1 · §R3 — Profil/Hesap banner grubu 280px. Ölçülen en uzun
   değerden alınır, kırpılmaz; R19'un 240px'i sapmaydı, geri alındı. */
.fp-kapak{height:var(--banner-h-profil)}

/* =====================================================================
   R12 EK TUR · R22 — KAPAK/AVATAR DEĞİŞTİRME KONTROLLERİ (opt-in)
   ---------------------------------------------------------------------
   Beyar: "ayarları tıkladığımda kapak ve profil değiştir çıkıyor haberin
   olsun öyle olmasını istiyorum" — DadaDiet `/hesabim` kartında kapağın
   sağ üstünde "Kapağı Değiştir" düğmesi + avatarın sağ altında kamera
   rozeti var; `/planim`'de YOK (yalnız ayarlar sayfasına özgü davranış).
   S13 kararı: kontroller kabuğa yazılır ama OPT-IN — yalnız
   `.fp-profil.is-editable` taşıyan sayfada görünür. Bu turda yalnız
   `hesabim-v1.html`'e sınıf ve düğme işaretlemesi eklendi; 14 plan
   sayfası bu sınıfı taşımıyor, kurallar orada HİÇBİR ELEMANA uygulanmaz.
   Düğmeler gerçek dosya yüklemez — geri bildirim JS'i sayfa yerelinde
   (`hesabim-v1.html`), kabukta değil (yalnız bu sayfa kullanıyor).
   Dokunma hedefi tekniği `.fp-sw::before`'daki (line 1803) görünmez örtü
   yöntemiyle aynı: rozet görsel 34px kalıyor, gerçek hedef 44×44.
   ===================================================================== */
.fp-profil.is-editable .fp-kimlik .fp-ava2{position:relative}
/* R12 EK TUR · R22 düzeltme — Beyar canlıda gördü: "kapakta değişsin bide
   profil değiştirme butonu bu değil". Referans (dadadiet.com/hesabim,
   docs/screenshots/R12-22-ref-diet-hesabim-kapak-avatar-degistir.png)
   yeniden ölçüldü: düğme SAĞ ÜST köşede, kapağın kenarından belirgin
   içeride (~20-22px), tam PİL biçiminde (radius-sm değil radius-pill).
   Rozet SAĞ ALT köşede, dairesel, markanın kendi rengini taşıyor
   (`docs/lessons.md` §8 — kardeş markadan ÖLÇÜ alınır, PALET alınmaz;
   DadaDiet'in kendi yeşili yerine DadaFit'in --fit-deep'i kullanıldı).
   Konum değerleri (top/right) ilk sürümle birebir aynı kaldı — ölçüldü,
   zaten referansla uyumluydu; yalnız BİÇİM (radius + rozet rengi)
   düzeltildi. Beyar'ın gördüğü "sol üstte, küçük, biçimsiz" görüntü
   canlı DOM ölçümünde üretilemedi (taze Playwright bağlamında düğme
   sağ üstte, 138×44 — bkz. rapor); büyük olasılıkla eski sekmenin
   fit-shell.css önbelleğiydi, yine de biçim burada sıkılaştırıldı. */
.fp-kapak-edit{
  position:absolute;top:20px;right:20px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  background:rgba(255,255,255,.93);color:var(--slate);
  font-size:12.5px;font-weight:700;font-family:inherit;
  padding:9px 16px;border:none;border-radius:var(--radius-pill);
  cursor:pointer;transition:.18s var(--ease);
}
.fp-kapak-edit:hover{background:#fff}
.fp-kapak-edit:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:2px}
.fp-ava-edit{
  position:absolute;right:-3px;bottom:-3px;z-index:4;
  width:34px;height:34px;border-radius:var(--radius-circle);
  background:var(--fit-deep);color:#fff;border:3px solid #fff;
  display:grid;place-items:center;font-size:13px;
  cursor:pointer;box-shadow:var(--sh-md);
}
.fp-ava-edit::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.fp-ava-edit:focus-visible{outline:3px solid var(--fit-tint);outline-offset:2px}
@media (max-width:640px){
  .fp-kapak-edit{top:12px;right:12px;padding:8px 13px;font-size:11px;gap:6px}
}

/* =====================================================================
   R34 · REVİZYON-12 EK TUR 3 — plan sekme rayı KABUKTA ortalandı
   ---------------------------------------------------------------------
   Beyar: "burdaki tableri merkezi hale getir … ilk açıldıklarında
   merkeziler sonra tıklayınca sola yalı oluyoyorlar."

   Ölçüm — 14 plan sayfası, `nav.fit-tabs` (1440px): yalnız
   `fit-planim-gecmis-v1` ortalıydı (sayfaya özel kural,
   `body[data-fit-page="fit-planim-gecmis-v1"]`, R15'te eklenmişti — o
   turda kapsam BİLEREK dar tutulmuştu, kabuğa dokunulmasın diye). Diğer
   13 sayfa `justify-content:normal` ile sola dayalıydı (sol boşluk 5px ·
   sağ boşluk 805px). Sonuç: sayfadan sayfaya geçince ray zıplıyordu —
   Beyar'ın "tıklayınca sola yaslı oluyor" dediği tam bu.

   Lead kararı (REVİZYON-12-plan.md, EK TUR 3, K-d): ortalama TEK KAYNAK
   olarak kabuğa taşınır; `fit-planim-gecmis-v1.html`'deki sayfa kuralı
   kaldırılır (bkz. o dosyadaki değişiklik). Hazır duran `.fit-tabs.is-center`
   opt-in sınıfı KULLANILMADI — hiçbir sayfa markup'ı değişmeden, yalnız
   kabuk JS'inin bastığı `.pf-tabbar.fp-tabbar` sarmalayıcısı üstünden
   bağlamsal bir kural yeter; JS şablonu (`fit-shell.js` #fitPlanTop bloğu)
   14 sayfada da AYNI (`.pf-tabbar.fp-tabbar` > `nav.fit-tabs`).

   NEDEN GÜVENLİ: `.fit-tabs` başka bir yerde `.pf-tabbar` içine
   YERLEŞMİYOR — envanter (repo genelinde "fit-tabs" geçen tek diğer
   sayfa): `antrenor-detay-v1.html`, orada `.cp-tabbar .fit-tabs` (KENDİ
   ayrı sarmalayıcısı, zaten kendi justify-content:center kuralını
   taşıyor, satır ~279) kullanıyor — bu kural ona hiç değmiyor.
   `.pf-tabbar` sınıfını `.fit-tabs` OLMADAN kullanan altı sayfa
   (destek-v1 · destek-talepleri-v1 · profil-v1 · hesabim-v1 · sss-v1 ·
   uyelik-faturalandirma-v1) farklı bir bileşen kullanıyor (`.pf-tabs`,
   tekil `s`, ayrı sınıf) — bu kural onları da etkilemiyor.

   Satır 1690'daki orijinal `.pf-tabbar .fit-tabs{...width:100%}` kuralı
   SİLİNMEDİ; nav zaten `width:100%` olduğu için ray hep tam genişlikte —
   `justify-content` yalnız İÇİNDEKİ sekme kalemlerinin toplu blokunu
   ortalıyor. `.fp-tabbar` eklenmesi özgüllüğü de bilerek yükseltiyor.

   NOT — DadaDiet referansı (R15'te ölçüldü, `.pf-tabs` `justify-content:
   normal`, sola dayalı) bu rayı SOLA DAYALI kullanıyor. Beyar referanstan
   BİLİNÇLİ olarak ayrılıyor: KARARLAR.md K69.
   ===================================================================== */
.pf-tabbar.fp-tabbar .fit-tabs{justify-content:center}

/* =====================================================================
   R32 · REVİZYON-12 EK TUR 3 — üst çubuk: dil seçici ayracının iki yanı
   ---------------------------------------------------------------------
   Beyar: "ingilizcedeki ikon setine soldaki divider ile bosluk ver."

   Ölçüm (1440/1024px) — `.tb-lang::before` ayracı: soldaki kardeş marka
   ikon grubuna (`.brand-switch`) uzaklık `.tb-right{gap:18px}`'ten
   **18px**; sağındaki `EN` düğmesine uzaklık kendi `margin-right:4px`'ten
   **4px** — asimetrik, ayraç düğmeye yapışık duruyordu. (@390 topbar
   `display:none`, madde orada zaten görünmüyor.)

   Yeni sayı UYDURULMADI: aynı üst bantta, hemen solda, birebir aynı işi
   gören emsal kalıp zaten var — `.tb-left{gap:16px}` içindeki
   `<span class="tb-div">` de bir ayracı iki flex komşusu arasında
   SİMETRİK 16px ile ortalıyor. Aynı 16px değeri buraya da uygulandı:
   `.tb-right` boşluğu 18'den 16'ya, ayracın sağ marjini 4'ten 16'ya
   çekildi → iki yan da 16px, 4px ızgarasında. `.topbar .wrap{height:40px}`
   satırına dokunulmadı, bant yüksekliği değişmiyor.
   ===================================================================== */
.topbar .tb-right{gap:16px}
.tb-lang::before{margin-right:16px}


/* =====================================================================
   K28 · ÜST ÜSTE BİNEN .lead PARAGRAFLARI — ÖLÇÜLEN KUSUR
   ---------------------------------------------------------------------
   `.sec-head` bir ızgara ve `.lead` kuralı her lead'i AYNI hücreye
   pinliyor (`grid-row:3; grid-column:1/-1`, satır ~194). Başlık bloğunda
   İKİ paragraf varsa ikisi aynı hücreye düşüyor ve metin metnin ÜSTÜNE
   biniyor — okunmuyor.

   ÖLÇÜM: 66 sayfa tarandı, kusur `aktivite-gunlugu-v1`de İKİ yerde
   (“Bu veriler nereden geliyor?” ve “Aktivite kayıtların”); başka sayfada
   yok. Sayfaya yama yazmak yerine tuzak KAYNAKTA kapatılıyor — aynı
   işaretleme yarın başka sayfada yazılırsa sessizce kırılmasın.

   İlk lead 3. satırda kalır (mevcut düzen değişmez); sonrakiler otomatik
   yerleşir, yani ikinci 4., üçüncü 5. satıra geçer — sayı sınırı yok.
   Tam genişlik ve üst boşluk korunur.
   ===================================================================== */
.sec-head .lead+.lead,
.cat-head .lead+.lead,
.guide-head .lead+.lead{
  grid-row:auto;grid-column:1/-1;margin-top:10px;
}

/* =====================================================================
   K28 · `.ff-pop-clear` — DOKUNMA HEDEFİ + KONTRAST
   ---------------------------------------------------------------------
   Filtre açılırındaki "Temizle" düğmesi ölçüldü: **49×19 px** (WCAG 2.5.8
   eşiği 24×24) ve metin kontrastı **3.54:1** (eşik 4.5:1 — 12px kalın
   metin "large text" sayılmaz).
   Renk düzeltmesi YENİ BİR KARAR DEĞİL: kabuk aynı işi R6'da `.eyebrow`
   için yapmıştı — `--fit` (#009d4f, 3.54:1) yerine `--fit-deep`
   (#007a3d, 5.45:1). Aynı token, aynı gerekçe.
   Yükseklik 19 → 26px'e dolguyla çıkıyor; açılırın düzeni bozulmasın diye
   yatay dolgu negatif kenar boşluğuyla dengeleniyor.
   ===================================================================== */
.ff-pop-clear{
  color:var(--fit-deep);
  /* R16/2 · 26 → 44px. Görsel boyut aynı kalsın diye dolgu büyütülüp negatif
     kenar boşluğuyla geri alındı — `.kyt-btn`in deseni: hedef 44, göz 26. */
  padding:14px 8px;margin:-14px -8px;
  min-height:44px;
  display:inline-flex;align-items:center;
}


/* =====================================================================
 CHALLENGE KART ROZETLERİ — .cm-state / .cm-len
 ---------------------------------------------------------------------
 R15/2'ye kadar challenge-merkezi-v1.html'in KENDİ stiliydi. Challenge'larım
 modül sayfası da aynı kartı basınca iki kopya olacaktı; kural kabuğa taşındı
 ve yerel kopya SİLİNDİ (tek kaynak — yeni sınıf üretilmedi, değerler birebir).
 ===================================================================== */
.cm-state{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:var(--radius-sm);background:var(--fit);color:#fff}
.cm-state.wait{background:rgba(255,255,255,.94);color:var(--slate)}
.cm-state.done{background:rgba(20,18,12,.78);color:#fff}
.cm-len{position:absolute;top:12px;right:12px;z-index:2;background:rgba(20,18,12,.72);color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:var(--radius-sm)}

/* R15/2 · CHALLENGE'LARIM — kural üçlüsünün ızgarası. `.fpx-kural` yeni;
   diğer her şey (.fp-card/.fpx-acts/.cc-card/.hub-grid) var olan kitten. */
.fpx-kural{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fpx-kural .fp-card p{font-size:14px;color:var(--slate-2);font-weight:500;line-height:1.65}
@media (max-width:900px){ .fpx-kural{grid-template-columns:minmax(0,1fr)} }


/* =====================================================================
 FORM VE HESAP KİTİ — ÜÇ SAYFADAN KABUĞA
 (giris-v1 · hesabim-v1 · odemelerim-v1 → assets/css/fit-shell.css)
 ---------------------------------------------------------------------
 🔴 BU BLOK KABUĞA YAZILMAK ÜZERE HAZIRLANDI, HENÜZ YAZILMADI.
    Kabuğa yalnız Ajan 4 / lead yazar (fit-kit.md §11).

 NEDEN TAŞINIYOR
 ---------------
 `.fk-cc*` ailesi ÜÇ sayfada birebir tekrarlanıyordu: giris-v1 36 geçiş ·
 hesabim-v1 32 · odemelerim-v1 30. VERİ zaten tek kaynakta
 (`assets/js/fit-ulke.js`, 199 ülke) ama GÖRÜNÜM üç ayrı `<style>`de
 duruyordu: bir ölçü düzeltilince üç dosyanın da elle güncellenmesi
 gerekiyordu. Üç kopyanın halihazırda BİRBİRİNDEN AYRILDIĞI ölçüldü
 (aşağıdaki sapma listesi) — yani "üç kopya bir gün ayrışır" bir tahmin
 değil, olmuş bir olay.

 NASIL ÖLÇÜLDÜ
 -------------
 Playwright · Chromium · 1440×1200 · `?auth=1` · `getComputedStyle` +
 `getBoundingClientRect`. Betikler: scratchpad/cc-olcum.mjs ·
 cc-sapma.mjs · hs-sapma.mjs · cc-is1.mjs. Kontrast oranları WCAG 2.x
 bağıl parlaklık formülüyle hesaplandı.

 BİRLEŞTİRME KURALI (bağlayıcı, keyfi değil)
 -------------------------------------------
 1. Üç kopya AYNIYSA → dokunulmaz, olduğu gibi taşınır.
 2. AYRIŞMIŞSA → ölçülebilir bir gerekçe (WCAG eşiği, kit ölçüsü) varsa
    o kazanır; yoksa çoğunluk (2/3) kazanır.
 3. Ölçülebilir gerekçe de çoğunluk da yoksa → TAŞINMAZ, §F'de soru
    olarak durur. Sapmayı çözmeden taşımak üç ekranı birbirine
    benzemez hâlde DONDURMAK olur.
 Yeni renk · yeni ölçü · yeni token ÜRETİLMEDİ; her değer üç dosyanın
 birinde zaten vardı.

 ÖLÇÜLEN SAPMALAR VE KARARLARI
 -----------------------------
 S1 · `.fk-input::placeholder` — giris #a7a7a7 · hesabim #8d8d8d ·
      odemelerim #6f6f6f. Zemin `--bg` (#f9f9f9) üstünde kontrast
      2.28:1 · 3.15:1 · 4.77:1. WCAG 1.4.3'ü (4.5:1) yalnız #6f6f6f
      geçiyor → **#6f6f6f**. (Kural 2, ölçülebilir gerekçe.)
 S2 · `.fk-cc-search input::placeholder` — aynı üçlü, aynı gerekçe →
      **#6f6f6f**.
 S3 · `.fk-cc-list li .kod` ve `.fk-cc-bos` — giris `--muted`
      (rgb 113,113,113) · diğer ikisi `--slate-2` (rgb 86,81,74).
      İkisi de AA geçiyor (4.88:1 · 7.87:1) → çoğunluk **`--slate-2`**.
 S4 · `.fk-cc-pop[hidden]{display:none}` — hesabim ve odemelerim'de VAR,
      giris'te YOK. Bugün zararsız (`.fk-cc-pop` `display` bildirmediği
      için tarayıcının `[hidden]` kuralı geçiyor), ama kabuk ileride
      `display` verirse giris sessizce bozulurdu → **kural taşınır**.
 S5 · `.fk-eye` — giris 44×44 (`right:4px`, `.fk-pass .fk-input`
      `padding-right:56px`) · hesabim 36×36 (`right:7px`, dolgu 50px).
      36px WCAG 2.5.8'in (44×44) ALTINDA → **giris'in ölçüsü**.
      `.fk-eye:hover` rengi `--fit` / `--fit-deep` ayrımında çoğunluk
      yok; `--fit-deep` alındı çünkü `.fk-help i` de bu blokta
      `--fit-deep`e indi (S6) ve ikisi aynı vurgu ailesi.
 S6 · `.fk-help i` — giris `--fit` · diğer ikisi `--fit-deep` →
      çoğunluk **`--fit-deep`**.
 S7 · `.fk-input,.fk-select,.fk-textarea` `min-height:44px` —
      yalnız odemelerim'de var. Kit §7 zaten "input yüksekliği 44px"
      diyor; kuralsız kalan `.set-row .fk-select` hesabim'de **35px**
      ölçüldü (WCAG 2.5.5 altı) → **min-height:44px taşınır**.
      Serbest `.fk-input` üç sayfada da 45px, değişmiyor.
 S8 · `.fk-textarea` min-height — hesabim 104px · odemelerim 120px.
      Kit §7 ölçümü 108px (kutu yüksekliği; 104 + 2px kenarlık = 106,
      120 + 2 = 122). 104 kite 2px, 120 ise 14px uzak → **104px**.
 S9 · Hata API'si — giris `.fk-error` + `.fk-field.has-error`;
      hesabim · odemelerim · pro-odeme `.fk-hata` + `.fk-hata.show` +
      `.fk-input.is-err`. Kanon **`.fk-hata`** (3 sayfa). Bu blok
      `.fk-error`ı TAŞIMIYOR → giris-v1'in markup'ı ve script'i FAZ 2'de
      yeniden adlandırılmalı (16 `fk-error` + 5 `has-error` geçişi).
      Ayrıntı §F2.
 S10· Hata rengi — giris `--au-danger` (#b3261e) · hesabim `--hs-danger`
      (#b3261e, aynı renk farklı ad) · odemelerim `--hs-warn` (#8a4b00).
      İki sayfa aynı kırmızıda → **`--hs-danger`**. odemelerim'in kahve
      tonu hata değil UYARI paletidir (`.hs-warn` kutusu); alan hatası
      ile uyarı kutusunun aynı rengi taşıması ayrımı siliyordu.
 S11· `.tgl` — hesabim ray zemini #cfcac1, kap yüksekliği **26px**;
      odemelerim #8f8a82, **44px**. #cfcac1 beyaz üstünde 1.63:1 (WCAG
      1.4.11'in 3:1'i altında), #8f8a82 3.43:1; 26px de 2.5.8 altında →
      **odemelerim'in ikisi de**. Görsel ray yine 46×26, yükseklik
      etiketten geliyor — kit ölçüsü büyütülmedi.
 S12· `.uys-manage` — hesabim `padding:9px 16px`, ölçülen yükseklik
      **36px**; odemelerim `10px 16px` + `min-height:44px`, ölçülen 44 →
      **odemelerim** (2.5.8). `:focus-visible` halkası da yalnız
      odemelerim'de vardı, taşındı: odak görünürlüğü pazarlık konusu
      değil.
 S13· İkincil metin `--muted` / `--slate-2` ayrımı — YALNIZ iki sayfanın
      ÇELİŞTİĞİ yerde çözüldü (`.uys-plan` · `.uys-renew` ·
      `.uys-price span` · `.hs-facts dt` · `.hs-state` → `--slate-2`).
      İki sayfanın da `--muted` yazdığı yerlere (`.sub-tier-price span`
      · `.sub-inv-desc small`) DOKUNULMADI — sapma yoksa karar da yok.
 S14· `.hs-warn` / `.hs-check` taban paleti — hesabim tabanı renksiz
      bırakıp rengi `.warn-card` / `.danger-card` sarmalayıcısından
      alıyor; odemelerim sarmalayıcısız kullanıyor ve rengi tabana
      yazıyor. Ölçüldü: hesabim'in HER `.hs-warn`ı bir warn/danger
      kartın içinde, odemelerim'inkilerin hiçbiri değil. Taban =
      uyarı paleti + `.danger-card` üzerine yazıyor → **iki sayfa da
      bugünkü görünümünü birebir koruyor** (kayıpsız birleşme).

 TAŞINMAYANLAR VE SEBEPLERİ
 --------------------------
 · `.form-card` — bu üç sayfanın HİÇBİRİNDE yok (hesabim'de sökülmüş,
   yerine `.pc-head/.pc-body/.pc-foot` gelmiş). antrenor-ol · destek ·
   pro-odeme'de var ve dolgusu ÜÇÜ DE FARKLI (24px 26px · 26px · 28px).
   Ayrı bir sapma çözme turu ister; bu blokta yeri yok.
 · `.cc-*` (kayıtlı kart satırı) — TEK sayfada: odemelerim. hesabim'den
   2026-08-29'da taşınmış, orada kopya bırakılmamış. Tek kullanıcılı kural
   kabuğa çıkmaz.
 · `.hs-col` · `.hs-rail` · `.hs-sec` · `.hs-body` · `.hs-go` ·
   `.hs-save` · `.hs-list` — hesabim'e özgü SAYFA YERLEŞİMİ, kit değil.
 · `.sub-inv-*` · `.sub-free*` — tek sayfada (hesabim).
 · `.set-row` ailesi — zaten kabukta (`fit-shell.css:1431-1440`); iki
   sayfa kabuğun kuralının aynısını yerelde tekrarlıyor. Bu bir TAŞIMA
   değil SİLME kalemi; §E5'e bak.
 · `.uys-*` ≤640 sıralaması — iki sayfa farklı sıra veriyor (hesabim
   fiyat `order:1`, odemelerim `order:3`) ve hangisinin doğru olduğunu
   söyleyecek bir ölçü yok. Yerel kalır, §F3'te soru olarak duruyor.
 ===================================================================== */


/* ---------------------------------------------------------------------
 §A · TOKENLER — `:root` bloğuna
 ---------------------------------------------------------------------
 🔴 DİKKAT: kabukta bugün hiçbir tehlike/uyarı tokeni YOK (ölçüldü:
 fit-shell.css'te `danger` ve `hs-warn` geçişi sıfır). Bu altı değişken
 hesabim-v1'in `:root`unda tanımlı; odemelerim aynı üç uyarı tokenini
 BİREBİR tekrarlıyor. Aşağıdaki kurallar bu tokenleri okuduğu için
 taşınmaları zorunlu — yeni renk üretilmiyor, var olan taşınıyor.
 giris-v1 aynı kırmızıyı `.au-card{--au-danger:#b3261e}` diye YEREL
 tanımlıyor; tint'i bir basamak farklı (#fdeceb ≠ #fdecea) — kanon
 hesabim'in değeri. --------------------------------------------------- */
:root{
  --hs-danger:#b3261e; --hs-danger-dark:#8c1d17;
  --hs-danger-tint:#fdecea; --hs-danger-line:rgba(179,38,30,.34);
  --hs-warn:#8a4b00; --hs-warn-tint:#fdf3e4; --hs-warn-line:rgba(138,75,0,.30);
}


/* ---------------------------------------------------------------------
 §B · FORM ALANI KİTİ — `.fk-*`
 ---------------------------------------------------------------------
 Üç sayfada da var; kit §7'nin CSS karşılığı. Bugün ayrıca yedi sayfa
 daha (antrenor-ol · destek · destek-talebi-detay · iletisim · pro-odeme
 · reklam-ver · programlarim) kendi `.fk-*` kopyasını taşıyor — onlar bu
 turun kapsamı değil, ama kabukta tek kural durunca birer birer
 silinebilir hâle geliyorlar.
 --------------------------------------------------------------------- */
.fk-field{margin-bottom:22px}
.fk-field:last-child{margin-bottom:0}

.fk-label{display:flex;align-items:baseline;gap:7px;font-size:14px;font-weight:700;color:var(--slate);margin-bottom:9px}
/* F1 · ZORUNLU ALAN YILDIZI — KARARA BAĞLANDI (Beyar, 2026-08-30).
   Üç sayfa üç ayrı renk taşıyordu: `#b3261e` (giris) · `--fit-deep`
   (hesabim) · `--fit-ink` (odemelerim). Üçü de kontrastı geçiyordu,
   çoğunluk yoktu — ölçüm karar veremediği için soru olarak duruyordu.
   KARAR: **marka yeşili**. Gerekçe: yıldız bir HATA değildir; form
   doldurulmadan önce de oradadır ve "bu alan gerekli" diye İŞARET eder.
   Kırmızı gerçek alan hatasına (`.fk-hata`, `--hs-danger`) saklanır —
   ikisi aynı rengi paylaşsaydı hata durumu görsel ağırlığını yitirirdi.
   Değer kit §3'ün "üst etiket" rengiyle birebir aynı: rgb(0,122,61). */
.fk-label .req{color:var(--fit-deep)}
.fk-label .opt{font-size:11.5px;color:var(--muted);font-weight:500}
.fk-label .fk-count{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:.02em}

/* S7 · `min-height:44px` ÖLÇÜMLE GELDİ: dolgudan doğan yükseklik serbest
   alanda 45px ama dar `.set-row .fk-select`te 35px, `select`te 42px
   çıkıyordu — ikisi de WCAG 2.5.5'in altında. Kit §7 zaten 44px diyor;
   yeni ölçü üretilmedi, kitin ölçüsü zorlandı. */
.fk-input,.fk-select,.fk-textarea{
  width:100%;min-height:44px;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),box-shadow .2s var(--ease);
}
/* S1 · #6f6f6f = `--bg` üstünde 4.77:1. Elenenler #a7a7a7 (2.28:1) ve
   #8d8d8d (3.15:1); ikisi de WCAG 1.4.3'ün 4.5:1'ini geçmiyordu. */
.fk-input::placeholder,.fk-textarea::placeholder{color:#6f6f6f}
.fk-input:focus,.fk-select:focus,.fk-textarea:focus{border-color:var(--fit);box-shadow:0 0 0 3px color-mix(in srgb, var(--marka) 14%, transparent)}
/* S8 · 104px: kit §7'nin ölçtüğü 108px kutuya 2px uzak (104+2 kenarlık);
   elenen 120px 14px uzaktı. */
.fk-textarea{min-height:104px;resize:vertical;line-height:1.6}
.fk-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image: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");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}

.fk-help{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:8px;line-height:1.5}
.fk-help i{color:var(--fit-deep);font-size:12px;margin-top:2px;flex:none}
.fk-help.done{color:var(--fit-deep)}

/* S9/S10 · Hata kanonu: `.fk-hata` + `.show` + `.is-err`, renk
   `--hs-danger`. Renk TEK BAŞINA taşıyıcı değil — kural ikonlu satır
   bekliyor (`<i class="fa-solid fa-circle-exclamation">`), giris-v1'in
   kendi kuralında yazdığı gibi. */
.fk-hata{display:none;align-items:flex-start;gap:7px;font-size:12.5px;font-weight:700;color:var(--hs-danger);margin-top:8px;line-height:1.5}
.fk-hata.show{display:flex}
.fk-hata i{font-size:12px;margin-top:2px;flex:none}
.fk-input.is-err,.fk-select.is-err{border-color:var(--hs-danger);box-shadow:0 0 0 3px rgba(179,38,30,.10)}

.fk-grid{display:grid;gap:16px 18px}
.fk-grid .fk-field{margin-bottom:0}
.fk-grid.c2{grid-template-columns:1fr 1fr}
.fk-grid.c3{grid-template-columns:repeat(3,1fr)}
/* Alanlar arası boşluk 22px'tir; ızgara↔ızgara geçişi 18px'te kalmıştı
   (hesabim §C18 ölçümü), ikisi tek ritme indi. */
.fk-grid+.fk-grid{margin-top:22px}
.fk-grid+.fk-field,.fk-field+.fk-grid{margin-top:22px}

/* şifre göster/gizle — S5: 44×44 dokunma hedefi (WCAG 2.5.8).
   Elenen hesabim ölçüsü 36×36 idi. Alanın sağ dolgusu düğmeyi
   kapsayacak kadar: 44 + 4 (sağ boşluk) + 8 (nefes) = 56. */
.fk-pass{position:relative}
.fk-pass .fk-input{padding-right:56px}
.fk-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:14px;cursor:pointer;display:grid;place-items:center;transition:.18s var(--ease)}
.fk-eye:hover{color:var(--fit-deep);background:var(--fit-wash)}
.fk-eye:focus-visible{outline:3px solid var(--fit);outline-offset:2px;border-radius:var(--radius-sm)}


/* ---------------------------------------------------------------------
 §C · ÜLKE KODLU TELEFON — `.fk-tel` / `.fk-cc*`
 ---------------------------------------------------------------------
 🔴 VERİ VE DAVRANIŞ BURADA DEĞİL: `assets/js/fit-ulke.js`. 199 ülke,
 bayrak üretimi, arama, klavye ve seçim orada; sayfalar yalnız kabı
 basıp `FIT_ULKE.kur()` çağırıyor. Kap sözleşmesi o dosyanın başında
 yazılı. Bu blok o bileşenin GÖRÜNÜMÜDÜR ve üç sayfadan buraya geliyor.
 --------------------------------------------------------------------- */
.fk-tel{position:relative}
.fk-tel .fk-input{padding-left:104px}

/* `top/bottom:0` ÖLÇÜMLE GELDİ: `1px` içeriden oturunca düğme 96×43
   çıkıyordu (alan 45px), yani dokunma hedefi 1px eksikti (WCAG 2.5.5).
   Kenardan kenara oturunca 96×45 — üç sayfada da ölçüldü.
   ⚠ Hesabim ve odemelerim'in yorumları "giris-v1 hâlâ 1px'li" diyor;
   BU ARTIK DOĞRU DEĞİL (ec17964 ile düzeltilmiş, ölçüldü: 96×45).
   Yorum taşınırken güncellendi. */
.fk-cc{
  position:absolute;left:1px;top:0;bottom:0;width:96px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--slate);
  background:var(--bg-cream);border:0;border-right:1px solid var(--line);
  border-radius:var(--radius-md) 0 0 var(--radius-md);cursor:pointer;
  transition:background .2s var(--ease);
}
.fk-cc:hover{background:var(--fit-tint)}
.fk-cc:focus-visible{outline:3px solid var(--fit);outline-offset:-3px}
.fk-cc-flag{font-size:16px;line-height:1}
.fk-cc i{font-size:10px;color:var(--muted);transition:transform .2s var(--ease)}
.fk-cc[aria-expanded="true"] i{transform:rotate(180deg)}

.fk-cc-pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:min(360px,100%);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--sh-lg);overflow:hidden;
}
/* S4 · giris-v1'de eksikti. Bugün `.fk-cc-pop` `display` bildirmediği
   için tarayıcının `[hidden]` kuralı geçiyordu; kabuk ileride `display`
   verirse o sayfa sessizce açık kalırdı. Kural açıkça yazılır. */
.fk-cc-pop[hidden]{display:none}

.fk-cc-search{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line)}
.fk-cc-search i{color:var(--muted);font-size:12.5px;flex:none}
.fk-cc-search input{flex:1;min-width:0;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:500;color:var(--slate);padding:4px 0}
.fk-cc-search input:focus{outline:none}
/* S2 · S1 ile aynı gerekçe: #a7a7a7 kontrastı 2.28:1'de kalıyordu. */
.fk-cc-search input::placeholder{color:#6f6f6f}

.fk-cc-list{list-style:none;margin:0;padding:6px;max-height:264px;overflow-y:auto}
/* satır en az 44px (WCAG 2.5.5) — ölçüldü, üç sayfada da 44 */
.fk-cc-list li{display:flex;align-items:center;gap:11px;padding:0 10px;min-height:44px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--slate);cursor:pointer}
.fk-cc-list li .bay{font-size:17px;line-height:1;flex:none}
.fk-cc-list li .ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* S3 · `--slate-2` (7.87:1) — elenen `--muted` de geçiyordu (4.88:1)
   ama üç sayfanın ikisi zaten bu tokendeydi. */
.fk-cc-list li .kod{color:var(--slate-2);font-weight:700;font-size:13px;flex:none}
.fk-cc-list li:hover,.fk-cc-list li.on{background:var(--fit-tint)}
.fk-cc-list li[aria-selected="true"]{font-weight:700}
.fk-cc-list li[aria-selected="true"] .kod{color:var(--fit-deep)}
/* Boş durum: liste boşalınca "Eşleşen ülke yok." satırı görünür —
   `fit-ulke.js` `bos.hidden`ı sürüyor, sayfa değil. */
.fk-cc-bos{padding:18px 14px;font-size:13.5px;color:var(--slate-2);font-weight:500;text-align:center}


/* ---------------------------------------------------------------------
 §D · HESAP / ÖDEME KİTİ — hesabim-v1 ve odemelerim-v1 ortak
 ---------------------------------------------------------------------
 Bu aile iki sayfada tekrarlanıyor. `.fk-cc` kadar geniş bir tekrar değil
 ama aynı kusuru taşıyor: aynı kutunun iki kopyası ve aralarında
 ölçülmüş dokunma hedefi farkları (S11 · S12).
 --------------------------------------------------------------------- */

/* ---- paket / abonelik kartı ---- */
.sub-tier-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
/* `flex-wrap:wrap` odemelerim'de tabanda, hesabim'de yalnız ≤640'ta idi;
   geniş ekranda kalemler zaten sığdığı için taban hâli üst küme. */
.sub-tier-top{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sub-tier-badge{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,var(--fit),var(--fit-ink));padding:6px 13px;border-radius:var(--radius-pill)}
.sub-tier-badge.free{background:var(--bg-cream);color:var(--slate-2);border:1px solid var(--line)}
.sub-tier-info{flex:1;min-width:0}
.sub-tier-info b{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:15.5px;color:var(--slate);font-weight:700}
.sub-renew{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate-2);font-weight:500;margin-top:5px}
.sub-renew i{color:var(--fit-deep);font-size:11px}
.sub-tier-price{flex:none;text-align:right}
.sub-tier-price b{font-size:22px;color:var(--slate);font-weight:800;letter-spacing:-.03em}
.sub-tier-price span{display:block;font-size:12px;color:var(--muted);font-weight:500}
.sub-tier-body{padding:18px 20px;border-bottom:1px solid var(--line)}
.sub-tier-feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sub-tier-feats span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--slate-2);background:var(--bg);border:1px solid var(--line);padding:7px 12px;border-radius:var(--radius-sm)}
.sub-tier-feats span i{color:var(--fit-deep);font-size:11px}
.sub-tier-acts{display:flex;align-items:center;padding:16px 20px;gap:12px;flex-wrap:wrap}
.sub-tier-acts .btn{padding:12px 20px;font-size:13.5px}

/* ---- künye ızgarası ve durum hapı ---- */
.hs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;margin:0}
.hs-facts div{background:var(--paper);padding:14px 16px;min-width:0}
.hs-facts dt{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2)}
.hs-facts dd{font-size:14.5px;font-weight:700;color:var(--slate);margin:5px 0 0;letter-spacing:-.01em}
.hs-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 10px;border-radius:var(--radius-sm);white-space:nowrap}
.hs-pill.on{color:var(--fit-deep);background:color-mix(in srgb, var(--marka) 10%, transparent);border:1px solid color-mix(in srgb, var(--marka) 24%, transparent)}
.hs-pill.off{color:var(--slate-2);background:var(--bg);border:1px solid var(--line)}
.hs-pill.due{color:var(--hs-warn);background:var(--hs-warn-tint);border:1px solid var(--hs-warn-line)}

/* ---- uyarı kutusu · onay kapısı · durum satırı ----
   S14 · Taban UYARI paletini taşır (odemelerim'in sarmalayıcısız
   kullanımı), `.danger-card` üzerine yazar (hesabim'in tehlike kartı).
   Ölçüldü: hesabim'in iki `.hs-warn`ı da bir warn/danger kartın
   içinde, odemelerim'in ikisi de dışında — iki sayfa da bugünkü
   rengini birebir koruyor. */
.hs-warn{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;font-weight:500;line-height:1.55;border-radius:var(--radius-md);padding:14px 16px;margin-bottom:18px;
  color:var(--hs-warn);background:var(--hs-warn-tint);border:1px solid var(--hs-warn-line)}
.hs-warn i{flex:none;font-size:15px;margin-top:2px}
.hs-warn b{font-weight:800}
.danger-card .hs-warn{color:var(--hs-danger-dark);background:var(--hs-danger-tint);border-color:var(--hs-danger-line)}

.hs-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.5;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px}
.hs-check input{flex:none;width:19px;height:19px;margin-top:1px;accent-color:var(--hs-warn);cursor:pointer}
.danger-card .hs-check input{accent-color:var(--hs-danger)}
.hs-check:hover{border-color:#d6d0c6}

.hs-gate{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.hs-gate-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hs-state{flex:1;min-width:200px;display:flex;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:600;color:var(--slate-2);line-height:1.5;margin:0}
.hs-state i{flex:none;margin-top:3px;font-size:11.5px;color:var(--fit-deep)}
.hs-state.blocked{color:var(--hs-warn)}
.hs-state.blocked i{color:var(--hs-warn)}
.hs-state.done{color:var(--fit-deep)}

.btn-warn{background:var(--paper);color:var(--hs-warn);border:1px solid var(--hs-warn-line)}
.btn-warn:hover{border-color:var(--hs-warn);background:var(--hs-warn-tint);transform:translateY(-2px)}
.btn-danger{background:var(--hs-danger);color:#fff}
.btn-danger:hover{background:var(--hs-danger-dark);transform:translateY(-2px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none !important}

/* ---- anahtar (toggle) ----
   S11 · Görsel ray 46×26 (kit ölçüsü, BÜYÜTÜLMEDİ); dokunma hedefi
   44px'e ETİKETTEN çıkarılıyor. Ray zemini #8f8a82: beyaz üstünde
   3.43:1, WCAG 1.4.11'in 3:1 eşiğini geçiyor. Elenen #cfcac1 1.63:1'de
   kalıyordu — kapalı anahtar görünmüyordu. */
.tgl{position:relative;display:inline-flex;align-items:center;min-height:44px;flex:none;cursor:pointer}
.tgl input{position:absolute;opacity:0;pointer-events:none}
.tgl .tk{width:46px;height:26px;border-radius:var(--radius-md);background:#8f8a82;transition:background .2s var(--ease);position:relative}
.tgl .tk::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-circle);background:#fff;box-shadow:0 1px 4px rgba(33,30,22,.25);transition:transform .2s var(--ease)}
.tgl input:checked+.tk{background:var(--fit)}
.tgl input:checked+.tk::after{transform:translateX(20px)}
.tgl input:focus-visible+.tk{box-shadow:0 0 0 3px color-mix(in srgb, var(--marka) 22%, transparent)}

/* ---- tercih satırındaki dar seçici ----
   `.set-row`ın kendisi ZATEN KABUKTA (fit-shell.css:1431); yalnız bu
   kural eksikti ve iki sayfa yerelde tutuyordu. S7 ile birlikte
   yüksekliği 35px'ten 44'e çıkıyor. */
.set-row .fk-select{width:220px;flex:none;padding:10px 36px 10px 13px;font-size:13px}

/* ---- antrenör paketi satırı ---- */
.uys-list{display:flex;flex-direction:column;gap:14px}
.uys-row{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;transition:.2s var(--ease)}
.uys-row:hover{border-color:#dcdcdc;box-shadow:var(--sh-sm)}
.uys-ava{flex:none;width:52px;height:52px;border-radius:var(--radius-circle);background-size:cover;background-position:center}
.uys-info{flex:1;min-width:0}
.uys-info b{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14.5px;color:var(--slate);font-weight:700}
.uys-info .uys-plan{display:block;font-size:13px;color:var(--slate-2);font-weight:500;margin-top:3px}
.uys-info .uys-renew{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--slate-2);font-weight:500;margin-top:6px}
.uys-info .uys-renew i{color:var(--fit-deep);font-size:11px}
.uys-price{flex:none;text-align:right}
.uys-price b{font-size:17px;color:var(--slate);font-weight:800;letter-spacing:-.02em}
.uys-price span{display:block;font-size:11.5px;color:var(--slate-2);font-weight:500}
.uys-acts{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* S12 · min-height:44px + odak halkası (ölçülen hesabim hâli 36px'ti) */
.uys-manage{font-family:inherit;font-size:13px;font-weight:700;color:var(--slate);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 16px;min-height:44px;cursor:pointer;transition:.2s var(--ease);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.uys-manage:hover{border-color:var(--fit);color:var(--fit-deep);background:var(--fit-wash)}
.uys-manage:focus-visible{outline:3px solid var(--fit-tint);outline-offset:2px}

/* ---- bildirim/açıklama alt satırı ---- */
.ntf-foot{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--slate-2);font-weight:500;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);line-height:1.55}
.ntf-foot i{color:var(--fit-deep);font-size:12px;margin-top:3px;flex:none}
.ntf-foot a{color:var(--fit-deep);font-weight:700}
.ntf-foot a:hover{text-decoration:underline;text-underline-offset:2px}


/* ---------------------------------------------------------------------
 §E · KIRILIM NOKTALARI
 ---------------------------------------------------------------------
 Üç sayfanın media bloklarından yalnız BU KİTE ait satırlar geldi;
 sayfaya özgü satırlar (`.au-*` · `.od-*` · `.pc-*` · `.hs-col` …)
 yerinde kalıyor.
 ⚠ `text-align:left;text-align-last:auto` bildirimleri BURAYA ALINMADI:
 onlar `fit-type.css`in yaslama katmanına karşı yazılmış ve o katman
 sayfa stillerinden SONRA yükleniyor — kabuğa taşınsalardı özgüllük
 sırası değişir ve yaslama geri gelirdi. Sayfada kalırlar (§F4).
 --------------------------------------------------------------------- */
@media (max-width:1024px){
  .fk-grid.c3{grid-template-columns:1fr 1fr}
  .hs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .fk-grid.c2,.fk-grid.c3{grid-template-columns:1fr}
  .hs-facts{grid-template-columns:1fr}
  .sub-tier-top{gap:12px}
  .sub-tier-price{order:3;margin-left:auto;text-align:left}
  .sub-tier-acts .btn{width:100%}
  .set-row{flex-wrap:wrap;gap:10px 14px}
  .set-row .fk-select{width:100%}
  .set-row .tgl,.set-row .sr-act,.set-row .sr-on{margin-left:auto}
  .hs-gate-acts .btn{width:100%}
}

/* Açılır liste dar ekranda alanın tam genişliğine oturur. Üç sayfada da
   aynı eşik ve aynı kural. */
@media (max-width:520px){ .fk-cc-pop{width:100%} }


/* =====================================================================
 §F · KABUĞA GİRMEYENLER — AÇIK SORULAR
 ---------------------------------------------------------------------
 Birleştirme kuralı 3: ölçülebilir gerekçe de çoğunluk da yoksa taşıma.
 Aşağıdakiler cevap bekliyor; cevap gelene kadar üç sayfa kendi
 satırını korur ve FAZ 2'de o satırlar SİLİNMEZ.

 F1 · `.fk-label .req` (zorunlu alan yıldızı) rengi ÜÇ SAYFADA ÜÇ AYRI:
      giris `--au-danger` #b3261e · hesabim `--fit-deep` #007a3d ·
      odemelerim `--fit-ink` #006a35. Üçü de kontrastı geçiyor, çoğunluk
      yok. Bu bir ÜRÜN kararı: yıldız bir HATA mı (kırmızı) yoksa bir
      İŞARET mi (marka yeşili)? Öneri: `--fit-deep` — yıldız hata değil,
      alan doldurulmadan önce de orada duruyor; ayrıca kit §3 "üst
      etiket" rengi de rgb(0,122,61). KARAR BEYAR'IN.

 F2 · Hata API'si tek ada inmeli: `.fk-error`/`.fk-field.has-error` →
      `.fk-hata`/`.fk-hata.show`/`.fk-input.is-err`. Bu bir CSS taşıma
      değil, giris-v1'de MARKUP + SCRIPT değişikliği (16 `fk-error`,
      5 `has-error` geçişi). FAZ 2'de ayrı bir adım olarak yapılmalı ve
      giriş/kayıt formunun doğrulaması yeniden ölçülmeli. Yapılmazsa
      giris-v1 kendi `.fk-error` kurallarını KORUR (bu blok onları
      taşımıyor, silinecek satır listesinde de yoklar).

 F3 · `.uys-*` ≤640 sıralaması iki sayfada farklı: hesabim fiyatı
      `order:1` ile üste alıyor, odemelerim `order:3` ile alta.
      Hangisinin doğru olduğunu söyleyecek bir ölçü yok — dar ekranda
      hangi bilgi önce okunmalı sorusu. Yerel kaldı.

 F4 · `text-align:left;text-align-last:auto` bildirimleri sayfada kalır
      (yukarıda §E'de gerekçesi). Kabuğa taşınırlarsa `fit-type.css`
      yaslamayı geri alır.
 ===================================================================== */

/* =====================================================================
 FATURA BİLGİLERİ FORMU — `#ftModal` ve kardeşleri
 ---------------------------------------------------------------------
 Bu blok `odemelerim-v1.html`in kendi `<style>`ından BURAYA TAŞINDI; tek
 satırı değişmedi. Gerekçe: aynı form artık ödeme akışında da açılıyor
 ve markup'ı `assets/js/fit-fatura-form.js`e çıkarıldı — stil sayfada
 kalsaydı form yalnız o sayfada doğru görünürdü.

 Kutu dilinin geri kalanı zaten kabukta: `.fb-*` modal kabuğu, `.fk-*`
 alan kiti, `.hs-check`. Buraya gelen üç parça sayfaya özgü olanlar:
   · `.ft-seg`  — Bireysel/Kurumsal segment denetimi
   · `.ft-blok` — tipe göre açılıp kapanan kimlik bloğu
   · `.ft-foot` — panelin dibine yapışan kaydet ayağı
 `.od-sonuc` da geldi: formun sonuç şeridi onu kullanıyor. Adı
 `odemelerim`den geliyor ama kuralları sayfaya özgü değil; o sayfadaki
 dokuz tüketicisi aynı seçiciyi aynı bildirimlerle okumaya devam ediyor.
 ===================================================================== */
.od-sonuc{display:none;align-items:flex-start;gap:11px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:15px 17px;margin-top:16px;font-size:13px;font-weight:500;color:var(--slate-2);line-height:1.6}
.od-sonuc.show{display:flex;animation:fadeUp .3s var(--ease)}
.od-sonuc>i{flex:none;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--paper);border:1px solid var(--line);color:var(--slate-2);display:grid;place-items:center;font-size:13px}
.od-sonuc b{display:block;color:var(--slate);font-weight:800;font-size:13.5px;margin-bottom:4px}
.od-sonuc .od-sonuc-txt{flex:1;min-width:0;text-align:left;text-align-last:auto}

/* =====================================================================
 FATURA BİLGİLERİ FORMU — #ftModal
 ---------------------------------------------------------------------
 Modal kabuğu kabuğun `.fb-*` kiti; alanlar `.fk-*` kiti. Buraya yalnız
 ÜÇ yeni parça geldi ve üçü de kit değerleriyle kuruldu:
  · `.ft-seg` — Bireysel/Kurumsal segment denetimi. Açılır liste DEĞİL:
    iki seçenekte segment tek tıkla geçer ve seçili durum ekranda durur.
    Görsel dili sayfanın kendi `.df-fchip` çipiyle aynı (kit §5).
  · `.fk-tel` / `.fk-cc*` — ülke kodu seçicisi. Kural giris-v1'den
    BİREBİR; veri ve davranış `assets/js/fit-ulke.js`te (tek kaynak).
  · `.ft-blok` — tipe göre açılıp kapanan kimlik bloğu.
 🔴 Tip değişince ORTAK ALANLAR SIFIRLANMAZ (en sık yapılan hata):
    iletişim ve adres yerinde kalır, yalnız kimlik bloğu değişir.
 ===================================================================== */
#ftModal:not(.show){display:none}
#ftModal .fb-panel{width:min(640px,100%)}
#ftModal .fb-body{padding:22px 24px 24px}

.ft-seg{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:4px}
.ft-seg button{
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--slate-2);
  background:transparent;border:0;border-radius:var(--radius-sm);
  padding:10px 18px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:.18s var(--ease);
}
.ft-seg button i{font-size:12px}
.ft-seg button:hover{color:var(--fit-deep)}
.ft-seg button[aria-pressed="true"]{background:var(--fit-deep);color:#fff}
.ft-seg button:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
.ft-blok[hidden]{display:none}


/* =====================================================================

/* ---- modal ayağı: hesabim'ın `.pc-foot` kalıbı, kenardan kenara ----
   ⚠ `position:sticky` ÖLÇÜMLE GELDİ: form uzun (panel içeriği 1124px),
   panel 100vh−40 ile 960px'te kapanıp içeriden kayıyor ve "Bilgileri
   Kaydet" 1000px'lik ekranda görünmeyen bölgede (y≈1185) kalıyordu —
   kullanıcı kaydetmek için panelin dibine inmek zorundaydı. Ayak panelin
   altına yapıştırıldı: form kaydırılırken bile birincil eylem ekranda
   durur. Zemin opak (`--paper`), yoksa altından geçen alanlar okunur. */
.ft-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;
  position:sticky;bottom:-24px;z-index:2;background:var(--paper);
  margin-top:24px;padding:20px 0 24px;border-top:1px solid var(--line)}
.ft-foot .note{flex:1 1 100%;font-size:12.5px;color:var(--slate-2);font-weight:500;margin:0;text-align:left;text-align-last:auto}
.ft-foot>.btn{padding:12px 22px}
/* sonuç şeridi ayağın ALTINDA kalır, yapışkan ayak onu örtmesin */
#ftSonuc{position:relative;z-index:1}


/* ═══════════════════════════════════════════════════════════════════════
   v3 · MARKA BLOGU — KELIME MARKASI
   Kural kanonun: kanon/bilesenler.css §27b (`.fit-word-mark`). Oraya
   DOKUNULMADI, kural buraya KOPYALANDI (bilesenler.css yuklenmiyor).
   Olcu kanonun: --marka-kelime-h = 24px, genislik orandan gelir.
   Renk KAPTAN gelir — SVG currentColor tasir.
   ═══════════════════════════════════════════════════════════════════════ */
.fit-word-mark{ height:var(--marka-kelime-h); width:auto; display:block;
                flex:0 0 auto; color:var(--marka); }
/* isaret dustu: kilitlemede kutu ve aradaki bosluk da kalkar */
.fit-brand,.drawer-brand{ gap:0 }
/* koyu hero ustunde — kaynagin kendi kurali `.fit-word b`ye bakiyordu */
.header.at-top .fit-word-mark{ color:#fff }
/* dip / koyu marka zemini — kanon §27b'nin kendi istisnasi */
.footer .fit-word-mark,.dip .fit-word-mark{ color:var(--kagit) }
.foot-lockup .fit-word-mark{ height:28px }
/* cekmece: kaynak kelimeyi 23 -> 18px kucultuyordu, ayni oran */
.drawer-brand .fit-word-mark{ height:19px }
/* sol marka rayi: 46px kutu, kelime markasi kutuya genislikten oturur
   (30px kare yerine). Beyazlatma kaynagin kendi filtresi. */
.sa-rail-logo .fit-word-mark{ width:34px; height:auto }

/* Marka adi AYRI yazilir — kanon karari. Deger kanonun kendi
   kuralindan alindi (deneme/fit-*.html gomulu CSS): 0.26em.
   `.brand-tag .bt-name` kanonda `gap:0` — sayfa ici kilitlemeler
   BITISIK kalir, yalniz ust bandin hapi ayrilir. */
.bs-name .sf{ margin-left:0.26em }