@charset "UTF-8";
/* ==========================================================================
   TRIKONOMIKA — OJS 3.3 CUSTOM STYLESHEET
   Jurnal Ekonomi Trikonomika, FEB Universitas Pasundan
   --------------------------------------------------------------------------
   Version : 3.0  (Refined Navy & Gold)
   Theme   : OJS 3.3.x Default Theme
   Upload  : Settings > Website > Appearance > Journal Stylesheet
   --------------------------------------------------------------------------
   DAFTAR ISI
   00. Font & Reset
   01. Design Tokens (ubah warna di sini saja)
   02. Base Typography
   03. Layout Structure
   04. Breadcrumbs
   05. Header & Navigation
   06. Homepage
   07. Issue TOC & Article List
   08. Archives / Issue Grid
   09. Article Detail Page
   10. Sidebar & Custom Blocks
   11. Footer
   12. UI Components (button, form, pagination, table)
   13. Announcements & Search
   14. Responsive
   15. Motion & Accessibility
   16. Perbaikan Header, Jarak Mobile & Hamburger
   17. Halaman Reviewer (Boards of Reviewer)
   18. Halaman Editorial Team
   ========================================================================== */

/* ==========================================================================
   00. FONT & RESET
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Lora:ital,wght@0,500;0,600;0,700;1,500&display=swap");

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

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

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Brand --- */
  --primary: #003851; /* Navy Trikonomika */
  --primary-600: #00293c;
  --primary-800: #001d2b;
  --primary-300: #1d5e7c;
  --primary-100: #e6eef2;
  --primary-050: #f4f8fa;

  --gold: #c5a059; /* Aksen emas */
  --gold-600: #a8853f;
  --gold-300: #e2c996;
  --gold-100: #f7f0e2;

  /* --- Neutral --- */
  --white: #ffffff;
  --bg: #f5f7f9;
  --surface: #ffffff;
  --surface-alt: #f7f9fa;
  --text: #1c2b33;
  --text-soft: #5a6b75;
  --text-mute: #8a99a3;
  --border: #e4eaee;
  --border-strong: #d2dbe1;

  /* --- Typography --- */
  --font-ui: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 0.975rem;
  --fs-lg: 1.125rem;

  /* --- Shape & Depth --- */
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0, 41, 60, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 41, 60, 0.06), 0 1px 2px rgba(0, 41, 60, 0.04);
  --shadow-md:
    0 6px 18px rgba(0, 41, 60, 0.08), 0 2px 6px rgba(0, 41, 60, 0.04);
  --shadow-lg:
    0 18px 42px rgba(0, 41, 60, 0.12), 0 4px 12px rgba(0, 41, 60, 0.06);
  --shadow-gold: 0 10px 26px rgba(197, 160, 89, 0.3);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.28s var(--ease);
  --t-slow: 0.45s var(--ease);

  /* --- Canvas --- */
  --dot-bg: radial-gradient(rgba(0, 56, 81, 0.085) 1px, transparent 1px);
  --dot-size: 26px 26px;

  /* --- Layout --- */
  --wrap: 1300px;
  --gutter: 28px;
  --sidebar-w: 312px;
}

/* ==========================================================================
   02. BASE TYPOGRAPHY
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image: var(--dot-bg);
  background-size: var(--dot-size);
  background-attachment: fixed;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover,
a:focus {
  color: var(--gold-600);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0 0 0.8em;
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.2rem;
}
h4 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 1.35em;
  font-size: var(--fs-base);
}

/* Justify hanya untuk blok naratif panjang, bukan global.
   Tanpa pemenggalan suku kata (hyphens: none) — ditulis eksplisit dengan
   prefiks karena beberapa browser/tema mengaktifkannya sendiri.
   Berlaku sampai layar mobile juga (tidak ada override rata kiri). */
.main_entry p,
.item.abstract p,
.obj_issue_toc .description p,
.homepage_about p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  overflow-wrap: break-word; /* URL panjang tetap tidak menjebol kolom */
}

blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 3px solid var(--gold);
  color: var(--text-soft);
  font-style: italic;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 2.4em 0;
}

::selection {
  background: var(--gold-300);
  color: var(--primary-800);
}

/* Scrollbar halus (WebKit) */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--primary-050);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-300);
  border: 3px solid var(--primary-050);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* ==========================================================================
   03. LAYOUT STRUCTURE
   ========================================================================== */
.pkp_structure_page {
  max-width: none;
  padding: 0 0 10px;
}

/* Grid utama: konten + sidebar */
.pkp_structure_content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  width: 100% !important; /* menimpa lebar tetap dari tema default */
  max-width: var(--wrap);
  margin: 0 auto !important;
  padding: 0 20px;
  align-items: start;
}

.pkp_structure_content.has_sidebar {
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
}

/*
   PENTING: tema default OJS memakai "clearfix" ::before/::after pada beberapa
   container. Kalau container-nya diubah jadi grid/flex, pseudo-element itu
   ikut jadi grid item dan menggeser kolom. Semua dimatikan di sini.
*/
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after,
.obj_article_details .row::before,
.obj_article_details .row::after,
.obj_issue_toc .heading::before,
.obj_issue_toc .heading::after,
.issues_archive::before,
.issues_archive::after,
.cmp_article_list::before,
.cmp_article_list::after {
  content: none !important;
  display: none !important;
}

.pkp_structure_main {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 40px 44px !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.pkp_structure_sidebar {
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   04. BREADCRUMBS
   ========================================================================== */
.cmp_breadcrumbs {
  margin: 0 0 26px !important;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-mute);
}

.cmp_breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.cmp_breadcrumbs li {
  display: inline-flex;
  align-items: center;
}

.cmp_breadcrumbs a {
  color: var(--primary-300);
}
.cmp_breadcrumbs a:hover {
  color: var(--gold-600);
}

.cmp_breadcrumbs .separator {
  margin: 0 8px;
  color: var(--border-strong);
}

.cmp_breadcrumbs .current span {
  color: var(--text-soft);
}

/* ==========================================================================
   05. HEADER & NAVIGATION
   ========================================================================== */
.pkp_structure_head {
  padding: 0;
  border: none;
  background: transparent;
}

.pkp_head_wrapper {
  width: 100% !important;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* --- 5.1 Banner / Logo --- */
.pkp_site_name_wrapper {
  padding: 14px 0 0;
  width: 100%;
}

.pkp_site_name {
  display: block;
  padding: 0;
  margin: 0;
  height: auto;
  line-height: 0;
}

.pkp_site_name .is_img {
  display: block;
}

.pkp_site_name img {
  width: 100% !important;
  max-height: none !important;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* --- 5.2 Baris menu utama --- */
.pkp_site_nav_menu {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
  padding: 0;
}

.pkp_navigation_primary_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0 26px;
  padding: 6px 10px;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-600) 55%,
    var(--primary-800) 100%
  );
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: visible;
}

/* Garis emas tipis di dasar navbar */
.pkp_navigation_primary_row::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
  border-radius: 2px;
}

.pkp_navigation_primary_wrapper {
  background: transparent !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

ul.pkp_navigation_primary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
}

ul.pkp_navigation_primary > li {
  position: relative;
  float: none;
}

ul.pkp_navigation_primary > li > a {
  display: block;
  position: relative;
  padding: 14px 20px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition:
    color var(--t-fast),
    background-color var(--t-fast);
}

ul.pkp_navigation_primary > li > a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t);
}

ul.pkp_navigation_primary > li > a:hover,
ul.pkp_navigation_primary > li > a:focus {
  color: var(--white) !important;
  background: rgba(255, 255, 255, 0.07);
}

ul.pkp_navigation_primary > li > a:hover::after,
ul.pkp_navigation_primary > li > a:focus::after,
ul.pkp_navigation_primary > li.current > a::after,
ul.pkp_navigation_primary > li.in_path > a::after {
  transform: scaleX(1);
}

ul.pkp_navigation_primary > li.current > a,
ul.pkp_navigation_primary > li.in_path > a {
  color: var(--white) !important;
}

/* --- 5.3 Dropdown submenu --- */
ul.pkp_navigation_primary li ul {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 236px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--t),
    transform var(--t),
    visibility var(--t);
  z-index: 200;
}

ul.pkp_navigation_primary li:hover > ul,
ul.pkp_navigation_primary li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

ul.pkp_navigation_primary li ul li {
  width: 100%;
}

ul.pkp_navigation_primary li ul li a {
  display: block;
  padding: 10px 14px !important;
  color: var(--text) !important;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition:
    background-color var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
}

ul.pkp_navigation_primary li ul li a:hover,
ul.pkp_navigation_primary li ul li a:focus {
  background: var(--primary-050);
  border-left-color: var(--gold);
  color: var(--primary) !important;
}

