/* Tek renk kaynağı. Studio dili: nötr yüzeyler, tek vurgu (mavi), kırmızı yalnızca tehlike.
   Gündüz varsayılan; gece için köke tema özniteliği (aşağıda) ya da sistem tercihi devreye girer. */
:root {
  --zemin: #ffffff; --yuzey: #f9f9f9; --yuzey2: #f2f2f2; --cizgi: #e5e5e5;
  --yazi: #0f0f0f; --yazi2: #606060; --yazi3: #737373;
  --vurgu: #065fd4; --vurgu-yumusak: rgba(6, 95, 212, 0.10); --vurgu-ustu: #ffffff;
  --tehlike: #c00000; --tehlike-yumusak: rgba(192, 0, 0, 0.08);
  --basari: #1e8e3e; --uyari: #b06000;
  --golge: 0 1px 2px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --yuvarlak: 8px;
  --sans: Roboto, "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  --seri-1: #065fd4; --seri-2: #8e24aa; --seri-3: #1e8e3e; --seri-4: #f9a825; --seri-5: #e53935;
  color-scheme: light;
}

/* Sistem gece tercihi + kullanıcı tema seçmemiş: gündüz token'larını gece değerleriyle ez. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="gunduz"]) {
    --zemin: #0f0f0f; --yuzey: #1f1f1f; --yuzey2: #282828; --cizgi: #3f3f3f;
    --yazi: #f1f1f1; --yazi2: #aaaaaa; --yazi3: #8a8a8a;
    --vurgu: #3ea6ff; --vurgu-yumusak: rgba(62, 166, 255, 0.14); --vurgu-ustu: #0f0f0f;
    --tehlike: #ff4e45; --tehlike-yumusak: rgba(255, 78, 69, 0.12);
    --basari: #4caf50; --uyari: #f0b429;
    --golge: 0 1px 2px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.4);
    color-scheme: dark;
  }
}

/* Kullanıcı elle "gece" seçtiyse sistem tercihinden bağımsız uygula. */
:root[data-tema="gece"] {
  --zemin: #0f0f0f; --yuzey: #1f1f1f; --yuzey2: #282828; --cizgi: #3f3f3f;
  --yazi: #f1f1f1; --yazi2: #aaaaaa; --yazi3: #8a8a8a;
  --vurgu: #3ea6ff; --vurgu-yumusak: rgba(62, 166, 255, 0.14); --vurgu-ustu: #0f0f0f;
  --tehlike: #ff4e45; --tehlike-yumusak: rgba(255, 78, 69, 0.12);
  --basari: #4caf50; --uyari: #f0b429;
  --golge: 0 1px 2px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.4);
  color-scheme: dark;
}

/* Eski token adları — panel.css dokunulmadan bu adlarla çalışsın diye alias. */
:root {
  --kat: var(--yuzey); --kat2: var(--yuzey2); --cizgi-parlak: var(--cizgi);
  --sonuk: var(--yazi2); --cok-sonuk: var(--yazi3);
  --kehribar: var(--vurgu); --kehribar-los: var(--vurgu-yumusak);
  --yesil: var(--basari); --kirmizi: var(--tehlike);
  --mavi: var(--vurgu); --mor: var(--yazi2); --serif: var(--sans);
}

html, body { background: var(--zemin); color: var(--yazi); font: 14px/1.5 var(--sans); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
::selection { background: var(--vurgu-yumusak); }
* { scrollbar-color: var(--cizgi) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 999px; }

.ikon { width: 20px; height: 20px; fill: currentColor; flex: none; }