/* =====================================================================
 SAYFAYA ÖZGÜ CSS — DadaFit Pro (üyelik kademeleri ve karşılaştırma)
 ---------------------------------------------------------------------
 Kabuk kuralları fit-shell.css'e devredildi. Buradaki hiçbir kural kabuk
 kopyası değil: banner (.lib-top/.lib-crumb/.lib-sub), demo ibaresi
 düğmeler (.btn/.btn-primary/.btn-ghost), token'lar, pro
 kapısı (.pro-gate/.pg-*) ve @keyframes fadeUp kabuktan gelir.

 GÖÇTE KALDIRILANLAR ve nedenleri:
  · .tb-top / .tb-hero-img / .tb-hero-main / .rd-crumb → kabuğun kanonik
    .lib-top + .lib-crumb banner'ı kullanılıyor. Böylece A2'nin "banner
    üzerinde şeffaf header" davranışı (fit-shell.js OVER_MODE →
    body[data-fit-over="1"]) bu sayfada da açılıyor. Banner'ın eski yemek
    fotoğrafı (harici Unsplash) kalktı, yenisi bilinçli EKLENMEDİ
    (--lib-img:none) — FAZ 9 harici Unsplash bağlantılarını üretimden
    kaldırmak istiyor.
  · .creator-sub / .creator-row / .creator-av / .creator-meta →
    "creator'a ücretsiz abone ol" katmanı eski markaya ait (YouTube-abone
    dili + Unsplash avatarı). DadaFit'te creator premium içeriği yok;
    demo bandı "ücretsiz açık erişim ↔ Pro kilidi" olarak yeniden yazıldı.
  · chrome katmanı kalıntıları — .sec-head/.cat-head/.guide-head grid'i,
    h1..h4, .head-add/.head-bell/.acct-wrap, .acct-item/.acct-menu/
    .acct-pro/.acct-logout, .nav-item:hover .dropdown/.mega, .mega-find/
    .mega-cat-all, .tb-lang-menu, .tb-world-*, .dw-store/.dw-fit,
    .fb-field, .topbar .tb-soc/.tb-div, @keyframes fadeUp: her biri
    fit-shell.css'te AYNI gövdeyle tanımlı (satır 75·100-109·285-288·
    362-441·709-716·785·804·817-826·968-970·139). Göç aracı bunları
    "kısmi eşleşme" diye korudu, çünkü kabuk aynı virgüllü listeyi tek
    kural olarak yazıyor ve araç parça-parça karşılaştırıyor — sahte
    uyarı. Tek tek karşılaştırıldı, hepsi kopya, hepsi silindi.
  · .nav-div, .row-nav/.cat-nav, .row-nav button → sökülen eski kabuğun
    ölü kalıntısı (HANDOFF §2: bu 12 dosyada slider CSS'i var, markup'ı
    yok). Sayfa markup'ında hiçbiri geçmiyor.
  · .pro-card.t1 → "Pro" tek kademe olunca t1 kartı kalmadı (ölü kural).
 ===================================================================== */

/* .btn-fit — KABUK EKSİĞİ: fit-shell.js'in pro kapısı markup'ı
 <a class="btn btn-fit"> yazıyor ama fit-shell.css .btn-fit'i TANIMLAMIYOR;
 30 DadaFit sayfası kuralı kendi <style>'ında taşıyor. Aynı kopya burada da
 gerekti — kural kabuğa taşınmalı (raporlandı). */

/* ---- banner: eyebrow + demo ibaresi aynı satırda (§22) ---- */
.pro-eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* ---- zaten-Pro geçişi: satış sayfasından içeriğe sessiz yol (çıkmaz sokak kırıcı) ---- */
.pro-already{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:11px 18px;border:1px solid rgba(255,255,255,.34);border-radius:var(--radius-pill);background:rgba(255,255,255,.08);color:#fff;font-size:13.5px;font-weight:700;transition:.2s var(--ease)}
.pro-already:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.pro-already i:last-child{font-size:11px}

/* ---- değer önizleme bandı ---- */
.pro-intro{padding:var(--sec-pad) 0 var(--sec-pad-sm);background:var(--bg-white)}
.pro-intro .lead-wrap{max-width:720px}
.pro-intro p{font-size:17px;color:var(--slate-2);font-weight:500;line-height:1.7;margin-bottom:14px}
.pro-intro p:first-of-type{font-size:18px;color:var(--slate)}
.pro-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.pro-perk{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--sh-sm)}
.pro-perk .pp-ico{width:44px;height:44px;border-radius:var(--radius-md);background:var(--fit-wash);color:var(--fit);display:grid;place-items:center;font-size:18px;margin-bottom:13px}
.pro-perk b{display:block;font-size:15px;color:var(--slate);margin-bottom:5px}
.pro-perk p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.6;margin:0}

