/* =========================================================================
   Bütçe Sistemi — Tek CSS dosyası
   Mobile-first. CSS değişkenleri ile temalanır. Karanlık mod hazır altyapı.
   ========================================================================= */

/* ── Beta Bandı ──────────────────────────────────────────────────────────── */
.beta-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: #2a2215;
  border-bottom: 1px solid #5a4a1a;
  padding: 8px var(--space-4);
  font-size: var(--font-size-xs);
  color: #d4a843;
  position: relative;
}
.beta-banner-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}
.beta-banner-link {
  color: #d4a843;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.beta-banner-link:hover { opacity: .75; }
.beta-banner-close {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #d4a843;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  opacity: .65;
  line-height: 1;
}
.beta-banner-close:hover { opacity: 1; }
.light-theme .beta-banner {
  background: #fef9ec;
  border-bottom-color: #e8c96a;
  color: #7a5c0a;
}
.light-theme .beta-banner-link  { color: #7a5c0a; }
.light-theme .beta-banner-close { color: #7a5c0a; }

/* ── Destek / QR kartı ───────────────────────────────────────────────────── */
.destek-qr-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}
.destek-qr-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  background: #fff;          /* QR her zaman beyaz arka plana ihtiyaç duyar */
  padding: 6px;
}
.destek-qr-placeholder {
  width: 140px;
  height: 140px;
  border-radius: var(--radius);
  border: 2px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3);
  flex-shrink: 0;
}
.destek-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.destek-iban-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
.destek-iban-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
@media (max-width: 480px) {
  .destek-qr-wrap { flex-direction: column; align-items: center; }
  .destek-info { align-items: center; text-align: center; }
}

/* Sayı girişlerinde tarayıcının yukarı/aşağı ok spinnerlarını gizle */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

:root {
  /* ── Budgery Dark Forest Teması — ikon paleti ile senkron ── */

  /* Arka plan: koyu orman yeşili */
  --color-bg:          #111a12;
  --color-surface:     #1a2a1c;
  --color-surface-alt: #162018;
  --color-border:      #2a4230;
  --color-border-strong: #3a5a40;

  /* Yazı: açık, yeşil tonlu */
  --color-text:        #c8e6cc;
  --color-text-muted:  #628a69;
  --color-text-strong: #e0f2e4;

  /* Birincil: Budgery ikon B harfi yeşili */
  --color-primary:          #70bc2e;
  --color-primary-contrast: #0e1a0f;
  --color-primary-hover:    #5da020;

  /* Panel aksanları */
  --color-gosterge: #70bc2e;
  --color-portfoy:  #4a9a52;

  /* Vurgu */
  --color-accent: #86efac;

  /* Başarı / Hata */
  --color-success:        #4ade80;
  --color-success-bg:     rgba(74, 222, 128, 0.10);
  --color-success-border: rgba(74, 222, 128, 0.25);
  --color-success-text:   #86efac;

  --color-danger:        #f87171;
  --color-danger-bg:     rgba(248, 113, 113, 0.10);
  --color-danger-border: rgba(248, 113, 113, 0.25);
  --color-danger-text:   #fca5a5;

  --color-neutral-bg:   #1a2a1c;
  --color-neutral-text: #628a69;

  /* Tür renkleri (Gelir / Gider / Birikim) */
  --color-income:        #22c55e;
  --color-income-bg:     rgba(34, 197, 94, 0.10);
  --color-income-border: rgba(34, 197, 94, 0.32);

  --color-expense:        #ef4444;
  --color-expense-bg:     rgba(239, 68, 68, 0.10);
  --color-expense-border: rgba(239, 68, 68, 0.32);

  --color-saving:        #3b82f6;
  --color-saving-bg:     rgba(59, 130, 246, 0.10);
  --color-saving-border: rgba(59, 130, 246, 0.32);

  /* Borç rengi — mor */
  --color-debt:        #a855f7;
  --color-debt-bg:     rgba(168, 85, 247, 0.10);
  --color-debt-border: rgba(168, 85, 247, 0.30);

  /* Ölçek (spacing) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Yarıçap */
  --radius:     8px;   /* genel kısa ad — --radius-sm ile eş */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Tipografi */
  --font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 11.5px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-2xl: 26px;

  /* Gölge — koyu zemin için derin */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.20);
  --shadow-md:   0 4px 8px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.25);
  --shadow-lg:   0 8px 16px rgba(0,0,0,0.40), 0 20px 40px rgba(0,0,0,0.30);

  /* Diğer */
  --form-height: 40px;
  --container-max: 1400px;
}

/* ── Aydınlık Lime Teması ── */
html.light-theme {
  /* Arka plan: limesarısı — biraz daha doygun, daha az beyaz */
  --color-bg:          #dff2a2;
  --color-surface:     #edf8cc;
  --color-surface-alt: #e2f5b0;

  /* Kenarlıklar: biraz daha belirgin */
  --color-border:        #b8d860;
  --color-border-strong: #96bc30;

  /* Yazı: koyu orman yeşili */
  --color-text:        #253d07;
  --color-text-muted:  #527018;
  --color-text-strong: #162504;

  /* Birincil: lime yeşil */
  --color-primary:          #5a9e0f;
  --color-primary-contrast: #ffffff;
  --color-primary-hover:    #437a09;

  /* Panel aksanları */
  --color-gosterge: #5a9e0f;
  --color-portfoy:  #6ab41a;

  /* Vurgu: parlak lime-sarı */
  --color-accent: #aadd20;

  /* Başarı */
  --color-success:        #16a34a;
  --color-success-bg:     rgba(22,163,74,0.08);
  --color-success-border: rgba(22,163,74,0.25);
  --color-success-text:   #15803d;

  /* Hata */
  --color-danger:        #dc2626;
  --color-danger-bg:     rgba(220,38,38,0.07);
  --color-danger-border: rgba(220,38,38,0.20);
  --color-danger-text:   #b91c1c;

  /* Nötr */
  --color-neutral-bg:   #e5f5b5;
  --color-neutral-text: #527018;

  /* Tür renkleri */
  --color-income:        #17c45a;
  --color-income-bg:     rgba(23,196,90,0.11);
  --color-income-border: rgba(23,196,90,0.30);

  --color-expense:        #f03030;
  --color-expense-bg:     rgba(240,48,48,0.09);
  --color-expense-border: rgba(240,48,48,0.25);

  --color-saving:        #2d7fff;
  --color-saving-bg:     rgba(45,127,255,0.09);
  --color-saving-border: rgba(45,127,255,0.25);

  /* Borç rengi — mor (açık tema) */
  --color-debt:        #7c3aed;
  --color-debt-bg:     rgba(124, 58, 237, 0.08);
  --color-debt-border: rgba(124, 58, 237, 0.28);

  /* Gölgeler: hafif */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 8px rgba(0,0,0,0.07), 0 10px 24px rgba(0,0,0,0.05);
  --shadow-lg:   0 8px 16px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.06);
}

/* Aydınlık temada bazı hardcoded renkler */
html.light-theme .topnav-brand-name { color: var(--color-primary); }
html.light-theme input,
html.light-theme select,
html.light-theme textarea {
  background: #ffffff;
  color: var(--color-text-strong);
  border-color: var(--color-border);
}
html.light-theme input:focus,
html.light-theme select:focus,
html.light-theme textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(90,158,15,0.15);
}
html.light-theme .topnav {
  background: rgba(237, 248, 204, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
html.light-theme .panel {
  box-shadow: var(--shadow-card);
}
html.light-theme table thead th {
  background: var(--color-surface-alt);
}
html.light-theme .badge {
  background: rgba(90,158,15,0.12);
  color: var(--color-primary);
}
html.light-theme .badge-meta {
  background: rgba(90,158,15,0.08);
  color: var(--color-text-muted);
}
html.light-theme .catm-overlay { background: rgba(30,60,10,0.45); }
html.light-theme .flash-danger  { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-text); }
html.light-theme .flash-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }

