/* ═══════════════════════════════════════════════════════════════════════════
   TALENTIO GLOBAL DESIGN SYSTEM — PARÇA 1: TOKEN KATMANI
   ─────────────────────────────────────────────────────────────────────────
   Tek doğruluk kaynağı (single source of truth). TÜM değerler CSS değişkeni.
   Manuel değer (hex, px) bileşenlerde KULLANILMAZ — yalnızca token referansı.
   Light-first; dark için değişken yapısı hazır (en altta [data-tema="dark"]).
   Vanilla CSS, framework yok, CSP uyumlu, PHP+MySQL portable.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ RENK — MARKA = INDIGO (C1/TASARIM-IS#1) ════════════════════════════
     KARAR (Kenan, 2026-06): MARKA RENGİ ARTIK İNDİGO #4F46E5 (talentio-v2 mockup).
     Mor ARTIK BRAND DEĞİL — yalnız "Yayın" durum rozetine indirildi (bkz --renk-yayin-*).
     Geçiş drift'i olmasın diye token ADI (`--renk-mor-*`) KORUNDU; tüm tüketiciler
     (dashboard-satis/admin, portallar, bileşenler) otomatik indigo'ya geçer.
     Yeni kodda okunur takma ad: --renk-ana-* (aşağıda). Ana ton: --renk-mor-600 (#4F46E5).
     Kullanım DAR tutulur; %80 ekran nötr renklerden oluşur. */
  --renk-mor-50:  #EEF2FF;
  --renk-mor-100: #E0E7FF;
  --renk-mor-200: #C7D2FE;
  --renk-mor-300: #A5B4FC;
  --renk-mor-400: #818CF8;
  --renk-mor-500: #6366F1;
  --renk-mor-600: #4F46E5;   /* ANA marka tonu — indigo */
  --renk-mor-700: #4338CA;
  --renk-mor-800: #3730A3;
  --renk-mor-900: #312E81;

  /* Okunur takma ad — yeni (v2) bileşenler --renk-ana-* kullanır. */
  --renk-ana-50:  var(--renk-mor-50);
  --renk-ana-100: var(--renk-mor-100);
  --renk-ana-200: var(--renk-mor-200);
  --renk-ana-300: var(--renk-mor-300);
  --renk-ana-400: var(--renk-mor-400);
  --renk-ana-500: var(--renk-mor-500);
  --renk-ana-600: var(--renk-mor-600);
  --renk-ana-700: var(--renk-mor-700);
  --renk-ana-800: var(--renk-mor-800);
  --renk-ana-900: var(--renk-mor-900);

  /* ═══ RENK — YAYIN (mor, SADECE durum rozeti) ════════════════════════════
     Mor brand'den indirildi; yalnız "Yayın" durumu için. Soft zemin + okunur metin. */
  --renk-yayin:        #8B6FE6;
  --renk-yayin-zemin:  #F1ECFB;
  --renk-yayin-metin:  #6A4FC2;

  /* ═══ RENK — TURUNCU (durum: Fatura) ═════════════════════════════════════ */
  --renk-turuncu:        #C26B1E;
  --renk-turuncu-zemin:  #FBEFE4;
  --renk-turuncu-metin:  #93500F;

  /* ═══ RENK — DEPARTMAN ═════════════════════════════════════════════════════
     Her departmanın kimlik rengi. Satış INDIGO (mordan kasıtlı olarak ayrı). */
  /* Satış — Indigo */
  --renk-satis-50:  #EEF0FB;
  --renk-satis-100: #DCE0F6;
  --renk-satis-300: #9AA4E3;
  --renk-satis-500: #4F46C4;
  --renk-satis-600: #3730A3;   /* ana */
  --renk-satis-700: #2C2683;

  /* Operasyon — Mavi */
  --renk-operasyon-50:  #E8F1FE;
  --renk-operasyon-100: #D0E3FD;
  --renk-operasyon-300: #84B4F5;
  --renk-operasyon-500: #2F7FE0;
  --renk-operasyon-600: #1F66BE;   /* ana */
  --renk-operasyon-700: #18519A;

  /* Talent — Teal */
  --renk-talent-50:  #E3F6F4;
  --renk-talent-100: #C5ECE8;
  --renk-talent-300: #6FCdc5;
  --renk-talent-500: #1EA89C;
  --renk-talent-600: #14887E;   /* ana */
  --renk-talent-700: #0E6B63;

  /* Muhasebe — Amber */
  --renk-muhasebe-50:  #FDF3E2;
  --renk-muhasebe-100: #FAE6C2;
  --renk-muhasebe-300: #F0C575;
  --renk-muhasebe-500: #DB9B2A;
  --renk-muhasebe-600: #B87C16;   /* ana */
  --renk-muhasebe-700: #915F0F;

  /* Sistem — Gri */
  --renk-sistem-50:  #F1F2F4;
  --renk-sistem-100: #E2E4E8;
  --renk-sistem-300: #AFB4BE;
  --renk-sistem-500: #6B7280;
  --renk-sistem-600: #4B5260;   /* ana */
  --renk-sistem-700: #363B47;

  /* ═══ RENK — DURUM ═════════════════════════════════════════════════════════
     İş durumu sinyalleri. Zemin (yumuşak) + metin + ana ton üçlüsü. */
  /* Başarı / tamamlandı — Yeşil */
  --renk-basari:        #2E9E5B;
  --renk-basari-zemin:  #E4F5EB;
  --renk-basari-metin:  #1E6E3F;

  /* Bekliyor / onay bekliyor — Amber */
  --renk-bekliyor:        #D9920A;
  --renk-bekliyor-zemin:  #FBF0D7;
  --renk-bekliyor-metin:  #8F6206;

  /* İşlemde / aktif — Mavi */
  --renk-islemde:        #2674D4;
  --renk-islemde-zemin:  #E3EFFB;
  --renk-islemde-metin:  #1A529B;

  /* Riskli / hata / gecikti — Kırmızı */
  --renk-riskli:        #D64545;
  --renk-riskli-zemin:  #FBE6E6;
  --renk-riskli-metin:  #9B2C2C;

  /* Pasif / nötr — Gri */
  --renk-pasif:        #8A909C;
  --renk-pasif-zemin:  #EEF0F2;
  --renk-pasif-metin:  #565C66;

  /* ═══ RENK — NÖTR (zemin / yüzey / metin / kenar) ═════════════════════════
     Ekranın ~%80'i bu nötrlerden oluşur. Gri-beyaz gam. */
  --renk-zemin:          #F6F7F9;   /* sayfa arka planı */
  --renk-zemin-alt:      #EEF0F3;   /* girintili / ikincil zemin */
  --renk-yuzey:          #FFFFFF;   /* kart / panel yüzeyi */
  --renk-yuzey-alt:      #FAFBFC;   /* yüzey içi alt zemin */
  --renk-yuzey-hover:    #F2F4F7;   /* hover yüzeyi */

  --renk-metin:          #1C2026;   /* birincil metin */
  --renk-metin-ikincil:  #4B5260;   /* ikincil metin */
  --renk-metin-soluk:    #8A909C;   /* placeholder / yardımcı */
  --renk-metin-ters:     #FFFFFF;   /* koyu zemin üstü metin */

  --renk-kenar:          #E3E6EB;   /* standart kenar */
  --renk-kenar-koyu:     #CDD2DA;   /* belirgin kenar */
  --renk-kenar-acik:     #EEF0F3;   /* hafif ayraç */

  /* ═══ TİPOGRAFİ ════════════════════════════════════════════════════════════
     İki ağırlık: 400 (normal) + 500 (orta). Sistem font yığını. */
  --yazi-aile: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yazi-aile-mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas, monospace;

  --yazi-agirlik-normal: 400;
  --yazi-agirlik-orta:   500;

  /* boyut / satır-yüksekliği / ağırlık üçlüsü → kısayol değişkenler */
  --yazi-h1-boyut: 22px;  --yazi-h1-yukseklik: 1.3;  --yazi-h1-agirlik: 500;
  --yazi-h2-boyut: 18px;  --yazi-h2-yukseklik: 1.35; --yazi-h2-agirlik: 500;
  --yazi-h3-boyut: 16px;  --yazi-h3-yukseklik: 1.4;  --yazi-h3-agirlik: 500;
  --yazi-govde-boyut: 14px; --yazi-govde-yukseklik: 1.55; --yazi-govde-agirlik: 400;
  --yazi-etiket-boyut: 12px; --yazi-etiket-yukseklik: 1.4; --yazi-etiket-agirlik: 500;

  /* hazır kısayollar (font shorthand kullanımına gerek bırakmaz) */
  --yazi-h1:     var(--yazi-h1-agirlik) var(--yazi-h1-boyut)/var(--yazi-h1-yukseklik) var(--yazi-aile);
  --yazi-h2:     var(--yazi-h2-agirlik) var(--yazi-h2-boyut)/var(--yazi-h2-yukseklik) var(--yazi-aile);
  --yazi-h3:     var(--yazi-h3-agirlik) var(--yazi-h3-boyut)/var(--yazi-h3-yukseklik) var(--yazi-aile);
  --yazi-govde:  var(--yazi-govde-agirlik) var(--yazi-govde-boyut)/var(--yazi-govde-yukseklik) var(--yazi-aile);
  --yazi-etiket: var(--yazi-etiket-agirlik) var(--yazi-etiket-boyut)/var(--yazi-etiket-yukseklik) var(--yazi-aile);

  /* ═══ SPACING — 4px tabanlı ölçek ═════════════════════════════════════════ */
  --bosluk-1: 4px;
  --bosluk-2: 8px;
  --bosluk-3: 12px;
  --bosluk-4: 16px;
  --bosluk-5: 24px;
  --bosluk-6: 32px;

  /* ═══ RADIUS ═══════════════════════════════════════════════════════════════ */
  --kose-kart:  16px;
  --kose-modal: 20px;
  --kose-input: 12px;
  --kose-pill:  999px;
  --kose-kucuk: 8px;   /* rozet / küçük öğe */

  /* ═══ SHADOW — yumuşak, premium ═══════════════════════════════════════════ */
  --golge-sm: 0 1px 2px rgba(28, 32, 38, 0.06), 0 1px 1px rgba(28, 32, 38, 0.04);
  --golge-md: 0 4px 12px rgba(28, 32, 38, 0.08), 0 2px 4px rgba(28, 32, 38, 0.05);
  --golge-lg: 0 12px 32px rgba(28, 32, 38, 0.12), 0 4px 10px rgba(28, 32, 38, 0.06);

  /* ═══ HAREKET ══════════════════════════════════════════════════════════════ */
  --gecis-hizli: 120ms ease;
  --gecis-normal: 200ms ease;

  /* ═══ Z-KATMAN ═════════════════════════════════════════════════════════════ */
  --z-acilir: 1000;
  --z-modal:  1100;
  --z-bildirim: 1200;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK (KOYU) — HAZIRLIK. Parça ilerisinde aktifleşecek.
   Yalnızca nötr + yüzey + metin + kenar yeniden tanımlanır; marka/durum
   tonları paylaşılır (gerekirse ince ayar buraya eklenir).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-tema="dark"] {
  --renk-zemin:          #14161A;
  --renk-zemin-alt:      #1B1E24;
  --renk-yuzey:          #1E2228;
  --renk-yuzey-alt:      #23272E;
  --renk-yuzey-hover:    #2A2F37;

  --renk-metin:          #ECEEF1;
  --renk-metin-ikincil:  #AAB1BC;
  --renk-metin-soluk:    #6B7280;
  --renk-metin-ters:     #14161A;

  --renk-kenar:          #2E333B;
  --renk-kenar-koyu:     #3A404A;
  --renk-kenar-acik:     #262B32;

  --golge-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --golge-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --golge-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARÇA 2 — BİLEŞEN KATMANI
   ─────────────────────────────────────────────────────────────────────────
   primitive → generic → domain. Hepsi Parça 1 token'larını kullanır.
   Manuel hex/px YASAK; yeni token tanımlanmaz. Grafik dili: sparkline (line/area).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   PRIMITIVE — Buton
   ─────────────────────────────────────────────────────────────────────────── */
.btn-birincil,
.btn-ikincil,
.btn-tehlikeli {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--bosluk-2);
  font: var(--yazi-govde-agirlik) var(--yazi-govde-boyut)/1 var(--yazi-aile);
  font-weight: var(--yazi-agirlik-orta);
  padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: var(--kose-input);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--gecis-hizli), box-shadow var(--gecis-hizli),
              border-color var(--gecis-hizli), transform var(--gecis-hizli);
  white-space: nowrap;
}
.btn-birincil:focus-visible,
.btn-ikincil:focus-visible,
.btn-tehlikeli:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--renk-mor-200);
}