/* --- 5.4 Menu user (Register / Login) --- */
.pkp_navigation_user_wrapper {
  background: transparent;
  padding: 10px 0 0;
  float: none;
}

ul.pkp_navigation_user {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
}

ul.pkp_navigation_user > li {
  float: none;
}

ul.pkp_navigation_user > li > a {
  display: inline-block;
  padding: 8px 18px !important;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary) !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast);
}

ul.pkp_navigation_user > li > a:hover,
ul.pkp_navigation_user > li > a:focus {
  color: var(--white) !important;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Item terakhir (Login) sebagai tombol emas */
ul.pkp_navigation_user > li:last-child > a {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white) !important;
}

ul.pkp_navigation_user > li:last-child > a:hover {
  background: var(--gold-600);
  border-color: var(--gold-600);
}

/* --- 5.5 Search di navbar --- */
.pkp_search {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.pkp_search .search_prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  transition: all var(--t-fast);
}

.pkp_search .search_prompt:hover {
  color: var(--white);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.pkp_search input[type="text"],
.pkp_search input[type="search"] {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}

.pkp_search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Tombol hamburger (mobile) */
.pkp_site_nav_toggle {
  background: var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   06. HOMEPAGE
   ========================================================================== */
.pkp_page_index .homepage_about,
.pkp_page_index .homepage_image {
  margin-bottom: 42px;
}

.pkp_page_index .homepage_about {
  padding: 26px 30px;
  background: linear-gradient(135deg, var(--primary-050), var(--white));
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
}

.homepage_about h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.7em;
}

/* Judul seksi umum (Current Issue, dst) */
.pkp_structure_main > .page > h1,
.pkp_structure_main > .page > h2,
.current_issue_title {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 26px;
  font-size: 1.75rem;
}

.pkp_structure_main > .page > h1::after,
.pkp_structure_main > .page > h2::after,
.current_issue_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  height: 3px;
  background: var(--gold);
  border-radius: 3px;
}

/* ==========================================================================
   07. ISSUE TOC & ARTICLE LIST
   ========================================================================== */
.obj_issue_toc .heading {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 0 30px;
  align-items: start;
  padding: 26px;
  margin-bottom: 38px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Sampul di kolom kiri (memanjang), sisanya di kolom kanan */
.obj_issue_toc .heading > * {
  grid-column: 2;
  margin-top: 0;
}

.obj_issue_toc .heading > .cover,
.obj_issue_toc .heading > .cover_image {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  line-height: 0;
}

.obj_issue_toc .heading > .cover img,
.obj_issue_toc .heading > .cover_image img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.obj_issue_toc .heading .description {
  margin-bottom: 14px;
}

.obj_issue_toc .heading .published,
.obj_issue_toc .heading .doi {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.obj_issue_toc .heading .published .label,
.obj_issue_toc .heading .doi .label {
  font-weight: 700;
  color: var(--primary);
}

/* --- Judul seksi (Articles) --- */
.obj_issue_toc .sections .section > h2,
.obj_issue_toc .sections .section > h3,
.section > h3,
.section > h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 34px 0 18px;
}

.obj_issue_toc .sections .section > h2::after,
.obj_issue_toc .sections .section > h3::after,
.section > h3::after,
.section > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section > h2::before,
.section > h3::before {
  content: none !important;
  display: none !important;
}

/* --- Daftar artikel --- */
ul.cmp_article_list,
.section .articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

ul.cmp_article_list > li {
  margin: 0;
}

.obj_article_summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 24px 26px 24px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition:
    transform var(--t),
    box-shadow var(--t),
    border-color var(--t);
}

.obj_article_summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--gold-600));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t);
}

.obj_article_summary:hover {
  transform: translateY(-4px);
  border-color: var(--gold-300);
  box-shadow: var(--shadow-lg);
}

.obj_article_summary:hover::before {
  transform: scaleY(1);
}

.obj_article_summary > h3,
.obj_article_summary .title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary);
  text-transform: none;
  transition: color var(--t-fast);
}

.obj_article_summary:hover .title {
  color: var(--gold-600);
}

.obj_article_summary .subtitle {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-top: 4px;
}

.obj_article_summary .meta,
.obj_article_summary .authors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--text-soft);
}

.obj_article_summary .authors::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  flex: 0 0 auto;
}

.obj_article_summary .pages {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary-300);
  background: var(--primary-100);
  border-radius: var(--radius-pill);
}

.obj_article_summary .published,
.obj_article_summary .date_published {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* --- Tombol galley (PDF) --- */
.obj_article_summary .galleys,
ul.galleys_links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
}

.obj_article_summary .galleys,
.obj_article_summary ul.galleys_links {
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

.obj_article_summary > * {
  margin-top: 0;
  margin-bottom: 0;
}

.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  background: var(--primary) !important;
  color: var(--white) !important;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-xs);
  transition: all var(--t);
}

.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--gold) !important;
  border-color: var(--gold);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.obj_galley_link .fa,
.obj_galley_link .fas {
  margin-right: 2px;
}

/* Link "View All Issues" */
.read_more,
.more_link,
a.view_all_issues {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.read_more:hover,
.more_link:hover {
  color: var(--gold-600);
}

/* ==========================================================================
   08. ARCHIVES / ISSUE GRID
   ========================================================================== */
ul.issues_archive,
.issues_media_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
}

/* !important dipakai karena tema default memberi border-bottom + padding pada <li> */
ul.issues_archive > li,
.issues_archive > li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.obj_issue_summary {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--t),
    box-shadow var(--t),
    border-color var(--t);
}

.obj_issue_summary:hover {
  transform: translateY(-5px);
  border-color: var(--gold-300);
  box-shadow: var(--shadow-lg);
}

.obj_issue_summary .cover {
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--primary-050);
  line-height: 0;
}

.obj_issue_summary .cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--t-slow);
}

.obj_issue_summary:hover .cover img {
  transform: scale(1.045);
}

/* Judul + volume: perbaikan tumpang tindih */
.obj_issue_summary > h2 {
  display: block;
  margin: 0;
  padding: 18px 20px 6px;
  background: transparent;
  font-size: 1.08rem;
  line-height: 1.35;
}

.obj_issue_summary .title {
  display: block;
  padding: 0;
  margin: 0 0 6px;
  background: transparent !important;
  color: var(--primary) !important;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  text-align: left;
  transition: color var(--t-fast);
}

.obj_issue_summary:hover .title {
  color: var(--gold-600) !important;
}

.obj_issue_summary .series {
  display: block;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Deskripsi dipotong rapi dengan gradasi memudar, bukan terpotong mendadak */
.obj_issue_summary .description {
  position: relative;
  padding: 6px 20px 20px;
  max-height: 9.2em;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-soft);
}

.obj_issue_summary .description::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3em;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
  pointer-events: none;
}

.obj_issue_summary .description p {
  margin-bottom: 0.7em;
  text-align: left;
}

/* ==========================================================================
   09. ARTICLE DETAIL PAGE
   ========================================================================== */
.obj_article_details .page_title {
  font-family: var(--font-display);
  font-size: 1.95rem;
  line-height: 1.28;
  text-transform: none;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.obj_article_details .subtitle {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 10px;
}

/* Garis emas di bawah judul */
.obj_article_details .page_title::after {
  content: "";
  display: block;
  width: 74px;
  height: 3px;
  margin-top: 18px;
  background: var(--gold);
  border-radius: 3px;
}

/* --- 9.1 Layout dua kolom (perbaikan utama) --- */
.obj_article_details .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 30px;
  align-items: start;
  margin: 30px 0 0;
}

.obj_article_details .main_entry {
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
}

.obj_article_details .entry_details {
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 22px !important;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: sticky;
  top: 22px;
}

.obj_article_details .item {
  margin: 0 0 24px;
  padding: 0;
  background: none;
  border: 0;
}

.obj_article_details .item:last-child {
  margin-bottom: 0;
}

.obj_article_details .item > h2,
.obj_article_details .item > h3,
.obj_article_details .item .label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 10px;
}

/* --- 9.2 Penulis --- */
.item.authors {
  margin-bottom: 28px;
}

.item.authors .label {
  display: none;
}

.item.authors ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.item.authors li,
.item.authors .sub_item {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary-300);
  border-radius: var(--radius-sm);
}

.item.authors .name {
  display: block;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--primary);
}

.item.authors .affiliation,
.item.authors .orcid {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
}

.item.authors .orcid a {
  color: var(--gold-600);
  word-break: break-all;
}

