/* =========================================================
   BETRACOM HEADER + MEGA MENU
   VERSION FINAL
========================================================= */



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

.bt-header,
.bt-header *,
.bt-header *::before,
.bt-header *::after {
    box-sizing: border-box;
}



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

.bt-header {

    position: sticky;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 999999;

    background:
        linear-gradient(
            135deg,
            #07131f 0%,
            #091b2a 50%,
            #07131f 100%
        );

    border-top: 2px solid #243543;

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

    box-shadow:
        0 7px 24px rgba(0,0,0,.18);

    transition:
        background .25s ease,
        box-shadow .25s ease;
}


/* HEADER SAAT SCROLL */

.bt-header.bt-scrolled {

    background:
        linear-gradient(
            135deg,
            #06111b 0%,
            #071a28 50%,
            #06111b 100%
        );

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


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

.bt-header-inner {

    position: relative;

    width: 100%;

    max-width: 1400px;

    min-height: 72px;

    margin: 0 auto;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    overflow: visible;
}


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

.bt-logo {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    color: #fff;

    text-decoration: none;
}

.bt-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    color: #fff;
    text-decoration: none;
}


/* LOGO */
.bt-logo img {
    width: 43px;
    height: 43px;
    display: block;
    object-fit: contain;
}


/* AREA TEKS */
.bt-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}


/* PT BETRACOM */
.bt-logo-text strong {
    display: block;
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.05px;
}


/* GEMILANG NUSA */
.bt-logo-text small {
    display: block;
    margin-top: 4px;
    color: #8797a4;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.05px;
    line-height: 1;
}


/* LOOKING FOR GREAT PEOPLE */
.bt-logo-text em {
    display: block;
    margin-top: 6px;
    color: #c7a35d;
    font-size: 7px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.8px;
    line-height: 1;
    white-space: nowrap;
}


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

.bt-navbar {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1px;

    margin-left: 28px;

    overflow: visible;
}


/*
   PENTING:
   Jangan pakai position:relative pada .bt-nav-item.

   Mega menu harus dihitung dari header,
   bukan dari posisi tombol Kemnaker.
*/

.bt-nav-item {

    position: static;

    flex-shrink: 0;
}


/* =========================================================
   NAV LINK + BUTTON
========================================================= */

.bt-nav-link,
.bt-nav-button {

    position: relative;

    height: 42px;

    padding:
        0 9px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border: 0;

    outline: none;

    background: transparent;

    color: #aebbc4;

    font-family: inherit;

    font-size: 11px;

    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.bt-nav-link:hover,
.bt-nav-button:hover {

    color: #ffffff;
}


.bt-nav-item.active > .bt-nav-button {

    color: #ffffff;
}


/* =========================================================
   ARROW
========================================================= */

.bt-arrow {

    display: inline-block;

    color: #80909c;

    font-size: 9px;

    line-height: 1;

    transition:
        transform .2s ease,
        color .2s ease;
}


.bt-nav-item.active
.bt-arrow {

    color: #ffffff;

    transform:
        rotate(180deg);
}


/* =========================================================
   MEGA MENU
   CENTER TERHADAP HEADER
========================================================= */

.bt-mega-menu {

    position: absolute;

    top: calc(100% + 1px);

    left: 50%;

    width:
        min(
            1120px,
            calc(100vw - 40px)
        );

    height: auto;

    min-height: 420px;

    display: grid;

    grid-template-columns:
        215px minmax(0, 1fr);

    background: #ffffff;

    border:
        1px solid #e4e9ed;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 25px 65px rgba(0,0,0,.24);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(8px);

    transform-origin:
        top center;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

    z-index: 999999;
}


/* OPEN */

.bt-nav-item.active
> .bt-mega-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   SIDEBAR
========================================================= */

.bt-mega-sidebar {

    min-width: 0;

    padding:
        18px 0;

    background:
        #f6f8f9;

    border-right:
        1px solid #e5eaed;

    overflow-y: auto;

    scrollbar-width: thin;
}


/* LABEL */

.bt-sidebar-label {

    padding:
        0 21px 9px;

    color: #98a4ad;

    font-size: 8.5px;

    font-weight: 700;

    letter-spacing: 1px;

    line-height: 1.2;
}


/* =========================================================
   SIDEBAR ITEM
========================================================= */

.bt-side-item,
.bt-side-link {

    position: relative;

    width: 100%;

    min-height: 53px;

    padding:
        6px 15px 6px 20px;

    display: grid;

    grid-template-columns:
        32px minmax(0,1fr) 8px;

    align-items: center;

    gap: 8px;

    border: 0;

    outline: none;

    background: transparent;

    color: #53616c;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .16s ease,
        color .16s ease;
}


.bt-side-item:hover,
.bt-side-link:hover {

    background:
        #edf1f3;
}


/* ACTIVE */

.bt-side-item.active {

    background:
        #ffffff;

    color:
        #0768c8;
}


.bt-side-item.active::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: 3px;

    background:
        #0768c8;
}