/* Birincil — mor CTA (dar kullanım: ekranda tek ana eylem) */
.btn-birincil {
  background: var(--renk-mor-600);
  color: var(--renk-metin-ters);
  box-shadow: var(--golge-sm);
}
.btn-birincil:hover { background: var(--renk-mor-700); box-shadow: var(--golge-md); }
.btn-birincil:active { background: var(--renk-mor-800); transform: translateY(1px); }

/* İkincil — çerçeve */
.btn-ikincil {
  background: var(--renk-yuzey);
  color: var(--renk-metin);
  border-color: var(--renk-kenar-koyu);
}
.btn-ikincil:hover { background: var(--renk-yuzey-hover); border-color: var(--renk-metin-soluk); }
.btn-ikincil:active { transform: translateY(1px); }

/* Tehlikeli — yıkıcı eylem */
.btn-tehlikeli {
  background: var(--renk-riskli);
  color: var(--renk-metin-ters);
  box-shadow: var(--golge-sm);
}
.btn-tehlikeli:hover { background: var(--renk-riskli-metin); box-shadow: var(--golge-md); }
.btn-tehlikeli:active { transform: translateY(1px); }

/* Boyut varyantı — küçük */
.btn-kucuk {
  padding: var(--bosluk-1) var(--bosluk-3);
  font-size: var(--yazi-etiket-boyut);
  gap: var(--bosluk-1);
}

/* ───────────────────────────────────────────────────────────────────────────
   PRIMITIVE — Form alanları (input / select / textarea)
   ─────────────────────────────────────────────────────────────────────────── */
.input-alan,
.select-alan,
.textarea-alan {
  width: 100%;
  font: var(--yazi-govde);
  color: var(--renk-metin);
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar-koyu);
  border-radius: var(--kose-input);
  padding: var(--bosluk-3) var(--bosluk-4);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.input-alan::placeholder,
.textarea-alan::placeholder { color: var(--renk-metin-soluk); }
.input-alan:focus,
.select-alan:focus,
.textarea-alan:focus {
  outline: none;
  border-color: var(--renk-mor-500);
  box-shadow: 0 0 0 3px var(--renk-mor-100);
}
.input-alan:disabled,
.select-alan:disabled,
.textarea-alan:disabled {
  background: var(--renk-zemin-alt);
  color: var(--renk-metin-soluk);
  cursor: not-allowed;
}
.textarea-alan { min-height: 88px; resize: vertical; line-height: var(--yazi-govde-yukseklik); }
.select-alan { appearance: none; cursor: pointer; padding-right: var(--bosluk-6); }

