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

/* ==========================================================================
   JPI — Indonesian Journal of Political and Civil Society Research
   Custom stylesheet for OJS 3.1.2.4 (Default theme)

   Written mobile-first. The Default theme uses min-width breakpoints at
   480 / 768 / 992 / 1200px with fixed container widths (728 / 952 / 1160px),
   and floats .pkp_structure_main + .pkp_structure_sidebar from 992px up.
   This file follows the same breakpoints so the grid maths stay intact.

   Icons come from Font Awesome 4.7, which OJS already loads on every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palet disamakan persis dengan Office (--isl-* di elearning.css) */
  --jpi-primary: #0F6E56;      /* isl-700 */
  --jpi-primary-dark: #064136; /* isl-900 */
  --jpi-primary-light: #12836A;/* isl-600 */
  --jpi-accent: #eb9a01;
  --jpi-accent-soft: #fff4de;
  --jpi-accent-line: #f3dfb6;

  --jpi-ink: #212529;    /* Office --teks */
  --jpi-body: #212529;   /* Office --teks */
  --jpi-muted: #6B8079;  /* Office --teks-redup */
  --jpi-line: #E6EDE9;   /* Office --garis */
  --jpi-bg: #F2F6F4;     /* Office --permukaan-2 */
  --jpi-card: #ffffff;   /* Office --permukaan */

  --jpi-radius: 10px;
  --jpi-radius-sm: 7px;
  --jpi-shadow: 0 1px 2px rgba(16,32,28,.05), 0 6px 20px -8px rgba(16,32,28,.14);
  --jpi-shadow-lg: 0 2px 4px rgba(16,32,28,.06), 0 18px 40px -14px rgba(16,32,28,.22);

  --jpi-tap: 44px; /* minimum touch target */
}

/* Icon base shared by every ::before/::after glyph below */
.obj_article_details .entry_details .item > .label:before,
.obj_article_details .entry_details .sub_item > .label:before,
.obj_article_details .authors .name:before,
.obj_article_details .item.galleys:before,
.obj_article_summary .pages:before,
.obj_issue_toc .published .label:before,
.obj_galley_link:before,
.read_more:after,
#cssmenu ul > li.has-sub > a:after {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   2. Base & typography (mobile first)
   -------------------------------------------------------------------------- */
body,
.pkp_structure_page {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--jpi-body);
  background: var(--jpi-bg);
  font-size: 16px; /* 16px stops iOS zooming when a field is focused */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.pkp_structure_page {
  background: transparent;
  box-shadow: none;
  overflow-x: hidden; /* nothing may scroll the page sideways */
}

*, *:before, *:after { box-sizing: border-box; }

h1, h2, h3, h4, h5,
.obj_article_summary .title,
.current_issue_title,
.obj_article_details .page_title {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--jpi-ink);
  letter-spacing: -0.01em;
}

a { color: var(--jpi-primary); }
a:hover, a:focus { color: var(--jpi-primary-light); }

.pkp_structure_main img { max-width: 100%; height: auto; }

/* Long URLs in reference lists must never widen the page */
.obj_article_details .item.references .value,
.obj_article_details .item.abstract .value,
.pkp_block .content { overflow-wrap: break-word; word-wrap: break-word; }

/* Visible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--jpi-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Masthead & navigation (mobile first)
   -------------------------------------------------------------------------- */
.pkp_structure_head {
  background: linear-gradient(135deg, var(--jpi-primary-dark) 0%, var(--jpi-primary) 55%, #12836A 100%);
  border-bottom: 4px solid var(--jpi-accent);
  box-shadow: 0 2px 18px rgba(6,65,54,.25);
  position: relative;
  overflow: hidden;
}
.pkp_structure_head:after {
  content: '';
  position: absolute;
  top: -60%;
  right: -8%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235,154,1,.16) 0%, rgba(235,154,1,0) 68%);
  pointer-events: none;
}

.pkp_head_wrapper { position: relative; z-index: 1; padding: 0 14px; }

.pkp_site_name_wrapper { padding: 16px 0 12px; }
.pkp_site_name .is_img img {
  max-height: 46px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.28));
}

/* -- user strip (login / language / admin) -- */
.pkp_navigation_user_wrapper {
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pkp_navigation_user > li > a {
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  line-height: 1.4;
}
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus { color: var(--jpi-white-soft); }

/* -- primary navigation -- */
.pkp_navigation_primary_row {
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.13);
  margin: 0 -14px;
  padding: 0 8px;
}

.pkp_navigation_primary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.pkp_navigation_primary > li { flex: 0 0 auto; }

.pkp_navigation_primary > li > a {
  display: block;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 12px;
  min-height: var(--jpi-tap);
  line-height: 20px;
  border-bottom: 3px solid transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.in_focus > a {
  color: var(--jpi-white-soft);
  background: rgba(255,255,255,.09);
  border-bottom-color: var(--jpi-accent);
}

/* dropdown */
.pkp_navigation_primary ul {
  background: #fff;
  border: 1px solid var(--jpi-line);
  border-top: 3px solid var(--jpi-accent);
  border-radius: 0 0 var(--jpi-radius) var(--jpi-radius);
  box-shadow: var(--jpi-shadow-lg);
  padding: 6px 0;
  min-width: 240px;
}
.pkp_navigation_primary ul li a {
  color: var(--jpi-body);
  font-size: 14px;
  padding: 11px 18px;
  border: 0;
  transition: background .15s ease, color .15s ease;
}
.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus {
  background: var(--jpi-accent-soft);
  color: var(--jpi-primary-dark);
}

/* -- search -- */
.pkp_search { padding: 4px 0 12px; }
.pkp_search .search_prompt,
.pkp_navigation_search_wrapper a {
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 13px;
}
.pkp_search input[type="text"] {
  width: 100%;
  border: 1px solid rgba(255,255,255,.35);
  background: #fff;
  border-radius: var(--jpi-radius-sm);
  padding: 11px 14px;
  font-size: 16px;
  font-family: inherit;
  min-height: var(--jpi-tap);
}
.pkp_search button,
.pkp_search input[type="submit"] {
  width: 100%;
  margin-top: 8px;
  min-height: var(--jpi-tap);
  background: var(--jpi-accent);
  border: 0;
  color: #3d2a00;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--jpi-radius-sm);
  padding: 11px 18px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Page shell
   -------------------------------------------------------------------------- */
.pkp_structure_content { padding: 16px 12px 36px; }

.pkp_structure_main {
  background: var(--jpi-card);
  border: 1px solid var(--jpi-line);
  border-radius: var(--jpi-radius);
  box-shadow: var(--jpi-shadow);
  padding: 20px 16px 28px;
}
/* the theme draws 1px column rules either side of main — wrong on a card */
.pkp_structure_main:before,
.pkp_structure_main:after { display: none !important; }

.pkp_structure_sidebar { padding: 20px 0 0; }

/* --------------------------------------------------------------------------
   5. Headings & breadcrumbs
   -------------------------------------------------------------------------- */
.page_index_journal > h1,
.pkp_structure_main > .page > h1,
.obj_issue_toc > h2,
.current_issue > h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--jpi-line);
  position: relative;
}
.page_index_journal > h1:after,
.pkp_structure_main > .page > h1:after,
.obj_issue_toc > h2:after,
.current_issue > h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 58px;
  height: 3px;
  background: var(--jpi-accent);
  border-radius: 2px;
}

.cmp_breadcrumbs {
  font-size: 13px;
  color: var(--jpi-muted);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jpi-line);
}
.cmp_breadcrumbs ol { margin: 0; padding: 0; list-style: none; }
.cmp_breadcrumbs li { display: inline; }
.cmp_breadcrumbs a { color: var(--jpi-muted); text-decoration: none; }
.cmp_breadcrumbs a:hover { color: var(--jpi-primary); text-decoration: underline; }
.cmp_breadcrumbs .separator { padding: 0 6px; opacity: .5; }

/* --------------------------------------------------------------------------
   6. Current issue block (home / issue TOC)
   -------------------------------------------------------------------------- */
.current_issue_title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--jpi-primary-dark);
  margin: 0 0 16px;
}

.obj_issue_toc .heading { display: block; }

.obj_issue_toc .cover {
  display: block;
  float: none;
  margin: 0 auto 18px;
  max-width: 190px;
}
.obj_issue_toc .cover img,
.obj_issue_summary .cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--jpi-line);
  box-shadow: var(--jpi-shadow-lg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.obj_issue_toc .cover img:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -16px rgba(16,32,28,.34);
}

.obj_issue_toc .description {
  max-height: none; /* the previous sheet clipped this to 3 lines */
  overflow: visible;
  font-size: 15.5px;
  line-height: 1.75;
}
.obj_issue_toc .description p { margin: 0 0 12px; }

.obj_issue_toc .published {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--jpi-primary-dark);
  background: var(--jpi-accent-soft);
  border: 1px solid var(--jpi-accent-line);
  border-radius: 999px;
  padding: 6px 14px;
}
.obj_issue_toc .published .label { font-weight: 700; }
.obj_issue_toc .published .label:before {
  content: "\f073"; /* calendar */
  margin-right: 7px;
  opacity: .75;
}

.obj_issue_toc .galleys {
  clear: both;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--jpi-line);
}
.obj_issue_toc .galleys > h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--jpi-muted);
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  /* the base theme leaves this relatively positioned 15px left of where it
     belongs (a leftover from its own layout), so it sat 15px further left
     than the Download button beneath it and everything else on the page */
  position: relative;
  left: 0;
}
.obj_issue_toc .galleys > h2:after { display: none; }

/* --------------------------------------------------------------------------
   7. Article list (home, issue TOC, search results)
   -------------------------------------------------------------------------- */
.sections .section > h2,
.sections h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--jpi-muted);
  border: 0;
  border-top: 1px solid var(--jpi-line);
  padding-top: 20px;
  margin: 28px 0 6px;
  clear: both;
  /* same base-theme 15px relative-left offset as the FULL ISSUE heading */
  position: relative;
  left: 0;
}
.sections .section > h2:after { display: none; }

.cmp_article_list { list-style: none; margin: 0; padding: 0; }
.cmp_article_list > li { list-style: none; margin: 0 0 10px; padding: 0; }

.obj_article_summary {
  position: relative;
  background: #fff;
  border: 1px solid var(--jpi-line);
  border-left: 3px solid transparent;
  border-radius: var(--jpi-radius-sm);
  padding: 15px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.obj_article_summary:hover,
.obj_article_summary:focus-within {
  border-left-color: var(--jpi-accent);
  box-shadow: var(--jpi-shadow);
}

.obj_article_summary > .title,
.obj_article_summary h3.title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 6px;
}
.obj_article_summary > .title a {
  color: var(--jpi-ink);
  text-decoration: none;
  transition: color .18s ease;
}
.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus { color: var(--jpi-primary); }

.obj_article_summary .authors {
  font-size: 13.5px;
  color: var(--jpi-muted);
  font-style: normal;
  margin: 0 0 10px;
}

/* page range as a chip with a page icon */
.obj_article_summary .pages {
  display: inline-block;
  float: none;
  width: auto;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--jpi-muted);
  background: var(--jpi-bg);
  border: 1px solid var(--jpi-line);
  border-radius: 999px;
  padding: 4px 11px;
}
.obj_article_summary .pages:before {
  content: "\f0f6"; /* file-text-o */
  margin-right: 6px;
  opacity: .7;
}

/* galley buttons */
ul.galleys_links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.galleys_links li { list-style: none; margin: 0; padding: 0; }

.obj_galley_link {
  display: inline-flex;
  align-items: center;
  min-height: var(--jpi-tap);
  background: var(--jpi-primary);
  color: var(--jpi-white-soft) !important;
  border: 1px solid var(--jpi-primary);
  border-radius: var(--jpi-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 10px 16px;
  text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.obj_galley_link:before {
  content: "\f1c1"; /* file-pdf-o */
  margin-right: 9px;
  font-size: 15px;
}
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--jpi-primary-dark);
  border-color: var(--jpi-primary-dark);
  color: var(--jpi-white-soft) !important;
  box-shadow: 0 6px 16px -6px rgba(15,110,86,.6);
  transform: translateY(-1px);
}

.read_more, a.read_more {
  display: inline-block;
  margin-top: 18px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--jpi-primary);
  border-bottom: 2px solid var(--jpi-accent);
  padding-bottom: 2px;
  text-decoration: none;
}
.read_more:after { content: "\f105"; margin-left: 8px; }
.read_more:hover { color: var(--jpi-primary-dark); }

/* --------------------------------------------------------------------------
   8. Article landing page
   -------------------------------------------------------------------------- */
.obj_article_details .page_title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 8px;
}
.obj_article_details .subtitle {
  font-size: 17px;
  line-height: 1.45;
  color: var(--jpi-muted);
  font-weight: 400;
  margin: 0 0 4px;
}

/* On phones the meta card comes first: download + date reachable at once */
.obj_article_details .row { display: flex; flex-direction: column; margin-top: 20px; }
.obj_article_details .main_entry { float: none; width: auto; order: 2; min-width: 0; border-right: 0; }
/* the base theme draws a stray 1px border-right on .main_entry (visible as a
   vertical rule between the abstract and the meta card); this app's own
   spacing already comes from .row's gap, so the theme's line is unwanted */
.obj_article_details .entry_details { float: none; width: auto; order: 1; }

/* -- main column items -- */
.obj_article_details .item { padding: 16px 0; border-top: 1px solid var(--jpi-line); }
.obj_article_details .main_entry > .item:first-child { border-top: 0; padding-top: 0; }

.obj_article_details .main_entry .item > .label,
.obj_article_details .main_entry .item > h3.label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--jpi-muted);
  margin: 0 0 10px;
}

/* authors */
.obj_article_details .item.authors { border-top: 0; padding-top: 0; }
.obj_article_details .authors { list-style: none; margin: 0; padding: 0; }
.obj_article_details .authors li { margin-bottom: 10px; }
.obj_article_details .authors .name {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--jpi-ink);
}
.obj_article_details .authors .name:before {
  content: "\f007"; /* user */
  margin-right: 9px;
  color: var(--jpi-primary);
  opacity: .55;
}
.obj_article_details .authors .affiliation { font-size: 13px; color: var(--jpi-muted); padding-left: 25px; }
.obj_article_details .authors .orcid { display: block; font-size: 12px; padding-left: 25px; }

/* keywords */
.obj_article_details .item.keywords .value {
  font-size: 13.5px;
  color: var(--jpi-body);
  line-height: 1.9;
}

/* abstract */
.obj_article_details .item.abstract .value,
.obj_article_details .item.abstract p {
  font-size: 15.5px;
  line-height: 1.8;
}

/* references */
.obj_article_details .item.references .value {
  font-size: 14px;
  line-height: 1.75;
  color: var(--jpi-body);
}

/* how to cite — appears once the Citation Style Language plugin is on */
.obj_article_details .citation_display .value {
  background: var(--jpi-bg);
  border: 1px solid var(--jpi-line);
  border-left: 3px solid var(--jpi-accent);
  border-radius: var(--jpi-radius-sm);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.7;
}

/* licence / copyright */
.obj_article_details .copyright { font-size: 13px; line-height: 1.7; color: var(--jpi-muted); }

/* -- meta card (entry_details) -- */
.obj_article_details .entry_details {
  display: flex;
  flex-direction: column;
  margin: 0 0 4px;
  background: var(--jpi-bg);
  border: 1px solid var(--jpi-line);
  border-radius: var(--jpi-radius);
  overflow: hidden;
}
.obj_article_details .entry_details .item {
  padding: 14px 16px;
  border-top: 1px solid var(--jpi-line);
  border-bottom: 0;
  word-wrap: break-word;
}
.obj_article_details .entry_details .item:first-child { border-top: 0; }

.obj_article_details .entry_details .item .label,
.obj_article_details .entry_details .sub_item .label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jpi-muted);
  margin: 0 0 5px;
}
.obj_article_details .entry_details .item .value {
  font-size: 14px;
  line-height: 1.55;
  color: var(--jpi-ink);
}
.obj_article_details .entry_details .sub_item { margin-bottom: 14px; }
.obj_article_details .entry_details .sub_item:last-child { margin-bottom: 0; }

/* meta icons */
.obj_article_details .entry_details .item.published .label:before { content: "\f073"; } /* calendar */
.obj_article_details .entry_details .item.doi .label:before { content: "\f0c1"; } /* chain */
.obj_article_details .entry_details .item.issue .sub_item:nth-child(1) .label:before { content: "\f02d"; } /* book */
.obj_article_details .entry_details .item.issue .sub_item:nth-child(2) .label:before { content: "\f02b"; } /* tag */
.obj_article_details .entry_details .item.published .label:before,
.obj_article_details .entry_details .item.doi .label:before,
.obj_article_details .entry_details .item.issue .sub_item .label:before {
  margin-right: 7px;
  color: var(--jpi-primary);
  opacity: .7;
}

/* DOI value: wrap long identifiers, never overflow */
.obj_article_details .entry_details .item.doi .value a { font-size: 13px; word-break: break-all; }

/* download block: own header, full-width button on phones */
.obj_article_details .item.galleys { background: #fff; }
.obj_article_details .item.galleys:before {
  content: "\f019 DOWNLOAD"; /* download icon + label */
  display: block;
  font-family: FontAwesome, 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--jpi-muted);
  margin-bottom: 10px;
}
.obj_article_details .item.galleys .obj_galley_link {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 13px 18px;
}

/* phone ordering inside the meta card */
.obj_article_details .item.galleys { order: 1; }
.obj_article_details .item.published { order: 2; }
.obj_article_details .item.doi { order: 3; }
.obj_article_details .item.issue { order: 4; }
.obj_article_details .item.cover_image { order: 9; } /* redundant on phones */

/* -- usage statistics chart --
   Pre-styled so it lands correctly the moment "Display submission statistics
   chart for reader" is switched on in the Usage Statistics plugin. --------- */
.obj_article_details .item.usage_statistics,
.obj_article_details .item[class*="usageStats"],
#pkpUsageStatsGraph,
#usageStatsChart,
.usageStatsGraph {
  background: #fff;
  border-radius: var(--jpi-radius-sm);
}
#pkpUsageStatsGraph canvas,
#usageStatsChart canvas,
.usageStatsGraph canvas,
.obj_article_details .entry_details canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   9. Sidebar blocks
   -------------------------------------------------------------------------- */
.pkp_block {
  background: var(--jpi-card);
  border: 1px solid var(--jpi-line);
  border-radius: var(--jpi-radius);
  box-shadow: var(--jpi-shadow);
  padding: 0;
  margin: 0 0 16px;
  overflow: hidden;
}
.pkp_block > .title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--jpi-white-soft);
  background: var(--jpi-primary);
  padding: 12px 16px;
  margin: 0;
  border: 0;
}
.pkp_block > .content { padding: 14px 16px; font-size: 14px; }
/* full-bleed images (Google Scholar / ISSN badges) used to touch the card
   border on every side with zero breathing room. Padding the whole
   .content wrapper is too broad, though — the sidebar #cssmenu nav also
   lives inside a block_custom .content, and padding it left white showing
   through its rounded corners. So the space is added on the <img> itself
   (only when it's a direct, sole child of .content, i.e. a badge block),
   leaving #cssmenu and any other custom block markup untouched. */
.pkp_block.block_custom > .content { padding: 0; }
.pkp_block.block_custom > .content > img:only-child {
  display: block;
  max-width: calc(100% - 20px);
  height: auto;
  margin: 10px auto;
  border-radius: var(--jpi-radius-sm);
}

/* -- custom accordion menu (#cssmenu) --
   The JS that opened these submenus lived in an external script that no
   longer resolves, so the sub-items were unreachable. They are shown open
   here: no JS needed, and every link stays tappable and crawlable. -------- */
#cssmenu {
  position: relative;
  margin: 0;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
  background: #fff;
  border: 1px solid var(--jpi-line);
  border-radius: var(--jpi-radius);
  box-shadow: var(--jpi-shadow);
  overflow: hidden;
}
#cssmenu ul { margin: 0; padding: 0; list-style: none; display: block; }
#cssmenu ul li { position: relative; margin: 0; padding: 0; }
#cssmenu ul li a { text-decoration: none; cursor: pointer; }

#cssmenu > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--jpi-tap);
  padding: 13px 40px 13px 16px;
  background: var(--jpi-primary);
  color: #eef5f2;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  box-shadow: none;
  transition: background .2s ease, padding-left .2s ease;
}
#cssmenu > ul > li:last-child > a { border-bottom: 0; }
#cssmenu > ul > li > a:before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--jpi-accent);
  border: 0;
  opacity: 1;
  transition: width .2s ease;
}
/* .active marks "this section contains the current page" — it used to also
   darken the background to --jpi-primary-dark, which made that one menu
   item look like a different shade of green from the rest at rest, with
   no user interaction. Now only a real :hover/:focus-within darkens the
   background; .active keeps the plain --jpi-primary green like every
   other item and is marked only by the gold left-edge stripe below. */
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li:focus-within > a {
  background: var(--jpi-primary-dark);
  color: var(--jpi-white-soft);
  padding-left: 22px;
}
#cssmenu > ul > li.active > a { padding-left: 22px; }
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li:focus-within > a:before,
#cssmenu > ul > li.active > a:before { width: 4px; }
#cssmenu > ul > li > a:after { display: none; }

/* chevron marker on parents */
#cssmenu ul > li.has-sub > a:after {
  content: "\f107";
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -7px;
  font-size: 14px;
  opacity: .7;
  display: block;
}
#cssmenu ul > li.has-sub:after { display: none; }

/* submenus: always visible */
#cssmenu ul ul {
  display: block;
  background: #fbfdfc;
  border-bottom: 1px solid var(--jpi-line);
}
#cssmenu ul ul li { border: 0; }
#cssmenu ul ul li a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  background: transparent;
  padding: 10px 16px 10px 30px;
  border-bottom: 1px solid var(--jpi-line);
  color: var(--jpi-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
#cssmenu ul ul li:last-child a { border-bottom: 0; }
#cssmenu ul ul li a:before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--jpi-accent);
  opacity: .55;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:focus {
  background: var(--jpi-accent-soft);
  color: var(--jpi-primary-dark);
  padding-left: 34px;
}
#cssmenu ul ul ul li a { padding-left: 44px; }

/* --------------------------------------------------------------------------
   10. Forms, tables, buttons
   -------------------------------------------------------------------------- */
.pkp_structure_main table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 18px 0;
}
.pkp_structure_main table th {
  background: var(--jpi-bg);
  color: var(--jpi-ink);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--jpi-line);
}
.pkp_structure_main table td { padding: 10px 12px; border-bottom: 1px solid var(--jpi-line); }

