*{box-sizing:border-box;margin:0}
:root{--bg:#f3f5fa;--card:#fff;--bd:#e8ecf4;--fg:#20294a;--mut:#7b86a0;
--in-b:#e9edfd;--in:#4c63d2;--gr-b:#e1f3ea;--gr:#2e9e6b;--pu-b:#f2e9fb;--pu:#8a55c7;
--am-b:#fdf0da;--am:#c68a29;--ro-b:#fde9ec;--ro:#cf5a74;--bl-b:#e4f0fa;--bl:#076b9d}
body{font-family:Figtree,sans-serif;background:var(--bg);color:var(--fg);font-size:14px}
.side{position:fixed;left:0;top:0;bottom:0;width:236px;background:#fff;border-right:1px solid var(--bd);padding:18px 14px;overflow:hidden}
.gl{font-size:11px;font-weight:700;letter-spacing:1.2px;color:#9aa4bc;padding:14px 12px 6px}
.it{display:flex;gap:11px;align-items:center;height:38px;padding:0 12px;border-radius:10px;font-size:13.5px;color:#41496b;margin:1px 0;font-weight:500}
.it svg{width:18px;height:18px;flex:none}
.it.act{background:var(--in-b);color:var(--in);font-weight:600}
.hd{position:fixed;left:236px;right:0;top:0;height:64px;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:16px;padding:0 24px;z-index:5}
.hd img{width:38px;height:38px;border-radius:9px}
.hd .t b{font-size:15px;display:block;line-height:1.15}.hd .t span{font-size:12px;color:var(--mut)}
.sr{flex:1;max-width:340px;margin:0 auto;background:#f1f4fa;border-radius:19px;height:38px;display:flex;align-items:center;gap:9px;padding:0 14px;color:#9aa4bc;font-size:13px}
.sr svg{width:16px;height:16px}
.bell{width:38px;height:38px;border-radius:50%;background:#f1f4fa;display:flex;align-items:center;justify-content:center;position:relative}
.bell svg{width:17px;height:17px;color:#5b6480}.bell i{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--ro);border:1.5px solid #fff}
.me{display:flex;align-items:center;gap:10px}.me .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#8a55c7,#4c63d2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.me b{font-size:13px;display:block;line-height:1.15}.me span{font-size:11.5px;color:var(--mut)}
.mn{margin:64px 0 0 236px;padding:24px;min-height:calc(100vh - 64px)}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ph h1{font-size:20px;font-weight:700}.ph .cr{font-size:12.5px;color:var(--mut);margin-top:3px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.stat .ic{width:50px;height:50px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.stat .ic svg{width:24px;height:24px}
.stat .l{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.stat .v{font-size:26px;font-weight:800;color:var(--fg);line-height:1.1}
.stat .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.75);margin:6px 0 4px}
.stat .bar i{display:block;height:6px;border-radius:3px}
.stat .n{font-size:12px;opacity:.85}
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:20px}
.card h3{font-size:15px;font-weight:700;margin-bottom:2px}
.card .sub{font-size:12.5px;color:var(--mut);margin-bottom:14px}
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#9aa4bc;text-align:left;padding:9px 12px;border-bottom:1px solid var(--bd)}
td{padding:10px 12px;border-bottom:1px solid #eef1f7;font-size:13.5px;vertical-align:middle}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;border-radius:20px;padding:3px 11px;font-size:12px;font-weight:600}
.av2{width:32px;height:32px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;border:1px solid var(--bd);background:#fff;color:#41496b}
.btn.pri{background:var(--in);border-color:var(--in);color:#fff}
.btn svg{width:15px;height:15px}
.tabs{display:flex;gap:8px}
.tab{border-radius:20px;padding:7px 16px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--bd);color:#5b6480}
.tab.on{background:var(--in);border-color:var(--in);color:#fff}
.tag-note{font-size:11px;color:var(--mut);background:#f6f8fc;border:1px dashed #cfd8e8;border-radius:8px;padding:4px 10px;display:inline-block}

/* responsive + canli eklemeler */
.tw{overflow-x:auto}
.mnav{display:none}
.itm{opacity:.45;pointer-events:none}
a{text-decoration:none;color:inherit}
.it:hover{background:#f4f6fc}
.btn.dis{opacity:.5;pointer-events:none}
@media (max-width:960px){
 .side{display:none}
 .hd{left:0;padding:0 14px}
 .mn{margin-left:0;padding:16px}
 .grid4{grid-template-columns:1fr 1fr}
 .sr{display:none}
 .mnav{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;background:#fff;border-bottom:1px solid var(--bd);position:sticky;top:64px;z-index:4}
 .mnav a{flex:none;border:1px solid var(--bd);border-radius:20px;padding:6px 14px;font-size:12.5px;font-weight:600;color:#5b6480;background:#fff}
 .mnav a.act{background:var(--in-b);color:var(--in);border-color:var(--in-b)}
}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}
input.sq{border:0;background:transparent;outline:none;font:inherit;color:var(--fg);width:100%}