/* =========================================================
   GLOBAL NAVBAR
   PT KROMO SAKTI MANDRAGUNA
   Sinkron dengan Homepage
   ========================================================= */


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    background: #17201a;
    color: rgba(255, 255, 255, 0.82);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.topbar-contact a {
    color:
        rgba(255, 255, 255, 0.88);
}


.topbar-contact a:hover {
    color: #a8d957;
}


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

.navbar {
    position: sticky;

    top: 0;

    z-index: 100;

    background: #ffffff;

    box-shadow:
        0 4px 20px
        rgba(
            23,
            32,
            26,
            0.07
        );

    border-bottom:
        1px solid #dfe8e1;
}


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

.navbar-inner {
    min-height: 76px;
}


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

.navbar-logo {
    color: #17201a;
}


.navbar-logo img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


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

.navbar-brand .brand-title {
    color: #17201a;

    font-size: 0.95rem;

    font-weight: 700;

    letter-spacing: 0.01em;
}


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

.navbar-menu {
    gap: 2rem;
}


.navbar-menu a {
    position: relative;

    color: #334039;

    font-size: 0.9rem;

    font-weight: 500;
}


/* underline animation */

.navbar-menu a::after {
    background: #0b5d1e;
}


/* hover + active */

.navbar-menu a:hover,
.navbar-menu a.active {
    color: #0b5d1e;
}


/* =========================================================
   TALK TO SALES
   Semua class lama diarahkan ke style yang sama
   ========================================================= */

.navbar-menu .nav-whatsapp,
.navbar-menu .about-nav-sales,
.navbar-menu .download-nav-sales,
.navbar-menu .navbar-sales-button,
.navbar-menu .contact-nav-sales {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        10px 16px;

    border-radius: 8px;

    background: #0b5d1e;

    color: #ffffff;

    font-size: 0.9rem;

    font-weight: 600;

    transition:
        0.2s ease;
}


/* icon / emoji */

.navbar-menu .nav-whatsapp span,
.navbar-menu .about-nav-sales span,
.navbar-menu .download-nav-sales span,
.navbar-menu .navbar-sales-button span,
.navbar-menu .contact-nav-sales span {

    line-height: 1;
}


/* hapus underline dari button */

.navbar-menu .nav-whatsapp::after,
.navbar-menu .about-nav-sales::after,
.navbar-menu .download-nav-sales::after,
.navbar-menu .navbar-sales-button::after,
.navbar-menu .contact-nav-sales::after {

    display: none;
}


/* hover */

.navbar-menu .nav-whatsapp:hover,
.navbar-menu .about-nav-sales:hover,
.navbar-menu .download-nav-sales:hover,
.navbar-menu .navbar-sales-button:hover,
.navbar-menu .contact-nav-sales:hover {

    background: #084716;

    color: #ffffff;

    transform:
        translateY(-1px);
}


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

.navbar-toggle span {
    background:
        #17201a;
}


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

@media (max-width: 1100px) {

    .navbar-menu {
        gap:
            1.2rem;
    }

}


@media (max-width: 900px) {

    .navbar-menu {
        gap:
            1rem;
    }

}


@media (max-width: 768px) {

    .navbar-inner {
        min-height:
            68px;
    }


    .navbar-logo img {
        width:
            42px;

        height:
            42px;
    }


    .navbar-menu {

        position: absolute;

        inset-inline: 0;

        top: 100%;

        background:
            #ffffff;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            0.75rem
            1.5rem
            1rem;

        transform-origin:
            top;

        transform:
            scaleY(0);

        opacity:
            0;

        pointer-events:
            none;

        border-top:
            1px solid #dfe8e1;

        box-shadow:
            0 12px 25px
            rgba(
                23,
                32,
                26,
                0.08
            );
    }


    .navbar-menu.open {

        transform:
            scaleY(1);

        opacity:
            1;

        pointer-events:
            auto;
    }


    .navbar-menu a {

        display:
            flex;

        align-items:
            center;

        min-height:
            44px;

        padding:
            8px 0;

        color:
            #334039;

        font-size:
            0.92rem;
    }


    .navbar-menu a::after {

        display:
            none;
    }


    .navbar-menu a:hover,
    .navbar-menu a.active {

        color:
            #0b5d1e;
    }


    .navbar-menu .nav-whatsapp,
    .navbar-menu .about-nav-sales,
    .navbar-menu .download-nav-sales,
    .navbar-menu .navbar-sales-button,
    .navbar-menu .contact-nav-sales {

        display:
            flex;

        justify-content:
            center;

        width:
            100%;

        box-sizing:
            border-box;

        margin-top:
            8px;

        padding:
            11px 14px;
    }


    .navbar-toggle {

        display:
            inline-flex;
    }

}