.pkp_structure_main input[type="text"],
.pkp_structure_main input[type="email"],
.pkp_structure_main input[type="password"],
.pkp_structure_main input[type="search"],
.pkp_structure_main textarea,
.pkp_structure_main select {
  border: 1px solid var(--jpi-line);
  border-radius: var(--jpi-radius-sm);
  padding: 11px 12px;
  font-family: inherit;
  font-size: 16px;
  min-height: var(--jpi-tap);
  max-width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pkp_structure_main input[type="text"]:focus,
.pkp_structure_main input[type="email"]:focus,
.pkp_structure_main input[type="password"]:focus,
.pkp_structure_main textarea:focus {
  border-color: var(--jpi-primary);
  box-shadow: 0 0 0 3px rgba(15,110,86,.13);
  outline: 0;
}

.pkp_structure_main .cmp_form .submit button,
.pkp_structure_main button.submitFormButton,
.pkp_structure_main .pkp_button {
  background: var(--jpi-primary);
  border: 1px solid var(--jpi-primary);
  color: var(--jpi-white-soft);
  border-radius: var(--jpi-radius-sm);
  font-weight: 600;
  font-size: 15px;
  min-height: var(--jpi-tap);
  padding: 11px 22px;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.pkp_structure_main .cmp_form .submit button:hover,
.pkp_structure_main .pkp_button:hover {
  background: var(--jpi-primary-dark);
  box-shadow: 0 8px 18px -8px rgba(15,110,86,.65);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.pkp_structure_footer_wrapper {
  background: linear-gradient(135deg, var(--jpi-primary-dark) 0%, #085041 100%);
  border-top: 4px solid var(--jpi-accent);
  color: rgba(255,255,255,.82);
  margin-top: 32px;
}
.pkp_structure_footer { padding: 18px 14px; font-size: 14px; }
.pkp_structure_footer a { color: #ffd88a; }
.pkp_structure_footer a:hover { color: var(--jpi-white-soft); }

.pkp_brand_footer { background: transparent; padding: 0; border: 0; text-align: center; }
.pkp_brand_footer img {
  max-width: 130px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .45;
  transition: opacity .2s ease;
}
.pkp_brand_footer a:hover img { opacity: .8; }

/* ==========================================================================
   12. >= 480px
   ========================================================================== */
@media (min-width: 480px) {
  .pkp_structure_content { padding: 20px 14px 40px; }
  .pkp_structure_main { padding: 24px 20px 32px; }
  .obj_article_details .item.galleys .obj_galley_link { display: inline-flex; width: auto; }
}

/* ==========================================================================
   13. >= 768px — tablet
   ========================================================================== */
@media (min-width: 768px) {
  .pkp_head_wrapper { padding: 0 20px; }
  .pkp_navigation_primary_row { margin: 0 -20px; padding: 0 12px; }

  .pkp_site_name_wrapper { padding: 22px 0 16px; }
  .pkp_site_name .is_img img { max-height: 64px; }

  .pkp_navigation_primary { justify-content: flex-start; }
  .pkp_navigation_primary > li > a { padding: 14px 15px; font-size: 13px; }

  .pkp_search { padding: 0; }
  .pkp_search input[type="text"] { width: auto; min-width: 200px; }
  .pkp_search button,
  .pkp_search input[type="submit"] { width: auto; margin-top: 0; margin-left: 8px; }

  .pkp_structure_content { padding: 24px 16px 48px; }
  .pkp_structure_main { padding: 28px 26px 36px; }

  .page_index_journal > h1,
  .pkp_structure_main > .page > h1,
  .obj_issue_toc > h2 { font-size: 25px; }

  .current_issue_title { font-size: 19px; }

  /* issue cover beside the description */
  .obj_issue_toc .heading { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
  /* the base theme still puts an old float-era clearfix (content:" ";
     display:table) on .heading's ::before. In a flex container that empty
     ::before becomes a real, invisible first flex item, so gap:26px pushed
     the cover image 26px right of the heading/title above it. Disable it,
     and repurpose ::after as a deliberate zero-height, full-width spacer
     (order:3) that forces a clean line break AFTER cover+description
     (order 1-2) and BEFORE Selengkapnya+Published (order 4-5) — the two
     of those no longer fight over sharing a line with the description. */
  .obj_issue_toc .heading:before { content: none; display: none; }
  .obj_issue_toc .heading:after { content: ''; display: block; flex-basis: 100%; width: 0; height: 0; order: 3; }
  .obj_issue_toc .cover { margin: 0; flex: 0 0 200px; max-width: 200px; order: 1; }
  .obj_issue_toc .heading > .description { flex: 1 1 300px; min-width: 0; order: 2; }
  /* "Selengkapnya" (.jpi-more) and the Published badge used to each force
     their own full-width line (flex: 0 0 100%) and stack awkwardly on top
     of each other. auto-width + the order above lets them share one line. */
  .obj_issue_toc .heading > .published { flex: 0 0 auto; align-self: center; order: 5; }

  .obj_article_summary { padding: 18px 20px; }
  .obj_article_summary > .title { font-size: 17px; margin-right: 90px; }
  .obj_article_summary .pages { position: absolute; top: 18px; right: 20px; margin: 0; }

  .obj_article_details .page_title { font-size: 28px; }

  .pkp_structure_footer { padding: 26px 20px; }
  .pkp_brand_footer { text-align: right; }
}

/* ==========================================================================
   14. >= 992px — the theme floats main + sidebar here.
   Container 952px = main 652 + sidebar 300, so a 20px gutter is carved out
   of main; the sum still fits and the sidebar never drops below.
   ========================================================================== */
@media (min-width: 992px) {
  .pkp_structure_content { padding: 28px 0 56px; }

  .pkp_structure_main { width: 632px; margin-right: 20px; padding: 30px 30px 40px; }
  /* sticky: the sidebar (nav + badges) is much shorter than a long article
     list, which used to leave a huge blank gap below it once it ran out.
     Pinning it near the top keeps it useful and removes that dead space. */
  .pkp_structure_sidebar { width: 300px; padding: 0; position: sticky; top: 20px; }

  /* article page returns to two columns, meta back on the right */
  .obj_article_details .row {
    flex-direction: row;
    align-items: flex-start;
    gap: 26px;
    margin-top: 26px;
  }
  .obj_article_details .main_entry { order: 1; flex: 1 1 auto; width: auto; }
  .obj_article_details .entry_details {
    order: 2;
    flex: 0 0 250px;
    width: 250px;
    margin: 0;
  }
  .obj_article_details .item.cover_image { order: 0; padding: 0; background: #fff; }
  /* the cover had no frame at all, so the meta-column divider lines in
     .main_entry looked like they ran straight into it; a border + shadow
     (matching the issue-listing cover) gives it a clear edge of its own */
  .obj_article_details .item.cover_image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--jpi-line);
    border-radius: 8px;
    box-shadow: var(--jpi-shadow-lg);
  }
  .obj_article_details .item.galleys { order: 1; }
  .obj_article_details .item.published { order: 2; }
  .obj_article_details .item.doi { order: 3; }
  .obj_article_details .item.issue { order: 4; }

  .obj_article_details .page_title { font-size: 30px; }
}

/* ==========================================================================
   15. >= 1200px — container 1160px = main 860 + sidebar 300
   ========================================================================== */
@media (min-width: 1200px) {
  .pkp_structure_main { width: 836px; margin-right: 24px; padding: 34px 34px 44px; }
  .pkp_structure_sidebar { width: 300px; }

  .obj_article_details .entry_details { flex: 0 0 270px; width: 270px; }
  .obj_issue_toc .cover { flex: 0 0 210px; max-width: 210px; }
}

/* ==========================================================================
   16. Reduced motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .pkp_structure_head,
  .pkp_structure_sidebar,
  .pkp_structure_footer_wrapper,
  .cmp_breadcrumbs { display: none !important; }
  .pkp_structure_main { width: 100%; border: 0; box-shadow: none; padding: 0; }
  body { background: #fff; font-size: 12pt; }
}

/* ==========================================================================
   17. Header search — hand it back to the theme on desktop

   From 992px up the Default theme collapses the header search input to
   width:0 and shows a magnifier prompt that expands it (.pkp_search.is_open).
   The decoration applied in section 3 must not fight that, or the collapsed
   input shows up as a stray white box in the navigation bar.
   ========================================================================== */
@media (min-width: 992px) {
  .pkp_head_wrapper .pkp_search input[type="text"],
  .pkp_head_wrapper .pkp_search button {
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .pkp_head_wrapper .pkp_search.is_open { border-radius: var(--jpi-radius-sm); }
  .pkp_head_wrapper .pkp_search.is_open input[type="text"] {
    background: #fff;
    color: var(--jpi-ink);
    font-size: 16px;
  }
  .pkp_head_wrapper .pkp_search .search_prompt { color: var(--jpi-white-soft); }
  .pkp_head_wrapper .pkp_search.is_open .search_prompt { color: var(--jpi-primary); }

  /* the meta card follows the reader down a long article */
  .obj_article_details .entry_details { position: sticky; top: 20px; }
}

/* ==========================================================================
   18. Phone corrections (measured on a 375px viewport)
   ========================================================================== */
@media (max-width: 767px) {
  /* The issue cover was rendering 438px tall at the foot of the meta card.
     The issue is already linked two rows above, so drop the duplicate. */
  .obj_article_details .entry_details .item.cover_image { display: none; }

  /* galley list stacks so the download button really is full width */
  .obj_article_details .item.galleys ul.galleys_links { flex-direction: column; }
  .obj_article_details .item.galleys ul.galleys_links li { width: 100%; }
}

/* The theme's own header-search rules are more specific than section 3's,
   so the submit button kept its grey gradient. Match that specificity. */
.pkp_head_wrapper .pkp_search button {
  background: var(--jpi-accent);
  border: 0;
  box-shadow: none;
  color: #3d2a00;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  border-radius: var(--jpi-radius-sm);
}
.pkp_head_wrapper .pkp_search button:hover,
.pkp_head_wrapper .pkp_search button:focus {
  background: #d98c00;
  box-shadow: none;
}

/* ==========================================================================
   19. Download statistics chart (.item.downloads_chart)

   Rendered by the Usage Statistics plugin once "Display submission
   statistics chart for reader" is on. It sits in .main_entry between the
   abstract and the references, and draws into a Chart.js <canvas>.
   ========================================================================== */
.obj_article_details .item.downloads_chart > .label:before {
  content: "\f080"; /* bar-chart */
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: 9px;
  color: var(--jpi-primary);
  opacity: .7;
}
.obj_article_details .item.downloads_chart > .value {
  background: var(--jpi-bg);
  border: 1px solid var(--jpi-line);
  border-radius: var(--jpi-radius-sm);
  padding: 14px;
}
.obj_article_details canvas.usageStatsGraph {
  max-width: 100% !important;
  display: block;
}
.obj_article_details .usageStatsUnavailable {
  font-size: 13px;
  font-style: italic;
  color: var(--jpi-muted);
}

/* ==========================================================================
   20. How to Cite (.citation_display, Citation Style Language plugin)
   ========================================================================== */
.obj_article_details .citation_display > .label:before {
  content: "\f10d"; /* quote-left */
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: 7px;
  color: var(--jpi-primary);
  opacity: .7;
}
.obj_article_details .citation_display .csl-entry {
  font-size: 13px;
  line-height: 1.65;
  color: var(--jpi-body);
}

.obj_article_details .citation_display .citation_formats { margin-top: 12px; }

.obj_article_details .citation_display .citation_formats_button {
  width: 100%;
  min-height: var(--jpi-tap);
  background: #fff;
  border: 1px solid var(--jpi-line);
  border-radius: var(--jpi-radius-sm);
  box-shadow: none;
  color: var(--jpi-primary);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}
.obj_article_details .citation_display .citation_formats_button:hover,
.obj_article_details .citation_display .citation_formats_button:focus {
  background: var(--jpi-accent-soft);
  color: var(--jpi-primary-dark);
}
.obj_article_details .citation_display .citation_formats_button[aria-expanded="true"] {
  border-radius: var(--jpi-radius-sm) var(--jpi-radius-sm) 0 0;
}

/* the plugin toggles this list with aria-hidden — never force its display */
.obj_article_details .citation_display .citation_formats_list {
  background: #fff;
  border: 1px solid var(--jpi-line);
  border-top: 0;
  border-radius: 0 0 var(--jpi-radius-sm) var(--jpi-radius-sm);
  max-height: 260px;
  overflow-y: auto;
}
.obj_article_details .citation_display .citation_formats_styles { margin: 0; padding: 0; list-style: none; }
.obj_article_details .citation_display .citation_formats_styles li a {
  display: block;
  padding: 11px 12px;
  border-bottom: 1px solid var(--jpi-line);
  color: var(--jpi-body);
  font-size: 13px;
  text-decoration: none;
}
.obj_article_details .citation_display .citation_formats_styles li:last-child a { border-bottom: 0; }
.obj_article_details .citation_display .citation_formats_styles li a:hover,
.obj_article_details .citation_display .citation_formats_styles li a:focus {
  background: var(--jpi-accent-soft);
  color: var(--jpi-primary-dark);
}

/* ==========================================================================
   21. Meta card ordering fix

   .item.citation (How to Cite) has no explicit order, so it defaulted to 0
   and sat at the top of the meta card — 312px of citation text ahead of the
   download button on a phone. It belongs after the identifying metadata.
   ========================================================================== */
.obj_article_details .item.citation { order: 5; }
@media (min-width: 992px) {
  .obj_article_details .item.citation { order: 5; }
}

/* ==========================================================================
   22. Sidebar submenu toggle

   The script in the Custom Header Plugin adds the class .jpi-js to #cssmenu
   and inserts a chevron <button> next to each parent link. Everything here
   is scoped to .jpi-js, so if the script ever fails to load the submenus
   simply stay open (section 9) instead of becoming unreachable.

   The row becomes a flex container — link + button on the first line, the
   submenu on the second — so the button always matches the row height even
   when a long label wraps.
   ========================================================================== */
#cssmenu.jpi-js li.has-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#cssmenu.jpi-js li.has-sub > a { flex: 1 1 auto; min-width: 0; padding-right: 12px; }
#cssmenu.jpi-js li.has-sub > ul { flex: 0 0 100%; }

/* the CSS-only chevron in section 9 is replaced by a real button */
#cssmenu.jpi-js ul > li.has-sub > a:after { display: none; }

#cssmenu.jpi-js .jpi-subtoggle {
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-left: 1px solid rgba(255,255,255,.14);
  background: var(--jpi-primary);
  color: var(--jpi-white-soft);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: background .2s ease;
}
#cssmenu.jpi-js .jpi-subtoggle:before {
  content: "\f107"; /* angle-down */
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  opacity: .8;
  transition: transform .22s ease;
}
#cssmenu.jpi-js li.has-sub:hover > .jpi-subtoggle,
#cssmenu.jpi-js .jpi-subtoggle:hover,
#cssmenu.jpi-js .jpi-subtoggle:focus { background: var(--jpi-primary-dark); }
#cssmenu.jpi-js .jpi-subtoggle[aria-expanded="true"]:before {
  transform: rotate(180deg);
  opacity: 1;
}

/* closed by default; opened by the toggle or auto-opened on the active page */
#cssmenu.jpi-js ul ul { display: none; }
#cssmenu.jpi-js li.has-sub.is-open > ul { display: block; }

/* ==========================================================================
   23. "Read more" on the current-issue description
   ========================================================================== */
.obj_issue_toc .description.jpi-clamp {
  position: relative;
  max-height: 190px;
  overflow: hidden;
}
.obj_issue_toc .description.jpi-clamp:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68px;
  /* dulu fade ke #fff (warna kartu lama) — sesuai tema gelap section 64,
     kartu sekarang var(--jpi-card), gradiennya harus fade ke situ juga
     supaya menyatu, bukan menyisakan smear putih di atas kartu gelap. */
  background: linear-gradient(rgba(15,44,35,0), var(--jpi-card) 88%);
  pointer-events: none;
}
.obj_issue_toc .description.jpi-clamp.is-open { max-height: none; }
.obj_issue_toc .description.jpi-clamp.is-open:after { display: none; }

.jpi-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  min-height: var(--jpi-tap);
  margin: 12px 0 0;
  padding: 10px 18px;
  background: var(--jpi-accent-soft);
  border: 1px solid var(--jpi-accent-line);
  border-radius: 999px;
  color: var(--jpi-primary-dark);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease;
}
.jpi-more:hover, .jpi-more:focus { background: #fdeccb; }
.jpi-more:after {
  content: "\f107";
  font-family: FontAwesome;
  font-weight: normal;
  margin-left: 9px;
  font-size: 14px;
  transition: transform .22s ease;
}
.jpi-more[aria-expanded="true"]:after { transform: rotate(180deg); }

@media (min-width: 768px) {
  .obj_issue_toc .description.jpi-clamp { max-height: 264px; }
  /* the cover+description row above already fills the line, so this still
     wraps onto its own new line; auto-width (not 100%) then lets the
     Published badge join it on that same line instead of stacking below */
  .obj_issue_toc .heading > .jpi-more { flex: 0 0 auto; margin-right: 12px; order: 4; }
}

/* ==========================================================================
   24. Sidebar moved to the left (>= 992px)

   .pkp_structure_sidebar already renders with a "left" class — OJS itself
   sets that based on the sidebar's configured position — but the Default
   theme's own CSS floats it right unconditionally and never reads that
   class at all, so it always landed on the right regardless. This swaps
   only the float direction and which side carries the 20/24px gutter;
   every width from sections 14–15 still adds up to the same container
   width, so nothing about the two-column math changes, only which edge
   each column sits against.
   ========================================================================== */
@media (min-width: 992px) {
  .pkp_structure_main {
    float: right;
    margin-right: 0;
    margin-left: 20px;
  }
  .pkp_structure_sidebar { float: left; }
}
@media (min-width: 1200px) {
  .pkp_structure_main { margin-right: 0; margin-left: 24px; }
}

/* ==========================================================================
   25. Sidebar restyled as one navigation rail (app/dashboard look)

   Requested as "like a CI (CodeIgniter) admin panel — a sidebar on the
   left": a single dark vertical rail with icon+label rows, instead of the
   stack of separate white widget cards this was before (nav card, second
   nav card, badge images, visitor-counter card all as their own boxes).

   This wraps all four sidebar blocks in one dark panel and reskins
   #cssmenu's rows to sit on it directly. The old left-edge accent stripe
   in section 9 was a ::before pseudo-element — that's repurposed below to
   carry each row's icon instead, so the "current section" / hover accent
   moves to a real border-left on the link (same gold color, same effect,
   just no longer fighting the icon for the same pseudo-element). The two
   non-menu blocks (Scholar/ISSN badges, flag counter) stay light cards so
   images with their own white background still have a visible edge.

   Icons are matched by position (nth-child), not link text — CSS can't
   select on text content. The order comes from the block content itself,
   so re-ordering or renaming a sidebar link means updating the nth-child
   index/comment below to match.
   ========================================================================== */
.pkp_structure_sidebar {
  background: var(--jpi-primary-dark);
  border-radius: var(--jpi-radius);
  padding: 12px;
  box-shadow: var(--jpi-shadow-lg);
}
.pkp_structure_sidebar .pkp_block {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0 0 4px;
}
.pkp_structure_sidebar #cssmenu {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pkp_structure_sidebar #cssmenu > ul > li > a {
  background: transparent;
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid transparent;
  border-radius: 8px;
  transition: background .2s ease, border-color .2s ease;
}
.pkp_structure_sidebar #cssmenu > ul > li:last-child > a { border-bottom: 0; }
.pkp_structure_sidebar #cssmenu > ul > li:hover > a,
.pkp_structure_sidebar #cssmenu > ul > li:focus-within > a,
.pkp_structure_sidebar #cssmenu > ul > li.active > a {
  background: rgba(255,255,255,.08);
  color: var(--jpi-white-soft);
  border-left-color: var(--jpi-accent);
  /* the base rule pushes text 6px right on hover/active to make room for
     the old stripe as it grew from 0 to 4px; the border above is already
     a constant 4px at all times, so nothing needs to shift here anymore */
  padding-left: 16px;
}
/* repurposed as the row icon instead of the growing accent stripe */
.pkp_structure_sidebar #cssmenu > ul > li > a:before {
  content: '';
  position: static;
  flex: 0 0 18px;
  width: 18px;
  height: auto;
  margin-right: 10px;
  background: none;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  text-align: center;
  opacity: .85;
  transition: none;
}
.pkp_structure_sidebar #cssmenu > ul > li:hover > a:before,
.pkp_structure_sidebar #cssmenu > ul > li:focus-within > a:before,
.pkp_structure_sidebar #cssmenu > ul > li.active > a:before {
  width: 18px;
  background: none;
}
.pkp_structure_sidebar #cssmenu ul ul {
  background: rgba(0,0,0,.16);
  border-bottom: 0;
}
.pkp_structure_sidebar #cssmenu ul ul li a {
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pkp_structure_sidebar #cssmenu ul ul li a:hover,
.pkp_structure_sidebar #cssmenu ul ul li a:focus {
  background: rgba(255,255,255,.08);
  color: var(--jpi-white-soft);
  padding-left: 34px;
}
.pkp_structure_sidebar #cssmenu.jpi-js .jpi-subtoggle {
  background: transparent;
  border-left: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub:hover > .jpi-subtoggle,
.pkp_structure_sidebar #cssmenu.jpi-js .jpi-subtoggle:hover,
.pkp_structure_sidebar #cssmenu.jpi-js .jpi-subtoggle:focus {
  background: rgba(255,255,255,.08);
}

/* badges + visitor counter stay as light cards inside the dark rail */
#customblock-index,
#customblock-visitor {
  background: #fff;
  border-radius: var(--jpi-radius-sm);
  padding: 10px;
  margin-top: 10px;
}

/* row icons, matched by position (see comment above) */
#customblock-Home #cssmenu > ul > li:nth-child(1) > a:before { content: "\f015"; } /* Home */
#customblock-Home #cssmenu > ul > li:nth-child(2) > a:before { content: "\f0f6"; } /* Current Issue */
#customblock-Home #cssmenu > ul > li:nth-child(3) > a:before { content: "\f187"; } /* Journal Archives */
#customblock-Home #cssmenu > ul > li:nth-child(4) > a:before { content: "\f0c0"; } /* Editorial Board */
#customblock-Home #cssmenu > ul > li:nth-child(5) > a:before { content: "\f007"; } /* Reviewer */
#customblock-Menu2 #cssmenu > ul > li:nth-child(1) > a:before { content: "\f0e3"; } /* Editorial Policies */
#customblock-Menu2 #cssmenu > ul > li:nth-child(2) > a:before { content: "\f046"; } /* Submission Guidelines */
#customblock-Menu2 #cssmenu > ul > li:nth-child(3) > a:before { content: "\f19c"; } /* Publication Ethics */
#customblock-Menu2 #cssmenu > ul > li:nth-child(4) > a:before { content: "\f1c8"; } /* Journal Template */

/* ==========================================================================
   26. Header collapsed to one slim utility strip

   Requested: "tidak ada header, sebagaimana di CI (CodeIgniter) secara
   umum" — no separate branded header block, matching the admin-panel
   pattern where the sidebar carries the logo and navigation and the top
   of the page is at most a thin utility strip. The site name/logo block
   is hidden here (section 27 puts the logo at the top of the sidebar
   instead) and the primary nav links are hidden too, since every one of
   them (Current Issue, Journal Archives, About > Editorial Team) already
   has a matching entry in the sidebar (section 25) — keeping both would
   just duplicate the same links twice. What's left — search and the
   account/Login-Register menu — collapses into one slim single-row strip.
   ========================================================================== */
.pkp_structure_head {
  background: var(--jpi-primary-dark);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: none;
  position: static;
  overflow: visible;
}
.pkp_structure_head:after { display: none; }