/* ───────────────────────────────────────────────────────────────────────────
   PRIMITIVE — Rozet / chip (pill)
   ─────────────────────────────────────────────────────────────────────────── */
.rozet-durum,
.rozet-departman {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  font: var(--yazi-etiket);
  padding: var(--bosluk-1) var(--bosluk-3);
  border-radius: var(--kose-pill);
  white-space: nowrap;
}
.rozet-durum::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--kose-pill);
  background: currentColor; flex-shrink: 0;
}

/* Durum varyantları (zemin + metin) */
.rozet-durum.basari   { background: var(--renk-basari-zemin);   color: var(--renk-basari-metin); }
.rozet-durum.bekliyor { background: var(--renk-bekliyor-zemin); color: var(--renk-bekliyor-metin); }
.rozet-durum.islemde  { background: var(--renk-islemde-zemin);  color: var(--renk-islemde-metin); }
.rozet-durum.riskli   { background: var(--renk-riskli-zemin);   color: var(--renk-riskli-metin); }
.rozet-durum.pasif    { background: var(--renk-pasif-zemin);    color: var(--renk-pasif-metin); }

/* Departman varyantları */
.rozet-departman.satis     { background: var(--renk-satis-50);     color: var(--renk-satis-700); }
.rozet-departman.operasyon { background: var(--renk-operasyon-50); color: var(--renk-operasyon-700); }
.rozet-departman.talent    { background: var(--renk-talent-50);    color: var(--renk-talent-700); }
.rozet-departman.muhasebe  { background: var(--renk-muhasebe-50);  color: var(--renk-muhasebe-700); }
.rozet-departman.sistem    { background: var(--renk-sistem-50);    color: var(--renk-sistem-700); }

/* Tier rozeti (talent seviye) — mor vurgu, dar kullanım */
.rozet-tier {
  display: inline-flex; align-items: center; gap: var(--bosluk-1);
  font: var(--yazi-etiket);
  padding: var(--bosluk-1) var(--bosluk-3);
  border-radius: var(--kose-pill);
  background: var(--renk-mor-50); color: var(--renk-mor-700);
  border: 1px solid var(--renk-mor-200);
}

/* ───────────────────────────────────────────────────────────────────────────
   PRIMITIVE — Avatar
   ─────────────────────────────────────────────────────────────────────────── */
.avatar {
  --avatar-boyut: 40px;
  width: var(--avatar-boyut); height: var(--avatar-boyut);
  border-radius: var(--kose-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--renk-mor-100); color: var(--renk-mor-700);
  font: var(--yazi-agirlik-orta) var(--yazi-etiket-boyut)/1 var(--yazi-aile);
  overflow: hidden; flex-shrink: 0; object-fit: cover;
  text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.avatar-kucuk  { --avatar-boyut: 28px; font-size: 11px; }
.avatar.avatar-buyuk  { --avatar-boyut: 56px; font-size: var(--yazi-h3-boyut); }
.avatar.avatar-dev    { --avatar-boyut: 72px; font-size: var(--yazi-h2-boyut); }

/* ───────────────────────────────────────────────────────────────────────────
   PRIMITIVE — Platform rozeti (instagram / tiktok / youtube)
   Brand ikon (inline SVG) + metrik. Marka rengi sol kenarda.
   ─────────────────────────────────────────────────────────────────────────── */
.platform-rozet {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  font: var(--yazi-etiket);
  padding: var(--bosluk-1) var(--bosluk-3);
  border-radius: var(--kose-pill);
  background: var(--renk-yuzey-alt);
  border: 1px solid var(--renk-kenar);
  color: var(--renk-metin-ikincil);
}
.platform-rozet svg { width: 15px; height: 15px; flex-shrink: 0; }
.platform-rozet .metrik { font-weight: var(--yazi-agirlik-orta); color: var(--renk-metin); }
.platform-rozet.instagram svg { color: #C13584; }
.platform-rozet.tiktok    svg { color: var(--renk-metin); }
.platform-rozet.youtube   svg { color: #FF0000; }

/* ───────────────────────────────────────────────────────────────────────────
   GENERIC — Kart
   ─────────────────────────────────────────────────────────────────────────── */
.kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge-sm);
  padding: var(--bosluk-5);
  transition: box-shadow var(--gecis-normal), transform var(--gecis-normal);
}
.kart.tiklanabilir { cursor: pointer; }
.kart.tiklanabilir:hover { box-shadow: var(--golge-md); transform: translateY(-2px); }
.kart-bas { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--bosluk-4); }
.kart-baslik { font: var(--yazi-h3); margin: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   GENERIC — KPI kartı (ikon + label + büyük değer + trend pill + sparkline)
   ─────────────────────────────────────────────────────────────────────────── */
.kpi-kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge-sm);
  padding: var(--bosluk-4);
  display: flex; flex-direction: column; gap: var(--bosluk-3);
}
.kpi-ust { display: flex; align-items: center; gap: var(--bosluk-3); }
.kpi-ikon {
  width: 38px; height: 38px; border-radius: var(--kose-input);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--renk-mor-50); color: var(--renk-mor-600);
  flex-shrink: 0;
}
.kpi-ikon svg { width: 20px; height: 20px; }
.kpi-label { font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
.kpi-govde { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bosluk-3); }
.kpi-deger { font: var(--yazi-h1-agirlik) var(--yazi-h1-boyut)/1 var(--yazi-aile); letter-spacing: -.02em; color: var(--renk-metin); }
.kpi-trend {
  display: inline-flex; align-items: center; gap: var(--bosluk-1);
  font: var(--yazi-etiket);
  padding: 2px var(--bosluk-2);
  border-radius: var(--kose-pill);
}
.kpi-trend.yukari { background: var(--renk-basari-zemin); color: var(--renk-basari-metin); }
.kpi-trend.asagi  { background: var(--renk-riskli-zemin); color: var(--renk-riskli-metin); }
.kpi-trend.duz    { background: var(--renk-pasif-zemin);  color: var(--renk-pasif-metin); }
/* Mini sparkline alanı — line/area; SVG çizimi pano JS'inde */
.kpi-sparkline { width: 100%; height: 36px; display: block; }
.kpi-sparkline .cizgi { fill: none; stroke: var(--renk-mor-500); stroke-width: 1.5; }
.kpi-sparkline .alan  { fill: var(--renk-mor-100); opacity: .6; stroke: none; }

/* ───────────────────────────────────────────────────────────────────────────
   GENERIC — Liste satırı
   ─────────────────────────────────────────────────────────────────────────── */
