/* ── Self-hosted faces ──────────────────────────────────────────────
       IBM Plex + Barlow Condensed, SIL Open Font License — see /fonts/OFL.txt.
       Split latin / latin-ext: Turkish ı is in latin, ğ ş İ in latin-ext. */
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 100 700;
      font-display: swap;
      src: url('/fonts/plex-sans-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;
    }
    @font-face {
      font-family: 'IBM Plex Sans';
      font-style: normal;
      font-weight: 100 700;
      font-display: swap;
      src: url('/fonts/plex-sans-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: 'IBM Plex Sans Condensed';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('/fonts/plex-sans-cond-500-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;
    }
    @font-face {
      font-family: 'IBM Plex Sans Condensed';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('/fonts/plex-sans-cond-500-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: 'IBM Plex Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/fonts/plex-mono-400-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;
    }
    @font-face {
      font-family: 'IBM Plex Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/fonts/plex-mono-400-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: 'IBM Plex Mono';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('/fonts/plex-mono-500-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;
    }
    @font-face {
      font-family: 'IBM Plex Mono';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('/fonts/plex-mono-500-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: 'Barlow Condensed';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('/fonts/barlow-cond-700-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;
    }
    @font-face {
      font-family: 'Barlow Condensed';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('/fonts/barlow-cond-700-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;
    }
    /* ── Design tokens: colors (verbatim from tokens-colors.css) ─────────── */
    :root {
      /* ── Base ramp: ink (warm neutral) ─────────────────────────────────── */
      --ink-950: #0d0c0a;
      --ink-900: #141310;
      --ink-800: #1c1b17;
      --ink-700: #252420;
      --ink-600: #35342f;
      --ink-500: #4a4843;
      --ink-400: #6e6c66;
      --ink-300: #9b9890;
      --ink-200: #c4c1b8;
      --ink-100: #e0ddd5;
      --ink-50:  #f0ede6;

      /* ── Base ramp: vermeil (brick-red accent) ─────────────────────────── */
      --vermeil-700: #8b1a0e;
      --vermeil-600: #a82918;
      --vermeil-500: #c0392b;
      --vermeil-400: #d4380d;
      --vermeil-300: #e05a47;

      /* ── Standalone hues ───────────────────────────────────────────────── */
      --gold:        #f0b83a;   /* hover/selected headline highlight (dark theme) */
      --breaking:    #d63031;   /* son dakika — breaking-news red */

      /* ── Source brand dots ─────────────────────────────────────────────── */
      --src-diken:       #e07b39;
      --src-medyascope:  #7d2e5c;
      --src-bianet:      #b07d12;
      --src-bbc:         #0d6e9e;
      --src-dw:          #5c6b7a;
      --src-bloomberght: #1a8a6b;
      --src-euronews:    #0172f0;
      --src-birgun:      #d63031;
      --src-pencere:     #9ca3af;

      /* ── Semantic aliases — DARK theme (default) ───────────────────────── */
      --surface-base:       #121212;   /* page */
      --surface-raised:     #1a1a1a;   /* header, docks */
      --surface-card:       #181818;   /* cards, panels */
      --surface-hover:      #232323;   /* inset / hover */
      --surface-header:     rgba(18, 18, 18, 0.97);

      --border:             #2a2a2a;   /* hairline dividers */
      --border-control:     #3c3c3c;   /* control outlines */

      --text-heading:       #f4f4f2;
      --text-primary:       #e3e3e0;
      --text-body:          #c4c4c0;
      --text-secondary:     #aaaaa6;
      --text-muted:         #9a9a96;
      --text-faint:         #8a8a86;
      --text-ghost:         #8a8a86;

      --accent:             #ef4a3f;   /* the red: logotype + focus rings only */
      --accent-bright:      #ef4a3f;
      --accent-bg:          rgba(239, 74, 63, 0.08);
      --accent-error-bg:    rgba(239, 74, 63, 0.10);
      --accent-error-border:rgba(239, 74, 63, 0.25);
      --highlight:          #f4f4f2;   /* selected seat stroke */

      --scrollbar-thumb:    #2a2a2a;
      --skeleton-base:      #1a1a1a;
      --skeleton-shine:     #232323;
      --grain-opacity:      0.03;
      --card-lift:          none;
    }

    /* ── Semantic aliases — LIGHT theme (alternate skin) ─────────────────── */
    html.light {
      --surface-base:       #ebebe9;
      --surface-raised:     #f1f1ef;
      --surface-card:       #fafaf9;
      --surface-hover:      #f3f3f1;
      --surface-header:     rgba(235, 235, 233, 0.97);

      --border:             #d5d5d1;
      --border-control:     #a7a7a1;

      --text-heading:       #111111;
      --text-primary:       #262626;
      --text-body:          #3a3a38;
      --text-secondary:     #4f4f4c;
      --text-muted:         #5a5a56;
      --text-faint:         #66665f;
      --text-ghost:         #66665f;

      --accent:             #d9271c;
      --accent-bright:      #d9271c;
      --accent-bg:          rgba(217, 39, 28, 0.08);
      --accent-error-bg:    rgba(217, 39, 28, 0.08);
      --accent-error-border:rgba(217, 39, 28, 0.20);
      --highlight:          #111111;

      --scrollbar-thumb:    #c4c4c0;
      --skeleton-base:      #e3e3e0;
      --skeleton-shine:     #f3f3f1;
      --grain-opacity:      0.02;
      /* Cards lift off the page in light; a shadow on dark reads as dirt. */
      --card-lift:          0 1px 2px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.05);
    }

    /* ── Typography + effects tokens ──────────────────────────────────────── */
    :root {
      --font-sans:      "IBM Plex Sans", system-ui, sans-serif;
      --font-sans-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
      --font-mono:      "IBM Plex Mono", ui-monospace, Menlo, monospace;
      --font-display:   "Barlow Condensed", sans-serif;

      /* Size scale — identical to the main site. 11px is the floor. */
      --fs-label:   0.6875rem;  /* 11px — the floor */
      --fs-meta:    0.6875rem;  /* 11px */
      --fs-ui:      0.8125rem;  /* 13px */
      --fs-snippet: 0.875rem;   /* 14px */
      --fs-card:    1rem;       /* 16px */
      --fs-body:    1.0625rem;  /* 17px */
      --fs-lead:    1.25rem;    /* 20px */
      --fs-title:   1.75rem;    /* 28px */
      --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
      --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.2),
                      0 8px 24px -6px rgba(0, 0, 0, 0.12),
                      0 20px 48px -12px rgba(0, 0, 0, 0.4);
      --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    }


    /* ── Mobile size scale (≤840px) ──────────────────────────────────────── */
    @media (max-width: 840px) {
      :root {
        --fs-label:   0.6875rem;  /* 11px */
        --fs-meta:    0.6875rem;  /* 11px */
        --fs-ui:      0.8125rem;  /* 13px */
        --fs-snippet: 0.9375rem;  /* 15px */
        --fs-card:    1.0625rem;  /* 17px */
        --fs-body:    1.125rem;   /* 18px */
        --fs-lead:    1.25rem;    /* 20px */
        --fs-title:   1.625rem;   /* 26px */
      }
    }