.pkp_site_name_wrapper { display: none; }
.pkp_navigation_primary { display: none; }

.pkp_head_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 6px 16px;
}
.pkp_navigation_primary_row {
  border-top: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}
.pkp_search { padding: 6px 0; }
.pkp_navigation_user_wrapper {
  background: transparent;
  border-bottom: 0;
  flex: 0 0 auto;
}
.pkp_navigation_user > li > a { padding: 6px 10px; }

/* ==========================================================================
   27. Logo moved to the top of the sidebar

   Sits above the nav rail (section 25) as its own block, the way an
   admin-panel "brand" area sits above the menu in a dark sidebar — this
   is a background-image on ::before (a CSS-only stand-in for the real
   <img>, which lives in the now-hidden header and can't be relocated in
   the DOM without JS), so it isn't a clickable link; HOME in the menu
   right below it covers that.

   54. Logo baru ("PPI Office.") persegi (1417x1417), bukan lebar-pendek
   seperti logo lama (699:177) — kotak tetap 70px tinggi membuatnya
   terpotong kecil di pojok kiri, jauh dari utuh. Diubah jadi persegi
   penuh selebar isi sidebar ("seukuran full di sidebar, agar ngotak"):
   268px x 268px (300px sidebar dikurangi margin 16px kiri-kanan),
   background-size:contain supaya seluruh gambar (termasuk bingkai
   oranyenya) tampil utuh, tidak terpotong.
   ========================================================================== */
.pkp_structure_sidebar::before {
  content: '';
  display: block;
  width: 268px;
  height: 268px;
  margin: 16px auto 14px;
  background: url('/public/journals/1/pageHeaderLogoImage_en_US.png') no-repeat center center / contain;
}

/* ==========================================================================
   28. Full-width layout — no centered fixed container

   The Default theme centers .pkp_structure_content (and the selectors
   below, which share one rule with it) in a fixed 728/952/1160px box,
   leaving grey margins on both sides on any screen wider than that — a
   boxed, magazine-style layout. Requested instead: "buat fullpage" — an
   admin-panel look (CI/AdminLTE) that fills the whole viewport: sidebar
   flush against the left edge, content filling everything to its right,
   at any width. Floats are replaced with flex on .pkp_structure_content
   so .pkp_structure_main's width is simply "whatever's left" after the
   sidebar's fixed 300px, instead of the fixed 632/836px from sections
   14–15 that only added up correctly inside the old fixed containers.
   ========================================================================== */
.pkp_site_name,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user,
.pkp_structure_content,
.pkp_structure_footer {
  width: 100%;
  max-width: none;
}
.pkp_structure_content { padding-left: 0; padding-right: 0; }
@media (min-width: 992px) {
  .pkp_structure_content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
  }
  .pkp_structure_sidebar {
    float: none;
    flex: 0 0 300px;
    width: 300px;
    margin: 0;
  }
  .pkp_structure_main {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }
}

/* the header's own two rows (search, account/login) were centered the
   same way — full width here too, and given a real height so the
   absolutely-positioned search box (collapsed to a magnifier icon by the
   theme's own JS, section 17) has something to measure "top:0" against;
   without it the row collapsed to 0 height once its nav links were
   hidden (section 26) and the search icon drifted below the header. */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  position: relative;
  min-height: 40px;
}
.pkp_head_wrapper { padding-left: 20px; padding-right: 20px; }

/* ==========================================================================
   29. Submenu toggle button knocked onto its own line — fixed

   EDITORIAL POLICIES fit fine (19 characters), but SUBMISSION GUIDELINES
   (22) didn't: flexbox sizes a flex-basis:auto item by its unwrapped
   text width first when deciding whether it and its sibling (the 46px
   ►/▼ toggle button) fit on one line — "SUBMISSION GUIDELINES" alone is
   wider than the 230px left after the button, so the ROW wrapped: the
   link took the full 276px for itself (plenty to fit unwrapped, so it
   never visibly wrapped its own text), leaving no room on that line for
   the button, which dropped to a new line by itself — exactly the
   detached-looking arrow reported ("menu yang ada anak menunya terlihat
   rusak").
   flex-basis:0 (instead of auto) makes the browser size that fit check
   from the link's minimum content width instead — the longest single
   word ("GUIDELINES", ~90px) plus the button (46px) easily fits in
   276px, so the button now always stays on the link's first line; the
   link then grows into the remaining ~230px and wraps its OWN text onto
   two lines there instead, which is the intended, contained-looking
   result (compare EDITORIAL POLICIES, which stays on one line as before
   since it was never affected).
   ========================================================================== */
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub > a {
  flex-basis: 0;
}

/* ==========================================================================
   30. Two regressions from section 28's switch to flex — fixed

   a) Sidebar landed back on the RIGHT. Floats don't apply to flex items,
      so switching .pkp_structure_content from float layout to flex
      (section 28) silently dropped section 24's left/right swap — with
      no `order` set, flex falls back to DOM order, and .pkp_structure_main
      comes before .pkp_structure_sidebar in the markup. Restored here
      with explicit order.

   b) The header's search box still floated outside the dark strip even
      after giving its row a height (section 28) — because the row's
      OWN parent, .pkp_head_wrapper, turned out to have a second,
      MORE SPECIFIC width rule scoped to ".has_site_logo" (a class OJS
      puts on <body> whenever a site logo is uploaded, which this journal
      has) that section 28 didn't know to target and so lost to on
      specificity, keeping the header content boxed at 728/952/1160px
      and centered — exactly the "no site logo" .pkp_head_wrapper rule
      section 28 DID successfully override, just not this one.
   ========================================================================== */
@media (min-width: 992px) {
  .pkp_structure_sidebar { order: 1; }
  .pkp_structure_main { order: 2; }
}
.has_site_logo .pkp_head_wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ==========================================================================
   31. Search and account menu onto one line

   Reference: the user's own admin app (localhost elearning "Office"),
   whose top bar keeps everything — period selector, dark-mode toggle,
   account menu — on a single slim line. Ours still split search onto a
   second line below the account menu: .pkp_search is the Default theme's
   own "collapses to a magnifier icon, click to expand" widget, and that
   collapse (a width:0 rule elsewhere in the theme, per the section 17
   comment) never actually engages on this site — .search_controls (the
   icon) and the real input+button all render at once, at their full
   natural sizes, and flex-wrap had nowhere to put the second one but a
   new line.

   Rather than chase why that click-to-expand JS/CSS pairing doesn't
   engage here, the input is just given a fixed compact width so both
   pieces always fit on the header's one line without needing it —
   .search_controls (the magnifier-icon variant) is hidden outright since
   with the input always visible there is nothing left for it to expand.

   Selectors here are prefixed with .pkp_head_wrapper (matching the
   theme's own ".pkp_head_wrapper .pkp_search..." rules, confirmed by
   walking document.styleSheets live) rather than bare ".pkp_search" —
   the theme's ≥992px collapse rules use that two-class prefix, which
   outranks a plain one-class ".pkp_search" by specificity regardless of
   which rule comes later in the file; bare ".pkp_search" here had simply
   lost outright, with none of it taking effect at all.
   ========================================================================== */
.pkp_head_wrapper .pkp_search {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pkp_head_wrapper .pkp_search input[type="text"] {
  position: static;
  /* !important on both: min-width:200px (this file's own section 3, the
     ≥768px tablet rule) otherwise wins the used-width calculation over
     width:140px outright — CSS resolves a width/min-width conflict by
     always honoring the larger min-width, regardless of specificity or
     !important on width alone. Both need it here, not just one. */
  width: 140px !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: var(--jpi-ink) !important;
  border-radius: var(--jpi-radius-sm) !important;
  padding: 6px 10px !important;
  height: 32px !important;
}
.pkp_head_wrapper .pkp_search button {
  position: static;
}
.pkp_head_wrapper .pkp_search .search_controls { display: none; }
.pkp_head_wrapper { justify-content: flex-end; gap: 16px; }
.pkp_navigation_primary_row { flex: 0 0 auto; }


/* =========================================================================
   32. Tokens copied from elearning.css (the user's own "Office" app)

   Two tokens that file defines but this one never needed until now,
   copied at their exact light-mode hex/hsl value — this site has no dark
   mode, so the var(--l0)/var(--ls) inversion machinery around them there
   doesn't apply and isn't copied, only the resulting flat colour is.

   --jpi-primary-950: elearning.css's --isl-950, the darkest step of the
   SAME institutional green ramp already mirrored one-for-one in section 1
   (--jpi-primary = --isl-700, --jpi-primary-dark = --isl-900, down to the
   hex digit) — used there for .sidebar-isl's own background, one step
   darker than .navbar-isl's (--isl-700). Section 33 uses it the same way.

   --jpi-border-input: the exact border colour of elearning.css's
   .kotak-cari (its merged search-box component) — a neutral border for
   a form control on a white field, distinct from --jpi-line (the softer
   card/rule colour already in section 1), which .kotak-cari never uses
   for this. Section 35 reuses it for the same kind of control here.
   ========================================================================= */
:root {
  --jpi-primary-950: #04342C;
  --jpi-border-input: hsl(210 13.953% 83.137%);
}

/* ==========================================================================
   33. Sidebar rebuilt as elearning.css's own .sidebar-isl.main-sidebar

   That file's exact mechanism (read straight from its revision notes):
   the sidebar is `position:fixed` against the viewport, not a column
   sitting next to the content — full height (100vh, with the dvh/svh
   fallback chain it settled on after finding vh/dvh both unreliable on
   mobile Chrome's address bar), flush against the left edge with no
   rounding or shadow of its own, and everything else (topbar, content,
   footer) carries a margin-left equal to its width instead of sitting
   beside it in a shared flex row.

   This replaces section 28's approach — sidebar and main as two flex
   items sharing one row — which is what put a visible top-of-viewport
   "bezel" above the sidebar (the full-width header bar drawn above BOTH
   columns) and made the sidebar's own vertical spacing something to keep
   in sync with main's by hand instead of simply not being a variable at
   all. A fixed, full-height sidebar has no top-of-viewport strip drawn
   above it in the first place — there is nothing left above it to be a
   bezel, and nothing to keep aligned since it no longer shares a row.
   ========================================================================= */
@media (min-width: 992px) {
  .pkp_structure_sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: none;
    z-index: 100;
  }
  .pkp_structure_head,
  .pkp_structure_content,
  .pkp_structure_footer_wrapper {
    margin-left: 300px;
  }
  .pkp_structure_content { padding-left: 20px; width: auto; }
}
@media (max-width: 991.98px) {
  .pkp_structure_sidebar { position: static; }
}
.pkp_structure_head {
  background: var(--jpi-primary);
  border-bottom: none;
}
.pkp_head_wrapper .pkp_search {
  height: 31px;
  border: 1px solid var(--jpi-border-input);
  border-radius: 3.2px;
  background: var(--jpi-card);
  padding: 0 4px 0 10px;
}
.pkp_head_wrapper .pkp_search input[type="text"] {
  border: none !important;
  background: transparent !important;
  color: var(--jpi-ink) !important;
  padding: 0 !important;
  height: 100% !important;
  border-radius: 0 !important;
}
.pkp_head_wrapper .pkp_search button {
  flex: 0 0 auto;
  width: 26px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jpi-muted);
  font-size: 0;
  cursor: pointer;
}
.pkp_head_wrapper .pkp_search button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 13px;
}
.pkp_head_wrapper .pkp_search button:hover { color: var(--jpi-primary-dark); }
.pkp_navigation_user > li > a {
  display: inline-flex;
  align-items: center;
  padding: .5rem .9rem !important;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.1;
  transition: background .15s ease, border-color .15s ease;
}
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.24);
  color: var(--jpi-white-soft);
}
.jpi-search-in-main { margin-bottom: 20px; }
.jpi-search-in-main .pkp_search {
  display: flex;
  align-items: center;
  height: 38px;
  max-width: 420px;
  border: 1px solid var(--jpi-border-input);
  border-radius: 3.2px;
  background: var(--jpi-card);
  padding: 0 4px 0 14px;
}
.jpi-search-in-main .pkp_search:focus-within {
  border-color: var(--jpi-primary-light);
  box-shadow: 0 0 0 .2rem rgba(15, 110, 86, .15);
}
.jpi-search-in-main .pkp_search input[type="text"] {
  flex: 1;
  border: none !important;
  background: transparent !important;
  color: var(--jpi-ink) !important;
  padding: 0 !important;
  height: 100% !important;
  font-size: 14px;
}
.jpi-search-in-main .pkp_search button {
  flex: 0 0 auto;
  width: 32px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jpi-muted);
  font-size: 0;
  cursor: pointer;
}
.jpi-search-in-main .pkp_search button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 14px;
}
.jpi-search-in-main .pkp_search button:hover { color: var(--jpi-primary-dark); }
.jpi-search-in-main .pkp_search .search_controls { display: none; }
.pkp_structure_sidebar::-webkit-scrollbar { width: 6px; }
.pkp_structure_sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 3px;
}
:root { --jpi-primary-800: #085041; }
.pkp_structure_sidebar #cssmenu > ul > li > a {
  border-left: 0;
  padding-left: 16px;
}
.pkp_structure_sidebar #cssmenu > ul > li:hover > a,
.pkp_structure_sidebar #cssmenu > ul > li:focus-within > a,
.pkp_structure_sidebar #cssmenu > ul > li.active > a {
  background: var(--jpi-primary-800);
  color: var(--jpi-white-soft);
  padding-left: 16px;
}
.pkp_structure_sidebar #cssmenu > ul > li > a:before,
.pkp_structure_sidebar #cssmenu > ul > li:hover > a:before,
.pkp_structure_sidebar #cssmenu > ul > li:focus-within > a:before,
.pkp_structure_sidebar #cssmenu > ul > li.active > a:before {
  background: none;
}
.pkp_structure_sidebar #cssmenu.jpi-js .jpi-subtoggle {
  border: 0;
  background: transparent;
}
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub:hover > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub:hover > .jpi-subtoggle,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.is-open > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.is-open > .jpi-subtoggle {
  background: var(--jpi-primary-800);
  color: var(--jpi-white-soft);
}


/* =========================================================================
   38. Four precision fixes, all found by measuring the live page rather
   than guessing from a screenshot

   a) Main card sat 60px off the sidebar on its left but only 20px off the
      content edge on its right/top/bottom ("jarak di sebelah kiri sangat
      komplang, harus sama... di kiri kanan atas bawah") — measured, not
      assumed. .pkp_structure_content had BOTH a 20px flex `gap` (for the
      sidebar↔main gutter, from section 28, back when sidebar still sat
      in the same flex row) AND a 20px `padding-left` (section 33, added
      once the sidebar became `position:fixed` and left the flex row
      entirely). With only .pkp_structure_main left as a flex child, that
      gap should be inert — but measuring main's own rendered width
      showed it 40px (exactly 2·20px) narrower than content's inner box,
      and forcing gap:0 by hand on the live page immediately corrected
      it. Whatever the exact browser mechanics, empirically the gap was
      real and doubled the padding's own 20px into 40 on that one side.
      Removing it leaves the padding alone to do this job, which by
      itself already puts all four sides at the same 20px.

   b) The account pill sat flush against the header's own top edge
      no matter what alignment was set on .pkp_head_wrapper ("admin...
      sangat mepet dengan garis atas") — because .pkp_navigation_user_
      wrapper (its containing block) turned out to be `position:absolute`
      in the theme's own CSS, not an actual flex item at all despite
      being .pkp_head_wrapper's DOM child; align-items:center on a flex
      container has no effect on a child that isn't part of flex layout
      to begin with. Forcing it back to `position:static` is what makes
      section 26's align-items:center finally apply to it.

   c) Search returned to the header, top-right, beside the account pill
      ("ditaruh di pojok kanan atas saja") — the Custom Header Plugin's
      footer script no longer calls initSearchMove() (removed there,
      not just hidden here), so the form stays exactly where the theme
      puts it in the markup: sitting in .pkp_navigation_primary_wrapper,
      immediately before .pkp_navigation_user_wrapper — which, with
      .pkp_head_wrapper's justify-content:flex-end, already reads as
      "search, then account" ending flush right, no reordering needed.
      Both wrapper divs carried the same base-theme width:100% as the
      .pkp_navigation_user_wrapper above (section 28's shared selector
      list) — width:auto here lets each shrink to its own control
      instead of claiming the full row and forcing the other onto a
      second line.

   d) The submenu toggle button still showed as a visibly separate box
      from its row's link in one specific state neither section 37's
      hover/open rule nor its "always-transparent resting state" rule
      covered: .active WITHOUT :hover or .is-open — the state EDITORIAL
      POLICIES and SUBMISSION GUIDELINES are actually in by default
      (that .active class is hardcoded in their markup, unconditionally,
      independent of whether the accordion happens to be open). Section
      37 gave .active a background only on the <a>, matching section 25's
      original .active rule, and never extended that same background to
      its neighbouring button — so the row was two-tone (dark link, still
      -transparent button) exactly whenever .active applied on its own.
      This is the one section 37 missed; the fix is the same background
      rule, just added for .active the way hover/.is-open already had it.
   ========================================================================== */
.pkp_structure_content { gap: 0; }

@media (min-width: 992px) {
  .pkp_navigation_user_wrapper { position: static; width: auto; }
  .pkp_navigation_user { width: auto; }
  .pkp_navigation_primary_wrapper { width: auto; }
  /* the .has_site_logo trap again (sections 30 and 33 already hit this
     same theme quirk for width): a MORE SPECIFIC ".has_site_logo
     .pkp_head_wrapper { padding-top: 30px }" from the core theme, at
     this exact breakpoint, was quietly overriding section 26's plain
     ".pkp_head_wrapper { padding: 6px 16px }" for the top side ONLY —
     which is what actually pinned the account pill (and, before it
     returns, the search box) most of the way down the header's 76px
     height in the first place, more than align-items:center alone.
     Matching that selector's own specificity is what finally lets a
     single, uniform padding value win outright. */
  .has_site_logo .pkp_head_wrapper { padding: 6px 16px; }
}

.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.active > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.active > .jpi-subtoggle {
  background: var(--jpi-primary-800);
  color: var(--jpi-white-soft);
}


/* ==========================================================================
   39. Search box wasn't centred inside its own row

   The account pill's fix (section 38b) was about the flex item itself
   not being a flex item; this one is one level deeper — .pkp_navigation_
   primary_wrapper IS a proper flex item now (section 38c) and DOES sit
   centred as a whole within the header, but .pkp_search is just an
   ordinary block inside that wrapper, not a flex child of anything, so
   nothing there centres IT within the wrapper's own (taller, 40px vs its
   own 31px) box — it just sits at the wrapper's top edge by default,
   6px down from the header top with 9px unused below it instead of ~5px
   shared evenly on both sides. Making the wrapper a flex container of
   its own (one child, but align-items:center still applies to a single
   child same as many) centres .pkp_search inside it the same way
   .pkp_head_wrapper already centres the wrapper itself.
   ========================================================================== */
@media (min-width: 992px) {
  .pkp_navigation_primary_wrapper { display: flex; align-items: center; }
}


/* =========================================================================
   40. Three more precision/colour fixes

   a) The account pill's right edge didn't line up with the main card's
      ("area admin tidak sejajar dengan batas akhir kartu... ini sekaligus
      mengikuti search") — measured: .pkp_head_wrapper's own content box
      right edge sat at 1505 (1521 minus its 16px padding-right), while
      .pkp_structure_main's right edge sat at 1501 (also 20px in from the
      same 1521 content boundary). Two different inset values, 16 vs 20,
      on what's meant to read as one shared right margin all the way down
      the page. Matching the header's padding to main's own 20px makes
      both the account pill and the search box beside it end flush with
      the card below — the .has_site_logo variant (section 38b) needs
      the same number, or it would just reintroduce a 4px mismatch there
      instead.

      Getting there also meant meeting the same flex-`gap` trap as
      section 38a's sidebar/main gutter, a second time in the same
      header: .pkp_head_wrapper's own gap:16px (section 31) was pushing
      .pkp_navigation_user_wrapper 16px short of the padding-adjusted
      edge, confirmed the same way — measuring, then confirming that
      gap:0 alone closed exactly that 16px. Replaced with a plain
      margin-left on the pill itself, which this file now has two
      matching examples of not trusting flex `gap` around anything that
      forces its own display/position outside plain flow nearby (here:
      .pkp_navigation_primary_wrapper turned into its own flex container
      by section 39, sitting right next to it in the same row).

   b) Search box background — plain white read as disconnected from the
      page's own green identity ("jangan putih polos, mungkin hijau muda
      ... untuk mengindukkannya ke warna utama"). --jpi-primary-050 is
      elearning.css's --isl-050 (light mode) — the lightest, palest step
      of the exact same institutional-green ramp sections 1, 32 and 37
      already copied the rest of (700/900/600/950/800) — not a new
      colour invented for this box, the one remaining un-mirrored step.

   c) Clicking into the search input outlined it in gold on both sides
      ("ketika diklik formnya juga ada garis kuning kiri dan kanan") —
      the site's own global keyboard-focus ring (section 2 of this file:
      "a:focus-visible, button:focus-visible, input:focus-visible, ...
      { outline: 3px solid var(--jpi-accent) }", var(--jpi-accent) being
      the gold), which text inputs show on any focus, not just keyboard
      — clicking one counts. Left in place everywhere else it's a
      deliberate accessibility ring for keyboard users; suppressed only
      on this one input because section 40's own :focus-within rule
      already draws a visible green glow on the box around it the moment
      it's focused, so removing the input's own outline doesn't leave
      focus unmarked here, just marked once instead of twice in two
      different colours.
   ========================================================================= */
.pkp_head_wrapper { padding: 6px 20px; gap: 0; }
.pkp_navigation_user_wrapper { margin-left: 16px; }
@media (min-width: 992px) {
  .has_site_logo .pkp_head_wrapper { padding: 6px 20px; }
}

:root { --jpi-primary-050: #E1F5EE; }
.pkp_head_wrapper .pkp_search { background: var(--jpi-primary-050); }
.pkp_head_wrapper .pkp_search input[type="text"]:focus-visible {
  outline: none;
}

/* ==========================================================================
   41. "Selengkapnya" pill sized to match the "Published" pill beside it

   .jpi-more carried min-height:var(--jpi-tap) (44px) — a deliberate
   44px minimum touch target from this file's own accessibility notes —
   while .obj_issue_toc .published, right next to it on the same line,
   has no such minimum and renders at 34px. Requested to match ("tombol
   lingkaran selengkapnya lebih besar daripada tombol published, samakan
   saja"): scoped to the ≥992px desktop breakpoint only, rather than
   dropping the 44px tap target everywhere — phones are exactly where
   that minimum earns its keep, and the size mismatch was only ever
   pointed out on what's clearly a desktop-width screenshot.
   ========================================================================= */
@media (min-width: 992px) {
  .jpi-more {
    min-height: 0;
    padding: 6px 14px;
    font-size: 12.5px;
  }
}

/* border-radius:0 for the row itself, later in the cascade — matches
   elearning.css's own ".tombol-induk { ... border-radius: 0; }" exactly.
   Rounded corners on an .active row (background: var(--jpi-primary-800))
   left the theme's own dark sidebar colour peeking through at all four
   corners against its neighbour, reading as a separate floating card
   rather than one continuous highlighted row in the list — visible even
   after sections 37/38 already matched the button's background to the
   link's, since this was a completely different property (shape, not
   colour). Two active rows back to back (EDITORIAL POLICIES then
   SUBMISSION GUIDELINES) is exactly where it showed up worst. */
.pkp_structure_sidebar #cssmenu > ul > li > a,
.pkp_structure_sidebar #cssmenu.jpi-js .jpi-subtoggle {
  border-radius: 0;
}

