/* ============================================================
   NOVA UI — finans.tahtadankale.com için sıfırdan tasarım sistemi
   Bootstrap yok, CDN yok. Tamamı özel.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e5e9f2;
  --text: #101828;
  --muted: #667085;
  --primary: #4f46e5;
  --primary-600: #4338ca;
  --primary-soft: #eef0fe;
  --success: #059669;
  --success-soft: #e7f6f0;
  --danger: #e11d48;
  --danger-soft: #fdecf0;
  --warn: #d97706;
  --warn-soft: #fdf3e3;
  --info: #0284c7;
  --info-soft: #e6f4fb;
  --sidebar-bg: #0d1230;
  --sidebar-bg-2: #131a40;
  --sidebar-fg: #9aa3c7;
  --sidebar-active: #4f46e5;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.05);
  --shadow-lg: 0 20px 50px -12px rgba(16,24,40,.25);
  --ring: 0 0 0 3px rgba(79,70,229,.18);
}
[data-theme="dark"]{
  --bg: #0a0e1f;
  --surface: #121732;
  --surface-2: #171d3d;
  --border: #232b52;
  --text: #e6eaf5;
  --muted: #8b93b8;
  --primary: #818cf8;
  --primary-600: #6d78f5;
  --primary-soft: #1d2350;
  --success: #34d399;
  --success-soft: #12301f;
  --danger: #fb7185;
  --danger-soft: #3b1523;
  --warn: #fbbf24;
  --warn-soft: #38290e;
  --info: #38bdf8;
  --info-soft: #0d2b3e;
  --sidebar-bg: #090d22;
  --sidebar-bg-2: #0e1330;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 50px -12px rgba(0,0,0,.6);
  --ring: 0 0 0 3px rgba(129,140,248,.25);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); font-size:14px; line-height:1.5;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:none; }
h1,h2,h3,h4,h5{ margin:0; font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 .6em; }
img,svg{ vertical-align:middle; }
.ico{ flex-shrink:0; }

/* ---------- Layout ---------- */
.layout{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto;
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
  color:var(--sidebar-fg); display:flex; flex-direction:column; z-index:60;
  scrollbar-width:thin;
}
.brand{
  display:flex; align-items:center; gap:12px; padding:20px 18px 16px;
}
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:19px;
  box-shadow:0 6px 16px -4px rgba(99,102,241,.55);
}
.brand-name{ color:#fff; font-weight:600; font-size:15px; line-height:1.2; }
.brand-name small{ display:block; font-weight:400; font-size:11px; color:var(--sidebar-fg); }
.nav{ padding:6px 12px 20px; display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:#5b6491; padding:16px 12px 6px; font-weight:600;
}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:10px; color:var(--sidebar-fg); font-size:13.5px; font-weight:500;
  transition:background .15s,color .15s;
}
.nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav a.on{
  background:var(--sidebar-active); color:#fff;
  box-shadow:0 8px 20px -6px rgba(79,70,229,.55);
}
.nav a .ico{ opacity:.85; }
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:10px; padding:12px 26px;
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.content{ padding:22px 26px 40px; max-width:1500px; width:100%; margin:0 auto; }
.page-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 18px; }
.page-title{ font-size:21px; }
.page-sub{ color:var(--muted); font-size:13px; margin-top:2px; }
.spacer{ flex:1; }

