/*
  Tasarım belirteçleri (Ek G1.2).
  Tema bağımsız ölçekler :root üzerinde, renkler her tema (data-skin) ve mod (data-scheme)
  için aynı adlarla tanımlanır. Bileşenler yalnızca bu adları kullanır, renk değeri yazmaz.
  Varsayılan: Arcade, koyu (theme-init.js öznitelikleri yazmadan önce de doğru görünür).
  Eski WebKit uyumu: değişkenler düz değerlerdir, calc dışında işlev yoktur.
*/

:root {
  /* Aralık ölçeği (rem, kök yazı boyutuyla büyür) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* En küçük dokunma hedefi: 44px (16px kökte) */
  --target: 2.75rem;

  /* Yazı ölçeği */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading: 1.45;

  /* Sütun genişlikleri */
  --members-width: 16rem;
  --sidebar-width: 17rem;
  --drawer-width: 20rem;

  /* Hareket */
  --dur-fast: 0.14s;
  --dur-med: 0.24s;
  --dur-slow: 1.8s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Ortak yazı tipi yedekleri */
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol";
  --font-mono-system: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  /* Frekans düzeni (Ek K, KONSEPT bölüm 12): üst çubuk, frekans bandı, sütunlar ve sayfalar.
     Dar ve orta ekrandaki değerler dosyanın sonundaki kesme noktalarındadır. */
  --top-h: 3.75rem;
  /* Bant tek satırdır: üstte ibrenin topuzu ve ölçek şeridi, altında 44 px istasyonlar */
  --band-h: 3.5rem;
  --band-pad: 0.25rem;
  --dial-top: 0.125rem;
  --station-h: 2.75rem;
  --side-w: 17.5rem;
  /* Geniş ekranda sol sütun (telsiz kartı ve oda bilgisi) ve sağ sütun (İstasyonlar) */
  --side-left-w: 19.5rem;
  --side-right-w: 17rem;
  --radio-w: 21rem;
  --sheet-w: 25rem;

  /* Avatar şekli (Ek K6): her temada yumuşak kenarlı kare, köşe yarıçapı boyutun yüzde 28'i.
     Durum noktası ve köşe işaretleri aynı aileden yumuşak karedir. */
  --avatar-radius: 28%;
  --dot-radius: 32%;

  /* Her temada ve modda koyu kalan sahnelerin (resim görüntüleyici, yayın sahnesi, --viewer-bg)
     üstündeki yazı. Açık modda da koyu zemin üstünde durduğu için moddan bağımsızdır. */
  --on-viewer: #f5f5f7;
}

/* Renge bağlı Frekans belirteçleri yalnızca tema belirteçlerine başvurur, bu yüzden üç temada ve
   iki modda kendiliğinden doğru renk alır. Kök öğede çözülür (data-skin ve data-scheme oradadır). */
:root {
  --needle: var(--accent);
  --needle-knob: var(--accent);
  --needle-ring: var(--surface-1);
  --tick: var(--line-strong);
  --tick-major: var(--edge);
  --band-bg: var(--surface-1);
  --station-tuned-bg: var(--surface-3);
  --station-target: var(--focus-halo);
  --radio-bg: var(--surface-2);
  --screen-bg: var(--surface-sunken);
}

/* =========================================================
   ARCADE (varsayılan): kömür zemin, yüzen cam paneller,
   mor ile camgöbeği degrade, tuş kapağı derinliği
   ========================================================= */

:root,
:root[data-skin="arcade"] {
  --font-body: "Rubik Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Unbounded Telsiz", "Rubik Telsiz", var(--font-system), var(--font-emoji);
  --font-label: "Unbounded Telsiz", "Rubik Telsiz", var(--font-system);
  --font-mono: var(--font-mono-system);
  --weight-display: 700;
  --weight-strong: 600;
  --label-spacing: 0.08em;
  --label-size: 0.6875rem;

  --radius-panel: 24px;
  --radius-card: 18px;
  --radius-control: 14px;
  --radius-small: 10px;
  --radius-pill: 999px;
  --layout-pad: 1rem;
  --column-gap: 1rem;
  --border-width: 1px;
}

:root,
:root[data-skin="arcade"][data-scheme="dark"] {
  color-scheme: dark;
  --theme-color: #0f1015;
  --bg: #0f1015;
  --bg-glow-a: rgba(124, 88, 255, 0.2);
  --bg-glow-a0: rgba(124, 88, 255, 0);
  --bg-glow-b: rgba(40, 200, 230, 0.11);
  --bg-glow-b0: rgba(40, 200, 230, 0);
  --surface-1: #17181f;
  --surface-1-glass: rgba(23, 24, 31, 0.8);
  --surface-2: #17181f;
  --surface-3: #21222c;
  --surface-alt: #1c1d26;
  --surface-sunken: #111218;
  --surface-hover: #272834;
  --surface-active: #21222c;
  --surface-float: #1c1d26;
  --overlay: rgba(6, 6, 10, 0.62);
  --viewer-bg: rgba(6, 6, 10, 0.94);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);
  --edge: #6e7088;
  --text: #f2f1f8;
  --text-2: #bebdcf;
  --text-3: #9f9eb4;
  --text-strong: #ffffff;
  --link: #5addf0;
  --accent: #8f6bff;
  --accent-2: #33d1e6;
  --accent-hover: #9d7dff;
  --on-accent: #0e0d16;
  /* Dolgu düğme yazısı (Ek K7.5): koyu modda vurgu üstü yazı, açık modda beyaz */
  --on-accent-fill: var(--on-accent);
  --accent-text: #a991ff;
  --accent-2-text: #5addf0;
  --accent-lip: #4e3bb0;
  --accent-fill-a: #8f6bff;
  --accent-fill-b: #33d1e6;
  --attention: #8f6bff;
  --on-attention: #0e0d16;
  --mention-bg: rgba(143, 107, 255, 0.16);
  --mention-text: #c9b8ff;
  --mention-line: #8f6bff;
  --focus: #5ee6f7;
  --focus-halo: rgba(94, 230, 247, 0.22);
  --ok: #45db9c;
  --idle: #f5b946;
  --dnd: #ff6680;
  --offline: #8e8da3;
  --live: #45db9c;
  --live-bg: rgba(69, 219, 156, 0.12);
  /* Canlı ve tehlike bileşenlerinin kenarı: her yüzeyde ve kendi zemininde en az 3:1 (test/tema.test.js) */
  --live-edge: #349a71;
  --speaking-bg: rgba(51, 209, 230, 0.1);
  --danger: #ff8796;
  --danger-bg: rgba(255, 102, 128, 0.14);
  --danger-edge: #c46a76;
  --danger-fill: #ff8796;
  --on-danger: #1a0a0e;
  --warn: #f7c463;
  --warn-bg: rgba(245, 185, 70, 0.13);
  --warn-line: rgba(245, 185, 70, 0.45);
  --key-lip: #0a0a0f;
  --top-light: rgba(255, 255, 255, 0.07);
  --scrollbar: #2c2d3a;
  --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --halo-1: rgba(51, 209, 230, 0.55);
  --halo-2: rgba(143, 107, 255, 0.4);
  --av-fg: #121119;
  --av-0: #7cc2ff;
  --av-1: #ff9fcb;
  --av-2: #ffc56e;
  --av-3: #b9a2ff;
  --av-4: #62e1b8;
  --av-5: #ff9e80;
  --av-6: #a8e05f;
  --av-7: #86e0f0;
  --av-offline: #a3a2b5;
}

