:root {
  --bg:#f6f5ff; --primary:#6d28d9; --primary-dark:#5b21b6;
  --accent:#8b5cf6; --text:#0f172a; --muted:#64748b;
  --border:rgba(15,23,42,.10); --card:#ffffff;
  --grad:linear-gradient(135deg,#8b5cf6,#6d28d9);
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
/* ---------- SIDEBAR (marka sabit · menu kendi icinde kayar · cikis altta sabit) ---------- */
.sidebar { position:fixed; top:0; left:0; bottom:0; width:240px; background:#fff; border-right:1px solid var(--border); z-index:60; transition:transform .2s ease; display:flex; flex-direction:column; }
.s-brand { display:flex; align-items:center; gap:9px; padding:15px 18px; font-weight:800; font-size:1.1rem; color:var(--text); text-decoration:none; flex:0 0 auto; border-bottom:1px solid var(--border); }
.s-brand .logo { width:28px; height:28px; border-radius:8px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.s-brand span { color:var(--primary); }
.s-scroll { flex:1 1 auto; overflow-y:auto; min-height:0; padding:6px 0 12px; scrollbar-width:thin; scrollbar-color:#d9d2ee transparent; }
.s-scroll::-webkit-scrollbar { width:7px; }
.s-scroll::-webkit-scrollbar-track { background:transparent; }
.s-scroll::-webkit-scrollbar-thumb { background:#d9d2ee; border-radius:10px; }
.s-scroll::-webkit-scrollbar-thumb:hover { background:#c4b8e6; }
.s-foot { flex:0 0 auto; border-top:1px solid var(--border); padding:8px 10px; background:#fff; }
.s-foot a.item { margin:0; }
.s-foot a.logout { color:#64748b; }
.s-foot a.logout:hover { background:#fee2e2; color:#dc2626; }
.s-group { padding:14px 20px 5px; font-size:.66rem; letter-spacing:.6px; text-transform:uppercase; color:#94a3b8; font-weight:700; }
.sidebar a.item { display:flex; align-items:center; gap:11px; margin:2px 10px; padding:10px 12px; border-radius:9px; color:#475467; text-decoration:none; font-size:.92rem; transition:background .12s ease, color .12s ease; }
.sidebar a.item .ic { width:20px; text-align:center; }
.sidebar a.item:hover { background:#f4f2fb; color:var(--text); }
.sidebar a.item.act { background:var(--grad); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(109,40,217,.3); }
.topbar2 { position:fixed; top:0; left:240px; right:0; height:58px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:0 18px; z-index:55; }
.page-title { font-size:1.1rem; font-weight:700; margin:0; }
.hamb { display:none; background:none; border:none; font-size:1.5rem; line-height:1; color:var(--text); cursor:pointer; padding:0; margin:0; }
.t-spacer { flex:1; }
.t-user { display:flex; align-items:center; gap:9px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.t-user .nm { font-size:.85rem; font-weight:600; }
.main { margin-left:240px; padding-top:58px; }
.backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:54; }
@media(max-width:900px){
  .sidebar { transform:translateX(-100%); box-shadow:0 0 30px rgba(0,0,0,.15); }
  .sidebar.open { transform:translateX(0); }
  .topbar2 { left:0; }
  .hamb { display:block; }
  .main { margin-left:0; }
  .backdrop.show { display:block; }
  .t-user .nm { display:none; }
}
.wrap { padding:18px; max-width:1000px; margin:0 auto; }
h1 { font-size:1.25rem; margin:4px 0 16px; }
.cards { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-bottom:20px; }
@media(min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.stat { background:#fff; border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.stat .ico { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#f3effe; font-size:1.05rem; margin-bottom:12px; }
.stat .n { font-size:1.7rem; font-weight:800; }
.stat .l { font-size:.8rem; color:var(--muted); margin-top:2px; }
.stat.a2 { border-left-color:#2563eb; } .stat.a2 .ico { background:#e7effe; }
.stat.a3 { border-left-color:#0891b2; } .stat.a3 .ico { background:#e0f2fe; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.muted { color:var(--muted); font-size:.85rem; }
label { display:block; margin:10px 0 4px; font-size:.85rem; font-weight:600; }
input, select, textarea { width:100%; padding:11px; font-size:1rem; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--primary); border-color:var(--primary); }
.row { display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media(max-width:600px){ .row{ grid-template-columns:1fr; } }
button, .btn { margin-top:8px; padding:12px 22px; font-size:1rem; border:none; border-radius:10px; background:var(--grad); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; font-weight:700; box-shadow:0 4px 14px rgba(109,40,217,.28); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
button:hover, .btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(109,40,217,.36); filter:brightness(1.03); }
button:active, .btn:active { transform:translateY(0); }
.btn-sm { padding:7px 13px; font-size:.85rem; margin:0; box-shadow:none; }
.btn-soft { background:#f3effe; color:#5b21b6; box-shadow:none; }
.btn-soft:hover { background:#e9e2fb; transform:none; box-shadow:none; }
table { width:100%; border-collapse:collapse; }
th, td { padding:10px; text-align:left; border-bottom:1px solid #eef1f5; font-size:.9rem; vertical-align:middle; }
th { background:#f4f2fb; font-size:.75rem; text-transform:uppercase; color:var(--muted); }
.tbl-wrap { overflow-x:auto; margin-top:10px; }
.ok { background:#ede9fe; color:#5b21b6; padding:12px; border-radius:8px; margin-bottom:14px; }
.bad { background:#fee2e2; color:#dc2626; padding:12px; border-radius:8px; margin-bottom:14px; }
.thumb { width:42px; height:42px; object-fit:cover; border-radius:6px; border:1px solid var(--border); background:#eef1f5; }
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.75rem; font-weight:600; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-amber { background:#fef3c7; color:#b45309; }
.badge-gray { background:#eef1f5; color:#475467; }
.login-page { background:linear-gradient(135deg,#efe9fd 0%,#f4f7ff 100%); display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; }
.login-box { width:100%; max-width:380px; background:#fff; border-radius:14px; padding:28px; box-shadow:0 12px 40px rgba(15,23,42,.12); border:1px solid var(--border); }
.login-box h1 { text-align:center; font-size:1.3rem; margin:0 0 4px; }
.login-box .logo-b { color:var(--primary); }
.login-box h2 { text-align:center; font-weight:400; font-size:.9rem; color:var(--muted); margin:0 0 20px; }
.pwrap { position:relative; }
.pwrap input { padding-right:44px; }
.eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1.1rem; padding:6px; color:var(--muted); margin:0; box-shadow:none; }
.eye:hover { background:none; filter:none; transform:translateY(-50%); box-shadow:none; }
.login-box .sub2 { width:100%; margin-top:20px; }