/* --- Header Container --- */
.header-banner {
    width: 100%;            /* Banner memenuhi seluruh lebar layar */
    height: auto;           /* Tinggi otomatis agar proporsi gambar tetap sesuai */
    margin: 0 auto;         /* Pusatkan banner */
    position: relative;     /* Menggunakan posisi relatif agar judul bisa diatur secara fleksibel di atas gambar */
}

/* --- Gambar Header Responsif --- */
.header-banner img {
    width: 100%;            /* Gambar header akan menyesuaikan lebar perangkat */
    height: auto;           /* Proporsi gambar tetap sesuai */
    max-height: 500px;      /* Batasi tinggi maksimum untuk banner agar tidak terlalu besar */
    object-fit: cover;      /* Memotong gambar secara proporsional jika terlalu besar */
}

/* --- Header Title (Judul Jurnal) di Atas Gambar --- */
.header-title {
    position: absolute;     /* Posisi absolut untuk menempatkan teks di atas gambar */
    top: 50%;               /* Posisikan judul di tengah gambar (vertikal) */
    left: 50%;              /* Posisikan judul di tengah gambar (horizontal) */
    transform: translate(-50%, -50%); /* Agar judul benar-benar berada di tengah gambar */
    color: white;           /* Warna teks putih agar kontras dengan gambar */
    font-size: 36px;        /* Ukuran font default untuk desktop */
    text-align: center;     /* Pusatkan teks */
    background-color: rgba(0, 0, 0, 0.5); /* Background hitam semi-transparan agar teks mudah dibaca */
    padding: 10px 20px;     /* Padding untuk ruang di sekitar teks */
    border-radius: 5px;     /* Beri sudut melengkung pada background teks */
    font-family: Arial, sans-serif;
}

/* --- Subtitle atau Keterangan Jurnal di Atas Gambar --- */
.header-subtitle {
    position: absolute;     /* Sama seperti judul */
    top: 60%;               /* Posisikan sedikit di bawah judul */
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 18px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 5px;
}

/* --- Navigasi (Optional) --- */
.navigation-menu {
    text-align: center;
    margin: 10px 0;
}

.navigation-menu a {
    padding: 10px 20px;
    text-decoration: none;
    color: #0073aa;
    font-weight: bold;
}

/* --- Media Queries untuk Responsivitas --- */
/* Untuk layar lebih kecil dari 1024px (tablet atau laptop kecil) */
@media screen and (max-width: 1024px) {
    .header-title {
        font-size: 28px;    /* Ukuran font lebih kecil */
        padding: 8px 16px;  /* Kurangi padding agar teks tidak terlalu besar */
    }
    .header-subtitle {
        font-size: 16px;    /* Kurangi ukuran font subtitle */
    }
    .header-banner img {
        max-height: 400px;  /* Batasi tinggi gambar pada layar yang lebih kecil */
    }
}

/* Untuk layar lebih kecil dari 768px (tablet dan smartphone) */
@media screen and (max-width: 768px) {
    .header-title {
        font-size: 24px;    /* Lebih kecil lagi untuk tablet */
        padding: 6px 12px;  /* Kurangi padding */
    }
    .header-subtitle {
        font-size: 14px;    /* Ukuran subtitle lebih kecil lagi */
    }
    .header-banner img {
        max-height: 300px;  /* Sesuaikan tinggi gambar */
    }
}

/* Untuk layar lebih kecil dari 480px (smartphone) */
@media screen and (max-width: 480px) {
    .header-title {
        font-size: 20px;    /* Ukuran font untuk smartphone */
        padding: 5px 10px;  /* Sesuaikan padding */
    }
    .header-subtitle {
        font-size: 12px;    /* Ukuran subtitle lebih kecil */
    }
    .header-banner img {
        max-height: 200px;  /* Batasi tinggi gambar pada perangkat kecil */
    }
}