/* ═══════════════════════════════════════════
   Astroloop — Tasarım Sistemi
   Açık tema. Tek kaynak: renkler yalnızca buradan gelir.
   ═══════════════════════════════════════════ */

:root {
    /* ── Yüzeyler ──────────────────────────────────────────────
       Saf beyaz yerine hafif sıcak bir taban: ekranda daha yumuşak
       ve altın tonuyla uyumlu duruyor. */
    --bg-page: #faf9f7;
    --surface-1: #ffffff;   /* kartlar, modal */
    --surface-2: #f4f2ee;   /* ikincil paneller */
    --surface-3: #eae7e0;   /* vurgulu / hover */
    --surface-inset: rgba(26, 24, 21, 0.035);  /* input zemini */
    --surface-overlay: rgba(250, 249, 247, 0.85); /* backdrop */

    /* ── Kenarlıklar ── */
    --border-subtle: rgba(26, 24, 21, 0.07);
    --border-default: rgba(26, 24, 21, 0.13);
    --border-strong: rgba(26, 24, 21, 0.22);

    /* ── Metin ──────────────────────────────────────────────────
       Kontrast oranları beyaz üzerinde WCAG AA'yı geçer. */
    --text-primary: #1a1815;    /* 16.8:1 */
    --text-secondary: #56514a;  /*  7.5:1 */
    /* Yalnızca beyaza göre seçilirse ikincil yüzeylerde eşiğin altına
       düşüyor. Bu değer --surface-1/2/3 ve --bg-page üzerinde de AA geçer
       (en düşük 4.7:1, --surface-3 üzerinde). */
    --text-muted: #6b6459;
    --text-on-gold: #2a2115;    /* altın zemin üzerinde */
    --text-inverse: #ffffff;

    /* ── Altın ──────────────────────────────────────────────────
       İki ayrı ton: --gold dekoratif (çizgi, ikon, çerçeve),
       --gold-text okunabilir metin için koyulaştırılmış.
       Eski tek ton (#c9a84c) beyazda 2.2:1 veriyordu — metinde kullanılamaz. */
    --gold: #c9a84c;            /* dekoratif */
    --gold-text: #8a6a24;       /* metin — 4.8:1 */
    --gold-deep: #6d5319;       /* vurgulu metin */
    --gold-light: #dfc07a;
    --gold-dim: rgba(201, 168, 76, 0.28);
    --gold-wash: rgba(201, 168, 76, 0.08);
    --gold-glow: rgba(201, 168, 76, 0.40);

    /* ── Durum renkleri ── */
    --danger: #b3261e;
    --danger-wash: rgba(179, 38, 30, 0.07);
    --danger-border: rgba(179, 38, 30, 0.22);
    --success: #1d6b45;

    /* ── Gölgeler — kurumsal, yumuşak, çok katmanlı ── */
    --shadow-sm: 0 1px 2px rgba(26, 24, 21, 0.05), 0 1px 3px rgba(26, 24, 21, 0.04);
    --shadow-md: 0 2px 6px rgba(26, 24, 21, 0.05), 0 6px 16px rgba(26, 24, 21, 0.06);
    --shadow-lg: 0 4px 12px rgba(26, 24, 21, 0.06), 0 16px 40px rgba(26, 24, 21, 0.10);
    --shadow-xl: 0 8px 20px rgba(26, 24, 21, 0.07), 0 32px 72px rgba(26, 24, 21, 0.14);

    /* ── Tipografi ──────────────────────────────────────────────
       Modüler ölçek (oran ~1.25) + akışkan boyut.
       clamp() ile mobilden masaüstüne pürüzsüz büyür; ara kırılma
       noktalarında font-size'ı elle ayarlamaya gerek kalmaz. */
    --font-display: 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;
    --font-ui: 'Inter', sans-serif;

    --text-2xs:  clamp(0.62rem, 0.60rem + 0.10vw, 0.68rem);
    --text-xs:   clamp(0.72rem, 0.69rem + 0.14vw, 0.80rem);
    --text-sm:   clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem);
    --text-base: clamp(0.95rem, 0.90rem + 0.24vw, 1.08rem);
    --text-md:   clamp(1.06rem, 0.99rem + 0.32vw, 1.22rem);
    --text-lg:   clamp(1.22rem, 1.10rem + 0.55vw, 1.55rem);
    --text-xl:   clamp(1.45rem, 1.24rem + 0.95vw, 2.05rem);
    --text-2xl:  clamp(1.80rem, 1.42rem + 1.70vw, 2.90rem);

    /* Satır yüksekliği: uzun metin okunaklı, başlık sıkı */
    --leading-tight: 1.18;
    --leading-snug: 1.38;
    --leading-normal: 1.62;
    --leading-relaxed: 1.78;

    /* Harf aralığı — büyük başlıkta negatif, küçük büyük harfte pozitif */
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.16em;
    --tracking-widest: 0.30em;

    /* ── Boyutlar ── */
    --navbar-height: 64px;
    --container-max: 1400px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ── Hareket ────────────────────────────────────────────────
       Yumuşama eğrileri anlamlarına göre ayrılmış:
        - exit  : hızlı çıkış, kullanıcıyı bekletme
        - enter : yavaşlayarak yerleşme (doğal, "gelmiş" hissi)
        - spring: hafif taşma — merak ve canlılık verir */
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --dur-instant: 120ms;
    --dur-fast: 200ms;
    --dur-med: 340ms;
    --dur-slow: 560ms;
    --dur-story: 820ms;   /* anlatı temposu — okunacak metin için */

    /* Kademeli giriş: her satır arasındaki gecikme */
    --stagger: 90ms;

    --transition-fast: var(--dur-fast) var(--ease-inout);
    --transition-med: var(--dur-med) var(--ease-inout);
    --transition-slow: var(--dur-slow) var(--ease-enter);

    /* ── Geriye dönük uyumluluk ──────────────────────────────────
       Eski adları kullanan CSS kırılmasın diye eşleniyor.
       Yeni kod bunları KULLANMAMALI. */
    --bg-primary: var(--bg-page);
    --bg-secondary: var(--surface-2);
    --bg-tertiary: var(--surface-3);
    --glass-bg: var(--surface-inset);
    --glass-bg-strong: var(--surface-2);
    --glass-border: var(--border-subtle);
    --glass-border-bright: var(--border-default);
    --glass-blur: 20px;
    --text-gold: var(--gold-text);
    --gold-glow-strong: var(--gold-glow);
    --cta-blue: #1f6fdb;
    --cta-blue-hover: #1a5fbd;
    --cta-blue-glow: rgba(31, 111, 219, 0.28);
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
}

/* ═══ Altın gradyan metin — yalnız BÜYÜK başlıklarda ═══
   Küçük metinde okunabilirliği düşürür. */
.text-gold-gradient {
    background: linear-gradient(135deg, #b08d3f 0%, #8a6a24 45%, #6d5319 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}