/* ============ CSS FINAL KHUSUS UNTUK BOOTSTRAP3 THEME (PERBAIKAN KONTEN) ============ */

/* 1. Menyiapkan 'kanvas' di bagian atas halaman untuk banner */
body {
    /* DIUBAH: Nilai ditambah untuk memberi ruang bagi menu navigasi juga */
    padding-top: 280px !important; /* (Sebelumnya 220px) */
    position: relative;
    background-color: #f0f0f0; /* Warna dasar halaman */
}

/* 2. Menambahkan banner sebagai lapisan virtual di paling atas */
body::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%; /* Memulai dari tengah */
    transform: translateX(-50%); /* Trik untuk menengahkan elemen absolut */
    width: 100%;
    max-width: 1080px; /* Lebar banner (layout boxed) */
    height: 200px; /* Tinggi banner, sesuaikan dengan padding-top di atas */
    background-image: url('https://jurnal.bisanet.site/pictures/akurat.png');
    background-size: cover;
    background-position: center;
}

/* 3. Menata ulang menu navigasi utama */
/* #headerNavigationContainer adalah ID dari header di tema Anda */
#headerNavigationContainer.navbar-default {
    position: absolute;
    top: 200px; /* Posisikan menu TEPAT DI BAWAH area banner */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1080px; /* Samakan lebarnya dengan banner */
    background-color: #e86c1a !important; /* Warna oranye */
    background-image: none !important;
    border: none !important;
    border-radius: 0;
    z-index: 99;
}

/* 4. Menata item di dalam menu navigasi */
#headerNavigationContainer .navbar-nav > li > a {
    color: white !important;
    font-weight: bold;
    text-transform: uppercase;
}

/* Mengubah warna saat hover */
#headerNavigationContainer .navbar-nav > li > a:hover,
#headerNavigationContainer .navbar-nav > .active > a {
    background-color: #b04800 !important;
}

/* 5. Mengatur posisi navigasi user ('admin') */
#headerNavigationContainer .navbar-right {
    margin-right: 0 !important;
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
}

/* 6. RESPONSIVE UNTUK HP */
@media (max-width: 1200px) {
    body::before,
    #headerNavigationContainer.navbar-default {
        max-width: 100%; /* Di HP, buat jadi full-width */
    }
}
@media (max-width: 768px) {
    body {
        /* DIUBAH: Nilai ditambah untuk memberi ruang bagi menu navigasi juga */
        padding-top: 210px !important; /* (Sebelumnya 150px) */
    }
    body::before {
        height: 150px;
    }
    #headerNavigationContainer.navbar-default {
        top: 150px;
    }
}