/* =========================================================
   NAVBAR — GLOBAL
========================================================= */
.navbar {
    position: relative;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(8, 8, 8, 0.78);
    border-bottom: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
}
.nav-container {
    width: min(var(--container), calc(100% - 48px));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
}

/* Dropdown */
.dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #1a1a1a;
            min-width: 220px;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.8);
            border-radius: 6px;
            z-index: 100002;
            overflow: hidden;
            border: 1px solid #333;
        }

        .dropdown-content a {
            color: #ffffff !important;
            padding: 12px 16px !important;
            text-decoration: none !important;
            display: block !important;
            text-align: left !important;
            font-size: 0.95rem !important;
            transition: background 0.2s;
            width: 100% !important;
            box-sizing: border-box;
        }

        .dropdown-content a:hover {
            background-color: #2b7a78 !important;
            color: #fff !important;
        }

        /* Dropdown dibuka melalui klik dengan class .open */
        .dropdown.open .dropdown-content {
            display: block;
        }

        /* Jangan buka dropdown hanya karena hover. */
        .dropdown:hover .dropdown-content {
            display: none;
        }

        .dropdown.open:hover .dropdown-content {
            display: block;
        }

        /* Tetap beri indikator visual bahwa tombol bisa dibuka */
        .dropdown > .nav-button {
            cursor: pointer;
        }


.logo { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:800; color:#fff; }
.logo-box { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--accent); color:#fff; font-size:13px; font-weight:800; }
.logo-image { width:50px; height:50px; max-width:50px; max-height:50px; object-fit:contain; display:block; }
.logo-text { width:auto; height:60px; object-fit:contain; }
.nav-menu { display:flex; align-items:center; gap:28px; }
.nav-menu a { position:relative; color:#fff; font-size:14px; font-weight:700; transition:color .2s ease; }
.nav-menu a:hover { color:#8bd879; }
.nav-menu a::after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:2px; background:#65b84f; transition:width .2s ease; }
.nav-menu a:hover::after { width:100%; }
.nav-menu a.nav-button::after { display:none; }
.nav-button { display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border:1px solid rgba(0,0,0,.7); border-radius:3px; background:linear-gradient(180deg,#63b94d 0%,#479b38 52%,#3c8530 100%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 rgba(0,0,0,.55); text-shadow:1px 2px 0 rgba(0,0,0,.42); }
.nav-button:hover { transform:translateY(-1px); filter:brightness(1.05); }
.hamburger { display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:54px; height:54px; padding:0; margin:0; border:2px solid #2f6f23; border-radius:3px; background:linear-gradient(to bottom,#5fbd46 0%,#4aa936 45%,#3b922b 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.25),0 3px 0 #1d4d16; cursor:pointer; appearance:none; }
.hamburger span { display:block; width:26px; height:3px; background:#fff; border:0; box-shadow:1px 1px 0 #222; transition:all .3s ease; }
.hamburger.active span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
@media (max-width:768px) {
    .nav-container { width:calc(100% - 32px); min-height:64px; }
    .nav-menu { display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:5px; padding:15px; background:rgba(12,12,12,.97); border:1px solid rgba(255,255,255,.14); border-radius:3px; box-shadow:0 10px 28px rgba(0,0,0,.4); }
    .nav-menu.active { display:flex; }
    .nav-menu a { width:100%; display:block; padding:12px 10px; text-align:center; }
    .nav-menu a::after { display:none; }
    .hamburger { display:flex; }
}
@media (min-width:769px) { .hamburger { display:none; } }