/* ============================================================================
   dakaveri — shared design layer
   ----------------------------------------------------------------------------
   Three switchable design worlds, one token contract. Pages link this file,
   then add only their own layout and component rules on top.

   Design 1  Institutional Swiss   — the ministry-compliant world.
   Design 2  Editorial statistical — warm paper, serif voice, deep teal.
   Design 3  Dark analytical console — near-black ground, luminous data.

   Only Design 1 follows the T.C. Sanayi ve Teknoloji Bakanlığı kurumsal kimlik
   constraint; its palette is sampled from img/logo.svg. Designs 2 and 3 range
   outside it by explicit instruction and are exploration, not approved identity.

   Typefaces are self-hosted, never CDN: this site also runs on internal
   networks and offline machines.
   ============================================================================ */

/* ---------- Archivo (SIL OFL) — Designs 1 and 3 ---------- */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Spectral (SIL OFL) — Design 2 ---------- */
@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/spectral-400-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/spectral-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/spectral-600-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/spectral-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/spectral-700-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/spectral-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- JetBrains Mono (SIL OFL) — Design 3 figures ---------- */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/jetbrainsmono-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/jetbrainsmono.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   DESIGN 1 — INSTITUTIONAL SWISS (default)
   Palette sampled from the official lockup. Hairline rules carry all
   separation; nothing is rounded; the only shadow is the tooltip's.
   ============================================================================ */