/* --- 9.3 DOI & Keywords sebagai panel --- */
.item.doi,
.item.keywords {
  display: block;
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--primary-050);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.item.doi .label,
.item.keywords .label {
  display: inline;
  margin: 0 6px 0 0;
}

.item.doi .value,
.item.keywords .value {
  display: inline;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  overflow-wrap: anywhere;
}

.item.doi a {
  color: var(--primary-300);
  font-weight: 500;
}

/* --- 9.4 Abstrak --- */
.item.abstract {
  margin: 30px 0;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.item.abstract h2,
.item.abstract h3 {
  margin-bottom: 14px;
}

.item.abstract p {
  font-size: 0.9rem; /* diperkecil dari .975rem agar halaman tidak terlalu panjang */
  line-height: 1.8;
  color: var(--text);
}

/* --- 9.5 Grafik unduhan --- */
.item.downloads_chart {
  margin: 30px 0;
  padding: 20px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.item.downloads_chart h2,
.item.downloads_chart h3 {
  margin-bottom: 12px;
}

/* --- 9.6 Referensi (panel bergulir) ---
   Daftar referensi bisa 40+ entri dan membuat halaman sangat panjang.
   Di sini dijadikan panel setinggi 380px yang bisa di-scroll di dalamnya,
   dengan gradasi memudar + tanda panah kecil sebagai petunjuk bahwa
   masih ada isi di bawah. Saat dicetak, panel dibuka penuh (bagian 15).
*/
.item.references {
  position: relative;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.item.references .value {
  max-height: 380px;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 16px 18px 30px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  scrollbar-width: thin;
  scrollbar-color: var(--primary-300) var(--primary-050);
}

.item.references .value::-webkit-scrollbar {
  width: 9px;
}

.item.references .value::-webkit-scrollbar-track {
  background: var(--primary-050);
  border-radius: 9px;
}

.item.references .value::-webkit-scrollbar-thumb {
  background: var(--primary-300);
  border: 2px solid var(--primary-050);
  border-radius: 9px;
}

.item.references .value::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Gradasi memudar di dasar panel.
   Warna awal ditulis eksplisit (rgba dari --surface-alt #f7f9fa) supaya
   tidak muncul semburat abu-abu di sebagian browser. Kalau --surface-alt
   diganti, sesuaikan juga nilai rgba di bawah ini. */
.item.references::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 46px;
  z-index: 1;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: linear-gradient(rgba(247, 249, 250, 0), var(--surface-alt) 72%);
  pointer-events: none;
}

/* Panah kecil penanda "masih ada di bawah" */
.item.references::before {
  content: "\25BE";
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--primary);
  pointer-events: none;
}

.item.references .value p,
.item.references p {
  position: relative;
  margin: 0 0 12px;
  padding: 0 0 12px 22px;
  text-indent: -22px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-soft);
  border-bottom: 1px dashed var(--border);
  text-align: left;
}

.item.references p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.item.references a {
  color: var(--primary-300);
  word-break: break-word;
}

/* --- 9.7 Kolom kanan: galley, terbit, sitasi, isu, lisensi --- */
.entry_details .item.cover_image {
  margin-bottom: 20px;
}

.entry_details .item.cover_image img {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.entry_details .item.galleys {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.entry_details .item.galleys .label {
  display: none;
}

.entry_details ul.galleys_links {
  flex-direction: column;
  gap: 10px;
}

.entry_details .obj_galley_link {
  justify-content: center;
  width: 100%;
  padding: 13px 18px;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
}

.entry_details .item.published,
.entry_details .item.issue,
.entry_details .item.copyright,
.entry_details .item.citation {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.entry_details .item .value {
  margin: 0;
}

.entry_details .item.issue .value a {
  font-weight: 600;
  color: var(--primary);
}

.entry_details .item.copyright {
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.entry_details .item.copyright img {
  margin-bottom: 8px;
}

/* --- 9.8 How to Cite & dropdown format sitasi --- */

/*
   Tema default membuat .sub_item lebih sempit dari kolomnya, sehingga
   teks sitasi terjepit. Di sini dilebarkan mengikuti kolom.
*/
.entry_details .item.citation,
.entry_details .sub_item.citation_display {
  display: block;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.entry_details .item.citation .value,
.entry_details .item.citation .value > div {
  width: auto !important;
  max-width: none !important;
}

.item.citation .csl-entry,
.citation_formats .csl-entry {
  display: block;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text);
  overflow-wrap: anywhere;
}

/*
   PENTING: tema default memberi .citation_formats_button latar transparan.
   Tanpa !important, warna teks putih dari .cmp_button tetap menang dan
   tombol jadi putih-di-atas-putih alias tidak terbaca.
*/
/* Tema default menggambar kotak abu di sekeliling tombol — dihilangkan */
.citation_formats {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.citation_formats_button,
.cmp_button.citation_formats_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto;
  margin-top: 10px;
  padding: 10px 14px !important;
  background: var(--primary) !important;
  color: var(--white) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  text-align: center;
  white-space: normal;
}

.citation_formats_button:hover,
.citation_formats_button:focus {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--white) !important;
}

/* Panel dropdown */
.citation_formats_list {
  margin-top: 10px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.citation_formats_list .label {
  display: block;
  margin: 12px 0 6px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600) !important;
  opacity: 1 !important;
}

ul.citation_formats_styles {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.citation_formats_styles li {
  margin: 0;
  padding: 0;
  border: 0;
}

ul.citation_formats_styles li + li {
  border-top: 1px solid var(--border);
}

.citation_formats_list ul.citation_formats_styles li a {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text) !important;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
}

.citation_formats_list ul.citation_formats_styles li a > span {
  flex: 0 0 auto;
  margin-top: 0.15em;
  color: var(--gold);
}

.citation_formats_list ul.citation_formats_styles li a:hover {
  background: var(--primary-050);
  border-left-color: var(--gold);
  color: var(--primary) !important;
  padding-left: 14px;
}

/* ==========================================================================
   10. SIDEBAR & CUSTOM BLOCKS
   ========================================================================== */
.pkp_structure_sidebar .pkp_block,
.pkp_block {
  margin: 0 0 22px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--t),
    transform var(--t);
}

.pkp_block:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pkp_block:last-child {
  margin-bottom: 0;
}

/* --- 10.1 Judul blok --- */
.pkp_block > .title,
.pkp_block .title {
  display: block;
  position: relative;
  margin: 0;
  padding: 13px 18px 13px 20px;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-600) 100%
  );
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

.pkp_block > .title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold);
}

.pkp_block .title.pkp_screen_reader {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- 10.2 Isi blok --- */
.pkp_block > .content,
.pkp_block .content {
  padding: 16px 18px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.pkp_block .content p {
  margin-bottom: 0.9em;
  font-size: var(--fs-sm);
  text-align: center;
}
.pkp_block .content p:last-child {
  margin-bottom: 0;
}

.pkp_block .content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}

.pkp_block .content a img {
  transition:
    transform var(--t),
    filter var(--t);
}
.pkp_block .content a:hover img {
  transform: translateY(-2px);
}

.pkp_block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkp_block ul li {
  margin: 0;
}

.pkp_block ul li a {
  display: block;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
}

.pkp_block ul li a:hover {
  background: var(--primary-050);
  color: var(--primary);
  padding-left: 16px;
}

/* --- 10.3 Custom block "vertical-menu" jadi daftar menu rapi --- */
.block_custom .vertical-menu {
  display: block;
}

/* !important dipakai karena markup lama memakai inline style="text-align:center" */
.block_custom .vertical-menu > p {
  margin: 0;
  text-align: left !important;
}

.block_custom .vertical-menu > p + p {
  border-top: 1px solid var(--border);
}

/* Item menu berbentuk baris penuh dengan chevron emas */
.block_custom .vertical-menu > p > a:only-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 6px 11px 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
}

.block_custom .vertical-menu > p > a:only-child::after {
  content: "›";
  font-size: 1.15rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: all var(--t-fast);
}

.block_custom .vertical-menu > p > a:only-child:hover {
  background: var(--primary-050);
  border-left-color: var(--gold);
  color: var(--primary);
  padding-left: 16px;
}

.block_custom .vertical-menu > p > a:only-child:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Paragraf yang berisi gambar/logo: jangan dijadikan baris menu */
.block_custom .vertical-menu > p:has(img) {
  padding: 8px 0;
  text-align: center !important;
  border-top: 0;
}

.block_custom .vertical-menu > p:has(img) + p:has(img) {
  border-top: 0;
}

/* --- 10.4 Blok khusus --- */
/* ISSN */
#customblock-issn .content p {
  margin: 0;
  padding: 10px 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
  text-align: center;
}

#customblock-issn .content p + p {
  border-top: 1px dashed var(--border);
}

