* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  color-scheme: light;
  --page:           #eef1fa;
  --surface-1:      #ffffff;
  --surface-2:      #f6f7fd;
  --text-primary:   #10132b;
  --text-secondary: #4a4f6e;
  --muted:          #878ca9;
  --grid:           #e6e8f4;
  --baseline:       #c9cde3;
  --border:         rgba(23, 26, 63, 0.09);
  --accent:         #6366f1;
  --accent-2:       #a855f7;
  --accent-3:       #06b6d4;
  --accent-grad:    linear-gradient(135deg, #6366f1, #a855f7);
  --accent-soft:    rgba(99, 102, 241, 0.10);
  --series-1:       #6366f1;   /* mavi-mor — gider serisi / tekil çubuklar */
  --series-2:       #ea580c;   /* turuncu — gelir serisi */
  --status-good:    #0f9d58;
  --status-warning: #eda412;
  --status-critical:#d6455d;
  --delta-good:     #067647;
  --shadow-card:    0 1px 2px rgba(16, 19, 43, 0.04), 0 16px 40px -28px rgba(16, 19, 43, 0.25);
  --shadow-pop:     0 8px 30px -8px rgba(16, 19, 43, 0.25);
  --glow-1:         rgba(99, 102, 241, 0.16);
  --glow-2:         rgba(6, 182, 212, 0.12);
  --glow-3:         rgba(168, 85, 247, 0.12);
  --sidebar-bg:     linear-gradient(178deg, #12163a 0%, #1c1145 60%, #200f4b 100%);
  --sidebar-ink:    #c6cbec;
  --sidebar-ink-2:  #8d93bf;
  --font-display:   'Sora', 'Manrope', system-ui, sans-serif;
  --font-body:      'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:           #0b0e1c;
    --surface-1:      #151a30;
    --surface-2:      #1b2140;
    --text-primary:   #f2f3fa;
    --text-secondary: #b9bdd8;
    --muted:          #7e84a3;
    --grid:           #262c4a;
    --baseline:       #3a4166;
    --border:         rgba(255, 255, 255, 0.09);
    --accent:         #7c80f2;
    --accent-soft:    rgba(124, 128, 242, 0.14);
    --series-1:       #7480f5;
    --series-2:       #dd6a2a;
    --status-good:    #2fbf71;
    --status-warning: #f0b429;
    --status-critical:#e4607a;
    --delta-good:     #2fbf71;
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.25), 0 18px 44px -30px rgba(0, 0, 0, 0.6);
    --shadow-pop:     0 8px 30px -8px rgba(0, 0, 0, 0.55);
    --glow-1:         rgba(99, 102, 241, 0.15);
    --glow-2:         rgba(6, 182, 212, 0.08);
    --glow-3:         rgba(168, 85, 247, 0.10);
    --sidebar-bg:     linear-gradient(178deg, #0e1130 0%, #170d3c 60%, #1b0c42 100%);
  }
}

