/* =====================================================================
   JISAD - styleSheet.css  (versi baru)
   Palet baru + estetika/animasi mengacu pada DOKUMENTASI-STYLING-ABDIMAS

   PALET
     Teal skala   : 50 #EEF7F9 | 100 #D7F1F4 | 200 #BCE7EC | 300 #80CFD8
                    400 #3CB3C0 | 500 #2FA4B7 (brand) | 600 #1E7F90 (aksi)
                    700 #1A6B78 (link/heading) | 800 #15555F | 900 #0F3F48 (footer/gelap)
     Gold         : #D4AF37 / #EDD87A (dekorasi)  |  #7A5F0F (khusus TEKS)
     Netral       : ink #1E2B2E | muted #4A5A5E | subtle #66777B
                    border #DDE7EA | surface #F4F8F9 | white #FFFFFF

   ATURAN PEMAKAIAN WARNA
     - 500 (brand) & gold biasa : hanya dekorasi (garis, border, gradient, ikon besar)
     - 600 : latar tombol/bar yang berisi teks putih  (4.67:1)
     - 700 : teks link & heading di atas terang       (6.14:1)
     - gold-text : satu-satunya emas untuk teks       (6.05:1)

   DAFTAR PERUBAHAN DARI VERSI SEBELUMNYA
     1. Token: skala teal lengkap, gold-text, netral bertint teal, RGB token
        untuk rgba (ganti satu nilai -> semua bayangan ikut).
     2. Kontras: link, tombol, judul blok, tombol CTA, footer, teks emas.
     3. Semua nilai hard-coded (#444, #666, #888, #F0FAFB, dst.) -> token.
     4. Estetika Abdimas: dropdown border emas, judul blok sidebar gradien +
        garis emas + kapital, hover emas konsisten, footer gradien berlapis,
        banner judul artikel, kartu penulis, panel abstrak/referensi/unduhan,
        ritme warna kartu (3n / 3n+2), selection, scrollbar, focus-visible.
     5. Animasi (semua di dalam prefers-reduced-motion: no-preference):
        garis emas judul halaman tumbuh, judul halaman naik, scroll-reveal
        diperluas ke semua kartu, ring berdenyut emas, kilau banner artikel.
     6. Responsif: breakpoint 991 / 600 yang sebelumnya belum ada.

   BELUM DITERAPKAN (butuh HTML/struktur kustom - lihat catatan di akhir file)
   ===================================================================== */

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
  /* Skala teal */
  --js-primary-50:  #EEF7F9;
  --js-primary-100: #D7F1F4;
  --js-primary-200: #BCE7EC;
  --js-primary-300: #80CFD8;
  --js-primary-400: #3CB3C0;
  --js-primary-500: #2FA4B7;   /* brand: dekorasi saja */
  --js-primary-600: #1E7F90;   /* aksi: latar tombol/bar + teks putih */
  --js-primary-700: #1A6B78;   /* teks link & heading */
  --js-primary-800: #15555F;   /* dasar footer */
  --js-primary-900: #0F3F48;   /* footer, heading gelap */

  /* Peran */
  --js-link:   var(--js-primary-700);
  --js-action: var(--js-primary-600);

  /* Gold: dekorasi vs teks */
  --js-gold:      #D4AF37;
  --js-gold-soft: #EDD87A;
  --js-gold-text: #7A5F0F;     /* khusus teks di atas terang */

  /* Netral bertint teal */
  --js-ink:         #1E2B2E;
  --js-text-muted:  #4A5A5E;
  --js-text-subtle: #66777B;
  --js-gray:        #F4F8F9;   /* surface */
  --js-gray-mid:    #DDE7EA;   /* border */
  --js-paper:       #F8FCFD;   /* latar area konten */
  --js-white:       #FFFFFF;

  /* RGB mentah untuk rgb(var(--x) / alpha) */
  --js-primary-rgb:     47 164 183;
  --js-primary-700-rgb: 26 107 120;
  --js-shadow-rgb:      15 63 72;
  --js-gold-rgb:        212 175 55;

  /* Alias lama (tetap dipakai oleh aturan yang ada) */
  --js-primary:      var(--js-primary-500);
  --js-primary-dark: var(--js-primary-700);
  --js-primary-deep: var(--js-primary-700);
  --js-ice:          var(--js-primary-200);
  --js-ice-light:    var(--js-primary-100);
  --js-dark:         var(--js-ink);

  --js-ease:     cubic-bezier(0.22, 0.8, 0.24, 1);
  --js-shadow-1: 0 2px 10px rgb(var(--js-shadow-rgb) / 0.08);
  --js-shadow-2: 0 14px 32px -12px rgb(var(--js-shadow-rgb) / 0.35);

  --js-bg-image:  none;
  --js-bg-size:   cover;
  --js-bg-repeat: no-repeat;
}

/* =====================================================================
   2. RESET & GLOBALS
   ===================================================================== */
html {
  background: none;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  background-color: var(--js-primary-50);
  background-image:
    radial-gradient(60rem 30rem at 8% -5%,  rgb(var(--js-primary-rgb) / 0.14), transparent 70%),
    radial-gradient(50rem 28rem at 100% 12%, rgb(var(--js-gold-rgb) / 0.10),  transparent 70%),
    var(--js-bg-image);
  background-size: auto, auto, var(--js-bg-size);
  background-repeat: no-repeat, no-repeat, var(--js-bg-repeat);
  background-position: 0 0, 0 0, center top;
  background-attachment: fixed;
}

a {
  color: var(--js-link);
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

/* =====================================================================
   3. HEADER & SITE NAME
   ===================================================================== */
.pkp_site_name .is_img img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  margin-top: -35px;
  margin-bottom: -5px;
  padding: 2px;
}

.pkp_structure_head {
  background: transparent;
  border-bottom: 0;
}

/* Lebar terpusat pada desktop */
@media (min-width: 992px) {
  :root { --js-page: 1170px; }

  .pkp_structure_head .pkp_head_wrapper {
    position: relative;
    max-width: var(--js-page);
    margin-left: auto;
    margin-right: auto;
  }

  .pkp_site_name .is_img img { width: 100%; height: auto; }
  .pkp_site_nav_menu,
  .pkp_navigation_primary_row { width: 100%; box-sizing: border-box; }

  .pkp_navigation_search_wrapper { margin-right: 11rem; }
}

/* =====================================================================
   4. NAVIGASI UTAMA (PRIMARY NAV)
   ===================================================================== */
.pkp_navigation_primary_row {
  width: auto;
  height: auto;
  padding-left: 1em;
  padding-right: 1em;
  background-color: var(--js-action);
  text-decoration: none;
  color: var(--js-white);
  border-bottom-color: transparent;
  /* Garis emas berkilau di bawah navbar */
  background-image: linear-gradient(90deg, var(--js-gold) 0, var(--js-gold-soft) 150px, var(--js-gold) 300px);
  background-size: 300px 0.3em;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-origin: border-box;
}

/* Garis bawah emas saat hover item menu */
.pkp_navigation_primary > li > a {
  position: relative;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  transition: all 0.25s ease;
  display: inline-block;
}

.pkp_navigation_primary > li > a::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--js-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--js-ease);
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus-visible { background-color: rgb(var(--js-shadow-rgb) / 0.28); color: var(--js-white); }
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus-visible::after { transform: scaleX(1); }

/* Dropdown About */

.pkp_navigation_primary ul li a {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}
.pkp_navigation_primary ul li a:hover {
  background-color: var(--js-ice-light);
  color: var(--js-link);
  border-left-color: var(--js-gold);
  padding-left: 1.3rem;
}

.pkp_navigation_primary .dropdown-menu {
  border-top: 3px solid var(--js-gold);
  border-radius: 10px;
  box-shadow: var(--js-shadow-2);
  overflow: hidden;
}

/* Tombol Search */
.pkp_navigation_search_wrapper .pkp_search {
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  transition: all 0.25s ease;
  color: var(--js-white);
}

.pkp_navigation_search_wrapper .pkp_search:hover {
  background-color: var(--js-white);
  color: var(--js-link);
  border-color: var(--js-white);
}

/* =====================================================================
   5. NAVIGASI USER (LOGIN / PROFIL)
   ===================================================================== */
.pkp_navigation_user li {
  text-align: left;
  color: var(--js-white);
}

.pkp_navigation_user > li:last-child > a {
  display: inline-block;
  margin-right: 2rem;
  color: var(--js-white);
}

.pkp_navigation_user li a,
.pkp_navigation_user li span,
.pkp_navigation_user .profile a { color: var(--js-white) !important; }

.pkp_navigation_user .dropdown-menu,
.pkp_navigation_user ul ul { background-color: var(--js-primary-dark) !important; }

.pkp_navigation_user .dropdown-menu a,
.pkp_navigation_user ul ul a { color: var(--js-white) !important; }

.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user ul ul a:hover {
  background-color: var(--js-primary-900) !important;
  color: var(--js-gold-soft) !important;
}

/* Tombol profil */
.profile {
  background-color: var(--js-action) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgb(var(--js-primary-rgb) / 0.4) !important;
  color: var(--js-white) !important;
  transition: box-shadow 0.3s ease !important;
}

.profile:hover {
  background-color: var(--js-primary-dark) !important;
  box-shadow: 0 6px 18px rgb(var(--js-primary-rgb) / 0.6) !important;
  color: var(--js-white) !important;
}

/* =====================================================================
   6. KONTEN UTAMA
   ===================================================================== */
.pkp_structure_content {
  padding-top: 2.143rem;
  background: var(--js-paper);
}

/* Fix halaman About agar tidak mendorong sidebar */
.pkp_page_about .pkp_structure_main,
.pkp_page_editorialPolicies .pkp_structure_main {
  max-width: 100%;
  overflow-x: hidden;
}

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

/* =====================================================================
   7. KARTU "ABOUT THE JOURNAL" (HOMEPAGE)
   ===================================================================== */
.homepage_about {
  position: relative;
  overflow: hidden;
  background: var(--js-white);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgb(var(--js-shadow-rgb) / 0.11);
  padding: 1.25rem !important;
  font-size: 14px;
  color: var(--js-dark);
  line-height: 1.8;
  margin-bottom: 2em;
  transition: box-shadow 0.3s ease;
  border: 1px solid var(--js-gray-mid);
}

.homepage_about:hover {
  box-shadow: 0 6px 20px rgb(var(--js-primary-rgb) / 0.15);
}

/* Garis aksen teal di atas */
.homepage_about::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--js-primary) 0%, var(--js-primary) 40%, var(--js-primary-300) 50%, var(--js-primary) 60%, var(--js-primary) 100%);
  background-size: 200% 100%;
}

/* Tabel info utama */
.homepage_about table:first-of-type {
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
  box-shadow: 0 2px 8px rgb(var(--js-shadow-rgb) / 0.09);
  margin-bottom: 12px;
}

.homepage_about table:first-of-type tr td { transition: filter 0.25s ease, box-shadow 0.35s var(--js-ease); }
.homepage_about table:first-of-type tr:hover td { filter: brightness(0.97); }
.homepage_about table:first-of-type tr:hover td:first-child {
  box-shadow: inset 4px 0 0 var(--js-gold);
}

/* Tabel badge */
.homepage_about table:nth-of-type(2) {
  border: none !important;
  border-radius: 8px;
  background: var(--js-primary-50);
  box-shadow: 0 2px 8px rgb(var(--js-shadow-rgb) / 0.09);
  margin-top: 0;
  margin-bottom: 12px;
  outline: none !important;
}

.homepage_about table:nth-of-type(2) img {
  transition: transform 0.45s var(--js-ease), filter 0.3s ease;
}
.homepage_about table:nth-of-type(2) img:hover { transform: translateY(-3px) scale(1.07); }

/* Tabel summary */
.homepage_about table:last-of-type {
  background: var(--js-primary-50);
  border-left: 4px solid var(--js-primary) !important;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 12px rgb(var(--js-primary-rgb) / 0.08);
  margin-top: 0;
  border: none;
}

.homepage_about table:last-of-type td { padding: 0.75rem 1rem; }

.homepage_about table:last-of-type p {
  margin: 0;
  font-size: 13.5px;
  color: var(--js-text-muted);
  line-height: 1.8;
  text-align: justify;
}

/* Paragraf kosong ( ) disembunyikan */
.homepage_about > table:last-of-type + p { display: none; }

/* =====================================================================
   8. KARTU ARTIKEL (obj_article_summary)
   ===================================================================== */
.obj_article_summary {
  background-color: var(--js-white);
  border-radius: 12px;
  border-left: 4px solid transparent;
  padding-left: 1.25em;
  padding-right: 1.25em;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgb(var(--js-shadow-rgb) / 0.09);
  transition: all 0.25s ease;
}

