/* =====================================================================
   KARA ALTIN - Tasarım Token'ları ve Temel Katman
   Dil: Tactical Industrial HUD. Mat metal, paslanmaz çelik, bakır, ham petrol.
   Kesin kurallar: neon yok, parlama/ışıma (glow, text-shadow, box-shadow blur) yok, emoji yok.
   Derinlik yalnızca çizgi, ton farkı ve iç kenarlarla verilir.
   ===================================================================== */

:root {
    /* Industrial Dark: derin kömür ve koyu siyah */
    --c-bg: #0f1012;
    --c-surface: #17191c;
    --c-surface-2: #1e2125;
    --c-surface-3: #262a2f;
    --c-line: #2b2f35;
    --c-line-strong: #3b4047;
    --c-text: #d3d6da;
    --c-text-dim: #8c939c;
    --c-text-faint: #5f6670;
    --c-copper: #b9814f;
    --c-copper-dim: #7e5737;
    --c-steel: #8f989f;
    --c-rust: #8a5a3c;
    --c-crude: #0a0a09;
    --c-ok: #84a06e;
    --c-warn: #c49b4b;
    --c-alert: #b0604f;
    --c-accent-bg: #7e5737;
    --c-accent-bg-hover: #946843;
    --c-accent-ink: #f3e7db;
    --c-rivet: rgb(255 255 255 / .09);
    --c-overlay: rgb(6 6 7 / .68);

    --f-ui: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
    --f-display: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
    --f-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --radius: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-spring: cubic-bezier(.2, .9, .3, 1.15);
    --dur-fast: .14s;
    --dur: .24s;

    color-scheme: dark;
}

:root[data-theme="light"] {
    /* Soft Light: mat asfalt ve platin gri */
    --c-bg: #d4d6d8;
    --c-surface: #e3e4e5;
    --c-surface-2: #ebeced;
    --c-surface-3: #f2f2f3;
    --c-line: #bcc0c4;
    --c-line-strong: #9fa4a9;
    --c-text: #1d2024;
    --c-text-dim: #50575f;
    --c-text-faint: #7a8189;
    --c-copper: #8a5a33;
    --c-copper-dim: #b08661;
    --c-steel: #5b636b;
    --c-rust: #7d4f33;
    --c-crude: #28241f;
    --c-ok: #4f6e3e;
    --c-warn: #8f6a22;
    --c-alert: #92463a;
    --c-accent-bg: #8a5a33;
    --c-accent-bg-hover: #74492a;
    --c-accent-ink: #fbf6f0;
    --c-rivet: rgb(0 0 0 / .14);
    --c-overlay: rgb(30 32 35 / .45);

    color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }

body {
    min-height: 100vh;
    background: var(--c-bg);
    color: var(--c-text);
    font: 500 15px/1.5 var(--f-ui);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 0;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 700; }

::selection { background: var(--c-copper-dim); color: var(--c-accent-ink); }

/* Perçinli metal levha: dört köşede mat perçin */
.plate {
    background-image:
        radial-gradient(circle at 6px 6px, var(--c-rivet) 1.6px, transparent 2px),
        radial-gradient(circle at calc(100% - 6px) 6px, var(--c-rivet) 1.6px, transparent 2px),
        radial-gradient(circle at 6px calc(100% - 6px), var(--c-rivet) 1.6px, transparent 2px),
        radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), var(--c-rivet) 1.6px, transparent 2px);
}

/* Tehlike şeridi (mat sarı-siyah) */
.hazard {
    background-image: repeating-linear-gradient(-45deg, var(--c-warn) 0 7px, transparent 7px 14px);
}

/* Hata sayfası (App::renderError) */
.shell { max-width: 760px; margin: 0 auto; padding: 48px 16px; }
.panel { background: var(--c-surface); border: 1px solid var(--c-line); padding: 16px; }
.panel__title { margin: 0 0 12px; font: 700 14px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c-steel); }
.link { color: var(--c-copper); text-underline-offset: 3px; }

.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;
}

/* JavaScript kapalıyken (ve arama motorları için) metin içerik */
.noscript { max-width: 640px; margin: 12vh auto; padding: 24px; border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-copper); background: var(--c-surface); }
.noscript h1 { margin: 0 0 12px; font-size: 24px; letter-spacing: .06em; }
.noscript p { color: var(--c-text-dim); }