/* ==========================================
   RESET
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Manrope", sans-serif;
    background: #ffffff;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* ==========================================
   NAVBAR
========================================== */

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    background: transparent;
    border-bottom: 1px solid transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    transition: all .35s ease;
}

.container{

    width: 100%;
    max-width: 1650px;

    margin: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 22px 42px;

}

/* ==========================================
   LOGO
========================================== */

.logo{

    position:relative;

    display:flex;

    align-items:center;

    width:72px;

    height:72px;

}

.logo img{

    position:absolute;

    top:50%;

    left:0;

    width:72px;

    height:auto;

    transform:translateY(-50%);

    transition:opacity .35s ease,
               transform .35s ease;

}

/* Logo putih */

.logo-white{

    opacity:1;

}

/* Logo biru */

.logo-blue{

    opacity:0;

}

/* Hover */

.logo:hover img{

    transform:translateY(-50%) scale(1.05);

}

/* ==========================================
   MENU
========================================== */

.navbar ul{

    display:flex;
    align-items:center;
    gap:52px;

}

.navbar ul li a{

    position:relative;

    color:#ffffff;

    font-size:20px;

    font-weight:600;

    transition:.3s;

}

/* hover */

.navbar ul li a:hover{

    color:#0B4DBB;

}

/* active */

.navbar ul li a.active{

    color:#0B4DBB;

}

.navbar ul li a.active::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-12px;

    width:100%;
    height:3px;

    border-radius:20px;

    background:#0B4DBB;

}

/* ==========================================
   RIGHT MENU
========================================== */

.nav-right{

    display:flex;
    align-items:center;
    gap:22px;

}

/* ==========================================
   SEARCH
========================================== */

.search-box{

    position:relative;

    width:300px;

}

.search-box span{

    position:absolute;

    left:18px;
    top:50%;

    transform:translateY(-50%);

    color:#9ca3af;

    font-size:22px;

}

.search-box input{

    width:100%;

    height:52px;

    border:none;

    outline:none;

    border-radius:50px;

    background:#F3F4FA;

    padding-left:52px;
    padding-right:20px;

    font-size:15px;

    color:#475569;

    transition:.3s;

}

.search-box input:focus{

    background:white;

    box-shadow:
    0 0 0 3px rgba(11,77,187,.15);

}

/* ==========================================
   STICKY EFFECT
========================================== */

.header.scrolled{
    
    background: rgba(255,255,255,.58);

    backdrop-filter: blur(18px);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(0,0,0,.05);

    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.header.scrolled .navbar ul li a{
    color:#364152; /* Abu-abu gelap */
}

.header.scrolled .navbar ul li a:hover{
    color:#0B4DBB;
}

.header.scrolled .navbar ul li a.active{
    color:#0B4DBB;
}

.header.scrolled .navbar ul li a.active::after{
    background:#0B4DBB;
}

/* ==========================================
   CHANGE LOGO WHEN SCROLL
========================================== */

.header.scrolled .logo-white{

    opacity:0;

}

.header.scrolled .logo-blue{

    opacity:1;

}

/* ==========================================
   TRANSITION
========================================== */

.logo img,
.navbar ul li a,
.search-box input,
.login-btn{

    transition:.3s ease;

}

/* ==========================================
   MOBILE MENU
========================================== */


.hamburger{

    display:none;

    width:35px;
    height:30px;

    flex-direction:column;
    justify-content:space-between;

    cursor:pointer;

}


.hamburger span{

    width:100%;
    height:3px;

    background:#0B4DBB;

    border-radius:20px;

}



/* SIDE MENU */

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;
    height:100vh;

    background:white;

    z-index:2000;

    padding:30px;

    transition:.4s ease;

    box-shadow:
    -10px 0 40px rgba(0,0,0,.1);

}


.mobile-menu.active{

    right:0;

}



.mobile-close{

    font-size:28px;

    text-align:right;

    cursor:pointer;

    color:#364152;

}



.mobile-menu ul{

    margin-top:50px;

}


.mobile-menu ul li{

    margin-bottom:30px;

}


.mobile-menu ul li a{

    font-size:20px;

    font-weight:600;

    color:#364152;

}



.mobile-menu ul li a:hover{

    color:#0B4DBB;

}



/* SUB MENU */


.mobile-submenu{

    display:none;

    margin-top:20px;

    padding-left:20px;

}


.mobile-submenu li{

    margin-bottom:20px;

}


.mobile-submenu li a{

    font-size:16px;

}



/* OVERLAY */


.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.4);

    z-index:1500;

    opacity:0;

    visibility:hidden;

    transition:.3s;

}


.menu-overlay.active{

    opacity:1;

    visibility:visible;

}



/* MOBILE ONLY */

@media(max-width:768px){


    .navbar{

        display:none;

    }


    .hamburger{

        display:flex;

        margin-left:auto;

        margin-right:15px;

    }


    .nav-right{

        display:none;

    }


}

/* ==========================================
   RESPONSIVE
========================================== */


/* ===============================
   TABLET (max-width: 1200px)
================================ */

@media (max-width:1200px){

    .container{

        padding:20px 30px;

    }


    .navbar ul{

        gap:30px;

    }


    .navbar ul li a{

        font-size:17px;

    }


    .search-box{

        width:220px;

    }


    .logo img{

        width:65px;

    }

}



/* ===============================
   MOBILE HEADER FIX
================================ */

@media (max-width:768px){

    .header{
        height:90px;
        background:#ffffff;
        display:flex;
        align-items:center;
    }


    .container{
        width:100%;
        height:100%;
        padding:0 20px;

        display:flex;
        align-items:center;
        justify-content:space-between;
    }


    /* LOGO */

    .logo{
        display:flex;
        align-items:center;
    }

    .logo img{
        width:60px;
        height:auto;
        display:block;
    }


    /* HAMBURGER */

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;

        width:35px;
        height:35px;

        position:relative;
        margin-left:auto;

        top:0;
    }


    .menu-toggle span{
        display:block;
        width:30px;
        height:3px;
        background:#0057c8;

        margin:5px 0;
    }

    .logo-white{

    opacity:0 !important;

}

.logo-blue{

    opacity:1 !important;

}

}





/* ===============================
   SMALL MOBILE (max-width:480px)
================================ */

@media (max-width:480px){


    .container{

        padding:0 18px;

    }


    .logo img{

        width:70px;

    }


    .hamburger{

        width:30px;

        height:22px;

    }

    .logo-white{

    opacity:0 !important;

}

.logo-blue{

    opacity:1 !important;

}

}