
/* =====================================================================
 ANTRENÖR DETAY — DadaFit Onaylı Antrenör public profil sayfası
 Chrome (token+topbar+header+drawer+bottom-nav+footer+modal+JS) antrenör
 dizininden (antrenorler-v1.html) BİREBİR taşındı. DadaFit recolor: yeşil.
 İskelet referansı diyetisyen-profil (hero + sticky tab + sağlık aksanı)
 antrenör profiline UYARLANDI: koyu+yeşil gradient hero, full-görsel
 program/antrenör kartı, beden-pozitif danışan yorumları. Aksan SADECE #009d4f.
 ===================================================================== */

.acct-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s var(--ease);z-index:80}

html,body{overflow-x:clip}

.fb-success .ok{width:62px;height:62px;border-radius:var(--radius-circle);background:#EAF7F0;color:var(--fit-deep);display:grid;place-items:center;font-size:26px;margin:0 auto 16px}

/* crumb-home (dark hero — legible fit-tint house) */
.cp-crumb .crumb-home i{font-size:12px;color:var(--fit-bright)}
.cp-crumb .crumb-home:hover i{color:#fff}

/* =====================================================================
 SAYFA CSS — ANTRENÖR DETAY / PUBLIC PROFİL
 İskelet diyetisyen-profil'den (hero + sticky tab) UYARLANDI; imza DadaFit
 dili: koyu+yeşil gradient hero, cam/blur kimlik kartı, full-görsel kart.
 ===================================================================== */
:root{
  --fit:var(--marka);          /* DadaFit aksanı (Pantone 7482 C) */
  --fit-deep:var(--marka-koyu);     /* hover / gradient ucu */
  --fit-tint:var(--marka-yikama-2);     /* yumuşak yeşil yıkama */
  --fit-line:var(--marka-cizgi);     /* yeşil-nötr hairline */
  --fit-bright:var(--marka-parlak);   /* koyu zeminde okunur aksan metni */
  --fit-dark:#211E16;     /* vurgu/hero zemini */
}

/* ---- RANDEVU MODALI (seans slot seçici) — apt-* deseni, DadaFit yeşili ---- */
.apt-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}
.apt-overlay.show{opacity:1;visibility:visible}
.apt-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}
.apt-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.apt-panel{width:min(580px,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)}
.apt-modal.show .apt-panel{transform:translateY(0)}
.apt-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.apt-av{flex:none;width:46px;height:46px;border-radius:var(--radius-circle);background-size:cover;background-position:center top}
.apt-head h3{font-size:18px}
.apt-head p{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px;display:inline-flex;align-items:center;gap:6px}
.apt-head p i{color:var(--fit-deep)}
.apt-close{margin-left:auto;flex:none;width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--paper);color:var(--slate);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.2s var(--ease)}
.apt-close:hover{border-color:var(--fit);color:var(--fit)}
.apt-body{padding:22px 24px 24px}
.apt-block+.apt-block{margin-top:22px}
.apt-lbl{font-size:13px;font-weight:700;color:var(--slate);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.apt-lbl i{color:var(--fit-deep);font-size:12px}
.apt-svc{display:flex;flex-direction:column;gap:8px}
.apt-svc label{position:relative;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius-md);cursor:pointer;transition:.18s var(--ease)}
.apt-svc input{position:absolute;opacity:0;pointer-events:none}
.apt-svc label:hover{border-color:var(--fit)}
.apt-svc .rd{flex:none;width:20px;height:20px;border-radius:var(--radius-circle);border:1.5px solid #d8d8d8;display:grid;place-items:center;transition:.18s}
.apt-svc .rd::after{content:"";width:10px;height:10px;border-radius:var(--radius-circle);background:var(--fit);transform:scale(0);transition:.18s}
.apt-svc input:checked~.rd{border-color:var(--fit)}
.apt-svc input:checked~.rd::after{transform:scale(1)}
.apt-svc input:checked~.si b{color:var(--fit-deep)}
.apt-svc label:has(input:checked){border-color:var(--fit);background:var(--fit-tint)}
.apt-svc .si{flex:1;min-width:0}
.apt-svc .si b{font-size:14px;font-weight:700;color:var(--slate);display:block}
.apt-svc .si span{font-size:12px;color:var(--muted);font-weight:500}
.apt-svc .sp{flex:none;font-size:14px;font-weight:700;color:var(--slate)}
.apt-days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.apt-days::-webkit-scrollbar{display:none}
.apt-day{flex:none;min-width:66px;text-align:center;padding:11px 8px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);cursor:pointer;font-family:inherit;transition:.18s var(--ease)}
.apt-day span{display:block;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.apt-day b{display:block;font-size:18px;color:var(--slate);font-weight:700;margin-top:3px}
.apt-day small{display:block;font-size:10px;color:var(--fit-deep);font-weight:600;margin-top:3px}
.apt-day:hover{border-color:var(--fit)}
.apt-day.sel{border-color:var(--fit);background:var(--fit)}
.apt-day.sel span,.apt-day.sel b,.apt-day.sel small{color:#fff}
.apt-day.off{opacity:.4;pointer-events:none}
.apt-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.apt-slot{padding:11px 0;text-align:center;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--slate);transition:.18s var(--ease)}
.apt-slot:hover{border-color:var(--fit);color:var(--fit-deep)}
.apt-slot.sel{border-color:var(--fit);background:var(--fit);color:#fff}
.apt-slot.off{opacity:.4;pointer-events:none;text-decoration:line-through}
.apt-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.apt-sum{font-size:12px;color:var(--muted);font-weight:500}
.apt-sum b{display:block;font-size:15px;color:var(--slate);font-weight:700;margin-top:2px}
.apt-confirm{flex:none}
.apt-success{text-align:center;padding:22px 0 10px}
.apt-success .ok{width:64px;height:64px;border-radius:var(--radius-circle);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:27px;margin:0 auto 16px}
.apt-success h4{font-size:19px;margin-bottom:8px}
.apt-success p{font-size:13.5px;color:var(--muted);font-weight:500;max-width:380px;margin:0 auto;line-height:1.6}
.apt-success .btn{margin-top:18px}
.apt-note{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:10px;line-height:1.5}

/* ---- HERO: koyu+yeşil gradient + desatüre görsel + cam kimlik kartı ---- */
.cp-top{
  position:relative;overflow:hidden;margin-top:112px;
  /* R9 · ZEMİN SADE KOYU PLAKAYA İNDİ.
     ÖNCE: bölümün KENDİSİ fotoğraftı (üç gradyan + unsplash + #1b1913) ve
     kimlik metni doğrudan onun üstünde duruyordu. Referansta bölüm zemini
     düz; fotoğraf AYRI ve yuvarlatılmış bir şerit (.pf-banner). Fotoğraf
     artık `.cp-banner`da; burada yalnız plaka kaldı. */
  background:
    radial-gradient(900px 420px at 86% 6%,color-mix(in srgb, var(--marka) 20%, transparent),transparent 62%),
    linear-gradient(180deg,#1b1913 0%,#191710 100%);
  padding:34px 0 44px;
}
/* R9 (Beyar): şeritteki görsel banner'a da geldi — BUĞULU.
   İki katman: ::before buğulu fotoğraf, ::after koyu perde. Sıralama
   önemli — eleman zemini (plaka) en altta, sonra fotoğraf, sonra perde,
   en üstte içerik (.wrap z-index:2). Perde olmazsa kırıntı ve kimlik
   metni fotoğrafın açık yerlerinde okunmaz.
   `inset:-60px` bilerek: `filter:blur()` kenarlarda saydamlığa doğru
   soluyor, kutuyu taşırmazsan üstte/altta açık bir çerçeve kalıyor.
   Görsel URL'i `.cp-banner`dan JS ile okunuyor (tek kaynak) — şerit
   ileride slug'a göre değişirse buğu da kendiliğinden onu izler. */
/* R9 (Beyar): "en üstte full, aşağı doğru yoğunluğu azalsın".
   `filter:blur()` tek elemanda KADEMELENEMEZ — tek sayı, tüm kutuya
   uygulanır. Bu yüzden dört katman üst üste bindirildi; her biri aynı
   görseli farklı bulanıklıkla çiziyor ve yumuşak kenarlı bir maskeyle
   kendi bandında görünüyor. Bantlar örtüştüğü için geçiş kademe değil
   süreklilik olarak okunuyor: üstte 40px bulanık, altta 3px'e iniyor.
   (Saydamlık DEĞİL bulanıklık azalıyor — ilk denemede yanlış anlamıştım.)
   inset:-60px: blur kenarlarda saydamlığa soluyor, kutuyu taşırmazsan
   üstte/altta açık bir çerçeve kalıyor. */
.cp-bgblur{position:absolute;inset:-60px;z-index:0;pointer-events:none}
.cp-bgblur i{
  position:absolute;inset:0;display:block;
  background-image:var(--cp-bg,none);
  background-size:cover;background-position:center 46%;
}
.cp-bgblur i:nth-child(1){filter:blur(40px) saturate(1.05);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 46%);
          mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 46%)}
.cp-bgblur i:nth-child(2){filter:blur(22px) saturate(1.05);
  -webkit-mask-image:linear-gradient(180deg,transparent 24%,#000 40%,#000 54%,transparent 70%);
          mask-image:linear-gradient(180deg,transparent 24%,#000 40%,#000 54%,transparent 70%)}
.cp-bgblur i:nth-child(3){filter:blur(11px) saturate(1.05);
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 66%,#000 78%,transparent 90%);
          mask-image:linear-gradient(180deg,transparent 50%,#000 66%,#000 78%,transparent 90%)}
.cp-bgblur i:nth-child(4){filter:blur(3px) saturate(1.05);
  -webkit-mask-image:linear-gradient(180deg,transparent 74%,#000 88%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 74%,#000 88%,#000 100%)}
.cp-top::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(900px 420px at 86% 6%,color-mix(in srgb, var(--marka) 22%, transparent),transparent 62%),
    linear-gradient(180deg,rgba(23,21,15,.58) 0%,rgba(21,19,13,.72) 100%);
}
.cp-top .wrap{position:relative;z-index:2}
/* R9 · buğulu banner kırıntının ZEMİNİNİ AÇTI: luminans 0.011 → 0.177,
   `rgba(255,255,255,.6)` metin 6.08:1'den 1.87:1'e düştü (AA 4.5).
   Perdeyi koyulaştırmak buğuyu geri yutuyordu — çözüm metni parlatmak.
   Gölge, fotoğrafın en açık yerlerine denk gelen harfler için. */
/* §R6 · breadcrumb yazı boyu 12.5px — dört markada ve Fit'in üç banner
   kabında tek değer. Ölçülen sapma: 13px. */
.cp-crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.95);padding:18px 0 14px;flex-wrap:wrap;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cp-crumb a{color:rgba(255,255,255,.95);transition:color .2s var(--ease)}
.cp-crumb a:hover{color:#fff}
.cp-crumb i{font-size:9px;color:rgba(255,255,255,.65)}
.cp-crumb .cur{color:var(--fit-bright)}

/* =====================================================================
 R9 · PROFİL İSKELETİ KARDEŞ MARKADAN BİREBİR ALINDI
 ---------------------------------------------------------------------
 KAYNAK: dadadiet.com/diyetisyen/dyt-elif-sahin — Playwright ile @1440 ve
 @390'da ölçüldü (ölçüm dökümü: scratchpad/r9profil/ref-tree-*.txt).
 Referansın `.pf-top` blok sırası:
   1 kırıntı (.rd-crumb, pad 18/0/14/0)
   2 banner görseli (.pf-banner, r24 @1440 · r16 @390)
   3 kimlik kartı (.pf-head — banner'ın alt kenarına BİNER, w = wrap-56,
     pad 26/30/28/30, r16, 1px çizgi, beyaz; içinde .pf-ava 128 daire +
     .pf-id + .pf-actions)
   4 istatistik şeridi (.pf-stats, w = wrap-56, h75, r16, 3 hücre)
 Burada aynı sıra, aynı ölçüler. TEK FARK: bölüm zemini.
 Referansta `.pf-top` BEYAZ; burada koyu — çünkü DadaFit kabuğu bu sayfada
 `data-fit-over="1"` ile header'ı şeffaflaştırıp marka yazısını BEYAZ
 boyuyor (fit-shell.css), yani header'ın arkasında koyu bant ŞART.
 Beyaz zemin logoyu görünmez yapardı. Kabuk kusuru değil, kabuk sözleşmesi.

 YÜKSEKLİK: `.cp-top` yüksekliği kabuk tarafından kilitli
 (--banner-h-detay: 560 @1440 · 617 @1024 · 726 @390). Banner görseli
 `flex:1` ile ARTAN alanı yutuyor; böylece kırıntı/kart/şerit ne kadar
 yer kaplarsa kaplasın toplam HER ZAMAN aile sabitine oturuyor —
 sabit artık tesadüf değil, yapısal.
 ===================================================================== */
/* Kabuk `.cp-top{padding:var(--hero-pt) 0 var(--hero-pb) !important}` diyor
   (@1440 46 px, ≤640 12 px). Referansta `.pf-top`un alt dolgusu 0 — şerit
   bölümün alt kenarına yaslanıyor. Burada plaka koyu olduğu için sıfır değil,
   şeridin plakanın üstünde durduğu okunacak kadar (20 px) bırakıldı.
   Kabuğa dokunmamak için özgüllük yükseltildi (0,2,2 > 0,1,0). */
/* R15 · Beyar: "Danışan Deneyimi kartının alt kenarı ile beyaz panelin üst
   kenarı yapışık". ÖLÇÜM (kart altı → beyaz üstü): 1440 **8px** · 1024 **12px**
   · 768 **−11px** (beyaz alan kartın İÇİNE giriyordu).
   Kök sebep: beyaz gövde `.cp-body` banner'ın bitişinden 22px YUKARIDA
   başlıyor (kabuğun "banner → gövde dikişi" bloğu bilerek bindiriyor), yani
   kartın nefesi = `.cp-top` alt dolgusu − 22.
   EMSAL ÖLÇÜLDÜ — dadagastro.com ana sayfası: koyu banner `.hero-v` altı 1122,
   sonraki panel `.catstrip` üstü 1100 (aynı 22px bindirme), panelin üst
   dolgusu **48px** → görünen nefes 26px.
   Fit de aynı değere çekildi: alt dolgu 34 → **48px** (Gastro'nun panel
   dolgusuyla birebir), görünen nefes 48 − 22 = 26px. */
body[data-fit-over="1"] section.cp-top{padding-bottom:48px !important}
/* …ama alt dolguyu büyütmek TEK BAŞINA işe yaramadı, ölçüm gösterdi:
   `.cp-top` SABİT yükseklikli (560px) ve `overflow:hidden`. İçerik zaten
   620px'ti, yani kartın alt 60px'i KIRPILIYORDU; dolguyu 34'ten 48'e
   çıkarmak hiçbir kutuyu oynatmadı (ölçüm: banner altı 560 → 560).
   Kilit TABANA çevriliyor: bölüm sabitin altına inemez ama içeriği
   kırpmak yerine büyür. Aynı çözüm ≤380px kırılımında zaten kuruluydu
   (aşağıdaki blok), burada tüm genişliklere alındı. */
body[data-fit-over="1"] section.cp-top{height:auto !important;min-height:var(--banner-h-detay) !important}
.cp-top .wrap{display:flex;flex-direction:column;height:100%}
.cp-crumb{flex:none}

/* 2 · banner görseli — referans .pf-banner (240 px @1440, r24) */
.cp-banner{
  flex:1 1 auto;min-height:150px;border-radius:var(--radius-xl);
  background-size:cover;background-position:center 46%;
  box-shadow:0 22px 60px rgba(0,0,0,.42);
  position:relative;overflow:hidden;
}
.cp-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,12,0) 46%,rgba(18,16,11,.5))}

/* 3 · kimlik kartı — referans .pf-head (w wrap-56 · pad 26/30/28/30 · r16) */
.cp-head{
  position:relative;z-index:2;
  width:calc(100% - 56px);margin:-78px auto 0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 10px 34px rgba(20,18,12,.14);
  padding:26px 30px 28px;display:flex;gap:26px;align-items:flex-start;
}
/* referans .pf-ava 128×128 · r50% · 4px beyaz çerçeve · kartın üstüne taşar */
.cp-ava{
  position:relative;flex:none;width:128px;height:128px;border-radius:var(--radius-circle);
  margin-top:-69px;background-size:cover;background-position:center;
  border:4px solid var(--paper);box-shadow:0 8px 24px rgba(20,18,12,.22);
}
.cp-ava .cp-on{position:absolute;right:7px;bottom:7px;width:17px;height:17px;border-radius:var(--radius-circle);background:var(--fit);border:3px solid var(--paper);box-shadow:0 0 0 2px color-mix(in srgb, var(--marka) 22%, transparent)}
.cp-id{flex:1;min-width:0}
/* referans .pf-id h1 29/700 · .pf-verify 12/700 hap · .pf-handle 14/600 · .pf-meta 13/500 */
/* SEÇİCİ ÖZGÜLLÜĞÜ — kabuk `body[data-fit-hero-kind] .cp-top h1{font-size:42px}`
   diyor (fit-shell.css, ≥901px). O kural kimlik metni KOYU banner'ın üstünde
   dururken doğruydu; artık h1 beyaz kartın içinde ve referans ölçüsü 29px.
   Kabuğa dokunmamak için burada özgüllük yükseltildi (0,3,1 > 0,2,1). */
.cp-top .cp-head .cp-id h1{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:29px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--slate);margin:0;max-width:none}
.cp-verify{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;line-height:1;color:var(--fit-ink);background:color-mix(in srgb, var(--marka) 13%, transparent);padding:5px 11px;border-radius:var(--radius-sm)}
.cp-verify i{font-size:12px}
.cp-spec{display:block;font-size:14px;font-weight:600;color:var(--slate-2);margin-top:9px}
.cp-meta{display:flex;flex-wrap:wrap;gap:7px 20px;margin-top:13px;font-size:13px;font-weight:500;color:var(--muted)}
.cp-meta span{display:inline-flex;align-items:center;gap:7px}
.cp-meta i{color:var(--fit-deep);font-size:12px}
/* KENDİ ELEŞTİRİM · KUSUR 3 — puan yıldızı YEŞİLDİ.
   Ölçüldü: `.cp-meta .fa-star` rgb(0,122,61) iken aynı sayfadaki
   `.rev-stars i` ve `.sim-rate i` rgb(250,192,69). Puan yıldızının rengi
   sitede sarı; meta satırına taşınırken yeşile düşmüştü. */
.cp-meta i.fa-star{color:var(--yellow)}
/* referans .pf-actions — birincil düğme + (ikincil + ikon) satırı, gap 9 */
.cp-actions{flex:none;display:flex;flex-direction:column;gap:9px;width:194px}
.cp-actions .btn{width:100%;justify-content:center}
.cp-actions .cta-row{display:flex;gap:9px}
.cp-actions .cta-row .btn{flex:1;padding:12px 16px;font-size:13.5px}
.cp-mini{flex:none;width:46px;padding:0;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--slate);border-radius:var(--radius-md);cursor:pointer;font-size:15px;transition:.2s var(--ease)}
.cp-mini:hover{border-color:var(--fit);color:var(--fit-deep)}
.cp-mini.is-on{border-color:var(--fit);color:var(--fit-deep);background:var(--fit-tint)}
/* ODAK HALKASI — kabuktan geliyor; sayfa kuralı YOK ve olmamalı.
   YANLIŞ ALARM KAYDI (R9): hesaplanan `outline-color` bu düğmelerde
   rgb(255,255,255) okunuyor ve "beyaz kartta beyaz halka, görünmez" diye
   bir kusur yazılmıştı. Ekran görüntüsüne bakılınca öyle olmadığı görüldü:
   halka düğmenin İÇİNE çiziliyor ve düğmenin kendi zemini yeşil, yani
   beyaz halka orada okunan halka. Eklenen sayfa kuralı geri alındı.
   Nöbeti `tests/antrenor-profil.mjs` §14 devraldı: halkanın rengi
   DÜĞMENİN KENDİ ZEMİNİNDEN farklı mı — ölçülen şey bu olmalıydı. */

/* ---- STICKY SEKME ÇUBUĞU ---- */
.cp-body{padding:40px 0 var(--sec-pad);background:var(--bg-white)}
/* R15 · Beyar: "sekme şeridi ile altındaki panel bitişik, üst üste yapışık".
   ÖLÇÜLEN İKİ SEBEP, ikisi de düzeltildi:
   1) Boşluk 30px'ti ve kitte böyle bir değer YOK. `--sec-pad-sm` (32px)
      bölüm arası ritmin küçük adımıdır; yeni değer üretmek yerine ona çekildi.
   2) Asıl "yapışık" hissi boşluktan değil ZEMİNDEN geliyordu: çubuk
      `rgba(255,255,255,.94)` yarı saydamdı ve altından kayan metin
      içinden okunuyordu; panel de beyaz olduğu için iki yüzey tek yüzey
      gibi görünüyordu. Zemin OPAK `--paper` yapıldı, blur kaldırıldı
      (saydamlık olmayınca işlevi de kalmıyor). Alt saç çizgisi duruyor. */
.cp-tabbar{
  position:sticky;top:112px;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);margin-bottom:var(--sec-pad-sm);
}
/* SEKME ŞERİDİ ORTAK BİLEŞENE GEÇTİ — .fit-tabs / .fit-tab / .fit-pane
   (assets/css/fit-shell.css + fit-shell.js, görsel kalıp DadaGastro'nun
   segment hapı; KARARLAR.md K13). Sayfaya özgü kalan tek şey sticky
   çubuğun kendisi (.cp-tabbar) ve şeridin dikey nefesi. */
/* R11/M18 · Beyar: "profilde tablar var ya, onlar merkezi olsun."
   Şerit `width:100%` ile sola yaslıydı; kalemler soldan başlıyordu.
   Ray tam genişlikte KALIYOR (tıklama alanı ve kaydırma bozulmasın),
   içindeki kalemler ortalandı. */
.cp-tabbar .fit-tabs{margin:12px 0;display:flex;width:100%;justify-content:center}

/* ---- HAKKINDA: ana metin + yan bilgi kartları ---- */
.ab-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;align-items:start}
.ab-main h2{font-size:22px;margin-bottom:14px}
.ab-main h2:not(:first-child){margin-top:34px}
.ab-main p{font-size:15px;font-weight:500;color:var(--slate-2);line-height:1.7;margin-bottom:14px}
.ab-spec{margin-top:4px}
.ab-spec .chip{cursor:default}
.ab-spec .chip:hover{border-color:var(--fit);color:var(--fit-deep);background:var(--fit-tint)}
/* "neden farklı" yaklaşım ızgarası */
.ab-approach{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.ap-item{display:flex;gap:13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:17px 18px}
.ap-item i{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:16px}
.ap-item b{display:block;font-size:14.5px;color:var(--slate);font-weight:800;margin-bottom:3px}
.ap-item span{font-size:13px;color:var(--muted);font-weight:500;line-height:1.5}
.ab-side{position:sticky;top:178px;display:flex;flex-direction:column;gap:18px}
.info-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:20px 22px}
.info-card h4{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.12;letter-spacing:-.02em;padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.info-card h4 i{color:var(--fit-deep);font-size:13px}
.ic-row{display:flex;gap:13px;padding:10px 0}
.ic-ico{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}
.ic-row b{display:block;font-size:13.5px;line-height:1.3;color:var(--slate);font-weight:700}
.ic-row span:not(.ic-ico){display:block;font-size:13px;line-height:1.55;color:var(--muted);font-weight:500;margin-top:1px}
.ic-verify{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--fit-deep);margin-top:5px}
.ic-verify i{font-size:11px}
/* uygunluk kutusu — yan kolon vurgu */
.avail-card{background:linear-gradient(135deg,var(--fit-tint),#f4fbf6);border:1px solid var(--fit-line);border-radius:var(--radius-lg);padding:20px 22px}
.avail-card h4{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.12;letter-spacing:-.02em;margin-bottom:6px}
.avail-card h4 i{color:var(--fit-deep);font-size:13px}
.avail-card .av-state{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--fit-deep);background:#fff;border:1px solid var(--fit-line);padding:7px 13px;border-radius:var(--radius-pill);margin:8px 0 14px}
.avail-card .av-state .dot{width:8px;height:8px;border-radius:50%;background:var(--fit);box-shadow:0 0 0 3px color-mix(in srgb, var(--marka) 18%, transparent)}
.av-rows{display:flex;flex-direction:column;gap:10px}
.av-rows .avr{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:var(--slate-2)}
.av-rows .avr i{flex:none;width:18px;text-align:center;color:var(--fit-deep);font-size:13px}
.av-rows .avr b{color:var(--slate);font-weight:700}

/* =====================================================================
 R9 · "SEANSLAR" SEKMESİ — referansın "Hizmetler" paneli BİREBİR
 ---------------------------------------------------------------------
 BEYAR'IN ŞİKÂYETİ: "burda 450 tl kartı berbat bir yerde".
 ÖLÇÜM (önce): fiyat `.cp-cta` içindeydi — 262×285 px koyu cam kutu,
 y592'de, tek başına SOLDA; sağında 914 px boş alan. Sayfada fiyat
 gören TEK yer orasıydı.
 ÖLÇÜM (referans): dadadiet profilinde hero'da fiyat YOK. Fiyat yalnız
 "Hizmetler" sekmesinde, `.svc-card`ın ayağında duruyor:
   .svc-grid  → grid · gap 22 · 3 kolon (377 px kart @1440)
   .svc-card  → pad 24/22 · r16 · 1px çizgi · beyaz · flex kolon
   .svc-tag   → 10.5/700 · pad 5/11 · r8 · aksan yıkama
   .svc-ico   → 48×48 · r12 · aksan yıkama · ikon 19px
   h3         → 18/700 ·  ul.svc-feats → li 13.5/500 · gap 9
   .svc-foot  → margin-top:auto · pad-top 18 · ÜST ÇİZGİ · flex · gap 12
   .svc-price b → 23/700 · span → 12/500 ·  .svc-book → pad 12/18 · r12 · 13.5/700
 Buradaki üç seans UYDURULMADI: sayfanın kendi randevu modalindeki
 (`#aptSvc`) üç seçenekten alındı — Birebir Seans · Aylık Paket ·
 Tanışma Görüşmesi. Fiyat biçimi (₺450) DadaFit'in kendi biçimi;
 referansın "450 ₺" sırası markanın geri kalanıyla çelişirdi.
 ===================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.svc-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:24px 22px}
.svc-card.feat{border-color:color-mix(in srgb, var(--marka) 50%, transparent);box-shadow:0 6px 22px color-mix(in srgb, var(--marka) 12%, transparent)}
.svc-tag{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--fit-ink);background:color-mix(in srgb, var(--marka) 13%, transparent);padding:5px 11px;border-radius:var(--radius-sm);line-height:1.5}
.svc-ico{width:48px;height:48px;margin-top:14px;border-radius:var(--radius-md);background:color-mix(in srgb, var(--marka) 13%, transparent);color:var(--fit-deep);display:grid;place-items:center;font-size:19px}
.svc-card h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.14;margin-top:16px;color:var(--slate)}
.svc-feats{display:flex;flex-direction:column;gap:9px;margin-top:7px}
.svc-feats li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:500;line-height:1.42;color:var(--slate-2)}
.svc-feats li i{flex:none;font-size:13px;color:var(--fit-deep);margin-top:2px}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.svc-price{min-width:0}
.svc-price b{font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--slate)}
.svc-price span{font-size:12px;font-weight:500;color:var(--muted);margin-left:5px}
.svc-book{display:inline-flex;align-items:center;gap:8px;flex:none;font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;background:var(--fit);border:0;border-radius:var(--radius-md);padding:12px 18px;cursor:pointer;transition:.2s var(--ease)}
.svc-book:hover{background:var(--fit-deep);transform:translateY(-2px)}
.svc-book i{font-size:13.5px}
/* KENDİ ELEŞTİRİM · KUSUR 5 — "Ücretsiz" yeşildi ve 12 px sağındaki yeşil
   "Randevu" düğmesiyle yarışıyordu; referansta üç kartın fiyatı da aynı
   renk. Vurgu kelimenin kendisinde, renkte değil. */
.svc-price b.free{color:var(--slate)}
/* boş sekme panelinin sarılması gerekmiyor: `.svc-feats` madde işareti yok */
.svc-feats{list-style:none}
/* ---- PROGRAMLAR: full-görsel kart (div+bg cover) ---- */
.prog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.prog-media{position:relative;height:188px;background-size:cover;background-position:center}
.prog-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,30,22,0) 42%,rgba(18,16,11,.74))}
.prog-level{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--fit);color:#fff;font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--radius-sm)}
.prog-dur{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--slate);font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--radius-sm)}
.prog-dur i{color:var(--fit-deep);font-size:11px}
.prog-title{position:absolute;left:15px;right:15px;bottom:13px;z-index:2;color:#fff;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.22}
.prog-body{padding:15px 18px 18px;display:flex;flex-direction:column;flex:1}
.prog-body p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.55;margin-bottom:14px}
.prog-feats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.prog-feats 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)}
.prog-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.prog-foot .price{font-size:12.5px;color:var(--muted);font-weight:500}
.prog-foot .price b{color:var(--slate);font-weight:800;font-size:14.5px}
.prog-foot .go{display:inline-flex;align-items:center;gap:7px;color:var(--fit-deep);font-weight:700;font-size:13.5px}
.prog-foot .go i{transition:transform .2s var(--ease)}
.prog-card:hover .prog-foot .go i{transform:translateX(3px)}

