/**
 * ============================================================
 *  INDERSCIENCE STYLE — OJS 3
 *  VERSI FINAL v2 — Bersih, tanpa duplikat, tanpa syntax error
 *  Hapus semua CSS lama, ganti SELURUHNYA dengan ini
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');

/* ============================================================
   VARIABEL
   ============================================================ */
:root {
  --blue:        #003366;
  --blue-dark:   #00224a;
  --blue-light:  #e8f0fa;
  --link:        #1155CC;
  --link-hover:  #003366;
  --bg-page:     #c8dfe8;
  --bg-white:    #ffffff;
  --border:      #cccccc;
  --border-light:#eeeeee;
  --text:        #222222;
  --text-muted:  #666666;
  --nav-bg:      #deeef6;
  --font-body:   'Open Sans', Arial, sans-serif;
  --font-heading:'Merriweather', Georgia, serif;
  --sb-color:    #1b5b85;
  --sb-bg:       #f5f9fc;
  --sb-border:   #cddcea;
  --sb-hover-bg: #dce8f0;
  --sb-radius:   2px;
  --sb-shadow:   0 1px 3px rgba(0,51,102,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --sb-pad:      7px 12px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background-color: var(--bg-page) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  margin: 0; padding: 0;
}

a { color: var(--link) !important; text-decoration: none; }
a:hover, a:focus, a:active { color: var(--link-hover) !important; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--blue) !important;
}

/* ============================================================
   WRAPPER HALAMAN
   ============================================================ */
.pkp_structure_page {
  background-color: var(--bg-white) !important;
  max-width: 1200px !important;
  margin: 20px auto !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.10);
  border-radius: 6px !important;
  overflow: hidden !important;
}

a#pkp_content_main, a#pkp_content_footer {
  display: block !important; width: 0 !important; height: 0 !important;
  overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.pkp_structure_head, header.pkp_structure_head {
  background-color: #ffffff !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 4px 24px !important;
}

.pkp_structure_head > *, header.pkp_structure_head > * {
  background-color: transparent !important;
  background-image: none !important;
}

.pkp_site_name a, .pkp_structure_head .pkp_site_name a {
  color: var(--blue) !important;
  font-family: var(--font-heading) !important;
  font-size: 20px !important; font-weight: 700 !important;
  text-decoration: none !important;
}

.pkp_site_name_tagline {
  color: var(--text-muted) !important; font-size: 12px !important; font-style: italic;
}