:root {
    --ink: #11191F;
    --red: #D61134;
    --red-deep: #8E0B23;
    --red-wash: #FBEDEF;
    --official-green: #00A551;

    --paper: #FFFFFF;
    --ground: #F2F2EF;
    --ground-deep: #E8E8E3;
    --rule: #D8D8D2;
    --rule-strong: #B4B4AC;
    --muted: #5A6570;

    /* Sequential ramp: single hue, legible in greyscale and under red/green
       colour blindness. Value is never encoded by red-vs-green. */
    --ramp-1: #FAEBEE;
    --ramp-2: #F0C3CB;
    --ramp-3: #E28D9D;
    --ramp-4: #D1526C;
    --ramp-5: #B01A3C;
    --ramp-6: #6E0A20;

    /* Legacy aliases. Page JS injects inline styles referencing these names;
       renaming them breaks generated markup. Not design tokens. */
    --primary: #11191F;
    --primary-light: #5A6570;
    --primary-dark: #000000;
    --green: #00A551;
    --bg-color: #F2F2EF;
    --text-dark: #11191F;
    --text-muted: #5A6570;
    --glass-bg: #FFFFFF;
    --glass-border: #D8D8D2;
    --glass-shadow: none;
    --danger: #D61134;
    --success: #00A551;
    --warning: #8E0B23;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Measured from the live header by design.js. A masthead that shrinks on
       scroll makes any fixed offset wrong in one state or the other. */
    --header-h: 152px;

    /* Rendering tokens. Maps and charts are SVG and canvas, so they cannot
       inherit CSS — page JS reads these back by name. Redefining them per
       design world is what re-themes the figures. */
    --radius: 0px;
    --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-ui: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-figure: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --chart-font: Archivo;

    --map-nodata: #E8E8E3;
    --map-stroke: #C6C6BE;
    --map-label: #11191F;
    --map-label-halo: rgba(255, 255, 255, 0.92);

    --deco-1: #E8E8E3;
    --deco-2: #D8D8D2;
    --deco-3: #C6C6BE;
    --deco-4: #B4B4AC;

    --chart-bar: #11191F;
    --chart-bar-lead: #D61134;
    --chart-grid: #E8E8E3;
    --chart-tick: #5A6570;
    --chart-axis: #11191F;
    --tooltip-bg: #11191F;

    /* Icons are drawn, never a glyph font: an icon font is a second type
       family and a network dependency, and this site runs offline. */
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ============================================================================
   DESIGN 2 — EDITORIAL STATISTICAL
   A published statistical annual: warm paper, serif voice, deep teal.
   ============================================================================ */
:root[data-design="2"] {
    --ink: #1A1A18;
    --red: #0B5B4E;
    --red-deep: #073B33;
    --red-wash: #EAF2EF;
    --official-green: #A33A2A;

    --paper: #FFFDF9;
    --ground: #F6EFE2;
    --ground-deep: #EDE3D2;
    --rule: #DFD4C0;
    --rule-strong: #B9AB93;
    --muted: #6B6255;

    --ramp-1: #EDF4F1;
    --ramp-2: #C8DED7;
    --ramp-3: #99C1B5;
    --ramp-4: #629F8F;
    --ramp-5: #2F7A69;
    --ramp-6: #0A473B;

    --primary: #1A1A18;
    --primary-light: #6B6255;
    --primary-dark: #000000;
    --green: #A33A2A;
    --bg-color: #F6EFE2;
    --text-dark: #1A1A18;
    --text-muted: #6B6255;
    --glass-bg: #FFFDF9;
    --glass-border: #DFD4C0;
    --glass-shadow: none;
    --danger: #A33A2A;
    --success: #0B5B4E;
    --warning: #8A6A1F;

    --radius: 0px;
    --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
    --font-ui: 'Spectral', Georgia, 'Times New Roman', serif;
    --font-figure: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --chart-font: Archivo;

    --map-nodata: #EDE3D2;
    --map-stroke: #C7B9A2;
    --map-label: #1A1A18;
    --map-label-halo: rgba(255, 253, 249, 0.94);

    --deco-1: #EDE3D2;
    --deco-2: #DFD4C0;
    --deco-3: #CCBFA6;
    --deco-4: #B9AB93;

    --chart-bar: #1A1A18;
    --chart-bar-lead: #0B5B4E;
    --chart-grid: #E7DCC9;
    --chart-tick: #6B6255;
    --chart-axis: #1A1A18;
    --tooltip-bg: #1A1A18;
}

/* ============================================================================
   DESIGN 3 — DARK ANALYTICAL CONSOLE
   An instrument panel: near-black ground, luminous data, monospaced figures
   because this world is about measurement.
   ============================================================================ */
:root[data-design="3"] {
    --ink: #E6E8EC;
    --red: #4ADE80;
    --red-deep: #86EFAC;
    --red-wash: rgba(74, 222, 128, 0.12);
    --official-green: #4ADE80;

    --paper: #14171D;
    --ground: #0C0E12;
    --ground-deep: #1B1F27;
    --rule: #262B34;
    --rule-strong: #39404C;
    --muted: #8B92A0;

    /* Dim end lifted clear of the canvas, or low values read as holes
       punched in the map rather than as low values. */
    --ramp-1: #1D3B4E;
    --ramp-2: #235676;
    --ramp-3: #2B739D;
    --ramp-4: #3B95C2;
    --ramp-5: #5FB6DE;
    --ramp-6: #A2E0F8;

    --primary: #E6E8EC;
    --primary-light: #8B92A0;
    --primary-dark: #FFFFFF;
    --green: #4ADE80;
    --bg-color: #0C0E12;
    --text-dark: #E6E8EC;
    --text-muted: #8B92A0;
    --glass-bg: #14171D;
    --glass-border: #262B34;
    --glass-shadow: none;
    --danger: #F87171;
    --success: #4ADE80;
    --warning: #FBBF24;

    --radius: 3px;
    --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-ui: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-figure: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --chart-font: JetBrains Mono;

    --map-nodata: #1B1F27;
    --map-stroke: #0C0E12;
    --map-label: #E6E8EC;
    --map-label-halo: rgba(12, 14, 18, 0.85);

    --deco-1: #1B1F27;
    --deco-2: #262B34;
    --deco-3: #39404C;
    --deco-4: #4A5361;

    --chart-bar: #2A85B6;
    --chart-bar-lead: #4ADE80;
    --chart-grid: #222831;
    --chart-tick: #8B92A0;
    --chart-axis: #39404C;
    --tooltip-bg: #1B1F27;
}

/* ============================================================================
   DESIGN SWITCHER — the one component every page shares
   ============================================================================ */
.design-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.design-switch-label {
    font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.design-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    font-family: var(--font-figure);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.design-btn:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.design-btn.is-active {
    background: var(--red);
    border-color: var(--red);
    color: #FFFFFF;
}

/* The luminous accent takes dark text; white on #4ADE80 fails contrast. */
[data-design="3"] .design-btn.is-active {
    color: #0C0E12;
}

@media (max-width: 768px) {
    .design-switch-label {
        display: none;
    }

    .design-switch {
        gap: 4px;
    }

    .design-btn {
        width: 24px;
        height: 24px;
    }
}

/* ============================================================================
   ICONS
   One grammar for every icon on the site: 24-unit grid, 2-unit stroke, round
   caps and joins, no fill. Inline SVG inheriting currentColor, so an icon
   always matches the text it sits beside in whichever world is active.
   ============================================================================ */
.icon {
    width: 1.15em;
    height: 1.15em;
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icons that sit inline with text need to ride the baseline, not the box. */
h2 .icon,
a .icon {
    display: inline-block;
    vertical-align: -0.15em;
}