.obj_article_summary:hover {
  background-color: var(--js-primary-50);
  border: none;
  border-left: 4px solid var(--js-gold);
  padding-left: 1.25em;
  padding-right: 1.25em;
  padding-top: 1em;
  padding-bottom: 1em;
  box-shadow: 0 8px 24px rgb(var(--js-primary-rgb) / 0.18);
  transform: translateY(-3px);
}

.obj_article_summary > .title a { text-decoration: none; }

.obj_article_summary .title a {
  font-weight: 600;
  color: var(--js-primary-deep);
  font-size: 15.5px;
  line-height: 1.5;
  /* Garis bawah emas saat hover */
  background: linear-gradient(var(--js-gold), var(--js-gold)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.55s var(--js-ease), color 0.25s ease;
  padding-bottom: 2px;
}

.obj_article_summary .title a:hover { background-size: 100% 2px; }
.obj_article_summary:hover .title a { color: var(--js-link); }

.obj_article_summary .meta {
  margin-top: 0.4rem;
  font-size: 13px;
  color: var(--js-text-muted);
}

.obj_article_summary .meta .authors { font-style: italic; }
.obj_article_summary .galleys_links { margin-top: 0.5rem; }

/* Tombol PDF */
.obj_article_summary .obj_galley_link.pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  background-color: var(--js-action);
  color: var(--js-white);
  padding: 3px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.35s var(--js-ease), box-shadow 0.35s var(--js-ease);
}

.obj_article_summary .obj_galley_link.pdf::before {
  content: "";
  width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.35s var(--js-ease);
}

.obj_article_summary .obj_galley_link.pdf:hover {
  background-color: var(--js-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px var(--js-primary-dark);
}
.obj_article_summary .obj_galley_link.pdf:hover::before { transform: translateY(2px); }

/* =====================================================================
   9. ABSTRACT & ARTICLE DETAIL
   ===================================================================== */
.obj_article_details .abstract { text-align: justify; }
.value { text-align: justify; }

.page_title {
  text-align: justify;
  padding: 0;
}

section.item.keywords {
  font-style: italic;
  font-weight: bold;
}

.csl-entry { font-weight: bold; }

/* =====================================================================
   10. SIDEBAR BLOCKS (pkp_block)
   ===================================================================== */
.pkp_block {
  font-size: 14px;
  line-height: 20px;
  border-radius: 12px !important;
  background: var(--js-white) !important;
  box-shadow: 0 6px 20px rgb(var(--js-shadow-rgb) / 0.13) !important;
  border: none !important;
  padding: 1px !important;
  margin: 0 0 15px !important;
  transition: transform 0.45s var(--js-ease), box-shadow 0.45s var(--js-ease);
}

.pkp_block:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgb(var(--js-primary-700-rgb) / 0.16) !important;
}

/* Judul blok */
.pkp_block .title {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(100deg, var(--js-primary-600), var(--js-primary-700));
  height: 35px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--js-white);
  padding-top: 6px;
  margin-bottom: 0;
  border-bottom: 3px solid var(--js-gold);
  text-align: left;
  padding-left: 10px;
  display: block;
  border-radius: 10px 10px 0 0;
}

/* Kilau melintas di judul blok saat hover */
.pkp_block .title::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  translate: -130% 0;
  pointer-events: none;
}
.pkp_block:hover .title::after { translate: 230% 0; transition: translate 0.9s var(--js-ease); }

/* Konten blok */
.pkp_block .content {
  background-color: var(--js-gray);
  padding: 10px;
  margin: 0;
  display: block;
  border-radius: 0 0 12px 12px;
}

.pkp_block .content ul li {
  padding: 0;
  background-color: transparent;
}

.pkp_block li {
  position: relative;
  display: block;
}

.pkp_block ul > li a {
  color: var(--js-link);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--js-ice-light);
  display: flex;
  align-items: center;
  font-size: 13.5px;
  transition: background 0.2s ease, color 0.2s ease;
}

.pkp_block ul > li a:hover {
  text-decoration: none;
  background-color: var(--js-ice-light);
  color: var(--js-primary-deep);
  padding-left: 1.1rem;
}

.pkp_block ul > li:last-child a { border-bottom: none; }

/* BlockTitle sidebar */
#leftSidebar div.block span.blockTitle,
#rightSidebar div.block span.blockTitle {
  padding: 0;
  border-bottom: 0;
  background: var(--js-white);
  color: var(--js-ice-light);
  text-transform: none !important;
  font-size: 1em;
}

.pkp_structure_sidebar:before { border-left: 1px solid var(--js-gray-mid); }

/* =====================================================================
   11. SIDEMENU (CUSTOM BLOCKS)
   ===================================================================== */
ul.sidemenu {
  margin-top: 0;
  padding-left: 0 !important;
}

ul.sidemenu.full { margin: 0; }
ul.sidemenu li:before { display: none; }
ul.sidemenu li { margin-bottom: 6px; }
ul.sidemenu li:last-child { margin-bottom: 0; }

ul.sidemenu li a {
  display: block;
  padding: 0.6rem 0.85rem;
  background-color: var(--js-white);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgb(var(--js-shadow-rgb) / 0.09);
  font-family: 'Lato', Helvetica, sans-serif;
  text-decoration: none;
  color: var(--js-link);
  font-size: 1em;
  transition: all 0.25s ease;
  border-left: 3px solid transparent;
}

ul.sidemenu li a:hover {
  background-color: var(--js-ice-light);
  color: var(--js-primary-deep);
  text-decoration: none;
  box-shadow: 0 4px 12px rgb(var(--js-primary-rgb) / 0.18);
  transform: translateY(-1px);
  border-left: 3px solid var(--js-gold);
  padding-left: 1.05rem;
}

/* =====================================================================
   12. BLOCK LIST & MAKE SUBMISSION
   ===================================================================== */
.block ul { padding: 0; list-style: none; }
.block li:before { display: none; }
.block li { padding: 0; }

.block_make_submission a, .obj_galley_link {
  display: inline-block;
  background-color: var(--js-white);
  color: var(--js-link);
  width: 100%;
  text-align: center;
  padding-left: 15px;
  text-decoration: initial;
}

/* CTA Tombol Make a Submission */
.block_make_submission .block_make_submission_link {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--js-action), var(--js-primary-700));
  color: var(--js-white);
  font-weight: 700;
  box-shadow: 0 8px 18px -8px rgb(var(--js-primary-rgb) / 0.9);
  transition: transform 0.35s var(--js-ease), box-shadow 0.35s var(--js-ease);
}

.block_make_submission .block_make_submission_link::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.30), transparent);
}

.block_make_submission .block_make_submission_link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -10px rgb(var(--js-primary-rgb) / 1);
  color: var(--js-white);
}

/* =====================================================================
   13. TOMBOL REGISTER / BUTTON
   ===================================================================== */
.button {
  border: none;
  border-radius: 8px;
  background-color: var(--js-white);
  color: var(--js-white);
  padding: 10px 62px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: var(--js-action);
  border: none;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgb(var(--js-primary-rgb) / 0.4);
  color: var(--js-white);
  transition: box-shadow 0.3s ease;
}

.button1:hover {
  background-color: var(--js-primary-dark);
  box-shadow: 0 6px 18px rgb(var(--js-primary-rgb) / 0.6);
  color: var(--js-white);
}

/* =====================================================================
   14. HOVER TABLE (tabel di konten custom)
   ===================================================================== */
.hover { width: 100%; border-collapse: collapse; }
.hover th { height: 0; background: none; color: var(--js-link); }
.hover td {
  height: 0;
  padding-top: 0;
  vertical-align: middle;
  border-bottom: 0 solid var(--js-white);
  text-align: center;
}
.hover td a { width: 100%; display: block; }
.hover tr { background: var(--js-ice-light); color: var(--js-white); }
.hover tr:hover { background-color: var(--js-ice); }
.hover tr a { color: var(--js-ink); padding-left: 1em; }
.hover a:hover { color: var(--js-ink); }

/* =====================================================================
   15. TABLE CONTENT
   ===================================================================== */
.tableContent { width: 399.5px; height: 114.5px; }

/* =====================================================================
   16. HOMEPAGE — CURRENT ISSUE & READ MORE
   ===================================================================== */
.pkp_page_index .current_issue .read_more { color: var(--js-link); }

.pkp_page_index .read_more {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  transition: letter-spacing 0.35s var(--js-ease), color 0.25s ease;
}
.pkp_page_index .read_more:hover { letter-spacing: 0.04em; color: var(--js-gold-text); }

/* Cover issue */
.pkp_page_index .obj_issue_toc .cover {
  display: inline-block;
  border-radius: 10px;
  box-shadow: 0 18px 36px -14px rgb(var(--js-primary-700-rgb) / 0.55), 0 0 0 1px rgb(var(--js-primary-700-rgb) / 0.12);
  transition: transform 0.6s var(--js-ease), box-shadow 0.6s var(--js-ease);
}
.pkp_page_index .obj_issue_toc .cover img { border-radius: 10px; display: block; }
.pkp_page_index .obj_issue_toc .cover:hover {
  transform: translateY(-6px) rotate(-1.2deg);
  box-shadow: 0 28px 48px -16px rgb(var(--js-primary-700-rgb) / 0.6), 0 0 0 1px rgb(var(--js-primary-700-rgb) / 0.12);
}

.pkp_page_index .obj_issue_toc .sections h3 {
  color: var(--js-primary-deep);
  border-bottom: 2px solid var(--js-ice-light);
  padding-bottom: 0.4rem;
}

/* Judul section homepage */
.page_index_journal > section > h2 {
  position: relative;
  padding-bottom: 0.55rem;
  color: var(--js-primary-deep);
}
.page_index_journal > section > h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 3px;
  border-radius: 3px;
  background: var(--js-gold);
  transition: width 0.6s var(--js-ease);
}
.page_index_journal > section:hover > h2::after { width: 96px; }

/* =====================================================================
   17. ANNOUNCEMENTS
   ===================================================================== */
.obj_announcement_summary .read_more { color: var(--js-link); }

.cmp_announcements .obj_announcement_summary {
  position: relative;
  overflow: hidden;
  background: var(--js-white);
  border-radius: 12px;
  border: 1px solid var(--js-gray-mid);
  border-left: 4px solid var(--js-primary);
  box-shadow: var(--js-shadow-1);
  padding: 1.1rem 1.3rem;
  transition: transform 0.45s var(--js-ease), box-shadow 0.45s var(--js-ease);
}
.cmp_announcements .obj_announcement_summary:hover {
  border-left-color: var(--js-gold);
  transform: translateY(-3px);
  box-shadow: var(--js-shadow-2);
}
.cmp_announcements .obj_announcement_summary h3 a {
  color: var(--js-primary-deep);
  text-decoration: none;
}
.cmp_announcements .obj_announcement_summary .date {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--js-ice-light);
  color: var(--js-primary-dark);
  font-size: 12px;
  font-weight: 700;
}
.cmp_announcements .obj_announcement_summary .summary img {
  border-radius: 8px;
  transition: transform 0.7s var(--js-ease);
}
.cmp_announcements .obj_announcement_summary:hover .summary img { transform: scale(1.025); }

/* =====================================================================
   18. FOOTER
   ===================================================================== */
.pkp_brand_footer {
  background: var(--js-primary-700);
  display: none;
}

.pkp_footer_content {
  background: transparent;
  color: var(--js-white);
}

.pkp_footer_content a {
  text-decoration: none;
  color: var(--js-white);
}

.pkp_footer_content a:hover {
  text-decoration: none;
  color: var(--js-gold-soft);
}

.pkp_structure_footer_wrapper {
  position: relative;
  overflow: hidden;
  border: none;
  background:
    radial-gradient(44rem 20rem at 100% 0, rgb(var(--js-gold-rgb) / 0.16), transparent 70%),
    radial-gradient(36rem 18rem at 0 100%, rgb(255 255 255 / 0.07), transparent 70%),
    linear-gradient(135deg, var(--js-primary-800), var(--js-primary-900));
}

/* Lingkaran dekoratif */
.pkp_structure_footer_wrapper::after {
  content: "";
  position: absolute;
  right: -90px; bottom: -140px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.05);
  pointer-events: none;
}

.pkp_structure_footer { position: relative; z-index: 1; background: transparent; }

/* Garis emas di atas footer */
.pkp_structure_footer_wrapper::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--js-gold), var(--js-gold-soft), var(--js-gold));
  background-size: 200% 100%;
}

/* =====================================================================
   19. EDITORIAL TEAM
   ===================================================================== */
.editorial-list { position: relative; }
.editorial-list li { margin-bottom: 1.125rem; }
.editorial-list .img-profile {
  position: absolute;
  width: 95px;
  height: 105px;
  border: 1px solid var(--js-gray-mid);
  padding: .5rem;
}
.editorial-list .img-profile .imgthumb {
  width: 80px;
  height: 90px;
  overflow: hidden;
  margin: 0 auto;
  object-fit: fill;
}
.editorial-list .img-profile img { width: 100%; height: 100%; }

