:root {
  color-scheme: dark;
  --surface-1:      #12151d;
  --surface-2:      #0a0d13;
  --surface-3:      #1b1f2a;
  --text-primary:   #f2f4f8;
  --text-secondary: #97a1b6;
  --text-muted:     #5c6478;
  --gridline:       rgba(255,255,255,0.07);
  --baseline:       rgba(255,255,255,0.16);
  --border:         rgba(255,255,255,0.09);
  --good:           #22d3a5;
  --good-fill:      #22d3a5;
  --critical:       #f2555f;
  --series-1:       #22d3a5;
  --series-2:       #38bdf8;
  --series-3:       #fbbf24;
  --series-4:       #a78bfa;
  --series-5:       #fb7185;
  --series-6:       #94a3b8;
  --series-7:       #2dd4bf;
  --series-8:       #fb923c;

  --shadow-sidebar:    0 24px 48px -28px rgba(0, 0, 0, 0.65);
  --shadow-card:       0 20px 44px -32px rgba(0, 0, 0, 0.8);
  --shadow-card-hover: 0 24px 44px -26px rgba(0, 0, 0, 0.85);
  --shadow-modal:      0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --shadow-kart-hover: 0 16px 32px -20px rgba(0, 0, 0, 0.75);

  /* Sprint 6 / Görev 2 — design token foundation. Mevcut değerlerin
     ÜZERİNE yazmaz; yeni ekranların/page chrome'un kullanacağı ortak
     ölçek + semantik isimlendirmedir (bkz. docs/SPRINT_06_TASK_00_UI_UX_AUDIT.md §21). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Sprint 14 / Task 14.2B — Visual Language 3.0 foundation, canonical
     radius values (docs/SPRINT_14_TASK_01B_VISUAL_DIRECTION_DECISIONS.md
     §8, docs/SPRINT_14_TASK_02A_VISUAL_LANGUAGE_PROPOSAL.md). Was 8px/
     16px; every consumer of these two tokens (buttons, inputs, panels,
     modals) now gets the smaller, more restrained radius automatically —
     a token-value change, no selector was touched. This intentionally
     matches design-system.css's own --radius-control-ds/--radius-panel-ds
     (already 6px/10px since Sprint 11 — see that file's naming-collision
     note), so both token systems now agree on the same physical values,
     not just the same names. */
  --radius-control: 6px; /* was 8px */
  --radius-panel:   10px; /* was 16px */
  --radius-pill:    999px;

  /* `good`/`critical` yanına üçüncü semantik durum. Değer, kart limit
     çubuğunun önceden hardcoded taşıdığı `#e0a940` ile BİREBİR aynı -
     görsel sonuç değişmiyor, yalnız adlandırılıyor. */
  --warning: #e0a940;

  /* Buton metni gibi tema-dışı sabit renkler - `--good`/`--critical`
     arka planlarının üzerinde her iki temada da aynı kontrastı taşır. */
  --on-good:     #06231b;
  --on-critical: #2a0a0d;

  /* İki modül başlığı ana figürünün (Bütçe/Harcanabilir/Kartlar) birbirine
     çok yakın ama tutarsız boyutlarını (2rem / 2.1rem / 2.1rem) tek
     foundation değerine bağlar (bkz. görev §10). */
  --figure-size-primary:        2.1rem;
  --figure-size-primary-mobile: 1.7rem;

  /* Bütçe/Harcanabilir Tutar/Kartlar modül başlıkları (`*-baslik-ad`) bugün
     üç ayrı yerde BİREBİR aynı kuralı tekrarlıyor - tek kaynağa bağlanır. */
  --font-size-module-title: 1.15rem;
}

/* Figma "GoodFood" ilhamlı açık tema */
:root[data-theme="light"] {
  color-scheme: light;
  --surface-1:      #ffffff;
  --surface-2:      #f4f5fa;
  --surface-3:      #eef0f8;
  --text-primary:   #2d3142;
  --text-secondary: #676e85;
  --text-muted:     #9298ac;
  --gridline:       rgba(45,49,66,0.07);
  --baseline:       rgba(45,49,66,0.16);
  --border:         rgba(45,49,66,0.09);
  --good:           #28c76f;
  --good-fill:      #28c76f;
  --critical:       #ea5455;
  --series-1:       #7367f0;
  --series-2:       #2dd4bf;
  --series-3:       #ff9f43;
  --series-4:       #a78bfa;
  --series-5:       #ea5455;
  --series-6:       #8a8fa3;
  --series-7:       #4ea1e8;
  --series-8:       #ffc542;

  --shadow-sidebar:    0 10px 30px -14px rgba(45, 49, 66, 0.12);
  --shadow-card:       0 8px 24px -12px rgba(45, 49, 66, 0.10);
  --shadow-card-hover: 0 16px 34px -16px rgba(45, 49, 66, 0.16);
  --shadow-modal:      0 22px 52px -18px rgba(45, 49, 66, 0.24);
  --shadow-kart-hover: 0 12px 26px -14px rgba(45, 49, 66, 0.14);
}

* { box-sizing: border-box; }

/* Sprint 6 / Görev 2 — global `[hidden]` garantisi.
   Bazı component sınıfları (`.kart-liste-bos { display: flex }` gibi)
   author-origin CSS oldukları için tarayıcının varsayılan
   `[hidden] { display: none }` UA kuralının ÜZERİNE YAZAR (author kuralları
   cascade origin'i gereği her zaman UA kurallarını ezer) - Sprint 6 / Task 1
   gerçek Chromium testinde KANITLANMIŞ hata buydu (`.kart-liste-bos`,
   `hidden=true` iken görünür kalıyordu; bkz. docs/SPRINT_06_BROWSER_BASELINE.md).
   `.tab-panel[hidden]`, `.form-row[hidden]`, `.modal-overlay[hidden]` gibi en
   az 5 yerde aynı sorun tek tek, tutarsız şekilde yamalanmıştı. `!important`
   burada BİLİNÇLİ: `hidden` semantik olarak "bu içerik yok" demektir, hiçbir
   component'in `display` kuralı bunu geçersiz kılmamalı - ne bugün var olan
   ne de ileride eklenecek bileşenler için. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* Sprint 11 / Task 11.1 — Design System 2.0 foundation. IBM Plex Sans
     self-hosted (Gate A: PASS, docs/SPRINT_11_TASK_00A_FONT_VERIFICATION.md).
     Falls back to var(--font-ui) (design-system.css) which carries its own
     system-sans fallback chain if the WOFF2 assets fail to load. */
  font-family: var(--font-ui, "IBM Plex Sans"), system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Sprint 14 / Task 14.2B.1 — canvas bridge. Base layer now consumes
     design-system.css's --color-canvas (the approved Visual Language 3
     page canvas, #14161a dark / #f9f7f3 light) directly instead of this
     file's own --surface-2 (#0a0d13 dark / #f4f5fa light) — one
     canonical DS3 source, no duplicated hex literal. --surface-2 itself
     is NOT redefined here and is NOT touched anywhere else in this
     file: its two other real consumers (.kayit-tablosu row-group hover,
     .iceaktar2-toplu-cubuk's color-mix background) are deliberately
     left exactly as they were - this bridge is page-canvas-only, not a
     surface-wide remap. The decorative radial-gradient accents are
     unchanged. */
  background:
    radial-gradient(1100px 520px at 14% -8%, color-mix(in srgb, var(--good) 13%, transparent), transparent 60%),
    radial-gradient(900px 480px at 88% 4%, color-mix(in srgb, var(--series-2) 10%, transparent), transparent 55%),
    var(--color-canvas, var(--surface-2));
  background-attachment: fixed;
  color: var(--text-primary);
  font-size: 0.9rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s ease, color 0.2s ease;
}

:root[data-theme="light"] body {
  /* Sprint 14 / Task 14.2B.1 — see the dark-mode declaration above for
     the full canvas-bridge rationale. */
  background: var(--color-canvas, var(--surface-2));
}

button, a, .tab-btn, .tip-filtre-btn {
  font-family: inherit;
}

/* Sadece klavyeyle gezinirken görünen odak halkası; fare tıklamasında araya girmez. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--good);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: 1600px;
  width: 96%;
  margin: 0 auto;
  padding: 1.5rem 0;
}

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

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: 2rem; /* Task 14.4B — intentional header/content rhythm, was implicit/none */
}
/* Sprint 14 / Task 14.4B — fixed a real debt (see docs/
   SPRINT_14_TASK_04A_APP_SHELL_PROPOSAL.md §Page header): this used to
   paint the title with a gradient background-clip:text, whose real
   computed `color` was transparent (rgba(0,0,0,0)) - only the gradient
   clip ever painted it. Replaced with the approved DS3 .t-page-title
   role: 28px/700, solid color, no gradient/clip. */
.page-header h1 {
  margin: 0;
  font-size: 1.75rem; /* was 1.85rem */
  font-weight: 700; /* was 800 */
  letter-spacing: -0.005em; /* was -0.02em */
  color: var(--color-text-primary, var(--text-primary)); /* was: transparent via gradient background-clip:text */
}
.page-subtitle { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: 0.85rem; }
.page-header-sag { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ay-filtre { display: flex; align-items: center; gap: var(--space-2); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.35rem 0.5rem 0.35rem 0.9rem; }
.ay-filtre label { color: var(--text-secondary); font-size: 0.82rem; }
.ay-filtre select { background: none; border: none; color: var(--text-primary); padding: 0.1rem 0.3rem; }
.ay-filtre select option { background-color: var(--surface-1); color: var(--text-primary); }
.disa-aktar { display: flex; gap: var(--space-2); }
.btn-disa-aktar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--surface-1);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.btn-disa-aktar:hover { color: var(--text-primary); border-color: var(--good); }

select, input[type="text"], input[type="date"], input[type="number"], input[type="month"], input[type="search"], input[type="url"], input[type="password"] {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--baseline);
  background: var(--surface-3);
  color: var(--text-primary);
}
select option { background-color: var(--surface-3); color: var(--text-primary); }

/* Sprint 14 / Task 14.4B — intentional desktop content frame (approved
   Task 14.4A prototype §4/§2): `.container` alone gave every page a
   generic 96%-of-viewport width, which for THIS shell produced ~28.8px
   outer gutters and a 24px sidebar/main gap as incidental side effects
   of that formula, not values anyone chose for this layout specifically.
   Scoped to `.gg-layout` via :has() (already an established pattern in
   this file, see the mobile "Daha Fazla" rules below) so no other
   `.container` consumer (giris/kayit-ol/sifreli-giris) is affected.
   48px/32px are design-system.css's own --space-page-gutter/--space-
   section-gap tokens - already approved, never consumed anywhere until
   now. */
.container:has(.gg-layout) {
  max-width: 1600px;
  width: 100%;
  padding: 32px var(--space-page-gutter, 48px);
}
.gg-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-section-gap, 32px); /* was var(--space-6)=24px - a literal, deliberate shell-only value, --space-6 itself is untouched (still 24px everywhere else it's used) */
  margin: 1.25rem 0;
}
/* Sprint 11 / Task 11.5.1 — integrated navigation RAIL, not a floating
   SaaS card (Direction B, Design System §6.1 "Kontrollü Bilanço"). The
   old version carried its own gradient surface + full-container border
   + 20px radius + drop shadow, which read as a card sitting on top of
   the page rather than the app shell's own chrome. Separation from
   .gg-main now comes from a single hairline right-border + whitespace +
   typography (§4/§27), not a bordered/shadowed container - no visual
   change to nav functionality, sticky behavior, or IA. */
.gg-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 0 0 216px;
  width: 216px;
  align-self: stretch;
  /* Sprint 14 / Task 14.4B — subtle DS3 tonal separation (approved
     Task 14.4A prototype §3), replacing the old hairline-only
     separation. Still the same brand/theme as .gg-main in both light
     and dark - no dark-sidebar-on-light-app pattern, no shadow. */
  background: var(--color-surface-1, var(--surface-1));
  border: none;
  border-right: 1px solid var(--color-divider, var(--border));
  border-radius: var(--radius-panel-ds, 10px);
  padding: 1.5rem;
  position: sticky;
  top: 1.5rem;
  box-shadow: none;
}
.gg-main { flex: 1 1 auto; min-width: 0; }
.gg-sidebar-alt {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.2rem 0.4rem 1.25rem; /* was 0.9rem - Task 14.4B brand proportion */
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-divider, var(--border));
}
.sidebar-brand-mark {
  width: 36px; /* was 34px - Task 14.4B brand proportion */
  height: 36px;
  border-radius: 10px;
  /* Sprint 11 / Task 11.2 — flat brand-accent fill, no gradient/glow
     (Design System §10 "Brand area": no gradient logo backdrop, no
     decorative hero treatment; §32: brand identity must not use legacy
     --good). */
  background: var(--color-brand-accent, var(--good));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #06231b;
  flex-shrink: 0;
}
.sidebar-brand-mark svg { width: 19px; height: 19px; }
.sidebar-brand-adi { font-weight: 700; font-size: 0.98rem; color: var(--text-primary); letter-spacing: -0.01em; }

/* Sprint 14 / Task 14.4B — unified to the single approved DS3
   .t-section-title role (12px/600/0.04em) instead of this label and
   .nav-tier-label below each carrying their own ad hoc size/weight/
   tracking for the same kind of label (was 0.68rem/700/0.08em). */
.sidebar-menu-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 0 0.5rem;
  margin-bottom: 0.1rem;
}

