:root{
    --bg-krem: #FDFBF4;
    --cokelat-tua: #5C3200;
    --cokelat-muda: #A05C07;
    --teks-gelap: #2D2D2D;
}

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

.custom-navbar{
    background: rgba(253, 251, 244, 0.96);
    backdrop-filter: blur(10px);
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: 0.3s ease;
}

.custom-navbar .container{
    max-width: 1150px;
}

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

.navbar-brand{
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cokelat-tua);
    text-decoration: none;
    margin: 0;
    padding: 0;
}

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

.navbar-nav{
    gap: 8px;
}

.nav-link{
    color: var(--teks-gelap);
    font-weight: 500;
    font-size: 0.96rem;
    padding: 8px 10px;
    transition: 0.25s ease;
}

.nav-link:hover{
    color: var(--cokelat-muda);
}

/* =========================
   TOGGLER
========================= */

.navbar-toggler{
    border: none;
    box-shadow: none;
    padding: 4px 8px;
}

.navbar-toggler .navbar-toggler-icon {
    filter: none;
}

.custom-navbar .container {
    padding-left: 18px;
    padding-right: 18px;
}

@media (max-width: 767px) {
    .navbar-brand {
        font-size: 1.15rem;
    }

    .navbar-nav {
        gap: 0;
    }

    .nav-link {
        display: block;
        width: 100%;
        padding: 12px 0;
    }

    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        padding: 18px;
    }
}

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

@media (max-width: 991px){
    .custom-navbar{
        padding: 8px 0;
    }
    .navbar-collapse{
        margin-top: 12px;
        background: white;
        padding: 14px;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    }
    .navbar-nav{
        gap: 4px;
    }
    .nav-link{
        width: 100%;
    }
}