/* ================================================================
   CUSTOM CSS — JURNAL AL-MAQAYIS
   Target Platform : OJS 3.x (Default Theme)
   Referensi Desain: JPAI – ejournal.uin-suka.ac.id/tarbiyah/jpai
   Warna Utama     : #098bc1
   Font            : Lora (heading) + Source Sans 3 (body)

   CARA PENGGUNAAN DI OJS 3:
   Dashboard → Website Settings → Appearance → Stylesheets
   → Upload file ini

   STRUKTUR KOMENTAR:
   01. Google Fonts & CSS Variables
   02. Reset & Base
   03. Tipografi
   04. Header & Branding
   05. Navigasi Utama
   06. Navigasi User (Login/Register)
   07. Breadcrumbs
   08. Layout Utama (2 Kolom)
   09. Hero / Cover Jurnal (Homepage)
   10. Bagian About Journal (Homepage)
   11. Current Issue & Daftar Artikel
   12. Kartu Artikel (Article Summary)
   13. Halaman Detail Artikel
   14. Sidebar & Blok Sidebar
   15. Form Pencarian
   16. Pengumuman (Announcements)
   17. Halaman Arsip & Terbitan
   18. Form (Login, Register, Submit)
   19. Paginasi
   20. Tabel
   21. Notifikasi & Alert
   22. Footer
   23. Responsif (Tablet & Mobile)
   ================================================================ */


/* ================================================================
   01. GOOGLE FONTS & CSS VARIABLES
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;600;700&display=swap');

:root {
  /* Palet warna utama */
  --jpai-primary:        #098bc1;
  --jpai-primary-dark:   #0670a0;
  --jpai-primary-darker: #054e75;
  --jpai-primary-light:  #d8eff8;
  --jpai-primary-pale:   #edf7fc;

  /* Warna aksen */
  --jpai-accent:         #e8a020;
  --jpai-accent-light:   #fdf3e0;

  /* Teks */
  --jpai-text-dark:      #1a2332;
  --jpai-text-body:      #3d4a5c;
  --jpai-text-muted:     #6b7a8d;
  --jpai-text-light:     #9eaab8;

  /* Background */
  --jpai-bg-page:        #f0f4f8;
  --jpai-bg-white:       #ffffff;
  --jpai-bg-light:       #f5f8fb;
  --jpai-bg-gray:        #eef1f5;

  /* Border */
  --jpai-border:         #d8e3ec;
  --jpai-border-light:   #ecf2f7;

  /* Radius */
  --jpai-radius-xs:      3px;
  --jpai-radius-sm:      5px;
  --jpai-radius-md:      8px;
  --jpai-radius-lg:      12px;
  --jpai-radius-xl:      16px;

  /* Shadow */
  --jpai-shadow-xs:      0 1px 3px rgba(9,139,193,0.06);
  --jpai-shadow-sm:      0 2px 8px rgba(9,139,193,0.10);
  --jpai-shadow-md:      0 4px 18px rgba(9,139,193,0.13);
  --jpai-shadow-lg:      0 8px 36px rgba(9,139,193,0.17);

  /* Font */
  --jpai-font-heading:   'Lora', Georgia, 'Times New Roman', serif;
  --jpai-font-body:      'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
  --jpai-font-mono:      'Courier New', Courier, monospace;

  /* Transisi */
  --jpai-trans:          all 0.22s ease;
  --jpai-trans-fast:     all 0.14s ease;
}


/* ================================================================
   02. RESET & BASE
   ================================================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--jpai-font-body);
  font-size: 15px;
  line-height: 1.72;
  color: var(--jpai-text-body);
  background-color: var(--jpai-bg-page);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--jpai-primary);
  text-decoration: none;
  transition: var(--jpai-trans);
}
a:hover {
  color: var(--jpai-primary-dark);
  text-decoration: underline;
}
a:focus-visible {
  outline: 2px solid var(--jpai-primary);
  outline-offset: 2px;
  border-radius: var(--jpai-radius-xs);
}

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

ul, ol {
  padding-left: 1.4em;
}

/* Skip nav (aksesibilitas) */
.pkp_skipnav a {
  position: absolute;
  left: -9999px;
  background: var(--jpai-primary);
  color: #fff;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0 0 var(--jpai-radius-md) var(--jpai-radius-md);
  z-index: 9999;
  text-decoration: none;
}
.pkp_skipnav a:focus {
  left: 20px;
}


/* ================================================================
   03. TIPOGRAFI
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jpai-font-heading);
  color: var(--jpai-text-dark);
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.6em;
}

h1 { font-size: 2rem;   font-weight: 700; }
h2 { font-size: 1.55rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.08rem; font-weight: 600; }
h5 { font-size: 0.95rem; font-weight: 600; }
h6 { font-size: 0.88rem; font-weight: 600; }

p {
  margin: 0 0 1rem;
}

/* Heading seksi dengan garis bawah aksen */
.section-heading,
.pkp_helpers h2,
.homepageAbout h2,
.homepageIssue > h2,
.pkp_page_about h2 {
  font-family: var(--jpai-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--jpai-text-dark);
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--jpai-primary-light);
  position: relative;
}
.section-heading::after,
.pkp_helpers h2::after,
.homepageAbout h2::after,
.homepageIssue > h2::after,
.pkp_page_about h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--jpai-primary);
}

blockquote {
  border-left: 4px solid var(--jpai-primary);
  background: var(--jpai-primary-pale);
  padding: 14px 20px;
  margin: 0 0 1rem;
  border-radius: 0 var(--jpai-radius-md) var(--jpai-radius-md) 0;
  font-style: italic;
  color: var(--jpai-text-body);
}


/* ================================================================
   04. HEADER & BRANDING
   ================================================================ */