/* Aydınlık temada renkli arka plan üstü: siyah yazı */
html.light-theme .bs-v2-bar { color: #111; }
html.light-theme .bs-v2-remain-label { color: #111; }
html.light-theme .bs-v2-remain-val   { color: #111; }
html.light-theme .bs-item.bs-active .bs-label { color: rgba(0,0,0,0.70); }
html.light-theme .bs-item.bs-active .bs-value { color: #000 !important; }
html.light-theme .bs-item.bs-active .bs-pct   { color: rgba(0,0,0,0.60); }
html.light-theme .bs-item.bs-active .bs-bar-wrap { background: rgba(0,0,0,0.12); }
html.light-theme .bs-item.bs-active .bs-bar-fill { background: rgba(0,0,0,0.38) !important; }
html.light-theme .tab.tab--income.active,
html.light-theme .tab.tab--expense.active,
html.light-theme .tab.tab--saving.active { color: #111; }

/* ------------------------------------------------------------------------- */
/* Reset ve tabanlar                                                          */
/* ------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Klavye navigasyonu için focus-visible (tıklamada halka göstermez) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Fare ile tıklamada focus halkasını gizle */
:focus:not(:focus-visible) {
  outline: none;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* yatay sayfa taşmasını engelle */
}

body {
  font-family: var(--font-stack);
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

/* ------------------------------------------------------------------------- */
/* Düzen (layout)                                                             */
/* ------------------------------------------------------------------------- */

.container {
  width: min(var(--container-max), 94%);
  margin: var(--space-2) auto;
}

@media (min-width: 640px) {
  .container {
    margin: var(--space-2) auto;
  }
}

/* ------------------------------------------------------------------------- */
/* Üst navigasyon                                                             */
/* ------------------------------------------------------------------------- */

.topnav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  background: rgba(26, 42, 28, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 6px 6px 6px 18px;
  margin-bottom: var(--space-4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
  position: sticky;
  top: var(--space-2);
  z-index: 200;
}

/* Marka (logo + isim) */
.topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.topnav-brand-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.topnav-brand-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.03em;
}

.topnav-slogan {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  padding-left: 10px;
  border-left: 1px solid var(--color-border);
  margin-left: 6px;
  white-space: nowrap;
  display: none; /* mobilde gizle */
}
@media (min-width: 820px) {
  .topnav-slogan { display: inline; }
}
html.light-theme .topnav-slogan { color: #555; }

/* Orta: ana navigasyon linkleri */
.topnav-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

/* Sağ: araçlar */
.topnav-links {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  align-items: center;
}

/* Tek link */
.topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.topnav-link:hover:not(.active) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.topnav-link.active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.topnav-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}

.topnav-link.active .topnav-svg {
  opacity: 1;
}

.topnav-user {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.15s;
}
.topnav-user:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}

/* ── Admin Paneli ────────────────────────────────────────────── */
.admin-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.admin-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}
.admin-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}
.admin-back {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 13px;
}
.admin-back:hover { color: var(--color-text); }
.admin-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.admin-section {
  margin-bottom: var(--space-8);
}
.admin-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.admin-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-alt, var(--color-border));
  padding: 2px 8px;
  border-radius: 999px;
}
.admin-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table thead tr {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.admin-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.admin-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--color-surface); }
.admin-row-inactive td { opacity: 0.5; }
.admin-td-name { font-weight: 600; }
.admin-td-mono { font-family: monospace; font-size: 12px; color: var(--color-text-muted); }
.admin-td-action { text-align: right; }
.admin-role-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-role-admin  { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
.admin-role-member { background: color-mix(in srgb, var(--color-text-muted) 15%, transparent); color: var(--color-text-muted); }
.admin-status { font-size: 12px; font-weight: 500; }
.admin-status.active   { color: var(--color-success, #22c55e); }
.admin-status.inactive { color: var(--color-text-muted); }
.admin-self-label { font-size: 11px; color: var(--color-text-muted); padding: 6px 12px; }
.admin-empty { font-size: 13px; color: var(--color-text-muted); padding: var(--space-4) 0; }
/* Tıklanabilir satır */
.admin-row-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.admin-row-clickable:hover td { background: var(--color-surface-hover, rgba(255,255,255,0.04)); }
/* Modal */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal[hidden] { display: none; }
.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.admin-modal-box {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 680px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.admin-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.admin-modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.admin-modal-close:hover { color: var(--color-text); background: var(--color-surface-hover, rgba(255,255,255,0.06)); }
.admin-modal-body {
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  flex: 1;
}
.admin-modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.admin-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 480px;
}
.admin-form-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.admin-form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
}
/* btn variants */
.btn.secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn.secondary:hover { background: var(--color-surface-alt, var(--color-border)); }
.btn-sm { font-size: 12px; padding: 5px 12px; }
.danger-outline  { background: transparent; color: var(--color-danger, #ef4444); border: 1px solid var(--color-danger, #ef4444); }
.danger-outline:hover  { background: color-mix(in srgb, var(--color-danger, #ef4444) 10%, transparent); }
.success-outline { background: transparent; color: var(--color-success, #22c55e); border: 1px solid var(--color-success, #22c55e); }
.success-outline:hover { background: color-mix(in srgb, var(--color-success, #22c55e) 10%, transparent); }

/* Audit log */
.audit-action {
  font-size: 11px; font-weight: 600; font-family: monospace;
  padding: 2px 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
  color: var(--color-text-muted);
}
.audit-login       { background: color-mix(in srgb, #22c55e 15%, transparent); color: #22c55e; }
.audit-login_failed{ background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.audit-logout      { background: color-mix(in srgb, #94a3b8 15%, transparent); color: #94a3b8; }
.audit-tx_create   { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.audit-tx_update   { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #f59e0b; }
.audit-tx_delete   { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.audit-user_create { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; }
.audit-user_toggle { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #f59e0b; }
.audit-family_create { background: color-mix(in srgb, #06b6d4 15%, transparent); color: #06b6d4; }
.audit-data_entry    { background: color-mix(in srgb, #64748b 15%, transparent); color: #64748b; }
.audit-data_export   { background: color-mix(in srgb, #10b981 15%, transparent); color: #10b981; }
/* Filtre satırı */
.audit-filters {
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.audit-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.audit-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audit-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.audit-filter-select,
.audit-filter-input {
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  height: 34px;
  min-width: 160px;
  outline: none;
  transition: border-color 0.15s;
}
.audit-filter-input { min-width: 130px; }
.audit-filter-select:focus,
.audit-filter-input:focus { border-color: var(--color-primary); }
.audit-filter-actions {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  padding-bottom: 1px;
}
.audit-pagination {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4); justify-content: center;
}

.topnav-logout {
  margin-left: 2px;
}
.topnav-logout:hover {
  color: var(--color-danger, #ef4444);
}

/* ── Tablet: nav ikon-only (640–899px) ─────────────────────────────────── */
@media (min-width: 640px) and (max-width: 899px) {
  .topnav-nav .topnav-link-text { display: none; }
  .topnav-nav .topnav-link      { padding: 9px 10px; }
}

/* ── Mobil: alt sekme çubuğu (<640px) ─────────────────────────────────── */
.mobile-bottom-nav { display: none; }

@media (max-width: 639px) {
  /* Orta navigasyonu ve kullanıcı adını topnav'dan gizle */
  .topnav-nav  { display: none !important; }
  .topnav-user { display: none !important; }

  /* Brand + araçlar grid */
  .topnav {
    grid-template-columns: auto auto;
  }

  /* İçeriği alt nav yüksekliği kadar yukarı it */
  .container {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Alt navigasyon çubuğu */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 300;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.35);
  }

  .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 2px 10px;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 10.5px;
    font-weight: 500;
    transition: color 0.15s;
    min-width: 0;
    position: relative;
  }

  .mbn-item.active {
    color: var(--color-primary);
  }

  .mbn-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 0 0 3px 3px;
  }

  .mbn-item:hover:not(.active) {
    color: var(--color-text);
  }

  .mobile-bottom-nav .topnav-svg {
    width: 22px;
    height: 22px;
    opacity: 0.7;
    flex-shrink: 0;
  }

  .mbn-item.active .topnav-svg {
    opacity: 1;
  }

  .mbn-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* Gizlilik modu butonu */
.topnav-privacy {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 10px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius);
  transition: color 0.15s;
}
.topnav-privacy:hover {
  color: var(--color-text);
}
body.privacy-mode .topnav-privacy {
  color: var(--color-accent, #6c63ff);
}

/* Gizlilik modu — rakamları blur et */
body.privacy-mode .bs-v2-value,
body.privacy-mode .bs-v2-remain-val,
body.privacy-mode .total-cell,
body.privacy-mode .amount-input,
body.privacy-mode .month-input,
body.privacy-mode .cat-bar-actual,
body.privacy-mode .cat-bar-diff,
body.privacy-mode .cat-bar-plan-label,
body.privacy-mode .bs-value,
body.privacy-mode .bs-pct,
body.privacy-mode .pp-cat-amounts,
body.privacy-mode .pct-badge,
body.privacy-mode .record-count-badge,
body.privacy-mode .value,
body.privacy-mode td,
body.privacy-mode canvas,
body.privacy-mode input[type="number"],
/* Gösterge: net değer, KPI kartları, hedef satırları */
body.privacy-mode .nw-value,
body.privacy-mode .kpi-value,
body.privacy-mode .nw-goal-summary,
body.privacy-mode .nw-goal-row strong,
body.privacy-mode .nw-goal-pct,
body.privacy-mode .nw-debt-ratio .badge {
  filter: blur(6px);
  transition: filter 0.2s;
  user-select: none;
}
body.privacy-mode .bs-v2-value:hover,
body.privacy-mode .bs-v2-remain-val:hover,
body.privacy-mode .total-cell:hover,
body.privacy-mode .cat-bar-actual:hover,
body.privacy-mode .cat-bar-plan-label:hover,
body.privacy-mode .bs-value:hover,
body.privacy-mode .value:hover,
body.privacy-mode .nw-value:hover,
body.privacy-mode .kpi-value:hover,
body.privacy-mode td:hover {
  filter: blur(0);
}

/* ------------------------------------------------------------------------- */
/* Sayfa başlığı ve araç çubuğu                                               */
/* ------------------------------------------------------------------------- */

.page-header {
  margin-bottom: var(--space-4);
}

.page-header h1 {
  margin: 0 0 var(--space-1);
  font-size: 22px;
  color: var(--color-text-strong);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.page-header p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

@media (min-width: 900px) {
  .page-header.with-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
  }
}

.toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.toolbar select,
.toolbar input,
.toolbar button,
.toolbar a {
  height: var(--form-height);
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

@media (min-width: 900px) {
  .toolbar {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------------------- */
/* Header sağ köşe: toggle + navigasyon formu dikey sıralı                   */
/* ------------------------------------------------------------------------- */

.header-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (min-width: 900px) {
  .header-controls { margin-top: 0; }
}

/* Yıllık / Aylık toggle */
.view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  width: fit-content;
}
.view-btn {
  padding: 4px 14px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  background: var(--color-surface);
  transition: background 0.15s, color 0.15s;
}
.view-btn:hover  { background: var(--color-bg); color: var(--color-text); }
.view-btn.active { background: var(--color-primary); color: #fff; }

/* ◀ ▶ ok butonları */
.btn-icon {
  padding: 0 10px;
  font-size: 0.8rem;
  min-width: unset;
}

/* Aylık görünüm: 3 sütunlu grid */
.monthly-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-3);
}

/* Aylık plan: Gelir+Birikim üstte yan yana, Gider altta tam genişlik */
.plan-donut-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  align-items: start;
}

.plan-donut-col--full {
  grid-column: 1 / -1;
}

.plan-donut-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-donut-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* Üst iki kolon için daha küçük yükseklik */
.plan-donut-col .donut-holder {
  height: 200px;
}

/* Gider kolonu altta tam genişlik — biraz daha yüksek */
.plan-donut-col--full .donut-holder {
  height: 240px;
}

@media (max-width: 900px) {
  .plan-donut-grid {
    grid-template-columns: 1fr;
  }
  .plan-donut-col .donut-holder,
  .plan-donut-col--full .donut-holder {
    height: 300px;
  }
}

/* Bant tıklama vurgusu — donut col ve liste paneli */
.plan-highlight-income {
  outline: 2px solid var(--color-income);
  outline-offset: 2px;
  border-radius: var(--radius-md);
  transition: outline 0.2s;
}
.plan-highlight-expense {
  outline: 2px solid var(--color-expense);
  outline-offset: 2px;
  border-radius: var(--radius-md);
  transition: outline 0.2s;
}
.plan-highlight-saving {
  outline: 2px solid var(--color-saving);
  outline-offset: 2px;
  border-radius: var(--radius-md);
  transition: outline 0.2s;
}

/* Panel arka plan tonu (panel sınıfı üzerinde) */
.panel.plan-highlight-income  { background: linear-gradient(180deg, var(--color-income-bg, #f0fdf4) 0%, var(--bg-panel) 120px); }
.panel.plan-highlight-expense { background: linear-gradient(180deg, var(--color-expense-bg, #fef2f2) 0%, var(--bg-panel) 120px); }
.panel.plan-highlight-saving  { background: linear-gradient(180deg, var(--color-saving-bg, #eff6ff) 0%, var(--bg-panel) 120px); }

/* Aylık plan: 3 sütunlu kategori grid (her panel tam genişlik) */
/* Donut + liste yan yana (aylık plan paneli içinde) */
.plan-panel-split {
  display: grid;
  grid-template-columns: 360px 1fr;   /* chart sütunu: 3 panelde eşit */
  gap: 0;
  align-items: stretch;
}
.plan-panel-donut {
  padding: var(--space-4);
  border-right: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}
.plan-panel-donut .donut-holder {
  height: 300px;   /* 3 panelde de aynı yükseklik */
  width: 100%;
}
.plan-panel-list {
  min-width: 0;
}
/* Gider paneli — chart daha uzun, liste scroll */
.plan-panel-split--expense .plan-panel-donut .donut-holder {
  height: 380px;
}
.plan-panel-split--expense .plan-panel-list {
  overflow-y: auto;
  max-height: 380px;
}

/* Gelir / Birikim — tek sütun liste */
.monthly-plan-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: var(--space-1) 0;
}
/* Gider — iki sütun, daha sıkışık */
.monthly-plan-cols--2col {
  grid-template-columns: repeat(2, 1fr);
}

.monthly-plan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
}
/* 1 sütun — son öge */
.monthly-plan-cols:not(.monthly-plan-cols--2col) .monthly-plan-item:last-child {
  border-bottom: none;
}
/* 2 sütun — son satır */
.monthly-plan-cols--2col .monthly-plan-item:nth-last-child(-n+2):nth-child(2n+1),
.monthly-plan-cols--2col .monthly-plan-item:last-child {
  border-bottom: none;
}

.monthly-plan-name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.monthly-plan-name span:first-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .plan-panel-split {
    grid-template-columns: 260px 1fr;
  }
  .plan-panel-donut .donut-holder { height: 240px; }
}
@media (max-width: 800px) {
  .plan-panel-split {
    grid-template-columns: 1fr;
  }
  .plan-panel-donut {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .plan-panel-donut .donut-holder { height: 260px; }
}

@media (max-width: 600px) {
  .monthly-plan-cols {
    grid-template-columns: 1fr;
  }
}

/* Eski tablo stili (geriye dönük uyumluluk için bırakıldı) */
.monthly-plan-table {
  width: 100%;
  border-collapse: collapse;
}
.monthly-plan-table td {
  padding: 5px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  vertical-align: middle;
}
.monthly-plan-table tr:last-child td { border-bottom: none; }
.monthly-plan-table .amount-cell { width: 90px; text-align: right; }
.monthly-plan-table .amount-input {
  width: 82px;
  text-align: right;
  padding: 2px 6px;
  height: 28px;
  font-size: var(--font-size-sm);
}

/* Yeni grid layout için input genişliği */
.monthly-plan-item .amount-input {
  width: 72px;
  flex-shrink: 0;
  text-align: right;
  padding: 2px 4px;
  height: 24px;
  font-size: var(--font-size-xs);
}

/* ------------------------------------------------------------------------- */
/* Bütçe bant göstergesi (planlama üst bant)                                  */
/* ------------------------------------------------------------------------- */

/* ── Pill yıl seçici (açılır/kapanır dropdown) ───────────────────── */
.year-pill-wrap {
  position: relative;
  display: inline-block;
  z-index: 9000;  /* açılan dropdown sticky şeridin üstünde kalır */
}
.year-pill-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 3px 12px 3px 14px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: filter 0.15s;
}
.year-pill-btn:hover { filter: brightness(1.1); }
.year-pill-arrow {
  font-size: 0.6em;
  opacity: 0.8;
  transition: transform 0.15s;
  display: inline-block;
}
.year-pill-wrap.open .year-pill-arrow { transform: rotate(180deg); }
.year-pill-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  min-width: 90px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 9000;   /* sticky şeritlerden (z-index 50) kesinlikle üstte */
}
.year-pill-wrap.open .year-pill-dropdown { display: block; }
.year-pill-option {
  display: block;
  padding: 7px 18px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.1s;
}
.year-pill-option:hover { background: var(--color-bg); }
.year-pill-option.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

/* ── Yeni dikey bant bütçe bandı (Planlama) ──────────────────────── */
.bs-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4) var(--space-2);
  box-shadow: var(--shadow-card);
  /* Sticky: aşağı kayınca üstte sabitlenir */
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.2s;
}
.bs-v2.is-stuck {
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}
/* Planlama: yıl-ay bandı + gelir-gider-birikim birlikte sticky */
.planlama-sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left:  calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-bottom: var(--space-3);
}
/* dist-nav ve bs-v2, sarmalayıcı içinde bağımsız sticky olmasın */
.planlama-sticky-header .dist-nav {
  position: static;
  z-index: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
.planlama-sticky-header .bs-v2 {
  position: static;
  z-index: auto;
  margin-bottom: 0;
}
/* Gelir barı: label solda, kalan/aşım sağda */
.bs-v2-income--split {
  justify-content: space-between;
  align-items: center;
}
.bs-v2-left  { display: flex; align-items: baseline; gap: var(--space-2); }
.bs-v2-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex-shrink: 0; }
.bs-v2-remain-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  font-style: italic;
}
.bs-v2-remain-val {
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

/* Gider + Birikim + ghost: flex dağılım, sarılma yok */
.bs-v2-sub-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
/* Ghost kalan bandı */
.bs-v2-ghost {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(21,128,61,0.08);
  border: 1.5px dashed var(--color-income-border);
  color: var(--color-income);
  min-width: 40px;
  overflow: hidden;
}
.bs-v2-ghost-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
}
.bs-v2-ghost-pct {
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.bs-v2-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  transition: filter 0.15s;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  flex-basis: 0;   /* flex:N ile orantılı büyüsün */
  flex-shrink: 1;
  min-width: 60px; /* çok dar olmasın */
}
a.bs-v2-bar:hover { filter: brightness(1.1); }
.bs-v2-income  { background: var(--color-income);  flex: 1; }
.bs-v2-expense { background: var(--color-expense); }
.bs-v2-saving  { background: var(--color-saving);  }
/* Aktif tab (yıllık görünümde) */
.bs-v2-bar.bs-v2-active {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
}
.bs-v2-icon  { font-size: 1em; flex-shrink: 0; }
.bs-v2-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.bs-v2-value {
  font-size: var(--font-size-base);
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.bs-v2-pct {
  font-size: var(--font-size-xs);
  opacity: 0.75;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--space-2);
}
/* Kalan bütçe (sağda) — eski tanım, artık kullanılmıyor */

/* ── Eski kart tabanlı bant (Girdi panelinde hâlâ kullanılıyor) ─── */
.budget-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  /* Sticky: aşağı kayınca üstte sabitlenir */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  padding: var(--space-3) 0;
  margin-top: calc(-1 * var(--space-3));
}

@media (min-width: 900px) {
  .budget-strip {
    grid-template-columns: repeat(4, 1fr);
  }
  .budget-strip--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bs-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-3) var(--space-2);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.bs-item:hover:not(.bs-active) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.bs-item.bs-income  { border-top-color: var(--color-income-border); }
.bs-item.bs-expense { border-top-color: var(--color-expense-border); }
.bs-item.bs-saving  { border-top-color: var(--color-saving-border); }
.bs-item.bs-net     { border-top-color: var(--color-accent); }

/* Aktif tab durumu — renkli zemin, beyaz yazı */
.bs-item.bs-income.bs-active  { background: var(--color-income);  border-color: var(--color-income);  border-top-color: var(--color-income); }
.bs-item.bs-expense.bs-active { background: var(--color-expense); border-color: var(--color-expense); border-top-color: var(--color-expense); }
.bs-item.bs-saving.bs-active  { background: var(--color-saving);  border-color: var(--color-saving);  border-top-color: var(--color-saving); }
.bs-item.bs-active .bs-label { color: rgba(255,255,255,0.8); }
.bs-item.bs-active .bs-value { color: #fff !important; }
.bs-item.bs-active .bs-pct   { color: rgba(255,255,255,0.7); }
.bs-item.bs-active .bs-bar-wrap { background: rgba(255,255,255,0.2); }
.bs-item.bs-active .bs-bar-fill { background: rgba(255,255,255,0.65) !important; }

/* ── Fiş Tara OCR kartı ── */
.bs-item.bs-ocr {
  border-top-color: var(--color-accent);
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3) var(--space-3);
  width: 100%;
  font-family: inherit;
  font-size: inherit;
}
.bs-item.bs-ocr:hover {
  border-color: var(--color-accent);
  background: rgba(99,102,241,0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.bs-ocr-icon {
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.bs-ocr-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}
.bs-ocr-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.01em;
}
.bs-ocr-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.bs-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.bs-value {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text-strong);
  margin-bottom: var(--space-2);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.bs-item.bs-income  .bs-value { color: var(--color-income); }
.bs-item.bs-expense .bs-value { color: var(--color-expense); }
.bs-item.bs-saving  .bs-value { color: var(--color-saving); }

.bs-bar-wrap {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-1);
}
.bs-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.bs-income  .bs-bar-fill { background: var(--color-income-border); }
.bs-expense .bs-bar-fill { background: var(--color-expense-border); }
.bs-saving  .bs-bar-fill { background: var(--color-saving-border); }
.bs-net     .bs-bar-fill { background: var(--color-accent); }

.bs-pct {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ------------------------------------------------------------------------- */
/* Kategori ilerleme çubuğu (girdi + gösterge paneli)                        */
/* ------------------------------------------------------------------------- */

.progress-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
}

.progress-panel-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.progress-panel-total {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.progress-panel-total .pp-label { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; }
.progress-panel-total .pp-val   { font-weight: 700; font-size: var(--font-size-base); }

/* Büyük ilerleme çubuğu (toplam) */
.progress-bar-main {
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-3) var(--space-5);
}
.progress-bar-main-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.progress-bar-main-fill.fill-income  { background: var(--color-income-border); }
.progress-bar-main-fill.fill-expense { background: var(--color-expense-border); }
.progress-bar-main-fill.fill-saving  { background: var(--color-saving-border); }

/* Kategori satır listesi */
.progress-cat-list {
  padding: 0 var(--space-5) var(--space-4);
}

.progress-cat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}
.progress-cat-row:last-child { border-bottom: none; }

.pcr-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.pcr-amounts {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
  white-space: nowrap;
}
.pcr-amounts strong { color: var(--color-text); font-weight: 600; }

.pcr-bar-wrap {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.pcr-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.pcr-bar-fill.fill-income  { background: var(--color-income-border); }
.pcr-bar-fill.fill-expense { background: var(--color-expense-border); }
.pcr-bar-fill.fill-saving  { background: var(--color-saving-border); }
.pcr-bar-fill.fill-over    { background: var(--color-danger); }

/* Kompakt progress panel (yeni tasarım) */
.pp-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  flex-wrap: wrap;
}
.pp-summary-title {
  font-weight: 700;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pp-summary-nums {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}
.pp-sep { color: var(--color-border); }

/* → Kategori kartları: aşağıdaki CATEGORY CARDS bölümüne taşındı */

/* ------------------------------------------------------------------------- */
/* Sekmeler (tab'lar)                                                         */
/* ------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.tab {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-size-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tab:hover:not(.active) {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border-strong);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tab.active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: var(--color-primary);
}

/* Tür bazlı aktif sekme renkleri */
.tab.tab--income.active  { background: var(--color-income);  border-color: var(--color-income-border); }
.tab.tab--expense.active { background: var(--color-expense); border-color: var(--color-expense-border); }
.tab.tab--saving.active  { background: var(--color-saving);  border-color: var(--color-saving-border); }

/* ------------------------------------------------------------------------- */
/* Kartlar (üstteki özet kartları)                                            */
/* ------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cards.cards-3 { }
@media (min-width: 1024px) {
  .cards.cards-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

a.card:hover,
.card.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.card.highlight {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, rgba(0,176,240,0.04) 0%, var(--color-surface) 60%);
}

/* Tür bazlı kart sol kenarlık varyantları */
.card.card--income  { border-top: 3px solid var(--color-income-border); }
.card.card--expense { border-top: 3px solid var(--color-expense-border); }
.card.card--saving  { border-top: 3px solid var(--color-saving-border); }

.card .label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.card .value {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-text-strong);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.card .card-details {
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  margin-top: var(--space-2);
}

.card .card-details strong {
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: var(--space-1);
}

/* ------------------------------------------------------------------------- */
/* Paneller (beyaz bloklar)                                                   */
/* ------------------------------------------------------------------------- */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: visible;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-2);
}

.panel-header {
  padding: 7px 12px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  color: var(--color-text-strong);
  font-size: var(--font-size-base);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Tür bazlı panel başlığı varyantları */
.panel-header--income {
  color: var(--color-income);
  border-bottom-color: var(--color-income-bg);
  background: linear-gradient(135deg, var(--color-income-bg) 0%, transparent 60%);
}

.panel-header--expense {
  color: var(--color-expense);
  border-bottom-color: var(--color-expense-bg);
  background: linear-gradient(135deg, var(--color-expense-bg) 0%, transparent 60%);
}

.panel-header--saving {
  color: var(--color-saving);
  border-bottom-color: var(--color-saving-bg);
  background: linear-gradient(135deg, var(--color-saving-bg) 0%, transparent 60%);
}

.panel-header--debt {
  color: var(--color-debt);
  border-bottom-color: var(--color-debt-bg);
  background: linear-gradient(135deg, var(--color-debt-bg) 0%, transparent 60%);
}

/* KPI satır tür renkleri (gösterge aylık) */
.kpi-income { border-left: 3px solid var(--color-income-border); }
.kpi-expense { border-left: 3px solid var(--color-expense-border); }
.kpi-saving { border-left: 3px solid var(--color-saving-border); }

.panel-body {
  padding: var(--space-4);
}

.panel-body.flush {
  padding: 0;
}

.panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------------- */
/* Formlar                                                                    */
/* ------------------------------------------------------------------------- */

/* Tek satır form (Girdi: Yeni Hareket + Filtreler) */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.form-row-wrap {
  padding: 0;
}

.form-row .field { gap: var(--space-1); }

/* Alan genişlikleri */
.field-date   { width: 130px; flex-shrink: 0; }
.field-amount { width: 110px; flex-shrink: 0; }
.field-cat    { width: 200px; flex-shrink: 1; min-width: 140px; }
.field-note   { flex: 1; min-width: 140px; }
.field-shift  { flex-shrink: 0; }
.field-action { flex-shrink: 0; }

/* Açılır/kapanır filtre başlığı */
.filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.filter-toggle-arrow {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  transition: transform 0.15s;
}

/* Panel başlığı flex (kayıt sayısı) */
.panel-header--flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-count-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}

@media (max-width: 700px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  .field-date, .field-amount, .field-cat,
  .field-note, .field-action { width: 100%; }
}

/* Portföy formu — tek satır */
.form-row--portfoy {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  align-items: flex-end;
}
.form-row--portfoy .field { flex-shrink: 0; gap: var(--space-1); }
.pf-date   { width: 120px; }
.pf-select { width: 130px; }
.pf-name   { width: 155px; }
.pf-num    { width: 100px; }
.pf-note   { flex: 1; min-width: 80px; flex-shrink: 1; }
.form-row--portfoy .field-action { display: flex; flex-direction: row; gap: var(--space-2); align-items: flex-end; flex-shrink: 0; }
.form-row--portfoy .field-action label { display: none; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  height: var(--form-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(112,188,46,0.18);
}

.field input:hover:not(:focus),
.field select:hover:not(:focus) {
  border-color: var(--color-primary);
}

.field.note-field {
  grid-column: span 1;
}

@media (min-width: 640px) {
  .field.note-field {
    grid-column: span 2;
  }
}

.form-inline-fields {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.form-input {
  height: var(--form-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-base);
}

.form-input.name-input {
  min-width: 240px;
  flex: 1 1 240px;
}

.form-input.sort-input {
  width: 120px;
}

.form-input.hint-input {
  width: 140px;
}

/* ------------------------------------------------------------------------- */
/* Buton stilleri                                                             */
/* ------------------------------------------------------------------------- */

.btn,
button.primary,
.primary {
  height: var(--form-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.01em;
}

.btn:hover:not(.primary):not(:disabled) {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn.primary,
button.primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(34,57,98,0.25), 0 3px 8px rgba(34,57,98,0.12);
}

.btn.primary:hover,
button.primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 2px 4px rgba(34,57,98,0.3), 0 6px 16px rgba(34,57,98,0.18);
}

.btn-sm {
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.btn-link {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text);
  padding: 0 var(--space-2);
  text-decoration: underline;
  cursor: pointer;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}
.btn-ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-expense, #dc2626);
  color: #fff;
  border-color: transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--color-expense, #dc2626) 85%, #000);
  box-shadow: 0 2px 8px rgba(239,68,68,0.30);
}

.action-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Yıllık tablo — İşlem sütunu kompakt ikon butonları */
.action-cell { white-space: nowrap; width: 1px; padding: 6px 8px !important; }
.plan-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.plan-action-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-primary);
}
.plan-action-btn:active { transform: scale(0.93); }

/* Uzat modal */
.uzat-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
}
.uzat-modal-overlay.open { display: flex; }
.uzat-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 340px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  animation: uzat-in 0.2s ease;
}
@keyframes uzat-in {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.uzat-modal h3 { margin: 0 0 var(--space-1); font-size: var(--font-size-base); }
.uzat-modal p  { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.uzat-modal-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.uzat-modal-row label { display: block; font-size: var(--font-size-xs); font-weight: 600; margin-bottom: 4px; color: var(--color-text-muted); }
.uzat-modal-row input,
.uzat-modal-row select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  padding: 0 10px;
  font-size: var(--font-size-sm);
}
.uzat-modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-2); }

/* Portföy popup modal — birikim sonrası #}*/
.pp-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.pp-modal-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-strong);
}
.pp-modal-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.pp-modal-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.pp-modal-close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.pp-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.pp-field { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pp-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.pp-input {
  height: 36px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  padding: 0 10px;
  font-size: var(--font-size-sm);
  font-family: inherit;
  width: 100%;
}
.pp-input:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: transparent; }

/* Seri İşlem modal içi düzenlemeler */
.seri-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 4px;
}
.seri-tab-btn {
  flex: 1;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.seri-tab-btn.active-apply { background: var(--color-primary); color: #fff; }
.seri-tab-btn.active-clear  { background: var(--color-expense); color: #fff; }

/* ------------------------------------------------------------------------- */
/* Tablolar                                                                   */
/* ------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table.plan-table {
  min-width: 1400px;
}

/* Yıllık görünümde sticky başlık klonu — JS tarafından yönetilir */
.plan-thead-clone {
  position: fixed;
  overflow: hidden;
  pointer-events: none;
  z-index: 49;
  display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.plan-thead-clone table {
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
}

table.wide {
  min-width: 900px;
}

thead th {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

tbody td,
tfoot td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: var(--font-size-base);
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

tfoot td {
  background: var(--color-surface-alt);
  font-weight: 700;
  border-top: 2px solid var(--color-border);
  border-bottom: none;
}

.category-col {
  min-width: 240px;
  font-weight: 500;
}

.month-input {
  width: 100%;
  min-width: 90px;
  height: 36px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  background: var(--color-surface);
  color: var(--color-text);
  -webkit-text-fill-color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-base);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.month-input:hover:not(:focus) {
  border-color: var(--color-primary);
}
.month-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(112,188,46,0.15);
}

.total-cell {
  font-weight: 700;
  color: var(--color-text-strong);
  white-space: nowrap;
}

.action-cell {
  white-space: nowrap;
}

.muted {
  color: var(--color-text-muted);
}

/* Gösterge fark renkleri */
.diff-positive {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  font-weight: 700;
}

.diff-negative {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  font-weight: 700;
}

.diff-neutral {
  color: var(--color-neutral-text);
  background: var(--color-neutral-bg);
  font-weight: 600;
}

/* ------------------------------------------------------------------------- */
/* Rozet (kategori zaman ipucu gibi küçük etiketler)                          */
/* ------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  margin-left: var(--space-1);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Meta rozet (Oğuzhan, Şule, Yapıkredi gibi) — yeşil tonu */
.badge-meta {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.30);
}

/* Kategori shift kural ikonu (Planlama'da "↻ 26+") — amber */
.badge-shift {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.30);
}

/* İşlem satırında "→ Mart 2026" — mor */
.badge-shifted {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.30);
  margin-left: 0;
  margin-top: 4px;
}

/* Yüzdelik gerçekleşme rozeti — gösterge paneli */
.pct-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pct-high  { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.pct-mid   { background: rgba(251, 191, 36, 0.15);  color: #fbbf24; }
.pct-low   { background: rgba(248, 113, 113, 0.15); color: #f87171; }

/* ---- Kategori bant grid (Gösterge) ---- */
.cat-bar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--space-2) 0 var(--space-3);
}
/* Panel içi tek sütun (Gelir / Birikim) */
.cat-bar-grid--panel {
  grid-template-columns: 1fr;
  padding: 0;
}
.cat-bar-grid--panel .cat-bar-cell { border-right: none; }
.cat-bar-grid--panel .cat-bar-cell:last-child { border-bottom: none; }
/* Panel içi iki sütun (Gider) */
.cat-bar-grid--panel-2col {
  grid-template-columns: repeat(2, 1fr);
}
.cat-bar-grid--panel-2col .cat-bar-cell:nth-child(2n)       { border-right: none; }
.cat-bar-grid--panel-2col .cat-bar-cell:nth-last-child(-n+2):nth-child(2n+1),
.cat-bar-grid--panel-2col .cat-bar-cell:last-child           { border-bottom: none; }

.cat-bar-cell {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease;
}
.cat-bar-cell:hover {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.cat-bar-cell:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
/* Son sütundaki sağ kenarlığı kaldır */
.cat-bar-cell:nth-child(3n) { border-right: none; }
/* Son satır alt kenarlığı kaldır (son 1-3 öge) */
.cat-bar-cell:nth-last-child(-n+3) { border-bottom: none; }

.cat-bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
}

.cat-bar-name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 500;
  min-width: 0;
  flex: 1;
}
.cat-bar-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cat-bar-nums {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--font-size-sm);
}
.cat-bar-actual { font-weight: 700; }
.cat-bar-diff   { font-weight: 600; font-size: var(--font-size-xs); }

.cat-bar-plan-label {
  font-size: var(--font-size-xs);
  margin-top: 4px;
}

/* Track — plan tutarı %100 */
.cat-bar-track {
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

/* Dolum — gerçekleşen */
.cat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Tür renkleri */
.cat-bar-cell--income  .cat-bar-fill { background: var(--color-income-border); }
.cat-bar-cell--expense .cat-bar-fill { background: var(--color-expense-border); }
.cat-bar-cell--saving  .cat-bar-fill { background: var(--color-saving-border); }

/* Track arka planı (soluk tür tonu) */
.cat-bar-cell--income  .cat-bar-track { background: var(--color-income-bg,  #f0fdf4); }
.cat-bar-cell--expense .cat-bar-track { background: var(--color-expense-bg, #fef2f2); }
.cat-bar-cell--saving  .cat-bar-track { background: var(--color-saving-bg,  #eff6ff); }

/* Aşım — fill rengi koyulaşır */
.cat-bar-cell--income  .cat-bar-fill--over { background: #166534; }
.cat-bar-cell--expense .cat-bar-fill--over { background: #991b1b; }
.cat-bar-cell--saving  .cat-bar-fill--over { background: #1e40af; }

/* Donut / kategori bölümü başlığındaki yıl|ay navigasyonu */
.cat-period-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.cat-period-sep {
  color: var(--color-text-muted, #9ca3af);
  padding: 0 var(--space-1);
  pointer-events: none;
  font-weight: 400;
  opacity: 0.6;
}
/* .cat-period-toggle view-toggle'dan miras alır, ek stil gerekmez */

/* Dağılım bölümü pill navigasyonu: yıl + ay pills */
.dist-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* Sticky — sütun grafiği aşağı kayınca band üstte sabitlenir */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  padding: var(--space-2) 0;
  /* Container dışına çık → tam sayfa genişliği */
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left:  calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
.dist-nav-pill {
  padding: 4px 0;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
/* Yıl pill wrapper: dist-nav içinde ay pilleriyle aynı flex */
.dist-nav .year-pill-wrap {
  flex: 1;
}
.dist-nav .year-pill-btn {
  width: 100%;
  justify-content: center;
  padding: 4px 0;
  font-weight: 800;
  font-size: var(--font-size-sm);
}
/* Ay pills — kısa isimler flex:1, aktif pill genişler */
.dist-nav-month {
  flex: 1;
  min-width: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dist-nav-month:hover { background: var(--color-bg); color: var(--color-text); }
.dist-nav-month.active {
  flex: 2;                          /* Aktif ay diğerlerinin 2 katı genişlikte */
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 700;
}

/* Ay navigasyon (kategori detay panel başlığında) */
.cat-month-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}
.cat-month-nav--hidden { display: none; }
.cat-month-label {
  font-weight: 600;
  min-width: 60px;
  text-align: center;
  font-size: var(--font-size-sm);
}

@media (max-width: 900px) {
  .cat-bar-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-bar-cell:nth-child(3n)       { border-right: revert; }
  .cat-bar-cell:nth-child(2n)       { border-right: none; }
  .cat-bar-cell:nth-last-child(-n+3) { border-bottom: revert; }
  .cat-bar-cell:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
  .cat-bar-grid { grid-template-columns: 1fr; }
  .cat-bar-cell { border-right: none !important; }
}

/* Tür noktası (gösterge kategori tablosu) */
.type-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.type-dot--income  { background: var(--color-income-border); }
.type-dot--expense { background: var(--color-expense-border); }
.type-dot--saving  { background: var(--color-saving-border); }

/* Kategori ikon emojisi — planlama tablosu ve girdi listesi */
.cat-icon {
  font-style: normal;
  margin-right: 4px;
  font-size: 1em;
  line-height: 1;
}

/* SVG ikon (cat-svg-icon) — tablo ve liste görünümü */
.cat-svg-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  vertical-align: middle;
  margin-right: 5px;
  flex-shrink: 0;
}

/* Otomatik SVG ikon — catsvg() context processor çıktısı */
.cat-svg-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
  flex-shrink: 0;
}

/* Girdi formunda shift checkbox label'ı */
.shift-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-weight: 500;
  padding: 10px 12px;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.shift-checkbox-label input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0;
}

/* Gösterge panelinde grafik sekmesi + canvas konteyner */
.chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.chart-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.chart-tab:hover {
  color: var(--color-primary);
}

.chart-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 700;
}

/* ── External Chart.js tooltip ──────────────────────────────── */
#chartjs-ext-tooltip {
  position: fixed;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  max-width: 380px;
}
#chartjs-ext-tooltip .ext-tt-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 5px;
}
#chartjs-ext-tooltip .ext-tt-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.6;
}
#chartjs-ext-tooltip .ext-tt-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-holder {
  padding: 10px 14px;
  height: 190px;
  position: relative;
}

.chart-holder canvas {
  max-height: 100%;
}

.donut-holder {
  height: 220px;
}

/* Birden fazla donut canvas'ı aynı alanda tutan konteyner (lazy-init: biri gizli, biri görünür) */
.multi-donut-holder {
  position: relative;
}
.multi-donut-holder canvas {
  max-height: 100%;
}

/* Birleşik sütun grafik — 12 ay × 3 grup için daha yüksek alan */
.chart-holder--combined {
  height: 240px;
  padding: 8px 12px 12px;
}

@media (min-width: 900px) {
  .chart-holder { height: 240px; }
  .donut-holder { height: 260px; }
  .chart-holder--combined { height: 310px; }
}

/* ------------------------------------------------------------------------- */
/* Flash mesajları                                                            */
/* ------------------------------------------------------------------------- */

.flash-wrap {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--font-size-base);
  font-weight: 500;
}

.flash.success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.flash.error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* ------------------------------------------------------------------------- */
/* Yardımcı utility sınıflar                                                  */
/* ------------------------------------------------------------------------- */

.text-center { text-align: center; }
.text-right  { text-align: right;  }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Landing (karşılama) sayfası ───────────────────────────── */
.landing-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: var(--space-5);
}
.landing-hero {
  position: relative;
  width: 100%;
  max-width: 860px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}
.landing-hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.landing-hero-cta {
  position: absolute;
  bottom: 18%;
  left: 7%;
  background: #FF4500;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px rgba(255,69,0,0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}
.landing-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,69,0,0.55);
}

/* ── Login sayfası ──────────────────────────────────────────── */
/* ── Login hero banner ── */
.login-hero {
  position: relative;
  width: 100%;
  max-width: 860px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}
.login-hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.login-hero-cta {
  position: absolute;
  bottom: 18%;
  left: 7%;
  background: #FF4500;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px rgba(255,69,0,0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}
.login-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,69,0,0.55);
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: var(--space-5);
}

.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8, 40px);
  width: 100%;
  max-width: 400px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.login-brand-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.login-brand-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}

.login-title {
  font-size: var(--font-size-xl, 20px);
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-1);
}

.login-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

.login-remember {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  cursor: pointer;
}

.login-btn {
  width: 100%;
  justify-content: center;
  height: 44px;
  font-size: var(--font-size-base);
}

/* ── Giriş ekranı — dil/para birimi tercihleri ── */
.login-prefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.login-pref-field label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.login-pref-field select {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.login-pref-field select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---- Trend tab butonları ---- */
/* Trend tab aktif durumları — dist-nav-pill base stilini override eder */
.trend-tab-btn--income.active  { background: #22c55e22; color: #22c55e; border-color: #22c55e44; }
.trend-tab-btn--expense.active { background: #ef444422; color: #ef4444; border-color: #ef444444; }
.trend-tab-btn--saving.active  { background: #3b82f622; color: #3b82f6; border-color: #3b82f644; }

/* ---- Trend legend butonları (chart legend görünümü) ---- */
.trend-legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.15s, opacity 0.15s;
  font-family: var(--font-stack);
}
.trend-legend-btn:hover {
  color: var(--color-text);
}
.trend-legend-btn.active {
  color: var(--color-text);
}
.trend-legend-btn:not(.active) {
  opacity: 0.45;
}
.trend-legend-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============================================================
   KATEGORİ YÖNETİMİ MODAL
   ============================================================ */
.catm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.catm-overlay.catm-open {
  opacity: 1;
  pointer-events: auto;
}

.catm-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  width: 90vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}
.catm-overlay.catm-open .catm-box {
  transform: translateY(0) scale(1);
}

.catm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-lg, 18px);
  font-weight: 700;
  color: var(--color-text-strong);
  flex-shrink: 0;
}
.catm-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.catm-close:hover {
  color: var(--color-text-strong);
  background: var(--color-surface-alt);
}

.catm-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.catm-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  transition: all 0.15s;
}
.catm-tab:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.catm-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}
.catm-count {
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.catm-tab.active .catm-count {
  background: rgba(0,0,0,0.15);
}

.catm-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-5);
}

.catm-tab-panel { display: none; }
.catm-tab-panel.active { display: block; }

.catm-empty {
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--color-text-muted);
}

.catm-row {
  border-bottom: 1px solid var(--color-border);
}
.catm-row:last-child { border-bottom: none; }

.catm-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}
.catm-icon {
  font-size: 18px;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}
.catm-name {
  font-weight: 500;
  color: var(--color-text-strong);
  min-width: 120px;
}
.catm-sort {
  font-size: var(--font-size-xs, 11px);
  margin-left: auto;
}
.catm-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.catm-edit-form {
  display: none;
  padding: var(--space-3) 0 var(--space-4);
  border-top: 1px dashed var(--color-border);
}
.catm-edit-form.catm-edit-open { display: block; }

/* Borç kategorisi — mor vurgu (--color-debt global token'dan gelir) */
:root {
  --color-debt-light: rgba(168, 85, 247, 0.13);
}
.field--debt label { color: var(--color-debt); font-weight: 600; }
.field--debt input { border-color: var(--color-debt); }
.field--debt input:focus { outline-color: var(--color-debt); box-shadow: 0 0 0 2px var(--color-debt-light); }
.badge--debt { background: var(--color-debt-light); color: var(--color-debt); border: 1px solid var(--color-debt); }
.catm-row--debt .catm-icon { filter: hue-rotate(280deg); }
.catm-row--debt .catm-name { color: var(--color-debt); }

/* Planlama tablosunda borç grubu */
.plan-table__group-header--debt td {
  background: var(--color-debt-light);
  color: var(--color-debt);
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-3);
  border-top: 2px solid var(--color-debt);
}
.plan-table__row--debt td { border-left: 3px solid var(--color-debt); }
.plan-table__row--debt td:first-child { padding-left: calc(var(--space-3) - 3px); }

/* Planlama tablosunda kart/kredi ödeme grubu */
.plan-table__group-header--card td {
  background: rgba(112, 188, 46, 0.08);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-3);
  border-top: 2px solid var(--color-primary);
}
.plan-table__row--card td { border-left: 3px solid var(--color-primary); }
.plan-table__row--card td:first-child { padding-left: calc(var(--space-3) - 3px); }
.plan-table__group-footer td {
  background: var(--color-surface-alt);
  font-weight: 600;
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-strong);
}
/* ── Finansal özet bantları ─────────────────────────────────────────── */
.fin-band {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.fin-band::-webkit-scrollbar { display: none; }
.fin-band-title {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
  white-space: nowrap;
  flex-shrink: 0;
}
.fin-band-sep {
  width: 1px;
  height: 16px;
  background: var(--color-border);
  flex-shrink: 0;
}
.fin-band-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fin-band-lbl {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.fin-band-val {
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.fin-band-val--income { color: var(--color-income); }
.fin-band-val--expense { color: var(--color-expense); }
.fin-band-val--debt   { color: var(--color-debt); }
.fin-band-goal-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.fin-band-goal-btn:hover { background: var(--color-surface-alt); }

/* Hedef formu: bantın hemen altında, panel görünümünde */
.nw-goal-panel {
  display: none;
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin-bottom: var(--space-2);
}
.nw-goal-panel.open { display: block; }

/* ── Dashboard iki sütunlu satır düzeni ─────────────────────────────── */
.dash-row {
  display: grid;
  gap: var(--space-2);
  align-items: stretch;
  margin-bottom: var(--space-2);
}
.dash-row--nw-kpi { grid-template-columns: 1fr 1fr; }
.dash-row--charts { grid-template-columns: 2fr 3fr; }
.dash-row--dist   { grid-template-columns: 1fr 1fr; }

/* dist satırı: donut üstte, liste altta — tüm panellerde dikey */
.dash-row--dist .plan-panel-split,
.dash-row--dist .plan-panel-split--expense { grid-template-columns: 1fr; }
.dash-row--dist .plan-panel-donut {
  border-right: none;
  border-bottom: 1px solid var(--color-border);
}
/* Tüm donutlar eşit yükseklikte */
.dash-row--dist .donut-holder { height: 200px !important; }

/* Gelir: 2×5 görüntüleme penceresi */
.dash-row--dist .dash-col .panel:first-child .plan-panel-list {
  max-height: 476px;
  overflow-y: auto;
}
/* Birikim: 2×2 görüntüleme penceresi */
.dash-row--dist .dash-col .panel:last-child .plan-panel-list {
  max-height: 200px;
  overflow-y: auto;
}

/* Gider paneli: sol kolonla (Gelir+Birikim) aynı yükseklik, liste scroll */
.dash-row--dist > .panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 1129px;
}
.dash-row--dist > .panel .plan-panel-split,
.dash-row--dist > .panel .plan-panel-split--expense {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.dash-row--dist > .panel .plan-panel-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}
/* Gelir + Birikim doğal yükseklikte kalsın (flex: 1 ile bölüşmesin) */
.dash-row--dist .dash-col > .panel { flex: none; }
.dash-row > .panel { margin-bottom: 0; }

@media (max-width: 840px) {
  .dash-row--nw-kpi,
  .dash-row--charts,
  .dash-row--dist { grid-template-columns: 1fr; }
  .dash-row > .panel { margin-bottom: var(--space-3); }
  .dash-row > .panel:last-child { margin-bottom: 0; }
}

/* KPI grid: 2×2 yan yana layoutta */
.dash-row--nw-kpi .kpi-grid {
  grid-template-columns: repeat(2, 1fr);
  padding: 8px 12px 12px;
}

/* ₺ / $ sembolü alt satıra düşmesin */
.nw-value { white-space: nowrap; }

/* Sağ kolon (dash-col): Gelir + Birikim altlı-üstlü */
.dash-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dash-col > .panel { margin-bottom: 0; flex: 1; }

/* Sol kolon (Gelir+Birikim): donut üstte, liste altta — dikey yerleşim */
.dash-col .plan-panel-split { grid-template-columns: 1fr; }
.dash-col .donut-holder { height: 160px; }

/* dist row içinde kategoriler her zaman 2 sütun */
.dash-row--dist .pp-cat-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  padding: 12px 14px 16px;
  gap: 10px;
}

/* Finansal Sağlık KPI Kartları */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
}
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  border-left: 3px solid transparent;
}
.kpi-card--positive { border-left-color: var(--color-income); }
.kpi-card--negative { border-left-color: var(--color-expense); }
.kpi-icon { font-size: 1.2rem; }
.kpi-label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: var(--font-size-lg); font-weight: 700; }
.kpi-card--positive .kpi-value { color: var(--color-income); }
.kpi-card--negative .kpi-value { color: var(--color-expense); }
.kpi-hint { font-size: var(--font-size-xs); }

/* Fiziksel Varlık Özet Kartları */
.pa-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (max-width: 480px) { .pa-summary { grid-template-columns: 1fr; } }
.pa-summary-cell {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3); border-radius: var(--radius);
  background: var(--color-surface-alt);
}
.pa-summary-label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; }
.pa-summary-value { font-size: var(--font-size-lg); font-weight: 700; }
.pa-positive .pa-summary-value { color: var(--color-income); }
.pa-negative .pa-summary-value { color: var(--color-expense); }

/* Hedef Net Servet Widget */
.nw-goal-section { border-top: 1px solid var(--color-border); margin-top: var(--space-3); }
.nw-goal-header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer; user-select: none;
  font-weight: 600; font-size: var(--font-size-sm);
}
.nw-goal-header:hover { background: var(--color-surface-alt); }
.nw-goal-summary { color: var(--color-text-muted); font-weight: 400; margin-left: auto; font-size: var(--font-size-xs); }
.nw-goal-chevron { font-size: 0.7rem; color: var(--color-text-muted); transition: transform 0.2s; }
.nw-goal-chevron.open { transform: rotate(180deg); }
.nw-goal-body { display: none; padding: 0 var(--space-4) var(--space-4); }
.nw-goal-body.open { display: block; }
/* ── Hedef Net Servet — minimalist panel ── */
.nw-goal-progress { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.nw-goal-bar-wrap { flex: 1; height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.nw-goal-bar { height: 100%; background: var(--color-income); border-radius: 2px; transition: width 0.4s; }
.nw-goal-pct { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-income); min-width: 36px; text-align: right; }

/* Tek satır istatistik */
.nw-goal-details {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.nw-goal-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 80px;
}
.nw-goal-row .muted {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.nw-goal-row strong { font-size: var(--font-size-sm); font-weight: 700; }

/* Form: tüm alanlar + buton tek satırda */
.nw-goal-form {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  flex-wrap: wrap;
}
.nw-goal-form .form-grid {
  display: flex;
  gap: var(--space-2);
  flex: 1;
  flex-wrap: wrap;
  margin: 0;
}
.nw-goal-form .field { flex: 1; min-width: 80px; }
.nw-goal-form .field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 500;
}
.nw-goal-form .field input { height: 32px; font-size: var(--font-size-sm); }
.nw-goal-form > .btn { flex-shrink: 0; height: 32px; align-self: flex-end; }

/* Hedef dağılım tablosu */
.alloc-input {
  width: 70px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
}
.panel-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}
.color-income { color: var(--color-income); }
.color-expense { color: var(--color-expense); }

/* Net Değer Kartı */
.net-worth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
@media (max-width: 480px) {
  .net-worth-grid { grid-template-columns: 1fr; }
}
.nw-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}
.nw-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nw-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
}
.nw-cell--assets .nw-value { color: var(--color-income); }
.nw-cell--liabilities .nw-value { color: var(--color-debt); }
.nw-cell--positive .nw-value { color: var(--color-income); }
.nw-cell--negative .nw-value { color: var(--color-expense); }
.nw-debt-ratio {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.badge--ok { background: rgba(34,197,94,0.15); color: #16a34a; border: 1px solid #16a34a; }
.badge--warn { background: rgba(239,68,68,0.15); color: #dc2626; border: 1px solid #dc2626; }

/* Net değer varlık dökümü */
.nw-breakdown {
  display: flex;
  gap: var(--space-3);
  margin-top: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Net değer paneli — hesap şeridi */
.nw-accounts-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.nw-acc-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s;
}
.nw-acc-chip:hover { border-color: var(--color-primary); }
.nw-acc-chip--warn { border-color: var(--color-saving-border); }
.nw-acc-chip strong { color: var(--color-income); font-weight: 700; }

/* Girdi formunda borç kalan bakiye bandı */
.girdi-debt-hint {
  font-size: var(--font-size-sm);
  color: var(--color-debt);
  background: var(--color-debt-light);
  border: 1px solid var(--color-debt);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

.catm-edit-msg {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 4px);
  margin-top: var(--space-2);
}
.catm-edit-msg-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success, #16a34a);
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.catm-edit-msg-error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger, #dc2626);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.catm-edit-footer {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
}

/* Kategori modal — inline yeni ekle */
.catm-add-section {
  border-top: 1px dashed var(--color-border);
  padding: var(--space-3) 0 var(--space-2);
}

.catm-add-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: opacity 0.15s;
}
.catm-add-toggle:hover { opacity: 0.75; }

.catm-add-form {
  display: none;
  padding-top: var(--space-3);
}
.catm-add-form.catm-add-open { display: block; }

/* Panel başlığı sağ taraf aksiyon grubu */
.panel-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.btn-icon {
  font-size: 16px;
  padding: 3px 6px;
  line-height: 1;
  background: transparent;
  border-color: transparent;
  color: inherit;
  opacity: 0.7;
}
.btn-icon:hover { opacity: 1; background: var(--color-surface-2); }


/* =========================================================================
   Kur Bandı — doviz.com header stili
   ========================================================================= */

.rates-band {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

/* ── Kapalı şerit ── */
.rates-strip {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.rates-strip::-webkit-scrollbar { display: none; }

.rates-strip-scroll {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rates-strip-scroll::-webkit-scrollbar { display: none; }

/* Her kur öğesi — doviz.com tarzı sütun */
.ri-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 12px;
  min-width: 88px;
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
  cursor: default;
  transition: background 0.12s;
}
.ri-item:hover { background: var(--color-surface-alt); }
.ri-item.ri-loading { opacity: 0.5; }

/* ── Portföy — altın kurdele ── */
.ri-item--portfolio {
  background: linear-gradient(135deg, rgba(212,172,13,0.18) 0%, rgba(251,191,36,0.10) 100%);
  border-right: 1px solid rgba(251,191,36,0.30);
  border-left: 3px solid #f5c518;
  padding-left: 13px; /* sol sınır için telafi */
  position: relative;
}
.ri-item--portfolio::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,191,36,0.07) 0%, transparent 100%);
  pointer-events: none;
}
.ri-item--portfolio:hover {
  background: linear-gradient(135deg, rgba(212,172,13,0.26) 0%, rgba(251,191,36,0.16) 100%);
}
.ri-item--portfolio .ri-label {
  color: #d4a415;
  letter-spacing: 0.08em;
}
.ri-item--portfolio .ri-value {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251,191,36,0.35);
}
html.light-theme .ri-item--portfolio {
  background: linear-gradient(135deg, rgba(212,172,13,0.14) 0%, rgba(251,191,36,0.08) 100%);
}
html.light-theme .ri-item--portfolio:hover {
  background: linear-gradient(135deg, rgba(212,172,13,0.22) 0%, rgba(251,191,36,0.14) 100%);
}
html.light-theme .ri-item--portfolio .ri-label { color: #a07810; }
html.light-theme .ri-item--portfolio .ri-value { color: #b8860b; text-shadow: none; }

.ri-sep {
  width: 1px;
  background: var(--color-border);
  flex-shrink: 0;
  align-self: stretch;
}

.ri-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 2px;
}
.ri-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-strong);
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.ri-change {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.ri-up      { color: var(--color-income); }
.ri-down    { color: var(--color-expense); }
.ri-neutral { color: var(--color-text-muted); }

/* Açık modda strip yerine gösterilen başlık */
.rates-open-title {
  display: none;
  flex: 1;
  align-items: center;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rates-band--open .rates-strip-scroll { display: none; }
.rates-band--open .rates-open-title   { display: flex; }

/* Toggle butonu */
.rates-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  border: none;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.rates-toggle-btn:hover { background: var(--color-surface-alt); color: var(--color-text); }

.rates-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

/* ── Açık detay paneli ── */
.rates-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid transparent;
}
.rates-band--open .rates-detail {
  max-height: 700px;
  border-top-color: var(--color-border);
}

.rates-detail-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: var(--space-3) var(--space-4);
}
@media (max-width: 640px) {
  .rates-detail-inner { grid-template-columns: 1fr; }
}

