/* ═══════════════════════════════════════════════════════════════
   İBŞİR YAPI — DESIGN TOKENS
   Tek kaynak. Radius / spacing / gölge / tipografi / geçiş burada
   tanımlanır; hiçbir bileşen kendi sabit değerini (magic number) yazmaz.
   Renkler tema katmanından gelir (includes/theme.php → <style id="theme-vars">).

   Görsel dil: warm-light luxury. Sayfa açık ve ferah, kartlar beyaz,
   sarı yalnız vurgu. Hero ve footer koyu "ada"lar (.on-dark bağlamı).
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Vurgu (tema yoksa yedek) ─────────────────────────── */
    --primary:      #D6A354;
    --primary-d:    #B8863C;
    --primary-ink:  #8A6528;   /* açık zeminde METİN için — WCAG AA */
    --accent:       #E5B567;
    --primary-rgb:  214,163,84;
    --on-primary:   #1A1206;

    /* ── Açık yüzeyler ────────────────────────────────────── */
    --bg:           #F7F7F4;   /* sayfa zemini — sıcak kırık beyaz */
    --surface:      #F3F4F6;   /* yumuşak yüzey — dönüşümlü bölüm */
    --card:         #FFFFFF;   /* kart / form / panel */
    --bg-rgb:       247,247,244;

    /* ── Koyu ada (hero, footer, görsel üstü) ─────────────── */
    --dark:         #16181D;
    --dark-2:       #0F1115;
    --dark-rgb:     22,24,29;

    /* ── Metin ────────────────────────────────────────────── */
    --text:         #111111;
    /* #6B7280 idi: --bg üzerinde tam sınırda (4.50), --surface üzerinde
       KALIYORDU (4.39 < 4.5). Ikincil metin çoğu yerde surface zemininde
       duruyor. #5F6672 ikisinde de rahat geçiyor (5.39 / 5.26). */
    --text-2:       #5F6672;
    --text-3:       #8A909C;
    --on-dark:      #FFFFFF;
    --on-dark-2:    rgba(255,255,255,.74);
    --on-dark-3:    rgba(255,255,255,.50);

    /* ── Çizgi ────────────────────────────────────────────── */
    --border:        rgba(0,0,0,.08);
    --border-strong: rgba(0,0,0,.16);
    --border-dark:   rgba(255,255,255,.12);

    --gradient-page: linear-gradient(180deg, #F7F7F4 0%, #FFFFFF 60%, #F7F7F4 100%);
    --gradient-gold: linear-gradient(135deg, var(--accent) 0%, var(--primary-d) 100%);

    /* ── Köşe yarıçapı — hiçbir yerde 90° yok ─────────────── */
    --r-btn:      9999px;
    --r-pill:     9999px;
    --r-nav:      24px;
    --r-card:     28px;
    --r-img:      32px;
    --r-input:    20px;
    --r-badge:    9999px;
    --r-section:  32px;
    --r-modal:    32px;
    --r-sm:       16px;
    --r-xs:       12px;

    /* ── Boşluk ölçeği (4pt tabanlı) ──────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  44px;
    --space-8:  64px;
    --space-9:  88px;
    --section-y: clamp(72px, 8vw, 140px);
    --gap-grid:  clamp(20px, 2.4vw, 40px);

    /* ── Kapsayıcı ────────────────────────────────────────── */
    --container:      1440px;
    --container-nar:  1080px;
    --container-pad:  32px;

    /* ── Gölge (açık zemin için yumuşak, nötr) ────────────── */
    --shadow-xs:   0 1px 3px rgba(0,0,0,.05);
    --shadow-sm:   0 4px 18px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
    --shadow:      0 25px 80px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.03);
    --shadow-lg:   0 40px 110px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.05);
    --shadow-gold: 0 8px 22px rgba(var(--primary-rgb), .28);
    --shadow-gold-lg: 0 14px 34px rgba(var(--primary-rgb), .38);

    /* ── Tipografi ────────────────────────────────────────── */
    --font: 'Manrope', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    /* Başlık ailesi. Faz 2'de başlıklara uygulanır; burada yalnız tanımlanır. */
    --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif;
    /* Ölçek Faz 2'de SERTLEŞTİRİLDİ. Önceki hâlde hero 80px'de duruyor,
       bölüm başlıkları 56/52px ile ona çok yakın kalıyordu — hiyerarşi
       düzdü, göz hiçbir yerde durmuyordu. Artık hero ile gövde arasında
       gerçek bir sıçrama var; başlıklar Fraunces, gövde Manrope. */
    --fs-hero:    clamp(44px, 6.6vw, 104px);
    --fs-h1:      clamp(34px, 4.4vw, 68px);
    --fs-h2:      clamp(28px, 3.4vw, 48px);
    --fs-h3:      clamp(20px, 1.7vw, 26px);
    --fs-h4:      18px;
    --fs-body:    18px;
    --fs-body-sm: 16px;
    --fs-small:   15px;
    --fs-btn:     16px;
    --fs-eyebrow: 12px;
    /* Künye (pafta antedi) mikro etiketleri */
    --fs-kunye:   11px;

    /* Serif başlıklar sanstan daha sıkı satır ve harf aralığı ister. */
    --lh-hero:    .94;
    --lh-tight:   1.02;
    --lh-title:   1.16;
    --lh-body:    1.68;
    --ls-eyebrow: .14em;
    --ls-kunye:   .16em;
    --ls-tight:   -.03em;
    --ls-hero:    -.035em;

    /* ── Hareket: 200-350ms, GPU dostu ────────────────────── */
    --ease:      cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --t-fast:    .2s var(--ease);
    --t:         .28s var(--ease);
    --t-slow:    .35s var(--ease);

    /* ── Kontrol yükseklikleri (buton/input tek ölçü) ─────── */
    --control-h:    50px;
    --control-h-sm: 42px;
    /* Parmak hedefi (WCAG 2.5.8 / Apple HIG). Alt sınır 44px, ama TAM 44
       yazmak riskli: yükseklik yalnız min-height'tan geliyorsa tarayıcı
       alt-piksel yuvarlamasıyla 43.99999px üretebiliyor ve öğe sınırın
       altına düşüyor (anasayfa hero'sundaki "Ücretsiz Keşif" düğmesinde
       ölçüldü). 46px hem sınırdan uzak hem mobil --control-h ile aynı. */
    --touch:        46px;
    --control-px:   30px;
    --card-pad:     32px;

    /* ── Cam ──────────────────────────────────────────────── */
    --glass-bg:     rgba(255,255,255,.72);
    --glass-bg-2:   rgba(255,255,255,.90);
    --glass-border: rgba(16,20,30,.08);
    --glass-blur:   blur(18px) saturate(160%);

    /* ── Katmanlar ────────────────────────────────────────── */
    --z-base:    1;
    --z-nav:     1000;
    --z-overlay: 1400;
    --z-modal:   1600;
    --z-toast:   1800;
    --z-adminbar:2000;

    --nav-h: 76px;
}

/* Koyu ada bağlamı: hero, footer, görsel üstü katmanlar */
.on-dark {
    --text:          var(--on-dark);
    --text-2:        var(--on-dark-2);
    --text-3:        var(--on-dark-3);
    --border:        var(--border-dark);
    --border-strong: rgba(255,255,255,.22);
    --primary-ink:   var(--primary);
    --glass-bg:      rgba(255,255,255,.08);
    --glass-bg-2:    rgba(255,255,255,.14);
    --glass-border:  rgba(255,255,255,.14);
    --card:          rgba(255,255,255,.06);
}

@media (max-width: 900px) {
    :root {
        --container-pad: 18px;
        --fs-body: 16px;
        --nav-h: 66px;
        --control-h: 46px;
        --section-y: clamp(52px, 9vw, 80px);
    }
}