.team-content { margin-left: 100px; min-height: 130px; }
.team-content .ico-label { width: 18px; height: 18px; margin-right: .5rem; }
.team-aff ul li { margin-bottom: 0; }
.team-aff ul li .tm_label { display: inline-block; width: 80px; }
.team-aff ul li .ico-label { width: 18px; height: 18px; margin-right: .5rem; }

/* =====================================================================
   20. INFORMASI JURNAL (info-card, badge-row, summary-card)
   ===================================================================== */
.journal-wrap { font-family: 'Lato', Helvetica, sans-serif; padding: 0; }

.info-card {
  background: var(--js-white);
  border-radius: 12px;
  border: 1px solid var(--js-gray-mid);
  box-shadow: 0 4px 16px rgb(var(--js-shadow-rgb) / 0.11);
  overflow: hidden;
  margin-bottom: 1rem;
}

.info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--js-gray);
}
.info-row:last-child { border-bottom: none; }

.info-label {
  background: var(--js-action);
  color: var(--js-white);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-value {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--js-dark);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--js-white);
}

.info-row:nth-child(even) .info-value { background: var(--js-primary-50); }
.info-value a { color: var(--js-link); text-decoration: none; }
.info-value a:hover { text-decoration: underline; }

.badge-row {
  background: var(--js-white);
  border-radius: 12px;
  border: 1px solid var(--js-gray-mid);
  box-shadow: 0 4px 16px rgb(var(--js-shadow-rgb) / 0.11);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.badge-item { display: flex; align-items: center; justify-content: center; }
.badge-item img { max-height: 48px; max-width: 120px; object-fit: contain; }

.summary-card {
  background: var(--js-primary-50);
  border-radius: 12px;
  border-left: 4px solid var(--js-primary);
  box-shadow: 0 4px 16px rgb(var(--js-shadow-rgb) / 0.09);
  padding: 1rem 1.25rem;
  font-size: 13px;
  color: var(--js-text-muted);
  line-height: 1.7;
  text-align: justify;
}

.summary-card strong { color: var(--js-ink); }

/* =====================================================================
   21. HALAMAN ABOUT (about-wrap)
   ===================================================================== */
.about-wrap { padding: 0; }

.about-wrap .info-card {
  background: var(--js-white);
  border-radius: 12px;
  border: 1px solid var(--js-gray-mid);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 10px rgb(var(--js-primary-rgb) / 0.08);
}

.about-wrap .info-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  border-bottom: 1px solid var(--js-gray);
}

.about-wrap .info-row:last-child { border-bottom: none; }

.about-wrap .info-label {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--js-primary-deep);
  background: var(--js-ice-light);
}

.about-wrap .info-value { padding: 10px 14px; font-size: 13px; color: var(--js-dark); }
.about-wrap .info-value a { color: var(--js-link); text-decoration: none; }
.about-wrap .info-value a:hover { text-decoration: underline; }

.about-wrap .section-card {
  background: var(--js-primary-50);
  border-left: 4px solid var(--js-primary);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.about-wrap .section-card h3 { margin: 0 0 0.5rem; color: var(--js-primary-deep); }
.about-wrap .section-card p {
  margin: 0 0 0.5rem;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--js-text-muted);
  text-align: justify;
}
.about-wrap .section-card p:last-child { margin-bottom: 0; }

.about-wrap .scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.about-wrap .scope-item {
  background: var(--js-ice-light);
  color: var(--js-primary-deep);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
}

.about-wrap .accred-img {
  width: 100%;
  max-width: 320px;
  border-radius: 8px;
  display: block;
  margin: 0 auto 0.75rem;
  border: 1px solid var(--js-gray-mid);
}

.about-wrap .badge-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--js-primary-50);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--js-gray-mid);
}
.about-wrap .badge-row img { max-height: 36px; max-width: 120px; object-fit: contain; }

.about-wrap .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }

.about-wrap .grid-card {
  background: var(--js-white);
  border-radius: 12px;
  border: 1px solid var(--js-gray-mid);
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 10px rgb(var(--js-shadow-rgb) / 0.09);
}
.about-wrap .grid-card h3 { margin: 0 0 0.6rem; color: var(--js-primary-deep); }
.about-wrap .grid-card ul { margin: 0; padding-left: 0; list-style: none; }
.about-wrap .grid-card li {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--js-gray);
  padding-bottom: 0.5rem;
}
.about-wrap .grid-card li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.about-wrap .grid-card li a {
  color: var(--js-link);
  text-decoration: none;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}
.about-wrap .grid-card li a:hover { color: var(--js-primary-deep); text-decoration: none; }

/* =====================================================================
   22. HALAMAN ARCHIVES (issues_archive)
   ===================================================================== */
.page_issue_archive > h1 {
  position: relative;
  margin: 0 0 1.75rem;
  padding-bottom: 14px;
  color: var(--js-primary-deep);
}
.page_issue_archive > h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 2px;
  background: var(--js-gold);
}

.page_issue_archive .issues_archive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.page_issue_archive .obj_issue_summary {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  align-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--js-white);
  border: 1px solid var(--js-gray-mid);
  border-left: 4px solid var(--js-primary);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgb(var(--js-primary-rgb) / 0.08);
  transition: all 0.25s ease;
}
.page_issue_archive .obj_issue_summary:hover {
  border-left-color: var(--js-gold);
  box-shadow: 0 8px 24px rgb(var(--js-primary-rgb) / 0.18);
  transform: translateY(-3px);
}

.page_issue_archive .obj_issue_summary .title { color: var(--js-primary-deep); font-weight: 700; text-decoration: none; }
.page_issue_archive .obj_issue_summary .title:hover { color: var(--js-link); }

.page_issue_archive .obj_issue_summary .series {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  background: var(--js-ice-light);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--js-primary-deep);
}

/* Pagination Archives */
.page_issue_archive .cmp_pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 1rem;
  font-size: 13px;
}
.page_issue_archive .cmp_pagination .current {
  padding: 6px 16px;
  background: var(--js-ice-light);
  border-radius: 999px;
  font-weight: 600;
  color: var(--js-primary-deep);
}
.page_issue_archive .cmp_pagination .prev,
.page_issue_archive .cmp_pagination .next {
  display: inline-block;
  padding: 6px 18px;
  background: var(--js-action);
  border: 1px solid var(--js-action);
  border-radius: 999px;
  color: var(--js-white);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.page_issue_archive .cmp_pagination .prev:hover,
.page_issue_archive .cmp_pagination .next:hover {
  background: var(--js-primary-deep);
  border-color: var(--js-primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(var(--js-primary-rgb) / 0.3);
}

@media (max-width: 768px) { .page_issue_archive .issues_archive { grid-template-columns: 1fr; } }

/* =====================================================================
   23. HALAMAN DETAIL ISSUE (page_issue)
   ===================================================================== */
.page_issue > h1 {
  position: relative;
  margin: 0 0 1.5rem;
  padding-bottom: 14px;
  color: var(--js-primary-deep);
}
.page_issue > h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 2px;
  background: var(--js-gold);
}

.page_issue .obj_issue_toc .heading {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--js-primary-50) 0%, var(--js-white) 100%);
  border: 1px solid var(--js-gray-mid);
  border-left: 4px solid var(--js-primary);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgb(var(--js-primary-rgb) / 0.08);
}

.page_issue .obj_issue_toc .published {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--js-ice-light);
  border-radius: 999px;
  font-size: 13px;
  color: var(--js-primary-deep);
}

.page_issue .obj_issue_toc .published .label { font-weight: 400; color: var(--js-text-muted); }
.page_issue .obj_issue_toc .published .value { font-weight: 700; }

.page_issue .obj_issue_toc .section > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 1.25rem;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--js-ice-light);
  font-size: 1.25rem;
  color: var(--js-primary-deep);
}
.page_issue .obj_issue_toc .section > h2::before {
  content: "";
  width: 5px;
  height: 1.1em;
  border-radius: 3px;
  background: var(--js-gold);
}

.page_issue .obj_article_summary .meta .pages {
  padding: 2px 10px;
  background: var(--js-ice-light);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--js-primary-deep);
}
.page_issue .obj_article_summary .meta .pages::before { content: "pp. "; font-weight: 400; }

/* =====================================================================
   24. HALAMAN ANNOUNCEMENTS (page_announcements)
   ===================================================================== */
.page_announcements > h1 {
  position: relative;
  margin: 0 0 1.25rem;
  padding-bottom: 14px;
  color: var(--js-primary-deep);
}
.page_announcements > h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 2px;
  background: var(--js-gold);
}

.page_announcements .obj_announcement_summary {
  padding: 1.5rem 1.75rem;
  background: var(--js-white);
  border: 1px solid var(--js-gray-mid);
  border-left: 4px solid var(--js-primary);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgb(var(--js-primary-rgb) / 0.08);
  transition: all 0.25s ease;
}
.page_announcements .obj_announcement_summary:hover {
  border-left-color: var(--js-gold);
  box-shadow: 0 8px 24px rgb(var(--js-primary-rgb) / 0.18);
  transform: translateY(-3px);
}

.page_announcements .obj_announcement_summary > h2 a {
  color: var(--js-primary-deep);
  font-weight: 700;
  text-decoration: none;
}
.page_announcements .obj_announcement_summary > h2 a:hover { color: var(--js-link); }

.page_announcements .obj_announcement_summary .date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  background: var(--js-ice-light);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--js-primary-deep);
}
.page_announcements .obj_announcement_summary .date::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--js-gold);
}

.page_announcements .obj_announcement_summary .read_more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  background: var(--js-action);
  border: 1px solid var(--js-action);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--js-white);
  text-decoration: none;
  transition: all 0.2s ease;
}
.page_announcements .obj_announcement_summary .read_more::after {
  content: "→";
  transition: transform 0.2s ease;
}
.page_announcements .obj_announcement_summary .read_more:hover {
  background: var(--js-primary-deep);
  border-color: var(--js-primary-deep);
  box-shadow: 0 4px 12px rgb(var(--js-primary-rgb) / 0.3);
  transform: translateY(-2px);
}
.page_announcements .obj_announcement_summary .read_more:hover::after { transform: translateX(3px); }

/* =====================================================================
   25. HALAMAN CONTACT (page_contact)
   ===================================================================== */
.page_contact h1 {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 14px;
  color: var(--js-primary-deep);
}
.page_contact h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 2px;
  background: var(--js-gold);
}

.page_contact .contact,
.page_contact .contact.primary,
.page_contact .contact.support {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 0 18px;
  background: var(--js-white);
  border: 1px solid var(--js-gray-mid);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgb(var(--js-shadow-rgb) / 0.09);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.page_contact .contact:hover {
  box-shadow: 0 6px 18px rgb(var(--js-primary-rgb) / 0.18);
  transform: translateY(-2px);
}

.page_contact .contact > h2,
.page_contact .contact > h3 {
  margin: 0 0 16px;
  padding: 11px 20px;
  background: var(--js-action);
  border-bottom: 3px solid var(--js-gold);
  color: var(--js-white);
  font-size: 15px;
  line-height: 1.4;
}

.page_contact .contact .name {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--js-primary-deep);
}

.page_contact .contact_section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* =====================================================================
   26. HALAMAN SUBMISSIONS (page_submissions)
   ===================================================================== */
.page_submissions h1 {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 14px;
  color: var(--js-primary-deep);
}
.page_submissions h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 2px;
  background: var(--js-gold);
}

.page_submissions .submission_checklist,
.page_submissions .author_guidelines,
.page_submissions .copyright_notice,
.page_submissions .privacy_statement {
  margin: 0 0 1.5rem;
  padding: 0 22px 22px;
  background: var(--js-white);
  border: 1px solid var(--js-gray-mid);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgb(var(--js-shadow-rgb) / 0.09);
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--js-text-muted);
  text-align: justify;
}

.page_submissions .submission_checklist > h2,
.page_submissions .author_guidelines > h2,
.page_submissions .copyright_notice > h2,
.page_submissions .privacy_statement > h2 {
  margin: 0 -22px 18px;
  padding: 11px 22px;
  background: var(--js-action);
  border-bottom: 3px solid var(--js-gold);
  color: var(--js-white);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.page_submissions h2::before {
  margin-right: 10px;
  font: normal normal normal 15px/1 FontAwesome;
  color: var(--js-gold);
}

.page_submissions .submission_checklist > h2::before { content: "\f046"; }
.page_submissions .author_guidelines > h2::before    { content: "\f02d"; }
.page_submissions .copyright_notice > h2::before     { content: "\f1f9"; }
.page_submissions .privacy_statement > h2::before    { content: "\f023"; }

/* Checklist items */
.page_submissions .submission_checklist li {
  position: relative;
  margin-bottom: 8px;
  padding: 10px 14px 10px 52px;
  background: var(--js-primary-50);
  border-radius: 8px;
  transition: background 0.2s ease;
}
.page_submissions .submission_checklist li:hover { background: var(--js-ice-light); }

.pkp_structure_main .page_submissions .submission_checklist li .fa {
  position: absolute;
  top: 10px; left: 14px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--js-action);
  color: var(--js-white);
  font-size: 12px;
  line-height: 26px;
  text-align: center;
}

