/* ══════════════════════════════════════════════════════════════════════════════
   vucut.css — TEK-VÜCUT BİLEŞEN KATMANI  ·  Ai3 (deneyim-mimarı) · 15 Tem 2026
   ══════════════════════════════════════════════════════════════════════════════
   TEŞHİS (ölçüldü, _olcum/stil-envanteri.json):
     tokens.css 5 sayfada da BİREBİR aynı. Font da aynı. Nav da aynı. Sorun token DEĞİL.
     Sorun şu: token RENK verir, BİLEŞEN vermez. Her sayfa düğmesini ham token'dan
     kendi kurdu ⇒ renk-EŞLEŞTİRME kararını her sayfa yeniden verdi ⇒ biri yanlış verdi.
     KANIT: --p-mercan-cta (#9b625f, 4.88:1 — 14 Tem'de kapatılan kusur) diskte yalnız
     2 yerde yaşıyor: tokens.css (tanım) + nav.css (.mm-cta). randevu/index.html:36
     kendi --coral takma adını kurup `color:#fff` yazdı ⇒ "Devam →" bugün 2.95:1.
     Aynı kök, iki meyve: Tayfun'un gördüğü ÜSLUP dağınıklığı + ölçülen ERİŞİM kusuru.

   ÇÖZÜM: EKSİK KATMAN = BİLEŞEN.
     tokens.css  → ham malzeme (renk, ölçü, yarıçap)      [DOKUNULMADI]
     nav.css     → nav bileşeni                            [DOKUNULMADI]
     vucut.css   → sayfa bileşenleri (BU DOSYA)            ← yeni
   KURAL: Sayfalar artık --p-* / renk EŞLEŞTİRMESİ YAPMAZ. Bileşen çağırır.
          Sayfa CSS'inde `color:#fff` görürsen, bileşen eksik demektir — bileşeni ekle.

   HÜKÜM 1 · TEK ZEMİN = AYDINLIK.
     Ölçüm: 3/5 sayfa zaten token kremi (#FBF9F3). 2/5 kendi karasını bastı — ve o iki kara
     AYNI kara bile değil (anasayfa rgb(12,11,10) nötr-siyah · whitepaper rgb(11,23,38) lacivert).
     İki bağımsız "koyuya geçelim" kararı, hiç konuşulmamış. Çoğunluk + token varsayılanı +
     "premium-hekim-vakarı" (koyu = sinematik/teknoloji register'ı; Tayfun sinematik istemiyor)
     + çocuk-dünyası zaten aydınlık/sıcak (yanına koyu yetişkin sitesi = tarif edilen kopukluk)
     ⇒ VÜCUT AYDINLIK. Koyu lehçe yalnız oyun yüzeylerinde yaşar (onlar mm-nav kullanmaz).
     ⇒ YAN-KAZANÇ: nav.css'teki "koyu lehçe renk değerleri = Ai3 hükmü bekleniyor" açık kalemi
       DÜŞER — 5 klasik sayfanın hiçbiri koyu nav kullanmayacak.

   HÜKÜM 2 · TEK ÖLÇEK. tokens --fs-* tanımlıyordu ama h1'de KİMSE kullanmıyordu
     (34/30/38/29/27.95 — beşi de elde). Artık h1 = .v-h1, boyut bileşenden gelir.
     Anasayfada h2 (55.9px) h1'den (34px) BÜYÜKTÜ — hiyerarşi tersti. Ölçek bunu imkânsız kılar.

   HÜKÜM 3 · TEK YARIÇAP DİLİ. Ölçüm: 8 / 14 / 999 / 99 / 11 — beş farklı.
     `999` vs `99` aynı niyetin iki kez elde yazılmış hâli = bileşensizliğin parmak izi.
     Artık: kart = --r-md (14px) · hap düğme = --r-full. Ara değer YOK.

   HÜKÜM 4 · METİN TAŞIYAN YÜZEY ham --p-mercan KULLANAMAZ (beyazla 2.95:1).
     Metin taşıyan mercan = --p-mercan-cta. Ham mercan yalnız DOLGU/aksan (yazısız).
     Bu kural artık bileşende KİLİTLİ; sayfa yeniden karar veremez.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   EK-1 (15 Tem · USTABAŞI onayı 4/4) — rollout'un ihtiyaç duyduğu 3 bileşen.
   Üçü de ÖLÇÜMLE kuruldu, tahminle değil.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── DURUM RENKLERİ ────────────────────────────────────────────────────────────
     🔴 ÖLÇÜM: mevcut `--ok:#3f9d6b` (randevu, 8 kullanım) MERCANIN BİREBİR AYNI TUZAĞI:
        beyazla 3.36:1 · kremle 3.19:1 ⇒ YAZI olarak AA-altı. Ama `.day .dot` gibi
        YAZISIZ dolguda meşru. Yani iki-ton ayrımı burada da ŞART — ve bu, kalıbın
        tesadüf olmadığının kanıtı: marka renkleri dolgu için seçilir, metin için değil.
     ⇒ Aynı H-4 mantığı: `-dolgu` yazısız · `-metin` yazı taşıyan (ölçülmüş AA türev).
     Hata/uyarı sitede HİÇ YOKTU (form-hata durumu renksizdi) → ölçülmüş adaylar eklendi. */
  --renk-basari:        #3f9d6b;   /* DOLGU (yazısız) — mevcut --ok, korundu */
  --renk-basari-metin:  #2f7a52;   /* YAZI — beyaz 5.22:1 · krem 4.95:1 ✅ */
  --renk-basari-zemin:  #eaf6ef;   /* mevcut --okbg, korundu */
  --renk-hata:          #b3261e;   /* YAZI+dolgu — beyaz 6.54:1 · krem 6.21:1 ✅ */
  --renk-hata-zemin:    color-mix(in srgb, var(--renk-hata) 8%, #fff);
  --renk-uyari:         #8a5a00;   /* YAZI+dolgu — beyaz 5.93:1 · krem 5.63:1 ✅ (altın aksanla uyumlu) */
  --renk-uyari-zemin:   color-mix(in srgb, var(--renk-uyari) 10%, #fff);

  /* ── MONO TİPOGRAFİ (whitepaper kod blokları) ──────────────────────────────────
     "SANAT ≠ SİSTEM" kuralı SANAT RENGİ içindi (oyunun paleti yerel kalır).
     Mono bir BELGE İHTİYACI, sanat değil ⇒ sisteme girer. (USTABAŞI onayı.)
     Kaynak: whitepaper'ın kendi --font-mono'su, birebir korundu. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --v-fs-kod: 14px;
}

/* DURUM BİLEŞENİ — sayfa artık "yeşil yazı" kararını kendi vermez */
.v-durum {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-govde); font-size: var(--v-fs-kucuk); line-height: var(--lh-govde);
}
.v-durum__im { flex-shrink: 0; line-height: 1.4; }
.v-durum--basari { background: var(--renk-basari-zemin); border-color: color-mix(in srgb, var(--renk-basari) 32%, transparent); color: var(--renk-basari-metin); }
.v-durum--hata   { background: var(--renk-hata-zemin);   border-color: color-mix(in srgb, var(--renk-hata) 30%, transparent);   color: var(--renk-hata); }
.v-durum--uyari  { background: var(--renk-uyari-zemin);  border-color: color-mix(in srgb, var(--renk-uyari) 30%, transparent);  color: var(--renk-uyari); }
/* nokta/rozet: YAZISIZ ⇒ canlı dolgu tonu meşru */
.v-durum-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--renk-basari); display: inline-block; flex-shrink: 0; }

