/* =========================================================
   RUANG.TRADERS
   CLEAN & RESPONSIVE NAVBAR
   Versi 20260909
   Tidak mengubah fungsi sistem
   ========================================================= */


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

.nav {
    position: relative !important;
    z-index: 1000 !important;

    display: flex !important;
    flex-direction: row !important;

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

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

    padding-left: clamp(28px, 6vw, 90px) !important;
    padding-right: clamp(28px, 6vw, 90px) !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border-bottom: 1px solid var(--line) !important;
}


/* =========================================================
   BRAND
   ========================================================= */

.nav > .brand {
    display: inline-flex !important;

    flex-direction: row !important;

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

    gap: 11px !important;

    width: auto !important;
    min-width: 0 !important;

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

    text-decoration: none !important;
}


.nav > .brand img {
    display: block !important;

    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    max-width: 40px !important;
    max-height: 40px !important;

    flex: 0 0 40px !important;

    object-fit: contain !important;

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


.nav > .brand > span {
    display: inline-block !important;

    width: auto !important;

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

    color: var(--ink) !important;

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

    line-height: 1.2 !important;

    white-space: nowrap !important;
}


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

.nav > nav {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 28px !important;

    width: auto !important;

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

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


.nav > nav > a,
.nav > nav > button {
    display: inline-flex !important;

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

    width: auto !important;

    min-width: 0 !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 7px 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #47514c !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

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


.nav > nav > a:hover,
.nav > nav > button:hover {
    color: var(--green-dark) !important;

    transform: translateY(-1px) !important;
}


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

/*
   Kita TIDAK lagi bergantung pada span.
   Garis hamburger dibuat menggunakan pseudo-element.
   Ini mencegah bentrok dengan CSS lama.
*/

#responsiveMenuBtn {
    display: none !important;

    position: relative !important;

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

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

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

    flex: 0 0 42px !important;

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

    border: 1px solid #dfe5e1 !important;

    border-radius: 11px !important;

    background: #ffffff !important;

    color: transparent !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


/* Garis hamburger */

#responsiveMenuBtn::before,
#responsiveMenuBtn::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;

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

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

    border: 0 !important;

    border-radius: 999px !important;

    background: #111714 !important;

    transform: translateX(-50%) !important;

    transition:
        transform .2s ease,
        top .2s ease !important;
}


/* Garis pertama */

#responsiveMenuBtn::before {
    top: 15px !important;

    box-shadow:
        0 7px 0 #111714,
        0 14px 0 #111714 !important;
}


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

#responsiveMenuBtn.is-open::before {
    top: 20px !important;

    box-shadow: none !important;

    transform:
        translateX(-50%)
        rotate(45deg) !important;
}


#responsiveMenuBtn.is-open::after {
    top: 20px !important;

    transform:
        translateX(-50%)
        rotate(-45deg) !important;
}


/* span lama tidak digunakan */

#responsiveMenuBtn span {
    display: none !important;
}


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

@media (max-width: 760px) {

    .nav {
        position: sticky !important;

        top: 0 !important;

        z-index: 1000 !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

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

        padding-left: 18px !important;
        padding-right: 18px !important;

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

        border-bottom: 1px solid var(--line) !important;

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }


    /* -------------------------
       BRAND MOBILE
       ------------------------- */

    .nav > .brand {
        display: inline-flex !important;

        flex-direction: row !important;

        align-items: center !important;

        gap: 10px !important;

        flex: 1 1 auto !important;

        width: auto !important;

        min-width: 0 !important;
    }


    .nav > .brand img {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;

        max-width: 34px !important;
        max-height: 34px !important;

        flex: 0 0 34px !important;
    }


    .nav > .brand > span {
        display: inline-block !important;

        font-size: 17px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    /* -------------------------
       HAMBURGER MOBILE
       ------------------------- */

    #responsiveMenuBtn {
        display: block !important;

        position: relative !important;

        flex: 0 0 42px !important;

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

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

        margin-left: 12px !important;
    }


    /* -------------------------
       NAV MOBILE
       ------------------------- */

    .nav > nav {
        position: absolute !important;

        top: calc(100% + 1px) !important;

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

        display: none !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        gap: 3px !important;

        width: 100% !important;

        padding: 10px 16px 16px !important;

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

        border-top: 0 !important;

        border-right: 0 !important;
        border-left: 0 !important;

        border-bottom: 1px solid var(--line) !important;

        box-shadow:
            0 18px 40px rgba(16, 21, 19, .09) !important;

        box-sizing: border-box !important;

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }


    .nav > nav.is-open {
        display: flex !important;
    }


    /* -------------------------
       ITEM MOBILE
       ------------------------- */

    .nav > nav > a,
    .nav > nav > button {
        display: flex !important;

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

        width: 100% !important;

        min-height: 46px !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        border: 0 !important;

        border-radius: 9px !important;

        background: transparent !important;

        color: #39423e !important;

        font-size: 15px !important;
        font-weight: 500 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    .nav > nav > a:hover,
    .nav > nav > button:hover {
        background: #f1f7f4 !important;

        color: var(--green-dark) !important;

        transform: none !important;
    }


    /* -------------------------
       LOGOUT
       ------------------------- */

    .nav > nav > button {
        margin-top: 5px !important;

        padding-top: 14px !important;

        border-top: 1px solid var(--line) !important;

        border-radius: 0 !important;
    }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .nav > .brand img {
        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;
        min-height: 32px !important;

        max-width: 32px !important;
        max-height: 32px !important;

        flex-basis: 32px !important;
    }


    .nav > .brand > span {
        font-size: 16px !important;
    }


    #responsiveMenuBtn {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        max-width: 40px !important;
        max-height: 40px !important;

        flex-basis: 40px !important;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #responsiveMenuBtn::before,
    #responsiveMenuBtn::after,
    .nav > nav > a,
    .nav > nav > button {
        transition: none !important;
    }

}




/* =========================================================
   ADMIN MENU
   Admin hanya boleh terlihat jika sistem menghapus [hidden]
   Untuk user biasa tetap tersembunyi.
   ========================================================= */

[data-admin-link][hidden] {
    display: none !important;
}


/* Jika user biasa, jangan pernah tampilkan menu Admin */
.nav > nav > a[data-admin-link][hidden] {
    display: none !important;
}