/* Gabsis V2 — Design tokens.
   Two palettes: "ink" (default, slate-teal on near-white) and "stone" (cream + petrol green).
   Toggled by data-theme on <html>.

   Faz 47 (Dalga 0 — 0.1 CSS tekilleştirme): bileşen kuralları site.css'te;
   burada sadece token'lar (--*, --gb-*) + yalnızca bu dosyada tanımlı
   bileşenler (.report-filters, .report-card, .panel-band, .popover, .tabs,
   .segmented, .sortable-table, .money, .drawer/.modal, .nav-*-collapse vb.)
   var. site.css'te aynı seçici varsa TEK kaynak site.css'tir — burada
   tekrarlanmaz (load order: tokens.css → site.css → gb-components.css, bkz.
   _Layout.cshtml). */

:root {
  /* Type scale */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-num: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-44: 44px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Legacy radius aliases (site.css compatibility) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Shadows — Claude Design Linear-tier; indigo-tinted (rgba'da 20,18,47 = accent-950) */
  --shadow-xs: 0 1px 0 rgba(20, 18, 47, 0.04), 0 1px 2px rgba(20, 18, 47, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 18, 47, 0.05), 0 2px 4px rgba(20, 18, 47, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 18, 47, 0.06), 0 6px 12px rgba(20, 18, 47, 0.06);
  --shadow-lg: 0 4px 10px rgba(20, 18, 47, 0.08), 0 16px 32px rgba(20, 18, 47, 0.08);

  /* Density */
  --row-h: 44px;
  --sidebar-w: 260px;
  --sidebar-width: 260px;
  --topbar-h: 56px;
  --topbar-height: 56px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
}

/* ============ PALETTE INK (default) — Claude Design v2 ============
   Beyaz odaklı + indigo accent (#1e1b4b ailesi). Tüm uygulamadaki .btn / .card /
   .data-table / link / focus eski "--primary" üzerinden gider; indigo'ya bağlanınca
   her sayfa otomatik yeni tasarım dilinde görünür (zero-touch migration). */
:root,
:root[data-theme="ink"] {
  /* Surface — beyaz odaklı, neutral grays (yeni Claude Design palette) */
  --bg: #fafafa;            /* eski #F7F9FB → #fafafa (warmer neutral) */
  --surface: #ffffff;
  --surface-soft: #f5f5f6;
  --surface-sunk: #ededef;
  --surface-muted: #f5f5f6;
  --surface-hover: #f5f5f6;
  --border: #e6e6ea;        /* neutral-200 */
  --border-strong: #d2d2d8; /* neutral-300 */
  --border-subtle: #ededef; /* neutral-150 */

  /* Text — Claude Design neutrals (warmer than slate) */
  --text: #161619;          /* neutral-900 */
  --text-muted: #52525c;    /* neutral-600 */
  --text-subtle: #737380;   /* neutral-500 */
  --text-disabled: #a3a3ad; /* neutral-400 */
  --text-on-primary: #ffffff;

  /* Primary — GABSİS LACİVERT (24 Tem 2026: logo/favicon markasıyla tutarlı hale
     getirildi — eski indigo #1e1b4b tüm siteden kaldırıldı, #08244a navy'ye
     geçildi. text-on-primary zaten beyaz, navy koyuluğunda kontrast yeterli
     kalıyor — sadece daha koyu bir ton, okunabilirlik bozulmuyor). */
  --primary: #08244a;             /* navy-900 — GABSİS marka rengi */
  --primary-hover: #0e3161;       /* navy-800 — hover */
  --primary-soft: #e8edf6;        /* navy-50 */
  --primary-soft-hover: #d6e0ee;  /* navy-100 */
  --primary-tint: #e8edf6;
  --primary-ring: rgba(8, 36, 74, 0.22);
  --primary-text: #0e3161;        /* navy-800 — link (base rengin üstünde biraz daha canlı) */

  /* Semantic — calmer warmer tones (sade, ölçülü) */
  --success: #2f8a48;
  --success-soft: #ecf6ee;
  --success-text: #237138;
  --warning: #c98a14;
  --warning-soft: #fdf5e6;
  --warning-text: #8f620c; /* Faz 43 — WCAG AA: warning-soft üstünde 4.89:1 (eski #a4710e 3.92:1 idi) */
  --danger: #c8332f;
  --danger-soft: #fdecec;
  --danger-text: #a82723;
  --info: #2569b8; /* Faz 43 — WCAG AA: info-soft üstünde 4.89:1 (eski #2972c4 4.33:1 idi) */
  --info-soft: #e9f2fb;

  /* Charts — navy tonlamaları */
  --chart-1: #08244a;
  --chart-2: #2f5f96;
  --chart-3: #8fb3d9;
  --chart-4: #c98a14;
  --chart-5: #2f8a48;
  --chart-6: #2972c4;

  --focus: 0 0 0 3px var(--primary-ring);
}

/* ============ PALETTE STONE ============
   Off-white cream, matte petrol green. "Sessiz Operasyon" mood. */
:root[data-theme="stone"] {
  --bg: #FAF8F3;
  --surface: #FFFEFA;
  --surface-soft: #F3F0E8;
  --surface-sunk: #ECE8DD;
  --surface-muted: #F3F0E8;
  --surface-hover: #F3F0E8;
  --border: #E4DFD1;
  --border-strong: #D3CDBB;
  --border-subtle: #EFEBE0;

  --text: #1D221F;
  --text-muted: #5E6861;
  --text-subtle: #8A9289;
  --text-disabled: #AEBAB2;
  --text-on-primary: #FFFFFF;

  --primary: #1F7A6D;
  --primary-hover: #176359;
  --primary-soft: #E4F0ED;
  --primary-soft-hover: #D3E5E0;
  --primary-tint: #EEF5F3;
  --primary-ring: rgba(31, 122, 109, 0.2);
  --primary-text: #1F7A6D;

  --success: #1F7A6D;
  --success-soft: #E4F0ED;
  --success-text: #176359;
  --warning: #B27A1C;
  --warning-soft: #F3E7D0;
  --warning-text: #8E6116;
  --danger: #A63B3B;
  --danger-soft: #EFD9D9;
  --danger-text: #842E2E;
  --info: #37708F;
  --info-soft: #E1ECF1;

  --chart-1: #1F7A6D;
  --chart-2: #6FA59B;
  --chart-3: #BDD4CF;
  --chart-4: #B27A1C;
  --chart-5: #37708F;
  --chart-6: #6FA59B;

  --focus: 0 0 0 3px var(--primary-ring);
}

/* Density modifiers */
:root[data-density="compact"] {
  --row-h: 38px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 20px;
}
:root[data-density="cozy"] {
  --row-h: 52px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 30px;
}

/* Base */

/* Tipografi baz çizgisi — viewlar arası tutarlılık.
   Page title (h1): 24px / 600
   Section title (h2): 20px / 600
   Card title (h3): 15px / 600
   Body: 14px (default)
   Bu defaultlar; özel component (.card-title, .kpi-num vs.) kendi font-size'ını
   tanımladığında override eder. */
h1 { margin: 0; font-size: var(--fs-24); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
h2 { margin: 0; font-size: var(--fs-20); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
h3 { margin: 0; font-size: var(--fs-15); font-weight: 600; line-height: 1.3; color: var(--text); }
h4 { margin: 0; font-size: var(--fs-14); font-weight: 600; line-height: 1.3; color: var(--text); }

button {
  font-family: inherit;
  cursor: pointer;
}
input, select, textarea {
  font-family: inherit;
}

::selection {
  background: var(--primary-soft);
  color: var(--text);
}

/* Scrollbars — thin, calm */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-subtle);
}

/* ============ Component primitives ============ */



.card-head {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.card-head h3 {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Buttons */

.btn-soft {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}
.btn-soft:hover {
  background: var(--primary-soft-hover);
}

.btn-icon {
  width: 30px;
  padding: 0;
  justify-content: center;
}

/* Faz 43 — .badge'in TEK kaynağı artık site.css (duplike temel/varyant tanımlar
   silindi, nowrap/max-width/default-renk özellikleri oraya taşındı). Burada
   yalnız site.css'te karşılığı olmayan .badge-dot::before kaldı. */
.badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Inputs */
.input {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: var(--fs-13);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  width: 100%;
}
.input:hover {
  border-color: var(--text-subtle);
}
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus);
}
.input::placeholder {
  color: var(--text-subtle);
}
.input[readonly], .input:disabled { background: var(--surface-soft); color: var(--text-muted); }

.input-search {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238693A2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}

/* Form controls (Identity / Bootstrap compat) */
.form-control, .form-select {
  width: 100%; height: 36px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text);
  font-size: var(--fs-13); font-family: inherit;
  outline: none; transition: border-color 120ms, box-shadow 120ms;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: var(--focus);
}

