/* header_styles.css */

/* Import Font Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* CSS Variables untuk konsistensi tema */
:root {
    --primary-color: #265073;
    --primary-color-darker: #1c3b56;
    --text-color: #333333;
    --text-light: #555555;
    --card-background: #FFFFFF; /* Background header */
    --border-color: #e0e0e0;
    --border-color-soft: #f0f0f0;
    --background-hover-light: #f5f9fc; /* Warna hover yang sangat soft */
    --shadow-soft: rgba(0, 0, 0, 0.06);
    --shadow-dropdown: rgba(0, 0, 0, 0.1);
}

/* Styling untuk elemen HEADER utama */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 35px; /* Padding sedikit disesuaikan */
    background-color: var(--card-background);
    box-shadow: 0 2px 4px var(--shadow-soft);
    position: relative; /* Untuk positioning dropdown */
    z-index: 1050;
    font-family: 'Poppins', sans-serif;
    border-bottom: 1px solid var(--border-color-soft); /* Garis bawah halus */
}

/* Logo dan Nama Brand */
.logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Agar logo tidak mengecil */
}

.logo {
    width: auto; 
height: 50px;
border-radius: 0; 
object-fit: contain; 
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.brand-name {
    font-size: 20px; /* Ukuran nama brand */
    font-weight: 700;
    text-decoration: none;
    color: var(--primary-color);
}
.brand-name:hover {
    color: var(--primary-color-darker);
}

/* Navigasi Tengah */
.nav-container {
    flex-grow: 1; /* Biarkan navigasi mengambil ruang tengah */
    display: flex;
    justify-content: center; /* Pusatkan item navigasi */
}

.nav-container nav ul {
    display: flex;
    list-style: none;
    gap: 25px; /* Jarak antar item menu */
    padding-left: 0;
    margin-bottom: 0;
    align-items: center;
}

.nav-container nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 15px;
    padding: 8px 4px; /* Padding atas-bawah dan sedikit kiri-kanan */
    position: relative;
    transition: color 0.2s ease;
    border-radius: 4px; /* Sedikit rounded untuk area klik */
    display: flex;
    align-items: center;
}

.nav-container nav a::after { /* Efek underline modern */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0; /* Posisi underline */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    transition: width 0.25s ease;
}

.nav-container nav a:hover,
.nav-container nav a.active {
    color: var(--primary-color);
    background-color: var(--background-hover-light); /* Background hover soft */
}

.nav-container nav a:hover::after,
.nav-container nav a.active::after {
    width: calc(100% - 8px); /* Underline hampir penuh, menyesuaikan padding */
}

