/* ============================================================================
   Tasarım Token'ları — sürüm 9.2: Slate paleti, rounded-lg/xl köşeler.
   ========================================================================= */
:root {
  /* Surface (zemin) tonları */
  --surface: #eef2f6;
  --surface-container-lowest: #f8fafc;
  --surface-container-low: #f1f5f9;
  --surface-container: #e5eaf1;
  --surface-container-high: #dde4ed;
  --surface-container-highest: #cfd8e3;
  --surface-dim: #c2ccd9;

  /* Metin tonları */
  --on-surface: #0f172a;
  --on-surface-variant: #475569;
  --outline: #64748b;
  --outline-variant: #d6dee9;

  /* Marka / birincil renk */
  --primary: #1d4ed8;
  --on-primary: #ffffff;
  --primary-container: #2563eb;
  --on-primary-container: #eff6ff;
  --primary-fixed-dim: #bfdbfe;

  /* İkincil renk (nav aktif durumu) */
  --secondary: #475569;
  --secondary-container: #dfe8f8;
  --on-secondary-container: #1e3a8a;

  /* Üçüncül renk (uyarı / bekleyen durum, turuncu) */
  --tertiary: #b45309;
  --tertiary-container: #d97706;
  --on-tertiary-container: #92400e;
  --tertiary-container-soft: #fef3c7;

  /* Hata rengi (kaybedilen / negatif) */
  --error: #b91c1c;
  --error-container: #fee2e2;
  --on-error-container: #991b1b;

  /* Başarı rengi (kazanılan / pozitif) — mockup setinde yok, aynı sistematikle türetildi */
  --success: #15803d;
  --success-container: #dcfce7;
  --on-success-container: #166534;

  /* Eski değişken adları — app.js içinde satır-içi (inline) stil olarak
     kullanılıyor, isimleri koruyoruz ki JS dosyasına dokunmayalım. */
  --accent: var(--primary);
  --accent-2: var(--success);
  --danger: var(--error);
  --warn: var(--tertiary-container);

  /* Köşe yuvarlama */
  --radius-xs: 2px;   /* rounded-DEFAULT  (0.125rem) */
  --radius-sm: 4px;   /* rounded-lg       (0.25rem)  */
  --radius-md: 8px;   /* rounded-xl       (0.5rem)   */
  --radius-full: 999px;
  --radius: var(--radius-sm);

  /* Tipografi */
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Grafik jetonları (Dönem Trendi SVG'si bunları okur) */
  --g-izgara: #e2e8f0; --g-eksen: #64748b; --g-eksen2: #1d4ed8; --g-deger: #334155; --g-nokta: #ffffff;
  --g-kazan1: #34a96a; --g-kazan2: #1f7f4a; --g-kayip1: #ec9791; --g-kayip2: #d4605a; --g-mavi: #2563eb; --g-yesil: #1f8a4c; --g-cizgi: #1d4ed8;
  --g-hatch: rgba(115,118,134,.55);
  --vurgu-sinir: #bfd3fb; --vurgu-zemin: linear-gradient(180deg, #f5f8ff, #e9f0fd); --rozet-zemin: #dbe7fd; --ilerleme-zemin: #d9e3f3;
  --ipucu-zemin: rgba(15,23,42,.95);
  color-scheme: light;

  /* Boşluk birimleri */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px;
}

* { box-sizing: border-box; }

.vw-model-notu { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--vurgu-sinir); border-left: 3px solid var(--primary); border-radius: var(--radius-md); background: var(--vurgu-zemin); color: var(--on-surface); }
.vw-model-notu strong { display: block; margin-bottom: 6px; font-size: 14px; }
.vw-model-notu p { margin: 5px 0 0; color: var(--on-surface-variant); font-size: 12.5px; line-height: 1.55; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--on-surface);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; height: 100vh; }

/* ---------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------- */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface-container-lowest);
  border-right: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  padding: var(--sp-lg) 0 var(--sp-lg);
}

.brand { display: flex; align-items: center; gap: var(--sp-md); padding: 0 var(--sp-md) var(--sp-xl); }
.brand-mark {
  width: 40px; height: 40px; border-radius: var(--radius-xs);
  background: var(--surface-container-highest);
  border: 1px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-surface-variant); flex-shrink: 0;
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-title { font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--on-surface); }
.brand-sub { font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; }

.nav { display: flex; flex-direction: column; gap: 4px; padding: 0 var(--sp-md); flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-sm);
  background: none; border: none; color: var(--on-surface-variant);
  padding: 10px 12px; border-radius: var(--radius-xs); text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background .15s, color .15s; width: 100%;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-container-highest); color: var(--on-surface); }
.nav-item.active { background: var(--secondary-container); color: var(--on-secondary-container); }

.sidebar-footer {
  margin-top: auto; padding: var(--sp-md) var(--sp-md) 0; border-top: 1px solid var(--outline-variant);
  display: flex; flex-direction: column; gap: 2px;
}
.footer-link {
  display: flex; align-items: center; gap: var(--sp-sm);
  color: var(--on-surface-variant); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 10px 12px; border-radius: var(--radius-xs); cursor: pointer; background: none; border: none; text-align: left;
  text-decoration: none;
}
.footer-link:hover { background: var(--surface-container-highest); color: var(--on-surface); }
.footer-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.footer-note { font-size: 11px; color: var(--outline); padding: 6px 12px 0; }

/* ---------------------------------------------------------------------
   Ana çalışma alanı / Üst bar
   ------------------------------------------------------------------- */
.main-workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }

.topbar {
  height: 64px; flex-shrink: 0;
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-lg);
}
.topbar-search { position: relative; width: 340px; max-width: 40vw; }
.workspace-switcher { display: grid; gap: 3px; width: 100%; }
.workspace-switcher > span { color: var(--on-surface-variant); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.workspace-switcher select { width: 100%; min-width: 220px; height: 38px; padding: 0 32px 0 11px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface); color: var(--on-surface); font: inherit; font-size: 13px; }
.workspace-switcher select:disabled { opacity: .78; cursor: default; }
.workspace-switcher select:not(:disabled) { cursor: pointer; }
.topbar-search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--on-surface-variant); pointer-events: none;
}
.topbar-search input {
  width: 100%; background: var(--surface); border: 1px solid var(--outline-variant);
  color: var(--on-surface); border-radius: var(--radius-xs);
  padding: 9px 12px 9px 34px; font-size: 12px; outline: none; font-family: var(--font-body);
}
.topbar-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.topbar-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-xs); color: var(--on-surface-variant);
  cursor: pointer; transition: background .15s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--surface-container-high); }
.avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full); margin-left: 6px;
  border: 1px solid var(--outline-variant); background: var(--surface-container-highest);
  display: flex; align-items: center; justify-content: center; color: var(--on-surface-variant);
}
.avatar svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------
   İçerik
   ------------------------------------------------------------------- */
.content { flex: 1; overflow-y: auto; padding: var(--sp-lg); max-width: 1440px; margin: 0 auto; width: 100%; }
.view.hidden { display: none; }
.view-header { margin-bottom: var(--sp-lg); }
.view-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-md); flex-wrap: wrap; }
.view-header-actions { display: flex; align-items: center; gap: var(--sp-md); }
.export-btn-group { display: flex; align-items: center; gap: 8px; }
.son-guncelleme { font-size: 11.5px; color: var(--on-surface-variant); }
.btn-secondary {
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); color: var(--on-surface);
  border-radius: 4px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-secondary:hover { background: var(--surface-container-low); }
.panel-header-sub { font-weight: 400; color: var(--on-surface-variant); font-size: 11.5px; }
.cards-secondary { margin-top: -8px; }
.row-critical { background: rgba(186,26,26,0.07); }
.row-critical td:last-child { color: var(--error); font-weight: 700; }

