/* ==========================================================================
   DGR Web v12 "Ember" — Tema sistemi (tek doğruluk kaynağı)
   <html data-theme="dark|light">  ·  varsayılan: koyu (data-theme yoksa da koyu)
   Bu dosya layout-start.php tarafından main.css'ten ÖNCE ayrıca bağlanır (glob'da atlanır).
   Katmanlar: 1) tokenlar  2) ölçüler  3) bant/kapsam sınıfları  4) yardımcılar  5) tema geçişi
   Eski token adları (--ink, --muted, --brand-50…) theme-compat.css'te yeni tokenlara bağlanır.
   ========================================================================== */

/* ---------- 1) TOKENLAR: koyu (varsayılan) ---------- */
:root,
.band-dark,
.sec-ink {
    color-scheme: dark;

    /* Zemin ve yüzeyler: grafit siyah */
    --bg: #0a0b0e;
    --bg-2: #0e1015;
    --surface: #12141a;
    --surface-2: #181b22;
    --surface-3: #1f232c;

    /* Çizgiler */
    --line: rgb(255 255 255 / 0.08);
    --line-2: rgb(255 255 255 / 0.14);

    /* Metin (#0a0b0e üzerinde: text 18.4:1 · text-2 9.3:1 · text-3 5.0:1) */
    --text: #f4f3ef;
    --text-2: #b4b6bd;
    --text-3: #80838c;

    /* Marka: --brand yönetimden gelir (layout-start satır içi); varsayılan #ff5a1f */
    --brand-fill: var(--brand);
    --brand-fill-hover: color-mix(in srgb, var(--brand) 86%, #fff);
    --brand-600: color-mix(in srgb, var(--brand) 80%, #fff);
    --brand-700: color-mix(in srgb, var(--brand) 62%, #fff);
    --brand-ink: #fff;
    --brand-soft: color-mix(in oklab, var(--brand) 10%, var(--surface));
    --brand-soft-2: color-mix(in oklab, var(--brand) 18%, var(--surface));
    --brand-glow: rgb(255 90 31 / 0.35);

    /* İkincil: amber — yalnız küçük vurgu, gradyan ucu, rozet */
    --accent: #ffb347;
    --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--surface));
    --grad-brand: linear-gradient(135deg, var(--brand), var(--accent));

    /* Durum renkleri (yalnız durum) */
    --ok: #34d399;
    --warn: var(--accent);
    --danger: #fb7185;
    --info: #7dd3fc;
    --ok-soft: color-mix(in oklab, var(--ok) 14%, var(--surface));
    --danger-soft: color-mix(in oklab, var(--danger) 14%, var(--surface));

    /* Kod/terminal paneli (iki temada da koyu) */
    --code-bg: #0b0c10;
    --code-text: #ece9e2;
    --code-dim: #8e919a;
    --code-line: rgb(255 255 255 / 0.1);

    /* Gölgeler */
    --shadow-sm: 0 1px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 16px 32px -20px rgb(0 0 0 / 0.8);
    --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 28px 48px -30px rgb(0 0 0 / 0.85);
    --shadow-glow: 0 24px 48px -24px var(--brand-glow), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);

    /* Odak/seçim/cam */
    --focus: var(--brand);
    --selection: color-mix(in oklab, var(--brand) 38%, var(--bg));
    --glass: rgb(255 255 255 / 0.06);
    --glass-2: rgb(255 255 255 / 0.1);
    --header-bg: rgb(10 11 14 / 0.72);
}