/* KOD BİLEŞENİ */
.v-kod {
  font-family: var(--font-mono); font-size: var(--v-fs-kod); line-height: 1.55;
  background: var(--renk-yuzey); border: var(--kenar); border-radius: var(--r-sm);
  color: var(--renk-murekkep);
  padding: var(--sp-2) var(--sp-3);
}
pre.v-kod { padding: var(--sp-5); overflow-x: auto; }   /* geniş kod yatay kayar — sayfa gövdesi ASLA kaymaz */
pre.v-kod code { background: none; border: 0; padding: 0; font: inherit; color: inherit; }

/* ── SAYFA TABANI ─────────────────────────────────────────────────────────────── */
.v-sayfa {
  margin: 0;
  background: var(--renk-zemin);
  color: var(--renk-govde);
  font-family: var(--font-govde);
  font-size: var(--v-fs-govde);
  line-height: var(--lh-govde);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:root {
  /* TEK TİPOGRAFİ ÖLÇEĞİ — akıcı, tek kaynak (sayfalar boyut yazmaz) */
  --v-fs-hero:   clamp(38px, 7.4vw, 76px);
  --v-fs-h1:     clamp(31px, 5.0vw, 50px);
  --v-fs-h2:     clamp(23px, 3.2vw, 33px);
  --v-fs-h3:     clamp(18px, 2.0vw, 21px);
  --v-fs-govde:  17px;              /* TEK gövde boyutu (ölçümde 15/17/17/16.5/15.5 idi) */
  --v-fs-kucuk:  15px;
  --v-fs-eyebrow: 12px;
  /* dikey ritim */
  --v-bolum-y:   clamp(56px, 9vw, 104px);
  --v-olcu:      66ch;              /* okuma ölçüsü — satır uzunluğu tek karar */
  --lh-uzun:     1.72;              /* uzun-metin/monograf satır ritmi (bkz. .v-govde--uzun) */
  --v-kap:       1100px;            /* nav ile AYNI kapsayıcı (nav .satir max-width:1100px) */
}

/* ── KAPSAYICI + BÖLÜM RİTMİ ──────────────────────────────────────────────────── */
/* ⚠️ PİLOT DERSİ #2 (ölçüldü): "nav ile AYNI kapsayıcı" diye yazmıştım — max-width için
   doğruydu (1100=1100) ama İÇ BOŞLUK için değil: nav `.satir` padding 0 18px, bendeki
   clamp(18,5vw,32) masaüstünde 32px veriyordu ⇒ kutular hizalı, METİN KENARI 14px kaymış:
   logo 188, h1 202. "Aynı kapsayıcı" kutuyu değil, METİN SÜTUNUNU hizalamak demektir —
   logo ile başlığın farklı sütunda durması tam da "tek vücut değil" işaretidir.
   ⇒ nav'ın 18px'ine hizalandı. (nav.css'e DOKUNULMADI — USTABAŞI emri: rollout paketinde.) */
.v-kap    { max-width: var(--v-kap); margin: 0 auto; padding-inline: 18px; }
.v-bolum  { padding-block: var(--v-bolum-y); }
.v-bolum--sik { padding-block: calc(var(--v-bolum-y) * .6); }
/* kuşak: ritmi kıran açık-renk şerit (koyu şerit YOK — Hüküm 1) */
.v-kusak  { background: var(--renk-yuzey); border-block: var(--kenar); }
.v-kusak--beyaz { background: var(--renk-zemin2); border-block: var(--kenar); }
.v-olcu-metin { max-width: var(--v-olcu); }

/* ── TİPOGRAFİ BİLEŞENLERİ ────────────────────────────────────────────────────── */
.v-hero-baslik, .v-h1, .v-h2, .v-h3 {
  font-family: var(--font-baslik);
  font-optical-sizing: auto;
  color: var(--renk-murekkep);
  line-height: var(--lh-sik);
  margin: 0;
  text-wrap: balance;
}
.v-hero-baslik { font-size: var(--v-fs-hero); font-weight: 400; letter-spacing: -.022em; }
.v-h1          { font-size: var(--v-fs-h1);   font-weight: 500; letter-spacing: -.018em; }
.v-h2          { font-size: var(--v-fs-h2);   font-weight: 500; letter-spacing: -.014em; }
.v-h3          { font-size: var(--v-fs-h3);   font-weight: 600; letter-spacing: -.008em; }
/* italik aksan — Fraunces italic (latin-ext dahil: `ğ` düşmez, bkz. fonts.css notu) */
.v-vurgu-italik { font-style: italic; color: var(--renk-marka); }

.v-eyebrow {
  font-family: var(--font-govde);
  font-size: var(--v-fs-eyebrow); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--renk-sus);
  margin: 0 0 var(--sp-3);
}
.v-lede    { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.55; color: var(--renk-govde); max-width: var(--v-olcu); margin: var(--sp-4) 0 0; }
/* ⚠️ PİLOT DERSİ (hakkinda, ölçüldü): bu bileşen önce KENDİ RİTMİNE SAHİP DEĞİLDİ (margin yoktu).
   Sayfa yerel `section.blok p{margin:0 0 16px}` kuralını silince paragraflar TARAYICI VARSAYILANINA
   düştü (17/17) ⇒ ritim bozuldu. Belirti daha önce de vardı: konseptlerde her .v-govde'ye elle
   `style="margin-top:…"` yazıyordum — o satır-içi stiller bir koku işaretiydi, bileşen eksikti.
   Bir bileşen boyutunu veriyorsa BOŞLUĞUNU da vermeli; yoksa sayfa yeniden karar verir. */
