/* Hallmark · macrostructure: app-shell (component-scope · skipping macrostructure)
 * theme: studied-DNA (source: image — user reference, soft SaaS dashboard concept)
 * paper light oklch(96% 0.004 90) · paper dark oklch(17% 0.005 250) · accent #ff601f (mevcut marka, korunuyor)
 * display+body: Plus Jakarta Sans (tek aile, ağırlık kontrastı) · label: yok
 * dil: kart+gölge+büyük radius (kutu diyeti askıya alındı — pilot) · sidebar: yüzen koyu nötr pill
 * studied: yes · DNA-source: kullanıcı referans görselleri · pilot: kabuk + Panel + Kanban
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 *
 * PILOT DOSYASI — styles.css'e dokunulmadı. Geri almak için index.html'den bu
 * dosyanın <link> satırını sil. Onaylanırsa design.md yeniden yazılıp kalan
 * görünümler bu dile taşınacak.
 */

/* ── 1 · Token katmanı ─────────────────────────────────────── */
:root {
  --bg: #f2f2ef;
  --bg-elev: #ffffff;
  --bg-sunken: #e9e9e5;
  --panel: #ffffff;
  --panel-2: #fafaf8;
  --border: #ececea;
  --border-strong: #dcdcd8;

  --shadow-sm: 0 1px 2px rgba(20, 22, 20, .04);
  --shadow-md: 0 2px 6px rgba(20, 22, 20, .05), 0 12px 32px -12px rgba(20, 22, 20, .08);
  --shadow-lg: 0 24px 56px -16px rgba(20, 22, 20, .16), 0 8px 20px -8px rgba(20, 22, 20, .07);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --font-body: 'Plus Jakarta Sans', 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-body);

  /* Yüzen koyu ray */
  --rail-bg: #1b1d1f;
  --rail-text: #f4f4f2;
  --rail-muted: rgba(244, 244, 242, .55);
  --rail-faint: rgba(244, 244, 242, .38);
  --rail-line: rgba(255, 255, 255, .08);
  --rail-hover: rgba(255, 255, 255, .07);
  --rail-active: rgba(255, 255, 255, .10);
  --card-topline: rgba(255, 255, 255, .04);
}

html[data-theme="dark"] {
  --bg: #0e1012;
  --bg-elev: #1a1d20;
  --bg-sunken: #090a0c;
  --panel: #191c1f;
  --panel-2: #1f2326;
  --border: #26292c;
  --border-strong: #34383c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, .65), 0 8px 20px -8px rgba(0, 0, 0, .45);

  --rail-bg: #17191c;
  --rail-line: rgba(255, 255, 255, .07);
}

body { letter-spacing: -0.01em; }

/* Eski kimliğin imzaları pilotta sussun */
.dash-rule { display: none; }

/* ── 2 · Yüzen koyu sidebar pill ───────────────────────────── */
/* Ray içindeki tüm çocuklar scoped token'larla otomatik koyulaşır —
   tek tek bileşen ezmeye gerek kalmaz. */
.sidebar {
  background: var(--rail-bg);
  border-right: none;
  --panel: transparent;
  --panel-2: var(--rail-hover);
  --bg-sunken: var(--rail-hover);
  --border: var(--rail-line);
  --border-strong: rgba(255, 255, 255, .16);
  --text: var(--rail-text);
  --text-2: var(--rail-text);
  --text-muted: var(--rail-muted);
  --text-faint: var(--rail-faint);
  --accent-soft: rgba(255, 96, 31, .16);
  --accent-text: #ffb08a;
  --shadow-sm: none;
}
@media (min-width: 961px) {
  .app { column-gap: 0; }
  .sidebar {
    margin: 14px 0 14px 14px;
    border-radius: var(--r-xl);
    height: calc(100vh - 28px);
    box-shadow: 0 16px 40px -18px rgba(15, 17, 15, .35);
  }
  .sidebar-resize-handle { display: none; }
}
/* Koyu ray üzerinde her temada açık-renk logo kullan */
.sidebar .sidebar-logo-light { display: none; }
.sidebar .sidebar-logo-dark  { display: block; }
.sidebar-header { border-bottom-color: var(--rail-line); }
.nav-item, .project-item { border-radius: var(--r-md); }
.nav-item.active, .project-item.active {
  background: var(--rail-active);
  color: var(--rail-text);
}

