/* ============================================================================
   musakaracorlu.com — tasarım tokenları
   Yön: B×C — "mühendis defteri" iskeleti + "tungsten" ışığı
   TEK TEMA: koyu. Açık tema yok (bilinçli karar — bkz. README).
   Ekran koyu, yazdırma çıktısı beyaz (en altta @media print).

   KURAL: Hiçbir komponent hex literal yazmaz. Yalnızca bu dosyadaki
   token'lar okunur. Bu, "beyaz üstüne beyaz" sınıfı hataları ve eski
   sitedeki 40+ satırlık !important remap katmanını yapısal olarak
   imkânsız kılar.
   ============================================================================ */

:root {
    color-scheme: dark;

    /* ── Yüzeyler ────────────────────────────────────────────────────────
       Zemin mavi-siyah değil SICAK siyah. Tek karar, siteyi "her dev
       portfolyosu" kümesinden çıkarıyor. */
    --bg: #0C0B0A;
    --surface-sunken: #070606;   /* input, kod bloğu, gömülü alan */
    --surface-1: #141210;        /* kart, panel */
    --surface-2: #1C1916;        /* yükseltilmiş kart, dropdown */
    --surface-3: #262220;        /* modal, popover, tooltip */

    /* Yüzey gradyanı — "yükseldikçe aydınlanır" ilkesi.
       Düz dolgu yerine bunu kullan; ışık kaynağı yukarıda. */
    --surface-raised: linear-gradient(180deg, #1C1916 0%, #141210 100%);

    /* ── Çizgiler ───────────────────────────────────────────────────────── */
    --grid: #17140F;             /* görünür grid hairline (dekoratif, 1.1:1) */
    --line: #2A2622;             /* ayraç, tablo satır çizgisi */
    --border: #35302A;           /* kart / input kenarı */
    --border-strong: #6B645A;    /* vurgulu kenar — 3.4:1 ✓ AA (metin dışı) */

    /* ── Kenar ışığı ─────────────────────────────────────────────────────
       Sahte cam (backdrop-filter) YOK. Derinlik, üst kenarın ışığı
       yakalamasından ve altındaki sıcak gölgeden geliyor. */
    --rim: rgba(255, 240, 214, 0.08);
    --rim-strong: rgba(255, 240, 214, 0.10);

    /* ── Metin ───────────────────────────────────────────────────────────
       Kontrast oranları --bg zeminine karşı ölçüldü. */
    --text-1: #F2EEE7;           /* 17.0:1 ✓ AAA — başlık, gövde */
    --text-2: #ADA69C;           /*  8.2:1 ✓ AAA — ikincil gövde */
    --text-3: #8A8175;           /*  5.1:1 ✓ AA  — meta, tarih, etiket */

    /* KURAL: --text-3 yalnızca --bg, --surface-1 ve --surface-2 üstünde
       kullanılır. --surface-3 üzerinde 4.1:1'e düşer; orada en düşük
       metin rengi --text-2'dir. */

    /* ── Marka: tungsten kehribar ────────────────────────────────────────
       Tek kromatik aksan. Sayfa alanının %2'sinden fazlasını kaplamaz. */
    --accent: #E8A24A;           /*  9.1:1 ✓ AAA — metin, ikon, link, kenar */
    --accent-hover: #F0B265;
    --accent-ink: #0C0B0A;       /* kehribar DOLGU üstündeki metin */
    --accent-soft: rgba(232, 162, 74, 0.12);   /* etiket zemini, seçili satır */
    --accent-line: rgba(232, 162, 74, 0.35);   /* etiket kenarı */

    /* KURAL: Kehribar dolgunun üstündeki metin her zaman mürekkeptir
       (--accent-ink). Beyaz metin kehribar üstünde 3.5:1 → yasak. */

    /* ── Semantik — yalnızca form durumları ve yönetim paneli ──────────── */
    --ok: #6FBF8B;               /* 8.9:1 ✓ */
    --warn: #E8C24A;             /* 12.0:1 ✓ */
    --danger: #F08A7A;           /* 8.1:1 ✓ */
    --danger-line: rgba(240, 138, 122, 0.35);
    --on-status: #0C0B0A;

    /* ── Gölge ──────────────────────────────────────────────────────────
       Nötr siyah değil; sıcak zeminle uyumlu olsun diye derin ve yumuşak. */
    --shadow-1: 0 12px 30px -18px rgba(0, 0, 0, 0.70);
    --shadow-2: 0 18px 44px -20px rgba(0, 0, 0, 0.75);
    --shadow-3: 0 28px 70px -22px rgba(0, 0, 0, 0.80);
    --glow-accent: 0 8px 26px -10px rgba(232, 162, 74, 0.55);
    --ring-focus: 0 0 0 3px rgba(232, 162, 74, 0.30);

    /* ── Köşe yarıçapı ──────────────────────────────────────────────────
       Saf B'de 0px (klinik), saf C'de 6px (yumuşak). Melez: 4px. */
    --r-sm: 3px;
    --r: 4px;
    --r-lg: 6px;
    --r-pill: 999px;

    /* ── Tipografi: aileler ─────────────────────────────────────────────
       Self-host .woff2, latin + latin-ext (ş ğ İ ı ç ö ü için ZORUNLU).
       Google Fonts @import KULLANILMAZ — render-blocking. */
    --font-ui: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --font-read: "Newsreader", Georgia, "Times New Roman", serif;

    /* ── Tipografi: AKIŞKAN ölçek ────────────────────────────────────────
       Neden akışkan: sabit piksel ölçek 1920px ekranda karınca gibi
       kalıyordu — ölçüldü: nav 11px, kart metni 14px. Ekran büyüdükçe
       yazı da büyümeli. clamp(en az, akış, en çok): 390px telefonda
       alt sınır, 1920px masaüstünde üst sınır.
       Yorumlardaki sayılar px karşılığıdır: telefon → geniş ekran. */
    --fs-micro: clamp(0.75rem, 0.70rem + 0.20vw, 0.875rem);     /* 12 → 14 — mono etiket */
    --fs-meta: clamp(0.8125rem, 0.76rem + 0.22vw, 0.9375rem);   /* 13 → 15 — meta, tarih */
    --fs-ui: clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem);     /* 15 → 17 — buton, kart metni */
    --fs-base: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);         /* 16 → 18 — UI gövde */
    --fs-read: clamp(1.0625rem, 1rem + 0.30vw, 1.25rem);        /* 17 → 20 — makale gövdesi */
    --fs-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);          /* 20 → 24 — kart başlığı */
    --fs-h3: clamp(1.5rem, 1.35rem + 0.70vw, 2rem);             /* 24 → 32 — alt başlık */
    --fs-h2: clamp(2rem, 1.6rem + 1.80vw, 3.25rem);             /* 32 → 52 — bölüm başlığı */
    --fs-h1: clamp(2.5rem, 2rem + 2.20vw, 4rem);                /* 40 → 64 — sayfa başlığı */
    --fs-xl: clamp(3rem, 2.4rem + 2.60vw, 4.5rem);              /* 48 → 72 — büyük rakam */
    --fs-display: clamp(3rem, 1.2rem + 7vw, 8.5rem);            /* 48 → 136 — yalnız hero */

    /* Üst menü ayrı: kullanıcı özellikle bunu küçük buldu. Mono etiketten
       bir kademe büyük ve daha az aralıklı — okunur, ama kimliği koruyor. */
    --fs-nav: clamp(0.8125rem, 0.72rem + 0.30vw, 1rem);         /* 13 → 16 */

    /* ── Tipografi: satır yüksekliği ve harf aralığı ───────────────────── */
    --lh-tight: 1.02;            /* display */
    --lh-heading: 1.15;
    --lh-snug: 1.32;             /* kart başlığı */
    --lh-base: 1.6;
    --lh-read: 1.72;             /* makale gövdesi */

    --ls-display: -0.030em;
    --ls-h1: -0.025em;
    --ls-h2: -0.020em;
    --ls-h4: -0.010em;
    --ls-label: 0.10em;          /* VERSAL mono etiket */
    --ls-meta: 0.06em;

    /* ── Boşluk ölçeği (4px tabanlı) ────────────────────────────────────── */
    --sp-1: 0.25rem;   /*  4 */
    --sp-2: 0.5rem;    /*  8 */
    --sp-3: 0.75rem;   /* 12 */
    --sp-4: 1rem;      /* 16 */
    --sp-5: 1.25rem;   /* 20 */
    --sp-6: 1.5rem;    /* 24 */
    --sp-8: 2rem;      /* 32 */
    --sp-10: 2.5rem;   /* 40 */
    --sp-12: 3rem;     /* 48 */
    --sp-16: 4rem;     /* 64 */
    --sp-22: clamp(4.5rem, 3rem + 5vw, 9rem);   /* 72 → 144 — bölümler arası ritim */

    /* ── Düzen ──────────────────────────────────────────────────────────── */
    --page-max: 1600px;          /* 1920 ekranda bosluk azalsin */
    --page-pad: clamp(1.25rem, 4vw, 5rem);  /* 20 → 80 */
    --page-pad-sm: 1.25rem;      /* 20 — mobil */
    --grid-cell: 96px;           /* görünür grid adımı */
    --measure: 68ch;             /* makale satır uzunluğu */
    --measure-ui: 62ch;          /* arayüz metni */
    --hit-min: 44px;             /* minimum dokunma hedefi */

    /* ── Hareket ────────────────────────────────────────────────────────
       İlke: hareket = ışığın değişmesi, geometrinin oynaması değil. */
    --dur-fast: 120ms;
    --dur: 180ms;
    --dur-slow: 320ms;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Katmanlar ──────────────────────────────────────────────────────── */
    --z-grid: 0;
    --z-content: 1;
    --z-nav: 50;
    --z-drawer: 60;
    --z-modal: 70;
    --z-toast: 80;
}