.liste-satir {
  display: flex; align-items: center; gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: var(--kose-input);
  transition: background var(--gecis-hizli);
  cursor: pointer;
}
.liste-satir:hover { background: var(--renk-yuzey-hover); }
.liste-satir + .liste-satir { border-top: 1px solid var(--renk-kenar-acik); border-radius: 0; }
.liste-satir-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.liste-satir-ad { font: var(--yazi-govde); font-weight: var(--yazi-agirlik-orta); color: var(--renk-metin); }
.liste-satir-alt { font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
.liste-satir-metrik { font: var(--yazi-govde); font-weight: var(--yazi-agirlik-orta); color: var(--renk-metin); margin-left: auto; }

/* ───────────────────────────────────────────────────────────────────────────
   GENERIC — Tablo
   ─────────────────────────────────────────────────────────────────────────── */
.tablo { width: 100%; border-collapse: collapse; font: var(--yazi-govde); }
.tablo thead th {
  text-align: left;
  font: var(--yazi-etiket);
  color: var(--renk-metin-soluk);
  padding: var(--bosluk-3) var(--bosluk-4);
  border-bottom: 1px solid var(--renk-kenar);
  background: var(--renk-yuzey-alt);
  white-space: nowrap;
}
.tablo tbody td {
  padding: var(--bosluk-3) var(--bosluk-4);
  border-bottom: 1px solid var(--renk-kenar-acik);
  color: var(--renk-metin);
}
.tablo tbody tr { transition: background var(--gecis-hizli); }
.tablo tbody tr:hover { background: var(--renk-yuzey-hover); }
.tablo tbody tr:last-child td { border-bottom: none; }

/* ───────────────────────────────────────────────────────────────────────────
   GENERIC — Boş durum
   ─────────────────────────────────────────────────────────────────────────── */
.bos-durum {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-6);
  text-align: center;
  color: var(--renk-metin-soluk);
}
.bos-durum-ikon {
  width: 44px; height: 44px; border-radius: var(--kose-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--renk-zemin-alt); color: var(--renk-metin-soluk);
  font: var(--yazi-h2);
}
.bos-durum-metin { font: var(--yazi-govde); }

/* ───────────────────────────────────────────────────────────────────────────
   DOMAIN — Talent kartı (influencer kimliği)
   ─────────────────────────────────────────────────────────────────────────── */
.talent-kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge-sm);
  padding: var(--bosluk-4);
  display: flex; flex-direction: column; gap: var(--bosluk-3);
  transition: box-shadow var(--gecis-normal), transform var(--gecis-normal);
}
.talent-kart:hover { box-shadow: var(--golge-md); transform: translateY(-2px); }
.talent-kart-ust { display: flex; align-items: center; gap: var(--bosluk-3); }
.talent-kart-kimlik { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.talent-kart-ad { font: var(--yazi-h3); color: var(--renk-metin); }
.talent-kart-kullanici { font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
.talent-kart-platformlar { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }

/* ───────────────────────────────────────────────────────────────────────────
   DOMAIN — Marka bloğu
   ─────────────────────────────────────────────────────────────────────────── */
.marka-blok {
  display: flex; align-items: center; gap: var(--bosluk-3);
  padding: var(--bosluk-3);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart);
  background: var(--renk-yuzey);
}
.marka-logo {
  width: 48px; height: 48px; border-radius: var(--kose-input);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--renk-zemin-alt); color: var(--renk-metin-ikincil);
  font: var(--yazi-h3); flex-shrink: 0; overflow: hidden;
}
.marka-logo img { width: 100%; height: 100%; object-fit: contain; }
.marka-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marka-ad { font: var(--yazi-govde); font-weight: var(--yazi-agirlik-orta); color: var(--renk-metin); }
.marka-metrik { font: var(--yazi-etiket); color: var(--renk-metin-soluk); }

/* ───────────────────────────────────────────────────────────────────────────
   DOMAIN — Kampanya kartı
   ─────────────────────────────────────────────────────────────────────────── */
.kampanya-kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar);
  border-left: 3px solid var(--renk-mor-500);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge-sm);
  padding: var(--bosluk-4);
  display: flex; flex-direction: column; gap: var(--bosluk-3);
  transition: box-shadow var(--gecis-normal), transform var(--gecis-normal);
}
.kampanya-kart.tiklanabilir { cursor: pointer; }
.kampanya-kart.tiklanabilir:hover { box-shadow: var(--golge-md); transform: translateY(-2px); }
.kampanya-kart-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bosluk-3); }
.kampanya-kart-ad { font: var(--yazi-h3); color: var(--renk-metin); }
.kampanya-kart-marka { font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
.kampanya-kart-alt { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); }
.kampanya-kart-tarih { display: inline-flex; align-items: center; gap: var(--bosluk-1); font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
.kampanya-kart-tarih svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PARÇA 4 — EKSİK KRİTİK BİLEŞENLER (SON parça; design system DONUYOR)
   ─────────────────────────────────────────────────────────────────────────
   Yeni token/renk/primitive YOK. Yalnızca Parça 1+2 token'ları kullanılır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1) DRAWER — sağdan açılan panel
   ─────────────────────────────────────────────────────────────────────────── */
.drawer-katman {
  position: fixed; inset: 0;
  background: rgba(28, 32, 38, 0.45);
  display: flex; justify-content: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity var(--gecis-normal), visibility var(--gecis-normal);
  z-index: var(--z-modal);
}
.drawer-katman.acik { opacity: 1; visibility: visible; }
.drawer {
  width: 440px; max-width: 92vw; height: 100%;
  background: var(--renk-yuzey);
  border-top-left-radius: var(--kose-modal);
  border-bottom-left-radius: var(--kose-modal);
  box-shadow: var(--golge-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--gecis-normal);
}
.drawer-katman.acik .drawer { transform: translateX(0); }
.drawer-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4) var(--bosluk-5);
  border-bottom: 1px solid var(--renk-kenar);
}
.drawer-baslik { font: var(--yazi-h2); margin: 0; }
.drawer-kapat {
  width: 32px; height: 32px; border-radius: var(--kose-input);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--renk-metin-soluk);
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.drawer-kapat:hover { background: var(--renk-yuzey-hover); color: var(--renk-metin); }
.drawer-kapat svg { width: 18px; height: 18px; }
.drawer-govde { flex: 1; overflow-y: auto; padding: var(--bosluk-5); }
.drawer-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--bosluk-2);
  padding: var(--bosluk-4) var(--bosluk-5);
  border-top: 1px solid var(--renk-kenar);
  background: var(--renk-yuzey-alt);
}

/* ───────────────────────────────────────────────────────────────────────────
   2) MODAL — ortada diyalog
   ─────────────────────────────────────────────────────────────────────────── */
.modal-katman {
  position: fixed; inset: 0;
  background: rgba(28, 32, 38, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--bosluk-5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--gecis-normal), visibility var(--gecis-normal);
  z-index: var(--z-modal);
}
.modal-katman.acik { opacity: 1; visibility: visible; }
.modal {
  width: 460px; max-width: 100%;
  background: var(--renk-yuzey);
  border-radius: var(--kose-modal);
  box-shadow: var(--golge-lg);
  display: flex; flex-direction: column;
  transform: scale(.96); transition: transform var(--gecis-normal);
}
.modal-katman.acik .modal { transform: scale(1); }
.modal-bas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3);
  padding: var(--bosluk-4) var(--bosluk-5);
  border-bottom: 1px solid var(--renk-kenar);
}
.modal-baslik { font: var(--yazi-h2); margin: 0; }
.modal-govde { padding: var(--bosluk-5); color: var(--renk-metin-ikincil); }
.modal-aksiyon {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--bosluk-2);
  padding: var(--bosluk-4) var(--bosluk-5);
  border-top: 1px solid var(--renk-kenar);
}

/* ───────────────────────────────────────────────────────────────────────────
   3) PROJE KARTI (DOMAIN, esnek, çok amaçlı) — finansal alanlar opsiyonel/maske
   ─────────────────────────────────────────────────────────────────────────── */