.v-govde   { font-size: var(--v-fs-govde); line-height: var(--lh-govde); color: var(--renk-govde); max-width: var(--v-olcu); margin: 0 0 var(--sp-4); }
.v-govde:last-child { margin-bottom: 0; }
/* ── UZUN-METİN RİTMİ (USTABAŞI kararı, 15 Tem) ────────────────────────────────
   whitepaper `line-height:1.72` ile geliyordu — SAYFA-YEREL bir sapmaydı ve önce
   sisteme (1.6) hizalamıştım. USTABAŞI hükmü: sapma gerçek bir ROL-İHTİYACINA dayanıyorsa
   (13 bölümlük belge/monograf) çözüm onu SİLMEK değil, ADLANDIRIP SİSTEME ALMAK.
   ⇒ "Her sapma sürüklenme doğurur" dersinin doğru sonucu: adsız sapma sürüklenir,
     ADLANDIRILMIŞ sapma bir KARARDIR — ve karar tek yerde durur, çoğalmaz.
   İki kapsamda çalışır:
     <p class="v-govde v-govde--uzun">      → tek paragraf
     <body class="v-sayfa v-govde--uzun">   → tüm belge (--lh-govde'yi devreder, aşağı miras kalır) */
.v-govde--uzun { --lh-govde: var(--lh-uzun); line-height: var(--lh-uzun); }
.v-kucuk   { font-size: var(--v-fs-kucuk); color: var(--renk-sus); }
/* altın tüy-çizgi — premium detay, AZ kullanılır (aksan token'ı) */
.v-tuy { border: 0; border-top: 1px solid color-mix(in srgb, var(--renk-aksan) 55%, transparent); margin: var(--sp-6) 0; }
.v-tuy--kisa { width: 54px; margin-inline: 0; }