/* =====================================================================
   27. HALAMAN EDITORIAL POLICIES
   ===================================================================== */
:is(#focusandscope, #sectionpolicies, #peerreviewprocess, #publicationfrequency,
    #openaccesspolicy, #archiving, #publicationethicsandmalpractice, #abstractingandindexing) {
  margin: 0 0 1.5rem;
  padding: 0 22px 22px;
  background: var(--js-white);
  border: 1px solid var(--js-gray-mid);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgb(var(--js-shadow-rgb) / 0.09);
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--js-text-muted);
  scroll-margin-top: 20px;
}

:is(#focusandscope, #sectionpolicies, #peerreviewprocess, #publicationfrequency,
    #openaccesspolicy, #archiving, #publicationethicsandmalpractice, #abstractingandindexing) > h2 {
  margin: 0 -22px 18px;
  padding: 11px 22px;
  background: var(--js-action);
  border-bottom: 3px solid var(--js-gold);
  color: var(--js-white);
  font-size: 15px;
  line-height: 1.5;
}

:is(#focusandscope, #sectionpolicies, #peerreviewprocess, #publicationfrequency,
    #openaccesspolicy, #archiving, #publicationethicsandmalpractice, #abstractingandindexing) > h2::before {
  margin-right: 10px;
  font: normal normal normal 15px/1 FontAwesome;
  color: var(--js-gold);
}

#focusandscope > h2::before                   { content: "\f140"; }
#sectionpolicies > h2::before                 { content: "\f0ae"; }
#peerreviewprocess > h2::before               { content: "\f0c0"; }
#publicationfrequency > h2::before            { content: "\f073"; }
#openaccesspolicy > h2::before                { content: "\f09c"; }
#archiving > h2::before                       { content: "\f187"; }
#publicationethicsandmalpractice > h2::before { content: "\f132"; }
#abstractingandindexing > h2::before          { content: "\f1c0"; }

/* Focus & Scope: grid topik */
#focusandscope li {
  margin: 0;
  padding: 9px 14px;
  background: var(--js-ice-light);
  border-left: 3px solid var(--js-primary);
  border-radius: 6px;
  color: var(--js-primary-deep);
  font-weight: 600;
  transition: all 0.25s ease;
}
#focusandscope li:hover { background: var(--js-action); color: var(--js-white); transform: translateY(-2px); }

/* Abstracting & Indexing: logo kartu */
#abstractingandindexing td {
  padding: 14px 12px;
  background: var(--js-white);
  border: 1px solid var(--js-ice-light);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgb(var(--js-primary-rgb) / 0.10);
  transition: all 0.25s ease;
}
#abstractingandindexing td:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgb(var(--js-primary-rgb) / 0.20);
}

/* =====================================================================
   28. CUSTOM BLOCKS KHUSUS JISAD
   ===================================================================== */

/* Navigation sidebar */
#customblock-side-navigation ul.sidemenu li a {
  transition: all 0.25s ease;
  border-left: 3px solid transparent;
}
#customblock-side-navigation ul.sidemenu li a:hover {
  background-color: var(--js-ice-light);
  color: var(--js-primary-deep);
  border-left: 3px solid var(--js-gold);
  padding-left: 1.3rem;
  transform: translateX(2px);
}

/* Recent Issue */
#customblock-recent-issue ul.sidemenu li a {
  transition: all 0.25s ease;
  border-left: 3px solid transparent;
}
#customblock-recent-issue ul.sidemenu li a:hover {
  background-color: var(--js-ice-light);
  color: var(--js-primary-deep);
  border-left: 3px solid var(--js-gold);
  padding-left: 1.3rem;
  transform: translateX(2px);
}

/* Information block */
.block_information ul li a {
  transition: all 0.25s ease;
  border-left: 3px solid transparent;
  display: block;
  padding: 0.5rem 0.75rem;
}
.block_information ul li a:hover {
  background-color: var(--js-ice-light);
  color: var(--js-primary-deep);
  border-left: 3px solid var(--js-gold);
  padding-left: 1.3rem;
  transform: translateX(2px);
  text-decoration: none;
}

/* Download template block */
.download-template-block {
  padding: 0.75rem 0.5rem;
  text-align: center;
}
.download-template-block .dl-icon {
  font-size: 32px;
  color: var(--js-link);
  margin-bottom: 0.6rem;
}
.download-template-block .dl-button {
  display: block;
  background-color: var(--js-action);
  color: var(--js-white);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 0.6rem;
  transition: background-color 0.2s ease, transform 0.35s var(--js-ease), box-shadow 0.35s var(--js-ease);
}
.download-template-block .dl-button:hover {
  background-color: var(--js-primary-dark);
  color: var(--js-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px -10px var(--js-primary-dark);
}
.download-template-block .dl-button.outline {
  background-color: var(--js-white);
  color: var(--js-link);
  border: 1.5px solid var(--js-primary);
  margin-bottom: 0;
}
.download-template-block .dl-button.outline:hover {
  background-color: var(--js-ice-light);
  color: var(--js-link);
}

/* Member of block */
.member-of-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.member-of-block a { display: block; width: 100%; text-align: center; }
.member-of-block img {
  max-width: 100%;
  height: auto;
  max-height: 70px;
  object-fit: contain;
  transition: transform 0.4s var(--js-ease), filter 0.3s ease;
}
.member-of-block a:hover img { transform: scale(1.06); }

/* ISSN box */
.issn-box { padding: 4px 2px 2px; }
.issn-box .issn-card {
  display: block;
  margin: 0 0 10px;
  padding: 10px 14px;
  text-align: left;
  background: var(--js-white);
  border: 1px solid var(--js-ice-light);
  border-left: 5px solid var(--js-primary);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgb(var(--js-primary-rgb) / 0.10);
  text-decoration: none;
  transition: all 0.25s ease;
}
.issn-box .issn-card:last-child { margin-bottom: 0; }
.issn-box .issn-card.online { border-left-color: var(--js-gold); }
.issn-box .issn-card:hover {
  background: var(--js-primary-50);
  box-shadow: 0 6px 16px rgb(var(--js-primary-rgb) / 0.20);
  transform: translateY(-2px);
  text-decoration: none;
}
.issn-box .issn-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--js-text-subtle);
}
.issn-box .issn-number {
  display: block;
  margin-top: 2px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--js-primary-deep);
}
.issn-box .issn-card.online:hover .issn-number { color: var(--js-gold-text); }

/* Citation box */
.citation-box .citation-total {
  text-align: center;
  background: var(--js-white);
  border: 1px solid var(--js-ice-light);
  border-radius: 10px;
  padding: 10px 8px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgb(var(--js-primary-rgb) / 0.10);
}
.citation-box .citation-total strong {
  display: block;
  font-size: 28px;
  line-height: 1.2;
  color: var(--js-primary-deep);
}
.citation-box .cn { color: var(--js-primary-deep); font-weight: 700; }
.citation-box meter::-webkit-meter-optimum-value {
  border-radius: 7px;
  background: linear-gradient(90deg, var(--js-ice), var(--js-primary));
}
.citation-box .cr.top .cn { color: var(--js-gold-text); }
.citation-box .cr.top meter::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, var(--js-gold-soft), var(--js-gold));
}
.citation-box .citation-link { color: var(--js-link); }
.citation-box .citation-link:hover { color: var(--js-primary-deep); }

/* Visitor box */
.visitor-box .vs-btn {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 20px;
  background: var(--js-action);
  color: var(--js-white);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 8px rgb(var(--js-primary-rgb) / 0.35);
  transition: all 0.25s ease;
}
.visitor-box .vs-btn:hover {
  background: var(--js-primary-900);
  color: var(--js-gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgb(var(--js-primary-rgb) / 0.45);
}

/* Scopus badge editorial */
.team-grid .member-info .scopus {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 11px;
  border-radius: 20px;
  background: var(--js-ice-light);
  color: var(--js-primary-deep);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.team-grid .member-info .scopus:hover {
  background: var(--js-action);
  color: var(--js-white);
  text-decoration: none;
}

/* =====================================================================
   29. PKPBRANDING & MISC
   ===================================================================== */
.pkp_page_index .current_issue .read_more { color: var(--js-link); }
.pkp_site_name_wrapper { background-color: transparent; }

/* =====================================================================
   30. KEYFRAMES
   ===================================================================== */
@keyframes js-rise    { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes js-fade    { from { opacity: 0; }                   to { opacity: 1; } }
@keyframes js-shimmer { from { background-position: 0% 0; }    to { background-position: 200% 0; } }
@keyframes js-float   { from { translate: 0 -4px; }            to { translate: 0 6px; } }
@keyframes js-reveal  { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes js-bar     { from { clip-path: inset(0 100% 0 0 round 6px); } to { clip-path: inset(0 0 0 0 round 6px); } }
@keyframes js-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes js-gold-slide { from { background-position: 0 100%; } to { background-position: 300px 100%; } }

/* =====================================================================
   31. ANIMASI (hanya aktif jika reduce-motion TIDAK aktif)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Navbar garis emas berkilau */
  .pkp_navigation_primary_row { animation: js-gold-slide 6s linear infinite; }

  /* Garis atas About & Footer berkilau */
  .homepage_about::before     { animation: js-shimmer 9s linear infinite; }
  .pkp_structure_footer_wrapper::before { animation: js-shimmer 7s linear infinite; }

  /* Kilau melintas di tombol Make a Submission */
  .block_make_submission .block_make_submission_link::after { animation: none; }
  .block_make_submission .block_make_submission_link:hover::after { animation: none; }

  /* Cover issue melayang */
  .pkp_page_index .obj_issue_toc .cover { animation: js-float 5s ease-in-out infinite alternate; }
  .pkp_page_index .obj_issue_toc .cover:hover { animation-play-state: paused; }

  /* Pembuka halaman homepage */
  .pkp_page_index .page_index_journal > section {
    animation: js-rise 0.9s var(--js-ease) both;
  }
  .pkp_page_index .page_index_journal > section:nth-of-type(2) { animation-delay: 0.12s; }
  .pkp_page_index .page_index_journal > section:nth-of-type(3) { animation-delay: 0.24s; }

  /* Sidebar blocks muncul */
  .pkp_structure_sidebar .pkp_block { animation: js-fade 1s ease both; }
  .pkp_structure_sidebar .pkp_block:nth-child(1) { animation-delay: 0.25s; }
  .pkp_structure_sidebar .pkp_block:nth-child(2) { animation-delay: 0.32s; }
  .pkp_structure_sidebar .pkp_block:nth-child(3) { animation-delay: 0.39s; }
  .pkp_structure_sidebar .pkp_block:nth-child(4) { animation-delay: 0.46s; }
  .pkp_structure_sidebar .pkp_block:nth-child(n+5) { animation-delay: 0.5s; }

  /* Scroll-driven (Chrome/Edge/Safari 26+) */
  @supports (animation-timeline: view()) {
    .cmp_article_list .obj_article_summary {
      animation: js-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }

    .citation-box meter {
      animation: js-bar linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }

    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      z-index: 9999;
      background: var(--js-gold);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: js-progress linear both;
      animation-timeline: scroll(root);
      pointer-events: none;
    }
  }
}

/* =====================================================================
   32. AKSESIBILITAS & DETAIL HALUS
   ===================================================================== */
/* Fokus keyboard: teal gelap di latar terang, emas di latar gelap */
:focus-visible { outline: 2px solid var(--js-primary-700); outline-offset: 3px; }
.pkp_navigation_primary_row :focus-visible,
.pkp_navigation_user :focus-visible,
.pkp_structure_footer_wrapper :focus-visible,
.pkp_block .title :focus-visible { outline-color: var(--js-gold); }

::selection { background: var(--js-primary-200); color: var(--js-primary-900); }

html { scrollbar-color: var(--js-primary-500) var(--js-primary-50); }

/* Judul tidak menyisakan satu kata yatim (progressive enhancement) */
h1, h2, h3 { text-wrap: balance; }

/* Teks panjang rata kiri di layar sempit */
@media (max-width: 600px) {
  .obj_article_details .abstract,
  .value,
  .summary-card,
  .homepage_about table:last-of-type p,
  .about-wrap .section-card p,
  .page_submissions .submission_checklist,
  .page_submissions .author_guidelines,
  .page_submissions .copyright_notice,
  .page_submissions .privacy_statement { text-align: left; }
}

/* =====================================================================
   33. HALAMAN DETAIL ARTIKEL (obj_article_details)
   Mengikuti struktur bawaan tema default OJS 3 - tanpa HTML kustom.
   ===================================================================== */
/* Banner judul */
.obj_article_details .page_title {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.4rem 1.1rem 1.7rem;
  background:
    radial-gradient(28rem 12rem at 100% 0, rgb(var(--js-gold-rgb) / 0.18), transparent 70%),
    linear-gradient(120deg, var(--js-primary-600), var(--js-primary-700));
  color: var(--js-white);
  border-bottom: 3px solid var(--js-gold);
  border-radius: 12px;
  box-shadow: var(--js-shadow-2);
  text-align: left;
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  line-height: 1.35;
}

/* Strip emas vertikal di kiri */
.obj_article_details .page_title::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 6px;
  background: var(--js-gold);
}

/* Kilau melintas saat hover */
.obj_article_details .page_title::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.22), transparent);
  translate: -130% 0;
  pointer-events: none;
}
.obj_article_details .page_title:hover::after { translate: 230% 0; transition: translate 0.9s var(--js-ease); }

