/* ==========================================================
   JOSI OJS NATIVE TECHNOLOGY THEME - STABLE FIX
   Tujuan:
   1. Tetap konek dengan sistem asli OJS
   2. Tidak merusak halaman Archives, Submissions, About, Contact
   3. Menghilangkan garis vertikal/layout miring
   4. Mempercantik tampilan seperti portal jurnal teknologi
   Upload: Settings > Website > Appearance > Advanced > Journal Style Sheet
   ========================================================== */

:root {
  --josi-dark: #03111f;
  --josi-dark-2: #062841;
  --josi-blue: #00d4ff;
  --josi-blue-2: #0077ff;
  --josi-green: #22f6a7;
  --josi-purple: #7c3cff;
  --josi-text: #102033;
  --josi-muted: #5f7084;
  --josi-border: rgba(0, 212, 255, 0.18);
  --josi-card: rgba(255,255,255,.97);
}

/* =========================
   Animasi ringan
   ========================= */

@keyframes josiGridMove {
  0% { background-position: 0% 50%, 0 0, 0 0; }
  50% { background-position: 100% 50%, 30px 30px, -30px -30px; }
  100% { background-position: 0% 50%, 0 0, 0 0; }
}

@keyframes josiPulse {
  0%,100% {
    box-shadow: 0 0 14px rgba(0,212,255,.58);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 28px rgba(34,246,167,.78);
    transform: scale(1.04);
  }
}

/* ==========================================================
   JOSI QUICK MENU DETACHED FROM NAV DROPDOWN - FINAL
   Quick Menu tidak lagi memakai dropdown About/navbar.
   Yang tampil hanya panel standalone #josiQuickMenuPanel.
   ========================================================== */

html.josi-journal-page #navigationPrimary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
html.josi-journal-page .pkp_navigation_primary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
html.josi-journal-page #navigationPrimary ul.josi-quick-menu-dropdown,
html.josi-journal-page .pkp_navigation_primary ul.josi-quick-menu-dropdown,
html.josi-journal-page #navigationPrimary > li > a[href*="about"] + ul,
html.josi-journal-page .pkp_navigation_primary > li > a[href*="about"] + ul,
html.josi-journal-page #navigationPrimary > li:nth-child(3) > ul,
html.josi-journal-page .pkp_navigation_primary > li:nth-child(3) > ul,
body.josi-journal-page #navigationPrimary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
body.josi-journal-page .pkp_navigation_primary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
body.josi-journal-page #navigationPrimary ul.josi-quick-menu-dropdown,
body.josi-journal-page .pkp_navigation_primary ul.josi-quick-menu-dropdown,
body.josi-journal-page #navigationPrimary > li > a[href*="about"] + ul,
body.josi-journal-page .pkp_navigation_primary > li > a[href*="about"] + ul,
body.josi-journal-page #navigationPrimary > li:nth-child(3) > ul,
body.josi-journal-page .pkp_navigation_primary > li:nth-child(3) > ul {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 761px) {
  html.josi-journal-page body.pkp_page_index .pkp_structure_main,
  body.josi-journal-page.pkp_page_index .pkp_structure_main,
  body.pkp_page_index .pkp_structure_main {
    position: relative !important;
    overflow: visible !important;
  }

  html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiQuickMenuPanel.josi-quick-menu-standby {
    position: absolute !important;
    top: 42px !important;
    left: min(calc(50% + 255px), calc(100vw - 274px)) !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    width: 250px !important;
    max-width: 250px !important;
    margin: 0 !important;
    z-index: 2147483500 !important;
  }

  html.josi-journal-page #josiAboutQuickRow,
  body.josi-journal-page #josiAboutQuickRow,
  #josiAboutQuickRow {
    display: grid !important;
    grid-template-columns: minmax(0, 760px) 250px !important;
    gap: 48px !important;
    align-items: start !important;
    justify-content: center !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: 1180px !important;
    margin: 42px auto 28px !important;
    overflow: visible !important;
  }

  html.josi-journal-page #josiAboutQuickRow .homepage_about,
  body.josi-journal-page #josiAboutQuickRow .homepage_about,
  #josiAboutQuickRow .homepage_about,
  html.josi-journal-page #josiAboutQuickRow > :not(#josiQuickMenuPanel),
  body.josi-journal-page #josiAboutQuickRow > :not(#josiQuickMenuPanel),
  #josiAboutQuickRow > :not(#josiQuickMenuPanel) {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 !important;
  }

  html.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby {
    grid-column: 2 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    align-self: start !important;
    width: 250px !important;
    max-width: 250px !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
}

@media (max-width: 760px) {
  html.josi-journal-page #josiAboutQuickRow,
  body.josi-journal-page #josiAboutQuickRow,
  #josiAboutQuickRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: calc(100vw - 24px) !important;
    margin: 24px auto !important;
  }

  html.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby {
    grid-column: 1 !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 18px 0 24px !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU MUST NOT FALL BACK TO SECTION AREA
   Menu disembunyikan sampai script berhasil menaruhnya di row About.
   ========================================================== */

html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
body.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
#josiQuickMenuPanel.josi-quick-menu-standby {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 761px) {
  html.josi-journal-page.josi-quick-ready #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}

/* ==========================================================
   JOSI ABSOLUTE FINAL QUICK MENU OVERRIDE
   ========================================================== */

html.josi-journal-page #navigationPrimary > li.josi-about-hidden,
html.josi-journal-page .pkp_navigation_primary > li.josi-about-hidden,
html.josi-journal-page #navigationPrimary > li:has(> a[href*="/about"]),
html.josi-journal-page .pkp_navigation_primary > li:has(> a[href*="/about"]),
html.josi-journal-page #navigationPrimary > li:nth-child(3),
html.josi-journal-page .pkp_navigation_primary > li:nth-child(3) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#navigationPrimary > li.josi-about-hidden,
.pkp_navigation_primary > li.josi-about-hidden,
#navigationPrimary > li:has(> a[href$="/about"]),
.pkp_navigation_primary > li:has(> a[href$="/about"]),
#navigationPrimary > li:has(> a[href$="/about/"]),
.pkp_navigation_primary > li:has(> a[href$="/about/"]),
#navigationPrimary > li:nth-child(3),
.pkp_navigation_primary > li:nth-child(3) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby {
  display: block !important;
  position: fixed !important;
  top: var(--josi-quick-standby-top, 345px) !important;
  left: var(--josi-quick-standby-left, auto) !important;
  right: auto !important;
  z-index: 8500 !important;
  width: var(--josi-quick-standby-width, 250px) !important;
  max-width: calc(100vw - 32px) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================
   JOSI QUICK MENU STANDBY PANEL - ABOUT HIDDEN
   ========================================================== */

#navigationPrimary > li.josi-about-hidden,
.pkp_navigation_primary > li.josi-about-hidden {
  display: none !important;
}

#josiQuickMenuPanel.josi-quick-menu-standby {
  position: fixed !important;
  top: var(--josi-quick-standby-top, 345px) !important;
  left: var(--josi-quick-standby-left, auto) !important;
  right: auto !important;
  z-index: 8500 !important;
  width: var(--josi-quick-standby-width, 250px) !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-radius: 22px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,212,255,.20), transparent 35%),
    radial-gradient(circle at 92% 8%, rgba(124,60,255,.28), transparent 36%),
    linear-gradient(145deg, rgba(3,17,31,.96), rgba(5,38,64,.94) 55%, rgba(17,12,58,.94)) !important;
  border: 1px solid rgba(0,212,255,.40) !important;
  box-shadow:
    0 26px 70px rgba(0, 20, 48, .32),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 32px rgba(0,212,255,.15) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}

#josiQuickMenuPanel .josi-quick-menu-heading {
  display: block !important;
  margin: 0 0 8px !important;
  padding: 15px 18px 14px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, rgba(0,119,255,.95), rgba(0,212,255,.72), rgba(34,246,167,.46)) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  text-shadow: 0 0 14px rgba(0,212,255,.72) !important;
}

#josiQuickMenuPanel .josi-quick-menu-list {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#josiQuickMenuPanel .josi-quick-menu-list > li {
  position: relative !important;
  display: block !important;
  margin: 0 10px !important;
  border-bottom: 1px solid rgba(0,212,255,.18) !important;
  background: rgba(255,255,255,.045) !important;
}

#josiQuickMenuPanel .josi-quick-menu-list > li:last-child {
  border-bottom: 0 !important;
}

#josiQuickMenuPanel .josi-quick-menu-list > li::before {
  content: "»" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  z-index: 2 !important;
  color: #27ecff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 10px rgba(0,212,255,.58) !important;
  transform: translateY(-50%) !important;
}

#josiQuickMenuPanel .josi-quick-menu-list a {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 14px 15px 14px 42px !important;
  color: #dffcff !important;
  -webkit-text-fill-color: #dffcff !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.26 !important;
  text-decoration: none !important;
  text-shadow: 0 0 10px rgba(0,212,255,.22) !important;
}

#josiQuickMenuPanel .josi-quick-menu-list a:hover,
#josiQuickMenuPanel .josi-quick-menu-list a:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(90deg, rgba(0,212,255,.20), rgba(34,246,167,.12), rgba(124,60,255,.12)) !important;
  box-shadow: inset 4px 0 0 #22f6a7, 0 0 22px rgba(0,212,255,.12) !important;
  outline: none !important;
  transform: translateX(4px) !important;
}

html.josi-light-mode #josiQuickMenuPanel.josi-quick-menu-standby,
body.josi-light-mode #josiQuickMenuPanel.josi-quick-menu-standby,
html[data-josi-theme="light"] #josiQuickMenuPanel.josi-quick-menu-standby {
  background:
    radial-gradient(circle at 15% 0%, rgba(0,212,255,.16), transparent 34%),
    radial-gradient(circle at 94% 10%, rgba(124,60,255,.12), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(239,251,255,.96)) !important;
  border-color: rgba(0,119,255,.26) !important;
  box-shadow: 0 22px 60px rgba(0, 35, 78, .18), 0 0 0 1px rgba(255,255,255,.78) inset !important;
}

html.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list > li,
body.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list > li,
html[data-josi-theme="light"] #josiQuickMenuPanel .josi-quick-menu-list > li {
  background: rgba(255,255,255,.68) !important;
  border-bottom-color: rgba(0,119,255,.20) !important;
}

html.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list a,
body.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list a,
html[data-josi-theme="light"] #josiQuickMenuPanel .josi-quick-menu-list a {
  color: #075d8b !important;
  -webkit-text-fill-color: #075d8b !important;
  text-shadow: none !important;
}

@media (max-width: 1200px) {
  #josiQuickMenuPanel.josi-quick-menu-standby {
    width: var(--josi-quick-standby-width, 250px) !important;
  }
}

@media (max-width: 760px) {
  #josiQuickMenuPanel.josi-quick-menu-standby {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 18px 0 24px !important;
  }
}

/* JOSI Quick Menu visual polish */
#josiQuickMenuPanel.josi-quick-menu-standby,
html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby {
  padding: 0 0 12px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 212, 255, .18), transparent 35%),
    linear-gradient(145deg, rgba(5, 28, 52, .97), rgba(14, 33, 80, .96)) !important;
  border: 1px solid rgba(85, 219, 255, .34) !important;
  box-shadow:
    0 22px 52px rgba(0, 34, 70, .24),
    0 0 0 1px rgba(255,255,255,.06) inset !important;
}

#josiQuickMenuPanel .josi-quick-menu-heading,
html.josi-journal-page #josiQuickMenuPanel .josi-quick-menu-heading {
  margin: 0 0 8px !important;
  padding: 14px 18px 13px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .04em !important;
  background: linear-gradient(90deg, #0788ff, #00bfd8 54%, rgba(40, 175, 145, .86)) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  text-shadow: 0 1px 10px rgba(0, 35, 72, .36) !important;
}

#josiQuickMenuPanel .josi-quick-menu-list,
html.josi-journal-page #josiQuickMenuPanel .josi-quick-menu-list {
  padding: 0 10px !important;
}

#josiQuickMenuPanel .josi-quick-menu-list > li,
html.josi-journal-page #josiQuickMenuPanel .josi-quick-menu-list > li {
  margin: 0 !important;
  min-height: 52px !important;
  border-bottom: 1px solid rgba(87, 221, 255, .18) !important;
  background: rgba(255,255,255,.045) !important;
}

#josiQuickMenuPanel .josi-quick-menu-list > li:first-child,
html.josi-journal-page #josiQuickMenuPanel .josi-quick-menu-list > li:first-child {
  border-radius: 12px 12px 0 0 !important;
}

#josiQuickMenuPanel .josi-quick-menu-list > li:last-child,
html.josi-journal-page #josiQuickMenuPanel .josi-quick-menu-list > li:last-child {
  border-bottom: 0 !important;
  border-radius: 0 0 12px 12px !important;
}

#josiQuickMenuPanel .josi-quick-menu-list a,
html.josi-journal-page #josiQuickMenuPanel .josi-quick-menu-list a {
  min-height: 52px !important;
  padding: 0 14px 0 42px !important;
  display: flex !important;
  align-items: center !important;
  color: #dffcff !important;
  -webkit-text-fill-color: #dffcff !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

#josiQuickMenuPanel .josi-quick-menu-list a:hover,
#josiQuickMenuPanel .josi-quick-menu-list a:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(90deg, rgba(0, 212, 255, .18), rgba(34, 246, 167, .10)) !important;
  outline: none !important;
}

@keyframes josiLoaderFadeOut {
  0%, 65% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes josiSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =========================
   Loading screen singkat
   ========================= */

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:
    linear-gradient(90deg, rgba(0,212,255,0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,212,255,0.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(124,60,255,0.18), transparent 36%),
    linear-gradient(135deg, #03111f, #062841, #09173d);
  background-size: 40px 40px, 40px 40px, auto, 100% 100%;
  animation: josiGridMove 2.4s linear infinite, josiLoaderFadeOut 2.2s ease forwards;
  pointer-events: none;
}

html::after {
  content: "JOSI";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 118px;
  height: 118px;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 2px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.20), rgba(255,255,255,0.02) 40%, transparent 42%),
    linear-gradient(135deg, rgba(0,212,255,0.20), rgba(124,60,255,0.20)),
    rgba(3, 17, 31, 0.94);
  border: 2px solid rgba(0,212,255,0.60);
  transform: translate(-50%, -50%);
  animation: josiPulse 1.5s ease-in-out infinite, josiLoaderFadeOut 2.2s ease forwards;
  pointer-events: none;
}

body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 154px;
  height: 154px;
  z-index: 999999;
  border-radius: 50%;
  border: 2px dashed rgba(34, 246, 167, 0.55);
  border-top-color: rgba(0,212,255,0.95);
  border-bottom-color: rgba(124,60,255,0.9);
  transform: translate(-50%, -50%);
  animation: josiSpin 2s linear infinite, josiLoaderFadeOut 2.2s ease forwards;
  pointer-events: none;
}

/* =========================
   Background umum
   ========================= */

html,
body {
  overflow-x: hidden !important;
}

body {
  background:
    radial-gradient(circle at 15% 16%, rgba(0,212,255,.14), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(124,60,255,.13), transparent 35%),
    linear-gradient(180deg, #f3fbff 0%, #ffffff 48%, #edf8ff 100%);
  color: var(--josi-text);
}

/* =========================
   Header dan navigasi OJS
   ========================= */

.pkp_structure_head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 25%, rgba(0,212,255,.22), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(34,246,167,.16), transparent 30%),
    linear-gradient(135deg, #03111f, #082d43, #071936) !important;
  border-bottom: 1px solid rgba(0,212,255,.32) !important;
  box-shadow: 0 14px 40px rgba(0,35,68,.30);
}

.pkp_structure_head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .38;
  pointer-events: none;
}

.pkp_site_name,
.pkp_site_name > a,
.pkp_site_name .is_text {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  text-shadow: 0 0 18px rgba(0,212,255,.45);
}

.pkp_site_name > a {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}

.pkp_site_name > a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 16%, var(--josi-blue) 18% 36%, transparent 38%),
    conic-gradient(from 45deg, var(--josi-blue), var(--josi-purple), var(--josi-green), var(--josi-blue));
  animation: josiPulse 2.2s ease-in-out infinite;
}

.pkp_site_name .is_text {
  font-size: 24px !important;
  line-height: 1.25 !important;
}

.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper {
  background: rgba(0,119,180,.78) !important;
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.12);
}

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_user > li > a:hover {
  color: #dffcff !important;
}

/* =========================
   FIX UTAMA: layout jangan dipaksa grid
   Ini mencegah Archives/Submissions berantakan dan garis vertikal muncul.
   ========================= */

.pkp_structure_body,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar_left,
.pkp_structure_sidebar_right {
  border-left: none !important;
  border-right: none !important;
}

.pkp_structure_body::before,
.pkp_structure_body::after,
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after {
  content: none !important;
  display: none !important;
}

/* Biarkan OJS mengatur struktur internal, cukup diberi batas lebar */
.pkp_structure_content {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 34px 22px !important;
}

/* Main content selalu rapi di tengah */
.pkp_structure_main {
  background: rgba(255,255,255,.97);
  border: 1px solid var(--josi-border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,55,90,.13);
  padding: 32px !important;
  overflow: hidden;
}

/* Sidebar OJS tetap hidup jika ada block/plugin, tapi tidak memunculkan garis */
.pkp_structure_sidebar,
.pkp_structure_sidebar_left,
.pkp_structure_sidebar_right {
  background: transparent !important;
}

/* Jika halaman tidak punya sidebar, tetap center */
.pkp_structure_content:not(:has(.pkp_structure_sidebar)) .pkp_structure_main {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================
   Blok OJS / Sidebar
   ========================= */

.pkp_block,
.block_custom,
.block_make_submission,
.block_information,
.block_language,
.block_developed_by,
.block_browse,
.block_keyword_cloud {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96));
  border: 1px solid var(--josi-border);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(0,73,114,.08);
  padding: 22px !important;
  margin-bottom: 22px !important;
}

.pkp_block .title,
.pkp_block h2,
.pkp_block h3,
.block_make_submission .title {
  color: #092d43 !important;
  font-weight: 900 !important;
  position: relative;
  padding-left: 16px;
  margin-top: 0;
}

.pkp_block .title::before,
.pkp_block h2::before,
.pkp_block h3::before,
.block_make_submission .title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--josi-blue);
  box-shadow: 0 0 12px rgba(0,212,255,.82);
}

.pkp_block a,
.block_custom a,
.block_information a,
.block_language a {
  color: #0a5c7e !important;
  font-weight: 800;
  text-decoration: none !important;
}

/* =========================
   Additional content native
   ========================= */

.josi-native-banner {
  background:
    radial-gradient(circle at 12% 18%, rgba(0,212,255,.26), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(124,60,255,.24), transparent 34%),
    linear-gradient(135deg, #03111f, #063452, #07193c);
  border-radius: 26px;
  padding: 30px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 52px rgba(0,30,70,.24);
  margin-bottom: 26px;
}

.josi-native-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .36;
}

.josi-native-banner > * {
  position: relative;
  z-index: 1;
}

.josi-native-banner .badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(0,212,255,.28);
  font-weight: 900;
  color: #dffcff;
}

.josi-native-banner .badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--josi-green);
  box-shadow: 0 0 16px rgba(34,246,167,.8);
}

.josi-native-banner h2 {
  color: #ffffff !important;
  font-size: 34px;
  line-height: 1.16;
  margin: 18px 0 12px;
}

.josi-native-banner p {
  color: #e3f9ff;
  line-height: 1.75;
  font-size: 16px;
  max-width: 860px;
}

.josi-index-strip,
.josi-timeline-native {
  background: linear-gradient(135deg, #effbff, #ffffff);
  border: 1px solid var(--josi-border);
  border-left: 6px solid var(--josi-blue);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 26px;
  box-shadow: 0 12px 30px rgba(0,73,114,.06);
}

.josi-index-strip h3,
.josi-timeline-native h3 {
  color: #092d43 !important;
  font-weight: 900;
  margin-top: 0;
}

.josi-index-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.josi-index-items span {
  border-radius: 999px;
  padding: 7px 11px;
  background: #eafdff;
  border: 1px solid rgba(0,212,255,.20);
  color: #0a5c7e;
  font-weight: 800;
  font-size: 13px;
}

.josi-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.josi-flow .step {
  border-radius: 18px;
  border: 1px solid rgba(0,212,255,.18);
  padding: 18px;
  background: #ffffff;
}

.josi-flow .num {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--josi-blue-2), var(--josi-blue), var(--josi-green));
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 10px;
}

.josi-flow h4 {
  margin: 0 0 8px;
  color: #092d43;
  font-weight: 900;
}

.josi-flow p {
  color: var(--josi-muted);
  margin: 0;
  line-height: 1.6;
}

/* =========================
   Heading dan konten OJS
   ========================= */

.page h1,
.page h2,
.page h3,
.obj_issue_toc .heading,
.pkp_page_index .current_issue h2,
.pkp_page_index .homepage_about h2,
.pkp_page_index .journal_summary h2 {
  color: #092d43 !important;
  font-weight: 900 !important;
}

.page h1::after,
.obj_issue_toc .heading::after,
.pkp_page_index .current_issue h2::after {
  content: "";
  display: block;
  width: 92px;
  height: 4px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--josi-blue), var(--josi-purple));
  box-shadow: 0 0 18px rgba(0,212,255,.40);
}

.pkp_page_index .journal_summary,
.pkp_page_index .homepage_about,
.pkp_page_index .additional_content,
.pkp_page_index .current_issue {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96));
  border: 1px solid var(--josi-border);
  border-left: 6px solid var(--josi-blue);
  border-radius: 22px;
  padding: 26px;
  margin-bottom: 26px;
  box-shadow: 0 18px 42px rgba(0,73,114,.08);
}

/* =========================
   Current Issue, Article, PDF
   ========================= */

.obj_article_summary,
.cmp_article_list > li,
.obj_issue_summary {
  background: #ffffff;
  border: 1px solid rgba(0,212,255,.16) !important;
  border-radius: 18px;
  padding: 18px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 12px 30px rgba(0,73,114,.07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.obj_article_summary:hover,
.cmp_article_list > li:hover,
.obj_issue_summary:hover {
  transform: translateY(-3px);
  border-color: rgba(0,212,255,.42) !important;
  box-shadow: 0 20px 42px rgba(0,119,255,.12);
}

.obj_article_summary .title a,
.obj_issue_summary .title a {
  color: #0b5f83 !important;
  font-weight: 900 !important;
}

.obj_galley_link,
.cmp_button,
.block_make_submission a,
button.submit,
a.cmp_button {
  background: linear-gradient(135deg, var(--josi-blue-2), var(--josi-blue), var(--josi-green)) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 10px 17px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 28px rgba(0,119,255,.22);
  text-decoration: none !important;
}

.obj_galley_link:hover,
.cmp_button:hover,
.block_make_submission a:hover,
button.submit:hover {
  filter: brightness(1.05);
}

/* =========================
   Footer OJS
   ========================= */

html.josi-journal-page .pkp_structure_footer_wrapper {
  background:
    radial-gradient(circle at 12% 20%, rgba(0,212,255,.18), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(124,60,255,.16), transparent 34%),
    linear-gradient(135deg, #03111f, #062841, #09173d) !important;
  color: #ffffff !important;
  margin-top: 32px;
  border-top: 1px solid rgba(0,212,255,.28);
  box-shadow: 0 -18px 48px rgba(0, 40, 80, .18);
}

html.josi-journal-page .pkp_structure_footer_wrapper a {
  color: #dffcff !important;
}

html.josi-journal-page .pkp_brand_footer,
html.josi-journal-page .pkp_brand_footer img {
  opacity: .18 !important;
  filter: grayscale(1);
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1000px) {
  .josi-flow {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 680px) {
  .pkp_site_name .is_text {
    font-size: 17px !important;
  }

  .pkp_structure_content {
    padding: 24px 14px !important;
  }

  .pkp_structure_main {
    padding: 22px !important;
    border-radius: 18px;
  }

  .josi-native-banner h2 {
    font-size: 26px;
  }

  .josi-flow {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}



/* ==========================================================
   JOSI LOADER FIX - CENTER + TRANSPARENT
   Tempel di bagian paling bawah CSS atau gunakan file full replacement.
   Fungsi:
   - Loading tetap muncul
   - Posisi logo dan cincin benar-benar di tengah layar
   - Background loading transparan, tidak menutup halaman penuh
   ========================================================== */

/* Overlay dibuat transparan, bukan full background gelap */
html::before {
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(3, 17, 31, 0.08) !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
  z-index: 999997 !important;
  pointer-events: none !important;
}

/* Logo JOSI dipaksa tepat di tengah viewport */
html::after {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  right: auto !important;
  bottom: auto !important;
  width: 118px !important;
  height: 118px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 40%, transparent 42%),
    linear-gradient(135deg, rgba(0,212,255,0.22), rgba(124,60,255,0.18)),
    rgba(3, 17, 31, 0.78) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 2px solid rgba(0,212,255,0.72) !important;
}

/* Cincin loader juga dipaksa tepat di tengah viewport */
body::before {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  right: auto !important;
  bottom: auto !important;
  width: 154px !important;
  height: 154px !important;
  margin: 0 !important;
  transform-origin: center center !important;
  z-index: 999998 !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Perbaikan animasi spin agar tetap center saat rotate */
@keyframes josiSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Saat layar kecil, tetap center */
@media (max-width: 680px) {
  html::after {
    left: 50vw !important;
    top: 50vh !important;
    width: 96px !important;
    height: 96px !important;
    font-size: 20px !important;
  }

  body::before {
    left: 50vw !important;
    top: 50vh !important;
    width: 126px !important;
    height: 126px !important;
  }
}



/* ==========================================================
   JOSI FLOATING NAVBAR ADDON
   Membuat area judul jurnal + menu OJS menjadi navbar melayang,
   rounded, glassmorphism, sticky, dan tetap konek dengan sistem OJS.
   Tempel di paling bawah CSS atau gunakan file full replacement.
   ========================================================== */

/* Header utama dibuat transparan agar navbar tampak melayang */
.pkp_structure_head {
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
  padding: 18px 18px 14px !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(0, 212, 255, 0.12), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(124, 60, 255, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(3,17,31,0.92), rgba(3,17,31,0.22), transparent) !important;
  box-shadow: none !important;
  border-bottom: none !important;
  overflow: visible !important;
}

/* Hilangkan grid header yang terlalu penuh agar floating lebih bersih */
.pkp_structure_head::before {
  opacity: 0.18 !important;
}

/* Bungkus header OJS menjadi kartu melayang */
.pkp_head_wrapper {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background:
    linear-gradient(135deg, rgba(3,17,31,0.88), rgba(6,40,65,0.84), rgba(7,25,54,0.84)) !important;
  border: 1px solid rgba(0, 212, 255, 0.32) !important;
  box-shadow:
    0 18px 45px rgba(0, 30, 60, 0.32),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 32px rgba(0, 212, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* Area nama jurnal */
.pkp_site_name_wrapper,
.pkp_site_name {
  background: transparent !important;
}

.pkp_site_name {
  padding: 22px 28px 18px !important;
}

/* Judul jurnal lebih rapi dalam navbar melayang */
.pkp_site_name .is_text,
.pkp_site_name > a {
  color: #ffffff !important;
  text-shadow:
    0 0 16px rgba(0, 212, 255, 0.58),
    0 0 32px rgba(124, 60, 255, 0.22) !important;
}

/* Navigasi dibuat menyatu dengan kartu header */
.pkp_navigation_primary_wrapper {
  background:
    linear-gradient(90deg, rgba(0, 119, 255, 0.72), rgba(0, 212, 255, 0.50), rgba(34, 246, 167, 0.28)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -1px 0 rgba(0, 212, 255, 0.20) inset !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Menu items seperti tombol kecil */
.pkp_navigation_primary > li > a {
  position: relative !important;
  margin: 6px 4px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  transition:
    background 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #eaffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(0, 119, 255, 0.18) !important;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.45) !important;
}

/* Search di kanan dibuat seperti glass button */
.pkp_navigation_search_wrapper,
.pkp_search {
  background: rgba(255, 255, 255, 0.08) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.pkp_search a,
.pkp_search button,
.pkp_navigation_search_wrapper a {
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* User/admin bar juga dibuat menyatu dan tidak kaku */
.pkp_navigation_user_wrapper {
  max-width: 1180px !important;
  margin: 0 auto 8px !important;
  border-radius: 0 0 18px 18px !important;
  background: rgba(0, 119, 180, 0.28) !important;
  border: 1px solid rgba(0, 212, 255, 0.18) !important;
  border-top: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Beri jarak konten agar tidak terlalu menempel dengan navbar sticky */
.pkp_structure_content {
  padding-top: 34px !important;
}

/* Efek garis neon di bawah navbar */
.pkp_head_wrapper::after {
  content: "" !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0077ff, #00d4ff, #22f6a7, #7c3cff, #0077ff) !important;
  background-size: 220% 100% !important;
  animation: josiFloatingNavLine 5s linear infinite !important;
}

@keyframes josiFloatingNavLine {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* Mobile: navbar tetap rapi */
@media (max-width: 768px) {
  .pkp_structure_head {
    padding: 10px 10px 12px !important;
  }

  .pkp_head_wrapper {
    border-radius: 20px !important;
  }

  .pkp_site_name {
    padding: 16px 18px 14px !important;
  }

  .pkp_site_name .is_text {
    font-size: 15px !important;
  }

  .pkp_navigation_primary > li > a {
    margin: 4px 2px !important;
    padding: 9px 11px !important;
  }
}




/* ==========================================================
   FINAL SMALL FIXES - JOSI
   Memastikan navbar melayang tetap rapi, loader transparan,
   dan layout OJS tidak pecah di halaman Current/Archives/Submissions.
   ========================================================== */

/* Pastikan header tidak memotong dropdown About */
.pkp_head_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary {
  overflow: visible !important;
}

/* Tapi kartu header tetap terlihat rounded */
.pkp_head_wrapper {
  isolation: isolate !important;
}

/* Dropdown menu About dibuat seperti glass card */
.pkp_navigation_primary ul {
  background: rgba(3, 17, 31, 0.94) !important;
  border: 1px solid rgba(0, 212, 255, 0.30) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 42px rgba(0, 35, 68, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  padding: 8px !important;
}

.pkp_navigation_primary ul li a {
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
}

.pkp_navigation_primary ul li a:hover {
  background: rgba(0, 212, 255, 0.14) !important;
  color: #dffcff !important;
}

/* Search tetap sejajar di navbar */
.pkp_navigation_search_wrapper {
  border-radius: 0 0 24px 0 !important;
}

/* Konten tidak tertutup navbar sticky saat anchor */
.page,
.pkp_structure_main,
.obj_issue_toc,
.obj_article_details {
  scroll-margin-top: 150px !important;
}

/* Perkuat hilang garis vertikal semua halaman */
.pkp_structure_body:before,
.pkp_structure_body:after,
.pkp_structure_content:before,
.pkp_structure_content:after,
.pkp_structure_main:before,
.pkp_structure_main:after,
.pkp_structure_sidebar:before,
.pkp_structure_sidebar:after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* Loader benar-benar transparan dan di tengah */
html::before {
  background: rgba(3, 17, 31, 0.06) !important;
}

html::after {
  left: 50vw !important;
  top: 50vh !important;
  transform: translate(-50%, -50%) !important;
}

body::before {
  left: 50vw !important;
  top: 50vh !important;
}

/* Footer bawaan tetap muncul */
html.josi-journal-page .pkp_structure_footer_wrapper {
  display: block !important;
  min-height: 160px !important;
}

/* Responsif */
@media (max-width: 768px) {
  .pkp_structure_head {
    position: sticky !important;
    top: 0 !important;
  }

  .pkp_head_wrapper {
    border-radius: 18px !important;
  }

  .pkp_navigation_search_wrapper {
    border-radius: 0 0 18px 0 !important;
  }
}



/* ==========================================================
   JOSI FINAL OVAL TECHNOLOGY NAVBAR
   Tambahan final:
   - Header/navbar dibuat lebih oval
   - Lebih rapi dan proporsional
   - Animasi teknologi: glow, scanning light, moving border
   - Tetap konek dengan sistem OJS
   ========================================================== */

@keyframes josiOvalBorderMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}

@keyframes josiOvalScan {
  0% {
    transform: translateX(-120%) skewX(-18deg);
    opacity: 0;
  }
  20% {
    opacity: .7;
  }
  100% {
    transform: translateX(145%) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes josiOvalFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      0 22px 55px rgba(0, 30, 65, .34),
      0 0 0 1px rgba(255,255,255,.07) inset,
      0 0 34px rgba(0,212,255,.18);
  }
  50% {
    transform: translateY(-2px);
    box-shadow:
      0 28px 68px rgba(0, 30, 65, .40),
      0 0 0 1px rgba(255,255,255,.10) inset,
      0 0 46px rgba(34,246,167,.20);
  }
}

@keyframes josiLogoOrbit {
  0% {
    filter: hue-rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
  50% {
    filter: hue-rotate(70deg);
    transform: scale(1.08) rotate(180deg);
  }
  100% {
    filter: hue-rotate(0deg);
    transform: scale(1) rotate(360deg);
  }
}

/* Area header tetap sticky tapi lebih bersih */
.pkp_structure_head {
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
  padding: 18px 18px 16px !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,212,255,.12), transparent 26%),
    radial-gradient(circle at 88% 20%, rgba(124,60,255,.10), transparent 32%),
    linear-gradient(180deg, rgba(3,17,31,.86), rgba(3,17,31,.18), transparent) !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Kartu navbar utama dibuat oval */
.pkp_head_wrapper {
  position: relative !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 6% 35%, rgba(0,212,255,.28), transparent 24%),
    radial-gradient(circle at 92% 28%, rgba(124,60,255,.22), transparent 26%),
    linear-gradient(135deg, rgba(3,17,31,.92), rgba(6,45,73,.88), rgba(7,25,54,.90)) !important;
  border: 1px solid rgba(0,212,255,.38) !important;
  box-shadow:
    0 22px 55px rgba(0, 30, 65, .34),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 34px rgba(0,212,255,.18) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
  animation: josiOvalFloat 5s ease-in-out infinite !important;
}

/* Border neon animasi mengelilingi navbar */
.pkp_head_wrapper::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 2px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #0077ff, #00d4ff, #22f6a7, #7c3cff, #00d4ff, #0077ff) !important;
  background-size: 260% 100% !important;
  animation: josiOvalBorderMove 6s linear infinite !important;
  opacity: .72 !important;
  pointer-events: none !important;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
}

/* Efek scanning teknologi di dalam navbar */
.pkp_head_wrapper::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 38% !important;
  left: 0 !important;
  height: auto !important;
  background:
    linear-gradient(90deg, transparent, rgba(0,212,255,.18), rgba(255,255,255,.12), transparent) !important;
  animation: josiOvalScan 6.5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Pastikan isi navbar di atas efek animasi */
.pkp_site_name,
.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_search_wrapper {
  position: relative !important;
  z-index: 2 !important;
}

/* Area nama jurnal dibuat proporsional */
.pkp_site_name {
  padding: 22px 34px 20px !important;
  background: transparent !important;
}

.pkp_site_name > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: 100% !important;
}

.pkp_site_name .is_text {
  color: #ffffff !important;
  font-size: 23px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  text-shadow:
    0 0 14px rgba(0,212,255,.62),
    0 0 30px rgba(124,60,255,.24) !important;
}

/* Icon bulat sebelum judul dibuat lebih premium */
.pkp_site_name > a::before {
  width: 21px !important;
  height: 21px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 11%, #00d4ff 12% 29%, transparent 31%),
    conic-gradient(from 45deg, #00d4ff, #7c3cff, #22f6a7, #00d4ff) !important;
  box-shadow:
    0 0 14px rgba(0,212,255,.80),
    0 0 24px rgba(124,60,255,.38) !important;
  animation: josiLogoOrbit 4.2s linear infinite !important;
}

/* Menu bawah dibuat oval menyatu */
.pkp_navigation_primary_wrapper {
  margin: 0 16px 16px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(0,119,255,.82), rgba(0,212,255,.58), rgba(34,246,167,.42)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow:
    0 12px 26px rgba(0,119,255,.18),
    0 0 0 1px rgba(255,255,255,.07) inset !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Baris menu agar rata dan tidak terlalu kotak */
.pkp_navigation_primary_row {
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
}

/* Menu item menjadi pill */
.pkp_navigation_primary > li > a {
  margin: 7px 5px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: .15px !important;
  transition:
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    text-shadow .22s ease !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: rgba(255,255,255,.17) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 10px 22px rgba(0,119,255,.22),
    0 0 18px rgba(0,212,255,.20) inset !important;
  text-shadow: 0 0 12px rgba(0,212,255,.55) !important;
}

/* Tombol search jadi pill di sisi kanan */
.pkp_navigation_search_wrapper {
  margin-left: auto !important;
  align-self: stretch !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  margin-top: 7px !important;
  margin-bottom: 7px !important;
  margin-right: 8px !important;
  overflow: hidden !important;
}

.pkp_navigation_search_wrapper a,
.pkp_search a,
.pkp_search button {
  color: #ffffff !important;
  font-weight: 900 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* User/admin bar dibuat lebih kecil dan tidak kaku */
.pkp_navigation_user_wrapper {
  max-width: 1120px !important;
  margin: 0 auto 10px !important;
  border-radius: 999px !important;
  background: rgba(0,119,180,.28) !important;
  border: 1px solid rgba(0,212,255,.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Dropdown about tetap rapi di navbar oval */
.pkp_navigation_primary ul {
  border-radius: 18px !important;
  background: rgba(3,17,31,.94) !important;
  border: 1px solid rgba(0,212,255,.32) !important;
  box-shadow: 0 18px 42px rgba(0,35,68,.38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 8px !important;
  overflow: hidden !important;
}

.pkp_navigation_primary ul li a {
  border-radius: 12px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.pkp_navigation_primary ul li a:hover {
  background: rgba(0,212,255,.15) !important;
  color: #dffcff !important;
}

/* Jarak konten dari navbar */
.pkp_structure_content {
  padding-top: 36px !important;
}

/* Responsif: oval tetap rapi di layar kecil */
@media (max-width: 768px) {
  .pkp_structure_head {
    padding: 10px 10px 12px !important;
  }

  .pkp_head_wrapper {
    border-radius: 28px !important;
  }

  .pkp_site_name {
    padding: 16px 18px 13px !important;
  }

  .pkp_site_name .is_text {
    font-size: 15px !important;
  }

  .pkp_site_name > a::before {
    width: 16px !important;
    height: 16px !important;
  }

  .pkp_navigation_primary_wrapper {
    margin: 0 10px 12px !important;
    border-radius: 24px !important;
  }

  .pkp_navigation_primary_row {
    min-height: auto !important;
    align-items: flex-start !important;
  }

  .pkp_navigation_primary > li > a {
    padding: 9px 12px !important;
    margin: 4px 3px !important;
  }

  .pkp_navigation_search_wrapper {
    border-radius: 18px !important;
    margin: 6px !important;
  }
}



/* ==========================================================
   JOSI FINAL CONTENT MATCHING OVAL TECHNOLOGY NAVBAR
   Tujuan:
   - Konten dalam halaman disesuaikan dengan navbar oval
   - Card lebih rounded/oval
   - Ada efek teknologi: glow, soft grid, hover, animated accent
   - Tetap aman untuk halaman OJS: Current, Archives, Submissions, About, Contact
   ========================================================== */

@keyframes josiContentGlow {
  0%, 100% {
    box-shadow:
      0 24px 60px rgba(0, 55, 90, .13),
      0 0 0 1px rgba(0, 212, 255, .16) inset,
      0 0 22px rgba(0, 212, 255, .06);
  }
  50% {
    box-shadow:
      0 30px 76px rgba(0, 55, 90, .17),
      0 0 0 1px rgba(34, 246, 167, .18) inset,
      0 0 34px rgba(0, 212, 255, .10);
  }
}

@keyframes josiContentLine {
  0% { background-position: 0% 50%; }
  100% { background-position: 240% 50%; }
}

@keyframes josiCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Background halaman dibuat lebih halus supaya konten masuk dengan navbar */
body {
  background:
    radial-gradient(circle at 12% 14%, rgba(0, 212, 255, .15), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .13), transparent 34%),
    radial-gradient(circle at 50% 85%, rgba(34, 246, 167, .06), transparent 34%),
    linear-gradient(180deg, #f4fbff 0%, #ffffff 46%, #edf8ff 100%) !important;
}

/* Area konten dibuat seperti kapsul/glass container */
.pkp_structure_content {
  max-width: 1180px !important;
  padding-top: 42px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Main content disesuaikan dengan navbar: rounded besar + glow */
.pkp_structure_main {
  position: relative !important;
  border-radius: 38px !important;
  border: 1px solid rgba(0, 212, 255, .22) !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(0, 212, 255, .10), transparent 30%),
    radial-gradient(circle at 92% 15%, rgba(124, 60, 255, .08), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,250,255,.96)) !important;
  box-shadow:
    0 24px 60px rgba(0, 55, 90, .13),
    0 0 0 1px rgba(0, 212, 255, .16) inset,
    0 0 22px rgba(0, 212, 255, .06) !important;
  padding: 36px !important;
  overflow: hidden !important;
  animation: josiContentGlow 7s ease-in-out infinite !important;
}

/* Accent line di bagian atas content */
.pkp_structure_main > .page,
.pkp_structure_main > .obj_issue_toc,
.pkp_structure_main > .cmp_announcements,
.pkp_structure_main > .cmp_notification {
  position: relative !important;
}

/* Semua blok utama homepage dibuat seragam oval/teknologi */
.pkp_page_index .journal_summary,
.pkp_page_index .homepage_about,
.pkp_page_index .additional_content,
.pkp_page_index .current_issue,
.josi-native-banner,
.josi-index-strip,
.josi-timeline-native,
.pkp_block,
.block_custom,
.block_make_submission,
.block_information,
.block_language,
.block_developed_by,
.block_browse,
.block_keyword_cloud {
  border-radius: 30px !important;
  border: 1px solid rgba(0, 212, 255, .20) !important;
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  box-shadow:
    0 18px 45px rgba(0, 73, 114, .08),
    0 0 0 1px rgba(255,255,255,.40) inset !important;
  overflow: hidden !important;
}

/* Banner tambahan dibuat oval dan lebih menyatu */
.josi-native-banner {
  border-radius: 38px !important;
  padding: 34px 38px !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(0,212,255,.30), transparent 30%),
    radial-gradient(circle at 92% 22%, rgba(124,60,255,.25), transparent 36%),
    linear-gradient(135deg, rgba(3,17,31,.96), rgba(6,52,82,.92), rgba(7,25,54,.94)) !important;
  border: 1px solid rgba(0,212,255,.35) !important;
  box-shadow:
    0 24px 60px rgba(0,30,70,.22),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 34px rgba(0,212,255,.12) !important;
}

/* Garis kecil animasi pada section tambahan */
.josi-index-strip,
.josi-timeline-native,
.pkp_page_index .journal_summary,
.pkp_page_index .homepage_about,
.pkp_page_index .current_issue,
.pkp_page_index .additional_content {
  position: relative !important;
}

.josi-index-strip::before,
.josi-timeline-native::before,
.pkp_page_index .journal_summary::before,
.pkp_page_index .homepage_about::before,
.pkp_page_index .current_issue::before,
.pkp_page_index .additional_content::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  top: 0 !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0077ff, #00d4ff, #22f6a7, #7c3cff, #0077ff) !important;
  background-size: 240% 100% !important;
  animation: josiContentLine 7s linear infinite !important;
  opacity: .86 !important;
}

/* Heading konten dibuat lebih kuat dan modern */
.page h1,
.page h2,
.page h3,
.obj_issue_toc .heading,
.pkp_page_index .current_issue h2,
.pkp_page_index .homepage_about h2,
.pkp_page_index .journal_summary h2,
.josi-index-strip h3,
.josi-timeline-native h3 {
  color: #062a40 !important;
  font-weight: 950 !important;
  letter-spacing: -.2px !important;
}

/* Breadcrumb dibuat pill */
.cmp_breadcrumbs,
.breadcrumbs {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(0, 212, 255, .08) !important;
  border: 1px solid rgba(0, 212, 255, .18) !important;
  margin-bottom: 18px !important;
}

/* Artikel/current issue dibuat kartu rounded */
.obj_article_summary,
.cmp_article_list > li,
.obj_issue_summary,
.obj_issue_toc .sections .section {
  border-radius: 24px !important;
  border: 1px solid rgba(0, 212, 255, .18) !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(0, 212, 255, .08), transparent 28%),
    linear-gradient(135deg, #ffffff, #f4fcff) !important;
  box-shadow:
    0 14px 34px rgba(0, 73, 114, .075),
    0 0 0 1px rgba(255,255,255,.65) inset !important;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease !important;
}

.obj_article_summary:hover,
.cmp_article_list > li:hover,
.obj_issue_summary:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 212, 255, .46) !important;
  box-shadow:
    0 24px 52px rgba(0,119,255,.14),
    0 0 0 1px rgba(0,212,255,.18) inset !important;
}

/* Cover issue dibuat rounded seperti card teknologi */
.obj_issue_toc .cover img,
.pkp_page_index .current_issue .cover img,
.obj_issue_summary .cover img {
  border-radius: 24px !important;
  box-shadow:
    0 18px 42px rgba(0, 55, 90, .16),
    0 0 0 1px rgba(0, 212, 255, .18) !important;
}

/* Tombol PDF/submission lebih pill dan glow */
.obj_galley_link,
.cmp_button,
.block_make_submission a,
button.submit,
a.cmp_button,
input[type="submit"],
.pkp_button,
.cmp_form .buttons button {
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, #0077ff, #00d4ff, #22f6a7) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  box-shadow:
    0 14px 30px rgba(0,119,255,.22),
    0 0 0 1px rgba(255,255,255,.14) inset !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}

.obj_galley_link:hover,
.cmp_button:hover,
.block_make_submission a:hover,
button.submit:hover,
a.cmp_button:hover,
input[type="submit"]:hover,
.pkp_button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 20px 42px rgba(0,119,255,.28),
    0 0 20px rgba(0,212,255,.16) inset !important;
}

/* Form input OJS dibuat rounded */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
  border-radius: 18px !important;
  border: 1px solid rgba(0, 212, 255, .20) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 8px 20px rgba(0, 73, 114, .04) inset !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(0, 212, 255, .55) !important;
  box-shadow:
    0 0 0 3px rgba(0, 212, 255, .10),
    0 8px 20px rgba(0, 73, 114, .04) inset !important;
  outline: none !important;
}

/* Sidebar block matching oval navbar */
.pkp_block,
.block_custom,
.block_make_submission,
.block_information,
.block_language,
.block_developed_by,
.block_browse,
.block_keyword_cloud {
  border-radius: 30px !important;
  padding: 24px !important;
  animation: josiCardFloat 8s ease-in-out infinite !important;
}

/* Link dalam sidebar jadi tombol kecil */
.pkp_structure_sidebar .pkp_block a,
.pkp_structure_sidebar .block_custom a,
.pkp_structure_sidebar .block_information a,
.pkp_structure_sidebar .block_language a {
  display: inline-block !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  transition: background .2s ease, transform .2s ease !important;
}

.pkp_structure_sidebar .pkp_block a:hover,
.pkp_structure_sidebar .block_custom a:hover {
  background: rgba(0, 212, 255, .10) !important;
  transform: translateX(2px) !important;
}

/* Timeline card isi dibuat lebih oval */
.josi-flow .step {
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 212, 255, .10), transparent 28%),
    linear-gradient(135deg, #ffffff, #f3fbff) !important;
  box-shadow: 0 14px 32px rgba(0,73,114,.075) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

.josi-flow .step:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 48px rgba(0,119,255,.13) !important;
}

/* Footer lebih menyatu dengan tema oval */
html.josi-journal-page .pkp_structure_footer_wrapper {
  border-radius: 38px 38px 0 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1180px !important;
  overflow: hidden !important;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .pkp_structure_main {
    border-radius: 28px !important;
    padding: 24px !important;
  }

  .josi-native-banner {
    border-radius: 28px !important;
    padding: 26px !important;
  }

  .pkp_page_index .journal_summary,
  .pkp_page_index .homepage_about,
  .pkp_page_index .additional_content,
  .pkp_page_index .current_issue,
  .josi-index-strip,
  .josi-timeline-native,
  .pkp_block {
    border-radius: 24px !important;
  }
}


/* ==========================================================
   JOSI NAVBAR FIX - DROPDOWN DAN ADMIN MENU TIDAK TERPOTONG
   Perbaikan:
   - Container navbar tidak lagi memotong isi
   - Dropdown About terlihat penuh
   - Dropdown admin/user terlihat penuh
   - Bentuk tetap rapi, oval, dan modern
   ========================================================== */

/* Header paling atas harus mengizinkan dropdown keluar */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_primary li,
.pkp_navigation_user_wrapper,
.pkp_navigation_user,
.pkp_navigation_user li,
.pkp_navigation_search_wrapper {
  overflow: visible !important;
}

/* Wrapper utama dibuat rounded rapi, bukan kapsul yang terlalu memotong */
.pkp_head_wrapper {
  border-radius: 42px !important;
  overflow: visible !important;
  padding-bottom: 14px !important;
}

/* Efek border dan scan tetap mengikuti bentuk baru */
.pkp_head_wrapper::before,
.pkp_head_wrapper::after {
  border-radius: 42px !important;
}

/* Area judul sedikit dirapikan agar tidak menempel ke sisi atas */
.pkp_site_name {
  padding: 24px 34px 14px !important;
}

/* User/admin bar jangan terpotong di sisi kanan */
.pkp_navigation_user_wrapper {
  max-width: 1180px !important;
  margin: 0 auto 10px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  border-radius: 999px !important;
  position: relative !important;
  z-index: 10020 !important;
}

.pkp_navigation_user {
  position: relative !important;
  z-index: 10021 !important;
}

/* Menu utama tetap pill, tapi jangan memotong dropdown */
.pkp_navigation_primary_wrapper {
  position: relative !important;
  z-index: 10010 !important;
  border-radius: 999px !important;
  overflow: visible !important;
}

.pkp_navigation_primary {
  position: relative !important;
  z-index: 10011 !important;
}

.pkp_navigation_primary > li,
.pkp_navigation_user > li {
  position: relative !important;
}

/* Dropdown OJS utama (About) */
.pkp_navigation_primary > li > ul,
.pkp_navigation_primary > li > .dropdown-menu,
.pkp_navigation_primary .dropdown-menu,
.pkp_nav_list ul,
.pkp_nav_list .dropdown-menu {
  margin-top: 12px !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  min-width: 250px !important;
  max-width: 250px !important;
  border-radius: 18px !important;
  padding: 8px !important;
  background: rgba(3, 17, 31, 0.96) !important;
  border: 1px solid rgba(0, 212, 255, 0.34) !important;
  box-shadow: 0 20px 50px rgba(0, 25, 60, 0.42) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 10050 !important;
}

.pkp_navigation_primary > li > ul li,
.pkp_navigation_primary > li > .dropdown-menu li,
.pkp_nav_list ul li {
  display: block !important;
  width: 100% !important;
}

.pkp_navigation_primary > li > ul li a,
.pkp_navigation_primary > li > .dropdown-menu li a,
.pkp_nav_list ul li a {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.pkp_navigation_primary > li > ul li a:hover,
.pkp_navigation_primary > li > .dropdown-menu li a:hover,
.pkp_nav_list ul li a:hover {
  background: rgba(0, 212, 255, 0.14) !important;
  color: #dffcff !important;
}

/* Dropdown admin / user */
.pkp_navigation_user > li > ul,
.pkp_navigation_user > li > .dropdown-menu,
.pkp_navigation_user .dropdown-menu {
  margin-top: 12px !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  min-width: 240px !important;
  max-width: 250px !important;
  border-radius: 18px !important;
  padding: 8px !important;
  background: rgba(3, 17, 31, 0.97) !important;
  border: 1px solid rgba(0, 212, 255, 0.34) !important;
  box-shadow: 0 20px 50px rgba(0, 25, 60, 0.42) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 10060 !important;
}

.pkp_navigation_user > li > ul li a,
.pkp_navigation_user > li > .dropdown-menu li a,
.pkp_navigation_user .dropdown-menu li a {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.pkp_navigation_user > li > ul li a:hover,
.pkp_navigation_user > li > .dropdown-menu li a:hover,
.pkp_navigation_user .dropdown-menu li a:hover {
  background: rgba(0, 212, 255, 0.14) !important;
  color: #dffcff !important;
}

/* Search button tetap utuh, tidak kepotong sisi kanan */
.pkp_navigation_search_wrapper {
  margin-right: 10px !important;
  border-radius: 999px !important;
  min-width: 150px !important;
  align-self: stretch !important;
}

/* Pastikan layer navbar selalu di atas konten */
.pkp_structure_head {
  z-index: 10000 !important;
}

.pkp_structure_content,
.pkp_structure_main,
.page,
.obj_issue_toc,
.obj_article_details {
  position: relative !important;
  z-index: 1 !important;
}

/* Hover active menu About tetap rapi dan tidak aneh */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li[aria-expanded="true"] > a,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.current_page_item > a {
  background: rgba(255,255,255,.17) !important;
  border-radius: 999px !important;
}

/* Mobile fix */
@media (max-width: 768px) {
  .pkp_head_wrapper {
    border-radius: 28px !important;
    padding-bottom: 12px !important;
  }

  .pkp_head_wrapper::before,
  .pkp_head_wrapper::after {
    border-radius: 28px !important;
  }

  .pkp_site_name {
    padding: 16px 18px 12px !important;
  }

  .pkp_navigation_primary_wrapper {
    margin: 0 10px 10px !important;
    border-radius: 24px !important;
  }

  .pkp_navigation_search_wrapper {
    min-width: auto !important;
    margin-right: 6px !important;
  }

  .pkp_navigation_primary > li > ul,
  .pkp_navigation_primary > li > .dropdown-menu,
  .pkp_navigation_user > li > ul,
  .pkp_navigation_user > li > .dropdown-menu {
    min-width: 210px !important;
    max-width: 92vw !important;
  }
}


/* ==========================================================
   JOSI FINAL POSITION FIX - HEADER COMPACT + CONTENT NAIK
   Tujuan:
   - Navbar tidak terlalu turun dan tidak terlalu tinggi
   - Ruang kosong antara navbar dan konten diperkecil
   - Dropdown About/admin tetap tidak terpotong
   ========================================================== */

.pkp_structure_head {
  padding: 10px 18px 8px !important;
  margin-bottom: 0 !important;
}

.pkp_head_wrapper {
  max-width: 1180px !important;
  border-radius: 34px !important;
  padding-bottom: 8px !important;
}

.pkp_head_wrapper::before,
.pkp_head_wrapper::after {
  border-radius: 34px !important;
}

.pkp_site_name {
  padding: 18px 30px 12px !important;
}

.pkp_site_name .is_text {
  font-size: 21px !important;
  line-height: 1.18 !important;
}

.pkp_site_name > a::before {
  width: 18px !important;
  height: 18px !important;
}

.pkp_navigation_primary_wrapper {
  margin: 0 14px 8px !important;
  min-height: 0 !important;
}

.pkp_navigation_primary_row {
  min-height: 48px !important;
}

.pkp_navigation_primary > li > a {
  margin: 5px 4px !important;
  padding: 8px 16px !important;
}

.pkp_navigation_search_wrapper {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  min-width: 138px !important;
}

.pkp_navigation_user_wrapper {
  margin: 0 auto 6px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.pkp_navigation_user > li > a {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.pkp_structure_content {
  padding-top: 18px !important;
}

.pkp_page_index .journal_summary,
.pkp_page_index .homepage_about,
.pkp_page_index .additional_content,
.pkp_page_index .current_issue {
  margin-bottom: 18px !important;
}

.page,
.pkp_structure_main,
.obj_issue_toc,
.obj_article_details {
  scroll-margin-top: 118px !important;
}

@media (max-width: 768px) {
  .pkp_structure_head {
    padding: 8px 10px 6px !important;
  }

  .pkp_head_wrapper {
    border-radius: 24px !important;
    padding-bottom: 8px !important;
  }

  .pkp_head_wrapper::before,
  .pkp_head_wrapper::after {
    border-radius: 24px !important;
  }

  .pkp_site_name {
    padding: 14px 16px 10px !important;
  }

  .pkp_site_name .is_text {
    font-size: 14px !important;
    line-height: 1.22 !important;
  }

  .pkp_navigation_primary_wrapper {
    margin: 0 8px 8px !important;
  }

  .pkp_navigation_primary_row {
    min-height: auto !important;
  }

  .pkp_navigation_primary > li > a {
    padding: 8px 10px !important;
    margin: 3px 2px !important;
  }

  .pkp_structure_content {
    padding-top: 12px !important;
  }
}


/* ==========================================================
   JOSI DROPDOWN POSITION FIX - KOTAK MENU LEBIH DEKAT
   Tujuan:
   - Dropdown About tidak terlalu jauh turun dari tombol
   - Dropdown admin/user lebih rapat dengan bar admin
   - Kotak hitam tetap tidak terpotong
   ========================================================== */

.pkp_navigation_primary > li > ul,
.pkp_navigation_primary > li > .dropdown-menu,
.pkp_navigation_primary .dropdown-menu,
.pkp_nav_list ul,
.pkp_nav_list .dropdown-menu {
  margin-top: 4px !important;
  transform: translateY(0) !important;
}

.pkp_navigation_user > li > ul,
.pkp_navigation_user > li > .dropdown-menu,
.pkp_navigation_user .dropdown-menu {
  margin-top: 4px !important;
  transform: translateY(0) !important;
}

@media (max-width: 768px) {
  .pkp_navigation_primary > li > ul,
  .pkp_navigation_primary > li > .dropdown-menu,
  .pkp_navigation_user > li > ul,
  .pkp_navigation_user > li > .dropdown-menu {
    margin-top: 2px !important;
  }
}


/* ==========================================================
   JOSI USER BAR CLEANUP - HILANGKAN KOTAK BAWAH
   Tujuan:
   - Menghapus kotak panjang biru di bawah navbar
   - Link admin/user tetap tampil dan dropdown tetap bisa dipakai
   ========================================================== */

.pkp_navigation_user_wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: -2px auto 0 !important;
  padding: 0 20px !important;
  min-height: 0 !important;
}

.pkp_navigation_user {
  justify-content: flex-end !important;
}

.pkp_navigation_user > li > a {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .pkp_navigation_user_wrapper {
    margin-top: 0 !important;
    padding: 0 12px !important;
  }
}


/* ==========================================================
   JOSI HEADER BRAND ANIMATION - ORBIT + LOGO + TITLE
   Tujuan:
   - Lingkaran animasi tetap tampil di kiri
   - Logo JOSI muncul di samping lingkaran dengan animasi
   - Teks nama jurnal muncul setelah logo dengan animasi
   ========================================================== */

@keyframes josiHeaderLogoIn {
  0% {
    opacity: 0;
    transform: translateX(-14px) scale(.92);
    filter: blur(7px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes josiHeaderTitleIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    text-shadow: none;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    text-shadow:
      0 0 14px rgba(0,212,255,.62),
      0 0 30px rgba(124,60,255,.24);
  }
}

.pkp_site_name {
  overflow: visible !important;
}

.pkp_site_name > a,
.pkp_site_name .is_text {
  position: relative !important;
}

.pkp_site_name > a.is_text {
  display: inline-block !important;
  min-height: 74px !important;
  padding-left: 178px !important;
  padding-top: 18px !important;
  animation: josiHeaderTitleIn .78s ease .34s both !important;
}

.pkp_site_name > a.is_text::before {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

.pkp_site_name > a.is_text::after {
  content: "" !important;
  position: absolute !important;
  left: 38px !important;
  top: 50% !important;
  width: 126px !important;
  height: 74px !important;
  transform: translateY(-50%) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
  box-shadow:
    0 0 20px rgba(0,212,255,.20),
    0 0 0 1px rgba(255,255,255,.12) inset !important;
  pointer-events: none !important;
  animation: josiHeaderLogoIn .72s ease .14s both !important;
  z-index: -1 !important;
}

@media (max-width: 768px) {
  .pkp_site_name > a.is_text {
    min-height: 58px !important;
    padding-left: 118px !important;
    padding-top: 14px !important;
    background-size: 82px auto !important;
    background-position: 28px center !important;
  }

  .pkp_site_name > a.is_text::after {
    left: 28px !important;
    width: 82px !important;
    height: 50px !important;
    border-radius: 14px !important;
  }
}


/* ==========================================================
   JOSI HEADER BRAND FINAL OVERRIDE
   Memisahkan animasi logo dan animasi teks:
   1. Lingkaran orbit tampil dulu
   2. Logo JOSI muncul di sampingnya
   3. Teks nama jurnal muncul setelah logo
   ========================================================== */

@keyframes josiHeaderTitleIn {
  0% {
    color: rgba(255,255,255,0);
    text-shadow: none;
  }
  100% {
    color: #ffffff;
    text-shadow:
      0 0 14px rgba(0,212,255,.62),
      0 0 30px rgba(124,60,255,.24);
  }
}

.pkp_site_name > a.is_text {
  background-image: none !important;
  color: rgba(255,255,255,0) !important;
  animation: josiHeaderTitleIn .78s ease .62s both !important;
}

.pkp_site_name > a.is_text::before {
  z-index: 3 !important;
}

.pkp_site_name > a.is_text::after {
  z-index: 2 !important;
  background: none !important;
  animation: josiHeaderLogoIn .72s ease .22s both !important;
}


/* ==========================================================
   JOSI OVAL NAVBAR CLEANUP - USER BAR MASUK KE OVAL
   Tujuan:
   - Menghilangkan bidang kotak yang keluar dari kolom oval
   - Menu admin tetap ada, tapi jadi pill kecil di kanan bawah
   - Dropdown admin tetap tampil di atas konten
   ========================================================== */

.pkp_head_wrapper {
  padding-bottom: 18px !important;
}

.pkp_site_nav_menu {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pkp_navigation_user_wrapper {
  position: absolute !important;
  right: 24px !important;
  bottom: 8px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 10040 !important;
}

.pkp_navigation_user {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.pkp_navigation_user > li > a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

.pkp_navigation_user > li > ul,
.pkp_navigation_user > li > .dropdown-menu,
.pkp_navigation_user .dropdown-menu {
  top: calc(100% + 4px) !important;
  right: 0 !important;
}

@media (max-width: 768px) {
  .pkp_head_wrapper {
    padding-bottom: 14px !important;
  }

  .pkp_navigation_user_wrapper {
    position: static !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 14px !important;
    margin-top: -4px !important;
  }
}


/* ==========================================================
   JOSI LIGHT / DARK MODE
   - Homepage punya tombol Terang / Malam dari additional content
   - Halaman lain otomatis mengikuti preferensi sistem
   - Tanpa JavaScript, aman untuk OJS
   ========================================================== */

.josi-theme-control {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 12000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(3, 17, 31, .76) !important;
  border: 1px solid rgba(0, 212, 255, .30) !important;
  box-shadow: 0 14px 36px rgba(0, 30, 60, .24) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.josi-theme-control input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.josi-theme-control label {
  cursor: pointer !important;
  user-select: none !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  color: #dffcff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.josi-theme-control input:checked + label {
  color: #03111f !important;
  background: linear-gradient(135deg, #ffffff, #dffcff) !important;
  box-shadow: 0 8px 20px rgba(0, 212, 255, .18) !important;
}

body:has(#josi-theme-light:checked) {
  background:
    radial-gradient(circle at 12% 14%, rgba(0, 212, 255, .15), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .13), transparent 34%),
    radial-gradient(circle at 50% 85%, rgba(34, 246, 167, .06), transparent 34%),
    linear-gradient(180deg, #f4fbff 0%, #ffffff 46%, #edf8ff 100%) !important;
  color: #102033 !important;
}

body:has(#josi-theme-light:checked) .pkp_structure_main,
body:has(#josi-theme-light:checked) .pkp_page_index .journal_summary,
body:has(#josi-theme-light:checked) .pkp_page_index .homepage_about,
body:has(#josi-theme-light:checked) .pkp_page_index .additional_content,
body:has(#josi-theme-light:checked) .pkp_page_index .current_issue,
body:has(#josi-theme-light:checked) .josi-index-strip,
body:has(#josi-theme-light:checked) .josi-timeline-native,
body:has(#josi-theme-light:checked) .josi-flow .step,
body:has(#josi-theme-light:checked) .obj_article_summary,
body:has(#josi-theme-light:checked) .cmp_article_list > li,
body:has(#josi-theme-light:checked) .obj_issue_summary,
body:has(#josi-theme-light:checked) .obj_issue_toc .sections .section,
body:has(#josi-theme-light:checked) .pkp_block {
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  color: #102033 !important;
}

body:has(#josi-theme-dark:checked),
body.josi-dark-mode {
  background:
    radial-gradient(circle at 12% 16%, rgba(0, 212, 255, .16), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .18), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(34, 246, 167, .08), transparent 34%),
    linear-gradient(180deg, #020914 0%, #061426 48%, #020711 100%) !important;
  color: #d9ecff !important;
}

body:has(#josi-theme-dark:checked) .pkp_structure_main,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about,
body:has(#josi-theme-dark:checked) .pkp_page_index .additional_content,
body:has(#josi-theme-dark:checked) .pkp_page_index .current_issue,
body:has(#josi-theme-dark:checked) .josi-index-strip,
body:has(#josi-theme-dark:checked) .josi-timeline-native,
body:has(#josi-theme-dark:checked) .josi-flow .step,
body:has(#josi-theme-dark:checked) .obj_article_summary,
body:has(#josi-theme-dark:checked) .cmp_article_list > li,
body:has(#josi-theme-dark:checked) .obj_issue_summary,
body:has(#josi-theme-dark:checked) .obj_issue_toc .sections .section,
body:has(#josi-theme-dark:checked) .pkp_block {
  background:
    radial-gradient(circle at 10% 14%, rgba(0, 212, 255, .13), transparent 32%),
    linear-gradient(135deg, rgba(5, 18, 34, .97), rgba(8, 33, 55, .94)) !important;
  border-color: rgba(0, 212, 255, .28) !important;
  color: #d9ecff !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(0, 212, 255, .12) inset !important;
}

body:has(#josi-theme-dark:checked) .page h1,
body:has(#josi-theme-dark:checked) .page h2,
body:has(#josi-theme-dark:checked) .page h3,
body:has(#josi-theme-dark:checked) .obj_issue_toc .heading,
body:has(#josi-theme-dark:checked) .pkp_page_index .current_issue h2,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about h2,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary h2,
body:has(#josi-theme-dark:checked) .josi-index-strip h3,
body:has(#josi-theme-dark:checked) .josi-timeline-native h3,
body:has(#josi-theme-dark:checked) .josi-flow h4 {
  color: #f2fbff !important;
}

body:has(#josi-theme-dark:checked) p,
body:has(#josi-theme-dark:checked) li,
body:has(#josi-theme-dark:checked) .josi-flow p,
body:has(#josi-theme-dark:checked) .obj_article_summary,
body:has(#josi-theme-dark:checked) .page,
body:has(#josi-theme-dark:checked) .pkp_structure_main {
  color: #d9ecff !important;
}

body:has(#josi-theme-dark:checked) a,
body:has(#josi-theme-dark:checked) .obj_article_summary .title a,
body:has(#josi-theme-dark:checked) .obj_issue_summary .title a {
  color: #7feaff !important;
}

body:has(#josi-theme-dark:checked) input[type="text"],
body:has(#josi-theme-dark:checked) input[type="email"],
body:has(#josi-theme-dark:checked) input[type="password"],
body:has(#josi-theme-dark:checked) input[type="url"],
body:has(#josi-theme-dark:checked) textarea,
body:has(#josi-theme-dark:checked) select {
  background: rgba(2, 9, 20, .92) !important;
  border-color: rgba(0, 212, 255, .30) !important;
  color: #f2fbff !important;
}

body:has(#josi-theme-dark:checked) .josi-index-items span {
  background: rgba(0, 212, 255, .10) !important;
  border-color: rgba(0, 212, 255, .25) !important;
  color: #dffcff !important;
}

html.josi-journal-page body:has(#josi-theme-dark:checked) .pkp_structure_footer_wrapper {
  background:
    radial-gradient(circle at 12% 20%, rgba(0,212,255,.16), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(124,60,255,.18), transparent 34%),
    linear-gradient(135deg, #020711, #051226, #081327) !important;
}

@media (prefers-color-scheme: dark) {
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) {
    background:
      radial-gradient(circle at 12% 16%, rgba(0, 212, 255, .16), transparent 30%),
      radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .18), transparent 34%),
      linear-gradient(180deg, #020914 0%, #061426 48%, #020711 100%) !important;
    color: #d9ecff !important;
  }

  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .pkp_structure_main,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .pkp_page_index .journal_summary,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .pkp_page_index .homepage_about,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .pkp_page_index .additional_content,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .pkp_page_index .current_issue,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .josi-index-strip,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .josi-timeline-native,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .josi-flow .step,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .obj_article_summary,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .cmp_article_list > li,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .obj_issue_summary,
  body:not(:has(#josi-theme-light:checked)):not(:has(#josi-theme-dark:checked)) .pkp_block {
    background:
      radial-gradient(circle at 10% 14%, rgba(0, 212, 255, .13), transparent 32%),
      linear-gradient(135deg, rgba(5, 18, 34, .97), rgba(8, 33, 55, .94)) !important;
    border-color: rgba(0, 212, 255, .28) !important;
    color: #d9ecff !important;
  }
}

@media (max-width: 768px) {
  .josi-theme-control {
    right: 12px !important;
    bottom: 12px !important;
  }

  .josi-theme-control label {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}


/* ==========================================================
   JOSI THEME SWITCH FINAL - NAV ICON + GLOBAL LIGHT/DARK
   Tujuan:
   - Tombol mode berada di samping About
   - Tombol hanya simbol matahari dan bulan
   - Mode siang/malam konsisten selama script dimuat di halaman
   ========================================================== */

.josi-theme-nav-item {
  display: flex !important;
  align-items: center !important;
  margin: 0 4px !important;
  padding: 0 !important;
}

.josi-theme-control,
.josi-theme-control.is-in-nav {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  padding: 4px !important;
  margin: 6px 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.josi-theme-control input,
.josi-theme-control label {
  display: none !important;
}

.josi-theme-button {
  appearance: none !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}

.josi-theme-button:hover,
.josi-theme-button:focus {
  transform: translateY(-1px) !important;
  outline: none !important;
}

.josi-theme-button.is-active {
  background: linear-gradient(135deg, #ffffff, #dffcff) !important;
  color: #03111f !important;
  box-shadow: 0 8px 18px rgba(0,212,255,.18) !important;
}

body.josi-light-mode,
body:not(.josi-dark-mode) {
  background:
    radial-gradient(circle at 12% 14%, rgba(0, 212, 255, .15), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .13), transparent 34%),
    radial-gradient(circle at 50% 85%, rgba(34, 246, 167, .06), transparent 34%),
    linear-gradient(180deg, #f4fbff 0%, #ffffff 46%, #edf8ff 100%) !important;
  color: #102033 !important;
}

body.josi-light-mode .pkp_structure_main,
body.josi-light-mode .pkp_page_index .journal_summary,
body.josi-light-mode .pkp_page_index .homepage_about,
body.josi-light-mode .pkp_page_index .additional_content,
body.josi-light-mode .pkp_page_index .current_issue,
body.josi-light-mode .josi-index-strip,
body.josi-light-mode .josi-timeline-native,
body.josi-light-mode .josi-flow .step,
body.josi-light-mode .obj_article_summary,
body.josi-light-mode .cmp_article_list > li,
body.josi-light-mode .obj_issue_summary,
body.josi-light-mode .obj_issue_toc .sections .section,
body.josi-light-mode .pkp_block,
body:not(.josi-dark-mode) .pkp_structure_main,
body:not(.josi-dark-mode) .pkp_page_index .journal_summary,
body:not(.josi-dark-mode) .pkp_page_index .homepage_about,
body:not(.josi-dark-mode) .pkp_page_index .additional_content,
body:not(.josi-dark-mode) .pkp_page_index .current_issue,
body:not(.josi-dark-mode) .josi-index-strip,
body:not(.josi-dark-mode) .josi-timeline-native,
body:not(.josi-dark-mode) .josi-flow .step,
body:not(.josi-dark-mode) .obj_article_summary,
body:not(.josi-dark-mode) .cmp_article_list > li,
body:not(.josi-dark-mode) .obj_issue_summary,
body:not(.josi-dark-mode) .obj_issue_toc .sections .section,
body:not(.josi-dark-mode) .pkp_block {
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  color: #102033 !important;
}

body.josi-dark-mode {
  background:
    radial-gradient(circle at 12% 16%, rgba(0, 212, 255, .16), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .18), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(34, 246, 167, .08), transparent 34%),
    linear-gradient(180deg, #020914 0%, #061426 48%, #020711 100%) !important;
  color: #d9ecff !important;
}

body.josi-dark-mode .pkp_structure_main,
body.josi-dark-mode .pkp_page_index .journal_summary,
body.josi-dark-mode .pkp_page_index .homepage_about,
body.josi-dark-mode .pkp_page_index .additional_content,
body.josi-dark-mode .pkp_page_index .current_issue,
body.josi-dark-mode .josi-index-strip,
body.josi-dark-mode .josi-timeline-native,
body.josi-dark-mode .josi-flow .step,
body.josi-dark-mode .obj_article_summary,
body.josi-dark-mode .cmp_article_list > li,
body.josi-dark-mode .obj_issue_summary,
body.josi-dark-mode .obj_issue_toc .sections .section,
body.josi-dark-mode .pkp_block {
  background:
    radial-gradient(circle at 10% 14%, rgba(0, 212, 255, .13), transparent 32%),
    linear-gradient(135deg, rgba(5, 18, 34, .97), rgba(8, 33, 55, .94)) !important;
  border-color: rgba(0, 212, 255, .28) !important;
  color: #d9ecff !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(0, 212, 255, .12) inset !important;
}

body.josi-dark-mode .page h1,
body.josi-dark-mode .page h2,
body.josi-dark-mode .page h3,
body.josi-dark-mode .obj_issue_toc .heading,
body.josi-dark-mode .pkp_page_index .current_issue h2,
body.josi-dark-mode .pkp_page_index .homepage_about h2,
body.josi-dark-mode .pkp_page_index .journal_summary h2,
body.josi-dark-mode .josi-index-strip h3,
body.josi-dark-mode .josi-timeline-native h3,
body.josi-dark-mode .josi-flow h4 {
  color: #f2fbff !important;
}

body.josi-dark-mode p,
body.josi-dark-mode li,
body.josi-dark-mode .page,
body.josi-dark-mode .pkp_structure_main,
body.josi-dark-mode .josi-flow p {
  color: #d9ecff !important;
}

body.josi-dark-mode a,
body.josi-dark-mode .obj_article_summary .title a,
body.josi-dark-mode .obj_issue_summary .title a {
  color: #7feaff !important;
}

body.josi-dark-mode input[type="text"],
body.josi-dark-mode input[type="email"],
body.josi-dark-mode input[type="password"],
body.josi-dark-mode input[type="url"],
body.josi-dark-mode textarea,
body.josi-dark-mode select {
  background: rgba(2, 9, 20, .92) !important;
  border-color: rgba(0, 212, 255, .30) !important;
  color: #f2fbff !important;
}

body.josi-dark-mode .josi-index-items span {
  background: rgba(0, 212, 255, .10) !important;
  border-color: rgba(0, 212, 255, .25) !important;
  color: #dffcff !important;
}

html.josi-journal-page body.josi-dark-mode .pkp_structure_footer_wrapper {
  background:
    radial-gradient(circle at 12% 20%, rgba(0,212,255,.16), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(124,60,255,.18), transparent 34%),
    linear-gradient(135deg, #020711, #051226, #081327) !important;
}

@media (max-width: 768px) {
  .josi-theme-nav-item {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .josi-theme-control,
  .josi-theme-control.is-in-nav {
    margin: 4px 3px !important;
  }

  .josi-theme-button {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }
}


/* ==========================================================
   JOSI FULL FLOATING OVAL NAVBAR
   Tujuan:
   - Navbar melebar hampir full layar
   - Bentuk tetap oval/rounded dan terlihat melayang
   - Admin/user pill tetap berada di dalam area navbar
   ========================================================== */

.pkp_structure_head {
  padding-left: clamp(12px, 2vw, 28px) !important;
  padding-right: clamp(12px, 2vw, 28px) !important;
}

.pkp_head_wrapper {
  width: min(96vw, 1840px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 44px !important;
  padding-left: clamp(16px, 2vw, 34px) !important;
  padding-right: clamp(16px, 2vw, 34px) !important;
  box-shadow:
    0 26px 70px rgba(0, 25, 60, .34),
    0 12px 28px rgba(0, 119, 255, .10),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 38px rgba(0,212,255,.18) !important;
}

.pkp_head_wrapper::before,
.pkp_head_wrapper::after {
  border-radius: 44px !important;
}

.pkp_navigation_primary_wrapper {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 999px !important;
}

.pkp_navigation_primary_row {
  width: 100% !important;
}

.pkp_navigation_primary {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.pkp_navigation_search_wrapper {
  margin-left: auto !important;
}

.pkp_navigation_user_wrapper {
  right: clamp(22px, 2.5vw, 46px) !important;
  bottom: 10px !important;
}

@media (min-width: 1200px) {
  .pkp_site_name {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 768px) {
  .pkp_structure_head {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .pkp_head_wrapper {
    width: 100% !important;
    border-radius: 28px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pkp_head_wrapper::before,
  .pkp_head_wrapper::after {
    border-radius: 28px !important;
  }

  .pkp_navigation_primary_wrapper {
    border-radius: 24px !important;
  }
}


/* ==========================================================
   JOSI NAVBAR ROW FIX - ABOUT + ADMIN + THEME + SEARCH
   Tujuan:
   - adminJOSI sejajar tepat setelah About
   - tombol mode sejajar setelah adminJOSI
   - Search tetap satu baris di kanan
   - wrapper user lama disembunyikan agar layout tidak dobel
   ========================================================== */

.pkp_navigation_user_wrapper.is-josi-user-moved,
.pkp_navigation_user_wrapper.is-josi-user-moved #navigationUser,
#navigationUserWrapper.is-josi-user-moved {
  display: none !important;
}

.pkp_navigation_primary_wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 58px !important;
  padding: 0 10px !important;
}

.pkp_navigation_primary {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.pkp_navigation_primary > li {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li.josi-user-nav-item > a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > a {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > a:hover,
.pkp_navigation_primary > li.josi-user-nav-item > a:focus {
  background: rgba(255,255,255,.18) !important;
}

.josi-theme-nav-item {
  width: auto !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  margin: 0 !important;
}

.josi-theme-control,
.josi-theme-control.is-in-nav {
  margin: 0 !important;
}

.pkp_navigation_search_wrapper {
  position: relative !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  min-width: 142px !important;
  margin: 0 0 0 auto !important;
  border-radius: 999px !important;
}

.pkp_navigation_search_wrapper a,
.pkp_search a,
.pkp_search button {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 900px) {
  .pkp_navigation_primary_wrapper {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
  }

  .pkp_navigation_primary {
    flex-wrap: wrap !important;
  }

  .pkp_navigation_search_wrapper {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .pkp_navigation_primary_wrapper {
    min-height: 0 !important;
  }

  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary > li.josi-user-nav-item > a {
    min-height: 34px !important;
    padding: 7px 10px !important;
  }
}


/* ==========================================================
   JOSI NAVBAR OVERLAP FIX - ADMIN TIDAK MENIMPA SEARCH
   Tujuan:
   - adminJOSI dan Search tidak bertumpuk
   - Search tetap berada di paling kanan
   - Semua item menu tetap dalam satu baris saat ruang cukup
   ========================================================== */

.pkp_navigation_user_wrapper {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_primary_wrapper {
  column-gap: 14px !important;
}

.pkp_navigation_primary {
  flex: 1 1 auto !important;
  max-width: calc(100% - 210px) !important;
  overflow: visible !important;
}

.pkp_navigation_search_wrapper {
  flex: 0 0 176px !important;
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: center !important;
  overflow: hidden !important;
}

.pkp_navigation_search_wrapper a,
.pkp_search a,
.pkp_search button {
  width: 100% !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > a {
  max-width: 160px !important;
}

@media (max-width: 900px) {
  .pkp_navigation_primary {
    max-width: 100% !important;
  }

  .pkp_navigation_search_wrapper {
    flex-basis: 160px !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    margin-left: 0 !important;
  }
}


/* ==========================================================
   JOSI THEME CONTROL MOVE FIX
   Tujuan:
   - Tombol mode tidak muncul di dalam konten
   - Tombol mode hanya tampil setelah berhasil pindah ke navbar
   ========================================================== */

.josi-theme-control {
  display: none !important;
}

.josi-theme-control.is-in-nav {
  display: inline-flex !important;
}


/* ==========================================================
   JOSI FINAL NAV ORDER FIX - ADMIN + THEME DI SAMPING ABOUT
   Tujuan:
   - adminJOSI berada tepat setelah About
   - tombol matahari/bulan terlihat setelah adminJOSI
   - Search tetap di sisi kanan tanpa menindih item menu
   ========================================================== */

.pkp_navigation_primary_wrapper {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 0 14px !important;
  overflow: visible !important;
}

.pkp_navigation_primary {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.pkp_navigation_primary > li,
.pkp_navigation_primary > li.josi-user-nav-item,
.pkp_navigation_primary > li.josi-theme-nav-item {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li.josi-user-nav-item > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > a {
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.josi-theme-control.is-in-nav {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 3px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.josi-theme-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#navigationUserWrapper.is-josi-user-moved,
#navigationUserWrapper.is-josi-user-moved #navigationUser,
.pkp_navigation_user_wrapper.is-josi-user-moved,
.pkp_navigation_user_wrapper.is-josi-user-moved #navigationUser {
  display: none !important;
}

.pkp_navigation_search_wrapper {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 176px !important;
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  margin: 0 0 0 auto !important;
  overflow: hidden !important;
  transform: none !important;
}

.pkp_navigation_search_wrapper a,
.pkp_search a,
.pkp_search button {
  width: 100% !important;
  min-height: 40px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .pkp_navigation_primary_wrapper {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 8px !important;
  }

  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    flex-basis: 100% !important;
  }

  .pkp_navigation_search_wrapper {
    flex: 0 0 160px !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    margin-left: 0 !important;
  }
}


/* ==========================================================
   JOSI HARD FALLBACK - ADMIN DAN MODE PASTI DI AREA NAVBAR
   Catatan:
   Jika script OJS telat/gagal memindahkan item, wrapper asli tetap
   dipaksa sejajar di dekat About agar tidak jatuh ke bawah navbar.
   ========================================================== */

.pkp_head_wrapper {
  position: relative !important;
}

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  position: relative !important;
}

.pkp_navigation_user_wrapper:not(.is-josi-user-moved),
#navigationUserWrapper:not(.is-josi-user-moved) {
  position: absolute !important;
  left: clamp(284px, 16vw, 390px) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  transform: translateY(-50%) !important;
}

.pkp_navigation_user_wrapper:not(.is-josi-user-moved) .pkp_navigation_user,
#navigationUserWrapper:not(.is-josi-user-moved) #navigationUser {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.pkp_navigation_user_wrapper:not(.is-josi-user-moved) .pkp_navigation_user > li,
#navigationUserWrapper:not(.is-josi-user-moved) #navigationUser > li {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.pkp_navigation_user_wrapper:not(.is-josi-user-moved) .pkp_navigation_user > li > a,
#navigationUserWrapper:not(.is-josi-user-moved) #navigationUser > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #ffffff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.pkp_navigation_primary > li.josi-user-nav-item {
  align-self: center !important;
}

.pkp_navigation_primary > li.josi-theme-nav-item {
  align-self: center !important;
}

.josi-theme-control:not(.is-in-nav) {
  position: fixed !important;
  left: clamp(430px, 23vw, 560px) !important;
  top: clamp(168px, 11.2vw, 232px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 41 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}

@media (max-width: 900px) {
  .pkp_navigation_user_wrapper:not(.is-josi-user-moved),
  #navigationUserWrapper:not(.is-josi-user-moved),
  .josi-theme-control:not(.is-in-nav) {
    position: static !important;
    transform: none !important;
    margin: 4px 0 !important;
  }
}


/* ==========================================================
   JOSI THEME BESIDE SEARCH - FINAL
   Tombol mode ditempatkan tepat di sebelah Search dan bisa diklik.
   ========================================================== */

.pkp_navigation_primary_wrapper {
  isolation: isolate !important;
}

.pkp_navigation_search_wrapper {
  margin-left: 8px !important;
  margin-right: 0 !important;
  z-index: 35 !important;
}

.josi-theme-search-slot {
  position: relative !important;
  z-index: 80 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

.josi-theme-search-slot .josi-theme-control,
.josi-theme-control.is-in-nav {
  position: static !important;
  inset: auto !important;
  z-index: 90 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(5, 25, 43, .56), rgba(239, 250, 255, .68)) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 24px rgba(0, 22, 45, .16) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.josi-theme-search-slot .josi-theme-control input,
.josi-theme-control.is-in-nav input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.josi-theme-search-slot .josi-theme-button,
.josi-theme-control.is-in-nav .josi-theme-button {
  display: none !important;
}

.josi-theme-search-slot .josi-theme-choice,
.josi-theme-control.is-in-nav .josi-theme-choice {
  position: relative !important;
  z-index: 95 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  user-select: none !important;
}

.josi-theme-search-slot .josi-theme-button.is-active,
.josi-theme-control.is-in-nav .josi-theme-button.is-active,
.josi-theme-search-slot input:checked + .josi-theme-choice,
.josi-theme-control.is-in-nav input:checked + .josi-theme-choice,
.josi-theme-search-slot .josi-theme-choice.is-active,
.josi-theme-control.is-in-nav .josi-theme-choice.is-active {
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24) !important;
}

.josi-theme-search-slot .josi-theme-button:focus,
.josi-theme-search-slot .josi-theme-button:hover,
.josi-theme-control.is-in-nav .josi-theme-button:focus,
.josi-theme-control.is-in-nav .josi-theme-button:hover,
.josi-theme-search-slot .josi-theme-choice:focus,
.josi-theme-search-slot .josi-theme-choice:hover,
.josi-theme-control.is-in-nav .josi-theme-choice:focus,
.josi-theme-control.is-in-nav .josi-theme-choice:hover {
  outline: none !important;
  background: rgba(255,255,255,.18) !important;
}

.josi-theme-nav-item {
  display: none !important;
}

.josi-theme-control:not(.is-in-nav) {
  z-index: 100000 !important;
  pointer-events: auto !important;
}

.josi-theme-control:not(.is-in-nav) .josi-theme-button {
  display: none !important;
}

.josi-theme-control:not(.is-in-nav) .josi-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 18px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.josi-theme-control:not(.is-in-nav) input:checked + .josi-theme-choice {
  background: rgba(255,255,255,.22) !important;
}

@media (max-width: 900px) {
  .josi-theme-search-slot {
    margin-left: 0 !important;
  }

  .josi-theme-search-slot .josi-theme-control,
  .josi-theme-control.is-in-nav {
    height: 40px !important;
    min-height: 40px !important;
  }

  .josi-theme-search-slot .josi-theme-button,
  .josi-theme-control.is-in-nav .josi-theme-button,
  .josi-theme-search-slot .josi-theme-choice,
  .josi-theme-control.is-in-nav .josi-theme-choice {
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
  }
}


/* ==========================================================
   JOSI THEME POSITION LOCK - TEPAT DI SAMPING SEARCH
   ========================================================== */

.pkp_navigation_primary_wrapper {
  position: relative !important;
}

.pkp_navigation_search_wrapper {
  position: relative !important;
  flex: 0 0 176px !important;
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.josi-theme-search-slot {
  position: absolute !important;
  top: 50% !important;
  right: 188px !important;
  z-index: 120 !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

.josi-theme-search-slot .josi-theme-control,
.josi-theme-control.is-in-nav {
  height: 44px !important;
  min-height: 44px !important;
}

@media (max-width: 900px) {
  .josi-theme-search-slot {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 8px 0 auto !important;
  }
}


/* ==========================================================
   JOSI THEME FINAL OVERRIDE - POSISI + MODE BENAR-BENAR AKTIF
   ========================================================== */

.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_head_wrapper {
  position: relative !important;
}

.josi-theme-search-slot,
.josi-theme-control.is-in-nav,
.josi-theme-control:not(.is-in-nav) {
  position: absolute !important;
  top: 50% !important;
  right: 196px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 100000 !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.josi-theme-search-slot .josi-theme-control,
.josi-theme-control.is-in-nav,
.josi-theme-control:not(.is-in-nav) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(5, 25, 43, .70), rgba(228, 247, 255, .74)) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 24px rgba(0, 22, 45, .18) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.josi-theme-control input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.josi-theme-control .josi-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
}

.josi-theme-control input:checked + .josi-theme-choice,
.josi-theme-control .josi-theme-choice.is-active {
  background: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24) !important;
}

body:has(#josi-theme-light:checked),
body.josi-light-mode {
  background:
    radial-gradient(circle at 12% 14%, rgba(0, 212, 255, .15), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .13), transparent 34%),
    radial-gradient(circle at 50% 85%, rgba(34, 246, 167, .06), transparent 34%),
    linear-gradient(180deg, #f4fbff 0%, #ffffff 46%, #edf8ff 100%) !important;
  color: #102033 !important;
}

body:has(#josi-theme-light:checked) .pkp_structure_main,
body:has(#josi-theme-light:checked) .pkp_page_index .journal_summary,
body:has(#josi-theme-light:checked) .pkp_page_index .homepage_about,
body:has(#josi-theme-light:checked) .pkp_page_index .additional_content,
body:has(#josi-theme-light:checked) .pkp_page_index .current_issue,
body:has(#josi-theme-light:checked) .josi-index-strip,
body:has(#josi-theme-light:checked) .josi-timeline-native,
body:has(#josi-theme-light:checked) .josi-flow .step,
body:has(#josi-theme-light:checked) .obj_article_summary,
body:has(#josi-theme-light:checked) .cmp_article_list > li,
body:has(#josi-theme-light:checked) .obj_issue_summary,
body:has(#josi-theme-light:checked) .obj_issue_toc .sections .section,
body:has(#josi-theme-light:checked) .pkp_block,
body.josi-light-mode .pkp_structure_main,
body.josi-light-mode .pkp_page_index .journal_summary,
body.josi-light-mode .pkp_page_index .homepage_about,
body.josi-light-mode .pkp_page_index .additional_content,
body.josi-light-mode .pkp_page_index .current_issue,
body.josi-light-mode .josi-index-strip,
body.josi-light-mode .josi-timeline-native,
body.josi-light-mode .josi-flow .step,
body.josi-light-mode .obj_article_summary,
body.josi-light-mode .cmp_article_list > li,
body.josi-light-mode .obj_issue_summary,
body.josi-light-mode .obj_issue_toc .sections .section,
body.josi-light-mode .pkp_block {
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  border-color: rgba(0, 212, 255, .18) !important;
  color: #102033 !important;
}

body:has(#josi-theme-dark:checked),
body.josi-dark-mode {
  background:
    radial-gradient(circle at 12% 16%, rgba(0, 212, 255, .16), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .18), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(34, 246, 167, .08), transparent 34%),
    linear-gradient(180deg, #020914 0%, #061426 48%, #020711 100%) !important;
  color: #d9ecff !important;
}

body:has(#josi-theme-dark:checked) .pkp_structure_main,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about,
body:has(#josi-theme-dark:checked) .pkp_page_index .additional_content,
body:has(#josi-theme-dark:checked) .pkp_page_index .current_issue,
body:has(#josi-theme-dark:checked) .josi-index-strip,
body:has(#josi-theme-dark:checked) .josi-timeline-native,
body:has(#josi-theme-dark:checked) .josi-flow .step,
body:has(#josi-theme-dark:checked) .obj_article_summary,
body:has(#josi-theme-dark:checked) .cmp_article_list > li,
body:has(#josi-theme-dark:checked) .obj_issue_summary,
body:has(#josi-theme-dark:checked) .obj_issue_toc .sections .section,
body:has(#josi-theme-dark:checked) .pkp_block,
body.josi-dark-mode .pkp_structure_main,
body.josi-dark-mode .pkp_page_index .journal_summary,
body.josi-dark-mode .pkp_page_index .homepage_about,
body.josi-dark-mode .pkp_page_index .additional_content,
body.josi-dark-mode .pkp_page_index .current_issue,
body.josi-dark-mode .josi-index-strip,
body.josi-dark-mode .josi-timeline-native,
body.josi-dark-mode .josi-flow .step,
body.josi-dark-mode .obj_article_summary,
body.josi-dark-mode .cmp_article_list > li,
body.josi-dark-mode .obj_issue_summary,
body.josi-dark-mode .obj_issue_toc .sections .section,
body.josi-dark-mode .pkp_block {
  background:
    radial-gradient(circle at 10% 14%, rgba(0, 212, 255, .13), transparent 32%),
    linear-gradient(135deg, rgba(5, 18, 34, .97), rgba(8, 33, 55, .94)) !important;
  border-color: rgba(0, 212, 255, .30) !important;
  color: #d9ecff !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(0, 212, 255, .12) inset !important;
}

body:has(#josi-theme-dark:checked) .page h1,
body:has(#josi-theme-dark:checked) .page h2,
body:has(#josi-theme-dark:checked) .page h3,
body:has(#josi-theme-dark:checked) .obj_issue_toc .heading,
body:has(#josi-theme-dark:checked) .pkp_page_index .current_issue h2,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about h2,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary h2,
body:has(#josi-theme-dark:checked) .josi-index-strip h3,
body:has(#josi-theme-dark:checked) .josi-timeline-native h3,
body:has(#josi-theme-dark:checked) .josi-flow h4,
body.josi-dark-mode .page h1,
body.josi-dark-mode .page h2,
body.josi-dark-mode .page h3,
body.josi-dark-mode .obj_issue_toc .heading,
body.josi-dark-mode .pkp_page_index .current_issue h2,
body.josi-dark-mode .pkp_page_index .homepage_about h2,
body.josi-dark-mode .pkp_page_index .journal_summary h2,
body.josi-dark-mode .josi-index-strip h3,
body.josi-dark-mode .josi-timeline-native h3,
body.josi-dark-mode .josi-flow h4 {
  color: #f2fbff !important;
}

body:has(#josi-theme-dark:checked) p,
body:has(#josi-theme-dark:checked) li,
body:has(#josi-theme-dark:checked) .page,
body:has(#josi-theme-dark:checked) .pkp_structure_main,
body:has(#josi-theme-dark:checked) .josi-flow p,
body.josi-dark-mode p,
body.josi-dark-mode li,
body.josi-dark-mode .page,
body.josi-dark-mode .pkp_structure_main,
body.josi-dark-mode .josi-flow p {
  color: #d9ecff !important;
}

body:has(#josi-theme-dark:checked) a,
body:has(#josi-theme-dark:checked) .obj_article_summary .title a,
body:has(#josi-theme-dark:checked) .obj_issue_summary .title a,
body.josi-dark-mode a,
body.josi-dark-mode .obj_article_summary .title a,
body.josi-dark-mode .obj_issue_summary .title a {
  color: #7feaff !important;
}

@media (max-width: 1400px) {
  .josi-theme-search-slot,
  .josi-theme-control.is-in-nav,
  .josi-theme-control:not(.is-in-nav) {
    top: 50% !important;
    right: 190px !important;
  }
}

@media (max-width: 900px) {
  .josi-theme-search-slot,
  .josi-theme-control.is-in-nav,
  .josi-theme-control:not(.is-in-nav) {
    position: absolute !important;
    top: 50% !important;
    right: 170px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }
}


/* ==========================================================
   JOSI THEME SLOT CORRECTION - HANYA SLOT YANG POSISI NAVBAR
   ========================================================== */

.pkp_navigation_primary_wrapper .josi-theme-search-slot,
.pkp_head_wrapper .josi-theme-search-slot {
  position: absolute !important;
  top: 50% !important;
  right: 196px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 100000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}

.pkp_navigation_primary_wrapper .josi-theme-search-slot .josi-theme-control,
.pkp_head_wrapper .josi-theme-search-slot .josi-theme-control {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}

.josi-theme-control.is-in-nav {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

.josi-theme-control:not(.is-in-nav) {
  display: none !important;
}

@media (max-width: 1400px) {
  .pkp_navigation_primary_wrapper .josi-theme-search-slot,
  .pkp_head_wrapper .josi-theme-search-slot {
    right: 190px !important;
  }
}

@media (max-width: 900px) {
  .pkp_navigation_primary_wrapper .josi-theme-search-slot,
  .pkp_head_wrapper .josi-theme-search-slot {
    right: 170px !important;
  }
}


/* ==========================================================
   JOSI THEME FINAL VISIBLE IN NAVBAR - FLEX ITEM BEFORE SEARCH
   ========================================================== */

.pkp_navigation_primary_wrapper {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

.pkp_navigation_primary {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.pkp_navigation_primary_wrapper .josi-theme-search-slot,
.pkp_head_wrapper .josi-theme-search-slot {
  position: relative !important;
  inset: auto !important;
  z-index: 999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 10px 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.pkp_navigation_primary_wrapper .josi-theme-search-slot + .pkp_navigation_search_wrapper,
.pkp_head_wrapper .josi-theme-search-slot + .pkp_navigation_search_wrapper {
  margin-left: 0 !important;
}

.pkp_navigation_primary_wrapper .josi-theme-control.is-in-nav,
.pkp_head_wrapper .josi-theme-control.is-in-nav {
  position: relative !important;
  inset: auto !important;
  z-index: 999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(5, 25, 43, .76), rgba(228, 247, 255, .74)) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 10px 24px rgba(0, 22, 45, .18) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.pkp_navigation_primary_wrapper .josi-theme-control.is-in-nav .josi-theme-choice,
.pkp_head_wrapper .josi-theme-control.is-in-nav .josi-theme-choice {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.pkp_navigation_primary_wrapper .josi-theme-control:not(.is-in-nav),
.pkp_head_wrapper .josi-theme-control:not(.is-in-nav) {
  display: none !important;
}

@media (max-width: 900px) {
  .pkp_navigation_primary_wrapper .josi-theme-search-slot,
  .pkp_head_wrapper .josi-theme-search-slot {
    margin: 0 8px 0 auto !important;
  }
}


/* ==========================================================
   JOSI THEME FALLBACK VISIBLE - JIKA SCRIPT BELUM PINDAH KE NAVBAR
   ========================================================== */

body > .josi-theme-control:not(.is-in-nav),
.pkp_structure_main > .josi-theme-control:not(.is-in-nav),
.pkp_page_index > .josi-theme-control:not(.is-in-nav),
.additional_content > .josi-theme-control:not(.is-in-nav) {
  position: absolute !important;
  top: 214px !important;
  right: 226px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 9999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(5, 25, 43, .76), rgba(228, 247, 255, .74)) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 10px 24px rgba(0, 22, 45, .18) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

body > .josi-theme-control:not(.is-in-nav) .josi-theme-choice,
.pkp_structure_main > .josi-theme-control:not(.is-in-nav) .josi-theme-choice,
.pkp_page_index > .josi-theme-control:not(.is-in-nav) .josi-theme-choice,
.additional_content > .josi-theme-control:not(.is-in-nav) .josi-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body > .josi-theme-control:not(.is-in-nav) input:checked + .josi-theme-choice,
.pkp_structure_main > .josi-theme-control:not(.is-in-nav) input:checked + .josi-theme-choice,
.pkp_page_index > .josi-theme-control:not(.is-in-nav) input:checked + .josi-theme-choice,
.additional_content > .josi-theme-control:not(.is-in-nav) input:checked + .josi-theme-choice {
  background: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24) !important;
}

@media (max-width: 1400px) {
  body > .josi-theme-control:not(.is-in-nav),
  .pkp_structure_main > .josi-theme-control:not(.is-in-nav),
  .pkp_page_index > .josi-theme-control:not(.is-in-nav),
  .additional_content > .josi-theme-control:not(.is-in-nav) {
    top: 208px !important;
    right: 214px !important;
  }
}

@media (max-width: 900px) {
  body > .josi-theme-control:not(.is-in-nav),
  .pkp_structure_main > .josi-theme-control:not(.is-in-nav),
  .pkp_page_index > .josi-theme-control:not(.is-in-nav),
  .additional_content > .josi-theme-control:not(.is-in-nav) {
    top: 198px !important;
    right: 174px !important;
  }
}


/* ==========================================================
   JOSI LIVE OJS NO-SCRIPT FIX
   OJS menghapus <script> dari Additional Content, jadi tombol
   mode ditarik naik dari .additional_content ke area navbar.
   ========================================================== */

.additional_content {
  position: relative !important;
  overflow: visible !important;
}

.additional_content > .josi-theme-control:not(.is-in-nav) {
  position: absolute !important;
  top: -214px !important;
  right: clamp(-8px, 2vw, 18px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 99999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(5, 25, 43, .76), rgba(228, 247, 255, .74)) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 10px 24px rgba(0, 22, 45, .18) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.additional_content > .josi-theme-control:not(.is-in-nav) input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.additional_content > .josi-theme-control:not(.is-in-nav) .josi-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.additional_content > .josi-theme-control:not(.is-in-nav) input:checked + .josi-theme-choice {
  background: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24) !important;
}

@media (max-width: 1400px) {
  .additional_content > .josi-theme-control:not(.is-in-nav) {
    top: -214px !important;
    right: 8px !important;
  }
}

@media (max-width: 900px) {
  .additional_content > .josi-theme-control:not(.is-in-nav) {
    top: -202px !important;
    right: 156px !important;
  }
}


/* ==========================================================
   JOSI THEME NO-SCRIPT VISIBILITY FIX - TIDAK TERPOTONG KONTEN
   ========================================================== */

.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.page_index_journal,
.additional_content {
  overflow: visible !important;
}

.additional_content > .josi-theme-control:not(.is-in-nav) {
  position: absolute !important;
  top: -760px !important;
  right: 206px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(5, 25, 43, .82), rgba(228, 247, 255, .78)) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 28px rgba(0, 22, 45, .22) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.additional_content > .josi-theme-control:not(.is-in-nav) input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.additional_content > .josi-theme-control:not(.is-in-nav) .josi-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.additional_content > .josi-theme-control:not(.is-in-nav) input:checked + .josi-theme-choice {
  background: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26) !important;
}

@media (max-width: 1400px) {
  .additional_content > .josi-theme-control:not(.is-in-nav) {
    top: -742px !important;
    right: 194px !important;
  }
}

@media (max-width: 900px) {
  .additional_content > .josi-theme-control:not(.is-in-nav) {
    top: -650px !important;
    right: 160px !important;
  }
}


/* ==========================================================
   JOSI THEME FLOATING DRAGGABLE - SELALU TERLIHAT
   Catatan:
   OJS menghapus <script>, jadi posisi default dibuat fixed.
   Atribut inline HTML memberi drag jika tidak dibuang sanitizer OJS.
   ========================================================== */

.josi-theme-control,
.additional_content > .josi-theme-control,
.additional_content > .josi-theme-control:not(.is-in-nav),
body .josi-theme-control:not(.is-in-nav) {
  position: fixed !important;
  top: 185px !important;
  right: 220px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(5, 25, 43, .84), rgba(228, 247, 255, .78)) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 30px rgba(0, 22, 45, .24) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  cursor: move !important;
  user-select: none !important;
}

.josi-theme-control input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.josi-theme-control .josi-theme-choice,
.additional_content > .josi-theme-control .josi-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.josi-theme-control input:checked + .josi-theme-choice {
  background: rgba(255,255,255,.25) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important;
}


/* JOSI HEADER TITLE FINAL TOPMOST FIX */
.pkp_site_name > a.is_text,
.pkp_site_name a.is_text,
.pkp_site_name_wrapper .pkp_site_name > a.is_text {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .55),
    0 0 14px rgba(0, 212, 255, .58),
    0 0 2px rgba(255, 255, 255, .95) !important;
  font-weight: 900 !important;
}

.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::after {
  content: none !important;
  display: none !important;
}


/* JOSI HEADER LOGO RESTORE ABSOLUTE LAST */
.pkp_site_name > a.is_text,
.pkp_site_name a.is_text,
.pkp_site_name_wrapper .pkp_site_name > a.is_text {
  position: relative !important;
  display: inline-block !important;
  min-height: 78px !important;
  padding-left: 184px !important;
  padding-top: 18px !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .55),
    0 0 14px rgba(0, 212, 255, .58),
    0 0 2px rgba(255, 255, 255, .95) !important;
  font-weight: 900 !important;
}

.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text {
    min-height: 58px !important;
    padding-left: 118px !important;
    padding-top: 14px !important;
  }
}


/* ==========================================================
   JOSI LOGO AND TITLE LAST OVERRIDE
   Ini diletakkan paling akhir agar logo JOSI tidak hilang lagi.
   ========================================================== */

.pkp_site_name,
.pkp_site_name_wrapper {
  overflow: visible !important;
}

.pkp_site_name > a,
.pkp_site_name > a.is_text,
.pkp_site_name a.is_text,
.pkp_site_name_wrapper .pkp_site_name > a,
.pkp_site_name_wrapper .pkp_site_name > a.is_text {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 82px !important;
  padding-left: 188px !important;
  padding-top: 0 !important;
  color: #f8feff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  font-weight: 900 !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .58),
    0 0 16px rgba(0, 212, 255, .62),
    0 0 2px rgba(255, 255, 255, .96) !important;
}

.pkp_site_name > a img,
.pkp_site_name_wrapper .pkp_site_name img {
  display: block !important;
  width: auto !important;
  max-width: 150px !important;
  max-height: 78px !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  object-fit: contain !important;
}

.pkp_site_name > a::after,
.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::after,
.pkp_site_name_wrapper .pkp_site_name > a::after,
.pkp_site_name_wrapper .pkp_site_name > a.is_text::after {
  content: "" !important;
  position: absolute !important;
  left: 38px !important;
  top: 50% !important;
  display: block !important;
  width: 132px !important;
  height: 78px !important;
  border-radius: 18px !important;
  transform: translateY(-50%) !important;
  background:
    none,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)) !important;
  box-shadow:
    0 0 20px rgba(0,212,255,.20),
    0 0 0 1px rgba(255,255,255,.12) inset !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
  animation: josiHeaderLogoIn .72s ease .18s both !important;
}

.pkp_site_name > a::before,
.pkp_site_name > a.is_text::before,
.pkp_site_name_wrapper .pkp_site_name > a::before {
  z-index: 3 !important;
}

@media (max-width: 768px) {
  .pkp_site_name > a,
  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name_wrapper .pkp_site_name > a,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text {
    min-height: 62px !important;
    padding-left: 122px !important;
    font-size: 18px !important;
  }

  .pkp_site_name > a::after,
  .pkp_site_name > a.is_text::after,
  .pkp_site_name a.is_text::after,
  .pkp_site_name_wrapper .pkp_site_name > a::after,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text::after {
    left: 30px !important;
    width: 84px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }
}


/* ==========================================================
   JOSI HEADER LOGO + TITLE REAL FINAL
   Mengembalikan logo JOSI setelah rule judul menonaktifkan ::after.
   Berlaku untuk header OJS mode teks maupun mode gambar.
   ========================================================== */

.pkp_site_name,
.pkp_site_name_wrapper {
  overflow: visible !important;
}

.pkp_site_name > a,
.pkp_site_name > a.is_text,
.pkp_site_name a.is_text,
.pkp_site_name_wrapper .pkp_site_name > a,
.pkp_site_name_wrapper .pkp_site_name > a.is_text {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 82px !important;
  padding-left: 188px !important;
  padding-top: 0 !important;
  color: #f8feff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  font-weight: 900 !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .58),
    0 0 16px rgba(0, 212, 255, .62),
    0 0 2px rgba(255, 255, 255, .96) !important;
}

.pkp_site_name > a img,
.pkp_site_name_wrapper .pkp_site_name img {
  display: block !important;
  width: auto !important;
  max-width: 150px !important;
  max-height: 78px !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  object-fit: contain !important;
}

.pkp_site_name > a::after,
.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::after,
.pkp_site_name_wrapper .pkp_site_name > a::after,
.pkp_site_name_wrapper .pkp_site_name > a.is_text::after {
  content: "" !important;
  position: absolute !important;
  left: 38px !important;
  top: 50% !important;
  display: block !important;
  width: 132px !important;
  height: 78px !important;
  border-radius: 18px !important;
  transform: translateY(-50%) !important;
  background:
    none,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)) !important;
  box-shadow:
    0 0 20px rgba(0,212,255,.20),
    0 0 0 1px rgba(255,255,255,.12) inset !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
  animation: josiHeaderLogoIn .72s ease .18s both !important;
}

.pkp_site_name > a::before,
.pkp_site_name > a.is_text::before,
.pkp_site_name_wrapper .pkp_site_name > a::before {
  z-index: 3 !important;
}

@media (max-width: 768px) {
  .pkp_site_name > a,
  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name_wrapper .pkp_site_name > a,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text {
    min-height: 62px !important;
    padding-left: 122px !important;
    font-size: 18px !important;
  }

  .pkp_site_name > a::after,
  .pkp_site_name > a.is_text::after,
  .pkp_site_name a.is_text::after,
  .pkp_site_name_wrapper .pkp_site_name > a::after,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text::after {
    left: 30px !important;
    width: 84px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }
}


/* JOSI HEADER LOGO RESTORE FINAL
   Logo JOSI memakai ::after, jadi aturan paling akhir harus mengaktifkannya lagi. */
.pkp_site_name > a.is_text,
.pkp_site_name a.is_text,
.pkp_site_name_wrapper .pkp_site_name > a.is_text {
  position: relative !important;
  display: inline-block !important;
  min-height: 78px !important;
  padding-left: 184px !important;
  padding-top: 18px !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .55),
    0 0 14px rgba(0, 212, 255, .58),
    0 0 2px rgba(255, 255, 255, .95) !important;
  font-weight: 900 !important;
}

.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text {
    min-height: 58px !important;
    padding-left: 118px !important;
    padding-top: 14px !important;
  }
}


/* JOSI HEADER TITLE FINAL TOPMOST FIX */
.pkp_site_name > a.is_text,
.pkp_site_name a.is_text,
.pkp_site_name_wrapper .pkp_site_name > a.is_text {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .55),
    0 0 14px rgba(0, 212, 255, .58),
    0 0 2px rgba(255, 255, 255, .95) !important;
  font-weight: 900 !important;
}

.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   JOSI HEADER TITLE VISIBILITY FIX
   Judul jurnal di header dibuat jelas pada mode terang dan gelap.
   ========================================================== */

.pkp_site_name,
.pkp_site_name > a,
.pkp_site_name .is_text,
.pkp_site_name_wrapper .pkp_site_name a,
body.josi-light-mode .pkp_site_name > a,
body.josi-dark-mode .pkp_site_name > a,
body:has(#josi-theme-light:checked) .pkp_site_name > a,
body:has(#josi-theme-dark:checked) .pkp_site_name > a {
  color: #f7fdff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .42),
    0 0 12px rgba(0, 212, 255, .55) !important;
  font-weight: 900 !important;
}

.pkp_site_name > a::after,
.pkp_site_name .is_text::after {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 0 !important;
  content: none !important;
}

@media (max-width: 900px) {
  .josi-theme-control,
  .additional_content > .josi-theme-control,
  .additional_content > .josi-theme-control:not(.is-in-nav),
  body .josi-theme-control:not(.is-in-nav) {
    top: 176px !important;
    right: 168px !important;
  }
}


/* JOSI THEME DRAG SUPPORT */
.josi-theme-control,
.josi-theme-control * {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.josi-theme-control {
  cursor: grab !important;
}

.josi-theme-control:active {
  cursor: grabbing !important;
}


/* ==========================================================
   JOSI THEME FOOTER CENTER - STABLE NO SCRIPT
   ========================================================== */

.additional_content > .josi-theme-control,
.additional_content > .josi-theme-control:not(.is-in-nav),
.josi-theme-control {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: max-content !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 46px auto 0 !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(5, 25, 43, .84), rgba(228, 247, 255, .78)) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 30px rgba(0, 22, 45, .20) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  cursor: default !important;
}

.josi-theme-control input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.josi-theme-control .josi-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.josi-theme-control input:checked + .josi-theme-choice {
  background: rgba(255,255,255,.25) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important;
}


/* JOSI HEADER TITLE ABSOLUTE FINAL FIX */
.pkp_site_name > a.is_text,
.pkp_site_name a.is_text,
.pkp_site_name_wrapper .pkp_site_name > a.is_text {
  position: relative !important;
  display: inline-block !important;
  min-height: 78px !important;
  padding-left: 184px !important;
  padding-top: 18px !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .55),
    0 0 14px rgba(0, 212, 255, .58),
    0 0 2px rgba(255, 255, 255, .95) !important;
  font-weight: 900 !important;
}

.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text {
    min-height: 58px !important;
    padding-left: 118px !important;
    padding-top: 14px !important;
  }
}

/* JOSI LOGO AND TITLE LAST OVERRIDE - EOF */
.pkp_site_name,
.pkp_site_name_wrapper {
  overflow: visible !important;
}

.pkp_site_name > a,
.pkp_site_name > a.is_text,
.pkp_site_name a.is_text,
.pkp_site_name_wrapper .pkp_site_name > a,
.pkp_site_name_wrapper .pkp_site_name > a.is_text {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 82px !important;
  padding-left: 188px !important;
  padding-top: 0 !important;
  color: #f8feff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  font-weight: 900 !important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.58),
    0 0 16px rgba(0,212,255,.62),
    0 0 2px rgba(255,255,255,.96) !important;
}

.pkp_site_name > a img,
.pkp_site_name_wrapper .pkp_site_name img {
  display: block !important;
  width: auto !important;
  max-width: 150px !important;
  max-height: 78px !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  object-fit: contain !important;
}

.pkp_site_name > a::after,
.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::after,
.pkp_site_name_wrapper .pkp_site_name > a::after,
.pkp_site_name_wrapper .pkp_site_name > a.is_text::after {
  content: "" !important;
  position: absolute !important;
  left: 38px !important;
  top: 50% !important;
  display: block !important;
  width: 132px !important;
  height: 78px !important;
  border-radius: 18px !important;
  transform: translateY(-50%) !important;
  background:
    none,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)) !important;
  box-shadow:
    0 0 20px rgba(0,212,255,.20),
    0 0 0 1px rgba(255,255,255,.12) inset !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
  animation: josiHeaderLogoIn .72s ease .18s both !important;
}

.pkp_site_name > a::before,
.pkp_site_name > a.is_text::before,
.pkp_site_name_wrapper .pkp_site_name > a::before {
  z-index: 3 !important;
}

@media (max-width: 768px) {
  .pkp_site_name > a,
  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name_wrapper .pkp_site_name > a,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text {
    min-height: 62px !important;
    padding-left: 122px !important;
    font-size: 18px !important;
  }

  .pkp_site_name > a::after,
  .pkp_site_name > a.is_text::after,
  .pkp_site_name a.is_text::after,
  .pkp_site_name_wrapper .pkp_site_name > a::after,
  .pkp_site_name_wrapper .pkp_site_name > a.is_text::after {
    left: 30px !important;
    width: 84px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }
}

/* JOSI DARK MODE ABOUT READABILITY - EOF */
body.josi-dark-mode .pkp_page_index .homepage_about,
body.josi-dark-mode .pkp_page_index .journal_summary,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary {
  background:
    radial-gradient(circle at 12% 16%, rgba(0, 212, 255, .16), transparent 32%),
    linear-gradient(135deg, rgba(5, 18, 34, .98), rgba(8, 34, 58, .96)) !important;
  border-color: rgba(0, 212, 255, .36) !important;
  color: #dceeff !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .36),
    0 0 0 1px rgba(0, 212, 255, .14) inset !important;
}

body.josi-dark-mode .pkp_page_index .homepage_about h2,
body.josi-dark-mode .pkp_page_index .journal_summary h2,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about h2,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary h2 {
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(0, 212, 255, .28) !important;
}

body.josi-dark-mode .pkp_page_index .homepage_about p,
body.josi-dark-mode .pkp_page_index .journal_summary p,
body.josi-dark-mode .pkp_page_index .homepage_about li,
body.josi-dark-mode .pkp_page_index .journal_summary li,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about p,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary p,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about li,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary li {
  color: #dceeff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* JOSI DARK MODE ABOUT TEXT BLACK - REAL FINAL */
body.josi-dark-mode .pkp_page_index .homepage_about,
body.josi-dark-mode .pkp_page_index .journal_summary,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary {
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .08), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  color: #071827 !important;
}

body.josi-dark-mode .pkp_page_index .homepage_about *,
body.josi-dark-mode .pkp_page_index .journal_summary *,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about *,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary * {
  color: #071827 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #071827 !important;
}

body.josi-dark-mode .pkp_page_index .homepage_about h1,
body.josi-dark-mode .pkp_page_index .homepage_about h2,
body.josi-dark-mode .pkp_page_index .homepage_about h3,
body.josi-dark-mode .pkp_page_index .journal_summary h1,
body.josi-dark-mode .pkp_page_index .journal_summary h2,
body.josi-dark-mode .pkp_page_index .journal_summary h3,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about h1,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about h2,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about h3,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary h1,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary h2,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary h3 {
  color: #061525 !important;
  -webkit-text-fill-color: #061525 !important;
}

/* JOSI DARK MODE ABOUT TEXT BLACK - SAFARI/OJS HARD FIX */
html:has(#josi-theme-dark:checked) .pkp_structure_main .homepage_about,
html:has(#josi-theme-dark:checked) .pkp_structure_main .journal_summary,
html:has(#josi-theme-dark:checked) .pkp_structure_main .about_section,
html:has(#josi-theme-dark:checked) .pkp_structure_main .description,
body:has(#josi-theme-dark:checked) .pkp_structure_main .homepage_about,
body:has(#josi-theme-dark:checked) .pkp_structure_main .journal_summary,
body:has(#josi-theme-dark:checked) .pkp_structure_main .about_section,
body:has(#josi-theme-dark:checked) .pkp_structure_main .description,
body.josi-dark-mode .pkp_structure_main .homepage_about,
body.josi-dark-mode .pkp_structure_main .journal_summary,
body.josi-dark-mode .pkp_structure_main .about_section,
body.josi-dark-mode .pkp_structure_main .description {
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .08), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  color: #061525 !important;
  -webkit-text-fill-color: #061525 !important;
}

html:has(#josi-theme-dark:checked) .pkp_structure_main .homepage_about *,
html:has(#josi-theme-dark:checked) .pkp_structure_main .journal_summary *,
html:has(#josi-theme-dark:checked) .pkp_structure_main .about_section *,
html:has(#josi-theme-dark:checked) .pkp_structure_main .description *,
body:has(#josi-theme-dark:checked) .pkp_structure_main .homepage_about *,
body:has(#josi-theme-dark:checked) .pkp_structure_main .journal_summary *,
body:has(#josi-theme-dark:checked) .pkp_structure_main .about_section *,
body:has(#josi-theme-dark:checked) .pkp_structure_main .description *,
body.josi-dark-mode .pkp_structure_main .homepage_about *,
body.josi-dark-mode .pkp_structure_main .journal_summary *,
body.josi-dark-mode .pkp_structure_main .about_section *,
body.josi-dark-mode .pkp_structure_main .description * {
  color: #061525 !important;
  -webkit-text-fill-color: #061525 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

html:has(#josi-theme-dark:checked) .pkp_structure_main .homepage_about p,
html:has(#josi-theme-dark:checked) .pkp_structure_main .journal_summary p,
html:has(#josi-theme-dark:checked) .pkp_structure_main .about_section p,
html:has(#josi-theme-dark:checked) .pkp_structure_main .description p,
html:has(#josi-theme-dark:checked) .pkp_structure_main .homepage_about span,
html:has(#josi-theme-dark:checked) .pkp_structure_main .journal_summary span,
html:has(#josi-theme-dark:checked) .pkp_structure_main .about_section span,
html:has(#josi-theme-dark:checked) .pkp_structure_main .description span,
body:has(#josi-theme-dark:checked) .pkp_structure_main .homepage_about p,
body:has(#josi-theme-dark:checked) .pkp_structure_main .journal_summary p,
body:has(#josi-theme-dark:checked) .pkp_structure_main .about_section p,
body:has(#josi-theme-dark:checked) .pkp_structure_main .description p,
body:has(#josi-theme-dark:checked) .pkp_structure_main .homepage_about span,
body:has(#josi-theme-dark:checked) .pkp_structure_main .journal_summary span,
body:has(#josi-theme-dark:checked) .pkp_structure_main .about_section span,
body:has(#josi-theme-dark:checked) .pkp_structure_main .description span,
body.josi-dark-mode .pkp_structure_main .homepage_about p,
body.josi-dark-mode .pkp_structure_main .journal_summary p,
body.josi-dark-mode .pkp_structure_main .about_section p,
body.josi-dark-mode .pkp_structure_main .description p,
body.josi-dark-mode .pkp_structure_main .homepage_about span,
body.josi-dark-mode .pkp_structure_main .journal_summary span,
body.josi-dark-mode .pkp_structure_main .about_section span,
body.josi-dark-mode .pkp_structure_main .description span {
  color: #061525 !important;
  -webkit-text-fill-color: #061525 !important;
}

/* JOSI DARK MODE REMOVE WHITE ADDITIONAL CONTENT WRAPPER */
html:has(#josi-theme-dark:checked) .pkp_page_index .additional_content,
html:has(#josi-theme-dark:checked) .pkp_structure_main .additional_content,
body:has(#josi-theme-dark:checked) .pkp_page_index .additional_content,
body:has(#josi-theme-dark:checked) .pkp_structure_main .additional_content,
body.josi-dark-mode .pkp_page_index .additional_content,
body.josi-dark-mode .pkp_structure_main .additional_content {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:has(#josi-theme-dark:checked) .pkp_page_index .additional_content::before,
html:has(#josi-theme-dark:checked) .pkp_page_index .additional_content::after,
html:has(#josi-theme-dark:checked) .pkp_structure_main .additional_content::before,
html:has(#josi-theme-dark:checked) .pkp_structure_main .additional_content::after,
body:has(#josi-theme-dark:checked) .pkp_page_index .additional_content::before,
body:has(#josi-theme-dark:checked) .pkp_page_index .additional_content::after,
body:has(#josi-theme-dark:checked) .pkp_structure_main .additional_content::before,
body:has(#josi-theme-dark:checked) .pkp_structure_main .additional_content::after,
body.josi-dark-mode .pkp_page_index .additional_content::before,
body.josi-dark-mode .pkp_page_index .additional_content::after,
body.josi-dark-mode .pkp_structure_main .additional_content::before,
body.josi-dark-mode .pkp_structure_main .additional_content::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================
   JOSI ADMIN DROPDOWN ALIGN FIX - REAL FINAL
   Dropdown adminJOSI dibuat tepat sejajar dari sisi kiri tombol
   adminJOSI, bukan melebar/geser dari About atau sisi kanan.
   ========================================================== */

.pkp_navigation_primary > li.josi-user-nav-item,
.pkp_navigation_primary li.josi-user-nav-item,
#navigationPrimary > li.josi-user-nav-item {
  position: relative !important;
  overflow: visible !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > ul,
.pkp_navigation_primary > li.josi-user-nav-item > .dropdown-menu,
.pkp_navigation_primary li.josi-user-nav-item > ul,
.pkp_navigation_primary li.josi-user-nav-item > .dropdown-menu,
#navigationPrimary > li.josi-user-nav-item > ul,
#navigationPrimary > li.josi-user-nav-item > .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: min(300px, calc(100vw - 28px)) !important;
  min-width: 260px !important;
  max-width: 300px !important;
  margin: 0 !important;
  padding: 14px !important;
  transform: none !important;
  border-radius: 18px !important;
  background: rgba(3, 17, 31, .97) !important;
  border: 1px solid rgba(0, 212, 255, .36) !important;
  box-shadow: 0 22px 56px rgba(0, 18, 42, .46) !important;
  z-index: 10090 !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > ul::before,
.pkp_navigation_primary > li.josi-user-nav-item > .dropdown-menu::before,
.pkp_navigation_primary li.josi-user-nav-item > ul::before,
.pkp_navigation_primary li.josi-user-nav-item > .dropdown-menu::before,
#navigationPrimary > li.josi-user-nav-item > ul::before,
#navigationPrimary > li.josi-user-nav-item > .dropdown-menu::before {
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  top: -8px !important;
  width: 16px !important;
  height: 16px !important;
  background: rgba(3, 17, 31, .97) !important;
  border-left: 1px solid rgba(0, 212, 255, .36) !important;
  border-top: 1px solid rgba(0, 212, 255, .36) !important;
  transform: rotate(45deg) !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > ul li,
.pkp_navigation_primary > li.josi-user-nav-item > .dropdown-menu li,
.pkp_navigation_primary li.josi-user-nav-item > ul li,
.pkp_navigation_primary li.josi-user-nav-item > .dropdown-menu li,
#navigationPrimary > li.josi-user-nav-item > ul li,
#navigationPrimary > li.josi-user-nav-item > .dropdown-menu li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > ul li a,
.pkp_navigation_primary > li.josi-user-nav-item > .dropdown-menu li a,
.pkp_navigation_primary li.josi-user-nav-item > ul li a,
.pkp_navigation_primary li.josi-user-nav-item > .dropdown-menu li a,
#navigationPrimary > li.josi-user-nav-item > ul li a,
#navigationPrimary > li.josi-user-nav-item > .dropdown-menu li a {
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
}

.pkp_navigation_primary > li.josi-user-nav-item > ul li a:hover,
.pkp_navigation_primary > li.josi-user-nav-item > .dropdown-menu li a:hover,
.pkp_navigation_primary li.josi-user-nav-item > ul li a:hover,
.pkp_navigation_primary li.josi-user-nav-item > .dropdown-menu li a:hover,
#navigationPrimary > li.josi-user-nav-item > ul li a:hover,
#navigationPrimary > li.josi-user-nav-item > .dropdown-menu li a:hover {
  background: rgba(0, 212, 255, .15) !important;
  color: #e8fdff !important;
}

@media (max-width: 768px) {
  .pkp_navigation_primary > li.josi-user-nav-item > ul,
  .pkp_navigation_primary > li.josi-user-nav-item > .dropdown-menu,
  .pkp_navigation_primary li.josi-user-nav-item > ul,
  .pkp_navigation_primary li.josi-user-nav-item > .dropdown-menu,
  #navigationPrimary > li.josi-user-nav-item > ul,
  #navigationPrimary > li.josi-user-nav-item > .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
    min-width: min(260px, calc(100vw - 24px)) !important;
  }
}

/* ==========================================================
   JOSI ADMIN DROPDOWN ALIGN FIX - USER WRAPPER FALLBACK
   Jika adminJOSI masih memakai struktur asli #navigationUser,
   dropdown tetap dipaksa rata kiri dengan tombol adminJOSI.
   ========================================================== */

.pkp_navigation_user_wrapper,
#navigationUserWrapper,
.pkp_navigation_user,
#navigationUser,
.pkp_navigation_user > li,
#navigationUser > li {
  overflow: visible !important;
}

.pkp_navigation_user > li,
#navigationUser > li {
  position: relative !important;
}

.pkp_navigation_user > li > ul,
.pkp_navigation_user > li > .dropdown-menu,
.pkp_navigation_user .dropdown-menu,
#navigationUser > li > ul,
#navigationUser > li > .dropdown-menu,
#navigationUser .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: min(300px, calc(100vw - 28px)) !important;
  min-width: 260px !important;
  max-width: 300px !important;
  margin: 0 !important;
  padding: 14px !important;
  transform: none !important;
  border-radius: 18px !important;
  background: rgba(3, 17, 31, .97) !important;
  border: 1px solid rgba(0, 212, 255, .36) !important;
  box-shadow: 0 22px 56px rgba(0, 18, 42, .46) !important;
  z-index: 10095 !important;
}

.pkp_navigation_user > li > ul::before,
.pkp_navigation_user > li > .dropdown-menu::before,
.pkp_navigation_user .dropdown-menu::before,
#navigationUser > li > ul::before,
#navigationUser > li > .dropdown-menu::before,
#navigationUser .dropdown-menu::before {
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  top: -8px !important;
  width: 16px !important;
  height: 16px !important;
  background: rgba(3, 17, 31, .97) !important;
  border-left: 1px solid rgba(0, 212, 255, .36) !important;
  border-top: 1px solid rgba(0, 212, 255, .36) !important;
  transform: rotate(45deg) !important;
}

.pkp_navigation_user > li > ul li,
.pkp_navigation_user > li > .dropdown-menu li,
.pkp_navigation_user .dropdown-menu li,
#navigationUser > li > ul li,
#navigationUser > li > .dropdown-menu li,
#navigationUser .dropdown-menu li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_user > li > ul li a,
.pkp_navigation_user > li > .dropdown-menu li a,
.pkp_navigation_user .dropdown-menu li a,
#navigationUser > li > ul li a,
#navigationUser > li > .dropdown-menu li a,
#navigationUser .dropdown-menu li a {
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
}

.pkp_navigation_user > li > ul li a:hover,
.pkp_navigation_user > li > .dropdown-menu li a:hover,
.pkp_navigation_user .dropdown-menu li a:hover,
#navigationUser > li > ul li a:hover,
#navigationUser > li > .dropdown-menu li a:hover,
#navigationUser .dropdown-menu li a:hover {
  background: rgba(0, 212, 255, .15) !important;
  color: #e8fdff !important;
}

/* JOSI BACKGROUND GRID + MOVING LED FINAL */
@keyframes josiBackgroundLedRun {
  0% {
    background-position:
      -140% 18%,
      130% 72%,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      center;
  }
  100% {
    background-position:
      240% 18%,
      -180% 72%,
      38px 22px,
      24px 36px,
      0 0,
      0 0,
      0 0,
      center;
  }
}

@keyframes josiBackgroundGridPulse {
  0%, 100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.08) brightness(1.03);
  }
}

html,
body {
  min-height: 100% !important;
}

body,
body.josi-light-mode,
html.josi-light-mode body,
html[data-josi-theme="light"] body {
  background-color: #f5fcff !important;
  background-image:
    linear-gradient(100deg, transparent 0%, transparent 39%, rgba(0, 178, 255, .20) 47%, rgba(54, 255, 218, .18) 51%, transparent 61%, transparent 100%),
    linear-gradient(280deg, transparent 0%, transparent 44%, rgba(111, 102, 255, .12) 50%, rgba(0, 212, 255, .13) 56%, transparent 66%, transparent 100%),
    radial-gradient(circle at 1px 1px, rgba(18, 129, 178, .24) 1px, transparent 1.7px),
    linear-gradient(90deg, rgba(5, 108, 153, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(5, 108, 153, .08) 1px, transparent 1px),
    radial-gradient(circle at 16% 18%, rgba(0, 212, 255, .17), transparent 30%),
    radial-gradient(circle at 86% 24%, rgba(135, 106, 255, .13), transparent 34%),
    linear-gradient(135deg, #f7fdff 0%, #eefbff 42%, #fffafe 100%) !important;
  background-size:
    64% 100%,
    58% 100%,
    34px 34px,
    34px 34px,
    34px 34px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-attachment: fixed !important;
  animation: josiBackgroundLedRun 18s linear infinite !important;
}

body.josi-dark-mode,
html.josi-dark-mode body,
html[data-josi-theme="dark"] body {
  background-color: #061523 !important;
  background-image:
    linear-gradient(100deg, transparent 0%, transparent 38%, rgba(0, 212, 255, .30) 47%, rgba(42, 255, 216, .24) 51%, transparent 63%, transparent 100%),
    linear-gradient(280deg, transparent 0%, transparent 43%, rgba(145, 103, 255, .20) 50%, rgba(0, 212, 255, .18) 58%, transparent 68%, transparent 100%),
    radial-gradient(circle at 1px 1px, rgba(93, 229, 255, .22) 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(103, 226, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(103, 226, 255, .08) 1px, transparent 1px),
    radial-gradient(circle at 14% 18%, rgba(0, 212, 255, .19), transparent 32%),
    radial-gradient(circle at 84% 24%, rgba(112, 92, 255, .24), transparent 35%),
    linear-gradient(135deg, #061929 0%, #03101d 48%, #0d0b2a 100%) !important;
  background-size:
    64% 100%,
    58% 100%,
    34px 34px,
    34px 34px,
    34px 34px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-attachment: fixed !important;
  animation: josiBackgroundLedRun 16s linear infinite !important;
}

.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main {
  background: transparent !important;
}

/* JOSI DISABLE OLD LOADING OVERLAY FINAL
   Supaya saat Command + Option + R background tidak tertutup loader JOSI/blur. */
html::before,
html::after,
body::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

/* JOSI HOMEPAGE BACKGROUND FORCE FINAL
   Halaman awal OJS punya wrapper sendiri, jadi grid/LED dipasang juga di layer index. */
.pkp_page_index,
.pkp_page_index .pkp_structure_page,
.pkp_page_index .pkp_structure_content,
.pkp_page_index .page_index_journal {
  min-height: 100vh !important;
}

.pkp_page_index .pkp_structure_page,
.pkp_page_index .pkp_structure_content,
.pkp_page_index .page_index_journal {
  background-color: transparent !important;
  box-shadow: none !important;
}

body.josi-light-mode.pkp_page_index,
html.josi-light-mode body.pkp_page_index,
html[data-josi-theme="light"] body.pkp_page_index,
body:not(.josi-dark-mode).pkp_page_index {
  background-color: #f5fcff !important;
  background-image:
    linear-gradient(100deg, transparent 0%, transparent 39%, rgba(0, 178, 255, .20) 47%, rgba(54, 255, 218, .18) 51%, transparent 61%, transparent 100%),
    linear-gradient(280deg, transparent 0%, transparent 44%, rgba(111, 102, 255, .12) 50%, rgba(0, 212, 255, .13) 56%, transparent 66%, transparent 100%),
    radial-gradient(circle at 1px 1px, rgba(18, 129, 178, .24) 1px, transparent 1.7px),
    linear-gradient(90deg, rgba(5, 108, 153, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(5, 108, 153, .08) 1px, transparent 1px),
    radial-gradient(circle at 16% 18%, rgba(0, 212, 255, .17), transparent 30%),
    radial-gradient(circle at 86% 24%, rgba(135, 106, 255, .13), transparent 34%),
    linear-gradient(135deg, #f7fdff 0%, #eefbff 42%, #fffafe 100%) !important;
  background-size:
    64% 100%,
    58% 100%,
    34px 34px,
    34px 34px,
    34px 34px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-attachment: fixed !important;
  animation: josiBackgroundLedRun 18s linear infinite !important;
}

body.josi-dark-mode.pkp_page_index,
html.josi-dark-mode body.pkp_page_index,
html[data-josi-theme="dark"] body.pkp_page_index {
  background-color: #061523 !important;
  background-image:
    linear-gradient(100deg, transparent 0%, transparent 38%, rgba(0, 212, 255, .30) 47%, rgba(42, 255, 216, .24) 51%, transparent 63%, transparent 100%),
    linear-gradient(280deg, transparent 0%, transparent 43%, rgba(145, 103, 255, .20) 50%, rgba(0, 212, 255, .18) 58%, transparent 68%, transparent 100%),
    radial-gradient(circle at 1px 1px, rgba(93, 229, 255, .22) 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(103, 226, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(103, 226, 255, .08) 1px, transparent 1px),
    radial-gradient(circle at 14% 18%, rgba(0, 212, 255, .19), transparent 32%),
    radial-gradient(circle at 84% 24%, rgba(112, 92, 255, .24), transparent 35%),
    linear-gradient(135deg, #061929 0%, #03101d 48%, #0d0b2a 100%) !important;
  background-size:
    64% 100%,
    58% 100%,
    34px 34px,
    34px 34px,
    34px 34px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-attachment: fixed !important;
  animation: josiBackgroundLedRun 16s linear infinite !important;
}

/* JOSI HOMEPAGE TRANSPARENT WRAPPER FINAL
   Di halaman awal, additional_content menutup grid. Paksa hanya wrapper luarnya transparan. */
body.pkp_page_index .pkp_structure_content,
body.pkp_page_index .pkp_structure_main,
body.pkp_page_index .page_index_journal,
body.pkp_page_index .additional_content,
body.josi-light-mode.pkp_page_index .pkp_structure_content,
body.josi-light-mode.pkp_page_index .pkp_structure_main,
body.josi-light-mode.pkp_page_index .page_index_journal,
body.josi-light-mode.pkp_page_index .additional_content,
body.josi-dark-mode.pkp_page_index .pkp_structure_content,
body.josi-dark-mode.pkp_page_index .pkp_structure_main,
body.josi-dark-mode.pkp_page_index .page_index_journal,
body.josi-dark-mode.pkp_page_index .additional_content,
html[data-josi-theme="light"] body.pkp_page_index .pkp_structure_content,
html[data-josi-theme="light"] body.pkp_page_index .pkp_structure_main,
html[data-josi-theme="light"] body.pkp_page_index .page_index_journal,
html[data-josi-theme="light"] body.pkp_page_index .additional_content,
html[data-josi-theme="dark"] body.pkp_page_index .pkp_structure_content,
html[data-josi-theme="dark"] body.pkp_page_index .pkp_structure_main,
html[data-josi-theme="dark"] body.pkp_page_index .page_index_journal,
html[data-josi-theme="dark"] body.pkp_page_index .additional_content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.pkp_page_index .additional_content::after,
body.josi-light-mode.pkp_page_index .additional_content::after,
body.josi-dark-mode.pkp_page_index .additional_content::after,
html[data-josi-theme="light"] body.pkp_page_index .additional_content::after,
html[data-josi-theme="dark"] body.pkp_page_index .additional_content::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================
   JOSI GLOBAL THEME MODE SYNC - FINAL
   Semua area OJS mengikuti mode yang dipilih dari localStorage/cookie,
   class HTML/body, atau radio control tambahan di homepage.
   ========================================================== */

html.josi-light-mode,
html[data-josi-theme="light"] {
  color-scheme: light !important;
}

html.josi-dark-mode,
html[data-josi-theme="dark"] {
  color-scheme: dark !important;
}

body.josi-light-mode,
html.josi-light-mode body,
html[data-josi-theme="light"] body,
body:has(#josi-theme-light:checked) {
  color: #102033 !important;
}

body.josi-dark-mode,
html.josi-dark-mode body,
html[data-josi-theme="dark"] body,
body:has(#josi-theme-dark:checked) {
  color: #d9ecff !important;
}

body.josi-light-mode .pkp_structure_main,
body.josi-light-mode .page,
body.josi-light-mode .page_index_journal,
body.josi-light-mode .obj_issue_toc,
body.josi-light-mode .obj_issue_toc .sections .section,
body.josi-light-mode .obj_article_details,
body.josi-light-mode .obj_article_summary,
body.josi-light-mode .obj_issue_summary,
body.josi-light-mode .cmp_article_list > li,
body.josi-light-mode .cmp_announcements .obj_announcement_summary,
body.josi-light-mode .pkp_block,
body.josi-light-mode .pkp_page_index .journal_summary,
body.josi-light-mode .pkp_page_index .homepage_about,
body.josi-light-mode .pkp_page_index .current_issue,
body.josi-light-mode .josi-native-banner,
body.josi-light-mode .josi-index-strip,
body.josi-light-mode .josi-timeline-native,
body.josi-light-mode .josi-flow .step,
html.josi-light-mode body .pkp_structure_main,
html.josi-light-mode body .page,
html.josi-light-mode body .page_index_journal,
html.josi-light-mode body .obj_issue_toc,
html.josi-light-mode body .obj_issue_toc .sections .section,
html.josi-light-mode body .obj_article_details,
html.josi-light-mode body .obj_article_summary,
html.josi-light-mode body .obj_issue_summary,
html.josi-light-mode body .cmp_article_list > li,
html.josi-light-mode body .cmp_announcements .obj_announcement_summary,
html.josi-light-mode body .pkp_block,
html.josi-light-mode body .pkp_page_index .journal_summary,
html.josi-light-mode body .pkp_page_index .homepage_about,
html.josi-light-mode body .pkp_page_index .current_issue,
html.josi-light-mode body .josi-index-strip,
html.josi-light-mode body .josi-timeline-native,
html.josi-light-mode body .josi-flow .step,
html[data-josi-theme="light"] body .pkp_structure_main,
html[data-josi-theme="light"] body .page,
html[data-josi-theme="light"] body .page_index_journal,
html[data-josi-theme="light"] body .obj_issue_toc,
html[data-josi-theme="light"] body .obj_issue_toc .sections .section,
html[data-josi-theme="light"] body .obj_article_details,
html[data-josi-theme="light"] body .obj_article_summary,
html[data-josi-theme="light"] body .obj_issue_summary,
html[data-josi-theme="light"] body .cmp_article_list > li,
html[data-josi-theme="light"] body .cmp_announcements .obj_announcement_summary,
html[data-josi-theme="light"] body .pkp_block,
html[data-josi-theme="light"] body .pkp_page_index .journal_summary,
html[data-josi-theme="light"] body .pkp_page_index .homepage_about,
html[data-josi-theme="light"] body .pkp_page_index .current_issue,
html[data-josi-theme="light"] body .josi-index-strip,
html[data-josi-theme="light"] body .josi-timeline-native,
html[data-josi-theme="light"] body .josi-flow .step,
body:has(#josi-theme-light:checked) .pkp_structure_main,
body:has(#josi-theme-light:checked) .page,
body:has(#josi-theme-light:checked) .page_index_journal,
body:has(#josi-theme-light:checked) .obj_issue_toc,
body:has(#josi-theme-light:checked) .obj_issue_toc .sections .section,
body:has(#josi-theme-light:checked) .obj_article_details,
body:has(#josi-theme-light:checked) .obj_article_summary,
body:has(#josi-theme-light:checked) .obj_issue_summary,
body:has(#josi-theme-light:checked) .cmp_article_list > li,
body:has(#josi-theme-light:checked) .cmp_announcements .obj_announcement_summary,
body:has(#josi-theme-light:checked) .pkp_block,
body:has(#josi-theme-light:checked) .pkp_page_index .journal_summary,
body:has(#josi-theme-light:checked) .pkp_page_index .homepage_about,
body:has(#josi-theme-light:checked) .pkp_page_index .current_issue,
body:has(#josi-theme-light:checked) .josi-index-strip,
body:has(#josi-theme-light:checked) .josi-timeline-native,
body:has(#josi-theme-light:checked) .josi-flow .step {
  background:
    radial-gradient(circle at 10% 14%, rgba(0, 212, 255, .10), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  border-color: rgba(0, 212, 255, .18) !important;
  color: #102033 !important;
}

body.josi-dark-mode .pkp_structure_main,
body.josi-dark-mode .page,
body.josi-dark-mode .page_index_journal,
body.josi-dark-mode .obj_issue_toc,
body.josi-dark-mode .obj_issue_toc .sections .section,
body.josi-dark-mode .obj_article_details,
body.josi-dark-mode .obj_article_summary,
body.josi-dark-mode .obj_issue_summary,
body.josi-dark-mode .cmp_article_list > li,
body.josi-dark-mode .cmp_announcements .obj_announcement_summary,
body.josi-dark-mode .pkp_block,
body.josi-dark-mode .pkp_page_index .journal_summary,
body.josi-dark-mode .pkp_page_index .homepage_about,
body.josi-dark-mode .pkp_page_index .current_issue,
body.josi-dark-mode .josi-index-strip,
body.josi-dark-mode .josi-timeline-native,
body.josi-dark-mode .josi-flow .step,
html.josi-dark-mode body .pkp_structure_main,
html.josi-dark-mode body .page,
html.josi-dark-mode body .page_index_journal,
html.josi-dark-mode body .obj_issue_toc,
html.josi-dark-mode body .obj_issue_toc .sections .section,
html.josi-dark-mode body .obj_article_details,
html.josi-dark-mode body .obj_article_summary,
html.josi-dark-mode body .obj_issue_summary,
html.josi-dark-mode body .cmp_article_list > li,
html.josi-dark-mode body .cmp_announcements .obj_announcement_summary,
html.josi-dark-mode body .pkp_block,
html.josi-dark-mode body .pkp_page_index .journal_summary,
html.josi-dark-mode body .pkp_page_index .homepage_about,
html.josi-dark-mode body .pkp_page_index .current_issue,
html.josi-dark-mode body .josi-index-strip,
html.josi-dark-mode body .josi-timeline-native,
html.josi-dark-mode body .josi-flow .step,
html[data-josi-theme="dark"] body .pkp_structure_main,
html[data-josi-theme="dark"] body .page,
html[data-josi-theme="dark"] body .page_index_journal,
html[data-josi-theme="dark"] body .obj_issue_toc,
html[data-josi-theme="dark"] body .obj_issue_toc .sections .section,
html[data-josi-theme="dark"] body .obj_article_details,
html[data-josi-theme="dark"] body .obj_article_summary,
html[data-josi-theme="dark"] body .obj_issue_summary,
html[data-josi-theme="dark"] body .cmp_article_list > li,
html[data-josi-theme="dark"] body .cmp_announcements .obj_announcement_summary,
html[data-josi-theme="dark"] body .pkp_block,
html[data-josi-theme="dark"] body .pkp_page_index .journal_summary,
html[data-josi-theme="dark"] body .pkp_page_index .homepage_about,
html[data-josi-theme="dark"] body .pkp_page_index .current_issue,
html[data-josi-theme="dark"] body .josi-index-strip,
html[data-josi-theme="dark"] body .josi-timeline-native,
html[data-josi-theme="dark"] body .josi-flow .step,
body:has(#josi-theme-dark:checked) .pkp_structure_main,
body:has(#josi-theme-dark:checked) .page,
body:has(#josi-theme-dark:checked) .page_index_journal,
body:has(#josi-theme-dark:checked) .obj_issue_toc,
body:has(#josi-theme-dark:checked) .obj_issue_toc .sections .section,
body:has(#josi-theme-dark:checked) .obj_article_details,
body:has(#josi-theme-dark:checked) .obj_article_summary,
body:has(#josi-theme-dark:checked) .obj_issue_summary,
body:has(#josi-theme-dark:checked) .cmp_article_list > li,
body:has(#josi-theme-dark:checked) .cmp_announcements .obj_announcement_summary,
body:has(#josi-theme-dark:checked) .pkp_block,
body:has(#josi-theme-dark:checked) .pkp_page_index .journal_summary,
body:has(#josi-theme-dark:checked) .pkp_page_index .homepage_about,
body:has(#josi-theme-dark:checked) .pkp_page_index .current_issue,
body:has(#josi-theme-dark:checked) .josi-index-strip,
body:has(#josi-theme-dark:checked) .josi-timeline-native,
body:has(#josi-theme-dark:checked) .josi-flow .step {
  background:
    radial-gradient(circle at 10% 14%, rgba(0, 212, 255, .13), transparent 32%),
    linear-gradient(135deg, rgba(5, 18, 34, .97), rgba(8, 33, 55, .94)) !important;
  border-color: rgba(0, 212, 255, .30) !important;
  color: #d9ecff !important;
}

html.josi-light-mode body :is(p, li, dd, dt, label, legend, .page, .description, .subtitle, .summary, .value, .authors, .date, .published, .abstract, .item, .pkp_block),
html[data-josi-theme="light"] body :is(p, li, dd, dt, label, legend, .page, .description, .subtitle, .summary, .value, .authors, .date, .published, .abstract, .item, .pkp_block),
body.josi-light-mode :is(p, li, dd, dt, label, legend, .page, .description, .subtitle, .summary, .value, .authors, .date, .published, .abstract, .item, .pkp_block),
body:has(#josi-theme-light:checked) :is(p, li, dd, dt, label, legend, .page, .description, .subtitle, .summary, .value, .authors, .date, .published, .abstract, .item, .pkp_block) {
  color: #263b50 !important;
}

html.josi-dark-mode body :is(p, li, dd, dt, label, legend, .page, .description, .subtitle, .summary, .value, .authors, .date, .published, .abstract, .item, .pkp_block),
html[data-josi-theme="dark"] body :is(p, li, dd, dt, label, legend, .page, .description, .subtitle, .summary, .value, .authors, .date, .published, .abstract, .item, .pkp_block),
body.josi-dark-mode :is(p, li, dd, dt, label, legend, .page, .description, .subtitle, .summary, .value, .authors, .date, .published, .abstract, .item, .pkp_block),
body:has(#josi-theme-dark:checked) :is(p, li, dd, dt, label, legend, .page, .description, .subtitle, .summary, .value, .authors, .date, .published, .abstract, .item, .pkp_block) {
  color: #d9ecff !important;
}

html.josi-light-mode body :is(h1, h2, h3, h4, h5, h6, .title, .heading, .label),
html[data-josi-theme="light"] body :is(h1, h2, h3, h4, h5, h6, .title, .heading, .label),
body.josi-light-mode :is(h1, h2, h3, h4, h5, h6, .title, .heading, .label),
body:has(#josi-theme-light:checked) :is(h1, h2, h3, h4, h5, h6, .title, .heading, .label) {
  color: #092d43 !important;
}

html.josi-dark-mode body :is(h1, h2, h3, h4, h5, h6, .title, .heading, .label),
html[data-josi-theme="dark"] body :is(h1, h2, h3, h4, h5, h6, .title, .heading, .label),
body.josi-dark-mode :is(h1, h2, h3, h4, h5, h6, .title, .heading, .label),
body:has(#josi-theme-dark:checked) :is(h1, h2, h3, h4, h5, h6, .title, .heading, .label) {
  color: #f2fbff !important;
}

html.josi-light-mode body :is(a, .title a, .heading a),
html[data-josi-theme="light"] body :is(a, .title a, .heading a),
body.josi-light-mode :is(a, .title a, .heading a),
body:has(#josi-theme-light:checked) :is(a, .title a, .heading a) {
  color: #0a5c7e !important;
}

html.josi-dark-mode body :is(a, .title a, .heading a),
html[data-josi-theme="dark"] body :is(a, .title a, .heading a),
body.josi-dark-mode :is(a, .title a, .heading a),
body:has(#josi-theme-dark:checked) :is(a, .title a, .heading a) {
  color: #7feaff !important;
}

html.josi-light-mode body :is(input, textarea, select),
html[data-josi-theme="light"] body :is(input, textarea, select),
body.josi-light-mode :is(input, textarea, select),
body:has(#josi-theme-light:checked) :is(input, textarea, select) {
  background: #ffffff !important;
  border-color: rgba(0, 119, 180, .24) !important;
  color: #102033 !important;
}

html.josi-dark-mode body :is(input, textarea, select),
html[data-josi-theme="dark"] body :is(input, textarea, select),
body.josi-dark-mode :is(input, textarea, select),
body:has(#josi-theme-dark:checked) :is(input, textarea, select) {
  background: rgba(2, 9, 20, .92) !important;
  border-color: rgba(0, 212, 255, .34) !important;
  color: #f2fbff !important;
}

html.josi-light-mode body :is(table, th, td),
html[data-josi-theme="light"] body :is(table, th, td),
body.josi-light-mode :is(table, th, td),
body:has(#josi-theme-light:checked) :is(table, th, td) {
  border-color: rgba(0, 119, 180, .18) !important;
  color: #102033 !important;
}

html.josi-dark-mode body :is(table, th, td),
html[data-josi-theme="dark"] body :is(table, th, td),
body.josi-dark-mode :is(table, th, td),
body:has(#josi-theme-dark:checked) :is(table, th, td) {
  border-color: rgba(0, 212, 255, .22) !important;
  color: #d9ecff !important;
}

.pkp_structure_head :is(a, button, span),
.pkp_navigation_primary :is(a, span),
.pkp_navigation_user :is(a, span),
.pkp_navigation_search_wrapper :is(a, span),
.pkp_search,
.pkp_search :is(a, span),
.pkp_site_name,
.pkp_site_name :is(a, span),
html.josi-light-mode body .pkp_structure_head :is(a, button, span),
html.josi-dark-mode body .pkp_structure_head :is(a, button, span),
html[data-josi-theme="light"] body .pkp_structure_head :is(a, button, span),
html[data-josi-theme="dark"] body .pkp_structure_head :is(a, button, span),
body.josi-light-mode .pkp_structure_head :is(a, button, span),
body.josi-dark-mode .pkp_structure_head :is(a, button, span) {
  color: #ffffff !important;
}

.pkp_navigation_primary :is(ul, .dropdown-menu) a,
.pkp_navigation_user :is(ul, .dropdown-menu) a,
#navigationUser :is(ul, .dropdown-menu) a,
#navigationPrimary :is(ul, .dropdown-menu) a,
html.josi-light-mode body .pkp_navigation_primary :is(ul, .dropdown-menu) a,
html.josi-dark-mode body .pkp_navigation_primary :is(ul, .dropdown-menu) a,
html[data-josi-theme="light"] body .pkp_navigation_primary :is(ul, .dropdown-menu) a,
html[data-josi-theme="dark"] body .pkp_navigation_primary :is(ul, .dropdown-menu) a,
body.josi-light-mode .pkp_navigation_primary :is(ul, .dropdown-menu) a,
body.josi-dark-mode .pkp_navigation_primary :is(ul, .dropdown-menu) a {
  color: #ffffff !important;
}

:is(.obj_galley_link, .cmp_button, .block_make_submission a, button.submit, a.cmp_button),
html.josi-light-mode body :is(.obj_galley_link, .cmp_button, .block_make_submission a, button.submit, a.cmp_button),
html.josi-dark-mode body :is(.obj_galley_link, .cmp_button, .block_make_submission a, button.submit, a.cmp_button),
html[data-josi-theme="light"] body :is(.obj_galley_link, .cmp_button, .block_make_submission a, button.submit, a.cmp_button),
html[data-josi-theme="dark"] body :is(.obj_galley_link, .cmp_button, .block_make_submission a, button.submit, a.cmp_button),
body.josi-light-mode :is(.obj_galley_link, .cmp_button, .block_make_submission a, button.submit, a.cmp_button),
body.josi-dark-mode :is(.obj_galley_link, .cmp_button, .block_make_submission a, button.submit, a.cmp_button) {
  color: #ffffff !important;
}

.josi-theme-control .josi-theme-choice,
html.josi-light-mode body .josi-theme-control .josi-theme-choice,
html.josi-dark-mode body .josi-theme-control .josi-theme-choice,
html[data-josi-theme="light"] body .josi-theme-control .josi-theme-choice,
html[data-josi-theme="dark"] body .josi-theme-control .josi-theme-choice {
  color: #dffcff !important;
}

.josi-theme-control input:checked + .josi-theme-choice,
html.josi-light-mode body .josi-theme-control input:checked + .josi-theme-choice,
html.josi-dark-mode body .josi-theme-control input:checked + .josi-theme-choice,
html[data-josi-theme="light"] body .josi-theme-control input:checked + .josi-theme-choice,
html[data-josi-theme="dark"] body .josi-theme-control input:checked + .josi-theme-choice {
  color: #03111f !important;
}

/* ==========================================================
   JOSI FULL PAGE THEME BACKGROUND - REAL FINAL
   Mode terang/gelap tidak hanya mengubah card konten, tapi juga
   seluruh layer halaman OJS di luar .pkp_structure_main.
   ========================================================== */

html,
body,
.pkp_structure_page,
.pkp_structure_body {
  min-height: 100% !important;
}

html.josi-light-mode,
html[data-josi-theme="light"],
html:has(#josi-theme-light:checked) {
  background-color: #f5fcff !important;
}

body.josi-light-mode,
html.josi-light-mode body,
html[data-josi-theme="light"] body,
body:has(#josi-theme-light:checked),
html.josi-light-mode body .pkp_structure_page,
html.josi-light-mode body .pkp_structure_body,
html.josi-light-mode body .pkp_structure_content,
html[data-josi-theme="light"] body .pkp_structure_page,
html[data-josi-theme="light"] body .pkp_structure_body,
html[data-josi-theme="light"] body .pkp_structure_content,
body.josi-light-mode .pkp_structure_page,
body.josi-light-mode .pkp_structure_body,
body.josi-light-mode .pkp_structure_content,
body:has(#josi-theme-light:checked) .pkp_structure_page,
body:has(#josi-theme-light:checked) .pkp_structure_body,
body:has(#josi-theme-light:checked) .pkp_structure_content {
  background-color: #f5fcff !important;
  background-image:
    linear-gradient(100deg, transparent 0%, transparent 39%, rgba(0, 178, 255, .18) 47%, rgba(54, 255, 218, .15) 51%, transparent 61%, transparent 100%),
    linear-gradient(280deg, transparent 0%, transparent 44%, rgba(111, 102, 255, .10) 50%, rgba(0, 212, 255, .11) 56%, transparent 66%, transparent 100%),
    radial-gradient(circle at 1px 1px, rgba(18, 129, 178, .20) 1px, transparent 1.7px),
    linear-gradient(90deg, rgba(5, 108, 153, .07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(5, 108, 153, .07) 1px, transparent 1px),
    radial-gradient(circle at 16% 18%, rgba(0, 212, 255, .14), transparent 30%),
    radial-gradient(circle at 86% 24%, rgba(135, 106, 255, .11), transparent 34%),
    linear-gradient(135deg, #f7fdff 0%, #eefbff 42%, #fffafe 100%) !important;
  background-size:
    64% 100%,
    58% 100%,
    34px 34px,
    34px 34px,
    34px 34px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-attachment: fixed !important;
  color: #102033 !important;
}

html.josi-dark-mode,
html[data-josi-theme="dark"],
html:has(#josi-theme-dark:checked) {
  background-color: #061523 !important;
}

body.josi-dark-mode,
html.josi-dark-mode body,
html[data-josi-theme="dark"] body,
body:has(#josi-theme-dark:checked),
html.josi-dark-mode body .pkp_structure_page,
html.josi-dark-mode body .pkp_structure_body,
html.josi-dark-mode body .pkp_structure_content,
html[data-josi-theme="dark"] body .pkp_structure_page,
html[data-josi-theme="dark"] body .pkp_structure_body,
html[data-josi-theme="dark"] body .pkp_structure_content,
body.josi-dark-mode .pkp_structure_page,
body.josi-dark-mode .pkp_structure_body,
body.josi-dark-mode .pkp_structure_content,
body:has(#josi-theme-dark:checked) .pkp_structure_page,
body:has(#josi-theme-dark:checked) .pkp_structure_body,
body:has(#josi-theme-dark:checked) .pkp_structure_content {
  background-color: #061523 !important;
  background-image:
    linear-gradient(100deg, transparent 0%, transparent 38%, rgba(0, 212, 255, .30) 47%, rgba(42, 255, 216, .24) 51%, transparent 63%, transparent 100%),
    linear-gradient(280deg, transparent 0%, transparent 43%, rgba(145, 103, 255, .20) 50%, rgba(0, 212, 255, .18) 58%, transparent 68%, transparent 100%),
    radial-gradient(circle at 1px 1px, rgba(93, 229, 255, .22) 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(103, 226, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(103, 226, 255, .08) 1px, transparent 1px),
    radial-gradient(circle at 14% 18%, rgba(0, 212, 255, .19), transparent 32%),
    radial-gradient(circle at 84% 24%, rgba(112, 92, 255, .24), transparent 35%),
    linear-gradient(135deg, #061929 0%, #03101d 48%, #0d0b2a 100%) !important;
  background-size:
    64% 100%,
    58% 100%,
    34px 34px,
    34px 34px,
    34px 34px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-attachment: fixed !important;
  color: #d9ecff !important;
}

html.josi-light-mode body .pkp_structure_content,
html[data-josi-theme="light"] body .pkp_structure_content,
body.josi-light-mode .pkp_structure_content,
body:has(#josi-theme-light:checked) .pkp_structure_content,
html.josi-dark-mode body .pkp_structure_content,
html[data-josi-theme="dark"] body .pkp_structure_content,
body.josi-dark-mode .pkp_structure_content,
body:has(#josi-theme-dark:checked) .pkp_structure_content {
  box-shadow: none !important;
}

/* ==========================================================
   JOSI LIGHT MODE INNER PAGE FIX - REAL FINAL
   Menghapus frame gelap dan strip abu-abu di halaman Current,
   Archives, Submissions, About, dan halaman OJS internal lain.
   ========================================================== */

html.josi-light-mode body .pkp_structure_content,
html[data-josi-theme="light"] body .pkp_structure_content,
body.josi-light-mode .pkp_structure_content,
body:has(#josi-theme-light:checked) .pkp_structure_content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.josi-light-mode body .pkp_structure_main,
html[data-josi-theme="light"] body .pkp_structure_main,
body.josi-light-mode .pkp_structure_main,
body:has(#josi-theme-light:checked) .pkp_structure_main {
  background:
    radial-gradient(circle at 8% 10%, rgba(0, 212, 255, .10), transparent 30%),
    radial-gradient(circle at 92% 15%, rgba(124, 60, 255, .07), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.97)) !important;
  border: 1px solid rgba(0, 180, 220, .26) !important;
  border-radius: 30px !important;
  box-shadow:
    0 20px 52px rgba(0, 73, 114, .12),
    0 0 0 1px rgba(255,255,255,.80) inset !important;
  color: #102033 !important;
}

html.josi-light-mode body .pkp_structure_main > .page,
html[data-josi-theme="light"] body .pkp_structure_main > .page,
body.josi-light-mode .pkp_structure_main > .page,
body:has(#josi-theme-light:checked) .pkp_structure_main > .page,
html.josi-light-mode body .page_submissions,
html[data-josi-theme="light"] body .page_submissions,
body.josi-light-mode .page_submissions,
body:has(#josi-theme-light:checked) .page_submissions,
html.josi-light-mode body .page_issue_archive,
html[data-josi-theme="light"] body .page_issue_archive,
body.josi-light-mode .page_issue_archive,
body:has(#josi-theme-light:checked) .page_issue_archive,
html.josi-light-mode body .page_about,
html[data-josi-theme="light"] body .page_about,
body.josi-light-mode .page_about,
body:has(#josi-theme-light:checked) .page_about {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #102033 !important;
}

html.josi-light-mode body :is(.cmp_breadcrumbs, .cmp_notification, .cmp_form, .submission_checklist, .section_policy, .author_guidelines, .privacy_statement, .about_section, .description, .obj_issue_toc, .obj_issue_toc .section),
html[data-josi-theme="light"] body :is(.cmp_breadcrumbs, .cmp_notification, .cmp_form, .submission_checklist, .section_policy, .author_guidelines, .privacy_statement, .about_section, .description, .obj_issue_toc, .obj_issue_toc .section),
body.josi-light-mode :is(.cmp_breadcrumbs, .cmp_notification, .cmp_form, .submission_checklist, .section_policy, .author_guidelines, .privacy_statement, .about_section, .description, .obj_issue_toc, .obj_issue_toc .section),
body:has(#josi-theme-light:checked) :is(.cmp_breadcrumbs, .cmp_notification, .cmp_form, .submission_checklist, .section_policy, .author_guidelines, .privacy_statement, .about_section, .description, .obj_issue_toc, .obj_issue_toc .section) {
  background:
    radial-gradient(circle at 8% 12%, rgba(0, 212, 255, .08), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(240,250,255,.88)) !important;
  border-color: rgba(0, 180, 220, .18) !important;
  color: #102033 !important;
  box-shadow: none !important;
}

html.josi-light-mode body .cmp_notification,
html[data-josi-theme="light"] body .cmp_notification,
body.josi-light-mode .cmp_notification,
body:has(#josi-theme-light:checked) .cmp_notification {
  border: 1px solid rgba(0, 180, 220, .20) !important;
  border-radius: 18px !important;
  margin: 24px 0 !important;
  padding: 18px 22px !important;
}

html.josi-light-mode body .pkp_structure_main *,
html[data-josi-theme="light"] body .pkp_structure_main *,
body.josi-light-mode .pkp_structure_main *,
body:has(#josi-theme-light:checked) .pkp_structure_main * {
  text-shadow: none !important;
}

/* ==========================================================
   JOSI BREADCRUMB + LIGHT READABILITY FIX - ABSOLUTE FINAL
   Breadcrumb tidak melebar seperti oval besar, dan semua teks
   section internal tetap terbaca saat mode terang.
   ========================================================== */

.cmp_breadcrumbs,
.breadcrumbs,
html.josi-light-mode body .cmp_breadcrumbs,
html[data-josi-theme="light"] body .cmp_breadcrumbs,
body.josi-light-mode .cmp_breadcrumbs,
body:has(#josi-theme-light:checked) .cmp_breadcrumbs,
html.josi-light-mode body .breadcrumbs,
html[data-josi-theme="light"] body .breadcrumbs,
body.josi-light-mode .breadcrumbs,
body:has(#josi-theme-light:checked) .breadcrumbs {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(100%, 520px) !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 22px 0 !important;
  padding: 10px 16px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(232, 250, 255, .96), rgba(255, 255, 255, .92)) !important;
  border: 1px solid rgba(0, 180, 220, .24) !important;
  box-shadow: 0 10px 24px rgba(0, 73, 114, .08) !important;
  color: #102033 !important;
  line-height: 1.25 !important;
}

.cmp_breadcrumbs ol,
.cmp_breadcrumbs ul,
.breadcrumbs ol,
.breadcrumbs ul,
html.josi-light-mode body .cmp_breadcrumbs ol,
html[data-josi-theme="light"] body .cmp_breadcrumbs ol,
body.josi-light-mode .cmp_breadcrumbs ol,
body:has(#josi-theme-light:checked) .cmp_breadcrumbs ol {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.cmp_breadcrumbs li,
.breadcrumbs li,
.cmp_breadcrumbs a,
.breadcrumbs a,
.cmp_breadcrumbs .current,
.breadcrumbs .current,
html.josi-light-mode body .cmp_breadcrumbs li,
html.josi-light-mode body .cmp_breadcrumbs a,
html.josi-light-mode body .cmp_breadcrumbs .current,
html[data-josi-theme="light"] body .cmp_breadcrumbs li,
html[data-josi-theme="light"] body .cmp_breadcrumbs a,
html[data-josi-theme="light"] body .cmp_breadcrumbs .current,
body.josi-light-mode .cmp_breadcrumbs li,
body.josi-light-mode .cmp_breadcrumbs a,
body.josi-light-mode .cmp_breadcrumbs .current,
body:has(#josi-theme-light:checked) .cmp_breadcrumbs li,
body:has(#josi-theme-light:checked) .cmp_breadcrumbs a,
body:has(#josi-theme-light:checked) .cmp_breadcrumbs .current {
  color: #102033 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.cmp_breadcrumbs a,
.breadcrumbs a,
html.josi-light-mode body .cmp_breadcrumbs a,
html[data-josi-theme="light"] body .cmp_breadcrumbs a,
body.josi-light-mode .cmp_breadcrumbs a,
body:has(#josi-theme-light:checked) .cmp_breadcrumbs a {
  color: #075f86 !important;
}

.cmp_breadcrumbs li + li::before,
.breadcrumbs li + li::before,
html.josi-light-mode body .cmp_breadcrumbs li + li::before,
html[data-josi-theme="light"] body .cmp_breadcrumbs li + li::before,
body.josi-light-mode .cmp_breadcrumbs li + li::before,
body:has(#josi-theme-light:checked) .cmp_breadcrumbs li + li::before {
  color: #63788b !important;
  opacity: 1 !important;
}

html.josi-light-mode body .pkp_structure_main :is(p, li, span, div, dd, dt, label, legend, strong, em),
html[data-josi-theme="light"] body .pkp_structure_main :is(p, li, span, div, dd, dt, label, legend, strong, em),
body.josi-light-mode .pkp_structure_main :is(p, li, span, div, dd, dt, label, legend, strong, em),
body:has(#josi-theme-light:checked) .pkp_structure_main :is(p, li, span, div, dd, dt, label, legend, strong, em) {
  color: #20364a !important;
}

html.josi-light-mode body .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, .title, .heading),
html[data-josi-theme="light"] body .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, .title, .heading),
body.josi-light-mode .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, .title, .heading),
body:has(#josi-theme-light:checked) .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, .title, .heading) {
  color: #062a40 !important;
}

html.josi-light-mode body .pkp_structure_main a,
html[data-josi-theme="light"] body .pkp_structure_main a,
body.josi-light-mode .pkp_structure_main a,
body:has(#josi-theme-light:checked) .pkp_structure_main a {
  color: #075f86 !important;
}

html.josi-light-mode body :is(.cmp_notification, .cmp_form, .submission_checklist, .section_policy, .author_guidelines, .privacy_statement, .about_section, .description, .obj_issue_toc .section, .obj_issue_toc .sections .section),
html[data-josi-theme="light"] body :is(.cmp_notification, .cmp_form, .submission_checklist, .section_policy, .author_guidelines, .privacy_statement, .about_section, .description, .obj_issue_toc .section, .obj_issue_toc .sections .section),
body.josi-light-mode :is(.cmp_notification, .cmp_form, .submission_checklist, .section_policy, .author_guidelines, .privacy_statement, .about_section, .description, .obj_issue_toc .section, .obj_issue_toc .sections .section),
body:has(#josi-theme-light:checked) :is(.cmp_notification, .cmp_form, .submission_checklist, .section_policy, .author_guidelines, .privacy_statement, .about_section, .description, .obj_issue_toc .section, .obj_issue_toc .sections .section) {
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 250, 255, .90)) !important;
  color: #20364a !important;
}

/* ==========================================================
   JOSI LIGHT MODE ALL SECTIONS READABILITY - FINAL LOCK
   Semua halaman internal harus punya kanvas terang, bukan teks gelap
   di atas background gelap.
   ========================================================== */

html.josi-light-mode body .pkp_structure_main,
html[data-josi-theme="light"] body .pkp_structure_main,
body.josi-light-mode .pkp_structure_main,
body:has(#josi-theme-light:checked) .pkp_structure_main,
html.josi-light-mode body .pkp_structure_main > .page,
html[data-josi-theme="light"] body .pkp_structure_main > .page,
body.josi-light-mode .pkp_structure_main > .page,
body:has(#josi-theme-light:checked) .pkp_structure_main > .page,
html.josi-light-mode body :is(.page_archive, .page_issue_archive, .page_issue_current, .page_submissions, .page_about, .page_contact, .page_editorial_team, .page_search, .page_register, .page_login),
html[data-josi-theme="light"] body :is(.page_archive, .page_issue_archive, .page_issue_current, .page_submissions, .page_about, .page_contact, .page_editorial_team, .page_search, .page_register, .page_login),
body.josi-light-mode :is(.page_archive, .page_issue_archive, .page_issue_current, .page_submissions, .page_about, .page_contact, .page_editorial_team, .page_search, .page_register, .page_login),
body:has(#josi-theme-light:checked) :is(.page_archive, .page_issue_archive, .page_issue_current, .page_submissions, .page_about, .page_contact, .page_editorial_team, .page_search, .page_register, .page_login) {
  background:
    radial-gradient(circle at 8% 10%, rgba(0, 212, 255, .09), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eefaff 100%) !important;
  color: #102033 !important;
}

html.josi-light-mode body .pkp_structure_main > .page,
html[data-josi-theme="light"] body .pkp_structure_main > .page,
body.josi-light-mode .pkp_structure_main > .page,
body:has(#josi-theme-light:checked) .pkp_structure_main > .page {
  border-radius: 22px !important;
  padding: 28px !important;
}

html.josi-light-mode body .pkp_structure_main :is(section, article, .section, .sections, .item, .content, .description, .cmp_notification, .obj_issue_toc, .obj_issue_summary, .obj_article_summary, .cmp_article_list > li, .sub_item, .submission_checklist, .privacy_statement, .author_guidelines, .section_policy),
html[data-josi-theme="light"] body .pkp_structure_main :is(section, article, .section, .sections, .item, .content, .description, .cmp_notification, .obj_issue_toc, .obj_issue_summary, .obj_article_summary, .cmp_article_list > li, .sub_item, .submission_checklist, .privacy_statement, .author_guidelines, .section_policy),
body.josi-light-mode .pkp_structure_main :is(section, article, .section, .sections, .item, .content, .description, .cmp_notification, .obj_issue_toc, .obj_issue_summary, .obj_article_summary, .cmp_article_list > li, .sub_item, .submission_checklist, .privacy_statement, .author_guidelines, .section_policy),
body:has(#josi-theme-light:checked) .pkp_structure_main :is(section, article, .section, .sections, .item, .content, .description, .cmp_notification, .obj_issue_toc, .obj_issue_summary, .obj_article_summary, .cmp_article_list > li, .sub_item, .submission_checklist, .privacy_statement, .author_guidelines, .section_policy) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,251,255,.94)) !important;
  border-color: rgba(0, 180, 220, .18) !important;
  color: #20364a !important;
}

html.josi-light-mode body .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, p, li, span, div, dd, dt, label, legend, strong, em, small),
html[data-josi-theme="light"] body .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, p, li, span, div, dd, dt, label, legend, strong, em, small),
body.josi-light-mode .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, p, li, span, div, dd, dt, label, legend, strong, em, small),
body:has(#josi-theme-light:checked) .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, p, li, span, div, dd, dt, label, legend, strong, em, small) {
  color: #20364a !important;
  text-shadow: none !important;
}

html.josi-light-mode body .pkp_structure_main :is(h1, h2, h3, h4, h5, h6),
html[data-josi-theme="light"] body .pkp_structure_main :is(h1, h2, h3, h4, h5, h6),
body.josi-light-mode .pkp_structure_main :is(h1, h2, h3, h4, h5, h6),
body:has(#josi-theme-light:checked) .pkp_structure_main :is(h1, h2, h3, h4, h5, h6) {
  color: #062a40 !important;
}

html.josi-light-mode body .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, p, li, span):not(.fa):not([class*="fa-"]),
html[data-josi-theme="light"] body .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, p, li, span):not(.fa):not([class*="fa-"]),
body.josi-light-mode .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, p, li, span):not(.fa):not([class*="fa-"]),
body:has(#josi-theme-light:checked) .pkp_structure_main :is(h1, h2, h3, h4, h5, h6, p, li, span):not(.fa):not([class*="fa-"]) {
  background-color: transparent !important;
  background-image: none !important;
}

html.josi-light-mode body .pkp_structure_main a,
html[data-josi-theme="light"] body .pkp_structure_main a,
body.josi-light-mode .pkp_structure_main a,
body:has(#josi-theme-light:checked) .pkp_structure_main a {
  color: #006b92 !important;
  text-decoration-color: rgba(0, 107, 146, .55) !important;
}

/* ==========================================================
   JOSI DARK MODE BREADCRUMB READABILITY - ABSOLUTE FINAL
   Breadcrumb mode gelap memakai panel gelap dan teks kontras.
   ========================================================== */

html.josi-dark-mode body .cmp_breadcrumbs,
html[data-josi-theme="dark"] body .cmp_breadcrumbs,
body.josi-dark-mode .cmp_breadcrumbs,
body:has(#josi-theme-dark:checked) .cmp_breadcrumbs,
html.josi-dark-mode body .breadcrumbs,
html[data-josi-theme="dark"] body .breadcrumbs,
body.josi-dark-mode .breadcrumbs,
body:has(#josi-theme-dark:checked) .breadcrumbs {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(100%, 520px) !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 22px 0 !important;
  padding: 10px 16px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(3, 17, 31, .96), rgba(8, 37, 58, .92)) !important;
  border: 1px solid rgba(0, 212, 255, .36) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(255,255,255,.05) inset !important;
  color: #f2fbff !important;
  line-height: 1.25 !important;
}

html.josi-dark-mode body .cmp_breadcrumbs ol,
html[data-josi-theme="dark"] body .cmp_breadcrumbs ol,
body.josi-dark-mode .cmp_breadcrumbs ol,
body:has(#josi-theme-dark:checked) .cmp_breadcrumbs ol,
html.josi-dark-mode body .cmp_breadcrumbs ul,
html[data-josi-theme="dark"] body .cmp_breadcrumbs ul,
body.josi-dark-mode .cmp_breadcrumbs ul,
body:has(#josi-theme-dark:checked) .cmp_breadcrumbs ul,
html.josi-dark-mode body .breadcrumbs ol,
html[data-josi-theme="dark"] body .breadcrumbs ol,
body.josi-dark-mode .breadcrumbs ol,
body:has(#josi-theme-dark:checked) .breadcrumbs ol,
html.josi-dark-mode body .breadcrumbs ul,
html[data-josi-theme="dark"] body .breadcrumbs ul,
body.josi-dark-mode .breadcrumbs ul,
body:has(#josi-theme-dark:checked) .breadcrumbs ul {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.josi-dark-mode body .cmp_breadcrumbs :is(li, span, .current),
html[data-josi-theme="dark"] body .cmp_breadcrumbs :is(li, span, .current),
body.josi-dark-mode .cmp_breadcrumbs :is(li, span, .current),
body:has(#josi-theme-dark:checked) .cmp_breadcrumbs :is(li, span, .current),
html.josi-dark-mode body .breadcrumbs :is(li, span, .current),
html[data-josi-theme="dark"] body .breadcrumbs :is(li, span, .current),
body.josi-dark-mode .breadcrumbs :is(li, span, .current),
body:has(#josi-theme-dark:checked) .breadcrumbs :is(li, span, .current) {
  color: #f2fbff !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.josi-dark-mode body .cmp_breadcrumbs a,
html[data-josi-theme="dark"] body .cmp_breadcrumbs a,
body.josi-dark-mode .cmp_breadcrumbs a,
body:has(#josi-theme-dark:checked) .cmp_breadcrumbs a,
html.josi-dark-mode body .breadcrumbs a,
html[data-josi-theme="dark"] body .breadcrumbs a,
body.josi-dark-mode .breadcrumbs a,
body:has(#josi-theme-dark:checked) .breadcrumbs a {
  color: #6eefff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

html.josi-dark-mode body .cmp_breadcrumbs li + li::before,
html[data-josi-theme="dark"] body .cmp_breadcrumbs li + li::before,
body.josi-dark-mode .cmp_breadcrumbs li + li::before,
body:has(#josi-theme-dark:checked) .cmp_breadcrumbs li + li::before,
html.josi-dark-mode body .breadcrumbs li + li::before,
html[data-josi-theme="dark"] body .breadcrumbs li + li::before,
body.josi-dark-mode .breadcrumbs li + li::before,
body:has(#josi-theme-dark:checked) .breadcrumbs li + li::before {
  color: rgba(242, 251, 255, .72) !important;
  opacity: 1 !important;
}

/* ==========================================================
   JOSI HEADER IMAGE BACKGROUND - FINAL OVERRIDE
   Banner PNG asli menjadi background navbar. Animasi/pola lama
   pada header dimatikan agar gambar tampil bersih.
   ========================================================== */

.pkp_structure_head {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

.pkp_structure_head::before,
.pkp_head_wrapper::before,
.pkp_head_wrapper::after,
.pkp_site_name > a::before,
.pkp_site_name > a::after,
.pkp_site_name > a.is_text::before,
.pkp_site_name > a.is_text::after,
.pkp_site_name a.is_text::before,
.pkp_site_name a.is_text::after,
.pkp_site_name_wrapper .pkp_site_name > a::before,
.pkp_site_name_wrapper .pkp_site_name > a::after,
.pkp_site_name_wrapper .pkp_site_name > a.is_text::before,
.pkp_site_name_wrapper .pkp_site_name > a.is_text::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.pkp_head_wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 300px !important;
  padding: 0 44px 12px !important;
  overflow: visible !important;
  border-radius: 44px !important;
  background:
    linear-gradient(180deg, rgba(1, 12, 24, .02), rgba(1, 12, 24, .10)),
    url("https://lh3.googleusercontent.com/d/1DV20nOcojJq13ogRrHQcIJpn99pBL0hY=w2048") center top / cover no-repeat !important;
  border: 1px solid rgba(0, 212, 255, .45) !important;
  box-shadow:
    0 20px 55px rgba(0, 25, 60, .30),
    0 0 0 1px rgba(255, 255, 255, .08) inset !important;
}

.pkp_site_name {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.pkp_site_name_wrapper {
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.pkp_site_name_wrapper .pkp_site_name {
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  z-index: 2147483646 !important;
  display: block !important;
  width: 44% !important;
  min-width: 360px !important;
  max-width: 780px !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

.pkp_site_name > a,
.pkp_site_name .is_text,
.pkp_site_name img {
  opacity: 0 !important;
  text-shadow: none !important;
}

.pkp_site_name_wrapper .pkp_site_name > a {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  opacity: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.pkp_site_name_wrapper:has(.pkp_site_name:hover) + .pkp_site_nav_menu .pkp_navigation_primary_wrapper::before,
.pkp_site_name_wrapper:has(.pkp_site_name:focus-within) + .pkp_site_nav_menu .pkp_navigation_primary_wrapper::before {
  color: #d8fbff !important;
  text-shadow:
    0 0 12px rgba(130, 245, 255, .90),
    0 3px 12px rgba(0, 20, 45, .65) !important;
}

.pkp_navigation_primary_wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  min-height: 58px !important;
  padding: 0 24px !important;
  background:
    linear-gradient(90deg, rgba(0, 119, 255, .90), rgba(0, 194, 232, .74), rgba(28, 162, 132, .72)) !important;
  border: 1px solid rgba(128, 244, 255, .38) !important;
  box-shadow:
    0 16px 38px rgba(0, 22, 58, .30),
    0 0 0 1px rgba(255, 255, 255, .10) inset !important;
  animation: none !important;
}

.pkp_navigation_primary_wrapper::before {
  content: "Journal of Synaptic Intelligence: Electronics and Informatics Convergence" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 2 !important;
  display: block !important;
  width: 44% !important;
  min-width: 360px !important;
  max-width: 780px !important;
  overflow: hidden !important;
  color: #9ef4ff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: 0 0 10px rgba(63, 220, 255, .70), 0 3px 12px rgba(0, 20, 45, .65) !important;
  text-overflow: ellipsis !important;
  transform: translate(-50%, -50%) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.pkp_navigation_primary_wrapper:has(.josi_nav_journal_title)::before {
  content: none !important;
  display: none !important;
}

.josi_nav_journal_title {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  order: initial !important;
  flex: none !important;
  width: 44% !important;
  min-width: 360px !important;
  display: block !important;
  max-width: 780px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #9ef4ff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: 0 0 10px rgba(63, 220, 255, .70), 0 3px 12px rgba(0, 20, 45, .65) !important;
  text-overflow: ellipsis !important;
  transform: translate(-50%, -50%) !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.josi_nav_journal_title:hover,
.josi_nav_journal_title:focus {
  color: #d8fbff !important;
  text-decoration: none !important;
}

.pkp_navigation_primary {
  order: 1 !important;
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: max-content !important;
  align-self: center !important;
}

.pkp_navigation_search_wrapper {
  order: 3 !important;
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin-left: auto !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li.josi-user-nav-item > a,
.pkp_navigation_search_wrapper a,
.pkp_search,
.pkp_search_desktop {
  min-height: 36px !important;
  height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li.josi-user-nav-item > a {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.pkp_navigation_search_wrapper {
  flex-basis: 168px !important;
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_search_wrapper a,
.pkp_search {
  text-shadow: none !important;
  animation: none !important;
}

@media (max-width: 768px) {
  .pkp_head_wrapper {
    min-height: 220px !important;
    padding: 0 14px 10px !important;
    border-radius: 28px !important;
    background-position: center top !important;
  }

  .pkp_site_name {
    min-height: 0 !important;
  }

  .pkp_site_name_wrapper .pkp_site_name {
    position: static !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .pkp_navigation_primary_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 12px !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
  }

  .pkp_navigation_primary_wrapper::before {
    position: static !important;
    order: 1 !important;
    flex: 1 0 100% !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
    text-align: center !important;
    transform: none !important;
  }

  .josi_nav_journal_title {
    position: static !important;
    order: 1 !important;
    flex: 1 0 100% !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
    text-align: center !important;
    transform: none !important;
  }

  .pkp_navigation_primary {
    order: 2 !important;
  }

  .pkp_navigation_search_wrapper {
    order: 3 !important;
  }
}

/* ==========================================================
   JOSI FOOTER FINAL - ROUNDED GLASS PANEL
   ========================================================== */

html.josi-journal-page .pkp_structure_footer_wrapper {
  position: relative !important;
  display: block !important;
  width: calc(100% - 60px) !important;
  max-width: none !important;
  min-height: 300px !important;
  margin: 42px auto 0 !important;
  padding: 34px 46px !important;
  overflow: hidden !important;
  border-radius: 56px 56px 0 0 !important;
  border: 1px solid rgba(70, 218, 255, .34) !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 224, 255, .13), transparent 27%),
    radial-gradient(circle at 92% 22%, rgba(91, 62, 210, .18), transparent 30%),
    linear-gradient(105deg, rgba(2, 55, 76, .98) 0%, rgba(2, 22, 43, .99) 47%, rgba(25, 28, 88, .98) 100%) !important;
  box-shadow:
    0 -24px 58px rgba(0, 33, 70, .18),
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 0 42px rgba(0, 205, 255, .10) inset !important;
  color: #eafbff !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(rgba(120, 220, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 220, 255, .045) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: .18 !important;
  pointer-events: none !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper::after {
  content: "OJS / PKP" !important;
  position: absolute !important;
  right: 42px !important;
  bottom: 22px !important;
  top: auto !important;
  z-index: 0 !important;
  color: rgba(205, 238, 255, .13) !important;
  font-size: clamp(18px, 1.8vw, 30px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

html.josi-journal-page .josi-footer-panel {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

html.josi-journal-page .josi-footer-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

html.josi-journal-page .josi-footer-label {
  margin: 0 0 6px !important;
  color: #baf7ff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

html.josi-journal-page .josi-footer-info h2 {
  margin: 0 0 14px !important;
  color: #ffffff !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 18px rgba(64, 220, 255, .30) !important;
}

html.josi-journal-page .josi-footer-address {
  max-width: 780px !important;
  margin: 0 !important;
  color: rgba(245, 253, 255, .94) !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.46 !important;
}

html.josi-journal-page .josi-footer-address strong {
  color: #ffffff !important;
}

html.josi-journal-page .josi-footer-contact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

html.josi-journal-page .josi-footer-contact-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 26px rgba(0, 20, 44, .18) !important;
}

html.josi-journal-page .josi-footer-contact-btn:hover,
html.josi-journal-page .josi-footer-contact-btn:focus {
  transform: translateY(-1px) !important;
  text-decoration: none !important;
  filter: brightness(1.08) !important;
}

html.josi-journal-page .josi-footer-contact-btn.is-whatsapp {
  background: linear-gradient(135deg, rgba(37, 211, 102, .95), rgba(8, 151, 84, .92)) !important;
}

html.josi-journal-page .josi-footer-contact-btn.is-email {
  background: linear-gradient(135deg, rgba(0, 169, 255, .95), rgba(41, 92, 210, .92)) !important;
}

html.josi-journal-page .josi-footer-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .20) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html.josi-journal-page .josi-footer-icon svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
}

html.josi-journal-page .josi-footer-map {
  min-height: 215px !important;
  max-height: 240px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(147, 239, 255, .24) !important;
  background: rgba(1, 17, 35, .58) !important;
  box-shadow:
    0 20px 45px rgba(0, 15, 42, .24),
    0 0 0 1px rgba(255, 255, 255, .06) inset !important;
}

html.josi-journal-page .josi-footer-map iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 215px !important;
  border: 0 !important;
  filter: saturate(1.05) contrast(1.03) !important;
}

html.josi-journal-page .pkp_structure_footer,
html.josi-journal-page .pkp_footer_content,
html.josi-journal-page .pkp_structure_footer_wrapper > * {
  position: relative !important;
  z-index: 1 !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper a {
  color: #d9fbff !important;
  text-decoration: none !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper a:hover,
html.josi-journal-page .pkp_structure_footer_wrapper a:focus {
  color: #ffffff !important;
  text-decoration: underline !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper p,
html.josi-journal-page .pkp_structure_footer_wrapper li,
html.josi-journal-page .pkp_structure_footer_wrapper span {
  color: rgba(245, 253, 255, .94) !important;
}

html.josi-journal-page .pkp_brand_footer,
html.josi-journal-page .pkp_brand_footer img {
  opacity: .18 !important;
  filter: grayscale(1) contrast(1.08) !important;
}

@media (max-width: 768px) {
  html.josi-journal-page .pkp_structure_footer_wrapper {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    margin-top: 28px !important;
    padding: 30px 22px !important;
    border-radius: 34px 34px 0 0 !important;
  }

  html.josi-journal-page .pkp_structure_footer_wrapper::after {
    right: 22px !important;
    bottom: 16px !important;
    top: auto !important;
    font-size: 18px !important;
  }

  html.josi-journal-page .josi-footer-panel {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  html.josi-journal-page .josi-footer-info h2 {
    font-size: 24px !important;
  }

  html.josi-journal-page .josi-footer-address {
    font-size: 14px !important;
  }

  html.josi-journal-page .josi-footer-contact {
    gap: 10px !important;
  }

  html.josi-journal-page .josi-footer-contact-btn {
    flex: 1 1 150px !important;
  }

  html.josi-journal-page .josi-footer-map,
  html.josi-journal-page .josi-footer-map iframe {
    min-height: 220px !important;
  }
}

/* ==========================================================
   JOSI FOOTER READABILITY FIX - HOMEPAGE OVERRIDE
   ========================================================== */

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-panel,
html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-panel *,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-panel,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-panel * {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-label,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-label {
  color: #c8f8ff !important;
  -webkit-text-fill-color: #c8f8ff !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-info h2,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-info h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, .42),
    0 0 18px rgba(64, 220, 255, .34) !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-address,
html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-address *,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-address,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-address * {
  color: rgba(255, 255, 255, .95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .95) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .32) !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-address strong,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-address strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-contact-btn,
html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-contact-btn *,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-contact-btn,
html.josi-journal-page body.pkp_page_index .pkp_structure_footer_wrapper .josi-footer-contact-btn * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================
   JOSI TIMELINE IMAGE REPLACEMENT
   ========================================================== */

html.josi-journal-page .josi-timeline-native.is-image-timeline {
  max-width: 100% !important;
  margin: 36px auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.josi-journal-page .josi-timeline-image-frame {
  display: block !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(104, 238, 255, .30) !important;
  background: #031226 !important;
  box-shadow:
    0 24px 58px rgba(0, 28, 66, .22),
    0 0 0 1px rgba(255, 255, 255, .06) inset !important;
}

html.josi-journal-page .josi-timeline-image-frame img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2172 / 724 !important;
  object-fit: cover !important;
}

@media (max-width: 900px) {
  html.josi-journal-page .josi-timeline-native.is-image-timeline {
    margin: 28px auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.josi-journal-page .josi-timeline-image-frame {
    min-width: 920px !important;
    border-radius: 22px !important;
  }
}

/* ==========================================================
   JOSI PRIMARY MENU FINAL ITEMS
   Menu utama: Home, About, Login, Register, Search, Current, Archives.
   ========================================================== */

html.josi-journal-page.josi-primary-nav-ready #navigationPrimary,
html.josi-journal-page.josi-primary-nav-ready .pkp_navigation_primary,
body.josi-journal-page #navigationPrimary[data-josi-primary-ready="true"],
body.josi-journal-page .pkp_navigation_primary[data-josi-primary-ready="true"] {
  flex: 0 1 auto !important;
  max-width: clamp(620px, 51vw, 940px) !important;
  gap: clamp(8px, .78vw, 18px) !important;
}

html.josi-journal-page.josi-primary-nav-ready #navigationPrimary > li > a,
html.josi-journal-page.josi-primary-nav-ready .pkp_navigation_primary > li > a,
body.josi-journal-page #navigationPrimary[data-josi-primary-ready="true"] > li > a,
body.josi-journal-page .pkp_navigation_primary[data-josi-primary-ready="true"] > li > a {
  min-height: 34px !important;
  padding: 5px clamp(4px, .45vw, 8px) !important;
  font-size: clamp(12px, .78vw, 15px) !important;
  font-weight: 900 !important;
}

html.josi-journal-page.josi-primary-nav-ready .josi_nav_journal_title,
body.josi-journal-page #navigationPrimary[data-josi-primary-ready="true"] ~ .josi_nav_journal_title {
  flex: 1 1 260px !important;
  max-width: clamp(250px, 28vw, 560px) !important;
  font-size: clamp(11px, .76vw, 15px) !important;
}

html.josi-journal-page.josi-primary-nav-ready .pkp_navigation_search_wrapper,
body.josi-journal-page #navigationPrimary[data-josi-primary-ready="true"] ~ .pkp_navigation_search_wrapper {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.josi-journal-page.josi-primary-nav-ready #navigationUserWrapper,
html.josi-journal-page.josi-primary-nav-ready .pkp_navigation_user_wrapper,
body.josi-journal-page #navigationPrimary[data-josi-primary-ready="true"] ~ #navigationUserWrapper,
body.josi-journal-page #navigationPrimary[data-josi-primary-ready="true"] ~ .pkp_navigation_user_wrapper {
  left: auto !important;
  right: clamp(28px, 3vw, 54px) !important;
  bottom: 26px !important;
}

@media (max-width: 1200px) {
  html.josi-journal-page.josi-primary-nav-ready #navigationPrimary,
  html.josi-journal-page.josi-primary-nav-ready .pkp_navigation_primary,
  body.josi-journal-page #navigationPrimary[data-josi-primary-ready="true"],
  body.josi-journal-page .pkp_navigation_primary[data-josi-primary-ready="true"] {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  html.josi-journal-page.josi-primary-nav-ready .pkp_navigation_primary_wrapper,
  body.josi-journal-page .pkp_navigation_primary_wrapper:has(#navigationPrimary[data-josi-primary-ready="true"]) {
    height: auto !important;
    min-height: 52px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}


/* ==========================================================
   JOSI QUICK MENU RIGHT SIDEBAR THEME FIX v3
   - Posisi Quick Menu dipindahkan ke sisi kanan seperti contoh JOIV
   - Warna, glass effect, glow, dan radius disesuaikan dengan tema JOSI
   - Tetap bekerja sebagai submenu About asli OJS
   ========================================================== */
html.josi-journal-page,
body.josi-journal-page {
  --josi-quick-top: 132px;
  --josi-quick-right: 24px;
  --josi-quick-width: 330px;
}

.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
#navigationPrimary,
.pkp_navigation_primary,
.pkp_navigation_primary > li,
.pkp_nav_list,
.pkp_nav_list > li {
  overflow: visible !important;
}

#navigationPrimary > li.josi-quick-menu-enabled,
.pkp_navigation_primary > li.josi-quick-menu-enabled,
#navigationPrimary > li:nth-child(3),
.pkp_navigation_primary > li:nth-child(3) {
  position: relative !important;
}

#navigationPrimary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
.pkp_navigation_primary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
#navigationPrimary ul.josi-quick-menu-dropdown,
.pkp_navigation_primary ul.josi-quick-menu-dropdown,
#navigationPrimary > li > a[href*="about"] + ul,
.pkp_navigation_primary > li > a[href*="about"] + ul,
#navigationPrimary > li:nth-child(3) > ul,
.pkp_navigation_primary > li:nth-child(3) > ul {
  position: fixed !important;
  top: var(--josi-quick-top, 132px) !important;
  right: var(--josi-quick-right, 24px) !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 0 !important;
  width: var(--josi-quick-width, 330px) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - var(--josi-quick-top, 132px) - 24px) !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  box-sizing: border-box !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,212,255,.20), transparent 35%),
    radial-gradient(circle at 92% 8%, rgba(124,60,255,.28), transparent 36%),
    linear-gradient(145deg, rgba(3,17,31,.96), rgba(5,38,64,.94) 55%, rgba(17,12,58,.94)) !important;
  border: 1px solid rgba(0,212,255,.40) !important;
  box-shadow:
    0 26px 70px rgba(0, 20, 48, .46),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 32px rgba(0,212,255,.15) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
  list-style: none !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  z-index: 2147483600 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(.985) !important;
  transform-origin: top right !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

#navigationPrimary ul.josi-quick-menu-dropdown::before,
.pkp_navigation_primary ul.josi-quick-menu-dropdown::before,
#navigationPrimary > li > a[href*="about"] + ul::before,
.pkp_navigation_primary > li > a[href*="about"] + ul::before,
#navigationPrimary > li:nth-child(3) > ul::before,
.pkp_navigation_primary > li:nth-child(3) > ul::before {
  content: "QUICK MENU" !important;
  display: block !important;
  padding: 15px 18px 14px !important;
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background:
    linear-gradient(90deg, rgba(0,119,255,.92), rgba(0,212,255,.66), rgba(34,246,167,.42)) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 21px 21px 0 0 !important;
  text-shadow: 0 0 14px rgba(0,212,255,.72) !important;
  box-shadow: 0 10px 28px rgba(0,119,255,.16) !important;
}

#navigationPrimary ul.josi-quick-menu-dropdown > li,
.pkp_navigation_primary ul.josi-quick-menu-dropdown > li,
#navigationPrimary > li > a[href*="about"] + ul > li,
.pkp_navigation_primary > li > a[href*="about"] + ul > li,
#navigationPrimary > li:nth-child(3) > ul > li,
.pkp_navigation_primary > li:nth-child(3) > ul > li {
  position: relative !important;
  display: block !important;
  width: auto !important;
  margin: 0 10px !important;
  padding: 0 !important;
  background: rgba(255,255,255,.045) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,212,255,.18) !important;
  box-shadow: none !important;
  list-style: none !important;
}

#navigationPrimary ul.josi-quick-menu-dropdown > li:first-of-type,
.pkp_navigation_primary ul.josi-quick-menu-dropdown > li:first-of-type,
#navigationPrimary > li > a[href*="about"] + ul > li:first-of-type,
.pkp_navigation_primary > li > a[href*="about"] + ul > li:first-of-type,
#navigationPrimary > li:nth-child(3) > ul > li:first-of-type,
.pkp_navigation_primary > li:nth-child(3) > ul > li:first-of-type {
  border-radius: 14px 14px 0 0 !important;
}

#navigationPrimary ul.josi-quick-menu-dropdown > li:last-child,
.pkp_navigation_primary ul.josi-quick-menu-dropdown > li:last-child,
#navigationPrimary > li > a[href*="about"] + ul > li:last-child,
.pkp_navigation_primary > li > a[href*="about"] + ul > li:last-child,
#navigationPrimary > li:nth-child(3) > ul > li:last-child,
.pkp_navigation_primary > li:nth-child(3) > ul > li:last-child {
  border-bottom: 0 !important;
  border-radius: 0 0 14px 14px !important;
}

#navigationPrimary ul.josi-quick-menu-dropdown > li::before,
.pkp_navigation_primary ul.josi-quick-menu-dropdown > li::before,
#navigationPrimary > li > a[href*="about"] + ul > li::before,
.pkp_navigation_primary > li > a[href*="about"] + ul > li::before,
#navigationPrimary > li:nth-child(3) > ul > li::before,
.pkp_navigation_primary > li:nth-child(3) > ul > li::before {
  content: "»" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #27ecff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 10px rgba(0,212,255,.58) !important;
  z-index: 2 !important;
}

#navigationPrimary ul.josi-quick-menu-dropdown > li > a,
.pkp_navigation_primary ul.josi-quick-menu-dropdown > li > a,
#navigationPrimary > li > a[href*="about"] + ul > li > a,
.pkp_navigation_primary > li > a[href*="about"] + ul > li > a,
#navigationPrimary > li:nth-child(3) > ul > li > a,
.pkp_navigation_primary > li:nth-child(3) > ul > li > a {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 13px 15px 13px 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #dffcff !important;
  -webkit-text-fill-color: #dffcff !important;
  font-size: 15px !important;
  line-height: 1.26 !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: 0 0 10px rgba(0,212,255,.22) !important;
}

#navigationPrimary ul.josi-quick-menu-dropdown > li > a:hover,
.pkp_navigation_primary ul.josi-quick-menu-dropdown > li > a:hover,
#navigationPrimary > li > a[href*="about"] + ul > li > a:hover,
.pkp_navigation_primary > li > a[href*="about"] + ul > li > a:hover,
#navigationPrimary > li:nth-child(3) > ul > li > a:hover,
.pkp_navigation_primary > li:nth-child(3) > ul > li > a:hover,
#navigationPrimary ul.josi-quick-menu-dropdown > li > a:focus,
.pkp_navigation_primary ul.josi-quick-menu-dropdown > li > a:focus {
  background:
    linear-gradient(90deg, rgba(0,212,255,.20), rgba(34,246,167,.12), rgba(124,60,255,.12)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateX(4px) !important;
  outline: none !important;
  box-shadow:
    inset 4px 0 0 #22f6a7,
    0 0 22px rgba(0,212,255,.12) !important;
}

#navigationPrimary > li.josi-quick-menu-enabled:hover > ul.josi-quick-menu-dropdown,
.pkp_navigation_primary > li.josi-quick-menu-enabled:hover > ul.josi-quick-menu-dropdown,
#navigationPrimary > li.josi-quick-menu-enabled:focus-within > ul.josi-quick-menu-dropdown,
.pkp_navigation_primary > li.josi-quick-menu-enabled:focus-within > ul.josi-quick-menu-dropdown,
#navigationPrimary ul.josi-quick-menu-dropdown.is-open,
.pkp_navigation_primary ul.josi-quick-menu-dropdown.is-open,
#navigationPrimary > li:nth-child(3):hover > ul,
.pkp_navigation_primary > li:nth-child(3):hover > ul,
#navigationPrimary > li:nth-child(3):focus-within > ul,
.pkp_navigation_primary > li:nth-child(3):focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

html.josi-light-mode #navigationPrimary ul.josi-quick-menu-dropdown,
html.josi-light-mode .pkp_navigation_primary ul.josi-quick-menu-dropdown,
body.josi-light-mode #navigationPrimary ul.josi-quick-menu-dropdown,
body.josi-light-mode .pkp_navigation_primary ul.josi-quick-menu-dropdown,
html[data-josi-theme="light"] #navigationPrimary ul.josi-quick-menu-dropdown,
html[data-josi-theme="light"] .pkp_navigation_primary ul.josi-quick-menu-dropdown {
  background:
    radial-gradient(circle at 15% 0%, rgba(0,212,255,.16), transparent 34%),
    radial-gradient(circle at 94% 10%, rgba(124,60,255,.12), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(239,251,255,.96)) !important;
  border-color: rgba(0,119,255,.26) !important;
  box-shadow:
    0 22px 60px rgba(0, 35, 78, .18),
    0 0 0 1px rgba(255,255,255,.78) inset !important;
}

html.josi-light-mode #navigationPrimary ul.josi-quick-menu-dropdown > li,
html.josi-light-mode .pkp_navigation_primary ul.josi-quick-menu-dropdown > li,
body.josi-light-mode #navigationPrimary ul.josi-quick-menu-dropdown > li,
body.josi-light-mode .pkp_navigation_primary ul.josi-quick-menu-dropdown > li,
html[data-josi-theme="light"] #navigationPrimary ul.josi-quick-menu-dropdown > li,
html[data-josi-theme="light"] .pkp_navigation_primary ul.josi-quick-menu-dropdown > li {
  background: rgba(255,255,255,.68) !important;
  border-bottom-color: rgba(0,119,255,.20) !important;
}

html.josi-light-mode #navigationPrimary ul.josi-quick-menu-dropdown > li > a,
html.josi-light-mode .pkp_navigation_primary ul.josi-quick-menu-dropdown > li > a,
body.josi-light-mode #navigationPrimary ul.josi-quick-menu-dropdown > li > a,
body.josi-light-mode .pkp_navigation_primary ul.josi-quick-menu-dropdown > li > a,
html[data-josi-theme="light"] #navigationPrimary ul.josi-quick-menu-dropdown > li > a,
html[data-josi-theme="light"] .pkp_navigation_primary ul.josi-quick-menu-dropdown > li > a {
  color: #075d8b !important;
  -webkit-text-fill-color: #075d8b !important;
  text-shadow: none !important;
}

@media (max-width: 900px) {
  html.josi-journal-page,
  body.josi-journal-page {
    --josi-quick-right: 12px;
    --josi-quick-width: calc(100vw - 24px);
  }

  #navigationPrimary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
  .pkp_navigation_primary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
  #navigationPrimary ul.josi-quick-menu-dropdown,
  .pkp_navigation_primary ul.josi-quick-menu-dropdown,
  #navigationPrimary > li > a[href*="about"] + ul,
  .pkp_navigation_primary > li > a[href*="about"] + ul,
  #navigationPrimary > li:nth-child(3) > ul,
  .pkp_navigation_primary > li:nth-child(3) > ul {
    top: var(--josi-quick-top, 104px) !important;
    right: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - var(--josi-quick-top, 104px) - 16px) !important;
    border-radius: 20px !important;
  }

  #navigationPrimary ul.josi-quick-menu-dropdown > li > a,
  .pkp_navigation_primary ul.josi-quick-menu-dropdown > li > a {
    font-size: 15px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU RIGHT OF ABOUT LOCK v8
   ========================================================== */

@media (min-width: 761px) {
  html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-v8"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-v9"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-follow-v11"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-fixed-static-v12"] {
    position: fixed !important;
    top: var(--josi-quick-lock-top, 120px) !important;
    left: var(--josi-quick-lock-left, calc(50vw + 470px)) !important;
    right: auto !important;
    width: 250px !important;
    max-width: 250px !important;
    max-height: calc(100vh - var(--josi-quick-lock-top, 120px) - 24px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    z-index: 2147483000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  #josiQuickMenuPanel.josi-quick-menu-standby .josi-quick-menu-heading {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
  }

  #josiQuickMenuPanel.josi-quick-menu-standby .josi-quick-menu-list {
    max-height: calc(100vh - var(--josi-quick-lock-top, 120px) - 92px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU ABSOLUTE PAGE POSITION FIX
   Supaya Quick Menu berada di kanan About, bukan mengikuti scroll.
   ========================================================== */

@media (min-width: 761px) {
  html.josi-journal-page body.pkp_page_index .pkp_structure_content,
  body.josi-journal-page.pkp_page_index .pkp_structure_content {
    position: relative !important;
    overflow: visible !important;
  }

  html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-v8"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-v9"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-follow-v11"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-fixed-static-v12"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-static-v13"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-inline-v14"],
  #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position="right-of-about-absolute-v15"] {
    position: absolute !important;
    top: var(--josi-quick-inline-top, 0px) !important;
    left: var(--josi-quick-inline-left, calc(100% - 266px)) !important;
    right: auto !important;
    width: 250px !important;
    max-width: 250px !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  html.josi-journal-page body.pkp_page_index .pkp_structure_content,
  body.josi-journal-page.pkp_page_index .pkp_structure_content {
    display: block !important;
    position: static !important;
  }

  html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 18px 0 24px !important;
  }
}

/* ==========================================================
   JOSI SECTIONED HOMEPAGE FINAL RESET
   Quick Menu baru berada di kolom section, bukan fixed/absolute.
   ========================================================== */

@media (min-width: 761px) {
  html.josi-journal-page body.pkp_page_index .pkp_structure_main,
  body.josi-journal-page.pkp_page_index .pkp_structure_main,
  body.pkp_page_index .pkp_structure_main {
    position: relative !important;
    overflow: visible !important;
  }

  html.josi-journal-page #josiAboutQuickRow #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiAboutQuickRow #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiAboutQuickRow #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiAboutQuickRow #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position],
  html.josi-journal-page #josiSectionedHome #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiSectionedHome #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiSectionedHome #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiSectionedHome #josiQuickMenuPanel.josi-quick-menu-standby[data-josi-position] {
    position: absolute !important;
    top: 42px !important;
    left: min(calc(50% + 255px), calc(100vw - 274px)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 250px !important;
    max-width: 250px !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #josiAboutQuickRow #josiQuickMenuPanel.josi-quick-menu-standby .josi-quick-menu-heading,
  #josiSectionedHome #josiQuickMenuPanel.josi-quick-menu-standby .josi-quick-menu-heading {
    position: static !important;
    top: auto !important;
  }

  #josiAboutQuickRow #josiQuickMenuPanel.josi-quick-menu-standby .josi-quick-menu-list,
  #josiSectionedHome #josiQuickMenuPanel.josi-quick-menu-standby .josi-quick-menu-list {
    max-height: none !important;
    overflow: visible !important;
  }

  html.josi-journal-page #josiSectionedHome .josi-theme-control,
  body.josi-journal-page #josiSectionedHome .josi-theme-control,
  #josiSectionedHome .josi-theme-control {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 24px auto 4px !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU DETACHED FROM NAV DROPDOWN - LAST OVERRIDE
   Quick Menu tidak lagi diambil dari dropdown/navbar.
   Yang tampil hanya panel standalone #josiQuickMenuPanel.
   ========================================================== */

html.josi-journal-page #navigationPrimary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
html.josi-journal-page .pkp_navigation_primary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
html.josi-journal-page #navigationPrimary ul.josi-quick-menu-dropdown,
html.josi-journal-page .pkp_navigation_primary ul.josi-quick-menu-dropdown,
html.josi-journal-page [data-josi-detached-dropdown="true"],
body.josi-journal-page #navigationPrimary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
body.josi-journal-page .pkp_navigation_primary > li.josi-quick-menu-enabled > ul.josi-quick-menu-dropdown,
body.josi-journal-page #navigationPrimary ul.josi-quick-menu-dropdown,
body.josi-journal-page .pkp_navigation_primary ul.josi-quick-menu-dropdown,
body.josi-journal-page [data-josi-detached-dropdown="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 761px) {
  html.josi-journal-page body.pkp_page_index .pkp_structure_main,
  body.josi-journal-page.pkp_page_index .pkp_structure_main,
  body.pkp_page_index .pkp_structure_main {
    position: relative !important;
    overflow: visible !important;
  }

  html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiQuickMenuPanel.josi-quick-menu-standby {
    position: absolute !important;
    top: 42px !important;
    left: min(calc(50% + 255px), calc(100vw - 274px)) !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    width: 250px !important;
    max-width: 250px !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 2147483500 !important;
  }
}

/* ==========================================================
   JOSI ABOUT + QUICK MENU ROW - ULTIMATE OVERRIDE
   Quick Menu keluar dari section gambar dan sejajar About asli.
   ========================================================== */

@media (min-width: 761px) {
  html.josi-journal-page .page_index_journal,
  body.josi-journal-page .page_index_journal,
  .page_index_journal {
    overflow: visible !important;
  }

  html.josi-journal-page #josiAboutQuickRow,
  body.josi-journal-page #josiAboutQuickRow,
  #josiAboutQuickRow {
    display: grid !important;
    grid-template-columns: minmax(0, 760px) 250px !important;
    gap: 48px !important;
    align-items: start !important;
    justify-content: center !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: 1180px !important;
    margin: 42px auto 28px !important;
    overflow: visible !important;
  }

  html.josi-journal-page #josiAboutQuickRow > :not(#josiQuickMenuPanel),
  body.josi-journal-page #josiAboutQuickRow > :not(#josiQuickMenuPanel),
  #josiAboutQuickRow > :not(#josiQuickMenuPanel) {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 !important;
  }

  html.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby {
    grid-column: 2 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    align-self: start !important;
    width: 250px !important;
    max-width: 250px !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
}

@media (max-width: 760px) {
  html.josi-journal-page #josiAboutQuickRow,
  body.josi-journal-page #josiAboutQuickRow,
  #josiAboutQuickRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: calc(100vw - 24px) !important;
    margin: 24px auto !important;
  }

  html.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  body.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
  #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby {
    grid-column: 1 !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 18px 0 24px !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU FINAL GUARD
   Jangan tampilkan Quick Menu jika belum berhasil masuk row About.
   ========================================================== */

html.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
body.josi-journal-page #josiQuickMenuPanel.josi-quick-menu-standby,
#josiQuickMenuPanel.josi-quick-menu-standby {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.josi-journal-page.josi-quick-ready #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
body.josi-journal-page #josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby,
#josiAboutQuickRow > #josiQuickMenuPanel.josi-quick-menu-standby {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* ==========================================================
   JOSI SECTION + THEME CONTROL RESTORE - FINAL OVERRIDE
   Section lama tetap tampil, tombol mode tidak ikut Quick Menu.
   ========================================================== */

#josiSectionedHome,
html.josi-journal-page #josiSectionedHome,
body.josi-journal-page #josiSectionedHome {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

#josiSectionedHome .josi-extra-sections {
  display: grid !important;
  gap: 28px !important;
  width: 100% !important;
}

#josiSectionedHome .josi-card,
html.josi-journal-page #josiSectionedHome .josi-card,
body.josi-journal-page #josiSectionedHome .josi-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}

#josi-current-issue-auto {
  display: none !important;
}

html.josi-current-ready #josi-current-issue-auto,
body.josi-journal-page #josi-current-issue-auto[data-josi-current-ready="true"],
#josi-current-issue-auto[data-josi-current-ready="true"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#josi-current-issue-auto > .current_issue,
#josi-current-issue-auto .current_issue.josi-current-issue-mounted,
.pkp_page_index #josi-current-issue-auto > .current_issue {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 34px 38px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(0, 212, 255, .20) !important;
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  box-shadow:
    0 18px 45px rgba(0, 73, 114, .08),
    0 0 0 1px rgba(255,255,255,.40) inset !important;
  overflow: hidden !important;
}

#josi-current-issue-auto > .current_issue::before,
#josi-current-issue-auto .current_issue.josi-current-issue-mounted::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  top: 0 !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0077ff, #00d4ff, #22f6a7, #7c3cff, #0077ff) !important;
  background-size: 240% 100% !important;
  animation: josiContentLine 7s linear infinite !important;
  opacity: .86 !important;
}

#josi-current-issue-auto .current_issue h2,
#josi-current-issue-auto .current_issue h3,
#josi-current-issue-auto .current_issue .title,
#josi-current-issue-auto .current_issue .title a {
  color: #062a40 !important;
  -webkit-text-fill-color: #062a40 !important;
  font-weight: 950 !important;
}

#josi-current-issue-auto .current_issue .read_more,
#josi-current-issue-auto .current_issue .published,
#josi-current-issue-auto .current_issue .description,
#josi-current-issue-auto .current_issue p,
#josi-current-issue-auto .current_issue li {
  color: #20364d !important;
  -webkit-text-fill-color: #20364d !important;
}

html[data-josi-theme="dark"] #josi-current-issue-auto > .current_issue,
html.josi-dark-mode #josi-current-issue-auto > .current_issue,
body.josi-dark-mode #josi-current-issue-auto > .current_issue {
  border-color: rgba(0, 212, 255, .26) !important;
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .16), transparent 30%),
    linear-gradient(135deg, rgba(3,17,31,.96), rgba(8,28,54,.94)) !important;
  box-shadow:
    0 22px 52px rgba(0,34,70,.30),
    0 0 0 1px rgba(255,255,255,.06) inset !important;
}

html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue h2,
html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue h3,
html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue .title,
html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue .title a,
html.josi-dark-mode #josi-current-issue-auto .current_issue h2,
html.josi-dark-mode #josi-current-issue-auto .current_issue h3,
html.josi-dark-mode #josi-current-issue-auto .current_issue .title,
html.josi-dark-mode #josi-current-issue-auto .current_issue .title a,
body.josi-dark-mode #josi-current-issue-auto .current_issue h2,
body.josi-dark-mode #josi-current-issue-auto .current_issue h3,
body.josi-dark-mode #josi-current-issue-auto .current_issue .title,
body.josi-dark-mode #josi-current-issue-auto .current_issue .title a {
  color: #eafcff !important;
  -webkit-text-fill-color: #eafcff !important;
}

html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue .read_more,
html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue .published,
html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue .description,
html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue p,
html[data-josi-theme="dark"] #josi-current-issue-auto .current_issue li,
html.josi-dark-mode #josi-current-issue-auto .current_issue .read_more,
html.josi-dark-mode #josi-current-issue-auto .current_issue .published,
html.josi-dark-mode #josi-current-issue-auto .current_issue .description,
html.josi-dark-mode #josi-current-issue-auto .current_issue p,
html.josi-dark-mode #josi-current-issue-auto .current_issue li,
body.josi-dark-mode #josi-current-issue-auto .current_issue .read_more,
body.josi-dark-mode #josi-current-issue-auto .current_issue .published,
body.josi-dark-mode #josi-current-issue-auto .current_issue .description,
body.josi-dark-mode #josi-current-issue-auto .current_issue p,
body.josi-dark-mode #josi-current-issue-auto .current_issue li {
  color: #d9f5ff !important;
  -webkit-text-fill-color: #d9f5ff !important;
}

#josiSectionedHome .josi-timeline-native,
#josiSectionedHome .josi-timeline-image-frame,
#josiSectionedHome .josi-timeline-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#josiSectionedHome .josi-timeline-image {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

#josiSectionedHome .josi-theme-control,
html.josi-journal-page #josiSectionedHome .josi-theme-control,
body.josi-journal-page #josiSectionedHome .josi-theme-control {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 2 !important;
  width: auto !important;
  min-width: 78px !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: none !important;
  margin: 24px auto 4px !important;
  padding: 4px !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  pointer-events: auto !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(9, 31, 49, 0.8), rgba(224, 248, 255, 0.86)) !important;
  box-shadow: 0 16px 34px rgba(5, 31, 49, 0.2) !important;
}

#josiSectionedHome .josi-theme-control input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#josiSectionedHome .josi-theme-control .josi-theme-choice,
html.josi-journal-page #josiSectionedHome .josi-theme-control .josi-theme-choice,
body.josi-journal-page #josiSectionedHome .josi-theme-control .josi-theme-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  color: #12324a !important;
  background: transparent !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

#josiSectionedHome .josi-theme-control input:checked + .josi-theme-choice,
#josiSectionedHome .josi-theme-control .josi-theme-choice.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d2035, #6e8798) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 8px 18px rgba(7, 20, 34, 0.22) !important;
}

#josiSectionedHome .josi-control-row,
html.josi-journal-page #josiSectionedHome .josi-control-row,
body.josi-journal-page #josiSectionedHome .josi-control-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 24px auto 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#josiSectionedHome .josi-control-row .josi-theme-control,
html.josi-journal-page #josiSectionedHome .josi-control-row .josi-theme-control,
body.josi-journal-page #josiSectionedHome .josi-control-row .josi-theme-control {
  margin: 0 !important;
}

#josiSectionedHome .josi-language-control,
html.josi-journal-page #josiSectionedHome .josi-language-control,
body.josi-journal-page #josiSectionedHome .josi-language-control {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  z-index: 2 !important;
  width: auto !important;
  min-width: 92px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 4px !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  pointer-events: auto !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(9, 31, 49, 0.8), rgba(224, 248, 255, 0.86)) !important;
  box-shadow: 0 16px 34px rgba(5, 31, 49, 0.2) !important;
}

#josiSectionedHome .josi-language-control input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#josiSectionedHome .josi-language-control .josi-language-choice,
html.josi-journal-page #josiSectionedHome .josi-language-control .josi-language-choice,
body.josi-journal-page #josiSectionedHome .josi-language-control .josi-language-choice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 32px !important;
  min-width: 38px !important;
  min-height: 32px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  color: #12324a !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

#josiSectionedHome .josi-language-control input:checked + .josi-language-choice,
#josiSectionedHome .josi-language-control .josi-language-choice.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d2035, #2ba6dc) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 8px 18px rgba(7, 20, 34, 0.22) !important;
}

@media (max-width: 520px) {
  #josiSectionedHome .josi-control-row,
  html.josi-journal-page #josiSectionedHome .josi-control-row,
  body.josi-journal-page #josiSectionedHome .josi-control-row {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 760px) {
  #josiSectionedHome,
  html.josi-journal-page #josiSectionedHome,
  body.josi-journal-page #josiSectionedHome {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
  }
}

/* ==========================================================
   JOSI ABOUT THE JOURNAL STATIC STYLE
   Patch ini harus berada di bawah CSS tema lama.
   ========================================================== */

body.pkp_page_index .homepage_about {
  display: none !important;
}

#josiStaticAboutJournal,
#josiStaticAboutJournal * {
  box-sizing: border-box !important;
}

#josiStaticAboutJournal {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: 1180px !important;
  margin: 42px auto 28px !important;
  color: #303030 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

#josiStaticAboutJournal .josi-static-about-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 820px) 250px !important;
  gap: 48px !important;
  align-items: start !important;
  justify-content: center !important;
}

#josiStaticAboutJournal .josi-static-about-main {
  min-width: 0 !important;
}

#josiStaticAboutJournal .josi-static-about-profile {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 26px !important;
  align-items: start !important;
  padding-top: 16px !important;
  border-top: 2px dotted rgba(0,0,0,.55) !important;
}

#josiStaticAboutJournal .josi-static-about-title {
  grid-column: 1 / -1 !important;
  margin: 0 0 12px !important;
  color: #303030 !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

#josiStaticAboutJournal .josi-static-about-table {
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: #eeeeee !important;
}

#josiStaticAboutJournal .josi-static-about-table dt,
#josiStaticAboutJournal .josi-static-about-table dd {
  margin: 0 !important;
  padding: 7px 10px !important;
  color: #333333 !important;
  font-size: 15px !important;
  line-height: 1.24 !important;
}

#josiStaticAboutJournal .josi-static-about-table dt {
  font-weight: 500 !important;
}

#josiStaticAboutJournal .josi-static-about-table dd {
  font-weight: 600 !important;
}

#josiStaticAboutJournal a {
  color: #6c89dc !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

#josiStaticAboutJournal .josi-static-about-badges {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 10px !important;
}

#josiStaticAboutJournal .josi-static-about-badge {
  min-height: 96px !important;
  padding: 13px 14px !important;
  background: #f7f7f7 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

#josiStaticAboutJournal .josi-static-about-badge strong {
  display: block !important;
  color: #303030 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

#josiStaticAboutJournal .josi-static-about-badge span {
  display: block !important;
  margin-top: 8px !important;
  color: #303030 !important;
  font-size: 14px !important;
  line-height: 1.18 !important;
}

#josiStaticAboutJournal .josi-static-about-cover {
  margin: 0 !important;
  position: relative !important;
  background: #242424 !important;
  overflow: hidden !important;
}

#josiStaticAboutJournal .josi-static-about-cover img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 470px !important;
  object-fit: cover !important;
  background: #242424 !important;
}

#josiStaticAboutJournal .josi-static-about-cover .josi-static-about-cover-back {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  opacity: 0 !important;
  transform: scale(1.015) !important;
  transition: opacity .28s ease, transform .28s ease !important;
  z-index: 2 !important;
}

#josiStaticAboutJournal .josi-static-about-cover:hover .josi-static-about-cover-back,
#josiStaticAboutJournal .josi-static-about-cover:focus-within .josi-static-about-cover-back {
  opacity: 1 !important;
  transform: scale(1) !important;
}

#josiStaticAboutJournal .josi-static-about-text {
  margin-top: 22px !important;
  color: #333333 !important;
  font-size: 16px !important;
  line-height: 1.38 !important;
  text-align: justify !important;
}

#josiStaticAboutJournal .josi-static-about-text p {
  margin: 0 0 16px !important;
}

#josiStaticQuickMenu {
  width: 250px !important;
  max-width: 250px !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,212,255,.20), transparent 35%),
    linear-gradient(145deg, rgba(3,17,31,.97), rgba(10,35,70,.97)) !important;
  border: 1px solid rgba(0,212,255,.36) !important;
  box-shadow: 0 22px 52px rgba(0,34,70,.24) !important;
}

#josiStaticQuickMenu h2 {
  margin: 0 0 8px !important;
  padding: 15px 18px 14px !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, rgba(0,119,255,.88), rgba(0,212,255,.38)) !important;
}

#josiStaticQuickMenu ul {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 10px !important;
  list-style: none !important;
}

#josiStaticQuickMenu li {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  min-height: 47px !important;
  border-bottom: 1px solid rgba(87,221,255,.18) !important;
  background: rgba(255,255,255,.035) !important;
}

#josiStaticQuickMenu li::before {
  content: "»" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  z-index: 2 !important;
  color: #27ecff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  transform: translateY(-50%) !important;
}

#josiStaticQuickMenu a {
  display: flex !important;
  align-items: center !important;
  min-height: 47px !important;
  padding: 0 12px 0 40px !important;
  color: #dffcff !important;
  -webkit-text-fill-color: #dffcff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

html.josi-dark-mode #josiStaticAboutJournal,
html[data-josi-theme="dark"] #josiStaticAboutJournal,
body.josi-dark-mode #josiStaticAboutJournal {
  color: #d6eef7 !important;
}

html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-title,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-title,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-title,
html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-text,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-text,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-text {
  color: #e8fbff !important;
}

#josiSectionedHome {
  width: min(820px, calc(100vw - 32px)) !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

@media (max-width: 900px) {
  #josiStaticAboutJournal {
    width: calc(100vw - 24px) !important;
    margin: 24px auto !important;
  }

  #josiStaticAboutJournal .josi-static-about-inner,
  #josiStaticAboutJournal .josi-static-about-profile,
  #josiStaticAboutJournal .josi-static-about-table,
  #josiStaticAboutJournal .josi-static-about-badges {
    grid-template-columns: 1fr !important;
  }

  #josiStaticAboutJournal .josi-static-about-title {
    font-size: 28px !important;
  }

  #josiStaticAboutJournal .josi-static-about-cover img {
    min-height: 0 !important;
  }

  #josiStaticQuickMenu {
    width: auto !important;
    max-width: none !important;
  }
}

/* ==========================================================
   JOSI STATIC QUICK MENU VISIBILITY GUARD
   Paksa Quick Menu statis tetap tampil meskipun wrapper OJS sempit.
   ========================================================== */

@media (min-width: 901px) {
  #josiStaticQuickMenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 300px !important;
    left: min(calc(50vw + 300px), calc(100vw - 290px)) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483000 !important;
    width: 250px !important;
    max-width: 250px !important;
  }

  #josiStaticAboutJournal .josi-static-about-inner {
    grid-template-columns: minmax(0, 820px) !important;
  }
}

@media (max-width: 900px) {
  #josiStaticQuickMenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 22px 0 0 !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU FINAL STATIC POSITION
   Quick Menu sejajar kanan About dan tidak fixed saat scroll.
   ========================================================== */

body.pkp_page_index .pkp_structure_content,
body.pkp_page_index .pkp_structure_main,
body.pkp_page_index .additional_content,
body.pkp_page_index #josiStaticAboutJournal {
  overflow: visible !important;
}

#josiStaticAboutJournal {
  position: relative !important;
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: 760px !important;
  margin: 42px auto 28px !important;
}

#josiStaticAboutJournal .josi-static-about-inner {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  overflow: visible !important;
}

#josiStaticAboutJournal .josi-static-about-main {
  width: 100% !important;
  max-width: 760px !important;
  overflow: hidden !important;
}

#josiStaticAboutJournal .josi-static-about-profile {
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 20px !important;
}

#josiStaticAboutJournal .josi-static-about-table {
  grid-template-columns: 130px minmax(0, 1fr) !important;
}

#josiStaticAboutJournal .josi-static-about-cover img {
  min-height: 0 !important;
  height: 370px !important;
  object-fit: cover !important;
}

@media (min-width: 1100px) {
  #josiStaticQuickMenu {
    --josi-static-quick-x: 58px;
    --josi-static-quick-y: 0px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: var(--josi-static-quick-y) !important;
    left: calc(100% + var(--josi-static-quick-x)) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    width: 250px !important;
    max-width: 250px !important;
    margin: 0 !important;
  }
}

@media (max-width: 1099px) {
  #josiStaticQuickMenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 24px 0 0 !important;
  }
}

@media (max-width: 760px) {
  #josiStaticAboutJournal {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
  }

  #josiStaticAboutJournal .josi-static-about-profile,
  #josiStaticAboutJournal .josi-static-about-table,
  #josiStaticAboutJournal .josi-static-about-badges {
    grid-template-columns: 1fr !important;
  }

  #josiStaticAboutJournal .josi-static-about-cover img {
    height: auto !important;
  }
}

/* ==========================================================
   JOSI ABOUT + QUICK MENU LIGHT/DARK FINAL COLOR LOCK
   ========================================================== */

#josiStaticAboutJournal,
html.josi-light-mode #josiStaticAboutJournal,
html[data-josi-theme="light"] #josiStaticAboutJournal,
body.josi-light-mode #josiStaticAboutJournal {
  color: #213449 !important;
}

#josiStaticAboutJournal .josi-static-about-title,
html.josi-light-mode #josiStaticAboutJournal .josi-static-about-title,
html[data-josi-theme="light"] #josiStaticAboutJournal .josi-static-about-title,
body.josi-light-mode #josiStaticAboutJournal .josi-static-about-title {
  color: #0b2b40 !important;
}

#josiStaticAboutJournal .josi-static-about-table,
html.josi-light-mode #josiStaticAboutJournal .josi-static-about-table,
html[data-josi-theme="light"] #josiStaticAboutJournal .josi-static-about-table,
body.josi-light-mode #josiStaticAboutJournal .josi-static-about-table {
  background: #eef4f8 !important;
  border: 1px solid rgba(10, 72, 105, .08) !important;
}

#josiStaticAboutJournal .josi-static-about-table dt,
html.josi-light-mode #josiStaticAboutJournal .josi-static-about-table dt,
html[data-josi-theme="light"] #josiStaticAboutJournal .josi-static-about-table dt,
body.josi-light-mode #josiStaticAboutJournal .josi-static-about-table dt {
  color: #355266 !important;
  -webkit-text-fill-color: #355266 !important;
  font-weight: 650 !important;
}

#josiStaticAboutJournal .josi-static-about-table dd,
html.josi-light-mode #josiStaticAboutJournal .josi-static-about-table dd,
html[data-josi-theme="light"] #josiStaticAboutJournal .josi-static-about-table dd,
body.josi-light-mode #josiStaticAboutJournal .josi-static-about-table dd,
#josiStaticAboutJournal .josi-static-about-table dd strong,
html.josi-light-mode #josiStaticAboutJournal .josi-static-about-table dd strong,
html[data-josi-theme="light"] #josiStaticAboutJournal .josi-static-about-table dd strong,
body.josi-light-mode #josiStaticAboutJournal .josi-static-about-table dd strong {
  color: #1b3044 !important;
  -webkit-text-fill-color: #1b3044 !important;
  font-weight: 850 !important;
}

#josiStaticAboutJournal a,
html.josi-light-mode #josiStaticAboutJournal a,
html[data-josi-theme="light"] #josiStaticAboutJournal a,
body.josi-light-mode #josiStaticAboutJournal a {
  color: #08749f !important;
  -webkit-text-fill-color: #08749f !important;
}

#josiStaticAboutJournal .josi-static-about-badge,
html.josi-light-mode #josiStaticAboutJournal .josi-static-about-badge,
html[data-josi-theme="light"] #josiStaticAboutJournal .josi-static-about-badge,
body.josi-light-mode #josiStaticAboutJournal .josi-static-about-badge {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(11, 74, 105, .12) !important;
}

#josiStaticAboutJournal .josi-static-about-badge strong,
html.josi-light-mode #josiStaticAboutJournal .josi-static-about-badge strong,
html[data-josi-theme="light"] #josiStaticAboutJournal .josi-static-about-badge strong,
body.josi-light-mode #josiStaticAboutJournal .josi-static-about-badge strong {
  color: #203040 !important;
  -webkit-text-fill-color: #203040 !important;
}

#josiStaticAboutJournal .josi-static-about-badge span,
html.josi-light-mode #josiStaticAboutJournal .josi-static-about-badge span,
html[data-josi-theme="light"] #josiStaticAboutJournal .josi-static-about-badge span,
body.josi-light-mode #josiStaticAboutJournal .josi-static-about-badge span {
  color: #426073 !important;
  -webkit-text-fill-color: #426073 !important;
}

#josiStaticQuickMenu,
html.josi-light-mode #josiStaticQuickMenu,
html[data-josi-theme="light"] #josiStaticQuickMenu,
body.josi-light-mode #josiStaticQuickMenu {
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 188, 224, .20), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(232,250,255,.96)) !important;
  border-color: rgba(0, 140, 190, .34) !important;
  box-shadow: 0 20px 46px rgba(0, 56, 84, .18) !important;
}

#josiStaticQuickMenu h2,
html.josi-light-mode #josiStaticQuickMenu h2,
html[data-josi-theme="light"] #josiStaticQuickMenu h2,
body.josi-light-mode #josiStaticQuickMenu h2 {
  color: #06334b !important;
  -webkit-text-fill-color: #06334b !important;
  background: linear-gradient(90deg, rgba(0, 160, 220, .34), rgba(40, 230, 190, .22)) !important;
}

#josiStaticQuickMenu li,
html.josi-light-mode #josiStaticQuickMenu li,
html[data-josi-theme="light"] #josiStaticQuickMenu li,
body.josi-light-mode #josiStaticQuickMenu li {
  background: rgba(255,255,255,.62) !important;
  border-bottom-color: rgba(0, 121, 166, .18) !important;
}

#josiStaticQuickMenu a,
html.josi-light-mode #josiStaticQuickMenu a,
html[data-josi-theme="light"] #josiStaticQuickMenu a,
body.josi-light-mode #josiStaticQuickMenu a {
  color: #073d59 !important;
  -webkit-text-fill-color: #073d59 !important;
}

html.josi-dark-mode #josiStaticAboutJournal,
html[data-josi-theme="dark"] #josiStaticAboutJournal,
body.josi-dark-mode #josiStaticAboutJournal {
  color: #d9f5ff !important;
}

html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-title,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-title,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-title {
  color: #eafcff !important;
  -webkit-text-fill-color: #eafcff !important;
}

html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-table,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-table,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-table {
  background: rgba(224, 248, 255, .10) !important;
  border: 1px solid rgba(0, 212, 255, .18) !important;
}

html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-table dt,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-table dt,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-table dt {
  color: #bfeeff !important;
  -webkit-text-fill-color: #bfeeff !important;
  font-weight: 650 !important;
}

html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-table dd,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-table dd,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-table dd,
html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-table dd strong,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-table dd strong,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-table dd strong {
  color: #e9fbff !important;
  -webkit-text-fill-color: #e9fbff !important;
  font-weight: 850 !important;
}

html.josi-dark-mode #josiStaticAboutJournal a,
html[data-josi-theme="dark"] #josiStaticAboutJournal a,
body.josi-dark-mode #josiStaticAboutJournal a {
  color: #55e5ff !important;
  -webkit-text-fill-color: #55e5ff !important;
}

html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-badge,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-badge,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-badge {
  background: rgba(224, 248, 255, .08) !important;
  border-color: rgba(0, 212, 255, .20) !important;
}

html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-badge strong,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-badge strong,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-badge strong {
  color: #f2fdff !important;
  -webkit-text-fill-color: #f2fdff !important;
}

html.josi-dark-mode #josiStaticAboutJournal .josi-static-about-badge span,
html[data-josi-theme="dark"] #josiStaticAboutJournal .josi-static-about-badge span,
body.josi-dark-mode #josiStaticAboutJournal .josi-static-about-badge span {
  color: #c9eff9 !important;
  -webkit-text-fill-color: #c9eff9 !important;
}

html.josi-dark-mode #josiStaticQuickMenu,
html[data-josi-theme="dark"] #josiStaticQuickMenu,
body.josi-dark-mode #josiStaticQuickMenu {
  background:
    radial-gradient(circle at 18% 0%, rgba(0,212,255,.20), transparent 35%),
    linear-gradient(145deg, rgba(3,17,31,.98), rgba(8,28,54,.98)) !important;
  border-color: rgba(0, 212, 255, .40) !important;
  box-shadow: 0 22px 52px rgba(0,34,70,.30) !important;
}

html.josi-dark-mode #josiStaticQuickMenu h2,
html[data-josi-theme="dark"] #josiStaticQuickMenu h2,
body.josi-dark-mode #josiStaticQuickMenu h2 {
  color: #eaffff !important;
  -webkit-text-fill-color: #eaffff !important;
  background: linear-gradient(90deg, rgba(0,119,255,.90), rgba(0,212,255,.42)) !important;
}

html.josi-dark-mode #josiStaticQuickMenu li,
html[data-josi-theme="dark"] #josiStaticQuickMenu li,
body.josi-dark-mode #josiStaticQuickMenu li {
  background: rgba(255,255,255,.035) !important;
  border-bottom-color: rgba(87,221,255,.20) !important;
}

html.josi-dark-mode #josiStaticQuickMenu a,
html[data-josi-theme="dark"] #josiStaticQuickMenu a,
body.josi-dark-mode #josiStaticQuickMenu a {
  color: #e0fbff !important;
  -webkit-text-fill-color: #e0fbff !important;
}

/* ==========================================================
   JOSI SAFE SCROLL PERFORMANCE PATCH
   Tidak mengubah layout/visibility. Hanya mengurangi repaint saat scroll.
   ========================================================== */

body,
body.josi-light-mode,
body.josi-dark-mode,
body.pkp_page_index,
html.josi-light-mode body,
html.josi-dark-mode body,
html[data-josi-theme="light"] body,
html[data-josi-theme="dark"] body,
body.josi-light-mode.pkp_page_index,
body.josi-dark-mode.pkp_page_index,
html.josi-light-mode body.pkp_page_index,
html.josi-dark-mode body.pkp_page_index,
html[data-josi-theme="light"] body.pkp_page_index,
html[data-josi-theme="dark"] body.pkp_page_index,
body:not(.josi-dark-mode).pkp_page_index {
  background-attachment: scroll !important;
  animation: none !important;
}

.pkp_head_wrapper,
.pkp_head_wrapper::before,
.pkp_head_wrapper::after,
.pkp_site_name > a::before,
.pkp_structure_main,
.josi-index-strip::before,
.josi-timeline-native::before,
.pkp_page_index .journal_summary::before,
.pkp_page_index .homepage_about::before,
.pkp_page_index .current_issue::before,
.pkp_page_index .additional_content::before,
.pkp_block,
.block_custom,
.block_make_submission,
.block_information,
.block_language,
.block_developed_by,
.block_browse,
.block_keyword_cloud {
  animation: none !important;
}

.pkp_head_wrapper::after {
  opacity: 0 !important;
}

.pkp_head_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper,
.josi-theme-control,
#josiSectionedHome .josi-theme-control {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Background grid dibuat satu layer saja supaya scroll tidak patah. */
html,
body,
body.josi-light-mode,
html.josi-light-mode body,
html[data-josi-theme="light"] body,
body:has(#josi-theme-light:checked),
body.josi-light-mode.pkp_page_index,
html.josi-light-mode body.pkp_page_index,
html[data-josi-theme="light"] body.pkp_page_index,
body:not(.josi-dark-mode).pkp_page_index {
  background-color: #f5fcff !important;
  background-image:
    linear-gradient(90deg, rgba(5, 108, 153, .075) 1px, transparent 1px),
    linear-gradient(0deg, rgba(5, 108, 153, .075) 1px, transparent 1px),
    radial-gradient(circle at 28% 24%, rgba(0, 212, 255, .15), transparent 34%),
    radial-gradient(circle at 84% 22%, rgba(135, 106, 255, .12), transparent 36%),
    linear-gradient(135deg, #f7fdff 0%, #eefbff 44%, #fffafe 100%) !important;
  background-size:
    34px 34px,
    34px 34px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-attachment: scroll !important;
  background-position: 0 0, 0 0, center, center, center !important;
  animation: none !important;
}

body.josi-dark-mode,
html.josi-dark-mode body,
html[data-josi-theme="dark"] body,
body:has(#josi-theme-dark:checked),
body.josi-dark-mode.pkp_page_index,
html.josi-dark-mode body.pkp_page_index,
html[data-josi-theme="dark"] body.pkp_page_index {
  background-color: #061523 !important;
  background-image:
    linear-gradient(90deg, rgba(103, 226, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(103, 226, 255, .08) 1px, transparent 1px),
    radial-gradient(circle at 22% 22%, rgba(0, 212, 255, .19), transparent 34%),
    radial-gradient(circle at 84% 24%, rgba(112, 92, 255, .24), transparent 36%),
    linear-gradient(135deg, #061929 0%, #03101d 48%, #0d0b2a 100%) !important;
  background-size:
    34px 34px,
    34px 34px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-attachment: scroll !important;
  background-position: 0 0, 0 0, center, center, center !important;
  animation: none !important;
}

.pkp_structure_page,
.pkp_structure_body,
.pkp_structure_content,
.page_index_journal,
.pkp_page_index .pkp_structure_page,
.pkp_page_index .pkp_structure_body,
.pkp_page_index .pkp_structure_content,
.pkp_page_index .page_index_journal,
body.josi-light-mode .pkp_structure_page,
body.josi-light-mode .pkp_structure_body,
body.josi-light-mode .pkp_structure_content,
body.josi-dark-mode .pkp_structure_page,
body.josi-dark-mode .pkp_structure_body,
body.josi-dark-mode .pkp_structure_content,
body:has(#josi-theme-light:checked) .pkp_structure_page,
body:has(#josi-theme-light:checked) .pkp_structure_body,
body:has(#josi-theme-light:checked) .pkp_structure_content,
body:has(#josi-theme-dark:checked) .pkp_structure_page,
body:has(#josi-theme-dark:checked) .pkp_structure_body,
body:has(#josi-theme-dark:checked) .pkp_structure_content {
  background: transparent !important;
  background-image: none !important;
  background-attachment: scroll !important;
  animation: none !important;
}

/* ==========================================================
   JOSI CURRENT ISSUE TOC - JOIV-LIKE STRUCTURE
   Struktur: volume, deskripsi, Table of Contents, Regular, list artikel.
   ========================================================== */

html.josi-journal-page .obj_issue_toc,
html.josi-journal-page .josi-issue-toc-layout,
html.josi-journal-page #josi-current-issue-auto .current_issue .obj_issue_toc,
body.josi-journal-page .obj_issue_toc,
body.josi-journal-page .josi-issue-toc-layout,
body.josi-journal-page #josi-current-issue-auto .current_issue .obj_issue_toc {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #333333 !important;
}

html.josi-current-page-ready .cmp_breadcrumbs,
html.josi-current-page-ready .breadcrumbs,
body.josi-journal-page .josi-current-page-from-archive ~ .cmp_breadcrumbs {
  display: none !important;
}

html.josi-journal-page .obj_issue_toc .heading,
html.josi-journal-page .josi-issue-toc-layout .heading,
body.josi-journal-page .obj_issue_toc .heading,
body.josi-journal-page .josi-issue-toc-layout .heading {
  margin: 0 0 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.josi-journal-page .obj_issue_toc .heading::after,
html.josi-journal-page .josi-issue-toc-layout .heading::after,
body.josi-journal-page .obj_issue_toc .heading::after,
body.josi-journal-page .josi-issue-toc-layout .heading::after {
  display: none !important;
}

html.josi-journal-page .obj_issue_toc .heading h1,
html.josi-journal-page .obj_issue_toc > h1,
html.josi-journal-page .josi-issue-toc-layout .heading h1,
html.josi-journal-page .josi-issue-toc-layout > h1,
body.josi-journal-page .obj_issue_toc .heading h1,
body.josi-journal-page .obj_issue_toc > h1,
body.josi-journal-page .josi-issue-toc-layout .heading h1,
body.josi-journal-page .josi-issue-toc-layout > h1 {
  margin: 0 0 18px !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

html.josi-journal-page .obj_issue_toc .description,
html.josi-journal-page .obj_issue_toc .description p,
html.josi-journal-page .obj_issue_toc .published,
html.josi-journal-page .josi-issue-toc-layout .description,
html.josi-journal-page .josi-issue-toc-layout .description p,
html.josi-journal-page .josi-issue-toc-layout .published,
body.josi-journal-page .obj_issue_toc .description,
body.josi-journal-page .obj_issue_toc .description p,
body.josi-journal-page .obj_issue_toc .published,
body.josi-journal-page .josi-issue-toc-layout .description,
body.josi-journal-page .josi-issue-toc-layout .description p,
body.josi-journal-page .josi-issue-toc-layout .published {
  margin: 0 0 14px !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-size: 18px !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
}

html.josi-journal-page .obj_issue_toc .description strong,
html.josi-journal-page .josi-issue-toc-layout .description strong,
body.josi-journal-page .obj_issue_toc .description strong,
body.josi-journal-page .josi-issue-toc-layout .description strong {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-weight: 900 !important;
}

html.josi-journal-page .obj_issue_toc .cover,
html.josi-journal-page .josi-issue-toc-layout .cover,
body.josi-journal-page .obj_issue_toc .cover,
body.josi-journal-page .josi-issue-toc-layout .cover {
  display: none !important;
}

html.josi-journal-page .obj_issue_toc .josi-toc-heading,
html.josi-journal-page .josi-issue-toc-layout .josi-toc-heading,
body.josi-journal-page .obj_issue_toc .josi-toc-heading,
body.josi-journal-page .josi-issue-toc-layout .josi-toc-heading {
  margin: 42px 0 18px !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.14 !important;
  font-weight: 900 !important;
}

html.josi-journal-page .obj_issue_toc .sections,
html.josi-journal-page .josi-issue-toc-layout .sections,
body.josi-journal-page .obj_issue_toc .sections,
body.josi-journal-page .josi-issue-toc-layout .sections {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html.josi-journal-page .obj_issue_toc .sections > .section,
html.josi-journal-page .josi-issue-toc-layout .sections > .section,
body.josi-journal-page .obj_issue_toc .sections > .section,
body.josi-journal-page .josi-issue-toc-layout .sections > .section {
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.josi-journal-page .obj_issue_toc .sections > .section > h2,
html.josi-journal-page .josi-issue-toc-layout .sections > .section > h2,
body.josi-journal-page .obj_issue_toc .sections > .section > h2,
body.josi-journal-page .josi-issue-toc-layout .sections > .section > h2 {
  margin: 0 0 12px !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

html.josi-journal-page .obj_issue_toc .cmp_article_list,
html.josi-journal-page .josi-issue-toc-layout .cmp_article_list,
body.josi-journal-page .obj_issue_toc .cmp_article_list,
body.josi-journal-page .josi-issue-toc-layout .cmp_article_list {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
}

html.josi-journal-page .obj_issue_toc .cmp_article_list > li,
html.josi-journal-page .josi-issue-toc-layout .cmp_article_list > li,
body.josi-journal-page .obj_issue_toc .cmp_article_list > li,
body.josi-journal-page .josi-issue-toc-layout .cmp_article_list > li {
  display: block !important;
  position: relative !important;
  margin: 0 0 8px !important;
  padding: 16px 138px 18px 18px !important;
  min-height: 108px !important;
  border: 0 !important;
  border-top: 7px solid #e9fbff !important;
  border-radius: 0 !important;
  background: #ececff !important;
  box-shadow: none !important;
  transform: none !important;
}

html.josi-journal-page .obj_issue_toc .cmp_article_list > li:nth-child(even),
html.josi-journal-page .josi-issue-toc-layout .cmp_article_list > li:nth-child(even),
body.josi-journal-page .obj_issue_toc .cmp_article_list > li:nth-child(even),
body.josi-journal-page .josi-issue-toc-layout .cmp_article_list > li:nth-child(even) {
  background: #f2f2f2 !important;
}

html.josi-journal-page .obj_issue_toc .obj_article_summary,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary,
body.josi-journal-page .obj_issue_toc .obj_article_summary,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html.josi-journal-page .obj_issue_toc .obj_article_summary .title,
html.josi-journal-page .obj_issue_toc .obj_article_summary .title a,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .title,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .title a,
body.josi-journal-page .obj_issue_toc .obj_article_summary .title,
body.josi-journal-page .obj_issue_toc .obj_article_summary .title a,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .title,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .title a {
  color: #6f8fe8 !important;
  -webkit-text-fill-color: #6f8fe8 !important;
  font-size: 20px !important;
  line-height: 1.24 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

html.josi-journal-page .obj_issue_toc .obj_article_summary .authors,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .authors,
body.josi-journal-page .obj_issue_toc .obj_article_summary .authors,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .authors {
  margin: 8px 0 0 44px !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-style: italic !important;
}

html.josi-journal-page .obj_issue_toc .obj_article_summary .doi,
html.josi-journal-page .obj_issue_toc .obj_article_summary .doi a,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .doi,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .doi a,
body.josi-journal-page .obj_issue_toc .obj_article_summary .doi,
body.josi-journal-page .obj_issue_toc .obj_article_summary .doi a,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .doi,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .doi a {
  color: #6f8fe8 !important;
  -webkit-text-fill-color: #6f8fe8 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

html.josi-journal-page .obj_issue_toc .obj_article_summary .galleys,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .galleys,
body.josi-journal-page .obj_issue_toc .obj_article_summary .galleys,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .galleys {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 96px !important;
  text-align: right !important;
}

html.josi-journal-page .obj_issue_toc .obj_article_summary .galleys a,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .galleys a,
body.josi-journal-page .obj_issue_toc .obj_article_summary .galleys a,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .galleys a {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6f8fe8 !important;
  -webkit-text-fill-color: #6f8fe8 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

html.josi-journal-page .obj_issue_toc .obj_article_summary .pages,
html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .pages,
body.josi-journal-page .obj_issue_toc .obj_article_summary .pages,
body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .pages {
  position: absolute !important;
  top: 44px !important;
  right: 16px !important;
  width: 96px !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  text-align: right !important;
}

@media (max-width: 760px) {
  html.josi-journal-page .obj_issue_toc .cmp_article_list > li,
  html.josi-journal-page .josi-issue-toc-layout .cmp_article_list > li,
  body.josi-journal-page .obj_issue_toc .cmp_article_list > li,
  body.josi-journal-page .josi-issue-toc-layout .cmp_article_list > li {
    padding: 14px 16px 18px !important;
  }

  html.josi-journal-page .obj_issue_toc .obj_article_summary .galleys,
  html.josi-journal-page .obj_issue_toc .obj_article_summary .pages,
  html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .galleys,
  html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .pages,
  body.josi-journal-page .obj_issue_toc .obj_article_summary .galleys,
  body.josi-journal-page .obj_issue_toc .obj_article_summary .pages,
  body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .galleys,
  body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .pages {
    position: static !important;
    width: auto !important;
    margin-top: 8px !important;
    text-align: left !important;
  }

  html.josi-journal-page .obj_issue_toc .obj_article_summary .authors,
  html.josi-journal-page .josi-issue-toc-layout .obj_article_summary .authors,
  body.josi-journal-page .obj_issue_toc .obj_article_summary .authors,
  body.josi-journal-page .josi-issue-toc-layout .obj_article_summary .authors {
    margin-left: 0 !important;
  }
}

/* ==========================================================
   JOSI STATIC AUTHOR FEES PAGE
   Fallback untuk /pages/view/author-fees jika Custom Page OJS belum ada.
   ========================================================== */

html.josi-author-fees-active .pkp_structure_content,
body.josi-static-author-fees-page .pkp_structure_content,
html.josi-journal-page body.josi-static-author-fees-page .pkp_structure_content {
  display: block !important;
  width: min(1120px, calc(100vw - 36px)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.josi-author-fees-active .pkp_structure_sidebar,
body.josi-static-author-fees-page .pkp_structure_sidebar,
html.josi-journal-page body.josi-static-author-fees-page .pkp_structure_sidebar {
  display: none !important;
}

html.josi-author-fees-active .pkp_structure_main,
body.josi-static-author-fees-page .pkp_structure_main,
html.josi-journal-page body.josi-static-author-fees-page .pkp_structure_main {
  float: none !important;
  flex: none !important;
  overflow: visible !important;
  width: min(920px, calc(100vw - 48px)) !important;
  max-width: 920px !important;
  min-width: 0 !important;
  margin: 72px auto 132px !important;
  padding: 44px !important;
  border: 1px solid rgba(0, 180, 220, .28) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(0, 212, 255, .13), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(241,251,255,.98)) !important;
  box-shadow:
    0 28px 78px rgba(7, 45, 70, .13),
    0 0 0 1px rgba(255,255,255,.74) inset !important;
}

.josi-author-fees-page,
.josi-author-fees-page * {
  box-sizing: border-box !important;
}

.josi-author-fees-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #183147 !important;
}

.josi-static-breadcrumbs {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 180, 220, .24) !important;
  background: linear-gradient(135deg, rgba(232, 250, 255, .96), rgba(255, 255, 255, .92)) !important;
  box-shadow: 0 10px 24px rgba(0, 73, 114, .08) !important;
  color: #102033 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.josi-static-breadcrumbs a {
  color: #08749f !important;
  -webkit-text-fill-color: #08749f !important;
  text-decoration: none !important;
}

.josi-author-fees-header {
  margin: 0 0 24px !important;
  padding: 0 0 22px !important;
  border-bottom: 1px dotted rgba(10, 72, 105, .25) !important;
}

.josi-author-fees-kicker {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 14px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(0, 212, 255, .10) !important;
  border: 1px solid rgba(0, 180, 220, .20) !important;
  color: #08749f !important;
  -webkit-text-fill-color: #08749f !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}

.josi-author-fees-header h1 {
  margin: 0 !important;
  color: #062a40 !important;
  -webkit-text-fill-color: #062a40 !important;
  font-size: clamp(42px, 4.1vw, 64px) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.josi-author-fees-body {
  display: grid !important;
  gap: 14px !important;
  margin: 0 0 30px !important;
}

.josi-author-fees-body p,
.josi-author-fees-note {
  margin: 0 !important;
  color: #20364a !important;
  -webkit-text-fill-color: #20364a !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
}

.josi-author-fees-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 0 24px !important;
}

.josi-author-fees-card {
  position: relative !important;
  min-height: 170px !important;
  padding: 28px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(0, 180, 220, .20) !important;
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .10), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,250,255,.96)) !important;
  box-shadow:
    0 18px 44px rgba(0, 73, 114, .08),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
  overflow: hidden !important;
}

.josi-author-fees-card::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 0 !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0077ff, #00d4ff, #22f6a7) !important;
}

.josi-author-fees-card.is-wide {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
}

.josi-author-fees-card h2 {
  margin: 0 0 18px !important;
  color: #062a40 !important;
  -webkit-text-fill-color: #062a40 !important;
  font-size: 23px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

.josi-author-fees-card dl {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 10px 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.josi-author-fees-card dt,
.josi-author-fees-card dd,
.josi-author-fees-card p {
  margin: 0 !important;
  color: #20364a !important;
  -webkit-text-fill-color: #20364a !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
}

.josi-author-fees-card dt {
  font-weight: 900 !important;
}

.josi-author-fees-note {
  padding: 18px 22px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 180, 220, .18) !important;
  background: rgba(255,255,255,.62) !important;
}

.josi-author-fees-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 26px !important;
}

.josi-author-fees-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 11px 19px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0077ff, #00d4ff, #22f6a7) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  box-shadow: 0 14px 28px rgba(0, 119, 255, .18) !important;
}

.josi-author-fees-button.is-secondary {
  background: linear-gradient(135deg, rgba(9,31,49,.90), rgba(42,166,220,.82)) !important;
}

html[data-josi-theme="dark"] .josi-author-fees-page,
html.josi-dark-mode .josi-author-fees-page,
body.josi-dark-mode .josi-author-fees-page {
  color: #d9f5ff !important;
}

html[data-josi-theme="dark"] .josi-author-fees-card,
html.josi-dark-mode .josi-author-fees-card,
body.josi-dark-mode .josi-author-fees-card {
  border-color: rgba(0, 212, 255, .24) !important;
  background:
    radial-gradient(circle at 10% 15%, rgba(0, 212, 255, .16), transparent 34%),
    linear-gradient(135deg, rgba(3,17,31,.96), rgba(8,28,54,.94)) !important;
  box-shadow: 0 22px 52px rgba(0,34,70,.30) !important;
}

html[data-josi-theme="dark"] .josi-author-fees-header h1,
html[data-josi-theme="dark"] .josi-author-fees-card h2,
html.josi-dark-mode .josi-author-fees-header h1,
html.josi-dark-mode .josi-author-fees-card h2,
body.josi-dark-mode .josi-author-fees-header h1,
body.josi-dark-mode .josi-author-fees-card h2 {
  color: #eafcff !important;
  -webkit-text-fill-color: #eafcff !important;
}

html[data-josi-theme="dark"] .josi-author-fees-body p,
html[data-josi-theme="dark"] .josi-author-fees-note,
html[data-josi-theme="dark"] .josi-author-fees-card :is(dt, dd, p),
html.josi-dark-mode .josi-author-fees-body p,
html.josi-dark-mode .josi-author-fees-note,
html.josi-dark-mode .josi-author-fees-card :is(dt, dd, p),
body.josi-dark-mode .josi-author-fees-body p,
body.josi-dark-mode .josi-author-fees-note,
body.josi-dark-mode .josi-author-fees-card :is(dt, dd, p) {
  color: #d9f5ff !important;
  -webkit-text-fill-color: #d9f5ff !important;
}

html[data-josi-theme="dark"] .josi-author-fees-note,
html.josi-dark-mode .josi-author-fees-note,
body.josi-dark-mode .josi-author-fees-note {
  background: rgba(224, 248, 255, .08) !important;
  border-color: rgba(0, 212, 255, .20) !important;
}

@media (max-width: 760px) {
  html.josi-author-fees-active .pkp_structure_content,
  body.josi-static-author-fees-page .pkp_structure_content,
  html.josi-journal-page body.josi-static-author-fees-page .pkp_structure_content {
    width: calc(100vw - 24px) !important;
  }

  html.josi-author-fees-active .pkp_structure_main,
  body.josi-static-author-fees-page .pkp_structure_main,
  html.josi-journal-page body.josi-static-author-fees-page .pkp_structure_main {
    width: calc(100vw - 24px) !important;
    margin: 28px auto 64px !important;
    padding: 24px 18px !important;
    border-radius: 24px !important;
    box-shadow:
      0 18px 48px rgba(7, 45, 70, .12),
      0 0 0 1px rgba(255,255,255,.72) inset !important;
  }

  .josi-author-fees-grid {
    grid-template-columns: 1fr !important;
  }

  .josi-author-fees-card dl {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU PAGES - CLEAN LIGHT MODE
   Dipakai untuk semua halaman hasil klik Quick Menu.
   ========================================================== */

html.josi-static-quick-menu-active .pkp_structure_content,
html.josi-author-fees-active .pkp_structure_content,
body.josi-static-quick-menu-page .pkp_structure_content,
body.josi-static-author-fees-page .pkp_structure_content {
  width: min(1040px, calc(100vw - 40px)) !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.josi-static-quick-menu-active .pkp_structure_main,
html.josi-author-fees-active .pkp_structure_main,
body.josi-static-quick-menu-page .pkp_structure_main,
body.josi-static-author-fees-page .pkp_structure_main {
  width: min(860px, calc(100vw - 48px)) !important;
  max-width: 860px !important;
  margin: 54px auto 92px !important;
  padding: clamp(24px, 3.2vw, 36px) !important;
  border: 1px solid rgba(0, 166, 214, .22) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 212, 255, .10), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,252,255,.97)) !important;
  box-shadow:
    0 22px 54px rgba(20, 74, 104, .10),
    0 0 0 1px rgba(255,255,255,.75) inset !important;
}

.josi-static-utility-page {
  display: block !important;
}

.josi-static-utility-page .josi-static-breadcrumbs {
  gap: 8px !important;
  margin: 0 0 18px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
}

.josi-static-utility-page .josi-author-fees-header {
  margin: 0 0 22px !important;
  padding: 0 0 18px !important;
}

.josi-static-utility-page .josi-author-fees-kicker {
  margin: 0 0 12px !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.josi-static-utility-page .josi-author-fees-header h1 {
  max-width: 760px !important;
  font-size: clamp(32px, 4.2vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.josi-static-utility-page .josi-author-fees-body {
  gap: 12px !important;
  margin: 0 0 24px !important;
}

.josi-static-utility-page .josi-author-fees-body p,
.josi-static-utility-page .josi-author-fees-note {
  max-width: 780px !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
}

.josi-static-utility-page .josi-author-fees-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 18px !important;
}

.josi-static-utility-page .josi-author-fees-card {
  min-height: 0 !important;
  padding: 22px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,253,255,.96)) !important;
  box-shadow:
    0 14px 32px rgba(20, 74, 104, .07),
    0 0 0 1px rgba(255,255,255,.70) inset !important;
}

.josi-static-utility-page .josi-author-fees-card::before {
  left: 20px !important;
  right: 20px !important;
  height: 3px !important;
}

.josi-static-utility-page .josi-author-fees-card h2 {
  margin: 0 0 12px !important;
  font-size: 21px !important;
  line-height: 1.22 !important;
}

.josi-static-utility-page .josi-author-fees-card p,
.josi-static-utility-page .josi-author-fees-card dt,
.josi-static-utility-page .josi-author-fees-card dd {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.josi-static-utility-page .josi-author-fees-card dl {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 8px 14px !important;
}

.josi-static-utility-page .josi-author-fees-note {
  margin-top: 4px !important;
  padding: 15px 18px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72) !important;
}

.josi-static-utility-page .josi-author-fees-actions {
  gap: 10px !important;
  margin-top: 22px !important;
}

.josi-static-utility-page .josi-author-fees-button {
  min-height: 40px !important;
  padding: 10px 17px !important;
  font-size: 13px !important;
  box-shadow: 0 10px 22px rgba(0, 119, 255, .15) !important;
}

html[data-josi-theme="dark"].josi-static-quick-menu-active .pkp_structure_main,
html.josi-dark-mode.josi-static-quick-menu-active .pkp_structure_main,
body.josi-dark-mode.josi-static-quick-menu-page .pkp_structure_main,
html[data-josi-theme="dark"].josi-author-fees-active .pkp_structure_main,
html.josi-dark-mode.josi-author-fees-active .pkp_structure_main,
body.josi-dark-mode.josi-static-author-fees-page .pkp_structure_main {
  border-color: rgba(0, 212, 255, .24) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 212, 255, .14), transparent 28%),
    linear-gradient(135deg, rgba(3,17,31,.96), rgba(7,26,48,.95)) !important;
  box-shadow:
    0 24px 62px rgba(0, 0, 0, .30),
    0 0 0 1px rgba(0, 212, 255, .08) inset !important;
}

@media (max-width: 760px) {
  html.josi-static-quick-menu-active .pkp_structure_content,
  html.josi-author-fees-active .pkp_structure_content,
  body.josi-static-quick-menu-page .pkp_structure_content,
  body.josi-static-author-fees-page .pkp_structure_content {
    width: calc(100vw - 22px) !important;
  }

  html.josi-static-quick-menu-active .pkp_structure_main,
  html.josi-author-fees-active .pkp_structure_main,
  body.josi-static-quick-menu-page .pkp_structure_main,
  body.josi-static-author-fees-page .pkp_structure_main {
    width: calc(100vw - 22px) !important;
    margin: 28px auto 64px !important;
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }

  .josi-static-utility-page .josi-author-fees-header h1 {
    font-size: clamp(29px, 9vw, 38px) !important;
  }

  .josi-static-utility-page .josi-author-fees-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .josi-static-utility-page .josi-author-fees-card {
    padding: 19px !important;
  }

  .josi-static-utility-page .josi-author-fees-card dl {
    grid-template-columns: 1fr !important;
  }

  .josi-static-utility-page .josi-author-fees-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU PAGES - SOFTER PANEL SHAPE
   Menghilangkan kesan kotak pada panel utama mode terang.
   ========================================================== */

html.josi-journal-page .pkp_structure_main[data-josi-static-page-ready],
body.josi-journal-page .pkp_structure_main[data-josi-static-page-ready],
.pkp_structure_main[data-josi-static-page-ready] {
  width: min(900px, calc(100vw - 48px)) !important;
  max-width: 900px !important;
  margin: 52px auto 96px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html.josi-journal-page .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
body.josi-journal-page .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
.pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page {
  position: relative !important;
  width: 100% !important;
  padding: clamp(24px, 3.2vw, 34px) !important;
  border: 1px solid rgba(0, 166, 214, .22) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 212, 255, .11), transparent 28%),
    radial-gradient(circle at 94% 100%, rgba(34, 246, 167, .08), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,252,255,.96)) !important;
  box-shadow:
    0 24px 62px rgba(20, 74, 104, .11),
    0 0 0 1px rgba(255,255,255,.70) inset !important;
  overflow: hidden !important;
}

.pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page::after {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(0, 166, 214, .08) !important;
  pointer-events: none !important;
}

.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-header h1 {
  font-size: clamp(30px, 3.7vw, 42px) !important;
}

.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-grid {
  gap: 14px !important;
}

.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card {
  border-radius: 24px !important;
}

.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-note {
  border-radius: 22px !important;
}

html[data-josi-theme="dark"] .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
html.josi-dark-mode .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
body.josi-dark-mode .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page {
  border-color: rgba(0, 212, 255, .24) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 212, 255, .15), transparent 28%),
    radial-gradient(circle at 94% 100%, rgba(34, 246, 167, .10), transparent 30%),
    linear-gradient(135deg, rgba(3,17,31,.96), rgba(7,26,48,.95)) !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(0, 212, 255, .08) inset !important;
}

@media (max-width: 760px) {
  html.josi-journal-page .pkp_structure_main[data-josi-static-page-ready],
  body.josi-journal-page .pkp_structure_main[data-josi-static-page-ready],
  .pkp_structure_main[data-josi-static-page-ready] {
    width: calc(100vw - 22px) !important;
    margin: 28px auto 64px !important;
  }

  html.josi-journal-page .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
  body.josi-journal-page .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
  .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page {
    padding: 22px 16px !important;
    border-radius: 24px !important;
  }

  .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page::after {
    inset: 8px !important;
    border-radius: 18px !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU ACTIVE INDICATOR
   Penanda animasi untuk halaman Quick Menu yang sedang aktif.
   ========================================================== */

@keyframes josiQuickActiveSweep {
  0% {
    transform: translateX(-110%);
    opacity: .15;
  }
  45% {
    opacity: .85;
  }
  100% {
    transform: translateX(110%);
    opacity: .15;
  }
}

@keyframes josiQuickArrowPulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    text-shadow: 0 0 0 rgba(39, 236, 255, 0);
  }
  50% {
    transform: translateY(-50%) scale(1.18);
    text-shadow: 0 0 12px rgba(39, 236, 255, .85);
  }
}

#josiStaticQuickMenu li.is-active,
#josiStaticQuickMenu li:hover,
#josiStaticQuickMenu li:focus-within,
#josiQuickMenuPanel .josi-quick-menu-list > li.is-active,
#josiQuickMenuPanel .josi-quick-menu-list > li:hover,
#josiQuickMenuPanel .josi-quick-menu-list > li:focus-within {
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(0, 212, 255, .17), rgba(34, 246, 167, .10), rgba(255,255,255,.06)) !important;
  border-bottom-color: rgba(0, 212, 255, .38) !important;
  box-shadow:
    inset 3px 0 0 rgba(0, 212, 255, .95),
    inset 0 0 0 1px rgba(0, 212, 255, .08) !important;
}

#josiStaticQuickMenu li.is-active::after,
#josiStaticQuickMenu li:hover::after,
#josiStaticQuickMenu li:focus-within::after,
#josiQuickMenuPanel .josi-quick-menu-list > li.is-active::after,
#josiQuickMenuPanel .josi-quick-menu-list > li:hover::after,
#josiQuickMenuPanel .josi-quick-menu-list > li:focus-within::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: -1px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, #00d4ff, #22f6a7, transparent) !important;
  animation: josiQuickActiveSweep 2.4s ease-in-out infinite !important;
  pointer-events: none !important;
}

#josiStaticQuickMenu li.is-active::before,
#josiStaticQuickMenu li:hover::before,
#josiStaticQuickMenu li:focus-within::before,
#josiQuickMenuPanel .josi-quick-menu-list > li.is-active::before,
#josiQuickMenuPanel .josi-quick-menu-list > li:hover::before,
#josiQuickMenuPanel .josi-quick-menu-list > li:focus-within::before {
  color: #12f4ff !important;
  animation: josiQuickArrowPulse 1.45s ease-in-out infinite !important;
}

#josiStaticQuickMenu a.is-active,
#josiStaticQuickMenu li:hover a,
#josiStaticQuickMenu li:focus-within a,
#josiQuickMenuPanel .josi-quick-menu-list a.is-active,
#josiQuickMenuPanel .josi-quick-menu-list > li:hover a,
#josiQuickMenuPanel .josi-quick-menu-list > li:focus-within a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateX(3px) !important;
  transition: transform .22s ease, color .22s ease !important;
}

html.josi-light-mode #josiStaticQuickMenu li.is-active,
html.josi-light-mode #josiStaticQuickMenu li:hover,
html.josi-light-mode #josiStaticQuickMenu li:focus-within,
html[data-josi-theme="light"] #josiStaticQuickMenu li.is-active,
html[data-josi-theme="light"] #josiStaticQuickMenu li:hover,
html[data-josi-theme="light"] #josiStaticQuickMenu li:focus-within,
body.josi-light-mode #josiStaticQuickMenu li.is-active,
body.josi-light-mode #josiStaticQuickMenu li:hover,
body.josi-light-mode #josiStaticQuickMenu li:focus-within,
html.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list > li.is-active,
html.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list > li:hover,
html.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list > li:focus-within,
html[data-josi-theme="light"] #josiQuickMenuPanel .josi-quick-menu-list > li.is-active,
html[data-josi-theme="light"] #josiQuickMenuPanel .josi-quick-menu-list > li:hover,
html[data-josi-theme="light"] #josiQuickMenuPanel .josi-quick-menu-list > li:focus-within,
body.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list > li.is-active {
  background:
    linear-gradient(90deg, rgba(0, 165, 220, .18), rgba(34, 246, 167, .16), rgba(255,255,255,.72)) !important;
  border-bottom-color: rgba(0, 150, 200, .34) !important;
  box-shadow:
    inset 3px 0 0 rgba(0, 180, 220, .95),
    inset 0 0 0 1px rgba(0, 180, 220, .10),
    0 8px 20px rgba(0, 95, 135, .10) !important;
}

html.josi-light-mode #josiStaticQuickMenu a.is-active,
html.josi-light-mode #josiStaticQuickMenu li:hover a,
html.josi-light-mode #josiStaticQuickMenu li:focus-within a,
html[data-josi-theme="light"] #josiStaticQuickMenu a.is-active,
html[data-josi-theme="light"] #josiStaticQuickMenu li:hover a,
html[data-josi-theme="light"] #josiStaticQuickMenu li:focus-within a,
body.josi-light-mode #josiStaticQuickMenu a.is-active,
body.josi-light-mode #josiStaticQuickMenu li:hover a,
body.josi-light-mode #josiStaticQuickMenu li:focus-within a,
html.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list a.is-active,
html.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list > li:hover a,
html.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list > li:focus-within a,
html[data-josi-theme="light"] #josiQuickMenuPanel .josi-quick-menu-list a.is-active,
html[data-josi-theme="light"] #josiQuickMenuPanel .josi-quick-menu-list > li:hover a,
html[data-josi-theme="light"] #josiQuickMenuPanel .josi-quick-menu-list > li:focus-within a,
body.josi-light-mode #josiQuickMenuPanel .josi-quick-menu-list a.is-active {
  color: #062a40 !important;
  -webkit-text-fill-color: #062a40 !important;
}

@media (prefers-reduced-motion: reduce) {
  #josiStaticQuickMenu li.is-active::after,
  #josiStaticQuickMenu li:hover::after,
  #josiStaticQuickMenu li:focus-within::after,
  #josiQuickMenuPanel .josi-quick-menu-list > li.is-active::after,
  #josiQuickMenuPanel .josi-quick-menu-list > li:hover::after,
  #josiQuickMenuPanel .josi-quick-menu-list > li:focus-within::after,
  #josiStaticQuickMenu li.is-active::before,
  #josiStaticQuickMenu li:hover::before,
  #josiStaticQuickMenu li:focus-within::before,
  #josiQuickMenuPanel .josi-quick-menu-list > li.is-active::before {
    animation: none !important;
  }
}

/* ==========================================================
   JOSI GLOBAL BACKGROUND - LIGHTWEIGHT FINAL
   Satu sistem background untuk semua halaman JOSI.
   ========================================================== */

html.josi-journal-page,
html.josi-journal-page body,
body.josi-journal-page {
  min-height: 100% !important;
  background-color: #f5fcff !important;
  background-image:
    linear-gradient(rgba(4, 118, 170, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 118, 170, .075) 1px, transparent 1px),
    radial-gradient(circle at 20% 14%, rgba(0, 212, 255, .15), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(135, 106, 255, .10), transparent 36%) !important;
  background-size:
    32px 32px,
    32px 32px,
    100% 100%,
    100% 100% !important;
  background-position:
    0 0,
    0 0,
    center top,
    center top !important;
  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;
  background-attachment: scroll !important;
}

html.josi-journal-page.josi-dark-mode,
html.josi-journal-page.josi-dark-mode body,
html.josi-journal-page[data-josi-theme="dark"],
html.josi-journal-page[data-josi-theme="dark"] body,
body.josi-journal-page.josi-dark-mode {
  background-color: #061523 !important;
  background-image:
    linear-gradient(rgba(0, 212, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, .055) 1px, transparent 1px),
    radial-gradient(circle at 22% 16%, rgba(0, 212, 255, .14), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .16), transparent 36%) !important;
}

html.josi-journal-page body::before,
html.josi-journal-page body::after,
body.josi-journal-page::before,
body.josi-journal-page::after,
html.josi-journal-page .pkp_structure_body::before,
html.josi-journal-page .pkp_structure_body::after,
body.josi-journal-page .pkp_structure_body::before,
body.josi-journal-page .pkp_structure_body::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

html.josi-journal-page .pkp_structure_page,
html.josi-journal-page .pkp_structure_body,
html.josi-journal-page .pkp_structure_content,
body.josi-journal-page .pkp_structure_page,
body.josi-journal-page .pkp_structure_body,
body.josi-journal-page .pkp_structure_content {
  background: transparent !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

/* ==========================================================
   JOSI BACKGROUND PERFORMANCE LOCK
   Override kuat untuk mematikan background fixed/animated lama.
   ========================================================== */

html body,
html body.josi-light-mode,
html.josi-light-mode body,
html[data-josi-theme="light"] body,
html body.pkp_page_index,
html body.josi-light-mode.pkp_page_index,
html.josi-light-mode body.pkp_page_index,
html[data-josi-theme="light"] body.pkp_page_index,
html body:not(.josi-dark-mode).pkp_page_index,
html.josi-journal-page body,
html.josi-journal-page body.josi-light-mode,
html.josi-journal-page body.pkp_page_index,
html.josi-journal-page body.josi-light-mode.pkp_page_index,
html.josi-journal-page body:not(.josi-dark-mode).pkp_page_index {
  background-color: #f5fcff !important;
  background-image:
    linear-gradient(rgba(4, 118, 170, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 118, 170, .075) 1px, transparent 1px),
    radial-gradient(circle at 20% 14%, rgba(0, 212, 255, .14), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(135, 106, 255, .10), transparent 36%) !important;
  background-size:
    32px 32px,
    32px 32px,
    100% 100%,
    100% 100% !important;
  background-position:
    0 0,
    0 0,
    center top,
    center top !important;
  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;
  background-attachment: scroll !important;
  animation: none !important;
}

html body.josi-dark-mode,
html.josi-dark-mode body,
html[data-josi-theme="dark"] body,
html body.josi-dark-mode.pkp_page_index,
html.josi-dark-mode body.pkp_page_index,
html[data-josi-theme="dark"] body.pkp_page_index,
html.josi-journal-page body.josi-dark-mode,
html.josi-journal-page[data-josi-theme="dark"] body,
html.josi-journal-page body.josi-dark-mode.pkp_page_index {
  background-color: #061523 !important;
  background-image:
    linear-gradient(rgba(0, 212, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, .055) 1px, transparent 1px),
    radial-gradient(circle at 22% 16%, rgba(0, 212, 255, .14), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .16), transparent 36%) !important;
  background-size:
    32px 32px,
    32px 32px,
    100% 100%,
    100% 100% !important;
  background-position:
    0 0,
    0 0,
    center top,
    center top !important;
  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;
  background-attachment: scroll !important;
  animation: none !important;
}

html body::before,
html body::after,
html body.pkp_page_index::before,
html body.pkp_page_index::after,
html body.josi-light-mode::before,
html body.josi-light-mode::after,
html body.josi-dark-mode::before,
html body.josi-dark-mode::after,
html body .pkp_structure_body::before,
html body .pkp_structure_body::after,
html body .pkp_structure_page::before,
html body .pkp_structure_page::after,
html body .pkp_structure_content::before,
html body .pkp_structure_content::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

html body .pkp_structure_page,
html body .pkp_structure_body,
html body .pkp_structure_content,
html body.pkp_page_index .pkp_structure_page,
html body.pkp_page_index .pkp_structure_body,
html body.pkp_page_index .pkp_structure_content,
html body.josi-light-mode .pkp_structure_page,
html body.josi-light-mode .pkp_structure_body,
html body.josi-light-mode .pkp_structure_content,
html body.josi-dark-mode .pkp_structure_page,
html body.josi-dark-mode .pkp_structure_body,
html body.josi-dark-mode .pkp_structure_content {
  background: transparent !important;
  background-image: none !important;
  background-attachment: scroll !important;
  animation: none !important;
}

/* ==========================================================
   JOSI JOURNAL TEMPLATE BOX BELOW QUICK MENU
   ========================================================== */

.josi-journal-template-box {
  display: block !important;
  margin: 18px 0 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 140, 190, .34) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 188, 224, .20), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(232,250,255,.96)) !important;
  box-shadow: 0 20px 46px rgba(0, 56, 84, .18) !important;
  overflow: hidden !important;
}

#josiStaticQuickMenu + .josi-journal-template-box,
#josiQuickMenuPanel + .josi-journal-template-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.josi-journal-template-box h3 {
  display: block !important;
  margin: 0 0 13px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid rgba(0, 180, 220, .18) !important;
  color: #063a55 !important;
  -webkit-text-fill-color: #063a55 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.josi-journal-template-box figure {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.josi-template-download-link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.josi-template-download-link:focus-visible {
  outline: 3px solid rgba(0, 180, 220, .55) !important;
  outline-offset: 4px !important;
  border-radius: 16px !important;
}

.josi-template-image {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 180, 220, .24) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 26px rgba(18, 98, 132, .12) !important;
}

html:not(.josi-lang-id):not([data-josi-language="id"]):not(.josi-dark-mode):not([data-josi-theme="dark"]) .josi-template-image.is-en.is-light,
html.josi-lang-en:not(.josi-dark-mode):not([data-josi-theme="dark"]) .josi-template-image.is-en.is-light,
html[data-josi-language="en"]:not(.josi-dark-mode):not([data-josi-theme="dark"]) .josi-template-image.is-en.is-light,
body.josi-lang-en:not(.josi-dark-mode) .josi-template-image.is-en.is-light {
  display: block !important;
}

html.josi-dark-mode:not(.josi-lang-id):not([data-josi-language="id"]) .josi-template-image.is-en.is-dark,
html[data-josi-theme="dark"]:not(.josi-lang-id):not([data-josi-language="id"]) .josi-template-image.is-en.is-dark,
body.josi-dark-mode.josi-lang-en .josi-template-image.is-en.is-dark {
  display: block !important;
}

html.josi-lang-id:not(.josi-dark-mode):not([data-josi-theme="dark"]) .josi-template-image.is-id.is-light,
html[data-josi-language="id"]:not(.josi-dark-mode):not([data-josi-theme="dark"]) .josi-template-image.is-id.is-light,
body.josi-lang-id:not(.josi-dark-mode) .josi-template-image.is-id.is-light {
  display: block !important;
}

html.josi-dark-mode.josi-lang-id .josi-template-image.is-id.is-dark,
html[data-josi-theme="dark"].josi-lang-id .josi-template-image.is-id.is-dark,
html.josi-dark-mode[data-josi-language="id"] .josi-template-image.is-id.is-dark,
html[data-josi-theme="dark"][data-josi-language="id"] .josi-template-image.is-id.is-dark,
body.josi-dark-mode.josi-lang-id .josi-template-image.is-id.is-dark {
  display: block !important;
}

html.josi-dark-mode .josi-journal-template-box,
html[data-josi-theme="dark"] .josi-journal-template-box,
body.josi-dark-mode .josi-journal-template-box {
  border-color: rgba(0, 212, 255, .40) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,212,255,.20), transparent 35%),
    linear-gradient(145deg, rgba(3,17,31,.98), rgba(8,28,54,.98)) !important;
  box-shadow: 0 22px 52px rgba(0,34,70,.30) !important;
}

html.josi-dark-mode .josi-journal-template-box h3,
html[data-josi-theme="dark"] .josi-journal-template-box h3,
body.josi-dark-mode .josi-journal-template-box h3 {
  color: #eafcff !important;
  -webkit-text-fill-color: #eafcff !important;
  border-bottom-color: rgba(0, 212, 255, .20) !important;
}

@media (max-width: 760px) {
  .josi-journal-template-box {
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU TEMPLATE POSITION - NON DESTRUCTIVE
   ========================================================== */

@media (min-width: 1100px) {
  #josiStaticQuickMenu + .josi-journal-template-box {
    position: absolute !important;
    top: var(--josi-template-offset-top, calc(100% + 18px)) !important;
    left: calc(100% + 58px) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 21 !important;
    width: var(--josi-template-width, 250px) !important;
    max-width: var(--josi-template-width, 250px) !important;
    margin: 0 !important;
  }
}

@media (max-width: 1099px) {
  #josiStaticQuickMenu + .josi-journal-template-box {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
  }
}

@media (min-width: 761px) {
  #josiAboutQuickRow > .josi-journal-template-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    align-self: start !important;
  }
}

@media (max-width: 760px) {
  #josiAboutQuickRow > .josi-journal-template-box {
    grid-column: 1 !important;
    width: auto !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU PAGES - FORCE LIGHT SHELL
   Memastikan halaman hasil klik Quick Menu mengikuti mode
   terang sampai latar luar, bukan hanya kartu kontennya.
   ========================================================== */

html.josi-light-mode.josi-static-quick-menu-active,
html[data-josi-theme="light"].josi-static-quick-menu-active,
html.josi-light-mode.josi-author-fees-active,
html[data-josi-theme="light"].josi-author-fees-active,
html.josi-quick-light-force,
html.josi-quick-light-force body,
body.josi-quick-light-force,
html.josi-journal-page.josi-light-mode,
html.josi-journal-page[data-josi-theme="light"],
html.josi-light-mode body.josi-static-quick-menu-page,
html[data-josi-theme="light"] body.josi-static-quick-menu-page,
html.josi-light-mode body.josi-static-author-fees-page,
html[data-josi-theme="light"] body.josi-static-author-fees-page,
body.josi-light-mode.josi-static-quick-menu-page,
body.josi-light-mode.josi-static-author-fees-page {
  background-color: #f5fcff !important;
  background-image:
    linear-gradient(rgba(4, 118, 170, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 118, 170, .075) 1px, transparent 1px),
    radial-gradient(circle at 20% 14%, rgba(0, 212, 255, .14), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(135, 106, 255, .10), transparent 36%) !important;
  background-size:
    32px 32px,
    32px 32px,
    100% 100%,
    100% 100% !important;
  background-position:
    0 0,
    0 0,
    center top,
    center top !important;
  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;
  background-attachment: scroll !important;
}

html.josi-light-mode body.josi-static-quick-menu-page .pkp_structure_page,
html.josi-light-mode body.josi-static-quick-menu-page .pkp_structure_body,
html.josi-light-mode body.josi-static-quick-menu-page .pkp_structure_content,
html.josi-quick-light-force body .pkp_structure_page,
html.josi-quick-light-force body .pkp_structure_body,
html.josi-quick-light-force body .pkp_structure_content,
body.josi-quick-light-force .pkp_structure_page,
body.josi-quick-light-force .pkp_structure_body,
body.josi-quick-light-force .pkp_structure_content,
html[data-josi-theme="light"] body.josi-static-quick-menu-page .pkp_structure_page,
html[data-josi-theme="light"] body.josi-static-quick-menu-page .pkp_structure_body,
html[data-josi-theme="light"] body.josi-static-quick-menu-page .pkp_structure_content,
body.josi-light-mode.josi-static-quick-menu-page .pkp_structure_page,
body.josi-light-mode.josi-static-quick-menu-page .pkp_structure_body,
body.josi-light-mode.josi-static-quick-menu-page .pkp_structure_content {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.josi-light-mode body.josi-static-quick-menu-page .pkp_structure_main[data-josi-static-page-ready],
html[data-josi-theme="light"] body.josi-static-quick-menu-page .pkp_structure_main[data-josi-static-page-ready],
body.josi-light-mode.josi-static-quick-menu-page .pkp_structure_main[data-josi-static-page-ready],
html.josi-quick-light-force body .pkp_structure_main[data-josi-static-page-ready],
body.josi-quick-light-force .pkp_structure_main[data-josi-static-page-ready] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.josi-light-mode.josi-static-quick-menu-active .pkp_structure_main,
html[data-josi-theme="light"].josi-static-quick-menu-active .pkp_structure_main,
html.josi-light-mode.josi-author-fees-active .pkp_structure_main,
html[data-josi-theme="light"].josi-author-fees-active .pkp_structure_main,
html.josi-light-mode body.josi-static-quick-menu-page .pkp_structure_main,
html[data-josi-theme="light"] body.josi-static-quick-menu-page .pkp_structure_main,
html.josi-light-mode body.josi-static-author-fees-page .pkp_structure_main,
html[data-josi-theme="light"] body.josi-static-author-fees-page .pkp_structure_main,
body.josi-light-mode.josi-static-quick-menu-page .pkp_structure_main,
body.josi-light-mode.josi-static-author-fees-page .pkp_structure_main,
html.josi-quick-light-force body .pkp_structure_main,
body.josi-quick-light-force .pkp_structure_main {
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 212, 255, .08), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,252,255,.96)) !important;
  border-color: rgba(0, 166, 214, .18) !important;
  box-shadow:
    0 22px 54px rgba(20, 74, 104, .10),
    0 0 0 1px rgba(255,255,255,.76) inset !important;
}

html.josi-light-mode .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
html[data-josi-theme="light"] .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
body.josi-light-mode .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
html.josi-quick-light-force body .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
body.josi-quick-light-force .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 212, 255, .10), transparent 28%),
    radial-gradient(circle at 94% 100%, rgba(34, 246, 167, .08), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(244,252,255,.97)) !important;
  border-color: rgba(0, 166, 214, .20) !important;
  box-shadow:
    0 20px 52px rgba(20, 74, 104, .10),
    0 0 0 1px rgba(255,255,255,.74) inset !important;
}

html.josi-light-mode .josi-static-utility-page .josi-author-fees-card,
html[data-josi-theme="light"] .josi-static-utility-page .josi-author-fees-card,
body.josi-light-mode .josi-static-utility-page .josi-author-fees-card,
html.josi-quick-light-force body .josi-static-utility-page .josi-author-fees-card,
body.josi-quick-light-force .josi-static-utility-page .josi-author-fees-card {
  background:
    radial-gradient(circle at 10% 12%, rgba(0, 212, 255, .07), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(246,253,255,.97)) !important;
  border-color: rgba(0, 180, 220, .20) !important;
  box-shadow:
    0 14px 32px rgba(20, 74, 104, .07),
    0 0 0 1px rgba(255,255,255,.72) inset !important;
}

html.josi-light-mode .josi-static-utility-page .josi-author-fees-note,
html[data-josi-theme="light"] .josi-static-utility-page .josi-author-fees-note,
body.josi-light-mode .josi-static-utility-page .josi-author-fees-note,
html.josi-quick-light-force body .josi-static-utility-page .josi-author-fees-note,
body.josi-quick-light-force .josi-static-utility-page .josi-author-fees-note {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(0, 180, 220, .18) !important;
  box-shadow: 0 12px 26px rgba(20, 74, 104, .05) !important;
}

html.josi-light-mode .josi-static-utility-page .josi-author-fees-button.is-secondary,
html[data-josi-theme="light"] .josi-static-utility-page .josi-author-fees-button.is-secondary,
body.josi-light-mode .josi-static-utility-page .josi-author-fees-button.is-secondary,
html.josi-quick-light-force body .josi-static-utility-page .josi-author-fees-button.is-secondary,
body.josi-quick-light-force .josi-static-utility-page .josi-author-fees-button.is-secondary {
  background: linear-gradient(135deg, #eafaff, #dff8ff) !important;
  border: 1px solid rgba(0, 166, 214, .28) !important;
  color: #0b5f83 !important;
  -webkit-text-fill-color: #0b5f83 !important;
  box-shadow: 0 10px 22px rgba(20, 74, 104, .08) !important;
}

html.josi-static-quick-menu-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main,
html.josi-author-fees-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main,
body.josi-static-quick-menu-page:not(.josi-dark-mode) .pkp_structure_main,
body.josi-static-author-fees-page:not(.josi-dark-mode) .pkp_structure_main,
html.josi-journal-page:not(.josi-dark-mode):not([data-josi-theme="dark"]) body.josi-static-quick-menu-page .pkp_structure_main,
html.josi-journal-page:not(.josi-dark-mode):not([data-josi-theme="dark"]) body.josi-static-author-fees-page .pkp_structure_main {
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 212, 255, .08), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,252,255,.96)) !important;
  border-color: rgba(0, 166, 214, .18) !important;
  box-shadow:
    0 22px 54px rgba(20, 74, 104, .10),
    0 0 0 1px rgba(255,255,255,.76) inset !important;
}

html.josi-static-quick-menu-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main:empty,
html.josi-author-fees-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main:empty,
body.josi-static-quick-menu-page:not(.josi-dark-mode) .pkp_structure_main:empty,
body.josi-static-author-fees-page:not(.josi-dark-mode) .pkp_structure_main:empty {
  min-height: 220px !important;
}

/* ==========================================================
   JOSI GLOBAL DARK SHELL FORCE
   Memastikan mode malam memakai latar halaman awal di semua
   halaman JOSI, termasuk halaman hasil klik Quick Menu.
   ========================================================== */

html.josi-dark-mode,
html[data-josi-theme="dark"],
html.josi-journal-page.josi-dark-mode,
html.josi-journal-page[data-josi-theme="dark"],
html.josi-dark-mode body,
html[data-josi-theme="dark"] body,
html.josi-quick-dark-force,
html.josi-quick-dark-force body,
body.josi-dark-mode,
body.josi-journal-page.josi-dark-mode,
body.josi-quick-dark-force,
body.josi-dark-mode.josi-static-quick-menu-page,
body.josi-dark-mode.josi-static-author-fees-page {
  background-color: #061523 !important;
  background-image:
    linear-gradient(rgba(0, 212, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, .055) 1px, transparent 1px),
    radial-gradient(circle at 22% 16%, rgba(0, 212, 255, .14), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(124, 60, 255, .16), transparent 36%) !important;
  background-size:
    32px 32px,
    32px 32px,
    100% 100%,
    100% 100% !important;
  background-position:
    0 0,
    0 0,
    center top,
    center top !important;
  background-repeat:
    repeat,
    repeat,
    no-repeat,
    no-repeat !important;
  background-attachment: scroll !important;
}

html.josi-dark-mode body .pkp_structure_page,
html.josi-dark-mode body .pkp_structure_body,
html.josi-dark-mode body .pkp_structure_content,
html[data-josi-theme="dark"] body .pkp_structure_page,
html[data-josi-theme="dark"] body .pkp_structure_body,
html[data-josi-theme="dark"] body .pkp_structure_content,
html.josi-quick-dark-force body .pkp_structure_page,
html.josi-quick-dark-force body .pkp_structure_body,
html.josi-quick-dark-force body .pkp_structure_content,
body.josi-dark-mode .pkp_structure_page,
body.josi-dark-mode .pkp_structure_body,
body.josi-dark-mode .pkp_structure_content,
body.josi-quick-dark-force .pkp_structure_page,
body.josi-quick-dark-force .pkp_structure_body,
body.josi-quick-dark-force .pkp_structure_content {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.josi-dark-mode body .pkp_structure_main[data-josi-static-page-ready],
html[data-josi-theme="dark"] body .pkp_structure_main[data-josi-static-page-ready],
html.josi-quick-dark-force body .pkp_structure_main[data-josi-static-page-ready],
body.josi-dark-mode .pkp_structure_main[data-josi-static-page-ready],
body.josi-quick-dark-force .pkp_structure_main[data-josi-static-page-ready] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================
   JOSI QUICK MENU PAGES - LIGHT MODE OUTER FRAME REMOVAL
   Box gelap pada halaman Quick Menu berasal dari wrapper luar.
   Di mode terang, wrapper ini dibuat transparan dan panel putih
   tetap menjadi permukaan utama.
   ========================================================== */

html.josi-static-quick-menu-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_content,
html.josi-author-fees-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_content,
body.josi-static-quick-menu-page:not(.josi-dark-mode) .pkp_structure_content,
body.josi-static-author-fees-page:not(.josi-dark-mode) .pkp_structure_content,
html.josi-journal-page:not(.josi-dark-mode):not([data-josi-theme="dark"]) body.josi-static-quick-menu-page .pkp_structure_content,
html.josi-journal-page:not(.josi-dark-mode):not([data-josi-theme="dark"]) body.josi-static-author-fees-page .pkp_structure_content {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.josi-static-quick-menu-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main[data-josi-static-page-ready],
html.josi-author-fees-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main[data-josi-static-page-ready],
body.josi-static-quick-menu-page:not(.josi-dark-mode) .pkp_structure_main[data-josi-static-page-ready],
body.josi-static-author-fees-page:not(.josi-dark-mode) .pkp_structure_main[data-josi-static-page-ready],
html.josi-static-quick-menu-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main:has(> .josi-static-utility-page),
html.josi-author-fees-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main:has(> .josi-static-utility-page),
body.josi-static-quick-menu-page:not(.josi-dark-mode) .pkp_structure_main:has(> .josi-static-utility-page),
body.josi-static-author-fees-page:not(.josi-dark-mode) .pkp_structure_main:has(> .josi-static-utility-page) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

html.josi-static-quick-menu-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
html.josi-author-fees-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
body.josi-static-quick-menu-page:not(.josi-dark-mode) .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page,
body.josi-static-author-fees-page:not(.josi-dark-mode) .pkp_structure_main[data-josi-static-page-ready] > .josi-static-utility-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 212, 255, .10), transparent 28%),
    radial-gradient(circle at 94% 100%, rgba(34, 246, 167, .08), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(244,252,255,.97)) !important;
  border-color: rgba(0, 166, 214, .20) !important;
  box-shadow:
    0 20px 52px rgba(20, 74, 104, .10),
    0 0 0 1px rgba(255,255,255,.74) inset !important;
}

html.josi-static-quick-menu-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main:empty,
html.josi-author-fees-active:not(.josi-dark-mode):not([data-josi-theme="dark"]) .pkp_structure_main:empty,
body.josi-static-quick-menu-page:not(.josi-dark-mode) .pkp_structure_main:empty,
body.josi-static-author-fees-page:not(.josi-dark-mode) .pkp_structure_main:empty {
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   JOSI QUICK MENU PAGES - NO INNER CARDS
   Isi halaman Quick Menu dibuat seperti section teks bersih,
   bukan card-card terpisah.
   ========================================================== */

.josi-static-utility-page .josi-author-fees-grid,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-grid {
  display: block !important;
  margin: 26px 0 20px !important;
}

.josi-static-utility-page .josi-author-fees-card,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card,
html.josi-light-mode .josi-static-utility-page .josi-author-fees-card,
html[data-josi-theme="light"] .josi-static-utility-page .josi-author-fees-card,
body.josi-light-mode .josi-static-utility-page .josi-author-fees-card,
html.josi-quick-light-force body .josi-static-utility-page .josi-author-fees-card,
body.josi-quick-light-force .josi-static-utility-page .josi-author-fees-card {
  display: block !important;
  width: 100% !important;
  max-width: 820px !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 0 0 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 1px dotted rgba(0, 126, 176, .25) !important;
}

.josi-static-utility-page .josi-author-fees-card::before,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card::before {
  content: none !important;
  display: none !important;
}

.josi-static-utility-page .josi-author-fees-card.is-wide,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card.is-wide {
  max-width: 920px !important;
}

.josi-static-utility-page .josi-author-fees-card h2,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card h2 {
  margin: 0 0 8px !important;
  color: #062a40 !important;
  -webkit-text-fill-color: #062a40 !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  line-height: 1.18 !important;
}

.josi-static-utility-page .josi-author-fees-card p,
.josi-static-utility-page .josi-author-fees-card dt,
.josi-static-utility-page .josi-author-fees-card dd,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card p,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card dt,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card dd {
  color: #183147 !important;
  -webkit-text-fill-color: #183147 !important;
  font-size: 17px !important;
  line-height: 1.58 !important;
}

.josi-static-utility-page .josi-author-fees-note,
.pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-note,
html.josi-light-mode .josi-static-utility-page .josi-author-fees-note,
html[data-josi-theme="light"] .josi-static-utility-page .josi-author-fees-note,
body.josi-light-mode .josi-static-utility-page .josi-author-fees-note,
html.josi-quick-light-force body .josi-static-utility-page .josi-author-fees-note,
body.josi-quick-light-force .josi-static-utility-page .josi-author-fees-note {
  max-width: 920px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #183147 !important;
  -webkit-text-fill-color: #183147 !important;
}

html.josi-dark-mode .josi-static-utility-page .josi-author-fees-card,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-card,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-card {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px dotted rgba(0, 212, 255, .24) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.josi-dark-mode .josi-static-utility-page .josi-author-fees-card::before,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-card::before,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-card::before {
  content: none !important;
  display: none !important;
}

html.josi-dark-mode .josi-static-utility-page,
html[data-josi-theme="dark"] .josi-static-utility-page,
body.josi-dark-mode .josi-static-utility-page,
html.josi-dark-mode .josi-author-fees-page,
html[data-josi-theme="dark"] .josi-author-fees-page,
body.josi-dark-mode .josi-author-fees-page {
  color: #eafcff !important;
  -webkit-text-fill-color: #eafcff !important;
}

html.josi-dark-mode .josi-static-utility-page .josi-static-breadcrumbs,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-static-breadcrumbs,
body.josi-dark-mode .josi-static-utility-page .josi-static-breadcrumbs,
html.josi-dark-mode .josi-static-utility-page .josi-author-fees-kicker,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-kicker,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-kicker {
  background: rgba(0, 212, 255, .10) !important;
  border-color: rgba(0, 212, 255, .28) !important;
  color: #bdf7ff !important;
  -webkit-text-fill-color: #bdf7ff !important;
}

html.josi-dark-mode .josi-static-utility-page .josi-static-breadcrumbs *,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-static-breadcrumbs *,
body.josi-dark-mode .josi-static-utility-page .josi-static-breadcrumbs *,
html.josi-dark-mode .josi-static-utility-page .josi-author-fees-kicker,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-kicker,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-kicker {
  color: #bdf7ff !important;
  -webkit-text-fill-color: #bdf7ff !important;
}

html.josi-dark-mode .josi-static-utility-page .josi-author-fees-header h1,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-header h1,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-header h1,
html.josi-dark-mode .josi-static-utility-page .josi-author-fees-card h2,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-card h2,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-card h2,
html.josi-dark-mode .pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card h2,
html[data-josi-theme="dark"] .pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card h2,
body.josi-dark-mode .pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card h2 {
  color: #eafcff !important;
  -webkit-text-fill-color: #eafcff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .22) !important;
}

html.josi-dark-mode .josi-static-utility-page .josi-author-fees-body p,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-body p,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-body p,
html.josi-dark-mode .josi-static-utility-page .josi-author-fees-card p,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-card p,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-card p,
html.josi-dark-mode .josi-static-utility-page .josi-author-fees-card dt,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-card dt,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-card dt,
html.josi-dark-mode .josi-static-utility-page .josi-author-fees-card dd,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-card dd,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-card dd,
html.josi-dark-mode .josi-static-utility-page .josi-author-fees-note,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-note,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-note,
html.josi-dark-mode .pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card p,
html[data-josi-theme="dark"] .pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card p,
body.josi-dark-mode .pkp_structure_main[data-josi-static-page-ready] .josi-author-fees-card p {
  color: #cfefff !important;
  -webkit-text-fill-color: #cfefff !important;
}

html.josi-dark-mode .josi-static-utility-page .josi-author-fees-card,
html[data-josi-theme="dark"] .josi-static-utility-page .josi-author-fees-card,
body.josi-dark-mode .josi-static-utility-page .josi-author-fees-card {
  border-bottom-color: rgba(45, 226, 255, .38) !important;
}

/* ==========================================================
   JOSI QUICK MENU PAGES - TWO COLUMN REFERENCE LAYOUT
   Semua halaman hasil klik Quick Menu menampilkan konten di
   kiri dan Quick Menu statis di kanan seperti referensi.
   ========================================================== */

@media (min-width: 1100px) {
  html.josi-static-quick-menu-active .pkp_structure_content,
  body.josi-static-quick-menu-page .pkp_structure_content,
  html.josi-journal-page body.josi-static-quick-menu-page .pkp_structure_content {
    width: min(1120px, calc(100vw - 56px)) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.josi-static-quick-menu-active .pkp_structure_main,
  body.josi-static-quick-menu-page .pkp_structure_main,
  html.josi-static-quick-menu-active .pkp_structure_main[data-josi-static-page-ready],
  body.josi-static-quick-menu-page .pkp_structure_main[data-josi-static-page-ready],
  html.josi-journal-page body.josi-static-quick-menu-page .pkp_structure_main[data-josi-static-page-ready] {
    width: min(920px, calc(100vw - 320px)) !important;
    max-width: 920px !important;
    margin: 46px auto 96px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.josi-static-quick-menu-active #josiAboutQuickRow,
  body.josi-static-quick-menu-page #josiAboutQuickRow,
  html.josi-journal-page body.josi-static-quick-menu-page #josiAboutQuickRow {
    display: grid !important;
    grid-template-columns: minmax(0, 610px) 250px !important;
    gap: 34px !important;
    align-items: start !important;
    justify-content: center !important;
    width: 894px !important;
    max-width: 894px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.josi-static-quick-menu-active #josiAboutQuickRow > .homepage_about,
  body.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about,
  html.josi-journal-page body.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 610px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.josi-static-quick-menu-active #josiAboutQuickRow > .homepage_about > .josi-static-utility-page,
  body.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about > .josi-static-utility-page,
  html.josi-journal-page body.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about > .josi-static-utility-page {
    width: 100% !important;
    max-width: 610px !important;
    margin: 0 !important;
    padding: 26px 28px !important;
    border-radius: 20px !important;
  }

  html.josi-static-quick-menu-active #josiStaticQuickMenu,
  body.josi-static-quick-menu-page #josiStaticQuickMenu,
  html.josi-journal-page body.josi-static-quick-menu-page #josiStaticQuickMenu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 20 !important;
  }

  html.josi-static-quick-menu-active #josiStaticQuickMenu h2,
  body.josi-static-quick-menu-page #josiStaticQuickMenu h2 {
    padding: 15px 18px 14px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  html.josi-static-quick-menu-active #josiStaticQuickMenu a,
  body.josi-static-quick-menu-page #josiStaticQuickMenu a {
    min-height: 47px !important;
    padding: 0 12px 0 40px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  html.josi-static-quick-menu-active #josiStaticQuickMenu + .josi-journal-template-box,
  body.josi-static-quick-menu-page #josiStaticQuickMenu + .josi-journal-template-box,
  html.josi-static-quick-menu-active #josiAboutQuickRow > .josi-journal-template-box,
  body.josi-static-quick-menu-page #josiAboutQuickRow > .josi-journal-template-box {
    display: none !important;
  }
}

@media (max-width: 1099px) {
  html.josi-static-quick-menu-active #josiAboutQuickRow,
  body.josi-static-quick-menu-page #josiAboutQuickRow,
  html.josi-journal-page body.josi-static-quick-menu-page #josiAboutQuickRow {
    display: block !important;
    width: min(680px, calc(100vw - 24px)) !important;
    max-width: min(680px, calc(100vw - 24px)) !important;
    margin: 28px auto 64px !important;
  }

  html.josi-static-quick-menu-active #josiAboutQuickRow > .homepage_about,
  body.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about,
  html.josi-static-quick-menu-active #josiStaticQuickMenu,
  body.josi-static-quick-menu-page #josiStaticQuickMenu {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: static !important;
  }
}

/* ==========================================================
   JOSI FOOTER RESTORE FORCE
   Mengembalikan footer di semua halaman JOSI.
   ========================================================== */

html.josi-journal-page .pkp_structure_footer_wrapper,
html.josi-journal-page body .pkp_structure_footer_wrapper,
body.josi-journal-page .pkp_structure_footer_wrapper,
html.josi-light-mode body .pkp_structure_footer_wrapper,
html.josi-dark-mode body .pkp_structure_footer_wrapper,
html[data-josi-theme="light"] body .pkp_structure_footer_wrapper,
html[data-josi-theme="dark"] body .pkp_structure_footer_wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
  clear: both !important;
  width: calc(100% - 60px) !important;
  max-width: none !important;
  min-height: 300px !important;
  margin: 42px auto 0 !important;
  padding: 34px 46px !important;
  overflow: hidden !important;
  transform: none !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper > *,
html.josi-journal-page .pkp_structure_footer_wrapper .pkp_structure_footer,
html.josi-journal-page .pkp_structure_footer_wrapper .pkp_footer_content,
html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-panel,
html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-panel *,
body.josi-journal-page .pkp_structure_footer_wrapper > *,
body.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-panel,
body.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-panel * {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-panel,
body.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-panel {
  display: grid !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-info,
body.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-info {
  display: flex !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-contact,
body.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-contact {
  display: flex !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-contact-btn,
body.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-contact-btn {
  display: inline-flex !important;
}

html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-map,
html.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-map iframe,
body.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-map,
body.josi-journal-page .pkp_structure_footer_wrapper .josi-footer-map iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  html.josi-journal-page .pkp_structure_footer_wrapper,
  html.josi-journal-page body .pkp_structure_footer_wrapper,
  body.josi-journal-page .pkp_structure_footer_wrapper {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    margin-top: 28px !important;
    padding: 30px 22px !important;
  }
}

/* ==========================================================
   JOSI MOBILE RESPONSIVE POLISH FINAL
   Merapikan tampilan mobile dan mencegah konten melebar
   keluar viewport pada halaman JOSI.
   ========================================================== */

@media (max-width: 768px) {
  html.josi-journal-page,
  html.josi-journal-page body,
  body.josi-journal-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html.josi-journal-page *,
  html.josi-journal-page *::before,
  html.josi-journal-page *::after {
    box-sizing: border-box !important;
  }

  html.josi-journal-page .pkp_structure_page,
  html.josi-journal-page .pkp_structure_body,
  html.josi-journal-page .pkp_structure_content,
  html.josi-journal-page .pkp_structure_main,
  body.josi-journal-page .pkp_structure_page,
  body.josi-journal-page .pkp_structure_body,
  body.josi-journal-page .pkp_structure_content,
  body.josi-journal-page .pkp_structure_main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  html.josi-journal-page .pkp_structure_head {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 8px auto 18px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html.josi-journal-page .pkp_head_wrapper {
    min-height: 220px !important;
    border-radius: 24px !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  html.josi-journal-page .pkp_site_nav_toggle {
    top: 16px !important;
    left: 16px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    z-index: 50 !important;
  }

  html.josi-journal-page .pkp_site_name,
  html.josi-journal-page .pkp_site_name_wrapper,
  html.josi-journal-page .pkp_site_name .is_img,
  html.josi-journal-page .pkp_site_name img {
    max-width: 100% !important;
  }

  html.josi-journal-page .homepage_about,
  html.josi-journal-page #josiStaticAboutJournal,
  html.josi-journal-page .josi-static-about-inner,
  html.josi-journal-page .josi-static-about-main,
  html.josi-journal-page .josi-static-about-profile,
  html.josi-journal-page #josiAboutQuickRow,
  html.josi-journal-page #josiStaticQuickMenu,
  html.josi-journal-page #josiQuickMenuPanel,
  html.josi-journal-page .josi-journal-template-box,
  html.josi-journal-page .josi-sectioned-home,
  html.josi-journal-page .josi-extra-sections,
  html.josi-journal-page .josi-timeline-native,
  html.josi-journal-page .josi-control-row {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  html.josi-journal-page .homepage_about,
  html.josi-journal-page #josiStaticAboutJournal,
  html.josi-journal-page .josi-static-about-main,
  html.josi-journal-page .josi-sectioned-home {
    padding: 18px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  html.josi-journal-page .josi-static-about-inner,
  html.josi-journal-page .josi-static-about-main,
  html.josi-journal-page .josi-static-about-profile,
  html.josi-journal-page .josi-static-about-info,
  html.josi-journal-page .josi-static-about-badges,
  html.josi-journal-page #josiAboutQuickRow {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  html.josi-journal-page .josi-static-about-title,
  html.josi-journal-page .homepage_about h2,
  html.josi-journal-page .homepage_about h3 {
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: clamp(26px, 9vw, 38px) !important;
    line-height: 1.13 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  html.josi-journal-page .josi-static-about-table,
  html.josi-journal-page .josi-static-about-table dl,
  html.josi-journal-page .josi-static-about-table dt,
  html.josi-journal-page .josi-static-about-table dd {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html.josi-journal-page .josi-static-about-table {
    padding: 16px !important;
    margin: 0 0 18px !important;
    border-radius: 18px !important;
  }

  html.josi-journal-page .josi-static-about-table dt {
    margin: 0 0 6px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  html.josi-journal-page .josi-static-about-table dd {
    margin: 0 0 18px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  html.josi-journal-page .josi-static-about-badge,
  html.josi-journal-page .josi-static-about-badges > * {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  html.josi-journal-page .josi-static-about-badge strong {
    display: block !important;
    font-size: clamp(28px, 10vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  html.josi-journal-page .josi-static-about-badge span {
    display: block !important;
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.32 !important;
  }

  html.josi-journal-page .josi-static-about-cover {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  html.josi-journal-page .josi-static-about-cover img,
  html.josi-journal-page .josi-static-about-cover-front {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
  }

  html.josi-journal-page .josi-static-about-cover-back {
    display: none !important;
  }

  html.josi-journal-page .josi-static-about-text,
  html.josi-journal-page .josi-static-about-text p,
  html.josi-journal-page .homepage_about p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    text-align-last: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  html.josi-journal-page .josi-static-about-text {
    margin-top: 22px !important;
    padding: 0 !important;
  }

  html.josi-journal-page .josi-static-about-text p,
  html.josi-journal-page .homepage_about p {
    margin: 0 0 18px !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
    letter-spacing: 0 !important;
  }

  html.josi-journal-page #josiStaticQuickMenu,
  html.josi-journal-page #josiQuickMenuPanel {
    margin-top: 26px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html.josi-journal-page #josiStaticQuickMenu h2,
  html.josi-journal-page #josiQuickMenuPanel h2 {
    padding: 18px 20px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  html.josi-journal-page #josiStaticQuickMenu ul,
  html.josi-journal-page #josiQuickMenuPanel ul,
  html.josi-journal-page #josiQuickMenuPanel .josi-quick-menu-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.josi-journal-page #josiStaticQuickMenu li,
  html.josi-journal-page #josiQuickMenuPanel li {
    width: 100% !important;
    min-width: 0 !important;
  }

  html.josi-journal-page #josiStaticQuickMenu a,
  html.josi-journal-page #josiQuickMenuPanel a {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 15px 18px 15px 52px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html.josi-journal-page .josi-journal-template-box {
    margin-top: 24px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  html.josi-journal-page .josi-journal-template-box h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  html.josi-journal-page .josi-journal-template-box figure,
  html.josi-journal-page .josi-journal-template-box img,
  html.josi-journal-page .josi-template-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  html.josi-journal-page .josi-template-image {
    border-radius: 18px !important;
  }

  html.josi-journal-page .josi-timeline-native,
  html.josi-journal-page .josi-timeline-image-frame {
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 22px !important;
  }

  html.josi-journal-page .josi-timeline-image {
    display: block !important;
    width: max(920px, 100%) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }

  html.josi-journal-page .josi-control-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin: 26px auto 0 !important;
    padding: 0 !important;
  }

  html.josi-journal-page .josi-theme-control,
  html.josi-journal-page .josi-language-control {
    max-width: 100% !important;
    transform: none !important;
  }

  html.josi-journal-page .pkp_structure_footer_wrapper {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-top: 34px !important;
    padding: 24px !important;
    border-radius: 28px 28px 0 0 !important;
    overflow: hidden !important;
  }

  html.josi-journal-page .josi-footer-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.josi-journal-page .josi-footer-info h2 {
    font-size: clamp(26px, 8.5vw, 36px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html.josi-journal-page .josi-footer-address,
  html.josi-journal-page .josi-footer-address * {
    font-size: 15px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html.josi-journal-page .josi-footer-contact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  html.josi-journal-page .josi-footer-contact-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 12px !important;
  }

  html.josi-journal-page .josi-footer-map,
  html.josi-journal-page .josi-footer-map iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 230px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 420px) {
  html.josi-journal-page .homepage_about,
  html.josi-journal-page #josiStaticAboutJournal,
  html.josi-journal-page .josi-static-about-main,
  html.josi-journal-page .josi-sectioned-home {
    padding: 14px !important;
  }

  html.josi-journal-page .josi-static-about-title,
  html.josi-journal-page .homepage_about h2 {
    font-size: clamp(24px, 8.3vw, 34px) !important;
  }

  html.josi-journal-page .josi-static-about-text p,
  html.josi-journal-page .homepage_about p {
    font-size: 16px !important;
    line-height: 1.58 !important;
  }

  html.josi-journal-page .josi-footer-contact {
    grid-template-columns: 1fr !important;
  }
}

/* High-specificity mobile overrides for the static About block. */
@media (max-width: 768px) {
  html.josi-journal-page #josiStaticAboutJournal {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 24px auto 24px !important;
    overflow: hidden !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-inner,
  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-profile {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: clamp(26px, 9vw, 38px) !important;
    line-height: 1.13 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-table {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    margin: 0 0 18px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-table dt,
  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-table dd {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-table dt {
    margin: 0 0 6px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-table dd {
    margin: 0 0 18px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-badges {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-badge {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-cover {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-cover img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-cover .josi-static-about-cover-back {
    display: none !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-text {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 22px !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
    text-align: left !important;
    text-align-last: left !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html.josi-journal-page #josiStaticAboutJournal .josi-static-about-text p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU CLEAN SIDEBAR FINAL
   Merapikan Quick Menu pada halaman hasil klik menu agar tidak
   menimpa konten dan tampil sebagai sidebar kanan yang rapi.
   ========================================================== */

@media (min-width: 1100px) {
  html.josi-journal-page.josi-static-quick-menu-active .pkp_structure_content,
  body.josi-journal-page.josi-static-quick-menu-page .pkp_structure_content {
    width: min(1120px, calc(100vw - 56px)) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.josi-journal-page.josi-static-quick-menu-active .pkp_structure_main,
  body.josi-journal-page.josi-static-quick-menu-page .pkp_structure_main,
  html.josi-journal-page.josi-static-quick-menu-active .pkp_structure_main[data-josi-static-page-ready],
  body.josi-journal-page.josi-static-quick-menu-page .pkp_structure_main[data-josi-static-page-ready] {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 44px auto 96px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.josi-journal-page.josi-static-quick-menu-active #josiAboutQuickRow,
  body.josi-journal-page.josi-static-quick-menu-page #josiAboutQuickRow {
    display: grid !important;
    grid-template-columns: minmax(0, 720px) 300px !important;
    gap: 32px !important;
    align-items: start !important;
    justify-content: center !important;
    width: 1052px !important;
    max-width: 1052px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.josi-journal-page.josi-static-quick-menu-active #josiAboutQuickRow > .homepage_about,
  body.josi-journal-page.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.josi-journal-page.josi-static-quick-menu-active #josiAboutQuickRow > .homepage_about > .josi-static-utility-page,
  body.josi-journal-page.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about > .josi-static-utility-page {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 !important;
    padding: 30px 32px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html.josi-journal-page.josi-static-quick-menu-active #josiStaticQuickMenu,
  body.josi-journal-page.josi-static-quick-menu-page #josiStaticQuickMenu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 118px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 12 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 174, 220, .28) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,252,255,.96)) !important;
    box-shadow:
      0 18px 42px rgba(18, 98, 132, .12),
      0 0 0 1px rgba(255,255,255,.86) inset !important;
    overflow: hidden !important;
  }
}

#josiStaticQuickMenu h2,
#josiQuickMenuPanel h2 {
  margin: 0 !important;
  padding: 16px 18px 14px !important;
  border-bottom: 1px solid rgba(0, 174, 220, .18) !important;
  background:
    linear-gradient(135deg, rgba(182, 236, 255, .95), rgba(198, 255, 244, .88)) !important;
  color: #073b55 !important;
  -webkit-text-fill-color: #073b55 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#josiStaticQuickMenu ul,
#josiQuickMenuPanel ul,
#josiQuickMenuPanel .josi-quick-menu-list {
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255,255,255,.76) !important;
}

#josiStaticQuickMenu li,
#josiQuickMenuPanel li {
  display: block !important;
  min-height: 0 !important;
  border-bottom: 1px solid rgba(0, 139, 190, .13) !important;
  background: transparent !important;
}

#josiStaticQuickMenu li:last-child,
#josiQuickMenuPanel li:last-child {
  border-bottom: 0 !important;
}

#josiStaticQuickMenu a,
#josiQuickMenuPanel a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 9px 14px 9px 42px !important;
  color: #073b55 !important;
  -webkit-text-fill-color: #073b55 !important;
  font-size: 13.5px !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#josiStaticQuickMenu a::before,
#josiQuickMenuPanel a::before {
  left: 16px !important;
  color: #00cbea !important;
  -webkit-text-fill-color: #00cbea !important;
  font-size: 15px !important;
}

#josiStaticQuickMenu li.is-active,
#josiStaticQuickMenu li:hover,
#josiStaticQuickMenu li:focus-within,
#josiQuickMenuPanel li.is-active,
#josiQuickMenuPanel li:hover,
#josiQuickMenuPanel li:focus-within {
  background:
    linear-gradient(90deg, rgba(0, 212, 255, .18), rgba(34, 246, 167, .10), rgba(255,255,255,.55)) !important;
}

#josiStaticQuickMenu a.is-active,
#josiStaticQuickMenu li.is-active > a,
#josiQuickMenuPanel a.is-active,
#josiQuickMenuPanel li.is-active > a {
  color: #012f48 !important;
  -webkit-text-fill-color: #012f48 !important;
}

html.josi-dark-mode #josiStaticQuickMenu,
html[data-josi-theme="dark"] #josiStaticQuickMenu,
body.josi-dark-mode #josiStaticQuickMenu {
  border-color: rgba(0, 212, 255, .28) !important;
  background:
    linear-gradient(145deg, rgba(7, 27, 49, .98), rgba(4, 17, 32, .96)) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(0, 212, 255, .08) inset !important;
}

html.josi-dark-mode #josiStaticQuickMenu h2,
html[data-josi-theme="dark"] #josiStaticQuickMenu h2,
body.josi-dark-mode #josiStaticQuickMenu h2 {
  border-bottom-color: rgba(0, 212, 255, .20) !important;
  background:
    linear-gradient(135deg, rgba(0, 128, 170, .52), rgba(26, 85, 118, .48)) !important;
  color: #e9fbff !important;
  -webkit-text-fill-color: #e9fbff !important;
}

html.josi-dark-mode #josiStaticQuickMenu ul,
html[data-josi-theme="dark"] #josiStaticQuickMenu ul,
body.josi-dark-mode #josiStaticQuickMenu ul {
  background: rgba(3, 14, 27, .52) !important;
}

html.josi-dark-mode #josiStaticQuickMenu li,
html[data-josi-theme="dark"] #josiStaticQuickMenu li,
body.josi-dark-mode #josiStaticQuickMenu li {
  border-bottom-color: rgba(0, 212, 255, .13) !important;
}

html.josi-dark-mode #josiStaticQuickMenu a,
html[data-josi-theme="dark"] #josiStaticQuickMenu a,
body.josi-dark-mode #josiStaticQuickMenu a {
  color: #d9f7ff !important;
  -webkit-text-fill-color: #d9f7ff !important;
}

@media (max-width: 1099px) {
  html.josi-journal-page.josi-static-quick-menu-active #josiAboutQuickRow,
  body.josi-journal-page.josi-static-quick-menu-page #josiAboutQuickRow {
    display: flex !important;
    flex-direction: column !important;
    width: min(720px, calc(100vw - 24px)) !important;
    max-width: min(720px, calc(100vw - 24px)) !important;
    margin: 28px auto 64px !important;
    gap: 20px !important;
  }

  html.josi-journal-page.josi-static-quick-menu-active #josiStaticQuickMenu,
  body.josi-journal-page.josi-static-quick-menu-page #josiStaticQuickMenu {
    order: -1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  html.josi-journal-page.josi-static-quick-menu-active #josiAboutQuickRow > .homepage_about,
  body.josi-journal-page.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================
   JOSI QUICK MENU HARD LAYOUT LOCK
   Override paling akhir untuk kasus server masih menampilkan
   Quick Menu menumpuk di atas konten.
   ========================================================== */

@media (min-width: 1100px) {
  html.josi-static-quick-menu-active #josiAboutQuickRow,
  body.josi-static-quick-menu-page #josiAboutQuickRow,
  html.josi-quick-menu-layout-fixed #josiAboutQuickRow,
  body.josi-quick-menu-layout-fixed #josiAboutQuickRow {
    display: grid !important;
    grid-template-columns: minmax(0, 700px) 300px !important;
    grid-template-areas: "content menu" !important;
    column-gap: 34px !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: center !important;
    width: min(1034px, calc(100vw - 56px)) !important;
    max-width: min(1034px, calc(100vw - 56px)) !important;
    margin: 44px auto 96px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.josi-static-quick-menu-active #josiAboutQuickRow > .homepage_about,
  body.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about,
  html.josi-quick-menu-layout-fixed #josiAboutQuickRow > .homepage_about,
  body.josi-quick-menu-layout-fixed #josiAboutQuickRow > .homepage_about,
  html.josi-static-quick-menu-active #josiAboutQuickRow > .page,
  body.josi-static-quick-menu-page #josiAboutQuickRow > .page,
  html.josi-quick-menu-layout-fixed #josiAboutQuickRow > .page,
  body.josi-quick-menu-layout-fixed #josiAboutQuickRow > .page {
    grid-area: content !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 700px !important;
    max-width: 700px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    clear: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.josi-static-quick-menu-active #josiAboutQuickRow > .homepage_about > .josi-static-utility-page,
  body.josi-static-quick-menu-page #josiAboutQuickRow > .homepage_about > .josi-static-utility-page,
  html.josi-quick-menu-layout-fixed #josiAboutQuickRow > .homepage_about > .josi-static-utility-page,
  body.josi-quick-menu-layout-fixed #josiAboutQuickRow > .homepage_about > .josi-static-utility-page,
  html.josi-static-quick-menu-active #josiAboutQuickRow > .josi-static-utility-page,
  body.josi-static-quick-menu-page #josiAboutQuickRow > .josi-static-utility-page,
  html.josi-quick-menu-layout-fixed #josiAboutQuickRow > .josi-static-utility-page,
  body.josi-quick-menu-layout-fixed #josiAboutQuickRow > .josi-static-utility-page {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 !important;
    padding: 30px 32px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html.josi-static-quick-menu-active #josiAboutQuickRow > #josiStaticQuickMenu,
  body.josi-static-quick-menu-page #josiAboutQuickRow > #josiStaticQuickMenu,
  html.josi-quick-menu-layout-fixed #josiAboutQuickRow > #josiStaticQuickMenu,
  body.josi-quick-menu-layout-fixed #josiAboutQuickRow > #josiStaticQuickMenu {
    grid-area: menu !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: stretch !important;
    position: sticky !important;
    top: 120px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    height: auto !important;
    max-height: calc(100vh - 140px) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    clear: none !important;
    z-index: 30 !important;
    overflow: hidden auto !important;
  }

  html.josi-static-quick-menu-active .pkp_structure_main:has(#josiAboutQuickRow),
  body.josi-static-quick-menu-page .pkp_structure_main:has(#josiAboutQuickRow),
  html.josi-quick-menu-layout-fixed .pkp_structure_main:has(#josiAboutQuickRow),
  body.josi-quick-menu-layout-fixed .pkp_structure_main:has(#josiAboutQuickRow) {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 1099px) {
  html.josi-static-quick-menu-active #josiAboutQuickRow,
  body.josi-static-quick-menu-page #josiAboutQuickRow,
  html.josi-quick-menu-layout-fixed #josiAboutQuickRow,
  body.josi-quick-menu-layout-fixed #josiAboutQuickRow {
    display: flex !important;
    flex-direction: column !important;
    width: min(720px, calc(100vw - 24px)) !important;
    max-width: min(720px, calc(100vw - 24px)) !important;
    margin: 28px auto 64px !important;
    gap: 18px !important;
  }

  html.josi-static-quick-menu-active #josiAboutQuickRow > #josiStaticQuickMenu,
  body.josi-static-quick-menu-page #josiAboutQuickRow > #josiStaticQuickMenu,
  html.josi-quick-menu-layout-fixed #josiAboutQuickRow > #josiStaticQuickMenu,
  body.josi-quick-menu-layout-fixed #josiAboutQuickRow > #josiStaticQuickMenu {
    order: -1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}