:root[data-skin="arcade"][data-scheme="light"] {
  color-scheme: light;
  --theme-color: #ecedf4;
  --bg: #ecedf4;
  --bg-glow-a: rgba(124, 88, 255, 0.16);
  --bg-glow-a0: rgba(124, 88, 255, 0);
  --bg-glow-b: rgba(30, 190, 220, 0.15);
  --bg-glow-b0: rgba(30, 190, 220, 0);
  --surface-1: #ffffff;
  --surface-1-glass: rgba(255, 255, 255, 0.8);
  --surface-2: #ffffff;
  --surface-3: #f7f6fc;
  --surface-alt: #f3f2f9;
  --surface-sunken: #f1f1f7;
  --surface-hover: #eceaf6;
  --surface-active: #f7f6fc;
  --surface-float: #ffffff;
  --overlay: rgba(22, 21, 30, 0.42);
  --viewer-bg: rgba(14, 13, 22, 0.92);
  --line: rgba(24, 20, 60, 0.08);
  --line-strong: rgba(24, 20, 60, 0.14);
  --edge: #75738a;
  --text: #16151e;
  --text-2: #45435a;
  --text-3: #5a5870;
  --text-strong: #0e0d16;
  --link: #06707f;
  --accent: #8f6bff;
  --accent-2: #33d1e6;
  --accent-hover: #9d7dff;
  --on-accent: #0e0d16;
  /* Dolgu düğme yazısı (Ek K7.5): açık modda koyulaşan dolgunun üstünde beyaz */
  --on-accent-fill: #ffffff;
  --accent-text: #6234dd;
  --accent-2-text: #06707f;
  --accent-lip: #6e55d6;
  --accent-fill-a: #7046f0;
  --accent-fill-b: #0b7d91;
  --attention: #8f6bff;
  --on-attention: #0e0d16;
  --mention-bg: rgba(112, 70, 240, 0.12);
  --mention-text: #4c22c4;
  --mention-line: #7046f0;
  --focus: #5b2fd6;
  --focus-halo: rgba(91, 47, 214, 0.18);
  --ok: #0b6f48;
  --idle: #a66700;
  --dnd: #d42f4e;
  --offline: #77758c;
  --live: #0b6f48;
  --live-bg: rgba(11, 111, 72, 0.1);
  --live-edge: #358668;
  --speaking-bg: rgba(20, 170, 200, 0.12);
  --danger: #b0233a;
  --danger-bg: rgba(212, 47, 78, 0.1);
  --danger-edge: #bf5769;
  --danger-fill: #b0233a;
  --on-danger: #ffffff;
  --warn: #7f4f00;
  --warn-bg: rgba(245, 185, 70, 0.22);
  --warn-line: rgba(176, 112, 0, 0.45);
  --key-lip: #cfcde0;
  --top-light: #ffffff;
  --scrollbar: #cfcde0;
  --shadow-panel: 0 18px 48px rgba(45, 30, 110, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-card: inset 0 1px 0 #ffffff, 0 3px 10px rgba(45, 30, 110, 0.09);
  --shadow-pop: 0 24px 64px rgba(45, 30, 110, 0.22), inset 0 1px 0 #ffffff;
  --halo-1: rgba(20, 170, 200, 0.32);
  --halo-2: rgba(110, 70, 240, 0.2);
  --av-fg: #121119;
  --av-0: #7cc2ff;
  --av-1: #ff9fcb;
  --av-2: #ffc56e;
  --av-3: #b9a2ff;
  --av-4: #62e1b8;
  --av-5: #ff9e80;
  --av-6: #a8e05f;
  --av-7: #86e0f0;
  --av-offline: #bdbccb;
}

/* =========================================================
   GECE FREKANSI: gece mavisi, kehribar sinyal, yayında yeşili
   ========================================================= */

:root[data-skin="gece"] {
  --font-body: "Manrope Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Manrope Telsiz", var(--font-system), var(--font-emoji);
  --font-label: "Martian Mono Telsiz", var(--font-mono-system);
  --font-mono: "Martian Mono Telsiz", var(--font-mono-system);
  --weight-display: 800;
  --weight-strong: 700;
  --label-spacing: 0.06em;
  --label-size: 0.75rem;

  --radius-panel: 0;
  --radius-card: 14px;
  --radius-control: 12px;
  --radius-small: 7px;
  --radius-pill: 999px;
  --layout-pad: 0rem;
  --column-gap: 0rem;
  --border-width: 1px;
}

:root[data-skin="gece"][data-scheme="dark"] {
  color-scheme: dark;
  --theme-color: #050912;
  --bg: #050912;
  --bg-glow-a: rgba(255, 181, 71, 0.05);
  --bg-glow-a0: rgba(255, 181, 71, 0);
  --bg-glow-b: rgba(116, 224, 164, 0.04);
  --bg-glow-b0: rgba(116, 224, 164, 0);
  --surface-1: #0a101d;
  --surface-1-glass: #0a101d;
  --surface-2: #0d1424;
  --surface-3: #141d31;
  --surface-alt: #111a2c;
  --surface-sunken: #060b16;
  --surface-hover: #1a2540;
  --surface-active: #221f1c;
  --surface-float: #141d31;
  --overlay: rgba(2, 4, 10, 0.66);
  --viewer-bg: rgba(2, 4, 10, 0.94);
  --line: #1a2438;
  --line-strong: #26324b;
  --edge: #61708c;
  --text: #eaeff8;
  --text-2: #a9b5cb;
  --text-3: #8f9cb6;
  --text-strong: #ffffff;
  --link: #ffb547;
  --accent: #ffb547;
  --accent-2: #74e0a4;
  --accent-hover: #ffc369;
  --on-accent: #1b1305;
  /* Dolgu düğme yazısı (Ek K7.5): koyu modda vurgu üstü yazı, açık modda beyaz */
  --on-accent-fill: var(--on-accent);
  --accent-text: #ffb547;
  --accent-2-text: #74e0a4;
  --accent-lip: #ffb547;
  --accent-fill-a: #ffb547;
  --accent-fill-b: #ffb547;
  --attention: #ffb547;
  --on-attention: #1b1305;
  --mention-bg: #221f1c;
  --mention-text: #ffb547;
  --mention-line: #ffb547;
  --focus: #f4f7fc;
  --focus-halo: rgba(255, 181, 71, 0.35);
  --ok: #74e0a4;
  --idle: #ffb547;
  --dnd: #ff6b6b;
  --offline: #7d8aa6;
  --live: #74e0a4;
  --live-bg: #0f2620;
  --live-edge: #2f7e58;
  --speaking-bg: #0f2620;
  --danger: #ff8a7d;
  --danger-bg: #2a1519;
  --danger-edge: #c2554b;
  --danger-fill: #ff8a7d;
  --on-danger: #1a0806;
  --warn: #ffb547;
  --warn-bg: #221f1c;
  --warn-line: #a36a1f;
  --key-lip: #26324b;
  --top-light: rgba(255, 255, 255, 0.04);
  --scrollbar: #26324b;
  --console: #080e1a;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6);
  --halo-1: rgba(116, 224, 164, 0.5);
  --halo-2: rgba(116, 224, 164, 0.2);
  --av-0: #173a45;
  --av-1: #43213a;
  --av-2: #1c2e57;
  --av-3: #33265a;
  --av-4: #4a2e14;
  --av-5: #1d3f2b;
  --av-6: #4a1f22;
  --av-7: #34361a;
  --av-fg-0: #8fe0ee;
  --av-fg-1: #f4a8d6;
  --av-fg-2: #a3bfff;
  --av-fg-3: #c9b6ff;
  --av-fg-4: #ffc889;
  --av-fg-5: #9fe6b8;
  --av-fg-6: #ffb3a8;
  --av-fg-7: #e0e39a;
  --av-fg: #eaeff8;
  --av-offline: #1a2236;
  --av-offline-fg: #a9b5cb;
}

:root[data-skin="gece"][data-scheme="light"] {
  color-scheme: light;
  --theme-color: #e2dcce;
  --bg: #e2dcce;
  --bg-glow-a: rgba(242, 169, 59, 0.08);
  --bg-glow-a0: rgba(242, 169, 59, 0);
  --bg-glow-b: rgba(14, 106, 61, 0.05);
  --bg-glow-b0: rgba(14, 106, 61, 0);
  --surface-1: #efeae0;
  --surface-1-glass: #efeae0;
  --surface-2: #f8f5ef;
  --surface-3: #ffffff;
  --surface-alt: #f3efe7;
  --surface-sunken: #e9e3d6;
  --surface-hover: #e6dfd0;
  --surface-active: #f6e6cb;
  --surface-float: #ffffff;
  --overlay: rgba(22, 27, 38, 0.42);
  --viewer-bg: rgba(10, 12, 18, 0.92);
  --line: #ddd5c5;
  --line-strong: #cdc3b0;
  --edge: #857c69;
  --text: #161b26;
  --text-2: #464e61;
  --text-3: #555d6f;
  --text-strong: #0b0e15;
  --link: #8a4f00;
  --accent: #f2a93b;
  --accent-2: #0e6a3d;
  --accent-hover: #f5b552;
  --on-accent: #1b1305;
  /* Dolgu düğme yazısı (Ek K7.5): açık modda koyulaşan dolgunun üstünde beyaz */
  --on-accent-fill: #ffffff;
  --accent-text: #8a4f00;
  --accent-2-text: #0e6a3d;
  --accent-lip: #a35f00;
  --accent-fill-a: #a35f00;
  --accent-fill-b: #a35f00;
  --attention: #f2a93b;
  --on-attention: #1b1305;
  --mention-bg: #f6e6cb;
  --mention-text: #8a4f00;
  --mention-line: #a35f00;
  --focus: #161b26;
  --focus-halo: rgba(242, 169, 59, 0.45);
  --ok: #178e4e;
  --idle: #b36b00;
  --dnd: #cf2f2a;
  --offline: #7a7466;
  --live: #0e6a3d;
  --live-bg: #dcefe2;
  --live-edge: #2f8158;
  --speaking-bg: #dcefe2;
  --danger: #ae2a20;
  --danger-bg: #f8e0dc;
  --danger-edge: #c4483d;
  --danger-fill: #ae2a20;
  --on-danger: #ffffff;
  --warn: #8a4f00;
  --warn-bg: #f6e6cb;
  --warn-line: #a35f00;
  --key-lip: #cdc3b0;
  --top-light: rgba(255, 255, 255, 0.7);
  --scrollbar: #cdc3b0;
  --console: #e6e0d2;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(60, 45, 20, 0.18);
  --halo-1: rgba(14, 106, 61, 0.4);
  --halo-2: rgba(14, 106, 61, 0.16);
  --av-0: #cdeef3;
  --av-1: #f7d6e8;
  --av-2: #d6e2ff;
  --av-3: #e3d9ff;
  --av-4: #fbe1c2;
  --av-5: #d3f1dd;
  --av-6: #f9d9d4;
  --av-7: #ecedc8;
  --av-fg-0: #0d4a56;
  --av-fg-1: #6e1f4c;
  --av-fg-2: #1f3f86;
  --av-fg-3: #4a2e8f;
  --av-fg-4: #6b3b05;
  --av-fg-5: #1b5c34;
  --av-fg-6: #7a2a20;
  --av-fg-7: #4e5010;
  --av-fg: #161b26;
  --av-offline: #e6dfd0;
  --av-offline-fg: #464e61;
}

/* =========================================================
   TURKUAZ VE BAKIR: çini sırı ve bakır, sekizgen karolar,
   elmas durumlar, kuşak frizleri
   ========================================================= */

:root[data-skin="turkuaz"] {
  --font-body: "Figtree Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Young Serif Telsiz", Georgia, "Times New Roman", serif, var(--font-emoji);
  --font-label: "Young Serif Telsiz", Georgia, "Times New Roman", serif;
  --font-mono: var(--font-mono-system);
  --weight-display: 400;
  --weight-strong: 700;
  --label-spacing: 0;
  --label-size: 1rem;

  --radius-panel: 0;
  --radius-card: 1.125rem;
  --radius-control: 0.75rem;
  --radius-small: 0.375rem;
  --radius-pill: 999px;
  --layout-pad: 0rem;
  --column-gap: 0rem;
  --border-width: 1px;
}

:root[data-skin="turkuaz"][data-scheme="dark"] {
  color-scheme: dark;
  --theme-color: #0a181c;
  --bg: #0a181c;
  --bg-glow-a: rgba(90, 211, 200, 0.06);
  --bg-glow-a0: rgba(90, 211, 200, 0);
  --bg-glow-b: rgba(219, 133, 80, 0.05);
  --bg-glow-b0: rgba(219, 133, 80, 0);
  --surface-1: #0a181c;
  --surface-1-glass: #0a181c;
  --surface-2: #0f2227;
  --surface-3: #152d34;
  --surface-alt: #122830;
  --surface-sunken: #0a181c;
  --surface-hover: #1d3a42;
  --surface-active: #15403f;
  --surface-float: #152d34;
  --overlay: rgba(3, 10, 12, 0.66);
  --viewer-bg: rgba(3, 10, 12, 0.94);
  --line: #213e46;
  --line-strong: #2b4c55;
  --edge: #658a92;
  --text: #ecf2ef;
  --text-2: #b6c9c5;
  --text-3: #95aea9;
  --text-strong: #ffffff;
  --link: #5ad3c8;
  --accent: #3bbdb1;
  --accent-2: #db8550;
  --accent-hover: #4cc9bd;
  --on-accent: #052421;
  /* Dolgu düğme yazısı (Ek K7.5): koyu modda vurgu üstü yazı, açık modda beyaz */
  --on-accent-fill: var(--on-accent);
  --accent-text: #5ad3c8;
  --accent-2-text: #eba06e;
  --accent-lip: #23766e;
  --accent-fill-a: #3bbdb1;
  --accent-fill-b: #3bbdb1;
  --attention: #db8550;
  --on-attention: #200e03;
  --mention-bg: #232d2c;
  --mention-text: #eba06e;
  --mention-line: #db8550;
  --focus: #f7c873;
  --focus-halo: rgba(247, 200, 115, 0.25);
  --ok: #6fd392;
  --idle: #f2c063;
  --dnd: #f2826b;
  --offline: #7f9994;
  --live: #6fd392;
  --live-bg: rgba(111, 211, 146, 0.1);
  --live-edge: #58a877;
  --speaking-bg: rgba(111, 211, 146, 0.08);
  --danger: #f2856f;
  --danger-bg: #36211f;
  --danger-edge: #c86f5d;
  --danger-fill: #f2826b;
  --on-danger: #2a0d07;
  --warn: #f2c063;
  --warn-bg: #2d2a1b;
  --warn-line: #85570a;
  --key-lip: #0a181c;
  --top-light: rgba(255, 255, 255, 0.06);
  --scrollbar: #213e46;
  --pattern: rgba(90, 211, 200, 0.16);
  --pattern-2: rgba(219, 133, 80, 0.3);
  --shadow-panel: none;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(1, 8, 9, 0.45);
  --shadow-pop: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 56px rgba(1, 8, 9, 0.6);
  --halo-1: rgba(111, 211, 146, 0.55);
  --halo-2: rgba(111, 211, 146, 0.2);
  --av-fg: #fff8ec;
  --av-0: #1c716b;
  --av-1: #9e3942;
  --av-2: #36559e;
  --av-3: #86590c;
  --av-4: #4c6822;
  --av-5: #713e88;
  --av-6: #8a4b2a;
  --av-7: #2f5f78;
  --av-offline: #4f6460;
}

:root[data-skin="turkuaz"][data-scheme="light"] {
  color-scheme: light;
  --theme-color: #efe6d4;
  --bg: #efe6d4;
  --bg-glow-a: rgba(9, 106, 100, 0.05);
  --bg-glow-a0: rgba(9, 106, 100, 0);
  --bg-glow-b: rgba(194, 104, 58, 0.06);
  --bg-glow-b0: rgba(194, 104, 58, 0);
  --surface-1: #efe6d4;
  --surface-1-glass: #efe6d4;
  --surface-2: #f9f4ea;
  --surface-3: #fffdf7;
  --surface-alt: #f4ede0;
  --surface-sunken: #f9f4ea;
  --surface-hover: #e6dac3;
  --surface-active: #d3e8e2;
  --surface-float: #fffdf7;
  --overlay: rgba(23, 38, 40, 0.4);
  --viewer-bg: rgba(10, 24, 28, 0.92);
  --line: #ded1b9;
  --line-strong: #d0c1a6;
  --edge: #847966;
  --text: #172628;
  --text-2: #3a4c4e;
  --text-3: #535f5c;
  --text-strong: #0b1415;
  --link: #096a64;
  --accent: #0b776f;
  --accent-2: #c2683a;
  --accent-hover: #0a6c65;
  --on-accent: #ffffff;
  /* Dolgu düğme yazısı (Ek K7.5): açık modda koyulaşan dolgunun üstünde beyaz */
  --on-accent-fill: #ffffff;
  --accent-text: #096a64;
  --accent-2-text: #94421a;
  --accent-lip: #075550;
  --accent-fill-a: #0b776f;
  --accent-fill-b: #0b776f;
  --attention: #c2683a;
  --on-attention: #1f0b02;
  --mention-bg: #f6e6d6;
  --mention-text: #94421a;
  --mention-line: #c2683a;
  --focus: #7a3a08;
  --focus-halo: rgba(122, 58, 8, 0.18);
  --ok: #1d6633;
  --idle: #85570a;
  --dnd: #a9351f;
  --offline: #7d776b;
  --live: #1c6332;
  --live-bg: rgba(29, 102, 51, 0.1);
  --live-edge: #3f7a4d;
  --speaking-bg: rgba(29, 102, 51, 0.08);
  --danger: #a9351f;
  --danger-bg: #f8e1da;
  --danger-edge: #b95d48;
  --danger-fill: #a9351f;
  --on-danger: #ffffff;
  --warn: #85570a;
  --warn-bg: #f7ecd2;
  --warn-line: #b88a2e;
  --key-lip: #d0c1a6;
  --top-light: rgba(255, 255, 255, 0.8);
  --scrollbar: #d0c1a6;
  --pattern: rgba(9, 106, 100, 0.16);
  --pattern-2: rgba(194, 104, 58, 0.35);
  --shadow-panel: none;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 22px rgba(92, 64, 30, 0.12);
  --shadow-pop: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 22px 56px rgba(92, 64, 30, 0.2);
  --halo-1: rgba(29, 102, 51, 0.45);
  --halo-2: rgba(29, 102, 51, 0.16);
  --av-fg: #fff8ec;
  --av-0: #1c716b;
  --av-1: #9e3942;
  --av-2: #36559e;
  --av-3: #86590c;
  --av-4: #4c6822;
  --av-5: #713e88;
  --av-6: #8a4b2a;
  --av-7: #2f5f78;
  --av-offline: #6f6a5e;
}

/* =========================================================
   SAHA TELSİZİ: zeytin yeşili sahra telsizi, turuncu sinyal,
   şablon etiketler, kare köşeler
   ========================================================= */

:root[data-skin="saha"] {
  --font-body: "Manrope Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Martian Mono Telsiz", var(--font-mono-system);
  --font-label: "Martian Mono Telsiz", var(--font-mono-system);
  --font-mono: "Martian Mono Telsiz", var(--font-mono-system);
  --weight-display: 500;
  --weight-strong: 700;
  --label-spacing: 0.12em;
  --label-size: 0.6875rem;
  --radius-panel: 0;
  --radius-card: 6px;
  --radius-control: 4px;
  --radius-small: 3px;
  --radius-pill: 999px;
  --layout-pad: 0rem;
  --column-gap: 0rem;
  --border-width: 1px;
}

:root[data-skin="saha"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #10120c;
  --surface-1: #171a11;
  --surface-2: #1b1f14;
  --surface-3: #252a1b;
  --surface-alt: #20251a;
  --surface-sunken: #0d0f09;
  --surface-hover: #2c3220;
  --surface-active: #2f2918;
  --surface-float: #22271a;
  --line: #262c1c;
  --line-strong: #343b27;
  --edge: #7d8964;
  --text: #eef0e2;
  --text-2: #c2c9ad;
  --text-3: #a7b092;
  --text-strong: #ffffff;
  --link: #ffb27a;
  --accent: #ff8f3a;
  --accent-2: #c9d48a;
  --accent-hover: #ffa257;
  --on-accent: #1c0e02;
  --accent-text: #ffa463;
  --accent-2-text: #cfd99a;
  --accent-lip: #a85314;
  --accent-fill-a: #ff8f3a;
  --accent-fill-b: #ff8f3a;
  --attention: #ff8f3a;
  --on-attention: #1c0e02;
  --mention-bg: rgba(255, 143, 58, 0.14);
  --mention-text: #ffb987;
  --mention-line: #ff8f3a;
  --focus: #f4f1d0;
  --ok: #8fd16a;
  --idle: #f2c94c;
  --dnd: #ff6b5b;
  --offline: #8a9375;
  --live: #9ad677;
  --live-bg: #1d2a14;
  --live-edge: #5f8f42;
  --speaking-bg: #1d2a14;
  --danger: #ff9585;
  --danger-bg: #2f1712;
  --danger-edge: #c0604b;
  --danger-fill: #ff8a7a;
  --on-danger: #1f0703;
  --warn: #f2c94c;
  --warn-bg: #2a2712;
  --warn-line: #8a7322;
  --av-fg: #f4f1e4;
  --av-0: #4d5e2a;
  --av-1: #7a3e22;
  --av-2: #2f5a5a;
  --av-3: #6a4a1e;
  --av-4: #3e4f7a;
  --av-5: #6e2f3a;
  --av-6: #56582a;
  --av-7: #5a4a6a;
  --av-offline: #3a3f2e;
  --theme-color: #10120c;
  --surface-1-glass: #171a11;
  --bg-glow-a: rgba(255, 143, 58, 0.06);
  --bg-glow-a0: rgba(255, 143, 58, 0);
  --bg-glow-b: rgba(201, 212, 138, 0.05);
  --bg-glow-b0: rgba(201, 212, 138, 0);
  --overlay: rgba(5, 6, 3, 0.66);
  --viewer-bg: rgba(5, 6, 3, 0.94);
  --on-accent-fill: var(--on-accent);
  --focus-halo: rgba(255, 143, 58, 0.3);
  --halo-1: rgba(154, 214, 119, 0.5);
  --halo-2: rgba(154, 214, 119, 0.2);
  --key-lip: #343b27;
  --top-light: rgba(255, 255, 255, 0.05);
  --scrollbar: #343b27;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6);
}

:root[data-skin="saha"][data-scheme="light"] {
  color-scheme: light;
  --bg: #e4e0cc;
  --surface-1: #ece9d8;
  --surface-2: #f5f3e8;
  --surface-3: #fbfaf3;
  --surface-alt: #efecdd;
  --surface-sunken: #e9e5d2;
  --surface-hover: #ddd8c0;
  --surface-active: #f3e3cc;
  --surface-float: #fbfaf3;
  --line: #d3ceb5;
  --line-strong: #c2bc9f;
  --edge: #77725b;
  --text: #1b1e12;
  --text-2: #41472f;
  --text-3: #4f553e;
  --text-strong: #0d0f08;
  --link: #8a3c05;
  --accent: #b04e0a;
  --accent-2: #4f6b1f;
  --accent-hover: #9a4408;
  --on-accent: #ffffff;
  --accent-text: #923f06;
  --accent-2-text: #435c18;
  --accent-lip: #7a3605;
  --accent-fill-a: #a84a08;
  --accent-fill-b: #a84a08;
  --attention: #b04e0a;
  --on-attention: #ffffff;
  --mention-bg: #f6e2cf;
  --mention-text: #8a3c05;
  --mention-line: #b04e0a;
  --focus: #1b1e12;
  --ok: #2f6d1a;
  --idle: #7f5600;
  --dnd: #b3261e;
  --offline: #6f6a55;
  --live: #2b6418;
  --live-bg: #dfead0;
  --live-edge: #4f7f33;
  --speaking-bg: #dfead0;
  --danger: #a1241b;
  --danger-bg: #f6dcd6;
  --danger-edge: #b8443a;
  --danger-fill: #a8261c;
  --on-danger: #ffffff;
  --warn: #6e4a00;
  --warn-bg: #f3e8c4;
  --warn-line: #a7801f;
  --av-fg: #fbfaf3;
  --av-0: #4d5e2a;
  --av-1: #7a3e22;
  --av-2: #2f5a5a;
  --av-3: #6a4a1e;
  --av-4: #3e4f7a;
  --av-5: #6e2f3a;
  --av-6: #56582a;
  --av-7: #5a4a6a;
  --av-offline: #6a6650;
  --theme-color: #e4e0cc;
  --surface-1-glass: #ece9d8;
  --bg-glow-a: rgba(176, 78, 10, 0.07);
  --bg-glow-a0: rgba(176, 78, 10, 0);
  --bg-glow-b: rgba(79, 107, 31, 0.06);
  --bg-glow-b0: rgba(79, 107, 31, 0);
  --overlay: rgba(27, 30, 18, 0.42);
  --viewer-bg: rgba(27, 30, 18, 0.94);
  --on-accent-fill: #ffffff;
  --focus-halo: rgba(176, 78, 10, 0.28);
  --halo-1: rgba(43, 100, 24, 0.4);
  --halo-2: rgba(43, 100, 24, 0.16);
  --key-lip: #c2bc9f;
  --top-light: rgba(255, 255, 255, 0.8);
  --scrollbar: #c2bc9f;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(27, 30, 18, 0.18);
}

/* =========================================================
   LAMBALI RADYO: 1950'ler radyosu, ceviz kasa, fildişi kadran,
   pirinç yazı ve "sihirli göz" yeşili
   ========================================================= */

:root[data-skin="lamba"] {
  --font-body: "Manrope Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Young Serif Telsiz", Georgia, "Times New Roman", serif, var(--font-emoji);
  --font-label: "Young Serif Telsiz", Georgia, "Times New Roman", serif;
  --font-mono: var(--font-mono-system);
  --weight-display: 400;
  --weight-strong: 700;
  --label-spacing: 0.02em;
  --label-size: 0.9375rem;
  --radius-panel: 0;
  --radius-card: 1rem;
  --radius-control: 0.625rem;
  --radius-small: 0.375rem;
  --radius-pill: 999px;
  --layout-pad: 0rem;
  --column-gap: 0rem;
  --border-width: 1px;
}

:root[data-skin="lamba"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #1a110b;
  --surface-1: #22170f;
  --surface-2: #281b12;
  --surface-3: #33241a;
  --surface-alt: #2d2016;
  --surface-sunken: #140d08;
  --surface-hover: #3b2a1e;
  --surface-active: #3a2a14;
  --surface-float: #33241a;
  --line: #3a2a1d;
  --line-strong: #4a3626;
  --edge: #988069;
  --text: #f6ecd9;
  --text-2: #d6c7ab;
  --text-3: #bba98b;
  --text-strong: #fffaf0;
  --link: #f0c987;
  --accent: #e2b25a;
  --accent-2: #7fe0a0;
  --accent-hover: #ecc274;
  --on-accent: #241703;
  --accent-text: #e8bd6c;
  --accent-2-text: #8fe6ac;
  --accent-lip: #9c7428;
  --accent-fill-a: #e2b25a;
  --accent-fill-b: #e2b25a;
  --attention: #e2b25a;
  --on-attention: #241703;
  --mention-bg: rgba(226, 178, 90, 0.14);
  --mention-text: #f0c987;
  --mention-line: #e2b25a;
  --focus: #fff6e0;
  --ok: #7fe0a0;
  --idle: #f0c35a;
  --dnd: #ff7b6b;
  --offline: #998873;
  --live: #7fe0a0;
  --live-bg: #16261a;
  --live-edge: #4a8f62;
  --speaking-bg: #16261a;
  --danger: #ff978a;
  --danger-bg: #34160f;
  --danger-edge: #c4604c;
  --danger-fill: #ff8f80;
  --on-danger: #220806;
  --warn: #f0c35a;
  --warn-bg: #2e2412;
  --warn-line: #8f6d1f;
  --av-fg: #fbf3e2;
  --av-0: #6b3f22;
  --av-1: #3f5a3a;
  --av-2: #2f4f66;
  --av-3: #6a2f3a;
  --av-4: #5a4a1f;
  --av-5: #4a3a66;
  --av-6: #2f5f57;
  --av-7: #7a4a2a;
  --av-offline: #3e3026;
  --theme-color: #1a110b;
  --surface-1-glass: #22170f;
  --bg-glow-a: rgba(226, 178, 90, 0.06);
  --bg-glow-a0: rgba(226, 178, 90, 0);
  --bg-glow-b: rgba(127, 224, 160, 0.05);
  --bg-glow-b0: rgba(127, 224, 160, 0);
  --overlay: rgba(10, 6, 3, 0.66);
  --viewer-bg: rgba(10, 6, 3, 0.94);
  --on-accent-fill: var(--on-accent);
  --focus-halo: rgba(226, 178, 90, 0.3);
  --halo-1: rgba(127, 224, 160, 0.5);
  --halo-2: rgba(127, 224, 160, 0.2);
  --key-lip: #4a3626;
  --top-light: rgba(255, 255, 255, 0.05);
  --scrollbar: #4a3626;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6);
}

:root[data-skin="lamba"][data-scheme="light"] {
  color-scheme: light;
  --bg: #efe4cc;
  --surface-1: #f5ecd8;
  --surface-2: #fbf6ea;
  --surface-3: #fffcf4;
  --surface-alt: #f4ead4;
  --surface-sunken: #f1e7d0;
  --surface-hover: #e8dbbd;
  --surface-active: #f2e0b8;
  --surface-float: #fffcf4;
  --line: #e0d2b2;
  --line-strong: #cdbc97;
  --edge: #80705a;
  --text: #24170c;
  --text-2: #4e3d2b;
  --text-3: #5a4936;
  --text-strong: #140c05;
  --link: #744a05;
  --accent: #8a5c0c;
  --accent-2: #1f7a46;
  --accent-hover: #7a5009;
  --on-accent: #ffffff;
  --accent-text: #744a05;
  --accent-2-text: #1a6a3c;
  --accent-lip: #5e3e05;
  --accent-fill-a: #8a5c0c;
  --accent-fill-b: #8a5c0c;
  --attention: #8a5c0c;
  --on-attention: #ffffff;
  --mention-bg: #f3e2bb;
  --mention-text: #6a4405;
  --mention-line: #8a5c0c;
  --focus: #24170c;
  --ok: #1f7a46;
  --idle: #7f5600;
  --dnd: #b3261e;
  --offline: #76684f;
  --live: #1a6a3c;
  --live-bg: #dcebd9;
  --live-edge: #3d8a5a;
  --speaking-bg: #dcebd9;
  --danger: #a12a1c;
  --danger-bg: #f6dcd4;
  --danger-edge: #c4483a;
  --danger-fill: #a62a1c;
  --on-danger: #ffffff;
  --warn: #6e4a00;
  --warn-bg: #f4e6c0;
  --warn-line: #a7801f;
  --av-fg: #fffcf4;
  --av-0: #6b3f22;
  --av-1: #3f5a3a;
  --av-2: #2f4f66;
  --av-3: #6a2f3a;
  --av-4: #5a4a1f;
  --av-5: #4a3a66;
  --av-6: #2f5f57;
  --av-7: #7a4a2a;
  --av-offline: #6e6250;
  --theme-color: #efe4cc;
  --surface-1-glass: #f5ecd8;
  --bg-glow-a: rgba(138, 92, 12, 0.07);
  --bg-glow-a0: rgba(138, 92, 12, 0);
  --bg-glow-b: rgba(31, 122, 70, 0.06);
  --bg-glow-b0: rgba(31, 122, 70, 0);
  --overlay: rgba(36, 23, 12, 0.42);
  --viewer-bg: rgba(36, 23, 12, 0.94);
  --on-accent-fill: #ffffff;
  --focus-halo: rgba(138, 92, 12, 0.28);
  --halo-1: rgba(26, 106, 60, 0.4);
  --halo-2: rgba(26, 106, 60, 0.16);
  --key-lip: #cdbc97;
  --top-light: rgba(255, 255, 255, 0.8);
  --scrollbar: #cdbc97;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(36, 23, 12, 0.18);
}

/* =========================================================
   FOSFOR: yeşil fosforlu tarayıcı ekranı, size yönelik şeyler
   kehribar fosfor, açık modda LCD
   ========================================================= */

:root[data-skin="fosfor"] {
  --font-body: "Manrope Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Martian Mono Telsiz", var(--font-mono-system);
  --font-label: "Martian Mono Telsiz", var(--font-mono-system);
  --font-mono: "Martian Mono Telsiz", var(--font-mono-system);
  --weight-display: 500;
  --weight-strong: 700;
  --label-spacing: 0.08em;
  --label-size: 0.75rem;
  --radius-panel: 0;
  --radius-card: 3px;
  --radius-control: 2px;
  --radius-small: 2px;
  --radius-pill: 999px;
  --layout-pad: 0rem;
  --column-gap: 0rem;
  --border-width: 1px;
}

:root[data-skin="fosfor"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #050a06;
  --surface-1: #08110a;
  --surface-2: #0b160d;
  --surface-3: #112014;
  --surface-alt: #0e1b11;
  --surface-sunken: #040805;
  --surface-hover: #16291a;
  --surface-active: #183020;
  --surface-float: #112014;
  --line: #14261a;
  --line-strong: #1e3a26;
  --edge: #46955d;
  --text: #c8f7d2;
  --text-2: #97dca8;
  --text-3: #78bf8a;
  --text-strong: #eaffef;
  --link: #8affb0;
  --accent: #39ff7a;
  --accent-2: #ffcf5c;
  --accent-hover: #66ff97;
  --on-accent: #02140a;
  --accent-text: #5cff93;
  --accent-2-text: #ffd77a;
  --accent-lip: #1f9a47;
  --accent-fill-a: #39ff7a;
  --accent-fill-b: #39ff7a;
  --attention: #ffcf5c;
  --on-attention: #1a1000;
  --mention-bg: rgba(255, 207, 92, 0.12);
  --mention-text: #ffd77a;
  --mention-line: #ffcf5c;
  --focus: #eaffef;
  --ok: #39ff7a;
  --idle: #ffcf5c;
  --dnd: #ff6b6b;
  --offline: #6a9775;
  --live: #39ff7a;
  --live-bg: #0c2414;
  --live-edge: #2f9a52;
  --speaking-bg: #0c2414;
  --danger: #ff8a8a;
  --danger-bg: #2a0f0f;
  --danger-edge: #c25555;
  --danger-fill: #ff8080;
  --on-danger: #1a0505;
  --warn: #ffcf5c;
  --warn-bg: #241e0a;
  --warn-line: #8a7020;
  --av-fg: #eaffef;
  --av-0: #1f5a33;
  --av-1: #5a4a14;
  --av-2: #1f4a5a;
  --av-3: #5a2a3a;
  --av-4: #3a3a6a;
  --av-5: #2f5a4f;
  --av-6: #5a3a1f;
  --av-7: #4a5a1f;
  --av-offline: #1e2e22;
  --theme-color: #050a06;
  --surface-1-glass: #08110a;
  --bg-glow-a: rgba(57, 255, 122, 0.06);
  --bg-glow-a0: rgba(57, 255, 122, 0);
  --bg-glow-b: rgba(255, 207, 92, 0.05);
  --bg-glow-b0: rgba(255, 207, 92, 0);
  --overlay: rgba(1, 3, 2, 0.66);
  --viewer-bg: rgba(1, 3, 2, 0.94);
  --on-accent-fill: var(--on-accent);
  --focus-halo: rgba(57, 255, 122, 0.3);
  --halo-1: rgba(57, 255, 122, 0.5);
  --halo-2: rgba(57, 255, 122, 0.2);
  --key-lip: #1e3a26;
  --top-light: rgba(255, 255, 255, 0.05);
  --scrollbar: #1e3a26;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6);
}

:root[data-skin="fosfor"][data-scheme="light"] {
  color-scheme: light;
  --bg: #c9d1b4;
  --surface-1: #d2d9bf;
  --surface-2: #dbe1ca;
  --surface-3: #e4e9d6;
  --surface-alt: #d6dcc4;
  --surface-sunken: #c3cbad;
  --surface-hover: #bcc5a4;
  --surface-active: #c6d6ae;
  --surface-float: #e4e9d6;
  --line: #b6bf9d;
  --line-strong: #a3ad88;
  --edge: #56624a;
  --text: #0f170b;
  --text-2: #2b3622;
  --text-3: #36422c;
  --text-strong: #050a03;
  --link: #174a24;
  --accent: #1d5a2c;
  --accent-2: #6a4a00;
  --accent-hover: #174a24;
  --on-accent: #f2f5ea;
  --accent-text: #174a24;
  --accent-2-text: #563c00;
  --accent-lip: #0f3a1a;
  --accent-fill-a: #1d5a2c;
  --accent-fill-b: #1d5a2c;
  --on-accent-fill: #f2f5ea;
  --attention: #6a4a00;
  --on-attention: #ffffff;
  --mention-bg: #e6dcb0;
  --mention-text: #4a3300;
  --mention-line: #6a4a00;
  --focus: #0f170b;
  --ok: #1d6a33;
  --idle: #6a4a00;
  --dnd: #a3221c;
  --offline: #55604a;
  --live: #164f26;
  --live-bg: #c4dcb8;
  --live-edge: #286b3c;
  --speaking-bg: #c4dcb8;
  --danger: #7f1913;
  --danger-bg: #e6c9bf;
  --danger-edge: #9a332a;
  --danger-fill: #8f1d16;
  --on-danger: #ffffff;
  --warn: #4f3700;
  --warn-bg: #e2d6a6;
  --warn-line: #8a6a1f;
  --av-fg: #eef2e4;
  --av-0: #1f5a33;
  --av-1: #5a4a14;
  --av-2: #1f4a5a;
  --av-3: #5a2a3a;
  --av-4: #3a3a6a;
  --av-5: #2f5a4f;
  --av-6: #5a3a1f;
  --av-7: #4a5a1f;
  --av-offline: #4a5440;
  --theme-color: #c9d1b4;
  --surface-1-glass: #d2d9bf;
  --bg-glow-a: rgba(29, 90, 44, 0.07);
  --bg-glow-a0: rgba(29, 90, 44, 0);
  --bg-glow-b: rgba(106, 74, 0, 0.06);
  --bg-glow-b0: rgba(106, 74, 0, 0);
  --overlay: rgba(15, 23, 11, 0.42);
  --viewer-bg: rgba(15, 23, 11, 0.94);
  --focus-halo: rgba(29, 90, 44, 0.28);
  --halo-1: rgba(22, 79, 38, 0.4);
  --halo-2: rgba(22, 79, 38, 0.16);
  --key-lip: #a3ad88;
  --top-light: rgba(255, 255, 255, 0.8);
  --scrollbar: #a3ad88;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(15, 23, 11, 0.18);
  /* Rol renkleri (rozet yazısı ve telsiz kartı tonları): LCD zemini koyu olduğu için ortak açık tonlar yetmez */
  --role-red: #8a1a12;
  --role-orange: #7a3800;
  --role-yellow: #574200;
  --role-green: #0d5228;
  --role-teal: #075550;
  --role-blue: #17439a;
  --role-purple: #522fa6;
  --role-pink: #87195a;
}

/* =========================================================
   KUTUP İSTASYONU: buzul mavisi ve buz beyazı, parka turuncusu,
   buzlu cam paneller (cam belirteci yarı saydam)
   ========================================================= */

:root[data-skin="kutup"] {
  --font-body: "Figtree Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Unbounded Telsiz", "Figtree Telsiz", var(--font-system), var(--font-emoji);
  --font-label: "Martian Mono Telsiz", var(--font-mono-system);
  --font-mono: "Martian Mono Telsiz", var(--font-mono-system);
  --weight-display: 700;
  --weight-strong: 700;
  --label-spacing: 0.06em;
  --label-size: 0.6875rem;
  --radius-panel: 14px;
  --radius-card: 12px;
  --radius-control: 10px;
  --radius-small: 6px;
  --radius-pill: 999px;
  --layout-pad: 0.75rem;
  --column-gap: 0.75rem;
  --border-width: 1px;
}

:root[data-skin="kutup"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0b1118;
  --surface-1: #0f1720;
  --surface-2: #121c27;
  --surface-3: #1a2634;
  --surface-alt: #16212d;
  --surface-sunken: #080d13;
  --surface-hover: #213042;
  --surface-active: #1c2c40;
  --surface-float: #1a2634;
  --line: #1c2836;
  --line-strong: #283749;
  --edge: #71869e;
  --text: #eaf2fb;
  --text-2: #b8c7da;
  --text-3: #9aabc1;
  --text-strong: #ffffff;
  --link: #8cc4ff;
  --accent: #5aa9ff;
  --accent-2: #ff7a45;
  --accent-hover: #78b9ff;
  --on-accent: #04121f;
  --accent-text: #7ab9ff;
  --accent-2-text: #ff9466;
  --accent-lip: #2f6fb8;
  --accent-fill-a: #5aa9ff;
  --accent-fill-b: #5aa9ff;
  --attention: #ff7a45;
  --on-attention: #200a02;
  --mention-bg: rgba(255, 122, 69, 0.14);
  --mention-text: #ffa27c;
  --mention-line: #ff7a45;
  --focus: #ffffff;
  --ok: #5fd99a;
  --idle: #f5c451;
  --dnd: #ff6b7a;
  --offline: #8494a9;
  --live: #5fd99a;
  --live-bg: #0f2a22;
  --live-edge: #3a9a6e;
  --speaking-bg: #0f2a22;
  --danger: #ff929c;
  --danger-bg: #2e141a;
  --danger-edge: #c45a66;
  --danger-fill: #ff8a95;
  --on-danger: #22060a;
  --warn: #f5c451;
  --warn-bg: #2a2414;
  --warn-line: #8f7424;
  --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --av-fg: #0b1118;
  --av-0: #8cc4ff;
  --av-1: #ffb199;
  --av-2: #9be3c4;
  --av-3: #d4b8ff;
  --av-4: #ffd27a;
  --av-5: #9fd8ef;
  --av-6: #ffa3c4;
  --av-7: #c4d98a;
  --av-offline: #9aa8ba;
  --theme-color: #0b1118;
  --surface-1-glass: rgba(15, 23, 32, 0.78);
  --bg-glow-a: rgba(90, 169, 255, 0.06);
  --bg-glow-a0: rgba(90, 169, 255, 0);
  --bg-glow-b: rgba(255, 122, 69, 0.05);
  --bg-glow-b0: rgba(255, 122, 69, 0);
  --overlay: rgba(3, 6, 10, 0.66);
  --viewer-bg: rgba(3, 6, 10, 0.94);
  --on-accent-fill: var(--on-accent);
  --focus-halo: rgba(90, 169, 255, 0.3);
  --halo-1: rgba(95, 217, 154, 0.5);
  --halo-2: rgba(95, 217, 154, 0.2);
  --key-lip: #283749;
  --top-light: rgba(255, 255, 255, 0.05);
  --scrollbar: #283749;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6);
}

:root[data-skin="kutup"][data-scheme="light"] {
  color-scheme: light;
  --bg: #e8eef5;
  --surface-1: #f2f6fa;
  --surface-2: #ffffff;
  --surface-3: #f7fafc;
  --surface-alt: #eef3f8;
  --surface-sunken: #edf2f7;
  --surface-hover: #dde6f0;
  --surface-active: #e1ecfa;
  --surface-float: #ffffff;
  --line: #d5dee9;
  --line-strong: #c3cfdd;
  --edge: #6a7a8c;
  --text: #0d1620;
  --text-2: #3b4a5c;
  --text-3: #4a596b;
  --text-strong: #05090e;
  --link: #0a52ab;
  --accent: #0f62c9;
  --accent-2: #c2410c;
  --accent-hover: #0b56b3;
  --on-accent: #ffffff;
  --accent-text: #0b54ad;
  --accent-2-text: #a1360a;
  --accent-lip: #0a4590;
  --accent-fill-a: #0f62c9;
  --accent-fill-b: #0f62c9;
  --attention: #c2410c;
  --on-attention: #ffffff;
  --mention-bg: #fde6da;
  --mention-text: #8f2f08;
  --mention-line: #c2410c;
  --focus: #0d1620;
  --ok: #13804a;
  --idle: #8a5d00;
  --dnd: #c2263a;
  --offline: #6a7a8c;
  --live: #0f6e3e;
  --live-bg: #dcf1e5;
  --live-edge: #2f8a5a;
  --speaking-bg: #dcf1e5;
  --danger: #a81e2c;
  --danger-bg: #fbe0e3;
  --danger-edge: #c8404e;
  --danger-fill: #b0202f;
  --on-danger: #ffffff;
  --warn: #6e4a00;
  --warn-bg: #f8ecc8;
  --warn-line: #a7801f;
  --shadow-panel: 0 16px 40px rgba(13, 40, 80, 0.08);
  --shadow-card: inset 0 1px 0 #ffffff, 0 3px 10px rgba(13, 40, 80, 0.07);
  --av-fg: #0d1620;
  --av-0: #8cc4ff;
  --av-1: #ffb199;
  --av-2: #9be3c4;
  --av-3: #d4b8ff;
  --av-4: #ffd27a;
  --av-5: #9fd8ef;
  --av-6: #ffa3c4;
  --av-7: #c4d98a;
  --av-offline: #c3cfdd;
  --theme-color: #e8eef5;
  --surface-1-glass: rgba(242, 246, 250, 0.76);
  --bg-glow-a: rgba(15, 98, 201, 0.07);
  --bg-glow-a0: rgba(15, 98, 201, 0);
  --bg-glow-b: rgba(194, 65, 12, 0.06);
  --bg-glow-b0: rgba(194, 65, 12, 0);
  --overlay: rgba(13, 22, 32, 0.42);
  --viewer-bg: rgba(13, 22, 32, 0.94);
  --on-accent-fill: #ffffff;
  --focus-halo: rgba(15, 98, 201, 0.28);
  --halo-1: rgba(15, 110, 62, 0.4);
  --halo-2: rgba(15, 110, 62, 0.16);
  --key-lip: #c3cfdd;
  --top-light: rgba(255, 255, 255, 0.8);
  --scrollbar: #c3cfdd;
  --shadow-pop: 0 20px 56px rgba(13, 22, 32, 0.18);
}

/* =========================================================
   PLAK: gece yarısı plak yayını, patlıcan moru zemin,
   gül pembesi etiket ve altın yaldız
   ========================================================= */

:root[data-skin="plak"] {
  --font-body: "Rubik Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Young Serif Telsiz", Georgia, "Times New Roman", serif, var(--font-emoji);
  --font-label: "Rubik Telsiz", var(--font-system);
  --font-mono: var(--font-mono-system);
  --weight-display: 400;
  --weight-strong: 600;
  --label-spacing: 0.1em;
  --label-size: 0.6875rem;
  --radius-panel: 22px;
  --radius-card: 16px;
  --radius-control: 14px;
  --radius-small: 8px;
  --radius-pill: 999px;
  --layout-pad: 0.875rem;
  --column-gap: 0.875rem;
  --border-width: 1px;
}

:root[data-skin="plak"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #120c14;
  --surface-1: #1a111c;
  --surface-2: #1f1522;
  --surface-3: #2a1d2e;
  --surface-alt: #241a28;
  --surface-sunken: #0d080f;
  --surface-hover: #33233a;
  --surface-active: #3a1f33;
  --surface-float: #2a1d2e;
  --line: #2e2032;
  --line-strong: #3d2b42;
  --edge: #937a99;
  --text: #f7eaf3;
  --text-2: #d8c1d0;
  --text-3: #bfa6b7;
  --text-strong: #ffffff;
  --link: #ffb0d0;
  --accent: #ff79b0;
  --accent-2: #f2c36b;
  --accent-hover: #ff93c0;
  --on-accent: #24050f;
  --accent-text: #ff8fbd;
  --accent-2-text: #f5cf86;
  --accent-lip: #b0386c;
  --accent-fill-a: #ff79b0;
  --accent-fill-b: #f2c36b;
  --attention: #f2c36b;
  --on-attention: #241703;
  --mention-bg: rgba(242, 195, 107, 0.14);
  --mention-text: #f5cf86;
  --mention-line: #f2c36b;
  --focus: #fff4fa;
  --ok: #6fe0a8;
  --idle: #f2c36b;
  --dnd: #ff6b6b;
  --offline: #9a889d;
  --live: #6fe0a8;
  --live-bg: #142a22;
  --live-edge: #459a72;
  --speaking-bg: #142a22;
  --danger: #ff9a87;
  --danger-bg: #34141a;
  --danger-edge: #c85c52;
  --danger-fill: #ff8f7a;
  --on-danger: #240806;
  --warn: #f2c36b;
  --warn-bg: #2e2416;
  --warn-line: #8f6d24;
  --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.4);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.3);
  --av-fg: #fff4fa;
  --av-0: #7a2f55;
  --av-1: #2f4f7a;
  --av-2: #6a5a1f;
  --av-3: #2f6a55;
  --av-4: #5a3a7a;
  --av-5: #7a3f2a;
  --av-6: #2f5f6a;
  --av-7: #6a2f3a;
  --av-offline: #3a2e3d;
  --theme-color: #120c14;
  --surface-1-glass: #1a111c;
  --bg-glow-a: rgba(255, 121, 176, 0.06);
  --bg-glow-a0: rgba(255, 121, 176, 0);
  --bg-glow-b: rgba(242, 195, 107, 0.05);
  --bg-glow-b0: rgba(242, 195, 107, 0);
  --overlay: rgba(6, 3, 7, 0.66);
  --viewer-bg: rgba(6, 3, 7, 0.94);
  --on-accent-fill: var(--on-accent);
  --focus-halo: rgba(255, 121, 176, 0.3);
  --halo-1: rgba(111, 224, 168, 0.5);
  --halo-2: rgba(111, 224, 168, 0.2);
  --key-lip: #3d2b42;
  --top-light: rgba(255, 255, 255, 0.05);
  --scrollbar: #3d2b42;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6);
}