/* Detay bölüm */
.rdt-section {
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--color-border);
}
.rdt-section:last-child { border-right: none; }
.rdt-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

/* Detay tablo */
.rdt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rdt-table thead th {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: right;
  padding: 2px 4px;
  border-bottom: 1px solid var(--color-border);
}
.rdt-table thead th:first-child { text-align: left; padding-left: 0; }
.rdt-table tbody tr:hover { background: var(--color-surface-alt); }
.rdt-table tbody tr { border-bottom: 1px solid var(--color-border); }
.rdt-table tbody tr:last-child { border-bottom: none; }

.rdt-name {
  padding: 3px 4px 3px 0;
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  font-size: 12px;
}
.rdt-num {
  padding: 3px 4px;
  text-align: right;
  color: var(--color-text-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}
.rdt-chg {
  padding: 3px 0 3px 4px;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  font-size: 11px;
}
.rdt-midonly td { color: var(--color-text-muted); }
.rdt-chg .ri-up    { color: var(--color-income); }
.rdt-chg .ri-down  { color: var(--color-expense); }
.rdt-chg .ri-neutral { color: var(--color-text-muted); }

/* Alt bar */
.rates-detail-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.rates-source-link {
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: none;
  opacity: 0.85;
  flex: 1;
}
.rates-source-link:hover { text-decoration: underline; opacity: 1; }

.rates-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 11px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.rates-refresh-btn:hover { background: var(--color-surface); color: var(--color-text); }

/* Skeleton yükleme */
.rates-skeleton-block {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  flex-wrap: wrap;
}
.rates-skeleton {
  height: 60px;
  width: 160px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg,
    var(--color-surface-alt) 25%,
    var(--color-border) 50%,
    var(--color-surface-alt) 75%);
  background-size: 200% 100%;
  animation: rates-shimmer 1.4s infinite;
}
@keyframes rates-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Aydınlık tema */
html.light-theme .rates-band   { background: var(--color-surface); }
html.light-theme .rates-detail-footer { background: var(--color-surface-alt); }
html.light-theme .rdt-table thead th { background: transparent; }