/* Header page top */
.pkp_structure_head {
  background: linear-gradient(135deg, var(--jpai-primary-darker) 0%, var(--jpai-primary) 55%, #0aabeb 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* Pola dekoratif di background header */
.pkp_structure_head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Area dalam header */
.pkp_structure_head .pkp_header_content {
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* Nama / Logo situs */
.pkp_site_name,
.pkp_site_name a {
  font-family: var(--jpai-font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.2;
}
.pkp_site_name a:hover {
  text-decoration: none;
  opacity: 0.92;
}

/* Logo gambar di header */
.pkp_site_name img,
.pkp_structure_head img.pkp_logo {
  max-height: 68px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  transition: var(--jpai-trans);
}
.pkp_site_name a:hover img {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.25));
}

/* Tagline jurnal */
.pkp_site_tagline,
.pkp_structure_head .tagline {
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
  margin-top: 3px;
  font-weight: 300;
  letter-spacing: 0.2px;
}

/* Banner homepage image */
.pkp_structure_head .homepageImage,
.pkp_structure_head img[src*="homepageImage"],
.homepageBanner {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
  opacity: 0.88;
}


/* ================================================================
   05. NAVIGASI UTAMA (Primary Navigation)
   ================================================================ */

/* Container nav */
.pkp_navigation_primary_row,
nav.pkp_navigation_primary,
#navigationPrimary {
  background: var(--jpai-primary);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(9,139,193,0.25);
}

/* Wrapper lebar nav */
.pkp_navigation_primary_row .pkp_navigation_primary_content,
.pkp_navigation_primary ul {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  list-style: none;
  flex-wrap: wrap;
}

/* Item nav */
.pkp_navigation_primary > ul > li > a,
.pkp_navigation_primary_row ul > li > a,
nav[id="navigationPrimary"] ul li a {
  display: block;
  padding: 15px 16px;
  font-family: var(--jpai-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88) !important;
  text-decoration: none;
  transition: var(--jpai-trans);
  position: relative;
  white-space: nowrap;
}

/* Garis bawah aktif / hover */
.pkp_navigation_primary > ul > li > a::after,
.pkp_navigation_primary_row ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: rgba(255,255,255,0);
  border-radius: 2px 2px 0 0;
  transition: var(--jpai-trans);
}
.pkp_navigation_primary > ul > li > a:hover::after,
.pkp_navigation_primary > ul > li.current > a::after,
.pkp_navigation_primary_row ul > li > a:hover::after {
  background: rgba(255,255,255,0.8);
}

.pkp_navigation_primary > ul > li > a:hover,
.pkp_navigation_primary > ul > li.current > a,
.pkp_navigation_primary_row ul > li > a:hover {
  color: #ffffff !important;
  text-decoration: none;
  background: rgba(255,255,255,0.10);
}

/* Dropdown sub-menu */
.pkp_navigation_primary ul .has_submenu > ul,
.pkp_navigation_primary .children,
.pkp_navigation_primary > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--jpai-border);
  border-top: 3px solid var(--jpai-primary);
  border-radius: 0 var(--jpai-radius-md) var(--jpai-radius-md) var(--jpai-radius-md);
  box-shadow: var(--jpai-shadow-lg);
  list-style: none;
  padding: 4px 0;
  margin: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.pkp_navigation_primary ul .has_submenu:hover > ul,
.pkp_navigation_primary ul .has_submenu:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pkp_navigation_primary .children li a,
.pkp_navigation_primary > ul > li > ul > li > a {
  display: block;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--jpai-text-body) !important;
  border-bottom: 1px solid var(--jpai-border-light);
}
.pkp_navigation_primary .children li:last-child a,
.pkp_navigation_primary > ul > li > ul > li:last-child > a {
  border-bottom: none;
}
.pkp_navigation_primary .children li a:hover,
.pkp_navigation_primary > ul > li > ul > li > a:hover {
  background: var(--jpai-primary-pale);
  color: var(--jpai-primary) !important;
  text-decoration: none;
  padding-left: 26px !important;
}

/* Indikator chevron dropdown */
.pkp_navigation_primary .has_submenu > a::after {
  content: ' ▾';
  font-size: 10px;
  opacity: 0.7;
  position: static;
  background: none;
  display: inline;
}

/* Hamburger / tombol menu mobile */
.pkp_navigation_primary .pkp_navigation_toggle,
#pkp-mobile-nav-toggle {
  display: none;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--jpai-radius-sm);
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: var(--jpai-trans);
}
.pkp_navigation_primary .pkp_navigation_toggle:hover {
  background: rgba(255,255,255,0.25);
}


/* ================================================================
   06. NAVIGASI USER (Login, Register, Bahasa)
   ================================================================ */

.pkp_navigation_user {
  background: var(--jpai-primary-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pkp_navigation_user > ul {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  list-style: none;
  justify-content: flex-end;
  gap: 2px;
}

.pkp_navigation_user > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.80) !important;
  text-decoration: none;
  transition: var(--jpai-trans);
  border-radius: var(--jpai-radius-sm);
  margin: 4px 2px;
}
.pkp_navigation_user > ul > li > a:hover {
  background: rgba(255,255,255,0.15);
  color: #fff !important;
  text-decoration: none;
}

/* Tombol Register lebih menonjol */
.pkp_navigation_user .register a,
.pkp_navigation_user li.register > a {
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.25);
}
.pkp_navigation_user .register a:hover,
.pkp_navigation_user li.register > a:hover {
  background: rgba(255,255,255,0.35);
}

/* Pilih bahasa */
.pkp_navigation_user .locale_toggle,
.pkp_navigation_user .language_toggle a {
  font-size: 12px;
  opacity: 0.75;
}


/* ================================================================
   07. BREADCRUMBS
   ================================================================ */

.cmp_breadcrumbs,
.pkp_structure_head nav[aria-label="breadcrumb"],
ol.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0 0 18px;
  font-size: 12.5px;
}

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

.cmp_breadcrumbs li,
ol.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--jpai-text-muted);
}
.cmp_breadcrumbs li + li::before,
ol.breadcrumb li + li::before {
  content: '›';
  color: var(--jpai-text-light);
  font-size: 14px;
}

.cmp_breadcrumbs a,
ol.breadcrumb a {
  color: var(--jpai-primary);
  font-weight: 500;
}
.cmp_breadcrumbs a:hover,
ol.breadcrumb a:hover {
  text-decoration: underline;
}