.tab-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
/* Sprint 11 / Task 11.2 — App Shell + Desktop Navigation. Typography
   (font-size/weight/color) now comes from the [data-nav-tier] rules
   below (Design System §8.5 nav-primary/nav-secondary roles) instead of
   being hardcoded here, so .tab-btn only carries structural geometry. */
.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: none;
  border-radius: var(--radius-control-ds, var(--radius-control));
  padding: 0.625rem 0.75rem; /* was 0.55rem 0.7rem - Task 14.4B readability */
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
/* Sprint 14 / Task 14.4B — inter-group vertical rhythm (approved Task
   14.4A prototype §2): the two primary-tier group entries get a little
   breathing room from whatever precedes them, so group boundaries read
   from spacing instead of everything sharing one flat 0.2rem gap
   (.tab-nav's own gap, unchanged). Raporlar/Banka Analizi/Net Servet and
   İçe Aktar already get this from their existing .nav-divider + tier
   label - only Hesaplar & Kartlar and Planlama had none. */
.tab-btn[data-tab-group="hesaplar-kartlar"],
.tab-btn[data-tab-group="planlama"] {
  margin-top: 0.75rem;
}
.tab-btn[data-nav-tier="primary"] { font-size: 0.94rem; font-weight: 500; color: var(--color-text-secondary, var(--text-secondary)); }
.tab-btn[data-nav-tier="secondary"] { font-size: 0.86rem; font-weight: 500; color: var(--color-text-secondary, var(--text-secondary)); }
.tab-btn[data-nav-tier="utility"] { font-size: 0.86rem; font-weight: 500; color: var(--color-text-secondary, var(--text-secondary)); }
.tab-btn-icon { width: 17px; height: 17px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tab-btn-icon svg { width: 100%; height: 100%; }
.tab-btn:hover { color: var(--text-primary); background: var(--surface-3); }

/* Active nav state — FINAL LOCKED (Design System §6.2, Task 10.5.1
   revision 2). No filled card/pill/gradient/glow: color + weight + a
   thin 2px left rule only. Uses --color-brand-accent (Design System
   §14) - never a financial/status token, never legacy --good.
   Sprint 11 / Task 11.2.1 — .active (real selected leaf tab, drives
   aria-selected too) and .is-group-active (group-entry visual-only
   parent highlight, no aria-selected - it is not itself a second
   selected tab) are deliberately separate JS-toggled classes that
   share this one visual rule, so the rendered appearance is identical
   for both while their accessibility semantics differ. */
.tab-btn.active,
.tab-btn.is-group-active {
  background: none;
  color: var(--color-brand-accent);
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--color-brand-accent);
}

/* Grouped primary destinations (Hesaplar & Kartlar, Planlama - Design
   System §6.3). The group entry navigates to the group's default child;
   nested children are quieter (smaller, indented, no icon) so the
   hierarchy reads without a second visual "card" per item. */
.nav-group { display: flex; flex-direction: column; gap: 0.1rem; }
.tab-btn--nested {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-text-secondary, var(--text-secondary));
  padding-left: 2.5rem; /* was 2.15rem - Task 14.4B indentation */
}

.nav-divider {
  height: 1px;
  margin: 0.3rem 0.5rem;
  background: var(--color-divider, var(--border));
}
/* Sprint 14 / Task 14.4B — font-size unified to .sidebar-menu-label's
   approved DS3 .t-section-title role above (was 0.72rem, a ~0.5px
   mismatch with sidebar-menu-label's old 0.68rem for the same kind of
   label - weight/tracking already matched the role and are unchanged). */
.nav-tier-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, var(--text-muted));
  padding: 0 0.7rem;
  margin-bottom: 0.1rem;
}
/* Sprint 14 / Task 14.4B — mobile "Daha Fazla" sheet-only group labels
   (Hesaplar & Kartlar / Planlama, see templates/gelir_gider.html): real,
   visible text ONLY inside the open mobile sheet - on desktop (and on
   mobile before the sheet opens) the group's own clickable button
   already serves as this label, so this stays hidden there. Needs its
   own rule despite also carrying `.nav-tier-label` above: that rule's
   `display:block` is unconditional (desktop included) and would
   otherwise leak this sheet-only text onto the desktop sidebar as a
   duplicate of the real "Hesaplar & Kartlar"/"Planlama" button label
   right above it. */
.mobil-sheet-baslik { display: none; }

/* Focus-visible, scoped to nav only (Design System §14/§22/§32): uses
   --color-focus-ring instead of the legacy global --good focus ring
   (still unchanged for every other control in this file). */
.tab-nav .tab-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--good));
  outline-offset: -2px;
  border-radius: var(--radius-control-ds, var(--radius-control));
}

.tab-panel[hidden] { display: none; }

/* --------------------------------------------------------------------
   Sprint 11 / Task 11.3 — Mobile Bottom Navigation + "Daha Fazla".
   Both hidden by default (desktop uses .gg-sidebar); shown only inside
   the shared `@media (max-width: 720px)` block below - no new
   breakpoint invented (§12/§34).
   -------------------------------------------------------------------- */
:root {
  /* Single height token both this rule and .gg-main's mobile bottom
     padding read from (§9) - avoids two independently-guessed magic
     numbers drifting apart. */
  --mobile-bottomnav-height: 60px;
}
.mobile-bottomnav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  min-height: var(--mobile-bottomnav-height);
  align-items: stretch;
  background: var(--color-surface-1, var(--surface-1));
  border-top: 1px solid var(--color-divider, var(--border));
  /* iOS safe-area allowance (§10) - 0px on browsers without notch
     support, harmless there. Requires viewport-fit=cover (base.html). */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bottomnav .tab-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0.4rem 0.2rem;
  min-height: 44px; /* touch target, §19 */
  border-radius: 0;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-secondary, var(--text-secondary));
}
.mobile-bottomnav .tab-btn .tab-btn-icon { width: 20px; height: 20px; }
.mobile-bottomnav .tab-btn:hover { background: none; color: var(--color-text-secondary, var(--text-secondary)); }
/* Active = brand-accent color only - no left-rule box-shadow (that
   signal reads correctly on a vertical rail, not a bottom bar), no
   fill/pill/glow (§7/§21/§23). Empirical reference:
   audit/prototypes/shared/base.css `.mobile-bottomnav a.is-active`. */
.mobile-bottomnav .tab-btn.active {
  color: var(--color-brand-accent);
  font-weight: 600;
  background: none;
  box-shadow: none;
}
.mobile-bottomnav .tab-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--good));
  outline-offset: -2px;
}

/* Sprint 14 / Task 14.4B — "Daha Fazla" sheet backdrop. Hidden by
   default (desktop never opens the sheet, .mobil-daha-fazla-btn is
   display:none there too); real fixed/opacity/pointer-events treatment
   lives in the mobile media query below, toggled by gelir_gider.js. */
.mobil-sheet-backdrop { display: none; }

.mobil-daha-fazla-btn {
  display: none;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-control-ds, var(--radius-control));
  padding: 0.55rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-text-secondary, var(--text-secondary));
  cursor: pointer;
}
.mobil-daha-fazla-btn:hover { color: var(--text-primary); background: var(--surface-3); }
.mobil-daha-fazla-btn[aria-expanded="true"] { color: var(--color-brand-accent); }
.mobil-daha-fazla-btn .tab-btn-icon { transition: transform 0.15s ease; }
.mobil-daha-fazla-btn[aria-expanded="true"] .tab-btn-icon { transform: rotate(180deg); }
.mobil-daha-fazla-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--good));
  outline-offset: -2px;
  border-radius: var(--radius-control-ds, var(--radius-control));
}

.font-boyutu-ayar { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0.1rem; }
.font-boyutu-ayar label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.font-boyutu-kontrol { display: flex; align-items: center; gap: 0.5rem; }
.font-boyutu-kontrol button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.85rem;
}
.font-boyutu-kontrol button:hover { border-color: var(--good); }
#font-boyutu-deger {
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 3.2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.theme-toggle-btn:hover { color: var(--text-primary); border-color: var(--series-1); }
.theme-toggle-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
:root[data-theme="light"] .theme-toggle-btn .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle-btn .icon-sun { display: none; }