/* Penulis: grid kartu dengan avatar */
.obj_article_details .authors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.obj_article_details .authors > li {
  position: relative;
  margin: 0;
  padding: 0.8rem 0.9rem 0.8rem 3.7rem;
  background: var(--js-white);
  border: 1px solid var(--js-gray-mid);
  border-radius: 12px;
  box-shadow: var(--js-shadow-1);
  transition: transform 0.45s var(--js-ease), box-shadow 0.45s var(--js-ease), border-color 0.3s ease;
}
.obj_article_details .authors > li:hover {
  transform: translateY(-2px);
  border-color: var(--js-gold);
  box-shadow: var(--js-shadow-2);
}

.obj_article_details .authors > li::before {
  content: "\f007";
  position: absolute;
  top: 0.85rem; left: 0.8rem;
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--js-primary-500), var(--js-primary-700));
  color: var(--js-white);
  font: normal normal normal 1rem/1 FontAwesome;
  box-shadow: 0 0 0 3px var(--js-primary-100);
}

.obj_article_details .authors .name {
  display: block;
  font-weight: 700;
  line-height: 1.35;
  color: var(--js-primary-700);
}
.obj_article_details .authors .affiliation {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--js-text-muted);
}
.obj_article_details .authors .orcid {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 12px;
}
.obj_article_details .authors .orcid a { color: var(--js-link); }

/* Panel Abstrak / Unduhan / Referensi dengan pita label */
.obj_article_details :is(.item.abstract, .item.references, .item.downloads_chart) {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.25rem;
  padding: 0 1.25rem 1.1rem;
  background: var(--js-white);
  border: 1px solid var(--js-gray-mid);
  border-radius: 12px;
  box-shadow: var(--js-shadow-1);
}

.obj_article_details :is(.item.abstract, .item.references, .item.downloads_chart) > .label {
  margin: 0 -1.25rem 1rem;
  padding: 0.6rem 1.25rem;
  background: linear-gradient(100deg, var(--js-primary-600), var(--js-primary-700));
  border-bottom: 3px solid var(--js-gold);
  color: var(--js-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.obj_article_details :is(.item.abstract, .item.references, .item.downloads_chart) > .label::before {
  margin-right: 0.6rem;
  font: normal normal normal 14px/1 FontAwesome;
  color: var(--js-gold-soft);
}
.obj_article_details .item.abstract > .label::before         { content: "\f0f6"; }
.obj_article_details .item.downloads_chart > .label::before  { content: "\f080"; }
.obj_article_details .item.references > .label::before       { content: "\f02d"; }

/* Metadata samping (Published, How to Cite) */
.obj_article_details .entry_details .label {
  color: var(--js-primary-700);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.obj_article_details .entry_details :is(.item.published, .citation_display) .label::before {
  margin-right: 0.5rem;
  font: normal normal normal 14px/1 FontAwesome;
  color: var(--js-gold-text);
}
.obj_article_details .entry_details .item.published .label::before { content: "\f073"; }
.obj_article_details .entry_details .citation_display .label::before { content: "\f10d"; }

/* Tombol galley (PDF dll.) di halaman artikel */
.obj_article_details .obj_galley_link {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--js-action), var(--js-primary-700));
  color: var(--js-white);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 18px -8px rgb(var(--js-primary-700-rgb) / 0.8);
  transition: transform 0.35s var(--js-ease), box-shadow 0.35s var(--js-ease);
}
.obj_article_details .obj_galley_link:hover {
  color: var(--js-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -10px rgb(var(--js-primary-700-rgb) / 0.9);
}

/* =====================================================================
   34. RITME WARNA KARTU (3n+1 teal / 3n+2 emas / 3n teal terang)
   ===================================================================== */
.about-wrap .grid-card,
.about-wrap .scope-item,
#focusandscope li { --js-card-accent: var(--js-primary-500); }

.about-wrap .grid-card:nth-child(3n+2),
.about-wrap .scope-item:nth-child(3n+2),
#focusandscope li:nth-child(3n+2) { --js-card-accent: var(--js-gold); }

.about-wrap .grid-card:nth-child(3n),
.about-wrap .scope-item:nth-child(3n),
#focusandscope li:nth-child(3n) { --js-card-accent: var(--js-primary-400); }

.about-wrap .grid-card {
  border-top: 4px solid var(--js-card-accent);
  transition: transform 0.45s var(--js-ease), box-shadow 0.45s var(--js-ease);
}
.about-wrap .grid-card:hover { transform: translateY(-3px); box-shadow: var(--js-shadow-2); }

.about-wrap .scope-item {
  border-left: 3px solid var(--js-card-accent);
  transition: transform 0.35s var(--js-ease), background 0.25s ease;
}
.about-wrap .scope-item:hover { transform: translateY(-2px); background: var(--js-primary-200); }

#focusandscope li { border-left-color: var(--js-card-accent); }

/* Hover kartu umum yang belum punya efek angkat */
.info-card,
.page_contact .contact {
  transition: transform 0.45s var(--js-ease), box-shadow 0.45s var(--js-ease);
}
.info-card:hover { box-shadow: var(--js-shadow-2); }

/* Penanda tanggal pengumuman */
.page_announcements .obj_announcement_summary .date::before { box-shadow: 0 0 0 0 rgb(var(--js-gold-rgb) / 0.55); }

/* =====================================================================
   35. KEYFRAMES TAMBAHAN
   ===================================================================== */
@keyframes js-grow  { from { width: 0; } to { width: 64px; } }
@keyframes js-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(var(--js-gold-rgb) / 0.55); }
  100% { box-shadow: 0 0 0 14px rgb(var(--js-gold-rgb) / 0); }
}

/* =====================================================================
   36. ANIMASI TAMBAHAN (hanya jika reduce-motion TIDAK aktif)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Judul halaman naik, garis emas di bawahnya tumbuh */
  .page_issue_archive > h1,
  .page_issue > h1,
  .page_announcements > h1,
  .page_contact h1,
  .page_submissions h1,
  .obj_article_details .page_title { animation: js-rise 0.8s var(--js-ease) both; }

  .page_issue_archive > h1::after,
  .page_issue > h1::after,
  .page_announcements > h1::after,
  .page_contact h1::after,
  .page_submissions h1::after { animation: js-grow 0.9s var(--js-ease) 0.25s both; }

  /* Ring emas berdenyut saat hover pada ikon penting */
  .page_submissions .submission_checklist li:hover .fa { animation: js-pulse 1.2s ease-out 2; }
  .obj_article_details .authors > li:hover::before    { animation: js-pulse 1.2s ease-out 2; }
  .page_announcements .obj_announcement_summary:hover .date::before { animation: js-pulse 1.2s ease-out 2; }

  /* Scroll-reveal diperluas ke semua kartu (Chrome/Edge/Safari 26+) */
  @supports (animation-timeline: view()) {
    .page_issue_archive .obj_issue_summary,
    .obj_announcement_summary,
    .about-wrap .info-card,
    .about-wrap .section-card,
    .about-wrap .grid-card,
    .page_contact .contact,
    .page_submissions .submission_checklist,
    .page_submissions .author_guidelines,
    .page_submissions .copyright_notice,
    .page_submissions .privacy_statement,
    :is(#focusandscope, #sectionpolicies, #peerreviewprocess, #publicationfrequency,
        #openaccesspolicy, #archiving, #publicationethicsandmalpractice, #abstractingandindexing),
    .obj_article_details .authors > li,
    .obj_article_details :is(.item.abstract, .item.references, .item.downloads_chart),
    .info-card .info-row {
      animation: js-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }
}

/* Reduce motion: matikan juga gerak angkat saat hover */
@media (prefers-reduced-motion: reduce) {
  .obj_article_summary:hover,
  .obj_announcement_summary:hover,
  .obj_issue_summary:hover,
  .pkp_block:hover,
  .about-wrap .grid-card:hover,
  .about-wrap .scope-item:hover,
  .obj_article_details .authors > li:hover,
  .obj_article_details .obj_galley_link:hover,
  .page_contact .contact:hover,
  #focusandscope li:hover,
  ul.sidemenu li a:hover { transform: none; }

  .pkp_page_index .read_more:hover { letter-spacing: normal; }
}

/* =====================================================================
   37. RESPONSIF
   ===================================================================== */
@media (max-width: 991px) {
  .page_issue .obj_issue_toc .heading { gap: 1rem; }
  .page_contact .contact_section { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .homepage_about { padding: 1rem !important; }

  .obj_article_summary,
  .obj_article_summary:hover { padding: 0.9em 1em; }

  /* Tabel info: label di atas isi */
  .info-row,
  .about-wrap .info-row { grid-template-columns: 1fr; }
  .info-label { padding-bottom: 6px; }
  .info-value { padding-top: 8px; }

  .page_issue_archive .obj_issue_summary { grid-template-columns: 1fr; row-gap: 0.75rem; }

  .page_issue .obj_issue_toc .heading {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
  }

  .page_announcements .obj_announcement_summary { padding: 1.1rem; }

  /* Kartu halaman: padding dan pita judul lebih rapat */
  .page_submissions .submission_checklist,
  .page_submissions .author_guidelines,
  .page_submissions .copyright_notice,
  .page_submissions .privacy_statement,
  :is(#focusandscope, #sectionpolicies, #peerreviewprocess, #publicationfrequency,
      #openaccesspolicy, #archiving, #publicationethicsandmalpractice, #abstractingandindexing) {
    padding: 0 16px 16px;
  }

  .page_submissions .submission_checklist > h2,
  .page_submissions .author_guidelines > h2,
  .page_submissions .copyright_notice > h2,
  .page_submissions .privacy_statement > h2,
  :is(#focusandscope, #sectionpolicies, #peerreviewprocess, #publicationfrequency,
      #openaccesspolicy, #archiving, #publicationethicsandmalpractice, #abstractingandindexing) > h2 {
    margin: 0 -16px 14px;
    padding: 10px 16px;
  }

  .page_submissions .submission_checklist li { padding-left: 48px; }

  /* Detail artikel */
  .obj_article_details .page_title { padding: 0.9rem 1rem 0.9rem 1.3rem; }
  .obj_article_details :is(.item.abstract, .item.references, .item.downloads_chart) { padding: 0 1rem 1rem; }
  .obj_article_details :is(.item.abstract, .item.references, .item.downloads_chart) > .label {
    margin: 0 -1rem 0.9rem;
    padding: 0.55rem 1rem;
  }

  .about-wrap .badge-row,
  .badge-row { padding: 0.9rem 1rem; }
}

@media (max-width: 767px) {
  .pkp_structure_footer_wrapper::after { width: 200px; height: 200px; right: -70px; bottom: -100px; }
}

/* =====================================================================
   CATATAN: BELUM DITERAPKAN (tahap berikutnya)
   ---------------------------------------------------------------------
   - Footer 3 kolom (logo | alamat | kontak) + pil email/website:
     butuh struktur HTML footer JISAD.
   - Timeline (Journal History / Peer Review), kartu biaya (Author Fees),
     peringatan penipuan: butuh pembungkus HTML kustom (.js-* / .ab-*).
   - Header gradien berlapis + gambar latar: butuh aset gambar JISAD.
   - Navigasi mobile (menu terbuka berlatar soft): perlu dicek di situs.
   ===================================================================== */
/* =====================================================================
   NAVBAR JISAD (pengganti blok navbar sebelumnya)
   ===================================================================== */
@keyframes js-nav-in {
  from { opacity: 0; translate: 0 -8px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes js-nav-drop {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes js-cta-sheen {
  0%, 60% { translate: -140% 0; }
  100%    { translate: 280% 0; }
}

/* ---------- Bayangan halus di bawah bar ---------- */
.pkp_navigation_primary_row {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18),
              0 14px 24px -18px rgb(var(--js-shadow-rgb) / 0.75);
}

/* ---------- Ikon di depan tiap menu ---------- */
#navigationPrimary > li > a::before,
#navigationUser > li > a::before {
  display: inline-block;
  margin-right: 0.5rem;
  font: normal normal normal 0.95em/1 FontAwesome;
  color: var(--js-gold-soft);
  transition: transform 0.35s var(--js-ease), color 0.25s ease;
}

#navigationPrimary > li > a[href$="/jisad"]::before,
#navigationPrimary > li > a[href$="/jisad/index"]::before { content: "\f015"; } /* Home */
#navigationPrimary > li > a[data-toggle="dropdown"]::before { content: "\f05a"; } /* About */
#navigationPrimary > li > a[href$="/issue/current"]::before { content: "\f1ea"; } /* Current */
#navigationPrimary > li > a[href$="/issue/archive"]::before { content: "\f187"; } /* Archives */
#navigationPrimary > li > a[href$="/announcement"]::before  { content: "\f0a1"; } /* Announcements */
#navigationPrimary > li > a[href$="/about/contact"]::before { content: "\f0e0"; } /* Contact */
#navigationPrimary > li > a[href*="forms.gle"]::before      { content: "\f234"; } /* Register */

#navigationUser > li:nth-child(1) > a::before { content: "\f234"; } /* Register */
#navigationUser > li:nth-child(2) > a::before { content: "\f2bd"; } /* Akun */

/* Ikon melompat kecil saat hover */
#navigationPrimary > li > a:hover::before,
#navigationPrimary > li > a:focus-visible::before,
#navigationPrimary > li > a[aria-expanded="true"]::before,
#navigationUser > li > a:hover::before {
  transform: translateY(-2px) scale(1.18) rotate(-6deg);
  color: var(--js-white);
}

/* ---------- Dropdown About: panel putih, ikon bulat ---------- */
#navigationPrimary ul.dropdown-menu {
  padding: 6px;
  background: var(--js-white);
  border: 0;
  border-top: 3px solid var(--js-gold);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 34px -14px rgb(var(--js-shadow-rgb) / 0.45);
}

#navigationPrimary ul.dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 8px;
  color: var(--js-ink);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--js-ease);
}