:root[data-skin="plak"][data-scheme="light"] {
  color-scheme: light;
  --bg: #f3e9ee;
  --surface-1: #f8f0f4;
  --surface-2: #fffafc;
  --surface-3: #ffffff;
  --surface-alt: #f6edf2;
  --surface-sunken: #f4ebf0;
  --surface-hover: #ecdde6;
  --surface-active: #f9dfeb;
  --surface-float: #ffffff;
  --line: #e6d6df;
  --line-strong: #d6c1cd;
  --edge: #80697a;
  --text: #1f1019;
  --text-2: #4c3644;
  --text-3: #5a4352;
  --text-strong: #12070e;
  --link: #93184f;
  --accent: #b8226a;
  --accent-2: #8a5a00;
  --accent-hover: #a01d5c;
  --on-accent: #ffffff;
  --accent-text: #9a1c58;
  --accent-2-text: #704900;
  --accent-lip: #7f1449;
  --accent-fill-a: #b0206a;
  --accent-fill-b: #8a5a00;
  --attention: #8a5a00;
  --on-attention: #ffffff;
  --mention-bg: #f6e6c7;
  --mention-text: #6a4400;
  --mention-line: #8a5a00;
  --focus: #1f1019;
  --ok: #13804a;
  --idle: #8a5d00;
  --dnd: #c0261e;
  --offline: #80697a;
  --live: #0f6e3e;
  --live-bg: #dcf1e5;
  --live-edge: #2f8a5a;
  --speaking-bg: #dcf1e5;
  --danger: #a8231c;
  --danger-bg: #fbe0dc;
  --danger-edge: #c8453a;
  --danger-fill: #b3261e;
  --on-danger: #ffffff;
  --warn: #6e4a00;
  --warn-bg: #f6e9c6;
  --warn-line: #a7801f;
  --shadow-panel: 0 18px 48px rgba(90, 20, 60, 0.1);
  --shadow-card: inset 0 1px 0 #ffffff, 0 3px 10px rgba(90, 20, 60, 0.08);
  --av-fg: #fffafc;
  --av-0: #7a2f55;
  --av-1: #2f4f7a;
  --av-2: #6a5a1f;
  --av-3: #2f6a55;
  --av-4: #5a3a7a;
  --av-5: #7a3f2a;
  --av-6: #2f5f6a;
  --av-7: #6a2f3a;
  --av-offline: #7a6874;
  --theme-color: #f3e9ee;
  --surface-1-glass: #f8f0f4;
  --bg-glow-a: rgba(184, 34, 106, 0.07);
  --bg-glow-a0: rgba(184, 34, 106, 0);
  --bg-glow-b: rgba(138, 90, 0, 0.06);
  --bg-glow-b0: rgba(138, 90, 0, 0);
  --overlay: rgba(31, 16, 25, 0.42);
  --viewer-bg: rgba(31, 16, 25, 0.94);
  --on-accent-fill: #ffffff;
  --focus-halo: rgba(184, 34, 106, 0.28);
  --halo-1: rgba(15, 110, 62, 0.4);
  --halo-2: rgba(15, 110, 62, 0.16);
  --key-lip: #d6c1cd;
  --top-light: rgba(255, 255, 255, 0.8);
  --scrollbar: #d6c1cd;
  --shadow-pop: 0 20px 56px rgba(31, 16, 25, 0.18);
}

