/* ============================================================
   KODE CSS FULL - ETNOSARA JOURNAL
   User bar & navbar utama lebar sama, rapi tengah
   ============================================================ */

/* --- KONTAINER UTAMA UNTUK MENYAMAKAN LEBAR --- */
/* Terapkan pada user bar dan navbar wrapper */
.pkp_navigation_user_wrapper,
.pkp_navigation_primary_wrapper {
  background-color: #003366 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important; /* agar konten di dalamnya terpusat */
}

/* Konten di dalam user bar dan navbar dibatasi lebar maksimal */
.pkp_navigation_user,
.pkp_navigation_primary {
  max-width: 1200px !important;
  width: 100% !important;
  padding: 0 20px !important;
  margin: 0 auto !important;
}

/* --- 1. USER BAR (Registrasi/Login) --- */
.pkp_navigation_user_wrapper {
  background-color: #003366 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.pkp_navigation_user {
  display: flex !important;
  justify-content: flex-end !important; /* menu user rata kanan */
  list-style: none !important;
  gap: 5px !important;
  padding: 6px 20px !important;
}

.pkp_navigation_user > li > a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  transition: 0.2s !important;
}

.pkp_navigation_user > li > a:hover {
  background-color: #ffcc00 !important;
  color: #003366 !important;
  border-radius: 4px !important;
}

/* --- 2. LOGO (Area Putih Tengah) --- */
header.pkp_structure_head .pkp_site_name img {
  width: 100% !important; /* Memaksa gambar memenuhi lebar container */
  max-width: 1200px !important; /* Batasi lebar maksimal sesuai lebar konten agar tidak pecah */
  height: auto !important; /* Menjaga rasio gambar agar tidak terlihat gepeng */
  max-height: none !important; /* Melepas batasan tinggi sebelumnya */
  display: block !important;
  margin: 0 auto !important;
}

/* Opsional: Menghilangkan padding agar banner benar-benar mepet ke bar biru */
.pkp_structure_head {
  padding: 0 !important;
  border-bottom: none !important;
}

/* --- 3. NAVBAR UTAMA (Current, Archives, About) --- */
.pkp_navigation_primary_wrapper {
  background-color: #003366 !important;
  border-top: none !important;
  border-bottom: 1px solid #002244;
  margin-bottom: 40px !important; /* jarak ke konten */
}

.pkp_navigation_primary {
  display: flex !important;
  justify-content: center !important; /* menu utama di tengah */
  flex-wrap: wrap !important;
  position: relative !important;
  padding: 0 20px !important;
}

.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  transition: 0.2s !important;
}

.pkp_navigation_primary > li > a:hover {
  background-color: #ffcc00 !important;
  color: #003366 !important;
}

/* Tombol search di kanan navbar */
.pkp_navigation_primary_wrapper .pkp_search_desktop {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.pkp_search_desktop .pkp_search_button {
  background-color: #ffcc00 !important;
  color: #003366 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
}

/* --- 4. SIDEBAR & KONTEN (Tetap Rapi) --- */
.pkp_structure_sidebar.right {
  display: block !important;
  padding-left: 40px !important;
}

.pkp_block {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  margin-bottom: 25px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
}

.pkp_block .title,
.sidebar-header {
  background-color: #003366 !important;
  color: white !important;
  padding: 12px 15px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  border-bottom: 3px solid #ffcc00 !important;
  margin: 0 !important;
}

.sidebar-links a,
.pkp_block a {
  display: block !important;
  padding: 10px 15px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  color: #333 !important;
  text-decoration: none !important;
  transition: 0.2s !important;
}

.sidebar-links a:hover,
.pkp_block a:hover {
  background-color: #f8f9fa !important;
  padding-left: 20px !important;
  color: #003366 !important;
}

.indexing-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 15px !important;
  background: #fff !important;
}

.indexing-grid a {
  background: #f8f9fc !important;
  padding: 8px !important;
  text-align: center !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  border: 1px solid #e9ecef !important;
}

.indexing-grid a:hover {
  background: #003366 !important;
  color: white !important;
}

/* --- 5. KONTEN UTAMA --- */
.pkp_structure_content {
  margin-top: 0 !important;
  margin-bottom: 40px !important;
}

@media (min-width: 992px) {
  .pkp_structure_main {
    padding-right: 40px !important;
  }
}

/* --- 6. RESPONSIF (Mobile) --- */
@media (max-width: 768px) {
  .pkp_navigation_user {
    justify-content: center !important;
  }
  .pkp_navigation_primary {
    flex-direction: column !important;
    align-items: center !important;
  }
  .pkp_navigation_primary > li > a {
    display: block !important;
    text-align: center !important;
  }
  .pkp_navigation_primary_wrapper .pkp_search_desktop {
    position: static !important;
    transform: none !important;
    margin: 10px auto !important;
  }
}
/* --- 7. TAMBAHAN RESPONSIVE KHUSUS MOBILE (HEADER, LOGO & TOGGLE) --- */
@media (max-width: 991px) {
  /* Memaksa Header untuk menyusun elemen ke bawah (stacking) */
  .pkp_structure_head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 15px 0 !important;
  }

  /* Memastikan logo tidak menabrak pinggiran layar HP */
  header.pkp_structure_head .pkp_site_name img {
    max-width: 85% !important; /* Beri ruang napas di kiri kanan */
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Menata tombol Hamburger (Menu) agar terlihat jelas di bar biru */
  .pkp_navigation_primary_wrapper .pkp_navigation_primary_toggle {
    background-color: #ffcc00 !important; /* Warna kuning kontras agar mudah dicari */
    color: #003366 !important;
    border-radius: 4px;
    margin: 10px auto !important;
    padding: 10px 15px !important;
    display: block !important;
    float: none !important; /* Hilangkan float bawaan OJS */
  }

  /* Menyesuaikan container navigasi di mobile */
  .pkp_navigation_primary_wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    padding: 5px !important;
  }

  /* Menyembunyikan user bar di mobile agar tidak double (Login bisa lewat menu) */
  .pkp_navigation_user_wrapper {
    display: none !important;
  }

  /* Memastikan sidebar (Template, Indexing, dll) turun ke bawah artikel */
  .pkp_structure_sidebar.right {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 30px !important;
  }
}