/* ── Utility (CSP inline-style replacement) ───────────────── */
.u-m0         { margin: 0; }
.u-nowrap     { white-space: nowrap; }
.u-text-xs    { font-size: 12px; }
.u-text-xxs   { font-size: 11px; }
.u-text-muted-xs { font-size: 12px; color: var(--color-text-muted); }
.u-hidden     { display: none; }
.u-mono       { font-family: monospace; }
.u-text-center-pad { text-align: center; padding: 32px; color: var(--color-text-muted); }
.u-inline-flex-gap { display: flex; gap: var(--space-2); }
.u-opacity75  { font-weight: 400; opacity: 0.75; }
.u-pnl-badge  { padding: 2px 10px; border-radius: var(--radius-md); display: inline-block; }
.u-warn-text  { color: var(--color-warning, #d97706); }
.u-danger-text-amber { color: #92400e; }
.u-font-mono-normal { color: var(--color-text); font-family: monospace; }
.u-margin-left-sm { margin-left: 8px; }
.u-margin-top-sm  { margin-top: 8px; }
.u-margin-top-md  { margin-top: 24px; }
.u-margin-bottom-md { margin-bottom: var(--space-4); }
.u-icon-input { width: 5rem; }
.u-chart-wrap { padding: 16px; height: 240px; position: relative; }
.u-panel-narrow { max-width: 420px; margin: 48px auto; }
.u-padding-center { padding: var(--space-5); text-align: center; }
.u-font-xs    { font-size: var(--font-size-xs); }
.u-font-sm    { font-size: var(--font-size-sm); }
.u-opacity55  { opacity: 0.55; }
.u-opacity70  { opacity: 0.70; }
.u-w6         { width: 6rem; }

/* idle modal CSS classes */
.idle-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); align-items: center; justify-content: center; }
.idle-modal.visible { display: flex; }
.idle-modal-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 32px; max-width: 380px; width: 90%; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,0.4); }
.idle-modal-icon { font-size: 32px; margin-bottom: 12px; }
.idle-modal-title { margin: 0 0 8px; font-size: 16px; color: var(--color-text); }
.idle-modal-body { margin: 0 0 20px; font-size: 13px; color: var(--color-text-muted); }
.idle-modal-btn { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md); padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; }

