/* ==========================================================================
   VCONSYST360 — Tasarım Katmanı
   --------------------------------------------------------------------------
   Bu dosya TAMAMEN EKLEMELİDİR: sadece yeni değişken ve `vc-` önekli sınıf
   tanımlar, mevcut hiçbir seçiciyi ezmez. Böylece eski sayfalar bu dosya
   yüklendiğinde birebir aynı görünür; sayfalar tek tek taşındıkça düzelir.

   NEDEN VAR:
   Sistemde renk / boşluk / köşe / gölge tokenları zaten vardı ama YAZI
   ÖLÇEĞİ yoktu. Tutunacak dal olmayınca her şablon elle bir sayı yazmış ve
   tek bir sayfada 10 ayrı punto birikmiş (10 / 10.5 / 11 / 12 / 13 / 14 /
   15 / 16 / 18 / 20). Göz her blokta yeniden odaklandığı için sayfa
   "derli toplu değil" diye okunuyor. Çözüm ölçeği ROLE bağlamak: aşağıdaki
   isimler punto değil GÖREV söyler, o yüzden "biraz daha küçük olsun" diye
   araya yeni bir punto sıkıştırmak zorlaşır.
   ========================================================================== */


/* ── Yüzey tokenları (açık + koyu) ─────────────────────────────────────────
   İlk sürümde kart zeminine düz `#fff` yazmıştım; karanlık temada beyaz
   kalıyor, üstündeki yazı `--gray-900` (koyuda AÇIK renk) olduğu için
   BEYAZ ÜSTÜNE BEYAZ çıkıyordu — ölçüldü, kontrast 1.00.

   Karanlık tema token ölçeğini ters çeviriyor (`--gray-50` koyu olur), ama
   uygulama kart/çubuk/tabloyu ayrıca SICAK STONE renklerle eziyor
   (#1c1917 / #292524 / #44403c). Yani koyuda iki palet var. Buraya ÜÇÜNCÜ
   bir palet sokmuyoruz: aşağıdaki değerler uygulamanın mevcut koyu
   görünümüyle birebir aynı. */
:root {
  --vc-surface:     #fff;             /* kart zemini            */
  --vc-surface-alt: var(--gray-50);   /* başlık şeridi, zebra   */
  --vc-border:      var(--gray-200);
  --vc-tooltip-bg:  var(--gray-900);
  --vc-tooltip-fg:  #fff;
  --vc-on-primary:  #fff;             /* dolu yeşil üstündeki yazı */
}
[data-theme="dark"] {
  --vc-surface:     #292524;          /* mevcut .card ile aynı      */
  --vc-surface-alt: #1c1917;          /* mevcut topbar/sidebar ile  */
  --vc-border:      #44403c;
  --vc-tooltip-bg:  #f5f5f4;
  --vc-tooltip-fg:  #1c1917;
  --vc-on-primary:  #04231a;          /* koyuda --primary-600 parlak yeşil,
                                         üstüne beyaz değil koyu yazı okunur */
}

:root {
  /* ── Yazı ölçeği: BEŞ rol, başka boyut yok ───────────────────────────── */
  --text-meta:      0.75rem;   /* 12px · yardımcı metin, alt açıklama, birim */
  --text-body:      0.875rem;  /* 14px · gövde — varsayılan, en çok bu       */
  --text-title:     1rem;      /* 16px · kart / bölüm başlığı                */
  --text-metric:    1.5rem;    /* 24px · KPI rakamı                          */
  --text-metric-lg: 1.875rem;  /* 30px · sayfanın tek ana rakamı             */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* Rakam hizası: para sütunları alt alta kaydığında basamaklar tutsun.
     Tabular rakam olmadan "1.111" ile "9.999" farklı genişlikte çizilir. */
  --num: "tnum" 1, "lnum" 1;
}

/* ── İkon ──────────────────────────────────────────────────────────────────
   Emoji yerine çizgi ikon. Emoji her işletim sisteminde farklı renk, farklı
   ağırlık ve farklı hizada çizilir; ikon `currentColor` alır, yazıyla aynı
   renge ve aynı satır hizasına oturur. Şablonda _ikon.html makrosu üretir. */
