/* === RAIN PANEL === */
/* === MENU STYLE === */
/* === FONT === */
@font-face{
    font-family:"Poppins";
    src:url("../fonts/Poppins-Regular.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
/* === TOMBOL MENU === */
.menu-toggle{
    position:fixed;
    top:12px;
    left:12px;
    z-index:1100;
    width:42px;
    height:42px;
    border:0;
    border-radius:6px;
    font-size:23px;
    cursor:pointer;
    color:#fff;
    background:rgba(17,24,39,.65);
    font-family:"Poppins",Arial,Helvetica,sans-serif;
}
/* === SIDEBAR === */
.sidebar{
    position:fixed;
    top:0;
    left:-235px;
    width:235px;
    height:100vh;
    z-index:1000;
    padding:15px;
    overflow-y:auto;
    transition:left .3s ease;
    background:rgba(15,24,39,.82);
    backdrop-filter:blur(8px);
    font-family:"Poppins",Arial,Helvetica,sans-serif;
}
/* === SIDEBAR TERBUKA === */
.sidebar.active{
    left:0;
}
/* === HEADER SIDEBAR === */
.sidebar-header{
    color:#fff;
    font-size:18px;
    font-weight:bold;
    padding:12px 0 18px;
    font-family:"Poppins",Arial,Helvetica,sans-serif;
}
/* === MENU === */
.sidebar-menu a{
    display:block;
    padding:11px;
    margin:5px 0;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    background:rgba(255,255,255,.08);
    font-size:14px;
    font-family:"Poppins",Arial,Helvetica,sans-serif;
}
.sidebar-menu a:hover{
    background:rgba(37,99,235,.6);
}
/* === JUDUL MENU === */
.menu-title{
    padding:11px;
    margin-top:6px;
    color:#fff;
    cursor:pointer;
    border-radius:5px;
    background:rgba(255,255,255,.05);
    font-size:14px;
    font-family:"Poppins",Arial,Helvetica,sans-serif;
}
/* === SUBMENU DEFAULT TERTUTUP === */
.submenu{
    display:none;
    padding-left:8px;
}
.submenu.active{
    display:block;
}
/* === OVERLAY === */
.overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:900;
    background:rgba(0,0,0,.35);
}
.overlay.active{
    display:block;
}