/* Tables */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-13);
  background: var(--surface);
}
.table thead th {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.table tbody td {
  padding: 0 16px;
  height: var(--row-h);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
  vertical-align: middle;
}
.table tbody tr:hover td {
  background: var(--surface-soft);
}
.table tbody tr.selected td {
  background: var(--primary-tint);
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.table .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  white-space: nowrap;
}
.table .mono {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

/* Faz 43 — .data-table'ın TEK kaynağı artık site.css. Buradaki duplike temel
   kurallar silindi; td.clip / td.desc / tr.total-row site.css'e taşındı. */
/* Çizgili satırlar — klasik rapor tabloları (eski Gabsis görünümü) */
.table-striped tbody tr:nth-child(odd) td { background: var(--surface-hover); }

/* ── Para ve rapor bileşenleri (24 Tem 2026 — Claude Design "Gabsis Raporlar"
   içe aktarımı, rapor ekranlarında ortak sözlük) ─────────────────────────── */
.money {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
}
.money--pos { color: var(--success-text); }
.money--neg { color: var(--danger-text); }

/* Panel bandı — iki panelli rapor kartlarının başlık/toplam şeridi
   (Gelir Gider Tablosu, Kasa Durumu gibi ekranlarda) */
.panel-band {
  background: var(--surface-soft); border-bottom: 1px solid var(--border);
  padding: 11px 16px; font-size: var(--fs-13); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.panel-band .band-total { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-band--top { background: var(--surface-soft); color: var(--text-muted); font-weight: 500; }
.panel-band--top .band-total { color: var(--text); font-weight: 600; }
.panel-band--accent {
  background: var(--primary); color: var(--text-on-primary); border: none;
  border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
  font-size: var(--fs-14); padding: 13px 16px;
}
.panel-band--accent .band-total { font-size: var(--fs-15); font-weight: 700; }

/* Rapor filtre çubuğu — dikey label+input alanları (_ReportFilters.cshtml).
   UI denetimi 18.09.2026 (SYS-1..SYS-8): flex → grid, tek kontrol yüksekliği,
   margin sızıntısı kapatıldı, ön ayar chip'leri, eylem hiyerarşisi. Ayrıntı: RAPOR.md. */
.report-filters {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* Faz 47 — min-width:0 idi. flex:2 gibi basis'i sıfırlayan bir alanda kutu genişliği
   sıfıra çöküyor, içindeki input ise min-width:140px'i koruyup kutusundan taşarak
   komşu alanın üstüne biniyordu (Kişiler ekranındaki Ad/Soyad + Telefon çakışması).
   Grid hücresi içinde min-width:0 aynı taşmayı önler (min-content yerine). */
.report-filters .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-bottom: 0; }
/* Açıklama/Ara/Kişi Adı/range-pair/Hızlı Seçim gibi geniş alanlar 2 slot kaplar */
.report-filters .field--wide { grid-column: span 2; }
/* Charges/Index gibi ekranlarda iki AYRI <form> (query semantiği farklı) aynı grid'i paylaşır:
   sarmalayıcı <form> kendi kutusunu kaybedip .field çocuklarını doğrudan grid'e devreder.
   Formun kendisi zaten bir .field ise (ör. tek alanlı arama formu) dokunulmaz. */
.report-filters > form:not(.field) { display: contents; }
/* Filtrele/Temizle/Gelişmiş grubu: kendi satırında, sağa yaslı */
.report-filters .filter-actions,
.report-filters > .btn, .report-filters > a.btn { grid-column: 1 / -1; }
.report-filters .filter-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
/* Excel/PDF/Yazdır — filtre eylemlerinden ayrık, sağa yaslı grup (SYS-4) */
.report-filters .export-actions { display: flex; gap: 8px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--border-subtle); }
/* İki uçlu sayısal aralık (en az – en çok) tek label altında */
.report-filters .range-pair { display: flex; align-items: center; gap: 6px; }
.report-filters .range-pair input { width: 104px; min-width: 0; flex: 1 1 0; }
.report-filters .range-pair > span { color: var(--text-subtle); font-size: var(--fs-12); }
.report-filters .field label {
  font-size: var(--fs-11); color: var(--text-subtle); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.03em; margin: 0;
}
.report-filters .field select,
.report-filters .field input:not([type="number"]):not([type="checkbox"]):not([type="radio"]) { min-width: 140px; }
/* Tek checkbox'lı alan: kontrol satırı yüksekliğinde, altta hizalı (SYS-6) */
.report-filters .field--check { flex-direction: row; align-items: center; gap: 8px; height: 32px; }
.report-filters .field--check label { text-transform: none; letter-spacing: 0; font-size: var(--fs-13); color: var(--text); cursor: pointer; }
.report-filters .field--check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

/* SYS-1 — filtre çubuğunda tek kontrol yüksekliği: input/select/buton/ön ayar hepsi aynı */
.report-filters :is(.form-control, .form-select, .input, input:not([type="checkbox"]):not([type="radio"]), select),
.report-filters .btn {
  height: 32px; min-height: 32px;
}
.report-filters :is(.form-control, .form-select, .input, input, select) {
  padding: 0 10px; font-size: var(--fs-13);
}
.report-filters .btn { padding: 0 12px; font-size: var(--fs-13); }
/* Arama kutusu: ikon için sol boşluk yukarıdaki padding kuralına ezilmesin */
.report-filters .input-search { padding-left: 34px; }
/* EKR-11 — native select chevron, filtre çubuğunda tutarlı görünüm */
.report-filters select {
  appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238693A2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* SYS-3 — Hızlı Seçim ön ayarları (Bu Ay / Geçen Ay / Bu Yıl): renkli pill chip */
.report-filters .quick { display: flex; gap: 6px; flex-wrap: wrap; }
.report-filters .gb-date-preset {
  background: var(--primary-soft); color: var(--primary-text);
  border: 1px solid var(--primary-soft-hover); border-radius: var(--r-pill);
  font-weight: 500;
}
.report-filters .gb-date-preset:hover { background: var(--primary-soft-hover); color: var(--primary-text); }
.report-filters .gb-date-preset:focus-visible { box-shadow: var(--focus); }
.report-filters .gb-date-preset.is-active,
.report-filters .gb-date-preset[aria-pressed="true"] {
  background: var(--primary); color: var(--text-on-primary); border-color: var(--primary);
}

/* Mobil: filtre alanları 2 kolon (tarih çiftleri yan yana), dokunma hedefi 40px (SYS-1/SYS-7) */
@media (max-width: 640px) {
  .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-filters .field--wide, .report-filters .field--check { grid-column: 1 / -1; }
  .report-filters :is(.form-control, .form-select, .input, input:not([type="checkbox"]):not([type="radio"]), select),
  .report-filters .btn { height: 40px; min-height: 40px; }
  .report-filters .field--check { height: 40px; }
  .report-filters .filter-actions { width: 100%; }
  .report-filters .export-actions { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
  .report-filters .export-actions .btn { flex: 1 1 0; justify-content: center; }
}

/* Rapor kart menüsü — Raporlar dizini (tıklanabilir kart, hover'da hafif kalkma) */
.report-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); padding: 16px; min-width: 0; text-decoration: none; color: inherit;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); text-decoration: none; }
.report-card:focus-visible { outline: none; box-shadow: var(--focus); }
.report-card .rc-ico {
  width: 32px; height: 32px; border-radius: 8px; background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0;
}
.report-card .rc-name { font-size: var(--fs-14); font-weight: 600; letter-spacing: -0.01em; }
.report-card .rc-desc { font-size: var(--fs-12); color: var(--text-muted); line-height: 1.45; }

/* Bölüm başlığı — kart grid'lerini kategoriye ayırmak için (Raporlar dizini vb.) */
.section-heading {
  font-size: var(--fs-13); font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 24px 0 12px;
}
.section-heading:first-child { margin-top: 0; }

/* N7 — Sticky table header (global, sortable-table + drawer içi) */
.sortable-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-soft);
  z-index: 5;
  box-shadow: 0 1px 0 var(--border);
}
/* Drawer içinde tablo varsa offset yok — sticky zaten drawer scroll context'i takip eder */

