@charset "UTF-8";
/* ==========================================================================
   OJS RESTYLE KIT 3.3
   Penataan tampilan untuk OJS 3.3.x dengan tema Default
   --------------------------------------------------------------------------
   Versi   : 1.1.0
   Warna   : Deep Green
   Paket   : Lengkap
   Gaya    : Editorial Press
   Pemasangan : Settings > Website > Appearance > Journal Stylesheet
   Sumber  : https://dikiachmadp.work
   Lisensi : 1 jurnal per pembelian. Dilarang dijual atau
             didistribusikan ulang. Lihat LISENSI.md.
   --------------------------------------------------------------------------
   INI BUKAN PLUGIN TEMA. Berkas ini tidak muncul pada Appearance > Theme dan
   tidak menyentuh satu pun berkas inti OJS. Berkas ini hanya diunggah sebagai
   Journal Stylesheet, sehingga tidak memerlukan akses server maupun FTP, dan
   dapat dibatalkan kapan saja dengan menghapusnya.
   --------------------------------------------------------------------------
   EDISI LENGKAP. Berkas ini sudah memakai palet Deep Green dan siap diunggah apa
   adanya. Tidak ada yang perlu disunting.

   Untuk berganti warna, unggah berkas lain dari folder warna/ menggantikan
   berkas ini. Untuk warna di luar kelima pilihan, lihat bab kustomisasi pada
   Panduan-Pemasangan.pdf.
   --------------------------------------------------------------------------
   DAFTAR ISI
   00. Font & Reset
   01. Design Token (seluruh pengaturan warna berada di sini)
   02. Tipografi Dasar
   03. Kerangka Halaman
   04. Breadcrumb
   05. Header & Navigasi
   06. Beranda
   07. Daftar Isi Terbitan & Daftar Artikel
   08. Halaman Arsip
   09. Halaman Detail Artikel
   10. Sidebar & Custom Block
   11. Footer
   12. Komponen Antarmuka (tombol, formulir, pagination, tabel)
   13. Pengumuman & Pencarian
   14. Responsif
   15. Animasi & Aksesibilitas
   16. Kompatibilitas Markup Warisan (opsional)
   17. Tambahan Opsional
   ========================================================================== */

/* ==========================================================================
   00. FONT & RESET
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400&display=swap");

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

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

/* ==========================================================================
   01. DESIGN TOKENS
   --------------------------------------------------------------------------
   Semua warna & bentuk produk ini bermuara di sini. Untuk ganti tema warna,
   ubah blok --brand-* dan --accent-* saja; sisanya ikut menyesuaikan.
   ========================================================================== */
:root {
  /* --- Brand: Deep Green (bawaan) ---
     Ganti enam nilai di bawah untuk mengubah warna utama jurnal. */
  --primary: #1f4433;
  --primary-600: #173628;
  --primary-800: #0f241a;
  --primary-300: #40705a;
  --primary-100: #e2ebe6;
  --primary-050: #f1f6f3;

  /* --- Aksen: digunakan untuk label, garis penanda, dan fokus keyboard ---
     Sengaja satu keluarga dengan brand, bukan warna logam. */
  --accent: #2e7d5b;
  --accent-600: #1c5a3e;
  --accent-300: #86baa3;
  --accent-100: #e4f0ea;

  /* --- Nilai RGB untuk bayangan & lapisan transparan ---
     Wajib ikut diubah saat mengganti warna brand. Apabila terlewat, bayangan
     akan tetap membawa rona warna lama. */
  --brand-rgb: 31, 68, 51;
  --accent-rgb: 46, 125, 91;

  /* --- Netral: kertas hangat, bukan abu kebiruan --- */
  --white: #ffffff;
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-alt: #faf9f6;
  --text: #1d211f;
  --text-soft: #545c58;
  --text-mute: #7d8481;
  --border: #e2e0da;
  --border-strong: #c9c6bd;

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

  /* --- Shape: sudut nyaris siku, khas cetakan editorial --- */
  --radius: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --radius-btn: 3px;

  /* --- Depth: rata. Bayangan hanya untuk lapisan yang benar-benar
     mengambang di atas halaman (dropdown & panel menu mobile). --- */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 10px 28px rgba(var(--brand-rgb), 0.14);

  /* --- Rule: garis rambut sebagai pemisah utama, pengganti kartu --- */
  --rule: 1px solid var(--border);

  /* --- 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);

  /* --- Layout --- */
  --wrap: 1240px;
  --gutter: 44px;
  --sidebar-w: 292px;
}

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

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  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(--accent-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(--accent);
  color: var(--text-soft);
  font-style: italic;
}

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