.proje-kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge-sm);
  padding: var(--bosluk-5);
  display: flex; flex-direction: column; gap: var(--bosluk-4);
  transition: box-shadow var(--gecis-normal), transform var(--gecis-normal);
}
.proje-kart.tiklanabilir { cursor: pointer; }
.proje-kart.tiklanabilir:hover { box-shadow: var(--golge-md); transform: translateY(-2px); }
.proje-kart-bas { display: flex; align-items: flex-start; gap: var(--bosluk-3); }
.proje-kart-kimlik { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.proje-kart-ad { font: var(--yazi-h3); color: var(--renk-metin); }
.proje-kart-marka { display: inline-flex; align-items: center; gap: var(--bosluk-2); font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
.proje-kart-marka .marka-logo { width: 22px; height: 22px; border-radius: var(--kose-kucuk); font-size: 10px; }
.proje-kart-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-3); }
.proje-kart-meta-oge { display: inline-flex; align-items: center; gap: var(--bosluk-1); font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
.proje-kart-meta-oge svg { width: 14px; height: 14px; }
/* Finansal alan ızgarası — gizlenen alanlar DOM'dan çıkarılır (rol maskesi) */
.proje-kart-finans {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bosluk-3);
  padding-top: var(--bosluk-4);
  border-top: 1px solid var(--renk-kenar-acik);
}
.proje-kart-finans-oge { display: flex; flex-direction: column; gap: 2px; }
.proje-kart-finans-etiket { font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
.proje-kart-finans-deger { font: var(--yazi-govde); font-weight: var(--yazi-agirlik-orta); color: var(--renk-metin); }
.proje-kart-finans-deger.kar { color: var(--renk-basari-metin); }
.proje-kart-finans-deger.maliyet { color: var(--renk-riskli-metin); }

/* ───────────────────────────────────────────────────────────────────────────
   4) PROJE TIMELINE (DOMAIN, TEK TİP) — süreç adımları
   teklif→onay→brief→çekim→yayın→fatura→tahsilat→kapanış
   ─────────────────────────────────────────────────────────────────────────── */
.proje-timeline { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: var(--bosluk-2) 0; }
.proje-timeline-adim {
  display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-2);
  flex: 1; min-width: 72px; position: relative; text-align: center;
}
/* Adımlar arası bağlantı çizgisi */
.proje-timeline-adim::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--renk-kenar); z-index: 0;
}
.proje-timeline-adim:first-child::before { display: none; }
.proje-timeline-nokta {
  width: 28px; height: 28px; border-radius: var(--kose-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--renk-yuzey); border: 2px solid var(--renk-kenar-koyu);
  color: var(--renk-metin-soluk); position: relative; z-index: 1;
  font: var(--yazi-agirlik-orta) 12px/1 var(--yazi-aile);
}
.proje-timeline-nokta svg { width: 14px; height: 14px; }
.proje-timeline-etiket { font: var(--yazi-etiket); color: var(--renk-metin-soluk); }
/* Tamamlanmış adım — yeşil dolu */
.proje-timeline-adim.tamam .proje-timeline-nokta { background: var(--renk-basari); border-color: var(--renk-basari); color: var(--renk-metin-ters); }
.proje-timeline-adim.tamam::before { background: var(--renk-basari); }
.proje-timeline-adim.tamam .proje-timeline-etiket { color: var(--renk-metin-ikincil); }
/* Aktif adım — faz rengine göre (satış mor / operasyon mavi / finans yeşil) */
.proje-timeline-adim.aktif .proje-timeline-nokta { box-shadow: 0 0 0 4px var(--renk-yuzey), 0 0 0 6px currentColor; }
.proje-timeline-adim.aktif .proje-timeline-etiket { color: var(--renk-metin); font-weight: var(--yazi-agirlik-orta); }
.proje-timeline-adim.faz-satis.aktif  .proje-timeline-nokta { background: var(--renk-mor-600);       border-color: var(--renk-mor-600);       color: var(--renk-mor-600); }
.proje-timeline-adim.faz-operasyon.aktif .proje-timeline-nokta { background: var(--renk-operasyon-600); border-color: var(--renk-operasyon-600); color: var(--renk-operasyon-600); }
.proje-timeline-adim.faz-finans.aktif  .proje-timeline-nokta { background: var(--renk-basari);        border-color: var(--renk-basari);        color: var(--renk-basari); }
/* Aktif noktanın iç ikon/metin rengi beyaz kalsın */
.proje-timeline-adim.aktif .proje-timeline-nokta svg,
.proje-timeline-adim.aktif .proje-timeline-nokta { color: var(--renk-metin-ters); }
.proje-timeline-adim.faz-satis.aktif  .proje-timeline-etiket { color: var(--renk-mor-700); }
.proje-timeline-adim.faz-operasyon.aktif .proje-timeline-etiket { color: var(--renk-operasyon-700); }
.proje-timeline-adim.faz-finans.aktif  .proje-timeline-etiket { color: var(--renk-basari-metin); }

/* ───────────────────────────────────────────────────────────────────────────
   5) ÖZET KARTI (Financial Summary) — net vurgu
   ─────────────────────────────────────────────────────────────────────────── */
.ozet-kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge-sm);
  padding: var(--bosluk-5);
}
.ozet-kart-baslik { font: var(--yazi-h3); margin: 0 0 var(--bosluk-4); }
.ozet-kart-satir {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--bosluk-2) 0;
  font: var(--yazi-govde);
  border-bottom: 1px solid var(--renk-kenar-acik);
}
.ozet-kart-satir:last-of-type { border-bottom: none; }
.ozet-kart-etiket { color: var(--renk-metin-ikincil); }
.ozet-kart-deger { font-weight: var(--yazi-agirlik-orta); color: var(--renk-metin); }
.ozet-kart-deger.maliyet { color: var(--renk-riskli-metin); }
/* Net vurgu satırı */
.ozet-kart-net {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--bosluk-3); padding: var(--bosluk-3) var(--bosluk-4);
  background: var(--renk-mor-50); border-radius: var(--kose-input);
}
.ozet-kart-net-etiket { font: var(--yazi-govde); font-weight: var(--yazi-agirlik-orta); color: var(--renk-mor-700); }
.ozet-kart-net-deger { font: var(--yazi-h2); color: var(--renk-mor-700); }

/* ───────────────────────────────────────────────────────────────────────────
   6) FİLTRE BAR — tek satır filtre düzeni (mobilde sarar)
   ─────────────────────────────────────────────────────────────────────────── */
.filtre-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-2);
  padding: var(--bosluk-3);
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart);
}
.filtre-bar .filtre-ara { flex: 1; min-width: 160px; }
.filtre-bar .filtre-bosluk { flex: 1; }
.filtre-bar .select-alan { width: auto; min-width: 130px; padding-top: var(--bosluk-2); padding-bottom: var(--bosluk-2); }
.filtre-bar .input-alan { padding-top: var(--bosluk-2); padding-bottom: var(--bosluk-2); }

/* ───────────────────────────────────────────────────────────────────────────
   7) İSKELET (Loading Skeleton) — placeholder + hafif animasyon
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes iskelet-parla {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.iskelet {
  background: var(--renk-zemin-alt);
  background-image: linear-gradient(90deg, var(--renk-zemin-alt) 0%, var(--renk-yuzey-hover) 50%, var(--renk-zemin-alt) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: var(--kose-kucuk);
  animation: iskelet-parla 1.2s ease-in-out infinite;
}
.iskelet-satir { height: 12px; margin-bottom: var(--bosluk-2); }
.iskelet-satir.kisa { width: 40%; }
.iskelet-satir.orta { width: 70%; }
.iskelet-daire { width: 40px; height: 40px; border-radius: var(--kose-pill); }
.iskelet-kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart);
  padding: var(--bosluk-5);
}
.iskelet-kart-bas { display: flex; align-items: center; gap: var(--bosluk-3); margin-bottom: var(--bosluk-4); }
@media (prefers-reduced-motion: reduce) { .iskelet { animation: none; } }

/* ───────────────────────────────────────────────────────────────────────────
   8) ŞİFRE ALANI — göster/gizle göz + Caps Lock uyarısı (cc-220, login-sifre-ux.js)
   ─────────────────────────────────────────────────────────────────────────── */