/* ==========================================================================
   42. "Selengkapnya" still didn't match "Published" after section 41 —
   the real remaining cause, plus its double-counted gap

   Font-size and padding were already identical (both 12.5px, both
   6px 14px) — the actual difference section 41 missed was line-height.
   .jpi-more is a real <button> element; .obj_issue_toc .published is a
   plain <span>. Normalize.css (loaded site-wide) resets buttons to
   line-height:1.15, but never touches spans — so .published just
   inherits the page's own line-height:1.65 straight from <body>, and
   the two ended up at 12.5×1.15=14.4px vs 12.5×1.65=20.6px line boxes
   even with every other number matching ("mungkin karena tidak sama
   ukuran fontnya" was a reasonable guess, just not quite what it was).
   Restoring the same 1.65 the rest of the page already uses is what
   finally makes the two pills come out the same height.

   The gap between them ("jarak keduanya juga terlalu jomplang") was
   real too, just not from any one wrong number — .obj_issue_toc
   .heading already puts a 26px flex `gap` between every item in the
   row, and .jpi-more's own margin-right:12px (added for it specifically
   at the ≥768px breakpoint) stacked directly on top of that, making the
   two pills sit 38px apart instead of the 26px every other pair in the
   row already uses.
   ========================================================================== */
.jpi-more { line-height: 1.65; }
@media (min-width: 768px) {
  .obj_issue_toc .heading > .jpi-more { margin-right: 0; }
}

/* ==========================================================================
   43. Article page: cover thumbnail nudged down, author line given room

   a) The issue cover thumbnail (top-right of an article page) sat at
      exactly the same y-coordinate as the title text beside it — with
      the title running two lines and the thumbnail's own border+shadow
      reading as a hard edge, the two sat close enough to look like the
      thumbnail was crowding the title's own underline rather than
      belonging to a separate block below it ("gambar issue itu tolong
      dibawah sedikit"). A small top margin on the thumbnail only (its
      flex sibling, the text column, is untouched) settles it visually
      below the title without moving anything else in the row.

   b) The byline row ("Muhammad Rizky HK") sits with padding-top:0 and
      padding-bottom:0 by the base theme's own rule (deliberately flush
      against the title above, since it's .main_entry's first item) —
      but that left it visually pinched between the title above and the
      KEYWORDS divider below ("jaraknya diperlebar atas bawah, jangan
      terlalu sempit di dalam dua garis"). Padding restored on both
      sides, closer to how every other .item in the same column already
      spaces itself (16px), just requested explicitly for this one.
   ========================================================================== */
@media (min-width: 992px) {
  .obj_article_details .item.cover_image { margin-top: 14px; }
}
.obj_article_details .item.authors {
  padding-top: 14px;
  padding-bottom: 16px;
}

/* ==========================================================================
   45. Selengkapnya / Published / Download PDF as one three-column row

   First attempt (superseded, never shipped past testing): appending
   "Download PDF" into .obj_issue_toc .heading with order:6, meaning to
   land it after Published on the same line. Wrong call — .heading is
   the cover+description flex row (order 1/2, plus a full-width order:3
   spacer forcing a line break — section 13's own comment calls this out
   explicitly), and Selengkapnya/Published (order 4/5) only ever render
   on a SECOND line by riding that forced break, not because they're
   "after" anything in a single row. A 6th item with no matching spacer
   of its own just fell wherever the wrap algorithm put it — beside the
   cover thumbnail, exactly as reported ("kenapa anda taruh disamping
   gambar issue"). Fixed by request: a dedicated row, not another seat
   at .heading's table.

   initIssueActionsRow() (replacing initFullIssueMove() under the same
   name in the Custom Header Plugin's footer script) builds exactly that
   — one new .jpi-issue-actions div inserted as .heading's own next
   sibling (after it, not inside it), holding all three controls moved
   out of wherever they used to live. CSS Grid with three equal `1fr`
   tracks is what actually delivers "sejajarkan, samakan besar dan
   lebarnya": every cell is the same width by construction, and Grid's
   own default cross-axis behaviour (align-items: stretch, not
   overridden here) stretches every cell to the row's tallest content
   with no extra rule needed — sections 41/42's line-height archaeology
   solved the same "make these two the same height" problem by hunting
   down the exact pixel difference by hand; here the layout mechanism
   just removes the question. .obj_galley_link keeps its own solid-green
   colour (this site's one other download button, everywhere else on
   the site, is exactly this green button, never a pill) — only its
   corners are rounded to 999px to read as part of the same family of
   three, a deliberate one-property difference standing in for "this
   one's the primary action", not an inconsistency.
   ========================================================================== */
.jpi-issue-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.jpi-issue-actions > * {
  width: 100%;
  max-width: none;
  justify-content: center;
  text-align: center;
  margin: 0;
  box-sizing: border-box;
}
.jpi-issue-actions .obj_galley_link { border-radius: 999px; }
@media (max-width: 767px) {
  .jpi-issue-actions { grid-template-columns: 1fr; }
}


/* =========================================================================
   46. "PUBLISHED" pill still shorter than its two siblings in the
   three-column row ("coba perhatikan... rapi?")

   Section 45's grid gave all three items equal WIDTH (362.4px each,
   confirmed) and equal-height was assumed to follow "by construction"
   from Grid's default align-items:stretch — but that assumption held
   only for .jpi-more and .obj_galley_link, which are already built as
   display:flex; align-items:center pills (64.225px tall, centered
   content). .published was never one of those — it's a plain
   display:block span with no flex box of its own, so it just renders
   at its own content height (34.225px) and stays there; stretch does
   not reshape a block box's internal layout, only its outer box, and
   in this case it never even resized the outer box either. Root cause
   confirmed via getComputedStyle: .published's display stayed "block"
   while its siblings were "flex" all along.

   Fixed by making .published match its siblings'own box model exactly
   — display:flex, align-items+justify-content:center, height:100% to
   fill the row's own track height (set by the two flex siblings) —
   scoped to only inside .jpi-issue-actions so the "Published: <date>"
   badge everywhere else on the site (article lists, etc.) is untouched.
   ========================================================================== */
.jpi-issue-actions > * { height: 100%; }
.jpi-issue-actions .published {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   47. Enam perbaikan presisi dalam satu putaran

   a) Baris tiga kolom terlalu tinggi ("jangan terlalu besar, perkecil
      tetap lebar"). Tingginya 64.225px padahal tinggi alami isinya cuma
      37 / 34 / 44px — diukur dengan memaksa display:block sementara.
      Grid track-nya ternyata memang 64.225px (getComputedStyle
      gridTemplateRows), bukan hasil penjumlahan konten, jadi tidak bisa
      diperbaiki dengan mengubah padding. Dipatok eksplisit lewat
      grid-auto-rows: 44px — angka ini bukan karangan, itu persis
      min-height milik .obj_galley_link sendiri, tombol download standar
      di seluruh situs ini. Lebar tidak disentuh: tetap 3 x 1fr = 362px
      per kolom, total 1111px, sama persis dengan lebar blok di atasnya.

   b) Garis pendek di atas "ARTICLES" dibuang. Sumbernya: h2 itu
      display:inline-block (lebar hanya 97px) dan punya border-top
      0.8px, jadi garisnya ikut pendek. Garis panjang di atasnya milik
      .section::before dan dibiarkan — yang diminta dibuang hanya yang
      pendek.

   c) Pill "admin" disejajarkan dengan batas kanan kartu. Selisihnya
      tepat 30px: padding-right 20px pada ul.pkp_navigation_user
      ditambah 10px pada nav pembungkusnya. Keduanya dinolkan sehingga
      tepi kanan pill = 1501px = tepi kanan .pkp_structure_main.

   d) EDITORIAL POLICIES dan SUBMISSION GUIDELINES akhirnya sewarna
      dengan menu lain. Penyebabnya: kedua <li> itu selalu membawa class
      .active (padahal bukan halaman yang sedang dibuka), dan rule
      .pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.active > a
      mengecatnya var(--jpi-primary-800) = rgb(8,80,65), sementara menu
      biasa transparan. Override dipasang dengan selector yang lebih
      spesifik dari rule itu, berlaku untuk keadaan diam maupun hover,
      dan untuk .jpi-subtoggle juga — supaya label dan ikon siku tidak
      pernah terlihat sebagai dua kotak berbeda, sesuai permintaan lama
      "warna ketika dikursor dengan tidak dikursor juga samakan saja".

   e) Nama penulis di halaman artikel benar-benar di tengah sekarang.
      Section 43 sudah menulis padding-top:14px tapi computed-nya tetap
      0px — kalah spesifisitas dari rule bawaan tema, jadi teksnya
      menempel ke garis atas (0px di atas, 16px di bawah). Dipaksa
      28px/28px dengan !important: hasil ukur 28px di atas dan 28px di
      bawah, persis di tengah antara garis div.row dan garis KEYWORDS.

   f) Gambar sampul tidak lagi menempel garis. Garis di bawah judul itu
      border-top milik div.row di y=266; puncak gambar ada di y=281,
      jadi jaraknya cuma 15px. margin-top dinaikkan 14px -> 28px
      sehingga jaraknya jadi 29px, dan sebagai bonus puncak gambar kini
      sejajar dengan baris nama penulis (selisih 1px).
   ========================================================================== */

/* (a) */
.jpi-issue-actions { grid-auto-rows: 44px; }
.jpi-issue-actions > * { height: 100%; min-height: 0; }

/* (b) */
.obj_issue_toc .sections .section > h2 { border-top: 0 !important; }

/* (c) */
.pkp_head_wrapper .pkp_navigation_user_wrapper { padding-right: 0 !important; }
.pkp_head_wrapper .pkp_navigation_user_wrapper .pkp_navigation_user { padding-right: 0 !important; }

/* (d) */
.pkp_structure_sidebar #cssmenu.jpi-js > ul > li.has-sub.active > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.active > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub:hover > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.active:hover > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub > .jpi-subtoggle,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.active > .jpi-subtoggle,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub:hover > .jpi-subtoggle {
  background: transparent !important;
}

/* (e) */
.obj_article_details .main_entry .item.authors {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* (f) */
@media (min-width: 992px) {
  .obj_article_details .item.cover_image { margin-top: 28px !important; }
}


/* ==========================================================================
   48. Pill tengah duduk 10px lebih rendah — akar masalah "posisinya tidak
   presisi" yang berkali-kali dilaporkan dan berkali-kali saya lewatkan

   Selama beberapa putaran saya melaporkan baris ini "sudah presisi"
   berdasarkan lebar dan tinggi (362x44 untuk ketiganya) — dan memang
   lebar serta tingginya benar. Yang tidak pernah saya ukur adalah
   POSISI ATASNYA. Begitu diukur:

       .jpi-more          top 520.8   margin-top 0px
       .published         top 530.8   margin-top 10px, margin-bottom 20px
       .obj_galley_link   top 520.8   margin-top 0px

   .published membawa margin 10px/20px dari rule bawaan tema. Section 45
   sudah menulis ".jpi-issue-actions > * { margin: 0 }" tapi kalah
   spesifisitas, jadi marginnya tetap hidup dan mendorong sel tengah
   turun tepat 10px — persis sebesar yang terlihat di layar. Di grid,
   margin item tidak ikut diratakan oleh track; ia menggeser kotaknya
   sendiri di dalam area grid, sehingga satu sel bisa turun sendirian
   tanpa mengubah lebar maupun tinggi yang saya andalkan sebagai bukti.

   Pelajaran yang dicatat di sini supaya tidak terulang: lebar dan
   tinggi yang sama TIDAK membuktikan sebaris. Yang membuktikan sebaris
   adalah getBoundingClientRect().top yang sama — dan sebelum itu,
   screenshot. Pengguna melihatnya langsung dari gambar sejak awal.

   Setelah margin dinolkan dengan !important: ketiganya top 520.8,
   left 355 / 729 / 1104 (jarak persis 12px), 362x44 masing-masing.

   Ditambahkan sekalian: gap 4px pada .published. Section 46 mengubahnya
   jadi display:flex, dan flexbox membuang anonymous flex item yang
   isinya hanya spasi — itulah sebabnya "PUBLISHED:" dan tanggalnya
   menempel jadi "PUBLISHED:2026-04-22". gap mengembalikan spasi itu
   tanpa menyentuh jarak ikon kalendernya (ikon itu ::before milik
   .label, bukan item flex tersendiri).
   ========================================================================== */
.jpi-issue-actions > * { margin: 0 !important; }
.jpi-issue-actions .published { gap: 4px; }

/* ==========================================================================
   49. Penyeragaman judul dan font ("judul suatu bagian jangan terlalu besar,
   demikian juga font, standarkan semua")

   Keadaan sebelum perbaikan, hasil ukur getComputedStyle:

       .page_title (judul artikel)      30px   Montserrat
       h2 "Current Issue"               22px   Noto Sans     <- font beda
       .current_issue_title             19px   Montserrat
       .obj_article_summary .title      17px   Montserrat
       body / .item.authors             16px   Montserrat
       .obj_issue_toc .description      15.5px Montserrat
       h2 "ARTICLES"                    12px   Noto Sans     <- font beda
       .item.keywords .label            11.5px Montserrat

   Dua masalah: (a) judul memakai Noto Sans sementara seluruh isi memakai
   Montserrat — bawaan Default Theme yang tidak pernah ikut ditimpa; dan
   (b) ukurannya tidak bertangga, melainkan delapan angka yang berdiri
   sendiri-sendiri (30/22/19/17/16/15.5/12/11.5), dengan judul artikel
   30px yang jauh lebih besar dari kebutuhannya.

   Diganti satu tangga yang rapat dan konsisten, seluruhnya Montserrat:

       --jpi-fs-title    24px   judul artikel / judul halaman
       --jpi-fs-section  18px   judul bagian (Current Issue)
       --jpi-fs-sub      16px   judul issue, judul artikel di daftar
       --jpi-fs-body     15.5px seluruh teks isi
       --jpi-fs-label    12px   label huruf kapital (ARTICLES, KEYWORDS)

   Tinggi baris ikut diseragamkan: 1.35 untuk judul, 1.65 untuk isi —
   angka 1.65 itu memang yang sudah dipakai <body> sejak awal.
   ========================================================================== */
:root {
  --jpi-fs-title: 24px;
  --jpi-fs-section: 18px;
  --jpi-fs-sub: 16px;
  --jpi-fs-body: 15.5px;
  --jpi-fs-label: 12px;
  --jpi-lh-title: 1.35;
  --jpi-lh-body: 1.65;
}

/* Satu keluarga huruf untuk semua judul — menutup Noto Sans bawaan tema. */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.pkp_structure_main h5,
.pkp_structure_main h6,
.obj_article_details .page_title,
.obj_issue_toc .current_issue_title,
.obj_article_summary .title {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Judul artikel / judul halaman: 30px -> 24px. */
.obj_article_details .page_title,
.pkp_structure_main .page_title {
  font-size: var(--jpi-fs-title);
  line-height: var(--jpi-lh-title);
}

/* Judul bagian, misalnya "Current Issue": 22px -> 18px. */
.pkp_structure_main > .page > h1,
.pkp_structure_main .page > h2,
.pkp_structure_main h2.jpi-section-title,
.pkp_structure_main .current_issue h2 {
  font-size: var(--jpi-fs-section);
  line-height: var(--jpi-lh-title);
}

/* Judul issue dan judul artikel di daftar: 19px dan 17px -> 16px. */
.obj_issue_toc .current_issue_title,
.current_issue_title {
  font-size: var(--jpi-fs-sub);
  line-height: var(--jpi-lh-title);
}
.obj_article_summary .title,
.cmp_article_list .title,
.obj_article_summary .title a {
  font-size: var(--jpi-fs-sub);
  line-height: 1.45;
}

/* Label huruf kapital: "ARTICLES", "KEYWORDS", dan sejenisnya. */
.obj_issue_toc .sections .section > h2,
.obj_article_details h3,
.obj_article_details .item .label {
  font-size: var(--jpi-fs-label);
  line-height: var(--jpi-lh-body);
}

/* Teks isi: 16px dan 15.5px disatukan pada satu angka. */
body,
.obj_issue_toc .description,
.obj_article_details .main_entry,
.obj_article_details .item.authors,
.obj_article_details .item.abstract {
  font-size: var(--jpi-fs-body);
  line-height: var(--jpi-lh-body);
}

/* Label pada halaman artikel (KEYWORDS, dsb) masih tersisa di 11.5px karena
   aturan lamanya lebih spesifik; disamakan ke 12px seperti label lain. */
.pkp_structure_main .obj_article_details h3,
.pkp_structure_main .obj_article_details .item .label,
.pkp_structure_main .obj_article_details .item h3 {
  font-size: var(--jpi-fs-label);
}

/* h3.label di kolom kanan halaman artikel (DOWNLOAD, PUBLISHED, ISSUE,
   SECTION) berada di luar .obj_article_details, jadi tidak tersentuh aturan
   di atas. Disamakan ke 12px seperti seluruh label lain. */
.pkp_structure_main h3.label {
  font-size: var(--jpi-fs-label);
}

/* Aturan yang menahan label di 11.5px ternyata ".obj_article_details
   .main_entry .item > h3.label" (spesifisitas 0,4,1) — lebih spesifik dari
   semua percobaan di atas. Dicocokkan persis; karena ditulis belakangan
   pada stylesheet yang sama, aturan inilah yang menang tanpa !important. */
.obj_article_details .main_entry .item > .label,
.obj_article_details .main_entry .item > h3.label {
  font-size: var(--jpi-fs-label);
}

/* ==========================================================================
   50. Halaman artikel: bayangan gambar sampul dibuang, jarak atas & kanan
   disamakan; judul halaman diperkecil

   a) "ada bayangan di atas gambar issue itu. gambar isu saya mau clean" —
      .obj_article_details .item.cover_image img membawa box-shadow dua
      lapis dari style dasar (0 2px 4px + 0 18px 40px -14px). Dibuang total.

   b) "sama persis jarak atas dari garis judul itu dengan jarak di samping
      kanannya" — diukur: jarak dari garis .row (border-top) ke puncak
      gambar = 30px (dari margin-top:28px section 43/47 + rounding border).
      Jarak gambar ke tepi kanan kolomnya sebelumnya 0 — gambar menempel
      pas di tepi kanan .entry_details (270px), tidak ada napas sama
      sekali. Diberi margin-right 29px, hasil ukur akhir: 30px/30px,
      sama persis di kedua sisi.

   c) "tulisan judul di laman artikel terlalu besar" — 24px (turun dari
      30px di section 49) ternyata masih dirasa besar. Diturunkan lagi ke
      20px, sedikit di atas judul bagian (18px) karena tetap judul
      halaman (h1), tapi tidak lagi mendominasi.
   ========================================================================== */
.obj_article_details .item.cover_image img {
  box-shadow: none;
}
.obj_article_details .item.cover_image {
  margin-right: 29px;
}
.obj_article_details .page_title,
.pkp_structure_main .page_title {
  font-size: 20px;
  line-height: var(--jpi-lh-title);
}

/* ==========================================================================
   51. Gambar sampul di sidebar kanan halaman artikel: batas kiri tidak
   sejajar dengan "DOWNLOAD", kotaknya berwarna hijau sangat muda, dan
   gambar menempel di beberapa sisi

   Akar masalahnya satu rule lama (bagian dari breakpoint >=992px, sejak
   awal tema ini dibuat): ".item.cover_image { padding: 0; background:
   #fff; }" — sengaja dibuat "bleed" penuh ke tepi kartu, beda dari semua
   item lain di kartu yang sama-sama memakai "padding: 14px 16px" milik
   ".entry_details .item". Akibatnya:

   - Sisi kiri gambar menempel pas di tepi kartu (0px), sedangkan
     "DOWNLOAD" di bawahnya punya inset 16px dari padding standar — dua
     batas kiri yang berbeda dalam satu kolom yang sama.
   - Kartu ".entry_details" sendiri punya latar var(--jpi-bg) = #F2F6F4,
     hijau sangat muda (dipetakan dari "permukaan-2" milik elearning.css).
     Karena gambar hanya diberi latar putih SELUAS kotaknya sendiri tanpa
     padding, warna hijau muda itu mengintip tepat di celah kanan (dari
     perbaikan section 50, margin-right:29px) dan di celah atas (dari
     margin-top:28px, section 43/47) — persis "bayangan hijau muda" yang
     dilaporkan; bukan box-shadow, melainkan warna latar kartu yang
     mengintip di sela-sela margin gambar.

   Diperbaiki dengan mengembalikan gambar ke padding standar yang sama
   dengan seluruh item lain di kartu ini (14px 16px, dari rule umum
   ".entry_details .item"), dan menjadikan latar seluruh kartu putih
   polos, bukan hanya di belakang gambar. Margin ad hoc (28px/29px) dari
   section 47/50 tidak diperlukan lagi karena padding standar sudah
   menghasilkan jarak yang wajar di keempat sisi sekaligus.

   Hasil ukur: gambar kini mulai di x yang PERSIS SAMA dengan "DOWNLOAD"
   (keduanya 16px dari tepi kartu), dan berjarak dari keempat sisi kartu
   (kiri 17px, kanan 17px, atas 15px) — tidak ada satu sisi pun yang
   menempel, dan tidak ada lagi warna hijau yang terlihat di sekitarnya.
   ========================================================================== */
.obj_article_details .entry_details {
  background: #fff;
}
@media (min-width: 992px) {
  .obj_article_details .item.cover_image {
    padding: 14px 16px;
    margin-top: 0 !important; /* menang atas margin-top:28px !important, section (f) */
    margin-right: 0;
    background: transparent;
  }
}
.obj_article_details .item.cover_image img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--jpi-line);
  border-radius: 8px;
  box-shadow: none;
}

/* ==========================================================================
   52. Header (hijau, search+Register+Login) dan footer (hijau, garis
   kuning) dipindahkan keluar dari area kanan, disatukan ke kolom sidebar
   kiri — "agar di area kanan tidak ada gangguan"

   Sebelumnya .pkp_structure_head dan .pkp_structure_footer_wrapper
   memakai margin-left:300px (section 33) supaya duduk di sisa lebar di
   sebelah kanan sidebar yang sudah position:fixed — artinya keduanya
   tetap membentang penuh di ATAS dan BAWAH area konten kanan, persis
   "gangguan" yang dikeluhkan.

   .pkp_site_name_wrapper (logo) sudah disembunyikan di desktop (section
   45 lama, karena redundan dengan logo yang sama di puncak sidebar), dan
   #navigationPrimary (link Current/Archives/About) sudah disembunyikan
   juga (redundan dengan menu #cssmenu di sidebar) — jadi isi header yang
   sungguh-sungguh tersisa hanya kotak cari + tombol Register/Login.

   Diperbaiki dengan menjadikan header dan footer position:fixed juga,
   selebar sidebar (300px), menempel di kiri: header di puncak, footer di
   dasar, dan sidebar sendiri diisi ulang top/bottom-nya (bukan lagi
   0/100vh) supaya daftar menunya hanya mengisi ruang di ANTARA header
   dan footer, tidak tertutup keduanya. Ketiganya kini satu kolom hijau
   utuh; area kanan (.pkp_structure_content, margin-left tetap 300px)
   jadi bersih dari puncak sampai dasar viewport.
   ========================================================================== */