::selection {
  background: var(--accent-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-btn);
}
::-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: 8px 0 40px !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pkp_structure_sidebar {
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 8px 0 40px var(--gutter) !important;
  margin: 0 !important;
  border-left: var(--rule);
}

/* ==========================================================================
   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(--accent-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: 0;
  box-shadow: none;
}

/* Tema default OJS mengunci lebar tetap (728px / 952px / 1160px) pada tiga
   kontainer header sekaligus lewat satu selector gabungan. Kit ini memakai
   lebarnya sendiri melalui --wrap, sehingga kunci tersebut harus dilepas.
   Apabila dibiarkan, banner menjadi lebih sempit daripada bilah navigasi, dan
   daftar tombol Register/Login melebar hingga menghimpit menu utama. */
.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
ul.pkp_navigation_user {
  width: 100% !important;
  max-width: none !important;
}

/* --- 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: 0 0 34px;
  padding: 0 10px;
  background: var(--primary);
  border-radius: 0;
  position: relative;
  overflow: visible;
}

/* Garis rambut pemisah di dasar navbar */
.pkp_navigation_primary_row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.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(--accent);
  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(--accent);
  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-btn);
  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);
}

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

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

/* --- 5.4b Menu user diletakkan di dalam bilah navigasi (desktop) ---
   Tema default memasang .pkp_navigation_user_wrapper dengan
   position:absolute; top:0; left:50%; transform:translateX(-50%) pada
   >=992px. Karena induk terdekat yang berposisi adalah .pkp_head_wrapper,
   tombol Register/Login melayang di atas banner. Perbaikannya: jadikan
   .pkp_site_nav_menu sebagai bilah berlatar brand, lalu susun kedua
   anaknya berdampingan. */
@media (min-width: 992px) {
  .pkp_site_nav_menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--primary);
    margin: 0 0 34px;
  }

  .pkp_navigation_primary_row {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    background: transparent;
  }

  /* Garis rambut dipindah ke bilah supaya membentang penuh */
  .pkp_navigation_primary_row::after {
    display: none;
  }

  .pkp_site_nav_menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
  }

  .pkp_navigation_user_wrapper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 12px 0 0 !important;
  }

  /* Selebar isinya saja, supaya menu utama tidak terhimpit */
  ul.pkp_navigation_user {
    width: auto !important;
    padding-right: 0 !important;
  }

  /* Tombol berada di atas bilah gelap, jadi warnanya dibalik */
  ul.pkp_navigation_user > li > a {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.38);
    color: rgba(255, 255, 255, 0.94) !important;
  }

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

  ul.pkp_navigation_user > li:last-child > a {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary) !important;
  }

  ul.pkp_navigation_user > li:last-child > a:hover,
  ul.pkp_navigation_user > li:last-child > a:focus {
    background: var(--accent-100);
    border-color: var(--accent-100);
    color: var(--primary-800) !important;
  }
}

/* --- 5.5 Pencarian dipindahkan dari navbar ke sidebar ---
   KONSEP BAWAAN KIT INI: pencarian hanya ditampilkan di sidebar, tidak di
   navbar. Navbar dibiarkan berisi menu saja agar tetap ringkas dan sejajar,
   sementara kotak pencarian memperoleh ruang yang jauh lebih lapang di sidebar.

   PENTING: Anda WAJIB membuat custom block "Pencarian" di sidebar.
   Markupnya tersedia pada berkas sidebar-blocks.html bagian 1. Tanpa blok
   tersebut, jurnal Anda kehilangan fungsi pencarian sepenuhnya.

   Apabila konsep ini tidak dikehendaki, tersedia potongan pembatalnya pada
   bagian 17 (potongan B) untuk mengembalikan pencarian ke navbar.

   Selektor dibatasi pada .pkp_head_wrapper agar formulir pencarian di halaman
   /search/search tidak ikut tersembunyi.
*/
.pkp_head_wrapper .pkp_search,
.pkp_head_wrapper .pkp_search_desktop,
.pkp_head_wrapper .pkp_search_mobile,
.pkp_head_wrapper .pkp_navigation_search_wrapper {
  display: none !important;
}

/* Aturan berikut menata tampilan pencarian di navbar, dan hanya berpengaruh
   apabila pencarian dikembalikan ke sana. */
.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-btn);
  transition: all var(--t-fast);
}

.pkp_search .search_prompt:hover {
  color: var(--white);
  border-color: var(--accent);
  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-btn);
  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: 4px 0 26px;
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
}

.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(--accent-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;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-strong);
}

