/* src/css/navbar.css (NUDE THEME EDITION) */

header {
    width: 100%;
}

header nav {
    /* Layout */
    display: flex; 
    align-items: center;
    justify-content: space-evenly; 
    
    /* Posisi & Ukuran */
    position: fixed;
    bottom: 1.5rem; 
    left: 50%;
    transform: translateX(-50%) translateY(200%); /* Default sembunyi */
    width: 90%;
    max-width: 500px; /* Batasi lebar di layar besar */
    
    height: 4rem;
    z-index: 99;
    
    /* --- THEME CHANGE --- */
    /* Glassmorphism Nude: Putih Gading Transparan */
    background: rgba(255, 252, 249, 0.9); 
    
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Border Coklat Muda */
    border: 1px solid var(--border-color);
    border-radius: 20px 20px 20px 20px; 
    
    /* Shadow Coklat Lembut */
    box-shadow: 0 10px 25px var(--shadow-color);
    
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Class saat navbar muncul */
header nav.active {
    transform: translateX(-50%) translateY(0);
}

/* Link Item */
header nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    width: 3.5rem;
    height: 100%; 
    position: relative;
    
    /* --- THEME CHANGE --- */
    /* Warna Default (Tidak Aktif): Mocca */
    color: var(--accent-color); 
    
    transition: all 0.3s ease;
}

header nav a i {
    font-size: 1.4rem;
    margin-bottom: 2px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

header nav a span {
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0; 
    transform: translateY(10px);
    transition: all 0.3s ease;
    position: absolute;
    bottom: 8px;
    
    /* Warna Teks Label */
    color: var(--heading-text-color);
}

/* --- STATE AKTIF --- */
header nav a.active {
    /* Pastikan container link mengambil warna utama */
    color: var(--main-text-color) !important;
}

header nav a.active i {
    /* Paksa ikon untuk menggunakan warna main-text-color */
    color: var(--main-text-color) !important;
    
    /* Style animasi icon tetap sama */
    transform: translateY(-8px);
    filter: drop-shadow(0 4px 8px rgba(169, 45, 57, 0.4)); /* Sesuaikan shadow dengan nuansa merah */
}

header nav a.active span {
    /* Pastikan teks label juga mengikuti warna yang sama */
    color: var(--main-text-color) !important;
    
    opacity: 1;
    transform: translateY(0);
    font-weight: 700;
}

/* Hover Effect di Desktop */
@media (hover: hover) {
    header nav a:hover {
        /* Warna Hover: Coklat Tua */
        color: var(--main-text-color);
    }
}