/* =========================================================
   KOKPİT: grafit cam kokpit, macenta etkin rota,
   camgöbeği seçim, kehribar dikkat
   ========================================================= */

:root[data-skin="kokpit"] {
  --font-body: "Manrope Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Martian Mono Telsiz", var(--font-mono-system);
  --font-label: "Martian Mono Telsiz", var(--font-mono-system);
  --font-mono: "Martian Mono Telsiz", var(--font-mono-system);
  --weight-display: 500;
  --weight-strong: 700;
  --label-spacing: 0.1em;
  --label-size: 0.6875rem;
  --radius-panel: 0;
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-small: 4px;
  --radius-pill: 999px;
  --layout-pad: 0rem;
  --column-gap: 0rem;
  --border-width: 1px;
}

:root[data-skin="kokpit"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0a0b0d;
  --surface-1: #101215;
  --surface-2: #13161a;
  --surface-3: #1b1f25;
  --surface-alt: #171a1f;
  --surface-sunken: #070809;
  --surface-hover: #232830;
  --surface-active: #2a1f2c;
  --surface-float: #1b1f25;
  --line: #1d2127;
  --line-strong: #2a2f37;
  --edge: #78808d;
  --text: #f2f4f7;
  --text-2: #c0c7d1;
  --text-3: #a0a9b5;
  --text-strong: #ffffff;
  --link: #5ce1ff;
  --accent: #ff5cd1;
  --accent-2: #5ce1ff;
  --accent-hover: #ff7ad9;
  --on-accent: #22041a;
  --accent-text: #ff7ad9;
  --accent-2-text: #7fe8ff;
  --accent-lip: #a8328a;
  --accent-fill-a: #ff5cd1;
  --accent-fill-b: #ff5cd1;
  --attention: #ffb020;
  --on-attention: #1f1300;
  --mention-bg: rgba(255, 176, 32, 0.14);
  --mention-text: #ffc457;
  --mention-line: #ffb020;
  --focus: #5ce1ff;
  --ok: #4ee08a;
  --idle: #ffb020;
  --dnd: #ff4d5e;
  --offline: #858d98;
  --live: #4ee08a;
  --live-bg: #0f2618;
  --live-edge: #349a5e;
  --speaking-bg: #0f2618;
  --danger: #ff8792;
  --danger-bg: #2e1216;
  --danger-edge: #c4525f;
  --danger-fill: #ff7a85;
  --on-danger: #22050a;
  --warn: #ffb020;
  --warn-bg: #2a2010;
  --warn-line: #8f6a14;
  --av-fg: #0a0b0d;
  --av-0: #ff9fe0;
  --av-1: #8fe8ff;
  --av-2: #ffd27a;
  --av-3: #a6f0c0;
  --av-4: #c8b6ff;
  --av-5: #ffb199;
  --av-6: #d8f08a;
  --av-7: #9fc4ff;
  --av-offline: #9aa1ab;
  --theme-color: #0a0b0d;
  --surface-1-glass: #101215;
  --bg-glow-a: rgba(255, 92, 209, 0.06);
  --bg-glow-a0: rgba(255, 92, 209, 0);
  --bg-glow-b: rgba(92, 225, 255, 0.05);
  --bg-glow-b0: rgba(92, 225, 255, 0);
  --overlay: rgba(2, 2, 3, 0.66);
  --viewer-bg: rgba(2, 2, 3, 0.94);
  --on-accent-fill: var(--on-accent);
  --focus-halo: rgba(92, 225, 255, 0.3);
  --halo-1: rgba(78, 224, 138, 0.5);
  --halo-2: rgba(78, 224, 138, 0.2);
  --key-lip: #2a2f37;
  --top-light: rgba(255, 255, 255, 0.05);
  --scrollbar: #2a2f37;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6);
}