/* ---- YORUMLAR: özet + kapsayıcı yorum kartları ---- */
.rev-layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:34px;align-items:start}
.rev-summary{position:sticky;top:178px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:24px}
.rev-score{display:flex;align-items:baseline;gap:8px}
.rev-score b{font-size:48px;font-weight:800;color:var(--slate);letter-spacing:-.02em;line-height:1}
.rev-score span{font-size:16px;color:var(--muted);font-weight:600}
.rev-stars{color:var(--yellow);font-size:15px;margin:8px 0 4px;letter-spacing:2px}
.rev-count{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:18px}
.rev-bars{display:flex;flex-direction:column;gap:8px}
.rev-bar{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--muted)}
.rev-bar .lbl{width:30px;flex:none;color:var(--slate-2)}
.rev-bar .track{flex:1;height:7px;background:var(--bg);border-radius:var(--radius-pill);overflow:hidden}
.rev-bar .fill{height:100%;background:var(--fit);border-radius:var(--radius-pill)}
.rev-bar .pct{width:34px;flex:none;text-align:right}
.rev-tagline{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--slate-2);font-weight:500;line-height:1.55}
.rev-tagline b{color:var(--fit-deep);font-weight:800}
/* yorum kartları */
.rev-list{display:flex;flex-direction:column;gap:16px}
.rev-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:20px 22px}
.rev-top{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.rev-ava{flex:none;width:46px;height:46px;border-radius:var(--radius-circle);background-size:cover;background-position:center}
.rev-who{min-width:0;flex:1}
.rev-who b{display:block;font-size:14.5px;color:var(--slate);font-weight:700}
.rev-who span{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:1px}
.rev-when{flex:none;font-size:12px;color:var(--muted);font-weight:500}
.rev-rate{color:var(--yellow);font-size:13px;letter-spacing:2px;margin-bottom:9px}
.rev-card p{font-size:14px;color:var(--slate-2);font-weight:500;line-height:1.66}
.rev-result{display:inline-flex;align-items:center;gap:8px;margin-top:13px;font-size:12px;font-weight:700;color:var(--fit-deep);background:var(--fit-tint);border:1px solid var(--fit-line);padding:6px 12px;border-radius:var(--radius-sm)}
.rev-result i{font-size:11px}
.rev-more{display:flex;justify-content:center;margin-top:8px}
.rev-more .btn-more{display:inline-flex;align-items:center;gap:10px;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);padding:13px 26px;cursor:pointer;transition:.2s var(--ease)}
.rev-more .btn-more:hover{border-color:var(--fit);color:var(--fit-deep);transform:translateY(-2px)}
.rev-more .btn-more i{color:var(--fit)}

