/* ============================================================
   MUQARIN REVIEW — FINAL v5
   Dibangun berdasarkan HTML asli OJS 3.4.0.9
   ✓ Navbar satu baris rapi (tanpa Announcements & Submissions)
   ✓ Search sejajar di baris yang sama
   ✓ Hamburger menu HP
   ✓ Sidebar presisi & elegan
   ✓ Kartu artikel dengan pembatas jelas
   ✓ Desktop & Mobile
   ============================================================ */

/* ══════════════════════════════════════════════════════
   1. SEMBUNYIKAN ANNOUNCEMENTS & SUBMISSIONS dari navbar
      (berdasarkan href asli dari HTML)
   ══════════════════════════════════════════════════════ */
ul.pkp_navigation_primary > li > a[href*="/announcement"],
ul.pkp_navigation_primary > li > a[href*="/submissions"] {
  display: none !important;
}
ul.pkp_navigation_primary > li:has(> a[href*="/announcement"]),
ul.pkp_navigation_primary > li:has(> a[href*="/submissions"]) {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   2. NAVBAR — satu baris, sejajar, elegan
   ══════════════════════════════════════════════════════ */
.pkp_site_nav_menu {
  background: #1e5c38 !important;
  width: 100%;
  position: relative;
  z-index: 100;
}

/* Baris nav: satu baris, tidak wrap */
.pkp_navigation_primary_row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 46px;
  position: relative;
}

/* Menu items: satu baris, ambil ruang tersisa */
ul.pkp_navigation_primary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto;
}

ul.pkp_navigation_primary > li {
  display: flex !important;
  align-items: stretch;
  flex-shrink: 1;
  flex-grow: 0;
}

ul.pkp_navigation_primary > li > a {
  display: flex !important;
  align-items: center !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.15px !important;
  white-space: nowrap !important;
  transition: background 0.15s !important;
  border-bottom: 3px solid transparent !important;
}

ul.pkp_navigation_primary > li > a:hover {
  background: rgba(255,255,255,0.13) !important;
  border-bottom-color: rgba(255,255,255,0.4) !important;
}

ul.pkp_navigation_primary > li.current > a,
ul.pkp_navigation_primary > li > a[aria-current] {
  background: rgba(255,255,255,0.18) !important;
  border-bottom-color: #c8e6d0 !important;
}

/* Search — sejajar di ujung kanan, satu baris */
.pkp_navigation_primary_row > a,
.pkp_navigation_primary_row > .search_form_trigger,
a.pkp_search_form_toggle,
#navigationPrimary + a,
.pkp_navigation_primary_row a[href*="search"]:not([href*="article"]) {
  display: flex !important;
  align-items: center !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  margin-left: auto;
  gap: 5px;
  transition: color 0.15s;
}
.pkp_navigation_primary_row a[href*="search"]:not([href*="article"]):hover {
  color: #fff !important;
}