/* catm-count warning variant */
.catm-count-warn { background: var(--color-warning, #d97706); }

/* change_password form layout */
.form-col-gap { display: flex; flex-direction: column; gap: 16px; }

/* change password panel helpers */
.change-pw-subtitle { margin: 4px 0 0; }
.change-pw-form { padding: 24px 0 8px; }

/* ── Profil & Tercihler ──────────────────────────────────────────── */
.profil-wrap {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.profil-card .panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.profil-card-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.profil-card .panel-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
}
.profil-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.profil-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .profil-2col,
  .profil-3col { grid-template-columns: 1fr; }
}
.field-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
/* ── KVKK / Gizlilik sayfaları ───────────────────────────────────────── */
.kvkk-wrap {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.kvkk-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.kvkk-section {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.kvkk-section:last-child { border-bottom: none; padding-bottom: 0; }
.kvkk-section h2 {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.kvkk-section p,
.kvkk-section li { font-size: var(--font-size-sm); line-height: 1.7; }
.kvkk-section ul  { padding-left: var(--space-4); margin: 0; }
.kvkk-section li  { margin-bottom: var(--space-1); }
.kvkk-section--compact { gap: var(--space-3); }
.kvkk-list--check { list-style: none; padding-left: 0; }
.kvkk-list--check li::before { content: "✓  "; color: var(--color-success, #4caf50); font-weight: 700; }
.kvkk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
}
.kvkk-table th,
.kvkk-table td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.5;
}
.kvkk-table th { font-weight: 600; background: var(--color-bg-alt); }
.kvkk-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.kvkk-action-hint {
  padding-top: var(--space-3);
  text-align: center;
}
/* Onay formu */
.kvkk-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.kvkk-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  cursor: pointer;
}
.kvkk-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.kvkk-submit { align-self: flex-start; }
/* Profil sayfası KVKK durumu */
.kvkk-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.kvkk-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
}
.kvkk-badge--ok {
  background: color-mix(in srgb, #4caf50 15%, transparent);
  color: #4caf50;
}
.kvkk-badge--pending {
  background: color-mix(in srgb, #ff9800 15%, transparent);
  color: #ff9800;
}
.btn-danger-ghost {
  color: var(--color-danger, #e53935);
  border-color: var(--color-danger, #e53935);
}
.btn-danger-ghost:hover {
  background: color-mix(in srgb, var(--color-danger, #e53935) 10%, transparent);
}
@media (max-width: 640px) {
  .kvkk-table { font-size: 11px; }
  .kvkk-table th, .kvkk-table td { padding: 6px 7px; }
}

/* ── Maliyet sayfası ─────────────────────────────────────────────────── */
.maliyet-month-badge {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}
.maliyet-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.maliyet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.maliyet-row:last-child { border-bottom: none; }
.maliyet-row--total {
  font-weight: 700;
  padding-top: 10px;
}
.maliyet-value {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.maliyet-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.maliyet-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}
.maliyet-stat--user {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.maliyet-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}
.maliyet-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.maliyet-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.maliyet-bar-track {
  height: 6px;
  background: var(--color-border);
  border-radius: 99px;
  overflow: hidden;
}
.maliyet-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.maliyet-bar-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
@media (max-width: 480px) {
  .maliyet-stats-grid { grid-template-columns: 1fr; }
}

/* Swap satırını vurgula */
.rdt-swapped td,
.ri-item--swapped .ri-label { color: var(--color-text-muted); }

/* login form field spacing */
.u-field-mb-sm { margin-bottom: 16px; }
.u-field-mb-md { margin-bottom: 24px; }

/* full-width button with top margin */
.u-btn-full { margin-top: 8px; width: 100%; }

/* remaining text colour helpers */
.text-success { color: var(--color-success-text); }
.text-danger  { color: var(--color-danger-text); }

/* panel border accent variants */
.panel-border-danger { border-left: 4px solid var(--color-danger); }
.panel-border-warn   { border-left: 4px solid #d97706; }

/* text colour helpers for strong/em */
.text-danger-col { color: var(--color-danger); }

/* colored button variants */
.btn-warn  { color: var(--color-warning, #d97706); }
.btn-danger-col { color: var(--color-danger, #dc2626); }

/* trend chart btn group */
.trend-btn-group { display: flex; gap: 12px; margin-left: auto; align-items: center; }

/* Grafik mod toggle — sütun/trend geçiş butonu grubu */
.combo-chart-toggle {
  display: flex;
  gap: var(--space-1);
  background: var(--color-surface-2, rgba(255,255,255,0.06));
  border-radius: var(--radius-md);
  padding: 3px;
}
.combo-chart-toggle .btn {
  border-radius: calc(var(--radius-md) - 2px);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: 4px 10px;
  transition: background 0.15s, color 0.15s;
}
.combo-chart-toggle .btn.active {
  background: var(--color-primary);
  color: #fff;
}

/* Trend chart içindeki kategori seçici (Gelir/Gider/Birikim) */
.trend-cat-switcher {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: var(--space-3) var(--space-5) 0;
}

.trend-cat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}
.trend-cat-btn.active {
  color: var(--color-text-strong);
  font-weight: 600;
}
.trend-cat-btn:not(.active) {
  opacity: 0.45;
}
.trend-cat-btn:hover {
  opacity: 1;
  color: var(--color-text-strong);
}
/* Grafik modu gizle/göster — !important ile inline style override'ı engelle */
.chart-mode-hidden { display: none !important; }

/* Trend pill — kısa çizgi + ortada nokta (çizgi grafik stilini taklit eder) */
.trend-cat-line {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--pill-color, #9ca3af);
  border-radius: 2px;
  flex-shrink: 0;
}
.trend-cat-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pill-color, #9ca3af);
  box-shadow: 0 0 0 2px var(--color-surface, #111827);
}

/* trend legend box colour variants */
.trend-legend-box--income  { background: #22c55e; }
.trend-legend-box--expense { background: #ef4444; }
.trend-legend-box--saving  { background: #3b82f6; }

/* ── OCR / Fiş Tara ─────────────────────────────────────────────────── */
.ocr-drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.ocr-drop-zone:hover,
.ocr-drop-zone--over {
  border-color: var(--color-accent);
  background: rgba(99,102,241,0.05);
}
.ocr-drop-icon { font-size: 2.5rem; margin-bottom: var(--space-2); }
.ocr-drop-text { font-weight: 600; margin: 0; }
.ocr-drop-sub  { font-size: 12px; color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.ocr-file-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.ocr-preview-wrap { margin-top: var(--space-3); text-align: center; }
.ocr-preview-img  { max-height: 180px; border-radius: 8px; border: 1px solid var(--color-border); }
.ocr-preview-name { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-1); }
.ocr-spinner-wrap { text-align: center; padding: var(--space-4) 0; }
.ocr-spinner {
  width: 36px; height: 36px; border: 3px solid var(--color-border);
  border-top-color: var(--color-accent); border-radius: 50%;
  animation: ocr-spin 0.8s linear infinite; display: inline-block;
}
@keyframes ocr-spin { to { transform: rotate(360deg); } }
.ocr-spinner-text { font-size: 13px; color: var(--color-text-muted); margin-top: var(--space-2); }

/* Onay sayfası — tür seçici */
.ocr-type-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ocr-type-btn {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: 8px;
  cursor: pointer; font-size: 14px; font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.ocr-type-btn input[type="radio"] { display: none; }
.ocr-type-btn:hover { border-color: var(--color-accent); }
.ocr-type-btn.active {
  border-color: var(--color-accent);
  background: rgba(99,102,241,0.1);
  color: var(--color-accent);
}
.ocr-confirm-actions {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  margin-top: var(--space-4);
}

/* OCR — çoklu işlem kartları */
.ocr-tx-card { margin-bottom: var(--space-3); }
.ocr-tx-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.ocr-tx-check-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.ocr-tx-check { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-accent); }
.ocr-tx-num { font-weight: 600; font-size: 15px; }
.ocr-tx-fields { display: grid; gap: var(--space-3); }
.ocr-tx-card--disabled { opacity: 0.4; pointer-events: none; }
.badge-ok   { background: rgba(34,197,94,0.15); color: #4ade80; font-size: 11px; padding: 2px 8px; border-radius: 99px; }
.badge-warn { background: rgba(251,191,36,0.15); color: #fbbf24; font-size: 11px; padding: 2px 8px; border-radius: 99px; }

/* OCR modal — narrower than full catm-box */
.ocr-modal-box {
  width: min(600px, 94vw);
  height: auto;
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--space-5);
}
.ocr-modal-box .catm-header { padding: 0 0 var(--space-4); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.ocr-modal-box .catm-title  { font-size: var(--font-size-lg); font-weight: 700; margin: 0; }
.ocr-modal-box .catm-close  { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--color-text-muted); padding: 4px; line-height: 1; }
.ocr-modal-box .catm-close:hover { color: var(--color-text-strong); }

/* ── İkon Picker ──────────────────────────────────────────────────────────── */
.icon-picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.icon-picker-toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  padding: 5px 7px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.icon-picker-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.icon-picker-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  width: 288px;
  max-height: 340px;
  overflow-y: auto;
}
.icon-picker-pop--open { display: block; }
.ipg-inner { padding: 10px; }
.ipg-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 6px 2px 3px;
}
.ipg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 2px;
}
.ipg-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 5px;
  transition: background 0.1s, border-color 0.1s;
}
.ipg-btn:hover {
  background: rgba(99,102,241,0.12);
  border-color: var(--color-accent);
}
/* İkon inputu yanındaki gösterge */
.u-icon-input, input[data-icon-input] {
  width: 3.5rem;
  text-align: center;
  font-size: 1.25rem;
}



/* ── Mobil (<640px): layout düzenlemeleri ────────────────────────────────── */


/* ── combo-chart-toggle: mobilde emoji üste kaymasın ─────────────────────── */
@media (max-width: 639px) {
  /* Panel header'ı alt alta yığma — toggle bloğu başlığın altına geçsin */
  .panel-header--flex {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  /* Toggle butonları beyaz-space kesmeden yan yana kalsın */
  .combo-chart-toggle {
    width: 100%;
    justify-content: flex-end;
  }
  .combo-chart-toggle .btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
  }
}

/* ── Portföy agrega: mobilde kart, masaüstünde tablo ─────────────────────── */
.pf-asset-cards    { display: none; }
.pf-asset-table-wrap { display: block; }

@media (max-width: 639px) {
  .pf-asset-cards      { display: block; }
  .pf-asset-table-wrap { display: none; }
}

.pf-asset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.pf-asset-card:last-child { border-bottom: none; }

.pf-asset-card-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.pf-asset-card-icon { font-size: 1.3em; flex-shrink: 0; }
.pf-asset-card-info { min-width: 0; }
.pf-asset-card-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-asset-card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.pf-asset-card-right {
  text-align: right;
  flex-shrink: 0;
}
.pf-asset-card-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.pf-asset-card-pnl {
  font-size: var(--font-size-xs);
  margin-top: 2px;
}

/* Birim etiketi (gr, USD, adet …) */
.pf-unit {
  font-size: 0.82em;
  color: var(--color-text-muted);
}

/* ── İşlem Geçmişi tablosu: mobilde kolonları gizle ─────────────────────── */
@media (max-width: 639px) {
  /* Birim Fiyat (5), Kaynak (7), Not (8) gizle */
  /* Kalan: Tarih (1), Varlık (2), İşlem (3), Miktar (4), Toplam (6), Düzenle (9) */
  .pp-history-wrap table th:nth-child(5),
  .pp-history-wrap table td:nth-child(5),
  .pp-history-wrap table th:nth-child(7),
  .pp-history-wrap table td:nth-child(7),
  .pp-history-wrap table th:nth-child(8),
  .pp-history-wrap table td:nth-child(8) {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBİL YATAY OVERFLOW — KAPSAMLI DÜZELTME
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {

  /* ── Tüm table.wide min-width sıfırla ─────────────────────────────────── */
  table.wide {
    min-width: 0;
  }

  /* ── Girdi: Kayıt Listesi — Açıklama (5) gizle ────────────────────────── */
  /* Kalan: Tarih(1) Tür(2) Kategori(3) Tutar(4) İşlem(6) */
  .girdi-records th:nth-child(5),
  .girdi-records td:nth-child(5) {
    display: none;
  }

  /* ── Borç Listesi — Tür(2), Faiz(5), Not(7) gizle ────────────────────── */
  /* Kalan: Borç Adı(1) Kalan(3) Taksit(4) Vade(6) İşlem(8) */
  .borc-list th:nth-child(2),
  .borc-list td:nth-child(2),
  .borc-list th:nth-child(5),
  .borc-list td:nth-child(5),
  .borc-list th:nth-child(7),
  .borc-list td:nth-child(7) {
    display: none;
  }

  /* ── Fiziksel Varlıklar — Tür(2), Alış Tarihi(4), Gerçek Getiri(7) gizle */
  /* Kalan: Varlık(1) Alış Fiyatı(3) Güncel Değer(5) K/Z(6) İşlem(8) */
  .fiziksel-table th:nth-child(2),
  .fiziksel-table td:nth-child(2),
  .fiziksel-table th:nth-child(4),
  .fiziksel-table td:nth-child(4),
  .fiziksel-table th:nth-child(7),
  .fiziksel-table td:nth-child(7) {
    display: none;
  }

  /* ── Portföy formu: dikey yığma ───────────────────────────────────────── */
  .form-row--portfoy {
    flex-wrap: wrap;
    flex-direction: column;
    overflow-x: hidden;
  }
  .form-row--portfoy .field,
  .form-row--portfoy .field-action {
    width: 100%;
    flex-shrink: 1;
  }
  .pf-date, .pf-select, .pf-name, .pf-num, .pf-note {
    width: 100%;
  }

  /* ── Girdi formu: sütun başına bir alan ───────────────────────────────── */
  .form-row .field-date   { width: calc(50% - 6px); flex-shrink: 1; }
  .form-row .field-amount { width: calc(50% - 6px); flex-shrink: 1; }
  .form-row .field-cat    { width: 100%; min-width: 0; }
  .form-row .field-note   { width: 100%; min-width: 0; }

  /* ── Rates band min-width ─────────────────────────────────────────────── */
  .rates-strip-scroll { min-width: 0; }

  /* ── Takvim grid: min-width kaldır, otomatik boyutlan ─────────────────── */
  .cal-grid { min-width: 0; gap: 2px; }
  .cal-grid-wrap { padding: var(--space-2); }
  .cal-cell { min-height: 44px; padding: 2px; }

  /* ── Planlama yıllık tablo: kategori kolonu daralt, tablo sıkıştır ────── */
  table.plan-table { min-width: 0; }
  .category-col { min-width: 100px; max-width: 140px; }
  /* Ay ve tutar hücrelerini dar tut */
  table.plan-table td,
  table.plan-table th { padding: 5px 4px; font-size: 11px; }
  table.plan-table td.category-col,
  table.plan-table th.category-col { font-size: 12px; }
  /* Aylık tutar input'larını sıkıştır */
  .month-input { min-width: 56px; font-size: 11px; padding: 2px 4px; }

  /* ── Fiziksel varlıklar tablosu: min-width sıfırla ────────────────────── */
  table.fiziksel-table { min-width: 0; }

  /* ── bs-v2 alt satır: dar ekranda sarılmaya izin ver ──────────────────── */
  .bs-v2-sub-row { flex-wrap: wrap; }
  .bs-v2-bar { min-width: 0; flex-basis: auto; }
}

/* ── dist-nav: mobilde yatay scroll ──────────────────────────────────────── */
@media (max-width: 639px) {
  .planlama-sticky-header .dist-nav,
  .dist-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .dist-nav::-webkit-scrollbar { display: none; }
  .dist-nav-month {
    flex-shrink: 0;
    min-width: 32px;
    padding: 5px 6px;
    font-size: 10px;
  }
  .dist-nav-month.active {
    flex: none;
    padding: 5px 12px;
    min-width: auto;
  }
  .dist-nav .year-pill-btn {
    font-size: 11px;
    padding: 5px 8px;
  }
}

/* ── Notification Bell ───────────────────────────────────────────────────── */
.notif-wrap {
  position: relative;
}

/* Badge üzerindeki sayı köpüğü */
.notif-badge {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-danger, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.notif-badge--visible { display: flex; align-items: center; justify-content: center; }

/* Dropdown panel */
.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  z-index: 900;
  overflow: hidden;
}
.notif-dropdown--open { display: block; }

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--color-border);
}
.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.notif-unread-lbl {
  font-size: 11px;
  color: var(--color-text-muted);
}

.notif-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}

.notif-loading,
.notif-empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-surface-alt, rgba(255,255,255,0.04)); }
.notif-item--clickable { cursor: pointer; }
.notif-item--clickable:hover { background: var(--color-surface-alt, rgba(255,255,255,0.08)); }

.notif-item--overdue  { border-left: 3px solid var(--color-danger, #ef4444); }
.notif-item--due_soon { border-left: 3px solid var(--color-warning, #f59e0b); }
.notif-item--upcoming { border-left: 3px solid var(--color-primary, #3b82f6); }
.notif-item--paid     { border-left: 3px solid var(--color-success, #22c55e); opacity: 0.65; }

.notif-item-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.notif-item-amt {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobilde dropdown full-width */
@media (max-width: 639px) {
  .notif-dropdown {
    width: 290px;
  }
}

/* ── Takvim + Gösterge yan yana row ──────────────────────────────────────── */
.dash-row--cal-info { grid-template-columns: 3fr 2fr; align-items: start; }
@media (max-width: 840px) {
  .dash-row--cal-info { grid-template-columns: 1fr; }
}

/* Sağ: kutucuklar altlı-üstlü */
.cal-info-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cal-info-stack > .panel { margin-bottom: 0; }

/* Gösterge kutucuğu içeriği (eski fin-box — artık kullanılmıyor) */
.fin-box-body { padding: var(--space-2) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.fin-box-row  { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.fin-box-item { display: flex; flex-direction: column; gap: 2px; min-width: 70px; }

/* ── Birleşik Özet Kartı ─────────────────────────────────────────── */
.summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.summary-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}
.summary-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 calc(-1 * var(--space-4));
}
.summary-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 90px;
}
.summary-lbl {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
}
.summary-val {
  font-size: var(--font-size-md);
  font-weight: 700;
  white-space: nowrap;
}
.summary-val--income { color: var(--color-income); }
.summary-val--expense { color: var(--color-expense); }
.summary-val--debt   { color: var(--color-debt); }
.summary-goal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text);
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.summary-goal-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.summary-goal-val {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.summary-sub {
  font-size: 10px;
  margin-top: 2px;
  white-space: nowrap;
}

/* ── Ödeme Takvimi ───────────────────────────────────────────────────────── */
.cal-panel { margin-top: 0; }

.cal-grid-wrap {
  padding: var(--space-3);
  overflow: hidden;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  min-width: 0;
}

.cal-day-header {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 4px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-cell {
  height: 80px;
  min-height: unset;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: 4px;
  background: var(--color-surface);
  position: relative;
  transition: background 0.12s;
}
.cal-cell--empty {
  background: transparent;
  border-color: transparent;
}
.cal-cell--today {
  border-color: var(--color-primary, #3b82f6);
  background: rgba(59,130,246,0.07);
}
.cal-cell--today .cal-cell-num {
  color: var(--color-primary, #3b82f6);
  font-weight: 700;
}
.cal-cell--has-entries {
  background: var(--color-surface-alt, rgba(255,255,255,0.04));
}

.cal-cell-num {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.2;
  margin-bottom: 3px;
}

.cal-entry {
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 3px;
  padding: 2px 4px;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  /* Safari button reset */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}
.cal-entry-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-entry-icon { flex-shrink: 0; font-size: 11px; }

.cal-entry--overdue  { background: rgba(239,68,68,0.18);  color: #ef4444; }
.cal-entry--due_soon { background: rgba(245,158,11,0.18); color: #f59e0b; }
.cal-entry--upcoming { background: rgba(59,130,246,0.15); color: var(--color-primary, #3b82f6); }
.cal-entry--paid     { background: rgba(34,197,94,0.15);  color: #22c55e; opacity: 0.75; }

/* Renk açıklaması */
.cal-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px var(--space-3) 12px;
  border-top: 1px solid var(--color-border);
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
}
.cal-legend-item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.cal-legend-item--overdue::before  { background: rgba(239,68,68,0.7); }
.cal-legend-item--due_soon::before { background: rgba(245,158,11,0.7); }
.cal-legend-item--upcoming::before { background: rgba(59,130,246,0.6); }
.cal-legend-item--paid::before     { background: rgba(34,197,94,0.6); }

@media (max-width: 639px) {
  .cal-grid {
    min-width: 300px;
    gap: 2px;
  }
  .cal-cell {
    min-height: 52px;  /* Parmakla dokunmayı kolaylaştır */
    padding: 4px 3px;
  }
  .cal-entry-name { display: none; }
  .cal-entry {
    padding: 4px 5px;          /* Minimum dokunma hedefi büyütüldü */
    justify-content: center;
    min-height: 28px;          /* iOS HIG: minimum 44px değil ama takvim alanı kısıtlı */
  }
  .cal-entry-icon { font-size: 14px; }

  /* Sürükleme için görsel ipucu — mobilde ikon göster */
  .cal-entry::after {
    content: '';               /* Touch drag hint: gelecekte ikon eklenebilir */
  }
}

/* Tablet (640px–899px): hücre boyutu biraz artırıldı */
@media (min-width: 640px) and (max-width: 899px) {
  .cal-cell {
    min-height: 56px;
    padding: 4px;
  }
  .cal-entry {
    padding: 3px 5px;
    font-size: 10.5px;
  }
}

/* Touch drag aktifken sayfanın kaymasını engelle */
.cal-grid--touch-dragging {
  touch-action: none;
  user-select: none;
}

/* ── Girdi: renkli giriş paneli ─────────────────────────────────────────── */
.girdi-entry-panel {
  border-top-width: 2px;
}

/* ── Quick Entry Modal ───────────────────────────────────────────────────── */
.qe-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
.qe-modal--open { display: flex; }

.qe-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

.qe-box {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  width: 340px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  animation: qe-in 0.18s ease;
}
.qe-box--sm { width: 300px; }

@keyframes qe-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.qe-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-border);
}
.qe-cat-icon { font-size: 22px; flex-shrink: 0; }
.qe-cat-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qe-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.qe-close:hover { background: var(--color-surface-alt, rgba(255,255,255,0.08)); }

.qe-body {
  padding: 14px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qe-body .field { margin: 0; }
.qe-body label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 4px;
}
.qe-body input {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-input-bg, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text);
  padding: 7px 10px;
  font-size: 14px;
}
.qe-body input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(112,188,46,0.18);
}
.qe-body input:hover:not(:focus) {
  border-color: var(--color-primary);
}

.qe-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px 14px;
  justify-content: flex-end;
}
.qe-footer--col {
  flex-direction: column;
}
.qe-footer--col .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.qe-feedback {
  min-height: 0;
  font-size: 12px;
  padding: 0 16px 10px;
  text-align: center;
  transition: all 0.2s;
}
.qe-feedback--ok    { color: var(--color-success, #22c55e); }
.qe-feedback--error { color: var(--color-danger, #ef4444); }



/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORY CARDS
   ── pp-cat-item  (Girdi / Gösterge)  tıklanabilir progress kartı (<button>)
   ── plan-cat-item (Planlama)          mini-bar + tutar input (<div>)
   Aynı kart kabuğu; gövde içeriği farklı.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grid kapsayıcı ─────────────────────────────────────────────────────── */
.pp-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobil varsayılan: 2 sütun */
  gap: 10px;
  padding: 12px 14px 16px;
}

/* ── Kart kabuğu (her iki tip için ortak) ──────────────────────────────── */
.pp-cat-item,
.plan-cat-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transition: box-shadow 0.15s, transform 0.15s;
}

/* CSS ripple: dokunmada anlık beyaz flash */
.pp-cat-item::after,
.plan-cat-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.pp-cat-item:active::after,
.plan-cat-item:active::after {
  opacity: 1;
  transition: opacity 0s;
}

/* Hover yalnızca gerçek pointer (fare) cihazlarda */
@media (hover: hover) {
  .pp-cat-item:hover,
  .plan-cat-item:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transform: translateY(-1px);
  }
}

/* ── <button> reset — pp-cat-item bir <button>'dur ─────────────────────── */
button.pp-cat-item {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  -webkit-appearance: none;
  appearance: none;
}
button.pp-cat-item:focus { outline: none; }
button.pp-cat-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
button.pp-cat-item:active { transform: translateY(0); }

/* ── Kart başlığı: ikon + isim + pct-badge ──────────────────────────────── */
.pp-cat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.pp-cat-name {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;        /* tek satır: icon + name + badge */
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  overflow: hidden;
}
.pp-cat-name .cat-icon {
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1;
}
/* Kategori adı: taşarsa kes */
.cat-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* ── İlerleme barı ──────────────────────────────────────────────────────── */
.pp-cat-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
html.light-theme .pp-cat-bar { background: rgba(0,0,0,0.08); }
.pp-cat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.pp-cat-bar-fill.fill-income  { background: var(--color-income-border); }
.pp-cat-bar-fill.fill-expense { background: var(--color-expense-border); }
.pp-cat-bar-fill.fill-saving  { background: var(--color-saving-border); }
.pp-cat-bar-fill.fill-over    { background: var(--color-danger); }

/* ── Tutar satırı (Girdi / Gösterge) ───────────────────────────────────── */
.pp-cat-amounts {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  -webkit-text-fill-color: var(--color-text-muted);
}
.pp-cat-amounts strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  -webkit-text-fill-color: var(--color-text);
}
/* Sol kısım (actual / planned): taşarsa kes, sağ kısım (fark) sabit */
.pp-cat-amounts > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.pp-cat-amounts > span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Tutar input'u (Planlama) ───────────────────────────────────────────── */
.plan-cat-item input.month-input {
  width: 100%;
  min-width: unset;
  text-align: center;       /* ortalanmış */
  border: none;             /* kutusu yok */
  border-bottom: 1px solid var(--color-border);  /* sadece alt çizgi */
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 0;
  height: 30px;
  font-size: 15px;          /* biraz daha büyük: okunabilirlik */
  font-weight: 700;
  color: var(--color-text);
  -webkit-text-fill-color: var(--color-text);
}
.plan-cat-item input.month-input:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}
input.month-input {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--color-text);
  -webkit-text-fill-color: var(--color-text);
}

/* ── Yüzde rozeti ───────────────────────────────────────────────────────── */
.pct-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  flex-shrink: 0;
  min-width: 34px;
  text-align: center;
  white-space: nowrap;
}
.pct-high { background: rgba(34,197,94,0.15);   color: #22c55e; }
.pct-mid  { background: rgba(234,179,8,0.15);   color: #eab308; }
.pct-low  { background: rgba(248,113,113,0.15); color: #f87171; }

/* ── Duyarlı ızgara — sabit sütun sayıları ──────────────────────────────── */
@media (min-width: 640px) {               /* Tablet dikey: 3 sütun */
  .pp-cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px 20px 20px;
  }
}
@media (min-width: 900px) {               /* Tablet yatay: 4 sütun */
  .pp-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {              /* Masaüstü: auto-fill 200px → 5-6 sütun */
  .pp-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px 24px 24px;
  }
}

/* ── Calendar drag-drop (mouse + touch) ────────────────────────────── */
.cal-entry--dragging {
  opacity: 0.40;
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: scale(0.95);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.cal-cell--drag-over {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
  transition: background 0.1s ease;
}

/* ── QE Modal — Plan onayı genişletilmiş stiller ─────────────────────────── */
.qe-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.qe-cat-month {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.qe-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qe-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qe-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Toggle switch (plan güncelle) ──────────────────────────────────────── */
/* Checkbox tamamen gizle — herhangi bir tarayıcıda görünmemeli */
.qe-switch-chk {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
/* Label = sadece track, tıklanabilir */
.qe-switch-lbl {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.qe-switch-track {
  display: block;
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-border);
  transition: background 0.18s;
}
.qe-switch-track::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s;
}
.qe-switch-chk:checked ~ .qe-switch-lbl .qe-switch-track {
  background: var(--color-primary, #3b82f6);
}
.qe-switch-chk:checked ~ .qe-switch-lbl .qe-switch-track::after {
  transform: translateX(16px);
}
.qe-switch-label {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  user-select: none;
}

/* ── Plan bloğu (dikey, tam genişlik) ───────────────────────────────────── */
.qe-plan-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qe-plan-block-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.qe-plan-original {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.qe-plan-block-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qe-plan-input {
  flex: 1;
  min-width: 0;
  background: var(--color-input-bg, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text);
  padding: 7px 10px;
  font-size: 14px;
  transition: border-color 0.15s, opacity 0.15s;
}
.qe-plan-input--locked {
  opacity: 0.4;
  cursor: not-allowed;
}
.qe-plan-input:not(.qe-plan-input--locked):focus {
  outline: none;
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
}

/* Bölüm ayırıcı */
.qe-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 2px 0;
}
.qe-divider::before, .qe-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* 2-col row for date + amount */
.qe-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 360px) {
  .qe-row-2 { grid-template-columns: 1fr; }
}

/* ── Takvim: kategori girişleri dikey ortalanmış ─────────────────────────── */
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.cal-cell-num {
  width: 100%;
  text-align: center;
}
.cal-entry {
  width: calc(100% - 4px);
  justify-content: center;
  text-align: center;
}

/* ── QE Modal — Plan satırı yeniden yapılandırma ─────────────────────────── */
/* Eski .qe-plan-row kuralını override et */
.qe-plan-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.qe-plan-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.qe-plan-left .qe-section-title {
  margin: 0;
}
.qe-plan-left .qe-plan-original {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.qe-plan-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.qe-plan-right .qe-plan-input {
  width: 100%;
  box-sizing: border-box;
}
/* Switch sat kendi satırında, solda label solda track */
.qe-plan-right .qe-switch {
  justify-content: flex-start;
}
.qe-plan-right .qe-switch-label {
  font-size: 11px;
  white-space: nowrap;
  width: 90px;
}

/* ── Paid Info Modal ─────────────────────────────────────────────────────── */
.paid-info-modal { display: none; position: fixed; inset: 0; z-index: 9000; }
.paid-info-modal--open { display: block; }
.paid-info-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.paid-info-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 360px;
  background: var(--color-card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.paid-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.paid-info-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.paid-info-title { flex: 1; font-size: 16px; font-weight: 600; color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paid-info-close { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 16px; padding: 4px 6px; flex-shrink: 0; border-radius: 4px; line-height: 1; }
.paid-info-close:hover { color: var(--color-text); background: var(--color-border); }
.paid-info-rows { display: flex; flex-direction: column; gap: 12px; }
.paid-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.paid-info-lbl { font-size: 13px; color: var(--color-text-muted); flex-shrink: 0; }
.paid-info-val { font-size: 15px; font-weight: 600; color: var(--color-text); text-align: right; }
.paid-info-val--green { color: var(--color-success, #22c55e); }

/* ── QE Modal — Snooze bölümü ────────────────────────────────────────────── */
.qe-snooze-section { margin-top: 4px; }
.qe-snooze-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.qe-snooze-preset {
  flex: 1;
  padding: 9px 4px;
  font-size: 13px;
}
.qe-snooze-custom {
  display: flex;
  gap: 8px;
  align-items: center;
}
.qe-snooze-date {
  flex: 1;
  background: var(--color-input-bg, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text);
  padding: 8px 10px;
  font-size: 14px;
}
#qeSnoozeBtn { flex-shrink: 0; padding: 9px 14px; }
.qe-snooze-feedback {
  font-size: 12px;
  color: var(--color-danger, #ef4444);
  min-height: 16px;
  margin-top: 8px;
}

/* ── Notification Action Sheet (artık kullanılmıyor, kaldırıldı) ─────────── */
.notif-action-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
}
.notif-action-modal--open { display: block; }

.notif-action-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.notif-action-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--color-card);
  border-radius: 16px 16px 0 0;
  padding: 20px 20px 36px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
}
@media (min-width: 640px) {
  .notif-action-box {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    max-width: 400px;
    padding: 24px;
  }
}
.notif-action-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.notif-action-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.notif-action-info { flex: 1; min-width: 0; }
.notif-action-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-action-planned {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.notif-action-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  flex-shrink: 0;
  border-radius: 4px;
  line-height: 1;
}
.notif-action-close:hover { color: var(--color-text); background: var(--color-border); }

.notif-action-pay-btn {
  width: 100%;
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
}
.notif-action-divider {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.notif-action-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.notif-preset-btn {
  flex: 1;
  padding: 9px 4px;
  font-size: 13px;
}
.notif-action-custom {
  display: flex;
  gap: 8px;
  align-items: center;
}
.notif-action-date-input {
  flex: 1;
  background: var(--color-input-bg, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text);
  padding: 8px 10px;
  font-size: 14px;
}
.notif-action-snooze-btn { flex-shrink: 0; padding: 9px 14px; }
.notif-action-feedback {
  font-size: 12px;
  color: var(--color-danger, #ef4444);
  min-height: 18px;
  margin-top: 10px;
}

/* ── Yardımcı spacing — mb-1, mb-4 ─────────────────────────────── */
.mb-1 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }

/* ── Seri İşlem Modal — tutar ve tarih satırları ────────────────── */
.seri-radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-bottom: 10px;
}
.seri-radio-row--fixed {
  cursor: default;
  margin-bottom: 0;
}
.seri-radio-row--inline {
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 0;
}

/* ── Seri İşlem Modal — tarih aralığı grid ──────────────────────── */
.seri-date-grid {
  display: grid;
  grid-template-columns: 70px 1fr 20px 70px 1fr;
  align-items: center;
  gap: var(--space-1);
}
.seri-date-sep {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.seri-date-error {
  margin: 6px 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-expense);
}
.seri-summary-box {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}
.seri-fixed-input {
  flex: 1;
  height: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.seri-fixed-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(112,188,46,0.15);
}
.seri-fixed-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.seri-currency-label {
  color: var(--color-text-muted);
  flex-shrink: 0;
  font-size: var(--font-size-sm);
}
.seri-date-label-note {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ── Responsive: küçük ekranda seri tarih grid ─── */
@media (max-width: 480px) {
  .seri-date-grid {
    grid-template-columns: 60px 1fr 16px 60px 1fr;
    gap: 4px;
  }
}

/* ════════════════════════════════════════════
   KARTLAR SAYFASI
   ════════════════════════════════════════════ */
.kart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: 0;
}

.kart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kart-card--pasif {
  opacity: 0.55;
}

.kart-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.kart-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.kart-card-info {
  flex: 1;
  min-width: 0;
}
.kart-card-name {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--color-text);
  margin-bottom: 4px;
}
.kart-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.kart-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.kart-dates {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}
.kart-date-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kart-date-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kart-date-val {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.kart-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-3);
}
.kart-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kart-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kart-stat-value {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
}

.kart-limit-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.kart-limit-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.kart-limit-bar-fill.fill-income  { background: var(--color-income-border); }
.kart-limit-bar-fill.fill-expense { background: var(--color-expense-border); }
.kart-limit-bar-fill.fill-saving  { background: var(--color-saving-border); }
.kart-limit-pct {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.kart-odeme-details {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.kart-odeme-summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  user-select: none;
}
.kart-odeme-summary::-webkit-details-marker { display: none; }
.kart-odeme-form {
  margin-top: var(--space-3);
}

/* Girdi formunda ödeme yöntemi ve hesap alanları */
.field-pm,
.field-acc {
  width: 180px;
  flex-shrink: 1;
  min-width: 130px;
}

/* Responsive */
@media (max-width: 600px) {
  .kart-grid {
    grid-template-columns: 1fr;
  }
  .kart-card-actions {
    flex-direction: column;
  }
  .kart-stats {
    flex-wrap: wrap;
  }
  .field-pm {
    width: 100%;
  }
}

/* ── Özet panel ─────────────────────────────────────── */
.kart-ozet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.kart-ozet-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.kart-ozet-item--total {
  border-color: var(--color-border-strong);
}
.kart-ozet-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.kart-ozet-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}

/* ── Section başlıkları ──────────────────────────────── */
.kart-section { margin-bottom: var(--space-6); }
.kart-section--minor { opacity: 0.8; }
.kart-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.kart-section-icon { font-size: 20px; }
.kart-section-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
}
.kart-section-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: 1px 8px;
}

/* ── Kart türü renk vurgusu ──────────────────────────── */
.kart-card--credit { border-left: 3px solid var(--color-debt-border); }
.kart-card--loan   { border-left: 3px solid var(--color-debt-border); }

/* ── Page header actions ─────────────────────────────── */
.page-header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}
.btn-migrate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Form section label ──────────────────────────────── */
.kart-form-section-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

/* ── Borç aktar sihirbazı ────────────────────────────── */
.aktar-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.aktar-row:last-of-type { border-bottom: none; }
.aktar-row-check {
  padding-top: 3px;
  flex-shrink: 0;
}
.aktar-row-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.aktar-row-body { flex: 1; min-width: 0; }
.aktar-row-name {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--color-text);
  margin-bottom: 4px;
  cursor: pointer;
}
.aktar-row-meta {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.aktar-row-fields {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.aktar-footer {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ── Utility renkleri ────────────────────────────────── */
.text-danger  { color: var(--color-expense) !important; }
.text-warning { color: var(--color-saving) !important; }

/* ── Responsive: özet panel ─────────────────────────── */
@media (max-width: 700px) {
  .kart-ozet { grid-template-columns: repeat(2, 1fr); }
  .page-header-actions { flex-direction: column; align-items: flex-end; }
  .aktar-row-fields { flex-direction: column; }
}
@media (max-width: 400px) {
  .kart-ozet { grid-template-columns: 1fr; }
}

/* ── Detay sayfası ───────────────────────────────────── */
.detay-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-4);
  align-items: start;
}
.detay-col-main {}
.detay-col-side {}

/* Kategori dağılım listesi */
.detay-cat-list {
  padding: 0 var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detay-cat-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}
.detay-cat-icon { flex-shrink: 0; }
.detay-cat-name { flex: 1; color: var(--color-text); }
.detay-cat-pct  { color: var(--color-text-muted); min-width: 36px; text-align: right; }
.detay-cat-amount {
  font-weight: 600;
  min-width: 90px;
  text-align: right;
  color: var(--color-text);
}

/* Kredi bilgi listesi */
.detay-info-list {
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detay-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}
.detay-info-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Detay buton varyantı */
.btn-sm--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-sm--primary:hover { opacity: 0.88; }

/* Responsive */
@media (max-width: 860px) {
  .detay-grid {
    grid-template-columns: 1fr;
  }
  .detay-col-side { order: -1; }
}

/* ════════════════════════════════════════════
   HESAPLAR SAYFASI
   ════════════════════════════════════════════ */
.hesap-ozet {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.hesap-ozet-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 160px;
}
.hesap-ozet-item--total { border-color: var(--color-border-strong); }
.hesap-ozet-item--warn  { border-color: var(--color-saving-border); }
.hesap-ozet-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.hesap-ozet-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}

/* ── Kartlar & Hesaplar 3-sütun birleşik layout ── */
.fintek-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: start;
}
@media (max-width: 900px) {
  .fintek-cols { grid-template-columns: 1fr; }
}
.fintek-col-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
}
.fintek-col-icon { font-size: 18px; }
.fintek-col-add {
  margin-left: auto;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}
.fintek-col-add:hover { text-decoration: underline; }

/* Hesap grid */
.hesap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Hesap kart */
.hesap-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-income-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hesap-card--pasif { opacity: 0.55; }

.hesap-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.hesap-card-icon { font-size: 26px; flex-shrink: 0; }
.hesap-card-info { flex: 1; min-width: 0; }
.hesap-card-name {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--color-text);
  margin-bottom: 4px;
}
.hesap-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.hesap-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Bakiye satırı */
.hesap-balance-row {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.hesap-balance-main, .hesap-balance-manual {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hesap-balance-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hesap-balance-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}

/* Fark uyarısı */
.hesap-discrepancy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(228, 176, 32, 0.12);
  border: 1px solid var(--color-saving-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.hesap-discrepancy-icon { flex-shrink: 0; }
.hesap-discrepancy-link {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Manuel bakiye formu */
.hesap-manual-details { border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.hesap-manual-summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  list-style: none;
  user-select: none;
}
.hesap-manual-summary::-webkit-details-marker { display: none; }
.hesap-manual-form { margin-top: var(--space-2); }

@media (max-width: 600px) {
  .hesap-grid { grid-template-columns: 1fr; }
  .hesap-balance-row { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   3 AYLIK MİNİ GÖSTERGE (Girdi paneli üst bandı)
   ════════════════════════════════════════════════════════════ */
.tmp-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  margin-bottom: var(--space-2);
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.tmp-col {
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background .15s;
}
.tmp-col:first-child { border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.tmp-col:last-child  { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }

.tmp-col--prev    { opacity: .72; }
.tmp-col--current { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
.tmp-col--next    { background: color-mix(in srgb, var(--color-income) 4%, var(--color-surface)); }

.tmp-header {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
}
.tmp-badge-now {
  font-size: 10px;
  font-weight: 600;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  letter-spacing: .02em;
}

.tmp-rows { display: flex; flex-direction: column; gap: 4px; }

.tmp-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.tmp-lbl  { font-size: var(--font-size-xs); color: var(--color-text-muted); min-width: 60px; }
.tmp-val  { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text); }
.tmp-val--income  { color: var(--color-income); }
.tmp-val--expense { color: var(--color-expense); }

.tmp-plan {
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.tmp-pct        { font-weight: 600; }
.tmp-pct--ok    { color: var(--color-income); }
.tmp-pct--warn  { color: #f59e0b; }
.tmp-pct--over  { color: var(--color-expense); }

.tmp-net {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.tmp-net--pos { color: var(--color-income); }
.tmp-net--neg { color: var(--color-expense); }
.tmp-net-lbl  { font-size: 10px; font-weight: 400; color: var(--color-text-muted); }

.tmp-empty { font-size: var(--font-size-xs); color: var(--color-text-muted); }

@media (max-width: 640px) {
  .tmp-panel { grid-template-columns: 1fr; gap: 1px; }
  .tmp-col:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .tmp-col:last-child  { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  .tmp-col--prev { display: none; } /* mobilde sadece şimdiki + sonraki */
}

.tmp-row--card {
  border-top: 1px dashed var(--color-border);
  padding-top: 4px;
  margin-top: 2px;
  opacity: .85;
}

.tmp-net-hint {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

/* ── Birikim Boz toggle ───────────────────────────────────────── */
.saving-boz-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  transition: all .15s;
  user-select: none;
}
.saving-boz-toggle input { display: none; }
.saving-boz-toggle:hover {
  border-color: var(--color-expense);
  color: var(--color-expense);
}
.saving-boz-toggle.is-boz {
  background: var(--color-expense-bg);
  border-color: var(--color-expense-border);
  color: var(--color-expense);
}