/* ---------- Satış Hunisi ---------- */
.funnel { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.funnel-stage { display: flex; align-items: center; gap: 12px; }
.funnel-bar-wrap { flex: 1; background: var(--surface-container-low); border-radius: 4px; overflow: hidden; height: 34px; position: relative; }
.funnel-bar { height: 100%; display: flex; align-items: center; padding-left: 12px; color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 4px; transition: width .3s; }
.funnel-label { width: 190px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; text-align: right; }
.funnel-note { font-size: 11px; color: var(--on-surface-variant); margin-top: 6px; }
.funnel-pay { width: 170px; flex-shrink: 0; font-size: 11.5px; color: var(--on-surface-variant); }
.funnel-ozet { font-size: 12px; color: var(--on-surface-variant); margin: 10px 0 0; line-height: 1.5; }

/* ---------- Aktivite Akışı ---------- */
.activity-feed { display: flex; flex-direction: column; gap: 0; max-height: 320px; overflow-y: auto; }
.activity-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--outline-variant); font-size: 12.5px; }
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; flex-shrink: 0; }
.activity-dot.won { background: var(--success); }
.activity-dot.lost { background: var(--error); }
.activity-dot.pending { background: var(--tertiary-container); }
.activity-text b { font-weight: 600; }
.activity-time { color: var(--on-surface-variant); font-size: 11px; margin-top: 2px; }

/* ---------- Kayıp Nedeni modalı ---------- */
.kayip-nedeni-secenekler { display: flex; flex-direction: column; gap: 8px; }
.kayip-nedeni-btn {
  text-align: left; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest); cursor: pointer; font-size: 13px; font-weight: 500;
}
.kayip-nedeni-btn:hover { background: var(--surface-container-low); border-color: var(--primary); }
.btn-link-sm { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; font-weight: 600; }

/* ---------- Hedef girişleri (Aylık Satış Cirosu grafiğinin altında) ---------- */
.hedef-girisleri { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.hedef-girisleri label { font-size: 11px; color: var(--on-surface-variant); display: flex; flex-direction: column; gap: 3px; }
.hedef-girisleri input {
  width: 110px; padding: 5px 7px; border-radius: 4px; border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest); font-size: 12px; color: var(--on-surface);
}
.view-header h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.view-header p { margin: 0; color: var(--on-surface-variant); font-size: 13px; }

/* ---------------------------------------------------------------------
   İstatistik kartları (cards)
   ------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.card {
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xs);
  padding: var(--sp-md);
}
.card .label { color: var(--on-surface-variant); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.card .value { font-size: 24px; font-weight: 700; font-family: var(--font-mono); }
.card .sub { font-size: 11.5px; margin-top: 4px; color: var(--on-surface-variant); }
.card.accent-green .value { color: var(--success); }
.card.accent-red .value { color: var(--error); }
.card.accent-blue .value { color: var(--primary); }
.card.accent-amber .value { color: var(--tertiary); }

/* ---------------------------------------------------------------------
   Paneller
   ------------------------------------------------------------------- */
.panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-lg); margin-bottom: var(--sp-lg); }
.panel {
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xs);
  padding: var(--sp-md); margin-bottom: var(--sp-lg);
}
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-md); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--outline-variant); }
.panel-header h2 { margin: 0; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
canvas { width: 100%; display: block; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------------
   Araç çubuğu (arama / filtre)
   ------------------------------------------------------------------- */
.toolbar { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-md); flex-wrap: wrap; }
.toolbar input, .toolbar select {
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); color: var(--on-surface);
  border-radius: var(--radius-xs); padding: 9px 12px; font-size: 13px; outline: none; font-family: var(--font-body);
}
.toolbar input { flex: 1; min-width: 220px; }
.toolbar input:focus, .toolbar select:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* ---------------------------------------------------------------------
   Tablolar
   ------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--outline-variant); border-radius: var(--radius-xs); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 10px 12px; color: var(--on-surface-variant);
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  cursor: default; user-select: none;
}
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--on-surface); }
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--outline-variant); white-space: nowrap; font-size: 13px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-container-low); cursor: pointer; }

.badge { padding: 3px 9px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; display: inline-block; }
.badge.win { background: var(--primary); color: var(--on-primary); }
.badge.lose { background: var(--error-container); color: var(--on-error-container); }
.badge.pending { background: var(--tertiary-container-soft); color: var(--on-tertiary-container); }
.badge.other { background: var(--surface-container-highest); color: var(--on-surface-variant); }

/* ---------------------------------------------------------------------
   Sayfalama
   ------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: var(--sp-sm); justify-content: flex-end; padding: var(--sp-md) 4px 0; }
.pagination button {
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); color: var(--on-surface);
  border-radius: var(--radius-xs); padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 500;
}
.pagination button:hover:not(:disabled) { background: var(--surface-container-low); }
.pagination button:disabled { opacity: .4; cursor: default; }
.pagination .info { color: var(--on-surface-variant); font-size: 12px; margin: 0 6px; }

/* ---------------------------------------------------------------------
   Modal
   ------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm);
  width: min(760px, 92vw); max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 30px rgba(25,28,30,0.25);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-md) var(--sp-md); border-bottom: 1px solid var(--outline-variant); }
.modal-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-header button { background: none; border: none; color: var(--on-surface-variant); font-size: 18px; cursor: pointer; width: 28px; height: 28px; border-radius: var(--radius-xs); }
.modal-header button:hover { background: var(--surface-container-high); color: var(--on-surface); }
.modal-body { padding: var(--sp-md); overflow-y: auto; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin-bottom: var(--sp-md); }
.detail-grid div span.k { display: block; color: var(--on-surface-variant); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.detail-grid div span.v { font-size: 13.5px; font-weight: 500; }

.empty-state { text-align: center; padding: 40px; color: var(--on-surface-variant); }

/* ---------------------------------------------------------------------
   Müşteri Profili (Party / ProductOffering / Quote / Account)
   ------------------------------------------------------------------- */
.link-btn { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12.5px; font-weight: 500; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.breadcrumb { color: var(--on-surface-variant); font-size: 12px; margin-bottom: 6px; }
.breadcrumb-header { display: flex; justify-content: space-between; align-items: flex-end; }

.mp-note { color: var(--on-surface-variant); font-size: 12px; margin-top: var(--sp-sm); line-height: 1.6; }

/* Yerinde düzenlenebilir alanlar (Kuruluş Yılı, Sektör, Firma Tipi, Kâr marjı) */
dd.editable {
  cursor: text; border-radius: var(--radius-xs); padding: 1px 5px; margin: -1px -5px;
  outline: none; border: 1px solid transparent;
}
dd.editable:hover { background: var(--surface-container-low); border-color: var(--outline-variant); }
dd.editable:focus { background: var(--surface-container-low); border-color: var(--primary); }
dd.editable:empty::before { content: 'Girin...'; color: var(--outline); font-style: italic; font-weight: 400; }
.editable-inline {
  outline: none; border-bottom: 1px dashed var(--outline); cursor: text; padding: 0 2px;
}
.editable-inline:focus { border-bottom-color: var(--primary); color: var(--primary); }
.mp-hint { font-size: 10.5px; opacity: .7; }
.accent-amber { color: var(--tertiary); }

/* ---------- Parti Profili Başlığı (isim + 5 alan tek blokta) ---------- */
.party-header { padding: var(--sp-md); }
.party-header-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-md); }
.party-header-top h1 { margin: 0; font-size: 24px; font-weight: 700; }
.party-sub { color: var(--on-surface-variant); font-size: 13px; margin-top: 2px; }
.party-stats { display: flex; align-items: center; gap: var(--sp-md); margin: 0; flex-wrap: wrap; }
.party-stats > div { display: flex; flex-direction: column; min-width: 90px; }
.party-stats dt { color: var(--on-surface-variant); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.party-stats dd { margin: 0; font-size: 13px; font-family: var(--font-mono); color: var(--on-surface); }
.party-sep { width: 1px; height: 32px; background: var(--outline-variant); flex-shrink: 0; }

.panels-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.panel-header-sub { font-weight: 400; color: var(--on-surface-variant); font-size: 12px; text-transform: none; letter-spacing: 0; }
.tag-soft {
  background: none; color: var(--on-surface-variant);
  font-size: 11px; padding: 0; border-radius: 0; font-weight: 400;
}
.tag-muted { opacity: .7; }
.badge-pill {
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--radius-full);
}

