@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
   ========================================================================== */

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