/*
 * File: navbar.css
 * Deskripsi: Styling untuk Navbar Oranye (Soft Gradient) - TATA LETAK FINAL
 * Fokus: Memastikan pemisahan yang jelas antara Logo | Menu | Search | Login.
 * CATATAN: Membutuhkan struktur HTML yang membagi konten menjadi: 
 * .logo-area, .nav-right-group, dan .nav-login-area.
 */

/* ======================================= */
/* 🍊 1. VARIABEL CSS (CUSTOM PROPERTIES) */
/* ======================================= */
:root {
    /* --- COLOR PALETTE --- */
    --color-primary: #f7931e;         /* Oranye Terang */
    --color-secondary: #ffb347;       /* Peach Muda */
    --color-dark: #333333;            /* Teks Gelap (Mudah Dibaca) */
    --color-light: #ffffff;           /* Teks Putih */
    --bg-gradient: linear-gradient(to right, #ff9800, #ffb347);
    --bg-blur: rgba(255, 255, 255, 0.15); /* Transparansi ringan untuk hover */

    /* --- LAYOUT & SHADOWS --- */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.18);
    --transition-speed: 0.3s;        
    --border-radius-pill: 40px;
    
    /* --- SPACING & SIZE --- */
    --padding-vertical: 16px;        
    --navbar-height: 72px;           
    --container-max-width: 1300px;
}

/* 🧼 Global Reset */
* {
    box-sizing: border-box;
    /* font-family: 'Poppins', sans-serif; */
}

/* ======================================= */
/* 🌐 2. CONTAINER UTAMA (HEADER) */
/* ======================================= */
.site-header {
    background: var(--bg-gradient);
    box-shadow: var(--shadow-soft); 
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: var(--padding-vertical) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); 
    height: var(--navbar-height); 
}

.site-header .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 30px; 
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; 
    
    /* Jarak antar kelompok elemen (Logo | Navigasi Kanan) */
    gap: 40px; 
}

/* ======================================= */
/* 🖼️ 3. AREA LOGO */
/* ======================================= */
.logo-area a {
    color: var(--color-dark); 
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all var(--transition-speed);
}
.logo-area a:hover {
    color: var(--color-light); 
}

.logo-area img {
    height: 40px; 
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
    margin-right: 10px;
}

.logo-area span {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: var(--color-dark); 
}

/* ======================================= */
/* 🧭 4. NAVIGASI KANAN (MENU & SEARCH GROUP) */
/* ======================================= */
/* Kunci: Wadah untuk menu, search, dan login */
.nav-right-group {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Memastikan grup ini mengisi ruang sisa */
    justify-content: flex-start; /* Menu/Search mulai tepat setelah logo */
}

/* --- Menu Navigasi Utama --- */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 25px;
}

.main-navigation a {
    color: var(--color-dark);
    text-decoration: none;
    font-size: 1rem; 
    font-weight: 600; 
    padding: 8px 15px;
    position: relative;
    transition: all var(--transition-speed);
    border-radius: var(--border-radius-pill);
    text-transform: uppercase;
}

.main-navigation a:hover {
    color: var(--color-light); 
    background-color: var(--bg-blur); 
    transform: translateY(-1px);
}

.main-navigation a[aria-current="page"] {
    font-weight: 700;
    color: var(--color-light);
    background-color: var(--color-dark); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* ======================================= */
/* 🔍 5. FORM PENCARIAN (SEARCH) */
/* ======================================= */
.nav-search {
    /* Jarak antara menu utama dan search bar */
    margin-left: 35px; 
}

.nav-search-form {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.7); 
    border-radius: var(--border-radius-pill);
    background-color: rgba(255, 255, 255, 0.95);
    transition: all 0.3s;
    overflow: hidden;
}