/* ==========================================================================
   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: 0 0 30px;
  margin-bottom: 38px;
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
}

/* 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) ---
   Tema default OJS (>=768px) membungkus .section dengan padding 2.143rem
   dan margin negatif, lalu memberi judulnya latar putih + left:-15px agar
   terlihat menimpa garis. Kit ini memakai pola lain (label + garis rambut),
   jadi trik bawaan itu dinetralkan lebih dulu. */
.obj_issue_toc .sections .section,
.obj_issue_toc .section,
.obj_issue_toc .galleys {
  position: static;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
}

.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(--accent-600);
  margin: 34px 0 18px;
  left: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.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: 0;
  border-top: var(--rule);
}

ul.cmp_article_list > li {
  margin: 0;
}

.obj_article_summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 22px 16px 22px 18px;
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
  overflow: hidden;
  transition:
    background var(--t-fast),
    border-color var(--t-fast);
}

.obj_article_summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}

.obj_article_summary:hover {
  background: var(--primary-050);
}

.obj_article_summary:hover::before {
  transform: scaleX(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(--primary-800);
}

.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: 14px;
  height: 1px;
  background: var(--border-strong);
  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-btn);
}

.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-btn);
  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(--primary-800) !important;
  border-color: var(--primary-800);
  color: var(--white) !important;
}

.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(--accent-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 diperlukan karena tema default memberi border-bottom dan 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 {
  border-color: var(--primary);
}

.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(--accent-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(--accent);
  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: 0 0 0 30px !important;
  background: transparent;
  border: 0;
  border-left: var(--rule);
  border-radius: 0;
  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;
}

/* Tema default memberi padding-bottom pada .entry_details .item dengan
   spesifisitas lebih tinggi (tiga class) daripada aturan .item di atas,
   sehingga padding itu bertumpuk dengan margin dan kolom kanan jadi
   terlalu renggang. Ditulis ulang di sini dengan spesifisitas yang sama.
   Aturan khusus .galleys dan .copyright di bagian 9.7 sengaja diletakkan
   setelah blok ini agar tetap menang. */
.obj_article_details .entry_details .item {
  margin: 0 0 22px;
  padding: 0;
}

.obj_article_details .entry_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(--accent-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 0 12px 14px;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--border-strong);
  border-radius: 0;
}

.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(--primary-300);
  word-break: break-all;
}

/* --- 9.3 DOI & Keywords sebagai panel --- */
.item.doi,
.item.keywords {
  display: block;
  margin: 0;
  padding: 13px 0;
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
}

.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: 22px 0;
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
}

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

/* --- 9.6 Referensi (panel bergulir) ---
   Daftar referensi dapat memuat lebih dari 40 entri dan membuat halaman
   sangat panjang. Di sini dijadikan panel setinggi 380px yang dapat digulir,
   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: 4px 18px 30px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  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 --bg #f6f5f2) supaya tidak muncul
   semburat di sebagian browser. Kalau --bg 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;
  background: linear-gradient(rgba(246, 245, 242, 0), var(--bg) 78%);
  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: var(--rule);
  border-radius: 0;
  box-shadow: none;
}

.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: var(--rule);
  border-left: 2px solid var(--primary);
  border-radius: 0;
  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-btn) !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(--accent) !important;
  border-color: var(--accent) !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(--accent-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(--accent);
}

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

/* ==========================================================================
   10. SIDEBAR & CUSTOM BLOCKS
   ========================================================================== */
.pkp_structure_sidebar .pkp_block,
.pkp_block {
  margin: 0 0 30px;
  padding: 0 0 30px;
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

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

/* --- 10.1 Judul blok --- */
.pkp_block > .title,
.pkp_block .title {
  display: block;
  position: relative;
  margin: 0 0 14px;
  padding: 0 0 9px;
  background: transparent;
  color: var(--primary);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--primary);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.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: 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.pkp_block .content p {
  margin-bottom: 0.9em;
  font-size: var(--fs-sm);
  text-align: left;
}
.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: 0;
}

.pkp_block .content a img {
  transition:
    transform var(--t),
    filter var(--t);
}
.pkp_block .content a:hover img {
  opacity: 1;
}

.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 diperlukan karena markup warisan 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: "";
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--t-fast);
}

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

.block_custom .vertical-menu > p > a:only-child:hover::after {
  width: 14px;
}

/* 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.5 Markup blok bawaan kit (lihat berkas sidebar-blocks.html) --- */
.ork-menu {
  list-style: none;
  margin: -6px 0;
  padding: 0;
}

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

.ork-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);
}