/* ---------- Card ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.card-h{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--border);
  font-weight:600; font-size:13.5px;
}
.card-b{ padding:18px; }
.card-f{ padding:12px 18px; border-top:1px solid var(--border); background:var(--surface-2); }

/* ---------- Grid ---------- */
.grid{ display:grid; gap:16px; }
.g-stats{ grid-template-columns:repeat(4,1fr); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-main{ grid-template-columns:2fr 1fr; }
.g-13{ grid-template-columns:1fr 2fr; }
@media(max-width:1200px){ .g-stats{ grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:820px){ .g-main,.g-13,.g-2,.g-3{ grid-template-columns:1fr; } }
@media(max-width:560px){ .g-stats{ grid-template-columns:1fr; } }

/* ---------- Stat card ---------- */
.stat{ display:flex; align-items:center; gap:14px; padding:16px 18px; }
.stat-ico{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.stat-ico.i-primary{ background:var(--primary-soft); color:var(--primary); }
.stat-ico.i-success{ background:var(--success-soft); color:var(--success); }
.stat-ico.i-danger{ background:var(--danger-soft); color:var(--danger); }
.stat-ico.i-warn{ background:var(--warn-soft); color:var(--warn); }
.stat-ico.i-info{ background:var(--info-soft); color:var(--info); }
.stat-label{ font-size:12px; color:var(--muted); font-weight:500; }
.stat-value{ font-size:19px; font-weight:700; letter-spacing:-.02em; }
.stat-value.sm{ font-size:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent;
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  color:var(--text); background:var(--surface); transition:all .15s; white-space:nowrap;
}
.btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 6px 16px -6px rgba(79,70,229,.5); }
.btn-primary:hover{ background:var(--primary-600); }
.btn-success{ background:var(--success); color:#fff; }
.btn-success:hover{ filter:brightness(1.07); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ filter:brightness(1.07); }
.btn-ghost{ border-color:var(--border); background:var(--surface); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--muted); }
.btn-soft{ background:var(--primary-soft); color:var(--primary); }
.btn-soft:hover{ filter:brightness(.97); }
.btn-soft-danger{ background:var(--danger-soft); color:var(--danger); }
.btn-soft-success{ background:var(--success-soft); color:var(--success); }
.btn-sm{ padding:5px 10px; font-size:12.5px; border-radius:8px; }
.btn-icon{ padding:8px; }
.btn-block{ width:100%; }
.btn-group{ display:inline-flex; gap:8px; flex-wrap:wrap; }

/* ---------- Forms ---------- */
.field{ margin-bottom:13px; }
.label{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:5px; }
.input,.select,textarea.input{
  width:100%; padding:9px 12px; font:inherit; font-size:13.5px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); transition:border .15s,box-shadow .15s;
}
.input:focus,.select:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.input::placeholder{ color:var(--muted); opacity:.7; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:32px; }
.input-sm,.select-sm{ padding:6px 10px; font-size:12.5px; }
.hint{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.form-row{ display:flex; gap:12px; flex-wrap:wrap; }
.form-row>.field{ flex:1; min-width:130px; }
input[type="file"].input{ padding:7px; }
input[type="date"].input{ min-height:38px; }

/* Switch */
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; font-weight:500; }
.switch input{ display:none; }
.switch .track{
  width:40px; height:22px; border-radius:99px; background:var(--border);
  position:relative; transition:background .2s; flex-shrink:0;
}
.switch .track::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked+.track{ background:var(--primary); }
.switch input:checked+.track::after{ left:21px; }

/* Checkbox */
.check{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; padding:3px 0; }
.check input{ width:16px; height:16px; accent-color:var(--primary); }

/* ---------- Table ---------- */
.tbl-wrap{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{
  text-align:left; padding:10px 14px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap;
}
.tbl td{ padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background .12s; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl tfoot td,.tbl tr.total td{ font-weight:700; background:var(--surface-2); }
.tr-muted td{ opacity:.45; }
.tr-muted td .pill{ text-decoration:none; }
.tr-muted td:not(:last-child){ text-decoration:line-through; }
td.trunc{ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Pills / badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:99px; font-size:11.5px; font-weight:600; white-space:nowrap;
}
.pill-primary{ background:var(--primary-soft); color:var(--primary); }
.pill-success{ background:var(--success-soft); color:var(--success); }
.pill-danger{ background:var(--danger-soft); color:var(--danger); }
.pill-warn{ background:var(--warn-soft); color:var(--warn); }
.pill-info{ background:var(--info-soft); color:var(--info); }
.pill-muted{ background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* İşlem türü renkleri */
.tx-debt,.tx-payment_out{ background:var(--danger-soft); color:var(--danger); }
.tx-payment_in{ background:var(--success-soft); color:var(--success); }
.tx-credit,.tx-refund,.tx-discount{ background:var(--info-soft); color:var(--info); }
.tx-opening,.tx-adjustment{ background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }

/* ---------- Money colors ---------- */
.pos{ color:var(--danger); }
.neg{ color:var(--success); }
.money{ font-variant-numeric:tabular-nums; font-weight:600; }

/* ---------- Alert ---------- */
.alert{
  display:flex; gap:11px; align-items:flex-start; padding:13px 16px;
  border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:16px;
  border:1px solid transparent;
}
.alert .ico{ margin-top:1px; }
.alert-danger{ background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 25%,transparent); }
.alert-success{ background:var(--success-soft); color:var(--success); border-color:color-mix(in srgb,var(--success) 25%,transparent); }
.alert-warning{ background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 25%,transparent); }
.alert-info{ background:var(--info-soft); color:var(--info); border-color:color-mix(in srgb,var(--info) 25%,transparent); }

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:4px; flex-wrap:wrap; padding:5px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; width:fit-content; max-width:100%; margin-bottom:16px;
}
.tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:9px; border:0; background:transparent;
  font:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer;
  transition:all .15s;
}
.tab:hover{ color:var(--text); }
.tab.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.tab .pill{ padding:1px 7px; font-size:10.5px; }
.tab-pane{ display:none; }
.tab-pane.on{ display:block; animation:fadeUp .2s ease; }