#navigationPrimary ul.dropdown-menu > li > a::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--js-primary-100);
  color: var(--js-primary-700);
  font: normal normal normal 0.85rem/1 FontAwesome;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s var(--js-ease);
}

#navigationPrimary ul.dropdown-menu > li:nth-child(1) > a::before { content: "\f05a"; } /* About the Journal */
#navigationPrimary ul.dropdown-menu > li:nth-child(2) > a::before { content: "\f0c0"; } /* Editorial Team */
#navigationPrimary ul.dropdown-menu > li:nth-child(3) > a::before { content: "\f19d"; } /* Peer Reviewers */
#navigationPrimary ul.dropdown-menu > li:nth-child(4) > a::before { content: "\f093"; } /* Submissions */
#navigationPrimary ul.dropdown-menu > li:nth-child(5) > a::before { content: "\f09d"; } /* Author Fees */
#navigationPrimary ul.dropdown-menu > li:nth-child(6) > a::before { content: "\f023"; } /* Privacy Statement */

#navigationPrimary ul.dropdown-menu > li > a:hover,
#navigationPrimary ul.dropdown-menu > li > a:focus-visible {
  padding: 0.55rem 0.7rem;
  background: var(--js-primary-50);
  color: var(--js-link);
  transform: translateX(3px);
}
#navigationPrimary ul.dropdown-menu > li > a:hover::before,
#navigationPrimary ul.dropdown-menu > li > a:focus-visible::before {
  background: var(--js-gold);
  color: var(--js-ink);
  transform: rotate(-8deg) scale(1.1);
}

/* ---------- Menu user (pojok kanan atas) ---------- */
#navigationUser ul.dropdown-menu {
  border-top: 3px solid var(--js-gold);
  border-radius: 12px !important;
  box-shadow: 0 18px 34px -14px rgb(var(--js-shadow-rgb) / 0.55);
  overflow: hidden;
}
#navigationUser ul.dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
#navigationUser ul.dropdown-menu > li > a::before {
  flex: none;
  width: 1.1rem;
  color: var(--js-gold-soft);
  font: normal normal normal 0.95rem/1 FontAwesome;
  text-align: center;
  transition: transform 0.3s var(--js-ease), color 0.25s ease;
}
#navigationUser ul.dropdown-menu > li:nth-child(1) > a::before { content: "\f0e4"; } /* Dashboard */
#navigationUser ul.dropdown-menu > li:nth-child(2) > a::before { content: "\f007"; } /* View Profile */
#navigationUser ul.dropdown-menu > li:nth-child(3) > a::before { content: "\f08b"; } /* Logout */
#navigationUser ul.dropdown-menu > li > a:hover::before { transform: scale(1.2); color: var(--js-gold); }
#navigationUser ul.dropdown-menu .task_count { margin-left: auto; }

/* Badge angka */
#navigationUser .task_count {
  background: var(--js-gold);
  color: var(--js-ink);
  font-weight: 700;
}

/* ---------- Tombol Search ---------- */
.pkp_navigation_search_wrapper .pkp_search {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 1rem;
  background: rgb(255 255 255 / 0.12);
  border: 1.5px solid rgb(255 255 255 / 0.55);
  border-radius: 20px;
  color: var(--js-white);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.pkp_navigation_search_wrapper .pkp_search:hover {
  background: var(--js-white);
  color: var(--js-link);
  border-color: var(--js-white);
  box-shadow: 0 8px 16px -8px rgb(var(--js-shadow-rgb) / 0.6);
}
.pkp_navigation_search_wrapper .pkp_search .fa {
  display: inline-block;
  transition: transform 0.4s var(--js-ease);
}
.pkp_navigation_search_wrapper .pkp_search:hover .fa { transform: rotate(-14deg) scale(1.2); }

/* =====================================================================
   LAYOUT DESKTOP (>= 992px)
   ===================================================================== */
@media (min-width: 992px) {

  /* Bar: tinggi tetap, isi rata tengah vertikal.
     padding-bottom 0.3em = tebal garis emas di dasar bar */
  .pkp_navigation_primary_row {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 1rem 0.3em;
  }

  .pkp_navigation_primary_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #navigationPrimary {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
  }
  #navigationPrimary > li { float: none; margin: 0; }

  .pkp_navigation_search_wrapper {
    position: static;
    float: none;
    flex-shrink: 0;
    margin: 0 0 0 1rem;
  }

  /* Item menu: teks putih, pil muncul saat hover */
  #navigationPrimary > li > a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.5rem 0.85rem;
    border: 1.5px solid transparent;
    border-radius: 20px;
    background-color: transparent;
    color: var(--js-white);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  #navigationPrimary > li > a:hover,
  #navigationPrimary > li > a:focus-visible,
  #navigationPrimary > li > a[aria-expanded="true"] {
    color: var(--js-white);
    background-color: rgb(var(--js-shadow-rgb) / 0.3);
    border-color: rgb(255 255 255 / 0.28);
  }
  #navigationPrimary > li > a::after { left: 0.85rem; right: 0.85rem; bottom: 4px; }

  /* Panah kecil di menu yang punya dropdown */
  #navigationPrimary > li > a[data-toggle="dropdown"] {
    padding-right: 1.9rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 9px;
  }

  /* Register di menu utama: tombol CTA emas */
  #navigationPrimary > li:last-child > a {
    position: relative;
    overflow: hidden;
    margin-left: 0.5rem;
    padding: 0.42rem 1.05rem;
    background-image: linear-gradient(120deg, var(--js-gold-soft), var(--js-gold));
    background-color: var(--js-gold);
    border-color: transparent;
    color: var(--js-ink);
    font-weight: 700;
    box-shadow: 0 8px 16px -8px rgb(var(--js-gold-rgb) / 0.95);
    transition: transform 0.35s var(--js-ease), box-shadow 0.35s var(--js-ease);
  }
  #navigationPrimary > li:last-child > a::before { color: var(--js-primary-700); }
  #navigationPrimary > li:last-child > a:hover,
  #navigationPrimary > li:last-child > a:focus-visible {
    color: var(--js-ink);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -10px rgb(var(--js-gold-rgb) / 1);
  }
  #navigationPrimary > li:last-child > a:hover::before { color: var(--js-primary-900); }

  /* ::after di CTA dipakai sebagai kilau, bukan garis bawah */
  #navigationPrimary > li:last-child > a::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: auto;
    width: 40%; height: auto;
    border-radius: 0;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
    transform: none;
    transition: none;
    translate: -140% 0;
    pointer-events: none;
  }
}

/* Layar desktop sempit: dirapatkan agar tetap satu baris */
@media (min-width: 992px) and (max-width: 1100px) {
  #navigationPrimary { gap: 0; }
  #navigationPrimary > li > a { padding: 0.45rem 0.6rem; font-size: 14px; }
  #navigationPrimary > li > a[data-toggle="dropdown"] { padding-right: 1.6rem; }
  #navigationPrimary > li > a::before { margin-right: 0.35rem; }
  #navigationPrimary > li > a::after { left: 0.6rem; right: 0.6rem; }
  #navigationPrimary > li:last-child > a { padding: 0.4rem 0.8rem; }
}

/* =====================================================================
   ANIMASI (hanya jika reduce-motion TIDAK aktif)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Dropdown terbuka dengan naik halus */
  #navigationPrimary li:hover > ul.dropdown-menu,
  #navigationPrimary li:focus-within > ul.dropdown-menu,
  #navigationUser li:hover > ul.dropdown-menu,
  #navigationUser li:focus-within > ul.dropdown-menu {
    animation: js-nav-drop 0.3s var(--js-ease);
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {

  /* Menu muncul berurutan. Pakai "backwards", bukan "both",
     supaya dropdown tidak tertutup setelah animasi selesai */
  #navigationPrimary > li { animation: js-nav-in 0.6s var(--js-ease) backwards; }
  #navigationPrimary > li:nth-child(2) { animation-delay: 0.06s; }
  #navigationPrimary > li:nth-child(3) { animation-delay: 0.12s; }
  #navigationPrimary > li:nth-child(4) { animation-delay: 0.18s; }
  #navigationPrimary > li:nth-child(5) { animation-delay: 0.24s; }
  #navigationPrimary > li:nth-child(6) { animation-delay: 0.30s; }
  #navigationPrimary > li:nth-child(7) { animation-delay: 0.36s; }

  /* Kilau lewat di tombol Register tiap beberapa detik */
  #navigationPrimary > li:last-child > a::after { animation: js-cta-sheen 5s ease-in-out 1.5s infinite; }
  #navigationPrimary > li:last-child > a:hover::after { animation-play-state: paused; }
}

/* =====================================================================
   TAMBAHAN: ICON + ANIMASI "ABOUT THE JOURNAL"
   Tempel di paling bawah file CSS. Memakai FontAwesome 4 (bawaan OJS)
   ===================================================================== */

/* ---------- Judul section ---------- */
.homepage_about > h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  color: var(--js-primary-700);
}
.homepage_about > h2::before {
  content: "\f1ea"; /* newspaper */
  font: normal normal normal 1.1rem/1 FontAwesome;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: var(--js-white);
  background: linear-gradient(135deg, var(--js-primary-500), var(--js-primary-700));
  box-shadow: 0 4px 10px rgb(var(--js-primary-rgb) / 0.35);
}
.homepage_about > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--js-gold), var(--js-gold-soft));
}

/* ---------- Icon di kolom label (tabel pertama) ---------- */
.homepage_about table:first-of-type tr td:first-child span::before {
  font: normal normal normal 14px/1 FontAwesome;
  display: inline-block;
  width: 1.7em;
  margin-right: 0.35em;
  text-align: center;
  color: var(--js-gold-soft);
  transition: transform 0.4s var(--js-ease), color 0.3s ease;
}
.homepage_about table:first-of-type tr:nth-child(1)  td:first-child span::before { content: "\f02d"; } /* book */
.homepage_about table:first-of-type tr:nth-child(2)  td:first-child span::before { content: "\f2c1"; } /* id-badge */
.homepage_about table:first-of-type tr:nth-child(3)  td:first-child span::before { content: "\f1ab"; } /* language */
.homepage_about table:first-of-type tr:nth-child(4)  td:first-child span::before { content: "\f073"; } /* calendar */
.homepage_about table:first-of-type tr:nth-child(5)  td:first-child span::before { content: "\f0c1"; } /* link */
.homepage_about table:first-of-type tr:nth-child(6)  td:first-child span::before { content: "\f02f"; } /* print */
.homepage_about table:first-of-type tr:nth-child(7)  td:first-child span::before { content: "\f0ac"; } /* globe */
.homepage_about table:first-of-type tr:nth-child(8)  td:first-child span::before { content: "\f2be"; } /* user-circle */
.homepage_about table:first-of-type tr:nth-child(9)  td:first-child span::before { content: "\f007"; } /* user */
.homepage_about table:first-of-type tr:nth-child(10) td:first-child span::before { content: "\f19c"; } /* university */
.homepage_about table:first-of-type tr:nth-child(11) td:first-child span::before { content: "\f080"; } /* bar-chart */

.homepage_about table:first-of-type tr:hover td:first-child span::before {
  color: var(--js-white);
  transform: scale(1.25) rotate(-8deg);
}

