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

:root{
    --navbar-bg: #C8361D;
    --navbar-text: #ffffff;
}

/* Wrapper navbar */
nav.topnav{
    background: var(--navbar-bg);
    color: var(--navbar-text);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}

/* ===============================
   NAVBAR LINK ANIMATION (ADD ONLY)
=============================== */
nav.topnav .links a{
    position: relative;
    transition: opacity .25s ease, transform .25s ease;
}

/* underline animasi */
nav.topnav .links a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-6px;
    width:0;
    height:2px;
    background:rgba(255,255,255,.9);
    transform:translateX(-50%);
    transition:width .35s ease;
    border-radius:2px;
}

/* hover effect */
nav.topnav .links a:hover{
    opacity:1;
    transform:translateY(-2px);
}

nav.topnav .links a:hover::after{
    width:100%;
}

/* Container navbar */
nav.topnav .container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
nav.topnav .logo{
    display: flex;
    align-items: center;
}

nav.topnav .logo img{
    margin-left: 0;
}

/* Menu links */
nav.topnav .links{
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav.topnav .links a{
    color: var(--navbar-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}

nav.topnav .links a:hover{
    opacity: 0.8;
}

#page {
    will-change: opacity, transform;
}


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

/* hamburger */
.nav-toggle{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    width:32px;
    height:24px;
    flex-direction:column;
    justify-content:space-between;
}

.nav-toggle span{
    height:3px;
    width:100%;
    background:#fff;
    border-radius:3px;
    transition:.3s ease;
}

/* =========================================
   MOBILE MODE (COMPACT RIGHT MENU – PRO)
========================================= */
@media(max-width:600px){

    /* hamburger kecil & elegan */
    .nav-toggle{
        display:flex;
        width:20px;
        height:14px;
        padding:0;
        margin-left:auto;
        
    }

    .nav-toggle span{
        height:2px;
        width:100%;
        background:#fff;
        border-radius:2px;
    }

    .nav-toggle span:nth-child(2){
        margin:4px 0;
    }

    /* PANEL MENU KECIL DI KANAN */
    nav.topnav .links{
        position:fixed;
        top:16px;
        right:12px;                 /* posisi akhir */
        transform: translateX(120%);/* ⬅️ SEMBUNYI */
        
        width:max-content;
        min-width:180px;

        background:rgba(200,54,29,.96);
        backdrop-filter:blur(12px);
        flex-direction:column;
        align-items:flex-start;
        padding:12px 0;
        border-radius:14px 0 0 14px;
        box-shadow:-12px 16px 40px rgba(0,0,0,.25);

        transition:transform .35s cubic-bezier(.4,0,.2,1);
        z-index:999;
    }

    nav.topnav .links a{
        width:100%;
        padding:10px 22px;
        font-size:13px;
        font-weight:600;
        letter-spacing:.04em;
        border:none;
        opacity:.95;
        white-space:nowrap;
    }

    nav.topnav .links a:hover{
        background:rgba(255,255,255,.12);
        opacity:1;
    }

    nav.topnav.open .links{
        transform: translateX(0);   /* ⬅️ MUNCUL */
    }

    /* hamburger jadi X (proporsional) */
    nav.topnav.open .nav-toggle span:nth-child(1){
        transform:translateY(6px) rotate(45deg);
    }

    nav.topnav.open .nav-toggle span:nth-child(2){
        opacity:0;
    }

    nav.topnav.open .nav-toggle span:nth-child(3){
        transform:translateY(-6px) rotate(-45deg);
    }
}

body {
    overflow-x: hidden;
}