/* Grid logo pengindeks & tools */
#customblock-index .content,
#customblock-tools .content,
#customblock-sinta2 .content {
  text-align: center;
}

#customblock-index .content img,
#customblock-tools .content img {
  max-height: 46px;
  width: auto;
  margin: 8px auto;
  filter: grayscale(100%);
  opacity: 0.82;
  transition: all var(--t);
}

#customblock-index .content a:hover img,
#customblock-tools .content a:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}

/* Template & statistik: beri tinggi minimum agar tidak terlihat kosong */
#customblock-template .content,
#customblock-kanan .content {
  min-height: 60px;
}

#customblock-template .content img {
  max-height: 190px;
  width: auto;
}

/* --- 10.5 Markup baru (opsional, lihat custom-blocks.html) --- */
.tk-menu {
  list-style: none;
  margin: -6px 0;
  padding: 0;
}

.tk-menu li + li {
  border-top: 1px solid var(--border);
}

.tk-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 6px 11px 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
}

.tk-menu a::after {
  content: "›";
  font-size: 1.15rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: all var(--t-fast);
}

.tk-menu a:hover {
  background: var(--primary-050);
  border-left-color: var(--gold);
  color: var(--primary);
  padding-left: 16px;
}

.tk-menu a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Grid logo (indexing, tools, akreditasi) */
.tk-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 12px;
  align-items: center;
  justify-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-logos img {
  max-height: 40px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all var(--t);
}

.tk-logos a:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}

/* Daftar data ringkas (ISSN, akreditasi) */
.tk-facts {
  margin: 0;
}

.tk-facts .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 2px;
  font-size: var(--fs-sm);
}

.tk-facts .row + .row {
  border-top: 1px dashed var(--border);
}

.tk-facts .k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.tk-facts .v {
  font-weight: 700;
  color: var(--primary);
}

/* Tombol penuh di dalam blok (mis. Download Template) */
.tk-block-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 4px;
  background: var(--primary);
  color: var(--white) !important;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all var(--t);
}

.tk-block-btn:hover {
  background: var(--gold);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.tk-center {
  text-align: center;
}

/*
   Catatan: sidebar sengaja TIDAK dibuat sticky. Blok sidebar Trikonomika
   lebih tinggi dari layar, sehingga sticky justru memunculkan scrollbar
   di dalam sidebar dan memotong blok paling bawah.
*/

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.pkp_structure_footer_wrapper {
  background: transparent !important;
  clear: both;
  display: block;
  padding: 0 20px;
}

.pkp_structure_footer {
  clear: both;
  display: block;
  width: 100%;
  max-width: var(--wrap);
  margin: 44px auto 30px !important;
  padding: 0;
  background: linear-gradient(
    150deg,
    var(--primary) 0%,
    var(--primary-600) 48%,
    var(--primary-800) 100%
  );
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

/* Garis emas di tepi atas footer */
.pkp_structure_footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--gold-600),
    var(--gold),
    var(--gold-300),
    var(--gold)
  );
}

.pkp_footer_content {
  max-width: none;
  margin: 0 !important;
  padding: 40px 44px 30px !important;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-sm);
  line-height: 1.7;
  text-align: left;
}

.pkp_footer_content p {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-sm);
}

/*
   Penetral markup footer LAMA (yang memakai <main> + <footer> ber-inline-style).
   Boleh dihapus setelah isi footer diganti dengan footer-content.html.
*/
.pkp_footer_content > main {
  display: none !important;
}

.pkp_footer_content > footer {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
}

.pkp_footer_content > footer > div {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
}

.pkp_footer_content > footer iframe,
.pkp_footer_content > footer p {
  width: 100% !important;
  max-width: 100% !important;
}

.pkp_footer_content > footer iframe {
  height: 165px !important;
  border: 0;
  border-radius: var(--radius-sm);
}

.pkp_footer_content h1,
.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4 {
  color: var(--white);
}

.pkp_footer_content a {
  color: var(--gold-300);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 201, 150, 0.35);
  transition: all var(--t-fast);
}

.pkp_footer_content a:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

/* --- 11.1 Grid footer kustom --- */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 34px;
  align-items: start;
}

.footer-col > .footer-title,
.footer_col_label {
  display: block;
  margin: 0 0 16px;
  padding-bottom: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(197, 160, 89, 0.28);
}

.footer-col p {
  margin: 0 0 0.8em;
  text-align: left;
}
.footer-col p:last-child {
  margin-bottom: 0;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
}

.footer-list .ico {
  flex: 0 0 auto;
  width: 18px;
  color: var(--gold);
  text-align: center;
}

.footer-map iframe,
.footer_map iframe {
  width: 100%;
  height: 165px;
  border: 0;
  border-radius: var(--radius-sm);
  filter: grayscale(30%) contrast(1.05);
}

/* Badge tools / mitra */
.footer-badges,
.footer_tools_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-badge,
.tool_item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  transition: all var(--t-fast);
}

.footer-badge:hover,
.tool_item:hover {
  background: rgba(197, 160, 89, 0.18);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.footer-badge img,
.tool_item img {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer-license img,
.footer_license_img {
  display: block;
  margin: 12px 0 0;
  max-width: 130px;
}

/* --- 11.2 Baris bawah --- */
.footer-bottom {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* --- 11.3 Menu footer bawaan OJS --- */
ul.pkp_navigation_footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0 44px 30px;
}

ul.pkp_navigation_footer li {
  float: none;
}

ul.pkp_navigation_footer li a {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  border: 0;
}

ul.pkp_navigation_footer li a:hover {
  color: var(--gold);
}

.pkp_brand_footer {
  display: none;
}

/* ==========================================================================
   12. UI COMPONENTS
   ========================================================================== */
.cmp_button,
.pkp_button,
button.submitFormButton,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  background: var(--primary);
  color: var(--white) !important;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--t);
}

.cmp_button:hover,
.pkp_button:hover,
input[type="submit"]:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.cmp_button_wire {
  background: transparent;
  color: var(--primary) !important;
  border-color: var(--border-strong);
  box-shadow: none;
}

.cmp_button_wire:hover {
  background: var(--primary);
  color: var(--white) !important;
  border-color: var(--primary);
}

/* --- Form --- */
.pkp_form .fields > .field,
.pkp_form fieldset {
  margin-bottom: 20px;
}

.pkp_form label,
.pkp_form .label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
}

.textField,
.textArea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}

.textField:focus,
.textArea:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px rgba(29, 94, 124, 0.14);
}

/* --- Pagination --- */
.cmp_pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  text-align: center;
}

.cmp_pagination a,
.cmp_pagination .current {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmp_pagination a {
  color: var(--primary);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
}

.cmp_pagination a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.cmp_pagination .current {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--white);
}

/* --- Tabel --- */
.pkp_structure_main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: var(--fs-sm);
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.pkp_structure_main th {
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: left;
}

.pkp_structure_main td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.pkp_structure_main tbody tr:nth-child(even) {
  background: var(--surface-alt);
}
.pkp_structure_main tbody tr:hover {
  background: var(--primary-050);
}

/* Tabel bisa digulir di layar kecil */
.pkp_structure_main .table_wrapper {
  overflow-x: auto;
}

/* ==========================================================================
   13. ANNOUNCEMENTS & SEARCH RESULTS
   ========================================================================== */