:root[data-skin="kokpit"][data-scheme="light"] {
  color-scheme: light;
  --bg: #e9eaec;
  --surface-1: #f3f4f5;
  --surface-2: #ffffff;
  --surface-3: #f8f8f9;
  --surface-alt: #f0f1f3;
  --surface-sunken: #eceef0;
  --surface-hover: #e0e2e6;
  --surface-active: #f8e1f1;
  --surface-float: #ffffff;
  --line: #d9dce0;
  --line-strong: #c6cad0;
  --edge: #6c737e;
  --text: #0d0f12;
  --text-2: #3a4048;
  --text-3: #4a515b;
  --text-strong: #000000;
  --link: #00607f;
  --accent: #b0168a;
  --accent-2: #00728f;
  --accent-hover: #9a1278;
  --on-accent: #ffffff;
  --accent-text: #99127a;
  --accent-2-text: #00607a;
  --accent-lip: #7a0f60;
  --accent-fill-a: #b0168a;
  --accent-fill-b: #b0168a;
  --attention: #8a5a00;
  --on-attention: #ffffff;
  --mention-bg: #f6e8c4;
  --mention-text: #6a4400;
  --mention-line: #8a5a00;
  --focus: #0d0f12;
  --ok: #13804a;
  --idle: #8a5d00;
  --dnd: #c0263a;
  --offline: #6c737e;
  --live: #0f6e3e;
  --live-bg: #dcf1e5;
  --live-edge: #2f8a5a;
  --speaking-bg: #dcf1e5;
  --danger: #a81e2c;
  --danger-bg: #fbe0e3;
  --danger-edge: #c8404e;
  --danger-fill: #b0202f;
  --on-danger: #ffffff;
  --warn: #6e4a00;
  --warn-bg: #f8ecc8;
  --warn-line: #a7801f;
  --av-fg: #0d0f12;
  --av-0: #ff9fe0;
  --av-1: #8fe8ff;
  --av-2: #ffd27a;
  --av-3: #a6f0c0;
  --av-4: #c8b6ff;
  --av-5: #ffb199;
  --av-6: #d8f08a;
  --av-7: #9fc4ff;
  --av-offline: #c6cad0;
  --theme-color: #e9eaec;
  --surface-1-glass: #f3f4f5;
  --bg-glow-a: rgba(176, 22, 138, 0.07);
  --bg-glow-a0: rgba(176, 22, 138, 0);
  --bg-glow-b: rgba(0, 114, 143, 0.06);
  --bg-glow-b0: rgba(0, 114, 143, 0);
  --overlay: rgba(13, 15, 18, 0.42);
  --viewer-bg: rgba(13, 15, 18, 0.94);
  --on-accent-fill: #ffffff;
  --focus-halo: rgba(176, 22, 138, 0.28);
  --halo-1: rgba(15, 110, 62, 0.4);
  --halo-2: rgba(15, 110, 62, 0.16);
  --key-lip: #c6cad0;
  --top-light: rgba(255, 255, 255, 0.8);
  --scrollbar: #c6cad0;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(13, 15, 18, 0.18);
}