.ork-menu a::after {
  content: "";
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--t-fast);
}

.ork-menu a:hover {
  background: var(--primary-050);
  border-left-color: var(--primary);
  border-left-width: 3px;
  color: var(--primary);
}

.ork-menu a:hover::after {
  width: 14px;
}

/* Grid logo (indexing, tools, akreditasi) */
.ork-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;
}

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

.ork-logos a:hover img {
  filter: grayscale(0);
  opacity: 1;
}

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

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

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

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

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

/* Tombol penuh di dalam blok (mis. Download Template) */
.ork-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-btn);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all var(--t);
}

.ork-block-btn:hover {
  background: var(--primary-800);
  color: var(--white) !important;
}

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

/*
   Catatan desain: sidebar sengaja TIDAK dibuat sticky. Blok sidebar jurnal
   umumnya lebih tinggi dari layar, sehingga sticky justru memunculkan
   scrollbar di dalam sidebar dan memotong blok paling bawah. Kalau sidebar
   sidebar jurnal Anda pendek, aktifkan potongan sticky pada bagian 17.
*/

/* --- 10.6 Kotak pencarian di dalam blok sidebar ---
   Blok WAJIB. Karena pencarian di navbar disembunyikan (lihat bagian 5.5),
   inilah satu-satunya jalan masuk pencarian di situsmu.
   Markupnya tersedia pada berkas sidebar-blocks.html bagian 1. --- */
.ork-search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}

.ork-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-btn);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}

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

.ork-search input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

.ork-search button {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
  border-radius: var(--radius-btn);
  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);
}

.ork-search button:hover,
.ork-search button:focus {
  background: var(--primary-800);
  border-color: var(--primary-800);
}

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

/* ==========================================================================
   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(--accent-600),
    var(--accent),
    var(--accent-300),
    var(--accent)
  );
}

.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(--accent-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(--accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.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(--accent);
  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-btn);
  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(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

.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(--accent);
}

.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-btn);
  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(--primary-800);
  border-color: var(--primary-800);
}

.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(var(--accent-rgb), 0.16);
}

/* --- Fieldset (mis. "Advanced filters" di halaman pencarian) ---
   Tema default membiarkan fieldset memakai bingkai bawaan peramban, yang
   terlihat mentah di antara komponen lain yang sudah ditata. */
fieldset {
  margin: 18px 0;
  padding: 20px 22px;
  background: var(--surface-alt);
  border: var(--rule);
  border-radius: var(--radius-md);
}

fieldset legend {
  padding: 0 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-600);
}

/* --- 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-btn);
  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(--accent);
  border: 1px solid var(--accent);
  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 dapat digulir pada 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(--accent);
  border-radius: var(--radius-md);
  transition: all var(--t);
}

.obj_announcement_summary:hover {
  border-color: var(--primary);
  border-left-color: var(--primary);
}

.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 34px;
    align-items: start;
    padding: 30px 0 0 !important;
    border-left: 0;
    border-top: var(--rule);
  }

  .pkp_block {
    margin-bottom: 0;
  }

  /* Saat sidebar jadi grid, blok terakhir tidak lagi "paling bawah" secara
     visual, jadi garis pemisahnya dikembalikan. */
  .pkp_block:last-child {
    padding-bottom: 30px;
    border-bottom: var(--rule);
  }

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

  .obj_article_details .entry_details {
    position: static;
    padding: 26px 0 0 !important;
    border-left: 0;
    border-top: var(--rule);
  }

  .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 --- */
/* --- Tablet & ponsel: tema default berpindah ke mode hamburger di 992px,
   bukan 768px. Seluruh kompensasi header & navigasi harus ikut breakpoint
   itu. Apabila terlewat, rentang 768-991px akan memakai panel biru bawaan
   tema. --- */