/* Hesap Temsilcisi */
.rep-block { display: flex; align-items: flex-start; gap: var(--sp-md); }
.rep-avatar {
  width: 42px; height: 42px; border-radius: var(--radius-full);
  background: rgba(29,78,216,0.1); color: var(--primary); border: 1px solid rgba(29,78,216,0.2);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.rep-name { font-size: 14.5px; font-weight: 600; }
.rep-sub { font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; }

/* Fiyat Geçmişi */
.price-history-list { display: flex; flex-direction: column; border: 1px solid var(--outline-variant); border-radius: var(--radius-xs); overflow: hidden; }
.price-history-row {
  display: flex; justify-content: space-between; font-size: 13px; padding: 8px 12px;
  border-bottom: 1px solid var(--outline-variant); background: var(--surface);
}
.price-history-row:nth-child(even) { background: var(--surface-container-lowest); }
.price-history-row:last-child { border-bottom: none; }
.price-history-row span:first-child { font-family: var(--font-mono); color: var(--on-surface-variant); }
.price-history-row .val { font-weight: 600; font-family: var(--font-mono); }

/* Aktif Teklif Yapısı — 5 metrik kartı */
.aqs-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-md); margin-bottom: var(--sp-md); }
.aqs-metric { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-xs); padding: var(--sp-sm) 12px; display: flex; flex-direction: column; justify-content: space-between; }
.aqs-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 6px; }
.aqs-value { font-size: 18px; font-weight: 700; font-family: var(--font-mono); }
.aqs-value-sm { font-size: 12.5px; font-weight: 600; line-height: 1.4; font-family: var(--font-body); margin-top: 2px; }
.aqs-sub { font-size: 11px; color: var(--on-surface-variant); margin-top: 4px; }

/* Geçmiş Teklifler kartları */
.hq-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.hq-item { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-xs); padding: var(--sp-sm) 12px; font-size: 12.5px; }
.hq-item-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hq-item-top span:first-child { font-family: var(--font-mono); color: var(--on-surface-variant); font-size: 11px; }
.hq-item-row { display: flex; justify-content: space-between; color: var(--on-surface-variant); margin-top: 2px; font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.hq-item-total { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--outline-variant); font-weight: 700; font-family: var(--font-mono); }