.cmp_breadcrumbs .current,
ol.breadcrumb .active {
  color: var(--jpai-text-muted);
  font-weight: 400;
}


/* ================================================================
   08. LAYOUT UTAMA — 2 KOLOM + SIDEBAR
   ================================================================ */

/* Wrapper halaman */
.pkp_structure_page {
  background: var(--jpai-bg-page);
  min-height: calc(100vh - 200px);
}

/* Grid utama 2 kolom */
.pkp_structure_main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px 20px 48px;
  display: grid;
  grid-template-columns: 1fr 295px;
  grid-template-areas: "main sidebar";
  gap: 28px;
  align-items: start;
}

/* Saat tidak ada sidebar (halaman login, dsb.) */
.pkp_structure_main.no_sidebar,
.pkp_structure_main:has(> :only-child) {
  grid-template-columns: 1fr;
  grid-template-areas: "main";
  max-width: 860px;
}

/* Area konten utama */
#pkp_content_main,
.pkp_structure_main > main,
.pkp_structure_main > #main-content {
  grid-area: main;
  min-width: 0;
}

/* Area sidebar */
.pkp_sidebar,
#pkp_sidebar,
.pkp_structure_main > aside {
  grid-area: sidebar;
  min-width: 0;
}

/* Kartu wrapper konten putih */
.pkp_page_content,
.pkp_page_index_index .pkp_structure_main > main > section {
  background: var(--jpai-bg-white);
  border-radius: var(--jpai-radius-lg);
  box-shadow: var(--jpai-shadow-sm);
  border: 1px solid var(--jpai-border-light);
  padding: 28px 30px;
  margin-bottom: 24px;
}


/* ================================================================
   09. HERO / COVER JURNAL (Homepage)
   ================================================================ */

/* Section cover + deskripsi singkat */
.homepageCover,
.pkp_page_index_index .homepageCover,
section.pkp_block_cover {
  background: var(--jpai-bg-white);
  border-radius: var(--jpai-radius-lg);
  box-shadow: var(--jpai-shadow-md);
  overflow: hidden;
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: stretch;
  border: 1px solid var(--jpai-border-light);
  transition: box-shadow 0.25s;
}
.homepageCover:hover { box-shadow: var(--jpai-shadow-lg); }

/* Gambar cover */
.homepageCover .pkp_site_cover,
.homepageCover img[src*="homepageImage"] {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
}

/* Konten samping cover */
.homepageCover .homepageCoverContent,
.homepageCover > div:not(:first-child) {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* Banner hero image (jika full-width) */
.pkp_page_index_index img[src*="homepageImage_"],
.pkp_site_header_image img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--jpai-radius-lg);
  box-shadow: var(--jpai-shadow-md);
  margin-bottom: 24px;
}


/* ================================================================
   10. ABOUT JOURNAL SECTION (Homepage)
   ================================================================ */

/* Container About di homepage */
.homepageAbout,
#homepageAbout,
.pkp_page_index_index .homepageAboutContent {
  background: var(--jpai-bg-white);
  border-radius: var(--jpai-radius-lg);
  box-shadow: var(--jpai-shadow-sm);
  border: 1px solid var(--jpai-border-light);
  padding: 26px 30px;
  margin-bottom: 26px;
}

/* Judul About */
.homepageAbout h2,
#homepageAbout h2 {
  font-family: var(--jpai-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--jpai-text-dark);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--jpai-primary-light);
  position: relative;
}
.homepageAbout h2::after,
#homepageAbout h2::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 48px; height: 2px;
  background: var(--jpai-primary);
}

/* Tabel info jurnal (ISSN, Editor, Publisher) */
.homepageAbout table,
.pkp_page_about table.journalInfo {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.homepageAbout table td,
.pkp_page_about table.journalInfo td {
  padding: 6px 10px 6px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--jpai-border-light);
  color: var(--jpai-text-body);
}
.homepageAbout table td:first-child,
.pkp_page_about table.journalInfo td:first-child {
  font-weight: 700;
  color: var(--jpai-text-dark);
  white-space: nowrap;
  width: 38%;
  padding-right: 16px;
}
.homepageAbout table tr:last-child td {
  border-bottom: none;
}

