/* ============================================
   NEVER FORGET — TASARIM TOKEN'LARI
   BU DOSYAYI DEĞİŞTİRME. AYNEN KULLAN.
   Tüm renkler/spacing/radius BURADAN gelecek.
   Hardcode renk YOK. CSS değişkeni kullan.
   ============================================ */

:root {
  /* === LACİVERT (BİRİNCİL) === */
  --navy-50:  #eef1f9;
  --navy-100: #d5dcf0;
  --navy-200: #a8b8e0;
  --navy-300: #7089cf;
  --navy-500: #2a4198;
  --navy-600: #1e3178;
  --navy-700: #16245a;
  --navy-800: #0f1a3d;
  --navy-900: #0a1128;   /* Ana lacivert — sidebar, primary buton */

  /* === TURKUAZ (VURGU) === */
  --teal-100: #d3f6f3;
  --teal-200: #a8ece8;
  --teal-300: #6eddd9;   /* Aktif sidebar item, AI badge */
  --teal-400: #3cc8d2;
  --teal-500: #1dafb8;   /* İkincil buton, info */
  --teal-600: #188c93;   /* Hover, accent buton */
  --teal-700: #147074;

  /* === NÖTRLER === */
  --ink-50:  #f7f8fb;    /* Sayfa zemini */
  --ink-100: #eef1f7;    /* Hover, kart hover */
  --ink-200: #dde2ec;    /* Border */
  --ink-300: #b8c0d4;    /* Input border */
  --ink-400: #8993b0;    /* Placeholder */
  --ink-500: #5b6887;    /* İkincil metin */
  --ink-700: #2d3657;    /* Ana metin (alt) */
  --ink-900: #0b1020;    /* Ana metin (KOYU — saf siyah DEĞİL) */

  /* === SEMANTİK === */
  /* Tint zemin + AA-koyu metin çiftleri (O8 Oturum 20 — Ödevler kurumsal-pas) */
  --ok:   #2db38a;       /* SADECE doğru cevap, başarı */
  --ok-bg: #e0f5ee;      /* açık yeşil tint zemin */
  --ok-fg: #0a6e4f;      /* tint üzeri AA-koyu metin */
  --warn: #e8a63a;       /* SADECE uyarı, geç ödev */
  --warn-bg: #fbf0db;    /* amber tint zemin */
  --warn-fg: #b37a10;    /* tint üzeri AA-koyu metin */
  --err:  #de5463;       /* SADECE silme, hata */
  --err-bg: #fbe2e5;     /* kırmızı tint zemin */
  --err-fg: #9b1c2c;     /* tint üzeri AA-koyu metin */
  --info-bg: #eef1f9;    /* bilgi bandı zemin (navy-50 ailesi) */
  --info-fg: var(--navy-700);
  --info-border: var(--navy-200);

  /* === KATEGORİLER (DURUM DEĞİL — sadece içerik tipi) === */
  /* Branş ödevi kategorisi */
  --cat-brans:      var(--teal-600);
  --cat-brans-bg:   var(--teal-100);
  --cat-brans-text: var(--teal-700);
  /* Rehberlik kategorisi — warn'dan KOYU/FARKLI; semantik ayrım için */
  --cat-rehberlik:      #c97b1f;
  --cat-rehberlik-bg:   #fbeacf;
  --cat-rehberlik-text: #8a4f10;

  /* === GRAFİK / VERİ GÖRSELLEŞTİRME (durum DEĞİL — metrik tipleri) === */
  --chart-volume:      var(--navy-700);   /* miktar/hacim (çözülen soru sayısı) */
  --chart-volume-bg:   var(--navy-50);
  --chart-success:     var(--teal-600);   /* başarı/doğru % */
  --chart-success-bg:  var(--teal-100);
  --chart-progress:    var(--cat-brans);  /* ilerleme/tamamlama (ödev tamamlama %) */
  --chart-progress-bg: var(--cat-brans-bg);

  /* === BAŞARI EŞİKLERİ — referans (JS helper'a bağla) ===
     ≥75  → var(--ok)             (yeşil)
     50-75 → #b37a10               (warn-text — sarı)
     30-50 → var(--cat-rehberlik)  (koyu turuncu)
     <30  → var(--err)             (kırmızı)
  */

  /* === RADIUS === */
  --r-sm:   6px;
  --r-md:   10px;        /* Buton, input */
  --r-lg:   12px;        /* Kart, panel */
  --r-xl:   16px;        /* Modal */
  --r-pill: 100px;       /* Badge, pill */

  /* === SPACING === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* === TIPOGRAFI === */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ============================================
   YASAKLI — EĞER KOD'DA GÖRÜRSEN DEĞİŞTİR
   ============================================
   ❌ #000, black                  → var(--ink-900)
   ❌ #22c55e, #10b981, green      → var(--teal-500)
   ❌ #ec4899, pink, fuchsia       → var(--teal-500) veya var(--err)
   ❌ #8b5cf6, purple, violet      → var(--navy-700)
   ❌ #f59e0b sarı                  → var(--warn)
   ❌ Inter, Roboto, Arial         → var(--font) [Plus Jakarta Sans]
   ============================================ */

body {
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
}

/* === BUTONLAR (5 TİP — BAŞKA TİP YASAK) === */

.btn {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--navy-900);
  color: white;
}
.btn-primary:hover { background: var(--navy-700); }