.sifre-wrap { position: relative; }
.sifre-wrap input { padding-right: 42px; } /* göz butonuna yer aç */
.sifre-goz {
  position: absolute; top: 0; right: 0; height: 100%; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--renk-metin-soluk); transition: color var(--gecis-hizli);
}
.sifre-goz:hover { color: var(--renk-metin-ikincil); }
.sifre-goz:focus-visible {
  outline: 2px solid var(--renk-talent-600); outline-offset: -2px;
  border-radius: var(--kose-input);
}
.caps-uyari {
  font: var(--yazi-etiket); color: var(--renk-riskli-metin);
  margin-top: var(--bosluk-1); display: flex; align-items: center; gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARÇA 5 — CRM UYGULAMA YÜZEYİ (v2 / talentio-v2 mockup, C1 TASARIM-IS#1)
   ─────────────────────────────────────────────────────────────────────────
   Ana SPA ekranları (Projeler öncü). HEPSİ token referansı; ham hex/px YOK.
   Çakışma olmasın diye TÜMÜ ".t-app" kök sınıfı ALTINDA (main.css/portal ile
   yan yana güvenle yaşar). C2/C3 bu bileşenleri tüketir — API: class adları +
   data-action sözleşmesi. Bkz docs/TASARIM-GECIS-NOTU.md.
   ROZET ham DB değeri ASLA basılmaz: tek biçimlendirici ds-format.js badge().
   ═══════════════════════════════════════════════════════════════════════════ */
.t-app {
  font-family: var(--yazi-aile);
  background: var(--renk-zemin); color: var(--renk-metin);
  font-size: 14px; line-height: 1.45;
  height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: 240px 1fr;
  -webkit-font-smoothing: antialiased;
}
.t-app .num, .t-app .t-num { font-variant-numeric: tabular-nums; }

/* ── SIDEBAR (240px) ─────────────────────────────────────────────────────── */
.t-nav { background: var(--renk-yuzey); border-right: 1px solid var(--renk-kenar);
  display: flex; flex-direction: column; min-height: 0; }
.t-ws { display: flex; align-items: center; gap: var(--bosluk-3);
  margin: var(--bosluk-4) var(--bosluk-3) var(--bosluk-3);
  padding: var(--bosluk-2) var(--bosluk-3);
  border: 1px solid var(--renk-kenar); border-radius: var(--kose-input);
  cursor: pointer; transition: background var(--gecis-hizli), border-color var(--gecis-hizli); }
.t-ws:hover { background: var(--renk-yuzey-alt); border-color: var(--renk-kenar-koyu); }
.t-ws-logo { width: 30px; height: 30px; border-radius: var(--kose-kucuk); flex: none;
  background: linear-gradient(135deg, var(--renk-ana-600), var(--renk-ana-500));
  display: grid; place-items: center; color: var(--renk-metin-ters); font-weight: 700; font-size: 13px; }
.t-ws-ad { line-height: 1.25; min-width: 0; flex: 1; }
.t-ws-ad b { font-size: 13.5px; font-weight: 600; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-ws-ad span { font-size: 11.5px; color: var(--renk-metin-soluk); }
.t-nav-scroll { flex: 1; overflow-y: auto; padding: var(--bosluk-2) var(--bosluk-3) var(--bosluk-3); }
.t-nav-sec { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--renk-metin-soluk); padding: var(--bosluk-3) var(--bosluk-3) 5px; }
.t-nav-item { position: relative; display: flex; align-items: center; gap: 11px; height: 32px;
  padding: 0 var(--bosluk-3); border-radius: var(--kose-input); color: var(--renk-metin-ikincil);
  cursor: pointer; font-weight: 500; font-size: 13.5px; text-decoration: none;
  transition: background var(--gecis-hizli), color var(--gecis-hizli); }
.t-nav-item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }
.t-nav-item:hover { background: var(--renk-yuzey-alt); color: var(--renk-metin); }
.t-nav-item.active { background: var(--renk-ana-50); color: var(--renk-ana-700); font-weight: 600; }
.t-nav-item.active svg { stroke: var(--renk-ana-600); }
.t-nav-item.active::before { content: ""; position: absolute; left: calc(-1 * var(--bosluk-3));
  top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--renk-ana-600); }
.t-nav-item .ct { margin-left: auto; font-size: 11px; color: var(--renk-metin-soluk); font-variant-numeric: tabular-nums; }
.t-nav-item .alert { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--kose-pill); background: var(--renk-riskli-zemin); color: var(--renk-riskli-metin);
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.t-nav-foot { border-top: 1px solid var(--renk-kenar); padding: var(--bosluk-3);
  display: flex; align-items: center; gap: var(--bosluk-3); }
.t-nav-foot .who { line-height: 1.2; flex: 1; min-width: 0; }
.t-nav-foot .who b { font-size: 12.5px; font-weight: 600; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-nav-foot .who span { font-size: 11px; color: var(--renk-metin-soluk); }

/* ── ANA / TOPBAR ────────────────────────────────────────────────────────── */
.t-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.t-topbar { height: 52px; border-bottom: 1px solid var(--renk-kenar); background: var(--renk-yuzey);
  display: flex; align-items: center; gap: 14px; padding: 0 var(--bosluk-5); flex: none; }
.t-crumbs { font-size: 13px; color: var(--renk-metin-soluk); }
.t-crumbs b { color: var(--renk-metin); font-weight: 600; }
.t-page { flex: 1; overflow: auto; padding: var(--bosluk-5); }
.t-phead { display: flex; align-items: center; gap: var(--bosluk-3); margin-bottom: var(--bosluk-4); }
.t-phead .pt { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.t-phead .pc { font-size: 13px; color: var(--renk-metin-soluk); }
.t-phead .pa { margin-left: auto; display: flex; gap: var(--bosluk-2); }

/* ── BUTON ───────────────────────────────────────────────────────────────── */
.t-btn { height: 36px; padding: 0 14px; border-radius: var(--kose-input);
  border: 1px solid var(--renk-kenar-koyu); background: var(--renk-yuzey);
  font-size: 13.5px; font-weight: 500; color: var(--renk-metin); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit;
  transition: background var(--gecis-hizli); }
.t-btn:hover { background: var(--renk-yuzey-alt); }
.t-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.t-btn.primary { background: var(--renk-ana-600); border-color: var(--renk-ana-600);
  color: var(--renk-metin-ters); font-weight: 600; }
.t-btn.primary:hover { background: var(--renk-ana-700); }
.t-btn.ghost { border-color: transparent; background: transparent; }
.t-btn.ghost:hover { background: var(--renk-yuzey-alt); }

/* ── SEG (görünüm anahtarı) ──────────────────────────────────────────────── */
.t-seg { display: inline-flex; border: 1px solid var(--renk-kenar-koyu);
  border-radius: var(--kose-input); overflow: hidden; height: 36px; }
.t-seg button { border: none; background: var(--renk-yuzey); padding: 0 12px; font-size: 13px;
  font-weight: 500; color: var(--renk-metin-ikincil); cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 6px; }
.t-seg button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.t-seg button.on { background: var(--renk-ana-50); color: var(--renk-ana-700); }
.t-seg button + button { border-left: 1px solid var(--renk-kenar); }

/* ── KPI (84px, soft ikon kutulu, sparkline YOK) ─────────────────────────── */
.t-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bosluk-3); margin-bottom: var(--bosluk-4); }
.t-kpi { height: 84px; background: var(--renk-yuzey); border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart); padding: var(--bosluk-4); box-shadow: var(--golge-sm);
  cursor: pointer; display: flex; gap: var(--bosluk-3);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli); }