.vc-ico {
  width: 1.05em; height: 1.05em;
  flex: none;
  vertical-align: -0.15em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vc-ico-lg { width: 1.4em; height: 1.4em; }

/* ── Yardımcı metin: TEK küçük punto ───────────────────────────────────── */
.vc-meta {
  font-size: var(--text-meta);
  color: var(--gray-500);
  line-height: 1.45;
}
.vc-meta-strong { font-size: var(--text-meta); color: var(--gray-600); font-weight: var(--weight-semi); }

/* Para / kilo gibi sayısal hücreler */
.vc-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num); }

/* ── KPI kartı ─────────────────────────────────────────────────────────── */
.vc-metric {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.vc-metric-label {
  font-size: var(--text-meta);
  color: var(--gray-500);
  font-weight: var(--weight-medium);
  display: flex; align-items: center; gap: var(--space-2);
}
.vc-metric-value {
  font-size: var(--text-metric);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
  line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
}
.vc-metric-value.is-pos { color: var(--success); }
.vc-metric-value.is-neg { color: var(--error); }
.vc-metric-foot { font-size: var(--text-meta); color: var(--gray-500); }

/* Üstten renk şeridi — kartı kategorisine bağlar, rengi tek yerden gelir */
.vc-metric[data-tone] { border-top: 3px solid var(--gray-300); }
.vc-metric[data-tone="primary"] { border-top-color: var(--primary-600); }
.vc-metric[data-tone="info"]    { border-top-color: var(--info); }
.vc-metric[data-tone="warning"] { border-top-color: var(--warning); }
.vc-metric[data-tone="error"]   { border-top-color: var(--error); }
.vc-metric[data-tone="violet"]  { border-top-color: var(--accent-violet); }

/* ── Kırılım çubukları ─────────────────────────────────────────────────────
   Düz tablo "hangi kalem baskın" sorusunu okutmaz; oran çubuğu bir bakışta
   okutur. Genişlik satır içi --pay değişkeninden gelir (şablon hesaplar). */
.vc-bars { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.vc-bar-row { display: flex; flex-direction: column; gap: 4px; }
.vc-bar-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  font-size: var(--text-body);
}
.vc-bar-name  { font-weight: var(--weight-semi); color: var(--gray-800); }
.vc-bar-value { color: var(--gray-700); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.vc-bar-track { height: 6px; background: var(--vc-surface-alt); border-radius: var(--radius-full); overflow: hidden; }
.vc-bar-fill  { height: 100%; width: var(--pay, 0%); background: var(--primary-500); border-radius: var(--radius-full); }
.vc-bar-row[data-tone="info"]    .vc-bar-fill { background: var(--info); }
.vc-bar-row[data-tone="violet"]  .vc-bar-fill { background: var(--accent-violet); }

/* ── Çip / rozet: tek formül ───────────────────────────────────────────────
   Renk her seferinde elle yazılmaz; zemin ana rengin %12 saydamı, yazı ana
   rengin koyusu. Yeni bir tür eklenince iki satır yeter. */
.vc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-size: var(--text-meta);
  font-weight: var(--weight-semi);
  white-space: nowrap;
  background: color-mix(in srgb, var(--chip, var(--gray-500)) 12%, transparent);
  color: var(--chip, var(--gray-600));
}
.vc-chip[data-tone="primary"] { --chip: var(--primary-700); }
.vc-chip[data-tone="info"]    { --chip: var(--info-text); }
.vc-chip[data-tone="violet"]  { --chip: #6d28d9; }
.vc-chip[data-tone="warning"] { --chip: var(--warning-text); }
.vc-chip[data-tone="error"]   { --chip: var(--error-text); }

/* ── Sekmeler ──────────────────────────────────────────────────────────── */
.vc-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: var(--space-5);
}
.vc-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: none; background: none; cursor: pointer;
  font-size: var(--text-body); font-weight: var(--weight-medium);
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.vc-tab:hover { color: var(--gray-900); background: var(--gray-50); }
.vc-tab.is-active { color: var(--primary-700); border-bottom-color: var(--primary-600); font-weight: var(--weight-semi); }
.vc-panel { display: none; }
.vc-panel.is-active { display: block; }

/* ── Form satırı ───────────────────────────────────────────────────────── */
.vc-form { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.vc-field { display: flex; flex-direction: column; gap: 4px; }
.vc-label { font-size: var(--text-meta); font-weight: var(--weight-medium); color: var(--gray-600); }

/* ── Tablo araç şeridi ─────────────────────────────────────────────────────
   Her tabloda aynı yerde aynı araçlar: ara · kolon göster/gizle · dışa aktar.
   Kullanıcı bir kez öğrenir, 86 tabloda geçerli olur. */
.vc-toolbar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) 0;
}
.vc-toolbar .vc-spacer { flex: 1 1 auto; }
.vc-search { position: relative; display: inline-flex; align-items: center; }
.vc-search .vc-ico { position: absolute; left: 10px; color: var(--gray-400); pointer-events: none; }
.vc-search input { padding-left: 32px !important; }