/* =========================================================
   YÜKSEK KONTRAST: en yüksek okunurluk, metin en az 7:1 (WCAG AAA),
   2 piksel kenarlar, degrade, gölge ve parıltı yok
   ========================================================= */

:root[data-skin="kontrast"] {
  --font-body: "Figtree Telsiz", var(--font-system), var(--font-emoji);
  --font-display: "Figtree Telsiz", var(--font-system), var(--font-emoji);
  --font-label: "Figtree Telsiz", var(--font-system);
  --font-mono: var(--font-mono-system);
  --weight-display: 800;
  --weight-strong: 700;
  --label-spacing: 0.02em;
  --label-size: 0.8125rem;
  --radius-panel: 0;
  --radius-card: 6px;
  --radius-control: 6px;
  --radius-small: 4px;
  --radius-pill: 999px;
  --layout-pad: 0rem;
  --column-gap: 0rem;
  --border-width: 2px;
}

:root[data-skin="kontrast"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface-1: #0a0a0a;
  --surface-2: #000000;
  --surface-3: #1a1a1a;
  --surface-alt: #111111;
  --surface-sunken: #000000;
  --surface-hover: #262626;
  --surface-active: #262626;
  --surface-float: #0a0a0a;
  --line: #8a8a8a;
  --line-strong: #b0b0b0;
  --edge: #d6d6d6;
  --text: #ffffff;
  --text-2: #ececec;
  --text-3: #d4d4d4;
  --text-strong: #ffffff;
  --link: #ffe600;
  --accent: #ffe600;
  --accent-2: #80dfff;
  --accent-hover: #fff066;
  --on-accent: #000000;
  --accent-text: #ffe600;
  --accent-2-text: #80dfff;
  --accent-lip: #b3a100;
  --accent-fill-a: #ffe600;
  --accent-fill-b: #ffe600;
  --attention: #ffe600;
  --on-attention: #000000;
  --mention-bg: #2a2600;
  --mention-text: #ffe600;
  --mention-line: #ffe600;
  --focus: #00e5ff;
  --ok: #5dff7a;
  --idle: #ffe600;
  --dnd: #ff7a7a;
  --offline: #c2c2c2;
  --live: #5dff7a;
  --live-bg: #002a0a;
  --live-edge: #5dff7a;
  --speaking-bg: #002a0a;
  --danger: #ff9a9a;
  --danger-bg: #2a0000;
  --danger-edge: #ff9a9a;
  --danger-fill: #ff9a9a;
  --on-danger: #000000;
  --warn: #ffe600;
  --warn-bg: #262000;
  --warn-line: #ffe600;
  --av-fg: #000000;
  --av-0: #8fd0ff;
  --av-1: #ffadc8;
  --av-2: #ffe066;
  --av-3: #c9b3ff;
  --av-4: #7dffb0;
  --av-5: #ffb38a;
  --av-6: #d6ff7a;
  --av-7: #8ff0ff;
  --av-offline: #c2c2c2;
  --theme-color: #000000;
  --surface-1-glass: #0a0a0a;
  --bg-glow-a: rgba(255, 230, 0, 0.06);
  --bg-glow-a0: rgba(255, 230, 0, 0);
  --bg-glow-b: rgba(128, 223, 255, 0.05);
  --bg-glow-b0: rgba(128, 223, 255, 0);
  --overlay: rgba(0, 0, 0, 0.66);
  --viewer-bg: rgba(0, 0, 0, 0.94);
  --on-accent-fill: var(--on-accent);
  --focus-halo: rgba(0, 229, 255, 0.3);
  --halo-1: rgba(93, 255, 122, 0.5);
  --halo-2: rgba(93, 255, 122, 0.2);
  --key-lip: #b0b0b0;
  --top-light: rgba(255, 255, 255, 0.05);
  --scrollbar: #b0b0b0;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6);
  /* Rol renkleri (rozet yazısı ve telsiz kartı tonları) en az 7:1 */
  --role-red: #ffa3a3;
  --role-orange: #ffbf8a;
  --role-yellow: #ffe08a;
  --role-green: #7dffb0;
  --role-teal: #6ff0e4;
  --role-blue: #a3c8ff;
  --role-purple: #cfb8ff;
  --role-pink: #ffa8d8;
}