/* ---------- 1b) TOKENLAR: aydınlık (kemik) ---------- */
:root[data-theme="light"],
.band-light {
    color-scheme: light;

    --bg: #f6f4ef;
    --bg-2: #efede6;
    --surface: #ffffff;
    --surface-2: #f3f1ec;
    --surface-3: #ebe8e1;

    --line: rgb(15 17 21 / 0.1);
    --line-2: rgb(15 17 21 / 0.18);

    /* #f6f4ef üzerinde: text 17.6:1 · text-2 7.9:1 · text-3 5.1:1 */
    --text: #0f1115;
    --text-2: #4a4d55;
    --text-3: #676b74;

    --brand-fill: color-mix(in srgb, var(--brand) 88%, #000);
    --brand-fill-hover: color-mix(in srgb, var(--brand) 76%, #000);
    --brand-600: color-mix(in srgb, var(--brand) 72%, #000);
    --brand-700: color-mix(in srgb, var(--brand) 60%, #000);
    --brand-ink: #fff;
    --brand-soft: color-mix(in oklab, var(--brand) 8%, var(--surface));
    --brand-soft-2: color-mix(in oklab, var(--brand) 16%, var(--surface));
    --brand-glow: rgb(255 90 31 / 0.22);

    --accent: #b25e00;
    --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));

    --ok: #0f8a5f;
    --danger: #be123c;
    --info: #1d4ed8;
    --ok-soft: color-mix(in oklab, var(--ok) 10%, var(--surface));
    --danger-soft: color-mix(in oklab, var(--danger) 10%, var(--surface));

    --shadow-sm: 0 1px 0 rgb(15 17 21 / 0.05);
    --shadow-md: 0 16px 32px -22px rgb(15 17 21 / 0.35);
    --shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 28px 48px -32px rgb(15 17 21 / 0.35);
    --shadow-glow: 0 24px 48px -26px var(--brand-glow), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);

    --selection: color-mix(in oklab, var(--brand) 26%, var(--bg));
    --glass: rgb(15 17 21 / 0.05);
    --glass-2: rgb(15 17 21 / 0.08);
    --header-bg: rgb(246 244 239 / 0.78);
}

/* Marka bandı: iki temada da grafit siyah (ör. çağrı bandı) */
.band-orange {
    color-scheme: dark;

    --bg: #0a0b0e;
    --bg-2: #0e1015;
    --surface: #12141a;
    --surface-2: #181b22;
    --surface-3: #1f232c;
    --line: rgb(255 255 255 / 0.08);
    --line-2: rgb(255 255 255 / 0.14);
    --text: #f4f3ef;
    --text-2: #b4b6bd;
    --text-3: #80838c;
    --brand-fill: var(--brand);
    --brand-fill-hover: color-mix(in srgb, var(--brand) 86%, #fff);
    --brand-600: color-mix(in srgb, var(--brand) 80%, #fff);
    --brand-700: color-mix(in srgb, var(--brand) 62%, #fff);
    --brand-ink: #fff;
    --brand-soft: color-mix(in oklab, var(--brand) 10%, var(--surface));
    --brand-soft-2: color-mix(in oklab, var(--brand) 18%, var(--surface));
    --brand-glow: rgb(255 90 31 / 0.35);
    --accent: #ffb347;
    --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--surface));
    --shadow-sm: 0 1px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 16px 32px -20px rgb(0 0 0 / 0.8);
    --shadow: 0 28px 48px -30px rgb(0 0 0 / 0.85);
    --shadow-glow: 0 24px 48px -24px var(--brand-glow), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
    --glass: rgb(255 255 255 / 0.06);
    --glass-2: rgb(255 255 255 / 0.1);
}

/* ---------- 2) ÖLÇÜLER (temadan bağımsız) ---------- */
:root {
    --band-from: #181b22;
    --band-to: #0a0b0e;
    --band-grad: linear-gradient(135deg, var(--band-from), var(--band-to));

    --fs-h1: clamp(2.8rem, 1.6rem + 4.2vw, 5.5rem);
    --fs-h2: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
    --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
    --fs-label: 0.75rem;
    --ls-head: -0.03em;
    --lh-head: 1.06;

    --section-py: clamp(4.5rem, 9vw, 8rem);
    --band-py: var(--section-py);
    --r-sm: 10px;
    --r: 16px;
    --r-lg: 24px;
    --radius: var(--r);
    --radius-sm: var(--r-sm);
    --radius-lg: var(--r-lg);
    --header-h: 72px;
    --container: 76rem;
    --container-wide: 88rem;
    --container-narrow: 46rem;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 3) BANTLAR (tam genişlik bölümler) ---------- */
.band {
    position: relative;
    padding-block: var(--band-py);
    color: var(--text);
}

.band-orange,
.band-dark,
.band-light {
    background: var(--bg);
    color: var(--text);
}

.band-orange {
    border-block: 1px solid var(--line);
}

.band-surface {
    background: var(--surface);
    color: var(--text);
}

.band-surface-2 {
    background: var(--bg-2);
    color: var(--text);
}

.band-line {
    border-block: 1px solid var(--line);
}

/* Bant içi düğme yardımcıları (geriye uyum) */
.btn--on-band {
    color: var(--brand-ink);
    background: var(--brand-fill);
}

.btn--outline-band {
    color: var(--text);
    background: transparent;
    border-color: var(--line-2);
}

.btn--outline-band:hover {
    background: var(--glass);
    border-color: var(--text);
}

/* ---------- 4) YARDIMCILAR ---------- */
.text-1 { color: var(--text); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-brand { color: var(--brand-600); }

/* SVG dolgu/çizgi yardımcıları (özniteliklerde var() güvenilir olmadığından sınıf kullanın) */
.f-brand { fill: var(--brand); }
.f-accent { fill: var(--accent); }
.f-text { fill: var(--text); }
.f-text-2 { fill: var(--text-2); }
.f-surface { fill: var(--surface); }
.f-surface-2 { fill: var(--surface-2); }
.f-bg { fill: var(--bg); }
.f-line { fill: var(--line-2); }
.s-brand { stroke: var(--brand); }
.s-accent { stroke: var(--accent); }
.s-text { stroke: var(--text); }
.s-text-2 { stroke: var(--text-2); }
.s-line { stroke: var(--line-2); }
.s-none { stroke: none; }
.f-none { fill: none; }

/* Yalnız bir temada görünen öğeler (ör. iki farklı görsel) */
:root:not([data-theme="light"]) [data-show-theme="light"],
:root[data-theme="light"] [data-show-theme="dark"] {
    display: none !important;
}

/* ---------- 5) TEMA GEÇİŞİ ---------- */
/* View Transitions destekleniyorsa: lambadan dairesel açılma (theme-lamp.js / 0-core.js clip-path'i yönetir) */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html.theme-vt::view-transition-old(root) {
    z-index: 1;
}

html.theme-vt::view-transition-new(root) {
    z-index: 2;
}

/* Geçiş sırasında adlandırılmış katmanlar ayrılmasın (dairesel açılma bütün sayfayı kapsasın) */
html.theme-vt .nav__bar,
html.theme-vt .nav {
    view-transition-name: none !important;
}

/* Yedek: View Transitions yoksa 250 ms renk geçişi */
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-fade,
    html.theme-fade *,
    html.theme-fade *::before,
    html.theme-fade *::after {
        transition: none !important;
    }
}

html[data-motion="off"].theme-fade,
html[data-motion="off"].theme-fade *,
html[data-motion="off"].theme-fade *::before,
html[data-motion="off"].theme-fade *::after {
    transition: none !important;
}