/* ═══ Design Tokens — AKÜSK ═══ */
:root {
  /* Brand: AK Parti turuncu + lacivert sistemi */
  --brand: oklch(0.70 0.17 28);
  --brand-deep: oklch(0.60 0.17 28);
  --brand-soft: oklch(0.96 0.04 40);
  --navy: #0d1b36;
  --navy-2: #142350;
  --navy-3: #1e3065;

  /* Neutrals */
  --bg: #f5f6f9;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --card: #ffffff;
  --ink: #0d1b36;
  --ink-2: #3b4563;
  --ink-3: #6e7691;
  --ink-4: #a4acc2;
  --line: #e5e7ee;
  --line-2: #eef0f5;

  /* Semantic */
  --ok: #158a44;
  --bad: #c42626;
  --warn: #d97706;
  --info: #1e6fb8;

  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(13,27,54,.04);
  --shadow: 0 4px 16px rgba(13,27,54,.08);
  --shadow-lg: 0 12px 40px rgba(13,27,54,.18);

  /* Default font theme: Aeon Lyrical — DM Sans + DM Mono + Newsreader (yumuşak yayın/dergi vibe) */
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', 'Geist Mono', ui-monospace, monospace;
  --display: 'Newsreader', Georgia, serif;

  --sb-w: 240px;
}

/* ═══ Font theme alternatifleri — html[data-font] ile aktif (her paket TAMAMEN benzersiz 3'lü, rakamlar dahil) ═══ */
/* Paket 1: Inter — Modern SaaS (eski default, kullanıcı isterse seçebilir) */
[data-font="inter"] {
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Fraunces', Georgia, serif;
}
/* Paket 2: Source Editorial — Adobe Source ailesi (NYT/Substack dergi premium) */
[data-font="source"] {
  --sans: 'Source Sans 3', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --display: 'Source Serif 4', Georgia, serif;
}
/* Paket 3: Mona Premium — GitHub Mona Sans + IBM Plex Mono + Bodoni Moda (yüksek kontrast tech editorial) */
[data-font="mona"] {
  --sans: 'Mona Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'Bodoni Moda', Georgia, serif;
}
/* Paket 4: IBM Plex — IBM tasarım sistemi tek aile cohesion (klasik teknik premium) */
[data-font="ibmplex"] {
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'IBM Plex Serif', Georgia, serif;
}
/* Paket 5: Aeon Lyrical — DM ailesi + Newsreader (yumuşak yayın/dergi vibe) */
[data-font="aeon"] {
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --display: 'Newsreader', Georgia, serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tema variantları — sadece neutral/surface token'ları override eder.
   Brand turuncusu (--brand*), sidebar navy (--navy*) ve semantic renkler
   (--ok/bad/warn/info) tüm temalarda SABIT kalır (AKP kimliği + okunabilirlik).

   Token override katmanı: 9 değişken / tema bloğu.
   Component'ler bu token'lardan inherit eder; ek wildcard kuralı YOK.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Koyu — Premium gece */
[data-theme="dark"] {
  --bg:        #0a0e1a;
  --surface:   #141826;
  --surface-2: #1c2030;
  --card:      #1a1f30;
  --ink:       #f1f5f9;
  --ink-2:     #cbd5e1;
  --ink-3:     #94a3b8;
  --ink-4:     #64748b;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.06);
}

/* Premium Lacivert — Executive */
[data-theme="navy"] {
  --bg:        #0f172a;
  --surface:   #1e293b;
  --surface-2: #233048;
  --card:      #1a2540;
  --ink:       #e2e8f0;
  --ink-2:     #cbd5e1;
  --ink-3:     #94a3b8;
  --ink-4:     #64748b;
  --line:      rgba(125,211,252,.14);
  --line-2:    rgba(125,211,252,.07);
}

[data-density="compact"] { --pad: 10px; --gap: 10px; }
[data-density="normal"] { --pad: 14px; --gap: 14px; }
[data-density="cozy"] { --pad: 20px; --gap: 18px; }


/* ═══════════════════════════════════════════════════════════════════════════
   Tema-aware surface compatibility
   ─────────────────────────────────────────────────────────────────────────
   Sayfa CSS'lerinde hardcoded #fff kullanan kart/tablo/form'lar tema değişince
   bozulmasın diye, tüm "koyu" temalarda (dark + navy) ortak surface kuralı.
   Yalnızca background/color/border'a dokunur — gradient/hero/badge korunur.
   ═══════════════════════════════════════════════════════════════════════════ */
:is([data-theme="dark"], [data-theme="navy"]) body {
  background: var(--bg);
  color: var(--ink);
}

/* Surface componentleri — cards, panels, lists, toolbars, modals */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    [class*="-card"]:not([class*="-hero"]):not([class*="-card-head"]),
    [class*="-met"]:not([class*="-meta"]):not([class*="-met-ic"]),
    [class*="-listcard"], [class*="-list-card"], [class*="-panel"]:not([class*="-panel-head"]),
    [class*="-section-card"], [class*="-form-card"], [class*="-info-card"], [class*="-stat-card"],
    [class*="-bilgi-card"], [class*="-empty-state"], [class*="-toolbar"]:not([class*="-toolbar-head"]),
    [class*="-listbody"], [class*="-modal"]:not([class*="-overlay"]):not([class*="-modal-head"]),
    .card, .content-card, .modal-content, .dropdown-menu
  ) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