:root[data-skin="kontrast"][data-scheme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f2f2f2;
  --surface-alt: #f7f7f7;
  --surface-sunken: #ffffff;
  --surface-hover: #e6e6e6;
  --surface-active: #e6e6e6;
  --surface-float: #ffffff;
  --line: #6e6e6e;
  --line-strong: #4a4a4a;
  --edge: #2b2b2b;
  --text: #000000;
  --text-2: #1a1a1a;
  --text-3: #2e2e2e;
  --text-strong: #000000;
  --link: #0035a0;
  --accent: #0040c0;
  --accent-2: #6b0099;
  --accent-hover: #0035a0;
  --on-accent: #ffffff;
  --accent-text: #0035a0;
  --accent-2-text: #5c0085;
  --accent-lip: #002a80;
  --accent-fill-a: #0040c0;
  --accent-fill-b: #0040c0;
  --attention: #6b0099;
  --on-attention: #ffffff;
  --mention-bg: #fff2a8;
  --mention-text: #2e2000;
  --mention-line: #000000;
  --focus: #000000;
  --ok: #006b1f;
  --idle: #7a4f00;
  --dnd: #b00000;
  --offline: #4a4a4a;
  --live: #004d16;
  --live-bg: #e3f5e6;
  --live-edge: #006b1f;
  --speaking-bg: #e3f5e6;
  --danger: #990000;
  --danger-bg: #ffe5e5;
  --danger-edge: #a30000;
  --danger-fill: #a30000;
  --on-danger: #ffffff;
  --warn: #5c3b00;
  --warn-bg: #fff2c2;
  --warn-line: #6b4500;
  --av-fg: #ffffff;
  --av-0: #00478c;
  --av-1: #8f0040;
  --av-2: #5e3d00;
  --av-3: #4f2891;
  --av-4: #00552f;
  --av-5: #8a3100;
  --av-6: #2f5200;
  --av-7: #00566a;
  --av-offline: #4a4a4a;
  --theme-color: #ffffff;
  --surface-1-glass: #ffffff;
  --bg-glow-a: rgba(0, 64, 192, 0.07);
  --bg-glow-a0: rgba(0, 64, 192, 0);
  --bg-glow-b: rgba(107, 0, 153, 0.06);
  --bg-glow-b0: rgba(107, 0, 153, 0);
  --overlay: rgba(0, 0, 0, 0.42);
  --viewer-bg: rgba(0, 0, 0, 0.94);
  --on-accent-fill: #ffffff;
  --focus-halo: rgba(0, 64, 192, 0.28);
  --halo-1: rgba(0, 77, 22, 0.4);
  --halo-2: rgba(0, 77, 22, 0.16);
  --key-lip: #4a4a4a;
  --top-light: rgba(255, 255, 255, 0.8);
  --scrollbar: #4a4a4a;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.18);
  /* Rol renkleri (rozet yazısı ve telsiz kartı tonları) en az 7:1 */
  --role-red: #8a170e;
  --role-orange: #6e3000;
  --role-yellow: #523e00;
  --role-green: #084d27;
  --role-teal: #054a45;
  --role-blue: #143a8f;
  --role-purple: #4a279a;
  --role-pink: #7a174c;
}