/* Area Profil dan Login */
.profile-container {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Agar tidak mengecil */
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.username {
    color: var(--text-light);
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap; /* Agar username tidak wrap */
}

.profile-pic {
    width: 38px; /* Ukuran profile pic */
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid var(--primary-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-pic:hover {
    transform: scale(1.08);
    box-shadow: 0 0 6px rgba(38, 80, 115, 0.2); /* Shadow saat hover */
}

/* Tombol Login */
.login-button {
    background-color: var(--primary-color);
    color: white;
    padding: 7px 15px; /* Padding tombol login */
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

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

/* Dropdown Umum (Base style untuk semua dropdown) */
.dropdown-content {
    display: none; /* Default tersembunyi, di-toggle oleh JS dengan class .show */
    position: absolute;
    background-color: var(--card-background);
    box-shadow: 0 6px 12px var(--shadow-dropdown);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    z-index: 1060; /* Pastikan di atas elemen lain */
    padding: 8px 0; /* Padding vertikal untuk grup link */
    margin-top: 8px; /* Jarak dari elemen pemicu */
    opacity: 0;
    transform: translateY(8px); /* Posisi awal untuk animasi */
    transition: opacity 0.25s ease-out, transform 0.25s ease-out; /* Transisi halus */
}

/* Kelas .show untuk menampilkan dropdown via JS */
.dropdown-content.show {
    display: block; /* Atau 'flex' jika dibutuhkan (seperti pada genre) */
    opacity: 1;
    transform: translateY(0);
}

/* Styling untuk link di dalam dropdown */
.dropdown-content a {
    display: block;
    padding: 9px 18px; /* Padding link dropdown */
    text-decoration: none;
    color: var(--text-color);
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.dropdown-content a:hover {
    background-color: var(--background-hover-light);
    color: var(--primary-color);
}
.dropdown-content a i { /* Ikon di dalam link dropdown */
    margin-right: 10px;
    width: 16px;
    text-align: center;
    color: var(--text-light); /* Warna default ikon */
    transition: color 0.2s ease;
}
.dropdown-content a:hover i {
    color: var(--primary-color); /* Warna ikon saat link dihover */
}


/* Dropdown Profil (Spesifik) */
.profile-dropdown { /* Menggunakan class .dropdown-content yang umum */
    top: calc(100% + 5px); /* Posisi sedikit di bawah profile pic/username */
    right: 0; /* Rata kanan */
    min-width: 160px; /* Lebar minimal dropdown profil */
}

/* Dropdown Genre (Spesifik) */
.nav-container nav ul li.dropdown { /* Target li yang memiliki class dropdown */
    position: relative; /* Agar #genreDropdownContent posisinya relatif terhadap li ini */
}

.dropdown-btn { /* Tombol pemicu dropdown, termasuk "Genre ▼" */
    cursor: pointer;
    display: flex; /* Untuk align ikon chevron */
    align-items: center;
}
.dropdown-btn i.fa-chevron-down { /* Styling ikon chevron */
    font-size: 0.75em !important; /* Override jika perlu dari FA default */
    margin-left: 5px;
    transition: transform 0.2s ease;
}
/* Efek rotasi chevron saat dropdown aktif (jika Anda menambahkan class 'active' pada .dropdown-btn via JS) */
/* .dropdown-btn.active i.fa-chevron-down { transform: rotate(180deg); } */


#genreDropdownContent { /* ID spesifik untuk dropdown genre */
    top: calc(100% + 0px); /* Posisi dari navigasi Genre, sedikit lebih dekat */
    left: 50%;
    transform: translateX(-50%) translateY(8px); /* Posisi awal, translateY akan direset oleh .show */
    min-width: 480px; /* Lebar dropdown genre, bisa disesuaikan */
    max-width: 550px;
    padding: 20px;
    gap: 25px; /* Jarak antar kolom genre */
    opacity: 0; /* Diatur oleh .dropdown-content, tapi pastikan ada */
    /* display: flex !important; Akan diatur oleh JS dengan class .show */
}

#genreDropdownContent.show { /* Kelas untuk menampilkan dropdown genre via JS */
    display: flex !important; /* Paksa display flex */
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Reset transform Y */
}

.dropdown-column {
    flex: 1; /* Setiap kolom mengambil ruang yang sama */
}

.dropdown-column h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color-soft);
}

.dropdown-column a { /* Link genre di dalam kolom */
    padding: 7px 10px; /* Padding lebih kecil untuk banyak item */
    border-radius: 4px;
    font-size: 14px;
}

.no-genres-message { /* Pesan jika tidak ada genre */
    padding: 8px 10px;
    color: var(--text-light);
    font-style: italic;
    font-size: 13px;
}

/* Responsif Sederhana untuk Header */
@media (max-width: 992px) { /* Tablet dan di bawahnya */
    header {
        padding: 10px 20px;
    }
    .nav-container nav ul {
        gap: 15px; /* Kurangi jarak menu */
    }
    .nav-container nav a {
        font-size: 14px; /* Kecilkan font menu */
    }
    .brand-name {
        font-size: 18px;
    }
    .username {
        display: none; /* Sembunyikan username di layar kecil, hanya tampilkan foto profil */
    }
    #genreDropdownContent {
        min-width: 380px; /* Kecilkan dropdown genre */
        max-width: 90vw;
        left: 20px; /* Tidak lagi center, tapi dari kiri */
        transform: translateX(0) translateY(8px); /* Hapus translateX(-50%) */
    }
    #genreDropdownContent.show {
        transform: translateX(0) translateY(0);
    }

}

@media (max-width: 768px) { /* Mobile */
    .nav-container {
        /* Pertimbangkan untuk menyembunyikan navigasi utama dan menggunakan menu hamburger di mobile */
        /* Untuk saat ini, kita hanya akan membuatnya lebih sempit atau scrollable */
        /* display: none; */ /* Contoh jika ingin disembunyikan dan diganti hamburger */
        overflow-x: auto; /* Jika item menu terlalu banyak */
        margin-left: 10px;
        margin-right: 10px;
    }
     .nav-container nav ul {
        gap: 10px; 
    }

}