@media (max-width: 720px) {
  /* Sprint 11 / Task 11.5.2 — gerçek bulunan hata: `.gg-layout`'un
     masaüstü `align-items: flex-start`'ı (row layout'ta sidebar/main'i
     üste hizalamak için) mobil `flex-direction: column`'da CROSS-AXIS
     (yatay) hizalamaya dönüşüyor - `.gg-main`'i tam genişliğe
     STRETCH etmek yerine kendi en geniş İÇERİĞİNİN max-content
     genişliğine shrink-wrap ediyordu. 390px'te bu genellikle
     görünmüyordu (en geniş içerik viewport'a yakındı) ama 360px'te
     gerçek yatay taşma üretiyordu (gerçek Chromium'da kanıtlı). Tek
     satırlık düzeltme: mobilde `.gg-main` tam genişliğe stretch etsin.
  */
  /* Sprint 14 / Task 14.4B — the shell no longer owns any outer gutter
     at mobile (see .container:has(.gg-layout) override below): the
     sticky compact header must sit flush at the true viewport top, and
     .gg-main provides its own, smaller, mobile-appropriate padding
     directly (§ .gg-main below). */
  .container:has(.gg-layout) { width: 100%; padding: 0; }
  /* margin: 0 - the base rule's 1.25rem top/bottom margin was leaving a
     20px gap above the sticky header (measured: header stuck at y=20,
     not y=0, pushing chrome-before-title to 92px instead of the target
     ~72px - Task 14.4B §7/§21). */
  .gg-layout { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  /* Sprint 11 / Task 11.3 — .gg-main gets bottom clearance equal to the
     fixed .mobile-bottomnav's height + safe-area + a small gap, so the
     last interactive element on any page is never covered (§9/§24).
     Sprint 14 / Task 14.4B — added top/side padding: this is the "one
     intentional spacing interval" between the compact sticky header and
     page content (approved Task 14.4A prototype §6/§7 - target ~72px
     total chrome before the page title: 56px header + this 16px). */
  .gg-main {
    padding: 1rem 1rem calc(var(--mobile-bottomnav-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
  }
  .mobile-bottomnav { display: flex; }

  /* Sprint 14 / Task 14.4B — MUST-FIX root cause (docs/
     SPRINT_14_TASK_04A_APP_SHELL_PROPOSAL.md §4): `.gg-sidebar`'s
     desktop `flex: 0 0 216px` (declared in the base, non-media rule
     above) was never reset here. `.gg-layout` switches to
     `flex-direction: column` at this breakpoint, and in a COLUMN flex
     container `flex-basis` sets HEIGHT, not width - so the mobile
     header/sidebar was silently forced to a rigid, invisible 216px-tall
     box regardless of its real content (measured: contributed ~80px of
     dead space on top of the header's own real content height). Real,
     confirmed root cause, not a guess - see the proposal doc's exact
     before/after measurements. `flex: 0 0 auto` lets it size to its own
     content (now a single 56px-tall compact row) instead. */
  .gg-sidebar {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    gap: 0;
    position: sticky;
    top: 0;
    /* Real bug caught and fixed here: `position: sticky` ALWAYS
       establishes its own stacking context (per spec, regardless of
       z-index - unlike relative/absolute, which only do with an
       explicit z-index). The sheet (z-index 45) and the sidebar-alt
       utility strip (z-index 45) both live deeply nested INSIDE this
       element via the display:contents chain, so their z-index only
       ever competes within THIS element's own internal stacking
       context - from `.gg-sidebar`'s own PARENT's point of view, the
       entire subtree is represented by whatever z-index `.gg-sidebar`
       itself carries. An earlier version of this rule used 41 here
       (lower than the backdrop's 44, a sibling OUTSIDE .gg-sidebar) -
       the backdrop then painted above the ENTIRE .gg-sidebar subtree,
       silently intercepting every click on the real sheet content
       underneath it. Confirmed via `document.elementFromPoint()` on a
       real destination button before this was found - not a guess.
       46 (> the backdrop's 44) fixes it. */
    z-index: 46;
    border-radius: 0;
    /* Vertical rail-divider (desktop) yatay stack'te anlamsız - tek
       satırlık kompakt header artık kendi alt hairline'ıyla ayrılıyor. */
    border-right: none;
    border-bottom: 1px solid var(--color-divider, var(--border));
    padding: 0 1rem;
  }
  .sidebar-brand { border-bottom: none; padding: 0; margin-bottom: 0; }
  .sidebar-menu-label { display: none; }

  /* Sprint 14 / Task 14.4B — the compact one-row mobile header (brand +
     Daha Fazla trigger, §7) needs `#mobil-daha-fazla-btn` to sit as a
     direct flex item next to `.sidebar-brand` inside `.gg-sidebar`'s
     row, but it lives two levels deeper in the real DOM (`.gg-sidebar >
     nav > .tab-nav > button`) - required by the existing ARIA tablist
     structure (Task 11.10 §11), which is unchanged. `display: contents`
     on both wrapper levels makes them generate no box of their own so
     the button (and, for the same reason, `#mobil-ikincil-nav` - see
     below) promote up to be effectively direct children of
     `.gg-sidebar` for layout purposes only; the real DOM/ARIA structure,
     and every existing JS selector (`#mobil-daha-fazla-btn`,
     `.tab-nav`, `getElementById`/`querySelector`), is untouched. Same
     established technique `.nav-secondary-panel` already used "at ALL
     widths" (see its own rule) - not a new pattern. */
  nav[aria-label="Ana gezinme"] { display: contents; }
  .tab-nav { display: contents; }
  .tab-btn[data-nav-tier="primary"] { display: none; }
  .mobil-daha-fazla-btn {
    display: flex;
    flex: 0 0 auto;
    width: 44px; /* real tap target, §12 - was a full-width text+icon row */
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .nav-group { display: contents; }
  .tab-btn--nested,
  .tab-nav [data-nav-tier="secondary"],
  .tab-nav [data-nav-tier="utility"],
  .nav-divider,
  .nav-tier-label,
  .mobil-sheet-baslik {
    display: none;
  }
  .tab-nav.mobil-daha-fazla-acik .tab-btn--nested {
    display: flex;
    padding-left: 0.7rem;
  }
  /* Sprint 14 / Task 14.4B — "Hesaplarım" is the default child the
     "Hesaplar" bottom-nav destination already opens; repeating it inside
     the sheet would be exactly the kind of unnecessary duplicate the
     task calls out (§10) - "Kartlar & Borçlar" (its sibling nested
     item, NOT the group's own default) is the one real secondary
     destination here, kept. Higher specificity than the rule above
     (4 selectors vs 3) so it wins regardless of source order. */
  .tab-nav.mobil-daha-fazla-acik [data-tab="portfoyum"].tab-btn--nested {
    display: none;
  }
  .tab-nav.mobil-daha-fazla-acik [data-nav-tier="secondary"],
  .tab-nav.mobil-daha-fazla-acik [data-nav-tier="utility"] {
    display: flex;
  }
  .tab-nav.mobil-daha-fazla-acik .nav-divider { display: block; }
  .tab-nav.mobil-daha-fazla-acik .nav-tier-label,
  .tab-nav.mobil-daha-fazla-acik .mobil-sheet-baslik {
    display: block;
  }

  /* Sprint 14 / Task 14.4B — "Daha Fazla" bottom sheet (approved Task
     14.4A prototype §9/§10). Reuses the EXISTING wrapper element
     (`#mobil-ikincil-nav` / `.nav-secondary-panel`, its own comment
     above explains it is "display:contents at ALL widths" - overridden
     here ONLY inside this mobile media query, desktop is completely
     unaffected) instead of adding a new container: it already wraps
     exactly the right content (every nested/secondary/utility
     destination, via the existing show/hide rules above) and already
     has a real, working `aria-controls` target. Closed state:
     `visibility:hidden` + translated off-screen, not `display:none`, so
     the slide transition has something to animate; JS
     (static/js/gelir_gider.js) toggles the SAME `.mobil-daha-fazla-acik`
     class this file already used for the old inline reveal - no second,
     parallel show/hide mechanism. */
  .nav-secondary-panel {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-surface-1, var(--surface-1));
    border-radius: 16px 16px 0 0;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.22);
    transform: translateY(100%);
    transition: transform 0.22s ease;
    visibility: hidden;
  }
  .tab-nav.mobil-daha-fazla-acik .nav-secondary-panel {
    transform: translateY(0);
    visibility: visible;
  }
  .nav-secondary-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--baseline);
    margin: 2px auto 12px;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-secondary-panel { transition: none; }
  }
  .mobil-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .mobil-sheet-backdrop.acik { opacity: 1; pointer-events: auto; }
  @media (prefers-reduced-motion: reduce) {
    .mobil-sheet-backdrop { transition: none; }
  }
  .nav-secondary-panel .tab-btn {
    min-height: 44px;
    padding: 12px;
    font-size: 0.92rem;
  }

  /* Sprint 11 / Task 11.5.2 — LOCKED: primary financial content > utility
     chrome. Yazı boyutu/tema/kullanıcı bloğu artık mobilde HER ZAMAN
     görünür değil - "Daha Fazla" ile AYNI disclosure'a bağlı. Task 11.10
     §11 landmark audit - `.tab-nav`'ı saran gerçek bir `<nav
     aria-label="Ana gezinme">` eklendiğinden `.tab-nav` ile
     `.gg-sidebar-alt` ARTIK doğrudan kardeş DEĞİL - `:has()` ile bir
     seviye yukarı taşınan aynı ilişki yeniden kurulur.
     Sprint 14 / Task 14.4B — this used to reveal inline, growing the old
     tall header. The header is now a fixed 56px row with no room for it
     (§7), so it becomes its OWN small fixed strip, docked directly under
     the nav sheet above (same open/close state, same selector) rather
     than a second unrelated floating box - `--mobil-sidebar-alt-height`
     is measured and set by gelir_gider.js so the nav sheet's own bottom
     offset always matches this strip's real height exactly, regardless
     of content wrapping. */
  .gg-sidebar-alt { display: none; }
  nav:has(> .tab-nav.mobil-daha-fazla-acik) ~ .gg-sidebar-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-divider, var(--border));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    width: 100%;
    background: var(--color-surface-1, var(--surface-1));
  }
  /* `.gg-sidebar-alt` isn't a DOM sibling of `.nav-secondary-panel` (it
     lives two levels up, see the big comment above), so it can't be
     targeted with a sibling combinator here - `gelir_gider.js` measures
     `.gg-sidebar-alt`'s real rendered height and writes it to this same
     custom property instead, whenever the sheet opens. */
  .tab-nav.mobil-daha-fazla-acik .nav-secondary-panel {
    bottom: var(--mobil-sidebar-alt-height, 64px);
  }
  nav:has(> .tab-nav.mobil-daha-fazla-acik) ~ .gg-sidebar-alt .font-boyutu-ayar { flex: 0 0 auto; }
  nav:has(> .tab-nav.mobil-daha-fazla-acik) ~ .gg-sidebar-alt .theme-toggle-btn { flex: 0 0 auto; }
  nav:has(> .tab-nav.mobil-daha-fazla-acik) ~ .gg-sidebar-alt .sidebar-kullanici {
    flex: 1 1 auto;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    min-width: 160px;
  }

  /* Sprint 6 / Görev 5 — touch target: küçük ikon-buton sınıfları (24-26px
     sabit boyut) masaüstünde sorun değil ama mobilde dokunma hedefi olarak
     küçük. Görsel ikon boyutu (font-size) AYNI kalır - yalnız tıklanabilir
     kutu büyütülür (min-width/min-height ile, mevcut width/height'ı
     override eder). */
  .duzenle-btn, .iptal-btn, .aktif-et-btn, .modal-kapat,
  .butce-sil-btn, .butce-duzenle-btn,
  .harc-plan-sil-btn, .harc-plan-duzenle-btn {
    min-width: 40px;
    min-height: 40px;
  }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
  margin: 1.1rem 0;
}
.stat-card {
  position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface-1) 100%, white 2%), var(--surface-1));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.stat-card-tiklanabilir { cursor: pointer; }

.stat-kategori-modal { max-width: 580px; }
.stat-kategori-modal-alt { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.stat-kategori-modal-liste {
  --stat-renk: var(--series-2);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.2rem;
}
.stat-kategori-satir-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.stat-kategori-ad { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.stat-kategori-degerler { display: flex; align-items: baseline; gap: 0.65rem; white-space: nowrap; }
.stat-kategori-tutar { font-size: 0.9rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.stat-kategori-yuzde { font-size: 0.82rem; font-weight: 700; color: var(--stat-renk); font-variant-numeric: tabular-nums; min-width: 3.6em; text-align: right; }
.stat-kategori-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stat-renk) 16%, var(--surface-3));
  overflow: hidden;
}
.stat-kategori-dolum {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--stat-renk) 65%, transparent), var(--stat-renk));
}
.stat-popover-bos { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.stat-label { color: var(--text-secondary); font-size: 0.78rem; }
.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px currentColor;
}
.stat-icon svg { width: 17px; height: 17px; }
.stat-icon-good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.stat-icon-critical { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); }
.stat-icon-brand { background: color-mix(in srgb, var(--series-2) 18%, transparent); color: var(--series-2); }
.stat-icon-violet { background: color-mix(in srgb, var(--series-4) 18%, transparent); color: var(--series-4); }
.stat-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-good { color: var(--good); }
/* P&L DIŞI işlemler (transfer, kart ödemesi, düzeltme). JS bu sınıfı
   üretiyordu ama CSS'te TANIMI YOKTU: tarayıcı bilinmeyen sınıfı sessizce
   yok sayıyor, dolayısıyla nötrleştirilmesi gereken tutarlar miras aldıkları
   renkle çiziliyordu. Amaç "ne iyi ne kötü" - ikincil metin rengi. */
.stat-notr { color: var(--text-muted, var(--text-secondary, inherit)); }
.stat-critical { color: var(--critical); }
.stat-delta { display: flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--text-muted); }
.stat-delta-simge { font-size: 0.7rem; line-height: 1; }
.stat-delta-up { color: var(--good); }
.stat-delta-down { color: var(--critical); }

