/* Castintech dashboard styles — extracted from dashboard.html in Faz 9b PR2.
   Tek <style> bloku tek dosyaya tasindi; HTML link rel=stylesheet ile bagli.
   Aşama D1 (2026-05-24): prefers-reduced-motion global + sr-only utility + focus-visible patch. */

/* ── A11y: prefers-reduced-motion (WCAG 2.3.3) ──
   Vestibüler hassas kullanıcılar için tüm animation/transition durdurulur.
   Anti-slop checklist § Motion: "prefers-reduced-motion saygısı var (animasyonlar bypass)".
   Kullanıcı OS-level "Reduce motion" ayarıyla tetikler.
   Aşama D1 öncesi: dashboard'da 69 transition/keyframes vardı, 0 reduced-motion saygısı. */
@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;
  }
}

/* ── A11y: sr-only utility (screen reader only) ──
   Görsel olarak gizli ama screen reader tarafından okunur. Form label,
   landmark açıklamaları için. WCAG 1.3.1 + 4.1.2. */
.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;
}

/* ── A11y: focus-visible — sadece klavye fokusunda görünür halka ──
   Mouse click'te outline yok (UX bozmaz), Tab navigation'da outline 2px.
   Aşama D1: tüm interaktif element için tutarlı focus pattern. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--indigo, #6366f1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #05050f;
  --surface:  #09091a;
  --card:     #0d0d20;
  --card2:    #111126;
  --border:   #16163a;
  --border2:  #1f1f45;
  --text:     #e2e4f0;
  --text2:    #8b8fad;
  --muted:    #4a4e6e;
  --radius:   12px;
  --radius-sm:8px;
  --indigo:   #3b82f6;  /* mor-yasağı: #6366f1 (indigo, mor-tonu) → #3b82f6 (saf mavi). Tek değişiklik tüm UI aksanlarını de-mor'lar. */
  /* --violet kaldırıldı (Aşama I3 dogfood: anti-slop mor yasağı + 0 kullanım/ölü token) */
  --green:    #22c55e;
  --amber:    #f59e0b;
  --red:      #ef4444;
  --cyan:     #22d3ee;
  /* ── Gem paleti — Castdesign dogfood üretimi (kanonik kaynak: css/cockpit-tokens.generated.css, I3)
     Mor YOK (anti-slop). Yeni component'ler bu gem-* token'larını kullanmalı. ── */
  --gem-emerald:  #34d399;
  --gem-amber:    #fbbf24;
  --gem-ruby:     #f87171;
  --gem-sapphire: #60a5fa;
  --gem-topaz:    #f59e0b;
  --gem-teal:     #2dd4bf;
  --sidebar-w:220px;
  --topbar-h: 56px;
  --strip-h:  80px;
}
body {
  background: var(--bg); font-family: 'Inter', sans-serif; color: var(--text);
  height: 100vh; display: flex; overflow: hidden; font-size: 14px;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
button { font-family: inherit; cursor: pointer; }

/* ── Gem definitions ──
   Aşama A skill matrix 24 → 33 ajan genişlemesi (Sentinel, Maestro, GM'ler,
   Quill, Iris, SiteWatchdog, Veneer eklendi). Aşama D6 (2026-05-24):
   eksik ajanlar için gem-color paleti eklendi — dashboard sidebar + gem
   rozetleri tutarlı renk dönüşü için.
   Pattern: --g1 (koyu) → --g2 (orta) → --gc (parlak aksent) */

/* Mevcut 10 gem (Aşama A öncesi — DOKUNULMADI) */
.gem-atlas    { --g1:#4c1d95; --g2:#7c3aed; --gc:#a78bfa; }
.gem-topaz    { --g1:#78350f; --g2:#d97706; --gc:#fbbf24; }
.gem-opal     { --g1:#831843; --g2:#db2777; --gc:#f472b6; }
.gem-jade     { --g1:#064e3b; --g2:#059669; --gc:#34d399; }
.gem-garnet   { --g1:#4c0519; --g2:#9f1239; --gc:#fb7185; }
.gem-ruby     { --g1:#7f1d1d; --g2:#dc2626; --gc:#f87171; }
.gem-pearl    { --g1:#1e293b; --g2:#475569; --gc:#94a3b8; }
.gem-sapphire { --g1:#1e3a8a; --g2:#1d4ed8; --gc:#60a5fa; }
.gem-crystal  { --g1:#164e63; --g2:#0891b2; --gc:#22d3ee; }
.gem-zircon   { --g1:#134e4a; --g2:#0d9488; --gc:#2dd4bf; }

/* Aşama D6 (2026-05-24) — Yeni eklenen 15 ajan paleti */
/* Yönetim Kurulu — Castintech GM + Eko-sistem CTOO (akıcı, sorumluluk taşır) */
.gem-sentinel    { --g1:#1c1917; --g2:#44403c; --gc:#a8a29e; }  /* taş, sağlam, GM */
.gem-maestro     { --g1:#155e75; --g2:#0e7490; --gc:#67e8f9; }  /* beryl/aqua, CTOO */
.gem-cpo         { --g1:#3730a3; --g2:#4338ca; --gc:#818cf8; }  /* indigo, product chief */

/* Aşama G G3 (2026-05-29, BD-2026-05-28-002) — efqm-gm CQO yeni ajan */
.gem-efqm-gm     { --g1:#0f5132; --g2:#198754; --gc:#A8E6CF; }  /* mint-quartz, kalite/güven */

/* Ürün GM'leri — her ürün kendi gem tonu (parent product ile uyumlu) */
.gem-castmart-gm    { --g1:#7c2d12; --g2:#c2410c; --gc:#fb923c; }  /* castmart turuncu */
.gem-castmart-lead  { --g1:#9a3412; --g2:#ea580c; --gc:#fdba74; }
.gem-castacc-gm     { --g1:#365314; --g2:#65a30d; --gc:#a3e635; }  /* castacc lime */
.gem-castacc-lead   { --g1:#3f6212; --g2:#84cc16; --gc:#bef264; }
.gem-iq7s-gm        { --g1:#581c87; --g2:#9333ea; --gc:#c084fc; }  /* iq7s violet */
.gem-iq7s-lead      { --g1:#6b21a8; --g2:#a855f7; --gc:#d8b4fe; }

/* Faz 48 Design DNA ajanları — kreatif palet (Quill copy, Iris sosyal) */
.gem-quill   { --g1:#1e40af; --g2:#3b82f6; --gc:#93c5fd; }  /* blue, copy/voice */
.gem-iris    { --g1:#a21caf; --g2:#c026d3; --gc:#e879f9; }  /* fuchsia, sosyal medya */

/* Sistem ajanlar (havuz uzmanı, watchdog kardeş) */
.gem-sitewatchdog { --g1:#365314; --g2:#65a30d; --gc:#a3e635; }  /* lime, izleyici */
.gem-veneer  { --g1:#52525b; --g2:#71717a; --gc:#d4d4d8; }  /* slate, polish */

/* WebDev klonları — müşteri/ürün'e ait (gem-pearl pattern paralel — koyu/nötr) */
.gem-alvesyn-web      { --g1:#1f2937; --g2:#374151; --gc:#9ca3af; }
.gem-castintech-web   { --g1:#0c4a6e; --g2:#0369a1; --gc:#7dd3fc; }
.gem-mewacraft-web    { --g1:#451a03; --g2:#92400e; --gc:#fcd34d; }
.gem-castmart-web-1   { --g1:#7c2d12; --g2:#9a3412; --gc:#fdba74; }
.gem-castmart-web-2   { --g1:#7c2d12; --g2:#9a3412; --gc:#fdba74; }
.gem-iq7s-web         { --g1:#581c87; --g2:#7e22ce; --gc:#d8b4fe; }

/* Support klonları (Pearl pattern paralel — nötr, müşteri-yüz) */
.gem-castmart-support { --g1:#1e293b; --g2:#334155; --gc:#94a3b8; }
.gem-castacc-support  { --g1:#1e293b; --g2:#334155; --gc:#94a3b8; }
.gem-iq7s-support     { --g1:#1e293b; --g2:#334155; --gc:#94a3b8; }

/* Default fallback — gem tanımı olmayan ajan için (eski 'unknown' yerine) */
.gem-default { --g1:#1e293b; --g2:#475569; --gc:#94a3b8; }

/* ── Aşama D5 (2026-05-24) — State Display Components ──
   30+ view için tutarlı skeleton / empty / error / loading pattern.
   js/ui/state-display.ts ile birlikte kullanılır. */

/* Skeleton — shimmer placeholder */
.ds-skeleton-wrapper { width: 100%; }
.ds-skeleton {
  background: linear-gradient(90deg,
    var(--card, #0d0d20) 0%,
    var(--card2, #111126) 50%,
    var(--card, #0d0d20) 100%);
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.4s linear infinite;
}
@keyframes ds-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state — boş veri */
.ds-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 24px; gap: 12px;
  color: var(--text2); text-align: center;
}
.ds-empty-icon { font-size: 48px; opacity: 0.6; }
.ds-empty-title { font-size: 16px; font-weight: 600; color: var(--text); }
.ds-empty-desc  { font-size: 13px; max-width: 480px; line-height: 1.5; }
.ds-empty-cta {
  margin-top: 8px; padding: 8px 16px; border-radius: 8px;
  background: var(--indigo); color: #fff; border: 0; font-size: 13px;
  font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.ds-empty-cta:hover { background: #4f46e5; }

/* Error state — hata */
.ds-error {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 32px 24px; gap: 10px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius); text-align: center;
}
.ds-error-icon { font-size: 36px; }
.ds-error-title { font-size: 15px; font-weight: 600; color: var(--red); }
.ds-error-desc {
  font-size: 12px; color: var(--text2); max-width: 480px;
  line-height: 1.5; font-family: 'JetBrains Mono', monospace;
}
.ds-error-retry {
  margin-top: 6px; padding: 6px 14px; border-radius: 6px;
  background: transparent; color: var(--red); border: 1px solid var(--red);
  font-size: 12px; cursor: pointer; transition: background 0.15s;
}
.ds-error-retry:hover { background: rgba(239, 68, 68, 0.1); }

/* Loading state — yükleniyor */
.ds-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 24px; gap: 10px; color: var(--text2); font-size: 13px;
}
.ds-loading.ds-loading-inline {
  display: inline-flex; padding: 0 8px; vertical-align: middle;
}
.ds-loading-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border2); border-top-color: var(--indigo);
  animation: spin 0.6s linear infinite;
  display: inline-block;
}
.ds-loading-text { font-weight: 500; }

/* ── Aşama D4 (2026-05-24) — Inline style temizliği utility class'ları ──
   dashboard.html'de en yaygın 3 inline pattern (21 instance) tekrar tekrar
   yazılıyordu. CSS class'a taşındı: bakım kolaylığı + tutarlılık. */

/* Display utilities */
.u-hidden { display: none !important; }

/* Action group — flex row 8px gap */
.action-group {
  display: flex; gap: 8px; align-items: center;
}

/* Button icon + text combo (topbar/header'da yaygın) */
.btn-icon-text {
  font-size: 12px; width: auto; padding: 0 10px;
  display: flex; align-items: center; gap: 4px;
}

/* ── App Layout ── */
.app { display: flex; width: 100vw; height: 100vh; overflow: hidden; }

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overflow-x: hidden;
  position: relative; z-index: 10;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.logo {
  padding: 18px 16px 14px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
/* Aşama D3 (2026-05-24) — Logo rengi: mor gradient → yeşil/cyan/mavi
   Yılmaz yeni Castintech logosu paleti (mint #34d399 → cyan #06b6d4 → blue #1d4ed8).
   Anti-slop checklist § Renk Yasakları ihlali kapatıldı (mor gradient yok). */
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #34d399 0%, #06b6d4 50%, #1d4ed8 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
}
/* Logo SVG (inline) — 3 stilize harf (C-I-T) Castintech kimliği */
.logo-mark svg { width: 100%; height: 100%; display: block; }
/* Fallback metin (SVG yoksa veya broken) */
.logo-mark > span.logo-fallback {
  font-weight: 800; font-size: 13px; color: #fff; letter-spacing: -0.5px;
}
.logo-text { font-size: 13px; font-weight: 700; letter-spacing: -.3px; }
.logo-sub  { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* Aşama F (2026-05-25) — Sidebar accordion grupları */
.sb-group { border: none; outline: none; margin: 0; padding: 0; }
.sb-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 10px 4px; font-size: 9px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .12em;
  list-style: none; cursor: pointer; user-select: none;
  transition: color .15s;
}
.sb-group-header::-webkit-details-marker { display: none; }
.sb-group-header::after { content: '▾'; margin-left: auto; font-size: 10px; transition: transform .2s; }
.sb-group:not([open]) .sb-group-header::after { transform: rotate(-90deg); }
.sb-group-header:hover { color: var(--text2); }
.sb-group-items { overflow: hidden; }
.sb-group:not([open]) .sb-group-items { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sb-group-header::after { transition: none; }
}

.sb-section { padding: 14px 10px 4px; font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.sb-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  margin: 1px 6px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text2);
  cursor: pointer; transition: all .15s; user-select: none; position: relative;
  /* Buton reset — native gri bg + siyah border kaldırıldı (mockup: düz öğe, şeffaf). */
  background: transparent; border: none; appearance: none; -webkit-appearance: none;
  width: calc(100% - 12px); text-align: left; font-family: inherit; box-sizing: border-box;
}
.sb-item:hover { background: color-mix(in srgb, var(--gem-emerald, #34d399) 9%, transparent); color: var(--text); }
/* Mockup: aktif menü yeşil pill (eski mor #93c5fd/#0e1d3d + --indigo kaldırıldı — mor-yasağı + mockup uyumu). */
.sb-item.active { background: color-mix(in srgb, var(--gem-emerald, #34d399) 16%, transparent); color: var(--gem-emerald, #34d399); font-weight: 600; }
.sb-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--gem-emerald, #34d399); border-radius: 0 3px 3px 0; }
.sb-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.sb-badge { margin-left: auto; background: var(--gem-sapphire, #60a5fa); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; min-width: 18px; text-align: center; }
.sb-badge.amber { background: var(--amber); color: #000; }

.sb-company-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid transparent;
}
.sb-company-dot.active { border-color: var(--gem-emerald, #34d399); background: var(--gem-emerald, #34d399); box-shadow: 0 0 6px var(--gem-emerald, #34d399); }
.sb-company-dot.inactive { background: var(--muted); }

.sidebar-footer { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--border); }
.refresh-info { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.refresh-ring {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--border2);
  border-top-color: var(--indigo); animation: spin 1s linear infinite;
  display: none;
}
.refresh-ring.spinning { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.countdown-arc {
  width: 16px; height: 16px; flex-shrink: 0;
}

/* ── Workspace ── */
.workspace {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}

/* ── Topbar ── */
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; gap: 12px;
  padding: 0 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0; animation: pulse-green 2s ease-out infinite; }
.live-label { font-size: 11px; color: var(--text2); white-space: nowrap; }

.ticker-wrap { flex: 1; overflow: hidden; min-width: 0; }
.ticker {
  display: flex; gap: 32px; white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  font-size: 11px; color: var(--text2);
}
.ticker:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 6px; }
.ticker-item .ti-gem { font-size: 9px; font-weight: 800; font-style: italic; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.topbar-clock { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border2);
  background: var(--card); color: var(--text2); display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .15s;
}
.btn-icon:hover { color: var(--text); border-color: var(--gem-emerald, #34d399); }

/* ── Topbar arama (mockup: Ara Cmd+K) ── */
.topbar-search {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 12px; color: var(--muted); transition: border-color .15s;
}
.topbar-search:focus-within { border-color: var(--gem-sapphire, #60a5fa); }
.topbar-search .ts-icon { font-size: 13px; opacity: .7; }
.topbar-search .ts-input {
  flex: 1; border: none; background: transparent; outline: none;
  color: var(--text); font-size: 13px; font-family: inherit; min-width: 0;
}
.topbar-search .ts-input::placeholder { color: var(--muted); }

/* ── Topbar kullanıcı bloğu (mockup: avatar + ad/rol) ── */
.topbar-user { display: flex; align-items: center; gap: 9px; padding-left: 6px; margin-left: 2px; cursor: default; }
.topbar-user .tu-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--gem-emerald, #34d399), var(--gem-sapphire, #2563eb));
}
.topbar-user .tu-name { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.1; white-space: nowrap; }
.topbar-user .tu-role { font-size: 11px; color: var(--muted); line-height: 1.1; }
@media (max-width: 900px) { .topbar-user .tu-meta, .topbar-search { display: none; } }

/* ── Agent Strip ── */
.agent-strip {
  height: var(--strip-h); display: flex; align-items: center; gap: 0;
  padding: 0 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0; overflow-x: auto;
}
.agent-strip::-webkit-scrollbar { height: 0; }
.agent-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-radius: 10px; cursor: pointer; transition: all .2s;
  flex-shrink: 0; position: relative; border: 1px solid transparent;
}
.agent-chip:hover { background: var(--card); border-color: var(--border); }
.agent-chip.active-filter { background: #0e1d3d; border-color: var(--indigo); }
.agent-chip.has-task { border-color: var(--border); }

.chip-avatar {
  width: 40px; height: 40px; border-radius: 11px; position: relative; flex-shrink: 0;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow .3s;
}
.chip-avatar-bg { position: absolute; inset: 0; border-radius: 11px; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.chip-avatar-shine { position: absolute; inset: 0; border-radius: 11px; background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 55%); pointer-events: none; }
.chip-letter { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
/* Karakter yüzü — avatar karesini doldurur (Ekip ile aynı asset: /characters/face/<slug>.png) */
.chip-face { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 11px; }
.chip-badge { position: absolute; bottom: -3px; right: -3px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: #05050f; border: 1.5px solid #1f1f45; display: flex; align-items: center; justify-content: center; font-size: 8px; }
.chip-status { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); }

.chip-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chip-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.chip-role { font-size: 10px; color: var(--muted); white-space: nowrap; }
.chip-task { font-size: 10px; color: var(--gc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }

.chip-separator { width: 1px; height: 40px; background: var(--border); margin: 0 4px; flex-shrink: 0; }

/* ── Content ── */
.content-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.view { display: none; flex: 1; overflow-y: auto; padding: 20px; min-height: 0; }
.view.active { display: flex; flex-direction: column; }

/* ── Kanban ── */
.kanban-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-shrink: 0; }
.kanban-title { font-size: 15px; font-weight: 600; }
.btn-new-issue {
  display: flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--indigo);
  background: transparent; color: #93c5fd; font-size: 12px; font-weight: 500;
  transition: all .15s;
}
.btn-new-issue:hover { background: var(--indigo); color: #fff; }

.kanban-board {
  display: flex; gap: 12px; flex: 1; min-height: 0; overflow-x: auto; padding-bottom: 8px;
}
.kanban-col {
  display: flex; flex-direction: column; min-width: 220px; width: 220px; flex-shrink: 0;
}
.kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--card); border: 1px solid var(--border); border-bottom: none;
  margin-bottom: -1px; position: relative; z-index: 1;
}
.kanban-col-head-left { display: flex; align-items: center; gap: 8px; }
.col-dot { width: 8px; height: 8px; border-radius: 50%; }
.col-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); }
/* W2 — sayı görünürlüğü: muted yerine kontrastlı metin + dolgu. */
.col-count { font-size: 11px; font-weight: 700; color: var(--text); background: var(--border2); padding: 1px 8px; border-radius: 99px; min-width: 18px; text-align: center; }

.col-dot-backlog  { background: var(--muted); }
.col-dot-todo     { background: #60a5fa; }
.col-dot-progress { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse-green 2s ease-out infinite; }
.col-dot-blocked  { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
/* W2 — Done artık todo'dan FARKLI (eskiden ikisi de #60a5fa idi): solid yeşil = tamamlandı. */
.col-dot-done     { background: #22c55e; }

.kanban-cards {
  flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  padding: 10px 8px; background: var(--card2); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-height: 120px;
}
.kanban-empty { color: var(--muted); font-size: 11px; text-align: center; padding: 24px 0; }

.issue-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; cursor: pointer; transition: all .2s; position: relative;
  animation: card-enter .3s ease-out both;
  border-left: 3px solid var(--border);
}
.issue-card:hover { border-color: var(--border2); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
/* W2 — klavye erişilebilirliği: belirgin focus halkası (tabindex pano.ts'te). */
.issue-card:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.issue-card.priority-high { border-left-color: var(--red); }
.issue-card.priority-medium { border-left-color: var(--amber); }
.issue-card.priority-low { border-left-color: #60a5fa; }
/* W2 — açık detay kartı daha belirgin: sol-kenar indigo + iç gölge halkası. */
.issue-card.active-detail { border-color: var(--indigo); border-left-color: var(--indigo); background: #0e1d3d; box-shadow: inset 0 0 0 1px var(--indigo); }
@keyframes card-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.ic-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.ic-id { font-size: 10px; color: var(--muted); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.ic-title { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.4; flex: 1; }
.ic-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ic-agent { display: flex; align-items: center; gap: 5px; }
.ic-agent-av {
  width: 18px; height: 18px; border-radius: 5px; position: relative; flex-shrink: 0;
}
.ic-agent-av-bg { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.ic-agent-av-letter { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 8px; font-weight: 900; font-style: italic; color: #fff; }
.ic-agent-name { font-size: 10px; color: var(--text2); }
.ic-time { font-size: 10px; color: var(--muted); }
/* Faz 48.C — Hotfix transition timeline (state machine görsel). */
.hotfix-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 10px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
}
.hotfix-timeline .ht-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  min-width: 75px;
  text-align: center;
}
.hotfix-timeline .ht-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  margin-bottom: 4px;
  border: 2px solid var(--surface);
}
.hotfix-timeline .ht-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  line-height: 1.2;
}
.hotfix-timeline .ht-time {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}
.hotfix-timeline .ht-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--border);
  margin-top: 5px;
  min-width: 24px;
}
.hotfix-timeline .ht-done .ht-dot { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.hotfix-timeline .ht-line.ht-done { background: #22c55e; opacity: .6; }
.hotfix-timeline .ht-active .ht-dot { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; animation: pulse-active 1.5s infinite; }
.hotfix-timeline .ht-active .ht-lbl { color: #fbbf24; }
.hotfix-timeline .ht-ok .ht-dot { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.hotfix-timeline .ht-ok .ht-lbl { color: #22c55e; }
.hotfix-timeline .ht-err .ht-dot { background: #ef4444; }
.hotfix-timeline .ht-err .ht-lbl { color: #fca5a5; }
.hotfix-timeline .ht-pending-future .ht-dot { background: var(--border); opacity: .5; }
.hotfix-timeline .ht-pending-future .ht-lbl { color: var(--muted); opacity: .6; }
.hotfix-timeline .ht-line.ht-pending-future { background: var(--border); opacity: .3; }
@keyframes pulse-active {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Faz 48.A — Pano virtualization sentinel (büyük kolonlar için lazy load). */
.kanban-virt-sentinel {
  margin-top: 8px;
  padding: 10px 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  cursor: default;
}

/* Faz 47.2 S2.A — Blocked card inline reason snippet (son comment, max 80ch). */
.ic-block-reason {
  margin-top: 6px;
  padding: 5px 7px;
  font-size: 11px; /* W2 — 10→11px okunabilirlik */
  color: #fecaca; /* W2 — daha yüksek kontrast */
  background: rgba(239, 68, 68, .1);
  border-left: 2px solid #ef4444;
  border-radius: 3px;
  line-height: 1.4;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* W2 — 2→3 satır, sebep daha çok görünür */
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: help; /* W2 — tooltip (title) ipucu */
}

/* ── Detail Panel ── */
.detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 95vw;
  background: var(--surface); border-left: 1px solid var(--border);
  z-index: 100; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.detail-panel.open { transform: translateX(0); }
.detail-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .3s;
  backdrop-filter: blur(2px);
}
.detail-overlay.visible { opacity: 1; pointer-events: all; }

.dp-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.dp-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-id { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.dp-close { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border2); background: var(--card); color: var(--text2); font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.dp-close:hover { color: var(--text); border-color: var(--indigo); }
.dp-title { font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
.dp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600;
}
.sb-todo     { background: #0c1e3c55; color: #60a5fa; border: 1px solid #1d4ed833; }
.sb-in_progress { background: #052e1633; color: #4ade80; border: 1px solid #16a34a22; }
.sb-blocked  { background: #2d1a0055; color: #fbbf24; border: 1px solid #92400e33; }
/* W2 — Done badge artık todo'dan farklı (eskiden ikisi de mavi #60a5fa): yeşil = tamamlandı. */
.sb-done     { background: #052e1633; color: #22c55e; border: 1px solid #16653433; }
.sb-backlog  { background: #0f0f2055; color: var(--muted); border: 1px solid var(--border); }

.priority-badge { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.pb-high   { background: #2d000055; color: #f87171; border: 1px solid #7f1d1d33; }
.pb-medium { background: #2d1a0055; color: #fbbf24; border: 1px solid #92400e33; }
.pb-low    { background: #0c1e3c55; color: #60a5fa; border: 1px solid #1d4ed833; }

.dp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.dp-tab {
  flex: 1; padding: 10px 8px; font-size: 12px; font-weight: 500; color: var(--text2);
  border: none; background: transparent; transition: all .15s;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.dp-tab.active { color: var(--indigo); border-bottom-color: var(--indigo); }
.dp-tab:hover:not(.active) { color: var(--text); }

.dp-body { flex: 1; overflow-y: auto; }
.dp-tab-content { display: none; padding: 16px 20px; }
.dp-tab-content.active { display: block; }

.dp-desc { font-size: 13px; color: var(--text2); line-height: 1.6; }
.dp-section-title { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; margin-top: 16px; }
.dp-section-title:first-child { margin-top: 0; }

.comment-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comment-agent { font-size: 11px; font-weight: 600; color: var(--gc, var(--text2)); }
.comment-time { font-size: 10px; color: var(--muted); }
.comment-body { font-size: 12px; color: var(--text2); line-height: 1.5; white-space: pre-wrap; }

/* Faz 3 — yorum yazma formu */
.dp-comment-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.dp-comment-form .form-textarea { min-height: 70px; max-height: 200px; font-size: 13px; }
.dp-comment-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 12px; }
.dp-comment-chars { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.dp-comment-chars.over { color: var(--red, #ef4444); }
.dp-comment-form .btn-primary { padding: 6px 16px; font-size: 12px; }

.log-viewer {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #a0a8c0;
  max-height: 400px; overflow-y: auto; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}
.log-tool { color: #60a5fa; }
.log-result { color: #a0a8c0; }
.log-text { color: var(--text); }
.log-done { color: var(--green); }
.log-loading { color: var(--muted); text-align: center; padding: 20px; }

/* ── Live View ── */
.live-view { display: flex; flex-direction: column; gap: 8px; }
.activity-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; transition: border-color .15s;
  animation: card-enter .3s ease-out both;
}
.activity-item:hover { border-color: var(--border2); }
.ai-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.ai-body { flex: 1; min-width: 0; }
.ai-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.ai-meta { font-size: 11px; color: var(--text2); }
.ai-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* ── Approvals ── */
.approval-list { display: flex; flex-direction: column; gap: 12px; }
.approval-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; animation: card-enter .3s ease-out both;
  border-left: 3px solid var(--amber);
}
.ap-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ap-meta { display: flex; flex-direction: column; gap: 4px; }
.ap-type { font-size: 10px; color: var(--amber); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ap-title { font-size: 14px; font-weight: 600; }
.ap-detail { font-size: 12px; color: var(--text2); line-height: 1.5; margin-bottom: 14px; }
.ap-actions { display: flex; gap: 8px; }
.btn-approve {
  padding: 7px 16px; border-radius: var(--radius-sm); border: 1px solid var(--green);
  background: transparent; color: var(--green); font-size: 12px; font-weight: 600;
  transition: all .15s;
}
.btn-approve:hover { background: var(--green); color: #000; }
.btn-reject {
  padding: 7px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border2);
  background: transparent; color: var(--text2); font-size: 12px; font-weight: 600;
  transition: all .15s;
}
.btn-reject:hover { border-color: var(--red); color: var(--red); }

/* ── Suggestions ── */
.suggestions-panel {
  margin: 0 20px 16px;
  flex-shrink: 0;
}
.sg-title { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.sg-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.sg-list::-webkit-scrollbar { height: 0; }
.sg-item {
  display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; min-width: 240px; max-width: 280px;
  animation: sg-enter .4s ease-out both; cursor: default;
  transition: border-color .15s;
}
.sg-item:hover { border-color: var(--border2); }
.sg-item.urgent { border-left: 3px solid var(--amber); }
.sg-item.info   { border-left: 3px solid var(--indigo); }
.sg-item.good   { border-left: 3px solid var(--green); }
.sg-emoji { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
.sg-body { flex: 1; }
.sg-text { font-size: 12px; color: var(--text); line-height: 1.4; }
.sg-sub  { font-size: 10px; color: var(--muted); margin-top: 3px; }
@keyframes sg-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Ekip takım animasyonu (Remotion team.mp4) ── */
.ekip-team-hero {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-bottom: 16px;
  overflow: hidden;
  flex: none;        /* #view-ekip flex column içinde çökmesin (stats-row gibi) */
  flex-shrink: 0;
}
.ekip-team-hero .eth-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.ekip-team-hero .eth-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.ekip-team-hero .eth-sub { font-size: 12px; color: var(--text2); }
.ekip-team-hero .eth-video {
  display: block;
  width: 100%;
  max-height: 420px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) {
  .ekip-team-hero .eth-video { /* kullanıcı autoplay durdurabilir, controls var */ }
}

/* ── Stats bar ── */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; flex-shrink: 0; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.stat-value { font-size: 24px; font-weight: 700; line-height: 1; }
.stat-delta { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* ── Animations ── */
@keyframes pulse-green { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 10px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
@keyframes pulse-amber { 0%{box-shadow:0 0 0 0 rgba(245,158,11,.5)} 70%{box-shadow:0 0 0 10px rgba(245,158,11,0)} 100%{box-shadow:0 0 0 0 rgba(245,158,11,0)} }
@keyframes glow-in { from { box-shadow: 0 0 0 0 transparent; } to { box-shadow: 0 0 24px color-mix(in srgb, var(--gc) 40%, transparent); } }

.pulse-active .chip-avatar { animation: pulse-green 2s ease-out infinite; }
.pulse-busy   .chip-avatar { animation: pulse-amber 2s ease-out infinite; }

/* ── Agent card (Ekip view) ── */
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.agent-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; cursor: pointer; transition: all .2s; position: relative; overflow: hidden;
  animation: card-enter .3s ease-out both;
}
.agent-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, var(--g1) 0%, transparent 65%); opacity: .2; pointer-events: none; }
.agent-card:hover { border-color: var(--gc); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.agent-card:hover::before { opacity: .35; }

.ac-avatar { width: 64px; height: 64px; border-radius: 16px; position: relative; flex-shrink: 0; margin-bottom: 12px; box-shadow: 0 0 20px color-mix(in srgb, var(--gc) 20%, transparent); }
.ac-avatar-bg { position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.ac-avatar-shine { position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 55%); pointer-events: none; }
.ac-hero-letter { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 28px; font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.ac-hero-badge { position: absolute; bottom: -4px; right: -4px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: #05050f; border: 2px solid #1f1f45; display: flex; align-items: center; justify-content: center; font-size: 10px; }

.ac-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.ac-role { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.ac-model {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid; margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.fallback-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px;
  margin-bottom: 16px;
}
.fallback-card .fc-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fallback-card .fc-title { font-size: 13px; font-weight: 600; color: var(--text); }
.fallback-card .fc-sub { font-size: 11px; color: var(--muted); }
.fallback-card .fc-tiers { display: flex; gap: 12px; flex-wrap: wrap; }
.fallback-card .fc-tier {
  flex: 1 1 auto; min-width: 120px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card2, rgba(255,255,255,0.02));
}
.fallback-card .fc-tier-name { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.fallback-card .fc-tier-val { font-size: 18px; font-weight: 700; margin-top: 2px; }

.accounts-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 16px;
}
.accounts-card .ac-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.accounts-card .ac-title { font-size: 13px; font-weight: 600; color: var(--text); }
.accounts-card .ac-sub { font-size: 11px; color: var(--muted); }
.accounts-list { display: flex; flex-direction: column; gap: 6px; }
.acct-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--card2, rgba(255,255,255,0.02));
  border: 1px solid var(--border);
}
.acct-row.active { border-color: #6366f1; background: #6366f111; }
.acct-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acct-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.acct-meta { font-size: 10px; color: var(--muted); }
.acct-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.acct-badge { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.acct-badge.ok      { background: #16a34a22; color: #4ade80; border: 1px solid #16a34a44; }
.acct-badge.soon    { background: #f59e0b22; color: #fbbf24; border: 1px solid #f59e0b44; }
.acct-badge.expired { background: #ef444422; color: #f87171; border: 1px solid #ef444444; }
.acct-badge.unknown { background: #6b728022; color: #94a3b8; border: 1px solid #6b728044; }
.acct-active-pill   { background: #6366f122; color: #a5b4fc; border: 1px solid #6366f144; font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.acct-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12px; }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 12px; cursor: pointer;
  font-size: 12px; font-weight: 500; transition: all .15s;
}
.btn-ghost:hover { background: var(--card2, rgba(255,255,255,0.04)); border-color: var(--indigo); }
.ac-status { display: flex; align-items: center; justify-content: space-between; }
.ac-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.pill-active  { background: #052e1633; color: #4ade80; border: 1px solid #16a34a22; }
.pill-idle    { background: #0f172a55; color: var(--muted); border: 1px solid var(--border); }
.pill-busy    { background: #431a0533; color: #fbbf24; border: 1px solid #92400e22; }
.pill-error   { background: #450a0a33; color: #f87171; border: 1px solid #7f1d1d22; }
.ac-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill-active .dot { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.pill-idle .dot   { background: var(--muted); }
.pill-busy .dot   { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.ac-task { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
/* Faz 47.2 S3.A — Error agent inline hint (last_error / son task). */
.ac-error-hint {
  margin-top: 6px;
  padding: 4px 6px;
  font-size: 10px;
  color: #fca5a5;
  background: rgba(239, 68, 68, .08);
  border-left: 2px solid #ef4444;
  border-radius: 3px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-task-count { position: absolute; top: 12px; right: 12px; background: var(--g2); color: #fff; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ── Empty & Loading ── */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; text-align: center; }
.empty-icon { font-size: 36px; opacity: .4; }
.empty-title { font-size: 14px; font-weight: 600; color: var(--text2); }
.empty-sub { font-size: 12px; color: var(--muted); max-width: 200px; line-height: 1.5; }

.global-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 13px; gap: 10px; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  backdrop-filter: blur(4px);
}
.modal-overlay.visible { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 16px;
  padding: 24px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
  transform: translateY(16px); transition: transform .2s;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.modal-overlay.visible .modal { transform: translateY(0); }
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.modal-close { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border2); background: var(--card); color: var(--text2); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.modal-close:hover { color: var(--text); border-color: var(--indigo); }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px;
  transition: border-color .15s; outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--indigo); }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.form-select option { background: var(--card); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-primary {
  width: 100%; padding: 10px; border-radius: var(--radius-sm); border: none;
  background: var(--indigo); color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; margin-top: 4px;
}
.btn-primary:hover { background: #4f46e5; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ── Toast ── */
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: toast-in .3s ease-out;
  display: flex; align-items: center; gap: 8px;
  /* Aşama D1 — exit animation transition */
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.toast.toast-exit {
  opacity: 0;
  transform: translateX(20px);
}
.toast.success { border-left: 3px solid var(--green); color: var(--green); }
.toast.error   { border-left: 3px solid var(--red); color: var(--red); }
.toast.info    { border-left: 3px solid var(--indigo); color: #60a5fa; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ── Kbd shortcut ── */
.kbd-hint { position: fixed; bottom: 14px; right: 14px; z-index: 200; }
.kbd-toggle { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border2); background: var(--card); color: var(--muted); font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.kbd-toggle:hover { color: var(--text); border-color: var(--indigo); }
.kbd-panel {
  position: absolute; bottom: 36px; right: 0; width: 220px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 12px 14px; font-size: 11px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: none;
}
.kbd-panel.visible { display: block; }
.kbd-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
.kbd-row:last-child { border-bottom: none; }
.kbd-label { color: var(--text2); }
.kbd-key { background: var(--card2); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 6px; color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 10px; }

/* ── Misc ── */
.view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-shrink: 0; }
.view-title { font-size: 15px; font-weight: 600; }
.view-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.chip-filter-label { font-size: 10px; color: var(--text2); padding: 0 8px; white-space: nowrap; flex-shrink: 0; }

/* ── Faz 2: Pano filtre satırı ── */
.kanban-filters {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-shrink: 0;
  padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.kf-input, .kf-select {
  background: var(--card2); border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 12px; padding: 6px 10px;
  outline: none; transition: border-color .15s;
}
.kf-input { flex: 1 1 220px; min-width: 180px; }
.kf-input:focus, .kf-select:focus { border-color: var(--indigo); }
.kf-select { min-width: 110px; cursor: pointer; }
.kf-btn-clear {
  background: transparent; border: 1px solid var(--border2); color: var(--text2);
  border-radius: 6px; padding: 6px 10px; font-size: 11px; cursor: pointer; transition: all .15s;
}
.kf-btn-clear:hover { color: var(--red); border-color: var(--red); }
.kf-meta { font-size: 11px; color: var(--muted); margin-left: auto; }

/* ── Faz 2: Skills view ── */
.skills-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.skill-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: all .2s;
  animation: card-enter .3s ease-out both;
  display: flex; flex-direction: column; gap: 8px;
}
.skill-card:hover { border-color: var(--indigo); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.sk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sk-name { font-size: 13px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; }
.sk-loc { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }
.sk-loc-host { background: #052e1633; color: #4ade80; border: 1px solid #16a34a33; }
.sk-loc-vault { background: #0e1d3d55; color: #60a5fa; border: 1px solid #1e40af33; }
.sk-desc { font-size: 11px; color: var(--text2); line-height: 1.5; }
.sk-agents { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }
.sk-agent-chip {
  font-size: 10px; padding: 2px 7px; border-radius: 99px; font-weight: 500;
  background: var(--card2); border: 1px solid var(--border2); color: var(--text2);
}
.sk-agent-chip.mandatory { color: var(--gc, #93c5fd); border-color: color-mix(in srgb, var(--gc, #93c5fd) 40%, transparent); font-weight: 600; }

/* ── Faz 4: Telegram tab ── */
.telegram-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.tg-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; transition: all .2s;
  animation: card-enter .3s ease-out both;
  display: flex; flex-direction: column; gap: 10px;
  border-left: 3px solid #4ade80;
}
.tg-card:hover { border-color: var(--indigo); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.tg-card.resolved { opacity: .65; border-left-color: var(--border2); }
.tg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tg-card-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.tg-card-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }
.tg-card-badge.active { background: #052e1633; color: #4ade80; border: 1px solid #16a34a33; }
.tg-card-badge.resolved { background: #1a1a2e55; color: var(--muted); border: 1px solid var(--border2); }
.tg-card-meta { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text2); }
.tg-card-meta b { color: var(--text); font-weight: 600; min-width: 70px; display: inline-block; }
.tg-card-chat { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text2); }
.tg-card-issue { color: var(--indigo); cursor: pointer; text-decoration: underline; }
.tg-card-issue:hover { color: var(--text); }
.tg-card-actions { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.tg-card-btn {
  flex: 1; font-size: 11px; padding: 6px 10px; border-radius: 6px;
  background: var(--indigo); color: #fff; border: 0; cursor: pointer; font-weight: 600;
}
.tg-card-btn:hover { background: #6366f1; }
.tg-card-btn:disabled { background: var(--card2); color: var(--muted); cursor: not-allowed; border: 1px solid var(--border2); }

/* Telegram send modal */
.tg-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 200;
}
.tg-modal-overlay.visible { display: flex; }
.tg-modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  width: 480px; max-width: 92vw; padding: 18px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.tg-modal-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tg-modal-sub { font-size: 11px; color: var(--text2); margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; }
.tg-modal-textarea {
  width: 100%; min-height: 110px; box-sizing: border-box;
  background: var(--card2); border: 1px solid var(--border2); border-radius: 8px;
  color: var(--text); font-size: 13px; padding: 10px 12px; resize: vertical;
  font-family: inherit;
}
.tg-modal-textarea:focus { outline: none; border-color: var(--indigo); }
.tg-modal-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
.tg-modal-chars { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Faz 2: Info drawer (agent + skill) — reuses detail-panel CSS ── */
.info-drawer { width: 420px; }
.id-section { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.id-section:last-child { border-bottom: none; }
.id-stitle { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.id-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.id-row b { color: var(--text); font-weight: 600; min-width: 80px; flex-shrink: 0; }
.id-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.id-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 99px; font-weight: 500;
  background: var(--card2); border: 1px solid var(--border2); color: var(--text2);
  cursor: pointer; transition: all .15s; font-family: 'JetBrains Mono', monospace;
}
.id-chip:hover { border-color: var(--indigo); color: var(--text); }
.id-chip.mandatory { color: #93c5fd; border-color: #6366f155; background: #6366f111; font-weight: 600; }
.id-chip.no-id { opacity: .6; cursor: default; }
.id-chip.no-id:hover { border-color: var(--border2); color: var(--text2); }
.id-agent-hero {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: radial-gradient(ellipse at top left, var(--g1) 0%, transparent 70%);
}
.id-agent-name { font-size: 18px; font-weight: 700; }
.id-agent-role { font-size: 12px; color: var(--text2); margin-top: 2px; }
.id-agent-avatar {
  width: 56px; height: 56px; border-radius: 14px; position: relative; flex-shrink: 0;
  box-shadow: 0 0 16px color-mix(in srgb, var(--gc) 25%, transparent);
}

/* ── Faz 2: Issue PATCH dropdowns ── */
.dp-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.dp-edit-row.three-col { grid-template-columns: 1fr 1fr 1fr; }
.dp-edit-field { display: flex; flex-direction: column; gap: 4px; }
.dp-edit-label { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dp-edit-select {
  background: var(--card2); border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 12px; padding: 6px 8px;
  outline: none; cursor: pointer; transition: border-color .15s;
}
.dp-edit-select:focus { border-color: var(--indigo); }
.dp-edit-select:disabled { opacity: .5; cursor: not-allowed; }

/* ── Faz 5: Sağlık tab + Audit feed ── */
.health-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.health-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  animation: card-enter .3s ease-out both;
}
.hc-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hc-body { font-size: 12px; color: var(--text2); display: flex; flex-direction: column; gap: 6px; }
.hc-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.hc-row b { color: var(--text); font-weight: 600; min-width: 110px; }
.hc-row .hc-val { color: var(--text2); flex: 1; }
.hc-row .hc-val.mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.hc-dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }
.hc-dot.ok { background: #4ade80; box-shadow: 0 0 6px #4ade8088; }
.hc-dot.warn { background: #fbbf24; box-shadow: 0 0 6px #fbbf2488; }
.hc-dot.err { background: #f87171; box-shadow: 0 0 6px #f8717188; }
.hc-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--card2); margin: 4px 0; }
.hc-bar-seg { height: 100%; transition: width .3s; }
.hc-bar-seg.primary { background: #4ade80; }
.hc-bar-seg.fallback { background: #fbbf24; }
.hc-bar-seg.fail { background: #f87171; }
.hc-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.hc-table th, .hc-table td { padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.hc-table th { color: var(--muted); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.hc-table td { color: var(--text2); }
.hc-table tr:last-child td { border-bottom: none; }
/* Faz 1 cila — sticky thead (opak arka plan: scroll'da alt satırlar görünmesin). */
.hc-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card2); }
.hc-pill { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }
.hc-pill.ok { background: #052e1633; color: #4ade80; border: 1px solid #16a34a33; }
.hc-pill.warn { background: #3f290333; color: #fbbf24; border: 1px solid #d97706aa; }
.hc-pill.err { background: #3f0f0f55; color: #f87171; border: 1px solid #dc262644; }

.audit-section {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.audit-header {
  display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.audit-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; flex: 1; }
.audit-feed { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; }
.audit-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card2);
  transition: border-color .15s;
}
.audit-row:hover { border-color: var(--border2); }
.audit-badge {
  font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; white-space: nowrap;
}
.audit-badge.indigo { background: #4338ca33; color: #a5b4fc; border: 1px solid #6366f155; }
.audit-badge.muted { background: var(--card); color: var(--muted); border: 1px solid var(--border2); }
.audit-badge.garnet { background: #3f0f0f55; color: #f87171; border: 1px solid #dc262644; }
.audit-badge.topaz { background: #3f290333; color: #fbbf24; border: 1px solid #d97706aa; }
.audit-msg { font-size: 12px; color: var(--text); line-height: 1.45; word-break: break-word; }
.audit-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.audit-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.audit-tag {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--card); color: var(--muted); border: 1px solid var(--border2);
  white-space: nowrap;
}
.audit-meta-line {
  font-size: 10px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.audit-time { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; }
.audit-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 12px; }
.audit-load-more {
  display: block; margin: 12px auto; padding: 6px 16px;
  background: var(--card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; font-size: 12px;
}
.audit-load-more:hover:not([disabled]) { background: var(--muted-bg); border-color: var(--accent); }
.audit-load-more[disabled] { opacity: 0.5; cursor: wait; }

/* ────────────────────────────────────────────────────────────────────────
   Faz 15 — Mobile responsive layout
   Strategy: desktop (>1024px) untouched. Tablet (≤1024px) sidebar collapses
   to icon-only. Mobile (≤768px) sidebar slides in from off-canvas via
   body.sidebar-open + hamburger button + backdrop overlay; kanban stacks
   vertically; detail panel + modals go full-screen.
   ──────────────────────────────────────────────────────────────────────── */

/* Hamburger ve backdrop default: desktop'ta gizli */
.sb-hamburger {
  display: none;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--border2); background: var(--card);
  color: var(--text); font-size: 16px; line-height: 1;
  align-items: center; justify-content: center; flex-shrink: 0;
  margin-right: 4px; transition: all .15s;
}
.sb-hamburger:hover { border-color: var(--gem-emerald, #34d399); color: var(--text); }
/* Grup başlığı yanı ipucu (ör. Şirketler · filtre) */
.sb-grp-hint { margin-left: 6px; font-size: 8px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; opacity: .8; }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 9;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}

/* ── Tablet: 768px-1024px — Sidebar icon-only collapse ── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 56px; }
  .sidebar { width: var(--sidebar-w); }
  .logo > div:not(.logo-mark) { display: none; }
  .logo { justify-content: center; padding: 14px 0; }
  .sb-section { display: none; }
  .sb-item {
    justify-content: center; padding: 10px 0; margin: 2px 6px;
    gap: 0;
  }
  .sb-item > span:not(.sb-icon):not(.sb-badge):not(.sb-company-dot) { display: none; }
  .sb-badge {
    position: absolute; top: 2px; right: 2px; margin-left: 0;
    transform: scale(.85);
  }
  #refresh-countdown { display: none; }
  .sidebar-footer { padding: 8px 0; text-align: center; }
  .sidebar-footer span { display: none; }
  /* Kanban: 3 column max */
  .kanban-col { min-width: 200px; width: 200px; }
}

/* ── Mobile: ≤768px — Off-canvas sidebar + stacked kanban + full-screen panels ── */
@media (max-width: 768px) {
  :root { --sidebar-w: 240px; --topbar-h: 52px; }

  /* Hamburger görünür */
  .sb-hamburger { display: inline-flex; }

  /* Sidebar: off-canvas, hamburger ile slide-in */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: -240px;
    width: 240px; z-index: 50;
    transition: left .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  body.sidebar-open .sidebar { left: 0; }
  /* Mobile'da expanded label'lar geri gelir (tablet collapse override) */
  .sidebar .logo > div:not(.logo-mark) { display: block; }
  .sidebar .logo { justify-content: flex-start; padding: 18px 16px 14px; }
  .sidebar .sb-section { display: block; }
  .sidebar .sb-item { justify-content: flex-start; padding: 8px 12px; gap: 9px; }
  .sidebar .sb-item > span { display: inline-flex; }
  .sidebar .sb-badge { position: static; transform: none; margin-left: auto; }
  .sidebar #refresh-countdown { display: inline; }
  .sidebar .sidebar-footer { padding: 12px 16px; text-align: left; }
  .sidebar .sidebar-footer span { display: inline; }

  /* Backdrop görünür hale geçer */
  body.sidebar-open .sidebar-backdrop {
    display: block; opacity: 1; pointer-events: all;
  }

  /* Topbar: clock + ticker gizle, sadece hamburger + status + refresh */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-clock { display: none; }
  .ticker-wrap { display: none !important; }
  .topbar-health { display: none; }
  .topbar-search { display: none; }
  .topbar-user .tu-meta { display: none; }
  .live-label { display: none; }

  /* Agent strip biraz daraltılır */
  .agent-strip { padding: 0 12px; height: 72px; }
  .chip-avatar { width: 36px; height: 36px; }
  .chip-info { max-width: 90px; }

  /* View padding daraltılır */
  .view { padding: 12px; }

  /* Kanban: dikey stack, her column full width */
  .kanban-board {
    flex-direction: column; gap: 14px; overflow-x: hidden;
  }
  .kanban-col { width: 100%; min-width: 0; }
  /* W3 — kolonlar dikey stack olduğu için kart alanı daha uzun olabilir
     (320px telefonda çok az kart gösteriyordu). */
  .kanban-cards { min-height: 80px; max-height: 65vh; }

  /* Filtre satırı dikey */
  .kanban-filters { gap: 6px; padding: 8px; }
  .kf-input { flex: 1 1 100%; min-width: 0; }
  .kf-select { flex: 1 1 calc(50% - 4px); min-width: 0; }

  /* Detail panel: full-screen overlay */
  .detail-panel {
    width: 100vw; max-width: 100vw;
    border-left: none;
  }
  .info-drawer { width: 100vw; }

  /* Modal'lar: full-width, button-friendly */
  .modal {
    width: 100vw; max-width: 100vw; max-height: 100vh;
    height: 100vh; border-radius: 0; padding: 18px 16px;
  }
  .tg-modal {
    width: 100vw; max-width: 100vw;
    border-radius: 12px 12px 0 0;
    padding: 14px 16px;
  }
  .tg-modal-overlay { align-items: flex-end; }
  /* W3 — WCAG 2.5.5 dokunma hedefi ≥44px (eskiden 36px idi). */
  .modal-close, .dp-close { width: 44px; height: 44px; font-size: 20px; }
  .btn-primary { padding: 12px; font-size: 14px; min-height: 44px; }
  .btn-icon { width: 44px; height: 44px; min-width: 44px; }
  .sb-hamburger { width: 44px; height: 44px; font-size: 18px; }

  /* Stats row: 2 column grid (was 4) */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Health/skills/telegram grid → tek column */
  .health-grid, .skills-grid, .telegram-grid {
    grid-template-columns: 1fr;
  }

  /* Agent grid daha kompakt */
  .agent-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Kbd hint mobile'da gizle (klavye yok) */
  .kbd-hint { display: none; }

  /* Müşteriler kanban mobile: tek kolonlu stack */
  .musteri-board { grid-template-columns: 1fr !important; }

  /* Faturalar kanban mobile: tek kolonlu stack */
  .fatura-board { grid-template-columns: 1fr !important; }

  /* Kararlar timeline mobile: tarih kolonu daralsın, kartlar daha sıkı */
  .karar-card { padding: 8px; }
  .karar-date { width: 56px !important; }
}

/* ── Faz 1 cila — dar telefon (≤480px) inceltmeleri ─────────────────
   ≤768px stack'i hallediyor; burada çok dar ekranda padding/grid sıkışmasını
   gideriyoruz (içerik taşması + 2-kolon stats cramped). Additive — sadece daraltır. */
@media (max-width: 480px) {
  .view { padding: 10px 10px 16px; }
  /* Stats 2-kolon dar ekranda sıkışıyor → tek kolon. */
  .stats-row { grid-template-columns: 1fr; }
  /* Kart iç boşlukları daha sıkı (ekran genişliği kazanılır). */
  .rt-card, .musteri-card, .hc-card, .skills-card { padding: 12px; }
  /* Ajan grid: dar ekranda min genişlik düşsün (taşma/yatay scroll engeli). */
  .agent-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  /* Filtre/aksiyon satırları sarmalı dursun, buton-tam-genişlik. */
  .kanban-filters { padding: 6px; }
  .kf-select { flex: 1 1 100%; }
  /* Tablo font'u biraz küçülsün ki yatay scroll azalsın. */
  .hc-table, .rt-table, .skills-usage-table { font-size: 11px; }
}

/* ── Faz 21 PR-B — Müşteriler kanban (customer_lifecycle 7-state) ── */
.musteri-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(160px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 12px;
}
.musteri-column {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.musteri-column-header {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.musteri-column-header .count {
  color: var(--muted);
  background: var(--border2);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10px;
}
.musteri-column-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 32px;
}
.musteri-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--indigo);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  transition: border-color .15s, transform .15s;
}
.musteri-card:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
}
.musteri-slug {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musteri-owner {
  color: var(--text2);
  font-size: 11px;
  margin-top: 3px;
}
.musteri-meta {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.musteri-col-empty {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  padding: 12px 0;
}
.musteri-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 48px 20px;
}

/* ── Faz 22 PR-B — Faturalar timeline kanban (invoice_history 6-state forward-only) ── */
.fatura-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 12px;
}
.fatura-column {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fatura-column-header {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.fatura-column-header .count {
  color: var(--muted);
  background: var(--border2);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10px;
}
.fatura-column-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 32px;
}
.fatura-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid #fb7185;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  transition: border-color .15s, transform .15s;
}
.fatura-card:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
}
.fatura-number {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fatura-client {
  color: var(--text2);
  font-size: 11px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fatura-amount {
  color: var(--text);
  font-size: 12px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.fatura-meta {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.fatura-col-empty {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  padding: 12px 0;
}
.fatura-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 48px 20px;
}

/* ── Faz 22 PR-C — Kararlar timeline (vault decision files) ──
   Kanban değil — events not states. Tek kolon flex column,
   her satır = 72px tarih bandı + esnek body. */
.karar-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 12px;
}
.karar-card {
  display: flex;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid #60a5fa;
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color .15s, transform .15s;
}
.karar-card:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
}
.karar-date {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  padding-right: 10px;
}
.karar-date-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.karar-date-month {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}
.karar-date-year {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.karar-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.karar-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.karar-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.karar-class {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--border2);
  color: var(--text2);
  flex-shrink: 0;
  font-weight: 500;
}
.karar-class-pricing { background: rgba(251,191,36,.15); color: #fbbf24; }
.karar-class-scope { background: rgba(96,165,250,.15); color: #60a5fa; }
.karar-class-timing { background: rgba(59,130,246,.15); color: #60a5fa; }
.karar-class-strategic { background: rgba(34,197,94,.15); color: #22c55e; }
.karar-class-renewal { background: rgba(20,184,166,.15); color: #14b8a6; }
.karar-class-churn-response { background: rgba(248,113,113,.18); color: #f87171; }
.karar-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text2);
}
.karar-client {
  font-weight: 500;
  color: var(--text2);
}
.karar-owner {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.karar-status {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--border2);
  color: var(--text2);
  font-weight: 500;
}
.karar-status-proposed { background: rgba(148,163,184,.18); color: #94a3b8; }
.karar-status-approved { background: rgba(34,197,94,.18); color: #22c55e; }
.karar-status-rejected { background: rgba(248,113,113,.18); color: #f87171; }
.karar-status-implemented { background: rgba(96,165,250,.18); color: #60a5fa; }
.karar-status-rolled-back { background: rgba(251,146,60,.18); color: #fb923c; }
.karar-summary {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
  /* clamp summary 2 satıra (çok uzun bağlam çekmesin) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.karar-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 48px 20px;
}

/* ── Faz 23 PR-B — Skill kullanım telemetrisi paneli ── */
.skills-usage-panel {
  /* PR-A telemetry görsel katmanı; data yokken gizli kalır (içeriği boş) */
  margin-bottom: 16px;
}
.skills-usage-panel:empty {
  display: none;
}
.skills-usage-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.skills-usage-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.skills-usage-meta {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.skills-usage-empty {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 20px 16px;
  background: var(--card2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.skills-usage-table-wrap {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.skills-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.skills-usage-table thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  /* Faz 1 cila — uzun tabloda başlık satırı sayfa scroll'unda görünür kalır. */
  position: sticky;
  top: 0;
  z-index: 1;
}
.skills-usage-table thead th.su-count-h {
  text-align: right;
  width: 80px;
}
.skills-usage-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.skills-usage-table tbody tr:last-child td {
  border-bottom: 0;
}
.skills-usage-table tbody tr:hover td {
  background: var(--card);
}
.skills-usage-table .su-name {
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text);
}
.skills-usage-table .su-count,
.skills-usage-table .su-agents {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}
.skills-usage-table .su-time {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Faz 28 PR-B — Runtime Health view ──────────────────────────── */
.rt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.rt-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.rt-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 0;
}
.rt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rt-table th, .rt-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.rt-table th {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Faz 1 cila — sticky thead (opak arka plan scroll için). */
.rt-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
.rt-table .rt-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.rt-table .rt-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}
.rt-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  margin-left: auto;
}
.rt-badge.ok { background: #064e3b; color: #34d399; }
.rt-badge.danger { background: #7f1d1d; color: #fca5a5; }
.rt-authfail-row {
  display: grid;
  grid-template-columns: 130px 140px 1fr;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.rt-authfail-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-authfail-action { color: var(--text2); font-family: ui-monospace, monospace; }
.rt-authfail-msg { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-badge.danger { background: #7f1d1d; color: #fca5a5; }

/* ── Faz 42 PR-E — Müşteri detail drawer ──────────────────────────── */
.musteri-card {
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.musteri-card:hover { background: var(--bg2, #1e293b); }
.musteri-card:active { transform: scale(0.98); }
.musteri-card:focus-visible { outline: 2px solid var(--accent, #38bdf8); outline-offset: 2px; }

aside.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg, #0f172a);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease-out;
}
aside.drawer.hidden { transform: translateX(100%); pointer-events: none; }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-header h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
#drawer-close {
  background: transparent;
  border: 0;
  color: var(--text2);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
#drawer-close:hover { color: var(--text); }

.drawer nav.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.drawer nav.tabs button {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  color: var(--text2);
  cursor: pointer;
  font-size: 12px;
}
.drawer nav.tabs button.active {
  color: var(--text);
  border-bottom-color: var(--accent, #38bdf8);
}
.drawer nav.tabs button:hover { color: var(--text); }

.drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.drawer-section { margin-bottom: 18px; }
.drawer-section h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.drawer-empty, .drawer-loading, .drawer-error {
  padding: 16px; text-align: center; color: var(--muted); font-size: 12px;
}
.drawer-error { color: #fca5a5; }

dl.kv {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px;
  font-size: 12px; margin: 0;
}
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; color: var(--text); }

.lifecycle-history { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.lifecycle-history li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.hist-state { font-weight: 600; color: var(--text); margin-right: 8px; }
.hist-owner { color: var(--text2); margin-right: 8px; }
.hist-time { color: var(--muted); }
.hist-reason { color: var(--text2); margin-top: 4px; font-style: italic; font-size: 11px; }

/* Mini project board */
.proj-toolbar { margin-bottom: 8px; }
.btn-newproj {
  background: transparent; border: 1px solid var(--border); color: var(--text2);
  padding: 6px 10px; border-radius: 4px; font-size: 11px; cursor: not-allowed; opacity: 0.7;
}
.project-mini-board {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
}
.project-mini-col {
  flex: 0 0 140px; background: var(--bg2, #1e293b);
  border-radius: 6px; padding: 8px;
}
.pm-col-header {
  font-size: 11px; font-weight: 600; color: var(--text2);
  margin-bottom: 6px; display: flex; justify-content: space-between;
}
.pm-col-header .count { color: var(--muted); }
.project-mini-card {
  background: var(--bg, #0f172a); border: 1px solid var(--border);
  padding: 6px; margin-bottom: 6px; border-radius: 4px; font-size: 11px;
}
.pm-title { color: var(--text); font-weight: 500; margin-bottom: 4px; }
.pm-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.pm-owner { color: var(--text2); margin-top: 4px; font-size: 10px; }

/* Invoice list */
.invoice-list { list-style: none; padding: 0; margin: 0; }
.inv-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px;
  align-items: center;
}
.inv-num { color: var(--text); font-family: ui-monospace, monospace; }
.inv-amount { color: var(--text); font-variant-numeric: tabular-nums; }
.inv-status {
  font-size: 10px; padding: 2px 6px; border-radius: 8px;
  background: var(--bg2, #1e293b); color: var(--text2);
}
.inv-status.status-paid { background: #064e3b; color: #34d399; }
.inv-status.status-overdue { background: #7f1d1d; color: #fca5a5; }
.inv-due { color: var(--muted); font-size: 11px; }

/* Comm + Activity lists */
.comm-list, .activity-list { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.comm-row, .act-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.act-title { color: var(--text); font-weight: 500; }
.act-action, .comm-action { color: var(--text2); font-size: 11px; }
.act-actor, .comm-actor { color: var(--text2); }
.act-time, .comm-time { color: var(--muted); font-size: 11px; }

/* Markdown body inside drawer */
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  margin-top: 14px; margin-bottom: 6px; color: var(--text);
}
.markdown-body h1 { font-size: 16px; }
.markdown-body h2 { font-size: 14px; }
.markdown-body h3 { font-size: 13px; }
.markdown-body p { margin: 6px 0; color: var(--text2); font-size: 12px; line-height: 1.5; }
.markdown-body ul, .markdown-body ol { padding-left: 22px; margin: 6px 0; color: var(--text2); font-size: 12px; }
.markdown-body code {
  background: var(--bg2, #1e293b); padding: 1px 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
}
.markdown-body a { color: var(--accent, #38bdf8); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body strong { color: var(--text); }
.markdown-body em { font-style: italic; }

@media (max-width: 640px) {
  aside.drawer { width: 100vw; }
}

/* ── Faz 44 PR-B — API Keys admin tablo ──────────────────────────────── */
.api-keys-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.api-keys-table thead th {
  background: var(--bg2, #1e293b);
  color: var(--text);
  font-weight: 600;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border, #2a3548);
  position: sticky;
  top: 0;
}
.api-keys-table tbody tr {
  border-bottom: 1px solid var(--border, #2a3548);
}
.api-keys-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.03);
}
.api-keys-table td {
  padding: 8px 6px;
  vertical-align: middle;
  color: var(--text2);
}
.api-keys-table .hc-bar {
  height: 6px;
  background: var(--bg2, #1e293b);
  border-radius: 3px;
  overflow: hidden;
}


/* ── Faz 46.E — Mülkler view (managed properties) ───────────────────── */

#view-mulkler .m-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  padding: 16px;
}

.m-card {
  background: var(--bg2, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.m-card:hover {
  border-color: var(--accent, #00ff97);
  transform: translateY(-2px);
}
.m-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.m-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--fg, #fff);
}
.m-status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  background: var(--bg3, #0f172a);
  color: var(--muted, #94a3b8);
  border: 1px solid var(--border, #334155);
}
.m-status-prod, .m-status-active {
  border-color: #22c55e;
  color: #22c55e;
}
.m-status-beta {
  border-color: #f59e0b;
  color: #f59e0b;
}
.m-status-onboarding {
  border-color: #3b82f6;
  color: #3b82f6;
}

.m-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.m-pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(0, 255, 151, 0.1);
  color: var(--accent, #00ff97);
  border: 1px solid rgba(0, 255, 151, 0.2);
}
.m-pill-cat {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}
.m-pill-muted {
  background: var(--bg3, #0f172a);
  color: var(--muted, #94a3b8);
  border-color: var(--border, #334155);
}

.m-info {
  font-size: 12px;
  color: var(--muted, #94a3b8);
  margin-bottom: 10px;
}
.m-info-row {
  margin: 2px 0;
}
.m-label {
  color: var(--fg-secondary, #cbd5e1);
}
.m-info code {
  background: var(--bg3, #0f172a);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

.m-doc-status {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  padding: 6px 0;
  border-top: 1px solid var(--border, #334155);
}
.m-doc-status.m-warn {
  color: #f59e0b;
}

.m-card-foot {
  margin-top: 8px;
  text-align: right;
}
.m-btn-detail {
  background: transparent;
  border: 1px solid var(--accent, #00ff97);
  color: var(--accent, #00ff97);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

/* ── Drawer ───────────────────────────────────────────────────────── */

.m-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
}
.m-drawer-panel {
  width: min(720px, 90vw);
  height: 100vh;
  background: var(--bg, #0f172a);
  border-left: 1px solid var(--border, #334155);
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
}
.m-drawer-loading {
  text-align: center;
  padding: 80px 0;
  color: var(--muted, #94a3b8);
}
.m-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, #334155);
}
.m-drawer-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg, #fff);
}
.m-drawer-close {
  background: transparent;
  border: 1px solid var(--border, #334155);
  color: var(--fg, #fff);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.m-drawer-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, #334155);
}
.m-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted, #94a3b8);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.m-tab.active {
  color: var(--accent, #00ff97);
  border-bottom-color: var(--accent, #00ff97);
}

.m-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 13px;
  margin-bottom: 20px;
  color: var(--fg-secondary, #cbd5e1);
}

.m-md-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-secondary, #cbd5e1);
}
.m-md-body h1, .m-md-body h2, .m-md-body h3, .m-md-body h4 {
  color: var(--fg, #fff);
  margin: 16px 0 8px;
}
.m-md-body code {
  background: var(--bg2, #1e293b);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.m-md-body table {
  border-collapse: collapse;
  margin: 12px 0;
}
.m-md-body th, .m-md-body td {
  border: 1px solid var(--border, #334155);
  padding: 6px 10px;
  font-size: 12px;
}
.m-md-body th {
  background: var(--bg2, #1e293b);
}

.m-issue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #334155);
}
.m-issue-status {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg2, #1e293b);
  color: var(--muted, #94a3b8);
}
.m-issue-status.m-issue-draft {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.m-issue-priority {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.m-issue-title {
  flex: 1;
  font-size: 13px;
  color: var(--fg, #fff);
}

.m-empty-sub {
  text-align: center;
  padding: 40px 0;
  color: var(--muted, #94a3b8);
  font-size: 13px;
}
.empty-state {
  text-align: center;
  padding: 80px 24px;
  color: var(--muted, #94a3b8);
  font-size: 14px;
}

/* ── Faz 46.F.2 — İşler (Paperclip iframe embed) view ─────────────────── */

#view-isler .isler-body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  padding: 0;
}

.isler-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg2, #1e293b);
  border-bottom: 1px solid var(--border, #334155);
  flex-wrap: wrap;
}

.isler-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #94a3b8);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.isler-tab:hover {
  background: var(--bg3, #0f172a);
  color: var(--fg, #fff);
}
.isler-tab.active {
  background: rgba(0, 255, 151, 0.15);
  color: var(--accent, #00ff97);
  border-color: rgba(0, 255, 151, 0.3);
}

.isler-spacer {
  flex: 1;
}

.isler-external {
  font-size: 12px;
  color: var(--muted, #94a3b8);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--border, #334155);
  border-radius: 4px;
  transition: border-color 0.15s, color 0.15s;
}
.isler-external:hover {
  color: var(--accent, #00ff97);
  border-color: var(--accent, #00ff97);
}

.isler-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg, #0f172a);
}

.isler-footer {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
  background: var(--bg2, #1e293b);
  border-top: 1px solid var(--border, #334155);
  text-align: center;
}
.isler-footer a {
  color: var(--accent, #00ff97);
  text-decoration: none;
}

/* ── Faz 46.F.3 — Topbar Sağlık Özeti pills ──────────────────────────── */

.topbar-health {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px;
}

.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  cursor: default;
  transition: border-color 0.2s;
}
.hp-pill .hp-icon {
  font-size: 12px;
  line-height: 1;
}
.hp-pill .hp-val {
  font-weight: 600;
}

.hp-pill.hp-ok {
  border-color: rgba(34, 197, 94, 0.4);
}
.hp-pill.hp-warn {
  border-color: rgba(245, 158, 11, 0.6);
  background: rgba(245, 158, 11, 0.1);
}
.hp-pill.hp-crit {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.1);
  animation: hp-pulse 2s ease-in-out infinite;
}
@keyframes hp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (max-width: 900px) {
  .topbar-health { display: none; }
}

/* ─── Aşama F (2026-05-25) — Org Chart, Board, EFQM görünümler ──────── */

/* ── Org Chart ── */
.oc-tree { padding: 12px 0; }
.oc-branch { position: relative; padding-left: 20px; }
.oc-depth-0 { padding-left: 0; }
.oc-card {
  display: inline-flex; align-items: flex-start; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; margin: 4px 0;
  cursor: pointer; min-width: 200px; max-width: 360px;
  transition: border-color .15s, background .15s;
}
.oc-card:hover { border-color: var(--indigo); background: #0e1d3d; }
.oc-card:focus { outline: 2px solid var(--indigo); outline-offset: 2px; }
.oc-card-inner { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.oc-gem { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.oc-info { flex: 1; min-width: 0; }
.oc-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.oc-title { font-size: 11px; color: var(--muted); margin-top: 2px; }
.oc-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.oc-efqm { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--indigo); color: #fff; }
.oc-model { font-size: 10px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.oc-toggle { font-size: 10px; color: var(--muted); flex-shrink: 0; align-self: center; }
.oc-status { font-size: 11px; }
.oc-status-active { color: #4ade80; }
.oc-status-busy { color: var(--amber); }
.oc-status-error { color: var(--danger); }
.oc-status-paused { color: var(--muted); }
.oc-card.oc-paused { opacity: .65; border-style: dashed; }
.oc-card.oc-human { border-color: #34d399; background: rgba(52,211,153,.08); }
.oc-card.oc-system { border-style: dotted; }
.oc-children {
  padding-left: 24px; border-left: 1px dashed var(--border2);
  margin-left: 12px; padding-bottom: 4px;
}
.oc-legend { padding: 12px 0 4px; font-size: 11px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Board view ── */
.board-grid { display: grid; gap: 16px; }
.board-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.board-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.board-wide { grid-column: 1 / -1; }
.board-seats { display: flex; flex-wrap: wrap; gap: 10px; }
.board-seat {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: 10px 14px; min-width: 140px; flex: 1;
}
.board-seat-paused { opacity: .6; border-style: dashed; }
.board-seat-gem { font-size: 22px; margin-bottom: 4px; }
.board-seat-name { font-size: 13px; font-weight: 600; color: var(--text); }
.board-seat-role { font-size: 11px; color: var(--muted); margin-top: 2px; }
.board-seat-votes { font-size: 11px; color: var(--text2); margin-top: 4px; }
.board-countdown-card { text-align: center; padding: 8px 0; }
.board-countdown-val { font-size: 28px; font-weight: 700; color: var(--indigo); margin-bottom: 4px; }
.board-countdown-date { font-size: 13px; color: var(--text2); }
.board-countdown-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
.board-minute-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.board-minute-date { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 80px; }
.board-minute-title { color: var(--text2); }
.board-minutes { margin-bottom: 8px; }
.board-rule-list { display: flex; flex-direction: column; gap: 6px; }
.board-rule-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text2); }
.board-rule-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; }
.board-rule-board { background: var(--indigo); color: #fff; }
.board-rule-nexus { background: #2563eb; color: #fff; }
.board-rule-gm { background: #0369a1; color: #fff; }
.board-rule-auto { background: var(--amber); color: #000; }
/* 3-Katmanlı Board kartları (T1/T2/T3) — ham metin → kokpit kart dili */
.board-layers { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .board-layers { grid-template-columns: repeat(3, 1fr); } }
.board-layer-card { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 12px 14px; }
.board-layer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.board-layer-tier { font-size: 11px; font-weight: 800; color: var(--gem-sapphire, #60a5fa); background: color-mix(in srgb, var(--gem-sapphire, #60a5fa) 14%, transparent); padding: 2px 8px; border-radius: 6px; letter-spacing: .04em; white-space: nowrap; }
.board-layer-name { font-size: 13px; font-weight: 700; color: var(--text); }
.board-layer-row { font-size: 12px; color: var(--text2); line-height: 1.45; margin-top: 5px; }
.board-layer-key { display: inline-block; min-width: 94px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; vertical-align: top; }
@media (min-width: 768px) {
  .board-grid { grid-template-columns: 1fr 2fr; }
}

/* ── EFQM view ── */
.efqm-layout { display: flex; flex-direction: column; gap: 20px; }
.efqm-criteria { display: grid; gap: 12px; }
@media (min-width: 900px) { .efqm-criteria { grid-template-columns: 1fr 1fr; } }
.efqm-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.efqm-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.efqm-gem { font-size: 18px; flex-shrink: 0; }
.efqm-number { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--bg2); }
.efqm-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.efqm-owner { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.efqm-desc { font-size: 12px; color: var(--text2); line-height: 1.5; margin-bottom: 8px; }
.efqm-metrics { display: flex; flex-direction: column; gap: 3px; }
.efqm-metric-row { font-size: 11px; color: var(--muted); }
.efqm-radar-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.efqm-radar-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.efqm-radar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 700px) { .efqm-radar-grid { grid-template-columns: 1fr 1fr; } }
.efqm-radar-item { text-align: center; padding: 10px 6px; background: var(--bg2); border-radius: var(--radius-sm); }
.efqm-radar-letter { font-size: 22px; font-weight: 900; color: var(--indigo); line-height: 1; }
.efqm-radar-label { font-size: 10px; font-weight: 700; color: var(--text2); margin: 4px 0 2px; text-transform: uppercase; }
.efqm-radar-desc { font-size: 10px; color: var(--muted); line-height: 1.4; }
.efqm-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.efqm-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.efqm-files { display: flex; flex-direction: column; gap: 4px; }
.efqm-file-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text2); }
.efqm-file-icon { flex-shrink: 0; }
.efqm-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efqm-file-date { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Agent strip micro-animations (dashboard overhaul, 2026-05-31) ─────────────
   Hafif + performans-guvenli: idle ajanlar SIFIR maliyet (sadece aktif/busy
   ajanlara surekli nabiz; gerisi hover-only). topbar.ts .pulse-active /
   .pulse-busy / .has-task class'larini ZATEN basiyor; burada gorsellestiriliyor.
   prefers-reduced-motion ile tamamen kapanir (WCAG 2.3.3). */

/* Hover: yumusak kalkis + avatar uzerinde parlama suzulmesi (hover-only = idle 0). */
.agent-chip { transition: transform .18s ease; }
.agent-chip:hover { transform: translateY(-2px); }
.agent-chip:hover .chip-avatar-shine { animation: chip-shine .7s ease-out; }
@keyframes chip-shine {
  0%   { transform: translateX(-120%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* Aktif ajan: status dot'unda yumusak yesil nabiz halkasi (sadece aktif = az oge). */
.agent-chip.pulse-active .chip-status { animation: chip-pulse-active 2s ease-out infinite; }
@keyframes chip-pulse-active {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Busy ajan: daha yavas amber nabiz. */
.agent-chip.pulse-busy .chip-status { animation: chip-pulse-busy 2.6s ease-out infinite; }
@keyframes chip-pulse-busy {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
  70%  { box-shadow: 0 0 0 5px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* Gorevi olan ajan: gorev etiketi cok hafif nefes alir (opacity = compositor). */
.agent-chip.has-task .chip-task { animation: chip-task-breathe 3s ease-in-out infinite; }
@keyframes chip-task-breathe {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* A11y: hareket azaltma tercihi -> tum chip animasyonlarini kapat. */
@media (prefers-reduced-motion: reduce) {
  .agent-chip { transition: none; }
  .agent-chip:hover { transform: none; }
  .agent-chip .chip-status,
  .agent-chip .chip-avatar-shine,
  .agent-chip .chip-task { animation: none !important; }
}

/* ── Genel Bakış overview + Light/Dark tema (dashboard overhaul Tranche 4, 2026-05-31)
   Castdesign token'leri (cockpit-tokens.generated.css) + legacy dashboard.css var'lari
   uzerine. Admin/CRM tarzi KPI kartlari + hafif SVG grafikler. Tema toggle: [data-theme].
   prefers-reduced-motion saygili. ──────────────────────────────────────────────── */

/* ===== Light tema — structural var'lari cevir (token-pure view'lar otomatik uyar) ===== */
[data-theme="light"] {
  --bg:#eef1f7; --surface:#ffffff; --card:#ffffff; --card2:#f5f8fd;
  --border:#e3e7f0; --border2:#d7dde9;
  --text:#1b1e29; --text2:#4a5169; --muted:#7f8baa;
  /* cockpit token isimleri (genel-bakis + Castdesign token-pure) */
  --text-1:#1b1e29; --text-2:#4a5169; --text-3:#7f8baa;
  --surface-hover:#f1f4fa; --surface-raised:#ffffff;
  /* gem'leri beyaz uzerinde kontrast icin hafif koyulastir */
  --gem-emerald:#059669; --gem-amber:#d97706; --gem-ruby:#dc2626;
  --gem-sapphire:#2563eb; --gem-topaz:#ea580c; --gem-teal:#0d9488;
}
[data-theme="light"] body,
[data-theme="light"] .topbar,
[data-theme="light"] .sidebar { color: var(--text); }
#theme-toggle { font-size: 15px; line-height: 1; }

/* ===== Genel Bakış ===== */
#view-genel-bakis { padding: 20px 24px; }
.gb-header { margin-bottom: 18px; }
.gb-title { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.gb-subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* KPI grid */
.gb-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.gb-kpi {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 16px 14px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gb-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gb-accent); border-radius: 14px 0 0 14px;
}
.gb-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.18); border-color: var(--gb-accent); }
.gb-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gb-kpi-icon {
  width: 34px; height: 34px; display: grid; place-items: center; font-size: 17px;
  border-radius: 10px; background: color-mix(in srgb, var(--gb-accent) 16%, transparent);
}
.gb-kpi-sub { font-size: 11px; color: var(--muted); }
.gb-kpi-value { font-size: 30px; font-weight: 700; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.gb-kpi-label { font-size: 12.5px; color: var(--text2); margin-top: 5px; }
.gb-kpi-spark { height: 3px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--gb-accent), transparent); opacity: .6; }

/* Chart grid */
.gb-chart-grid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 14px; }
.gb-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.gb-card-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.gb-card-sub { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 6px; }

/* Donut */
.gb-donut-wrap { display: flex; align-items: center; gap: 18px; }
.gb-donut { width: 140px; height: 140px; flex-shrink: 0; }
.gb-donut-num { fill: var(--text); font-size: 26px; font-weight: 700; }
.gb-donut-cap { fill: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.gb-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gb-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.gb-legend-val { margin-left: auto; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.gb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Bars */
.gb-bars { display: flex; flex-direction: column; gap: 12px; }
.gb-bar-row { display: grid; grid-template-columns: 120px 1fr 32px; align-items: center; gap: 10px; }
.gb-bar-lab { font-size: 12.5px; color: var(--text2); }
.gb-bar-track { height: 9px; background: var(--card2, var(--surface)); border-radius: 6px; overflow: hidden; }
.gb-bar-fill { height: 100%; border-radius: 6px; transition: width .5s ease; min-width: 2px; }
.gb-bar-val { font-size: 12.5px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) { .gb-chart-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .gb-kpi, .gb-bar-fill, .gb-donut circle { transition: none; }
  .gb-kpi:hover { transform: none; }
}

/* ── Genel Bakis ek paneller (Tranche 3.2): pipeline tablo + timeline + meeting + pill ── */
.gb-empty-sm { color: var(--muted); font-size: 13px; padding: 16px 4px; }

/* Status pills */
.gb-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.gb-pill-emerald { background: color-mix(in srgb, var(--gem-emerald,#34d399) 20%, transparent); color: var(--gem-emerald,#34d399); }
.gb-pill-amber   { background: color-mix(in srgb, var(--gem-amber,#fbbf24) 20%, transparent);   color: var(--gem-amber,#fbbf24); }
.gb-pill-ruby    { background: color-mix(in srgb, var(--gem-ruby,#f87171) 20%, transparent);    color: var(--gem-ruby,#f87171); }
.gb-pill-sapphire{ background: color-mix(in srgb, var(--gem-sapphire,#60a5fa) 20%, transparent); color: var(--gem-sapphire,#60a5fa); }
.gb-pill-teal    { background: color-mix(in srgb, var(--gem-teal,#2dd4bf) 20%, transparent);    color: var(--gem-teal,#2dd4bf); }
.gb-pill-muted   { background: color-mix(in srgb, var(--muted,#888) 18%, transparent);          color: var(--muted,#889); }

/* Pipeline table */
.gb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gb-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 0 0 10px; }
.gb-table td { padding: 9px 0; border-top: 1px solid var(--border); }
.gb-c-name { font-weight: 600; color: var(--text); }
.gb-c-owner { color: var(--text2); }

/* Decisions timeline */
.gb-timeline { display: flex; flex-direction: column; gap: 14px; }
.gb-tl-item { display: flex; gap: 12px; }
.gb-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gem-sapphire,#60a5fa); margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 8px var(--gem-sapphire,#60a5fa); }
.gb-tl-date { font-size: 11px; color: var(--muted); }
.gb-tl-title { font-size: 14px; color: var(--text); font-weight: 500; margin: 1px 0 4px; }
.gb-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--card2,var(--surface)); color: var(--text2); }

/* Meeting card */
.gb-meeting-title { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 6px; }
.gb-meeting-meta { font-size: 13px; color: var(--gem-emerald,#34d399); margin-top: 6px; font-weight: 500; }

/* ── Genel Bakis mockup-sadik elemanlar (Tranche 3.2b) ──────────────── */
.gb-kpi-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.gb-trend { font-size: 12px; font-weight: 700; }
.gb-trend.up { color: var(--gem-emerald,#34d399); }
.gb-trend.down { color: var(--gem-ruby,#f87171); }
.gb-kpi-spark { flex-shrink: 0; opacity: .9; }
.gb-spark-svg { width: 90px; height: 30px; display: block; }

/* Satır düzenleri */
.gb-row2 { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 14px; margin-bottom: 14px; }
.gb-row3 { display: grid; grid-template-columns: 1.25fr 1fr 0.85fr; gap: 14px; }
@media (max-width: 1100px) { .gb-row2, .gb-row3 { grid-template-columns: 1fr; } }

/* Alan grafigi */
.gb-chart-wide { min-height: 260px; }
.gb-area { width: 100%; height: auto; }
.gb-ax { fill: var(--muted); font-size: 10px; }
.gb-grid { stroke: var(--border); stroke-width: 1; opacity: .5; }
.gb-tip { fill: var(--text); }
.gb-tip-t { fill: var(--bg); font-size: 11px; font-weight: 600; }

/* Avatar (karakter) */
.gb-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--card2,var(--surface)); border: 1.5px solid var(--border); vertical-align: middle; }
.gb-av-fb { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; border: none; }
.gb-av-cell { display: flex; align-items: center; gap: 8px; }
.gb-c-dur { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Karar tag tonlari */
.gb-tag-amber   { background: color-mix(in srgb, var(--gem-amber,#fbbf24) 18%, transparent);    color: var(--gem-amber,#fbbf24); }
.gb-tag-sapphire{ background: color-mix(in srgb, var(--gem-sapphire,#60a5fa) 18%, transparent); color: var(--gem-sapphire,#60a5fa); }
.gb-tag-emerald { background: color-mix(in srgb, var(--gem-emerald,#34d399) 18%, transparent); color: var(--gem-emerald,#34d399); }
.gb-tag-ruby    { background: color-mix(in srgb, var(--gem-ruby,#f87171) 18%, transparent);    color: var(--gem-ruby,#f87171); }
.gb-tag-teal    { background: color-mix(in srgb, var(--gem-teal,#2dd4bf) 18%, transparent);    color: var(--gem-teal,#2dd4bf); }

/* Aktif toplanti video karti */
.gb-meeting-stage { position: relative; height: 110px; border-radius: 12px; background: linear-gradient(135deg,#0b0b18,#15152e); display: flex; align-items: center; justify-content: center; margin: 8px 0 12px; overflow: hidden; }
.gb-meeting-avs { display: flex; }
.gb-meeting-avs .gb-av { width: 48px; height: 48px; margin-left: -12px; border: 2px solid #15152e; }
.gb-meeting-cam { position: absolute; top: 10px; right: 12px; font-size: 16px; opacity: .8; }
.gb-meeting-btn { width: 100%; padding: 10px; border-radius: 10px; border: none; background: var(--gem-emerald,#34d399); color: #04130c; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 10px; }
.gb-meeting-btn:hover { filter: brightness(1.08); }

/* ── Ekip view: karakter yüz avatarı (display-only) ── */
.ac-avatar .ac-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
.ac-avatar .ac-hero-badge, .ac-avatar .ac-avatar-shine { z-index: 2; }

/* ── Ajan drawer: karakter yüz avatarı ── */
.id-agent-avatar .ac-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
.id-agent-avatar .ac-hero-badge, .id-agent-avatar .ac-avatar-shine { z-index: 2; }

/* KPI iki-satir (mockup): row1 sparkline kartlari, row2 ikon-kare tile */
.gb-kpi-row1, .gb-kpi-row2 { grid-template-columns: repeat(4, 1fr); }
.gb-kpi-row1 { margin-bottom: 14px; }
@media (max-width: 980px) { .gb-kpi-row1, .gb-kpi-row2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gb-kpi-row1, .gb-kpi-row2 { grid-template-columns: 1fr; } }

/* Tile kart — solda renkli ikon kare + buyuk deger */
.gb-tile {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gb-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.18); border-color: var(--gb-accent); }
.gb-tile-icon {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 22px; border-radius: 12px;
  background: color-mix(in srgb, var(--gb-accent) 18%, transparent);
  color: var(--gb-accent);
}
.gb-tile-body { min-width: 0; flex: 1; }
.gb-tile-value { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.gb-tile-unit { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.gb-tile-label { font-size: 12.5px; color: var(--text2); margin-top: 5px; }
.gb-tile-bar { height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--gb-accent) 15%, var(--border)); margin-top: 9px; overflow: hidden; }
.gb-tile-bar span { display: block; height: 100%; border-radius: 4px; background: var(--gb-accent); transition: width .6s ease; }
@media (prefers-reduced-motion: reduce) { .gb-tile, .gb-tile-bar span { transition: none; } .gb-tile:hover { transform: none; } }



/* ── Hermes operatör sohbeti (view-hermes) ─────────────────────────── */
#view-hermes { padding: 0; }
.hx-wrap { display: flex; flex-direction: column; height: calc(100vh - 130px); max-width: 920px; margin: 0 auto; }
.hx-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.hx-ava { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--gem-sapphire,#60a5fa) 18%, transparent); }
.hx-title { font-size: 16px; font-weight: 700; color: var(--text); }
.hx-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.hx-pill { margin-left: auto; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; color: var(--gem-emerald,#34d399); background: color-mix(in srgb, var(--gem-emerald,#34d399) 16%, transparent); }
.hx-pill.busy { color: var(--gem-amber,#fbbf24); background: color-mix(in srgb, var(--gem-amber,#fbbf24) 16%, transparent); }

.hx-log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.hx-msg { display: flex; }
.hx-msg.user { justify-content: flex-end; }
.hx-bubble { max-width: 76%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.hx-msg.hermes .hx-bubble { background: var(--card2, var(--surface)); color: var(--text); border: 1px solid var(--border); border-top-left-radius: 4px; }
.hx-msg.user .hx-bubble { background: var(--gem-sapphire,#2563eb); color: #fff; border-top-right-radius: 4px; }
.hx-msg.err .hx-bubble { background: color-mix(in srgb, var(--gem-ruby,#f87171) 14%, transparent); color: var(--gem-ruby,#dc2626); border: 1px solid color-mix(in srgb, var(--gem-ruby,#f87171) 30%, transparent); }

.hx-typing { display: inline-flex; gap: 4px; align-items: center; }
.hx-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: hx-blink 1.2s infinite both; }
.hx-typing span:nth-child(2) { animation-delay: .2s; }
.hx-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes hx-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.hx-input { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); align-items: flex-end; }
.hx-input textarea { flex: 1; resize: none; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 12px; padding: 11px 14px; font-size: 14px; font-family: inherit; line-height: 1.4; max-height: 140px; outline: none; }
.hx-input textarea:focus { border-color: var(--gem-sapphire,#60a5fa); }
.hx-send { padding: 11px 20px; border: none; border-radius: 12px; background: var(--gem-sapphire,#2563eb); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.hx-send:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .hx-typing span { animation: none; } }

/* Rol toggle — Operatör / Asistan */
.hx-roles { display: flex; gap: 4px; margin-left: auto; background: var(--card2, var(--surface)); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.hx-role { border: none; background: transparent; color: var(--text2); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.hx-role:hover { color: var(--text); }
.hx-role.active { background: var(--gem-sapphire,#2563eb); color: #fff; }
.hx-wrap.hx-assistant .hx-role.active { background: var(--gem-teal,#0d9488); }
.hx-head .hx-pill { margin-left: 10px; }
/* Asistan modunda kullanıcı baloncuğu teal (operatörden ayırt et) */
.hx-wrap.hx-assistant .hx-msg.user .hx-bubble { background: var(--gem-teal,#0d9488); }
.hx-wrap.hx-assistant .hx-ava { background: color-mix(in srgb, var(--gem-teal,#2dd4bf) 18%, transparent); }

.hx-log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.hx-msg { display: flex; }
.hx-msg.user { justify-content: flex-end; }
.hx-bubble { max-width: 76%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.hx-msg.hermes .hx-bubble { background: var(--card2, var(--surface)); color: var(--text); border: 1px solid var(--border); border-top-left-radius: 4px; }
.hx-msg.user .hx-bubble { background: var(--gem-sapphire,#2563eb); color: #fff; border-top-right-radius: 4px; }
.hx-msg.err .hx-bubble { background: color-mix(in srgb, var(--gem-ruby,#f87171) 14%, transparent); color: var(--gem-ruby,#dc2626); border: 1px solid color-mix(in srgb, var(--gem-ruby,#f87171) 30%, transparent); }

.hx-typing { display: inline-flex; gap: 4px; align-items: center; }
.hx-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: hx-blink 1.2s infinite both; }
.hx-typing span:nth-child(2) { animation-delay: .2s; }
.hx-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes hx-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.hx-input { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); align-items: flex-end; }
.hx-input textarea { flex: 1; resize: none; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 12px; padding: 11px 14px; font-size: 14px; font-family: inherit; line-height: 1.4; max-height: 140px; outline: none; }
.hx-input textarea:focus { border-color: var(--gem-sapphire,#60a5fa); }
.hx-send { padding: 11px 20px; border: none; border-radius: 12px; background: var(--gem-sapphire,#2563eb); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.hx-send:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .hx-typing span { animation: none; } }

/* Sekmeler (Sohbet / Yönetim) */
.hx-tabs { display: flex; gap: 6px; padding: 12px 20px 0; }
.hx-tab { border: none; background: transparent; color: var(--text2); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 9px 9px 0 0; cursor: pointer; border-bottom: 2px solid transparent; }
.hx-tab:hover { color: var(--text); }
.hx-tab.active { color: var(--text); border-bottom-color: var(--gem-sapphire,#2563eb); }
.hx-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#hx-panel-chat { height: calc(100vh - 175px); }

/* Yönetim paneli */
.hx-manage { padding: 18px 20px; overflow-y: auto; }
.hx-m-load { color: var(--muted); padding: 24px 4px; }
.hx-m-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.hx-m-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.hx-m-k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hx-m-v { font-size: 22px; font-weight: 700; color: var(--text); margin-top: 4px; }
.hx-m-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.hx-m-sec { margin-bottom: 20px; }
.hx-m-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.hx-m-hint { font-size: 11px; color: var(--muted); font-weight: 400; }
.hx-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-tool { background: color-mix(in srgb, var(--gem-emerald,#34d399) 16%, transparent); color: var(--gem-emerald,#059669); border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.hx-tool.off { background: var(--card2,var(--surface)); color: var(--muted); }
.hx-tool-cmd { font-size: 11px; opacity: .7; font-weight: 400; }
/* 2026-06-14 — Hermes governance capability satırları (açık yetki / yasaklı) */
.hx-cap { padding: 3px 8px; border-radius: 6px; font-weight: 500; }
.hx-cap.on { background: color-mix(in srgb, var(--gem-emerald,#34d399) 14%, transparent); color: var(--gem-emerald,#059669); }
.hx-cap.off { background: color-mix(in srgb, #f87171 12%, transparent); color: #f0a8a8; }
.hx-mem { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.hx-mem summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text); }
.hx-mem-n { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.hx-mem-pre { margin: 0; padding: 0 14px 14px; font-size: 12.5px; line-height: 1.55; color: var(--text2); white-space: pre-wrap; word-break: break-word; font-family: inherit; max-height: 340px; overflow-y: auto; }

/* ── Client OS (Deliverable 5 Faz 2) — gb-* turevi, token-pure, mor YOK ── */
.gb-co-badge { font-size: 11px; font-weight: 700; color: var(--gem-sapphire,#60a5fa); background: color-mix(in srgb, var(--gem-sapphire,#60a5fa) 16%, transparent); padding: 2px 8px; border-radius: 6px; vertical-align: middle; margin-left: 6px; }
.gb-co-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.gb-co-meta a.gb-pill { text-decoration: none; }
.gb-mod-wrap { margin-bottom: 16px; }
.gb-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 4px; }
.gb-mod-card { display: flex; gap: 12px; align-items: flex-start; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 12px 14px; }
.gb-mod-ico { font-size: 22px; line-height: 1; flex-shrink: 0; }
.gb-mod-label { font-size: 13px; font-weight: 700; color: var(--text); }
.gb-mod-note { font-size: 11px; color: var(--text2); margin-top: 2px; }
.gb-co-agent { margin-top: 16px; }
.gb-co-agent .gb-meeting-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Client OS izole shell (co-mode) — tenant panelinde ic chrome gizli ── */
.co-back, .co-brand { display: none; }
body.co-mode aside.sidebar { display: none; }
body.co-mode #agent-strip { display: none; }
body.co-mode .sb-hamburger { display: none; }
body.co-mode .topbar-left .live-dot,
body.co-mode .topbar-left .live-label,
body.co-mode .topbar-left .ticker-wrap,
body.co-mode .topbar-left .topbar-search,
body.co-mode .topbar-health,
body.co-mode .topbar-user { display: none !important; }
body.co-mode .co-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
body.co-mode .co-back:hover { border-color: var(--gem-emerald,#34d399); color: var(--gem-emerald,#34d399); }
body.co-mode .co-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); margin-left: 12px; }

/* ── Client OS 11-state proje izleyici (Deliverable 6) ── */
.gb-co-projwrap .co-proj { padding: 12px 0; border-bottom: 1px solid var(--border); }
.gb-co-projwrap .co-proj:last-child { border-bottom: none; padding-bottom: 0; }
.co-proj-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-proj-title { font-size: 14px; font-weight: 700; color: var(--text); }
.co-proj-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.co-proj-sum { font-size: 12px; color: var(--text2); margin-top: 4px; }
.co-steps { display: flex; align-items: flex-start; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.co-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; min-width: 56px; }
.co-step-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--border); box-sizing: border-box; }
.co-step-lbl { font-size: 10px; color: var(--muted); white-space: nowrap; }
.co-step-line { flex: 1; min-width: 12px; height: 2px; background: var(--border); margin: 6px 2px 0; }
.co-step.done .co-step-dot { background: var(--gem-emerald,#34d399); border-color: var(--gem-emerald,#34d399); }
.co-step.done .co-step-lbl { color: var(--text2); }
.co-step.cur .co-step-dot { background: var(--gem-sapphire,#60a5fa); border-color: var(--gem-sapphire,#60a5fa); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gem-sapphire,#60a5fa) 22%, transparent); }
.co-step.cur .co-step-lbl { color: var(--gem-sapphire,#60a5fa); font-weight: 700; }

/* ── Ekip per-ajan hover animasyonu (D4) — avatar üstüne mp4 overlay ── */
.agent-card .ac-avatar { position: relative; }
.agent-card .ac-anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: inherit; z-index: 3; background: #000; animation: acAnimFade .25s ease; }
@keyframes acAnimFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Client OS Finans + Reklam modülleri (D7) ── */
.co-fin-bal { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.co-fin-lbl { font-size: 12px; color: var(--text2); }
.co-fin-amt { font-size: 22px; font-weight: 800; }
.gb-co-adswrap .co-ads-ch { padding: 8px 0; }
.gb-co-adswrap .co-ads-ch + .co-ads-ch { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; }
.co-ads-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }

/* ── Holding-KPI Değer & Emek kartı (D8) ── */
.ve-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.ve-head { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.ve-sub { font-size: 11px; font-weight: 500; color: var(--text2); margin-left: 6px; }
.ve-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ve-tile { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 14px 16px; }
.ve-t-lbl { font-size: 12px; color: var(--text2); }
.ve-t-val { font-size: 24px; font-weight: 800; margin: 4px 0; }
.ve-t-sub { font-size: 11px; color: var(--muted); }
.ve-table { margin-top: 4px; }
.ve-note { font-size: 11px; color: var(--muted); margin-top: 8px; }