/*
 * File: assets/css/header_landing.css
 * Styling untuk Header Landing Page
 */

/* Variabel Warna (Praktik yang Baik) */
:root {
    --white-color: #FFFFFF;
    --hover-color: #e0e0e0; /* Warna saat link di-hover */
}

/* Mengatur font dasar dari Google Fonts yang sudah Anda impor */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

/* Styling untuk container agar konten tidak terlalu lebar */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Styling Header Utama --- */
.header {
    position: fixed; /* Ganti absolute ke fixed agar header tetap di atas saat scroll */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0; /* Padding atas/bawah untuk 'mengambang' */
    background: transparent;
}

/* 1. Pembungkus Putih (Kapsul) dan Layout Flexbox */
/* 1. Pembungkus Putih (Kapsul) dan Layout Flexbox */
.header .container {
    /* Layout */
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    
    /* Tampilan Kapsul Putih */
    /* Mengubah background menjadi RGBA untuk transparansi */
    background-color: rgba(255, 255, 255, 0.90); /* Sedikit transparan (0.95) */
    
    border-radius: 50px;
    box-shadow: 0 4px 20px var(--shadow-color);
    
    /* MENGUBAH PADDING UNTUK MEMBUATNYA LEBIH TIPIS */
    padding: 10px 30px; /* Padding vertikal (10px) lebih kecil dari sebelumnya (15px) */
    
    max-width: 1200px;
    margin: 0 auto;
}


/* 2. Styling Navbar (mengatur logo, menu, dan tombol login) */
.header .navbar {
    display: flex; /* Aktifkan Flexbox di navbar */
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
/* 3. Styling Logo */
.logo-img {
    max-height: 55px; /* Sesuaikan tinggi maksimum logo */
    height: auto;
    width: auto;
    transition: all 0.3s ease;
    display: block;
}
/* 4. Styling Menu Navigasi */
.header .nav-menu {
    list-style: none; /* Hapus bullet point */
    display: flex; /* WAJIB: Membuat item menu horizontal */
    align-items: center;
    gap: 30px; /* Jarak antar item menu */
    margin: 0;
    padding: 0;
}

.header .nav-menu li a.nav-link {
    font-weight: 500;
    font-size: 15px;
    color: #1e1e1e; /* Warna teks gelap */
    text-decoration: none;
    transition: .3s;
}

.header .nav-menu li a.nav-link:hover {
    color: #589bff; /* Warna hover */
}
/* 5. Styling Tombol Login */
.header .login-btn {
    color: #1e1e1e; /* Teks gelap */
    border: 1px solid #1e1e1e; /* Border gelap */
    background-color: transparent;
    text-decoration: none;
    border-radius: 8px;
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.header .login-btn:hover {
    background-color: #f0f0f0; /* Efek hover abu-abu tipis */
    color: #1e1e1e;
    border-color: #1e1e1e;
}
/* --- Styling Avatar --- */
.nav-avatar {
    width: 45px;
    height: 45px;
    background-color: #d1d1d1; /* Warna placeholder abu-abu */
    border-radius: 50%; /* Membuatnya menjadi lingkaran sempurna */
    cursor: pointer; /* Mengubah kursor menjadi tangan saat di-hover */
}