/* N8 — Row hover affordance */
.sortable-table tbody tr {
  transition: background-color 0.12s;
}
.sortable-table tbody tr:hover {
  background-color: var(--surface-hover);
}

/* Sortable table headers */
.data-table th.sortable { cursor: pointer; user-select: none; transition: color .15s; position: relative; }
.data-table th.sortable:hover { color: var(--text); }
.data-table th.sortable .sort-indicator {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-size: 10px;
  color: var(--primary);
  margin-left: 4px;
  opacity: 0.5;
}
.data-table th.sortable[data-sort-dir="asc"] .sort-indicator,
.data-table th.sortable[data-sort-dir="desc"] .sort-indicator { opacity: 1; }
.data-table th.sortable[data-sort-dir="asc"],
.data-table th.sortable[data-sort-dir="desc"] { color: var(--text); font-weight: 600; }

/* Segmented control */
.segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  gap: 2px;
}
.segmented button {
  background: transparent;
  border: none;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented button:hover {
  color: var(--text);
}
.segmented button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

/* Tabs */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--s-6);
}
/* Sekmeler hem <button> hem <a> ile kurulabilir (link sekmeler sayfa yenileyen
   filtreler için: Üyelik Talepleri, Personel). .tab/.tab-active eski adlar — desteklenir. */
.tabs button,
.tabs a,
.tab {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 12px 14px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tabs button:hover,
.tabs a:hover,
.tab:hover {
  color: var(--text);
}
.tabs button.active,
.tabs a.active,
.tab-active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

/* Faz 43 — .kpi-num (ölü) ve site.css'teki kazanan tanımlarla çakışan
   .kpi-label/.kpi-value/.kpi-trend kopyaları kaldırıldı; canlı olan .kpi-sub
   site.css'teki KPI bloğuna taşındı. KPI kartının TEK kaynağı: site.css. */

/* Utilities */
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--font-num); }
.uc { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-11); color: var(--text-subtle); font-weight: 500; }
.hr { height: 1px; background: var(--border-subtle); margin: var(--s-5) 0; border: none; }

/* Token-based font-size utilities — inline style yerine kullan */
.text-11 { font-size: var(--fs-11); }
.text-12 { font-size: var(--fs-12); }
.text-13 { font-size: var(--fs-13); }
.text-14 { font-size: var(--fs-14); }
.text-15 { font-size: var(--fs-15); }
.text-16 { font-size: var(--fs-16); }
.text-18 { font-size: var(--fs-18); }
.text-20 { font-size: var(--fs-20); }
.text-24 { font-size: var(--fs-24); }
.fw-500 { font-weight: 500; }
.fw-550 { font-weight: 550; }
.fw-600 { font-weight: 600; }

