/* ERSAN MES SIDEBAR CSS — Seçenek A v3.0 */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow:hidden}

.app{display:flex!important;flex-direction:row!important;height:100vh!important;width:100vw!important;overflow:hidden!important;gap:0!important;padding:0!important}

/* ── SIDEBAR KAPSAYICI ── */
#sb-mount,.sb{
  width:210px!important;min-width:210px!important;max-width:210px!important;
  flex:0 0 210px!important;height:100vh!important;
  overflow-y:scroll!important;overflow-x:hidden!important;
  background:#1a2b47;
  display:flex;flex-direction:column;
  position:relative;z-index:100;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;
  margin:0!important;border-right:none!important;
}
#sb-mount::-webkit-scrollbar,.sb::-webkit-scrollbar{width:3px}
#sb-mount::-webkit-scrollbar-thumb,.sb::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

/* ── MAIN ── */
.main,.icerik-alani{flex:1 1 0!important;min-width:0!important;height:100vh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;margin:0!important}
.main>.tb,.main>.topbar,.main>[class*="topbar"]{flex-shrink:0!important}

/* ── LOGO ── */
.sb-logo{padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;display:flex;align-items:center;gap:0;cursor:pointer}

/* ── KULLANICI ── */
.sb-user{margin:8px 10px 4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:7px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.12s;flex-shrink:0}
.sb-user:hover{background:rgba(255,255,255,.09)}
.sb-user-ava{width:26px;height:26px;border-radius:6px;background:#F5A623;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:#fff;flex-shrink:0}
.sb-user-n{font-size:11px;font-weight:700;color:#fff}
.sb-user-r{font-size:9px;color:rgba(255,255,255,.35)}

/* ── ARAMA ── */
.sb-srch{margin:5px 10px 3px;position:relative;flex-shrink:0}
.sb-srch input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:5px;padding:5px 8px 5px 24px;font-size:10.5px;color:rgba(255,255,255,.65);outline:none;font-family:inherit}
.sb-srch input::placeholder{color:rgba(255,255,255,.25)}
.sb-srch input:focus{background:rgba(255,255,255,.09);border-color:rgba(245,166,35,.4)}
.srch-ic{position:absolute;left:7px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.25);font-size:11px;pointer-events:none}

/* ── DURUM ── */
.sb-status{margin:4px 10px 5px;padding:4px 9px;background:rgba(16,185,129,.09);border:1px solid rgba(16,185,129,.18);border-radius:5px;display:flex;align-items:center;gap:5px;flex-shrink:0;cursor:pointer}
.st-dot{width:6px;height:6px;border-radius:50%;background:#10b981;animation:sbPulse 2s infinite;flex-shrink:0}
@keyframes sbPulse{0%,100%{opacity:1}50%{opacity:.3}}
.st-txt{font-size:10px;font-weight:600;color:rgba(255,255,255,.45)}
.st-val{margin-left:auto;font-size:9px;color:#10b981;font-weight:700}

/* ── AYIRICI ── */
.sb-div{height:1px;background:rgba(255,255,255,.05);margin:2px 0;flex-shrink:0}

/* ── GRUP BAŞLIĞI ── */
.sb-grp{display:flex;align-items:center;gap:7px;padding:6px 11px 5px;cursor:pointer;color:rgba(255,255,255,.55);font-size:11px;font-weight:600;transition:.12s;flex-shrink:0;min-height:30px}
.sb-grp:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.03)}
.sb-grp-ic{font-size:12px;flex-shrink:0;opacity:.8;width:17px;text-align:center}
.sb-grp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sb-grp-ct{font-size:8px;color:rgba(255,255,255,.2);font-weight:400}
.sb-grp-arr{margin-left:auto;font-size:9px;color:rgba(255,255,255,.2);transition:transform .18s;flex-shrink:0}
.sb-grp.open .sb-grp-arr{transform:rotate(90deg)}
.sb-grp>span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── AKORDİYON ── */
.sb-children{overflow:visible;max-height:none}
.sb-children.closed{overflow:hidden!important;max-height:0!important}

/* ── NAV ÖĞESI ── */
.sb-ni{display:flex;align-items:center;gap:6px;padding:5px 11px 5px 29px;cursor:pointer;color:rgba(255,255,255,.42);font-size:10.5px;transition:.1s;border-left:2px solid transparent;min-height:27px;line-height:1.35}
.sb-ni:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.8)}
.sb-ni.active{background:rgba(245,166,35,.12);color:#fff;border-left-color:#F5A623;font-weight:700}
.sb-ni-ic{font-size:11px;flex-shrink:0;opacity:.5;width:15px;text-align:center}
.sb-ni.active .sb-ni-ic{opacity:1}
.sb-ni-txt{flex:1;white-space:normal;word-break:break-word;line-height:1.35;min-width:0}

/* ── ALT ETİKET ── */
.sb-sub-lbl{padding:5px 11px 1px 28px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.18);flex-shrink:0}

/* ── BADGE ── */
.sb-nb{font-size:7.5px;padding:1px 4px;border-radius:8px;font-weight:700;color:#fff;flex-shrink:0;margin-left:auto;white-space:nowrap}
.sb-nb.r{background:#ef4444}.sb-nb.a{background:#f59e0b;color:#111}.sb-nb.b{background:#3b82f6}
.sb-nb.g{background:#10b981}.sb-nb.p{background:#8b5cf6}.sb-nb.o{background:#F5A623;color:#111}
.sb-nb.dim{background:rgba(255,255,255,.12);color:rgba(255,255,255,.4)}

/* ── ALT BUTONLAR ── */
.sb-bot{margin-top:16px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0}
.sb-bot-item{display:flex;align-items:center;gap:7px;padding:6px 7px;color:rgba(255,255,255,.32);font-size:10.5px;cursor:pointer;border-radius:4px;transition:.12s}
.sb-bot-item:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.65)}
.sb-bot-item.cikis{color:rgba(255,80,80,.45)}
.sb-bot-item.cikis:hover{color:rgba(255,80,80,.8);background:rgba(255,50,50,.06)}

/* ── SCROLLBAR (MAIN) ── */
.main *::-webkit-scrollbar{width:5px;height:5px}
.main *::-webkit-scrollbar-track{background:transparent}
.main *::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}