.pkp_navigation_user, .pkp_navigation_user .pkp_block, .pkp_navigation_user ul {
  background-color: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
}
.pkp_navigation_user li a, .pkp_navigation_user li button {
  background-color: transparent !important; border: none !important;
  color: var(--blue) !important; font-size: 13px !important;
}
.pkp_navigation_user li a:hover, .pkp_navigation_user li button:hover {
  background-color: transparent !important; color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* ============================================================
   NAVIGASI UTAMA
   ============================================================ */
.pkp_navigation_primary_row {
  background-color: var(--nav-bg) !important;
  border: 1px solid #cddcea !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 0 -6px 8px -12px !important;
  overflow: hidden !important;
}

.pkp_navigation_primary_wrapper {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.pkp_navigation_primary { margin: 0 !important; padding: 0 !important; }

.pkp_navigation_primary > li > a, .pkp_navigation_primary > li > button {
  color: var(--blue) !important; font-weight: 600 !important; font-size: 13px !important;
  text-transform: uppercase !important; letter-spacing: 0.5px !important;
  padding: 5px 16px !important; border: none !important; background: transparent !important;
  font-family: var(--font-body) !important; line-height: 1.2 !important;
  transition: background 0.15s, color 0.15s;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > button:hover,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.in_path > a {
  background-color: var(--blue) !important; color: #ffffff !important; text-decoration: none !important;
}

.pkp_search_toggle, .pkp_navigation_primary .pkp_search {
  padding: 5px 16px !important; line-height: 1.2 !important; border: none !important;
}

.pkp_navigation_primary .pkp_dropdown_content, .pkp_navigation_primary .dropdown-menu {
  background: var(--bg-white) !important; border: 1px solid var(--border) !important;
  border-top: 2px solid var(--blue) !important; border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.pkp_navigation_primary .pkp_dropdown_content a {
  color: var(--link) !important; padding: 8px 14px !important; font-size: 13px !important;
  border-bottom: 1px solid var(--border-light) !important; display: block;
}
.pkp_navigation_primary .pkp_dropdown_content a:hover {
  background: var(--blue-light) !important; color: var(--blue) !important;
}

.pkp_navigation_breadcrumbs {
  font-size: 12px !important; color: var(--text-muted) !important;
  background: transparent !important; padding: 6px 0 !important;
}
.pkp_navigation_breadcrumbs a { color: var(--link) !important; }

/* ============================================================
   LAYOUT — 3 KOLOM FLEX
   ============================================================ */
.pkp_structure_content, .pkp_structure_content.has_sidebar {
  display: flex !important; flex-direction: row !important;
  align-items: flex-start !important; flex-wrap: nowrap !important;
  background: var(--bg-white) !important;
  padding: 8px 12px !important; gap: 12px !important;
  border: none !important; box-shadow: none !important;
}

.pkp_structure_main::before, .pkp_structure_main::after,
.pkp_structure_sidebar::before, .pkp_structure_sidebar::after,
.pkp_structure_content::before, .pkp_structure_content::after,
.has_sidebar::before, .has_sidebar::after {
  display: none !important; content: none !important; border: none !important;
}

.pkp_structure_main {
  flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important;
  background: linear-gradient(to bottom, #ddeef6 0%, #eaf4f9 40%, #f5fafd 100%) !important;
  padding: 16px !important; border-radius: 2px; float: none !important;
}

.pkp_structure_main h1, .pkp_structure_main h1.page_title, .page_header h1, h1.pkp_page_title {
  color: var(--blue) !important; font-family: var(--font-heading) !important;
  font-size: 22px !important; border: none !important;
  margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 12px;
}
.pkp_structure_main h2, .pkp_structure_main h3, .pkp_structure_main h4 { color: var(--blue) !important; }

.pkp_structure_main p, .pkp_structure_main td,
.obj_article_details .main_entry p, .obj_article_details .abstract p {
  text-align: justify !important;
}

/* ============================================================
   SIDEBAR — UKURAN & POSISI
   ============================================================ */
#left_sidebar_custom {
  order: -1 !important;
  width: 230px !important; min-width: 230px !important; max-width: 230px !important;
  flex-shrink: 0 !important; align-self: flex-start !important;
}

div.pkp_structure_sidebar, div.pkp_structure_sidebar.left {
  width: 230px !important; min-width: 230px !important; max-width: 230px !important;
  flex-shrink: 0 !important; margin-top: 0 !important; padding-top: 0 !important;
  align-self: flex-start !important; position: sticky; top: 10px;
  border: none !important; box-shadow: none !important;
}

/* ============================================================
   SIDEBAR KIRI — item styling
   ============================================================ */
html body div#left_sidebar_custom .pkp_block {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
html body div#left_sidebar_custom .pkp_block .title,
html body div#left_sidebar_custom .pkp_block h2 { display: none !important; }

html body div#left_sidebar_custom .pkp_block ul {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 3px !important;
}
html body div#left_sidebar_custom .pkp_block ul li {
  margin: 0 !important; padding: 0 !important; border: none !important;
}
html body div#left_sidebar_custom .pkp_block ul li a {
  display: block !important;
  padding: var(--sb-pad) !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  color: var(--sb-color) !important;
  background: var(--sb-bg) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: var(--sb-radius) !important;
  box-shadow: var(--sb-shadow) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: background 0.15s, color 0.15s;
}
html body div#left_sidebar_custom .pkp_block ul li a:hover,
html body div#left_sidebar_custom .pkp_block ul li a:focus {
  background: var(--sb-hover-bg) !important;
  color: var(--sb-color) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,51,102,0.18) !important;
}

/* ============================================================
   SIDEBAR KANAN — item styling (semua variasi struktur OJS)
   ============================================================ */