/* Link di dalam tabel */
.homepage_about table:first-of-type td a {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--js-gold), var(--js-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.35s var(--js-ease), color 0.25s ease;
}
.homepage_about table:first-of-type td a:hover {
  background-size: 100% 2px;
  color: var(--js-primary-700);
}

/* ---------- Tabel badge (logo indeks) ---------- */
.homepage_about table:nth-of-type(2) td {
  transition: background-color 0.3s ease;
}
.homepage_about table:nth-of-type(2) td:hover {
  background-color: rgb(var(--js-primary-rgb) / 0.08);
}
.homepage_about table:nth-of-type(2) img:hover {
  transform: translateY(-4px) scale(1.08);
  filter: drop-shadow(0 6px 8px rgb(var(--js-shadow-rgb) / 0.25));
}

/* ---------- Journal Summary ---------- */
.homepage_about table:nth-of-type(3) td > p {
  position: relative;
  margin: 0;
  padding: 1rem 1rem 1rem 1.25rem;
  border-left: 4px solid var(--js-gold);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, var(--js-primary-50), var(--js-white));
  transition: box-shadow 0.35s var(--js-ease), transform 0.35s var(--js-ease);
}
.homepage_about table:nth-of-type(3) td > p:hover {
  transform: translateX(3px);
  box-shadow: var(--js-shadow-1);
}
.homepage_about table:nth-of-type(3) td > p > strong:first-child {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--js-primary-700);
}
.homepage_about table:nth-of-type(3) td > p > strong:first-child::before {
  content: "\f05a"; /* info-circle */
  font: normal normal normal 1em/1 FontAwesome;
  margin-right: 0.5em;
  color: var(--js-gold-text);
}
.homepage_about table:nth-of-type(3) td > p > strong:not(:first-child) {
  padding: 0 0.4em;
  border-radius: 4px;
  color: var(--js-primary-700);
  background: rgb(var(--js-primary-rgb) / 0.12);
}

/* ---------- Animasi (hormati preferensi "reduce motion") ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* Garis aksen atas bergerak */
  .homepage_about::before {
    animation: jabout-shimmer 4s linear infinite;
  }
  @keyframes jabout-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: 0 0; }
  }

  /* Baris tabel muncul bergantian */
  .homepage_about table:first-of-type tr {
    opacity: 0;
    animation: jabout-slide-in 0.6s var(--js-ease) forwards;
  }
  .homepage_about table:first-of-type tr:nth-child(1)  { animation-delay: 0.05s; }
  .homepage_about table:first-of-type tr:nth-child(2)  { animation-delay: 0.12s; }
  .homepage_about table:first-of-type tr:nth-child(3)  { animation-delay: 0.19s; }
  .homepage_about table:first-of-type tr:nth-child(4)  { animation-delay: 0.26s; }
  .homepage_about table:first-of-type tr:nth-child(5)  { animation-delay: 0.33s; }
  .homepage_about table:first-of-type tr:nth-child(6)  { animation-delay: 0.40s; }
  .homepage_about table:first-of-type tr:nth-child(7)  { animation-delay: 0.47s; }
  .homepage_about table:first-of-type tr:nth-child(8)  { animation-delay: 0.54s; }
  .homepage_about table:first-of-type tr:nth-child(9)  { animation-delay: 0.61s; }
  .homepage_about table:first-of-type tr:nth-child(10) { animation-delay: 0.68s; }
  .homepage_about table:first-of-type tr:nth-child(11) { animation-delay: 0.75s; }

  @keyframes jabout-slide-in {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Ikon judul berdenyut halus */
  .homepage_about > h2::before {
    animation: jabout-pulse 2.8s ease-in-out infinite;
  }
  @keyframes jabout-pulse {
    0%, 100% { box-shadow: 0 4px 10px rgb(var(--js-primary-rgb) / 0.35), 0 0 0 0 rgb(var(--js-primary-rgb) / 0.35); }
    50%      { box-shadow: 0 4px 10px rgb(var(--js-primary-rgb) / 0.35), 0 0 0 8px rgb(var(--js-primary-rgb) / 0); }
  }

  /* Garis emas di bawah judul memanjang */
  .homepage_about > h2::after {
    animation: jabout-grow 1s var(--js-ease) 0.2s both;
  }
  @keyframes jabout-grow {
    from { width: 0; }
    to   { width: 70px; }
  }

  /* Logo badge melayang bergantian */
  .homepage_about table:nth-of-type(2) img {
    animation: jabout-float 4s ease-in-out infinite;
  }
  .homepage_about table:nth-of-type(2) td:nth-child(2) img { animation-delay: 0.4s; }
  .homepage_about table:nth-of-type(2) td:nth-child(3) img { animation-delay: 0.8s; }
  .homepage_about table:nth-of-type(2) td:nth-child(4) img { animation-delay: 1.2s; }
  .homepage_about table:nth-of-type(2) td:nth-child(5) img { animation-delay: 1.6s; }
  @keyframes jabout-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -4px; }
  }

  /* Summary muncul dari bawah */
  .homepage_about table:nth-of-type(3) td > p {
    animation: jabout-rise 0.8s var(--js-ease) 0.9s both;
  }
  @keyframes jabout-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .homepage_about table:first-of-type td:first-child { width: 38% !important; }
  .homepage_about table:nth-of-type(2) td {
    display: inline-block;
    width: 48% !important;
    padding: 6px 0;
  }
}

/* =====================================================================
   TAMBAHAN 2: TABEL INFO JURNAL → GAYA KARTU
   Tempel di bawah CSS "ICON + ANIMASI" sebelumnya
   ===================================================================== */

/* ---------- Tabel jadi deretan kartu ---------- */
.homepage_about table:first-of-type {
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.homepage_about table:first-of-type tr td {
  border: 0 !important;
  padding: 11px 14px !important;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgb(var(--js-shadow-rgb) / 0.08);
  transition: transform 0.35s var(--js-ease), box-shadow 0.35s var(--js-ease),
              background-position 0.6s var(--js-ease), filter 0.25s ease;
}

/* Kolom label */
.homepage_about table:first-of-type tr td:first-child {
  border-radius: 10px 0 0 10px;
  background: linear-gradient(120deg, var(--js-primary-700) 0%, var(--js-primary-500) 50%, var(--js-primary-700) 100%) !important;
  background-size: 200% 100% !important;
  background-position: 0 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Kolom nilai: zebra lembut */
.homepage_about table:first-of-type tr td:last-child {
  border-radius: 0 10px 10px 0;
  background: var(--js-white) !important;
}
.homepage_about table:first-of-type tr:nth-child(even) td:last-child {
  background: var(--js-primary-50) !important;
}

/* Hover baris: terangkat + aksen emas */
.homepage_about table:first-of-type tr:hover td {
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgb(var(--js-shadow-rgb) / 0.35);
}
.homepage_about table:first-of-type tr:hover td:first-child {
  background-position: 100% 0 !important;
  box-shadow: inset 4px 0 0 var(--js-gold), 0 8px 18px -8px rgb(var(--js-shadow-rgb) / 0.35);
}
.homepage_about table:first-of-type tr:hover td:last-child {
  box-shadow: inset -3px 0 0 var(--js-primary-300), 0 8px 18px -8px rgb(var(--js-shadow-rgb) / 0.35);
}

/* ---------- Icon jadi lingkaran ---------- */
.homepage_about table:first-of-type tr td:first-child span::before {
  width: 2em;
  height: 2em;
  line-height: 2em;
  margin-right: 0.6em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
  color: var(--js-gold-soft);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.homepage_about table:first-of-type tr:hover td:first-child span::before {
  background: var(--js-gold);
  color: var(--js-primary-900);
  box-shadow: 0 0 0 4px rgb(var(--js-gold-rgb) / 0.25);
}

/* ---------- Isi kolom nilai ---------- */
.homepage_about table:first-of-type tr td:last-child span {
  padding-left: 0 !important;
}

/* Judul jurnal */
.homepage_about table:first-of-type tr:nth-child(1) td:last-child span {
  color: var(--js-primary-700) !important;
  font-weight: 700;
  font-size: 1.05em;
}

/* Initials: lencana JISAD */
.homepage_about table:first-of-type tr:nth-child(2) td:last-child span span {
  display: inline-block;
  padding: 2px 14px !important;
  border-radius: 999px;
  color: var(--js-white) !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: linear-gradient(135deg, var(--js-primary-600), var(--js-primary-800));
  box-shadow: 0 3px 8px rgb(var(--js-primary-rgb) / 0.4);
}

/* Singkatan: gaya italic */
.homepage_about table:first-of-type tr:nth-child(3) td:last-child span {
  font-style: italic;
  color: var(--js-text-muted) !important;
}

/* ---------- Tautan umum di kolom nilai ---------- */
.homepage_about table:first-of-type tr td:last-child a,
.homepage_about table:first-of-type tr td:last-child a span {
  color: var(--js-primary-700) !important;
  font-weight: 600;
}

/* ---------- Pill: Frequency, DOI, ISSN ---------- */
.homepage_about table:first-of-type tr:nth-child(4) td:last-child a,
.homepage_about table:first-of-type tr:nth-child(5) td:last-child a,
.homepage_about table:first-of-type tr:nth-child(6) td:last-child a,
.homepage_about table:first-of-type tr:nth-child(7) td:last-child a {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--js-primary-100);
  border: 1px solid var(--js-primary-200);
  background-image: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--js-ease), box-shadow 0.25s ease;
}
.homepage_about table:first-of-type tr:nth-child(4) td:last-child a:hover,
.homepage_about table:first-of-type tr:nth-child(5) td:last-child a:hover,
.homepage_about table:first-of-type tr:nth-child(6) td:last-child a:hover,
.homepage_about table:first-of-type tr:nth-child(7) td:last-child a:hover {
  background: var(--js-primary-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgb(var(--js-primary-rgb) / 0.35);
}
.homepage_about table:first-of-type tr:nth-child(4) td:last-child a:hover,
.homepage_about table:first-of-type tr:nth-child(4) td:last-child a:hover span,
.homepage_about table:first-of-type tr:nth-child(5) td:last-child a:hover,
.homepage_about table:first-of-type tr:nth-child(5) td:last-child a:hover span,
.homepage_about table:first-of-type tr:nth-child(6) td:last-child a:hover,
.homepage_about table:first-of-type tr:nth-child(7) td:last-child a:hover {
  color: var(--js-white) !important;
}

/* Label kecil sebelum nomor ISSN */
.homepage_about table:first-of-type tr:nth-child(6) td:last-child a::before,
.homepage_about table:first-of-type tr:nth-child(7) td:last-child a::before {
  font: normal normal normal 0.9em/1 FontAwesome;
  margin-right: 0.5em;
  content: "\f02f";
}
.homepage_about table:first-of-type tr:nth-child(7) td:last-child a::before { content: "\f0ac"; }

/* ---------- Citation Analysis: tautan jadi tombol kecil ---------- */
.homepage_about table:first-of-type tr:nth-child(11) td:last-child > span {
  font-size: 0;            /* sembunyikan pemisah " | " */
  line-height: 0;
}
.homepage_about table:first-of-type tr:nth-child(11) td:last-child a {
  display: inline-block;
  margin: 3px 4px 3px 0;
  padding: 3px 12px;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 999px;
  background: var(--js-white);
  border: 1px solid var(--js-primary-300);
  background-image: none;
  transition: transform 0.25s var(--js-ease), background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.homepage_about table:first-of-type tr:nth-child(11) td:last-child a::after {
  content: "\f08e"; /* external-link */
  font: normal normal normal 0.8em/1 FontAwesome;
  margin-left: 0.5em;
  opacity: 0.6;
}
.homepage_about table:first-of-type tr:nth-child(11) td:last-child a:hover {
  background: var(--js-primary-600);
  box-shadow: 0 5px 12px rgb(var(--js-primary-rgb) / 0.4);
  transform: translateY(-2px);
}
.homepage_about table:first-of-type tr:nth-child(11) td:last-child a:hover,
.homepage_about table:first-of-type tr:nth-child(11) td:last-child a:hover span {
  color: var(--js-white) !important;
}

/* ---------- Nama editor: avatar inisial kecil ---------- */
.homepage_about table:first-of-type tr:nth-child(8) td:last-child a::before,
.homepage_about table:first-of-type tr:nth-child(9) td:last-child a::before {
  content: "\f2be";
  font: normal normal normal 1.15em/1 FontAwesome;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  color: var(--js-gold-text);
}
.homepage_about table:first-of-type tr:nth-child(9) td:last-child a::before { content: "\f007"; }

/* ---------- Animasi tambahan ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Kilau lewat di kolom label saat hover sudah dari background-position.
     Ikon bergoyang sekali saat baris di-hover */
  .homepage_about table:first-of-type tr:hover td:first-child span::before {
    animation: jabout-wiggle 0.6s ease;
  }
  @keyframes jabout-wiggle {
    0%   { transform: rotate(0) scale(1); }
    30%  { transform: rotate(-14deg) scale(1.25); }
    60%  { transform: rotate(10deg) scale(1.25); }
    100% { transform: rotate(-8deg) scale(1.25); }
  }

  /* Lencana JISAD berkilau halus */
  .homepage_about table:first-of-type tr:nth-child(2) td:last-child span span {
    background-size: 200% 100%;
    animation: jabout-badge-shine 3.5s ease-in-out infinite;
  }
  @keyframes jabout-badge-shine {
    0%, 100% { background-position: 0 0; }
    50%      { background-position: 100% 0; }
  }
}

/* ---------- Mobile: baris ditumpuk ---------- */
@media (max-width: 600px) {
  .homepage_about table:first-of-type,
  .homepage_about table:first-of-type tbody,
  .homepage_about table:first-of-type tr,
  .homepage_about table:first-of-type td {
    display: block;
    width: 100% !important;
  }
  .homepage_about table:first-of-type tr { margin-bottom: 10px; }
  .homepage_about table:first-of-type tr td:first-child { border-radius: 10px 10px 0 0; }
  .homepage_about table:first-of-type tr td:last-child  { border-radius: 0 0 10px 10px; }
  .homepage_about table:first-of-type tr:hover td { transform: none; }
}

/* =====================================================================
   FOOTER JISAD: LAYOUT 2 KOLOM (LOGO KIRI, INFO KANAN)
   Tempel di paling bawah file CSS
   ===================================================================== */

.pkp_footer_content {
  padding: 1.6rem 1rem;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

.jf-footer {
  display: grid;
  grid-template-columns: clamp(105px, 13vw, 135px) 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* ---------- Logo (kartu putih, kecil, floating) ---------- */
.pkp_footer_content .jf-logo {
  position: relative;
  display: block;
  padding: 6px;
  overflow: hidden;
  background: var(--js-white);
  border-radius: 14px;
  border: 2px solid rgb(var(--js-gold-rgb) / 0.6);
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.5), 0 0 0 6px rgb(255 255 255 / 0.07);
  transition: scale 0.4s var(--js-ease), border-color 0.3s ease, box-shadow 0.4s var(--js-ease);
}
.pkp_footer_content .jf-logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.pkp_footer_content .jf-logo:hover {
  scale: 1.06;
  border-color: var(--js-gold-soft);
  box-shadow: 0 16px 30px -8px rgb(0 0 0 / 0.55), 0 0 0 8px rgb(var(--js-gold-rgb) / 0.2);
}
/* Kilau lewat di atas logo */
.pkp_footer_content .jf-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.55) 50%, transparent 62%);
  translate: -120% 0;
  pointer-events: none;
}