/* ── Bölüm başlığı ─────────────────────────────────────────────────────── */
.vc-section-head {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.vc-section-title {
  font-size: var(--text-title); font-weight: var(--weight-semi);
  color: var(--gray-900); margin: 0;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.vc-section-note { font-size: var(--text-meta); color: var(--gray-500); }

/* ── Bilgi şeridi ──────────────────────────────────────────────────────── */
.vc-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-meta); line-height: 1.5;
  background: var(--vc-surface-alt); color: var(--gray-600);
  border-left: 3px solid var(--vc-border);
}
.vc-note[data-tone="info"]    { background: var(--info-bg);    color: var(--info-text);    border-left-color: var(--info); }
.vc-note[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-text); border-left-color: var(--warning); }
.vc-note .vc-ico { margin-top: 1px; color: currentColor; }

/* ── Filtre hapları ────────────────────────────────────────────────────── */
.vc-segment { display: inline-flex; background: var(--gray-100); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
.vc-segment a {
  padding: 5px 14px; border-radius: var(--radius-full);
  font-size: var(--text-meta); font-weight: var(--weight-semi);
  color: var(--gray-600); text-decoration: none; white-space: nowrap;
}
.vc-segment a:hover { color: var(--gray-900); }
.vc-segment a.is-active { background: var(--vc-surface); color: var(--primary-700); box-shadow: var(--shadow-xs); }

/* ── Telefon ───────────────────────────────────────────────────────────────
   Tablonun karta dönmesi base.html motorunun işi; burada sadece bu katmanın
   bileşenleri daraltılır. Mobil kart yapısı bizim onlara karşı üstünlüğümüz,
   korunuyor. */
@media (max-width: 767px) {
  .vc-metric { padding: var(--space-3) var(--space-4); }
  .vc-metric-value { font-size: 1.25rem; }
  .vc-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vc-tab { white-space: nowrap; padding: var(--space-3); }
  .vc-form > .vc-field { flex: 1 1 100%; }
  .vc-toolbar { gap: var(--space-2); }
}

/* ── Alan genişlikleri ─────────────────────────────────────────────────────
   Punto dağınıklığının aynısı genişlikte de oluyordu: 6.5 / 7 / 8.5 / 9.5 /
   10 / 11 / 12 / 13 / 14 / 15rem diye on ayrı elle yazılmış ölçü. Formlar
   bu yüzden hizasız duruyor. Altı adım yeter; "arada bir boy" lazım olursa
   yanlış olan ölçü değil, alanın kendisidir. */
.vc-w-xs { width: 6rem; }
.vc-w-sm { width: 8.5rem; }
.vc-w-md { width: 11rem; }
.vc-w-lg { min-width: 14rem; }
.vc-w-xl { min-width: 18rem; }
.vc-w-full { width: 100%; }

/* KPI rakamı küçük boy — dört rakam yan yanayken 24px fazla ağır kaçıyor.
   Satır içi font-size yazmak yerine bu değiştirici kullanılır. */
.vc-metric-value.is-sm { font-size: var(--text-title); }

/* Kart üstü boşluğu — şablonda tekrar eden margin-bottom yerine. */
.vc-stack > * + * { margin-top: var(--space-4); }
.vc-mb { margin-bottom: var(--space-4); }
.vc-mb-lg { margin-bottom: var(--space-5); }

/* ── Metin rengi kısayolları ───────────────────────────────────────────────
   `style="color:var(--success)"` yazmak token kullanıyor gibi görünse de
   yine satır içi stildir ve sayfa sayfa farklılaşır. */
.vc-pos { color: var(--success); }
.vc-neg { color: var(--error); }
.vc-dim { color: var(--gray-500); }

.vc-inline { display: inline; }
.vc-page { max-width: 80rem; margin-inline: auto; }
.vc-void { opacity: .55; }

/* ── Tablo tipografisi (SADECE taşınmış sayfalarda) ────────────────────────
   Ortak `.table` stili hücreleri 13px, başlıkları 10.5px'e sabitliyor —
   ikisi de ölçek dışı ve sayfadaki punto sayısını tek başına ikiye katlıyor.
   Global değiştirmek 86 tabloyu aynı anda oynatır; bu yüzden kural `.vc-page`
   ile KAPSANDI: bir sayfa yeni katmana taşındığında kendiliğinden düzelir,
   taşınmamışlar birebir aynı kalır. Yayılma bittiğinde bu kapsam kaldırılıp
   kural ana CSS'e taşınabilir. */
.vc-page .table th {
  font-size: var(--text-meta);
  font-weight: var(--weight-semi);
  letter-spacing: .02em;
}
.vc-page .table td { font-size: var(--text-body); }
.vc-page .table td a { font-size: inherit; }
/* Para/kilo sütunları: basamaklar alt alta tutsun */
.vc-page .table td.vc-num, .vc-page .table th.text-right { font-variant-numeric: tabular-nums lining-nums; }

/* ==========================================================================
   AĞIRLIK KATMANI — 12.09.2026 düzeltmesi
   --------------------------------------------------------------------------
   İlk geçişte "az punto" disiplinini "her şeyi küçült" diye uyguladım ve
   hiyerarşiyi öldürdüm: --text-metric (24px) tanımlıyken bütün KPI rakamları
   elle 16px'e çekilmişti, sayfa temiz ama cılız çıktı.

   Doğru kural: GÖVDE tek olsun, KAHRAMAN RAKAM sıçrasın. Az sayıda punto,
   ama aralarında BÜYÜK fark. Ağırlık üç araçtan gelir:
     1. Rakam iri ve kalın (24–30px, 700)
     2. Yanında dolgulu ikon karesi — göze tutunacak bir kütle verir
     3. Kalın renk şeridi / dolu zemin — ince 1px çizgi ağırlık taşımaz
   ========================================================================== */

/* ── İkon karesi: metriğin görsel çıpası ───────────────────────────────── */
.vc-tile {
  width: 2.75rem; height: 2.75rem;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tone, var(--primary-600)) 14%, transparent);
  color: var(--tone, var(--primary-600));
}
.vc-tile .vc-ico { width: 1.35rem; height: 1.35rem; stroke-width: 2.25; }