.col { display: flex; flex-direction: column; gap: var(--s-3); }
.grow { flex: 1; min-width: 0; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.text-danger { color: var(--danger-text); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nowrap { white-space: nowrap; }

/* Focus ring utility */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Grid helpers */

.grid > * { min-width: 0; } /* grid çocukları küçülebilsin — metin taşması önlenir */

/* Ara breakpoint — dar masaüstü/tablet yatayda 4'lü ve 3'lü gridler 2'ye düşer;
   26px mono ₺ tutarları 200px karta sığmıyordu (metin taşması şikâyeti). */
@media (max-width: 1280px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-10) var(--s-6);
  text-align: center;
  color: var(--text-muted);
}
.empty .empty-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  margin-bottom: var(--s-4);
}
.empty h4 {
  margin: 0 0 4px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
}
.empty p {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-13);
  max-width: 320px;
}

.empty-state-icon { color: var(--text-subtle); margin-bottom: var(--s-3); display: inline-block; }
.empty-state-title { font-size: var(--fs-15); font-weight: 600; color: var(--text); margin-bottom: var(--s-2); }
.empty-state-desc { font-size: var(--fs-13); color: var(--text-muted); margin-bottom: var(--s-5); }

/* Form row pattern — tutarlı form yapısı (form-row + form-label + form-error + form-hint) */
.form-row { margin-bottom: var(--s-4); display: flex; flex-direction: column; gap: 6px; }
.form-label { display: block; font-size: var(--fs-13); font-weight: 500; color: var(--text); margin-bottom: 0; }
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-error { display: block; font-size: var(--fs-12); color: var(--danger); margin-top: 4px; }

/* Chart helpers */
.chart-grid line {
  stroke: var(--border-subtle);
  stroke-width: 1;
}
.chart-axis text {
  fill: var(--text-subtle);
  font-size: 10px;
  font-family: var(--font-num);
}

/* Drawer / modal */
/* `hidden` attribute reliability: class rules with `display:X` override UA
   `hidden { display:none }`. Force it so `element.hidden = true` always hides. */
.drawer[hidden], .overlay[hidden], .modal[hidden] { display: none !important; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 36, 0.32);
  backdrop-filter: blur(2px);
  z-index: 50;
  animation: fadeIn 160ms var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 51;
  display: flex;
  flex-direction: column;
  animation: slideIn 220ms var(--ease);
  box-shadow: var(--shadow-lg);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  z-index: 51;
  box-shadow: var(--shadow-lg);
  animation: slideUp 200ms var(--ease);
  max-width: 92vw;
}

/* Spark trend */
.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }

/* Faz 22 — Sidebar collapse bölümleri (tüm gruplar açılıp kapanabilir) */
.nav-section-collapse { display: block; }
.nav-section-collapse > summary { list-style: none; cursor: pointer; }
.nav-section-collapse > summary::-webkit-details-marker { display: none; }
.nav-section-collapse > summary::marker { content: ''; }
.nav-heading-collapse {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--text-subtle); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 10px 4px;
  user-select: none;
  transition: color 120ms;
}
.nav-heading-collapse:hover { color: var(--text-muted); }
.nav-heading-collapse > span:first-child { flex: 1; }
.nav-heading-collapse .chev {
  width: 10px; height: 10px;
  transition: transform 150ms ease;
  color: var(--text-subtle);
  flex-shrink: 0;
}
.nav-section-collapse[open] > summary .chev { transform: rotate(180deg); }

/* Faz 22 — Pin butonu (her bölüm için sabitle/serbest bırak) */
.nav-pin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  padding: 0; border: none; background: transparent;
  border-radius: 4px; cursor: pointer;
  color: var(--text-subtle); opacity: 0.5;
  transition: all 120ms ease;
  flex-shrink: 0;
}
.nav-heading-collapse:hover .nav-pin-btn { opacity: 0.85; }
.nav-pin-btn:hover { background: var(--surface-soft); color: var(--text-muted); opacity: 1 !important; }
.nav-pin-btn.pinned {
  color: var(--primary); opacity: 1;
  background: var(--primary-soft);
  transform: rotate(-30deg);
}
.nav-pin-btn.pinned:hover { background: var(--primary-soft); transform: rotate(-30deg) scale(1.1); }

.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; margin: 1px 0;
  border: none; background: transparent;
  color: var(--text-muted); font-size: 13px; font-weight: 400;
  font-family: inherit; border-radius: var(--r-sm); cursor: pointer;
  text-align: left; transition: background 120ms, color 120ms;
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-soft); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.nav-item svg { flex-shrink: 0; }
.nav-item .nav-label { flex: 1; }

/* Nav groups — summaries are visually identical to flat .nav-item rows */

.nav-group-summary .nav-label { font-weight: 400; }
.nav-group.has-active-child > .nav-group-summary,
.nav-group.has-active-child > .nav-group-summary .nav-label { font-weight: 500; }
.nav-group-summary::-webkit-details-marker,
.nav-group-summary::marker { display: none; content: ""; }
.nav-group-summary:hover { background: var(--surface-soft); color: var(--text); }
.nav-group-summary .nav-label { flex: 1; }

.nav-group.has-active-child > .nav-group-summary {
  color: var(--text);
}
.nav-group.has-active-child > .nav-group-summary::before {
  content: "";
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--primary);
  margin-left: -6px; margin-top: 9px;
}
.nav-group.has-active-child > .nav-group-summary { position: relative; }

.nav-sub .nav-item:hover { color: var(--text); background: var(--surface-soft); }

/* Site switcher */
.site-switcher-area { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-subtle); position: relative; }

.site-switcher:hover { background: var(--surface-sunk); }

.global-search input {
  width: 100%;
}

/* ── Auth pages ─────────────────────────────────────── */

@media (max-width: 800px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
}

.auth-brand .eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; opacity: 0.7; margin-bottom: 12px; }

/* Density helpers for table */
:root[data-density="compact"] .table tbody td { padding: 0 12px; }
:root[data-density="cozy"] .table tbody td { padding: 0 20px; }

/* Icon sizes — used with <svg class="i-N"><use href="#icon-..." /></svg> */

.i-10 { width: 10px; height: 10px; }
.i-11 { width: 11px; height: 11px; }

.i-13 { width: 13px; height: 13px; }

.i-15 { width: 15px; height: 15px; }