/* ---- kademe ızgarası (.pro-card t0 = Ücretsiz · t2 = Pro · t3 = Pro Max) ----
   🔴 P8'in "Pro Max AI" adlandırması KALKTI (Beyar, 2026-08-29): üçlü artık
   Ücretsiz · Pro · Pro Max ve üçü de satın alınabilir. Kart sınıfları
   (t0/t2/t3) DEĞİŞMEDİ — fit-paket.js kademe verisinde `kart` alanı olarak
   taşıyor, yani sınıf adı da tek kaynaktan geliyor. */
/* §B11 · bölüm zeminleri beyaz ile gri arasında DÖNÜŞÜMLÜDÜR (zebra).
   Ölçülen kusur (2026-08-29): bu bölüm bir öncekiyle aynı zemini taşıyordu. */
.pro-tiers{padding:var(--sec-pad) 0 var(--sec-pad);background:var(--bg-cream)}
/* `stretch` ÖLÇÜMLE GELDİ — gerekçe paketlerim-v1 ile aynı: üç kart üç
   farklı boydayken düğmeler tek çizgide durmuyordu. */
.pro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:30px}
.pro-card{height:100%}
.pro-daha{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:12.5px;font-weight:700;color:var(--fit-deep)}
.pro-daha i{font-size:10px}
.pro-daha:hover{text-decoration:underline;text-underline-offset:3px}
.pro-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;transition:.25s var(--ease)}
.pro-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.pro-card.featured{border-color:color-mix(in srgb, var(--marka) 45%, transparent);box-shadow:var(--sh-md)}