/* ── Kahraman metrik: ikon karesi + etiket + iri rakam ─────────────────── */
.vc-stat { display: flex; align-items: center; gap: var(--space-3); }
.vc-stat-body { min-width: 0; }
.vc-stat-label {
  font-size: var(--text-meta);
  color: var(--gray-500);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.vc-stat-value {
  font-size: var(--text-metric);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.vc-stat-value.is-pos { color: var(--success); }
.vc-stat-value.is-neg { color: var(--error); }
.vc-stat-foot { font-size: var(--text-meta); color: var(--gray-500); margin-top: 2px; }
.vc-stat-hero .vc-stat-value { font-size: var(--text-metric-lg); }
.vc-stat-hero .vc-tile { width: 3.25rem; height: 3.25rem; }

/* Ton: tek yerden. `--tone` hem kareyi hem şeridi besler. */
[data-tone="primary"] { --tone: var(--primary-600); }
[data-tone="info"]    { --tone: var(--info); }
[data-tone="warning"] { --tone: var(--warning); }
[data-tone="error"]   { --tone: var(--error); }
[data-tone="violet"]  { --tone: var(--accent-violet); }
[data-tone="success"] { --tone: var(--success); }

/* ── Tesis kartı: kalın şerit + dolu başlık ────────────────────────────── */
.vc-board {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-top: 4px solid var(--tone, var(--gray-300));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.vc-board-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--tone, var(--gray-500)) 6%, transparent);
  border-bottom: 1px solid var(--gray-200);
}
.vc-board-title {
  font-size: var(--text-title); font-weight: var(--weight-bold);
  color: var(--gray-900); margin: 0;
}
.vc-board-body { padding: var(--space-5); }

