header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 60px;
    background:#000;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo img{
    width:45px;
}

.logo figcaption{
    color:white;
    font-family:'Oswald',sans-serif;
    font-size:20px;
}

nav{
    display: flex;
    align-items: center;
    gap: 35px;
}

nav a{
    position: relative;      /* Penting */
    display: inline-block;   /* Penting */
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    padding-bottom: 8px;
    transition: color .3s;
}

nav a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: red;
    border-radius: 10px;
    transition: width .3s ease;
}

nav a:hover::after{
    width: 100%;
}
nav a.active{
    color:red;
}

nav a.active::after{
    width:100%;
}

/* Responsif untuk Layar Ponsel */
@media (max-width: 768px) {
    header {
        padding: 15px 20px; /* Memperkecil padding kiri-kanan agar pas di layar HP */
        flex-direction: column; /* Mengubah susunan logo dan menu menjadi ke bawah */
        gap: 15px;
    }

    nav {
        gap: 20px; /* Mengurangi jarak antar menu */
        flex-wrap: wrap; /* Membuat menu turun ke bawah jika tidak muat */
        justify-content: center;
    }

    nav a {
        font-size: 14px; /* Sedikit memperkecil ukuran font di HP */
    }
}