/* Badge-badge jurnal (SINTA, SCOPUS, Open Access, ISSN) */
.jpai-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0;
}
.jpai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: var(--jpai-trans);
}
.jpai-badge:hover { transform: translateY(-1px); box-shadow: var(--jpai-shadow-sm); text-decoration: none; }
.jpai-badge.scopus   { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.jpai-badge.sinta    { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }
.jpai-badge.doaj     { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }
.jpai-badge.issn     { background: var(--jpai-primary-pale); color: var(--jpai-primary-dark); border: 1px solid #b0d9ef; }
.jpai-badge.oa       { background: #fff3e0; color: #bf360c; border: 1px solid #ffcc80; }
.jpai-badge.dimensions { background: #f3e5f5; color: #4a148c; border: 1px solid #ce93d8; }

/* Tombol CTA Submit */
.jpai-cta-submit,
a.jpai-cta-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--jpai-primary);
  color: #fff !important;
  padding: 11px 24px;
  border-radius: var(--jpai-radius-md);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 3px 12px rgba(9,139,193,0.35);
  transition: var(--jpai-trans);
  text-decoration: none !important;
  border: none;
  cursor: pointer;
}
.jpai-cta-submit:hover,
a.jpai-cta-submit:hover {
  background: var(--jpai-primary-dark);
  box-shadow: 0 5px 18px rgba(9,139,193,0.45);
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* Tombol secondary */
.jpai-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--jpai-primary);
  color: var(--jpai-primary) !important;
  padding: 9px 20px;
  border-radius: var(--jpai-radius-md);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  transition: var(--jpai-trans);
  text-decoration: none !important;
  cursor: pointer;
}
.jpai-btn-outline:hover {
  background: var(--jpai-primary);
  color: #fff !important;
  text-decoration: none !important;
}


/* ================================================================
   11. CURRENT ISSUE & DAFTAR ARTIKEL (Homepage & Issue)
   ================================================================ */

/* Container current issue */
.homepageIssue,
#homepageIssue,
.pkp_page_index_index .current_issue {
  background: var(--jpai-bg-white);
  border-radius: var(--jpai-radius-lg);
  box-shadow: var(--jpai-shadow-sm);
  border: 1px solid var(--jpai-border-light);
  overflow: hidden;
  margin-bottom: 26px;
}

/* Header volume/nomor/tahun */
.homepageIssue .issue_identify,
.homepageIssue > header,
.pkp_page_issue .issue_identify,
.pkp_block_issue_toc > header {
  background: var(--jpai-primary);
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.homepageIssue .issue_identify h2,
.homepageIssue > header h2,
.pkp_page_issue .issue_identify h2 {
  font-family: var(--jpai-font-body);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.3px;
}
.homepageIssue .issue_identify a,
.homepageIssue > header a {
  font-size: 12px;
  color: rgba(255,255,255,0.80) !important;
  text-decoration: none;
  transition: var(--jpai-trans);
  font-weight: 400;
}
.homepageIssue .issue_identify a:hover,
.homepageIssue > header a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* Konten issue */
.homepageIssue > .section,
.homepageIssue .pkp_issue_toc {
  padding: 0;
}

/* Judul seksi artikel (Original Article, Review, dll.) */
.homepageIssue h3,
.homepageIssue .section_title,
.pkp_issue_toc .section_title {
  font-family: var(--jpai-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--jpai-text-muted);
  padding: 16px 24px 8px;
  margin: 0;
  border-bottom: 1px solid var(--jpai-border-light);
}

/* Link "View All Issues" */
.homepageIssue .more,
.homepageIssue a.more_link,
.homepageIssue .view_all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jpai-primary);
  border-top: 1px solid var(--jpai-border-light);
  width: 100%;
  transition: var(--jpai-trans);
}
.homepageIssue .more:hover,
.homepageIssue a.more_link:hover {
  background: var(--jpai-primary-pale);
  text-decoration: none;
}


/* ================================================================
   12. KARTU ARTIKEL (Article Summary)
   ================================================================ */

/* Wrapper daftar artikel */
.pkp_structure_main .articles,
ul.articles,
.pkp_issue_toc ul,
.homepageIssue ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Item artikel */
.obj_article_summary,
.pkp_structure_main li.obj_article_summary,
.homepageIssue li,
.articles > li {
  background: var(--jpai-bg-white);
  border: 1px solid var(--jpai-border-light);
  border-radius: var(--jpai-radius-md);
  padding: 18px 22px 16px 26px;
  margin-bottom: 6px;
  position: relative;
  transition: var(--jpai-trans);
  box-shadow: var(--jpai-shadow-xs);
}

/* Garis kiri aksen */
.obj_article_summary::before,
.homepageIssue li::before,
.articles > li::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--jpai-primary-light);
  border-radius: var(--jpai-radius-sm) 0 0 var(--jpai-radius-sm);
  transition: var(--jpai-trans);
}
.obj_article_summary:hover::before,
.homepageIssue li:hover::before,
.articles > li:hover::before {
  background: var(--jpai-primary);
}

/* Hover state kartu */
.obj_article_summary:hover,
.homepageIssue li:hover,
.articles > li:hover {
  box-shadow: var(--jpai-shadow-md);
  border-color: var(--jpai-primary-light);
  transform: translateX(3px);
}

/* Tipe artikel (Article, Review, dll.) */
.obj_article_summary .pkp_article_type,
.obj_article_summary .section_title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--jpai-primary);
  margin-bottom: 5px;
  display: block;
}