/* ── Popovers (topbar notifications, help) ───────────────── */
.popover-host { position: relative; display: inline-flex; }
.popover-host > [data-popover-trigger][aria-expanded="true"] {
  background: var(--surface-soft); color: var(--text);
}
.popover {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 340px; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 40;
  overflow: hidden;
  animation: popover-in 120ms var(--ease);
}
.popover[hidden] { display: none; }
@keyframes popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.popover-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.popover-foot {
  padding: 8px; border-top: 1px solid var(--border-subtle);
}
.popover-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 28px 16px; justify-content: center;
  color: var(--text-subtle); font-size: var(--fs-13);
}

.notif-list {
  list-style: none; margin: 0; padding: 4px;
  max-height: 360px; overflow-y: auto;
}
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.notif-item:hover { background: var(--surface-soft); }
.notif-ico {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--surface-soft); color: var(--text-muted);
}
.notif-tone-success .notif-ico { background: var(--success-soft); color: var(--success); }
.notif-tone-warning .notif-ico { background: var(--warning-soft); color: var(--warning); }
.notif-tone-danger  .notif-ico { background: var(--danger-soft);  color: var(--danger);  }
.notif-tone-info    .notif-ico { background: var(--info-soft);    color: var(--info);    }
.notif-body { flex: 1; min-width: 0; line-height: 1.3; }
.notif-title { font-size: var(--fs-13); font-weight: 500; color: var(--text); }
.notif-text  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-when  { font-size: 11px; color: var(--text-subtle); margin-top: 4px; font-family: var(--font-mono); }

.badge-soft {
  background: var(--primary-soft); color: var(--primary);
  font-size: 10.5px; padding: 2px 7px; border-radius: var(--r-pill);
  border: none; font-weight: 500;
}
.help-list li span { flex: 1; }
.help-list kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; font-size: 10.5px; font-family: var(--font-mono);
  color: var(--text-muted); background: var(--surface);
}

/* ────────────────────────────────────────────────────────────────────────
   Faz 11A — RESPONSIVE LAYER
   Hedef cihazlar:
     Desktop (>1280px) — full sidebar, geniş tablo, 4-col KPI
     Laptop (1024-1280) — full sidebar, 4-col KPI, biraz daha sıkı
     Tablet (768-1024) — sidebar drawer, 2-col grids
     Mobile (<768px) — drawer + tek kolon + iOS-friendly
   ──────────────────────────────────────────────────────────────────────── */

/* Faz 11B — Hamburger butonu HER cihazda görünür (mobile drawer + desktop collapse).
   Mobile'da sidebar drawer'ı, desktop'ta sidebar genişliğini toggle eder. */
.hamburger { display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; }

/* Sidebar overlay — drawer açıkken zemin */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 36, 0.45);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.sidebar-overlay.show { opacity: 1; pointer-events: auto; }

/* Faz 11B — Desktop sidebar collapse (>1024px). Genişlik 260px ↔ 0px. */
@media (min-width: 1025px) {
  .sidebar { transition: width .25s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-right: 0 !important;
  }
}

/* iOS auto-zoom önleme: form elemanlarında 16px font (input-search hariç hassas).
   16px altında iOS Safari focus'ta sayfayı zoomlar. */
@media (max-width: 1024px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="date"],
  input[type="search"], select, textarea,
  .input, .form-control, .form-select {
    font-size: 16px;
  }
}

/* ── Drawer breakpoint: 1024px ve altı ─────────────────────────────────
   .app / .sidebar / .sidebar.open / .main-area kuralları site.css'e taşındı
   (Faz 0.1 dedupe) — bu blokta yalnız site.css'te karşılığı olmayanlar kaldı. */
@media (max-width: 1024px) {
  .sidebar-overlay { display: block; }

  .hamburger { display: inline-flex; }

  /* drawer açıkken body scroll engeli */
  body.sidebar-drawer-open { overflow: hidden; }

  /* Topbar drawer'lı modda daha kompakt */
  .topbar { padding: 0 var(--s-4); gap: var(--s-3); }

  /* Sayfa içerikleri biraz daraltılır */
  .page-header { padding: 18px 20px 14px; }
  .page-content { padding: 20px; }
  .dash-topband { padding: 14px 20px 10px; }
  .dash-main { padding: 16px 16px 16px 20px; }
}