body {
  font-family: var(--font-body);
  background-color: var(--page);
  background-image:
    radial-gradient(640px 420px at 88% -8%, var(--glow-1), transparent 62%),
    radial-gradient(520px 400px at -8% 28%, var(--glow-2), transparent 60%),
    radial-gradient(720px 520px at 55% 112%, var(--glow-3), transparent 62%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .brand, .stat-tile .value, .auth-card h1 { font-family: var(--font-display); letter-spacing: -0.015em; }

.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: 500; font-size: 0.85em; }
.error { color: var(--status-critical); margin-top: 10px; min-height: 1.2em; font-size: 0.9em; }

/* SVG ikonlar */
.ic { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Giriş ---- */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px;
  padding: 38px 36px; width: 100%; max-width: 430px; box-shadow: var(--shadow-card);
}
.auth-card h1 { font-size: 1.55rem; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.auth-logo {
  width: 34px; height: 34px; padding: 6px; border-radius: 10px;
  background: var(--accent-grad); color: #fff; box-shadow: 0 6px 16px -6px rgba(124, 92, 246, 0.7);
}
.auth-sub { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 22px; }
.auth-card input { width: 100%; margin-bottom: 12px; }
.auth-card .btn { width: 100%; }
.google-btn { display: flex; justify-content: center; margin-top: 12px; }
.switch { margin-top: 14px; font-size: 0.88rem; color: var(--text-secondary); text-align: center; }
.switch a { color: var(--accent); }

.auth-tabs {
  display: flex; gap: 6px; margin-bottom: 20px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px;
}
.auth-tab {
  flex: 1; padding: 10px 6px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text-secondary); font-size: 0.92rem; font-weight: 700; font-family: inherit;
}
.auth-tab.active { background: var(--accent-grad); color: #fff; box-shadow: 0 4px 14px -4px rgba(99, 102, 241, 0.6); }
.field-label { display: block; font-size: 0.82rem; font-weight: 700; margin: 2px 0 5px; color: var(--text-secondary); }
.how-it-works {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 0.87rem; color: var(--text-secondary);
}
.how-it-works h4 { color: var(--text-primary); margin-bottom: 8px; font-size: 0.92rem; }
.how-it-works ol { margin-left: 18px; display: flex; flex-direction: column; gap: 7px; line-height: 1.5; }
.how-it-works b { color: var(--text-primary); }
.bot-number { font-weight: 800; color: var(--accent); white-space: nowrap; }
.kvkk-row {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px;
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; cursor: pointer;
}
.kvkk-row input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.kvkk-row a, .kvkk-note a { color: var(--accent); font-weight: 700; }
.kvkk-note { font-size: 0.78rem; color: var(--muted); margin-top: 10px; text-align: center; }

/* ---- Uygulama düzeni ---- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex-shrink: 0; background: var(--sidebar-bg);
  padding: 20px 12px; color: var(--sidebar-ink);
  display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; height: 100vh;
}
.brand {
  font-weight: 800; font-size: 1.1rem; padding: 6px 12px 16px; color: #fff;
  display: flex; align-items: center; gap: 9px;
}
.brand .ic { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: var(--accent-grad); color: #fff; box-shadow: 0 4px 14px -4px rgba(124, 92, 246, 0.7); }

/* Sol menü profil kutusu */
.user-box {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
}
.user-box:hover { background: rgba(255, 255, 255, 0.11); }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-grad); color: #fff; font-weight: 800; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
}
.user-meta { min-width: 0; }
.user-name { font-weight: 700; font-size: 0.88rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-plan { font-size: 0.73rem; color: var(--sidebar-ink-2); }

.nav-btn {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: none; border: none; color: var(--sidebar-ink);
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; font-family: inherit;
}
.nav-btn .ic { color: var(--sidebar-ink-2); }
.nav-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-btn:hover .ic { color: #fff; }
.nav-btn.active {
  background: var(--accent-grad); color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(124, 92, 246, 0.75);
}
.nav-btn.active .ic { color: #fff; }
.sidebar .spacer { flex: 1; }
.content { flex: 1; min-width: 0; padding: 28px 32px; }

/* Özet başlığı ve WhatsApp durum şeridi */
.dash-head { margin-bottom: 18px; }
.dash-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.dash-head h2 { font-size: 1.45rem; }
.period-select { font-weight: 600; min-width: 130px; }
.wa-status {
  font-size: 0.88rem; padding: 10px 14px; border-radius: 11px; line-height: 1.5;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  box-shadow: var(--shadow-card);
}
.wa-status:empty { display: none; }
.wa-status.ok { border-left: 3px solid var(--status-good); }
.wa-status.warn { border-left: 3px solid var(--status-warning); }
.wa-status b { color: var(--text-primary); }
.wa-status a { color: var(--accent); font-weight: 700; }

/* ---- Kartlar ve formlar ---- */
.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-card);
}
.card h3 { font-size: 1rem; margin-bottom: 14px; }
input, select {
  background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 13px; font-size: 0.92rem; font-family: inherit;
}
input::placeholder { color: var(--muted); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface-1); }
.btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 0.92rem;
  font-weight: 600; font-family: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn:hover { filter: brightness(0.98); }
