/* Sidebar modern dan berwarna. Markup navigasi menggunakan id="nav". */
.side{background:radial-gradient(circle at 15% 5%,#124e80 0,#07345c 32%,#062846 100%);box-shadow:8px 0 30px rgba(2,27,50,.14)}
.brand.brand-logo{height:94px;display:grid;place-items:center;padding:5px 8px;background:linear-gradient(145deg,#fff,#eef7ff);border:1px solid #ffffff80;box-shadow:0 12px 30px rgba(0,15,34,.22)}
.brand.brand-logo img{width:100%;height:82px;transform:scale(1.32);object-fit:contain}
.user-mini{position:relative;overflow:hidden;background:linear-gradient(135deg,#0d4b7f,#1064a1);border:1px solid #ffffff12;box-shadow:0 9px 22px rgba(0,20,42,.18)}
.user-mini:after{content:"";position:absolute;width:78px;height:78px;right:-30px;top:-36px;border-radius:50%;background:#ffffff12}
.user-mini .avatar{background:linear-gradient(145deg,#fff,#cce7ff);color:#075493;box-shadow:0 4px 12px #001c3440}
#nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow-y:auto;padding:2px 1px 10px;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}
#nav button{--menu-color:#36a8eb;min-width:0;min-height:43px;display:flex;align-items:center;gap:7px;margin:0;padding:7px 8px;border:1px solid #ffffff13;border-radius:11px;background:#ffffff0b;color:#d7e8f7;text-align:left;font:700 9.5px/1.2 Inter,Segoe UI,Arial,sans-serif;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
#nav button span{width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--menu-color) 24%,transparent);font-size:14px;filter:saturate(1.15)}
#nav button:nth-child(6n+1){--menu-color:#31a9ff}
#nav button:nth-child(6n+2){--menu-color:#ffb02e}
#nav button:nth-child(6n+3){--menu-color:#a879ff}
#nav button:nth-child(6n+4){--menu-color:#ff5f81}
#nav button:nth-child(6n+5){--menu-color:#42d5c5}
#nav button:nth-child(6n){--menu-color:#55c875}
#nav button:hover,#nav button:focus-visible{transform:translateY(-2px);background:#ffffff16;border-color:color-mix(in srgb,var(--menu-color) 65%,#fff);box-shadow:0 8px 16px #00182d35;outline:none;color:#fff}
#nav button.active{background:linear-gradient(135deg,color-mix(in srgb,var(--menu-color) 76%,#0b4d7c),color-mix(in srgb,var(--menu-color) 38%,#063358));border-color:color-mix(in srgb,var(--menu-color) 75%,#fff);box-shadow:0 8px 20px color-mix(in srgb,var(--menu-color) 28%,transparent);color:#fff}
#nav button.active span{background:#ffffffdf;color:#17324b;box-shadow:0 3px 10px #00182d45}
.side-actions button:first-child{background:linear-gradient(135deg,#0e578f,#1270b1);border-color:#55b8f355}
.side-actions .logout-button{background:linear-gradient(135deg,#6c3040,#93364d)}
.side-bottom{color:#c7dded;opacity:.62}
@supports not (color:color-mix(in srgb,#fff,#000)){#nav button span{background:#ffffff16}#nav button.active{background:#0d629d}}
@media(max-width:720px){.side{width:min(310px,84vw)}#nav{grid-template-columns:repeat(2,minmax(0,1fr))}.brand.brand-logo{height:88px}.brand.brand-logo img{height:76px}}