.t-kpi:hover { border-color: var(--renk-kenar-koyu); box-shadow: var(--golge-md); }
.t-kpi .ki { width: 32px; height: 32px; border-radius: var(--kose-input); display: grid; place-items: center; flex: none; }
.t-kpi .ki svg { width: 17px; height: 17px; fill: none; stroke-width: 1.9; }
.t-kpi .kc { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.t-kpi .kl { font-size: 11.5px; font-weight: 600; color: var(--renk-metin-ikincil);
  text-transform: uppercase; letter-spacing: .02em; }
.t-kpi .kv { font-size: 24px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.t-kpi .ks { font-size: 12px; color: var(--renk-metin-soluk); }
.t-kpi .kv.red { color: var(--renk-riskli-metin); }
.t-kpi .kv.green { color: var(--renk-basari-metin); }
.t-kpi .kv.amber { color: var(--renk-bekliyor-metin); }
/* KPI ikon yumuşak zeminleri (renk anahtarı) */
.t-soft-blue { background: var(--renk-islemde-zemin); } .t-soft-blue svg { stroke: var(--renk-islemde); }
.t-soft-green { background: var(--renk-basari-zemin); } .t-soft-green svg { stroke: var(--renk-basari); }
.t-soft-amber { background: var(--renk-bekliyor-zemin); } .t-soft-amber svg { stroke: var(--renk-bekliyor); }
.t-soft-red { background: var(--renk-riskli-zemin); } .t-soft-red svg { stroke: var(--renk-riskli); }
.t-soft-orange { background: var(--renk-turuncu-zemin); } .t-soft-orange svg { stroke: var(--renk-turuncu); }
.t-soft-primary { background: var(--renk-ana-50); } .t-soft-primary svg { stroke: var(--renk-ana-600); }

/* ── TABLO ───────────────────────────────────────────────────────────────── */
.t-twrap { background: var(--renk-yuzey); border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart); box-shadow: var(--golge-sm); overflow: hidden; }
.t-fbar { height: 48px; display: flex; align-items: center; gap: var(--bosluk-2);
  padding: 0 var(--bosluk-3); border-bottom: 1px solid var(--renk-kenar); }
.t-fsearch { display: flex; align-items: center; gap: var(--bosluk-2); height: 34px; padding: 0 11px;
  border: 1px solid var(--renk-kenar); border-radius: var(--kose-input);
  background: var(--renk-yuzey-alt); min-width: 220px; }
.t-fsearch svg { width: 14px; height: 14px; stroke: var(--renk-metin-soluk); fill: none; stroke-width: 2; }
.t-fsearch input { border: none; background: none; outline: none; font-family: inherit;
  font-size: 13.5px; width: 100%; color: var(--renk-metin); }
.t-fchip { height: 34px; padding: 0 11px; border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-input); background: var(--renk-yuzey); font-size: 13px; font-weight: 500;
  color: var(--renk-metin-ikincil); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.t-fchip:hover { border-color: var(--renk-kenar-koyu); color: var(--renk-metin); }
.t-fchip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.t-fchip.on { background: var(--renk-ana-50); border-color: var(--renk-ana-200); color: var(--renk-ana-700); }
.t-fbar .sp { margin-left: auto; }

.t-tscroll { overflow: auto; max-height: calc(100vh - 320px); }
.t-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.t-table thead th { position: sticky; top: 0; z-index: 3; height: 44px; background: var(--renk-yuzey-alt);
  text-align: left; font-weight: 700; color: var(--renk-metin-ikincil); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; padding: 0 var(--bosluk-3); border-bottom: 1px solid var(--renk-kenar); white-space: nowrap; }
.t-table th.r, .t-table td.r { text-align: right; }
.t-table th.c, .t-table td.c { text-align: center; }
.t-table th.sc, .t-table td.sc { position: sticky; left: 0; z-index: 2; background: var(--renk-yuzey); }
.t-table thead th.sc { z-index: 4; background: var(--renk-yuzey-alt); }
.t-table th.chk, .t-table td.chk { width: 42px; text-align: center; padding: 0; }
.t-table tbody tr { cursor: pointer; height: 52px; }
.t-table tbody tr:hover td { background: var(--renk-yuzey-alt); }
.t-table tbody tr.sel td { background: var(--renk-ana-50); }
.t-table tbody td { padding: 0 var(--bosluk-3); border-bottom: 1px solid var(--renk-kenar-acik);
  color: var(--renk-metin); white-space: nowrap; vertical-align: middle; }
.t-cb { width: 16px; height: 16px; border: 1.5px solid var(--renk-kenar-koyu); border-radius: 5px;
  display: inline-block; cursor: pointer; vertical-align: middle; background: var(--renk-yuzey); }
.t-cb.on { background: var(--renk-ana-600); border-color: var(--renk-ana-600); position: relative; }
.t-cb.on::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid var(--renk-metin-ters); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.t-cmain { display: flex; flex-direction: column; gap: 1px; max-width: 230px; }
.t-cmain b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-cmain span { font-size: 12px; color: var(--renk-metin-soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #1b — tek satır başlık "ad / müşteri / marka": ayraç soluk, müşteri koyu, marka soluk. */
.t-baslik-ayrac { color: var(--renk-kenar); font-weight: 400; margin: 0 6px; }
.t-baslik-mus   { color: var(--renk-metin); font-weight: 500; }
.t-baslik-mrk   { color: var(--renk-metin-soluk); font-weight: 500; }
.t-money { font-variant-numeric: tabular-nums; font-weight: 600; }
.t-money.pos { color: var(--renk-basari-metin); }
.t-money.neg { color: var(--renk-riskli-metin); }
.t-dim { color: var(--renk-metin-soluk); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--renk-metin-soluk); }
.t-rowact { width: 28px; height: 28px; border-radius: var(--kose-kucuk); display: inline-grid;
  place-items: center; color: var(--renk-metin-soluk); opacity: 0; background: none; border: none; cursor: pointer; }
.t-table tbody tr:hover .t-rowact { opacity: 1; }
.t-rowact:hover { background: var(--renk-yuzey-hover); color: var(--renk-metin); }
.t-rowact svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── ROZET (durum) — TEK biçimlendirici JS (ds-format.badge); ham DB basılmaz ── */
.t-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: var(--kose-pill); font-size: 12px; font-weight: 600; line-height: 1; }
.t-badge .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.t-badge.b-gray { background: var(--renk-pasif-zemin); color: var(--renk-pasif-metin); }
.t-badge.b-green { background: var(--renk-basari-zemin); color: var(--renk-basari-metin); }
.t-badge.b-amber { background: var(--renk-bekliyor-zemin); color: var(--renk-bekliyor-metin); }
.t-badge.b-red { background: var(--renk-riskli-zemin); color: var(--renk-riskli-metin); }
.t-badge.b-blue { background: var(--renk-islemde-zemin); color: var(--renk-islemde-metin); }
.t-badge.b-purple { background: var(--renk-yayin-zemin); color: var(--renk-yayin-metin); }
.t-badge.b-orange { background: var(--renk-turuncu-zemin); color: var(--renk-turuncu-metin); }

/* ── İLERLEME (talent X/Y) ───────────────────────────────────────────────── */
.t-prog { display: inline-flex; gap: 3px; align-items: center; }
.t-prog i { width: 16px; height: 5px; border-radius: 3px; background: var(--renk-kenar-koyu); }
.t-prog i.on { background: var(--renk-ana-600); }
.t-prog .pt { font-size: 12px; color: var(--renk-metin-soluk); margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ── SAYFALAMA ───────────────────────────────────────────────────────────── */
.t-pag { height: 52px; display: flex; align-items: center; gap: var(--bosluk-2);
  padding: 0 var(--bosluk-4); border-top: 1px solid var(--renk-kenar); }
.t-pag .info { font-size: 12.5px; color: var(--renk-metin-soluk); }
.t-pag .pages { margin-left: auto; display: flex; gap: 4px; }
.t-pag .pg { min-width: 30px; height: 30px; border: 1px solid var(--renk-kenar); border-radius: var(--kose-kucuk);
  background: var(--renk-yuzey); font-size: 12.5px; display: grid; place-items: center; cursor: pointer;
  font-variant-numeric: tabular-nums; color: var(--renk-metin-ikincil); }
.t-pag .pg.on { background: var(--renk-ana-600); border-color: var(--renk-ana-600); color: var(--renk-metin-ters); font-weight: 600; }

/* ── PIPELINE (alternatif görünüm) ───────────────────────────────────────── */
.t-pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: var(--bosluk-3); overflow-x: auto; padding-bottom: var(--bosluk-2); }
.t-pcol { background: var(--renk-yuzey-alt); border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-kart); padding: var(--bosluk-3); min-height: 120px; }
.t-pcol-bas { display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--renk-metin-ikincil); margin-bottom: var(--bosluk-3); }
.t-pcol-bas .ct { font-size: 11px; color: var(--renk-metin-soluk); }
.t-pcard { background: var(--renk-yuzey); border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-input); padding: var(--bosluk-3); margin-bottom: var(--bosluk-2); cursor: pointer;
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli); }
.t-pcard:hover { border-color: var(--renk-kenar-koyu); box-shadow: var(--golge-sm); }
.t-pcard b { font-size: 13px; font-weight: 600; display: block; }
.t-pcard span { font-size: 11.5px; color: var(--renk-metin-soluk); }