/* =========================================================
   SIDE ICON
========================================================= */

.bt-side-icon {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background:
        #edf1f3;

    color:
        #687782;

    font-size: 13px;

    line-height: 1;
}


.bt-side-item.active
.bt-side-icon {

    background:
        #edf5ff;

    color:
        #0768c8;
}


/* =========================================================
   SIDE TEXT
========================================================= */

.bt-side-text strong,
.bt-side-link strong {

    display: block;

    margin: 0 0 2px;

    color: inherit;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.25;
}


.bt-side-text small,
.bt-side-link small {

    display: block;

    color:
        #99a4ac;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.25;
}


/* =========================================================
   SIDE ARROW
========================================================= */

.bt-side-arrow {

    color:
        #98a4ac;

    font-size: 11px;

    line-height: 1;
}


/* =========================================================
   MEGA CONTENT
========================================================= */

.bt-mega-content {

    min-width: 0;

    padding:
        27px 30px 23px;

    background:
        #ffffff;

    overflow: hidden;
}


/* =========================================================
   PANEL
========================================================= */

.bt-mega-panel {

    display: none;

    width: 100%;

    animation:
        btMegaFade .18s ease;
}


.bt-mega-panel.active {

    display: block;
}


@keyframes btMegaFade {

    from {

        opacity: 0;

        transform:
            translateY(4px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   MEGA HEADING
========================================================= */

.bt-mega-heading {

    margin-bottom: 18px;

    padding-bottom: 14px;

    border-bottom:
        1px solid #edf0f2;
}


.bt-mega-heading h3 {

    margin:
        0 0 5px;

    color:
        #17222c;

    font-size:
        19px;

    font-weight:
        700;

    line-height:
        1.25;

    letter-spacing:
        -.25px;
}


.bt-mega-heading p {

    margin:
        0;

    color:
        #77848d;

    font-size:
        10px;

    font-weight:
        400;

    line-height:
        1.5;
}


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

.bt-menu-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    column-gap:
        27px;

    row-gap:
        19px;

    align-items: start;
}


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

.bt-menu-column {

    min-width: 0;
}


.bt-menu-column h4 {

    margin:
        0 0 7px;

    padding-bottom:
        6px;

    border-bottom:
        1px solid #e7ecef;

    color:
        #8997a2;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        .85px;

    text-transform:
        uppercase;
}


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

.bt-menu-column a {

    position: relative;

    display: block;

    margin: 0;

    padding:
        3.5px 0 3.5px 12px;

    color:
        #53616c;

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.4;

    text-decoration:
        none;

    transition:
        color .15s ease,
        transform .15s ease;
}


.bt-menu-column a::before {

    content: "";

    position: absolute;

    left: 0;

    top:
        9px;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #cfd6db;

    transition:
        background .15s ease;
}


.bt-menu-column a:hover {

    color:
        #0768c8;

    transform:
        translateX(2px);
}


.bt-menu-column a:hover::before {

    background:
        #0768c8;
}


/* =========================================================
   BNSP
========================================================= */

.bt-bnsp-menu {

    min-height:
        420px;
}


/* =========================================================
   SIMPLE DROPDOWN — OFFSHORE
========================================================= */

.bt-simple-menu {

    position: absolute;

    top:
        calc(100% + 7px);

    left:
        50%;

    width:
        215px;

    padding:
        7px;

    background:
        #ffffff;

    border:
        1px solid #e5e9ec;

    border-radius:
        10px;

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

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateX(-50%)
        translateY(7px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

    z-index:
        999999;
}


.bt-nav-item.active
> .bt-simple-menu {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateX(-50%)
        translateY(0);
}


.bt-simple-menu a {

    display:
        block;

    width:
        100%;

    padding:
        9px 11px;

    color:
        #53616c;

    font-size:
        10.5px;

    font-weight:
        500;

    line-height:
        1.35;

    text-decoration:
        none;

    border-radius:
        6px;

    transition:
        background .15s ease,
        color .15s ease;
}


.bt-simple-menu a:hover {

    color:
        #0768c8;

    background:
        #f2f6f9;
}


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

.bt-header-cta {

    flex-shrink: 0;

    margin-left:
        13px;

    padding:
        10px 15px;

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

    border-radius:
        7px;

    background:
        #071f38;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;

    text-decoration:
        none;

    box-shadow:
        0 6px 18px rgba(7,104,200,.23);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.bt-header-cta:hover {

    background:
        #0758a9;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 22px rgba(7,104,200,.3);
}


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

.bt-mobile-toggle {

    display:
        none;

    width:
        40px;

    height:
        40px;

    margin-left:
        auto;

    padding:
        0;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    cursor:
        pointer;
}


.bt-mobile-toggle span {

    display:
        block;

    width:
        21px;

    height:
        2px;

    margin:
        4px auto;

    border-radius:
        2px;

    background:
        #ffffff;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


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

@media (max-width: 1200px) {

    .bt-header-inner {

        padding:
            0 18px;
    }


    .bt-navbar {

        margin-left:
            15px;
    }


    .bt-nav-link,
    .bt-nav-button {

        padding:
            0 6px;

        font-size:
            10px;
    }


    .bt-header-cta {

        margin-left:
            8px;

        padding:
            9px 11px;

        font-size:
            8px;
    }


    .bt-mega-menu {

        width:
            calc(100vw - 30px);
    }

}


/* =========================================================
   MOBILE MENU — NEW DESIGN
========================================================= */

@media (max-width: 900px) {

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

    .bt-header {
        position: sticky;
        top: 0;
        z-index: 999999;
    }


    /* ===============================
       MOBILE NAV PANEL
    =============================== */

    .bt-navbar {
        position: fixed !important;

        top: 0;
        right: 0;

        width: min(370px, 88vw);
        height: 100vh;

        margin: 0 !important;

        padding: 90px 18px 30px !important;

        display: block !important;

        overflow-y: auto;

        background:
            linear-gradient(
                160deg,
                #061525 0%,
                #081B33 45%,
                #0B2F52 100%
            ) !important;

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

        border-radius: 22px 0 0 22px;

        box-shadow:
            -25px 0 70px rgba(0,0,0,.40);

        transform: translateX(105%) !important;

        opacity: 0;

        visibility: hidden;

        transition:
            transform .35s cubic-bezier(.4,0,.2,1),
            opacity .25s ease,
            visibility .35s ease;

        z-index: 1000000 !important;
    }


    /* MENU TERBUKA */

    .bt-navbar.active {
        transform: translateX(0) !important;

        opacity: 1;

        visibility: visible;
    }


    /* ===============================
       GARIS / DECORATION ATAS
    =============================== */

    .bt-navbar::before {
        content: "MENU";

        position: absolute;

        top: 32px;
        left: 22px;

        color: #ffffff;

        font-size: 11px;
        font-weight: 800;

        letter-spacing: 2px;

        opacity: .9;
    }


    .bt-navbar::after {
        content: "";

        position: absolute;

        top: 55px;
        left: 22px;
        right: 22px;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                rgba(92,174,255,.7),
                rgba(255,255,255,.08)
            );
    }


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

    .bt-nav-link,
    .bt-nav-button {

        width: 100%;

        min-height: 50px;

        height: auto;

        padding: 0 15px !important;

        display: flex !important;

        align-items: center;

        justify-content: space-between;

        border-radius: 10px;

        color: #EAF4FC !important;

        background: transparent !important;

        font-size: 13px !important;

        font-weight: 600;

        text-decoration: none;

        transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
    }


    /* HOVER */

    .bt-nav-link:hover,
    .bt-nav-button:hover {

        color: #ffffff !important;

        background:
            rgba(255,255,255,.08) !important;

        transform: translateX(3px);
    }


    /* ACTIVE */

    .bt-nav-item.active > .bt-nav-button {

        color: #ffffff !important;

        background:
            linear-gradient(
                90deg,
                rgba(7,104,200,.75),
                rgba(7,104,200,.25)
            ) !important;
    }


    /* ===============================
       ARROW
    =============================== */

    .bt-arrow {

        color: #8DB9DC !important;

        font-size: 11px;

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


    .bt-nav-item.active > .bt-nav-button .bt-arrow {

        color: #ffffff !important;

        transform: rotate(180deg);
    }


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

    .bt-mega-menu {

        position: static !important;

        width: 100% !important;

        min-height: 0 !important;

        margin: 5px 0 10px !important;

        padding: 0 !important;

        display: none;

        grid-template-columns: 1fr !important;

        background:
            rgba(0,0,0,.18) !important;

        border:
            1px solid rgba(255,255,255,.08) !important;

        border-radius: 12px !important;

        box-shadow: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;

        overflow: hidden !important;
    }


    .bt-nav-item.active > .bt-mega-menu {

        display: grid !important;

        animation:
            mobileMegaOpen .25s ease;
    }


    @keyframes mobileMegaOpen {

        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    /* ===============================
       SIDEBAR
    =============================== */

    .bt-mega-sidebar {

        max-height: 280px;

        padding: 8px 0 !important;

        background:
            rgba(7,104,200,.12) !important;

        border: 0 !important;
    }


    .bt-sidebar-label {

        padding:
            12px 14px 8px !important;

        color: #8DB9DC !important;

        font-size: 9px !important;

        letter-spacing: 1.2px;
    }


    /* ===============================
       SIDEBAR ITEM
    =============================== */

    .bt-side-item,
    .bt-side-link {

        min-height: 48px !important;

        padding:
            5px 12px !important;

        color: #E5F1FA !important;

        background: transparent !important;
    }


    .bt-side-item:hover,
    .bt-side-link:hover {

        background:
            rgba(255,255,255,.08) !important;

        color: #ffffff !important;
    }


    .bt-side-item.active {

        background:
            #0768C8 !important;

        color: #ffffff !important;
    }


    .bt-side-icon {

        width: 30px !important;
        height: 30px !important;

        background:
            rgba(255,255,255,.10) !important;

        color: #ffffff !important;
    }


    .bt-side-item.active .bt-side-icon {

        background:
            rgba(255,255,255,.18) !important;

        color: #ffffff !important;
    }


    .bt-side-text strong,
    .bt-side-link strong {

        color: #ffffff !important;
    }


    .bt-side-text small,
    .bt-side-link small {

        color: #A9C1D4 !important;
    }


    .bt-side-arrow {

        color: #9CC4E2 !important;
    }


    /* ===============================
       MEGA CONTENT
    =============================== */

    .bt-mega-content {

        padding:
            18px 14px 22px !important;

        background:
            #081B33 !important;
    }


    .bt-mega-heading {

        margin-bottom: 15px;

        padding-bottom: 12px;

        border-color:
            rgba(255,255,255,.12) !important;
    }


    .bt-mega-heading h3 {

        color: #ffffff !important;

        font-size: 16px !important;
    }


    .bt-mega-heading p {

        color: #AFC3D4 !important;

        font-size: 9.5px !important;
    }


    /* ===============================
       COLUMN
    =============================== */

    .bt-menu-grid {

        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }


    .bt-menu-column h4 {

        color: #8DB9DC !important;

        border-color:
            rgba(255,255,255,.10) !important;
    }


    .bt-menu-column a {

        color: #DCEAF5 !important;

        font-size: 11px !important;
    }


    .bt-menu-column a:hover {

        color: #ffffff !important;
    }


    /* ===============================
       SIMPLE DROPDOWN
    =============================== */

    .bt-simple-menu {

        position: static !important;

        width: 100% !important;

        margin: 5px 0 10px !important;

        padding: 5px !important;

        display: none;

        background:
            rgba(0,0,0,.18) !important;

        border:
            1px solid rgba(255,255,255,.08) !important;

        border-radius: 12px !important;

        box-shadow: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;
    }


    .bt-nav-item.active > .bt-simple-menu {

        display: block !important;
    }


    .bt-simple-menu a {

        padding:
            11px 13px !important;

        color: #DCEAF5 !important;

        font-size: 11px !important;
    }


    .bt-simple-menu a:hover {

        background:
            rgba(255,255,255,.08) !important;

        color: #ffffff !important;
    }


    /* ===============================
       HAMBURGER / CLOSE BUTTON
    =============================== */

    .bt-mobile-toggle {

    display: flex !important;

    position: absolute !important;

    top: 50%;
    right: 15px;

    transform: translateY(-50%);

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center;
    justify-content: center;

    background: #04284d !important;

    border:
        1px solid rgba(255,255,255,.15) !important;

    border-radius: 10px !important;

    z-index: 1000005 !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.25);

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


    .bt-mobile-toggle span {

        width: 20px !important;

        height: 2px !important;

        margin: 4px auto !important;

        background: #ffffff !important;

        transition:
            transform .25s ease,
            opacity .2s ease;
    }


    /* ===============================
       HAMBURGER → X
    =============================== */

    .bt-mobile-toggle.active span:nth-child(1) {

        transform:
            translateY(6px)
            rotate(45deg);
    }


    .bt-mobile-toggle.active span:nth-child(2) {

        opacity: 0;
    }


    .bt-mobile-toggle.active span:nth-child(3) {

        transform:
            translateY(-6px)
            rotate(-45deg);
    }

}


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

@media (max-width: 500px) {

    .bt-navbar {

        width: 92vw;

        border-radius:
            18px 0 0 18px;
    }

    .bt-mobile-toggle {

        right: 12px;
    }

}
/* =========================================================
   MOBILE MENU + MEGA MENU BIRU
========================================================= */

@media (max-width: 900px) {

    /* PANEL MOBILE MENU */
    .bt-navbar {
        background: #081B33 !important;
    }

    /* SEMUA LINK MENU */
    .bt-nav-link,
    .bt-nav-button {
        color: #ffffff !important;
    }

    .bt-nav-link:hover,
    .bt-nav-button:hover {
        color: #ffffff !important;
        background: #0D3158 !important;
    }

    /* MENU YANG AKTIF */
    .bt-nav-item.active > .bt-nav-button {
        color: #ffffff !important;
        background: #0D3158 !important;
    }

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

    .bt-mega-menu {
        background: #081B33 !important;
    }

    /* SIDEBAR MEGA MENU */
    .bt-mega-sidebar {
        background: #0D3158 !important;
        border-color: rgba(255,255,255,.12) !important;
    }

    /* LABEL SIDEBAR */
    .bt-sidebar-label {
        color: #9DB6CC !important;
    }

    /* ITEM SIDEBAR */
    .bt-side-item,
    .bt-side-link {
        color: #ffffff !important;
        background: transparent !important;
    }

    .bt-side-item:hover,
    .bt-side-link:hover {
        color: #ffffff !important;
        background: #16446F !important;
    }

    /* ITEM AKTIF */
    .bt-side-item.active {
        color: #ffffff !important;
        background: #0768C8 !important;
    }

    .bt-side-item.active::before {
        background: #5CAEFF !important;
    }

    /* ICON SIDEBAR */
    .bt-side-icon {
        background: rgba(255,255,255,.10) !important;
        color: #ffffff !important;
    }

    .bt-side-item.active .bt-side-icon {
        background: rgba(255,255,255,.18) !important;
        color: #ffffff !important;
    }

    /* TEXT SIDEBAR */
    .bt-side-text small,
    .bt-side-link small {
        color: #AFC3D4 !important;
    }

    /* ARROW SIDEBAR */
    .bt-side-arrow {
        color: #B8CCDC !important;
    }

    /* =====================================================
       KONTEN MEGA MENU
    ===================================================== */

    .bt-mega-content {
        background: #081B33 !important;
    }

    .bt-mega-heading {
        border-color: rgba(255,255,255,.12) !important;
    }

    .bt-mega-heading h3 {
        color: #ffffff !important;
    }

    .bt-mega-heading p {
        color: #AFC3D4 !important;
    }

    /* JUDUL KOLOM */
    .bt-menu-column h4 {
        color: #8FB1CE !important;
        border-color: rgba(255,255,255,.12) !important;
    }

    /* LINK DALAM MEGA MENU */
    .bt-menu-column a {
        color: #D9E7F2 !important;
    }

    .bt-menu-column a:hover {
        color: #ffffff !important;
        transform: translateX(3px);
    }

    .bt-menu-column a::before {
        background: #5CAEFF !important;
    }

    .bt-menu-column a:hover::before {
        background: #ffffff !important;
    }

    /* =====================================================
       SIMPLE DROPDOWN MOBILE
    ===================================================== */

    .bt-simple-menu {
        background: #081B33 !important;
    }

    .bt-simple-menu a {
        color: #D9E7F2 !important;
    }

    .bt-simple-menu a:hover {
        color: #ffffff !important;
        background: #0D3158 !important;
    }

}
/* =========================================================
   MEGA MENU BIRU + TEKS PUTIH
   DESKTOP & MOBILE
========================================================= */

/* =========================
   MEGA MENU UTAMA
========================= */

.bt-mega-menu {
    background: #081B33 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 25px 65px rgba(0,0,0,.35) !important;
}


/* =========================
   SIDEBAR KATEGORI
========================= */

.bt-mega-sidebar {
    background: #0D3158 !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
}


/* LABEL KATEGORI */

.bt-sidebar-label {
    color: #AFC3D4 !important;
}


/* =========================
   ITEM SIDEBAR
========================= */

.bt-side-item,
.bt-side-link {
    color: #FFFFFF !important;
    background: transparent !important;
}


/* HOVER SIDEBAR */

.bt-side-item:hover,
.bt-side-link:hover {
    color: #FFFFFF !important;
    background: #164A7A !important;
}


/* ITEM AKTIF */

.bt-side-item.active {
    color: #FFFFFF !important;
    background: #0768C8 !important;
}


/* GARIS ITEM AKTIF */

.bt-side-item.active::before {
    background: #4EA5FF !important;
}


/* =========================
   ICON SIDEBAR
========================= */

.bt-side-icon {
    background: rgba(255,255,255,.10) !important;
    color: #FFFFFF !important;
}


.bt-side-item.active .bt-side-icon {
    background: rgba(255,255,255,.18) !important;
    color: #FFFFFF !important;
}


/* =========================
   TEKS SIDEBAR
========================= */

.bt-side-text strong,
.bt-side-link strong {
    color: #FFFFFF !important;
}


.bt-side-text small,
.bt-side-link small {
    color: #B7CADB !important;
}


/* =========================
   ARROW SIDEBAR
========================= */

.bt-side-arrow {
    color: #D5E4EF !important;
}


/* =========================
   KONTEN MEGA MENU
========================= */

.bt-mega-content {
    background: #081B33 !important;
}


/* =========================
   HEADING
========================= */

.bt-mega-heading {
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
}


.bt-mega-heading h3 {
    color: #FFFFFF !important;
}


.bt-mega-heading p {
    color: #B7CADB !important;
}


/* =========================
   JUDUL KOLOM
========================= */

.bt-menu-column h4 {
    color: #AFC3D4 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
}


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

.bt-menu-column a {
    color: #E5F0F8 !important;
}


.bt-menu-column a:hover {
    color: #FFFFFF !important;
    transform: translateX(3px);
}


/* BULLET LINK */

.bt-menu-column a::before {
    background: #5CAEFF !important;
}


.bt-menu-column a:hover::before {
    background: #FFFFFF !important;
}


/* =========================
   SIMPLE DROPDOWN
========================= */

.bt-simple-menu {
    background: #081B33 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}


.bt-simple-menu a {
    color: #E5F0F8 !important;
}


.bt-simple-menu a:hover {
    color: #FFFFFF !important;
    background: #164A7A !important;
}


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

@media (max-width: 900px) {

    /* PANEL MOBILE */
    .bt-navbar {
        background: #081B33 !important;
    }

    /* MENU UTAMA */
    .bt-nav-link,
    .bt-nav-button {
        color: #FFFFFF !important;
    }

    .bt-nav-link:hover,
    .bt-nav-button:hover {
        color: #FFFFFF !important;
        background: #0D3158 !important;
    }

    /* MENU AKTIF */
    .bt-nav-item.active > .bt-nav-button {
        color: #FFFFFF !important;
        background: #0D3158 !important;
    }

    /* MEGA MENU MOBILE */
    .bt-mega-menu {
        background: #081B33 !important;
    }

    .bt-mega-sidebar {
        background: #0D3158 !important;
    }

    .bt-mega-content {
        background: #081B33 !important;
    }

    /* SIMPLE DROPDOWN */
    .bt-simple-menu {
        background: #081B33 !important;
    }

    .bt-simple-menu a {
        color: #FFFFFF !important;
    }

    .bt-simple-menu a:hover {
        background: #164A7A !important;
        color: #FFFFFF !important;
    }
}

/* =========================================
   PERBESAR TEKS NAVBAR DESKTOP
   ========================================= */
.bt-nav-link,
.bt-nav-button {
    font-size: 12px;
}

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

.bt-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;

    background:
        linear-gradient(
            135deg,
            #07131f 0%,
            #091b2a 50%,
            #07131f 100%
        );

    border-top: 2px solid #243543;
    border-bottom: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 7px 24px rgba(0,0,0,.18);

    transition:
        background .25s ease,
        box-shadow .25s ease;
}
/* =========================================================
   BETRACOM MOBILE MENU - FINAL OVERRIDE
========================================================= */

@media (max-width: 900px) {

    /* HEADER */

    .bt-header {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 74px !important;

        z-index: 999999 !important;
    }


    .bt-header-inner {
        position: relative !important;

        width: 100% !important;
        height: 74px !important;
        min-height: 74px !important;
    }


    /* =========================================
       HAMBURGER
    ========================================= */

    .bt-mobile-toggle {
        display: flex !important;

        position: absolute !important;

        top: 50% !important;
        right: 15px !important;

        transform: translateY(-50%) !important;

        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        background: #04284d !important;

        border:
            1px solid rgba(255,255,255,.15) !important;

        border-radius: 10px !important;

        z-index: 1000005 !important;

        cursor: pointer !important;

        pointer-events: auto !important;
    }


    .bt-mobile-toggle span {
        display: block !important;

        width: 20px !important;
        height: 2px !important;

        margin: 4px auto !important;

        background: #ffffff !important;

        pointer-events: none !important;
    }


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

    .bt-navbar {
        position: fixed !important;

        top: 74px !important;
        right: 0 !important;
        bottom: 0 !important;

        width: min(370px, 88vw) !important;
        height: calc(100vh - 74px) !important;

        margin: 0 !important;

        padding: 25px 18px 30px !important;

        display: block !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: #081B33 !important;

        transform: translateX(105%) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 1000000 !important;

        transition:
            transform .35s ease,
            opacity .25s ease,
            visibility .35s ease !important;
    }


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

    .bt-navbar.mobile-open {
        transform: translateX(0) !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


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

    .bt-nav-link,
    .bt-nav-button {
        width: 100% !important;

        min-height: 50px !important;

        height: auto !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 0 15px !important;

        color: #ffffff !important;

        background: transparent !important;

        font-size: 13px !important;

        border-radius: 10px !important;

        cursor: pointer !important;
    }


    .bt-nav-link:hover,
    .bt-nav-button:hover {
        background: #0D3158 !important;
    }


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

    .bt-mega-menu {
        position: static !important;

        width: 100% !important;

        min-height: 0 !important;

        margin: 5px 0 10px !important;

        padding: 0 !important;

        display: none !important;

        grid-template-columns: 1fr !important;

        background: #081B33 !important;

        border:
            1px solid rgba(255,255,255,.10) !important;

        border-radius: 12px !important;

        box-shadow: none !important;

        transform: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    .bt-nav-item.active > .bt-mega-menu {
        display: grid !important;
    }


    /* =========================================
       SIMPLE DROPDOWN
    ========================================= */

    .bt-simple-menu {
        position: static !important;

        width: 100% !important;

        display: none !important;

        margin: 5px 0 10px !important;

        background: #081B33 !important;

        transform: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    .bt-nav-item.active > .bt-simple-menu {
        display: block !important;
    }


    /* =========================================
       HAMBURGER X
    ========================================= */

    .bt-mobile-toggle.active span:nth-child(1) {
        transform:
            translateY(6px)
            rotate(45deg);
    }

    .bt-mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .bt-mobile-toggle.active span:nth-child(3) {
        transform:
            translateY(-6px)
            rotate(-45deg);
    }

}
/* =====================================================
   MOBILE HAMBURGER - FINAL FIX
===================================================== */

@media (max-width: 900px) {

    .bt-mobile-toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        position: absolute !important;
        top: 50% !important;
        right: 15px !important;

        width: 42px !important;
        height: 42px !important;

        padding: 0 !important;
        margin: 0 !important;

        transform: translateY(-50%) !important;

        background: #04284d !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 10px !important;

        z-index: 1000005 !important;

        cursor: pointer !important;
    }


    /* 3 GARIS HAMBURGER */
    .bt-mobile-toggle span {
        display: block !important;

        position: relative !important;

        width: 20px !important;
        height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        border-radius: 2px !important;

        opacity: 1 !important;

        transform: none !important;

        transition:
            transform .25s ease,
            opacity .25s ease !important;
    }


    /* =================================================
       SAAT MENU TERBUKA → JADI X
    ================================================= */

    .bt-mobile-toggle.active {
        background: #0a3158 !important;
    }

    .bt-mobile-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .bt-mobile-toggle.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .bt-mobile-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

}
/* =====================================================
   FINAL FIX - JARAK MENU DAN HOME
===================================================== */

@media (max-width: 900px) {

    .bt-navbar {
        padding-top: 95px !important;
        padding-right: 18px !important;
        padding-bottom: 30px !important;
        padding-left: 18px !important;
    }


    /* JUDUL MENU */
    .bt-navbar::before {
        content: "MENU" !important;

        position: absolute !important;

        top: 32px !important;
        left: 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 11px !important;
        font-weight: 800 !important;

        line-height: 1.2 !important;

        letter-spacing: 2px !important;

        opacity: .9 !important;
    }


    /* GARIS DI BAWAH MENU */
    .bt-navbar::after {
        content: "" !important;

        position: absolute !important;

        top: 55px !important;
        left: 22px !important;
        right: 22px !important;

        width: auto !important;
        height: 1px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: linear-gradient(
            90deg,
            rgba(92,174,255,.7),
            rgba(255,255,255,.08)
        ) !important;
    }


    /* HOME */
    .bt-navbar > .bt-nav-link:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;

        min-height: 50px !important;
        height: 50px !important;

        display: flex !important;
        align-items: center !important;

        line-height: 1 !important;
    }


    /* ITEM MENU LAINNYA */
    .bt-navbar > .bt-nav-item {
        margin: 0 !important;
        padding: 0 !important;
    }


    .bt-navbar .bt-nav-link,
    .bt-navbar .bt-nav-button {
        min-height: 50px !important;
        height: 50px !important;

        line-height: 1.2 !important;
    }

}
/* =====================================================
   HILANGKAN SCROLLBAR PADA MENU KEMNAKER
===================================================== */

@media (max-width: 900px) {

    .bt-mega-sidebar {
        overflow-y: auto !important;

        /* Firefox */
        scrollbar-width: none !important;

        /* IE / Edge lama */
        -ms-overflow-style: none !important;
    }

    /* Chrome, Edge, Safari */
    .bt-mega-sidebar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

}