:root { --bg: #f8fafc; --text: #0f172a; }
.dark { --bg: #020617; --text: #f8fafc; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.finans-app {
  background:
    radial-gradient(circle at 18% 14%, rgba(59,130,246,0.18), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(16,185,129,0.12), transparent 16%),
    radial-gradient(circle at 50% 68%, rgba(99,102,241,0.10), transparent 22%),
    var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
.bg-grid { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='rgba(148,163,184,0.14)'/%3E%3C/svg%3E"); opacity: 0.9; }
.bg-spot { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-spot::before,.bg-spot::after { content:''; position:absolute; width:28rem; height:28rem; border-radius:999px; filter:blur(80px); opacity:.22; }
.bg-spot::before { top:-8rem; left:-8rem; background:rgba(59,130,246,0.28); }
.bg-spot::after { top:12rem; right:-10rem; background:rgba(16,185,129,0.20); }
.glass-panel { background: rgba(255,255,255,0.88); backdrop-filter: blur(16px); border:1px solid rgba(0,0,0,0.06); border-radius:24px; box-shadow:0 12px 40px -24px rgba(15,23,42,0.18); }
.dark .glass-panel { background: rgba(15,23,42,0.72); border-color: rgba(255,255,255,0.05); box-shadow:0 18px 40px -24px rgba(0,0,0,0.45); }
.premium-card { position:relative; overflow:hidden; isolation:isolate; }
.premium-card::before { content:''; position:absolute; inset:0 auto auto 0; width:100%; height:4px; background:linear-gradient(90deg,var(--card-accent,#3b82f6),transparent 72%); opacity:.95; z-index:0; }
.premium-card::after { content:''; position:absolute; top:-140%; left:-35%; width:52%; height:320%; transform:rotate(18deg) translateX(-120%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); opacity:0; pointer-events:none; transition:transform .8s ease, opacity .35s ease; z-index:0; }
.dark .premium-card::after { background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); }
.premium-card:hover::after { opacity:1; transform:rotate(18deg) translateX(300%); }
.premium-card > * { position:relative; z-index:1; }
.premium-accent-blue { --card-accent:#3b82f6; }
.premium-accent-violet { --card-accent:#8b5cf6; }
.premium-accent-emerald { --card-accent:#10b981; }
.premium-accent-rose { --card-accent:#ef4444; }
.premium-accent-amber { --card-accent:#f59e0b; }
.kpi-card { position:relative; overflow:hidden; }
.kpi-orb { display:none; }
.kpi-icon { width:4.25rem; height:4.25rem; border-radius:1.35rem; display:none; align-items:center; justify-content:center; font-size:1.6rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.kpi-watermark { position:absolute; right:1rem; bottom:.8rem; font-size:4.6rem; line-height:1; opacity:.09; color:var(--card-accent,#3b82f6); pointer-events:none; transition:transform .28s ease, opacity .28s ease, filter .28s ease; transform:translate3d(0,0,0) scale(1); }
.kpi-card:hover .kpi-watermark { opacity:.16; transform:translate3d(-4px,-2px,0) scale(1.08); filter:drop-shadow(0 0 16px color-mix(in srgb, var(--card-accent,#3b82f6) 34%, transparent)); }
.sidebar-link { transition: all .22s ease; border-left:3px solid transparent; }
.sidebar-link:hover { transform: translateX(4px); }
.sidebar-link.active { background: rgba(59,130,246,0.1); border-left-color:#3b82f6; color:#60a5fa; font-weight:700; box-shadow: inset 0 0 0 1px rgba(59,130,246,0.12); }
.hover-lift { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow:0 20px 40px -24px rgba(59,130,246,0.28); border-color:rgba(59,130,246,0.22); }
.segmented-control { display:inline-flex; gap:.28rem; padding:.28rem; border-radius:999px; background:rgba(148,163,184,0.08); border:1px solid rgba(148,163,184,0.12); backdrop-filter:blur(16px); }
.segmented-btn { border:0; background:transparent; color:inherit; padding:.52rem .82rem; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .22s ease; opacity:.78; }
.segmented-btn.is-active { background: rgba(255,255,255,0.74); color: rgb(15 23 42); box-shadow: inset 0 0 0 1px rgba(148,163,184,0.14), 0 8px 18px rgba(15,23,42,0.08); opacity: 1; }
.dark .segmented-btn.is-active { color: rgb(241 245 249); background: rgba(30,41,59,0.88); box-shadow: inset 0 0 0 1px rgba(148,163,184,0.12), 0 8px 18px rgba(0,0,0,0.24); }
.mobile-tab { transition: all .2s ease; }
.mobile-tab.active { background: rgba(59,130,246,0.14); color:#60a5fa; }
.mobile-menu-link { transition: all .2s ease; }
.mobile-menu-link.active { background: rgba(59,130,246,0.14) !important; color:#60a5fa !important; box-shadow: inset 0 0 0 1px rgba(59,130,246,0.16); }
.action-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:2.9rem; padding:.78rem 1.1rem; border-radius:1rem; border:1px solid rgba(148,163,184,0.16); background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.68)); color:rgb(15 23 42); font-size:.82rem; font-weight:800; letter-spacing:.01em; text-decoration:none; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; backdrop-filter:blur(14px); box-shadow:0 14px 34px -24px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.55); }
.dark .action-btn { background:linear-gradient(180deg, rgba(15,23,42,0.88), rgba(15,23,42,0.64)); color:rgb(241 245 249); border-color:rgba(255,255,255,0.08); box-shadow:0 18px 40px -28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05); }
.action-btn::before { content:''; position:absolute; inset:1px; border-radius:calc(1rem - 1px); padding:1px; background:linear-gradient(120deg, color-mix(in srgb, var(--action-accent,#3b82f6) 78%, white), transparent 35%, color-mix(in srgb, var(--action-accent,#3b82f6) 62%, transparent)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; }
.action-btn::after { content:''; position:absolute; left:-35%; top:-140%; width:48%; height:320%; transform:rotate(18deg) translateX(-120%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); opacity:0; transition:transform .8s ease, opacity .3s ease; pointer-events:none; }
.dark .action-btn::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
.action-btn:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--action-accent,#3b82f6) 36%, rgba(148,163,184,.24)); box-shadow:0 22px 44px -28px color-mix(in srgb, var(--action-accent,#3b82f6) 32%, transparent); }
.action-btn:hover::after { opacity:1; transform:rotate(18deg) translateX(280%); }
.action-btn i { font-size:.95rem; }
.action-btn-primary { --action-accent:#3b82f6; color:white; background:linear-gradient(135deg, rgba(59,130,246,.98), rgba(59,130,246,.82)); border-color:rgba(96,165,250,.3); box-shadow:0 18px 42px -26px rgba(59,130,246,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.dark .action-btn-primary { color:white; background:linear-gradient(135deg, rgba(59,130,246,.94), rgba(37,99,235,.82)); }
.action-btn-primary::before { opacity:.82; }
.action-btn-secondary { --action-accent:#8b5cf6; }
.action-btn-success { --action-accent:#10b981; }
.action-btn-danger { --action-accent:#ef4444; }
.action-btn-ghost { --action-accent:#64748b; background:rgba(255,255,255,0.62); }
.dark .action-btn-ghost { background:rgba(15,23,42,0.58); }
.action-select { appearance:none; background-image:none; padding-right:2.8rem; }
.action-select-wrap { position:relative; }
.action-select-wrap::after { content:'\f107'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:rgba(148,163,184,.95); pointer-events:none; }
.sidebar-utility { width:100%; display:flex; align-items:center; justify-content:center; gap:.7rem; min-height:2.9rem; border-radius:1rem; font-size:.82rem; font-weight:800; transition:all .22s ease; }
.progress-bar-bg { background: rgba(148,163,184,0.1); border-radius:9999px; height:8px; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:9999px; }
.search-input { border:1px solid rgba(148,163,184,0.16); background:rgba(255,255,255,0.58); color:rgb(15 23 42); border-radius:16px; padding:.85rem 1rem .85rem 2.7rem; font-size:.85rem; font-weight:700; outline:none; transition:all .2s ease; width:100%; }
.dark .search-input { background: rgba(15,23,42,0.62); color: rgb(241 245 249); }
.search-input:focus { border-color: rgba(59,130,246,0.38); box-shadow: 0 0 0 4px rgba(59,130,246,0.12); }
.mini-icon-card { border:1px solid rgba(148,163,184,0.14); background:rgba(255,255,255,0.58); border-radius:20px; padding:1rem; backdrop-filter:blur(14px); transition:all .22s ease; }
.dark .mini-icon-card { background:rgba(15,23,42,0.58); border-color:rgba(255,255,255,0.06); }
.mini-icon-card:hover { transform:translateY(-3px); border-color:rgba(59,130,246,0.2); box-shadow:0 18px 36px -24px rgba(59,130,246,0.28); }
.mini-icon-badge { width:2.75rem; height:2.75rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.mini-icon-badge.is-lg { width:3.4rem; height:3.4rem; border-radius:1.15rem; font-size:1.2rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 14px 32px -22px rgba(59,130,246,0.28); }
.semantic-card { position:relative; border:1px solid rgba(148,163,184,0.14); background:rgba(255,255,255,0.58); border-radius:20px; padding:1rem; backdrop-filter:blur(14px); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow:hidden; }
.dark .semantic-card { background:rgba(15,23,42,0.58); border-color:rgba(255,255,255,0.06); }
.semantic-card::before { content:''; position:absolute; inset:0 auto auto 0; width:100%; height:3px; background:linear-gradient(90deg,var(--card-accent,#3b82f6),transparent 75%); opacity:.95; }
.semantic-card::after { content:''; position:absolute; top:-140%; left:-35%; width:48%; height:320%; transform:rotate(18deg) translateX(-120%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); opacity:0; pointer-events:none; transition:transform .8s ease, opacity .35s ease; }
.dark .semantic-card::after { background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
.semantic-card:hover { transform:translateY(-4px); border-color:rgba(59,130,246,0.2); box-shadow:0 18px 36px -24px rgba(59,130,246,0.28); }
.semantic-card:hover::after { opacity:1; transform:rotate(18deg) translateX(300%); }
.semantic-card > * { position:relative; z-index:1; }
.chart-shell { border:1px solid rgba(148,163,184,0.14); background:linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.34)); border-radius:24px; padding:1.25rem; backdrop-filter:blur(14px); }
.dark .chart-shell { background:linear-gradient(180deg, rgba(15,23,42,0.62), rgba(2,6,23,0.45)); border-color:rgba(255,255,255,0.06); }
.chart-combo { position:relative; height:18rem; }
.chart-lines { position:absolute; inset:0 0 1.45rem 0; pointer-events:none; }
.chart-lines svg { width:100%; height:100%; overflow:visible; }
.chart-line-income { fill:none; stroke:#10b981; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 12px rgba(16,185,129,.28)); }
.chart-line-expense { fill:none; stroke:#ef4444; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 12px rgba(239,68,68,.24)); opacity:.92; }
.chart-line-net { fill:none; stroke:#3b82f6; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 14px rgba(59,130,246,.28)); }
.chart-point-income,.chart-point-expense,.chart-point-net { stroke-width:4; }
.chart-point-income { fill:#10b981; stroke:rgba(16,185,129,.22); }
.chart-point-expense { fill:#ef4444; stroke:rgba(239,68,68,.22); }
.chart-point-net { fill:#3b82f6; stroke:rgba(59,130,246,.22); }
.chart-bars { height:16rem; display:flex; align-items:flex-end; gap:.75rem; }
.chart-combo .chart-bars { position:absolute; inset:auto 0 0 0; }
.chart-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.55rem; }
.chart-stack { width:100%; max-width:3.5rem; display:flex; flex-direction:column; justify-content:flex-end; gap:.35rem; height:13.5rem; }
.chart-bar { width:100%; border-radius:1rem 1rem .45rem .45rem; }
.chart-bar-income { background:linear-gradient(180deg, rgba(16,185,129,.72), rgba(16,185,129,.98)); box-shadow:0 10px 22px -12px rgba(16,185,129,.55); }
.chart-bar-expense { background:linear-gradient(180deg, rgba(239,68,68,.72), rgba(239,68,68,.96)); box-shadow:0 10px 22px -12px rgba(239,68,68,.5); }
.responsive-table { width:100%; }
@media (max-width: 767px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display:block;
    width:100%;
  }
  .responsive-table thead {
    display:none;
  }
  .responsive-table tbody {
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
  .responsive-table tr {
    border:1px solid rgba(148,163,184,0.14);
    background:rgba(255,255,255,0.72);
    border-radius:1.1rem;
    padding:.65rem .85rem;
    box-shadow:0 12px 28px -22px rgba(15,23,42,0.2);
  }
  .dark .responsive-table tr {
    background:rgba(15,23,42,0.72);
    border-color:rgba(255,255,255,0.06);
  }
  .responsive-table td {
    border:0 !important;
    padding:.55rem 0 !important;
    text-align:left !important;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
  }
  .responsive-table td::before {
    content:attr(data-label);
    flex:0 0 42%;
    max-width:42%;
    font-size:.68rem;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgb(148 163 184);
  }
  .responsive-table td > * {
    margin-left:auto;
    text-align:right;
  }
  .responsive-table td[data-label="Açıklama / Kategori"] > *,
  .responsive-table td[data-label="Başlık"] > *,
  .responsive-table td[data-label="Kişi / Kurum"] > * {
    text-align:right;
  }
}