/* css/header.css */


/* --- Gaya Utama Kontainer Header --- */

.main-header {
    /* Latar belakang gradien gelap untuk tampilan elegan */
    background: linear-gradient(135deg, #1f1f1f, #000000);
    font-family: 'Segoe UI', sans-serif;
    /* Jenis font utama */
}


/* --- Tautan Navigasi (Nav Link) --- */

.nav-link {
    /* Transisi halus untuk perubahan warna dan posisi */
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    /* Diperlukan untuk garis bawah pseudo-element */
}


/* --- Efek Hover pada Tautan Navigasi --- */

.nav-link:hover {
    color: #00ffc8 !important;
    /* Mengubah warna teks menjadi cyan cerah saat hover */
    transform: translateY(-2px);
    /* Mengangkat tautan sedikit ke atas */
}


/* --- Garis Bawah Animasi (Pseudo-element) --- */

.link-underline::after {
    content: '';
    /* Wajib ada untuk pseudo-element */
    position: absolute;
    /* Posisi absolut relatif terhadap .nav-link */
    width: 0;
    /* Lebar awal 0 (tersembunyi) */
    height: 2px;
    /* Ketebalan garis */
    display: block;
    background: #00ffc8;
    /* Warna garis sama dengan warna hover */
    transition: width 0.3s ease;
    /* Transisi untuk animasi lebar */
    bottom: 0;
    /* Posisi di bagian bawah tautan */
    left: 0;
    /* Mulai dari sisi kiri */
}


/* --- Efek Hover untuk Memunculkan Garis Bawah --- */

.link-underline:hover::after {
    width: 100%;
    /* Lebar menjadi 100% saat di-hover, menciptakan efek animasi */
}