.btn.primary {
  background: var(--accent-grad); border: none; color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.65);
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 9px 22px -6px rgba(99, 102, 241, 0.7); filter: none; }
.btn.small { padding: 5px 11px; font-size: 0.8rem; border-radius: 8px; }
.btn.danger { color: var(--status-critical); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row input[type="text"] { flex: 1; min-width: 200px; }
.row input.short { flex: 0 1 180px; min-width: 120px; }
.form-grid { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-grid input, .form-grid select { flex: 1; min-width: 130px; }
.form-grid .field { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.form-grid .field.wide { flex: 2; min-width: 240px; }
.form-grid .field input, .form-grid .field select { flex: none; width: 100%; min-width: 0; }
.field label { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.field label .opt { font-weight: 500; color: var(--muted); }
.field label .opt::before { content: '· '; }
.form-grid > .btn { margin-bottom: 1px; }
.filters { margin-bottom: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tx-summary { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 10px; }
.tx-summary:empty { display: none; }
.tx-summary b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.card-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.card-head .btn .ic { width: 14px; height: 14px; }
.filters .field { flex: 0 1 220px; display: flex; flex-direction: column; gap: 6px; }

/* ---- Hızlı ekle (vitrin kartı) ---- */
.quick-add {
  background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #9333ea 100%);
  border: none; color: #fff; position: relative; overflow: hidden;
}
.quick-add::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 90% -30%, rgba(255, 255, 255, 0.22), transparent 60%);
}
.quick-add label { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.quick-add input { background: rgba(255, 255, 255, 0.94); border: none; color: #10132b; }
.quick-add input:focus { outline: 2px solid rgba(255, 255, 255, 0.8); background: #fff; }
.quick-add .btn.primary { background: rgba(16, 19, 43, 0.35); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.35); }
.quick-add .btn.primary:hover { background: rgba(16, 19, 43, 0.5); transform: none; }
.quick-result { margin-top: 10px; font-size: 0.9rem; white-space: pre-wrap; color: rgba(255, 255, 255, 0.92); position: relative; }

/* ---- Stat kutuları ---- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-tile {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow-card);
}
.stat-tile .tile-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.stat-tile .tile-ic {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff;
}
.stat-tile .tile-ic .ic { width: 16px; height: 16px; }
.stat-tile.tone-expense .tile-ic { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.stat-tile.tone-income  .tile-ic { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.stat-tile.tone-net     .tile-ic { background: linear-gradient(135deg, #0891b2, #06b6d4); }
.stat-tile.tone-balance .tile-ic { background: linear-gradient(135deg, #0f9d58, #34c479); }
.stat-tile .value.neg { color: var(--status-critical); }
.stat-tile .budget-bar { margin-top: 8px; }
.stat-tile .label { font-size: 0.8rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }
.stat-tile .value { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-tile .delta { font-size: 0.8rem; margin-top: 5px; font-weight: 600; color: var(--text-secondary); }
.stat-tile .delta.good { color: var(--delta-good); }
.stat-tile .delta.bad { color: var(--status-critical); }

/* ---- Grafikler ---- */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 900px) {
  .chart-grid { grid-template-columns: 1fr; }
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; overflow-x: auto; padding: 10px; }
  .sidebar .spacer, .brand, .user-box { display: none; }
  .nav-btn { flex-shrink: 0; }
  .content { padding: 18px; }
}
.viz-root { width: 100%; overflow-x: auto; }
.viz-root svg { display: block; }
.legend { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 50;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 11px; font-size: 0.8rem; color: var(--text-primary);
  box-shadow: var(--shadow-pop);
}

/* ---- Listeler ---- */
.list-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 6px;
  border-bottom: 1px solid var(--grid); font-size: 0.92rem; border-radius: 6px;
}
.list-item:hover { background: var(--surface-2); }
.list-item:last-child { border-bottom: none; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-display); }
.list-item .amount.income { color: var(--delta-good); }
.list-item .sub { font-size: 0.8rem; color: var(--muted); }
.badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: var(--accent-soft); border: 1px solid transparent; color: var(--accent); white-space: nowrap;
}
.badge.paid { background: color-mix(in srgb, var(--status-good) 12%, transparent); color: var(--delta-good); }