/* Stok Durumu */
.stock-slot {
  border: 2px dashed var(--outline-variant); border-radius: var(--radius-xs); padding: 30px 10px; text-align: center;
  color: var(--outline); font-size: 12px; margin-bottom: var(--sp-md); flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px;
  background: var(--surface);
}
.stock-slot-icon { margin-bottom: 8px; opacity: .5; }
.stock-slot-icon svg { width: 32px; height: 32px; }
.stock-slot > div:nth-child(2) { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--outline); }
.stock-slot-sub { font-size: 11px; margin-top: 4px; opacity: .8; font-family: var(--font-mono); }
.stock-mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); margin-top: auto; }
.stock-mini > div { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-xs); padding: var(--sp-sm) 12px; }
.stock-mini dt { color: var(--on-surface-variant); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.stock-mini dd { margin: 0; font-size: 15px; font-weight: 700; font-family: var(--font-mono); }

/* Kabul Etme Olasılığı banner'ı */
.accept-banner {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md);
  background: var(--surface-container-lowest);
  border-color: var(--primary-fixed-dim);
}
.accept-banner-title { font-weight: 600; font-size: 13px; color: var(--primary); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.accept-banner-sub { font-size: 11.5px; color: var(--on-surface-variant); max-width: 640px; line-height: 1.5; }
.accept-banner-score { font-size: 28px; font-weight: 800; color: var(--primary); flex-shrink: 0; font-family: var(--font-mono); }

/* ---------------------------------------------------------------------
   Duyarlı (responsive) düzen
   ------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .panels, .panels-2col { grid-template-columns: 1fr; }
  .topbar-search { display: none; }
  .topbar-search#calismaAlani { display: block; width: 220px; max-width: 40vw; }
}

/* ---------------------------------------------------------------------
   Tahmin ekranı
   ------------------------------------------------------------------- */
.tahmin-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.tahmin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.tahmin-form .hint { font-weight: 400; color: var(--outline); }
.tahmin-form input, .tahmin-form select {
  padding: 8px 10px; font-size: 13px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm);
  background: var(--surface-container-lowest); color: var(--on-surface); font-family: inherit; outline: none;
}
.tahmin-form input:focus, .tahmin-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tahmin-actions { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-md); }
.btn-primary { background: var(--primary); color: var(--on-primary); border: none; padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-primary:hover { background: var(--primary-container); }
.th-hata { color: var(--error); font-size: 12px; }
.th-not { margin-top: var(--sp-md); font-size: 11.5px; color: var(--on-surface-variant); line-height: 1.5; }
.th-bos { color: var(--outline); font-size: 13px; padding: var(--sp-md) 0; }
.th-prob { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.th-prob small { font-size: 13px; font-weight: 500; color: var(--on-surface-variant); letter-spacing: 0; margin-left: 8px; }
.th-bar { height: 8px; background: var(--surface-container-high); border-radius: 4px; margin: 12px 0 14px; overflow: hidden; }
.th-bar > div { height: 100%; border-radius: 4px; }
.th-satir { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--surface-container); }
.th-satir span:first-child { color: var(--on-surface-variant); }
.th-oneri { margin-top: var(--sp-md); font-size: 13px; line-height: 1.55; padding: 12px 14px; background: var(--surface-container-low); border-left: 3px solid var(--primary); }
.th-oneri .uyari { color: var(--tertiary); }

/* Tahmin ekranı — ⓘ bilgi kutuları, uyarılar, model satırları, rapor sekmeleri */
.th-info-wrap { position: relative; display: inline-block; }
.th-info { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); color: var(--primary); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.th-info:hover, .th-info[aria-expanded="true"] { background: var(--primary); color: var(--on-primary); }
.th-pop { position: absolute; z-index: 30; top: 32px; left: 0; width: 420px; max-width: 80vw; max-height: 70vh; overflow: auto; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 14px 16px; font-size: 12.5px; line-height: 1.55; font-weight: 400; color: var(--on-surface); }
.th-pop-right { left: auto; right: 0; }
.th-pop h3 { margin: 0 0 8px; font-size: 14px; }
.th-pop p { margin: 0 0 8px; } .th-pop ol { margin: 0 0 8px; padding-left: 18px; } .th-pop li { margin-bottom: 6px; }
.th-pop-link a { color: var(--primary); font-weight: 600; }
.th-head-tools { display: flex; align-items: center; gap: 10px; }
.th-model-sel { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-surface-variant); }
.th-model-sel select { padding: 4px 6px; font-size: 12px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-container-lowest); }
.th-ipucu { font-weight: 400; font-size: 11px; color: var(--on-surface-variant); line-height: 1.4; }
.th-ipucu a { color: var(--primary); }
.th-ipucu-sari { color: #8a5a00; } .th-ipucu-kirmizi { color: var(--error); }
.th-uyari { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
.th-uyari-kirmizi { background: var(--error-container); color: #5c0a0a; }
.th-uyari-sari { background: #fff4d6; color: #5c4200; }
.th-uyari-mavi { background: #e3ebff; color: #10285e; }
.th-soluk { color: var(--on-surface-variant); font-weight: 400; font-size: 11.5px; }
.th-modeller { margin-top: 14px; }
.th-mod-baslik { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); margin-bottom: 4px; }
.th-mod-satir { display: grid; grid-template-columns: 140px 1fr 56px; gap: 8px; align-items: center; padding: 3px 4px; font-size: 12.5px; cursor: pointer; border-radius: 4px; }
.th-mod-satir:hover { background: var(--surface-container-low); } .th-mod-satir.secili { font-weight: 700; background: var(--surface-container-low); }
.th-mod-bar { height: 6px; background: var(--surface-container-high); border-radius: 3px; overflow: hidden; } .th-mod-bar i { display: block; height: 100%; background: var(--primary); }
.th-mod-p { text-align: right; font-variant-numeric: tabular-nums; }
.th-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--outline-variant); margin-bottom: 14px; flex-wrap: wrap; }
.th-tab { background: none; border: none; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--on-surface-variant); cursor: pointer; border-bottom: 2px solid transparent; }
.th-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.th-pane.hidden { display: none; }
.th-tablo th, .th-tablo td { padding: 7px 10px; text-align: left; vertical-align: top; }
.th-tablo th.sayi, .th-tablo td.sayi { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.th-tablo tr.vurgu td { background: var(--surface-container-low); font-weight: 600; }
.th-tablo td.en-iyi { color: var(--success); font-weight: 700; }
.th-mbar { display: inline-block; width: 46px; height: 6px; background: var(--surface-container-high); border-radius: 3px; vertical-align: middle; margin-right: 6px; overflow: hidden; } .th-mbar i { display: block; height: 100%; }
.th-metin { font-size: 13px; line-height: 1.6; margin: 12px 0; } .th-metin p { margin: 0 0 10px; }
.th-alt-baslik { margin: 20px 0 6px; font-size: 14px; font-weight: 600; }
.th-liste { font-size: 13px; line-height: 1.6; padding-left: 18px; margin: 6px 0 12px; }
#thRaporPanel { margin-top: var(--sp-lg); }

/* ---- rapor v3 eklemeleri ---- */
body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; }
.tag-soft { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; background:var(--surface-container-high); color:var(--on-surface-variant); }
.tag-muted { background:#fdecea; color:#7a1c14; }
.th-yukle { display:flex; gap:8px; margin-bottom:12px; } .th-yukle input { flex:1; padding:7px 9px; border:1px solid var(--outline-variant); border-radius:var(--radius-sm); }
.th-liste { margin:6px 0 0; padding-left:18px; font-size:12.5px; line-height:1.55; }
.th-metin { font-size:12.5px; line-height:1.55; }
.th-alt-baslik { margin:10px 0 6px; font-size:13px; }
.th-tablo td select, .th-tablo td input { padding:4px 6px; border:1px solid var(--outline-variant); border-radius:4px; font-size:12px; background:var(--surface-container-lowest); }
tr.vurgu td { font-weight:700; background:var(--surface-container-low); }
.rapor-icerik { font-size:13px; line-height:1.6; max-width:1100px; }
.rapor-icerik h2 { font-size:20px; margin:4px 0 12px; } .rapor-icerik h3 { font-size:15px; margin:18px 0 8px; }
.rapor-icerik table { border-collapse:collapse; width:100%; margin:10px 0 14px; font-size:12px; display:block; overflow-x:auto; }
.rapor-icerik th, .rapor-icerik td { border:1px solid var(--outline-variant); padding:6px 8px; text-align:left; vertical-align:top; }
.rapor-icerik th { background:var(--surface-container-low); }
#view-tahmin .panels-2col { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
#view-tahmin .table-wrap { overflow-x: auto; }
#thKalemTablo input, #thKalemTablo select { max-width: 100%; }
.teklif-raporlar { margin-bottom: 16px; padding: 0 16px 14px; }
.teklif-raporlar > summary { cursor: pointer; padding: 13px 2px; color: var(--primary); font-weight: 600; }
.teklif-rapor-sekmeler { display: flex; gap: 8px; border-bottom: 1px solid var(--outline-variant); padding-bottom: 10px; }
.teklif-rapor-sekmeler .active { background: var(--secondary-container); color: var(--on-secondary-container); }
.teklif-rapor-icerik h3 { margin: 16px 0 8px; }
.teklif-rapor-icerik h4 { margin: 18px 0 8px; }

.zoom-grup { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.zoom-grup .icon-btn { font-size: 20px; line-height: 1; font-weight: 600; color: var(--on-surface, inherit); }
.zoom-yuzde { border: 0; background: transparent; cursor: pointer; font-size: 12px; min-width: 44px; padding: 6px 4px; border-radius: 6px; color: inherit; }
.zoom-yuzde:hover { background: var(--surface-container-high); }

.tahmin-form .th-alan { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.th-combo { position: relative; }
.tahmin-form .th-combo input { width: 100%; box-sizing: border-box; padding-right: 36px; }
.th-combo-ok { position: absolute; top: 0; right: 0; height: 100%; width: 34px; border: 0; background: transparent; cursor: pointer; color: var(--on-surface-variant); display: flex; align-items: center; justify-content: center; border-radius: 0 var(--radius-md, 6px) var(--radius-md, 6px) 0; }
.th-combo-ok:hover { background: var(--surface-container-high); }
.th-combo-ok svg { width: 16px; height: 16px; transition: transform .15s; }
.th-combo.acik .th-combo-ok svg { transform: rotate(180deg); }
.th-combo-liste { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 2px); max-height: 320px; overflow-y: auto; background: var(--surface-container-lowest, #fff); border: 1px solid var(--outline-variant); border-radius: var(--radius-md, 6px); box-shadow: 0 8px 24px rgba(0,0,0,.18); font-weight: 400; }
.th-combo-liste[hidden] { display: none; }
.th-combo-ust { position: sticky; top: 0; background: var(--surface-container-low, #f4f4f4); color: var(--on-surface-variant); font-size: 11px; padding: 5px 10px; border-bottom: 1px solid var(--outline-variant); }
.th-combo-oge { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; font-size: 13px; color: var(--on-surface); cursor: pointer; }
.th-combo-oge small { color: var(--on-surface-variant); font-size: 11px; white-space: nowrap; }
.th-combo-oge:hover, .th-combo-oge.aktif { background: var(--surface-container-high); }
.th-combo-bos { padding: 10px; font-size: 12.5px; color: var(--on-surface-variant); }

/* Teklif bazında what-if akışı; Tahmin ekranının mevcut düzenini etkilemez. */
.sn-layout { align-items: start; }
.sn-wide { display: block; position: relative; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.sn-wide input { display: block; box-sizing: border-box; width: 100%; margin-top: 5px; }
.sn-results { max-height: 310px; overflow: auto; margin: -5px 0 12px; background: var(--surface-container-lowest, #fff); border: 1px solid var(--outline-variant); border-radius: var(--radius-md, 6px); }
.sn-results.hidden { display: none; }
.sn-result-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface); text-align: left; cursor: pointer; }
.sn-result-item:hover { background: var(--surface-container-high); }
.sn-result-item span { color: var(--on-surface-variant); font-size: 11px; }
.sn-result-empty { padding: 12px; color: var(--on-surface-variant); font-size: 12px; }
.sn-summary { margin: 12px 0; }
.sn-fields { margin-bottom: 14px; }
.sn-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
#snLines select, #snLines input { max-width: none; }
#snLines th, #snLines td { white-space: nowrap; }
#snMessage { font-size: 11px; }
@media (max-width: 1000px) { .sn-layout { grid-template-columns: 1fr; } }

/* ---- Genel Bakış: zaman filtresi + Dönem Trendi ---- */
/* Zaman filtresi çubuğu */
.dt-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 22px; padding: 12px 16px; margin-bottom: var(--sp-md); background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); }
.dt-hazir { display: inline-flex; padding: 2px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); }
.dt-hazir button { border: 0; background: transparent; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--on-surface-variant); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.dt-hazir button:hover { background: var(--surface-container-high); }
.dt-hazir button.aktif { background: var(--primary-container); color: #fff; }
:root[data-theme="dark"] .dt-hazir button.aktif { background: #2f57c4; }
.dt-alan { display: flex; align-items: flex-end; gap: 10px; }
.dt-aralik { padding-left: 22px; border-left: 1px solid var(--outline-variant); }
.dt-bar label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--on-surface-variant); }
.dt-bar select, .dt-bar input { height: 32px; box-sizing: border-box; padding: 0 8px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--on-surface); background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); }
.dt-bar select { min-width: 96px; }
.dt-bar select:disabled { opacity: .5; cursor: not-allowed; }
.dt-bar select:focus, .dt-bar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.dt-bar .aktif-alan { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.dt-ozet { margin-left: auto; align-self: center; text-align: right; font-size: 12px; color: var(--on-surface-variant); line-height: 1.4; }
.dt-ozet b { display: block; font-size: 13px; color: var(--on-surface); font-weight: 700; }
.dt-kapsam { margin: -4px 0 var(--sp-md); font-size: 11.5px; color: var(--on-surface-variant); }
.dt-panel .panel-header { align-items: center; }
.dt-sekmeler { display: inline-flex; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); padding: 2px; }
.dt-sekmeler button { border: 0; background: transparent; padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); border-radius: 6px; cursor: pointer; }
.dt-sekmeler button.aktif { background: var(--surface-container-lowest); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dt-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-md); margin-bottom: var(--sp-md); }
.dt-tile { position: relative; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); padding: 12px 14px 12px; background: linear-gradient(180deg, var(--surface-container-lowest), var(--surface)); min-height: 112px; }
.dt-tile-vurgu { border-color: var(--vurgu-sinir); background: var(--vurgu-zemin); }
.dt-tile-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.dt-tile-ad { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); }
.dt-tile-deger { font-size: 24px; font-weight: 700; font-family: var(--font-mono); color: var(--on-surface); line-height: 1.15; }
.dt-tile-alt { font-size: 11.5px; color: var(--on-surface-variant); margin-top: 3px; line-height: 1.4; padding-right: 100px; }
.dt-tile-vurgu .dt-tile-alt { padding-right: 0; }
.dt-kucuk { font-size: 11px; }
.dt-spark { position: absolute; right: 12px; bottom: 12px; }
.dt-delta { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.dt-delta.iyi { color: var(--on-success-container); background: var(--success-container); }
.dt-delta.kotu { color: var(--on-error-container); background: var(--error-container); }
.dt-delta.nötr, .dt-delta.yok { color: var(--on-surface-variant); background: var(--surface-container); font-weight: 600; }
.dt-rozet { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--primary); background: var(--rozet-zemin); padding: 2px 8px; border-radius: 999px; }
.dt-ilerleme { height: 6px; background: var(--ilerleme-zemin); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.dt-ilerleme i { display: block; height: 100%; background: linear-gradient(90deg, var(--g-mavi), var(--g-cizgi)); border-radius: 3px; }
.dt-grafik-alan { position: relative; border: 1px solid var(--surface-container); border-radius: var(--radius-md); padding: 8px 4px 0; background: var(--surface-container-lowest); }
.dt-grafik svg { display: block; overflow: visible; }
.dt-izgara { stroke: #e2e8f0; stroke-width: 1; }
.dt-eksen { font-size: 11px; fill: #64748b; font-family: var(--font-sans, inherit); }
.dt-eksen-sag { fill: #1d4ed8; }
.dt-deger { font-size: 10.5px; font-weight: 700; fill: #334155; }
.dt-kilavuz { stroke: #64748b; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.dt-veriyok { fill: #f1f5f9; }
.dt-bos { padding: 60px 0; text-align: center; color: var(--outline); font-size: 13px; }
.dt-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--on-surface-variant); }
.dt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dt-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dt-nokta.gri { background: var(--surface-dim); }
.dt-nokta.hatch { background: repeating-linear-gradient(45deg, var(--g-kazan1) 0 2px, transparent 2px 4px); opacity: .7; }
.dt-cizgi { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: var(--g-cizgi); }
.dt-cizgi.mavi { background: var(--g-mavi); }
.dt-not { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 0; font-size: 11px; color: var(--on-surface-variant); line-height: 1.5; }
.dt-tip { position: absolute; z-index: 20; min-width: 180px; pointer-events: none; background: var(--ipucu-zemin); color: #fff; border-radius: var(--radius-md); padding: 10px 12px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.dt-tip[hidden] { display: none; }
.dt-tip-baslik { font-weight: 700; margin-bottom: 6px; font-size: 12.5px; }
.dt-tip-satir { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; color: #dfe3ee; }
.dt-tip-satir span { display: inline-flex; align-items: center; gap: 6px; }
.dt-tip-satir b { color: #fff; font-family: var(--font-mono); font-weight: 600; }

/* ---------------------------------------------------------------------
   Koyu tema (kurumsal, kısık kontrastlı lacivert-gri zemin)
   ------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0f172a; --surface-container-lowest: #162036; --surface-container-low: #1a263d; --surface-container: #1e2b44;
  --surface-container-high: #29364f; --surface-container-highest: #344259; --surface-dim: #0b1220;
  --on-surface: #e2e8f0; --on-surface-variant: #a5b3c8; --outline: #7d8da6; --outline-variant: #2c3a54;
  --primary: #7aa2ff; --on-primary: #0b1b3d; --primary-container: #3b6bea; --on-primary-container: #e3ebff; --primary-fixed-dim: #b4c5ff;
  --secondary: #9db0cc; --secondary-container: #25354f; --on-secondary-container: #d3e2fb;
  --tertiary: #ff9d66; --tertiary-container: #e0702e; --on-tertiary-container: #ffd9c4; --tertiary-container-soft: #3a2418;
  --error: #ff8f86; --error-container: #4a2323; --on-error-container: #ffd8d4;
  --success: #62d28c; --success-container: #173a27; --on-success-container: #bdf2cf;
  --g-izgara: #2a3342; --g-eksen: #8f9ab0; --g-eksen2: #8fb0ff; --g-deger: #c9d6ec; --g-nokta: #161c25;
  --g-kazan1: #3dbb78; --g-kazan2: #278a57; --g-kayip1: #e58a84; --g-kayip2: #c0544e; --g-mavi: #6f9bff; --g-yesil: #4cc27f; --g-cizgi: #8fb0ff;
  --g-hatch: rgba(169,178,195,.55);
  --vurgu-sinir: #34508f; --vurgu-zemin: linear-gradient(180deg, #1b2740, #172238); --rozet-zemin: #26395f; --ilerleme-zemin: #26395f;
  --ipucu-zemin: rgba(8,11,16,.96);
}
:root[data-theme="dark"] .th-ipucu-sari { color: #f0b84a; }
:root[data-theme="dark"] .th-uyari-kirmizi { background: var(--error-container); color: #ffd8d4; }
:root[data-theme="dark"] .th-uyari-sari { background: #3b3014; color: #f6dc9a; }
:root[data-theme="dark"] .th-uyari-mavi { background: #1d2c4d; color: #cfe0ff; }
:root[data-theme="dark"] .tag-muted { background: #3a2220; color: #ffc9c3; }
:root[data-theme="dark"] .row-critical { background: rgba(255,143,134,0.10); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color-scheme: dark; }

/* Tema düğmeleri */
.tema-grup { display: inline-flex; gap: 2px; padding: 2px; margin-right: 10px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); }
.tema-grup button { border: 0; background: transparent; color: var(--on-surface-variant); width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; }
.tema-grup button svg { width: 16px; height: 16px; }
.tema-grup button:hover { background: var(--surface-container-high); }
.tema-grup button[aria-pressed="true"] { background: var(--surface-container-lowest); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

#statCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1500px) { #statCards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.card .trend { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--on-surface-variant); }
.card[data-kart="bekleyen"] { border-color: var(--vurgu-sinir); background: var(--vurgu-zemin); }
.dt-delta-ref { font-size: 10.5px; font-weight: 500; color: var(--on-surface-variant); }
.dt-tile-ust > span:last-child { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dt-not .dt-uyari { color: var(--on-surface); }
.dt-dwrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }


/* Teklif Tahmini */
.sn-toolbar { display: flex; gap: var(--sp-md, 12px); flex-wrap: wrap; }
.sn-toolbar input { flex: 1 1 280px; min-width: 200px; }
.sn-toolbar select { flex: 0 0 auto; }
.sn-liste .sn-satir { cursor: pointer; }
.sn-liste .sn-satir:hover td, .sn-liste .sn-satir:focus td { background: var(--surface-container-low); }
.sn-liste .sn-satir.sn-secili td { background: var(--surface-container-high); }
.sn-liste td.sn-urun { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-rozet { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 9px; background: var(--surface-container-high); color: var(--on-surface-variant); font-size: 10.5px; font-weight: 600; }
.sn-durum { font-size: 11.5px; font-weight: 600; }
.sn-kazandi { color: var(--success); } .sn-kaybetti { color: var(--error); }
.sn-hizli { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md, 12px); margin: 4px 0 6px; }
.sn-hizli label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.sn-hizli input[type=range] { width: 100%; }
.sn-kalemler { display: flex; flex-direction: column; gap: 8px; }
.sn-kalem { border: 1px solid var(--outline-variant); border-radius: var(--radius-sm, 6px); padding: 8px 10px 10px; background: var(--surface-container-lowest, transparent); }
.sn-kalem-ad { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; }
.sn-kalem-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.sn-kalem-alanlar label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--on-surface-variant); }
.sn-kalem-alanlar select, .sn-kalem-alanlar input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--outline-variant); border-radius: 4px; font-size: 12px; background: var(--surface-container-lowest, #fff); color: var(--on-surface); }
.sn-adim { width: 100%; }
#snWork .panel-header { display: flex; align-items: center; justify-content: space-between; }


/* =============================================================================
   KURUMSAL ARAYÜZ REVİZYONU (sürüm 9.1)
   Yalnızca görünüm katmanıdır: HTML yapısı, id/class adları ve JS aynen korunur.
   Açık ve koyu tema jetonlarını kullanır.
   ========================================================================== */
:root {
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px;
  --font-mono: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, .14);
}
:root[data-theme="dark"] { --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 6px 20px rgba(0, 0, 0, .5); }
body { font-feature-settings: "tnum" 1, "cv11" 1; line-height: 1.45; }
::selection { background: var(--secondary-container); color: var(--on-secondary-container); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--outline); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Kenar çubuğu ---- */
.sidebar { width: 248px; padding: 20px 0 16px; }
.brand { padding: 0 20px 24px; gap: 12px; }
.brand-mark { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--primary-container); border-color: transparent; color: #fff; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-title { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.brand-sub { font-size: 11.5px; }
.nav { padding: 0 12px; gap: 2px; }
.nav-item, .footer-link {
  min-height: 40px; padding: 0 12px; gap: 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.nav-item.active { background: var(--secondary-container); color: var(--on-secondary-container); }
.sidebar-footer { margin: 0 12px; padding: 12px 0 0; gap: 2px; }
.sidebar-footer::before {
  content: "Destek ve raporlar"; display: block; padding: 0 12px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--outline);
}
.sidebar-footer .footer-link { width: 100%; }
.sidebar-footer .footer-link.active { background: var(--secondary-container); color: var(--on-secondary-container); }

/* ---- Üst çubuk ---- */
.topbar { height: 60px; padding: 0 28px; }
.topbar-search { width: 360px; }
.topbar-search input { height: 36px; padding: 0 12px 0 36px; border-radius: var(--radius-sm); font-size: 13px; }
.topbar-actions { gap: 6px; }
.icon-btn { border-radius: var(--radius-sm); }
.tema-grup { margin-right: 6px; border-radius: var(--radius-sm); }
.avatar { margin-left: 8px; }

/* ---- İçerik ve başlıklar ---- */
.content { padding: 28px 32px 40px; max-width: 1560px; }
.view-header { margin-bottom: 20px; }
.view-header h1 { font-size: 22px; font-weight: 700; letter-spacing: -.012em; margin-bottom: 6px; }
.view-header p { font-size: 13px; line-height: 1.55; max-width: 860px; }
.btn-secondary { border-radius: var(--radius-sm); padding: 0 14px; min-height: 36px; box-shadow: var(--shadow-1); }
.btn-secondary.active { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }

/* ---- Kartlar ---- */
.cards { gap: 16px; margin-bottom: 16px; }
.card { border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-1); }
.card .label { font-size: 11px; margin-bottom: 8px; }
.card .value { font-size: 26px; font-weight: 700; font-family: var(--font-body); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.card .sub { font-size: 12px; line-height: 1.4; }

/* ---- Paneller ---- */
.panel { border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-1); }
.panels { gap: 20px; margin-bottom: 20px; }
.panel-header { padding-bottom: 12px; margin-bottom: 16px; }
.panel-header h2 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.panel-header-sub { font-size: 12px; }

/* ---- Zaman filtresi ---- */
.dt-bar { border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-1); margin-bottom: 16px; }
.dt-bar { gap: 12px 16px; }
.dt-hazir, .dt-sekmeler { border-radius: var(--radius-sm); }
.dt-hazir button { padding: 6px 10px; }
.dt-alan { gap: 8px; }
.dt-bar select { min-width: 84px; }
.dt-aralik { padding-left: 0; border-left: 0; }

/* ---- Teklif Özeti (satış hunisi) ---- */
.funnel { gap: 10px; padding: 2px 0; }
.funnel-label { width: 150px; font-size: 13px; font-weight: 600; color: var(--on-surface); }
.funnel-bar-wrap { height: 36px; border-radius: var(--radius-sm); background: var(--surface-container-low); }
.funnel-bar { border-radius: var(--radius-sm); padding-left: 14px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 64px; }
.funnel-pay { width: 200px; font-size: 12px; }

/* ---- Tablolar ---- */
.table-wrap { border-radius: var(--radius-md); }
thead th { padding: 11px 14px; font-size: 11px; background: var(--surface-container-low); }
tbody td { padding: 11px 14px; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-container-low); }
.badge { padding: 3px 10px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.badge.win { background: var(--success-container); color: var(--on-success-container); }

/* ---- Araç çubuğu, sayfalama, form alanları ---- */
.toolbar { gap: 10px; margin-bottom: 16px; }
.toolbar input, .toolbar select { height: 38px; padding: 0 12px; border-radius: var(--radius-sm); }
.pagination button { border-radius: var(--radius-sm); padding: 6px 14px; min-height: 32px; }
select, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input:not([type]) { border-radius: var(--radius-sm); }
.accept-banner, .party-header, .aqs-metric { border-radius: var(--radius-md); }
.th-prob { font-weight: 700; }

/* ---- Pencere ---- */
.modal { border-radius: 16px; box-shadow: var(--shadow-2); }
.modal-overlay { backdrop-filter: blur(2px); }
.th-pop { border-radius: var(--radius-md); box-shadow: var(--shadow-2); }


/* =============================================================================
   SÜRÜM 9.2 — KURUMSAL SLATE KATMANI
   Yalnızca görünüm: renk, köşe, gölge, yazı hiyerarşisi, geçişler.
   Konum/boyut/sıra veren özelliklere (display, grid, flex, width, order) dokunulmaz.
   ========================================================================== */
:root {
  --ring: 0 0 0 3px rgba(37, 99, 235, .18);
  --ease: .16s cubic-bezier(.4, 0, .2, 1);
  --btn-shadow: 0 1px 2px rgba(15, 23, 42, .10);
  --btn-shadow-hover: 0 4px 10px rgba(15, 23, 42, .14);
  --rim: inset 0 0 0 1px rgba(100, 116, 139, .22);
}
:root[data-theme="dark"] {
  --ring: 0 0 0 3px rgba(122, 162, 255, .30);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, .55);
}

/* Yazı tipi ve hiyerarşi */
body { font-family: var(--font-body); font-size: 14px; text-rendering: optimizeLegibility; }
.view-header h1 { font-size: 24px; font-weight: 700; color: var(--on-surface); letter-spacing: -.015em; }
.view-header p { font-size: 13.5px; color: var(--on-surface-variant); }
.panel-header h2 { font-size: 15px; font-weight: 650; color: var(--on-surface); }
.brand-title { font-weight: 700; }
.card .label, .detail-grid div span.k, .party-stats dt, .aqs-label, .stock-mini dt, .dt-tile-ad,
.stock-slot > div:nth-child(2) {
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--on-surface-variant);
}
thead th { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--on-surface-variant); }
.card .value, .dt-tile-deger, .aqs-value, .party-stats dd, .stock-mini dd, .hq-item-total, .funnel-bar, tbody td {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.card .value, .dt-tile-deger { font-weight: 700; color: var(--on-surface); }
.card.accent-green .value { color: var(--success); } .card.accent-red .value { color: var(--error); }
.card.accent-blue .value { color: var(--primary); } .card.accent-amber .value { color: var(--tertiary); }

/* Kenar çubuğu */
.sidebar { background: var(--surface-container-lowest); }
.nav-item, .footer-link {
  font-size: 13.5px; font-weight: 500; color: var(--on-surface-variant);
  transition: background var(--ease), color var(--ease);
}
.nav-item.active, .footer-link.active { font-weight: 600; }
.nav-item:hover, .footer-link:hover { background: var(--surface-container); color: var(--on-surface); }
.nav-item.active:hover, .footer-link.active:hover { background: var(--secondary-container); color: var(--on-secondary-container); }
.brand-mark { border-radius: var(--radius-sm); box-shadow: var(--btn-shadow); }
.sidebar-footer::before { color: var(--outline); }

/* İnce çizgili ikonlar (Lucide/Heroicons tarzı) */
.nav-item svg, .footer-link svg, .icon-btn svg, .topbar-search svg, .brand-mark svg, .tema-grup button svg {
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* Üst çubuk */
.topbar { background: var(--surface-container-lowest); box-shadow: 0 1px 0 rgba(15, 23, 42, .02); }
.icon-btn { transition: background var(--ease), color var(--ease); }
.icon-btn:hover { background: var(--surface-container); color: var(--on-surface); }
.avatar { box-shadow: var(--btn-shadow); }

/* Kart, panel, tablo kapları */
.card, .panel, .party-header, .dt-bar, .dt-tile, .aqs-metric, .stock-mini > div, .hq-item {
  border-radius: var(--radius-md); border-color: var(--outline-variant);
}
.card, .panel, .dt-bar, .party-header { box-shadow: var(--shadow-1); }
.card, .dt-tile { transition: box-shadow var(--ease), border-color var(--ease); }
.card:hover, .dt-tile:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.table-wrap, .price-history-list { border-radius: var(--radius-md); border-color: var(--outline-variant); box-shadow: var(--shadow-1); }
.table-wrap { background: var(--surface-container-lowest); }
thead th { background: var(--surface-container-low); }
tbody tr { transition: background var(--ease); }
tbody tr:hover { background: var(--surface-container-low); }
.funnel-bar-wrap, .funnel-bar { border-radius: var(--radius-sm); }
.dt-grafik-alan { border-radius: var(--radius-md); border-color: var(--outline-variant); }

/* Durum etiketleri: yumuşak renk, oval kenar */
.badge, .badge-pill, .dt-rozet, .dt-delta, .sn-rozet {
  border-radius: var(--radius-full); letter-spacing: 0; text-transform: none;
}
.badge { font-size: 12px; font-weight: 600; padding: 3px 11px; box-shadow: var(--rim); }
.badge.win { background: var(--success-container); color: var(--on-success-container); }
.badge.lose { background: var(--error-container); color: var(--on-error-container); }
.badge.pending { background: var(--tertiary-container-soft); color: var(--on-tertiary-container); }
.badge.other { background: var(--surface-container); color: var(--on-surface-variant); }
.badge-pill { font-size: 11.5px; font-weight: 600; }
:root[data-theme="dark"] .badge.pending { background: #3a2a14; color: #fbd29a; }

/* Düğmeler: gölge + hover/active geçişleri */
.btn-primary, .btn-secondary, .pagination button, .kayip-nedeni-btn, .dt-hazir button, .dt-sekmeler button,
.tema-grup button, .th-tab {
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), color var(--ease), transform var(--ease);
}
.btn-primary { border-radius: var(--radius-sm); box-shadow: var(--btn-shadow); }
.btn-primary:hover { box-shadow: var(--btn-shadow-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--btn-shadow); }
.btn-secondary, .pagination button { border-radius: var(--radius-sm); box-shadow: var(--btn-shadow); border-color: var(--outline-variant); }
.btn-secondary:hover, .pagination button:hover:not(:disabled) {
  background: var(--surface-container-low); border-color: var(--outline); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px);
}
.btn-secondary:active, .pagination button:active:not(:disabled) { transform: translateY(0); box-shadow: var(--btn-shadow); }
.kayip-nedeni-btn { border-radius: var(--radius-sm); }
.kayip-nedeni-btn:hover { box-shadow: var(--btn-shadow); }
.dt-hazir button.aktif { box-shadow: var(--btn-shadow); }
.link-btn, .btn-link-sm { transition: color var(--ease); }

/* Form alanları */
input, select, textarea { transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); }
.toolbar input, .toolbar select, .topbar-search input, .hedef-girisleri input,
.dt-bar select, .dt-bar input, .sn-kalem-alanlar select, .sn-kalem-alanlar input {
  border-radius: var(--radius-sm); border-color: var(--outline-variant);
}
.toolbar input:hover, .toolbar select:hover, .topbar-search input:hover, .dt-bar select:hover, .dt-bar input:hover { border-color: var(--outline); }
.toolbar input:focus, .toolbar select:focus, .topbar-search input:focus,
.dt-bar select:focus, .dt-bar input:focus, .hedef-girisleri input:focus {
  border-color: var(--primary); box-shadow: var(--ring); outline: none;
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Pencere ve açılır listeler */
.modal { border-color: var(--outline-variant); box-shadow: var(--shadow-2); }
.modal-overlay { background: rgba(15, 23, 42, .5); }
.modal-header { border-bottom-color: var(--outline-variant); }
.th-pop, .th-combo-liste, .sn-results { border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.th-combo-oge, .sn-result-item { transition: background var(--ease); }

/* Dar pencerelerde esneklik */
@media (max-width: 1000px) {
  .panels, .panels-2col { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { width: 212px; }
  .content { padding: 20px 16px 32px; }
  .topbar { padding: 0 16px; }
  .topbar-search { width: 240px; }
  .topbar-search#calismaAlani { width: 220px; max-width: 40vw; }
}
@media (max-width: 560px) {
  .topbar-search#calismaAlani { width: 150px; max-width: 42vw; }
  .workspace-switcher > span { display: none; }
  .workspace-switcher select { min-width: 0; height: 34px; padding: 0 24px 0 8px; font-size: 11px; }
  .topbar { gap: 6px; }
  .topbar-actions { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn-primary:hover, .btn-secondary:hover, .pagination button:hover { transform: none !important; }
}


/* =============================================================================
   SÜRÜM 9.3 — GRAFİKLER, ARAYÜZ İNCE AYARI, LOGO
   Yine yalnızca görünüm: konum, boyut ve sıra veren kurallara dokunulmaz.
   ========================================================================== */

/* ---- Grafikler (Dönem Trendi SVG'si): artık açık ve koyu temada jetonları okur ---- */
.dt-izgara { stroke: var(--g-izgara); stroke-dasharray: 2 5; stroke-linecap: round; }
.dt-eksen { fill: var(--g-eksen); font-weight: 500; }
.dt-eksen-sag { fill: var(--g-eksen2); }
.dt-deger { fill: var(--g-deger); font-weight: 700; }
.dt-kilavuz { stroke: var(--g-eksen); stroke-dasharray: 3 4; opacity: .7; }
.dt-veriyok { fill: var(--surface-container-low); }
.dt-grafik svg rect { rx: 4px; ry: 4px; }
.dt-grafik svg path, .dt-grafik svg polyline, .dt-spark path, .dt-spark polyline { stroke-linecap: round; stroke-linejoin: round; }
.dt-grafik svg path { filter: drop-shadow(0 2px 3px rgba(37, 99, 235, .18)); }
.dt-grafik-alan { background: linear-gradient(180deg, var(--surface-container-lowest), var(--surface-container-low)); }
.dt-tile { background: linear-gradient(180deg, var(--surface-container-lowest), var(--surface-container-low)); }
.dt-tile-vurgu { background: var(--vurgu-zemin); box-shadow: 0 0 0 3px rgba(37, 99, 235, .06), var(--shadow-1); }
.dt-tile-deger { letter-spacing: -.012em; }
.dt-ilerleme { height: 8px; border-radius: 999px; }
.dt-ilerleme i { border-radius: 999px; }
.dt-tip { border: 1px solid rgba(255, 255, 255, .10); border-radius: var(--radius-md); backdrop-filter: blur(6px); box-shadow: 0 12px 32px rgba(2, 6, 23, .38); }
.dt-tip-baslik { letter-spacing: -.005em; }
.dt-legend span { font-weight: 500; }
.dt-nokta { border-radius: 4px; }
.dt-cizgi { border-radius: 999px; height: 4px; }
.dt-sekmeler button.aktif { box-shadow: var(--btn-shadow); }
.dt-delta { font-weight: 600; box-shadow: var(--rim); }

/* ---- Arayüz ince ayarı ---- */
.main-workspace {
  background:
    radial-gradient(1100px 380px at 72% -8%, rgba(37, 99, 235, .07), transparent 62%),
    var(--surface);
}
:root[data-theme="dark"] .main-workspace {
  background:
    radial-gradient(1100px 380px at 72% -8%, rgba(122, 162, 255, .09), transparent 62%),
    var(--surface);
}
@keyframes v93-giris { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view:not(.hidden) { animation: v93-giris .24s cubic-bezier(.4, 0, .2, 1) both; }

.nav-item.active svg, .footer-link.active svg { color: var(--primary); }
.nav-item.active, .footer-link.active { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .14); }
.topbar-search:focus-within svg { color: var(--primary); }
.panel-header, .activity-item { border-bottom-color: var(--surface-container); }
.table-wrap tbody td:first-child { font-weight: 500; color: var(--on-surface); }
.modal-header h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.empty-state { border: 1px dashed var(--outline-variant); border-radius: var(--radius-md); background: var(--surface-container-low); }
.th-tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.th-tab:hover { color: var(--on-surface); background: var(--surface-container-low); }
.th-tab.active { font-weight: 700; }

/* Kartlarda renk şeridi (üst kenarda ince vurgu) */
.card.accent-green, .card.accent-red, .card.accent-blue, .card.accent-amber { transition: box-shadow var(--ease); }
.card.accent-green { box-shadow: inset 0 2px 0 var(--success), var(--shadow-1); }
.card.accent-red   { box-shadow: inset 0 2px 0 var(--error), var(--shadow-1); }
.card.accent-blue  { box-shadow: inset 0 2px 0 var(--primary), var(--shadow-1); }
.card.accent-amber { box-shadow: inset 0 2px 0 var(--tertiary-container), var(--shadow-1); }
.card.accent-green:hover { box-shadow: inset 0 2px 0 var(--success), 0 4px 14px rgba(15, 23, 42, .08); }
.card.accent-red:hover   { box-shadow: inset 0 2px 0 var(--error), 0 4px 14px rgba(15, 23, 42, .08); }
.card.accent-blue:hover  { box-shadow: inset 0 2px 0 var(--primary), 0 4px 14px rgba(15, 23, 42, .08); }
.card.accent-amber:hover { box-shadow: inset 0 2px 0 var(--tertiary-container), 0 4px 14px rgba(15, 23, 42, .08); }

/* ---- LOGO (kapatmak için bu bloğu silin; eski simge geri gelir) ---- */
.brand-mark {
  border-radius: 11px; border: 0;
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.brand-mark svg { display: none; }
.brand-mark::before {
  content: ""; width: 22px; height: 22px; display: block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M8.8 14.6l2.2 2.2 4.2-4.6'/></svg>") center / contain no-repeat;
}
.brand-title { letter-spacing: -.01em; }

/* Hesap menüsü, bildirim merkezi ve uygulama içi yardım */
.topbar-actions { position: relative; }
.avatar { cursor: pointer; font: inherit; padding: 0; }
.web-action-btn { position: relative; }
.web-notification-count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border: 2px solid var(--surface-container-lowest); border-radius: 999px; background: var(--error); color: #fff; font: 700 9px/1 var(--font-body); }
.web-popover { position: absolute; z-index: 1200; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 90px)); overflow: auto; padding: 14px; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); background: var(--surface-container-lowest); color: var(--on-surface); box-shadow: 0 16px 40px rgba(15, 23, 42, .18); }
.web-popover[hidden] { display: none !important; }
.web-popover__title { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.web-popover__text, .web-popover__empty { margin: 0; color: var(--on-surface-variant); font-size: 12px; line-height: 1.55; }
.web-popover__empty { padding: 10px 2px; }
.web-popover__action { width: 100%; min-height: 38px; margin-top: 5px; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--on-surface); text-align: left; font: 500 12.5px var(--font-body); cursor: pointer; }
.web-popover__action:hover, .web-notification__link:hover { background: var(--surface-container-low); }
.web-popover__action--danger { color: var(--error); }
.web-profile-card { display: grid; gap: 5px; padding: 12px; margin-bottom: 8px; border-radius: var(--radius-sm); background: var(--surface-container-low); overflow-wrap: anywhere; }
.web-profile-card strong { font-size: 13px; }
.web-profile-card span { color: var(--on-surface-variant); font-size: 11.5px; }
.web-profile-card .web-profile-card__meta { padding-top: 4px; border-top: 1px solid var(--outline-variant); }
.web-notification { padding: 11px 2px; border-top: 1px solid var(--outline-variant); }
.web-notification strong { font-size: 12.5px; }
.web-notification p { margin: 5px 0 4px; color: var(--on-surface-variant); font-size: 11.5px; line-height: 1.5; }
.web-notification__link { padding: 4px 0; border: 0; background: transparent; color: var(--primary); font: 600 11.5px var(--font-body); cursor: pointer; }
.web-dialog-backdrop { position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .46); backdrop-filter: blur(3px); }
.web-dialog { width: min(620px, 100%); max-height: min(780px, calc(100vh - 40px)); overflow: auto; padding: 22px; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); background: var(--surface-container-lowest); color: var(--on-surface); box-shadow: 0 24px 70px rgba(15, 23, 42, .24); outline: none; }
.web-dialog__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.web-dialog__header h2 { margin: 0; font-size: 19px; }
.web-dialog__header p { margin: 5px 0 0; color: var(--on-surface-variant); font-size: 12px; }
.web-dialog__close { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: var(--radius-sm); background: var(--surface-container-low); color: var(--on-surface-variant); font-size: 22px; cursor: pointer; }
.web-dialog__close:hover { background: var(--surface-container); color: var(--on-surface); }
.web-help-content { display: grid; gap: 10px; }
.web-help-topic { padding: 14px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-container-lowest); }
.web-help-topic strong, .web-help-contact strong { font-size: 13px; }
.web-help-topic p, .web-help-contact p { margin: 6px 0 10px; color: var(--on-surface-variant); font-size: 12px; line-height: 1.55; }
.web-help-topic .web-popover__action { width: auto; margin: 2px 0 0; padding-left: 0; color: var(--primary); }
.web-help-contact { padding: 12px 2px 0; border-top: 1px solid var(--outline-variant); }
.web-help-contact a { display: inline-flex; align-items: center; min-height: 38px; margin-top: 9px; text-decoration: none; font-size: 12px; }
.web-help-contact .web-popover__action { margin-top: 8px; }
.web-support-form { display: grid; gap: 14px; }
.web-support-form input, .web-support-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); font: inherit; font-size: 13px; }
.web-support-form textarea { resize: vertical; min-height: 130px; }
.web-support-form input:focus, .web-support-form textarea:focus { border-color: var(--primary); outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent); }
.vw-file-row { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(220px, .9fr) auto minmax(130px, auto); gap: 12px; align-items: center; margin: 8px 0; padding: 12px 14px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-container-lowest); }
.vw-file-row__name { font-size: 13px; font-weight: 600; color: var(--on-surface); }
.vw-file-row__required { color: var(--on-surface-variant); font-size: 11px; }
.vw-file-row input[type="file"] { width: 100%; min-width: 0; color: var(--on-surface-variant); font: inherit; font-size: 12px; }
.vw-file-row input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 12px; border: 1px solid var(--outline-variant); border-radius: 7px; background: var(--surface-container-low); color: var(--on-surface); font: inherit; font-weight: 600; cursor: pointer; }
.vw-file-row input[type="file"]::file-selector-button:hover { border-color: var(--primary); color: var(--primary); }
.vw-file-row .th-soluk { font-size: 11px; white-space: nowrap; }
@media (max-width: 760px) { .vw-file-row { grid-template-columns: 1fr auto; } .vw-file-row input[type="file"] { grid-column: 1 / -1; grid-row: 2; } .vw-file-row .th-soluk { justify-self: end; } }
.web-password-form { display: grid; gap: 10px; }
.web-password-form .yn-alan input { width: 100%; }
.web-dialog__error { min-height: 18px; margin: 0; color: var(--error); font-size: 12px; }
.web-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }
.web-dialog__footer button { min-height: 38px; }
@media (max-width: 560px) {
  .web-popover { right: -8px; }
  .web-dialog-backdrop { padding: 10px; }
  .web-dialog { padding: 17px; max-height: calc(100vh - 20px); }
}