/* =====================================================================
 SAYFAYA ÖZGÜ CSS — DadaFit Pro ödeme akışı
 ---------------------------------------------------------------------
 Kabuk kuralları fit-shell.css'e devredildi. Banner (.lib-top/.lib-crumb/
 .lib-sub), düğmeler (.btn/.btn-primary/
 .btn-ghost), .eyebrow, .sec-head, token'lar 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'ına geçildi. 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İ
    (kabuk varsayılanı --lib-img:none) — Faz 9 harici Unsplash
    bağlantılarını üretimden kaldırmak istiyor.
  · @font-face Gilroy → fit-shell.css'te aynı gövdeyle tanımlı (11 geçiş).
  · @keyframes fadeUp → fit-shell.css:139'da aynı gövdeyle tanımlı.
  · .nav-div, .row-nav button:hover → sökülen eski turuncu kabuğun ölü
    kalıntısı; sayfa markup'ında ikisi de geçmiyor.
  · .tks-row / .tks-row .chip.active → bu sayfada hiç markup'ı yoktu
    (odeme-v1 checkout deseninden kopyalanmış ölü kural).

 TURUNCU KİMLİK TEMİZLİĞİ: --fit kabukta artık DadaFit yeşili
 (#009d4f). Sayfa CSS'inde token'a değil, ELDEN yazılmış turuncuya
 dayanan üç yer vardı ve yeşile çevrildi:
   .fk-input:focus  rgba(225,72,39,.10) → rgba(0,157,79,.10)
   .price-flag      rgba(225,72,39,.09/.25) → rgba(0,157,79,.09/.25)
   .ps-head         linear-gradient(...,#fdf6f3) → #f4fbf7 (yeşil fısıltı)
 Ayrıca .card-visual'ın kahverengi ucu (#3a2317) DadaFit yeşiline döndü.
 ===================================================================== */

/* ---- banner: eyebrow + demo ibaresi aynı satırda (§22) ---- */
.pay-eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* ---- zaten-abone geçişi: ödeme ekranından içeriğe sessiz yol (çıkmaz sokak kırıcı) ---- */
.pay-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)}
.pay-already:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.pay-already i:last-child{font-size:11px}

/* ---- form kiti (fk-* kanonu) ----
 KABUK EKSİĞİ: .fk-* form kiti fit-shell.css'te YOK (0 geçiş), buna karşın
 6 sayfa (antrenor-ol · giris · hesabim · iletisim · reklam-ver + bu sayfa)
 aynı kuralları kendi <style>'ında taşıyor. Kural kabuğa taşınmalı —
 raporlandı. Aynı gerekçe .form-card/.fc-head/.fc-step için de geçerli. */
.fk-input,.fk-select{width:100%;font-family:inherit;font-size:14px;font-weight:500;color:var(--slate);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 15px;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fk-input::placeholder{color:#a7a7a7}
.fk-input:focus,.fk-select:focus{border-color:var(--fit);box-shadow:0 0 0 3px color-mix(in srgb, var(--marka) 10%, transparent)}
.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}
.req{color:var(--fit);font-weight:700}
.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);font-size:12px;margin-top:2px;flex:none}
.fk-grid{display:grid;gap:16px 18px}
.fk-grid .fk-field{margin-bottom:0}
.fk-grid.c2{grid-template-columns:1fr 1fr}

/* ---- ÖDEME YÖNTEMİ SEÇİMİ (yeni adım) ----
   Radyo düğmesi görsel olarak kart satırına dönüşür; erişilebilirlik
   radyo grubunda kalır (klavye ok tuşları, tek tab durağı). Kayıtlı kart
   seçilirse kart formu gizlenir — form gereksiz yere odak sırasında
   durmasın diye `hidden` ile YERLEŞİMDEN de çıkar. */