/* ---- Bütçe çubukları ---- */
.budget-bar { height: 9px; background: var(--grid); border-radius: 5px; overflow: hidden; margin-top: 7px; }
.budget-bar .fill { height: 100%; border-radius: 5px; background: var(--accent-grad); }
.budget-bar .fill.warn { background: var(--status-warning); }
.budget-bar .fill.over { background: var(--status-critical); }
.budget-bar .fill.goal-done { background: var(--status-good); }

/* ---- Birikim hedefleri ---- */
.goal-item { align-items: center; }
.goal-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 2px; font-weight: 600; }
.goal-nums { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.goal-nums b { color: var(--accent); }
.goal-add-input { width: 110px; }

/* ---- Sohbet ---- */
.chat-card { display: flex; flex-direction: column; height: calc(100vh - 110px); }
.chat-messages { flex: 1; overflow-y: auto; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; }
.msg { max-width: 78%; padding: 11px 15px; border-radius: 16px; font-size: 0.92rem; white-space: pre-wrap; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--accent-grad); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 6px 16px -8px rgba(99, 102, 241, 0.6); }
.msg.assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg.typing { color: var(--muted); font-style: italic; }
.msg .speak { margin-left: 8px; padding: 1px 6px; font-size: 0.75rem; vertical-align: middle; }

