/* ============ 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: 300px !important; /* (Sebelumnya 220px) */
    position: relative;
    background-color: #071d48; /* 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: 1300px; /* Lebar banner (layout boxed) */
    height: 200px; /* Tinggi banner, sesuaikan dengan padding-top di atas */
    background-image: url('https://jurnal.bisanet.site/pictures/james.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: 1300px; /* Samakan lebarnya dengan banner */
    background-color: #04173e !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: #9cd4f3 !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;
    }
}

/* semua logo jurnal kecil & rapi */
.navbar-brand-logo img {
    height: 45px !important;
}

/* portal tetap besar */
body.pkp_op_index .navbar-brand-logo img {
    height: 70px !important;
}
.template-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    margin-bottom: 15px;
    transition: 0.3s;
}

.template-card img {
    width: 40px;
    margin-right: 10px;
}

.template-card a {
    text-decoration: none;
    color: #007bff;
    font-size: 13px;
}

.template-card:hover {
    background: #f7f7f7;
}