/*
|--------------------------------------------------------------------------
| MAKKY B2B
| Header
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   HEADER
========================================================================== */

.mb2b-header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:88px;

    z-index:9999;

    background:#112C62;

    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,.12);

}

.mb2b-header .mb2b-container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.mb2b-header__logo{

    flex-shrink:0;

    display:flex;

    align-items:center;

}

.mb2b-header__logo a{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.mb2b-header__logo img{

    display:block;

    width:auto;

    height:48px;

    max-width:100%;

    object-fit:contain;

}

/* ==========================================================================
   DESKTOP NAVIGATION
========================================================================== */

.mb2b-header__nav{

    margin-left:auto;

    margin-right:44px;

}

.mb2b-header__nav ul{

    display:flex;

    align-items:center;

    gap:40px;

    margin:0;

    padding:0;

    list-style:none;

}

.mb2b-header__nav li{

    margin:0;

    padding:0;

}

.mb2b-header__nav a{

    display:inline-flex;

    align-items:center;

    color:#FFFFFF;

    font-size:15px;

    font-weight:600;

    letter-spacing:.2px;

    text-decoration:none;

    transition:color .25s ease;

}

.mb2b-header__nav a:hover{

    color:#FFA300;

}

/* ==========================================================================
   CTA
========================================================================== */

.mb2b-header__action{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

/* ==========================================================================
   MOBILE TOGGLE
========================================================================== */

.mb2b-header__mobile{

    display:none;

}

.mb2b-menu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    padding:0;

    border:none;

    background:transparent;

    color:#FFFFFF;

    cursor:pointer;

}

.mb2b-menu-toggle svg{

    width:24px;

    height:24px;

    color:#FFFFFF;

    stroke:#FFFFFF;

}

/* ==========================================================================
   MOBILE MENU BUTTON / CLOSE BUTTON
   Interaction normalization
========================================================================== */

.mb2b-menu-toggle,
.mb2b-menu-toggle:hover,
.mb2b-menu-toggle:focus,
.mb2b-menu-toggle:focus-visible,
.mb2b-menu-toggle:active,
.mb2b-mobile-nav__close,
.mb2b-mobile-nav__close:hover,
.mb2b-mobile-nav__close:focus,
.mb2b-mobile-nav__close:focus-visible,
.mb2b-mobile-nav__close:active {

    border: 0 !important;

    outline: none !important;

    box-shadow: none !important;

    -webkit-appearance: none;

    appearance: none;

}

.mb2b-menu-toggle,
.mb2b-mobile-nav__close {

    background: transparent;

}

.mb2b-menu-toggle:focus-visible,
.mb2b-mobile-nav__close:focus-visible {

    outline: none !important;

    box-shadow: none !important;

}

/* ==========================================================================
   MOBILE MENU / CLOSE — FINAL INTERACTION RESET
========================================================================== */

.mb2b-menu-toggle,
.mb2b-menu-toggle:hover,
.mb2b-menu-toggle:focus,
.mb2b-menu-toggle:focus-visible,
.mb2b-menu-toggle:active,
.mb2b-mobile-nav__close,
.mb2b-mobile-nav__close:hover,
.mb2b-mobile-nav__close:focus,
.mb2b-mobile-nav__close:focus-visible,
.mb2b-mobile-nav__close:active {

    background: transparent !important;

    border: 0 !important;

    border-color: transparent !important;

    outline: 0 !important;

    box-shadow: none !important;

    color: #FFFFFF !important;

}

.mb2b-menu-toggle svg,
.mb2b-mobile-nav__close svg {

    color: #FFFFFF !important;

    stroke: #FFFFFF !important;

}

.mb2b-menu-toggle:hover svg,
.mb2b-menu-toggle:focus svg,
.mb2b-menu-toggle:focus-visible svg,
.mb2b-mobile-nav__close:hover svg,
.mb2b-mobile-nav__close:focus svg,
.mb2b-mobile-nav__close:focus-visible svg {

    color: #FFFFFF !important;

    stroke: #FFFFFF !important;

}

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

.mb2b-header.is-scrolled{

    position:fixed;

    background:#112C62;

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

    animation:mb2bHeader .35s ease;

}

@keyframes mb2bHeader{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}

/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width:1024px){

    .mb2b-header{

        height:72px;

    }

    /*
    |--------------------------------------------------------------------------
    | MOBILE/TABLET LOGO
    |--------------------------------------------------------------------------
    |
    | Elementor mobile logo control mengambil alih ukuran ini.
    | Desktop tidak lagi menentukan ukuran logo pada breakpoint ini.
    |
    */

    .mb2b-header__logo img{

        height:38px;

    }

    .mb2b-header__nav{

        display:none;

    }

    .mb2b-header__action{

        display:none;

    }

    .mb2b-header__mobile{

        display:flex;

        align-items:center;

        margin-left:auto;

    }

}

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

@media (max-width:767px){

    .mb2b-header{

        height:72px;

    }

    .mb2b-header__logo img{

        height:38px;

    }

}

/* ==========================================================================
   SMALL MOBILE
========================================================================== */

@media (max-width:480px){

    .mb2b-header{

        height:68px;

    }

    .mb2b-header__logo img{

        height:34px;

    }

    .mb2b-menu-toggle{

        width:42px;

        height:42px;

    }

}