/* ── DÜĞME BİLEŞENLERİ (renk-eşleştirmesi BURADA kilitli — sayfa karar vermez) ─── */
.v-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);                 /* TEK hap değeri — 99/999 elde yazımı biter */
  font-family: var(--font-govde); font-size: var(--v-fs-kucuk); font-weight: 600;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform var(--dur-hizli) var(--ease-yumusak), box-shadow var(--dur-orta) var(--ease-yumusak), background var(--dur-hizli) linear;
}
/* BİRİNCİL: beyaz metin taşır ⇒ --p-mercan-cta ŞART (ham mercan 2.95:1 = AA altı) */
.v-cta--birincil { background: var(--p-mercan-cta); color: #fff; box-shadow: var(--golge-md); }
.v-cta--birincil:hover { background: color-mix(in srgb, var(--p-mercan-cta) 88%, #000); transform: translateY(-2px); box-shadow: var(--golge-lg); }
/* İKİNCİL: lacivert dolgu + beyaz (12.21:1 — hakkında'da zaten ölçüldü) */
.v-cta--ikincil { background: var(--renk-marka); color: var(--renk-zemin2); box-shadow: var(--golge-sm); }
.v-cta--ikincil:hover { transform: translateY(-2px); box-shadow: var(--golge-md); }
/* VURGU: mavi dolgu (randevu `.btn.blue` → "Yeni talep").
   ⚠️ ÖLÇÜLDÜ: --renk-vurgu (#3A7CA5) + beyaz = 4.56:1 ✅ AA ⇒ mercandaki gibi koyu türev GEREKMİYOR.
   (Taslakta "≈3.1:1, AA-altı" diye tahmin etmiştim — ölçüm yalanladı. Ham mercanın AA-altı olması
    HER marka renginin AA-altı olduğu anlamına gelmiyor: lacivert 12.21 · mavi 4.56 · mercan 2.95.
    Her rengi AYRI ölç.) */
.v-cta--vurgu { background: var(--renk-vurgu); color: #fff; box-shadow: var(--golge-sm); }
.v-cta--vurgu:hover { background: color-mix(in srgb, var(--renk-vurgu) 88%, #000); transform: translateY(-2px); box-shadow: var(--golge-md); }
/* HAYALET: üçüncül, kenarlıklı */
.v-cta--hayalet { background: transparent; color: var(--renk-murekkep); border: 1px solid var(--renk-cizgi); }
.v-cta--hayalet:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); transform: translateY(-2px); }
/* ── DEVRE-DIŞI DURUMU (randevu geçişinde yakalandı — sistemde YOKTU) ──────────────
   🔴 randevu'nun yereli `.btn:disabled{opacity:.45}` diyordu. `.btn`→`.v-cta` yapınca o kural
   EŞLEŞMEZ oldu ve "Devam →" devre-dışıyken ETKİN görünecekti — sessiz, ama akışın
   en kritik düğmesi. Sınıfı taşırken DURUMU taşımayı unutmak, geçişin en sinsi kusuru:
   yeni ad çalışır, eski DAVRANIŞ düşer.
   ⇒ Bir bileşen görünüşü veriyorsa DURUMLARINI da vermeli — yoksa sayfa geri yazmak zorunda kalır.
   `[disabled]` + `[aria-disabled]` birlikte: <button disabled> ve <a aria-disabled> ikisi de kapsanır. */
.v-cta:disabled, .v-cta[disabled], .v-cta[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none;
}
.v-cta--sm { min-height: 40px; padding: var(--sp-2) var(--sp-5); font-size: 14px; }
.v-cta-satir { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ── ÇOCUK KAPISI ─────────────────────────────────────────────────────────────────
   Menüden görsel olarak AYRIŞAN tek sıcak kapı (IA kararı korunur).
   ≥88px değil — bu YETİŞKİN yüzeyindeki bir KAPI, çocuk kontrolü değil; ebeveyn tıklar.
   Ham mercan burada DOLGU olarak yasal DEĞİL: yazı taşıyor ⇒ mercan-cta + beyaz. */
.v-cocuk-kapi {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  background: var(--renk-zemin2);
  border: 1.5px solid color-mix(in srgb, var(--p-mercan) 42%, transparent);
  color: var(--renk-murekkep); text-decoration: none;
  font-family: var(--font-govde); font-size: var(--v-fs-kucuk); font-weight: 600;
  box-shadow: var(--golge-sm);
  transition: transform var(--dur-hizli) var(--ease-yumusak), box-shadow var(--dur-orta) var(--ease-yumusak), border-color var(--dur-hizli) linear;
}
.v-cocuk-kapi:hover { transform: translateY(-2px); box-shadow: var(--golge-md); border-color: var(--p-mercan); }
.v-cocuk-kapi .pikto { font-size: 22px; line-height: 1; }
.v-cocuk-kapi small { display: block; font-weight: 500; font-size: 12.5px; color: var(--renk-sus); letter-spacing: normal; text-transform: none; }

/* ── YÜZEY / KART ─────────────────────────────────────────────────────────────── */
.v-kart {
  display: block;
  background: var(--renk-zemin2);
  border: var(--kenar);
  border-radius: var(--r-md);                  /* TEK kart yarıçapı */
  padding: var(--sp-6);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-hizli) var(--ease-yumusak), box-shadow var(--dur-orta) var(--ease-yumusak), border-color var(--dur-hizli) linear;
}
a.v-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-md); border-color: color-mix(in srgb, var(--renk-vurgu) 40%, var(--renk-cizgi)); }
.v-kart__git { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4); color: var(--renk-vurgu); font-weight: 600; font-size: var(--v-fs-kucuk); }
.v-izgara { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .v-izgara--2 { grid-template-columns: 1fr 1fr; } .v-izgara--3 { grid-template-columns: repeat(3, 1fr); } }

/* ── KÜNYE SATIRI (rakamsız — E4) ─────────────────────────────────────────────── */
.v-kunye { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; padding: 0; margin: var(--sp-5) 0 0; list-style: none; }
.v-kunye li { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--v-fs-kucuk); color: var(--renk-sus); }
.v-kunye li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--renk-aksan); flex-shrink: 0; }

/* ── ALTLIK ───────────────────────────────────────────────────────────────────── */
.v-altlik { background: var(--renk-yuzey); border-top: var(--kenar); padding-block: var(--sp-7); }
.v-altlik a { color: var(--renk-vurgu); }

/* ── ERİŞİM ───────────────────────────────────────────────────────────────────── */
:where(.v-cta, .v-kart, .v-cocuk-kapi):focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) {
  /* hareketi KIS, içeriği SİLME (çocuk-güvenlik kuralı yetişkin yüzeyinde de geçerli) */
  .v-cta, .v-kart, .v-cocuk-kapi { transition: none; }
  .v-cta:hover, a.v-kart:hover, .v-cocuk-kapi:hover { transform: none; }
  .v-reveal { opacity: 1 !important; transform: none !important; }
}

/* ── giriş belirmesi (opsiyonel, saf CSS+IO; reduce-motion'da kapanır) ────────── */
.v-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-yavas) var(--ease-yumusak), transform var(--dur-yavas) var(--ease-yumusak); }
.v-reveal.gorundu { opacity: 1; transform: none; }