/* Metrik ızgarası — 2x2.
   4 sütun denendi ve BOZULDU: tesis kartı yarı genişlikte olduğu için her
   sütuna ~125px düşüyor, 24px kalın rakam ("232.401,00 ₺") oraya sığmayıp
   yan sütuna biniyordu. Rakamı küçültmek hiyerarşiyi yine öldürürdü; doğru
   çözüm sütunu azaltmak. Rakam iri kalsın, satır artsın. */
.vc-stat-grid {
  display: grid;
  gap: var(--space-4) var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Sütunlar arası ince ayırıcı — blokları birbirinden ayırır */
.vc-stat-grid > *:nth-child(even) {
  position: relative;
  padding-left: var(--space-5);
}
.vc-stat-grid > *:nth-child(even)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  border-left: 1px solid var(--gray-200);
}
/* Alt satır üstten ayrılsın */
.vc-stat-grid > *:nth-child(n+3) {
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-100);
}
/* Rakam kutuya sığmazsa kesilmektense küçülsün (çok uzun tutarlar için) */
.vc-stat-value { max-width: 100%; overflow-wrap: normal; }

/* ── Kart başlığı ağırlığı ─────────────────────────────────────────────── */
.vc-page .card-header { border-bottom: 1px solid var(--vc-border); }
.vc-page .vc-section-title { font-weight: var(--weight-bold); }

/* ── Sessiz bilgi şeridi ───────────────────────────────────────────────────
   Uyarı şeridi sayfanın en renkli öğesi olunca asıl rakamların önüne geçiyordu.
   Bilgi (uyarı değil) metni sessiz olmalı. */
.vc-note.is-quiet {
  background: transparent;
  border: 1px dashed var(--gray-300);
  border-left-width: 1px;
  color: var(--gray-500);
}

/* ── Çubuklar: daha kalın, okunur ──────────────────────────────────────── */
.vc-bar-track { height: 10px; }
.vc-bar-head { font-size: var(--text-body); }
.vc-bar-name { font-weight: var(--weight-bold); }
.vc-bar-value { font-weight: var(--weight-semi); color: var(--gray-900); }

@media (max-width: 899px) {
  .vc-stat-value { font-size: 1.375rem; }
  .vc-stat-hero .vc-stat-value { font-size: var(--text-metric); }
}

/* ==========================================================================
   İSKELET DÜZELTMELERİ — 12.09.2026
   Patronun bildirdiği üç gerçek hata. Hepsi base.html/ana CSS kaynaklı, yani
   BÜTÜN sayfaları etkiliyordu. Buradaki kurallar yine eklemeli: mevcut
   seçicileri ezmiyor, yeni sınıf/medya kuralı ekliyor.
   ========================================================================== */

/* ── 1. Masaüstünde menü daraltılamıyordu ─────────────────────────────────
   `.app-topbar-menu-toggle` 1024px üstünde `display:none` idi → masaüstünde
   menüyü kapatmanın hiçbir yolu yoktu. `--sidebar-collapsed: 68px` değişkeni
   tanımlıydı ama HİÇBİR yerde kullanılmıyordu; daraltma düşünülmüş,
   yapılmamış. Hile şu: sidebar `width: var(--sidebar-width)`, ana içerik de
   `margin-left: var(--sidebar-width)` kullanıyor — değişkeni kabukta
   yeniden tanımlamak ikisini birden kaydırıyor, tek satırla. */