.nav-search-form:focus-within {
    border-color: var(--color-dark);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.nav-search-input {
    background: transparent;
    border: none;
    padding: 9px 15px; 
    font-size: 0.95rem;
    color: var(--color-dark);
    outline: none;
    width: 130px; 
}

.nav-search-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.nav-search-button {
    background: var(--color-dark);
    border: none;
    color: var(--color-light);
    padding: 9px 12px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.nav-search-button:hover {
    background-color: var(--color-primary); 
}

/* ======================================= */
/* 👤 6. AREA LOGIN (TOMBOL KANAN) */
/* ======================================= */
.nav-login-area {
    /* Kunci: Mendorong tombol ini ke paling kanan di dalam .nav-right-group */
    margin-left: auto; 
}

.btn-login-nav {
    display: inline-block;
    padding: 9px 25px; 
    background-color: var(--color-dark); 
    color: var(--color-light); 
    border-radius: var(--border-radius-pill); 
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-login-nav:hover {
    background-color: var(--color-primary);
    transform: translateY(-1px); 
}

/* ======================================= */
/* 📱 7. TOGGLE MENU (Mobile) */
/* ======================================= */
.menu-toggle {
    display: none; /* Sembunyikan di desktop */
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: relative;
    /* Dibuat di luar .nav-right-group di HTML agar bisa di kanan logo */
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-dark);
    border-radius: 3px;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.menu-toggle span:nth-child(1) { top: 4px; }
.menu-toggle span:nth-child(2) { top: 13px; }
.menu-toggle span:nth-child(3) { top: 22px; }

.site-header.menu-open .menu-toggle span:nth-child(1) {
    transform: rotate(45deg);
    top: 13px;
}
.site-header.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}
.site-header.menu-open .menu-toggle span:nth-child(3) {
    transform: rotate(-45deg);
    top: 13px;
}

/* ======================================= */
/* 📐 8. MEDIA QUERIES (RESPONSIVE DESIGN) */
/* ======================================= */

/* --- Tablet / Desktop Kecil --- */
@media (max-width: 992px) { 
    .menu-toggle {
        display: block;
        order: 3; /* Posisikan Toggle di paling kanan di mobile */
        margin-left: 20px;
    }
    
    .nav-right-group {
        display: none; /* Sembunyikan seluruh grup di mobile default */
    }
    
    /* Tampilkan elemen-elemen ini saat menu dibuka menggunakan JavaScript */
    .site-header.menu-open .nav-right-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        width: 100%;
        height: auto; /* Biarkan konten menentukan tinggi */
        background: var(--bg-gradient); 
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
        z-index: 999;
        padding: 10px 0 20px 0;
    }
    
    /* Hilangkan margin auto yang mendorong ke kanan, biarkan jadi full width */
    .nav-login-area {
        margin-left: 0; 
        padding: 10px 30px 0;
    }
    
    /* --- Gaya Menu Mobile --- */
    .main-navigation {
        width: 100%;
        order: 2; /* Posisikan menu di bawah search (diubah di sini) */
    }
    
    .main-navigation ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .main-navigation li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .main-navigation li:last-child {
        border-bottom: none;
    }
    
    .main-navigation a {
        display: block;
        padding: 12px 30px; 
        border-radius: 0;
        color: var(--color-dark); 
        text-transform: none;
    }
    
    .main-navigation a:hover,
    .main-navigation a[aria-current="page"] {
        color: var(--color-light) !important;
        background-color: var(--color-dark) !important;
        transform: none;
    }
    
    /* --- Search di Mobile --- */
    .nav-search {
        order: 1; /* Posisikan search paling atas */
        width: 100%;
        margin: 0;
        padding: 0 30px 15px 30px; /* Padding untuk jarak dari atas/bawah */
    }
    .nav-search-form {
        width: 100%;
    }
    .nav-search-input {
        width: 100%;
        flex-grow: 1;
    }
    
    /* Tombol Login di Mobile (Diubah menjadi Link Penuh) */
    .btn-login-nav {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 25px;
        border-radius: var(--border-radius-pill); 
        background-color: var(--color-dark);
        color: var(--color-light);
    }
}

/* Responsif untuk tampilan yang lebih kecil dari 480px */
@media (max-width: 480px) {
    .site-header .container {
        padding: 0 15px;
    }
    .logo-area img {
        height: 35px;
    }
    .logo-area span {
        font-size: 1.1rem;
    }
    .nav-search {
        padding: 0 15px 15px 15px;
    }
    .nav-login-area {
        padding: 10px 15px 0;
    }
}