/* ---------- Modal ---------- */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:flex-start; justify-content:center; padding:6vh 16px;
  background:rgba(10,14,31,.55); backdrop-filter:blur(4px); overflow-y:auto;
}
.modal.open{ display:flex; }
.modal-box{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-lg);
  width:100%; max-width:480px; animation:pop .18s ease;
}
.modal-box.lg{ max-width:640px; }
.modal-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 0; font-size:15.5px; font-weight:700;
}
.modal-b{ padding:14px 20px; }
.modal-f{ display:flex; justify-content:flex-end; gap:8px; padding:0 20px 18px; }
.modal-x{
  border:0; background:var(--surface-2); color:var(--muted); cursor:pointer;
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
}
.modal-x:hover{ color:var(--text); }
@keyframes pop{ from{ transform:scale(.96) translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fadeUp{ from{ transform:translateY(5px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- Toast ---------- */
.toasts{ position:fixed; right:18px; bottom:18px; z-index:200; display:flex; flex-direction:column; gap:9px; }
.toast{
  display:flex; align-items:center; gap:10px; min-width:260px; max-width:380px;
  padding:12px 15px; border-radius:12px; color:#fff; font-size:13.5px; font-weight:500;
  box-shadow:var(--shadow-lg); animation:pop .2s ease;
}
.toast-success{ background:#065f46; }
.toast-danger{ background:#9f1239; }
.toast-info{ background:#075985; }

/* ---------- Dropdown ---------- */
.drop{ position:relative; }
.drop-menu{
  position:absolute; right:0; top:calc(100% + 6px); min-width:190px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px; display:none; z-index:80;
}
.drop.open .drop-menu{ display:block; animation:pop .15s ease; }
.drop-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 11px; border-radius:8px; border:0; background:none;
  font:inherit; font-size:13px; color:var(--text); cursor:pointer; text-align:left;
}
.drop-item:hover{ background:var(--surface-2); }

/* ---------- Pagination ---------- */
.pager{ display:flex; gap:5px; flex-wrap:wrap; margin-top:16px; }
.pager a,.pager span{
  min-width:32px; height:32px; padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; border:1px solid var(--border); background:var(--surface);
  font-size:12.5px; font-weight:600; color:var(--text);
}
.pager a:hover{ border-color:var(--primary); color:var(--primary); }
.pager .on{ background:var(--primary); border-color:var(--primary); color:#fff; }
.pager .gap{ border:0; background:none; color:var(--muted); }

/* ---------- KV list ---------- */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:13px; }
.kv dt{ color:var(--muted); font-weight:500; white-space:nowrap; }
.kv dd{ margin:0; word-break:break-word; }

/* ---------- Utilities ---------- */
.flex{ display:flex; align-items:center; gap:10px; }
.flex-wrap{ flex-wrap:wrap; }
.between{ justify-content:space-between; }
.right{ margin-left:auto; }
.center{ text-align:center; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }
.xs{ font-size:11px; }
.strong{ font-weight:700; }
.mt{ margin-top:16px; }
.mb{ margin-bottom:16px; }
.mb-sm{ margin-bottom:8px; }
.nowrap{ white-space:nowrap; }
.w-100{ width:100%; }
.empty{ padding:34px; text-align:center; color:var(--muted); font-size:13.5px; }
.avatar{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:var(--primary-soft); color:var(--primary);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}

/* ---------- Auth ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(1000px 600px at 15% -10%,rgba(99,102,241,.35),transparent 60%),
             radial-gradient(900px 500px at 110% 110%,rgba(139,92,246,.28),transparent 55%),
             linear-gradient(160deg,#0b1029 0%,#090d22 100%);
}
.auth-card{
  width:100%; max-width:400px; background:var(--surface);
  border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg);
  padding:34px 30px;
}
.auth-brand{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px; text-align:center; }
.auth-brand .brand-mark{ width:52px; height:52px; font-size:25px; border-radius:15px; }

/* ---------- SVG chart ---------- */
.chart-svg{ width:100%; height:auto; display:block; }
.chart-legend{ display:flex; gap:16px; font-size:12px; color:var(--muted); padding:4px 4px 0; }
.chart-legend .flex{ gap:6px; }
.lg-dot{ width:10px; height:10px; border-radius:3px; }

/* ---------- Mobile ---------- */
.burger{ display:none; }
@media(max-width:991px){
  .burger{ display:inline-flex; }
  .sidebar{
    position:fixed; left:-270px; transition:left .22s ease; box-shadow:none;
  }
  .sidebar.open{ left:0; box-shadow:0 0 0 100vmax rgba(0,0,0,.45); }
  .topbar{ padding:10px 14px; }
  .content{ padding:16px 14px 36px; }
}

/* Scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--muted) 35%,transparent); border-radius:99px; }
::-webkit-scrollbar-track{ background:transparent; }