@media (min-width: 992px) {
  .pkp_structure_head {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    margin-left: 0;
    z-index: 101;
  }
  .pkp_structure_footer_wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 300px;
    margin-left: 0;
    z-index: 101;
  }
  .pkp_structure_sidebar {
    top: 306px;   /* header kini cuma logo (search+akun pindah, section 62) — diukur persis: 306px */
    bottom: 24px; /* footer setelah logo OJS/PKP dihapus, section 61 — diukur persis: 24px */
    height: auto;
  }
  .pkp_structure_content { margin-left: 300px; }
}

/* ==========================================================================
   53. Isi header disusun ulang jadi kolom sempit (300px), bukan baris lebar

   Kotak cari dan tombol Register/Login sebelumnya diatur untuk baris
   horizontal lebar (justify-content:flex-end di .pkp_head_wrapper, li
   Register/Login bersisian). Dalam kolom 300px keduanya perlu ditumpuk
   vertikal: kotak cari di atas, Register+Login berdampingan sama lebar
   di bawahnya — pola tombol sama-rata yang sama dipakai section 45 pada
   baris Selengkapnya/Published/Download PDF.
   ========================================================================== */
@media (min-width: 992px) {
  .pkp_head_wrapper {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px !important;
  }
  .pkp_navigation_primary_wrapper {
    width: 100%;
  }
  .pkp_navigation_primary_wrapper .pkp_search { width: 100%; }
  .pkp_navigation_user_wrapper {
    margin-left: 0 !important;
    width: 100%;
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user {
    display: flex;
    gap: 8px;
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user li {
    flex: 1 1 0;
    float: none;
    width: auto;
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   55. Ikon cari tidak lagi di pojok kanan kotak — "icon luv di search
   terlalu ke tengah, dipojok kanankan lagi ya"

   Sejak header dipindah jadi kolom sidebar (section 53), kotak cari
   melebar penuh (268px), tapi kotak teksnya masih dipatok lebar tetap
   140px !important (aturan lama, dibuat untuk header versi baris lebar).
   Sisa ruang (268 - 140 - gap - lebar tombol = ~94px) menganggur di
   sebelah kanan tombol, sehingga ikon kaca pembesar terlihat mengambang
   di tengah, bukan menempel di ujung kanan.

   Diperbaiki dengan membuat kotak teksnya mengisi sisa ruang (flex:1),
   bukan lebar tetap — tombol otomatis terdorong pas ke tepi kanan.
   ========================================================================== */
.pkp_head_wrapper .pkp_search input[type="text"] {
  width: auto !important;
  flex: 1 1 auto !important;
}

/* ==========================================================================
   56. Urutan kolom kiri dibalik: logo paling atas, baru blok cari di
   bawahnya — "kalaubisa logo di paling atas, baru di bawahnya blok
   search itu"

   Logo sebelumnya ada di ::before milik .pkp_structure_sidebar (section
   27/54), yang duduk SETELAH .pkp_structure_head (section 52 memindahkan
   header jadi position:fixed top:0, sidebar baru mulai di bawahnya) —
   urutannya jadi: search+Register/Login dulu, logo baru menyusul.

   Dipindah: logo sekarang ::before milik .pkp_head_wrapper sendiri
   (paling atas dari header yang sudah fixed di top:0), search+tombol
   tetap mengikuti di bawahnya karena .pkp_head_wrapper sudah
   flex-direction:column (section 53) — ::before otomatis jadi flex item
   PERTAMA tanpa perlu diatur lagi. ::before lama di sidebar dimatikan
   supaya tidak dobel.
   ========================================================================== */
.pkp_structure_sidebar::before { content: none; }
.pkp_head_wrapper::before {
  content: '';
  display: block;
  width: 268px;
  height: 268px;
  margin: 0 auto 14px;
  background: url('/public/journals/1/pageHeaderLogoImage_en_US.png') no-repeat center center / contain;
}

/* ==========================================================================
   57. Dua cacat pada menu sidebar simulasi

   a) "icon siku tidak presisi satu dengan yang lain, ratakan ke pojok
      kanan seluruhnya" — tombol panah (.jpi-subtoggle) sebelumnya
      ditaruh sebagai ANAK <a>, bukan saudara <a> di dalam <li>. Karena
      <a> sendiri display:flex, panah ikut memampat ke ujung teks
      labelnya sendiri alih-alih ke ujung kanan baris — posisinya jadi
      beda-beda tergantung panjang label ("Submission Guidelines" dua
      baris membuat panahnya jauh lebih ke kanan daripada "Editorial
      Policies"). Diperbaiki di js/jpi.js: tombol dipindah jadi anak
      <li> langsung, sejajar dengan CSS yang memang sudah menunggu
      struktur itu (li.has-sub{display:flex} > a{flex:1 1 auto} +
      .jpi-subtoggle{flex:0 0 46px}) — otomatis presisi di ujung kanan
      untuk semua baris, tanpa CSS baru sama sekali.

   b) "anak menu lebih ke kiri daripada judul menunya" — diukur, teks
      keduanya ternyata SUDAH sejajar di x yang sama (56px dari tepi
      kiri li): baik judul induk maupun anak menu sama-sama menyediakan
      slot ikon kosong 18px+margin 10px sebelum teksnya. Bedanya, slot
      anak menu terisi bulatan penanda (terlihat), sedangkan slot induk
      kosong tak terlihat — mata membaca "awal" anak menu di bulatannya
      (kiri), dan awal induk di tulisannya (kanan), sehingga terasa
      tidak sejajar walau kotaknya sama. Sesuai permintaan eksplisit:
      slot ikon kosong pada judul menu induk dihapus (bukan disamakan
      isinya), sehingga judul induk bergeser ke kiri mengikuti titik
      awal bulatan anak menu, bukan titik awal teksnya.
   ========================================================================== */
.pkp_structure_sidebar #cssmenu > ul > li > a:before { display: none; }

/* ==========================================================================
   58. Pill admin: lebar tidak penuh, isi tidak rata kiri-kanan; menu
   dropdown-nya kecil sekali dan putih — dua laporan berbeda, akar
   masalah berbeda pula

   a) "area tombol lingkaran admin tidak penuh" — diukur: pembungkusnya
      (.pkp_navigation_user_wrapper) memang 268px, tapi ini menyisakan
      celah 10px di kiri karena warisan padding-left:10px dari rancangan
      lama (header masih baris horizontal, dipakai untuk memberi jarak
      dari kotak cari di sampingnya — sudah tidak relevan sejak section
      53 menjadikan header kolom vertikal). Di dalamnya, <ul> yang
      seharusnya diisi satu <li> yang melebar penuh (flex-grow:1) malah
      kepotong 16px lagi — ternyata dua pseudo-elemen ::before/::after
      "clearfix" bawaan (peninggalan pola layout float lama, tak berguna
      di flex container) ikut dihitung sebagai flex item oleh <ul> yang
      sudah diubah jadi display:flex, dan `gap:8px` di antara TIGA "item"
      itu (before-kosong, li, after-kosong) memakan 16px yang seharusnya
      jadi lebar tombol.

   b) "panah segitiga dengan keterangan 0 itu pojok kanan, tulisan admin
      kiri" — <a>-nya sendiri justify-content:center, membuat teks,
      badge, dan panahnya (segitiga CSS border-trick di ::after) semua
      menumpuk di tengah. Trik standar flexbox: beri margin-left:auto
      pada elemen PERTAMA dari kelompok yang mau didorong ke kanan
      (di sini .task_count) — teks di depannya otomatis tertinggal rata
      kiri, sisanya (badge+panah) terdorong rata kanan.

   c) "lis yang muncul... imut sekali, presisikan lebarnya, hijaukan
      warnanya" — <ul class="dropdown-menu"> memang tidak pernah
      disentuh tema ini, masih memakai lebar tetap 130px dan latar putih
      bawaan OJS. Diberi lebar sama persis dengan pill pemicunya, dan
      warna hijau mengikuti sidebar.
   ========================================================================== */
.pkp_navigation_user_wrapper { padding-left: 0; }
.pkp_navigation_user_wrapper .pkp_navigation_user::before,
.pkp_navigation_user_wrapper .pkp_navigation_user::after {
  content: none;
}
.pkp_navigation_user_wrapper .pkp_navigation_user { width: 100%; }
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile {
  width: 100%;
  position: relative;
}
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile > a {
  width: 100%;
  justify-content: flex-start;
}
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile > a > .task_count {
  margin-left: auto;
}
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile > a::after {
  margin-left: 8px;
}
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu {
  width: 100%;
  min-width: 100%;
  left: 0;
  right: auto;
  background: var(--jpi-primary);
  border: 1px solid var(--jpi-primary-dark);
  box-shadow: var(--jpi-shadow);
}
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu li a {
  color: var(--jpi-white-soft);
}
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu li a:hover,
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu li a:focus {
  background: var(--jpi-primary-dark);
  color: var(--jpi-white-soft);
}
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu li a .task_count {
  color: var(--jpi-white-soft);
}

/* ==========================================================================
   59. Isi dropdown-menu (Dashboard/View Profile/Administration/Logout)
   rata tengah, bukan rata kiri — "lis dropdown menu itu rata kiri"

   Linknya sendiri sudah text-align:left, tapi itu tidak berlaku karena
   elemennya display:flex dengan justify-content:center bawaan OJS —
   pada flex container, justify-content menang atas text-align untuk
   perataan horizontal isinya.
   ========================================================================== */
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu li a {
  justify-content: flex-start;
}

/* ==========================================================================
   60. Logo tidak berjarak sama di keempat sisi — jarak bawah dua kali
   lipat dari atas/kiri/kanan

   Diukur: kiri=16px, kanan=16px, atas=14px (dari padding .pkp_head_wrapper),
   tapi bawah=28px — sebab jarak bawah menumpuk DUA sumber sekaligus:
   margin-bottom:14px milik kotak logo sendiri (section 54/56) DITAMBAH
   gap:10px milik flex column .pkp_head_wrapper (section 53, jarak antar
   baris header) — keduanya berlaku bersamaan di flexbox, bukan saling
   menggantikan.

   Disamakan ke 16px di keempat sisi: padding wrapper dijadikan seragam
   16px (atas ikut naik dari 14 ke 16), dan margin-bawah logo diperkecil
   jadi 6px supaya total dengan gap:10px yang sudah ada tetap pas 16px —
   bukan menghapus gap (itu juga dipakai untuk jarak baris cari ke baris
   Register/Login di bawahnya, sengaja dibiarkan).
   ========================================================================== */
.pkp_head_wrapper { padding: 16px !important; }
.pkp_head_wrapper::before { margin-bottom: 6px !important; }

/* ==========================================================================
   61. Footer dipersempit lagi, logo OJS/PKP dihilangkan

   Sebelumnya padding 26px 20px (dari breakpoint >=480px) + logo brand
   84.5px tinggi jadi total ~148px. Logonya dihapus total sesuai
   permintaan ("kalau bisa dihilangkan"), padding dipangkas jauh lebih
   kecil karena kini tidak ada lagi konten di dalamnya selain garis
   aksen kuning di atas.
   ========================================================================== */
.pkp_brand_footer { display: none; }
.pkp_structure_footer { padding: 10px 16px !important; }

/* ==========================================================================
   62. Menu Akun/Register/Login dan kotak cari pindah ke sidebar/main —
   header sidebar kini cuma berisi logo, tinggi jauh berkurang

   .pkp_navigation_user_wrapper disembunyikan oleh initAccountMenu() (js),
   .pkp_navigation_primary_row disembunyikan oleh initSearchToMain() (js)
   begitu isinya (kotak cari) dipindah — .pkp_head_wrapper kini hanya
   berisi ::before (logo). Tinggi header baru: 300px (logo persegi
   268px + padding atas-bawah 16px+16px, section 60) diukur presis di
   bawah, bukan ditaksir.
   ========================================================================== */

/* ==========================================================================
   63. Footer: logo OJS/PKP diganti logo Paranawa Institute + teks nama
   jurnal di sampingnya

   Section 61 menyembunyikan .pkp_brand_footer total ("kalau bisa
   dihilangkan"). Sekarang diisi ulang, tapi dengan markup baru
   (.jpi-brand-footer, lihat override footer.tpl) supaya tidak bentrok
   dengan rule display:none itu — bukan menimpanya balik jadi visible,
   karena .pkp_brand_footer generik itu mungkin masih dipakai di tempat
   lain nanti.

   Logo aslinya potret sempit (572x1068, rasio ~1:1.87) dengan banyak
   ruang kosong di dalam bingkainya sendiri; dibatasi tingginya saja
   (28px, mengikuti tinggi footer yang sudah dipangkas di section 61)
   dan disejajarkan satu baris dengan teks nama jurnal di sampingnya.
   ========================================================================== */
.jpi-brand-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: left;
}
.jpi-brand-logo {
  /* 28px sempat dicoba dulu tapi tak terbaca sama sekali — gambar
     aslinya potret sempit (572x1068), jadi di 28px tinggi lebarnya
     cuma ~15px, sekadar bintik. Dinaikkan ke 46px (lebar jadi ~25px)
     supaya bentuk pohon+bingkainya masih bisa dikenali. */
  height: 46px;
  width: auto;
  flex: 0 0 auto;
}
.jpi-brand-text {
  /* "tulisannya terlalu pencolok... jangan bold, perkecil size" —
     600/12px kelihatan tebal dan menonjol dibanding logo kecil di
     sampingnya. Diturunkan ke berat normal, 10.5px. */
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(255,255,255,.72);
  line-height: 1.3;
}

/* ==========================================================================
   64. Tema gelap (malam) — sidebar hitam, laman utama hijau tua

   Ini keputusan warna yang ditetapkan permanen ("kita tetapkan"), bukan
   uji coba. Dua area diberi identitas warna terpisah, keduanya lewat
   variabel supaya konsisten di seluruh berkas:

   1. SIDEBAR (header+menu+footer, satu kolom kiri): token BARU
      --jpi-sidebar-bg/-alt/-deep. Sengaja token terpisah dari
      --jpi-primary — --jpi-primary masih dipakai luas di LUAR sidebar
      (warna tautan global, tombol Download PDF, dsb, lihat baris 95 dst)
      dan tidak boleh ikut berubah jadi hitam.
   2. LAMAN UTAMA (body + kartu konten): token LAMA --jpi-bg/--jpi-card/
      --jpi-ink/--jpi-body/--jpi-muted/--jpi-line ditimpa nilainya di
      sini — karena hampir seluruh CSS kartu/teks/garis di laman utama
      sudah memakai variabel-variabel ini (bukan warna tetap), cukup
      ganti nilainya sekali di sini dan otomatis menjalar ke seluruh
      komponen (judul, isi, garis pemisah, kotak cari, dst) tanpa perlu
      menimpa satu per satu.

   Teks putih dilembutkan jadi --jpi-white-soft (85% opacity) di seluruh
   berkas (19 titik "color: #fff" diganti sekaligus) — bukan cuma di
   sidebar — sesuai "tulisan putih jangan terlalu menyala".
   ========================================================================== */
:root {
  /* -- sidebar: struktur hitam -- */
  --jpi-sidebar-bg: #16171A;      /* badan sidebar & menu tidak aktif */
  --jpi-sidebar-bg-alt: #232428;  /* baris hover/aktif/submenu terbuka */
  --jpi-sidebar-bg-deep: #0B0C0E; /* header (logo) & footer, satu nada lebih gelap */
  --jpi-sidebar-line: rgba(255,255,255,.08);
  --jpi-white-soft: rgba(255,255,255,.85);
  --jpi-white-mute: rgba(255,255,255,.55);

  /* -- laman utama: hijau tua -- */
  --jpi-bg: #0A211A;              /* was #F2F6F4 */
  --jpi-card: #0F2C23;            /* was #ffffff */
  --jpi-ink: rgba(255,255,255,.88);   /* was #212529 */
  --jpi-body: rgba(255,255,255,.88);  /* was #212529 */
  --jpi-muted: rgba(255,255,255,.55); /* was #6B8079 */
  --jpi-line: rgba(255,255,255,.10);  /* was #E6EDE9 */
  --jpi-border-input: rgba(255,255,255,.20); /* was hsl(210 14% 83%) */
}

/* -- sidebar: terapkan token hitam ke struktur -- */
.pkp_structure_head { background: var(--jpi-sidebar-bg-deep) !important; }
.pkp_structure_footer_wrapper { background: var(--jpi-sidebar-bg-deep) !important; }
.pkp_structure_sidebar { background: var(--jpi-sidebar-bg) !important; }
.pkp_structure_sidebar .pkp_block > .title {
  background: transparent !important;
  color: var(--jpi-white-mute);
}
.pkp_structure_sidebar #cssmenu > ul > li > a {
  background: var(--jpi-sidebar-bg) !important;
}
.pkp_structure_sidebar #cssmenu > ul > li:hover > a,
.pkp_structure_sidebar #cssmenu > ul > li:focus-within > a,
.pkp_structure_sidebar #cssmenu > ul > li.active > a {
  background: var(--jpi-sidebar-bg-alt) !important;
}
.pkp_structure_sidebar #cssmenu.jpi-js .jpi-subtoggle {
  background: var(--jpi-sidebar-bg) !important;
  border-bottom-color: var(--jpi-sidebar-line) !important;
  border-left-color: var(--jpi-sidebar-line) !important;
}
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub:hover > .jpi-subtoggle,
.pkp_structure_sidebar #cssmenu.jpi-js .jpi-subtoggle:hover,
.pkp_structure_sidebar #cssmenu.jpi-js .jpi-subtoggle:focus,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.is-open > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.is-open > .jpi-subtoggle,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.active > a,
.pkp_structure_sidebar #cssmenu.jpi-js li.has-sub.active > .jpi-subtoggle {
  background: var(--jpi-sidebar-bg-alt) !important;
}
.pkp_structure_sidebar #cssmenu ul ul { background: var(--jpi-sidebar-bg-alt); }
.pkp_structure_sidebar #cssmenu ul ul li a { color: var(--jpi-white-mute); }
.pkp_structure_sidebar #cssmenu ul ul li a:hover,
.pkp_structure_sidebar #cssmenu ul ul li a:focus { color: var(--jpi-white-soft); }
.pkp_structure_footer { color: var(--jpi-white-mute); }
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu {
  background: var(--jpi-sidebar-bg-alt) !important;
  border-color: var(--jpi-sidebar-line) !important;
}
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu li a:hover,
.pkp_navigation_user_wrapper .pkp_navigation_user .dropdown-menu li a:focus {
  background: var(--jpi-sidebar-bg) !important;
}
.pkp_structure_sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

/* -- laman utama: garis & bayangan kartu perlu ditata ulang untuk latar
      gelap — bayangan gelap di atas kartu gelap tidak akan terlihat,
      dan beberapa border eksplisit (bukan var(--jpi-line)) masih
      mengarah ke warna terang lama -- */
.pkp_structure_main {
  box-shadow: none;
  border-color: var(--jpi-line);
}
.entry_details, .obj_article_details .entry_details {
  background: var(--jpi-card) !important;
}

/* ==========================================================================
   65. Sisa latar putih tetap (warisan sebelum tema gelap) yang belum
   pakai variabel — kartu artikel, dropdown, kotak cari header lama, dsb

   Semua ini ditulis dulu sebagai warna tetap #fff (bukan var(--jpi-card))
   sejak sebelum ada tema gelap, jadi tidak ikut berubah otomatis ketika
   --jpi-card ditimpa di section 64. Diselaraskan satu per satu di sini.
   ========================================================================== */
.pkp_navigation_primary ul,
.pkp_search input[type="text"],
.obj_article_summary,
.obj_article_details .item.galleys,
.obj_article_details .item[class*="usageStats"],
.usageStatsGraph,
.obj_article_details .citation_display .citation_formats_button,
.obj_article_details .citation_display .citation_formats_list,
.pkp_head_wrapper .pkp_search.is_open input[type="text"] {
  background: var(--jpi-card) !important;
}
.obj_article_summary { border-color: var(--jpi-line); }

/* ==========================================================================
   66. Label "ARTICLES" jadi kotak putih kosong (teks putih di atas latar
   putih, tak terlihat) — sumber latar putihnya dari base theme (bukan
   berkas tema ini) yang tidak berhasil dilacak lewat CSSOM meski sudah
   dicoba beberapa cara (kemungkinan properti shorthand yang diuraikan
   browser dengan cara tak terduga). Ditimpa langsung dengan !important
   pada selector yang sudah pasti cocok (dipakai jpi.css sendiri untuk
   mewarnai teksnya) — lebih cepat dan pasti menang daripada terus
   melacak asalnya.
   ========================================================================== */
.sections .section > h2,
.sections h2 {
  background: transparent !important;
}

/* ==========================================================================
   67. Judul issue ("Vol. 3 No. 1...") nyaris tidak terlihat di kartu
   hijau tua — warnanya var(--jpi-primary-dark) (#064136), dipilih waktu
   kartu masih putih (kontras tinggi di sana), nyaris melebur begitu
   kartu jadi hijau tua (section 64). Disamakan dengan judul lain di
   kartu yang sama ("Current Issue" sudah var(--jpi-ink)) untuk
   konsisten.
   ========================================================================== */
.current_issue_title { color: var(--jpi-ink) !important; }

/* ==========================================================================
   68. Kalibrasi ulang tema gelap: hijau lebih tua, putih lebih redup,
   dan hitam sidebar diberi rona hijau supaya tidak kontradiktif dengan
   hijau di laman utama

   a) "hijaunya hijau tua" — --jpi-bg dan --jpi-card (section 64) diturunkan
      lagi kegelapannya.
   b) "putih tulisannya lebih redup lagi" — seluruh opacity teks putih
      (soft/mute, sidebar maupun laman utama) diturunkan sekali lagi.
   c) "terlihat kontras/kontradiktif antara hitam di sidebar dengan hijau
      di laman utama. buat hitam di sidebar itu hitam yang hijau" — akar
      masalahnya: hitam sidebar (section 64) itu abu-abu netral tanpa
      rona (hue) sama sekali, sedangkan laman utama hijau jenuh — dua
      keluarga warna yang tidak berkerabat, makanya terasa bertabrakan
      bukan berpadu. Diperbaiki bukan dengan menyamakan gelapnya, tapi
      dengan memberi hitam sidebar RONA HIJAU YANG SAMA (hue ~165°,
      sama dengan --jpi-primary) hanya dengan saturasi jauh lebih rendah
      dan gelap jauh lebih pekat — tetap terbaca sebagai "hitam", tapi
      dari keluarga hijau yang sama dengan laman utama, bukan hitam
      netral yang berasal dari keluarga warna berbeda.
   ========================================================================== */