/* Tam mobile (<768px) ─ daha agresif kompakt + tek kolon */
@media (max-width: 768px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .breadcrumb { display: none; }
  .topbar .global-search { display: none; }
  .topbar .username-text { display: none; }
  .topbar-sep { display: none; }

  /* Trial banner mobile'da kompakt */
  .trial-banner { padding: 8px 12px; font-size: 12px; }
  .trial-banner a { margin-left: 0; }
  /* Faz 16 UX fix — soft trial banner (4-7 gün): mobile'da inline,
     mevcut topbar'la entegre. Critical değilse minimum yer kaplar. */
  .trial-banner-soft {
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    background: var(--surface-soft, #f8fafc) !important;
    border-color: var(--border, #e5e7eb) !important;
    color: var(--text-muted) !important;
  }
  .trial-banner-soft strong { color: var(--text); }
  .trial-banner-soft a {
    color: var(--primary) !important;
    text-decoration: none !important;
  }

  /* Page header'lar mobile'da tek satır olmasın */
  .page-header { padding: 14px 16px 12px; }
  .page-header h1 { font-size: 18px; }
  .page-header-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-content { padding: 16px; }

  /* Card padding'i kompakt */
  .card { padding: 14px; }
  .card-pad { padding: 14px; }
  .card-header { padding: 12px 14px; }
  .card-head { padding: 12px 14px; }

  /* Form grid'leri tek kolon */
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
  .grid-main, .grid-triple { grid-template-columns: 1fr; }

  /* Toolbar mobile (filtreler taşmasın) */
  .toolbar { flex-wrap: wrap; padding: 10px 14px; }
  .toolbar .search { max-width: 100%; flex: 1 1 100%; }

  /* Touch hedefleri 44px minimum (Apple HIG) — btn-sm hariç
     (.btn:not(.btn-sm), .icon-btn kuralları site.css'e taşındı, Faz 0.1) */
  .btn-lg { min-height: 44px; }

  /* Auth pages */
  .auth-card { max-width: 100%; }

  /* Popover'ları tam ekrana yakın aç */
  .popover {
    position: fixed;
    top: 64px; left: 8px; right: 8px;
    min-width: 0; max-width: none;
    width: auto;
  }

  /* Drawer (Persons, vb.) mobile'da fullscreen modal */
  .drawer {
    width: 100%;
    max-width: 100%;
    border-left: none;
  }

  /* Alert'lerin etrafındaki padding mobile'da daralır */
  .topbar { gap: 6px; }
}

/* Çok küçük mobile (<480px) — son kompaktlaştırma */
@media (max-width: 480px) {
  .page-header { padding: 12px 12px 10px; }
  .page-header h1 { font-size: 17px; }
  .page-content { padding: 12px; }
  .card { padding: 12px; }
  .topbar { gap: 4px; }
  .topbar-actions { gap: 6px; }
}

/* ────────────────────────────────────────────────────────────────────────
   Faz 16 UX fix — Payments/Receive responsive grid

   Desktop: 1fr (sol açık borçlar tablosu) + 420px (sağ ödeme formu sticky).
   Mobile: tek kolon, sticky kaldırılır (form akışta görünür, kart sırasıyla
   önce borçlar sonra ödeme — manager parmaktan kaydırıp formu doldurur).
   ──────────────────────────────────────────────────────────────────── */
.receive-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 18px;
  align-items: flex-start;
}
.receive-form {
  position: sticky;
  top: calc(var(--topbar-height, 56px) + 20px);
}
@media (max-width: 1024px) {
  .receive-grid { grid-template-columns: 1fr; }
  .receive-form { position: static; }  /* mobile/tablet'te sıkışmasın */
}

/* ────────────────────────────────────────────────────────────────────────
   Faz 16 Mobile-First — Data-table → Card view (<768px)

   Pattern: thead gizle, her tr block, td'ler flex row
   (label - value yan yana). data-label attribute site.js auto-attach
   eder (initTableMobileLabels). Genel kullanım: hiçbir HTML değişiklik
   gerekmiyor, mevcut <table class="data-table"> view'ları otomatik
   mobile'da kart yığını gibi davranır.

   opt-out: <table class="data-table no-mobile-cards"> sınıfı eklenirse
   tablo mobile'da yatay scroll modunda kalır (özel layout için).
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tablo container'ı block — yatay scroll kaldır, dikey kart akışı */
  .data-table:not(.no-mobile-cards) {
    display: block;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
  }
  .data-table:not(.no-mobile-cards) thead { display: none; }
  .data-table:not(.no-mobile-cards) tbody { display: block; }

  /* Her satır bir card */
  .data-table:not(.no-mobile-cards) tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
  }
  .data-table:not(.no-mobile-cards) tbody tr:hover { background: var(--surface); }

  /* Her cell — label + value flex row */
  .data-table:not(.no-mobile-cards) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    text-align: right;
    font-size: 14px;
    line-height: 1.4;
  }
  .data-table:not(.no-mobile-cards) tbody td + td {
    border-top: 1px dashed var(--border);
    margin-top: 0;
  }

  /* Label (data-label attribute'undan) — sol tarafa */
  .data-table:not(.no-mobile-cards) tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    text-align: left;
  }
  /* Etiketsiz hücre (action buttons gibi) — sadece içerik */
  .data-table:not(.no-mobile-cards) tbody td[data-label=""]::before,
  .data-table:not(.no-mobile-cards) tbody td:not([data-label])::before {
    content: none;
  }
  .data-table:not(.no-mobile-cards) tbody td[data-label=""],
  .data-table:not(.no-mobile-cards) tbody td:not([data-label]) {
    justify-content: flex-end;
  }

  /* num/text-right hücreler card view'da text-align:right zaten */
  .data-table:not(.no-mobile-cards) tbody td.num,
  .data-table:not(.no-mobile-cards) tbody td.text-right { font-weight: 600; }

  /* row-actions wrap mobile — ortala, gap genişlet */
  .data-table:not(.no-mobile-cards) tbody td .row-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Faz 16 Mobile-First — Sticky bottom action bar

   Form alt buton grupları (Kaydet/Gönder/İptal) mobile'da scroll edip
   bulunmak yerine ekran altına sabitlenir. Kullanım:

     <div class="form-actions sticky-mobile">
       <button>İptal</button>
       <button>Kaydet</button>
     </div>

   Desktop'ta normal flow (sticky değil), mobile'da bottom: 0 fixed.
   ──────────────────────────────────────────────────────────────────── */
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.form-actions .btn { min-height: 38px; }
.form-actions .spacer { flex: 1; }