@media (max-width: 991px) {
  /*
       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;
  }
}

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

  .pkp_head_wrapper {
    padding: 0 14px;
  }

  .pkp_structure_content {
    padding: 0 14px;
  }

  .pkp_structure_main {
    padding: 8px 0 30px !important;
    border-radius: 0;
  }

  /* 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(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

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

@keyframes ork-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;
  }
}
/* ==========================================================================
   16. KOMPATIBILITAS MARKUP LAMA (OPSIONAL)
   --------------------------------------------------------------------------
   Bagian ini hanya diperlukan apabila Anda MEMPERTAHANKAN isi custom block
   yang sudah ada, dan tidak menggantinya dengan template pada
   sidebar-blocks.html. Apabila Anda memakai markup baru, seluruh bagian ini
   dapat dihapus tanpa pengaruh apa pun.

   CARA MENYESUAIKAN
   OJS membentuk ID blok dari nama blok di Custom Block Manager: blok bernama
   "issn" menghasilkan #customblock-issn. Nama di bawah ini hanya CONTOH.
   Buka situsmu, klik kanan pada blok yang ingin diatur > Inspect, lihat ID
   pada <div class="pkp_block ...">, lalu ganti nama di bawah agar cocok.

   Blok contoh yang diatur di sini:
   issn - index - tools - akreditasi - template - statistik
   ========================================================================== */

/* 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-akreditasi .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;
}

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

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

/* ==========================================================================
   17. TAMBAHAN OPSIONAL
   --------------------------------------------------------------------------
   Seluruh potongan pada bagian ini sengaja dinonaktifkan karena tidak setiap
   jurnal membutuhkannya.

   CARA MENGAKTIFKAN
   Hapus baris pembuka dan penutup komentar yang mengapit potongan yang
   dikehendaki, lalu simpan dan unggah ulang berkas ini.
   ========================================================================== */


/* --- A. NAVBAR MENEMPEL SAAT HALAMAN DIGULIR -----------------------------
   Perlu diperhatikan: yang menempel adalah SELURUH header, termasuk banner,
   sehingga ikut memakan tinggi layar. Potongan ini cocok apabila banner
   jurnal Anda pendek, dan sebaiknya dilewati apabila bannernya tinggi.
   --------------------------------------------------------------------------
.pkp_structure_head {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--bg);
  border-bottom: var(--rule);
}
   -------------------------------------------------------------------------- */


/* --- B. MENGEMBALIKAN PENCARIAN KE NAVBAR --------------------------------
   Secara bawaan, kit ini menyembunyikan kotak pencarian di navbar dan
   memindahkannya ke sidebar (lihat bagian 5.5). Navbar menjadi berisi menu
   saja, sementara kotak pencarian memperoleh ruang yang lebih lapang.

   Gunakan potongan ini apabila konsep tersebut tidak dikehendaki, misalnya
   karena sidebar sudah sangat panjang, atau karena pembaca jurnal Anda
   terbiasa mencari dari navbar.

   Apabila potongan ini diaktifkan, custom block "Pencarian" di sidebar tidak
   lagi wajib dibuat.
   --------------------------------------------------------------------------
.pkp_head_wrapper .pkp_search,
.pkp_head_wrapper .pkp_search_desktop,
.pkp_head_wrapper .pkp_search_mobile,
.pkp_head_wrapper .pkp_navigation_search_wrapper {
  display: revert !important;
}
   -------------------------------------------------------------------------- */


/* --- C. KOTAK PENCARIAN BERTUMPUK ----------------------------------------
   Secara bawaan, kolom isian dan tombol tersusun sejajar. Gunakan potongan
   ini apabila sidebar terasa sempit dan keduanya lebih baik ditumpuk.
   --------------------------------------------------------------------------
.ork-search {
  flex-direction: column;
}
.ork-search button {
  width: 100%;
}
   -------------------------------------------------------------------------- */


/* --- D. FONT SISTEM, TANPA GOOGLE FONTS ----------------------------------
   Secara bawaan, berkas ini memanggil Inter dan Source Serif 4 melalui
   @import ke fonts.googleapis.com. Gunakan potongan ini apabila situs Anda
   tidak boleh memuat berkas dari server pihak ketiga, baik karena alasan
   privasi, kebijakan institusi, maupun keterbatasan jaringan.

   Diperlukan dua langkah:
   1. Hapus baris @import pada bagian 00.
   2. Aktifkan potongan di bawah ini.

   Konsekuensinya, tampilan huruf akan berbeda antar sistem operasi.
   --------------------------------------------------------------------------
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", "Liberation Serif", serif;
}
   -------------------------------------------------------------------------- */


/* --- E. SIDEBAR MENEMPEL SAAT HALAMAN DIGULIR ----------------------------
   Secara bawaan sidebar TIDAK dibuat menempel, karena blok sidebar jurnal
   pada umumnya lebih tinggi daripada layar. Dalam keadaan tersebut, sticky
   justru memunculkan scrollbar di dalam sidebar dan memotong blok terbawah.

   Gunakan potongan ini HANYA apabila sidebar Anda pendek, kira-kira maksimal
   empat blok. Periksa hasilnya pada layar setinggi 768px setelah diaktifkan.
   --------------------------------------------------------------------------
@media (min-width: 992px) {
  .pkp_structure_sidebar {
    position: sticky;
    top: 22px;
  }
}
   -------------------------------------------------------------------------- */