:root {
  /* -- sidebar: hitam berona hijau (bukan hitam netral) -- */
  --jpi-sidebar-bg: #0F1713;      /* was #16171A (netral) */
  --jpi-sidebar-bg-alt: #1A251F;  /* was #232428 (netral) */
  --jpi-sidebar-bg-deep: #080D0A; /* was #0B0C0E (netral) */
  --jpi-white-soft: rgba(255,255,255,.72);  /* was .85 */
  --jpi-white-mute: rgba(255,255,255,.42);  /* was .55 */

  /* -- laman utama: hijau lebih tua lagi, teks lebih redup -- */
  --jpi-bg: #051712;              /* was #0A211A */
  --jpi-card: #082019;            /* was #0F2C23 */
  --jpi-ink: rgba(255,255,255,.74);   /* was .88 */
  --jpi-body: rgba(255,255,255,.74);  /* was .88 */
  --jpi-muted: rgba(255,255,255,.42); /* was .55 */
}

/* ==========================================================================
   69. Garis kuning di atas footer dihapus, diganti bayangan hitam tipis
   di dua batas: bawah kotak logo, dan atas footer

   "garis atas berwarna kuning di footer dihapus saja... batas area logo
   ada shadow sedikit ke bawah, dan batas atas area footer ada sedikit
   shadow ke atas. shadow hitam semua"
   ========================================================================== */
.pkp_structure_footer_wrapper { border-top: 0 !important; }
.pkp_head_wrapper {
  box-shadow: 0 6px 10px -6px rgba(0,0,0,.55);
}
.pkp_structure_footer_wrapper {
  box-shadow: 0 -6px 10px -6px rgba(0,0,0,.55);
}

/* ==========================================================================
   70. Gambar sampul di halaman "View All Issues" (Archives) dipaksa
   ngotak — rasio aslinya (600x848, potret) tidak dihormati

   Base theme (bukan berkas ini) punya rule sendiri untuk
   ".obj_issue_summary .cover img": width:auto; max-height:250px — tanpa
   batas lebar, gambar potret yang tinggi jadi terpotong/terdistorsi
   mengejar tinggi maksimum itu. Ditimpa eksplisit dengan !important:
   lebar mengikuti kolomnya, tinggi menyesuaikan otomatis, tanpa batas
   tinggi — rasio asli terjaga persis, tidak pernah dipotong maupun
   diregangkan.
   ========================================================================== */
.obj_issue_summary .cover img,
.obj_article_summary .cover img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: 190px !important;
  object-fit: contain !important;
}

/* ==========================================================================
   71. Garis pemisah liar di atas blok "ARTICLES" — akar masalah
   "blok artikel tidak presisi dengan Current [Issue] di atasnya"

   Base theme (bukan berkas ini) menaruh ::before pada .section: garis
   abu-abu #DDDDDD (bukan warna tema ini sama sekali), position:absolute,
   top:45px — tanpa left/right/width yang disesuaikan, jadi melebar
   mengikuti leluhur position:relative terdekat, BUKAN kolom konten
   (yang punya padding sendiri 30px). Hasilnya: garis itu 30px lebih
   lebar di kedua sisi dibanding teks "ARTICLES" dan kartu artikel di
   bawahnya persis di bawahnya — persis "tidak presisi" yang dilaporkan.

   Dimatikan total; garis pemisah antar section sudah cukup terwakili
   oleh h2-nya sendiri (section 7 & 66), tidak perlu digaris dua kali.
   ========================================================================== */
.sections .section::before { content: none !important; }

/* ==========================================================================
   72. Judul "Articles" tidak presisi dengan "Current Issue" di atasnya
   — bukan soal posisi (keduanya sudah sama-sama x=354.8), tapi gaya
   tipografinya berbeda jauh: "Current Issue" 18px/normal-case/74% putih,
   "Articles" 12px/UPPERCASE/42% putih — dua judul section yang sama
   pentingnya tapi terlihat seperti dua tingkat hierarki berbeda.
   Disamakan mengikuti --jpi-fs-section (section 49) yang memang sudah
   jadi standar ukuran judul bagian di berkas ini.
   ========================================================================== */
.sections .section > h2,
.sections h2 {
  font-size: var(--jpi-fs-section);
  text-transform: none;
  letter-spacing: normal;
  color: var(--jpi-ink);
}

/* ==========================================================================
   73. Baris metadata artikel di daftar disatukan jadi satu baris sejajar
   — "meta di lis artikel itu sejajarkan: ikon penulis lalu nama penulis,
   kemudian halaman, kemudian download, kemudian jumlah view, kemudian
   doi... presisi, profesional, elegan"

   Markup baru (lihat override article_summary.tpl): satu
   .jpi-article-meta berisi lima .jpi-meta-item sejajar — penulis
   (ikon topi wisuda), halaman (ikon dokumen), unduh (tombol kecil,
   bukan tombol besar berdiri sendiri seperti sebelumnya), jumlah
   dilihat (ikon mata, dihitung sungguhan dari tabel metrics), dan DOI
   (selalu tampil, "-" kalau kosong).

   Setiap item dipisahkan garis vertikal tipis (bukan bullet atau tanda
   lain) — pola pemisah metadata yang umum di desain jurnal akademik,
   rapi tanpa berisik secara visual.
   ========================================================================== */
.jpi-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 10px 0 0;
}
.jpi-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--jpi-muted);
  line-height: 1.3;
  position: relative;
  padding-left: 14px;
}
.jpi-meta-item:first-child {
  padding-left: 0;
}
.jpi-meta-item:not(:first-child):before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--jpi-line);
}
.jpi-meta-item i {
  font-size: 12.5px;
  opacity: .8;
  flex: 0 0 auto;
}
.jpi-meta-authors { color: var(--jpi-ink); font-weight: 600; }
.jpi-meta-doi-label { font-weight: 600; color: var(--jpi-muted); }

/* Tombol unduh: versi kecil-sejajar, bukan tombol besar berdiri sendiri
   seperti pemakaian .obj_galley_link lainnya (mis. sidebar artikel). */
.jpi-meta-download .obj_galley_link {
  min-height: 0;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
}

/* ==========================================================================
   74. Section 72 ternyata kalah cascade — sesuatu di tema induk (tak
   terlacak lewat pemindaian cssRules, sama seperti kasus section 66)
   tetap memenangkan font-size:12px pada h2 "Articles" walau variabel
   --jpi-fs-section sendiri sudah benar bernilai 18px. Dipaksa langsung
   dengan !important dan angka pasti, tidak bergantung menang-kalah
   cascade lagi.
   ========================================================================== */
.sections .section > h2,
.sections h2 {
  font-size: 18px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: rgba(255,255,255,.74) !important;
}

/* ==========================================================================
   75. "Articles" agak ke kanan dibanding "Current Issue" — patokannya
   Current Issue

   Akar masalah sesungguhnya (bukan cuma padding): .section (base theme,
   tak terlacak di berkas ini) memakai trik margin-negatif+padding yang
   saling membatalkan — margin-left:-30px DIBATALKAN oleh padding-left:
   30px, hasil akhirnya nol, itu sebabnya di lebar desktop dulu terukur
   pas sama dengan Current Issue (354.8=354.8). Percobaan pertama hanya
   menghapus padding-nya (jadi 0) TANPA ikut menghapus margin -30px-nya
   — hasilnya malah bergeser 30px ke KIRI, bukan makin presisi.

   Diperbaiki dengan benar: margin dan padding kiri-kanan .section
   DUA-DUANYA dipaksa 0 — bukan cuma satu sisi dari triknya. Dengan
   keduanya nol, "Articles" (dan kartu artikel di bawahnya, yang juga
   anak .section) mengikuti tepi kiri .sections apa adanya — tepi yang
   sama persis dipakai "Current Issue" (satu induk yang sama,
   .page_index_journal, tanpa padding tambahan di keduanya).
   ========================================================================== */
.sections .section {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   76. Garis aksen kuning di bawah "Articles" — persis seperti punya
   "Current Issue" ("buatkan juga garis dengan sedikit kuning, di
   bawahnya, persis seperti current itu")

   Disalin persis dari .current_issue > h2:after (section asli, baris
   290): posisi, lebar, tinggi, dan warna yang sama, hanya selector-nya
   diarahkan ke judul "Articles".
   ========================================================================== */
.sections .section > h2 {
  position: relative;
  padding-bottom: 12px;
}
.sections .section > h2:after {
  /* rule lama (baris 418, dari section 9 tentang panah cssmenu yang
     dulu dihapus) mematikan :after ini total dengan display:none —
     dinyalakan lagi di sini, kalau tidak garis kuningnya tidak akan
     pernah terlihat walau content/posisi sudah benar. */
  display: block !important;
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 58px;
  height: 3px;
  background: var(--jpi-accent);
  border-radius: 2px;
}

/* ==========================================================================
   77. Garis kuning "Articles" berhimpit dengan kartu artikel di
   bawahnya — bukan soal lebar garis (sudah sama 58px persis), tapi
   jarak sesudahnya: "Current Issue" berjarak 20px ke konten di
   bawahnya, "Articles" cuma 6px ke kartu di bawahnya (margin-bottom
   bawaan .sections h2), jadi terlihat dua garis berhimpit/kotor.
   Disamakan ke 20px.
   ========================================================================== */
.sections .section > h2 {
  margin-bottom: 20px !important;
}

/* ==========================================================================
   78. AKHIRNYA akar sesungguhnya: teks "Articles" mulai 15px lebih ke
   kanan dari "Current Issue" — bukan kotak h2-nya (sudah sama-sama
   354.8), bukan section wrapper (sudah diperbaiki section 75), tapi
   h2 "Articles" itu sendiri punya padding-left:15px bawaan (sisa
   reservasi ruang ikon dari tema induk) yang tidak pernah disentuh
   sebelumnya. Garis kuningnya (position:absolute, left:0) tidak
   terpengaruh padding ini sehingga tetap sejajar dengan Current Issue
   — hanya TEKS-nya yang bergeser, itu sebabnya kelihatan "lebih ke
   kanan" walau semua pengukuran kotak sebelumnya cocok.
   ========================================================================== */
.sections .section > h2 {
  padding-left: 0 !important;
}

/* ==========================================================================
   79. "Articles" cuma dapat aksen kuningnya, tidak ada garis tipis
   penuh di bawahnya seperti "Current Issue"

   .current_issue > h2 punya border-bottom:1px solid var(--jpi-line)
   (garis tipis penuh selebar heading), dengan aksen kuning (:after)
   menumpuk di atas AWAL garis itu — itu sebabnya terlihat "garis yang
   dimulai dengan segmen tebal kuning". .sections .section > h2 tidak
   pernah punya border-bottom sama sekali (aturan aslinya malah
   border-TOP, yang sudah kita matikan di section 66/71 karena
   melebar salah tempat) — hanya aksen kuningnya (section 76) yang
   sempat ditambahkan, tanpa garis tipisnya. Disamakan persis.
   ========================================================================== */
.sections .section > h2 {
  border-bottom: 1px solid var(--jpi-line);
}

/* ==========================================================================
   80. Garis bawah "Articles" cuma selebar teksnya sendiri (87px),
   bukan selebar kartu seperti "Current Issue" (1111px) — akar
   masalahnya .sections .section > h2 masih display:inline-block
   (bawaan tema induk), sehingga border-bottom-nya cuma membungkus
   teks, bukan melebar penuh. "Current Issue" adalah display:block.
   Disamakan.
   ========================================================================== */
.sections .section > h2 {
  display: block !important;
}

/* ==========================================================================
   81. "Sama persis" — diverifikasi properti demi properti lewat
   getComputedStyle, ketemu 5 yang masih beda dari .current_issue > h2:
   letter-spacing, margin-top, margin-bottom, padding-top, padding-right.
   Disamakan literal ke nilai yang sama, bukan didekati.
   ========================================================================== */
.sections .section > h2 {
  letter-spacing: -0.18px !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   82. Tombol di bawah Current Issue diperkecil jadi label, berjejer tepat di
   bawah batas teks deskripsi yang terpotong

   "saya terganggu dengan dua tombol di bawah current issue itu, bisa tidak
   ia diperkecil, seperti pelabelan saja, ia berjejer di garis batas teks
   yang disembunyikan itu"

   Sebelumnya .jpi-issue-actions adalah saudara .heading: grid tiga kolom
   1fr selebar kartu (855px), tinggi 44px (section 43-46), jatuh di bawah
   sampul DAN deskripsi — bobot visualnya menyaingi judul issue. Sekarang
   template (issue_toc.tpl) membungkus deskripsi + baris ini dalam
   .jpi-desc-col, jadi barisnya ikut kolom teks: mulai di x yang sama
   dengan teks deskripsi, tepat di bawah gradien pudarnya.

   Tinggi dipatok 24px + box-sizing, bukan dibiarkan dari isi: tanpa
   patokan, "Selengkapnya" 26px sedangkan Published 24px, karena ikon
   panah FontAwesome (:after) lebih tinggi dari teks 11px.

   Spesifisitas sengaja (0,3,0)+ supaya menang atas rule section 43-47
   tanpa !important; margin anak sudah 0 !important dari section 47.
   ========================================================================== */
.obj_issue_toc .heading > .jpi-desc-col { flex: 1 1 300px; min-width: 0; order: 2; }
.obj_issue_toc .jpi-desc-col .jpi-issue-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.obj_issue_toc .jpi-desc-col .jpi-issue-actions > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 24px;
  min-height: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .04em;
}
.obj_issue_toc .jpi-desc-col .jpi-more:after { font-size: 12px; margin-left: 6px; }
.obj_issue_toc .jpi-desc-col .published .label:before { margin-right: 5px; }

/* ==========================================================================
   83. Label Selengkapnya/Published naik ke pojok kanan bawah kolom teks,
   batas bawahnya persis sama dengan batas bawah gambar sampul issue

   "lebih ke atas lagi, dan berada di pojok kanan bawah, batas akhir bawah
   dari dua tombol itu sama persis dengan batas bawah gambar issue"

   Di section 82 label jatuh DI BAWAH deskripsi, dan deskripsi (clamp
   264px) sendiri sudah 14px lebih tinggi dari sampul (250px) — jadi label
   berakhir 22px di bawah gambar. Tidak bisa dipecahkan dengan angka tetap
   (tinggi sampul ikut rasio gambar), jadi tinggi kolom teks diikatkan ke
   baris flex .heading:

   - .jpi-desc-col align-self:stretch + flex column: kolom setinggi baris,
     yang tingginya ditentukan sampul.
   - .description height:0 + flex-grow: deskripsi tidak ikut menyumbang
     tinggi ke baris (kalau ikut, barisnya membesar lagi melebihi sampul),
     lalu mengisi sisa ruang di atas label. Gradien pudar (:after, bottom 0)
     ikut turun ke batas baru ini dengan sendirinya.
   - min-height 150px: pengaman saat layar sempit — sampul dan kolom teks
     jadi dua baris terpisah, tidak ada sampul untuk diikuti, dan tanpa ini
     deskripsi runtuh ke 0px (terbukti di lebar 640px).
   - .is-open dikecualikan: saat dibuka deskripsi kembali setinggi isinya
     dan label ikut turun ke bawah teks.

   Terukur di 1280px: bawah label 461.5 = bawah gambar 461.5; kanan label
   1210 = tepi kanan kolom teks.
   ========================================================================== */
.obj_issue_toc .heading > .jpi-desc-col {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.obj_issue_toc .jpi-desc-col .description.jpi-clamp:not(.is-open) {
  flex: 1 1 auto;
  height: 0;
  min-height: 150px;
  max-height: none;
}
.obj_issue_toc .jpi-desc-col .jpi-issue-actions { justify-content: flex-end; }

/* ==========================================================================
   84. Meta daftar artikel dirapikan — "lihat meta di lis artikel. disana
   ada penulis, nomor halaman, download, view dan doi. apakah anda bisa
   memperindahnya"

   Yang membuatnya kurang enak dilihat (terukur, section 73):
   - Tombol PDF satu-satunya elemen BERISI (latar hijau solid #0F6E56),
     tinggi 25px sementara item lain 17px — menarik mata paling kuat dan
     membuat baris terlihat tidak rata.
   - Halaman/view/DOI di 42% putih: terlalu redup di kartu #082019,
     susah dibaca.
   - Ikon ikut redup (opacity .8 dari warna teks yang sudah redup),
     tidak membantu memindai.
   - DOI berdempetan dengan item lain padahal jenis informasinya beda
     (identitas, bukan statistik).

   Perbaikan:
   - Semua item satu tinggi, 22px; PDF jadi pill GARIS (outline kuning
     aksen), terisi baru saat hover — tetap kelihatan bisa diklik tanpa
     mendominasi.
   - Teks sekunder naik ke 58% putih; penulis tetap 74% tebal (hierarki).
   - Ikon diberi warna aksen kuning, lebar tetap 13px agar teks sesudahnya
     mulai di jarak yang sama.
   - Garis tipis pemisah antara judul dan meta (12px atas-bawah).
   - DOI didorong ke ujung kanan (margin-left:auto), tanpa garis pemisah.
   ========================================================================== */
.obj_article_summary .jpi-article-meta {
  gap: 0;
  row-gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--jpi-line);
}
.obj_article_summary .jpi-meta-item {
  height: 22px;
  padding: 0 14px;
  gap: 7px;
  font-size: 12.5px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.58);
}
.obj_article_summary .jpi-meta-item:first-child { padding-left: 0; }
.obj_article_summary .jpi-meta-item:not(:first-child):before {
  height: 12px;
  background: rgba(255,255,255,.14);
}
.obj_article_summary .jpi-meta-item i {
  width: 13px;
  text-align: center;
  font-size: 12px;
  opacity: 1;
  color: var(--jpi-accent);
}
.obj_article_summary .jpi-meta-authors { color: var(--jpi-ink); font-weight: 600; }
.obj_article_summary .jpi-meta-doi { margin-left: auto; padding-right: 0; }
.obj_article_summary .jpi-meta-doi:before { display: none; }
.obj_article_summary .jpi-meta-doi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.42);
}
.obj_article_summary .jpi-meta-download .obj_galley_link {
  display: inline-flex;
  align-items: center;
  height: 22px;
  box-sizing: border-box;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(235,154,1,.55);
  border-radius: 999px;
  /* !important wajib: ada rule lama ".obj_galley_link { color:
     var(--jpi-white-soft) !important }" — tanpa ini teks PDF tetap
     putih walau selector di sini lebih spesifik (jebakan #9). */
  color: var(--jpi-accent) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background .15s ease, color .15s ease;
}
.obj_article_summary .jpi-meta-download .obj_galley_link:hover,
.obj_article_summary .jpi-meta-download .obj_galley_link:focus {
  background: var(--jpi-accent);
  color: var(--jpi-card) !important;
}
/* Ikon PDF (::before, FontAwesome) masih 15px warisan tombol besar —
   di pill 22px (20px dalam border) sisa ruangnya cuma 2.5px atas-bawah,
   ikon terlihat menyentuh lingkaran: "icon pdf terlalu besar di
   lingkarannya sehingga menyentuh lingkaran". Disamakan dengan teks
   PDF (11px), jarak ke teks dikecilkan seimbang. */
.obj_article_summary .jpi-meta-download .obj_galley_link:before {
  font-size: 11px;
  line-height: 1;
  height: auto;
  width: auto;
  margin-right: 5px;
}

/* ==========================================================================
   85. Halaman Archives ("View All Issues"): garis putih liar dibuang, dan
   gambar sampul + teks tidak lagi jomplang

   "ketika klik archive, atau klik view all issues, disana ada garis garis
   putih yang tidak jelas. kemudian, gambar dengan teksnya jomplang"

   Garis: base theme (issueArchive.less) memberi .issues_archive
   border-top dan tiap li border-bottom @bg-border = #ddd — abu terang
   yang dibuat untuk latar putih lama, jadi menyala di tema gelap
   (section 64). Daftarnya juga diberi margin negatif (-30px) supaya garis
   menjulur melewati tepi konten; hasilnya garis lebih lebar dari judul
   "Archives" dan garis bawahnya sendiri — dua garis beda panjang, beda
   warna, bertumpuk. Border-top dibuang (h1 "Archives" sudah punya garis
   sendiri), pemisah antar-issue pakai var(--jpi-line), margin negatif
   dinolkan supaya sejajar tepi konten, li terakhir tanpa garis.

   Jomplang: sampul di-float kiri 25% (issue_summary.less), judul di
   sampingnya, tapi deskripsi panjang mengalir MELEWATI bawah gambar ke
   lebar penuh — kolom kanan rata kiri di dua posisi berbeda (x=542 di
   samping gambar, x=351 di bawahnya). Judul & "Vol. 3 No. 1" juga hijau
   gelap, tenggelam di kartu gelap.

   Diganti grid dua kolom, pola yang sama dengan Current Issue di
   beranda: sampul 190px di kiri (lebar sama dengan section 70), kanan =
   seri (label aksen kecil), judul, deskripsi. Deskripsi dipotong persis
   di batas bawah gambar lewat contain:size — elemen tidak menyumbang
   tinggi ke baris grid, jadi tinggi baris ditentukan gambar, lalu
   deskripsi merentang mengisi sisanya + gradien pudar. min-height 120px
   jadi pengaman kalau gambar pendek / tidak ada. Terukur di 1100px:
   bawah deskripsi 493 = bawah gambar 493.

   Di bawah 576px sampul dan teks ditumpuk (kolom 190px terlalu makan
   tempat di layar ponsel).
   ========================================================================== */
.page_issue_archive .issues_archive {
  margin-left: 0;
  margin-right: 0;
  border-top: 0;
}
.page_issue_archive .issues_archive > li {
  padding: 26px 0;
  border-bottom: 1px solid var(--jpi-line);
}
.page_issue_archive .issues_archive > li:first-child { padding-top: 6px; }
.page_issue_archive .issues_archive > li:last-child { border-bottom: 0; }