/* ── DRAWER (460px, sekmeli) ─────────────────────────────────────────────── */
.t-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .28); opacity: 0;
  pointer-events: none; transition: opacity var(--gecis-normal); z-index: var(--z-modal); }
.t-scrim.open { opacity: 1; pointer-events: auto; }
.t-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 460px; background: var(--renk-yuzey);
  box-shadow: var(--golge-lg); transform: translateX(100%);
  transition: transform var(--gecis-normal) cubic-bezier(.4, 0, .2, 1); z-index: calc(var(--z-modal) + 1);
  display: flex; flex-direction: column; }
.t-drawer.open { transform: translateX(0); }
.t-dhead { padding: 20px var(--bosluk-5) 0; border-bottom: 1px solid var(--renk-kenar); }
.t-dhrow { display: flex; align-items: flex-start; gap: var(--bosluk-3); }
.t-dt { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.t-dsub { font-size: 13px; color: var(--renk-metin-soluk); margin-top: 3px; display: flex; align-items: center; gap: var(--bosluk-2); }
.t-dx { width: 32px; height: 32px; border: 1px solid var(--renk-kenar); border-radius: var(--kose-input);
  display: grid; place-items: center; cursor: pointer; background: var(--renk-yuzey); margin-left: auto; }
.t-dx:hover { background: var(--renk-yuzey-alt); }
.t-dx svg { width: 16px; height: 16px; stroke: var(--renk-metin-ikincil); fill: none; stroke-width: 1.8; }
.t-dtabs { display: flex; gap: 2px; margin-top: var(--bosluk-4); }
.t-dtab { padding: 9px 12px; font-size: 13px; font-weight: 500; color: var(--renk-metin-ikincil);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: none;
  border-left: none; border-right: none; font-family: inherit; }
.t-dtab:hover { color: var(--renk-metin); }
.t-dtab.on { color: var(--renk-ana-600); border-bottom-color: var(--renk-ana-600); font-weight: 600; }
.t-dbody { flex: 1; overflow: auto; padding: var(--bosluk-5); }
.t-sc-card { border: 1px solid var(--renk-kenar); border-radius: var(--kose-input);
  padding: var(--bosluk-4); margin-bottom: var(--bosluk-4); }
.t-sc-t { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--renk-metin-soluk); margin-bottom: var(--bosluk-3); }
.t-kv { display: flex; justify-content: space-between; padding: 7px 0;
  border-bottom: 1px solid var(--renk-kenar-acik); font-size: 13.5px; }
.t-kv:last-child { border-bottom: none; }
.t-kv .k { color: var(--renk-metin-ikincil); }
.t-kv .v { font-weight: 500; font-variant-numeric: tabular-nums; }
/* Aşama stepper (dual-eksen) */
.t-stepper { display: flex; align-items: center; margin-bottom: var(--bosluk-2); }
.t-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; position: relative; }
.t-step .sc2 { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; z-index: 2; }
.t-step .sl { font-size: 10px; color: var(--renk-metin-soluk); }
.t-step.done .sc2 { background: var(--renk-basari); color: var(--renk-metin-ters); }
.t-step.done .sl { color: var(--renk-metin-ikincil); }
.t-step.now .sc2 { background: var(--renk-bekliyor); color: var(--renk-metin-ters); }
.t-step.now .sl { color: var(--renk-metin); font-weight: 600; }
.t-step.todo .sc2 { background: var(--renk-yuzey); border: 1.5px solid var(--renk-kenar-koyu); color: var(--renk-metin-soluk); }
.t-step .bar { position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; z-index: 1; background: var(--renk-kenar-koyu); }
.t-step.done .bar { background: var(--renk-basari); }
.t-step:last-child .bar { display: none; }
.t-axis { display: flex; align-items: center; gap: var(--bosluk-3); padding: 9px 0; font-size: 13px;
  border-bottom: 1px solid var(--renk-kenar-acik); }
.t-axis:last-child { border-bottom: none; }
.t-axis .al { width: 80px; color: var(--renk-metin-soluk); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; }
.t-gate { display: flex; align-items: center; gap: 7px; color: var(--renk-metin-soluk); font-size: 12.5px; }
.t-gate svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Finans özeti */
.t-fin2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-3); margin-bottom: var(--bosluk-3); }
.t-fbox { border: 1px solid var(--renk-kenar); border-radius: var(--kose-input); padding: 12px 14px; }
.t-fbox .fl { font-size: 10.5px; color: var(--renk-metin-soluk); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.t-fbox .fv { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }
.t-fnet { display: flex; align-items: flex-end; justify-content: space-between; border: 1px solid var(--renk-kenar);
  border-radius: var(--kose-input); padding: var(--bosluk-4); background: var(--renk-yuzey-alt); }
.t-fnet .fl { font-size: 12.5px; color: var(--renk-metin-ikincil); font-weight: 500; }
.t-fnet .big { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--renk-basari-metin); letter-spacing: -.02em; }
.t-fnet .marj { font-size: 12px; color: var(--renk-metin-soluk); text-align: right; }

/* ── BOŞ / YÜKLENİYOR / HATA ─────────────────────────────────────────────── */
.t-bos { padding: 48px var(--bosluk-5); text-align: center; color: var(--renk-metin-soluk); font-size: 13.5px; }
.t-bos .ico { font-size: 28px; margin-bottom: var(--bosluk-2); opacity: .6; }
.t-retry { margin-top: var(--bosluk-3); }