/* ── Yüksek kontrast tercihi ──────────────────────────────────────────── */
@media (prefers-contrast: more) {
    :root {
        --line: var(--border-strong);
        --border: var(--border-strong);
        --text-3: var(--text-2);
        --rim: rgba(255, 240, 214, 0.16);
        --accent-soft: rgba(232, 162, 74, 0.22);
    }
}

/* ── Azaltılmış hareket ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 1ms;
        --dur: 1ms;
        --dur-slow: 1ms;
    }
}

/* ============================================================================
   YAZDIRMA — ekran koyu, kâğıt beyaz.
   Bu bir "açık tema" değil; yalnızca çıktı biçimi. Koyu bir CV yazdırmak
   mürekkep yakar ve başvuruda kötü durur.
   ============================================================================ */
@media print {
    :root {
        color-scheme: light;

        --bg: #FFFFFF;
        --surface-sunken: #F4F4F4;
        --surface-1: #FFFFFF;
        --surface-2: #FAFAFA;
        --surface-3: #FFFFFF;
        --surface-raised: none;

        --grid: transparent;
        --line: #E3E3E3;
        --border: #D6D6D6;
        --border-strong: #9A9A9A;

        --rim: transparent;
        --rim-strong: transparent;

        --text-1: #111111;
        --text-2: #3C3C3C;
        --text-3: #5A5A5A;

        --accent: #8A5214;
        --accent-hover: #8A5214;
        --accent-ink: #FFFFFF;
        --accent-soft: #F5EDE2;
        --accent-line: #C9B79E;

        --ok: #1A6B3A;
        --warn: #7A5A00;
        --danger: #9B2C1E;

        --shadow-1: none;
        --shadow-2: none;
        --shadow-3: none;
        --glow-accent: none;
        --ring-focus: none;
    }

    @page {
        margin: 1.5cm 2cm;
        size: A4;
    }
}