.btn-accent {
  background: var(--teal-600);
  color: white;
}
.btn-accent:hover { background: var(--teal-700); }

.btn-outline {
  background: white;
  color: var(--navy-900);
  border: 1.5px solid var(--ink-300);
}
.btn-outline:hover { border-color: var(--navy-900); }

.btn-ghost {
  background: transparent;
  color: var(--navy-700);
}
.btn-ghost:hover { background: var(--ink-100); }

.btn-danger {
  background: var(--err);
  color: white;
}

.btn-sm  { padding: 6px 12px; font-size: 12.5px; }
.btn-lg  { padding: 13px 22px; font-size: 14.5px; }

/* === SIDEBAR === */

.sidebar {
  background: var(--navy-900);
  color: white;
  width: 240px;
  min-height: 100vh;
  padding: 20px 0;
  position: sticky;
  top: 0;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--navy-700);
  margin-bottom: 12px;
}

.sidebar .brand .name {
  font-weight: 800;
  font-size: 16px;
  color: white;
  letter-spacing: -0.01em;
}

.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--navy-200);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.sidebar .nav-item:hover {
  background: var(--navy-700);
  color: white;
}

.sidebar .nav-item.active {
  background: var(--navy-700);
  color: var(--teal-300);
  border-left-color: var(--teal-300);
}

.sidebar .nav-item svg {
  width: 18px;
  height: 18px;
}

.sidebar .logout {
  color: var(--err);
}

/* === KART === */

.card {
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

/* === BADGE === */

.badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-ok      { background: var(--ok-bg); color: var(--ok-fg); }
.badge-warn    { background: var(--warn-bg); color: var(--warn-fg); }
.badge-err     { background: var(--err-bg); color: var(--err-fg); }
.badge-info    { background: var(--teal-100); color: var(--teal-700); }
.badge-neutral { background: var(--ink-100); color: var(--ink-500); }
.badge-navy    { background: var(--navy-900); color: white; }

/* === PILL (filtre chip) === */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--ink-300);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  background: white;
  cursor: pointer;
  font-family: var(--font);
}

.pill:hover {
  border-color: var(--navy-600);
}

.pill.active {
  background: var(--navy-900);
  color: white;
  border-color: var(--navy-900);
}

/* === INPUT === */

.input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 14px;
  background: white;
  color: var(--ink-900);
}

.input:focus {
  outline: none;
  border-color: var(--navy-600);
}

.input::placeholder {
  color: var(--ink-400);
}

/* === TOAST === */

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  border-left: 4px solid var(--err);
  border-radius: var(--r-md);
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(10, 17, 40, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 1000;
  max-width: 360px;
  font-size: 13px;
  color: var(--ink-900);
}