/* Judul artikel */
.obj_article_summary h3,
.obj_article_summary .title,
.homepageIssue li h3,
.articles > li h3 {
  font-family: var(--jpai-font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 7px;
  color: var(--jpai-text-dark);
}

.obj_article_summary h3 a,
.obj_article_summary .title a,
.homepageIssue li h3 a,
.articles > li h3 a {
  color: var(--jpai-text-dark) !important;
  text-decoration: none;
  transition: var(--jpai-trans);
}
.obj_article_summary h3 a:hover,
.articles > li h3 a:hover {
  color: var(--jpai-primary) !important;
}

/* Nama penulis */
.obj_article_summary .authors,
.obj_article_summary .pkp_authors {
  font-size: 12.5px;
  color: var(--jpai-text-muted);
  margin-bottom: 10px;
  font-style: italic;
}

/* Baris halaman + DOI */
.obj_article_summary .page_range,
.obj_article_summary .doi {
  font-size: 11.5px;
  color: var(--jpai-text-light);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.obj_article_summary .doi a {
  color: var(--jpai-text-muted);
  font-size: 11px;
}
.obj_article_summary .doi a:hover { color: var(--jpai-primary); }

/* Baris tautan (PDF, Abstract views) */
.obj_article_summary .pkp_article_galleys,
.obj_article_summary .galleys_links,
.obj_article_summary .download_stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Tombol PDF / galley */
.obj_galley_link,
.obj_article_summary .obj_galley_link a,
.obj_article_summary .pkp_article_galleys a,
.galleys_links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--jpai-primary);
  color: #fff !important;
  padding: 4px 13px;
  border-radius: var(--jpai-radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  transition: var(--jpai-trans);
  border: none;
  cursor: pointer;
}
.obj_galley_link:hover,
.obj_article_summary .obj_galley_link a:hover,
.galleys_links a:hover {
  background: var(--jpai-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(9,139,193,0.3);
  text-decoration: none !important;
}

/* Statistik views/downloads */
.obj_article_summary .pkp_article_details .statistics,
.obj_article_summary .views,
.obj_article_summary .downloads {
  font-size: 11px;
  color: var(--jpai-text-light);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Badge Open Access */
.obj_article_summary .open_access,
.obj_article_summary .oa_badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #bf360c;
  background: #fff3e0;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid #ffcc80;
}
.obj_article_summary .open_access img {
  height: 14px;
  width: auto;
  display: inline;
}


/* ================================================================
   13. HALAMAN DETAIL ARTIKEL
   ================================================================ */

/* Header artikel */
.pkp_page_article .article_header,
.obj_article_details .pkp_article_header {
  background: var(--jpai-bg-white);
  border-radius: var(--jpai-radius-lg);
  padding: 28px 32px;
  box-shadow: var(--jpai-shadow-md);
  border: 1px solid var(--jpai-border-light);
  margin-bottom: 22px;
}

/* Judul artikel di halaman detail */
.pkp_page_article h1,
.obj_article_details h1,
.article_header .page_title {
  font-family: var(--jpai-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--jpai-text-dark);
  line-height: 1.32;
  margin-bottom: 16px;
}

/* Penulis detail */
.pkp_page_article .authors,
.obj_article_details .pkp_article_authors {
  font-size: 13.5px;
  color: var(--jpai-text-muted);
  margin-bottom: 16px;
  line-height: 1.6;
}
.pkp_page_article .authors a,
.obj_article_details .pkp_article_authors a {
  color: var(--jpai-primary);
  font-weight: 600;
}

/* Tombol download PDF besar */
.pkp_page_article .pkp_article_galleys,
.pkp_page_article .galleys_links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}
.pkp_page_article .pkp_article_galleys .obj_galley_link a,
.pkp_page_article .galleys_links a {
  padding: 10px 24px !important;
  font-size: 13.5px !important;
  border-radius: var(--jpai-radius-md) !important;
  box-shadow: 0 3px 10px rgba(9,139,193,0.28);
}

/* Abstract */
.pkp_page_article .pkp_article_abstract,
.obj_article_details .abstract {
  background: var(--jpai-primary-pale);
  border-left: 4px solid var(--jpai-primary);
  border-radius: 0 var(--jpai-radius-md) var(--jpai-radius-md) 0;
  padding: 20px 24px;
  margin: 22px 0;
}
.pkp_page_article .pkp_article_abstract h2,
.obj_article_details .abstract h2 {
  font-family: var(--jpai-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--jpai-primary-dark);
  margin-bottom: 10px;
}
.pkp_page_article .pkp_article_abstract p,
.obj_article_details .abstract p {
  font-size: 14px;
  line-height: 1.78;
  color: var(--jpai-text-body);
  margin: 0;
}

/* Keywords */
.pkp_page_article .pkp_article_keywords,
.obj_article_details .keywords {
  margin: 14px 0;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.pkp_page_article .pkp_article_keywords strong,
.obj_article_details .keywords strong {
  color: var(--jpai-text-dark);
  white-space: nowrap;
}

.jpai-keyword-tag {
  display: inline-block;
  background: var(--jpai-primary-light);
  color: var(--jpai-primary-dark);
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  transition: var(--jpai-trans);
}
.jpai-keyword-tag:hover {
  background: var(--jpai-primary);
  color: #fff;
  text-decoration: none;
}

/* DOI dan metadata */
.pkp_page_article .pkp_article_details,
.obj_article_details .article_meta {
  font-size: 12.5px;
  color: var(--jpai-text-muted);
  padding-top: 14px;
  border-top: 1px solid var(--jpai-border-light);
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pkp_page_article .pkp_article_details a,
.obj_article_details .article_meta a {
  color: var(--jpai-primary);
  font-weight: 600;
}

/* Cara Sitasi */
.pkp_page_article .pkp_article_citation,
.obj_article_details .how_to_cite {
  background: var(--jpai-bg-gray);
  border: 1px solid var(--jpai-border);
  border-radius: var(--jpai-radius-md);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 13px;
}
.pkp_page_article .pkp_article_citation h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--jpai-text-muted);
  margin-bottom: 10px;
}
.pkp_page_article .pkp_article_citation p {
  font-family: var(--jpai-font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--jpai-text-body);
}


/* ================================================================
   14. SIDEBAR & BLOK SIDEBAR
   ================================================================ */

/* Container semua blok sidebar */
.pkp_sidebar,
#pkp_sidebar,
.pkp_block_sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Blok individual sidebar */
.pkp_block {
  background: var(--jpai-bg-white);
  border: 1px solid var(--jpai-border-light);
  border-radius: var(--jpai-radius-lg);
  overflow: hidden;
  box-shadow: var(--jpai-shadow-xs);
  transition: box-shadow 0.2s;
}
.pkp_block:hover {
  box-shadow: var(--jpai-shadow-md);
}

/* Judul blok sidebar */
.pkp_block .title,
.pkp_block h2.title,
.pkp_block h3.title {
  font-family: var(--jpai-font-heading);
  font-size: 0.93rem;
  font-weight: 700;
  color: #ffffff !important;
  background: var(--jpai-primary);
  padding: 11px 16px;
  margin: 0;
  letter-spacing: 0.2px;
  display: block;
  border-radius: 0;
  text-transform: none;
}

/* Konten dalam blok */
.pkp_block .block_content,
.pkp_block > div:not(.title) {
  padding: 12px 14px;
}

/* Daftar link dalam blok */
.pkp_block .block_content ul,
.pkp_block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkp_block .block_content ul li,
.pkp_block ul li {
  border-bottom: 1px solid var(--jpai-border-light);
}
.pkp_block .block_content ul li:last-child,
.pkp_block ul li:last-child {
  border-bottom: none;
}

.pkp_block .block_content ul li a,
.pkp_block ul li a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 3px;
  font-size: 13px;
  color: var(--jpai-text-body) !important;
  font-weight: 500;
  text-decoration: none;
  transition: var(--jpai-trans);
}
.pkp_block .block_content ul li a::before,
.pkp_block ul li a::before {
  content: '›';
  color: var(--jpai-primary);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.pkp_block .block_content ul li a:hover,
.pkp_block ul li a:hover {
  color: var(--jpai-primary) !important;
  padding-left: 8px;
  text-decoration: none;
}

/* Blok Browse */
.pkp_block_browse .block_content a,
.pkp_block_browse a {
  color: var(--jpai-text-body) !important;
}

/* Blok Make A Submission */
.pkp_block_make_submission .cmp_make_submission,
.pkp_block_make_submission a.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--jpai-primary);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: var(--jpai-radius-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: var(--jpai-trans);
  box-shadow: 0 2px 8px rgba(9,139,193,0.25);
  margin: 4px 0;
}
.pkp_block_make_submission .cmp_make_submission:hover,
.pkp_block_make_submission a.submit:hover {
  background: var(--jpai-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(9,139,193,0.35);
}

/* Blok informasi (Laguage toggle) */
.pkp_block_language .block_content a,
.pkp_block_language li a {
  font-size: 13px;
}

/* Blok Custom (untuk badge, gambar akreditasi) */
.pkp_block_custom .block_content {
  text-align: center;
  padding: 14px;
}
.pkp_block_custom .block_content img {
  max-height: 80px;
  margin: 6px auto;
  transition: var(--jpai-trans);
}
.pkp_block_custom .block_content a:hover img {
  transform: scale(1.04);
  opacity: 0.88;
}
.pkp_block_custom .block_content .accred_label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--jpai-text-muted);
  display: block;
  margin: 4px 0 8px;
}