@media (min-width: 1025px) {
  .app-topbar-menu-toggle { display: flex; }
  .app-shell.is-rail { --sidebar-width: var(--sidebar-collapsed, 68px); }
  .app-shell.is-rail .app-sidebar-item-text,
  .app-shell.is-rail .app-sidebar-section-title,
  .app-shell.is-rail .app-sidebar-dropdown-icon,
  .app-shell.is-rail .app-sidebar-dropdown-menu,
  .app-shell.is-rail #sidebar-alert-count { display: none !important; }
  .app-shell.is-rail .app-sidebar-item,
  .app-shell.is-rail .app-sidebar-dropdown-trigger {
    justify-content: center;
    padding-left: 0; padding-right: 0;
  }
  .app-shell.is-rail .app-sidebar-item-icon { margin: 0; }
  /* Daraltılmışken üzerine gelince adı balonla göster — yoksa ikonlar bilmece olur */
  .app-shell.is-rail .app-sidebar-item,
  .app-shell.is-rail .app-sidebar-dropdown-trigger { position: relative; }
  .app-shell.is-rail .app-sidebar-item:hover::after,
  .app-shell.is-rail .app-sidebar-dropdown-trigger:hover::after {
    content: attr(data-ad);
    position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    background: var(--vc-tooltip-bg); color: var(--vc-tooltip-fg);
    padding: 5px 10px; border-radius: var(--radius-sm);
    font-size: var(--text-meta); font-weight: var(--weight-medium);
    white-space: nowrap; z-index: 200; pointer-events: none;
    box-shadow: var(--shadow-md);
  }
}

/* ── 2. Mobilde sol menü alt gezinme çubuğunun altına giriyordu ───────────
   `.app-sidebar` dibi `bottom: 0` idi ama altta 64px yüksekliğinde sabit bir
   gezinme çubuğu var. Menü uzayınca son maddeler çubuğun ARKASINDA kalıyor
   ve tıklanamıyordu. Ölçüldü: menü dibi 812px, çubuk tepesi 748px. */
@media (max-width: 768px) {
  .app-sidebar { bottom: 64px; }
  .app-sidebar-nav { padding-bottom: var(--space-6); }
}

/* ── 3. Uyarılar gözden kaçıyordu ─────────────────────────────────────────
   Uyarı şeridi `.app-content`in en tepesinde duruyor. Kullanıcı sayfanın
   1350px aşağısındaki formu gönderiyor, en tepeye dönüyor ve mesaj orada
   kalıyor — üstelik 5 saniyede kendini siliyor. "Tahsilat kaydedildi" ya da
   bir HATA mesajı hiç görülmeden kaybolabiliyordu. Çözüm: uyarı şeridi
   üst çubuğun hemen altına yapışsın. (Hata/uyarı türlerinin otomatik
   silinmesi ayrıca JS'te kapatıldı — bkz. vconsyst-design.js) */
/* `position: sticky` DENENDİ VE TUTMADI: `.app-content` üzerinde
   `overflow-x: hidden` var, bu da onu kaydırma kabı yapıyor ve sticky
   viewport'a değil o kutuya göre davranıyor — sayfa 900px kaydırıldığında
   uyarı -822px'e gidiyordu, yani hiç yapışmıyordu. Bu yüzden `fixed`:
   uyarı üst çubuğun altında, ortada, içeriğin üstünde durur. */
.vc-flash {
  position: fixed;
  top: calc(var(--topbar-height, 64px) + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  width: min(34rem, calc(100vw - 2rem));
  z-index: 120;
  pointer-events: none;                 /* altındaki içerik tıklanabilir kalsın */
}
.vc-flash .alert {
  pointer-events: auto;                 /* ama uyarının kendisi tıklanabilir */
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,.12));
  background: var(--vc-surface);
}
.vc-flash .alert:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .vc-flash { width: calc(100vw - 1.5rem); }
}

/* ==========================================================================
   TABLOLAR + RENK — "tok dursun" geçişi (12.09.2026)
   Patron: "renk az fazla beyaz" + "tablolar zayıf". Asıl iş tablolarda ama
   en ıssız yer orasıydı: başlık zeminsiz, satırlar ayırt edilmiyor, toplam
   satırı sıradan bir satır gibi duruyordu.
   Hepsi `.vc-page` ile KAPSANDI — taşınmamış sayfalar birebir aynı kalır.
   ========================================================================== */