.forms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface-1) 100%, white 1.5%), var(--surface-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 1.15rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-card);
}
.panel h2 { margin-top: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.form-row { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.form-row[hidden] { display: none; }
.form-row label { font-size: 0.85rem; color: var(--text-secondary); }
.form-row select, .form-row input { width: 100%; }
.form-row-checkbox { flex-direction: row; }
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"], .checkbox-label input[type="radio"] { width: auto; accent-color: var(--good); cursor: pointer; }

.btn {
  border: none;
  border-radius: var(--radius-control);
  padding: 0.55rem 1.05rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--on-good);
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-good { background: linear-gradient(135deg, var(--good) 0%, #16b88e 100%); }
.btn-critical { background: linear-gradient(135deg, var(--critical) 0%, #d8394a 100%); color: var(--on-critical); }
.btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.btn-good:hover:not(:disabled) { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--good) 60%, transparent); }
.btn-critical:hover:not(:disabled) { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--critical) 60%, transparent); }
.btn:active:not(:disabled) { transform: translateY(0); filter: brightness(0.96); }
.btn:disabled { cursor: not-allowed; }
.btn-good:disabled, .btn-critical:disabled {
  background: var(--surface-3);
  color: var(--text-muted);
  box-shadow: none;
}
.form-hata { color: var(--critical); font-size: 0.85rem; min-height: 1.2em; margin: 0.5rem 0 0; }

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.charts-grid .panel { margin-bottom: 0; }
.bar-chart-wrap { position: relative; height: 220px; }
.trend-chart-wrap { position: relative; height: 190px; }

/* Figma "GoodFood" ilhamlı gösterge paneli grid'i (Anasayfa) */
.figma-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.figma-grid .panel { margin-bottom: 0; }
.figma-col-4 { grid-column: span 4; }
.figma-col-6 { grid-column: span 6; }
.figma-col-8 { grid-column: span 8; }
.figma-col-12 { grid-column: span 12; }
@media (max-width: 1180px) {
  .figma-col-4, .figma-col-6, .figma-col-8 { grid-column: span 12; }
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.panel-header h2 { margin: 0; }

.btn-view-report {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn-view-report:hover { color: var(--series-1); border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); }

/* "En Çok Harcanan Kategoriler" listesi */
.mof-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.mof-satir { display: flex; align-items: center; gap: 0.65rem; }
.mof-rozet {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.mof-bilgi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.mof-ad { font-weight: 700; font-size: 0.84rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mof-alt { font-size: 0.71rem; color: var(--text-muted); }
.mof-tutar { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.mof-bos { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* "Finansal Sağlık" yüzdelik göstergeler ("Your Rating" karşılığı) */
.saglik-metre-liste { display: flex; flex-direction: column; justify-content: center; gap: 1.15rem; padding: 0.5rem 0 0.3rem; min-height: 100%; }
.saglik-metre-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.saglik-metre-etiket { font-size: 0.82rem; color: var(--text-secondary); }
.saglik-metre-deger { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.saglik-metre-track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.saglik-metre-dolum { height: 100%; border-radius: 999px; transition: width 0.3s ease; }

.donut-layout { display: flex; flex-direction: column; gap: 1rem; }
.donut-chart-wrap { position: relative; height: 180px; display: flex; align-items: center; justify-content: center; }
.donut-merkez {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.donut-merkez-tutar { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.donut-merkez-etiket { font-size: 0.72rem; color: var(--text-muted); }

.chart-legend { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.chart-legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.chart-legend .legend-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend .legend-value { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }
.chart-legend .legend-yuzde { font-variant-numeric: tabular-nums; color: var(--text-muted); min-width: 3ch; text-align: right; }
.chart-legend-inline { flex-direction: row; gap: 1.25rem; margin-bottom: 0.5rem; }
.swatch-good { background: var(--good-fill); display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.swatch-critical { background: var(--critical); display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

.kayitlar-baslik-satir { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.9rem; }
.kayitlar-baslik-satir h2 { margin: 0; }
.kayitlar-arac-cubugu { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.kayit-arama {
  min-width: 220px;
  border-radius: 999px;
  padding-left: 2.1rem;
  background-repeat: no-repeat;
  background-position: 0.8rem center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8fa3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.kayit-tip-filtre { display: flex; gap: 0.2rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem; }
.tip-filtre-btn {
  border: none;
  background: none;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.tip-filtre-btn:hover { color: var(--text-primary); }
.tip-filtre-btn.active { background: var(--good); color: #06231b; font-weight: 600; }

.kayit-coplu-cubuk:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--good) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.kayit-coplu-cubuk .btn { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.kayit-sec-hucre { width: 2rem; }
.kayit-tablosu td:first-child, .kayit-tablosu th:first-child { text-align: center; }
input.kayit-sec, #kayit-tumunu-sec { accent-color: var(--good); cursor: pointer; width: 15px; height: 15px; }

.table-wrap { overflow-x: auto; }
.kayit-tablosu, .tekrarlayan-tablosu, .aylik-ozet-tablosu, .ice-aktar-tablosu { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.kayit-tablosu th, .kayit-tablosu td,
.tekrarlayan-tablosu th, .tekrarlayan-tablosu td,
.aylik-ozet-tablosu th, .aylik-ozet-tablosu td,
.ice-aktar-tablosu th, .ice-aktar-tablosu td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
.kayit-tablosu th, .tekrarlayan-tablosu th, .aylik-ozet-tablosu th, .ice-aktar-tablosu th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kayit-tablosu .numeric, .tekrarlayan-tablosu .numeric, .aylik-ozet-tablosu .numeric, .ice-aktar-tablosu .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.ice-aktar-tablosu tbody tr.satir-hatali { opacity: 0.6; }
.ice-aktar-tablosu td.ice-aktar-aciklama { white-space: normal; max-width: 260px; }
.devreden-notu { display: block; font-size: 0.68rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }

/* ===========================================================================
   Aylık Nakit Akışı (Sprint 11 / Task 11.8) — eski `<table class=
   "cashflow-tablosu">` yerine Task 11.4'ün paylaşılan `.financial-list`/
   `.financial-row` anatomisi: ay solda context, gelir/gider/net sağda
   birincil figürler (§17) - eşit KPI kart grid DEĞİL.
   =========================================================================== */
.cashflow-bakiye-satiri { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.82rem; color: var(--text-secondary); }
.cashflow-akis-satiri { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.6rem; font-size: 0.86rem; }
.cashflow-akis-etiket { color: var(--text-secondary); font-size: 0.78rem; }
.cashflow-net { font-size: 1.05rem; font-weight: 700; margin-top: 0.2rem; }
/* "Bugün" satırı: nötr/bilgilendirici vurgu - başarı/uyarı/hata token'ı
   DEĞİL (§18), yalnız hangi ayın güncel ay olduğunu gösteren bir işaret. */
.cashflow-satir.bugun-satiri { background: color-mix(in srgb, var(--color-information) 8%, transparent); }

.kayit-tablosu thead th { position: sticky; top: 0; background: var(--surface-1); z-index: 1; }
.kayit-tablosu tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.kayit-tablosu tbody tr:hover { background: var(--surface-3); }
.kayit-tablosu tbody tr { transition: background 0.1s ease; }

.kategori-hucre { display: flex; align-items: center; gap: 0.55rem; white-space: normal; }

.kayit-tablosu tr.kayit-grup-baslik { background: var(--surface-3); cursor: pointer; }
.kayit-tablosu tr.kayit-grup-baslik:hover { background: var(--surface-2); }
.kayit-tablosu tr.kayit-grup-baslik td { padding: 0.5rem 0.6rem; white-space: normal; border-bottom: 1px solid var(--border); }
.kayit-tablosu tr.kayit-grup-baslik:focus-visible { outline: 2px solid var(--good); outline-offset: -2px; }
.grup-baslik-icerik { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.grup-baslik-sol { display: flex; align-items: center; gap: 0.55rem; }
.grup-ok { color: var(--text-muted); font-size: 0.7rem; width: 0.8rem; text-align: center; flex-shrink: 0; }
.grup-ad { font-weight: 700; color: var(--text-primary); }
.grup-sayac { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }

.kayit-tablosu tr.kayit-altgrup-baslik { background: color-mix(in srgb, var(--surface-3) 55%, var(--surface-1)); cursor: pointer; }
.kayit-tablosu tr.kayit-altgrup-baslik:hover { background: var(--surface-3); }
.kayit-tablosu tr.kayit-altgrup-baslik td { padding: 0.4rem 0.6rem 0.4rem 1.15rem; white-space: normal; border-bottom: 1px solid var(--border); }
.kayit-tablosu tr.kayit-altgrup-baslik:focus-visible { outline: 2px solid var(--good); outline-offset: -2px; }
.altgrup-baslik-icerik { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.altgrup-baslik-sol { display: flex; align-items: center; gap: 0.55rem; }
.altgrup-ad { font-weight: 600; font-size: 0.78rem; color: var(--text-secondary); }

.kayit-tablosu tr.kayit-satir[hidden], .kayit-tablosu tr.kayit-altgrup-baslik[hidden] { display: none; }
.kayit-tablosu tr.kayit-satir td:nth-child(2) { padding-left: 2.15rem; }
.kayit-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.kayit-avatar-gelir { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); }
.kayit-avatar-gider { background: color-mix(in srgb, var(--critical) 18%, transparent); color: var(--critical); }
.kategori-metin { display: flex; flex-direction: column; line-height: 1.3; }
.kategori-alt { font-size: 0.72rem; color: var(--text-muted); }

.satir-aksiyon { text-align: right; }
.iptal-onay { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.iptal-onay button { border: 1px solid var(--baseline); background: var(--surface-3); color: var(--text-secondary); border-radius: 6px; padding: 0.15rem 0.5rem; cursor: pointer; font-size: 0.72rem; }
.iptal-onay .onay-evet { background: var(--critical); border-color: var(--critical); color: #2a0a0d; }
.iptal-onay button:disabled { opacity: 0.6; cursor: not-allowed; }
.badge { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-gelir { background: color-mix(in srgb, var(--good-fill) 18%, transparent); color: var(--good); }
.badge-gerceklesen { background: color-mix(in srgb, var(--text-muted) 20%, transparent); color: var(--text-secondary); }
.badge-gider { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); }
.badge-hatali { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); }
.badge-mukerrer { background: color-mix(in srgb, var(--series-3) 22%, transparent); color: var(--series-3); }
.badge-uygun { background: color-mix(in srgb, var(--good-fill) 18%, transparent); color: var(--good); }

.ice-aktar-adim { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.ice-aktar-dosya-label { font-size: 0.85rem; color: var(--text-secondary); }
.ice-aktar-hata-metni { font-size: 0.72rem; color: var(--critical); display: block; }
.ice-aktar-ayrac {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.ice-aktar-ayrac::before, .ice-aktar-ayrac::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gridline);
}
.ice-aktar-drive-input { min-width: 320px; flex: 1; }
.ice-aktar-drive-not { font-size: 0.76rem; margin-top: -0.4rem; margin-bottom: 0.9rem; }
.ice-aktar-aksiyonlar { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.ice-aktar-sil-btn {
  background: none;
  border: 1px solid var(--baseline);
  color: var(--text-secondary);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.ice-aktar-sil-btn:hover { color: var(--critical); border-color: var(--critical); }
.durdur-btn {
  background: none;
  border: 1px solid var(--baseline);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.durdur-btn:hover { color: var(--critical); border-color: var(--critical); }
.iptal-btn {
  background: none;
  border: 1px solid var(--baseline);
  color: var(--text-secondary);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.iptal-btn:hover { color: var(--critical); border-color: var(--critical); }

.satir-aksiyonlar { display: inline-flex; gap: 0.35rem; }
.duzenle-btn {
  background: none;
  border: 1px solid var(--baseline);
  color: var(--text-secondary);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.duzenle-btn:hover { color: var(--series-2); border-color: var(--series-2); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 12, 0.68);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface-1) 100%, white 1.5%), var(--surface-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 1.15rem;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.modal-kapat {
  background: none;
  border: 1px solid var(--baseline);
  color: var(--text-secondary);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.modal-kapat:hover { color: var(--critical); border-color: var(--critical); }
.modal-aksiyonlar { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.modal-aksiyonlar .btn { flex: 1; }

.banka-genel-dagilim { margin: 1rem 0 1.25rem; }
.banka-genel-dagilim h3 { margin: 0 0 0.9rem; font-size: 0.95rem; }
#banka-genel-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.7rem;
}
.banka-dagilim-kart {
  --banka-renk: var(--series-1);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.7rem;
  width: 100%;
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface-3) 100%, white 2%), var(--surface-3));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.banka-dagilim-kart:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--banka-renk) 55%, var(--border));
  box-shadow: var(--shadow-kart-hover);
}
.banka-dagilim-rozet {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--border);
}
.banka-dagilim-rozet img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.banka-dagilim-rozet-harf { font-size: 0.85rem; font-weight: 700; color: var(--banka-renk); }
.banka-dagilim-bilgi { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.banka-dagilim-ad {
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banka-dagilim-tutar { font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.banka-dagilim-yuzde {
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--banka-renk) 18%, transparent);
  color: var(--banka-renk);
  white-space: nowrap;
}

.banka-detay-baslik { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.banka-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: contain;
  background: transparent;
  border: 1px solid var(--border);
  padding: 2px;
}
.banka-detay-baslik span { font-size: 1rem; font-weight: 700; color: var(--text-primary); }

.banka-etiket { display: inline-flex; align-items: center; gap: 0.4rem; }
.banka-logo-mini { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }

/* Sprint 11 / Task 11.7 §2 — content-area subtabs (Design System §6.3,
   Task 11.2'de bu göreve ERTELENMİŞTİ). Typography + ince alt-çizgi
   göstergesi - segmented-control pill/ikinci sidebar/card-based tab YOK.
   `.tab-btn` class'ı yalnız `gelir_gider.js`'in mevcut, dokunulmamış
   document-wide `.tab-btn` sorgusuna (click-wiring + tabGoster() aktif-
   durum senkronu) bağlanmak için taşınır - görsel stil TAMAMEN burada,
   rail'in `.tab-btn`/`.tab-btn.active` kurallarından (satır ~291-327)
   BAĞIMSIZ olarak (aynı/yüksek specificity + kaynak-sırası ile) override
   edilir. */
.subtabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: var(--border-hairline);
  margin-bottom: var(--space-4);
}
.subtabs .subtab {
  display: inline-flex;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0.5rem 0 0.7rem;
  margin-bottom: -1px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.subtabs .subtab:hover { color: var(--text-primary); background: none; }
.subtabs .subtab.active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--color-brand-accent);
  background: none;
  box-shadow: none;
}
.subtabs .subtab:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--good));
  outline-offset: 2px;
}

/* Sprint 12 / Task 12.5 — Genel Bakış "En Büyük Harcama Alanları" sıra
   numarası. Salt görsel (DOM sırası zaten AT'ye rank'i taşır, görev §52 -
   `aria-hidden="true"` JS'te eklenir), bu yüzden yalnız muted/tabular
   numeric bir önek - rozet/madalya/renkli daire YOK. */
.rapor-kategori-sira {
  display: inline-block;
  min-width: 1.1rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Sprint 12 / Task 12.6.1 — Gelir & Gider grafik density fix. Chart.js
   `responsive:true`/`maintainAspectRatio:false` (mevcut §29 Chart
   sözleşmesi) KENDİ dokümantasyonunda açıkça gerektirdiği gibi, canvas'ın
   içinde yaşadığı kapsayıcı KESİN bir yüksekliğe sahip OLMALI - aksi
   halde canvas'ın kendi `height` attribute'u (Chart.js tarafından runtime'da
   yeniden yazılır) sayfanın geri kalan content-driven yüksekliğine göre
   sınırsız büyüyor (gerçek DOM/computed-style diagnostic'le ölçülüp
   kanıtlandı: ~571px, veriden bağımsız, viewport'a bağımlı). Mevcut
   `.donut-chart-wrap { height: 180px }` (yukarıda, Dashboard) ile AYNI
   kanonik desen - yeni bir sistem icat edilmedi, yalnız bu iki grafiğe
   scoped (ID-bazlı) uygulandı. Genel Bakış'ın KENDİ `#rapor-trend-grafik-wrap`
   id'sine (Task 12.5) o zaman kasıtlı DOKUNULMADI (ayrı id, ayrı scope,
   ayrı task) - Task 12.6'nın kendi doc'u bu grafiğin AYNI 571px unbounded
   davranışı taşıdığını zaten kanıtlayıp diskloz etmişti (bkz. aşağıdaki
   Task 12.10 notu), bilinen, taşınan bir borç olarak.

   Karşılaştırma: yalnız 2 kategori (Gelir/Gider) karşılaştırıyor, veri
   miktarından bağımsız SABİT, kompakt bir yükseklik yeterli (görev §3/§7 -
   zero/one-sided data'da da BÜYÜMEZ, çünkü CSS'ten geliyor, data'dan değil).
   Trend: birden fazla ay gösterdiği için karşılaştırmadan daha fazla dikey
   çözünürlük hak ediyor (görev §4) - ama YİNE DE sınırlı, sayfayı domine
   etmiyor. */
#rapor-gg-karsilastirma-grafik-wrap { position: relative; height: 300px; }
#rapor-gg-trend-grafik-wrap { position: relative; height: 380px; }

/* Sprint 12 / Task 12.10 — Genel Bakış'ın "Aylık Gelir & Gider" grafiği
   (`#rapor-trend-grafik-wrap`, Task 12.5) AYNI 571px unbounded-height
   defektini taşıyordu (Task 12.6'nın kendi doc'unda zaten kanıtlanıp
   disclosed edilmişti - bkz. yukarıdaki not; gerçek Chromium'da yeniden
   ölçüldü: 1440×900 masaüstü hem "Bu Ay" hem "YTD" için 571px, 390×844
   mobilde de 571px - fold'un neredeyse tamamını yutuyordu). Bu, Task
   12.6'nın "Trend" grafiğiyle (`#rapor-gg-trend-grafik-wrap`) TAM OLARAK
   AYNI şekil sınıfı - birden fazla ay gösteren bir Gelir/Gider grouped-bar
   chart'ı - bu yüzden AYNI, zaten doğrulanmış yükseklik değerleri
   (380px masaüstü / 260px mobil) buraya da uygulandı; yeni bir sayı
   İCAT EDİLMEDİ. Yalnız bu ID'ye scoped - Task 12.6.1'in kendi ilkesiyle
   AYNI ("Do NOT globally alter all Chart.js canvases"). Veri/API/ay/
   sıfır-ay davranışı DEĞİŞMEDİ - yalnız CSS. */
#rapor-trend-grafik-wrap { position: relative; height: 380px; }

/* Sprint 12 / Task 12.7 — Kategoriler'in "restrained proportional line"
   pay göstergesi (görev §14/§15: giant progress card/pie/donut/rainbow
   palette YASAK; TEK, ince, expense ailesinden bir çizgi). Genişlik
   yalnız `share_bps`'ten türer (JS'te DOM-safety için 0-100 clamp
   edilir - GÖSTERİLEN % metni ASLA clamp edilmez, görev §15). Tüm
   kategoriler AYNI rengi taşır (görev §16 - kategori başına rastgele
   renk YOK, hepsi "aynı finansal aile"). `aria-hidden` (görev §46 -
   pay zaten `.financial-row__meta` metninde var, ikinci kez
   duyurulmaz). */
.rapor-kat-pay-cubuk {
  height: 3px;
  margin: -0.3rem 0 0.65rem;
  background: var(--divider);
  border-radius: 2px;
  overflow: hidden;
}
.rapor-kat-pay-dolgu {
  height: 100%;
  background: var(--color-expense);
  opacity: 0.6;
}

/* Sprint 12 / Task 12.9 — Export aksiyonları. Görev §28 - restrained, TEK
   yerde (paylaşılan filtre çubuğunun altında, her subtab'a tekrarlanmaz);
   `.btn-disa-aktar` (mevcut export dili - İşlemler'in Excel/PDF
   düğmeleriyle AYNI sınıf) reuse edilir, yeni bir buton dili İCAT
   EDİLMEZ. Mobilde `flex-wrap` ile doğal olarak alt satıra düşer -
   finansal içeriği aşağı İTMEZ (görev §28 "mobile must not push financial
   content far down" - tek satırlık kompakt bir çubuk). */
.rapor-export-eylemleri {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.rapor-export-hata {
  color: var(--critical);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  #rapor-gg-karsilastirma-grafik-wrap { height: 220px; }
  #rapor-gg-trend-grafik-wrap { height: 260px; }
  /* Task 12.10 — Genel Bakış'ın trend grafiği, Task 12.6.1'in Trend
     grafiğiyle AYNI mobil yükseklik. */
  #rapor-trend-grafik-wrap { height: 260px; }
}

/* Sprint 12 / Task 12.4 — dar viewport'ta 4+ subtab (Raporlar: Genel Bakış/
   Gelir & Gider/Kategoriler/Dönem Karşılaştırma) tek satıra sığmayabilir;
   mevcut Hesaplar & Kartlar (2)/Planlama (3) bu sınırı hiç zorlamıyordu.
   Metni okunmaz hâle küçültmek YERİNE (görev §34) semantik yatay scroll -
   içerik sığdığında (2-3 subtab) davranış/görünüm DEĞİŞMEZ, yalnız 4.
   subtab viewport dışına taştığında devreye girer. `.subtab`lar kendi
   içinde metni SARMALAMAZ (`white-space: nowrap`) - "Dönem Karşılaştırma"
   iki satıra bölünüp subtab çubuğunun yüksekliğini bozmasın diye.
   Scrollbar'ı gizlemek KASITLI: bu native, dokunmatik touch-scroll her
   zaman kullanılabilir kalır, yalnız görsel gürültü kaldırılır. */
@media (max-width: 720px) {
  .subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs .subtab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Sprint 11 / Task 11.7 §5/§20.2 — "Varlıklarınız": Task 11.4'ün
   `.financial-summary`'sinin İLK gerçek sayfa tüketimi (bkz. şablon
   yorumu). Tipografi-öncelikli, kart/KPI-grid YOK. */
.hesap-ozet { margin-bottom: var(--space-6); }
.hesap-ozet .financial-summary { margin-top: var(--space-2); }

#hesap-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: 0.9rem;
}
/* Sprint 11 / Task 11.7 — Hesaplarım gruplaması (Varlıklar / Kredi
   Kartları / Pasif Hesaplar), artık Task 11.4'ün paylaşılan
   `.financial-list`/`.financial-row` anatomisi üzerine kurulu (eski
   kart-per-account `.hesap-kart` mozaiği KALDIRILDI - görev §9/§10). */
.hesap-grup { margin-bottom: var(--space-6); }
.hesap-grup:last-child { margin-bottom: 0; }
/* Task 11.7.2 §1/§2/§3 — "Hesap Ekle"/"Kart Ekle" formları artık mevcut
   finansal içerikten SONRA, varsayılan kapalı bir disclosure'da (content
   priority: mevcut durum > yeni kayıt formu). Liste ile disclosure
   arasına dikey ritim. */
.hesap-ekle-accordion, .kart-ekle-accordion, .butce-ekle-accordion, .harc-ekle-accordion { margin-top: var(--space-6); }
.hesap-grup-baslik-satir { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.hesap-grup-baslik { margin: 0; }
.hesap-ozet-not { margin: var(--space-2) 0 0; }
/* Pasif hesap: bakiyeden ve listeden DÜŞÜRÜLMEZ (ADR-005 Karar 8) ama
   aktif hesaptan ayırt edilebilmelidir - renk TEK BAŞINA taşıyıcı değil,
   ayrıca gerçek bir "Pasif" rozeti de var (bkz. `hesapSatirHtml`, §7
   Inactive ≠ Error - kırmızı YOK, yalnız opacity + strikethrough). */
.hesap-satir-pasif { opacity: 0.62; }
.hesap-satir-pasif .financial-row__identity { text-decoration: line-through; }
/* Aksiyon düğmeleri artık `.financial-row__end` içinde, tutarın ALTINDA
   küçük bir "state" satırı - eski grid-column/border-top kart-içi
   ayracı YOK (o bağlam artık geçersiz, bkz. şablon/JS yorumu). */
.hesap-kart-aksiyonlar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.hesap-kart-aksiyonlar button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  transition: color 0.12s ease, background 0.12s ease;
}
.hesap-kart-aksiyonlar button:hover { color: var(--text-primary); background: var(--surface-3); }

.panel-inset {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.panel-inset h3 { margin: 0 0 0.9rem; font-size: 0.95rem; }

.accordion {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
  transition: background 0.15s ease;
}
.accordion-header::-webkit-details-marker { display: none; }
.accordion-header::marker { content: ""; }
.accordion-header:hover { background: var(--surface-3); }
.accordion-header:focus-visible { outline: 2px solid var(--good); outline-offset: -2px; }
.accordion-title { display: flex; align-items: center; gap: 0.6rem; }
.accordion-icon { font-size: 1.05rem; line-height: 1; }
.accordion-count {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.accordion-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 0.2rem;
}
.accordion:not([open]) .accordion-chevron { transform: rotate(-45deg); }
.accordion-body {
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
  animation: accordion-belir 0.15s ease;
}
@keyframes accordion-belir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.giris-sayfasi { min-height: 90vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.giris-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--surface-1) 85%, black));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2.25rem;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--shadow-sidebar);
}
:root[data-theme="light"] .giris-kart { background: var(--surface-1); }
.giris-kart .sidebar-brand-mark { width: 44px; height: 44px; margin-bottom: 0.3rem; }
.giris-kart .sidebar-brand-mark svg { width: 22px; height: 22px; }
.giris-kart h1 { margin: 0; font-size: 1.3rem; }
.giris-kart .page-subtitle { margin: 0 0 0.5rem; }
.giris-hata {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--critical);
  background: color-mix(in srgb, var(--critical) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent);
}
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.btn-google:hover { border-color: var(--good); transform: translateY(-1px); }
.btn-google:where(button) { cursor: pointer; }

.misafir-form { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; margin-top: 0.5rem; }
.misafir-form input[type="password"] { width: 100%; text-align: center; }
.misafir-form .btn-google { margin-top: 0; }

.giris-misafir-link {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.giris-misafir-link:hover { color: var(--text-secondary); }

.sidebar-kullanici {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.sidebar-kullanici-resim { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.sidebar-kullanici-isim {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-cikis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  color: var(--text-muted);
  transition: color 0.12s ease, background 0.12s ease;
}
.sidebar-cikis svg { width: 15px; height: 15px; }
.sidebar-cikis:hover { color: var(--critical); background: color-mix(in srgb, var(--critical) 14%, transparent); }


/* ===========================================================================
   Bütçe (Sprint 3)
   ---------------------------------------------------------------------------
   Bilgi hiyerarşisi: aylık özet üç EŞİT kart değildir. "Kalan" birincil
   figürdür (kullanıcının sorduğu asıl soru budur), bütçe ve gerçekleşen ise
   onu açıklayan ikincil satırlardır. Aynı büyüklükte tekrar eden kartlar
   ekranı okunur kılmıyor, yalnız dolduruyordu.
   Gradient/glassmorphism eklenmez; mevcut yüzey ve kenarlık token'ları
   kullanılır.
   =========================================================================== */

.gorsel-gizli {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Sprint 11 / Task 11.8 §8 — eski `.butce-baslik` (tekrarlanan H2 başlık +
   dönem seçicileri) kaldırıldı; `.kart-arac-cubugu`'yla AYNI, yalnız
   kontrolleri taşıyan basit araç çubuğu kaldı (bkz. .kart-arac-cubugu). */
.butce-arac-cubugu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.butce-arac-cubugu label { color: var(--text-secondary); font-size: 0.85rem; }

/* --- aylık özet --- */
.butce-ozet {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.butce-ozet-birincil { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; }
.butce-ozet-kalan { font-size: var(--figure-size-primary); }
.butce-ozet-not { font-size: 0.8rem; }
.butce-ozet-ikincil {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding-left: 1.5rem;
  border-left: 1px solid var(--gridline);
}
.butce-ozet-ikincil > div { display: flex; flex-direction: column; gap: 0.15rem; }
.butce-ozet-deger { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Aşım ve tam kullanım renkle DEĞİL yalnız renkle ayrılmaz: satırda ayrıca
   "aşıldı" metni yazılır (renk körlüğü).
   Sprint 11 / Task 11.8 §10 — bütçe aşımı bir finansal PLANLAMA durumudur,
   sistem hatası değildir: `--critical` (error token) yerine `--warning`
   (Kartlar'ın `.kart-limit-yaklasti`'siyle aynı aile, gerçek DS uyarı
   token'ı). "İçinde" durumu gerçek bir olumlu SONUÇtur (kullanıcının
   kendi hedefini tutturması) - `--good` burada sistem-başarısı DEĞİL,
   meşru bir olumlu-durum rengi olarak kalır. */
.butce-asildi { color: var(--warning); }
.butce-icinde { color: var(--good); }

/* --- kullanım çubuğu --- */
.butce-kullanim { display: flex; align-items: center; gap: 0.5rem; min-width: 8.5rem; }
.butce-bar {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--gridline);
  overflow: hidden;
}
.butce-bar-dolgu {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--good);
  transition: width 0.2s ease;
}
.butce-bar-dolgu.yaklasti { background: var(--series-3); }
.butce-bar-dolgu.asildi { background: var(--warning); }
.butce-kullanim-oran { font-size: 0.76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }

.butce-liste .butce-kategori-ad { font-weight: 600; }
/* Task 11.8 §10 — aşım metni de warning ailesine taşındı (bkz. .butce-asildi). */
.butce-liste .butce-satir-etiket { display: block; font-size: 0.7rem; color: var(--warning); font-weight: 600; }

/* Sprint 11 / Task 11.8 §11 — sağda "Harcanan / Bütçe" birincil figür,
   altında Kalan/aşım metadata'sı (Kartlar'ın borç tutarı boyutlandırmasıyla
   AYNI ölçek). */
.butce-satir-tutar { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.butce-satir-kalan { font-size: 0.85rem; font-weight: 600; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }

/* Kartlar'ın `.kart-satir-aksiyonlar`'ıyla AYNI desen. */
.butce-satir-aksiyonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--gridline);
}
.butce-sil-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.95rem; line-height: 1;
  padding: 0.2rem 0.35rem; border-radius: 6px;
}
.butce-sil-btn:hover { color: var(--critical); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.butce-duzenle-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.95rem; line-height: 1;
  padding: 0.2rem 0.35rem; border-radius: 6px;
}
.butce-duzenle-btn:hover { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }

/* --- durum: boş / yükleniyor / hata --- */
.butce-durum { margin: 0.5rem 0; font-size: 0.85rem; }
.butce-bos { padding: 1.25rem 0; }
.butce-bos-baslik { margin: 0 0 0.25rem; font-weight: 700; }
.butce-bos .btn { margin-top: 0.75rem; }
.butce-form-ipucu { font-size: 0.76rem; margin-top: 0.5rem; }
.butce-vazgec { margin-top: 0.5rem; }

/* --- dashboard bütçe paneli --- */
.dash-butce-birincil { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.85rem; }
.dash-butce-satirlar { display: flex; gap: 2rem; margin: 0; flex-wrap: wrap; }
.dash-butce-satirlar > div { display: flex; flex-direction: column; gap: 0.15rem; }
.dash-butce-satirlar dt { margin: 0; }
.dash-butce-satirlar dd { margin: 0; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   Module visual foundation (Sprint 6 / Görev 4)
   ---------------------------------------------------------------------------
   Bütçe/Harcanabilir Tutar/Kartlar & Borçlar/Hesaplarım aynı ürün ailesine
   ait görünsün diye ortak sınıflar. Mevcut module-specific sınıflar
   (`.butce-*`/`.harc-*`/`.kart-*`) SİLİNMEDİ - bu ortak sınıflar onlara EK
   olarak kullanılır (değerler birebir aynı, sıfır görsel fark; bkz.
   docs/SPRINT_06_TASK_00_UI_UX_AUDIT.md §7 component envanteri).
   =========================================================================== */
.module-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.module-baslik-ad { margin: 0 0 0.15rem; font-size: var(--font-size-module-title); font-weight: 800; letter-spacing: -0.02em; }
.module-baslik-alt { margin: 0; font-size: 0.84rem; }

.module-ozet { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.module-ozet-birincil { display: flex; flex-direction: column; gap: 0.25rem; min-width: 14rem; }
.module-ozet-figur { font-size: var(--figure-size-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.module-ozet-ikincil { display: flex; gap: var(--space-6); flex-wrap: wrap; padding-left: var(--space-4); border-left: 1px solid var(--gridline); }
.module-ozet-ikincil > div { display: flex; flex-direction: column; gap: 0.15rem; }
.module-ozet-deger { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Mevcut `.kart-rozet`/`.harc-rozet` ile birebir aynı görsel tarif - ortak ad. */
.status-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--gridline); color: var(--text-secondary); }
.status-badge-inactive { color: var(--text-muted); }

.module-durum { margin: 0.5rem 0; font-size: 0.85rem; }
.module-hata-kutu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.module-hata-kutu p { margin: 0; color: var(--critical); font-size: 0.88rem; }
.module-bos { padding: 1.25rem 0; }
.module-bos-baslik { margin: 0 0 0.25rem; font-weight: 700; }

.module-detail-link-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--gridline); }

/* Liste bölümü başlığı (Kategori Bütçeleri / Kartlarım / Planlanan Gelir-
   Gider / Hesaplarım) - değerler `.panel h2` ile BİREBİR aynı, yalnız ortak
   bir isimle işaretlenmiş semantik marker. */
.module-list-baslik { margin-top: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

@media (max-width: 720px) {
  .module-baslik { align-items: flex-start; }
  .module-ozet { gap: var(--space-4); }
  .module-ozet-ikincil { padding-left: 0; border-left: none; padding-top: var(--space-3); border-top: 1px solid var(--gridline); width: 100%; }
}

/* ===========================================================================
   Dashboard 2.0 (Sprint 11 / Task 11.5 — migrated to Design System 2.0
   "refined B2", audit/prototypes/screenshots/dashboard_b2_refined_desktop.png)
   ---------------------------------------------------------------------------
   Hiyerarşi: Harcanabilir Tutar (Financial Hero) -> Bu Ay (3 typography-led
   destekleyici gösterge) -> Yaklaşanlar -> Son İşlemler -> Detaylı Analizler
   (değişmedi). Eşit ağırlıklı kart mozaiği YOK - hiyerarşi typography +
   whitespace + tek hairline divider (Task 11.4 .financial-row/.section-head)
   ile kurulur. Gradient/glass/neon YOK.
   =========================================================================== */

.dashboard-section { margin-bottom: var(--space-8); }
.dashboard-section:last-child { margin-bottom: 0; }
.dashboard-section-baslik {
  margin: 0 0 var(--space-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Section başlığı + tekil deep-link (Task 11.4 .inline-action) satırı -
   Yaklaşanlar/Son İşlemler/Hero'da paylaşılır. Kart mozaiği değil, tek
   hairline divider ile ayrılır. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-head .t-section-title { margin: 0; }
.section-head .dashboard-section-baslik { margin: 0; }
.dashboard-section > .inline-action:last-child { display: flex; margin-top: var(--space-2); }

/* --- Harcanabilir Tutar: tek Financial Hero, kutu/panel gölgesi YOK --- */
.dashboard-hero-deger { display: block; margin: var(--space-2) 0 var(--space-1); }
@media (max-width: 720px) {
  .dashboard-hero-deger { font-size: 2.1rem; }
}
.dashboard-narrative {
  margin: 0 0 var(--space-4);
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 42rem;
}
.dashboard-hero-alt { display: flex; gap: var(--space-6); margin: 0; flex-wrap: wrap; }
.dashboard-hero-alt > div { display: flex; flex-direction: column; gap: 0.15rem; }
.dashboard-hero-alt dt { margin: 0; }
.dashboard-hero-alt dd { margin: 0; }

/* --- Bu Ay: divider-first line-items (Task 14.5B, see the HTML comment
   above `.dashboard-hybrid-buay`) - eşit-ağırlık kart grid HÂLÂ YOK,
   yalnız `.financial-row` anatomisiyle AYNI label-solda/tutar-sağda
   satır deseni. --- */
.dashboard-buay-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.dashboard-buay-row:last-child { border-bottom: none; }
.dashboard-buay-row-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dashboard-buay-row-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.dashboard-buay-row-amount .inline-action { display: flex; }
.dashboard-buay-bar {
  display: block;
  width: 100%;
  max-width: 12rem;
  margin-top: var(--space-2);
}
.dashboard-buay-kirinim { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
.dashboard-buay-kirinim-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.3rem;
  align-items: baseline;
}
.dashboard-buay-kirinim-btn:hover,
.dashboard-buay-kirinim-btn:focus-visible { color: var(--text-secondary); text-decoration: underline; }
.dashboard-buay-kirinim-btn span { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ===========================================================================
   Dashboard 3.0 (Sprint 14 / Task 14.5B — HYBRID, locked Task 14.5A.1
   design: docs/SPRINT_14_TASK_05A_DASHBOARD_PROPOSAL.md §Hybrid).
   Desktop two-column 1.15fr/0.85fr grid; mobile collapses to one column
   (source order already correct, see the HTML comment above the grid).
   =========================================================================== */
.dashboard-hybrid-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8) var(--space-section-gap, 32px);
  align-items: start;
}
.dashboard-hybrid-primary,
.dashboard-hybrid-context { min-width: 0; }
.dashboard-hybrid-context { display: flex; flex-direction: column; }
/* Bu Ay şimdi Hero'nun ALTINDA, kendi üst hairline'ı + padding'iyle
   ayrılıyor (bkz. `.dashboard-hybrid-buay` altında) - Hero'nun kendi
   `.dashboard-section` margin-bottom'u burada ÇİFT boşluk yaratmasın
   diye sıfırlanır. */
.dashboard-hero { margin-bottom: 0; }
.dashboard-hybrid-buay {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
/* Yaklaşanlar artık bir accent-top panel içinde (Option A'nın "obligation
   panel"i, Task 14.5A/14.5A.1'de onaylandı) - Son İşlemler'in düz
   `.financial-list` sunumu KASITLI olarak farklı kalır (aksi halde iki
   panel yan yana "eşit ağırlıklı kart" izlenimi verirdi, Task 11.5 §7'nin
   tam kaçınmak istediği şey). */
.dashboard-yaklasanlar-panel-inner {
  background: var(--color-surface-1);
  border-radius: var(--radius-panel-ds);
  border-top: 3px solid var(--color-brand-accent);
  padding: var(--space-6);
}
@media (max-width: 720px) {
  .dashboard-hybrid-grid { grid-template-columns: 1fr; }
}

/* --- Detaylı Analizler: ikincil görsel ağırlık; Task 11.5.1 - default
   yalnız 2 grafik (Trend/Kategori), kalan 3'ü düşük ağırlıklı native
   <details>/<summary> disclosure'a taşındı (kart/modal/drawer DEĞİL). --- */
.dashboard-detay .panel-header h2 { font-size: 0.92rem; }
.dashboard-detay-disclosure { margin-top: var(--space-4); }
.dashboard-detay-disclosure-baslik {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-brand-accent, var(--good));
  padding: 0.3rem 0.2rem;
  user-select: none;
}
.dashboard-detay-disclosure-baslik:hover { text-decoration: underline; }
.dashboard-detay-disclosure-baslik:focus-visible {
  outline: 2px solid var(--good);
  outline-offset: 2px;
  border-radius: 4px;
}
.dashboard-detay-disclosure[open] .dashboard-detay-disclosure-baslik { margin-bottom: var(--space-3); }

/* --- mobil --- */
@media (max-width: 720px) {
  .butce-baslik { align-items: flex-start; }
  .butce-donem { width: 100%; }
  .butce-donem .ay-filtre { flex: 1 1 8rem; }
  .butce-ozet { gap: 1rem; }
  .butce-ozet-ikincil {
    padding-left: 0;
    border-left: none;
    padding-top: 0.85rem;
    border-top: 1px solid var(--gridline);
    width: 100%;
    gap: 1.5rem;
  }
  .butce-ozet-kalan { font-size: var(--figure-size-primary-mobile); }
  .butce-tablosu { font-size: 0.78rem; }
  .butce-kullanim { min-width: 6rem; }
}


/* ===========================================================================
   Harcanabilir Tutar / Safe-to-Spend (Sprint 4)
   ---------------------------------------------------------------------------
   Bütçe bölümüyle aynı ilke: bilgi hiyerarşisi, eşit büyüklükte tekrar eden
   kartlar değil. Ana figür (Harcanabilir Tutar) büyük, kırılım ve gerçekleşen
   P&L AYRI panellerde - ikisi tek bir toplammış gibi sunulmaz.
   =========================================================================== */

/* Sprint 11 / Task 11.8 §8 — eski `.harc-baslik` (tekrarlanan H2 başlığı)
   kaldırıldı; `.butce-arac-cubugu` bu ekranda da reuse edilir (yalnız para
   birimi seçici + dönem etiketi kaldı). */

.harc-durum { margin: 0.5rem 0; }
.harc-hata-kutu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.harc-hata-kutu p { margin: 0; color: var(--critical); font-size: 0.88rem; }

/* --- ana özet: Harcanabilir Tutar birincil figür --- */
.harc-ozet {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.harc-ozet-birincil { display: flex; flex-direction: column; gap: 0.25rem; min-width: 14rem; }
.harc-ana-tutar { font-size: var(--figure-size-primary); }
/* Sprint 11 / Task 11.8 §4 — Harcanabilir Tutar (Safe-to-Spend) tek bir
   likidite figürüdür; işaretine göre error/success token'a boyanmaz.
   Negatif STS gerçek bir finansal durumdur, sistem hatası DEĞİLDİR (§27-C).
   Her iki sınıf da AYNI DS finansal-nötr token'ına gider (Task 11.7.1'in
   `.kart-alacak-satiri` düzeltmesiyle aynı kaynak/gerekçe). Sınıflar JS'te
   (`harcCiz`) hâlâ ayrı toggle edilir - ekran okuyucu/test için işaret
   bilgisi DOM'da kalır, yalnız RENK ayrımı kaldırıldı. */
.harc-ana-tutar.harc-negatif { color: var(--color-financial-neutral); }
.harc-ana-tutar.harc-pozitif { color: var(--color-financial-neutral); }
.harc-uyari {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  max-width: 28rem;
}
.harc-ozet-ikincil {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding-left: 1.5rem;
  border-left: 1px solid var(--gridline);
}
.harc-ozet-ikincil > div { display: flex; flex-direction: column; gap: 0.15rem; }
.harc-ozet-deger { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- kırılım: dl/dt/dd, tablo değil - açıklayıcı liste --- */
.harc-kirilim { display: flex; flex-direction: column; gap: 0.65rem; margin: 0; }
.harc-kirilim > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.harc-kirilim dt { color: var(--text-secondary); font-size: 0.86rem; margin: 0; }
.harc-kirilim dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Task 11.8 §5/§33 — `.panel` kart sınırı kaldırıldıktan sonra "Bu Ay
   Gerçekleşen" bölümü hâlâ görsel olarak AYRI kalmalı (Negatif Kontrol A):
   dikey divider (masaüstü) / yatay divider (dar ekran, §23). */
.harc-gerceklesen-blok { padding-left: 1.5rem; border-left: 1px solid var(--gridline); }
@media (max-width: 1180px) {
  .harc-gerceklesen-blok { padding-left: 0; border-left: none; padding-top: 1rem; border-top: 1px solid var(--gridline); }
}

/* Task 11.8 — kırılım grid'i sonrası nefes payı: alt bölüm başlığı hemen
   bitişik oturmasın. */
.harc-plan-baslik { margin-top: var(--space-6); }
.harc-plan-bos { padding: 1.25rem 0; }
.harc-plan-tablosu .harc-satir-baslik { font-weight: 600; }
.harc-plan-tablosu .harc-rozet {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--gridline);
  color: var(--text-secondary);
  margin-left: 0.4rem;
}
.harc-plan-sil-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.95rem; line-height: 1;
  padding: 0.2rem 0.35rem; border-radius: 6px;
}
.harc-plan-sil-btn:hover { color: var(--critical); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.harc-plan-duzenle-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.95rem; line-height: 1;
  padding: 0.2rem 0.35rem; border-radius: 6px;
}
.harc-plan-duzenle-btn:hover { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }

.harc-form-ipucu { font-size: 0.76rem; margin: 0.3rem 0 0; }
.harc-form-basari { font-size: 0.85rem; color: var(--good); margin: 0.5rem 0 0; }
.harc-vazgec { margin-top: 0.5rem; }

@media (max-width: 720px) {
  .harc-baslik { align-items: flex-start; }
  .harc-ozet { gap: 1rem; }
  .harc-ozet-ikincil {
    padding-left: 0;
    border-left: none;
    padding-top: 0.85rem;
    border-top: 1px solid var(--gridline);
    width: 100%;
    gap: 1.5rem;
  }
  .harc-ana-tutar { font-size: var(--figure-size-primary-mobile); }
  .harc-plan-tablosu { font-size: 0.78rem; }
}

/* ===========================================================================
   Kartlar & Borçlar (Sprint 5)
   ---------------------------------------------------------------------------
   Aynı ilke: sakin, ciddi bir borç ekranı. Neon/gradient/gamification YOK.
   Kartlar TABLO değil, dikey blok listesidir - mobilde doğal stack eder.
   Güncel borç ve ekstre HER ZAMAN ayrı alanlarda; biri diğerini gizlemez.
   =========================================================================== */

.kart-arac-cubugu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.kart-arac-cubugu label { color: var(--text-secondary); font-size: 0.85rem; }

.kart-durum { margin: 0.5rem 0; }
.kart-hata-kutu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kart-hata-kutu p { margin: 0; color: var(--critical); font-size: 0.88rem; }

/* Sprint 11 / Task 11.7 §17/§19 — eski 3-figürlü `.panel` KPI-kart özet
   kaldırıldı: tipografi-öncelikli, tek güçlü birincil figür + sakin
   ikincil metadata (gross ≠ net, biri diğerini netlemez - üçü de backend
   `summary`'den AYNEN gelir, bkz. şablon yorumu). */
.kart-ozet { margin-bottom: var(--space-6); }
.kart-ana-tutar { display: block; margin-top: 2px; }
.kart-ozet-ikincil {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}
.kart-ozet-ikincil > div { display: flex; flex-direction: column; gap: 0.15rem; }
.kart-ozet-deger { text-align: left; }

/* --- kart listesi: dikey blok, TABLO DEĞİL - Task 11.4'ün paylaşılan
   `.financial-list`/`.financial-row` anatomisinin tüketicisi (görev
   §9/§19). Eski, kendi kendine bordered `.kart-satir` kutusu KALDIRILDI -
   divider `.financial-row`'un kendi hairline'ından gelir. */
.kart-liste-bos { padding: 1.25rem 0; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.kart-liste .financial-row__main { gap: 4px; }

.kart-rozet {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--gridline);
  color: var(--text-secondary);
  margin-left: 0.5rem;
}
/* `.kart-satir-borc-tutar`: yalnız §19 "strong primary figure" için
   boyut/ağırlık artışı - anlam/renk `.n-debt` DS token'ından gelir. */
.kart-satir-borc-tutar { font-size: 1.15rem; font-weight: 700; }

/* Task 11.7.1 audit — legacy `--text-secondary` (typography rengi) yerine
   Design System §22'nin gerçek finansal-nötr semantic token'ı
   (`--color-financial-neutral`, `.n-neutral`/`.n-debt`'in kaynağı) - kart
   alacak bakiyesi income/success DEĞİL (§16), ama tipografi-secondary de
   yanlış katmandı: bu bir financial STATE, bir metin hiyerarşisi değil. */
.kart-alacak-satiri { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-financial-neutral); }

.kart-limit-blok { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--gridline); }
.kart-limit-satirlari { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 0.5rem; }
.kart-limit-satirlari > div { display: flex; align-items: baseline; gap: 0.4rem; }
.kart-limit-satirlari dt { color: var(--text-secondary); font-size: 0.82rem; margin: 0; }
.kart-limit-satirlari dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kart-limit-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--gridline);
  overflow: hidden;
}
.kart-limit-bar-dolgu {
  display: block;
  height: 100%;
  background: var(--good);
  border-radius: 999px;
}
/* Bar GENİŞLİĞİ %100'de fiziksel olarak sabitlenir (bir kap taşamaz) ama
   yanındaki METİN gerçek oranı (>%100 dahil) hiç clamp etmeden gösterir. */
.kart-limit-bar-dolgu.kart-limit-yaklasti { background: var(--warning); }
.kart-limit-bar-dolgu.kart-limit-asildi { background: var(--critical); }

.kart-ekstre-blok { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--gridline); }
.kart-ekstre-tutar { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kart-son-odeme-metni { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--text-secondary); }

.kart-satir-aksiyonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--gridline);
}
.kart-satir-aksiyonlar button { font-size: 0.82rem; padding: 0.4rem 0.8rem; }

.kart-form-ipucu { font-size: 0.76rem; margin: 0.3rem 0 0; }
.kart-odeme-fazla-uyari { font-size: 0.82rem; margin: 0.6rem 0 0; }

.kart-ekstre-gecmisi-liste { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.kart-ekstre-gecmisi-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 0.85rem;
}
.kart-ekstre-gecmisi-satir:last-child { border-bottom: none; }

.kart-dashboard-ekstre { margin: 0.5rem 0 0; font-size: 0.8rem; }

@media (max-width: 720px) {
  .kart-ozet-ikincil { width: 100%; gap: 1.5rem; }
  .kart-satir-aksiyonlar button { flex: 1 1 calc(50% - 0.5rem); }
}

/* ---------------------------------------------------------------------
   Net Servet (Sprint 13 / Task 13.4). `.kart-ozet`/`.kart-ozet-ikincil`
   (yukarıda) ile AYNI yapı - tipografi-öncelikli tek birincil figür +
   sakin ikincil metadata satırları (görev §24/§25: "Hierarchy >
   Container", yeni gradient/glow/shadow/kart-duvarı YOK). Tek fark: bu
   sayfa birden fazla para birimi bölümünü ALT ALTA gösterir (currency
   selector YOK - üç pozisyon da tek istekte zaten geliyor, görev §9/§10);
   `.net-servet-pozisyon + .net-servet-pozisyon` bölümler arası ayrımı
   sağlar.
   ------------------------------------------------------------------- */
.net-servet-pozisyon { margin-bottom: var(--space-6); }
.net-servet-pozisyon + .net-servet-pozisyon {
  padding-top: var(--space-6);
  border-top: var(--border-hairline);
}
.net-servet-ana { display: flex; flex-direction: column; gap: 0.15rem; margin-top: var(--space-2); }
.net-servet-ana-tutar { display: block; margin-top: 2px; }
.net-servet-ikincil {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}
.net-servet-ikincil > div { display: flex; flex-direction: column; gap: 0.15rem; }

@media (max-width: 720px) {
  .net-servet-ikincil { width: 100%; gap: 1.5rem; }
}

/* ---------------------------------------------------------------------
   İşlemler (Sprint 7 / Görev 2 — Sprint 11 / Task 11.6'da Design System
   2.0'a migrate edildi). Satır anatomisi artık Task 11.4'ün paylaşılan
   `.financial-list`/`.financial-row` foundation'ının CANONICAL
   tüketicisidir (eski, kendi kendine yeten `.islem-satir-*`/
   `.islem-badge*` paralel sistemi KALDIRILDI - görev §4/§22). Filtre
   alanı tek, sakin bir control area olarak gruplanır (§7) - her filtre
   kendi kartı DEĞİL.
   ------------------------------------------------------------------- */
/* Sprint 11 / Task 11.6.1 §3 — `#islemler-modul` artık `.panel` DEĞİL
   (bkz. şablon yorumu); Dashboard'un `.dashboard-section`'ıyla (Task
   11.5) aynı, yalnız dikey ritim veren, borderless bir yerleşim
   sarmalayıcısı. */
.islemler-modul { margin-bottom: var(--space-6); }
.islemler-filtre-cubugu {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}
.islemler-filtre-satiri { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: 0.6rem; }
.islemler-filtre-alani { flex: 1 1 9rem; max-width: 14rem; margin-bottom: 0; }
.islemler-filtre-alani select, .islemler-filtre-alani input { width: 100%; }

/* Sprint 11 / Task 11.6.1 §6/§7 — gelişmiş filtreler mobilde `<details>`
   ile varsayılan kapalı (native tarayıcı davranışı, ek JS/CSS gerekmez).
   `.islemler-filtre-ozet` yalnız <=720px'te görünür toggle affordance'ı;
   `<details>`'ın kendi border/arkaplanı YOK - `.islemler-filtre-cubugu`
   zaten TEK restrained surface (§3), ikinci bir iç kart üretilmez. */
.islemler-filtre-detay { margin-top: 0.4rem; }
.islemler-filtre-ozet {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  list-style: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
}
.islemler-filtre-ozet::-webkit-details-marker { display: none; }
.islemler-filtre-ozet::marker { content: ""; }
.islemler-filtre-ozet:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.islemler-filtre-ozet::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.islemler-filtre-detay[open] .islemler-filtre-ozet::before { transform: rotate(45deg); }

@media (min-width: 721px) {
  /* Masaüstünde `<details>` gerçek `open` attribute'uyla (şablonda
     varsayılan) render edilir - toggle affordance'ı anlamsız, gizlenir.
     İçerik CSS override'ı GEREKTİRMEZ: gerçek `open` durumu native
     olarak tam etkileşilebilir/tab-sırasında (bkz. şablon yorumu -
     CSS-only "force visible" denemesi gerçek Chromium'da güvenilir
     bulunmadığı için terk edildi). */
  .islemler-filtre-ozet { display: none; }
}

/* Sprint 12 / Task 12.8B.2 — Raporlar'dan drill-down scope'u (görev §10:
   Direction B - sakin typography + ince alt-divider + inline restrained
   clear action; giant alert/SaaS chip wall YOK). `.btn-disa-aktar` (mevcut
   "Filtreleri Temizle"/"Tekrar Dene" ile AYNI sınıf) reuse edilir - ikinci
   bir buton dili İCAT EDİLMEZ. */
.islemler-rapor-filtresi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0.55rem 0;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.islemler-rapor-filtresi strong { color: var(--text-primary); font-weight: 600; }

/* Task 11.4 `.financial-row`'un varsayılan `__identity` davranışı
   (tek satır + ellipsis, bkz. design-system.css §5) Dashboard'un küçük
   önizleme listeleri için doğrudur, ama İşlemler burada TAM listenin
   kendisidir - uzun serbest-metin açıklamaların amount'la ÇARPIŞMADAN
   doğal olarak sarması gerekir (görev §6). Bu DAR, sayfa-scope'lu
   override yalnız İşlemler'i etkiler; Dashboard'un Son İşlemler/
   Yaklaşanlar satırları (ve financial_row_reference.html'in kilitli
   testi) DOKUNULMADAN kalır - flex satırında wrap yalnız satırı
   DAHA UZUN yapar, amount `__end`'de (`align-items:flex-start`) sabit
   kalır, çarpışma YAPISAL olarak imkansızdır. */
#islemler-liste .financial-row__identity {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.islemler-daha-fazla-btn { display: block; margin: var(--space-4) auto 0; }

.islemler-bos { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }

/* Sprint 7 / Görev 3, Sprint 11 / Task 11.6'da LOCKED sıraya (Design
   System §19.2) taşındı: İşlem adı -> Tutar -> Açıklama/finansal bağlam
   -> Metadata -> Aksiyonlar (aksiyonlar bu bloğun dışında, modalın sabit
   footer'ında). Mevcut `.modal`/`.modal-header`/`.modal-aksiyonlar`
   foundation'ı (Sprint 5/6) reuse edilir; burada yalnız modal
   GÖVDESİNİN iç düzeni tanımlanır - nested bordered card YOK. */
.islem-detay-govde { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); }
.islem-detay-baslik { display: flex; flex-direction: column; gap: 0.3rem; }
.islem-detay-aciklama { font-size: 1.1rem; font-weight: 800; }
.islem-detay-tutar { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.islem-detay-etki { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.islem-detay-ikincil { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.88rem; }
.islem-detay-ikincil dt { color: var(--text-secondary); font-size: 0.78rem; margin: 0; }
.islem-detay-ikincil dd { margin: 0.1rem 0 0; font-weight: 600; }
.islem-detay-tarihsel-not { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.islem-detay-ayrinti { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--gridline); font-size: 0.76rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.2rem; }

/* Sprint 11 / Task 11.6.1 §1 — Düzenle (nötr) ve İptal Et (destructive)
   Detay footer'ında EŞİT rütbeli iki peer aksiyondur, bir "Vazgeç/Kaydet"
   form-footer çifti DEĞİL. Genel `.modal-aksiyonlar .btn { flex: 1 }`
   kuralı yalnız `.btn` class'lı elemanları hedeflediği için (Düzenle
   `.btn-disa-aktar`, `.btn` DEĞİL) İptal Et tek başına tüm kalan genişliği
   dolduruyor ve modalın en baskın öğesi gibi görünüyordu (görev §1
   bulgusu). Bu dar override yalnız İşlem Detayı'nın kendi aksiyon
   satırını hedefler - diğer modallardaki Vazgeç/Kaydet vb. çiftler
   (kasıtlı olarak asimetrik, submit'i vurgulayan) ETKİLENMEZ. */
#islem-detay-aksiyonlar .btn,
#islem-detay-aksiyonlar .btn-disa-aktar {
  flex: none;
}

.islem-iptal-onay p { margin: 0 0 var(--space-3); font-size: 0.9rem; }

@media (max-width: 720px) {
  .islemler-filtre-alani { flex: 1 1 100%; max-width: none; }
}

/* ---------------------------------------------------------------------
   CORE Import 2.0 (Sprint 8 / Görev 4) — `ice-aktar-*` (legacy) sınıflarına
   dokunulmadı; bu blok tamamen yeni, kendi kendine yeten bir isim
   alanındadır (`iceaktar2-*`). Satır listesi `.islemler-liste`nin aynı
   "tablo DEĞİL, list-row" felsefesini izler - Excel görünümünden kaçınmak
   görev §9'un açık talebi.
   ------------------------------------------------------------------- */

.iceaktar2-adimlar {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-6);
  flex-wrap: wrap;
}
.iceaktar2-adim-nokta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gridline);
}
.iceaktar2-adim-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.iceaktar2-adim-nokta.aktif { color: var(--text-primary); border-color: var(--good); }
.iceaktar2-adim-nokta.aktif .iceaktar2-adim-no { background: var(--good); color: var(--on-good); }
.iceaktar2-adim-nokta.tamam { color: var(--text-secondary); }
.iceaktar2-adim-nokta.tamam .iceaktar2-adim-no { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }

.iceaktar2-asama[hidden] { display: none; }

.iceaktar2-yukleme-alani {
  border: 1.5px dashed var(--baseline);
  border-radius: var(--radius-panel);
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.iceaktar2-yukleme-alani:hover, .iceaktar2-yukleme-alani.surukleniyor {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 6%, transparent);
}
.iceaktar2-yukleme-alani input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.iceaktar2-dosya-label { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; cursor: pointer; width: 100%; }
.iceaktar2-dosya-ikon { font-size: 1.6rem; color: var(--text-muted); }
.iceaktar2-dosya-adi { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.4rem; }

.iceaktar2-aksiyonlar { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.iceaktar2-vazgec-link {
  background: none; border: none; color: var(--text-muted);
  font-size: 0.8rem; cursor: pointer; text-decoration: underline;
  padding: 0.4rem 0;
}
.iceaktar2-vazgec-link:hover { color: var(--critical); }

.iceaktar2-mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem 1.2rem;
}
.iceaktar2-mapping-mod { display: flex; gap: 1.2rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.iceaktar2-mapping-mod label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer; }
.iceaktar2-mapping-mod input[type="radio"] { accent-color: var(--good); }

.iceaktar2-ozet-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  padding: 0.7rem var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface-3);
  border-radius: var(--radius-control);
  font-size: 0.82rem;
}
.iceaktar2-ozet-serit dt { color: var(--text-muted); display: inline; }
.iceaktar2-ozet-serit dd { display: inline; margin: 0 0 0 0.3rem; font-weight: 700; }
.iceaktar2-ozet-kalem { display: flex; align-items: baseline; gap: 0; padding: 0.35rem 0; }

.iceaktar2-toplu-cubuk {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem var(--space-4);
  margin-bottom: 0.6rem;
  background: color-mix(in srgb, var(--good) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-radius: var(--radius-control);
  font-size: 0.85rem;
}
.iceaktar2-toplu-cubuk[hidden] { display: none; }
.iceaktar2-toplu-cubuk select { max-width: 220px; }

/* Sprint 11 / Task 11.9.1 §1 — card-per-import-row KALDIRILDI: her satır
   kendi border/radius/surface'ını taşıyordu (Design System contract
   ihlali). Task 11.4'ün `.financial-row` divider-first anatomisiyle AYNI
   token'lar (`--space-row-gap`/`--border-hairline`) reuse edilir - state
   ayrımı (exact/probable/suggestion/blocker) artık TAMAMEN metin/badge/
   kontrollerden geliyor, satırın kendi kutusundan DEĞİL (§2). */
.iceaktar2-satirlar { list-style: none; margin: 0; padding: 0; }
.iceaktar2-satir {
  display: flex; align-items: flex-start; gap: 0.7rem; flex-wrap: wrap;
  padding: var(--space-row-gap) 0;
  border-bottom: var(--border-hairline);
}
.iceaktar2-satirlar > .iceaktar2-satir:last-child { border-bottom: none; }
.iceaktar2-satir.disabled-satir { opacity: 0.55; }
.iceaktar2-satir-secim { padding-top: 0.2rem; }
.iceaktar2-satir-secim input[type="checkbox"] { width: auto; accent-color: var(--good); cursor: pointer; }
.iceaktar2-satir-tarih { flex: 0 0 auto; min-width: 4.4rem; font-size: 0.78rem; color: var(--text-secondary); padding-top: 0.2rem; white-space: nowrap; }
.iceaktar2-satir-govde { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.iceaktar2-satir-aciklama { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iceaktar2-satir-rozetler { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.iceaktar2-satir-tur { flex: 0 0 auto; font-size: 0.78rem; color: var(--text-secondary); min-width: 5.5rem; padding-top: 0.25rem; }
.iceaktar2-satir-kategori { flex: 0 0 auto; min-width: 10rem; }
.iceaktar2-satir-kategori select { width: 100%; }
.iceaktar2-satir-tutar { flex: 0 0 auto; font-size: 0.98rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 0.2rem; }
.iceaktar2-satir-durum { flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); }
.iceaktar2-satir-durum-metin { margin: 0; }
.iceaktar2-satir-aksiyon-grubu { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.iceaktar2-satir-aksiyon-grubu button {
  background: none; border: 1px solid var(--baseline); color: var(--text-secondary);
  border-radius: 6px; padding: 0.3rem 0.65rem; font-size: 0.78rem; cursor: pointer;
  min-height: 40px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.iceaktar2-satir-aksiyon-grubu button:hover { color: var(--good); border-color: var(--good); }
.iceaktar2-satir-aksiyon-grubu button.tehlikeli:hover { color: var(--critical); border-color: var(--critical); }
.iceaktar2-satir-onay { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--text-secondary); }
.iceaktar2-satir-onay button { border-radius: 6px; padding: 0.2rem 0.55rem; font-size: 0.75rem; cursor: pointer; border: 1px solid var(--baseline); background: var(--surface-3); color: var(--text-secondary); min-height: 32px; }
.iceaktar2-satir-onay button.onay-evet { background: var(--warning); border-color: var(--warning); color: var(--on-critical); }

.badge-mukerrer-olasi { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.badge-mukerrer-kesin { background: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--warning); font-weight: 700; }
.badge-desteklenmiyor { background: color-mix(in srgb, var(--text-muted) 22%, transparent); color: var(--text-secondary); }

.iceaktar2-final-ozet { margin-bottom: var(--space-4); }
.iceaktar2-final-ozet dl { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.iceaktar2-final-ozet dt { font-size: 0.82rem; color: var(--text-secondary); }
.iceaktar2-final-ozet dd { margin: 0; font-size: 1.3rem; font-weight: 800; }

.iceaktar2-onay-metin { font-size: 0.95rem; margin: 0 0 0.6rem; }

.iceaktar2-basari { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.iceaktar2-basari-ikon { font-size: 2rem; color: var(--good); }
.iceaktar2-basari-ozet { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.iceaktar2-basari-ozet dt { font-size: 0.8rem; color: var(--text-secondary); margin: 0; }
.iceaktar2-basari-ozet dd { margin: 0.1rem 0 0; font-size: 1.15rem; font-weight: 800; }
.iceaktar2-basari-aksiyonlar { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.iceaktar2-gecmis { margin-top: var(--space-4); }
.iceaktar2-gecmis-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.iceaktar2-gecmis-satir { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--gridline); font-size: 0.82rem; }
.iceaktar2-gecmis-satir:last-child { border-bottom: none; }
.iceaktar2-gecmis-dosya { font-weight: 600; flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iceaktar2-gecmis-hesap, .iceaktar2-gecmis-tarih { color: var(--text-secondary); white-space: nowrap; }
.iceaktar2-gecmis-bos { color: var(--text-muted); font-size: 0.85rem; }

.iceaktar2-durum-metni { font-size: 0.85rem; color: var(--text-secondary); }
.iceaktar2-yukleniyor { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.85rem; padding: 1rem 0; }

@media (max-width: 720px) {
  .iceaktar2-satir { flex-direction: column; align-items: stretch; }
  .iceaktar2-satir-tarih { min-width: 0; }
  .iceaktar2-satir-tutar { margin-left: 0; }
  .iceaktar2-satir-kategori { min-width: 0; width: 100%; }
  /* `flex-basis` sütun yönünde YÜKSEKLİK tabanı olur - masaüstü genişlik
     tabanı (`12rem`) satır dikey istiflenince dev bir boş boşluk üretiyordu. */
  .iceaktar2-satir-govde { flex: 0 0 auto; }
  .iceaktar2-mapping-grid { grid-template-columns: 1fr; }
  .iceaktar2-basari-ozet { gap: var(--space-4); }
  .iceaktar2-toplu-cubuk { flex-wrap: wrap; }
}

/* Sprint 9 / Görev 3 — rule suggestion sunumu (import_v2.js satır bloğu
   içinde, kategori seçim <select>'inin AYRI bir görsel katmanı - öneri asla
   dropdown'ı otomatik doldurmaz, bkz. görev §15). */
.iceaktar2-oneri {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  font-size: 0.78rem;
}
.iceaktar2-oneri-metin { color: var(--text-secondary); }
.iceaktar2-oneri-metin strong { color: var(--text-primary); font-weight: 700; }
.iceaktar2-oneri-kaynak { color: var(--text-muted); }
/* Sprint 11 / Task 11.9 §18/§10.6 — "Öneriyi Kullan" öneri onayı DEĞİL,
   assistive bir aksiyondur; Task 11.4'ün bu tam senaryo için tasarlanmış
   paylaşılan `.inline-action` bileşenini (fill/pill/border YOK, --color-
   brand-accent) reuse eder - `--good` (primary CTA/success ailesi) ARTIK
   KULLANILMAZ. Sınıf adı (`.iceaktar2-oneri-kullan-btn`) JS click
   delegation'ı için KORUNDU (`e.target.closest(...)`), yalnız görsel
   stil `.inline-action`'dan gelir (bkz. HTML: iki sınıf birlikte). */
.iceaktar2-oneri-kullan-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Sprint 9 / Görev 4 — Kategori Kuralları sub-view. Görev §5: tipografi +
   whitespace + divider tabanlı sakin liste - card grid/gradient/glow/
   glassmorphism/KPI dashboard dili BİLİNÇLİ olarak KULLANILMADI. */
.kurallar-aksiyonlar-ust { margin: 0.9rem 0; }
.kurallar-bos { padding: 1.75rem 0.5rem; text-align: center; }
.kurallar-bos p { margin: 0 0 0.35rem; }
.kurallar-bos .btn { margin-top: 0.6rem; }
.kurallar-sira-notu { font-size: 0.8rem; margin: 0.7rem 0 0.4rem; }

.kurallar-liste { list-style: none; margin: 0; padding: 0; }
.kural-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 0.1rem;
  border-bottom: 1px solid var(--gridline);
}
.kural-satir:last-child { border-bottom: none; }
.kural-satir.kural-pasif { opacity: 0.6; }
.kural-satir-govde { min-width: 0; flex: 1 1 14rem; }
.kural-satir-ad { font-weight: 700; font-size: 0.92rem; }
.kural-satir-kosul { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.2rem; overflow-wrap: anywhere; }
.kural-satir-hesap { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.2rem; }
.kural-satir-aksiyonlar { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.kural-satir-aksiyonlar button {
  border: 1px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-secondary);
  border-radius: 8px;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.kural-satir-aksiyonlar button:hover:not(:disabled) { color: var(--good); border-color: var(--good); }
.kural-satir-aksiyonlar button:disabled { opacity: 0.5; cursor: not-allowed; }
.kural-satir-aksiyonlar .kural-sil-ac-btn:hover:not(:disabled) { color: var(--critical); border-color: var(--critical); }
/* Sprint 11 / Task 11.9 §24 — aktif/pasif bir CONFIGURATION durumudur,
   sistem başarısı/hatası DEĞİL (`--good` yerine nötr/bilgilendirici
   `--color-information` - Task 11.8'in "bugün" ay işaretiyle AYNI aile). */
.kural-toggle-btn[aria-checked="true"] { color: var(--color-information); border-color: var(--color-information); }
.kural-toggle-btn[aria-checked="false"] { color: var(--text-muted); }

.kural-onizleme { margin: 0.9rem 0; padding: 0.75rem 0.85rem; border: 1px solid var(--gridline); border-radius: 10px; }
.kural-onizleme-ozet { margin: 0; font-size: 0.85rem; }
.kural-onizleme-ozet strong { font-weight: 700; }
.kural-onizleme-ornekler { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.78rem; color: var(--text-secondary); }
.kural-onizleme-ornekler li { padding: 0.15rem 0; }

@media (max-width: 720px) {
  .kural-satir { flex-direction: column; align-items: stretch; }
  .kural-satir-aksiyonlar { justify-content: flex-start; }
}