.cmp_announcements {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.obj_announcement_summary {
  margin: 0;
  padding: 22px 24px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  transition: all var(--t);
}

.obj_announcement_summary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.obj_announcement_summary h2,
.obj_announcement_summary .title {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.obj_announcement_summary .date {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.cmp_search_results,
.search_results {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

/* --- Laptop kecil --- */
@media (max-width: 1200px) {
  :root {
    --sidebar-w: 280px;
    --gutter: 22px;
  }
  .pkp_structure_main {
    padding: 34px 32px !important;
  }
}

/* --- Tablet: sidebar turun ke bawah --- */
@media (max-width: 992px) {
  .pkp_structure_content,
  .pkp_structure_content.has_sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .pkp_structure_sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    align-items: start;
  }

  .pkp_block {
    margin-bottom: 0;
  }

  .obj_article_details .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .obj_article_details .entry_details {
    position: static;
  }

  .entry_details ul.galleys_links {
    flex-direction: row;
  }
  .entry_details .obj_galley_link {
    width: auto;
  }

  ul.pkp_navigation_primary > li > a {
    padding: 12px 14px !important;
  }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  body {
    font-size: 15px;
  }

  .pkp_head_wrapper {
    padding: 0 14px;
  }

  .pkp_structure_content {
    padding: 0 14px;
  }

  .pkp_structure_main {
    padding: 24px 18px !important;
    border-radius: var(--radius-md);
  }

  /*
       Header mobile: tema default menyusut jadi bar 40px dengan logo mini
       yang terpotong. Di sini banner dikembalikan tampil penuh, dengan
       tombol hamburger mengambang di atasnya.
    */
  .pkp_structure_head {
    height: auto !important;
  }

  .pkp_head_wrapper {
    height: auto !important;
  }

  .pkp_site_name_wrapper {
    padding: 52px 0 0 !important;
    height: auto !important;
    width: auto !important;
  }

  .pkp_site_name {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .pkp_site_name a,
  .pkp_site_name .is_img {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pkp_site_name img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 10px;
  }

  .pkp_site_nav_toggle {
    top: 6px !important;
    left: 14px !important;
    width: 42px !important;
    height: 42px !important;
    background: var(--primary) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* Panel menu mobile (muncul saat hamburger ditekan) */
  .pkp_site_nav_menu {
    background: linear-gradient(
      160deg,
      var(--primary),
      var(--primary-800)
    ) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px !important;
    overflow: hidden;
  }

  .pkp_navigation_primary_row {
    display: block;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--radius-md);
  }

  .pkp_navigation_primary_row::after {
    display: none;
  }

  .pkp_navigation_user_wrapper {
    padding: 10px 6px 4px !important;
  }

  ul.pkp_navigation_primary {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  ul.pkp_navigation_primary > li > a {
    padding: 13px 16px !important;
    text-align: left;
    border-radius: var(--radius-sm);
  }

  ul.pkp_navigation_primary > li > a::after {
    display: none;
  }

  ul.pkp_navigation_primary li ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    margin: 2px 0 6px 12px;
    padding: 4px;
  }

  ul.pkp_navigation_primary li ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent;
  }

  ul.pkp_navigation_primary li ul li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white) !important;
  }

  ul.pkp_navigation_user {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Issue TOC: sampul di atas, teks di bawah */
  .obj_issue_toc .heading > * {
    grid-column: 1 !important;
  }

  .obj_issue_toc .heading > .cover,
  .obj_issue_toc .heading > .cover_image {
    grid-row: auto !important;
    max-width: 170px !important;
    margin: 0 auto !important;
  }

  /* Judul */
  h1 {
    font-size: 1.55rem;
  }
  .obj_article_details .page_title {
    font-size: 1.5rem;
  }
  .pkp_structure_main > .page > h1 {
    font-size: 1.45rem;
  }

  /* Kartu artikel */
  .obj_article_summary {
    padding: 18px 18px 18px 22px;
  }
  .obj_article_summary .title {
    font-size: 1.05rem;
  }

  /* Issue TOC */
  .obj_issue_toc .heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px !important;
  }

  /* Arsip */
  ul.issues_archive,
  .issues_media_list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }

  .obj_issue_summary > h2 {
    padding: 14px 14px 4px;
    font-size: 0.96rem;
  }
  .obj_issue_summary .title {
    font-size: 0.96rem;
  }
  .obj_issue_summary .description {
    padding: 4px 14px 16px;
    -webkit-line-clamp: 3;
  }

  /* Detail artikel */
  .item.authors ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .item.references .value {
    max-height: 300px;
    padding: 14px 14px 28px;
  }
  .obj_article_details .entry_details {
    padding: 18px !important;
  }

  /* Sidebar */
  .pkp_structure_sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Footer */
  .pkp_structure_footer_wrapper {
    padding: 0 14px;
  }
  .pkp_structure_footer {
    margin: 30px auto 20px !important;
  }
  .pkp_footer_content {
    padding: 28px 20px 22px !important;
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  ul.pkp_navigation_footer {
    padding: 0 20px 24px;
    gap: 8px 18px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Mobile kecil --- */
@media (max-width: 420px) {
  .pkp_structure_main {
    padding: 20px 14px !important;
  }
  ul.issues_archive,
  .issues_media_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .obj_galley_link {
    padding: 9px 16px;
  }
}

/* ==========================================================================
   15. MOTION & ACCESSIBILITY
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.pkp_structure_main,
.pkp_block,
.pkp_structure_footer {
  animation: tk-fade-up 0.5s var(--ease) both;
}

@keyframes tk-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Print --- */
@media print {
  html,
  body {
    background: #fff !important;
  }
  .pkp_structure_head,
  .pkp_structure_sidebar,
  .pkp_structure_footer_wrapper,
  .cmp_breadcrumbs,
  .item.downloads_chart {
    display: none !important;
  }
  .pkp_structure_main {
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* Panel referensi dibuka penuh saat dicetak / disimpan sebagai PDF */
  .item.references .value {
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .item.references::before,
  .item.references::after {
    content: none !important;
  }
}

/* ==========================================================================
   TRIKONOMIKA — TAMBAHAN CSS: SEARCH DI SIDEBAR
   --------------------------------------------------------------------------
   Tempel potongan ini di BAGIAN PALING BAWAH styleSheet.css yang sekarang
   aktif. Jangan ganti seluruh file — versi live-mu sudah berbeda dari
   salinanku (judul blok sudah kamu buat rata tengah), dan mengganti file
   penuh akan mengembalikannya ke rata kiri.
   ========================================================================== */

/* --- 1. Sembunyikan search bawaan di navbar ------------------------------
   Search bawaan tema adalah tautan <a class="pkp_search"> di navbar.
   Selektor sengaja dibatasi ke .pkp_head_wrapper supaya form pencarian
   di halaman /search/search tidak ikut hilang.
-------------------------------------------------------------------------- */
.pkp_head_wrapper .pkp_search,
.pkp_head_wrapper .pkp_search_desktop,
.pkp_head_wrapper .pkp_search_mobile {
  display: none !important;
}

/* --- 2. Kotak pencarian di sidebar --------------------------------------- */
.tk-search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}

.tk-search input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}

.tk-search input[type="text"]::placeholder {
  color: var(--text-mute);
}

.tk-search input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px rgba(29, 94, 124, 0.14);
}

.tk-search button {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t);
}

.tk-search button:hover,
.tk-search button:focus {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

/* --- Opsional: tombol turun ke bawah kolom kalau terasa sempit -----------
   Hapus tanda komentar kalau mau input dan tombol bertumpuk, bukan sejajar.
.tk-search { flex-direction: column; }
.tk-search button { width: 100%; }
-------------------------------------------------------------------------- */

/* ==========================================================================
   OPSIONAL — NAVBAR MENEMPEL SAAT SCROLL (STICKY)
   Hapus tanda komentar di bawah kalau ingin header ikut menempel di atas.
   Catatan: seluruh header (banner + menu) yang menempel, jadi memakan
   ruang layar. Cocok kalau banner journal dibuat lebih pendek.
   --------------------------------------------------------------------------
.pkp_structure_head {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--bg);
    background-image: var(--dot-bg);
}
   ========================================================================== */

/* ==========================================================================
   16. PERBAIKAN HEADER, JARAK MOBILE & ANIMASI HAMBURGER
   --------------------------------------------------------------------------
   Blok ini sengaja diletakkan paling bawah supaya menang lewat urutan sumber
   terhadap tema default OJS. Isinya:

     16.1  Gutter header disamakan dengan gutter konten
     16.2  Tombol Register / Login rata kanan header
     16.3  Jarak header ke body di tablet & mobile
     16.4  Panel menu mobile disejajarkan dengan banner
     16.5  Animasi hamburger dan panel menu dibuat halus
     16.6  Perbaikan header yang kolaps di 768–991px

   Tidak ada aturan di seksi 01–15 yang diubah; semuanya aditif.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1  GUTTER HEADER = GUTTER KONTEN

   Masalah: tema default menyetel .has_site_logo .pkp_head_wrapper dengan
   padding kiri/kanan 0 (spesifisitas 0,2,0), sehingga `padding: 0 20px` milik
   .pkp_head_wrapper di seksi 05 (spesifisitas 0,1,0) tidak pernah terpakai.
   Akibatnya banner dan navbar melebar 20px di tiap sisi melewati kartu
   konten dan sidebar.

   Perbaikan: selektor .has_site_logo ikut disebut supaya spesifisitasnya
   setara, lalu menang lewat urutan sumber. Nilainya dipegang satu variabel
   agar tombol Login dan panel menu bisa memakai angka yang sama persis.
   -------------------------------------------------------------------------- */
.pkp_head_wrapper {
  --head-gutter: 20px;
}

@media (max-width: 767px) {
  .pkp_head_wrapper {
    --head-gutter: 14px;
  }
}

.has_site_logo .pkp_head_wrapper,
.pkp_head_wrapper {
  padding-left: var(--head-gutter);
  padding-right: var(--head-gutter);
}

/* --------------------------------------------------------------------------
   16.2  TOMBOL REGISTER / LOGIN RATA KANAN

   Masalah: tema memasang .pkp_navigation_user_wrapper sebagai position
   absolute yang ditengahkan (left:50% + translateX(-50%)), jadi tepi
   kanannya tidak pernah bertemu tepi header. Ditambah dua hal kecil:
     - tema memberi margin-right negatif (-0.714rem) pada tautan terakhir;
     - .pkp_navigation_user mewarisi clearfix ::before/::after dari tema, dan
       karena list-nya display:flex, kedua pseudo-element itu ikut jadi flex
       item sehingga `gap: 10px` menyisakan ruang kosong di ujung kanan.

   Perbaikan: wrapper dijangkarkan ke kanan sejauh gutter header, margin
   negatif dinolkan, clearfix dimatikan. Hasilnya tepi kanan tombol Login
   persis sejajar banner, navbar, dan sidebar.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pkp_navigation_user_wrapper {
    left: auto !important;
    right: var(--head-gutter) !important;
    transform: none !important;
    padding: 10px 0 0 !important;
    text-align: right;
  }

  ul.pkp_navigation_user > li > a {
    margin: 0 !important;
  }
}

ul.pkp_navigation_user::before,
ul.pkp_navigation_user::after {
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
   16.3  JARAK HEADER KE BODY (TABLET & MOBILE)

   Masalah: di >=992px jarak header ke konten datang dari margin bawah
   .pkp_navigation_primary_row. Di bawah itu navbar pindah ke dalam panel
   dropdown yang position:absolute, jadi tidak menyisakan ruang sama sekali
   dan banner menempel langsung ke kartu konten.

   Perbaikan: ruang dikembalikan lewat padding bawah .pkp_structure_head —
   bukan .pkp_head_wrapper — supaya panel dropdown (yang diposisikan dengan
   top:100% terhadap .pkp_head_wrapper) tetap menempel rapi di bawah banner.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .pkp_structure_head {
    padding-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .pkp_structure_head {
    padding-bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   16.4  PANEL MENU SEJAJAR BANNER

   Masalah: bawaan tema memakai left:0 + width:100%, dan persentase pada
   elemen absolute dihitung dari padding box induknya — bukan content box.
   Panel jadi melebar melewati banner sebesar gutter di tiap sisi.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .pkp_site_nav_menu {
    left: var(--head-gutter) !important;
    right: var(--head-gutter) !important;
    width: auto !important;
  }
}

/* --------------------------------------------------------------------------
   16.5  ANIMASI HAMBURGER & PANEL MENU

   Masalah: tema tidak memasang transition sama sekali pada ikon hamburger,
   dan saat dibuka ia berpindah dari overflow:hidden ke overflow:visible
   sekaligus menghapus batang ketiga (border-bottom) seketika. Tiga hal itu
   yang membuat perubahannya terasa patah.

   Perbaikan: overflow dikunci visible supaya tidak ikut berubah, batang
   ketiga memudar lewat border-bottom-color, dan dua batang sisanya berputar
   ke titik tengah kotak membentuk X yang simetris. Semua properti yang
   berubah sekarang punya transition.

   Catatan: nilai rotasi bawaan tema (-405deg dengan translate) diganti
   rotate(45deg)/rotate(-45deg) supaya X-nya benar-benar di tengah.
   -------------------------------------------------------------------------- */
.pkp_site_nav_toggle {
  transition:
    background-color var(--t),
    box-shadow var(--t),
    transform var(--t-fast);
}

.pkp_site_nav_toggle:active {
  transform: scale(0.94);
}

/* Kotak ikon 24x19px: batang atas (::before) di 0, batang tengah (::after)
   di 8, batang bawah = border-bottom di 16. */
.pkp_site_nav_toggle > span {
  overflow: visible !important;
  border-bottom: 3px solid #fff !important;
  transition: border-bottom-color var(--t);
}

.pkp_site_nav_toggle > span::before,
.pkp_site_nav_toggle > span::after {
  transform-origin: 50% 50%;
  transition:
    top var(--t),
    transform var(--t);
}

.pkp_site_nav_toggle.pkp_site_nav_toggle--transform > span {
  border-bottom-color: transparent !important;
}

.pkp_site_nav_toggle.pkp_site_nav_toggle--transform > span::before {
  top: 8px !important;
  transform: rotate(45deg) !important;
}

.pkp_site_nav_toggle.pkp_site_nav_toggle--transform > span::after {
  top: 8px !important;
  transform: rotate(-45deg) !important;
}

/* Panel menu ikut muncul dan menghilang dengan halus.
   `transition-behavior: allow-discrete` membuat pergantian display none/block
   bisa ditransisikan di browser modern. Browser lama mengabaikan baris itu
   dan perilakunya kembali seperti semula (langsung muncul), tanpa rusak. */
@media (max-width: 991px) {
  .pkp_site_nav_menu {
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity var(--t),
      transform var(--t),
      display var(--t);
    transition-behavior: allow-discrete;
  }

  .pkp_site_nav_menu--isOpen {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .pkp_site_nav_menu--isOpen {
      opacity: 0;
      transform: translateY(-10px);
    }
  }
}

/* --------------------------------------------------------------------------
   16.6  HEADER KOLAPS DI 768–991px

   Masalah: tema mengecilkan header jadi bar 40px untuk layar kecil, dan baru
   mengembalikannya di >=992px (.pkp_site_name_wrapper { height:auto } dan
   .pkp_site_name { position:relative }). Seksi 14 sudah memperbaikinya, tapi
   hanya di <=767px. Akibatnya di rentang 768–991px .pkp_site_name tetap
   position:absolute sehingga keluar dari alur: header menyusut ke 46px
   sementara banner setinggi ~200px meluber menimpa kartu konten, dan tombol
   Register/Login mengambang di atas judul artikel.

   Perbaikan: perlakuan header mobile diperluas ke rentang itu. Sengaja
   dibatasi min-width:768px supaya seksi 14 tetap satu-satunya sumber aturan
   untuk <=767px — tidak ada aturan yang saling menimpa.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .pkp_structure_head,
  .pkp_head_wrapper {
    height: auto !important;
  }

  .pkp_site_name_wrapper {
    padding: 52px 0 0 !important;
    width: auto !important;
    height: auto !important;
  }

  .pkp_site_name {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .pkp_site_name a,
  .pkp_site_name .is_img {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pkp_site_name img,
  .pkp_site_name .is_img img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: var(--radius);
  }

  .pkp_site_nav_toggle {
    top: 6px !important;
    left: 14px !important;
    width: 42px !important;
    height: 42px !important;
    background: var(--primary) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* Panel dropdown */
  .pkp_site_nav_menu {
    background: linear-gradient(
      160deg,
      var(--primary),
      var(--primary-800)
    ) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px !important;
    overflow: hidden;
  }

  .pkp_navigation_primary_row {
    display: block;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pkp_navigation_primary_row::after {
    display: none;
  }

  .pkp_navigation_user_wrapper {
    padding: 10px 6px 4px !important;
  }

  ul.pkp_navigation_primary {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  ul.pkp_navigation_primary > li > a {
    padding: 13px 16px !important;
    text-align: left;
    border-radius: var(--radius-sm);
  }

  ul.pkp_navigation_primary > li > a::after {
    display: none;
  }

  ul.pkp_navigation_primary li ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    margin: 2px 0 6px 12px;
    padding: 4px;
  }

  ul.pkp_navigation_primary li ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent;
  }

  ul.pkp_navigation_primary li ul li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white) !important;
  }

  ul.pkp_navigation_user {
    justify-content: center;
    flex-wrap: wrap;
    width: auto !important;
  }
}