/* ── Tablo başlığı: zeminli, oturaklı ─────────────────────────────────── */
.vc-page .table thead th {
  background: var(--vc-surface-alt);
  color: var(--gray-600);
  border-bottom: 2px solid var(--vc-border);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  position: sticky; top: 0; z-index: 2;   /* uzun listede başlık kaybolmasın */
}

/* ── Satırlar: zebra + üzerine gelince vurgu ──────────────────────────── */
.vc-page .table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--vc-surface-alt) 55%, var(--vc-surface)); }
.vc-page .table tbody tr:hover { background: var(--primary-50); }
.vc-page .table tbody td { border-bottom: 1px solid var(--gray-100); }

/* ── Toplam satırı: tablonun sonucu, sıradan satır gibi durmasın ──────── */
.vc-page .table tfoot tr {
  background: var(--vc-surface-alt);
  border-top: 2px solid var(--gray-300);
}
.vc-page .table tfoot td {
  padding-top: var(--space-3); padding-bottom: var(--space-3);
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  color: var(--gray-900);
}

/* ── Kart başlığı: tonlu zemin ────────────────────────────────────────── */
.vc-page .card-header {
  background: var(--vc-surface-alt);
  padding-top: var(--space-4); padding-bottom: var(--space-4);
}
.vc-page .card { border: 1px solid var(--vc-border); box-shadow: var(--shadow-sm); }

/* ── Sayfa başlığı: sol marka şeridi ───────────────────────────────────── */
.vc-page-title {
  display: flex; align-items: center; gap: var(--space-3);
  padding-left: var(--space-4);
  border-left: 4px solid var(--primary-600);
}

/* ── Sekmeler: seçili olan dolu dursun ────────────────────────────────── */
.vc-tabs { gap: var(--space-1); border-bottom-width: 2px; }
.vc-tab { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.vc-tab.is-active {
  background: var(--primary-50);
  border-bottom-width: 3px;
  color: var(--primary-700);
}
.vc-tab.is-active .vc-ico { stroke-width: 2.4; }

/* ── Segment (tesis filtresi): seçili belirgin ────────────────────────── */
.vc-segment a.is-active {
  background: var(--primary-600); color: var(--vc-on-primary);
  box-shadow: var(--shadow-sm);
}

/* ── Düğmeler: birincil dolu ve tok ───────────────────────────────────── */
.vc-page .btn-primary {
  background: var(--primary-600);
  border-color: var(--primary-600);
  font-weight: var(--weight-semi);
  box-shadow: var(--shadow-xs);
}
.vc-page .btn-primary:hover { background: var(--primary-700); border-color: var(--primary-700); }

/* ── Sayfa zemini: bembeyaz değil, kartlar ondan ayrılsın ─────────────── */
.vc-page { --vc-ground: var(--gray-50); }

/* ── Menüdeki alt madde ikonu ──────────────────────────────────────────────
   Grup içindeki maddeye ikon yuvası 12.09.2026'da eklendi (öncesinde yoktu,
   ikon işini etiketteki emoji görüyordu). Üst seviye maddeyle aynı boşluğu
   tutsun diye burada hizalanıyor; biraz daha küçük çünkü alt kademe. */
.app-sidebar-dropdown-item > .app-sidebar-item-icon {
  width: 15px; height: 15px;
  margin-right: 10px;
  flex: none;
  opacity: .75;
}
.app-sidebar-dropdown-item.is-active > .app-sidebar-item-icon { opacity: 1; }

/* ── Dolu yeşil üstündeki yazı ─────────────────────────────────────────────
   İki kural bizi eziyordu ve ikisi de ölçümle bulundu:
     · `.btn-primary { color: white }`  → düğme kuralımda `color` hiç yoktu
     · `[data-theme="dark"] .card a:not(.btn):not(.badge)` (0,4,1) → segment
       bağlantısının rengini açık turkuaza çeviriyordu, benim (0,2,1)'im yetmedi
   Koyu temada `--primary-600` parlak yeşil (#10b981); üstüne BEYAZ yazı
   kontrast 2.54 veriyor, okunmuyor. `--vc-on-primary` koyuda #04231a olur. */
.vc-page .btn-primary,
[data-theme="dark"] .vc-page .btn-primary { color: var(--vc-on-primary); }

.vc-segment a.is-active,
[data-theme="dark"] .vc-segment a.is-active,
[data-theme="dark"] .card .vc-segment a.is-active { color: var(--vc-on-primary); }

/* Koyu temada kart içi bağlantı rengi metrik rakamlarını da kaçırıyordu;
   cari tablosundaki müşteri adı okunur kalsın. */
[data-theme="dark"] .vc-page .table a { color: var(--primary-400); }

/* ── Koyu temada tablo ince ayarı ──────────────────────────────────────────
   Zebra için `color-mix(--vc-surface-alt, --vc-surface)` koyuda iki SICAK
   tonu karıştırıyor ve satırlar zeytinimsi bir renge kaçıyordu. Koyu zeminde
   doğru yöntem renk karıştırmak değil, üstüne çok düşük saydamlıkta beyaz
   sermek: ton kaymaz, sadece bir kademe açılır. (Uygulamanın kendi
   `tr:hover` kuralı da aynı mantıkla çalışıyor.) */
[data-theme="dark"] .vc-page .table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .035);
}
[data-theme="dark"] .vc-page .table tbody tr:hover {
  background: rgba(255, 255, 255, .07);
}
/* Toplam satırında hücrenin kendi zemini (--gray-50, koyuda SOĞUK slate)
   satırın sıcak zeminini örtüyordu — iki farklı koyu yan yana geliyordu. */
