:root{
  --bg:#0e1217; --panel:#11161d; --panel-2:#0b0f14; --stroke:#1a2230; --text:#e6edf3; --muted:#9fb0c0;
  --primary:#4da3ff; --success:#1fdd8f; --warning:#ffb020; --danger:#ff6262; --info:#7bd1ff;
  --grad-1: linear-gradient(135deg,#1b3f66 0%, #4da3ff 100%);
  --grad-2: linear-gradient(135deg,#154a38 0%, #1fdd8f 100%);
  --grad-3: linear-gradient(135deg,#5a3a0f 0%, #ffb020 100%);
  --grad-4: linear-gradient(135deg,#541f1f 0%, #ff6262 100%);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text);
  display:grid; grid-template-columns: 220px 1fr; grid-template-rows: 56px 1fr; grid-template-areas:
  "sidebar topbar" "sidebar main";
}

/* Sidebar */
.sidebar{grid-area:sidebar; background:
    radial-gradient(1200px 300px at -10% -10%, rgba(77,163,255,.08), transparent 60%),
    radial-gradient(800px 260px at 120% 120%, rgba(31,221,143,.06), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border-right:1px solid var(--stroke);
  display:flex; flex-direction:column; padding:12px; gap:10px; position:sticky; top:0; height:100dvh;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.02);
  overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.2px}
.brand i{font-size:20px; color:var(--primary)}
.brand span{font-size:14px}
.menu{display:flex; flex-direction:column; gap:4px; margin-top:6px; position:relative}
.menu::before{content:"İşlemler"; color:var(--muted); font-size:11px; letter-spacing:.4px; text-transform:uppercase; margin:4px 4px 8px 8px}
.menu .item{display:flex; align-items:center; gap:8px; padding:8px 10px; color:var(--muted); text-decoration:none; border-radius:8px; border:1px solid transparent; position:relative; font-size:13px}
.menu .item i{font-size:16px; opacity:.9}
.menu .item:hover{background:#0f141b; border-color:var(--stroke); color:#d7e7ff; box-shadow:inset 0 0 0 1px rgba(77,163,255,.10)}
.menu .item.active{background:#0f1b2a; color:#d7e7ff; border-color:#17345a; box-shadow:inset 0 0 0 1px rgba(27,63,102,.25)}
.menu .item.active::before, .menu .item:hover::before{content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:4px; border-radius:4px; background:linear-gradient(180deg,#4da3ff,#7bd1ff)}
.sidebar-footer{margin-top:auto; display:flex; flex-direction:column; gap:6px}
.sidebar-footer{padding-top:10px; border-top:1px solid var(--stroke)}
.ghost{background:transparent; border:1px solid var(--stroke); color:var(--muted); padding:8px 12px; border-radius:10px; display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer}
.ghost:hover{color:var(--text); border-color:#27405e}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(77,163,255,.35),rgba(77,163,255,.15)); border:2px solid transparent; background-clip:content-box; border-radius:14px}
.sidebar::-webkit-scrollbar-track{background:transparent}

/* Topbar */
.topbar{grid-area:topbar; display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--stroke); background:color-mix(in oklab, var(--panel) 80%, transparent); backdrop-filter:saturate(130%) blur(8px); position:sticky; top:0; z-index:5}
.icon{background:transparent; border:1px solid var(--stroke); color:var(--text); width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer}
.icon.danger{border-color:#7a2a2a; color:#ff6262 !important; background:rgba(255,98,98,.12)}
.icon.danger i{color:#ff6262 !important; font-size:18px}
.icon.danger:hover{background:rgba(255,98,98,.20)}
.grow{flex:1}
.user{display:flex; align-items:center; gap:10px}
.user img{width:32px; height:32px; border-radius:8px; border:1px solid var(--stroke)}
.user .meta{display:flex; flex-direction:column; font-size:12px; color:var(--muted)}

/* Main content */
.content{grid-area:main; padding:16px; display:flex; flex-direction:column; gap:16px}
.cards{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)); border:1px solid var(--stroke); border-radius:14px; padding:14px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.card::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg, #4da3ff, #7bd1ff, #1fdd8f, #ffb020, #ff6262); opacity:.65}
.card.stat .stat-body h2{margin:0}
.card.stat .stat-body span{color:var(--muted)}
/* Variant text colors */
.card.stat.primary .stat-body h2{color:#cde6ff !important}
.card.stat.primary .stat-body span{color:#9ec8ef !important}
.card.stat.success .stat-body h2{color:#b9f3dd !important}
.card.stat.success .stat-body span{color:#92eac7 !important}
.card.stat.warning .stat-body h2{color:#ffd69a !important}
.card.stat.warning .stat-body span{color:#e8c377 !important}
.card.stat.info .stat-body h2{color:#cdeeff !important}
.card.stat.info .stat-body span{color:#a9def7 !important}
.card.stat.danger .stat-body h2{color:#ff9b9b !important}
.card.stat.danger .stat-body span{color:#ffc1c1 !important}
.card.stat.neon .stat-body h2{color:#9dffea !important; text-shadow:0 0 6px rgba(157,255,234,.35)}
.card.stat.neon .stat-body span{color:#bffdef !important}
.card:hover{transform:translateY(-2px); transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 16px 40px rgba(0,0,0,.45)}
.card-title{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.card-title h4{margin:0; font-size:15px}
.stat .stat-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.stat .stat-body h2{margin:0; font-size:28px}
.stat .ok{color:#a0f0c9}

/* Badges & Buttons */
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); font-size:12px}
.badge.success{background:rgba(31,221,143,.08); border-color:#164f3b; color:#b9f3dd}
.badge.warning{background:rgba(255,176,32,.08); border-color:#5a430f; color:#ffd69a}
.badge.primary{background:rgba(77,163,255,.08); border-color:#1b3f66; color:#cde6ff}
.badge.info{background:rgba(123,209,255,.08); border-color:#1b3f66; color:#cdeeff}
.badge.danger{background:rgba(255,98,98,.10); border-color:#5a1f1f; color:#ffc1c1}
.badge.neon{background:rgba(157,255,234,.10); border-color:#1b4b46; color:#bffdef}
.btn{background:#163252; border:1px solid #1c3a63; color:#e6f3ff; padding:10px 14px; border-radius:10px; cursor:pointer; transition:filter .15s ease, box-shadow .15s ease, transform .08s ease}
.btn:hover{filter:brightness(1.15); box-shadow:0 6px 16px rgba(77,163,255,.25)}
.btn.ghost{background:transparent; border:1px solid var(--stroke); color:var(--muted)}
.btn.primary{background:var(--grad-1); border-color:#285884}
.btn.danger{background:var(--grad-4); border-color:#5a1f1f; color:#ffdede}
.btn.sm{padding:6px 10px; font-size:12px}

/* Grid */
.grid.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-row{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.field{display:flex; gap:8px}
input, select{background:#0b1118; border:1px solid var(--stroke); color:var(--text); border-radius:10px; padding:10px 12px; outline:none}
input:focus, select:focus{border-color:#2b5b8b}
.muted{color:var(--muted); font-size:12px; margin-top:8px}

/* Progress */
.progress{height:12px; background:#0b1118; border:1px solid var(--stroke); border-radius:999px; overflow:hidden}
.progress .bar{height:100%; width:var(--val); background:linear-gradient(90deg,#4da3ff,#7bd1ff)}

/* Table */
.table-wrap{overflow:auto; border:1px solid var(--stroke); border-radius:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.02)}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:720px}
.table thead th{position:sticky; top:0; background:linear-gradient(180deg,#0f151d,#0d131a); text-align:left; padding:12px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--stroke)}
.table tbody td{padding:12px; border-bottom:1px solid var(--stroke)}
.table tbody tr:hover{background:#0f141b}
.table .chip{padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--stroke)}
.chip.ok{background:rgba(31,221,143,.08); border-color:#164f3b; color:#b9f3dd}
.chip.block{background:rgba(255,98,98,.08); border-color:#5a1f1f; color:#ffc9c9}
.table-foot{display:flex; align-items:center; gap:10px; padding:10px 6px; color:var(--muted); border-top:1px solid var(--stroke)}
.search{display:flex; align-items:center; gap:8px; border:1px solid var(--stroke); padding:6px 10px; border-radius:10px}
.search input{background:transparent; border:none; color:var(--text); outline:none; width:200px}
.pages{display:flex; align-items:center; gap:8px}
.pages .icon{transition:transform .08s ease}
.pages .icon:active{transform:translateY(1px)}

/* Colorful stat accents via order */
.cards .stat:nth-child(1){border-color:#17345a; background:linear-gradient(180deg,rgba(29,56,89,.25),rgba(29,56,89,.08))}
.cards .stat:nth-child(2){border-color:#5a430f; background:linear-gradient(180deg,rgba(90,67,15,.25),rgba(90,67,15,.08))}
.cards .stat:nth-child(3){border-color:#1b3f66; background:linear-gradient(180deg,rgba(27,63,102,.25),rgba(27,63,102,.08))}
.cards .stat:nth-child(4){border-color:#164f3b; background:linear-gradient(180deg,rgba(22,79,59,.25),rgba(22,79,59,.08))}

/* Focus ring polish */
input:focus, select:focus, .btn:focus, .icon:focus{outline:none; box-shadow:0 0 0 3px rgba(77,163,255,.25)}

/* Light theme support (toggle via data-theme="light") */
[data-theme="light"]{
  --bg:#f5f7fb; --panel:#ffffff; --panel-2:#f9fbff; --stroke:#e4e9f1; --text:#0b1220; --muted:#516070;
}
[data-theme="light"] .menu .item.active{background:#eaf3ff; color:#0b1220; border-color:#cfe4ff}
[data-theme="light"] .table thead th{background:#f1f5fb}
[data-theme="light"] .card::after{opacity:.8}

/* Toast notifications */
.toasts{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:50}
.toast{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); border:1px solid var(--stroke); color:var(--text); padding:10px 12px; border-radius:12px; box-shadow:var(--shadow); display:flex; align-items:center; gap:8px; min-width:220px}
.toast.success{border-color:#164f3b}
.toast.warn{border-color:#5a430f}

/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); display:grid; place-items:center; z-index:60}
.modal{width:min(92vw,560px); background:var(--panel); border:1px solid var(--stroke); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.modal .head{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--stroke)}
.modal .body{padding:14px; max-height:60vh; overflow:auto}
.modal .foot{display:flex; justify-content:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--stroke)}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* Responsive */
@media (max-width: 1080px){
  body{grid-template-columns: 76px 1fr}
  .menu .item span, .ghost span{display:none}
}
@media (max-width: 860px){
  body{grid-template-columns: 1fr; grid-template-areas:"topbar" "main"}
  .sidebar{position:fixed; inset:0 auto 0 0; width:240px; transform:translateX(-100%); transition:transform .25s ease}
  body.nav-open .sidebar{transform:none}
}
@media (max-width: 720px){
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid.two{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .cards{grid-template-columns: 1fr}
}

/* Sidebar compact overrides (force) */
body{grid-template-columns: 200px 1fr !important}
aside.sidebar{width:200px !important; min-width:200px !important; padding:10px !important}
.menu .item{padding:8px 10px !important; border-radius:8px !important; font-size:13px !important; gap:8px !important; line-height:1.2}
.menu .item i{font-size:16px !important}
.menu .item span{font-size:13px !important}
.menu .item:hover{box-shadow:none !important; border-color:transparent !important; background:transparent !important; color:#dbe9ff !important}
.menu .item.active{box-shadow:none !important; background:transparent !important; border-color:transparent !important; color:#ffffff !important; font-weight:600}
.menu .item::before{display:none !important}
.menu .item.active::before{display:none !important}
.menu .item i{width:22px !important; height:22px !important; border-radius:50% !important; display:grid !important; place-items:center !important; box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
/* Colored circular icons by icon type (stable) */
.menu .item i.ri-dashboard-2-line{background:rgba(77,163,255,.12) !important; color:#9acbff !important}
.menu .item i.ri-key-2-line{background:rgba(255,176,32,.12) !important; color:#ffd28b !important}
.menu .item i.ri-user-3-line{background:rgba(123,209,255,.12) !important; color:#bde9ff !important}
.menu .item i.ri-file-list-3-line{background:rgba(77,163,255,.12) !important; color:#9acbff !important}
.menu .item i.ri-forbid-line{background:rgba(255,98,98,.12) !important; color:#ff9b9b !important}
.menu .item i.ri-logout-box-r-line{background:rgba(123,209,255,.12) !important; color:#bde9ff !important}
.brand span{font-size:14px !important}
.brand i{font-size:20px !important}