.obj_issue_summary {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 26px;
}
.obj_issue_summary:before,
.obj_issue_summary:after { content: none; display: none; }
.obj_issue_summary .cover {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: start;
  float: none;
  width: auto;
  margin: 0;
}
.obj_issue_summary .series {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jpi-accent);
}
.obj_issue_summary .title {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(255,255,255,.9);
}
.obj_issue_summary .title:hover,
.obj_issue_summary .title:focus { color: var(--jpi-accent); }
.obj_issue_summary .description {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  contain: size;
  overflow: hidden;
  min-height: 120px;
  color: rgba(255,255,255,.62);
}
.obj_issue_summary .description:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(rgba(8,32,25,0), var(--jpi-card) 90%);
  pointer-events: none;
}
@media (max-width: 575px) {
  .obj_issue_summary { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .obj_issue_summary .cover { grid-column: 1; grid-row: auto; max-width: 160px; margin-bottom: 16px; }
  .obj_issue_summary .series,
  .obj_issue_summary .title,
  .obj_issue_summary .description { grid-column: 1; grid-row: auto; }
  /* urutan sama dengan desktop: seri di atas judul (sumber HTML: judul dulu) */
  .obj_issue_summary .series { order: 1; }
  .obj_issue_summary .title { order: 2; }
  .obj_issue_summary .description { order: 3; }
}

/* ==========================================================================
   86. Blok Current Issue dan blok Articles jomplang — "blok current issue
   dengan artikel lumayan jomplang"

   Terukur: dari bawah sampul ke teks "Articles" = 116px, sementara jarak
   di dalam blok Current Issue cuma 20px (judul section → judul issue →
   sampul). Tiga sumber yang bertumpuk:
     26px  .heading:after — spacer baris baru selebar 100% (section 23-an)
           yang dulu memaksa tombol Selengkapnya/Published turun ke baris
           sendiri. Sejak section 82 tombol itu ada di dalam .jpi-desc-col,
           spacer tinggal menambah satu baris kosong + row-gap 26px.
     60px  margin-top .sections — dari base theme lewat selector
           ".obj_issue_toc .sections:not(:first-child)" (spesifisitas
           0,3,0; :not() ikut dihitung, jadi rule 0,2,0 biasa kalah).
     30px  padding-top .section pertama (base theme).
   Spacer dibuang, padding section pertama dinolkan, margin disetel 48px
   dengan selector yang sama persis dengan base theme. Hasil: bawah sampul
   → "Articles" 48px — tetap jelas lebih besar dari jarak di dalam blok
   (20px), jadi terbaca sebagai section baru, tapi tidak lagi terputus.
   ========================================================================== */
.obj_issue_toc .heading:after { content: none; display: none; }
.obj_issue_toc .sections:not(:first-child) { margin-top: 48px; }
.obj_issue_toc .sections > .section:first-child { margin-top: 0; padding-top: 0; }

/* ==========================================================================
   87. Garis sangat tipis pemisah blok Current Issue dan blok Articles —
   "tambahkan garis sangat tipis untuk memisahkan kedua blok"

   Jarak 48px dari section 86 dipertahankan persis (sudah dinilai
   "proporsional"), hanya dibelah dua: 24px margin di atas garis, 24px
   padding di bawahnya — garis jatuh tepat di tengah celah. 1px, putih 7%
   — lebih samar dari var(--jpi-line) (10%) yang dipakai garis bawah judul
   section, supaya pemisah blok tidak bersaing dengan garis judul
   "Articles" tepat di bawahnya.
   ========================================================================== */
.obj_issue_toc .sections:not(:first-child) {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* ==========================================================================
   88. Runut (breadcrumb) — halaman terakhir ("Archives", judul artikel,
   dll.) hampir tak terlihat

   "tertulis: Home / Archives. tulisan archives ini hitam, sehingga hampir
   tidak terlihat karena bg hijau tua"

   Base theme: ".cmp_breadcrumbs .current" dan ".separator" berwarna
   rgba(0,0,0,.54) — hitam transparan untuk latar putih lama, tak pernah
   ikut diganti saat tema gelap (section 64). Link "Home" sudah putih 42%
   dari rule tema ini, jadi hanya dua itu yang tenggelam.

   Hierarki dibalik jadi benar: halaman sekarang paling terang (74%,
   tebal 600 — "Anda di sini"), link sebelumnya redup 42% dengan hover
   kuning aksen, garis miring paling samar (25%) karena cuma pemisah.
   Berlaku di semua halaman yang punya runut, bukan hanya Archives.
   ========================================================================== */
.cmp_breadcrumbs .current,
.cmp_breadcrumbs .current span { color: var(--jpi-ink); font-weight: 600; }
.cmp_breadcrumbs .separator { color: rgba(255,255,255,.25); opacity: 1; } /* opacity .5 lama (baris ~312) membuatnya efektif 12% */
.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus { color: var(--jpi-accent); }
/* Garis bawah runut selebar kartu, bukan selebar teksnya — "di bawahnya
   juga ada garis yang panjangnya mengikuti runut itu. coba lebarkan saja
   sepanjang kartu". Base theme menjadikan nav ini inline-block, jadi
   border-bottom (baris ~305) hanya membungkus teks. */
.cmp_breadcrumbs { display: block; }

/* ==========================================================================
   89. Logo di puncak sidebar bisa diklik → Home
   "ketika klik gambar logo, ia tidak ada link apa apa. rubah menjadi home"

   Akar masalah: logo yang tampil selama ini BUKAN gambar sungguhan,
   melainkan background-image pada .pkp_head_wrapper::before (section
   27 → 54 → 56). Pseudo-element tidak bisa menjadi link — itulah
   sebabnya klik tidak berbuat apa-apa. Logo asli OJS (<a class="is_img">
   berisi <img>, href ke beranda) sebenarnya sudah ada di DOM, hanya
   disembunyikan: .pkp_site_name_wrapper { display:none } (baris ~1588).

   Dibalik: pseudo-element dimatikan, logo asli ditampilkan di tempat
   yang persis sama — 268x268, margin "0 auto 6px" sama dengan ::before
   lama (section 56 + 60), jadi terpusat di layar sempit juga. Terukur
   di 1280px: img 16,16 268x268 = posisi ::before lama; tinggi header
   316 dan posisi menu 306 identik sebelum/sesudah. Di 400px tinggi
   header 306 identik.

   Link bawaan OJS mengarah ke index.php/index, yang dialihkan server
   (302) ke beranda jurnal (index.php/jpi) — jadi tujuan klik memang Home.

   .is_img membawa padding 10px atas-bawah dari rule lama; dinolkan
   supaya gambar tidak menyusut ke 248px.
   ========================================================================== */
.pkp_head_wrapper::before { content: none !important; display: none !important; }
.pkp_head_wrapper .pkp_site_name_wrapper {
  display: block;
  flex: 0 0 auto;
  width: 268px;
  height: 268px;
  margin: 0 auto 6px;
  padding: 0;
}
.pkp_head_wrapper .pkp_site_name {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.pkp_head_wrapper .pkp_site_name .is_img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}
.pkp_head_wrapper .pkp_site_name .is_img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: none;
}

/* ==========================================================================
   90. "View All Issues" jadi label di samping PUBLISHED — bentuk sama,
   warna hijau terang, bukan kuning

   "view all issues ada di paling bawah di laman utama. bisa tidak
   dipindahkan menjadi tombol di samping PUBLISHED, sama bentuknya, hanya
   warnanya hijau terang, tidak kuning."

   Markup: link dihapus dari indexJournal.tpl (override baru), dirender di
   .jpi-issue-actions (issue_toc.tpl) hanya bila $requestedPage == index.
   Bentuk (tinggi 24px, 11px, pill, padding 0 10px) otomatis ikut rule
   anak .jpi-issue-actions di section 82; di sini hanya warna + gaya teks
   disamakan dengan .published (huruf kapital, tebal 600, letter-spacing),
   dan pola warnanya dicerminkan dari pill kuning: latar muda + garis
   sedikit lebih tua + teks hijau tua. Ikon fa-th-large (kisi) menandai
   "kumpulan issue", setara ikon kalender pada Published.
   ========================================================================== */
.obj_issue_toc .jpi-desc-col .jpi-issue-actions .jpi-all-issues {
  background: #d9f5e8;
  border: 1px solid #9fdcc0;
  color: var(--jpi-primary-dark);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  transition: background .15s ease;
}
.obj_issue_toc .jpi-desc-col .jpi-issue-actions .jpi-all-issues:before {
  content: "\f009"; /* th-large */
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: 5px;
  opacity: .75;
}
.obj_issue_toc .jpi-desc-col .jpi-issue-actions .jpi-all-issues:hover,
.obj_issue_toc .jpi-desc-col .jpi-issue-actions .jpi-all-issues:focus {
  background: #bfeeda;
  color: var(--jpi-primary-dark);
  text-decoration: none;
}

/* ==========================================================================
   91. Ketiga label ditulis huruf biasa (kapital awal kata), tidak lagi
   KAPITAL SEMUA — "published dan view all issues terlihat lebih besar
   daripada selengkapnya. mungkin karena selengkapnya tidak kapital"

   Tinggi kotaknya sebenarnya sudah sama (24px, section 82), tapi huruf
   kapital semua memenuhi seluruh tinggi-x hingga tinggi kapital, jadi
   pada ukuran 11px yang sama PUBLISHED/VIEW ALL ISSUES tampak lebih besar
   dan lebih berat dibanding "Selengkapnya". text-transform dari
   .obj_issue_toc .published (baris ~356) dan section 90 dinetralkan;
   teks sumbernya sendiri sudah berkapital awal ("Published", "View All
   Issues"). Letter-spacing juga disamakan dengan Selengkapnya.
   ========================================================================== */
.obj_issue_toc .jpi-desc-col .jpi-issue-actions > *,
.obj_issue_toc .jpi-desc-col .jpi-issue-actions .published,
.obj_issue_toc .jpi-desc-col .jpi-issue-actions .jpi-all-issues {
  text-transform: none;
  letter-spacing: .02em;
}
/* Selengkapnya diberi ikon di kiri seperti dua label lainnya (kalender,
   kisi) — "selengkapnya juga tidak ada icon di sampingnya". Ikon baris
   teks (fa-align-left) = "teks deskripsi"; panah buka/tutup (:after) tetap
   di kanan sebagai penanda bisa dibuka. */
.obj_issue_toc .jpi-desc-col .jpi-more:before {
  content: "\f036"; /* align-left */
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: 5px;
  opacity: .75;
}

/* ==========================================================================
   92. Sidebar dikalibrasi ulang supaya berpadu dengan laman utama —
   "lihat juga sidebar di kiri itu. apakah pewarnaannya cocok? kalau masih
   kurang berpadu dengan laman utama, revisi lagi"

   Konsep section 64/68 dipertahankan (sidebar = "hitam yang hijau",
   laman utama = hijau tua); yang diperbaiki tiga hal terukur (HSL):

   1. Urutan kedalaman terbalik. Badan sidebar #0F1713 (L 7.5%) LEBIH
      TERANG dari latar halaman #051712 (L 5.5%) tepat di sebelahnya dan
      hampir setara kartu #082019 (L 7.8%) — sidebar terbaca sebagai
      lempengan abu terpisah, bukan bingkai. Kini sidebar paling gelap:
      sidebar 4.7% < latar 5.5% < kartu 7.8%.
   2. Tiga nada dalam satu kolom: kepala/kaki #080D0A (4.1%), badan
      #0F1713 (7.5%) — terlihat berbelang. Kini badan 4.7% dan kepala/kaki
      3.5% — hampir satu permukaan; batasnya tetap dari bayangan section 69.
   3. Rona melenceng: sidebar 144–150°, laman utama 163°. Kini 162–165°,
      satu keluarga, saturasi tetap jauh di bawah laman utama pada
      kegelapan setinggi ini sehingga tetap terbaca "hitam".
   Hover/submenu (#0B221B, L 8.8%) sengaja dekat warna kartu — keadaan
   aktif terasa satu bahan dengan konten di kanan.

   Tautan blok Information (For Readers dst.) #0F6E56 di atas sidebar:
   kontras ~2.9:1, nyaris tak terbaca → putih 62%, hover kuning aksen
   (pola tautan yang sama dengan laman utama).

   Scrollbar sidebar tampil abu terang bawaan browser (strip di tepi
   kanan menu) → tipis dan senada.
   ========================================================================== */
:root {
  --jpi-sidebar-bg: #06120F;       /* was #0F1713 */
  --jpi-sidebar-bg-deep: #040E0B;  /* was #080D0A */
  --jpi-sidebar-bg-alt: #0B221B;   /* was #1A251F */
  --jpi-sidebar-line: rgba(255,255,255,.07); /* was .08 */
}
.pkp_structure_sidebar .pkp_block a { color: rgba(255,255,255,.62); }
.pkp_structure_sidebar .pkp_block a:hover,
.pkp_structure_sidebar .pkp_block a:focus { color: var(--jpi-accent); }
.pkp_structure_sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}
.pkp_structure_sidebar::-webkit-scrollbar { width: 6px; }
.pkp_structure_sidebar::-webkit-scrollbar-track { background: transparent; }
.pkp_structure_sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

/* ==========================================================================
   93. Halaman artikel — "beberapa tidak presisi. ada garis liar juga"

   Terukur (1280px), tepi konten = 355–1210 (breadcrumb, judul):

   a) Garis liar: .row (base theme) punya border-top & border-bottom #ddd
      — abu terang untuk latar putih lama — dan margin -30px kiri-kanan,
      jadi kedua garis itu menjulur 30px melewati tepi konten di tiap sisi
      (325–1240). Border & margin negatif dibuang.
   b) Kotak kanan (.entry_details) ikut melebar sampai x=1240 karena
      margin negatif yang sama → kini berakhir tepat di 1210.
   c) Kolom kiri (penulis/keywords/abstrak) mulai di x=377, bukan 355:
      .row sudah flex (gap 26px), dan clearfix lama base theme (::before/
      ::after, content " ") ikut jadi flex item 0px — tiap satu menambah
      satu gap: 325 + 26 + 26 = 377. Kasus yang sama persis dengan .heading
      di beranda (section 23). Clearfix dimatikan.
   d) Judul artikel tidak punya garis bawah + aksen kuning seperti judul
      halaman lain ("Archives", "Current Issue") — selama ini garis #ddd
      .row (butir a) yang kebetulan berperan sebagai garis bawah judul
      (section 50 bahkan mengukur "dari garis di bawah judul"). Diberi
      garis & aksen yang sama persis dengan rule section 5.
   e) Nama penulis dimulai 28px di bawah (padding !important, blok (e)
      section 47 — dulu untuk menjauhi garis #ddd). Kini disejajarkan
      dengan TEPI ATAS GAMBAR SAMPUL di kotak kanan: 15px (terukur nama
      263.4 = gambar 263.2).
   f) Label "DOWNLOAD" adalah satu ::before berisi ikon+teks ("\f019
      DOWNLOAD") — ikon menempel ke teks tanpa jarak, 11px sementara label
      lain (Published, Issue) 12px. Dipecah: ikon di .item.galleys::before
      (absolut, tepi kiri 16px = tepi label lain), teks di ul::before
      (baris sendiri — ul-nya flex, jadi flex-basis 100%), jarak 7px setara
      margin ikon label lain.
   g) Ikon label (Published, Issue) & ikon penulis hijau #0F6E56 — nyaris
      hilang di kotak gelap. Disamakan kuning aksen, seperti ikon meta di
      daftar artikel (section 84).
   ========================================================================== */
.obj_article_details .row {
  margin-top: 6px;
  margin-left: 0;
  margin-right: 0;
  border-top: 0;
  border-bottom: 0;
}
.obj_article_details .row:before,
.obj_article_details .row:after { content: none; display: none; }

.obj_article_details .page_title {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--jpi-line);
}
.obj_article_details .page_title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 58px;
  height: 3px;
  background: var(--jpi-accent);
  border-radius: 2px;
}

.obj_article_details .main_entry .item.authors { padding-top: 15px !important; }

.obj_article_details .entry_details .item.galleys { position: relative; }
.obj_article_details .entry_details .item.galleys:before {
  content: "\f019";
  position: absolute;
  left: 16px;
  font-family: FontAwesome;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--jpi-accent);
}
.obj_article_details .entry_details .item.galleys > ul { flex-wrap: wrap; }
.obj_article_details .entry_details .item.galleys > ul:before {
  content: "Download";
  display: block;
  flex: 0 0 100%;
  padding-left: 19px;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.obj_article_details .entry_details .item .label:before,
.obj_article_details .main_entry .item.authors .name:before { color: var(--jpi-accent); }

/* ==========================================================================
   94. Label KEYWORDS menempel ke garis di atasnya — "keywordnya terlalu
   mepet ke garis atas. buat jarak sedikit saja"

   Terukur: garis atas .item.keywords → label 1px (padding-top 0), padahal
   .item.abstract dengan garis yang sama → label 17px (padding-top 16px).
   Disamakan dengan abstrak, supaya dua section berpola sama.
   ========================================================================== */
.obj_article_details .main_entry .item.keywords { padding-top: 16px; }

/* ==========================================================================
   95. Sampul issue di beranda dipaksa ngotak — "apakah anda tidak merasa,
   bahwa gambar issue di laman utama itu bukan ukuran sepenuhnya? artinya
   ia dipaksa agak ngotak?"

   Benar. Terukur: gambar asli 600x848 (rasio 0.708, potret A4), tampil
   210x250 (rasio 0.84) — diregangkan ~19% ke samping. Penyebab: lebar
   dikunci width:100% kolom sampul (210px, section 5/23), sementara base
   theme (.obj_issue_toc .cover img) masih membawa max-height:250px —
   tinggi alaminya 296px dipotong jadi 250, dan object-fit bawaan (fill)
   memaksa gambar mengisi kotak yang salah rasio itu. Kasus yang sama
   sudah diperbaiki untuk halaman Archives di section 70, belum di sini.

   max-height dilepas: 210x296.1 (rasio 0.709). Kolom teks dan ketiga
   label ikut menyesuaikan sendiri karena section 83 mengikat tingginya ke
   baris sampul — bawah label tetap = bawah gambar (507.6 = 507.6).
   ========================================================================== */
.obj_issue_toc .cover img {
  max-height: none;
  height: auto;
}

/* ==========================================================================
   96. Tablet & ponsel (< 992px): sidebar jadi LACI + bilah atas ☰
   — pola tema admin (AdminLTE / CodeIgniter admin)

   "kalau di layar lebar, tetapkan seperti sekarang. kalau ia di tablet
   atau phone ... sidebar itu tetap seperti itu, dengan icon tiga titik
   atau tiga garis, kalau diklik maka sidebar ini muncul"

   Sebelumnya di bawah 992px ketiga bagian sidebar (logo / menu / footer)
   kembali ke aliran dokumen biasa (section 33: position:static): logo
   306px memenuhi layar pertama ponsel, menu terlempar ke dasar halaman
   (y=1360 di 400px) di bawah seluruh konten, tanpa tombol apa pun.

   Kini, hanya di bawah 992px (≥992px tidak disentuh sama sekali):
   - .jpi-topbar (dibangun jpi.js initDrawer): tetap di atas, 56px —
     tombol ☰, logo kecil, nama jurnal (diambil dari alt logo).
   - Ketiga bagian sidebar diberi posisi PERSIS seperti desktop (section
     33/52: kepala 306px di atas, footer 66px di bawah, menu di antaranya,
     lebar 300px) lalu digeser keluar layar ke kiri. body.jpi-drawer-open
     mengembalikannya — sidebar yang sama, bukan salinan.
   - Tirai gelap di belakang laci; klik tirai / Esc / tombol ✕ menutup.
     Tombol ✕ menempel di luar tepi kanan laci (di atas tirai), supaya
     tidak menutupi pojok bingkai logo.
   - visibility:hidden saat tertutup, supaya tautan di laci yang tidak
     terlihat tidak ikut kena Tab keyboard.
   - Layar pendek (≤640px tinggi, mis. ponsel miring): logo laci 150px,
     supaya menu tidak tergencet tinggal beberapa piksel.
   ========================================================================== */
.jpi-topbar,
.jpi-drawer-overlay,
.jpi-drawer-close { display: none; }

@media (max-width: 991.98px) {
  :root { --jpi-topbar-h: 56px; --jpi-drawer-w: 300px; --jpi-drawer-head: 306px; --jpi-drawer-foot: 66px; }

  /* -- bilah atas -- */
  .jpi-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--jpi-topbar-h);
    padding: 0 12px;
    background: var(--jpi-sidebar-bg-deep);
    box-shadow: 0 6px 10px -6px rgba(0,0,0,.55);
    z-index: 100;
  }
  .jpi-drawer-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--jpi-sidebar-line);
    border-radius: 8px;
    cursor: pointer;
  }
  .jpi-drawer-toggle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--jpi-ink);
  }
  .jpi-drawer-toggle:hover,
  .jpi-drawer-toggle:focus-visible { background: var(--jpi-sidebar-bg-alt); }
  .jpi-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--jpi-ink);
    text-decoration: none;
  }
  .jpi-topbar-brand img { flex: 0 0 auto; width: 38px; height: 38px; object-fit: contain; }
  .jpi-topbar-brand span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
  }
  .jpi-topbar-brand:hover,
  .jpi-topbar-brand:focus { color: var(--jpi-accent); text-decoration: none; }

  .pkp_structure_page { padding-top: var(--jpi-topbar-h); }

  /* -- laci: tiga bagian sidebar, posisi sama seperti desktop -- */
  .pkp_structure_head,
  .pkp_structure_sidebar,
  .pkp_structure_footer_wrapper {
    position: fixed;
    left: 0;
    width: var(--jpi-drawer-w);
    margin: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .pkp_structure_head { top: 0; height: var(--jpi-drawer-head); z-index: 121; }
  .pkp_structure_footer_wrapper { bottom: 0; z-index: 121; }
  .pkp_structure_sidebar {
    top: var(--jpi-drawer-head);
    bottom: var(--jpi-drawer-foot);
    height: auto;
    overflow-y: auto;
    border-radius: 0;
    z-index: 120;
  }
  body.jpi-drawer-open .pkp_structure_head,
  body.jpi-drawer-open .pkp_structure_sidebar,
  body.jpi-drawer-open .pkp_structure_footer_wrapper {
    transform: none;
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
    box-shadow: 10px 0 28px -8px rgba(0,0,0,.6);
  }

  .pkp_structure_content { margin-left: 0; padding-left: 0; width: auto; }

  /* -- tirai -- */
  .jpi-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
    z-index: 110;
  }
  body.jpi-drawer-open .jpi-drawer-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s;
  }
  body.jpi-drawer-open { overflow: hidden; }

  /* -- tombol tutup, di luar tepi kanan laci -- */
  .jpi-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    left: calc(100% + 10px);
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--jpi-sidebar-bg-deep);
    border: 1px solid var(--jpi-sidebar-line);
    border-radius: 50%;
    color: var(--jpi-ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .jpi-drawer-close:hover,
  .jpi-drawer-close:focus-visible { color: var(--jpi-accent); }
}