/* Tabel info (ISSN, Editor) dalam blok sidebar */
.pkp_block .block_content table.info_table,
.pkp_block table.info_table {
  width: 100%;
  font-size: 12.5px;
  border-collapse: collapse;
}
.pkp_block table.info_table td {
  padding: 5px 2px;
  vertical-align: top;
  border-bottom: 1px solid var(--jpai-border-light);
}
.pkp_block table.info_table tr:last-child td { border-bottom: none; }
.pkp_block table.info_table td:first-child {
  font-weight: 700;
  color: var(--jpai-text-dark);
  white-space: nowrap;
  padding-right: 10px;
  width: 35%;
}


/* ================================================================
   15. FORM PENCARIAN
   ================================================================ */

/* Blok search sidebar */
.pkp_block_search .block_content form,
.pkp_block_search form {
  display: flex;
  gap: 0;
}

.pkp_block_search input[type="text"],
.pkp_block_search input[type="search"] {
  flex: 1;
  border: 1.5px solid var(--jpai-border);
  border-right: none;
  border-radius: var(--jpai-radius-md) 0 0 var(--jpai-radius-md);
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--jpai-font-body);
  color: var(--jpai-text-body);
  background: var(--jpai-bg-white);
  transition: var(--jpai-trans);
  -webkit-appearance: none;
}
.pkp_block_search input:focus {
  outline: none;
  border-color: var(--jpai-primary);
  box-shadow: 0 0 0 3px rgba(9,139,193,0.12);
}

.pkp_block_search button,
.pkp_block_search input[type="submit"] {
  background: var(--jpai-primary);
  color: #fff;
  border: none;
  border-radius: 0 var(--jpai-radius-md) var(--jpai-radius-md) 0;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--jpai-font-body);
  cursor: pointer;
  transition: var(--jpai-trans);
  white-space: nowrap;
}
.pkp_block_search button:hover,
.pkp_block_search input[type="submit"]:hover {
  background: var(--jpai-primary-dark);
}

/* Link pencarian lanjutan */
.pkp_block_search .advanced_search_link,
.pkp_block_search a {
  font-size: 11.5px;
  color: var(--jpai-text-muted);
  display: block;
  text-align: right;
  margin-top: 6px;
  padding: 2px 0;
}
.pkp_block_search a:hover {
  color: var(--jpai-primary);
}

/* Search bar halaman penuh */
.pkp_page_search .search_form_wrap,
.pkp_page_search form.search {
  background: var(--jpai-bg-white);
  border-radius: var(--jpai-radius-lg);
  padding: 24px 28px;
  box-shadow: var(--jpai-shadow-sm);
  border: 1px solid var(--jpai-border-light);
  margin-bottom: 24px;
}

.pkp_page_search input[type="text"],
.pkp_page_search input[type="search"] {
  width: 100%;
  border: 1.5px solid var(--jpai-border);
  border-radius: var(--jpai-radius-md);
  padding: 10px 16px;
  font-size: 14px;
  transition: var(--jpai-trans);
  -webkit-appearance: none;
}
.pkp_page_search input:focus {
  outline: none;
  border-color: var(--jpai-primary);
  box-shadow: 0 0 0 3px rgba(9,139,193,0.12);
}

.pkp_page_search button[type="submit"],
.pkp_page_search input[type="submit"] {
  background: var(--jpai-primary);
  color: #fff;
  border: none;
  border-radius: var(--jpai-radius-md);
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--jpai-trans);
  margin-top: 10px;
}
.pkp_page_search button[type="submit"]:hover {
  background: var(--jpai-primary-dark);
  transform: translateY(-1px);
}


/* ================================================================
   16. PENGUMUMAN (Announcements)
   ================================================================ */

/* Item pengumuman */
.obj_announcement_summary,
.pkp_page_announcement li,
.pkp_page_announcements .announcement {
  background: var(--jpai-bg-white);
  border: 1px solid var(--jpai-border-light);
  border-radius: var(--jpai-radius-md);
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: var(--jpai-trans);
  box-shadow: var(--jpai-shadow-xs);
}
.obj_announcement_summary:hover,
.pkp_page_announcements .announcement:hover {
  box-shadow: var(--jpai-shadow-md);
  border-color: var(--jpai-primary-light);
}

/* Tanggal pengumuman */
.obj_announcement_summary .date,
.pkp_page_announcements .date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--jpai-text-light);
  margin-bottom: 6px;
  display: block;
}