@media (max-width: 768px) {
  .form-actions.sticky-mobile {
    position: sticky;
    bottom: 0;
    margin-top: 24px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    z-index: 10;
  }
  .form-actions.sticky-mobile .btn {
    flex: 1 1 auto;
    min-height: 44px;  /* Touch target Apple HIG */
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Faz 16 Mobile-First — Inline width override + form-select full width
   View'lardaki style="width:150px; height:32px" gibi inline ayarları
   mobile'da override et — select'ler sıkışmasın.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .toolbar select,
  .toolbar .form-select,
  .toolbar input[type="text"],
  .toolbar input[type="search"],
  .toolbar input[type="date"],
  .toolbar input[type="number"] {
    width: 100% !important;
    height: 40px !important;     /* Touch-friendly */
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .toolbar form { flex: 1 1 100%; gap: 8px !important; flex-wrap: wrap; }
  .toolbar form > * { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .toolbar .spacer { display: none; }

  /* Page-header butonları mobile'da tam genişlik */
  .page-header-row .btn,
  .page-header-row > a.btn { width: 100%; justify-content: center; }
}

/* ── Tablo wrapper'ları — yatay scroll (taşma engeli) ───────────────── */
/* Strateji A: card-flush içinde tablo varsa kart kendisi yatay scroll'a
   geçer. Mevcut view'larda inline style="overflow:hidden" var; onu yenmek
   için !important kullanıyoruz. CSS spesifikliği yeter, ama inline style'ı
   yenmenin tek yolu !important. (`:has()` modern tarayıcılarda destekli) */
.card-flush:has(table.data-table),
.card-flush:has(table.table),
.card:has(table.data-table),
.card:has(table.table) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Tabloların minimum genişliği — SADECE tablet aralığında (769-1024px).
   ≤768px'te mobile-card dönüşümü zaten devrede (aşağıda ~1471. satır) — tablo
   block/kart görünümüne geçiyor, min-width'e gerek yok. >1024px masaüstünde ise
   min-width KOŞULSUZ uygulanırsa dar panellerde (ör. grid-cols-2 içindeki 3
   sütunlu Gelir/Gider tabloları) tablo panelden taşar ve son sütun (ÖDENEN /
   TAHSİL EDİLEN) kesilmiş görünür — overlay scrollbar'lar (macOS/mobil) hover
   olmadan görünmediği için kullanıcı bunu "veri eksik" sanır. Bu yüzden kural
   yalnızca tablet aralığına daraltıldı; masaüstünde tablo doğal genişliğine
   (panelin izin verdiği kadar) sığar, gerekirse kendi overflow-x'i devreye girer. */
@media (min-width: 769px) and (max-width: 1024px) {
  .data-table, .table { min-width: 640px; }
}

/* Reports gibi geniş tablolar daha geniş min-width */
.data-table.wide, .table.wide { min-width: 800px; }

/* Table-wrap utility (manuel sarmal istenirse) — .data-table ile aynı kural:
   koşulsuz min-width dar panellerde (grid-cols-2 rapor kartları) taşmaya yol
   açıyordu, sadece tablet aralığına daraltıldı (bkz. yukarıdaki not). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 769px) and (max-width: 1024px) {
  .table-wrap > table { min-width: 640px; }
}

/* Mobile'da tablo cell'leri taşmasın diye nowrap — yatay scroll devreye girer */
@media (max-width: 1024px) {
  .data-table thead th,
  .data-table tbody td,
  .table thead th,
  .table tbody td {
    white-space: nowrap;
  }
}

/* Touch hedefleri — global minimum (form-control kaynaklı 36px hariç) */
@media (max-width: 768px) {
  button, .btn, .icon-btn, .nav-item, .nav-group-summary,
  a.btn, [role="button"] {
    min-height: 36px;
  }
}

/* Button & badge gruplarının taşmasını engelle.
   Sadece utility .row için — topbar-actions hâlâ tek satır kalmalı. */

.row.no-wrap { flex-wrap: nowrap; }

/* ============================================================
   Claude Design v2 — Sidebar mobile drawer + responsive scaling
   Tablet/mobile'da sidebar fixed drawer; menu butonu (#icon-menu)
   ile aç/kapa. Tüm nav item'lar dokunmatik için min-height 40px.
   ============================================================ */

/* Tablet & desktop arası geçiş — 1024px altında sidebar drawer'a dön
   Mevcut JS (.hamburger / .sidebar.open / .sidebar-overlay) ile uyumlu. */
@media (max-width: 1024px) {
  /* .sidebar / .sidebar.open kuralları site.css'e taşındı (Faz 0.1 dedupe) */
  /* Sidebar overlay (JS'in eklediği element) */
  .sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 18, 47, 0.45);
    z-index: 49;
    animation: gb-fade-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  body.sidebar-open { overflow: hidden; }
}

/* Mobile (<640px) — sidebar full width drawer, content padding daralır */
@media (max-width: 640px) {
  .sidebar { width: 88vw; max-width: 320px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .page-content, .page-header { padding: 14px !important; }
  /* KPI kartları stack */
  .home-kpi-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  /* Nav item'lar dokunmatik için biraz daha büyük */
  .nav-item, .nav-group-summary, .nav-sub .nav-item {
    padding: 9px 12px;
    font-size: 14px;
    min-height: 40px;
  }
  /* Form alanları full width */
  .gb-input, .gb-select, .gb-textarea, .form-control {
    width: 100%;
  }
  /* Button gruplar stack */
  .topbar-actions {
    gap: 6px;
  }
  /* Modal'lar full screen */
  .modal, .gb-modal {
    margin: 0;
    border-radius: 0;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
  }
  /* Page title smaller on mobile */
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  /* Topbar search → icon only */
  .topbar-search { display: none; }
}

/* Mobile menü butonu desktop'ta gizli, mobil'de görünür */
.topbar-menu-btn { display: none; }
@keyframes gb-fade-in { from { opacity: 0 } to { opacity: 1 } }

/* ============================================================
   Claude Design import — Gabsis V2 yeni tasarım sistemi tokens.
   Beyaz odaklı, Linear/Stripe ilhamlı, GABSİS lacivert (#08244a) accent.
   `gb-*` prefix ile mevcut tokens'la çakışmaz; yeni view'larda
   .gb-card / .gb-btn / .gb-table kullanılır.
   ============================================================ */
:root {
  /* Neutrals — açık koyu */
  --gb-white: #ffffff;
  --gb-neutral-50: #fafafa;
  --gb-neutral-100: #f5f5f6;
  --gb-neutral-150: #ededef;
  --gb-neutral-200: #e6e6ea;
  --gb-neutral-300: #d2d2d8;
  --gb-neutral-400: #a3a3ad;
  --gb-neutral-500: #737380;
  --gb-neutral-600: #52525c;
  --gb-neutral-700: #3a3a42;
  --gb-neutral-800: #232328;
  --gb-neutral-900: #161619;
  --gb-neutral-950: #0c0c0e;

  /* Accent — GABSİS lacivert (24 Tem 2026: indigo ailesi kaldırıldı, logo/favicon
     markasıyla aynı #08244a navy'ye geçildi) */
  --gb-accent-50: #e8edf6;
  --gb-accent-100: #d1dced;
  --gb-accent-200: #a3b9db;
  --gb-accent-300: #7596c9;
  --gb-accent-400: #4b76b3;
  --gb-accent-500: #2f5f96;
  --gb-accent-600: #1c4677;
  --gb-accent-700: #123561;
  --gb-accent-800: #0e3161;
  --gb-accent-900: #08244a;
  --gb-accent-950: #051830;

  /* Semantic */
  --gb-success-50: #ecf6ee;
  --gb-success-100: #d2ecd8;
  --gb-success-500: #2f8a48;
  --gb-success-600: #237138;
  --gb-success-700: #1b5a2c;
  --gb-warning-50: #fdf5e6;
  --gb-warning-100: #fae5b5;
  --gb-warning-500: #c98a14;
  --gb-warning-600: #a4710e;
  --gb-warning-700: #7d560a;
  --gb-danger-50: #fdecec;
  --gb-danger-100: #fbcfcf;
  --gb-danger-500: #c8332f;
  --gb-danger-600: #a82723;
  --gb-danger-700: #851d1a;
  --gb-info-50: #e9f2fb;
  --gb-info-100: #c8defa;
  --gb-info-500: #2972c4;
  --gb-info-600: #1f5da3;

  /* Surfaces */
  --gb-bg: var(--gb-white);
  --gb-bg-subtle: var(--gb-neutral-50);
  --gb-bg-muted: var(--gb-neutral-100);
  --gb-surface: var(--gb-white);
  --gb-overlay: rgba(12, 12, 14, 0.48);
  --gb-border: var(--gb-neutral-200);
  --gb-border-strong: var(--gb-neutral-300);
  --gb-border-subtle: var(--gb-neutral-150);
  --gb-divider: var(--gb-neutral-150);
  --gb-text: var(--gb-neutral-900);
  --gb-text-muted: var(--gb-neutral-600);
  --gb-text-subtle: var(--gb-neutral-500);
  --gb-text-disabled: var(--gb-neutral-400);
  --gb-text-on-accent: #ffffff;
  --gb-text-link: var(--gb-accent-700);

  /* Focus + shadows */
  --gb-focus-ring: 0 0 0 2px var(--gb-bg), 0 0 0 4px var(--gb-accent-500);
  --gb-shadow-xs: 0 1px 0 rgba(20, 18, 47, 0.04), 0 1px 2px rgba(20, 18, 47, 0.05);
  --gb-shadow-sm: 0 1px 2px rgba(20, 18, 47, 0.05), 0 2px 4px rgba(20, 18, 47, 0.04);
  --gb-shadow-md: 0 2px 4px rgba(20, 18, 47, 0.06), 0 6px 12px rgba(20, 18, 47, 0.06);
  --gb-shadow-lg: 0 4px 10px rgba(20, 18, 47, 0.08), 0 16px 32px rgba(20, 18, 47, 0.08);

  /* Radii — gb-* prefixli */
  --gb-radius-xs: 4px;
  --gb-radius-sm: 6px;
  --gb-radius-md: 8px;
  --gb-radius-lg: 12px;
  --gb-radius-xl: 16px;
  --gb-radius-2xl: 20px;
  --gb-radius-full: 999px;

  /* Type scale */
  --gb-text-xs: 12px;
  --gb-text-sm: 13px;
  --gb-text-base: 14px;
  --gb-text-md: 15px;
  --gb-text-lg: 17px;
  --gb-text-xl: 20px;
  --gb-text-2xl: 24px;
  --gb-text-3xl: 30px;
  --gb-tracking-tight: -0.02em;
  --gb-tracking-snug: -0.01em;
  --gb-tracking-wide: 0.02em;
  --gb-tracking-wider: 0.06em;
  --gb-leading-tight: 1.15;
  --gb-leading-normal: 1.5;

  /* Motion */
  --gb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gb-dur-fast: 120ms;
  --gb-dur: 180ms;
  --gb-dur-slow: 280ms;
}

/* ============================================================
   Dark mode — TÜM uygulama (eski .card/.btn/.table + yeni gb-*).
   Light → Dark toggle ile her sayfa karanlık olur, grafik değil.
   ============================================================ */
[data-theme="dark"] {
  /* === Eski token sistemi (site.css içindeki .card/.btn/.table'a hizmet eder) === */
  --bg: #0c0c0e;
  --surface: #131316;
  --surface-soft: #18181d;
  --surface-sunk: #1a1a1e;
  --surface-muted: #1a1a1e;
  --surface-hover: #1f1f23;

  --border: #28282e;
  --border-strong: #36363d;
  --border-subtle: #1f1f23;

  --text: #f1f1f3;
  --text-muted: #a3a3ad;
  --text-subtle: #737380;
  --text-disabled: #52525c;
  --text-on-primary: #ffffff;

  /* Primary dark variant — navy ailesinden açık mavi (koyu zeminde kontrast için) */
  --primary: #5b8fd6;             /* navy-400 dark mode'da okunur */
  --primary-hover: #85aee0;       /* navy-300 hover */
  --primary-soft: #142a42;        /* deep navy bg for active states */
  --primary-soft-hover: #1c3a58;
  --primary-tint: #142a42;
  --primary-ring: rgba(91, 143, 214, 0.35);
  --primary-text: #9dc2ec;        /* navy-200 — link rengi */

  /* Semantic — dark variant */
  --success: #6dc481;
  --success-soft: #0e2a17;
  --success-text: #6dc481;
  --warning: #e7b34a;
  --warning-soft: #2a1d05;
  --warning-text: #e7b34a;
  --danger: #e8615d;
  --danger-soft: #2a0d0c;
  --danger-text: #e8615d;
  --info: #6ba8e0;
  --info-soft: #0d1d2e;

  --chart-1: #85aee0;
  --chart-2: #5b8fd6;
  --chart-3: #9dc2ec;
  --chart-4: #e7b34a;
  --chart-5: #6dc481;
  --chart-6: #6ba8e0;

  /* Shadows daha karanlık ortam için yoğunlaştır */
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.5);

  /* === Yeni gb-* token sistemi (gb-card/gb-btn/gb-kpi'a hizmet eder) === */
  --gb-bg: #0c0c0e;
  --gb-bg-subtle: #131316;
  --gb-bg-muted: #1a1a1e;
  --gb-surface: #131316;
  --gb-overlay: rgba(0, 0, 0, 0.6);
  --gb-border: #28282e;
  --gb-border-strong: #36363d;
  --gb-border-subtle: #1f1f23;
  --gb-divider: #1f1f23;
  --gb-text: #f1f1f3;
  --gb-text-muted: #a3a3ad;
  --gb-text-subtle: #737380;
  --gb-text-disabled: #52525c;
  --gb-accent-50: #142a42;
  --gb-accent-100: #1c3a58;
  --gb-text-link: var(--gb-accent-300);
  --gb-success-50: #0e2a17;
  --gb-success-100: #14401f;
  --gb-warning-50: #2a1d05;
  --gb-warning-100: #3d2a08;
  --gb-danger-50: #2a0d0c;
  --gb-danger-100: #401311;
  --gb-info-50: #0d1d2e;
  --gb-info-100: #11304b;
}

/* ─── Cookie Banner ────────────────────────────────────────────────────────── */
.cookie-banner {
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
    max-width: 720px; width: calc(100% - 32px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 32px rgba(15,23,42,0.12);
    z-index: 9999; padding: 16px 20px;
}
.cookie-banner-inner { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cookie-banner-text { flex: 1; min-width: 240px; font-size: 13.5px; }
.cookie-banner-text strong { display: block; margin-bottom: 4px; font-size: 13px; }
.cookie-banner-text p { margin: 0; color: var(--text-muted); }
.cookie-banner-text a { color: var(--primary); }
.cookie-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 480px) {
    .cookie-banner { bottom: 8px; padding: 12px 14px; }
    .cookie-banner-actions { width: 100%; }
    .cookie-banner-actions .btn { width: 100%; }
}

/* color-scheme: form input'lar ve scrollbar otomatik dark olsun */
[data-theme="dark"] {
  color-scheme: dark;
}
:root, [data-theme="ink"] {
  color-scheme: light;
}

/* Faz 47 — tekilleştirme sonrası (bkz. site.css başlığı) */