/* t0 — ücretsiz/giriş seviyesi: soluk, nötr, vurgusuz */
.pro-card.t0{background:#fafafa;border-color:#e4e4e4}
.pro-card.t0:hover{transform:translateY(-5px);box-shadow:var(--sh-sm)}

.pro-flag{position:absolute;top:0;right:22px;transform:translateY(-50%);background:var(--fit);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-sm);box-shadow:0 6px 16px color-mix(in srgb, var(--marka) 32%, transparent)}
.pro-tier{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.pro-tier i{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:18px}
.pro-card.t0 .pro-tier i{background:#ebebeb;color:#8a8a8a}
.pro-card.t0 .pro-tier b{color:#6b6b6b}
.pro-card.t2 .pro-tier i{background:var(--fit-wash);color:var(--fit)}
.pro-card.t3 .pro-tier i{background:#FBF3DC;color:#B8860B}
.pro-tier b{font-size:21px;color:var(--slate);letter-spacing:-.01em}
.pro-desc{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.55;margin:4px 0 0}
.pro-price{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:16px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pro-price b{font-size:30px;color:var(--slate);letter-spacing:-.02em}
.pro-price span{font-size:13px;color:var(--muted);font-weight:500}

/* fiyat tek-kaynak bekleyen uyarı — demo/gerçek ayrımı (§22) */
.price-flag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--fit);background:color-mix(in srgb, var(--marka) 9%, transparent);border:1px solid color-mix(in srgb, var(--marka) 25%, transparent);border-radius:var(--radius-badge);padding:2px 7px;margin-left:6px;vertical-align:middle;letter-spacing:.01em}
.price-flag i{font-size:10px}

.pro-feats{list-style:none;display:flex;flex-direction:column;gap:11px;padding:18px 0;flex:1}
.pro-feats li{display:flex;gap:10px;font-size:13.5px;font-weight:500;color:var(--slate-2);line-height:1.45}
/* docs/fit-kit.md'de `--green-deep` YOK ve `--green` şerhi "yalnız sağlık
   bloğu" diyor; markanın yeşili `--fit-deep`. Kit değerine çekildi. */
.pro-feats li i{flex:none;margin-top:3px;font-size:12px;color:var(--fit-deep)}
.pro-feats li.no{color:#b9b9b9}
.pro-feats li.no i{color:#d5d5d5}
.pro-feats li b{color:var(--slate);font-weight:700}
/* Faz 5'te üretilecek modüller: bağlantı YOK, yalnız ad + ibare */
.pro-feats li .soon,.cmp-table .soon{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-badge);padding:1px 6px;margin-left:2px;white-space:nowrap}

/* P3 · satılmayan kademe: vitrinde görünür, satın alma yolu KAPALI.
   Yeni bir "sönük düğme" dili uydurulmadı — kabuğun kendi `[disabled]`
   deyimi (`.pg[disabled]{opacity:.4;pointer-events:none}`, fit-shell.css)
   aynen kullanıldı. */
.pro-card .btn[disabled]{opacity:.4;pointer-events:none}

/* expand mekanizması — gizli ek özellikler; JS toggle ile açılır */
/* ÖLÜ KURALLAR SÖKÜLDÜ — `.pro-feats-extra` + `.pro-expand-btn` üçlüsü
   elle yazılmış kartların "Tüm özellikler" düğmesine aitti. Kartlar artık
   fit-paket.js'ten basılıyor ve kapalı özellikleri KATLANIR bir
   `<details>` içinde gösteriyor: JS'siz de açılır, klavyeyle de. */
.pro-kapali{border-top:1px solid var(--line);padding-top:4px}
.pro-kapali summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted);padding:10px 0;display:flex;align-items:center;gap:8px;min-height:44px}
.pro-kapali summary::-webkit-details-marker{display:none}
.pro-kapali summary::before{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;transition:transform .2s var(--ease)}
.pro-kapali[open] summary::before{transform:rotate(180deg)}
.pro-kapali summary:hover{color:var(--fit-deep)}
.pro-kapali summary:focus-visible{outline:3px solid var(--fit-tint);outline-offset:2px;border-radius:var(--radius-sm)}
.pro-kapali .pro-feats{padding-top:4px}
.pro-flag.pf-now{background:var(--fit-deeper)}
.pro-feats li.nitelik i{color:var(--muted)}
/* Tablo başlığındaki kademe adı + fiyatı (fit-paket.js basar) */
.cmp-table .ch-name{display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:800;color:var(--slate);letter-spacing:-.01em}
.cmp-table thead th.col-pop .ch-name{color:var(--fit-deep)}
.cmp-table .ch-price{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--muted)}
.cmp-table tbody th[scope="row"]{text-align:left;font-weight:500;color:var(--slate)}
.cmp-group th i{color:var(--fit-deep);margin-right:8px;font-size:11px}
.pro-card .btn{width:100%}

/* ---- karşılaştırma tablosu ---- */
/* §B11 · altı bölümün zemini baştan sona dönüşümlü diziye çekildi:
   intro beyaz · tiers gri · compare beyaz · demo gri · faq beyaz · cta gri.
   Eski dizi iki yerde ardışık beyaz taşıyordu. */
.pro-compare{padding:var(--sec-pad) 0 var(--sec-pad);background:var(--bg-white);border-top:1px solid var(--line)}
/* Ray bilinçli: 4 kolon + uzun özellik adları 390px'e sığmaz. Kutu kendi
 içinde kayar (sayfa gövdesi taşımaz), klavyeyle de gezilebilir olsun diye
 tabindex+role region taşır ve dar ekranda görünür bir ipucu basılır. */
/* ⚠ `position:relative` ÖLÇÜMLE GELDİ, süs değil. Tablo `fit-paket.js`ten
   basılınca 390px'te belge scrollWidth'i 390 → 524 çıktı (134px yatay
   taşma). Kaynak: `.cmp-table thead th` yapışkan (`position:sticky`) ve
   kaydırma kabı KONUMLANDIRILMAMIŞTI — yapışkan başlık kabın dışına,
   belgenin genişliğine yansıyordu. Kap `relative` olunca yapışkanın
   kapsayıcı bloğu kabın kendisi oldu ve ölçüm 390 → 390'a döndü.
   (html/body `overflow-x:clip` taşıdığı için kullanıcı yatay
   kaydıramıyordu, yani görünür kusur değildi; sayı yine de yalandı.) */
.cmp-wrap{position:relative;margin-top:26px;border-radius:var(--radius-lg);overflow-x:auto;border:1px solid var(--line);box-shadow:var(--sh-sm);background:var(--paper)}
.cmp-wrap:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
.cmp-hint{display:none;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cmp-hint i{font-size:11px}
.cmp-table{width:100%;border-collapse:collapse;background:var(--paper);min-width:660px}
.cmp-table th,.cmp-table td{padding:13px 18px;font-size:13.5px;border-bottom:1px solid var(--line)}
.cmp-table thead th{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:#fafbf9;text-align:center;position:sticky;top:0}
.cmp-table thead th:first-child{text-align:left}
.cmp-table thead th.col-pop{color:var(--fit)}
.cmp-table tbody td{text-align:center;color:var(--slate-2);font-weight:600}
.cmp-table tbody td:first-child{text-align:left;font-weight:500;color:var(--slate)}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table .yes{color:var(--fit-deep)}
.cmp-table .nope{color:#cdcdcd}
.cmp-table td.col-pop{background:color-mix(in srgb, var(--marka) 5%, transparent)}
/* grup başlığı satırı — paket içeriği bölüm bölüm okunsun */
.cmp-group th{background:var(--bg);text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);padding:11px 18px}
.cmp-pricerow td{font-weight:800;color:var(--slate);font-size:15px}
.cmp-pricerow td:first-child{font-weight:700}

/* ---- nasıl çalışır bandı: ücretsiz açık erişim ↔ Pro kilidi ---- */
.pro-demo{padding:var(--sec-pad) 0 var(--sec-pad);background:var(--bg-cream)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.demo-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--sh-sm)}
.dc-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill);margin-bottom:14px}
.dc-tag.free{background:#e8f6ef;color:var(--green-deep)}
.dc-tag.paid{background:#FBF3DC;color:#8a6410}
.demo-card h3{font-size:17px;color:var(--slate);margin-bottom:6px}
.demo-card>p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.6;margin-bottom:18px}
.demo-note{font-size:12px;color:var(--muted);font-weight:500;line-height:1.55;margin-top:13px;display:flex;gap:8px}
.demo-note i{margin-top:2px;flex:none;color:var(--green)}

/* içerik satırı — kilitli (ücretli) ve açık (ücretsiz) iki varyant */
.locked-row{display:flex;align-items:center;gap:14px;padding:16px;border:1px dashed #cde1ef;border-radius:var(--radius-md);background:linear-gradient(180deg,#fff,#f7fcf9);cursor:pointer;transition:.2s var(--ease);width:100%;text-align:left;font:inherit}
.locked-row:hover{border-color:var(--fit);box-shadow:var(--sh-sm)}
.locked-row.free{border-style:solid;border-color:var(--fit-line)}
.locked-ico{flex:none;width:48px;height:48px;border-radius:var(--radius-md);background:#FBF3DC;color:#B8860B;display:grid;place-items:center;font-size:19px}
.locked-row.free .locked-ico{background:var(--fit-wash);color:var(--fit)}
.locked-body{flex:1;min-width:0}
.locked-body b{display:block;font-size:14.5px;color:var(--slate)}
.locked-body span{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:1px}
.locked-row .pro-pill{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#8a6410;background:#FBF3DC;padding:6px 11px;border-radius:var(--radius-pill)}
.locked-row .free-pill{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--green-deep);background:var(--fit-wash);padding:6px 11px;border-radius:var(--radius-pill)}

/* ---- sağlık ve veri notu (§13 · §14) ---- */
.pro-note{display:flex;gap:12px;align-items:flex-start;max-width:820px;margin:26px auto 0;padding:16px 18px;background:var(--fit-tint);border:1px solid var(--fit-line);border-radius:var(--radius-md)}
.pro-note i{flex:none;margin-top:2px;color:var(--fit-deep);font-size:15px}
.pro-note p{font-size:13px;color:var(--slate-2);font-weight:500;line-height:1.6;margin:0}
.pro-note a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ---- SSS ---- */
/* §B11 · bölüm zeminleri beyaz ile gri arasında DÖNÜŞÜMLÜDÜR (zebra).
   Ölçülen kusur (2026-08-29): bu bölüm bir öncekiyle aynı zemini taşıyordu. */
.pro-faq{padding:var(--sec-pad) 0 var(--sec-pad-sm);background:var(--bg-white)}
.faq-list{max-width:760px;margin:26px auto 0}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;font-size:14.5px;font-weight:700;color:var(--slate);background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.faq-q i{transition:.25s var(--ease);color:var(--muted);flex:none}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a p{padding:0 20px 18px;font-size:13.5px;color:var(--slate-2);font-weight:500;line-height:1.65;margin:0}
.faq-a p a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ---- alt CTA bandı ---- */
.pro-cta{padding:var(--sec-pad) 0 var(--sec-pad);background:var(--bg-cream);border-top:1px solid var(--line);text-align:center}
.pro-cta h2{font-size:28px;color:var(--slate);margin-bottom:10px}
.pro-cta p{font-size:15.5px;color:var(--muted);font-weight:500;max-width:520px;margin:0 auto 22px;line-height:1.6}
.pro-cta-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:1024px){
  .pro-grid{grid-template-columns:repeat(2,1fr)}
  .pro-perks{grid-template-columns:1fr}
  .demo-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .cmp-hint{display:flex}
}
@media (max-width:640px){
  .pro-grid{grid-template-columns:1fr}
  .pro-cta h2{font-size:23px}
  .pro-already{width:100%;justify-content:center}
  .cmp-table{min-width:560px}
  .cmp-table th,.cmp-table td{padding:11px 13px;font-size:13px}
  .cmp-group th{padding:10px 13px}
  .pro-cta-acts .btn{width:100%}
}