/* ==========================================================================
   17. HALAMAN REVIEWER (Boards of Reviewer)
   --------------------------------------------------------------------------
   Semua aturan di seksi ini di-scope ke body.pkp_page_reviewer, jadi tidak
   ada yang bocor ke halaman lain. Dipasangkan dengan markup di
   reviewer-content.html (kartu <details> yang bisa dibuka-tutup).

     17.1  Ringkasan angka
     17.2  Navigasi A–Z
     17.3  Kelompok huruf
     17.4  Kartu reviewer (collapsed + expanded)
     17.5  Isi kartu: tabel metadata & tombol
     17.6  Animasi buka-tutup
     17.7  Responsive
   ========================================================================== */

/* --- 17.1 Ringkasan angka ------------------------------------------------- */
.pkp_page_reviewer .tk-rev-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}

.pkp_page_reviewer .tk-rev-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 12px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--primary), var(--primary-800));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Garis emas tipis, mengikuti bahasa visual navbar */
.pkp_page_reviewer .tk-rev-stat::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}

.pkp_page_reviewer .tk-rev-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.pkp_page_reviewer .tk-rev-lbl {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.pkp_page_reviewer .tk-rev-intro {
  margin: 0 0 18px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

/* --- 17.2 Navigasi A–Z ---------------------------------------------------- */
.pkp_page_reviewer .tk-rev-az {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 26px;
  padding: 12px;
  background: var(--primary-050);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.pkp_page_reviewer .tk-rev-az a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--primary);
  transition: all var(--t-fast);
}

.pkp_page_reviewer .tk-rev-az a:hover,
.pkp_page_reviewer .tk-rev-az a:focus {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* --- 17.3 Kelompok huruf -------------------------------------------------- */
.pkp_page_reviewer .tk-rev-group {
  margin: 0 0 24px;
  scroll-margin-top: 24px;
}

.pkp_page_reviewer .tk-rev-letter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.pkp_page_reviewer .tk-rev-letter::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-300), transparent);
}

