/* Tema degiskenleri. Shadow DOM sinirini gecen tek sey CSS custom property'ler;
   tum bilesenler renk, aralik, kose ve yazi tipini buradan alir.

   Gorsel yon (2026-09-08 guncellemesi): Pinx yonetim paneli temasi. Acik gri zemin,
   beyaz kartlar, yesil vurgu, mor/pembe ikincil renkler, pastel etiketler, hafif
   golge, buyuk koseler. Lexend basliklar, Public Sans metin (fonts.css, kendimiz
   barindiriyoruz). Koyu tema data-theme="dark" ile; secim index.html'de sayfa
   cizilmeden once uygulanir, boylece acik tema yanip sonmez. */
:root {
  --paper:      #f5f6f8;
  --surface:    #ffffff;
  --surface-2:  #f1f3f6;
  --ink:        #171a24;
  --ink-soft:   #667085;
  --ink-faint:  #98a2b3;
  --line:       #e9ecf1;
  --line-firm:  #d3d9e2;

  /* Tek ana vurgu: birincil buton, secili menu, odak halkasi, birakma gostergesi. */
  --accent:        #10b981;
  --accent-strong: #0e9f6e;
  --accent-soft:   #e3f6ee;
  --accent-text:   #0c8f63;
  --accent-ink:    #ffffff;

  /* Ikincil renkler: etiketler ve oncelik seritleri. */
  --violet:       #6366f1;
  --violet-soft:  #ebebfe;
  --pink:         #ec4899;
  --pink-soft:    #fde4f1;
  --amber:        #f59e0b;
  --amber-soft:   #fff3d9;
  --amber-text:   #a35a00;
  --danger:       #e5484d;
  --danger-soft:  #fde8e8;
  --sky:          #0369a1;
  --sky-soft:     #e0f2fe;
  --teal:         #0f766e;
  --teal-soft:    #d5f5ef;

  --p-low:    #98a2b3;
  --p-medium: #6366f1;
  --p-high:   #f59e0b;
  --p-urgent: #e5484d;

  --step: 4px;
  --radius:    8px;   /* buton, input, etiket kutusu */
  --radius-lg: 12px;  /* kartlar, kolonlar */
  --radius-xl: 16px;  /* buyuk kartlar, giris karti */
  --shadow:    0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);

  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Lexend", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-tracking: -0.025em;

  --sidebar-width: 248px;
  --topbar-height: 56px;

  /* Gecis suresi. Hareket azaltma tercihinde sifirlanir ve sinirin otesine de gecer. */
  --motion: 120ms;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper:      #101321;
  --surface:    #181c2a;
  --surface-2:  #1f2433;
  --ink:        #e7e9f0;
  --ink-soft:   #9aa3b8;
  --ink-faint:  #6b7489;
  --line:       #262b3b;
  --line-firm:  #353b4f;

  --accent-soft: rgba(16, 185, 129, 0.16);
  --accent-text: #34d399;

  --violet-soft: rgba(99, 102, 241, 0.2);
  --pink-soft:   rgba(236, 72, 153, 0.2);
  --amber-soft:  rgba(245, 158, 11, 0.2);
  --amber-text:  #fbbf24;
  --danger-soft: rgba(229, 72, 77, 0.2);
  --sky:         #38bdf8;
  --sky-soft:    rgba(56, 189, 248, 0.18);
  --teal:        #2dd4bf;
  --teal-soft:   rgba(45, 212, 191, 0.18);

  --shadow:    0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0ms;
  }
}

html {
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Belge duzeyindeki bu kural bilesenin :host kuralini ezer; o yuzden yerlesim
   burada tanimlanir: kabuk ekrani doldurur, icerik alani kalan yuksekligi alir. */
app-shell {
  display: flex;
  height: 100vh;
}

/* Bilesenler tanimlanmadan once (JS yuklenirken) sayfa bos gorunmesin. */
app-shell:not(:defined) {
  display: block;
}

app-shell:not(:defined)::before {
  content: "Yükleniyor…";
  display: block;
  padding: calc(var(--step) * 8);
  color: var(--ink-soft);
}