/* =====================================================================
   QR MENÜ - TEMA DEĞİŞKENLERİ (Koyu / Açık)
   Bu dosya tüm renk, tipografi ve boşluk değerlerini tanımlar.
   Diğer CSS dosyaları yalnızca bu değişkenleri kullanır.
   ===================================================================== */

/* ---------- KOYU TEMA (varsayılan) ---------- */
:root,
[data-theme="dark"] {
    /* Yüzeyler */
    --bg:              #0B0B0D;
    --bg-alt:          #111114;
    --surface:         #141417;
    --surface-2:       #1B1B1F;
    --surface-hover:   #232328;
    --overlay:         rgba(0, 0, 0, .72);

    /* Metin */
    --text:            #F4F1EC;
    --text-muted:      #B9B3A9;
    --text-dim:        #7C7770;

    /* Marka */
    --gold:            #E0A94A;
    --gold-soft:       #F0C87A;
    --gold-deep:       #C98F2E;
    --gold-ghost:      rgba(224, 169, 74, .12);

    /* Vurgu / rozet renkleri */
    --accent-red:      #D93A5B;
    --accent-purple:   #7C4DFF;
    --accent-green:    #4CAF7D;

    /* Çizgi & gölge */
    --border:          rgba(224, 169, 74, .18);
    --border-soft:     rgba(255, 255, 255, .07);
    --shadow-sm:       0 2px 8px rgba(0, 0, 0, .35);
    --shadow-md:       0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg:       0 18px 48px rgba(0, 0, 0, .55);
    --glow-gold:       0 0 24px rgba(224, 169, 74, .25);

    /* Gradyanlar */
    --grad-gold:       linear-gradient(135deg, #F0C87A 0%, #E0A94A 50%, #C98F2E 100%);
    --grad-card:       linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
    --grad-hero:       linear-gradient(90deg, #0B0B0D 0%, rgba(11,11,13,.85) 45%, rgba(11,11,13,0) 100%);

    color-scheme: dark;
}

/* ---------- AÇIK TEMA ---------- */
[data-theme="light"] {
    --bg:              #FAF7F2;
    --bg-alt:          #F3EEE5;
    --surface:         #FFFFFF;
    --surface-2:       #F7F3EC;
    --surface-hover:   #F0E9DD;
    --overlay:         rgba(255, 255, 255, .78);

    --text:            #1C1A16;
    --text-muted:      #5C554B;
    --text-dim:        #8C857A;

    --gold:            #B37F1E;
    --gold-soft:       #D8A445;
    --gold-deep:       #8E6210;
    --gold-ghost:      rgba(179, 127, 30, .10);

    --accent-red:      #C42546;
    --accent-purple:   #5A34C7;
    --accent-green:    #2F8A5C;

    --border:          rgba(179, 127, 30, .22);
    --border-soft:     rgba(28, 26, 22, .09);
    --shadow-sm:       0 2px 8px rgba(60, 48, 28, .08);
    --shadow-md:       0 8px 24px rgba(60, 48, 28, .12);
    --shadow-lg:       0 18px 48px rgba(60, 48, 28, .16);
    --glow-gold:       0 0 24px rgba(179, 127, 30, .18);

    --grad-gold:       linear-gradient(135deg, #D8A445 0%, #B37F1E 50%, #8E6210 100%);
    --grad-card:       linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,0) 100%);
    --grad-hero:       linear-gradient(90deg, #FAF7F2 0%, rgba(250,247,242,.85) 45%, rgba(250,247,242,0) 100%);

    color-scheme: light;
}

/* ---------- TİPOGRAFİ & ÖLÇEK ---------- */
:root {
    --font-display: "Playfair Display", "Georgia", serif;   /* başlıklar */
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
    --font-ui:      var(--font-body);

    --fs-xs:   .75rem;
    --fs-sm:   .875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;
    --fs-4xl:  3rem;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --container: 1360px;
    --header-h:  72px;
    --tabbar-h:  76px;   /* mobil alt menü yüksekliği */

    --t-fast: .18s ease;
    --t-base: .28s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background var(--t-base), color var(--t-base);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-3); }

a { color: inherit; text-decoration: none; }

img, svg, video { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Odak görünürlüğü (erişilebilirlik) */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Yardımcı sınıflar */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
.text-gold { color: var(--gold); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobilde alt menü için gövde boşluğu */
@media (max-width: 991px) {
    body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}