/* ---- Kaydırma çubukları ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--baseline); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- V4: alan seçici, Bugün, açık kayıtlar, cari, üyeler, modal ---- */
.ws-box { padding: 4px 12px 10px; }
.ws-box label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sidebar-ink-2); margin-bottom: 5px; }
.ws-row { display: flex; gap: 6px; }
.ws-row select { flex: 1; min-width: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 8px 10px; font-size: 0.84rem; font-weight: 600; }
.ws-row select option { color: #10132b; }
.ws-add { width: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ws-add:hover { background: rgba(255,255,255,0.16); }
.ws-chip { font-size: 0.8rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 5px 11px; border-radius: 20px; }
.today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; } }
.row-flag { font-size: 0.78rem; font-weight: 700; color: var(--status-warning); margin: 8px 6px 0; }
.row-flag.over { color: var(--status-critical); }
.badge.receivable { background: color-mix(in srgb, var(--status-good) 12%, transparent); color: var(--delta-good); }
.badge.payable { background: color-mix(in srgb, var(--series-2) 14%, transparent); color: var(--series-2); }
.badge.planned { background: color-mix(in srgb, var(--status-warning) 16%, transparent); color: #9a6700; }
.badge.private { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.badge.danger { background: color-mix(in srgb, var(--status-critical) 12%, transparent); color: var(--status-critical); }
.debt-item.overdue { border-left: 3px solid var(--status-critical); }
.debt-item .budget-bar { max-width: 320px; margin-top: 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); padding: 6px 12px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.chip.active { background: var(--accent-grad); color: #fff; border-color: transparent; }
select.mini { padding: 4px 8px; font-size: 0.78rem; border-radius: 8px; }
.cp-bal { font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.segmented { display: flex; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 8px; }
.segmented button { flex: 1; border: none; background: transparent; padding: 9px 4px; border-radius: 9px; font-weight: 700; font-family: inherit; color: var(--text-secondary); cursor: pointer; font-size: 0.86rem; }
.segmented button.active { background: var(--accent-grad); color: #fff; }
.usage-hint { font-size: 0.8rem; color: var(--muted); margin: 0 0 12px; line-height: 1.45; }
.invite-code { font-family: ui-monospace, monospace; font-weight: 800; letter-spacing: 0.08em; font-size: 1rem; color: var(--accent); }
.feat-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.feat { font-size: 0.78rem; padding: 4px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.feat.on { color: var(--delta-good); background: color-mix(in srgb, var(--status-good) 10%, transparent); border-color: transparent; }
.ws-create { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grid); }
.active-ws { background: var(--accent-soft); }
.modal { position: fixed; inset: 0; background: rgba(10, 12, 30, 0.55); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.modal-box { background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; padding: 22px; width: 100%; max-width: 760px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-pop); }
.modal-box h3 { margin-bottom: 6px; }
.table-wrap { overflow-x: auto; margin-top: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--grid); text-align: left; white-space: nowrap; }
.tbl th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: #10132b; color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 0.88rem; font-weight: 600; opacity: 0; transition: all 0.2s; z-index: 70; box-shadow: var(--shadow-pop); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--status-critical); }
.btn.danger.primary { background: var(--status-critical); }
.card-head label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* ---- V5: alt sekmeler, başlangıç kartı, katlanır ayar kartları, parola sıfırlama ---- */
.subtabs { margin-bottom: 16px; }
.subtabs .chip { padding: 8px 14px; font-size: 0.86rem; }
.onboard { border-left: 3px solid var(--accent); }
.onboard-steps { margin: 4px 0 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.onboard-steps li { display: flex; align-items: flex-start; gap: 10px; }
.onboard-steps li.done { color: var(--muted); }
/* Adım işareti: boş daire / yeşil onay (metin karakteri değil, çizilir) */
.step-mark { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; color: transparent; }
.onboard-steps li.done .step-mark { background: var(--delta-good); border-color: var(--delta-good); color: #fff; }
.onboard-steps a { color: var(--accent); font-weight: 700; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h3 { margin: 0; flex: 1; }
details.fold > summary::after { content: '▾'; color: var(--muted); font-size: 0.9rem; transition: transform 0.15s; }
details.fold[open] > summary::after { transform: rotate(180deg); }
details.fold[open] > summary { margin-bottom: 12px; }
.error.ok { color: var(--delta-good); }
.auth-card form { display: block; }
.badge.danger { background: color-mix(in srgb, var(--status-critical) 12%, transparent); color: var(--status-critical); }
@media (max-width: 900px) {
  .ws-box { display: block; flex: 0 0 100%; order: -1; padding: 6px 8px 4px; }
  .ws-box label { display: none; }
  .sidebar { flex-wrap: wrap; }
  .list-item { flex-wrap: wrap; row-gap: 6px; }
  .list-item .grow { flex: 1 1 100%; min-width: 0; order: 1; }
  .list-item .badge { order: 0; }
  .list-item .amount { order: 2; margin-left: 0; }
  .list-item .btn { order: 3; }
  .list-item .grow .sub { white-space: normal; }
  .debt-item .budget-bar { max-width: 100%; }
  .chips { gap: 6px; }
}
/* ---- V7: dil seçici, para birimi seçimi, yabancı birim satırları, personel görünümü ---- */
.lang-toggle { display: flex; justify-content: flex-end; gap: 4px; margin: -10px -8px 6px 0; }
.lang-toggle button {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  padding: 4px 10px; border-radius: 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; cursor: pointer; font-family: inherit;
}
.lang-toggle button.active { background: var(--accent-grad); color: #fff; border-color: transparent; }
.amount-row { display: flex; gap: 6px; }
.phone-row { display: flex; gap: 6px; }
.phone-row input { flex: 1; min-width: 0; }
.cc-select { flex: none; width: auto; min-width: 0; padding-left: 9px; padding-right: 9px; font-weight: 700; }
.auth-card .phone-row { margin-bottom: 10px; }
.auth-card .phone-row input { margin-bottom: 0; }
.form-grid .field .amount-row input { flex: 1; width: auto; min-width: 0; }
.form-grid .field .amount-row select, .cur-select { flex: none; width: auto; min-width: 0; padding-left: 9px; padding-right: 9px; font-weight: 700; }
.field label .cur-sym { font-weight: 500; color: var(--muted); }
.stat-tile .foreign { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 3px; }
.stat-tile .foreign .sub { color: var(--muted); font-weight: 500; }
.staff-notice { font-size: 0.82rem; color: var(--muted); margin-top: 8px; font-weight: 600; }
.ws-cur { display: inline-flex; align-items: center; gap: 4px; }
#reg-currency { margin-bottom: 12px; }
#reg-currency button { font-size: 0.8rem; padding: 8px 2px; }
.form-grid .field:has(> .amount-row) { flex: 1.3; min-width: 210px; }
.form-grid .field:has(> #set-currency), .form-grid .field:has(> #set-lang) { flex: 0 1 200px; }

/* ---- V8: Bugün = ana sayfa (tüm alanların özeti + detaya git bağlantıları) ---- */
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 18px; }
.home-card { display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
.home-card .card-head { margin-bottom: 0; }
.card-head .go { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.card-head .go::after { content: ' →'; }
.card-head .go:hover { text-decoration: underline; }
.mini-rows { display: flex; flex-direction: column; gap: 8px; }
.mini-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.9rem; color: var(--text-secondary); }
.mini-row b { color: var(--text-primary); font-weight: 800; white-space: nowrap; }
.mini-row b.neg, .neg { color: var(--status-critical); }
.pos { color: var(--delta-good); }
.mini-cats { display: flex; flex-direction: column; gap: 10px; }
.mini-cat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.86rem; margin-bottom: 4px; }
.mini-cat-top span:first-child { font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-list { display: flex; flex-direction: column; }
.mini-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.mini-item:last-child { border-bottom: none; }
.mini-item .grow { flex: 1; min-width: 0; overflow: hidden; }
.mini-item .grow > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-item .amount { font-weight: 800; white-space: nowrap; }
.mini-foot { margin-top: auto; padding-top: 4px; }
.warn-text { color: var(--status-critical); font-weight: 700; }
@media (max-width: 700px) { .home-grid { grid-template-columns: 1fr; } }

/* ---- V9: Finansal Radar, öne çıkanlar, gecikme/kısmi rozetleri, asistanın hafızası ---- */
.radar-chips { margin: 12px 0 14px; }
.radar-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.radar-stat {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.radar-stat .label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.radar-stat b { font-family: var(--font-display); font-size: clamp(0.9rem, 3.6vw, 1.1rem); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
#radar-card .card-head { flex-wrap: wrap; row-gap: 2px; }
.radar-stat b.neg { color: var(--status-critical); }
.radar-stat b.pos { color: var(--delta-good); }
.radar-stat .sub { font-size: 0.76rem; color: var(--muted); }
/* Kümülatif fark çubukları: sıfır çizgisinin üstü artı (mor), altı eksi (kırmızı) */
.spark { position: relative; display: flex; align-items: stretch; gap: 3px; height: 44px; margin: 2px 0 14px; }
.spark-base { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--baseline); pointer-events: none; }
.spark .bar { flex: 1; min-width: 2px; max-width: 22px; position: relative; }
.spark .bar i { position: absolute; left: 0; right: 0; border-radius: 2px; background: var(--accent); opacity: 0.85; }
.spark .bar i.neg { background: var(--status-critical); }
.radar-lines { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.45; }
.radar-line { min-width: 0; overflow-wrap: anywhere; }
.radar-line b { color: var(--text-primary); }
.radar-line.over, .radar-line.over b { color: var(--status-critical); }
.radar-line.sub { font-size: 0.84rem; color: var(--muted); }
.radar-line .mini-list { margin-top: 4px; }
.radar-line .mini-item .sub { white-space: nowrap; }
#radar-body.loading { opacity: 0.5; transition: opacity 0.15s; }
#insights-card h3 { margin-bottom: 6px; }
.insight { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; }
.insight:last-child { border-bottom: none; }
.badge.partial { background: color-mix(in srgb, var(--status-warning) 16%, transparent); color: #9a6700; }
.modal-box h3 .badge { vertical-align: middle; }
.mem-text { overflow-wrap: anywhere; }
.mem-edit { width: 100%; margin-top: 6px; }
.mem-edit input { flex: 1; min-width: 160px; }
/* Ayarlar > WhatsApp numarası: dar ekranda telefon girişi kartın dışına taşmasın */
.form-grid .field .phone-row input { flex: 1; width: auto; min-width: 0; }
@media (max-width: 900px) {
  .list-item .mem-edit { flex: 1 1 100%; }
}

/* ---- V10: yükleme / hata durumları, dar ekran düzeltmeleri ---- */
/* Açılış ve sekme durum satırları (beyaz ekran / kaybolan toast yerine kalıcı, anlaşılır mesaj) */
.boot-status {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  min-height: 100vh; padding: 20px; text-align: center; color: var(--text-secondary); font-weight: 600;
}
.boot-status.err { color: var(--status-critical); }
.tab-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 10px 14px; border-radius: 11px; font-size: 0.9rem; font-weight: 600; line-height: 1.45;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); box-shadow: var(--shadow-card);
}
.tab-status.error { border-left: 3px solid var(--status-critical); color: var(--status-critical); overflow-wrap: anywhere; }
/* Izgara hücreleri içeriğin en dar genişliğine göre büyümesin (dar ekranda sayfa yatay kaymasın) */
.home-grid > *, .today-grid > *, .chart-grid > *, .stat-row > *, .radar-stats > * { min-width: 0; }
/* Büyük tutarlar: kutucuklar biraz daha geniş, sayı bölünmez, gerekirse yalnız birim alt satıra iner */
.stat-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat-tile .value { white-space: normal; overflow-wrap: normal; }
/* Radar tutarları üç noktayla kesilmesin (kesik tutar yanıltır); gerekirse birim alt satıra insin */
.radar-stat b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
/* İki sütunlu "Bugün ve gecikenler / 7 gün" kartlarında satırlar sıkışmasın: rozet üstte, ad tam satır, tutar + düğme altta */
@media (max-width: 1500px) {
  .today-grid .list-item { flex-wrap: wrap; row-gap: 6px; }
  .today-grid .list-item .grow { flex: 1 1 100%; order: 1; }
  .today-grid .list-item .badge { order: 0; }
  .today-grid .list-item .amount { order: 2; }
  .today-grid .list-item .btn { order: 3; }
}
/* Ana sayfa mini kartlarında ikincil metinler (ör. "4 işlem", kategori tutarları) */
.home-card .sub { font-size: 0.8rem; color: var(--muted); }
/* Ayarlar > WhatsApp numarası: ülke kodu seçicisi tüm satırı kaplayıp numara alanını gizlemesin */
.form-grid .field .phone-row select { flex: none; width: auto; min-width: 0; }
.form-grid .field:has(> .phone-row) { flex: 1.4; min-width: 250px; }
/* Kayıt ekranı seçenekleri tek satırda kalsın */
.segmented button { white-space: nowrap; min-width: 0; }
@media (max-width: 420px) {
  .segmented button { font-size: 0.8rem; padding: 9px 2px; }
}
/* Dar ekranda sohbet: giriş kutusu ekranın çok altına düşmesin */
@media (max-width: 900px) {
  .chat-card { height: auto; }
  .chat-messages { max-height: 55vh; min-height: 160px; }
}

/* ---- V11: WhatsApp numarası doğrulama, radar kaynak bağlantısı, etiketli yabancı birim satırları ---- */
/* Doğrulama kodu: kolay okunsun, kopyalanabilsin */
.verify-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: 0.14em; font-size: 1.08em; color: var(--text-primary); user-select: all; }
.verify-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.verify-actions .btn { display: inline-flex; align-items: center; text-decoration: none; }
.wa-status a.btn.primary { color: #fff; }
.verify-why { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--muted); font-weight: 500; line-height: 1.4; }
/* Ayarlar > WhatsApp numaranız: durum rozeti + kod + düğmeler (form-grid .field içinde) */
.phone-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.phone-status:empty { display: none; }
.phone-status .verify-actions { margin-top: 0; flex-basis: 100%; }
.phone-status .verify-why { flex-basis: 100%; margin-top: 0; }
.onboard-steps li a { color: var(--accent); font-weight: 700; }
/* Adım metni tek flex çocuğu: dar ekranda bağlantılar satır başına iner, kartın dışına taşmaz */
.onboard-steps .step-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Radar satırından kaynağına giden küçük bağlantı ("Planlama →") */
.src-link { font-size: 0.78rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.src-link::after { content: ' →'; }
.src-link:hover { text-decoration: underline; }
.radar-line .mini-item .grow .sub { line-height: 1.3; }
/* "Bu ay" kartı: yabancı birim satırları ana satırın altında, daha küçük */
.mini-row.foreign-row { font-size: 0.8rem; color: var(--muted); margin-top: -4px; }
.mini-row.foreign-row b { font-weight: 700; color: var(--text-secondary); }