div.pkp_structure_sidebar .pkp_block,
div.pkp_structure_sidebar.left .pkp_block {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
div.pkp_structure_sidebar .pkp_block h2.title,
div.pkp_structure_sidebar .pkp_block .pkp_screen_reader {
  display: none !important; height: 0 !important; overflow: hidden !important;
  margin: 0 !important; padding: 0 !important;
}

/* Reset wrapper div inline style */
html body div.pkp_structure_sidebar div.content > div,
html body div.pkp_structure_sidebar .pkp_block .content div > div,
html body div.pkp_structure_sidebar .pkp_block_custom .content > div,
html body div.pkp_structure_sidebar [id*="customblock"] .content > div,
html body div.pkp_structure_sidebar .pkp_block .content > div {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 3px 0 !important;
  box-shadow: none !important;
}

/* Link sidebar kanan */
html body div.pkp_structure_sidebar div.content > div > a,
html body div.pkp_structure_sidebar .pkp_block .content div > div > a,
html body div.pkp_structure_sidebar .pkp_block_custom .content > div > a,
html body div.pkp_structure_sidebar [id*="customblock"] .content > div > a,
html body div.pkp_structure_sidebar .pkp_block .content > div > a,
html body div.pkp_structure_sidebar .pkp_block .content > a,
html body div.pkp_structure_sidebar a {
  display: block !important;
  padding: var(--sb-pad) !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  color: #1b5b85 !important;
  background: #f5f9fc !important;
  background-color: #f5f9fc !important;
  border: 1px solid #cddcea !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 3px rgba(0,51,102,0.10), 0 1px 2px rgba(0,0,0,0.06) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  margin-bottom: 3px !important;
  transition: background 0.15s, color 0.15s;
}
html body div.pkp_structure_sidebar div.content > div > a:hover,
html body div.pkp_structure_sidebar .pkp_block .content div > div > a:hover,
html body div.pkp_structure_sidebar .pkp_block_custom .content > div > a:hover,
html body div.pkp_structure_sidebar [id*="customblock"] .content > div > a:hover,
html body div.pkp_structure_sidebar a:hover,
html body div.pkp_structure_sidebar a:focus {
  background: #dce8f0 !important;
  background-color: #dce8f0 !important;
  color: #1b5b85 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,51,102,0.18) !important;
}

/* ============================================================
   GALLEY LINK
   ============================================================ */
.obj_galley_link, a.obj_galley_link {
  background-color: var(--blue) !important; color: #ffffff !important;
  font-size: 12px !important; padding: 4px 12px !important;
  border-radius: 2px !important; text-decoration: none !important;
  display: inline-block; margin: 2px 2px 2px 0;
}
.obj_galley_link:hover, a.obj_galley_link:hover {
  background-color: var(--blue-dark) !important; color: #ffffff !important;
}

/* ============================================================
   TOMBOL
   ============================================================ */
.pkp_button, .btn-primary, input[type="submit"], button[type="submit"] {
  background-color: var(--blue) !important; border: none !important;
  color: #fff !important; border-radius: 2px !important;
  font-size: 13px !important; padding: 7px 18px !important;
}
.pkp_button:hover, .btn-primary:hover { background-color: var(--blue-dark) !important; }

/* ============================================================
   TABEL JOURNAL INFORMATION
   ============================================================ */
.pkp_structure_main table.data {
  width: 100% !important; border-collapse: collapse !important;
  margin-bottom: 1.5rem !important; background: transparent !important;
}
.pkp_structure_main table.data tr { border-bottom: 0.5px solid #deeef6 !important; }
.pkp_structure_main table.data tr:last-child { border-bottom: none !important; }
.pkp_structure_main table.data tr:hover td { background-color: #f4f9fc !important; }
.pkp_structure_main table.data td {
  padding: 4px 14px !important; font-size: 13px !important;
  vertical-align: middle !important; background: transparent !important; border: none !important;
}
.pkp_structure_main table.data td:first-child {
  color: #555555 !important; width: 35% !important; font-weight: 400 !important;
}
.pkp_structure_main table.data td:nth-child(2) {
  width: 2% !important; padding: 4px 2px !important; text-align: center !important; color: #555 !important;
}
.pkp_structure_main table.data td:nth-child(3) {
  color: var(--blue) !important; font-weight: 500 !important; padding-left: 6px !important;
}

/* ============================================================
   DAFTAR ARTIKEL
   ============================================================ */
.obj_article_summary { border: none !important; padding: 4px 0 !important; margin: 0 !important; }
.obj_article_summary .title a {
  color: var(--blue) !important; font-weight: 700 !important;
  font-family: var(--font-heading) !important; font-size: 15px !important;
}
.obj_article_summary .title a:hover { color: var(--link-hover) !important; text-decoration: underline !important; }
.obj_article_summary .authors { color: var(--text-muted) !important; font-size: 13px !important; }

h2.section_title, .section_title, .obj_issue_toc .section_title {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 0 6px 0 !important; margin: 16px 0 8px 0 !important; color: var(--blue) !important;
}

/* ============================================================
   ARTIKEL DETAIL
   ============================================================ */
article.obj_article_details .row {
  display: flex !important; flex-direction: row !important;
  align-items: flex-start !important; gap: 20px !important; padding: 0 !important; margin: 0 !important;
}
article.obj_article_details .row::before, article.obj_article_details .row::after {
  display: none !important; content: none !important;
}
article.obj_article_details .main_entry {
  flex: 1 1 auto !important; min-width: 0 !important; order: 1 !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
article.obj_article_details .entry_details {
  flex: 0 0 200px !important; width: 200px !important; max-width: 200px !important;
  order: 2 !important; align-self: flex-start !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
}
article.obj_article_details .item.cover_image img {
  width: 180px !important; max-width: 180px !important; height: auto !important;
  border: 1px solid #cccccc !important; box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  display: block !important;
}
.obj_article_details .entry_details .item {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 4px 0 !important; margin-bottom: 8px !important; width: 100% !important;
}
.obj_article_details .entry_details .label, .obj_article_details .entry_details h2,
.obj_article_details .entry_details h3 {
  background: transparent !important; border: none !important;
  border-bottom: 1px solid #cccccc !important; font-size: 10px !important;
  padding: 0 0 2px 0 !important; margin: 0 0 4px 0 !important;
}
.obj_article_details .entry_details .value, .obj_article_details .entry_details p,
.obj_article_details .entry_details a {
  font-size: 12px !important; padding: 0 !important; line-height: 1.4 !important;
}
.obj_article_details .entry_details .item.galleys {
  display: flex !important; justify-content: center !important; margin-top: 8px !important;
}
.obj_article_details h1.page_title, .pkp_structure_main h1.page_title {
  border: none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
div.pkp_structure_footer_wrapper, div.pkp_structure_footer,
div.pkp_footer_content, .pkp_structure_footer, footer.pkp_structure_footer {
  background: transparent !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important; color: var(--text) !important;
}
div.pkp_brand_footer { background: transparent !important; border: none !important; display: none !important; }
.pkp_structure_footer a, div.pkp_footer_content a { color: var(--link) !important; }
.pkp_structure_footer a:hover { color: var(--blue) !important; }
div.pkp_structure_footer_wrapper::before, div.pkp_structure_footer_wrapper::after,
div.pkp_structure_footer::before, div.pkp_structure_footer::after,
.pkp_structure_page::after { display: none !important; content: none !important; }

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .pkp_structure_page { max-width: 100% !important; box-shadow: none; margin: 0 !important; }
  .pkp_structure_content, .pkp_structure_content.has_sidebar {
    flex-direction: column !important; padding: 10px !important; gap: 10px !important;
  }
  #left_sidebar_custom, .pkp_structure_main, div.pkp_structure_sidebar {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    flex: 0 0 100% !important; margin: 0 !important;
  }
  .pkp_structure_head { padding: 8px 12px !important; }
  .pkp_navigation_primary_row { padding: 0 !important; margin: 0 !important; }
  article.obj_article_details .row { flex-direction: column !important; }
  article.obj_article_details .entry_details {
    flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
  }
}
/* ============================================================
   MAIN CONTENT — samakan dengan gaya item sidebar
   ============================================================ */
.pkp_structure_main {
  background: var(--sb-bg) !important;          /* #f5f9fc — sama dengan item sidebar */
  border: 1px solid var(--sb-border) !important; /* #cddcea */
  box-shadow: var(--sb-shadow) !important;        /* 0 1px 3px rgba(0,51,102,0.10), 0 1px 2px rgba(0,0,0,0.06) */
  border-radius: var(--sb-radius) !important;     /* 2px */
}
/* ============================================================
   SEMBUNYIKAN SEARCH DI NAVIGASI KANAN ATAS
   ============================================================ */
.pkp_search_toggle,
.pkp_navigation_primary .pkp_search,
li.pkp_search_toggle,
.pkp_navigation_primary > li:last-child .pkp_search {
  display: none !important;
}
/* ============================================================
   SEMBUNYIKAN SEARCH DI NAVIGASI KANAN ATAS
   ============================================================ */
.pkp_search_toggle,
.pkp_navigation_primary .pkp_search,
li.pkp_search_toggle,
.pkp_navigation_primary > li:last-child,
.pkp_navigation_primary_wrapper .pkp_search,
ul.pkp_navigation_primary li.pkp_search_toggle,
.pkp_navigation_user .pkp_search,
a.pkp_search_toggle,
button.pkp_search_toggle,
[class*="search_toggle"],
[class*="pkp_search"] {
  display: none !important;
  visibility: hidden !important;
}
/* ============================================================
   SELARASKAN KONTEN TENGAH DENGAN BARIS PERTAMA SIDEBAR
   ============================================================ */
.pkp_structure_main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.pkp_structure_main > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pkp_structure_main h1.page_title,
.pkp_structure_main h1:first-child,
.pkp_structure_main .page_header:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pkp_structure_content {
  align-items: flex-start !important;
  padding-top: 0 !important;
}
/* ============================================================
   SELARASKAN KONTEN TENGAH DENGAN BARIS PERTAMA SIDEBAR
   ============================================================ */
html body .pkp_structure_page .pkp_structure_content .pkp_structure_main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

html body .pkp_structure_page .pkp_structure_content .pkp_structure_main > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body .pkp_structure_page .pkp_structure_content .pkp_structure_main h1:first-child,
html body .pkp_structure_page .pkp_structure_content .pkp_structure_main .page_header:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body .pkp_structure_page .pkp_structure_content .pkp_structure_main .pkp_navigation_breadcrumbs {
  display: none !important;
}