/* ---- BENZER ANTRENÖRLER ŞERİDİ — full-görsel portre kart ---- */
.sim-sec{background:var(--bg);padding:var(--sec-pad) 0 var(--sec-pad)}
.sim-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sim-card{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;height:280px;cursor:pointer;box-shadow:var(--sh-sm);transition:.3s var(--ease)}
.sim-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.sim-card:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
.sim-media{position:absolute;inset:0;background-size:cover;background-position:center top}
.sim-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,30,22,0) 38%,rgba(16,14,9,.82))}
.sim-verify{position:absolute;top:11px;left:11px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--fit);color:#fff;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:var(--radius-sm)}
.sim-id{position:absolute;left:15px;right:15px;bottom:14px;z-index:2}
.sim-id b{display:block;color:#fff;font-size:16px;font-weight:800;letter-spacing:-.01em}
.sim-id span{display:block;color:rgba(255,255,255,.82);font-size:12px;font-weight:600;margin-top:3px}
.sim-id .sim-rate{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;font-weight:700;color:#fff}
.sim-id .sim-rate i{color:var(--yellow);font-size:11px}

/* ---- ALT CTA BANDI (danışan ol) ---- */
.cp-cta-band{
  position:relative;overflow:hidden;margin-top:46px;border-radius:var(--radius-xl);
  background:
    radial-gradient(620px 280px at 88% 0%,color-mix(in srgb, var(--marka) 30%, transparent),transparent 64%),
    linear-gradient(120deg,#211E16 0%,#1c1a13 52%,#112d3c 100%);
  color:#fff;padding:42px 46px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;
}
.cp-cta-band .cb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fit-bright);margin-bottom:13px}
.cp-cta-band h2{color:#fff;font-size:27px;letter-spacing:-.02em;margin-bottom:11px;max-width:560px}
.cp-cta-band p{color:rgba(255,255,255,.82);font-size:14.5px;font-weight:500;line-height:1.55;max-width:540px;margin-bottom:0}
.cp-cta-band .cb-act{display:flex;flex-direction:column;gap:11px;align-items:flex-start;min-width:220px}
.cp-cta-band .cb-act .btn{width:100%}
.cp-cta-band .cb-act .btn-line{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.24)}
.cp-cta-band .cb-act .btn-line:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.cp-cta-band .cb-note{font-size:12px;color:rgba(255,255,255,.62);font-weight:500;display:inline-flex;align-items:center;gap:7px}
.cp-cta-band .cb-note i{color:var(--fit-bright)}

/* =====================================================================
 R8 · KALEM 38 — "DANIŞAN DENEYİMİ" SATIRI
 ---------------------------------------------------------------------
 İSKELET KAYNAĞI: dadadiet.com/diyetisyen/dyt-elif-sahin → `.pf-stats`
 (Playwright ile ölçüldü @1440 + @390). Referans değerleri:
   .pf-stats  → r16 · 1px solid var(--line) · #fff · display:flex
   .pfs       → padding 15px 20px · gap 12px · eşit bölünür (372/373/373)
   .pfs i     → 38×38 · r12 · yeşil yıkama zemin
   .pfs span  → 11px / lh 17.05 (1.55) / 500 / ls .02em / muted
   .pfs b     → 16.5px / lh 25.575 (1.55) / 700 / ink
   @390       → satır 2'ye sarıyor (.pfs 166px), kutu 334×147
 TEK FARK: renk token'ı DadaFit yeşiline çevrildi (--fit-tint / --fit-deep).
 KONUM: referansta `.pf-stats` kimlik kartının HEMEN ALTINDA, sekme
 çubuğundan ÖNCE gelir (bölüm sırasında 4. blok). Burada da öyle —
 banner sabit yükseklikli (--banner-h-detay) olduğu için satır banner'ın
 İÇİNE değil, tıpkı randevu kartı gibi (R15.3) hemen altına konur.
 ===================================================================== */
/* R9 · ŞERİT REFERANSTAKİ YERİNE TAŞINDI: artık `main`in çıplak çocuğu
   değil, `.cp-top` içinde kimlik kartının HEMEN ALTINDA — referansta
   `.pf-stats` tam olarak orada duruyor (.pf-head'in kardeşi, 20 px altı).
   Genişliği de referanstaki gibi wrap-56 (kartla aynı kenar). */
.cp-exp{flex:none;width:calc(100% - 56px);margin:20px auto 0}
.cp-exp-lbl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fit-bright);margin-bottom:10px}
.cp-exp-lbl i{font-size:11px}
.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 — gerçek toplu veri gelene kadar sayı UYDURULMAZ.
   docs/icerik-bekleyen.md 6. kalem. */