/* ── 3 · Topbar: çizgisiz, zemine karışan ──────────────────── */
.topbar {
  background: transparent;
  border-bottom: none;
  height: 68px;
  padding: 0 28px;
}
.view-tabs {
  background: var(--panel);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}
.view-tab { border-radius: 999px; }
.topbar-period-select, .search-box input { border-radius: 999px; }

/* ── 4 · Butonlar: düz dolgu, yumuşak köşe ─────────────────── */
.btn { border-radius: var(--r-md); }
.btn-primary {
  background: var(--accent);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 90%, #000);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.icon-btn { border-radius: var(--r-sm); }

/* ── 5 · Kanban: şeffaf kolon + beyaz yumuşak kart ─────────── */
.kanban { gap: 20px; padding: 8px 28px 48px; }
.kanban-col {
  background: transparent;
  border: none;
  padding: 0 2px;
}
.kanban-col-header {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 13.5px;
}
.kanban-col-header .col-add { border-radius: 999px; }
.kanban-col-header .col-add:hover { background: var(--bg-sunken); }
.kanban-list { gap: 12px; }
.task-card {
  border: none;
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-md);
}
.task-card:hover {
  border: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
html[data-theme="dark"] .task-card {
  box-shadow: inset 0 1px 0 var(--card-topline), var(--shadow-md);
}

/* ── 6 · Panel (Dashboard): kart dili ──────────────────────── */
.content { padding: 24px 32px 90px; }
.dash-greeting { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.card, .insight-card, .icard, .stat-card {
  border: none;
  box-shadow: var(--shadow-md);
  border-radius: var(--r-lg);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .insight-card,
html[data-theme="dark"] .icard,
html[data-theme="dark"] .stat-card {
  box-shadow: inset 0 1px 0 var(--card-topline), var(--shadow-md);
}
.dash-chip, .workload-pill { border-radius: 999px; }
.dash-overall-bar { border-radius: 999px; overflow: hidden; }

/* ── 7 · Mobil: alt nav + drawer yeni dile uysun ───────────── */
@media (max-width: 960px) {
  .sidebar { border-radius: 0 var(--r-xl) var(--r-xl) 0; border-right: none; }
  .tablet-bottom-nav { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

/* ── 8 · Kalan görünümler: kart dili yayılımı ──────────────── */
/* Eski kimliğin cetvel imzası her yerde sussun */
.arc-empty::after,
.rp-empty-state::after,
.finance-empty::after { display: none; }

/* Kart yüzeyleri: çizgi yerine gölge */
.fn-kpi, .fn-goal-strip,
.crm-kpi, .crm-deal-card, .crm-contact-card,
.cc-card,
.ce-panel, .members-modal, .confirm-box {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.fn-kpi:hover, .crm-deal-card:hover, .cc-card:hover { box-shadow: var(--shadow-lg); }
html[data-theme="dark"] .fn-kpi,
html[data-theme="dark"] .crm-kpi,
html[data-theme="dark"] .crm-deal-card,
html[data-theme="dark"] .cc-card,
html[data-theme="dark"] .ce-panel,
html[data-theme="dark"] .members-modal {
  box-shadow: inset 0 1px 0 var(--card-topline), var(--shadow-md);
}

/* CRM pipeline: Kanban ile aynı dil — şeffaf kolon, kartlar taşır */
.crm-pipe-col, .crm-closed-group {
  background: transparent;
  border-color: transparent;
}
.crm-deal-card { border-radius: var(--r-lg); }

/* Görev paneli (drawer): yüzen yüzey gibi sol köşeleri yumuşat */
.drawer { border-radius: var(--r-xl) 0 0 var(--r-xl); }
@media (max-width: 960px) { .drawer { border-radius: var(--r-xl) var(--r-xl) 0 0; } }

/* Liste görünümü: tablo beyaz kart üstünde otursun */
.list-table {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
html[data-theme="dark"] .list-table {
  box-shadow: inset 0 1px 0 var(--card-topline), var(--shadow-md);
}

/* Modal örtüsü biraz daha yumuşak */
.modal-overlay, .confirm-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ── 9 · Panel yükseltmesi (redesign-skill denetimi) ───────── */
/* Stat kartları: büyük sessiz rakam + mikro etiket — referans DNA hiyerarşisi */
.icard { padding: 16px 18px; gap: 4px; text-align: left; align-items: stretch; }
.icard-val {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.icard-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.icard-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text-muted);
}
.icard.icard-ok .icard-icon   { background: var(--status-done-bg); }
.icard.icard-risk .icard-icon { background: var(--p-high-bg); }

/* Tıklanabilir kartlar: canlı hover + fiziksel basma hissi */
.icard.icard-click:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.icard.icard-click:active { transform: scale(.985); box-shadow: var(--shadow-sm); }
.dash-chip { transition: transform .1s, background .12s; }
.dash-chip:active { transform: scale(.95); }

/* Trend çipleri v2 pill dilinde */
.icard-trend { border-radius: 999px; padding: 2px 8px; }

/* Rakam taşıyan her yüzey tabular hizada */
.wsd-num, .velocity-count, .dash-today-ring-lbl, .icard-trend { font-variant-numeric: tabular-nums; }

/* Selamlama: orphan kelime engeli + dengeli satır kırılımı */
.dash-greeting { text-wrap: balance; }

/* ── 10 · AI Asistan — uçan buton + sohbet paneli ──────────── */
.aw-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-lg);
  transition: transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s;
}
.aw-fab:hover { transform: translateY(-2px) scale(1.04); }
.aw-fab:active { transform: scale(.94); }
.aw-fab.active { background: var(--text); }
@media (max-width: 960px) {
  .aw-fab { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
}

.aw-panel {
  position: fixed; right: 24px; bottom: 88px; z-index: 500;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 140px));
  background: var(--panel);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: aw-in .18s cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"] .aw-panel { box-shadow: inset 0 1px 0 var(--card-topline, rgba(255,255,255,.04)), var(--shadow-lg); }
@keyframes aw-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .aw-panel { right: 16px; left: 16px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); }
}

.aw-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.aw-head-icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex-shrink: 0; }
.aw-head-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.aw-head-sub { font-size: 11px; color: var(--text-faint); margin-top: 1px; }

.aw-list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.aw-empty { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; padding: 8px 2px; }
.aw-msg { max-width: 85%; padding: 9px 13px; border-radius: var(--r-lg); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.aw-msg-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.aw-msg-assistant { align-self: flex-start; background: var(--bg-sunken); color: var(--text); border-bottom-left-radius: 4px; }
.aw-msg-system { align-self: center; background: var(--status-done-bg); color: var(--accent-text); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 12px; }
.aw-msg-error { align-self: center; background: var(--p-high-bg); color: var(--p-high); font-size: 12px; border-radius: 999px; padding: 6px 12px; }
.aw-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.aw-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: aw-bounce 1.1s infinite ease-in-out; }
.aw-typing span:nth-child(2) { animation-delay: .15s; }
.aw-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aw-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.aw-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); flex-shrink: 0; }
.aw-input { flex: 1; resize: none; border: none; background: var(--bg-sunken); border-radius: var(--r-md); padding: 9px 12px; font: inherit; font-size: 13px; color: var(--text); max-height: 90px; }
.aw-input:focus { outline: 2px solid var(--accent-ring, color-mix(in srgb, var(--accent) 30%, transparent)); outline-offset: 0; }
.aw-send { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--accent); color: #fff; transition: transform .1s, opacity .15s; }
.aw-send:disabled { opacity: .4; }
.aw-send:not(:disabled):active { transform: scale(.9); }

.aw-upsell { padding: 20px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aw-upsell-icon { font-size: 28px; }
.aw-upsell p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .aw-fab, .aw-panel, .aw-typing span { animation: none !important; transition: none !important; } }