/* ============================================================
   TAHTADANKALE Cari Panel — kurumsal tasarım sistemi v2
   Marka: turuncu (#f97316) + antrasit (#1b1d21) + gümüş
   Harici bağımlılık yok; tamamı özel.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --bg: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #f8f8f9;
  --border: #e6e6e9;
  --text: #1a1c20;
  --muted: #6d7178;
  --primary: #ea6a12;
  --primary-hi: #f97b1f;
  --primary-lo: #d95f0e;
  --primary-soft: #fdeee1;
  --primary-soft-tx: #b54708;
  --success: #1a8a4a;
  --success-soft: #e7f5ec;
  --danger: #d92d20;
  --danger-soft: #fdebe9;
  --warn: #b54708;
  --warn-soft: #fdf1e0;
  --info: #17648e;
  --info-soft: #e8f2f9;
  --sidebar-bg: #17181c;
  --sidebar-bg-2: #1e2025;
  --sidebar-fg: #9a9ea8;
  --sidebar-line: #2a2c33;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(23,24,28,.06), 0 1px 3px rgba(23,24,28,.04);
  --shadow-lg: 0 24px 60px -16px rgba(23,24,28,.35);
  --ring: 0 0 0 3px rgba(234,106,18,.22);
}
[data-theme="dark"]{
  --bg: #121316;
  --surface: #1b1d22;
  --surface-2: #202329;
  --border: #2b2e35;
  --text: #ececee;
  --muted: #94979f;
  --primary: #f97b1f;
  --primary-hi: #fb8b31;
  --primary-lo: #ea6a12;
  --primary-soft: #38240f;
  --primary-soft-tx: #fbaa64;
  --success: #37b269;
  --success-soft: #12301d;
  --danger: #f2655a;
  --danger-soft: #3a1613;
  --warn: #f0a049;
  --warn-soft: #362510;
  --info: #4da3d2;
  --info-soft: #10293a;
  --sidebar-bg: #101114;
  --sidebar-bg-2: #16171b;
  --sidebar-fg: #8e929c;
  --sidebar-line: #24262c;
  --shadow: 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.7);
  --ring: 0 0 0 3px rgba(249,123,31,.3);
}

/* ---------- 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; text-rendering:optimizeLegibility;
}
a{ color:var(--primary); text-decoration:none; }
h1,h2,h3,h4,h5{ margin:0; font-weight:700; letter-spacing:-.015em; }
p{ margin:0 0 .6em; }
img,svg{ vertical-align:middle; }
.ico{ flex-shrink:0; }
code{ background:var(--surface-2); border:1px solid var(--border); padding:1px 6px; border-radius:6px; font-size:12px; }

/* ---------- Layout ---------- */
.layout{ display:flex; min-height:100vh; }
.sidebar{
  width:248px; 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; border-right:1px solid var(--sidebar-line);
}
.brand{
  display:flex; flex-direction:column; align-items:center; gap:9px; padding:22px 16px 16px;
  border-bottom:1px solid var(--sidebar-line);
  background:radial-gradient(340px 150px at 50% 0%, rgba(249,123,31,.12), transparent 70%);
}
.brand img{ width:158px; height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.brand small{
  font-weight:700; font-size:9.5px; color:#6f747f; letter-spacing:.24em; text-transform:uppercase;
}
.nav{ padding:4px 12px 18px; display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  color:#5d616b; padding:16px 12px 6px; font-weight:700;
}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:9px; color:var(--sidebar-fg); font-size:13.5px; font-weight:500;
  transition:background .14s,color .14s; position:relative;
}
.nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.nav a.on{
  background:linear-gradient(180deg,var(--primary-hi),var(--primary-lo));
  color:#fff; font-weight:600;
  box-shadow:0 8px 18px -8px rgba(234,106,18,.7), inset 0 1px 0 rgba(255,255,255,.18);
}
.nav a .ico{ opacity:.8; }
.nav a.on .ico{ opacity:1; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:10px; padding:10px 26px;
  position:sticky; top:0; z-index:50;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.content{ padding:22px 26px 44px; max-width:1480px; 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:20px; position:relative; padding-left:14px; }
.page-title::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:3px;
  background:linear-gradient(180deg,var(--primary-hi),var(--primary-lo));
}
.page-sub{ color:var(--muted); font-size:13px; margin-top:3px; padding-left:14px; }
.spacer{ flex:1; }