.cps[data-yer-tutucu] b{color:var(--muted);font-weight:600;font-size:14px}

/* =====================================================================
 R8 · KALEM 37 — SAĞLIK BİLGİLENDİRME BANDI (referans `.pf-disclaimer`)
 ---------------------------------------------------------------------
 Referans profilinin SON bölümü tam genişlikte bir uyarı bandıdır; bu
 sayfada karşılığı yoktu (yalnız `.hr-note` "profil sana mı ait" kartı
 vardı, o başka bir şey). Ölçülen referans: bg #E6F5EE · üst çizgi
 1px rgba(59,183,126,.25) · .wrap padding 22px 32px · gap 14 · ikon 17px
 · p 13.5px / lh 22.275 (1.65) / 500. Renk DadaFit yeşiline çevrildi.
 Metin dili sitede zaten kurulu olan challenge-merkezi bandından alındı
 (uydurma yok, mevcut DadaFit dili).
 ===================================================================== */
.cp-disclaimer{background:var(--fit-wash);border-top:1px solid color-mix(in srgb, var(--marka) 25%, transparent)}
.cp-disclaimer .wrap{display:flex;gap:14px;align-items:flex-start;padding-top:22px;padding-bottom:22px}
.cp-disclaimer i{flex:none;font-size:17px;color:var(--fit-deep);margin-top:2px}
.cp-disclaimer p{font-size:13.5px;line-height:1.65;font-weight:500;color:var(--slate-2)}
.cp-disclaimer p b{color:var(--slate);font-weight:700}
.cp-disclaimer p a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cp-disclaimer p a:hover{color:var(--fit-ink)}
/* R11/M5 · Beyar: "bu yeşil infoları yayman lazım, kart içerisindeki
   genişliğe göre". `.hr-note p` ile AYNI DİL korunuyor — kabuk artık
   kutulu bilgi notlarında ölçü sınırını kaldırıp satır arasını açıyor
   (fit-shell.css → "BİLGİ KUTULARINDA METİN KUTUYU DOLDURUR"), bu kutu
   da onunla aynı davranıyor. Gerekçe ve geri alma orada yazılı. */