/* Tombol "Open Menu" bawaan OJS — sembunyikan, kita ganti dengan hamburger kita */
.pkp_navigation_primary_row > button:not(#mr-hamburger),
.pkp_site_nav_menu > button,
button.navbar-toggler,
.pkp_nav_toggle {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   3. HAMBURGER BUTTON — hanya tampil di HP
   ══════════════════════════════════════════════════════ */
#mr-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.15s;
  align-self: center;
}
#mr-hamburger:hover {
  background: rgba(255,255,255,0.20);
}
#mr-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
#mr-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mr-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#mr-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════
   4. MOBILE NAVBAR (≤ 860px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  #mr-hamburger { display: flex !important; }

  .pkp_navigation_primary_row {
    flex-wrap: wrap !important;
    padding: 5px 12px !important;
    min-height: 52px !important;
    align-items: center !important;
  }

  /* Sembunyikan semua menu item default di mobile */
  ul.pkp_navigation_primary {
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    flex: none !important;
    background: #163d27;
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: 6px 0 10px !important;
    margin: 0 !important;
    order: 10;
  }
  ul.pkp_navigation_primary.is-open { display: flex !important; }

  ul.pkp_navigation_primary > li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  ul.pkp_navigation_primary > li:last-child { border-bottom: none !important; }

  ul.pkp_navigation_primary > li > a {
    display: block !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    white-space: normal !important;
    color: #ddf0e4 !important;
    border-bottom: none !important;
  }
  ul.pkp_navigation_primary > li > a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }

  /* Sembunyikan announcements & submissions di mobile juga */
  ul.pkp_navigation_primary > li:has(> a[href*="/announcement"]),
  ul.pkp_navigation_primary > li:has(> a[href*="/submissions"]) {
    display: none !important;
  }

  /* Search di mobile — ikut masuk dropdown */
  .pkp_navigation_primary_row > a[href*="search"],
  .pkp_navigation_primary_row a[href*="search"]:not([href*="article"]) {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   5. LAYOUT UTAMA — konten + sidebar
   ══════════════════════════════════════════════════════ */
.pkp_structure_content {
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 28px 24px 56px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 28px !important;
  align-items: flex-start;
  box-sizing: border-box;
}
.pkp_structure_main {
  flex: 1 1 0% !important;
  min-width: 0;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ddd8cf;
  padding: 28px 32px !important;
  box-sizing: border-box;
}
.pkp_structure_sidebar {
  width: 280px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;        /* gap diatur lewat margin tiap block */
}

/* ══════════════════════════════════════════════════════
   6. SIDEBAR BLOCKS — presisi, elegan, rapi
   ══════════════════════════════════════════════════════ */
.pkp_block {
  all: revert;
  display: block !important;
  background: #fff !important;
  border: 1px solid #d8d3cc !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  width: 100% !important;
}

/* Judul blok sidebar */
.pkp_block h2 {
  all: revert;
  display: block !important;
  background: linear-gradient(135deg, #1a5233 0%, #267347 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
  border-radius: 0 !important;
  text-transform: none !important;
  box-sizing: border-box !important;
}

/* Konten blok */
.pkp_block .pkp_block_content {
  padding: 4px 0 6px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* List dalam blok */
.pkp_block ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pkp_block li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #f0ece4 !important;
}
.pkp_block li:last-child { border-bottom: none !important; }

/* Link dalam sidebar */
.pkp_block a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 16px !important;
  font-size: 12.5px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  color: #1e3a2a !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  transition: background 0.13s !important;
  word-break: normal !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}
.pkp_block a:hover {
  background: #eef7f1 !important;
  color: #1a5233 !important;
}
.pkp_block a::after {
  content: '›' !important;
  font-size: 17px !important;
  color: #5a9a72 !important;
  flex-shrink: 0 !important;
  margin-left: 6px !important;
  line-height: 1 !important;
  font-family: Georgia, serif !important;
}

/* ── Gambar & widget dalam sidebar ── */
.pkp_block img {
  display: inline-block !important;
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Flag counter & widget */
.pkp_block .pkp_block_content img,
.pkp_block .pkp_block_content a img {
  display: block !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  width: auto !important;
  margin: 8px auto !important;
}
/* RSS/Atom badge kecil di dalam <li> */
.pkp_block li a img {
  display: inline-block !important;
  margin: 0 6px 0 0 !important;
  max-height: 20px !important;
  width: auto !important;
  vertical-align: middle !important;
}
/* Override ::after untuk li yang punya img (RSS) — tidak perlu panah */
.pkp_block li:has(a img) a::after {
  display: none !important;
}
/* iframe visitor counter */
.pkp_block iframe {
  display: block !important;
  max-width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 8px auto !important;
}

/* ══════════════════════════════════════════════════════
   7. KARTU ARTIKEL — pembatas jelas & elegan
   ══════════════════════════════════════════════════════ */
.pkp_helpers_list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.pkp_helpers_list > li {
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}
.obj_article_summary {
  background: #fff;
  border: 1px solid #ddd8cf;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.obj_article_summary:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
  border-color: #a8ceB8;
}

/* Padding konten kartu */
.obj_article_summary .title,
.obj_article_summary .authors,
.obj_article_summary .doi,
.obj_article_summary .series,
.obj_article_summary .meta {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.obj_article_summary .title   { padding-top: 18px !important; }
.obj_article_summary .galleys { padding: 2px 20px 16px !important; }

/* Judul artikel */
.obj_article_summary h3 a,
.obj_article_summary .title a {
  color: #1a5233 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  text-decoration: none !important;
}
.obj_article_summary h3 a:hover,
.obj_article_summary .title a:hover {
  text-decoration: underline !important;
  color: #267347 !important;
}

/* Tombol PDF */
.obj_article_summary .galleys a,
a.obj_galley_link.pdf {
  background: #2d6a4f !important;
  color: #fff !important;
  font-size: 11.5px !important;
  padding: 5px 14px !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: background 0.14s !important;
  margin-top: 8px !important;
  letter-spacing: 0.2px !important;
}
.obj_article_summary .galleys a:hover,
a.obj_galley_link.pdf:hover {
  background: #1a5233 !important;
}

/* Stats — footer kartu, hijau muda, JELAS milik kartu di atasnya */
.obj_article_summary .stat {
  background: #f0f7f3 !important;
  border-top: 1px solid #ddd8cf !important;
  padding: 9px 20px !important;
  font-size: 12px !important;
  color: #3a6b4e !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 0 !important;
  align-items: center !important;
}

/* ══════════════════════════════════════════════════════
   8. HEADING KONTEN UTAMA
   ══════════════════════════════════════════════════════ */
.pkp_structure_main h1,
.pkp_structure_main h2 {
  color: #1a5233;
  font-family: Georgia, 'Times New Roman', serif;
  border-bottom: 2px solid #2d6a4f;
  padding-bottom: 8px;
  margin-bottom: 22px;
}

/* ══════════════════════════════════════════════════════
   9. MOBILE RESPONSIVE — layout satu kolom
   ══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .pkp_structure_content {
    flex-direction: column !important;
    padding: 14px 12px 36px !important;
    gap: 18px !important;
  }
  .pkp_structure_main {
    width: 100% !important;
    padding: 18px 16px !important;
    border-radius: 8px !important;
  }
  .pkp_structure_sidebar {
    width: 100% !important;
  }
  .obj_article_summary .title,
  .obj_article_summary .authors,
  .obj_article_summary .doi,
  .obj_article_summary .galleys {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .obj_article_summary .stat {
    padding: 8px 14px !important;
  }
}

@media (max-width: 480px) {
  .pkp_structure_main {
    padding: 14px 12px !important;
  }
  .pkp_block h2 {
    font-size: 12.5px !important;
    padding: 9px 14px !important;
  }
  .pkp_block a {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
}

</style>
<script>
/* ══════════════════════════════════════════════════════
   HAMBURGER MENU — JavaScript
   OJS 3 mengizinkan <script> dalam file CSS yang di-upload
   ══════════════════════════════════════════════════════ */
(function(){
  'use strict';

  function init(){
    var navRow = document.querySelector('.pkp_navigation_primary_row');
    var menu   = document.querySelector('ul.pkp_navigation_primary');
    if(!navRow || !menu) return;
    if(document.getElementById('mr-hamburger')) return;

    /* Tombol hamburger */
    var btn = document.createElement('button');
    btn.id  = 'mr-hamburger';
    btn.setAttribute('aria-label','Buka/Tutup Menu Navigasi');
    btn.setAttribute('aria-expanded','false');
    btn.innerHTML = '<span></span><span></span><span></span>';
    navRow.appendChild(btn);

    /* Toggle */
    btn.addEventListener('click', function(e){
      e.stopPropagation();
      var open = menu.classList.toggle('is-open');
      btn.classList.toggle('is-open', open);
      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
    });

    /* Tutup jika klik di luar navbar */
    document.addEventListener('click', function(e){
      var bar = document.querySelector('.pkp_site_nav_menu');
      if(bar && !bar.contains(e.target)){
        menu.classList.remove('is-open');
        btn.classList.remove('is-open');
        btn.setAttribute('aria-expanded','false');
      }
    });

    /* Tutup jika resize ke desktop */
    window.addEventListener('resize', function(){
      if(window.innerWidth > 860){
        menu.classList.remove('is-open');
        btn.classList.remove('is-open');
        btn.setAttribute('aria-expanded','false');
      }
    });
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>
<style>
/* — Muqarin Review CSS v5 — selesai — */