/* --- 17.4 Kartu reviewer -------------------------------------------------- */
.pkp_page_reviewer .tk-rev {
  margin: 0 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}

.pkp_page_reviewer .tk-rev:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.pkp_page_reviewer .tk-rev[open] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

/* Baris yang selalu terlihat: nama + kampus */
.pkp_page_reviewer .tk-rev-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 46px 14px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t-fast);
}

/* Segitiga bawaan <details> dimatikan di semua mesin render */
.pkp_page_reviewer .tk-rev-head::-webkit-details-marker {
  display: none;
}

.pkp_page_reviewer .tk-rev-head::marker {
  content: "";
}

.pkp_page_reviewer .tk-rev-head:hover {
  background: var(--primary-050);
}

/* Chevron yang berputar saat kartu dibuka */
.pkp_page_reviewer .tk-rev-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 19px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--primary-300);
  border-bottom: 2px solid var(--primary-300);
  transform: rotate(45deg);
  transition:
    transform var(--t),
    border-color var(--t),
    margin-top var(--t);
}

.pkp_page_reviewer .tk-rev[open] .tk-rev-head::after {
  margin-top: -2px;
  border-color: var(--gold-600);
  transform: rotate(-135deg);
}

.pkp_page_reviewer .tk-rev-name {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary);
}

.pkp_page_reviewer .tk-rev-org {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-mute);
}

/* --- 17.5 Isi kartu ------------------------------------------------------- */
.pkp_page_reviewer .tk-rev-body {
  padding: 16px 18px 18px;
  border-top: 1px dashed var(--border);
}

/* Tabel metadata: satu kotak dengan kolom key (berlatar) dan kolom value
   yang lurus di semua baris. Sengaja memakai div + span, bukan dl/dt/dd,
   karena editor OJS membuang ketiga tag itu. */
.pkp_page_reviewer .tk-rev-table {
  margin: 0 0 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.pkp_page_reviewer .tk-rev-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.pkp_page_reviewer .tk-rev-row + .tk-rev-row {
  border-top: 1px solid var(--border);
}

.pkp_page_reviewer .tk-rev-k {
  padding: 10px 14px;
  background: var(--primary-050);
  border-right: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--primary-300);
}

.pkp_page_reviewer .tk-rev-v {
  padding: 10px 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
}

.pkp_page_reviewer .tk-rev-id {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Baris tabel ATAU tombol yang nilainya belum diisi (ORCID, Sinta)
   disembunyikan lewat kelas — bukan lewat atribut data-*, supaya tidak
   bergantung pada atribut yang mungkin ikut dibuang editor OJS.
   Hapus kelas tk-rev-empty setelah nilainya diisi.
   (tk-rev-row--empty dipertahankan sebagai nama lama agar markup versi
   sebelumnya tetap berfungsi.)

   !important dipakai sengaja: kelas ini menempel pada baris tabel (display:
   grid) maupun tombol (display: inline-flex), yang spesifisitasnya sama
   persis (0,2,0). Tanpa !important, yang menang cuma urutan penulisan —
   sempat bikin baris ORCID sembunyi tapi tombolnya tetap tampil. */
.pkp_page_reviewer .tk-rev-empty,
.pkp_page_reviewer .tk-rev-row--empty {
  display: none !important;
}

.pkp_page_reviewer .tk-rev-badge {
  display: inline-block;
  padding: 3px 12px;
  background: var(--gold-100);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.pkp_page_reviewer .tk-rev-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pkp_page_reviewer .tk-rev-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--t-fast);
}

.pkp_page_reviewer .tk-rev-btn::after {
  content: "\2197";
  font-size: 0.95em;
  opacity: 0.65;
}

/* Semua tombol memakai satu gaya outline yang sama, lalu terisi navy saat
   di-hover. Sengaja tidak ada tombol "utama" yang solid, supaya deretannya
   terbaca rata dan tidak ada satu tombol yang menonjol sendiri. Nama kelas
   per layanan tetap dipisah agar mudah diberi warna sendiri di kemudian
   hari. */
.pkp_page_reviewer .tk-rev-btn--scholar,
.pkp_page_reviewer .tk-rev-btn--scopus,
.pkp_page_reviewer .tk-rev-btn--orcid,
.pkp_page_reviewer .tk-rev-btn--sinta {
  background: var(--white);
  border-color: var(--border-strong);
  color: var(--primary);
}

.pkp_page_reviewer .tk-rev-btn--scholar:hover,
.pkp_page_reviewer .tk-rev-btn--scholar:focus,
.pkp_page_reviewer .tk-rev-btn--scopus:hover,
.pkp_page_reviewer .tk-rev-btn--scopus:focus,
.pkp_page_reviewer .tk-rev-btn--orcid:hover,
.pkp_page_reviewer .tk-rev-btn--orcid:focus,
.pkp_page_reviewer .tk-rev-btn--sinta:hover,
.pkp_page_reviewer .tk-rev-btn--sinta:focus {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* --- 17.6 Animasi buka-tutup ---------------------------------------------
   <details> tidak bisa dianimasikan tanpa JS di browser lama. Blok @supports
   ini memakai interpolate-size + ::details-content yang sudah didukung
   browser modern; browser lama melewatinya dan kartu tetap buka-tutup
   seketika seperti biasa — tidak ada yang rusak.
-------------------------------------------------------------------------- */
@supports (interpolate-size: allow-keywords) {
  .pkp_page_reviewer .tk-rev-wrap {
    interpolate-size: allow-keywords;
  }

  .pkp_page_reviewer .tk-rev::details-content {
    block-size: 0;
    overflow: hidden;
    content-visibility: hidden;
    transition:
      block-size var(--t),
      content-visibility var(--t);
    transition-behavior: allow-discrete;
  }

  .pkp_page_reviewer .tk-rev[open]::details-content {
    block-size: auto;
    content-visibility: visible;
  }
}

/* --- 17.7 Responsive ------------------------------------------------------ */
@media (max-width: 767px) {
  .pkp_page_reviewer .tk-rev-stats {
    gap: 8px;
  }

  .pkp_page_reviewer .tk-rev-stat {
    padding: 14px 6px;
  }

  .pkp_page_reviewer .tk-rev-num {
    font-size: 1.45rem;
  }

  .pkp_page_reviewer .tk-rev-lbl {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  /* Nama dan kampus ditumpuk supaya tidak berdesakan */
  .pkp_page_reviewer .tk-rev-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 13px 40px 13px 14px;
  }

  .pkp_page_reviewer .tk-rev-org {
    text-align: left;
  }

  .pkp_page_reviewer .tk-rev-body {
    padding: 14px;
  }

  .pkp_page_reviewer .tk-rev-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pkp_page_reviewer .tk-rev-k {
    padding: 7px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .pkp_page_reviewer .tk-rev-v {
    padding: 10px 12px;
  }

  .pkp_page_reviewer .tk-rev-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ==========================================================================
   18. HALAMAN EDITORIAL TEAM
   --------------------------------------------------------------------------
   Halaman ini memakai body class .pkp_op_editorialTeam (bukan .pkp_page_*,
   karena .pkp_page_about dipakai bersama oleh semua halaman About). Semua
   aturan di seksi ini di-scope ke sana, jadi tidak bocor ke halaman About
   yang lain.

   Strukturnya mengikuti seksi 17 (Halaman Reviewer): kartu <details> yang
   bisa dibuka-tutup, tabel metadata dari div+span, dan tombol per layanan.
   Bedanya, di sini tidak ada navigasi A-Z — jumlah orangnya sedikit dan
   pengelompokannya per peran, bukan per abjad.

   Prefiks kelas sengaja dibedakan (tk-ed-, bukan tk-rev-) supaya kedua
   halaman bisa diubah sendiri-sendiri tanpa saling mengganggu.

     18.1  Ringkasan angka & intro
     18.2  Kelompok peran & sub-bidang
     18.3  Kartu editor (collapsed + expanded)
     18.4  Isi kartu: tabel metadata & tombol
     18.5  Animasi buka-tutup
     18.6  Responsive
   ========================================================================== */

/* --- 18.1 Ringkasan angka & intro ---------------------------------------- */
.pkp_op_editorialTeam .tk-ed-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}

.pkp_op_editorialTeam .tk-ed-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 12px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--primary), var(--primary-800));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Garis emas tipis, mengikuti bahasa visual navbar & halaman Reviewer */
.pkp_op_editorialTeam .tk-ed-stat::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}

