/* =========================================================
   1. KUSTOMISASI HEADER RESPONSIF (LAPTOP & HP)
   ========================================================= */
header.pkp_structure_head {
  background-image: url('https://i.ibb.co.com/jZ84ccty/Header-Jurnal.png') !important;
  /* contain memastikan seluruh banner utuh tanpa terpotong di HP maupun PC */
  background-size: contain !important; 
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  width: 100% !important;
}
/* Mengatur tinggi maksimum dan skala gambar homepage OJS */
.pkp_structure_main .homepage_image img {
    max-height: 1000px; /* Sesuaikan batas tinggi yang diinginkan */
    width: 100%;
    object-fit: cover; /* Menjaga rasio gambar agar tidak terdistorsi */
    margin: 0 auto;
}

/* Menghilangkan background bawaan struktur header OJS */
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  background: transparent !important;
}

/* Menyembunyikan teks nama jurnal bawaan OJS */
div.pkp_site_name,
header.pkp_structure_head h1.pkp_screen_reader {
  display: none !important;
}


/* =========================================================
   2. PENGATURAN LAYAR KHUSUS (DESKTOP VS MOBILE)
   ========================================================= */

/* Tampilan Komputer / Laptop (Lebar Layar >= 992px) */
@media (min-width: 992px) {
  header.pkp_structure_head {
    min-height: 270px !important; /* Sesuaikan dengan tinggi ideal banner */
  }
  
  .pkp_site_nav_menu {
    margin-top: 240px !important; /* Mendorong menu ke bawah gambar banner */
  }
}

/* Tampilan Smartphone / HP (Lebar Layar <= 991px) */
@media (max-width: 991px) {
  header.pkp_structure_head {
    /* Menjaga rasio panjang & lebar gambar header agar tinggi menyesuaikan otomatis di HP */
    aspect-ratio: 1280 / 270 !important; 
    min-height: auto !important;
  }

  .pkp_site_nav_menu {
    margin-top: 0 !important; /* Mencegah menu terdorong berlebihan di HP */
  }
}


/* =========================================================
   3. STYLING MENU NAVIGASI UTAMA & DROPDOWN (POPUP)
   ========================================================= */

/* Warna Teks & Transisi Tombol Navigasi Utama */
.pkp_site_nav_menu a,
.pkp_navigation_primary_wrapper a,
.pkp_navigation_primary_wrapper button {
  color: #B8860B !important;
  border: none !important;
  transition: all 0.3s ease !important; 
}

/* Efek Hover pada Item Navigasi Utama (misal: menu About) */
.pkp_navigation_primary_wrapper a:hover,
.pkp_navigation_primary_wrapper button:hover {
  background-color: #B8860B !important;
  color: #ffffff !important; /* Teks berubah putih agar kontras & jelas terbaca */
  border-radius: 3px;
}

/* Background Kotak Popup / Sub-Menu Dropdown */
.pkp_navigation_primary .sub-menu,
.pkp_navigation_primary ul ul {
  background-color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Efek Hover saat kursor mengarah ke item di dalam Popup Sub-Menu */
.pkp_navigation_primary .sub-menu a:hover,
.pkp_navigation_primary ul ul a:hover {
  background-color: #B8860B !important;
  color: #ffffff !important;
}


/* =========================================================
   4. RESET LAYAR DAN KONTEN
   ========================================================= */
body {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.pkp_structure_page {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   5. CUSTOM BLOCK GLOSSY MENU STYLES (#cssmenu)
   ========================================================= */
#cssmenu ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#cssmenu li {
  margin-bottom: 3px !important;
}

/* Tombol Menu Glossy (Kuning Keemasan Timbul Mengkilap) */
#cssmenu a {
  /* Gradasi 3 Titik: Terang di atas (#d4a32a), Sedang (#B8860B), Gelap di bawah (#8b6508) */
  background: linear-gradient(to bottom, #d4a32a 0%, #B8860B 50%, #8b6508 100%) !important;
  color: #ffffff !important;
  padding: 10px 15px !important;
  display: block !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  text-align: left !important;
  
  /* Efek Kilauan Kaca Atas & Bayangan Timbul */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
  
  transition: all 0.3s ease !important;
}

/* Efek Hover Tombol Custom Block saat Disentuh Kursor */
#cssmenu a:hover {
  background: linear-gradient(to bottom, #e2b43b 0%, #c99518 50%, #a07409 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 8px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1px);
}