/**
 * CSS Değişken Sistemi — Av. Berfin Aksoy
 * ─────────────────────────────────────────
 * Renk şeması: Antrasit (#383e42) + Beyaz + Altın vurgu (#C9A84C)
 * Tüm tema değişikliği yalnızca bu dosyadan yapılır.
 */

:root {

    /* ══════════════════════════════════════
       RENK PALETİ
    ══════════════════════════════════════ */

    /* — Antrasit skalası — */
    --antrasit-900: #1c1f21;   /* En koyu — footer zemin */
    --antrasit-800: #272c2f;   /* Koyu — topbar, koyu bölümler */
    --antrasit-700: #383e42;   /* Ana antrasit — başlıklar, istatistik bg */
    --antrasit-600: #4e565b;   /* Orta — ikincil metin, border */
    --antrasit-500: #636c71;   /* Açık orta */
    --antrasit-400: #8a9296;   /* Açık — placeholder */
    --antrasit-200: #d0d4d6;   /* Çok açık — ince border */
    --antrasit-300: #b0b8bc;   /* Açık — sidebar metin */
    --antrasit-100: #eaecec;   /* Neredeyse beyaz — hover bg */
    --antrasit-50:  #f4f5f5;   /* Bölüm arka planı */

    /* — Altın vurgu skalası — */
    --altin-700:    #a8882e;   /* Koyu altın — active/pressed */
    --altin-600:    #C9A84C;   /* Ana altın — CTA, vurgu */
    --altin-400:    #dfc070;   /* Açık altın — hover */
    --altin-200:    #f0dfa8;   /* Çok açık altın — subtle bg */
    --altin-100:    #faf4e4;   /* Altın tint arka plan */

    /* — Semantik takma adlar (CSS'te kullanılan isimler) — */
    --renk-birincil:          var(--altin-600);
    --renk-birincil-acik:     var(--altin-400);
    --renk-birincil-koyu:     var(--altin-700);
    --renk-altin:             var(--altin-600);
    --renk-altin-acik:        var(--altin-400);

    --renk-ikincil:           var(--antrasit-700);
    --renk-ikincil-acik:      var(--antrasit-600);

    /* — Arka planlar — */
    --renk-arka-plan:         #ffffff;
    --renk-arka-plan-acik:    var(--antrasit-50);   /* Bölüm arası hafif gri */
    --renk-arka-plan-gri:     var(--antrasit-100);

    /* — Metin — */
    --renk-metin:             var(--antrasit-800);  /* Ana metin */
    --renk-metin-acik:        var(--antrasit-500);  /* İkincil metin */
    --renk-metin-cok-acik:    var(--antrasit-400);  /* Placeholder, meta */
    --renk-metin-beyaz:       #ffffff;

    /* — Sınırlar — */
    --renk-sinir:             var(--antrasit-200);
    --renk-sinir-acik:        var(--antrasit-100);

    /* — Durum renkleri — */
    --renk-basari:            #2e7d52;
    --renk-hata:              #c0392b;
    --renk-uyari:             #d4860a;
    --renk-bilgi:             #1a6e8a;

    /* ══════════════════════════════════════
       TİPOGRAFİ
    ══════════════════════════════════════ */
    --font-baslik:            'Playfair Display', Georgia, serif;
    --font-metin:             'Open Sans', 'Segoe UI', Arial, sans-serif;
    --font-boyut-taban:       16px;
    --font-boyut-xs:          0.75rem;    /* 12px */
    --font-boyut-sm:          0.875rem;   /* 14px */
    --font-boyut-md:          1rem;       /* 16px */
    --font-boyut-lg:          1.125rem;   /* 18px */
    --font-boyut-xl:          1.25rem;    /* 20px */
    --font-boyut-2xl:         1.5rem;     /* 24px */
    --font-boyut-3xl:         1.875rem;   /* 30px */
    --font-boyut-4xl:         2.25rem;    /* 36px */
    --font-boyut-5xl:         3rem;       /* 48px */
    --font-agirlik-normal:    400;
    --font-agirlik-orta:      500;
    --font-agirlik-kalin:     600;
    --font-agirlik-cok-kalin: 700;
    --satir-yuksekligi:       1.75;

    /* ══════════════════════════════════════
       BOŞLUKLAR
    ══════════════════════════════════════ */
    --bosluk-xs:   4px;
    --bosluk-sm:   8px;
    --bosluk-md:   16px;
    --bosluk-lg:   24px;
    --bosluk-xl:   32px;
    --bosluk-2xl:  48px;
    --bosluk-3xl:  64px;
    --bosluk-4xl:  96px;

    /* ══════════════════════════════════════
       KÖŞE YARIÇAPI
    ══════════════════════════════════════ */
    --radius-xs:   2px;
    --radius-sm:   3px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-tam:  9999px;

    /* ══════════════════════════════════════
       GÖLGELER — antrasit bazlı
    ══════════════════════════════════════ */
    --golge-xs:    0 1px 3px  rgba(56, 62, 66, 0.07);
    --golge-sm:    0 2px 8px  rgba(56, 62, 66, 0.09);
    --golge-kart:  0 4px 20px rgba(56, 62, 66, 0.10);
    --golge-hover: 0 8px 32px rgba(56, 62, 66, 0.16);
    --golge-buyuk: 0 16px 48px rgba(56, 62, 66, 0.20);
    --golge-altin: 0 4px 20px rgba(201, 168, 76, 0.28);

    /* ══════════════════════════════════════
       GEÇİŞLER
    ══════════════════════════════════════ */
    --gecis:       all 0.28s ease;
    --gecis-hizli: all 0.15s ease;
    --gecis-yavas: all 0.5s ease;

    /* ══════════════════════════════════════
       LAYOUT
    ══════════════════════════════════════ */
    --konteyner-max:      1200px;
    --konteyner-genis:    1400px;
    --topbar-yukseklik:   48px;
    --header-yukseklik:   80px;
    --z-topbar:           100;
    --z-header:           200;
    --z-dropdown:         300;
    --z-modal:            1000;
    --z-overlay:          999;
}