.pm-list{display:flex;flex-direction:column;gap:12px}
.pm-opt{position:relative;display:flex;align-items:center;gap:14px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);cursor:pointer;transition:.18s var(--ease)}
.pm-opt:hover{border-color:#dcdcdc;box-shadow:var(--sh-sm)}
.pm-opt input{position:absolute;opacity:0;pointer-events:none}
.pm-opt .pm-dot{flex:none;width:20px;height:20px;border-radius:var(--radius-circle);border:1.5px solid #d8d8d8;background:var(--paper);display:grid;place-items:center;transition:.18s var(--ease)}
.pm-opt .pm-dot::after{content:"";width:10px;height:10px;border-radius:var(--radius-circle);background:#fff;transform:scale(0);transition:transform .15s var(--ease)}
.pm-opt input:checked ~ .pm-dot{background:var(--fit);border-color:var(--fit)}
.pm-opt input:checked ~ .pm-dot::after{transform:scale(1)}
.pm-opt input:focus-visible ~ .pm-dot{outline:3px solid var(--fit);outline-offset:2px}
.pm-opt:has(input:checked){border-color:var(--fit);background:var(--fit-tint)}
.pm-opt .pm-mark{flex:none;width:48px;height:34px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:24px;color:#1a1f71}
.pm-opt .pm-mark.mc{color:#c7001b}
.pm-opt .pm-mark.yeni{font-size:15px;color:var(--fit-deep)}
.pm-opt .pm-txt{flex:1;min-width:0}
.pm-opt .pm-txt b{display:block;font-size:14px;color:var(--slate);font-weight:700;letter-spacing:.04em}
.pm-opt .pm-txt span{display:block;font-size:12.5px;color:var(--slate-2);font-weight:500;margin-top:2px}
.pm-opt .pm-vars{flex:none;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--fit-deep);background:color-mix(in srgb, var(--marka) 10%, transparent);border:1px solid color-mix(in srgb, var(--marka) 24%, transparent);padding:3px 10px;border-radius:var(--radius-sm)}
#kartFormu[hidden]{display:none}

/* ---- alan hatası (form doğrulaması GERÇEKTEN çalışır) ---- */
.fk-input.is-err{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.10)}
.fk-hata{display:none;align-items:flex-start;gap:7px;font-size:12.5px;font-weight:700;color:#b3261e;margin-top:8px;line-height:1.5}
.fk-hata.show{display:flex}
.fk-hata i{font-size:12px;margin-top:2px;flex:none}

/* ---- checkout yerleşimi ---- */
.ck-wrap{padding:var(--sec-pad) 0 var(--sec-pad);background:var(--bg-white)}
.wiz-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.wiz-main{min-width:0}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:28px}
.form-card+.form-card{margin-top:20px}
.fc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fc-head h2{font-size:20px;display:flex;align-items:center;gap:11px}
.fc-head h2 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}
.fc-head p{font-size:13px;color:var(--muted);font-weight:500;margin-top:5px}
/* legacy'de markup'ı vardı ama kuralı hiç yazılmamıştı — antrenor-ol-v1'in kanonu */
.fc-step{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:6px 11px;border-radius:var(--radius-sm);white-space:nowrap}

/* ---- kart bilgisi + canlı önizleme ---- */
.pay-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:26px;align-items:start}
.card-visual{position:relative;aspect-ratio:1.586;border-radius:var(--radius-lg);background:linear-gradient(135deg,#26302b 0%,#1b201d 55%,#04354d 100%);color:#fff;padding:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-md)}
.card-visual::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:5px 5px;opacity:.5;pointer-events:none}
.cv-top{display:flex;align-items:center;justify-content:space-between}
.cv-chip{width:38px;height:28px;border-radius:6px;background:linear-gradient(135deg,#e8c879,#b8923f)}
.cv-brand{font-size:23px;color:rgba(255,255,255,.85)}
.cv-num{font-size:19px;font-weight:700;letter-spacing:.14em;margin:auto 0 14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.cv-foot label{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:3px}
.cv-foot b{font-size:13px;font-weight:700;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}

/* ---- dönem alanları (belge §15: aktif paket · başlangıç · bitiş · yenileme) ---- */
.sub-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sf-item{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;min-width:0}
.sf-item label{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sf-item label i{font-size:11px;color:var(--fit)}
.sf-item b{display:block;font-size:14.5px;font-weight:700;color:var(--slate);line-height:1.35}
.sf-item span{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:3px;line-height:1.45}
.sub-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px 15px;background:var(--fit-tint);border:1px solid var(--fit-line);border-radius:var(--radius-md)}
.sub-note i{flex:none;margin-top:2px;color:var(--fit-deep);font-size:13px}
.sub-note p{font-size:12.5px;color:var(--slate-2);font-weight:500;line-height:1.6;margin:0}
.sub-note a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ---- onay kutusu ---- */
.agree{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg);cursor:pointer;transition:.18s var(--ease)}
.agree input{position:absolute;opacity:0;pointer-events:none}
.cbx{flex:none;width:20px;height:20px;border-radius:var(--radius-sm);border:1.5px solid #d8d8d8;background:var(--paper);display:grid;place-items:center;transition:.18s var(--ease)}
.cbx::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;color:#fff;transform:scale(0);transition:transform .15s var(--ease)}
.agree input:checked ~ .cbx{background:var(--fit);border-color:var(--fit)}
.agree input:checked ~ .cbx::after{transform:scale(1)}
.agree:hover .cbx{border-color:var(--fit)}
.agree input:focus-visible ~ .cbx{outline:3px solid var(--fit);outline-offset:2px}
.agree span{font-size:13px;font-weight:500;color:var(--slate-2);line-height:1.55}
.agree span a{color:var(--fit);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.agree-err{display:none;align-items:center;gap:8px;margin-top:11px;font-size:12.5px;font-weight:600;color:#b3261e}
.agree-err i{font-size:12px}
.form-card.is-err .agree{border-color:#b3261e;background:#fdf3f2}
.form-card.is-err .agree-err{display:flex}

/* ---- fatura adımının eylem satırı: düğme + yan not ----
   Kutu dili yeni değil; düğme `.btn`, not `.fk-help` (ikisi de kabukta).
   Buradaki tek iş ikisini aynı satıra almak ve dar ekranda alt alta
   düşürmek. `.sub-facts`/`.sub-note` ile arası kart ritmiyle aynı: 16px. */
.ft-eylem{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.ft-eylem .fk-help{flex:1 1 240px;min-width:0}

/* ---- plan özet sidebar ---- */
.plan-sum{position:sticky;top:128px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);overflow:hidden}
.ps-head{padding:20px 22px;background:linear-gradient(135deg,#fff,#f4fbf7);border-bottom:1px solid var(--line)}
.ps-tier{display:flex;align-items:center;gap:11px;margin-bottom:5px}
.ps-tier i{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--fit-wash);color:var(--fit);display:grid;place-items:center;font-size:17px}
.ps-tier b{font-size:20px;color:var(--slate)}
.ps-tag{font-size:12.5px;color:var(--muted);font-weight:500}
.ps-body{padding:18px 22px 22px}
.ps-feats{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.ps-feats li{display:flex;gap:9px;font-size:13px;font-weight:500;color:var(--slate-2);line-height:1.4}
.ps-feats li i{color:var(--fit-deep);font-size:11px;margin-top:3px;flex:none}   /* kit değeri: --green-deep kitte yok */
.ps-feats li.nitelik i{color:var(--muted)}
.ps-more{font-size:12px;color:var(--muted);font-weight:600;margin:-8px 0 18px}
.ps-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.ps-total .pt-lbl{font-size:13px;color:var(--muted);font-weight:600}
.ps-total .pt-val b{font-size:26px;color:var(--slate);letter-spacing:-.02em}
.ps-total .pt-val span{font-size:12px;color:var(--muted);font-weight:500}
.plan-sum .btn{width:100%}
.ps-note{display:flex;gap:8px;font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.5;margin-top:13px}
.ps-note i{color:var(--fit-deep);margin-top:2px;flex:none}
.ps-switch{font-size:12.5px;text-align:center;margin-top:14px;color:var(--muted);font-weight:500}
.ps-switch a{color:var(--fit);font-weight:700}

/* 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;vertical-align:middle;letter-spacing:.01em}
.price-flag i{font-size:10px}

/* ---- üyelik yönetimi bandı (§15'in kalan alanları hesabım'da yaşıyor) ---- */
.pay-manage{padding:var(--sec-pad) 0 var(--sec-pad);background:var(--bg-cream);border-top:1px solid var(--line)}
.pm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.pm-card{display:flex;flex-direction:column;gap:7px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--sh-sm);transition:.2s var(--ease)}
.pm-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--fit-line)}
.pm-card i:first-child{width:40px;height:40px;border-radius:var(--radius-md);background:var(--fit-wash);color:var(--fit);display:grid;place-items:center;font-size:16px;margin-bottom:5px}
.pm-card b{font-size:15px;color:var(--slate)}
.pm-card p{font-size:13px;color:var(--muted);font-weight:500;line-height:1.55;margin:0;flex:1}
.pm-card .pm-go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--fit-deep);margin-top:4px}
.pm-card .pm-go i{font-size:10px}

/* ---- DURUM EKRANI — body.pay-done ile toggle ----
   🔴 SAHTE BAŞARI SÖKÜLDÜ (Beyar, bağlayıcı). Eski hâli "Üyeliğin
   başladı" + yeşil onay dairesi + sahte fatura satırı basıyordu; bu
   prototipte ödeme alınmadığı için o ekran YALANDI. Yerine akışın
   gerçekten nerede durduğunu yazan NÖTR bir durum ekranı geldi:
   · yeşil "başarı" tonu yok — nötr kutu, nötr ikon
   · fatura satırı yok (fatura kesilmedi)
   · "abonelik başladı" cümlesi yok (başlamadı)
   Girilen bilgiler ekranda ÖZETLENİR ki kullanıcı akışın sonuna kadar
   gittiğini görsün; ama hiçbiri gönderilmedi ve ekran bunu yazar. */
.pay-success{display:none;padding:70px 0 78px;background:var(--bg-white)}
body.pay-done .ck-wrap,body.pay-done .pay-manage{display:none}
body.pay-done .pay-success{display:block}
/* ---- TAHSİLAT REDDEDİLDİ DALI ----
   Yeni ekran değil, aynı panelin ikinci hâli: kutu dili `.suc-*` kitinden,
   yeni renk/ölçü yok. Tek fark uyarı tonu — `.agree-err`in kırmızısı
   (#b3261e) zaten bu sayfada tanımlı, ikinci bir kırmızı icat edilmedi. */
.pay-fail{display:none;padding:70px 0 78px;background:var(--bg-white)}
body.pay-failed .ck-wrap,body.pay-failed .pay-manage{display:none}
body.pay-failed .pay-fail{display:block}
.pay-fail h2{font-size:28px;color:var(--slate);margin-bottom:12px}
.pay-fail .suc-lead{font-size:15.5px;color:var(--slate-2);font-weight:500;margin:0 auto 26px;line-height:1.6}
.pay-fail .suc-ico{color:#b3261e;border-color:#f0cfcc;background:#fdf3f2}
.pay-fail .suc-tier{color:#b3261e;border-color:#f0cfcc;background:#fdf3f2}
.suc-mid{max-width:640px;margin:0 auto;text-align:center}
.suc-ico{width:84px;height:84px;border-radius:var(--radius-circle);background:var(--bg);border:1px solid var(--line);color:var(--slate-2);display:grid;place-items:center;font-size:34px;margin:0 auto 22px}
.suc-tier{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--slate-2);background:var(--bg);border:1px solid var(--line);padding:7px 15px;border-radius:var(--radius-pill);margin-bottom:16px}
.pay-success h2{font-size:28px;color:var(--slate);margin-bottom:12px}
.pay-success .suc-lead{font-size:15.5px;color:var(--slate-2);font-weight:500;margin:0 auto 26px;line-height:1.6}
.suc-panel{max-width:640px;margin:0 auto;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:24px}
.suc-panel+.suc-panel{margin-top:16px}
.suc-panel h3{font-size:16px;color:var(--slate);margin-bottom:4px}
.suc-panel>p{font-size:13px;color:var(--slate-2);font-weight:500;line-height:1.55;margin-bottom:18px}
.suc-liste{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0}
.suc-liste li{display:flex;gap:10px;font-size:13.5px;font-weight:500;color:var(--slate-2);line-height:1.5}
/* `display:flex` [hidden]'ı ezer; akışta yazılMAYAN madde hiç basılmasın diye. */
.suc-liste li[hidden]{display:none}
.suc-liste li i{flex:none;margin-top:3px;font-size:11px;color:var(--slate-2)}
.suc-liste li b{color:var(--slate);font-weight:700}
.suc-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

@media (max-width:1024px){
  .wiz-grid{grid-template-columns:1fr;gap:20px}
  .pay-grid{grid-template-columns:1fr;gap:18px}
  .card-visual{max-width:380px}
  .plan-sum{position:static}
  .pm-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .form-card{padding:18px 16px}
  .fc-head{flex-direction:column;gap:10px}
  .sub-facts{grid-template-columns:1fr}
  .pm-grid{grid-template-columns:1fr}
  .cv-num{font-size:16px}
  .pay-success h2,.pay-fail h2{font-size:23px}
  .pay-already{width:100%;justify-content:center}
  .suc-panel{padding:18px 16px}
  .suc-acts .btn{width:100%}
}