@media (max-width: 991.98px) and (max-height: 640px) {
  :root { --jpi-drawer-head: 188px; }
  .pkp_head_wrapper .pkp_site_name_wrapper { width: 150px; height: 150px; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .pkp_structure_head,
  .pkp_structure_sidebar,
  .pkp_structure_footer_wrapper,
  .jpi-drawer-overlay { transition: none !important; }
}
/* Kartu konten di tablet/ponsel menempel ke kedua tepi layar (x=0, lebar
   penuh, sudut membulat 10px beradu dengan tepi). Di desktop kartu
   berjarak 20px dari sidebar & tepi kanan — di sini diberi napas yang sama
   polanya: 16px di tablet, 10px di ponsel (ruang lebih sempit). */
@media (max-width: 991.98px) {
  .pkp_structure_content { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 575.98px) {
  .pkp_structure_content { padding-left: 10px; padding-right: 10px; }
}
/* Ponsel miring (tinggi ≤480px, mis. 740x360): dengan logo 150px, menu
   laci tinggal 106px (terukur) — logo diperkecil lagi ke 96px supaya menu
   dapat ruang ~160px. Menu tetap bisa di-scroll di dalam laci. */
@media (max-width: 991.98px) and (max-height: 480px) {
  :root { --jpi-drawer-head: 134px; }
  .pkp_head_wrapper .pkp_site_name_wrapper { width: 96px; height: 96px; }
}

/* ==========================================================================
   97. Tiga perbaikan susulan tablet/ponsel + satu desktop

   a) Meta daftar artikel "masih berserakan untuk phone". Terukur di
      400px: baris terlipat jadi dua — baris kedua dimulai dengan PDF yang
      masih membawa padding-left 14px + garis pemisah (:before) di
      depannya (garis nyasar di awal baris), dan DOI terlempar ke ujung
      kanan (margin-left:auto, section 84). Di <576px: penulis satu baris
      sendiri; halaman · PDF · view · DOI rata kiri di baris berikutnya;
      garis pemisah diganti jarak (gap 16px) — lipatan baris jadi rapi di
      lebar berapa pun. Muat satu baris di 400px maupun 360px.

   b) Desktop: "ada beberapa terpotong ... tetap tertutupi oleh footer".
      Section 52 memberi menu sidebar bottom:24px (tinggi footer waktu
      itu), padahal footer kini 66px (logo + nama jurnal 2 baris, section
      63) — 42px bawah menu tertutup footer, termasuk saat di-scroll
      habis. Disamakan dengan tinggi footer sebenarnya.

   c) Halaman artikel <992px: kotak Download (sampul, PDF, Published,
      Issue) muncul langsung setelah judul, sebelum penulis/keyword/
      abstrak — dari rule mobile-first lama (.entry_details order:1,
      .main_entry order:2; baru dibalik di ≥992px). "pindahkan ke paling
      bawah ... setelah apa yang ada di laman utamanya". Urutan dibalik
      untuk <992px, diberi jarak 28px di atas kotak.
   ========================================================================== */
@media (max-width: 575.98px) {
  .obj_article_summary .jpi-article-meta { gap: 8px 16px; }
  .obj_article_summary .jpi-meta-item { padding: 0; }
  .obj_article_summary .jpi-meta-item:before { display: none; }
  .obj_article_summary .jpi-meta-authors { flex: 0 0 100%; }
  .obj_article_summary .jpi-meta-doi { margin-left: 0; }
}

@media (min-width: 992px) {
  .pkp_structure_sidebar { bottom: 66px; }
}

@media (max-width: 991.98px) {
  .obj_article_details .main_entry { order: 1; }
  .obj_article_details .entry_details { order: 2; margin-top: 28px; }
}

/* ==========================================================================
   98. Sampul issue di beranda rata kiri di layar sempit, seperti Archives
   — "di beranda, gambar issue sebaiknya rata kiri juga, seperti di arsip"

   Terukur di 400px: beranda margin "0 auto" (section 4-an) → sampul di
   tengah (x=103, 190px); Archives (section 85) rata kiri sejajar teks
   (x=27 = tepi kiri teks), 160px, jarak bawah 16px. Disamakan persis
   dengan Archives. Hanya <768px, saat sampul & teks bertumpuk — di atas
   itu keduanya sudah bersisian dengan sampul di kiri.
   ========================================================================== */
@media (max-width: 767.98px) {
  .obj_issue_toc .heading .cover {
    margin: 0 0 16px;
    max-width: 160px;
  }
}

/* ==========================================================================
   99. Laci lebih ramping — "yang muncul ketika klik icon tiga itu, 40%
   dari laman muncul sidebarnya. yang sekarang, mungkin sekitar 70%"

   Lebar laci = 40% layar, tapi tidak kurang dari 240px. Kenapa ada batas
   bawah (terukur): menu terpanjang "SUBMISSION GUIDELINES" butuh ±281px
   satu baris (teks 183 + indent 16/12 + tombol siku 46 + padding 24). 40%
   dari ponsel 400px = 160px → ruang teks ±60px, sedangkan kata
   "SUBMISSION" saja ±85px — kata terpotong/meluber. Di 240px tiap menu
   panjang terlipat rapi jadi 2 baris, tiap kata utuh.
     tablet 800px → 320px (40%) · 600px → 240px (40%)
     ponsel 400px → 240px (60%, dulu 75%) · 360px → 240px (67%, dulu 83%)
   Logo laci mengikuti lebar laci (maks 268px, laci dikurangi padding 32px)
   dan tinggi kepala laci ikut logo (+38px) — dulu keduanya angka tetap
   (268 / 306) karena laci selalu 300px. Aturan layar pendek (section 96)
   ditulis ulang dengan min() supaya tidak melebihi lebar laci.
   ========================================================================== */
@media (max-width: 991.98px) {
  :root {
    --jpi-drawer-w: max(40vw, 240px);
    --jpi-drawer-logo: min(268px, calc(var(--jpi-drawer-w) - 32px));
    --jpi-drawer-head: calc(var(--jpi-drawer-logo) + 38px);
  }
  .pkp_head_wrapper .pkp_site_name_wrapper {
    width: var(--jpi-drawer-logo);
    height: var(--jpi-drawer-logo);
  }
}
@media (max-width: 991.98px) and (max-height: 640px) {
  :root { --jpi-drawer-logo: min(150px, calc(var(--jpi-drawer-w) - 32px)); }
}
@media (max-width: 991.98px) and (max-height: 480px) {
  :root { --jpi-drawer-logo: min(96px, calc(var(--jpi-drawer-w) - 32px)); }
}

/* Judul issue di halaman Archives masih Noto Sans (@font-heading base
   theme, issue_summary.less) — satu-satunya yang lolos dari penyeragaman
   Montserrat di section 49. */
.obj_issue_summary .title { font-family: 'Montserrat', sans-serif; }

/* ==========================================================================
   100. Beranda ala Noûs (Wiley) — deskripsi singkat, Journal Metrics,
   tab Articles (Most Recent | Most Read), baris pembuka tiap artikel

   "kita bisa contohi kontennya sebagian. pertama, deskripsi singkat dari
   jurnal, di bawahnya ada garis tipis, journal metrics ... berbentuk kotak
   kotak ringan, di bawahnya ada garis tipis lagi, baru artikel, di bawahnya
   ada dua tab"

   Urutan (indexJournal.tpl): .jpi-intro [deskripsi → garis → Journal
   Metrics → garis] → Current Issue → Articles bertab (issue_toc.tpl).
   Garis pemisah memakai nada yang sama dengan pemisah blok section 87
   (putih 7%), judul "Journal Metrics" memakai gaya judul section yang sama
   dengan "Current Issue"/"Articles" (garis tipis + aksen kuning 58px).
   Angka metrik diberi warna aksen — satu-satunya penekanan di kotak;
   kotaknya sendiri "ringan": latar putih 4% + garis tipis.
   ========================================================================== */
.jpi-intro { margin: 0 0 28px; }
.jpi-tagline {
  margin: 0;
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: var(--jpi-fs-body, 15.5px);
  line-height: 1.7;
  color: var(--jpi-ink);
}
.jpi-tagline em { font-style: italic; font-weight: 600; }

.jpi-metrics {
  padding: 24px 0 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.jpi-metrics .jpi-metrics-title {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--jpi-line);
  font-size: var(--jpi-fs-section, 18px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--jpi-ink);
}
.jpi-metrics .jpi-metrics-title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 58px;
  height: 3px;
  background: var(--jpi-accent);
  border-radius: 2px;
}
.jpi-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jpi-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 16px 12px;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--jpi-line);
  border-radius: 8px;
}
.jpi-metric-value {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--jpi-accent);
}
.jpi-metric-label {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.58);
}

/* -- tab Articles -- */
.jpi-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--jpi-line);
}
.jpi-tab {
  margin: 0 0 -1px;
  padding: 9px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--jpi-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: rgba(255,255,255,.62);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.jpi-tab:hover,
.jpi-tab:focus-visible { color: var(--jpi-ink); background: rgba(255,255,255,.09); }
.jpi-tab[aria-selected="true"] {
  background: var(--jpi-primary);
  border-color: var(--jpi-primary);
  color: #fff;
}
.jpi-tabpanel[hidden] { display: none; }
.jpi-empty { margin: 8px 0; color: var(--jpi-muted); font-size: 14px; }

/* -- baris pembuka artikel: RUBRIK | Open Access | Published tgl -- */
.jpi-article-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  margin: 0 0 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.58);
}
.jpi-kicker-item { position: relative; padding: 0 10px; }
.jpi-kicker-item:first-child { padding-left: 0; }
.jpi-kicker-item:not(:first-child):before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: rgba(255,255,255,.18);
}
.jpi-kicker-section { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.jpi-kicker-oa { color: var(--jpi-accent); font-weight: 600; }
.jpi-kicker-oa i { margin-right: 5px; }
/* Ponsel: baris pembuka artikel terlipat 2 baris di 400px (terukur 36px),
   baris kedua diawali garis pemisah nyasar — kasus sama dengan meta di
   section 97a. Garis diganti jarak. */
@media (max-width: 575.98px) {
  .jpi-article-kicker { gap: 4px 14px; }
  .jpi-kicker-item { padding: 0; }
  .jpi-kicker-item:before { display: none; }
}

/* ==========================================================================
   101. Hak cipta ringkas di footer sidebar — "copyrightnya bukan disitu,
   tapi di footer sidebar itu. kalimatnya juga diperpendek dan sizenya
   diperkecil agar selaras dan tidak terlalu menumpuk"

   Satu paragraf kecil di bawah logo + nama jurnal Paranawa: 10px (lebih
   kecil dari teks nama jurnal di atasnya, supaya jelas berperan sebagai
   catatan kaki), redup 38%, garis tipis pemisah dari baris logo.

   Tinggi footer kini tidak lagi 66px tetap (dan berbeda-beda menurut lebar
   laci 240-320px), padahal menu sidebar dipotong tepat di atas footer
   (section 96 laci, 97b desktop). jpi.js mengukur tinggi footer sungguhan
   ke --jpi-foot-h; 66px hanya cadangan bila skrip tidak jalan.
   ========================================================================== */
.pkp_structure_footer .jpi-copyright {
  margin: 6px 0 0;
  padding: 5px 0 0;
  border-top: 1px solid var(--jpi-sidebar-line);
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255,255,255,.38);
}
.pkp_structure_footer .jpi-copyright a {
  color: rgba(255,255,255,.55);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pkp_structure_footer .jpi-copyright a:hover,
.pkp_structure_footer .jpi-copyright a:focus { color: var(--jpi-accent); }

@media (min-width: 992px) {
  .pkp_structure_sidebar { bottom: var(--jpi-foot-h, 66px); }
}
@media (max-width: 991.98px) {
  .pkp_structure_sidebar { bottom: var(--jpi-foot-h, var(--jpi-drawer-foot)); }
}

/* ==========================================================================
   102. Menu sidebar sedikit lebih terang dari kepala (logo) & footer —
   "hijau hitam di menu hampir sama dengan hitam di area logo dan footer.
   mungkin sedikiiit saja terangnya agar distingsinya terlihat"

   Terukur: menu #06120F (L 4.7%) vs kepala/footer #040E0B (L 3.5%) — beda
   ±1%, nyaris tak terbedakan. Menu dinaikkan ke #071410 (L 5.3%, rona sama
   163°): selisih ±2% dari kepala/footer — terlihat sebagai dua bidang, tapi
   masih setingkat di bawah latar halaman #051712 (L 5.5%), jadi sidebar
   tetap terbaca sebagai bingkai (prinsip section 92).
   ========================================================================== */
:root { --jpi-sidebar-bg: #071410; }

/* ==========================================================================
   103. Logo JIP5 melebar (1417x905, rasio 1.57), bukan persegi lagi
   — "ganti logo dengan jpi5"

   Semua ukuran kepala sidebar selama ini mengandaikan logo PERSEGI:
   kotak logo 268x268 (section 89), menu desktop mulai di top:306px tetap
   (section 52), kepala laci = lebar logo + 38px (section 99). Logo
   melebar di kotak persegi = ruang kosong atas-bawah ±97px.

   Kini tinggi logo mengikuti rasio gambarnya sendiri (tinggi auto, lebar
   tetap mengikuti kolom), dan jpi.js mengukur tinggi kepala sidebar
   sungguhan ke --jpi-head-h — pola yang sama dengan --jpi-foot-h (section
   101). Menu desktop & laci mulai tepat di bawah kepala. Ganti logo
   berikutnya (rasio apa pun) tidak perlu menyentuh CSS lagi. 306px /
   --jpi-drawer-head hanya cadangan bila skrip tidak jalan.
   ========================================================================== */
.pkp_head_wrapper .pkp_site_name_wrapper,
.pkp_head_wrapper .pkp_site_name,
.pkp_head_wrapper .pkp_site_name .is_img { height: auto; }
.pkp_head_wrapper .pkp_site_name .is_img img { height: auto; }

@media (min-width: 992px) {
  .pkp_structure_sidebar { top: var(--jpi-head-h, 306px); }
}
@media (max-width: 991.98px) {
  .pkp_structure_head { height: auto; }
  .pkp_structure_sidebar { top: var(--jpi-head-h, var(--jpi-drawer-head)); }
  /* logo kecil di bilah atas: tinggi tetap, lebar mengikuti rasio */
  .jpi-topbar-brand img { width: auto; height: 32px; max-width: 64px; }
}

/* ==========================================================================
   104. Ikon meta daftar artikel sebagian hijau — "lis artikel di beranda
   masih dominan kuning. coba hijaukan beberapa. mungkin icon grafik dan
   icon sarjana"

   Terukur: 5 unsur kuning aksen per artikel (ikon Open Access + teksnya,
   ikon toga, ikon halaman, pill PDF, ikon grafik). Toga (penulis) dan
   grafik (tayangan) jadi hijau; Open Access, halaman, PDF tetap kuning —
   dua warna berselang, kuning tidak lagi mendominasi.
   Hijau #3DBF8C: rona sama dengan --jpi-primary (163°) tapi jauh lebih
   terang, karena #0F6E56 sendiri nyaris hilang di kartu #082019
   (kontras ±7:1 vs ±2.9:1).
   ========================================================================== */
:root { --jpi-green-bright: #3DBF8C; }
.obj_article_summary .jpi-meta-authors i,
.obj_article_summary .jpi-meta-views i { color: var(--jpi-green-bright); }

/* ==========================================================================
   105. Laman statis (Publication Ethics, Editorial Policies, Submission
   Guidelines) — "perbaiki laman-laman" (tampilan; isi diperbaiki terpisah
   lewat editor Static Pages)

   Isinya ditulis dulu di editor OJS untuk latar putih, dengan gaya inline
   pada tiap kotak bagian: latar rgba kuning/hijau/teal/abu berbeda-beda
   (Publication Ethics) atau "#" kosong, garis abu terang #d4d5d7, padding
   5px — di tema gelap jadi kotak warna-warni keruh, teks menempel ke garis.
   Tiap bagian juga diawali <div class="separator">&nbsp;</div> + margin
   judul bawaan → celah kosong ±50px di atas setiap judul. Tautan hijau tua
   #0F6E56 nyaris hilang di kartu gelap.

   Gaya inline hanya bisa dikalahkan !important — dipakai di sini khusus
   untuk properti yang ditulis inline (latar, garis, padding, margin).
   Semua kotak disamakan jadi kartu ringan yang sama dengan kotak Journal
   Metrics (section 100); judul laman diberi garis + aksen kuning seperti
   judul laman lain.

   CAKUPAN: hanya laman statis — `h2 + .page` (judul <h2> tepat sebelum
   <div class="page">, pola khas plugin Static Pages). Versi pertama memakai
   `.pkp_structure_main > .page` dan ikut mengenai Archives, artikel, issue,
   About (tautan runut & judul issue jadi hijau bergaris bawah, pemisah "/"
   runut hilang) — terukur, lalu dipersempit.
   ========================================================================== */
.pkp_structure_main > h2:first-of-type {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--jpi-line);
  font-size: var(--jpi-fs-section, 18px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--jpi-ink);
}
.pkp_structure_main > h2:first-of-type:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 58px;
  height: 3px;
  background: var(--jpi-accent);
  border-radius: 2px;
}
.pkp_structure_main > h2 + .page > div[style] {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--jpi-line) !important;
  border-radius: 10px;
  padding: 20px 24px !important;
  margin: 0 0 16px !important;
}
.pkp_structure_main > h2 + .page .separator { display: none; }
.pkp_structure_main > h2 + .page h2,
.pkp_structure_main > h2 + .page h3 {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--jpi-ink);
}
.pkp_structure_main > h2 + .page h4 {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--jpi-ink);
}
.pkp_structure_main > h2 + .page p { margin: 0 0 10px; }
.pkp_structure_main > h2 + .page p:last-child { margin-bottom: 0; }
.pkp_structure_main > h2 + .page ul,
.pkp_structure_main > h2 + .page ol { margin: 6px 0 10px; padding-left: 22px; }
.pkp_structure_main > h2 + .page li { margin: 0 0 6px; line-height: 1.65; }
.pkp_structure_main > h2 + .page li::marker { color: var(--jpi-green-bright, #3DBF8C); }
.pkp_structure_main > h2 + .page a {
  color: var(--jpi-green-bright, #3DBF8C);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pkp_structure_main > h2 + .page a:hover,
.pkp_structure_main > h2 + .page a:focus { color: var(--jpi-accent); }
.pkp_structure_main > h2 + .page table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.pkp_structure_main > h2 + .page td,
.pkp_structure_main > h2 + .page th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--jpi-line);
  text-align: left;
  vertical-align: middle;
}
.pkp_structure_main > h2 + .page img { max-width: 100%; height: auto; }
@media (max-width: 575.98px) {
  .pkp_structure_main > h2 + .page > div[style] { padding: 16px !important; }
}
/* Tanda ✓ / ✕ di tabel Section Policies (Editorial Policies) — pengganti
   gambar centang yang dulu di-hotlink dari server jurnal lain
   (journal.unnes.ac.id). Teks biasa: tak bergantung server luar. */
.pkp_structure_main > h2 + .page .jpi-check,
.pkp_structure_main > h2 + .page .jpi-uncheck {
  display: inline-block;
  width: 16px;
  margin-right: 6px;
  font-weight: 700;
  text-align: center;
}
.pkp_structure_main > h2 + .page .jpi-check { color: var(--jpi-green-bright, #3DBF8C); }
.pkp_structure_main > h2 + .page .jpi-uncheck { color: rgba(255,255,255,.35); }

/* ==========================================================================
   106. Tombol "View Indexing" di pojok kanan judul Journal Metrics — meniru
   tombol berbingkai "Understand Journal Metrics ›" Noûs.

   Diletakkan absolut di kanan baris judul (judul tetap selebar penuh
   dengan garis bawahnya utuh), tengah-vertikal terhadap teks judul.
   Pill bergaris hijau terang (--jpi-green-bright, pasangan ikon hijau
   section 104), terisi saat hover; ikon indeks di kiri, panah di kanan.
   ========================================================================== */
.jpi-metrics { position: relative; }
.jpi-metrics-link {
  position: absolute;
  top: 22px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(61,191,140,.55);
  border-radius: 999px;
  color: var(--jpi-green-bright, #3DBF8C);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.jpi-metrics-link:before {
  content: "\f002"; /* search */
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 11px;
}
.jpi-metrics-link:after {
  content: "\f105"; /* angle-right */
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 13px;
}
.jpi-metrics-link:hover,
.jpi-metrics-link:focus {
  background: var(--jpi-green-bright, #3DBF8C);
  color: var(--jpi-card);
  text-decoration: none;
}
/* Ponsel tersempit (360px): tombol menimpa judul 9px (terukur) —
   dipadatkan (huruf, jarak huruf, padding) supaya tetap satu baris. */
@media (max-width: 419.98px) {
  .jpi-metrics-link { gap: 4px; padding: 0 8px; font-size: 10px; letter-spacing: .02em; }
}
/* Layar 320px (ponsel sangat sempit): tetap menimpa judul 22px — tinggal
   ikon (kaca pembesar + panah). Teks "View Indexing" tetap ada untuk pembaca
   layar (font-size 0, bukan display:none). */
@media (max-width: 359.98px) {
  .jpi-metrics-link { font-size: 0; letter-spacing: 0; }
}

/* ==========================================================================
   107. Label Selengkapnya · Published · Download di tiap issue halaman
   Archives — "sama polanya seperti di current laman utama" (section 82,
   83, 90, 91). Download issue penuh dipindah ke sini dari beranda.

   Grid issue Archives (section 85) diberi baris ke-4 untuk label: sampul
   merentang 4 baris, deskripsi (1fr, contain:size) mengisi sisa, label di
   dasar kolom teks rata kanan — bawah label = bawah sampul, sama seperti
   beranda. Aturan .jpi-issue-actions umum (grid 3 kolom 44px, section
   43-47) dari rancangan lama beranda ditimpa eksplisit di sini.
   ========================================================================== */
.obj_issue_summary { grid-template-rows: auto auto 1fr auto; }
.obj_issue_summary .cover { grid-row: 1 / 5; }
.obj_issue_summary .jpi-issue-actions {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.obj_issue_summary .jpi-issue-actions > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 24px;
  min-height: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.obj_issue_summary .jpi-issue-actions .published {
  gap: 4px;
  background: var(--jpi-accent-soft);
  border: 1px solid var(--jpi-accent-line);
  color: var(--jpi-primary-dark);
}
.obj_issue_summary .jpi-issue-actions .published .label { font-weight: 700; }
.obj_issue_summary .jpi-issue-actions .published .label:before {
  content: "\f073"; /* calendar */
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: 5px;
  opacity: .75;
}
.obj_issue_summary .jpi-more:before {
  content: "\f036"; /* align-left */
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: 5px;
  opacity: .75;
}
.obj_issue_summary .jpi-more:after { font-size: 12px; margin-left: 6px; }

/* deskripsi dibuka / memang pendek */
.obj_issue_summary .description.is-open { contain: none; overflow: visible; min-height: 0; }
.obj_issue_summary .description.is-open:after,
.obj_issue_summary .description.jpi-fits:after { display: none; }

@media (max-width: 575.98px) {
  .obj_issue_summary .jpi-issue-actions { grid-column: 1; grid-row: auto; order: 4; }
}

/* ==========================================================================
   108. Garis pemisah antar-menu sidebar sama panjang — "garis yang
   memisahkan menu ... tidak sama panjangnya. kalau punya anak menu lebih
   pendek. coba luruskan saja semuanya"

   Terukur di 1280px: garis digambar pada <a> menu, dan pada menu ber-anak
   <a> hanya selebar 220px karena tombol siku 46px duduk di sampingnya —
   sedangkan menu biasa 266px. Beberapa menu ber-anak malah tidak bergaris
   sama sekali (ABOUT JOURNAL, SUBMISSION GUIDELINES: border 0).

   Garis dipindah ke BARIS menunya (<li>), yang selalu selebar penuh, dan
   dimatikan di <a> maupun tombol siku. Hasilnya satu garis seragam 266px
   untuk semua jenis menu; baris terakhir tanpa garis. Submenu tetap
   memakai garisnya sendiri (sudah selebar penuh).
   ========================================================================== */
.pkp_structure_sidebar #cssmenu > ul > li {
  border-bottom: 1px solid var(--jpi-sidebar-line);
}
/* Tanpa pengecualian :last-child: di live menu terbagi DUA blok (Home &
   Menu2), jadi mengosongkan baris terakhir tiap blok justru membuat garis
   hilang di tengah daftar (ABOUT JOURNAL & SUBMISSION GUIDELINES). */
.pkp_structure_sidebar #cssmenu > ul > li > a,
.pkp_structure_sidebar #cssmenu.jpi-js > ul > li > a,
.pkp_structure_sidebar #cssmenu.jpi-js > ul > li > .jpi-subtoggle {
  border-bottom: 0 !important;
}