/* Card/list/toolbar header — gradient gri olabilir */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    [class*="-card-head"], [class*="-list-head"], [class*="-listhead"],
    [class*="-toolbar-head"], [class*="-section-head"], [class*="-modal-head"],
    .card-header
  ) {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--ink);
  border-color: var(--line);
}

/* Tables */
:is([data-theme="dark"], [data-theme="navy"]) table:not([class*="-track"]) {
  background: var(--surface);
  color: var(--ink);
}
:is([data-theme="dark"], [data-theme="navy"]) :is(thead, thead th, [class*="-table"] thead th) {
  background: var(--surface);
  color: var(--ink-3);
  border-color: var(--line);
}
:is([data-theme="dark"], [data-theme="navy"])
  :is(tbody, tbody tr, tbody td, [class*="-table"] tbody tr, [class*="-table"] tbody td) {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
:is([data-theme="dark"], [data-theme="navy"])
  :is(tbody tr:hover td, [class*="-table"] tbody tr:hover td) {
  background: var(--surface-2);
}

/* Form elements */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea, .form-control, .form-select,
    [class*="-search"]:not([class*="-search-"]), [class*="-input"], [class*="-select"], [class*="-textarea"]
  ) {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
:is([data-theme="dark"], [data-theme="navy"]) :is(input::placeholder, textarea::placeholder) {
  color: var(--ink-3);
  opacity: 1;
}
:is([data-theme="dark"], [data-theme="navy"])
  :is(input:focus, textarea:focus, select:focus, [class*="-search"]:focus-within) {
  background: var(--surface);
  border-color: var(--brand);
}

/* Bootstrap utility */
:is([data-theme="dark"], [data-theme="navy"]) .bg-white  { background: var(--surface); color: var(--ink); }
:is([data-theme="dark"], [data-theme="navy"]) .bg-light  { background: var(--surface-2); color: var(--ink); }
:is([data-theme="dark"], [data-theme="navy"]) .text-dark { color: var(--ink); }
:is([data-theme="dark"], [data-theme="navy"]) :is(.text-muted, .text-secondary) { color: var(--ink-3); }
:is([data-theme="dark"], [data-theme="navy"]) :is(.border, .border-top, .border-bottom, .border-start, .border-end) { border-color: var(--line); }
:is([data-theme="dark"], [data-theme="navy"]) hr { border-color: var(--line); }

/* Sidebar / topbar — navy sidebar SABIT, sadece topbar surface'ı tema ile */
:is([data-theme="dark"], [data-theme="navy"]) .topbar {
  background: var(--surface);
  border-bottom-color: var(--line);
}

/* === Tabs (aktif/pasif) === */
:is([data-theme="dark"], [data-theme="navy"])
  [class*="-tab"]:not([class*="-tabs"]):not([class*="-tab-count"]):not([class*="-tab-bar"]){
  color: var(--ink-2);
}
:is([data-theme="dark"], [data-theme="navy"])
  :is([class*="-tab"].is-on, [class*="-tab"].active){
  background: var(--surface);
  color: var(--ink);
}

/* === Grup/section card (ilce_yonetimi tipi accordion) === */
:is([data-theme="dark"], [data-theme="navy"])
  [class*="-grup"]:not([class*="-grup-head"]):not([class*="-grup-badge"]):not([class*="-grup-chev"]):not([class*="-grup-title"]):not([class*="-grup-name"]):not([class*="-grup-body"]){
  background: var(--surface);
  border-color: var(--line);
}
:is([data-theme="dark"], [data-theme="navy"]) [class*="-grup-head"]{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--line);
}

/* === Empty state container (-empty AMA -empty-state/title/sub hariç) === */
:is([data-theme="dark"], [data-theme="navy"])
  [class*="-empty"]:not([class*="-empty-state"]):not([class*="-empty-title"]):not([class*="-empty-sub"]):not([class*="-empty-visual"]){
  background: var(--surface);
  color: var(--ink-3);
}