/* Yazı boyutu (Ek D2): varsayılan 15px (normal). Otomatikte 15px, 1280px ve üstü 18px, TV (1800px ve üstü) 22px.
   Özel boyut (12 ile 28px arası) theme-init.js'in kök öğeye yazdığı --font-px değişkenindedir. */
html {
  font-size: 15px;
}

@media (min-width: 1280px) {
  html[data-font-size="auto"] {
    font-size: 18px;
  }
}

@media (min-width: 1800px) {
  html[data-font-size="auto"] {
    font-size: 22px;
  }
}

html[data-font-size="small"] {
  font-size: 14px;
}

html[data-font-size="normal"] {
  font-size: 15px;
}

html[data-font-size="large"] {
  font-size: 18px;
}

html[data-font-size="tv"] {
  font-size: 22px;
}

html[data-font-size="custom"] {
  font-size: 15px;
  font-size: var(--font-px, 15px);
}

/* Frekans düzeninin kesme noktaları (KONSEPT bölüm 11): orta 760 ile 999 px, dar 760 px altı */
@media (max-width: 999px) {
  :root {
    --radio-w: 17rem;
  }
}

@media (max-width: 759px) {
  :root {
    --top-h: 3.5rem;
  }
}

/*
  Özel rol renkleri (Ayarlar > Roller): bütün temalarda aynı sekiz renk, koyu ve açık mod için ayrı tonlar.
  Rozet yazısı bu renkte, zemin saydam olduğundan değerler her yüzeyde (üzerine gelme ve seçili zeminler dahil)
  en az 4.5:1 verecek açıklıkta seçildi (scripts/kontrast.js). Zemini bu değerlere uymayan bir tema (ör. Fosfor açık,
  Yüksek Kontrast) sekiz rengi kendi bloğunda ezer.
*/
:root {
  --role-red: #ff8f8f;
  --role-orange: #ffad6b;
  --role-yellow: #f2d06b;
  --role-green: #66d998;
  --role-teal: #4dd4c8;
  --role-blue: #7cb0ff;
  --role-purple: #b997ff;
  --role-pink: #ff8fcc;
}

:root[data-scheme="light"] {
  --role-red: #b22318;
  --role-orange: #964500;
  --role-yellow: #755900;
  --role-green: #146a39;
  --role-teal: #0b6860;
  --role-blue: #1f56c0;
  --role-purple: #683ece;
  --role-pink: #aa226b;
}

/*
  Telsiz kartı düğmelerinin tonları (radio.css tone-*): Kamera, Mikrofon, Sağırlaştır ve Ekran düğmesinin simge ve
  kenar rengi. Varsayılanları özel rol renkleridir, bu yüzden moda göre değişir. Bir tema rol renklerini veya
  yalnızca tonları kendi bloğunda ezebilir.
*/
:root {
  --tone-camera: var(--role-blue);
  --tone-mic: var(--role-green);
  --tone-deafen: var(--role-purple);
  --tone-screen: var(--role-orange);
}

/*
  Hexball sahası ve takımları (46-hexball.js tuvali ve hexball.css): bütün temalarda aynı, koyu ve açık mod için
  ayrı tonlar. Tuval renkleri kök öğede çözülüp okunur. Saha düz renktir, üstünde ince altıgen deseni vardır.
  Takımlar yalnızca renkle ayrılmaz: diskte ve rozette takım harfi ile numara yazar.
  Kontrastlar (test/hexball-arayuz.test.js her tema ve modda yeniden hesaplar):
  - yazı ve takım rengi en az 4.5:1: beyaz ve kırmızı 5.28, beyaz ve mavi 5.69
  - sahada görünen her çizim (çizgi, direk, disk kenarı, top, kendi diskinizin halkası, vuruş halkası) sahayla en az
    3:1. Koyu modda disk kenarı ve top açık, açık modda disk kenarı ve topun kenarı koyudur.
*/
:root {
  --hex-field: #1d5446;
  --hex-pattern: rgba(255, 255, 255, 0.06);
  --hex-out: #123a30;
  --hex-line: #e6f2ec;
  --hex-net: #2a6656;
  --hex-post: #f4f6f5;
  --hex-red: #c9303f;
  --hex-blue: #2d5fd3;
  --hex-ink: #ffffff;
  --hex-disc-edge: #f4f6f5;
  --hex-ball: #ffffff;
  --hex-ball-edge: #0f1a16;
  --hex-me: #ffd447;
  --hex-kick: #7fe6ff;
}

:root[data-scheme="light"] {
  --hex-field: #d6efe2;
  --hex-pattern: rgba(28, 74, 59, 0.09);
  --hex-out: #bfe0cf;
  --hex-line: #1c4a3b;
  --hex-net: #c3e2d2;
  --hex-post: #1c4a3b;
  --hex-disc-edge: #10241d;
  --hex-ball-edge: #10241d;
  --hex-me: #6a2fd0;
  --hex-kick: #a1440a;
}

/*
  Kart oyunları (Renk, ileride Pişti): yüzler iki modda aynı, kenar, gölge ve kart arkası moda göre.
  Joker yüzü koyu temalarda, sarı yüz açık temalarda zeminden ayrışmadığı için kenar zorunludur.
  Yazı ve yüz kontrastı (en az 4.5:1): beyaz ve kırmızı 5.31, beyaz ve yeşil 4.98, beyaz ve mavi 5.45,
  beyaz ve Joker 15.26, koyu yazı ve sarı 10.38 (test/oyun-arayuz.test.js yeniden hesaplar).
*/
:root {
  --card-edge: #f2f2f7;
  --card-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45);
  --card-back-a: #2b2d6e;
  --card-back-b: #15163d;
  --card-hatch: rgba(0, 0, 0, 0.35);
  --renk-red: #c8322f;
  --renk-yellow: #f2c12e;
  --renk-green: #16804a;
  --renk-blue: #2563d8;
  --renk-wild: #24252c;
  --renk-ink: #ffffff;
  --renk-ink-yellow: #221800;
}

:root[data-scheme="light"] {
  --card-edge: #2a2b33;
  --card-shadow: 0 0.25rem 0.75rem rgba(20, 20, 40, 0.2);
  --card-back-a: #3b3fa8;
  --card-back-b: #1e2160;
  --card-hatch: rgba(255, 255, 255, 0.45);
}