/* Judul pengumuman */
.obj_announcement_summary h2,
.obj_announcement_summary h3,
.pkp_page_announcements .announcement h3 {
  font-family: var(--jpai-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.obj_announcement_summary h2 a,
.pkp_page_announcements .announcement h3 a {
  color: var(--jpai-primary-dark) !important;
}
.obj_announcement_summary h2 a:hover,
.pkp_page_announcements .announcement h3 a:hover {
  color: var(--jpai-primary) !important;
}


/* ================================================================
   17. HALAMAN ARSIP & TERBITAN
   ================================================================ */

/* Grid terbitan */
.pkp_page_issue_archive .issues_archive,
.issues_archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Item terbitan */
.obj_issue_summary,
.issues_archive li {
  background: var(--jpai-bg-white);
  border: 1px solid var(--jpai-border-light);
  border-radius: var(--jpai-radius-md);
  overflow: hidden;
  transition: var(--jpai-trans);
  box-shadow: var(--jpai-shadow-xs);
}
.obj_issue_summary:hover,
.issues_archive li:hover {
  box-shadow: var(--jpai-shadow-md);
  transform: translateY(-3px);
  border-color: var(--jpai-primary-light);
}

/* Cover terbitan */
.obj_issue_summary .cover,
.obj_issue_summary .pkp_issue_cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-bottom: 1px solid var(--jpai-border-light);
}

/* Info terbitan */
.obj_issue_summary .obj_issue_identify,
.obj_issue_summary .identify {
  padding: 14px 16px;
}
.obj_issue_summary .obj_issue_identify h2,
.obj_issue_summary .identify h2 {
  font-family: var(--jpai-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.obj_issue_summary .obj_issue_identify h2 a,
.obj_issue_summary .identify h2 a {
  color: var(--jpai-text-dark) !important;
}
.obj_issue_summary .obj_issue_identify h2 a:hover {
  color: var(--jpai-primary) !important;
}
.obj_issue_summary .obj_issue_identify .published,
.obj_issue_summary .identify .date {
  font-size: 12px;
  color: var(--jpai-text-muted);
}


/* ================================================================
   18. FORM (Login, Register, Submit Artikel)
   ================================================================ */

/* Container form */
.pkp_page_login .pkp_form,
.pkp_page_register .pkp_form,
.pkp_page_submission .pkp_form,
.pkp_form {
  background: var(--jpai-bg-white);
  border-radius: var(--jpai-radius-lg);
  padding: 32px 36px;
  box-shadow: var(--jpai-shadow-md);
  border: 1px solid var(--jpai-border-light);
  max-width: 600px;
  margin: 0 auto;
}

/* Label form */
.pkp_form label,
.pkp_form .label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--jpai-text-dark);
  margin-bottom: 5px;
  display: block;
}
.pkp_form label .required,
.pkp_form .required {
  color: #e53935;
  font-size: 14px;
}

/* Input, textarea, select */
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="url"],
.pkp_form input[type="number"],
.pkp_form select,
.pkp_form textarea {
  width: 100%;
  border: 1.5px solid var(--jpai-border);
  border-radius: var(--jpai-radius-md);
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--jpai-font-body);
  color: var(--jpai-text-body);
  background: var(--jpai-bg-white);
  transition: var(--jpai-trans);
  -webkit-appearance: none;
}
.pkp_form input:focus,
.pkp_form select:focus,
.pkp_form textarea:focus {
  outline: none;
  border-color: var(--jpai-primary);
  box-shadow: 0 0 0 3px rgba(9,139,193,0.12);
}
.pkp_form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Tombol submit form */
.pkp_form .submitFormButton,
.pkp_form input[type="submit"],
.pkp_form button[type="submit"],
.pkp_form .pkp_button_primary {
  background: var(--jpai-primary);
  color: #fff;
  border: none;
  border-radius: var(--jpai-radius-md);
  padding: 11px 28px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--jpai-font-body);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: var(--jpai-trans);
  box-shadow: 0 2px 8px rgba(9,139,193,0.25);
}
.pkp_form .submitFormButton:hover,
.pkp_form input[type="submit"]:hover,
.pkp_form button[type="submit"]:hover {
  background: var(--jpai-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(9,139,193,0.35);
}

/* Tombol cancel/secondary form */
.pkp_form .cancelFormButton,
.pkp_form .pkp_button_secondary {
  background: transparent;
  color: var(--jpai-text-muted);
  border: 1.5px solid var(--jpai-border);
  border-radius: var(--jpai-radius-md);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--jpai-trans);
  margin-left: 10px;
}
.pkp_form .cancelFormButton:hover {
  border-color: var(--jpai-primary);
  color: var(--jpai-primary);
}

/* Pesan error validasi */
.pkp_form .error,
.pkp_form .pkp_notification_error {
  border: 1.5px solid #ef5350 !important;
  box-shadow: 0 0 0 3px rgba(239,83,80,0.10) !important;
}
.pkp_form .errorMessage,
.pkp_form .pkp_notification_error_msg {
  color: #c62828;
  font-size: 12.5px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Grup form */
.pkp_form .form_group,
.pkp_form .section {
  margin-bottom: 20px;
}

/* Hint / deskripsi field */
.pkp_form .hint,
.pkp_form .description {
  font-size: 12.5px;
  color: var(--jpai-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}


/* ================================================================
   19. PAGINASI
   ================================================================ */

.pkp_pagination,
nav.pagination,
.pagination_wrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}

.pkp_pagination ul,
nav.pagination ul {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pkp_pagination li a,
.pkp_pagination li span,
nav.pagination li a,
nav.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--jpai-radius-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--jpai-border);
  color: var(--jpai-text-body);
  transition: var(--jpai-trans);
  text-decoration: none;
}
.pkp_pagination li a:hover,
nav.pagination li a:hover {
  border-color: var(--jpai-primary);
  color: var(--jpai-primary);
  text-decoration: none;
}
.pkp_pagination li.current span,
.pkp_pagination li.active span,
nav.pagination li.current a {
  background: var(--jpai-primary);
  border-color: var(--jpai-primary);
  color: #fff;
}

.pkp_pagination li.disabled span,
nav.pagination li.disabled a {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ================================================================
   20. TABEL
   ================================================================ */

.pkp_page_content table,
table.pkp_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--jpai-bg-white);
  border-radius: var(--jpai-radius-md);
  overflow: hidden;
  box-shadow: var(--jpai-shadow-xs);
  border: 1px solid var(--jpai-border-light);
}