/* ---------- Kolom info ---------- */
.jf-body { min-width: 0; }

/* Judul + ikon bulat */
.pkp_footer_content .jf-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--js-white);
}
.pkp_footer_content .jf-title::before {
  content: "\f02d"; /* book */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  font: normal normal normal 1rem/1 FontAwesome;
  color: var(--js-gold-soft);
  background: rgb(255 255 255 / 0.14);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.pkp_footer_content .jf-title::after { content: none; }
.pkp_footer_content .jf-title a { color: var(--js-white); }
.pkp_footer_content .jf-title a:hover { color: var(--js-gold-soft); }

.pkp_footer_content .jf-pub {
  margin: 0 0 1rem;
  color: rgb(255 255 255 / 0.85);
}

/* ---------- Pill ISSN / DOI ---------- */
.jf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.pkp_footer_content .jf-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 4px 16px 4px 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.28);
  color: var(--js-white);
  transition: transform 0.3s var(--js-ease), background-color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}
.jf-pill-label {
  padding: 3px 13px;
  border-radius: 999px;
  background: var(--js-gold);
  color: var(--js-primary-900);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jf-pill-val {
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}
.pkp_footer_content .jf-pill:hover {
  transform: translateY(-2px);
  background: rgb(255 255 255 / 0.18);
  border-color: var(--js-gold-soft);
  box-shadow: 0 8px 16px -6px rgb(0 0 0 / 0.45);
}
.pkp_footer_content .jf-pill:hover .jf-pill-val { color: var(--js-gold-soft); }

/* ---------- Lisensi ---------- */
.jf-license {
  position: relative;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}
.jf-license::before {          /* aksen emas di garis */
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, var(--js-gold), var(--js-gold-soft));
}
.pkp_footer_content .jf-license p {
  margin: 0 0 0.7rem;
  font-size: 13px;
  color: rgb(255 255 255 / 0.85);
}
.pkp_footer_content .jf-license p a {
  font-weight: 600;
  color: var(--js-white);
  background-image: linear-gradient(var(--js-gold-soft), var(--js-gold-soft));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.3s var(--js-ease), color 0.25s ease;
}
.pkp_footer_content .jf-license p a:hover {
  color: var(--js-gold-soft);
  background-size: 100% 2px;
}

/* Ikon CC dalam pill putih */
.pkp_footer_content .jf-cc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--js-white);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.25);
  transition: transform 0.3s var(--js-ease), box-shadow 0.3s ease;
}
.pkp_footer_content .jf-cc img {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform 0.35s var(--js-ease);
}
.pkp_footer_content .jf-cc:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgb(0 0 0 / 0.4), 0 0 0 3px rgb(var(--js-gold-rgb) / 0.4);
}
.pkp_footer_content .jf-cc:hover img:nth-child(1) { transform: rotate(-12deg) scale(1.12); }
.pkp_footer_content .jf-cc:hover img:nth-child(2) { transform: scale(1.15); }
.pkp_footer_content .jf-cc:hover img:nth-child(3) { transform: rotate(12deg) scale(1.12); }

/* ---------- Animasi ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* Logo melayang */
  .pkp_footer_content .jf-logo {
    animation: jf-float 4.5s ease-in-out infinite;
  }
  @keyframes jf-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
  }

  /* Kilau di logo setiap beberapa detik */
  .pkp_footer_content .jf-logo::after {
    animation: jf-shine 6s ease-in-out 1.2s infinite;
  }
  @keyframes jf-shine {
    0%, 55%  { translate: -120% 0; }
    100%     { translate: 120% 0; }
  }

  /* Cahaya emas berdenyut di belakang logo */
  .jf-footer { position: relative; }
  .jf-footer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: clamp(105px, 13vw, 135px);
    height: 170px;
    translate: 0 -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(var(--js-gold-rgb) / 0.3), transparent);
    filter: blur(14px);
    pointer-events: none;
    animation: jf-glow 4.5s ease-in-out infinite;
  }
  @keyframes jf-glow {
    0%, 100% { opacity: 0.45; scale: 1; }
    50%      { opacity: 1;    scale: 1.2; }
  }

  /* Elemen kolom info muncul bergantian */
  .jf-body > * {
    opacity: 0;
    animation: jf-rise 0.75s var(--js-ease) forwards;
  }
  .jf-body > :nth-child(1) { animation-delay: 0.05s; }
  .jf-body > :nth-child(2) { animation-delay: 0.15s; }
  .jf-body > :nth-child(3) { animation-delay: 0.25s; }
  .jf-body > :nth-child(4) { animation-delay: 0.35s; }
  @keyframes jf-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* Ikon judul berdenyut halus */
  .pkp_footer_content .jf-title::before { animation: jf-pulse 3s ease-in-out infinite; }
  @keyframes jf-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25), 0 0 0 0 rgb(var(--js-gold-rgb) / 0.35); }
    50%      { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25), 0 0 0 7px rgb(var(--js-gold-rgb) / 0); }
  }
}

/* ---------- Mobile: ditumpuk & rata tengah ---------- */
@media (max-width: 640px) {
  .jf-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .pkp_footer_content .jf-logo { width: 115px; }
  .jf-footer::before { left: 50%; translate: -50% 0; top: 0; }
  .pkp_footer_content .jf-title { flex-direction: column; gap: 0.4rem; }
  .jf-pills { justify-content: center; }
  .jf-license::before { left: 50%; translate: -50% 0; }
}

/* =====================================================================
   TAMBAHAN: HALAMAN ARCHIVES, COVER BESAR + KARTU LEBIH HIDUP
   Tempel di paling bawah file CSS
   ===================================================================== */

/* ---------- Layout kartu: cover kiri, info kanan ---------- */
.page_issue_archive .obj_issue_summary {
  position: relative;
  overflow: hidden;
  grid-template-columns: auto 1fr;
  column-gap: 1.4rem;
  row-gap: 0;
  padding: 1.1rem 3.2rem 1.1rem 1.25rem;  /* ruang kanan untuk panah */
  background:
    radial-gradient(14rem 8rem at 100% 0, rgb(var(--js-primary-rgb) / 0.07), transparent 70%),
    var(--js-white);
}

/* ---------- Cover ---------- */
.page_issue_archive .obj_issue_summary .cover {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  display: block;
  float: none;
  width: clamp(96px, 10vw, 120px);
  margin: 0;
  overflow: hidden;
  border-radius: 4px 8px 8px 4px;
  box-shadow:
    0 10px 20px -6px rgb(var(--js-shadow-rgb) / 0.45),
    0 2px 4px rgb(var(--js-shadow-rgb) / 0.2);
  transition: transform 0.45s var(--js-ease), box-shadow 0.45s var(--js-ease);
}
.page_issue_archive .obj_issue_summary .cover img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto !important;
  max-height: none;
}
/* Efek punggung buku di sisi kiri */
.page_issue_archive .obj_issue_summary .cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  z-index: 1;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.28), rgb(255 255 255 / 0.18) 55%, transparent);
  pointer-events: none;
}
/* Kilau */
.page_issue_archive .obj_issue_summary .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.5) 50%, transparent 62%);
  translate: -130% 0;
  pointer-events: none;
}
.page_issue_archive .obj_issue_summary:hover .cover {
  transform: translateY(-4px) rotate(-2.5deg) scale(1.05);
  box-shadow:
    0 18px 28px -8px rgb(var(--js-shadow-rgb) / 0.5),
    0 0 0 3px rgb(var(--js-gold-rgb) / 0.45);
}
.page_issue_archive .obj_issue_summary:hover .cover::after {
  translate: 130% 0;
  transition: translate 0.9s var(--js-ease);
}

/* ---------- Judul & volume ---------- */
.page_issue_archive .obj_issue_summary h2 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.3;
}
.page_issue_archive .obj_issue_summary .title {
  display: block;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.3;
}
.page_issue_archive .obj_issue_summary .title::before {
  content: "\f133"; /* calendar-o */
  font: normal normal normal 0.85em/1 FontAwesome;
  margin-right: 0.55em;
  color: var(--js-gold-text);
  transition: transform 0.35s var(--js-ease);
}
.page_issue_archive .obj_issue_summary:hover .title::before {
  transform: rotate(-12deg) scale(1.2);
}
/* Seluruh kartu bisa diklik */
.page_issue_archive .obj_issue_summary .title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page_issue_archive .obj_issue_summary .series {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 14px;
  border: 1px solid var(--js-primary-200);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.page_issue_archive .obj_issue_summary .series::before {
  content: "\f02d"; /* book */
  font: normal normal normal 0.95em/1 FontAwesome;
  margin-right: 0.5em;
  color: var(--js-gold-text);
  transition: color 0.3s ease;
}
.page_issue_archive .obj_issue_summary:hover .series {
  background: var(--js-primary-600);
  border-color: var(--js-primary-600);
  color: var(--js-white);
}
.page_issue_archive .obj_issue_summary:hover .series::before { color: var(--js-gold-soft); }

.page_issue_archive .obj_issue_summary .description {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 13px;
  color: var(--js-text-muted);
}

/* ---------- Panah di pojok kanan ---------- */
.page_issue_archive .obj_issue_summary::after {
  content: "\f061"; /* arrow-right */
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font: normal normal normal 13px/1 FontAwesome;
  color: var(--js-primary-700);
  background: var(--js-primary-100);
  border-radius: 50%;
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.35s var(--js-ease), background-color 0.3s ease, color 0.3s ease;
  pointer-events: none;
}
.page_issue_archive .obj_issue_summary:hover::after {
  opacity: 1;
  transform: translateX(3px);
  background: var(--js-gold);
  color: var(--js-primary-900);
}

/* ---------- Mobile kecil: cover di atas, rata tengah ---------- */
@media (max-width: 480px) {
  .page_issue_archive .obj_issue_summary {
    grid-template-columns: 1fr;
    row-gap: 0.7rem;
    padding: 1.1rem 1.1rem 2.6rem;
    text-align: center;
  }
  .page_issue_archive .obj_issue_summary .cover {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: 130px;
  }
  .page_issue_archive .obj_issue_summary h2,
  .page_issue_archive .obj_issue_summary .description { grid-column: 1; grid-row: auto; }
  .page_issue_archive .obj_issue_summary::after { right: 50%; translate: 50% 0; }
}