/* ---------- Dashboard hero ---------- */
.hero{
  border-radius:16px; padding:26px 28px; margin-bottom:18px; position:relative; overflow:hidden;
  background:
    radial-gradient(700px 300px at 85% -20%, rgba(249,123,31,.22), transparent 60%),
    linear-gradient(155deg,#1d1f24 0%,#131417 100%);
  color:#e9eaec; box-shadow:var(--shadow-lg);
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.045; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:38px 38px;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:repeating-linear-gradient(-45deg,var(--primary-hi) 0 14px,#17181c 14px 28px);
  opacity:.9;
}
.hero-top{ position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:18px; }
.hero-hi{ color:#9a9ea8; font-size:13px; font-weight:600; }
.hero-title{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:#fff; margin:2px 0 4px; }
.hero-date{ color:#7d818c; font-size:12.5px; font-weight:600; }
.hero-kpis{ position:relative; display:flex; gap:34px; flex-wrap:wrap; margin-top:20px; }
.hero-kpi .k-label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8b8f9a; }
.hero-kpi .k-value{ font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:2px; }
.hero-kpi .k-value.orange{ color:var(--primary-hi); }
.hero-kpi .k-value.green{ color:#4ade80; }
.hero-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.hero .btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#e9eaec; }
.hero .btn-ghost:hover{ background:rgba(255,255,255,.11); }

/* ---------- Müşteri profil bandı ---------- */
.profile-strip{
  position:relative; padding:20px 22px 22px; color:#e9eaec;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  background:
    radial-gradient(600px 240px at 90% -30%, rgba(249,123,31,.2), transparent 60%),
    linear-gradient(155deg,#1d1f24 0%,#131417 100%);
}
.profile-strip::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:repeating-linear-gradient(-45deg,var(--primary-hi) 0 14px,#17181c 14px 28px); opacity:.9;
}
.profile-strip .btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#e9eaec; }
.profile-strip .btn-ghost:hover{ background:rgba(255,255,255,.12); }
.profile-name{ font-size:19px; font-weight:800; color:#fff; letter-spacing:-.015em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.profile-id{ color:#8b8f9a; font-size:12.5px; font-weight:600; margin-top:3px; }
.avatar-lg{
  width:56px; height:56px; border-radius:15px; flex-shrink:0;
  background:linear-gradient(180deg,var(--primary-hi),var(--primary-lo)); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:22px; box-shadow:0 10px 22px -8px rgba(234,106,18,.7);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; padding:13px 18px; background:var(--surface); border-top:1px solid var(--border); }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; max-width:100%;
  border:1px solid var(--border); border-radius:99px; font-size:12.5px; font-weight:600;
  background:var(--surface-2); color:var(--text);
}
.chip .ico{ color:var(--primary); flex-shrink:0; }
.chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.balance-banner{
  border-radius:var(--radius); padding:16px 20px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; color:#fff;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.balance-banner::before{
  content:""; position:absolute; inset:0; opacity:.08;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size:30px 30px;
}
.balance-banner.owe{ background:linear-gradient(135deg,#e04438,#b42318); }
.balance-banner.credit{ background:linear-gradient(135deg,#12b76a,#027a48); }
.balance-banner.zero{ background:linear-gradient(135deg,#3f4550,#23272e); }
.balance-banner .b-label{ position:relative; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-weight:800; }
.balance-banner .b-value{ position:relative; font-size:25px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.balance-banner .b-side{ position:relative; text-align:right; font-size:12px; opacity:.9; max-width:220px; }

.kv-sec{
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-soft-tx);
  padding:12px 0 6px; border-bottom:1px dashed var(--border); margin-bottom:8px;
  display:flex; align-items:center; gap:7px;
}
.kv-sec:first-child{ padding-top:0; }

/* ---------- Topbar search ---------- */
.topsearch{ position:relative; width:min(380px,42vw); }
.topsearch .ico{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); }
.topsearch input{
  width:100%; padding:8px 12px 8px 34px; font:inherit; font-size:13px;
  border:1px solid var(--border); border-radius:99px; background:var(--surface-2); color:var(--text);
  transition:border .14s, box-shadow .14s, background .14s;
}
.topsearch input:focus{ outline:none; border-color:var(--primary); background:var(--surface); box-shadow:var(--ring); }

/* ---------- 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:9px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--border);
  font-weight:700; font-size:13px; letter-spacing:.01em;
}
.card-h .ico{ color:var(--primary); }
.card-b{ padding:18px; }
.card-f{ padding:12px 18px; border-top:1px solid var(--border); background:var(--surface-2); }

/* ---------- Grid ---------- */
.grid{ display:grid; gap:14px; }
.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:13px; padding:15px 16px; position:relative; }
.stat::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0;
  background:var(--border);
}
.stat:has(.i-primary)::before{ background:var(--primary); }
.stat:has(.i-success)::before{ background:var(--success); }
.stat:has(.i-danger)::before{ background:var(--danger); }
.stat:has(.i-warn)::before{ background:var(--warn); }
.stat:has(.i-info)::before{ background:var(--info); }
.stat-ico{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.stat-ico.i-primary{ background:var(--primary-soft); color:var(--primary-soft-tx); }
.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:11.5px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.stat-value{ font-size:18px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat-value.sm{ font-size:15.5px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 15px; border-radius:var(--radius-sm); border:1px solid transparent;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--text); background:var(--surface); transition:all .14s; white-space:nowrap;
}
.btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{
  background:linear-gradient(180deg,var(--primary-hi),var(--primary-lo));
  color:#fff; border-color:var(--primary-lo);
  box-shadow:0 6px 14px -6px rgba(234,106,18,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-success{ background:var(--success); color:#fff; }
.btn-success:hover{ filter:brightness(1.08); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ filter:brightness(1.08); }
.btn-ghost{ border-color:var(--border); background:var(--surface); }
.btn-ghost:hover{ background:var(--surface-2); border-color:#c9cad0; }
[data-theme="dark"] .btn-ghost:hover{ border-color:#3d4049; }
.btn-soft{ background:var(--primary-soft); color:var(--primary-soft-tx); }
.btn-soft:hover{ filter:brightness(.98); }
.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:12px; 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:12px; font-weight:600; color:var(--muted); margin-bottom:5px; letter-spacing:.01em; }
.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 .14s,box-shadow .14s;
}
.input:focus,.select:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.input::placeholder{ color:var(--muted); opacity:.65; }
.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='%236d7178' 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:37px; }

.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; font-weight:600; }
.switch input{ display:none; }
.switch .track{
  width:40px; height:22px; border-radius:99px; background:#cfd1d6;
  position:relative; transition:background .2s; flex-shrink:0;
}
[data-theme="dark"] .switch .track{ background:#3a3d45; }
.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,.35);
}
.switch input:checked+.track{ background:var(--primary); }
.switch input:checked+.track::after{ left:21px; }

.check{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; padding:3px 0; }
.check input{ width:15px; height:15px; 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:9px 14px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; 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 .1s; }
.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:not(:last-child){ text-decoration:line-through; }
.tr-muted td .pill{ text-decoration:none; }
td.trunc{ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; letter-spacing:.01em;
}
.pill-primary{ background:var(--primary-soft); color:var(--primary-soft-tx); }
.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:6px; height:6px; border-radius:50%; background:currentColor; }

.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); }

.pos{ color:var(--danger); }
.neg{ color:var(--success); }
.money{ font-variant-numeric:tabular-nums; font-weight:700; }

/* ---------- Alert ---------- */
.alert{
  display:flex; gap:11px; align-items:flex-start; padding:12px 15px;
  border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:16px;
  border:1px solid;
}
.alert .ico{ margin-top:1px; }
.alert-danger{ background:var(--danger-soft); color:var(--danger); border-color:rgba(217,45,32,.25); }
.alert-success{ background:var(--success-soft); color:var(--success); border-color:rgba(26,138,74,.25); }
.alert-warning{ background:var(--warn-soft); color:var(--warn); border-color:rgba(181,71,8,.25); }
.alert-info{ background:var(--info-soft); color:var(--info); border-color:rgba(23,100,142,.25); }

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

/* ---------- Modal ---------- */
.modal{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:flex-start; justify-content:center; padding:6vh 16px;
  background:rgba(16,17,20,.6); backdrop-filter:blur(3px); overflow-y:auto;
}
.modal.open{ display:flex; }
.modal-box{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-lg);
  width:100%; max-width:480px; animation:pop .16s ease;
}
.modal-box.lg{ max-width:640px; }
.modal-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 0; font-size:15px; font-weight:800;
}
.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(.97) translateY(6px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fadeUp{ from{ transform:translateY(4px); 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:11px; color:#fff; font-size:13px; font-weight:600;
  box-shadow:var(--shadow-lg); animation:pop .2s ease; border-left:4px solid rgba(255,255,255,.35);
}
.toast-success{ background:#166534; }
.toast-danger{ background:#991b1b; }
.toast-info{ background:#155e75; }

/* ---------- 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:11px;
  box-shadow:var(--shadow-lg); padding:6px; display:none; z-index:80;
}
.drop.open .drop-menu{ display:block; animation:pop .14s 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; font-weight:500; 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:8px; 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-lo); color:#fff; }
.pager .gap{ border:0; background:none; color:var(--muted); }

/* ---------- KV ---------- */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:13px; }
.kv dt{ color:var(--muted); font-weight:600; 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:9px; flex-shrink:0;
  background:linear-gradient(180deg,var(--primary-hi),var(--primary-lo)); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
}

/* ---------- Login ---------- */
.auth-split{ display:flex; min-height:100vh; }
.auth-hero{
  flex:1.15; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:40px;
  background:
    radial-gradient(900px 500px at 70% 20%, rgba(249,123,31,.14), transparent 55%),
    radial-gradient(700px 500px at 20% 90%, rgba(249,123,31,.08), transparent 50%),
    linear-gradient(160deg,#191a1e 0%,#101114 100%);
  position:relative; overflow:hidden;
}
.auth-hero::before{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:44px 44px;
}
.auth-hero img{ max-width:min(430px,80%); height:auto; position:relative; filter:drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.auth-hero-text{ position:relative; text-align:center; color:#8e929c; font-size:13.5px; max-width:380px; line-height:1.7; }
.auth-hero-text b{ color:#e9eaec; display:block; font-size:16px; margin-bottom:4px; letter-spacing:-.01em; }
.auth-form-side{
  width:440px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border-left:1px solid var(--border); padding:36px;
}
.auth-form{ width:100%; max-width:330px; }
.auth-form h2{ font-size:21px; margin-bottom:4px; }
.auth-form .sub{ color:var(--muted); font-size:13px; margin-bottom:24px; }
.auth-foot{ margin-top:22px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:11.5px; display:flex; gap:7px; align-items:flex-start; }
@media(max-width:900px){
  .auth-split{ flex-direction:column; }
  .auth-hero{ min-height:280px; flex:none; padding:30px; }
  .auth-hero img{ max-width:280px; }
  .auth-hero-text{ display:none; }
  .auth-form-side{ width:100%; flex:1; border-left:0; }
}

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

/* ---------- Report card ---------- */
a.card.stat{ transition:border-color .15s, transform .15s; }
a.card.stat:hover{ border-color:var(--primary); transform:translateY(-1px); }

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

/* ---------- Yumuşak sayfa geçişleri ---------- */
.content{
  animation:pageIn .42s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes pageIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.main{ transition:opacity .24s ease, transform .24s ease; }
body.page-leave .main{ opacity:0; transform:translateY(-8px); }
body.page-leave{ pointer-events:none; }

/* Kart ve tablolar hafif kademeli girsin */
.content > .card, .content > .grid, .content > .hero, .content > .page-head, .content > .tabs{
  animation:pageIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.content > *:nth-child(2){ animation-delay:.05s; }
.content > *:nth-child(3){ animation-delay:.1s; }
.content > *:nth-child(4){ animation-delay:.15s; }
.content > *:nth-child(5){ animation-delay:.2s; }

/* Giriş ekranı açılışı */
.auth-split{ transition:opacity .24s ease; }
body.page-leave .auth-split{ opacity:0; }
.auth-hero img{ animation:heroIn .8s cubic-bezier(.22,.61,.36,1) both; }
@keyframes heroIn{
  from{ opacity:0; transform:translateY(18px) scale(.96); }
  to{ opacity:1; transform:none; }
}
.auth-hero-text{ animation:pageIn .7s cubic-bezier(.22,.61,.36,1) .18s both; }
.auth-form{ animation:pageIn .6s cubic-bezier(.22,.61,.36,1) .12s both; }

/* Sidebar linklerinde yumuşak vurgular */
.nav a, .btn, .tab, .pill, .stat, .drop-item{ transition-duration:.2s; }
.tbl tbody tr{ transition:background .18s ease; }

/* Hareket azaltma tercihi olanlara saygı */
@media (prefers-reduced-motion: reduce){
  .content, .content > *, .auth-hero img, .auth-hero-text, .auth-form{ animation:none !important; }
  body.page-leave .main, body.page-leave .auth-split{ transition:none; }
}

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#c4c5cb; border-radius:99px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#3a3d45; }
::-webkit-scrollbar-track{ background:transparent; }