/* ==========================================================
   NOTAKITA MOBILE MENU
   Mobile First
   Version : 2.0
   PART A
========================================================== */


/* ==========================================================
   Overlay
========================================================== */

.mobile-menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(5,18,38,.55);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .30s ease,
        visibility .30s ease;

    z-index:10003;

}

.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;

}


.mobile-menu{
    width:380px;
    max-width:80%;
}

@media (max-width:768px){

    .mobile-menu{

        width:80%;
        max-width:80%;

    }

}


/* ==========================================================
   Drawer
========================================================== */

.mobile-menu{

    position:fixed;

    top:0;

    right:0;
    padding-right:5px;


    height:100dvh;

    background:#ffffff;

    display:flex;

    flex-direction:column;

    transform:translateX(100%);

    transition:transform .35s ease;

    box-shadow:
        -12px 0 45px rgba(0,0,0,.18);

    overflow:hidden;

    z-index:10004;

}

.mobile-menu.active{

    transform:translateX(0);

}


/* ==========================================================
   Header
========================================================== */

.mobile-menu-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px;

    border-bottom:1px solid #EEF2F7;

    background:#ffffff;

    flex-shrink:0;

}


/* ==========================================================
   Logo
========================================================== */

.mobile-menu-logo{

    display:flex;

    align-items:center;

    gap:12px;

}


/* logo bulat */

.logo-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #1B75D0,
        #35B7FF
    );

    flex-shrink:0;

}


/* tulisan NOTAKITA */

.logo-text{

    font-size:18px;

    font-weight:800;

    letter-spacing:.5px;

    color:#071A34;

}


/* ==========================================================
   Close Button
========================================================== */

.mobile-menu-close{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#F5F8FC;

    color:#071A34;

    font-size:18px;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease;

}

.mobile-menu-close:hover{

    background:#EAF1F8;

}

.mobile-menu-close:active{

    transform:scale(.95);

}


/* ==========================================================
   Body
========================================================== */

.mobile-menu-body{

    position:relative;

    flex:1 1 auto;

    min-height:0;

    overflow:hidden;

    background:#fff;

}

/* ==========================================================
   Every Screen
========================================================== */

.mobile-page{

    position:absolute;

    top:0;

    left:0;

    right:0;

    bottom:0;

    width:100%;

    height:100%;

    overflow-y:auto;

    padding:24px;

    background:#fff;

    transform:translateX(100%);

    opacity:0;

    visibility:hidden;

}


/* active screen */

.mobile-page.active{

    transform:translateX(0);

    opacity:1;

    visibility:visible;

}


/* ==========================================================
   Scrollbar
========================================================== */

.mobile-page::-webkit-scrollbar{

    width:5px;

}

.mobile-page::-webkit-scrollbar-thumb{

    background:#D8E0EA;

    border-radius:20px;

}

.mobile-page::-webkit-scrollbar-track{

    background:transparent;

}


/* ==========================================================
   Disable body scroll
========================================================== */

body.mobile-menu-open{

    overflow:hidden;

}
/* ==========================================================
   NOTAKITA MOBILE MENU
   PART B
========================================================== */


/* ==========================================================
   Main Menu
========================================================== */

#mobile-main-menu{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* ==========================================================
   Menu Card
========================================================== */

.mobile-card{

    width:100%;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 20px;

    border:none;

    border-radius:18px;

    background:#ffffff;

    border:1px solid #E8EEF5;

    cursor:pointer;

    text-align:left;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .20s ease,
        box-shadow .25s ease;

}


.mobile-card:hover{

    background:#F8FBFF;

    border-color:#1B75D0;

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(27,117,208,.10);

}


.mobile-card:active{

    transform:scale(.985);

}


/* ==========================================================
   Icon
========================================================== */

.mobile-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:#EEF6FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

    transition:
        background .25s ease,
        transform .25s ease;

}


.mobile-card:hover .mobile-icon{

    background:#DCEEFF;

    transform:scale(1.05);

}


/* ==========================================================
   Text
========================================================== */

.mobile-card span:last-child{

    font-size:16px;

    font-weight:700;

    color:#071A34;

    line-height:1.4;

}


/* ==========================================================
   Arrow
========================================================== */

.mobile-card::after{

    content:"›";

    margin-left:auto;

    font-size:24px;

    color:#A5B3C4;

    transition:
        transform .25s ease,
        color .25s ease;

}


.mobile-card:hover::after{

    transform:translateX(4px);

    color:#1B75D0;

}


/* ==========================================================
   Back Button
========================================================== */

.mobile-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    margin-bottom:24px;

    border:none;

    border-radius:14px;

    background:#EEF5FD;

    color:#1B75D0;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .20s ease;

}


.mobile-back:hover{

    background:#DCEEFF;

}


.mobile-back:active{

    transform:scale(.96);

}


/* ==========================================================
   Submenu Grid
========================================================== */

.mobile-grid{

    display:flex;

    flex-direction:column;

    gap:12px;

}


/* ==========================================================
   Submenu Link
========================================================== */

.mobile-grid a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    text-decoration:none;

    color:#071A34;

    background:#ffffff;

    border:1px solid #E8EEF5;

    border-radius:16px;

    padding:16px 18px;

    font-size:15px;

    font-weight:600;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .20s ease,
        box-shadow .25s ease;

}


/* Arrow */

.mobile-grid a::after{

    content:"›";

    color:#B3C0CF;

    font-size:20px;

    transition:
        transform .25s ease,
        color .25s ease;

}


.mobile-grid a:hover{

    background:#F8FBFF;

    border-color:#1B75D0;

    transform:translateX(3px);

    box-shadow:
        0 8px 22px rgba(27,117,208,.08);

}


.mobile-grid a:hover::after{

    color:#1B75D0;

    transform:translateX(3px);

}


/* ==========================================================
   Keyboard Focus
========================================================== */

.mobile-card:focus,

.mobile-grid a:focus,

.mobile-back:focus{

    outline:none;

    box-shadow:
        0 0 0 3px rgba(27,117,208,.15);

}