.cp-disclaimer p{max-width:none;line-height:1.72}

/* =====================================================================
 R8 · KALEM 39 — CHALLENGE SEKMESİ PANELİ (boş durum)
 Referansın boş sekme deseni: ortalanmış blok (`Yorumlar 0` panelinde
 ölçüldü — text-align:center · padding 40px 0 · muted · 500).
 Kalıp UYDURULMADI: sitenin kurulu `.lib-empty` bileşeni kullanılıyor
 (fit-shell.css 1480–1484). Tek fark başlık düzeyi: bileşen `h3`
 varsayıyor, burada sayfanın başlık sırası bozulmasın diye `h2`.
 ===================================================================== */
.pane-bos.lib-empty{display:flex;padding:44px 20px}
.pane-bos.lib-empty h2{font-size:18px;margin-bottom:7px}

/* ===================== SAYFA RESPONSIVE ===================== */
@media (max-width:1024px){
  .cp-top{margin-top:112px}
  .cp-tabbar{top:112px}
  /* R9 · kimlik kartı ≤1024'te sarıyor — eylem kolonu alta iner (referans
     @390'da da böyle: `.pf-head` kolon akışına geçiyor). */
  .cp-head{flex-wrap:wrap;padding:22px 24px 24px;gap:20px}
  .cp-actions{width:100%;flex-direction:row;align-items:center}
  .cp-actions .btn{flex:1;width:auto}
  .cp-actions .cta-row{flex:1}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-grid{grid-template-columns:1fr}
  .ab-side{position:static}
  .ab-approach{grid-template-columns:1fr}
  .prog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev-layout{grid-template-columns:1fr}
  .rev-summary{position:static}
  .sim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-cta-band{grid-template-columns:1fr;gap:24px;padding:36px 32px}
  .cp-cta-band .cb-act{min-width:0;width:100%;max-width:340px}
}
@media (max-width:640px){
  .cp-top{margin-top:62px;padding:26px 0 48px}   /* R15 — bkz. yukarıdaki emsal ölçümü */
  /* R9 · referans @390 ölçümü: .pf-banner 160 r16 · .pf-head 334 (12 px
     kenar payı) pad 20/18/22/18 · .pf-ava 104 · .pf-stats 334, 2 satır. */
  .cp-banner{border-radius:var(--radius-lg);min-height:120px}
  .cp-head{width:calc(100% - 24px);margin-top:-56px;padding:20px 18px 22px;flex-direction:column;align-items:flex-start}
  /* DİKEY RİTİM REFERANSTAN ÖLÇÜLDÜ (@390): portre kartın üst kenarından
     51 px yukarıda · portre→kimlik 16 · kimlik→eylemler 16.
     Kabuk `.cp-top .cp-head{gap:10px !important}` diyor, o yüzden kalan
     6 px margin ile tamamlanıyor (10 + 6 = 16). */
  .cp-ava{width:104px;height:104px;margin-top:-71px;margin-bottom:6px}
  .cp-top .cp-head .cp-id h1{font-size:24px;gap:9px}
  .cp-spec{font-size:13.5px;margin-top:7px}
  .cp-meta{gap:6px 16px;margin-top:11px}
  .cp-actions{width:100%;margin-top:6px;flex-direction:column;align-items:stretch}
  .cp-actions .btn,.cp-actions .cta-row{width:100%;flex:none}
  /* Eyebrow ≤640'ta gizlendi: şerit + kart + banner aile sabitine (726 px)
     sığmıyordu, 35 px kırpılıyordu (ölçüldü). Referansta `.pf-stats`ın
     üstünde ZATEN etiket yok; gizlemek referansa yaklaştırıyor. Satırın
     kendisi `role="group" aria-label="Danışan deneyimi özeti"` taşıdığı
     için ekran okuyucuda bilgi kaybı yok. */
  .cp-exp-lbl{display:none}
  .cp-exp{width:calc(100% - 24px);margin-top:16px}
  .svc-grid{grid-template-columns:1fr}
  .cp-tabbar{top:62px}
  .cp-body{padding-bottom:var(--sec-pad)}
  .prog-grid{grid-template-columns:1fr}
  .sim-grid{grid-template-columns:1fr 1fr;gap:14px}
  .sim-card{height:230px}
  .rev-summary{padding:20px}
  .cp-cta-band{padding:30px 22px}
  .cps{flex:1 1 140px}
  .cps+.cps{border-left:none}
  .cps:nth-child(odd)+.cps{border-left:1px solid var(--line)}
  .cps:nth-child(n+3){border-top:1px solid var(--line)}
  .cp-cta-band h2{font-size:22px}
  .apt-slots{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:400px){
  .sim-grid{grid-template-columns:1fr}
  .sim-card{height:280px}
}
/* ---- ÇOK DAR EKRAN (≤380) ----
   EŞİK 400 DEĞİL 380: ilk denemede kural ≤400'e yazılmıştı ve ölçülen
   genişliklerden biri olan 390'ı da kapsayıp banner'ı 137 → 80 px'e
   düşürüyordu; `.cp-top` 726 yerine 663 ölçüldü, aile sabiti kırıldı.
   Eşik 390'ın ALTINA çekildi. */
@media (max-width:380px){
  .cp-banner{min-height:80px}
  .cp-meta{gap:5px 14px;margin-top:9px}
  .cp-ava{width:92px;height:92px;margin-top:-62px}
  /* Bu genişlikte `.cp-meta` dört satıra çıkıyor ve kabuğun kilitlediği
     sabit yükseklik içeriği KIRPIYOR (ölçüldü @320: 71 px kırpılma).
     Kırpmak yerine kilit TABANA çevriliyor: bölüm sabitin altına inemez,
     gerekirse büyür. Ailenin ölçüldüğü üç genişlikte (1440/1024/390)
     `height` hâlâ kabuktan geldiği için sabit bozulmuyor. */
  .cp-top{height:auto !important;min-height:var(--banner-h-detay) !important}
}