.pkp_page_content table thead th,
table.pkp_table thead th {
  background: var(--jpai-primary);
  color: #fff;
  padding: 11px 16px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  text-align: left;
  border: none;
}

.pkp_page_content table tbody td,
table.pkp_table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--jpai-border-light);
  color: var(--jpai-text-body);
  vertical-align: top;
}

.pkp_page_content table tbody tr:last-child td,
table.pkp_table tbody tr:last-child td {
  border-bottom: none;
}

.pkp_page_content table tbody tr:hover td,
table.pkp_table tbody tr:hover td {
  background: var(--jpai-primary-pale);
}


/* ================================================================
   21. NOTIFIKASI & ALERT
   ================================================================ */

.pkp_notification,
.pkp_controllers_notification .pkp_notification,
.notificationItem {
  padding: 12px 18px;
  border-radius: var(--jpai-radius-md);
  font-size: 13.5px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}

.pkp_notification.notifySuccess,
.pkp_notification.success {
  background: #e8f5e9;
  color: #1b5e20;
  border-left: 4px solid #43a047;
}
.pkp_notification.notifyError,
.pkp_notification.error {
  background: #fce4ec;
  color: #880e4f;
  border-left: 4px solid #e91e63;
}
.pkp_notification.notifyWarning,
.pkp_notification.warning {
  background: #fff8e1;
  color: #bf360c;
  border-left: 4px solid #ffa000;
}
.pkp_notification.notifyInfo,
.pkp_notification.info {
  background: var(--jpai-primary-pale);
  color: var(--jpai-primary-dark);
  border-left: 4px solid var(--jpai-primary);
}

/* Flash message */
.pkp_controllers_notification {
  max-width: 1220px;
  margin: 12px auto 0;
  padding: 0 20px;
}


/* ================================================================
   22. FOOTER
   ================================================================ */

/* Container footer */
#pkp_content_footer,
.pkp_structure_footer,
footer.pkp_structure_footer {
  background: var(--jpai-text-dark);
  color: rgba(255,255,255,0.72);
  margin-top: 48px;
}

/* Area dalam footer */
.pkp_structure_footer_content,
#pkp_content_footer > .pkp_footer_content {
  max-width: 1220px;
  margin: 0 auto;
  padding: 36px 20px 24px;
}

/* Grid 3 kolom footer */
.pkp_footer_grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 28px;
}

/* Judul kolom footer */
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer h4,
#pkp_content_footer h2,
#pkp_content_footer h3,
#pkp_content_footer h4 {
  font-family: var(--jpai-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Link di footer */
.pkp_structure_footer a,
#pkp_content_footer a {
  color: rgba(255,255,255,0.60);
  font-size: 12.5px;
  line-height: 1.7;
  transition: var(--jpai-trans);
  text-decoration: none;
  display: block;
  padding: 2px 0;
}
.pkp_structure_footer a:hover,
#pkp_content_footer a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* Logo OJS brand footer */
.pkp_brand_footer,
#pkp_content_footer .pkp_brand_footer {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 18px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.40);
}
.pkp_brand_footer a {
  color: rgba(255,255,255,0.50) !important;
  display: inline !important;
  padding: 0 !important;
}
.pkp_brand_footer a:hover { color: rgba(255,255,255,0.80) !important; }

/* Logo footer */
.pkp_structure_footer .pkp_site_name img,
#pkp_content_footer .pkp_logo {
  max-height: 50px;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

/* Creative Commons di footer */
.pkp_structure_footer .cc_license,
.pkp_structure_footer .pkp_footer_cc {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.50);
  margin-top: 10px;
}
.pkp_structure_footer .cc_license img {
  height: 22px;
  opacity: 0.8;
}


/* ================================================================
   23. RESPONSIF — TABLET & MOBILE
   ================================================================ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .pkp_structure_main {
    grid-template-columns: 1fr 260px;
    gap: 22px;
    padding: 22px 18px 36px;
  }
}

/* Tablet bawah / landscape HP (≤ 900px) */
@media (max-width: 900px) {
  .pkp_structure_main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
    padding: 18px 16px 32px;
  }

  .pkp_sidebar,
  #pkp_sidebar {
    order: 2;
  }
  #pkp_content_main {
    order: 1;
  }

  .homepageCover {
    grid-template-columns: 1fr;
  }
  .homepageCover > *:first-child {
    max-height: 200px;
  }

  .pkp_footer_grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  /* Navigasi mobile */
  .pkp_navigation_primary > ul {
    flex-direction: column;
    display: none;
    padding-bottom: 8px;
  }
  .pkp_navigation_primary > ul.expanded {
    display: flex;
  }
  .pkp_navigation_primary .pkp_navigation_toggle {
    display: inline-flex;
  }
  .pkp_navigation_primary > ul > li > a {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .pkp_navigation_primary .children {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-top: none;
    border-radius: 0;
    background: rgba(0,0,0,0.15);
    padding-left: 12px;
  }
  .pkp_navigation_primary .children li a {
    border-bottom-color: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.80) !important;
  }

  /* Header */
  .pkp_site_name,
  .pkp_site_name a {
    font-size: 1.1rem;
  }
  .pkp_site_name img {
    max-height: 44px;
  }

  /* Layout */
  .pkp_structure_main {
    padding: 14px 12px 28px;
    gap: 16px;
  }

  /* Kartu artikel */
  .obj_article_summary {
    padding: 14px 16px 12px 18px;
  }

  /* Form */
  .pkp_form {
    padding: 20px 18px;
  }

  /* Judul halaman detail */
  .pkp_page_article h1 {
    font-size: 1.3rem;
  }

  /* Issues archive grid */
  .issues_archive {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  /* Footer */
  .pkp_footer_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pkp_brand_footer {
    flex-direction: column;
    text-align: center;
  }
}

/* Aksesibilitas: gerak berkurang */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.1ms !important;
  }
}