.pkp_op_editorialTeam .tk-ed-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.pkp_op_editorialTeam .tk-ed-lbl {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
}

/* Margin ditulis eksplisit karena aturan p global (seksi 02) memberi
   margin-bottom 1.35em yang kelewat besar di sini. */
.pkp_op_editorialTeam .tk-ed-intro {
  margin: 0 0 22px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

/* --- 18.2 Kelompok peran & sub-bidang ------------------------------------ */
.pkp_op_editorialTeam .tk-ed-group {
  margin: 0 0 26px;
}

.pkp_op_editorialTeam .tk-ed-group:last-child {
  margin-bottom: 0;
}

/* Judul peran (Editor in Chief, Editorial Boards, ...).
   Spesifisitas (0,2,0) mengalahkan aturan h1-h6 global di seksi 02 yang
   cuma (0,0,1), jadi tidak perlu !important. */
.pkp_op_editorialTeam .tk-ed-role {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-600);
}

.pkp_op_editorialTeam .tk-ed-role::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* Sub-bidang di dalam Editorial Boards (Economic Development, Management,
   Accounting). Dibuat dari div, bukan h3, karena tag h3 belum pernah diuji
   lolos editor konten OJS di instalasi ini. */
.pkp_op_editorialTeam .tk-ed-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--primary);
}

.pkp_op_editorialTeam .tk-ed-sub::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.pkp_op_editorialTeam .tk-ed-role + .tk-ed-sub {
  margin-top: 4px;
}

/* --- 18.3 Kartu editor --------------------------------------------------- */
.pkp_op_editorialTeam .tk-ed {
  margin: 0 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}

.pkp_op_editorialTeam .tk-ed:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.pkp_op_editorialTeam .tk-ed[open] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

/* Baris yang selalu terlihat: nama + institusi */
.pkp_op_editorialTeam .tk-ed-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 46px 14px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t-fast);
}

/* Segitiga bawaan <details> dimatikan di semua mesin render */
.pkp_op_editorialTeam .tk-ed-head::-webkit-details-marker {
  display: none;
}

.pkp_op_editorialTeam .tk-ed-head::marker {
  content: "";
}

.pkp_op_editorialTeam .tk-ed-head:hover {
  background: var(--primary-050);
}

/* Chevron yang berputar saat kartu dibuka */
.pkp_op_editorialTeam .tk-ed-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 19px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--primary-300);
  border-bottom: 2px solid var(--primary-300);
  transform: rotate(45deg);
  transition:
    transform var(--t),
    border-color var(--t),
    margin-top var(--t);
}

.pkp_op_editorialTeam .tk-ed[open] .tk-ed-head::after {
  margin-top: -2px;
  border-color: var(--gold-600);
  transform: rotate(-135deg);
}

.pkp_op_editorialTeam .tk-ed-name {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary);
}

.pkp_op_editorialTeam .tk-ed-org {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-mute);
}

/* --- 18.4 Isi kartu ------------------------------------------------------ */
.pkp_op_editorialTeam .tk-ed-body {
  padding: 16px 18px 18px;
  border-top: 1px dashed var(--border);
}

/* Tabel metadata: satu kotak dengan kolom key (berlatar) dan kolom value
   yang lurus di semua baris. Memakai div + span, bukan dl/dt/dd, karena
   editor konten OJS membuang ketiga tag itu tanpa peringatan. */
.pkp_op_editorialTeam .tk-ed-table {
  margin: 0 0 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.pkp_op_editorialTeam .tk-ed-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.pkp_op_editorialTeam .tk-ed-row + .tk-ed-row {
  border-top: 1px solid var(--border);
}

.pkp_op_editorialTeam .tk-ed-k {
  padding: 10px 14px;
  background: var(--primary-050);
  border-right: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--primary-300);
}

.pkp_op_editorialTeam .tk-ed-v {
  padding: 10px 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
}

.pkp_op_editorialTeam .tk-ed-id {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Baris tabel ATAU tombol yang nilainya belum diisi (ORCID, SINTA, dan
   Scopus untuk yang belum punya) disembunyikan lewat kelas — bukan lewat
   atribut data-*, karena atribut itu belum terverifikasi lolos editor OJS.
   Hapus kelas tk-ed-empty setelah nilainya diisi.

   !important dipakai sengaja: kelas ini menempel pada baris tabel (display:
   grid) maupun tombol (display: inline-flex), yang spesifisitasnya sama
   persis (0,2,0). Tanpa !important, yang menang cuma urutan penulisan —
   di halaman Reviewer hal ini sempat bikin baris ORCID sembunyi tapi
   tombolnya tetap tampil. */
.pkp_op_editorialTeam .tk-ed-empty {
  display: none !important;
}

.pkp_op_editorialTeam .tk-ed-badge {
  display: inline-block;
  padding: 3px 12px;
  background: var(--gold-100);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.pkp_op_editorialTeam .tk-ed-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pkp_op_editorialTeam .tk-ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  transition: all var(--t-fast);
}

.pkp_op_editorialTeam .tk-ed-btn::after {
  content: "\2197";
  font-size: 0.95em;
  opacity: 0.65;
}

/* Satu gaya outline untuk semua tombol, terisi navy saat hover — sama
   seperti halaman Reviewer, supaya deretannya terbaca rata dan tidak ada
   satu tombol yang menonjol sendiri. Nama kelas per layanan tetap ada
   agar gampang diberi warna sendiri kalau nanti dibutuhkan. */
.pkp_op_editorialTeam .tk-ed-btn:hover,
.pkp_op_editorialTeam .tk-ed-btn:focus {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* --- 18.5 Animasi buka-tutup ---------------------------------------------
   <details> tidak bisa dianimasikan tanpa JS di browser lama. Blok @supports
   ini memakai interpolate-size + ::details-content yang sudah didukung
   browser modern; browser lama melewatinya dan kartu tetap buka-tutup
   seketika seperti biasa — tidak ada yang rusak.
-------------------------------------------------------------------------- */
@supports (interpolate-size: allow-keywords) {
  .pkp_op_editorialTeam .tk-ed-wrap {
    interpolate-size: allow-keywords;
  }

  .pkp_op_editorialTeam .tk-ed::details-content {
    block-size: 0;
    overflow: hidden;
    content-visibility: hidden;
    transition:
      block-size var(--t),
      content-visibility var(--t);
    transition-behavior: allow-discrete;
  }

  .pkp_op_editorialTeam .tk-ed[open]::details-content {
    block-size: auto;
    content-visibility: visible;
  }
}

/* --- 18.6 Responsive ----------------------------------------------------- */
@media (max-width: 767px) {
  .pkp_op_editorialTeam .tk-ed-stats {
    gap: 8px;
  }

  .pkp_op_editorialTeam .tk-ed-stat {
    padding: 14px 6px;
  }

  .pkp_op_editorialTeam .tk-ed-num {
    font-size: 1.45rem;
  }

  .pkp_op_editorialTeam .tk-ed-lbl {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  /* Nama dan institusi ditumpuk supaya tidak berdesakan */
  .pkp_op_editorialTeam .tk-ed-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 13px 40px 13px 14px;
  }

  .pkp_op_editorialTeam .tk-ed-org {
    text-align: left;
  }

  .pkp_op_editorialTeam .tk-ed-body {
    padding: 14px;
  }

  .pkp_op_editorialTeam .tk-ed-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pkp_op_editorialTeam .tk-ed-k {
    padding: 7px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .pkp_op_editorialTeam .tk-ed-v {
    padding: 10px 12px;
  }

  .pkp_op_editorialTeam .tk-ed-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Layar sangat sempit: kolom ringkasan ditumpuk dua-satu supaya angkanya
   tidak terpotong. */
@media (max-width: 420px) {
  .pkp_op_editorialTeam .tk-ed-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pkp_op_editorialTeam .tk-ed-stat:last-child {
    grid-column: 1 / -1;
  }
}