/* === Wrap/side container (sokak_harita tipi yan panel) === */
:is([data-theme="dark"], [data-theme="navy"])
  :is([class*="-wrap"]:not([class*="-wrapper"]), [class*="-side"]:not([class*="-sidebar"]):not([class*="-side-by-side"]), [class*="-back"]:not([class*="-backdrop"]):not([class*="-background"])){
  background: var(--surface);
  color: var(--ink);
}

/* Progress / track / bar arkaplanları — hardcoded #f1f5f9 yakala.
   ÖNEMLİ: Sadece TRACK/PARENT'i match et — child fill'ler (örn. dh-cins-bar-e,
   dh-cins-bar-k) gradient'lerini KORUSUN. */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    [class*="-bar-track"], [class*="-prog-bar"], [class*="-bar-bg"],
    [class*="-katilim-bar"], [class*="-yas-track"],
    [class*="-bar-t"], .progress, .progress-bar-bg,
    .dh-cins-bar
  ) {
  background: var(--surface-2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAZ 2.1 — Dark+Navy wildcard genişlemesi (dropdown/menu/tablo/buton/tag)
   Hardcoded background:#fff/#f1f5f9 kullanan UI element'lerini yakalar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kat.1 — Ghost/Secondary/Outline butonlar (primary/CTA hariç) */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    [class*="-btn-ghost"], [class*="-btn-secondary"], [class*="-btn-outline"],
    .btn-ghost, .btn-outline-secondary, .btn-outline-dark, .btn-outline-primary,
    .btn-light
  ) {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--line);
}
:is([data-theme="dark"], [data-theme="navy"])
  :is([class*="-btn-ghost"]:hover, .btn-ghost:hover, .btn-outline-secondary:hover, .btn-light:hover) {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--ink-3);
}

/* Kat.2 — Tablo başlıkları (hardcoded thead override) */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    [class*="-table"] thead, [class*="-table"] thead th,
    [class*="-grid"] thead, [class*="-grid"] thead th,
    table thead, table thead th
  ) {
  background: var(--surface);
  color: var(--ink-3);
  border-color: var(--line);
}

/* Kat.3 — Açılır yerler (details/accordion/collapse/summary) */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    [class*="-details"]:not([class*="-details-head"]),
    [class*="-collapse"]:not([class*="-collapse-head"]),
    [class*="-expand"]:not([class*="-expand-head"]),
    [class*="-accordion"]:not([class*="-accordion-head"]),
    details, .accordion-item
  ) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
:is([data-theme="dark"], [data-theme="navy"]) :is(summary, .accordion-button) {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}

/* Kat.4 — Pill/Chip — sadece NÖTR olanlar (tag/badge tamamen çıkarıldı çünkü
   tag'ler zaten kendi semantik renkleriyle is-eksik/is-atanan vb tasarlandı,
   wildcard ile karışmasın). */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    [class*="-pill"]:not([class*="-pill-num"]):not([class*="-pill-count"]):not([class*="-pill-label"]),
    [class*="-chip"]:not([class*="-chip-count"])
  ):not(.is-ok):not(.is-bad):not(.is-warn):not(.is-info):not(.is-eksik):not(.is-atanan):not(.is-uye):not(.is-istifa):not(.is-olum):not(.is-pot):not(.is-active):not(.is-on) {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-2);
}

/* Kat.5 — Dropdown/Menu/Picker/Popover container'ları */
:is([data-theme="dark"], [data-theme="navy"])
  :is(
    [class*="-menu"]:not([class*="-menu-head"]):not([class*="-menu-item"]):not([class*="-menu-icon"]),
    [class*="-picker"]:not([class*="-picker-head"]):not([class*="-picker-item"]),
    [class*="-popup"], [class*="-popover"],
    [class*="-dropdown"]:not([class*="-dropdown-item"]),
    [class*="-pop"]:not([class*="-pop-head"]):not([class*="-pop-item"]):not([class*="-popa"]):not([class*="-population"]),
    [class*="-flyout"]:not([class*="-flyout-item"]),
    [class*="-modal-box"], .modal-content, .modal-header
  ) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}


/* ════════════════════════════════════════════════════════════════════════════
   Sprint 9.B — Reduced Motion (WCAG 2.1 SC 2.3.3)
   ════════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion: reduce → animasyon ve geçişleri minimize et.
   Motion-sensitive kullanıcılar için zorunlu (vestibular bozuklukları).
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 14. Visually hidden (screen reader only) ─── */
.visually-hidden,
.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;
}

/* ─── 15. Focus visible (WCAG 2.4.7) ─── */
*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sadece klavye-only focus, fare tıklamalarında outline yok */
*:focus:not(:focus-visible) {
  outline: none;
}