[data-theme="dark"] .vc-page .table tfoot td { background: transparent; }
[data-theme="dark"] .vc-page .table tfoot tr {
  background: rgba(255, 255, 255, .06);
  border-top-color: var(--vc-border);
}

/* ==========================================================================
   DASHBOARD — KOYU TEMA YAMASI (14.09.2026)
   --------------------------------------------------------------------------
   `dashboard-new.css` içinde **18 sabit `#fff` zemin** ve **sıfır** karanlık
   tema kuralı vardı. Yazı renkleri zaten token'a bağlı (`--dash-ink` →
   `--gray-900`, koyuda AÇIK olur), ama zemin beyaz kalınca AÇIK YAZI + BEYAZ
   KUTU = görünmez oluyordu. Ölçüldü: dashboard'da 70 öğe kontrast ~1.00,
   kasa rakamları dahil.

   Bu benim eklediğim bir hata DEĞİL — tasarım katmanı devre dışı bırakılıp
   tekrar ölçüldü, bozukluk aynen duruyordu. Yani dashboard koyu temada
   baştan beri okunmuyormuş.

   Dashboard'ın kendi dosyasına dokunmuyoruz: burada ezmek geri alınabilir
   ve `vconsyst-design.css` silinirse sistem eski hâline döner.
   ========================================================================== */
[data-theme="dark"] .dash-bar,
[data-theme="dark"] .dash-tile,
[data-theme="dark"] .dash-kpi,
[data-theme="dark"] .dash-fac,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .dash-chip,
[data-theme="dark"] .dash-check,
[data-theme="dark"] .dash-cashnote,
[data-theme="dark"] .dash-drawer-panel,
[data-theme="dark"] .dash-seg-btn.is-on,
[data-theme="dark"] .dash-bar-apply,
[data-theme="dark"] .dash-bar-csv,
[data-theme="dark"] .dash-bar-fac,
[data-theme="dark"] .dash-bar-dates input[type="date"] {
  background: var(--vc-surface);
  border-color: var(--vc-border);
  color: var(--gray-900);
}
/* Segment kabı kartın bir ton altında dursun ki seçili düğme ayrışsın */
[data-theme="dark"] .dash-seg { background: var(--vc-surface-alt); }
[data-theme="dark"] .dash-drawer-panel { box-shadow: 0 10px 40px rgba(0,0,0,.5); }