/* =========================================================
   Jurnal Ilmiyyah — Custom Theme
   Palette: Deep Green + Warm Gold + Off-White
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Lora:ital,wght@0,500;0,700;1,500&display=swap');

:root {
  --green-900: #0d3b28;
  --green-800: #145236;
  --green-700: #1e6b52;
  --green-600: #27895f;
  --green-100: #e8f5ef;
  --green-50:  #f2faf6;
  --gold-600:  #b07d0a;
  --gold-400:  #d4a017;
  --gold-200:  #f0c940;
  --neutral-900: #1a1f2e;
  --neutral-800: #2d3442;
  --neutral-600: #4a5568;
  --neutral-400: #94a3b8;
  --neutral-200: #e2e8f0;
  --neutral-100: #f1f5f9;
  --neutral-50:  #f8fafc;
  --white: #ffffff;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.07);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.09);
  --shadow-md: 0 4px 18px rgba(0,0,0,.10);
  --r: 10px;
  --t: .2s ease;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html, body, .pkp_structure_page { background: var(--neutral-50) !important; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  color: var(--neutral-800);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { transition: color var(--t); }
img { max-width: 100%; }

/* ═══════════════════════════════════════
   HEADER — gunakan ID selector untuk
   specificity lebih tinggi dari OJS CSS
═══════════════════════════════════════ */
#headerNavigationContainer,
.pkp_structure_head {
  background: var(--green-800) !important;
  background-image: none !important;
  border-bottom: none !important;
}
#headerNavigationContainer .pkp_navigation_user_wrapper,
.pkp_navigation_user_wrapper {
  background: rgba(0,0,0,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.pkp_nav_user { background: transparent !important; }
.pkp_nav_user > li > a {
  color: rgba(255,255,255,.8) !important;
  font-size: .8rem !important;
  font-weight: 500;
  padding: 4px 10px !important;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  margin-left: 6px;
}
.pkp_nav_user > li > a:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.pkp_site_name_wrapper {
  background: transparent !important;
  padding: 10px 0 8px;
  border-bottom: none !important;
  box-shadow: none !important;
  width: 100% !important;
  display: block !important;
}
.pkp_site_name_wrapper::after { display: none !important; }
.pkp_site_name_wrapper .pkp_site_name img {
  max-height: 56px;
  width: auto;
  display: block;
}
.pkp_site_name_wrapper .pkp_site_name a,
.pkp_site_name_wrapper .pkp_site_name span {
  color: #fff !important;
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.pkp_navigation_primary_wrapper {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 3px solid var(--gold-400);
}
.pkp_navigation_primary_wrapper > ul > li > a,
.pkp_navigation_primary_wrapper > ul > li > button { background: transparent !important; }
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > button {
  color: rgba(255,255,255,.85) !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  transition: color var(--t) !important;
  background: none !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > button:hover {
  color: var(--gold-200) !important;
  background: rgba(255,255,255,.06) !important;
}
.pkp_navigation_primary .pkp_dropdown_content {
  background: var(--white) !important;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  border: 1px solid var(--neutral-200);
  overflow: hidden;
}
.pkp_navigation_primary .pkp_dropdown_content a {
  color: var(--neutral-800) !important;
  font-size: .87rem !important;
  padding: 10px 16px !important;
  background: none !important;
}
.pkp_navigation_primary .pkp_dropdown_content a:hover {
  background: var(--green-50) !important;
  color: var(--green-700) !important;
}
.pkp_site_nav_toggle button { color: #fff !important; }

.pkp_search input[type=text],
.search_block input[type=text] {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  padding: 5px 14px !important;
  font-size: .84rem !important;
  width: 170px;
}
.pkp_search input::placeholder { color: rgba(255,255,255,.5) !important; }

/* ═══════════════════════════════════════
   LAYOUT — override OJS fixed width
═══════════════════════════════════════ */
#pkp_content_main { padding: 24px 0 44px; }

.pkp_structure_content {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}
.pkp_structure_content > .pkp_columns,
.pkp_structure_content .row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hapus clearfix pseudo-element dari OJS */
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none !important;
  content: none !important;
}

/* Main white card */
.pkp_structure_main {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
  margin-bottom: 16px;
  border: 1px solid var(--neutral-200);
}

/* ── BREADCRUMBS ── */
.pkp_breadcrumbs {
  background: transparent;
  padding: 0 0 14px;
  font-size: .82rem;
  color: var(--neutral-400);
  border: none;
  box-shadow: none;
  margin-bottom: 8px;
}
.pkp_breadcrumbs a { color: var(--green-700) !important; text-decoration: none; font-weight: 500; }
.pkp_breadcrumbs a:hover { color: var(--gold-600) !important; }
.pkp_breadcrumbs .separator { color: var(--neutral-300, #cbd5e1); margin: 0 5px; }

/* ═══════════════════════════════════════
   SHARED SECTION LABEL
   Gunakan class helper .section-label
   atau target elemen spesifik.
   TIDAK pakai ::after + absolute agar
   tidak ada offset.
═══════════════════════════════════════ */
.pkp_structure_sidebar .pkp_block h2,
.obj_issue_full .sections h2,
.obj_issue_full .section h2,
.pkp_structure_main > h2,
.pkp_page_index h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--neutral-400);
  border: none;
  border-left: 3px solid var(--gold-400);
  padding: 2px 0 2px 10px;
  margin: 0 0 16px;
  background: none;
  position: static;
}
.pkp_structure_sidebar .pkp_block h2::after,
.obj_issue_full .sections h2::after,
.obj_issue_full .section h2::after,
.pkp_structure_main > h2::after,
.pkp_page_index h2::after { display: none !important; }

/* ═══════════════════════════════════════
   ISSUE PAGE
═══════════════════════════════════════ */
.obj_issue_full h1 {
  font-family: 'Lora', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0 0 6px;
  line-height: 1.35;
}

/* Published date — kompak satu baris */
.obj_issue_full .published,
.obj_issue_full .pkp_helpers_clear {
  font-size: .82rem !important;
  color: var(--neutral-400) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: block !important;
  line-height: 1.4 !important;
}
.obj_issue_full .published strong,
.obj_issue_full .published label,
.obj_issue_full .pkp_helpers_clear strong {
  font-weight: 600 !important;
  color: var(--neutral-600) !important;
  margin-right: 4px;
}

/* Section heading + article list gap */
.obj_issue_full .sections,
.obj_issue_full .section {
  margin-top: 0 !important;
}
.obj_issue_full .sections h2,
.obj_issue_full .section h2 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* ── ARTICLE LISTING CARDS ── */
.obj_article_summary {
  display: block;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: all var(--t);
  box-shadow: var(--shadow-xs);
  border-left: 3px solid transparent;
  text-decoration: none;
}
.obj_article_summary:hover {
  border-left-color: var(--gold-400);
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}
.obj_article_summary h3 { margin: 0 0 5px; }
.obj_article_summary h3 a {
  color: var(--green-800) !important;
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
}
.obj_article_summary h3 a:hover { color: var(--gold-600) !important; }
.obj_article_summary .authors {
  color: var(--neutral-500, #6b7280);
  font-size: .82rem;
  margin: 4px 0 8px;
  font-style: italic;
}
.obj_article_summary .pages { color: var(--neutral-400); font-size: .78rem; }
.obj_article_summary .section {
  background: var(--green-100);
  color: var(--green-700);
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 6px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

/* galley / download buttons */
.obj_galley { display: inline-block; margin: 0 5px 0 0; }
.galley_label,
.obj_galley .label {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: var(--green-700) !important;
  color: #fff !important;
  border: none !important;
  padding: 5px 14px !important;
  border-radius: 6px !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all var(--t) !important;
  cursor: pointer;
}
.galley_label:hover,
.obj_galley .label:hover {
  background: var(--gold-600) !important;
  transform: translateY(-1px);
}

/* ── ISSUE LISTING ── */
.obj_issue_summary {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-xs);
  transition: all var(--t);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.obj_issue_summary:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.obj_issue_summary .title a {
  color: var(--green-800) !important;
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}
.obj_issue_summary .title a:hover { color: var(--gold-600) !important; }
.obj_issue_summary .meta { color: var(--neutral-400); font-size: .8rem; }

/* ── SIDEBAR ── */
.pkp_structure_sidebar .pkp_block {
  background: var(--white);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 14px;
  border: 1px solid var(--neutral-200);
}
.pkp_structure_sidebar .pkp_block ul { margin: 0; padding: 0; list-style: none; }
.pkp_structure_sidebar .pkp_block ul li { border-bottom: 1px solid var(--neutral-100); }
.pkp_structure_sidebar .pkp_block ul li:last-child { border-bottom: none; }
.pkp_structure_sidebar .pkp_block ul li a {
  color: var(--neutral-700, #374151) !important;
  font-size: .86rem;
  padding: 7px 0;
  display: block;
  text-decoration: none;
  font-weight: 500;
}
.pkp_structure_sidebar .pkp_block ul li a:hover { color: var(--green-700) !important; padding-left: 4px; }

/* ═══════════════════════════════════════
   ARTICLE DETAIL
═══════════════════════════════════════ */

/* Judul artikel */
.obj_article_details .page_title {
  font-family: 'Lora', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.4;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--neutral-200);
}

/* Row = flex container untuk main_entry + entry_details */
.obj_article_details .row {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kolom kiri — konten utama */
.obj_article_details .main_entry {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Kolom kanan — sidebar metadata */
.obj_article_details .entry_details {
  flex: 0 0 210px !important;
  width: 210px !important;
  background: var(--neutral-50) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  align-self: flex-start !important;
  position: sticky;
  top: 16px;
}

/* ── MAIN ENTRY: authors ── */
.obj_article_details .main_entry .item {
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--neutral-100) !important;
}
.obj_article_details .main_entry .item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.obj_article_details .main_entry ul.authors {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.obj_article_details .main_entry ul.authors li {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 3px !important;
  padding: 0 !important;
}
.obj_article_details .main_entry .authors .name {
  font-weight: 700 !important;
  color: var(--neutral-800) !important;
  font-size: .92rem !important;
}
.obj_article_details .main_entry .authors .userGroup {
  font-size: .76rem !important;
  color: var(--neutral-400) !important;
  font-style: italic !important;
}

/* ── MAIN ENTRY: label headings (Kata Kunci, Abstrak) ── */
.obj_article_details .main_entry h2.label {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--neutral-400) !important;
  border: none !important;
  border-left: 3px solid var(--gold-400) !important;
  padding: 1px 0 1px 8px !important;
  margin: 0 0 10px !important;
  background: none !important;
}

/* ── MAIN ENTRY: keywords (plain text, bukan link) ── */
.obj_article_details .main_entry .item.keywords .value {
  font-size: .86rem !important;
  color: var(--neutral-600) !important;
  line-height: 1.65 !important;
}

/* ── MAIN ENTRY: abstract ── */
.obj_article_details .main_entry .item.abstract {
  font-size: .94rem !important;
  color: var(--neutral-700, #374151) !important;
  line-height: 1.82 !important;
  text-align: justify !important;
}

/* ── ENTRY DETAILS: setiap item ── */
.obj_article_details .entry_details .item {
  margin: 0 0 12px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--neutral-100) !important;
  font-size: .84rem !important;
}
.obj_article_details .entry_details .item:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* sub_item di dalam item */
.obj_article_details .entry_details .sub_item {
  margin-bottom: 8px !important;
}
.obj_article_details .entry_details .sub_item:last-child {
  margin-bottom: 0 !important;
}

/* Label (Diterbitkan, Terbitan, Bagian) */
.obj_article_details .entry_details h2.label {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--neutral-400) !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* Value text */
.obj_article_details .entry_details .value {
  font-size: .83rem !important;
  color: var(--neutral-700, #374151) !important;
  line-height: 1.45 !important;
  display: block !important;
}
.obj_article_details .entry_details .value a {
  color: var(--green-700) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.obj_article_details .entry_details .value a:hover { color: var(--gold-600) !important; }

/* ── ENTRY DETAILS: tombol unduh PDF ── */
.obj_article_details .entry_details .item.galleys h2.pkp_screen_reader {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}
.obj_article_details .entry_details .galleys_links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.obj_article_details .entry_details .galleys_links li {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
/* Override OJS line-height raksasa + color biru */
.obj_article_details .entry_details a.obj_galley_link,
.obj_article_details .entry_details .obj_galley_link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--green-700) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  text-decoration: none !important;
  transition: background var(--t) !important;
}
/* FontAwesome icon sebelum teks juga putih */
.obj_article_details .entry_details a.obj_galley_link::before,
.obj_article_details .entry_details .obj_galley_link::before {
  color: #ffffff !important;
  font-size: .9rem !important;
}
.obj_article_details .entry_details a.obj_galley_link:hover,
.obj_article_details .entry_details .obj_galley_link:hover {
  background: var(--gold-600) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════
   HOMEPAGE DESCRIPTION
═══════════════════════════════════════ */
.pkp_page_index .description,
.home_header_content {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-left: 4px solid var(--green-700);
  border-radius: 8px;
  padding: 16px 20px;
  color: var(--neutral-700, #374151);
  font-size: .93rem;
  line-height: 1.75;
  margin-bottom: 22px;
}

/* ═══════════════════════════════════════
   FORMS
═══════════════════════════════════════ */
input[type=text],
input[type=email],
input[type=password],
input[type=search],
select,
textarea {
  border: 1.5px solid var(--neutral-200) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: .9rem !important;
  background: #fff !important;
  color: var(--neutral-800) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: var(--t) !important;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--green-600) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30,107,82,.1) !important;
}

input[type=submit],
button[type=submit],
.pkp_button {
  background: var(--green-700) !important;
  color: #fff !important;
  border: none !important;
  padding: 9px 22px !important;
  border-radius: 8px !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all var(--t) !important;
}
input[type=submit]:hover,
button[type=submit]:hover,
.pkp_button:hover {
  background: var(--gold-600) !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════
   PAGINATION
═══════════════════════════════════════ */
.pkp_helpers_align_right a,
.cmp_pagination a {
  background: var(--green-700) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 7px 18px !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block;
  border: none !important;
}
.pkp_helpers_align_right a:hover,
.cmp_pagination a:hover { background: var(--gold-600) !important; }

/* ═══════════════════════════════════════
   ANNOUNCEMENTS
═══════════════════════════════════════ */
.obj_announcement_summary,
.cmp_announcements {
  background: var(--white);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 10px;
  border: 1px solid var(--neutral-200);
  border-left: 3px solid var(--gold-400);
  box-shadow: var(--shadow-xs);
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.pkp_structure_footer_wrapper {
  background: linear-gradient(160deg, var(--green-900) 0%, var(--neutral-900) 100%) !important;
  color: rgba(255,255,255,.7) !important;
  padding: 36px 0 24px !important;
  border-top: none !important;
}
.pkp_structure_footer_wrapper a,
.pkp_structure_footer a,
.pkp_brand_footer a {
  color: rgba(255,255,255,.65) !important;
  text-decoration: none;
}
.pkp_structure_footer_wrapper a:hover,
.pkp_structure_footer a:hover { color: var(--gold-200) !important; }
.pkp_structure_footer_wrapper p,
.pkp_brand_footer p { color: rgba(255,255,255,.7) !important; }
.pkp_structure_footer_wrapper .pkp_footer_powered_by,
.pkp_structure_footer .pkp_footer_powered_by {
  font-size: .74rem;
  opacity: .4;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 14px;
  text-align: center;
}

/* ═══════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--neutral-100); }
::-webkit-scrollbar-thumb { background: rgba(30,107,82,.25); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-700); }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .pkp_structure_main { padding: 18px 16px; }
  .obj_article_details .page_title { font-size: 1.2rem; }
  .obj_article_details .row { flex-direction: column !important; gap: 16px !important; }
  .obj_article_details .entry_details {
    flex: none !important;
    width: 100% !important;
    position: static !important;
  }
  .pkp_site_name_wrapper .pkp_site_name img { max-height: 46px; }
}
@media (max-width: 640px) {
  .pkp_navigation_primary > li > a { padding: 10px 12px !important; font-size: .82rem !important; }
  .obj_issue_summary { flex-direction: column; }
  .obj_article_details .main_entry ul.authors li { flex-direction: column !important; gap: 0 !important; }
}