@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');

/* =====================================================================
   JAVA — Journal of Vocational in Aquaculture
   Stylesheet "Navy Tide" untuk OJS 3.4 Default Theme

   PASANG: Settings > Website > Appearance > Advanced > Journal style sheet
   -> GANTI file lama dengan file ini (jangan digabung).

   Warna diambil dari identitas JAVA:
     biru dongker  -> warna dasar (judul, menu, footer)
     teal logo     -> #00a8a8 pada tulisan "Vocational in Aquaculture"
     oranye logo   -> #f07830 pada tulisan "Journal of" (aksen kecil saja)
   Gradasi khas: dongker -> teal.

    0. Warna, jarak, huruf      7. Halaman artikel
    1. Dasar                    8. Arsip
    2. Header & menu            9. Sidebar
    3. Tata letak              10. Footer (dengan gelombang)
    4. Komponen umum           11. Tablet & ponsel
    5. Beranda                 12. Animasi gulir, aksesibilitas, cetak
    6. Daftar artikel
   ===================================================================== */


/* ---------- 0. WARNA, JARAK, HURUF ---------------------------------- */
:root {
  --navy-900:   #0a1f3a;
  --navy:       #0f2d52;   /* biru dongker: warna dasar           */
  --teal:       #0aa3a3;   /* teal logo                           */
  --teal-d:     #076f75;   /* teal gelap untuk tautan & label (5.9:1) */
  --teal-600:   #0a7d83;   /* teal untuk latar bertuliskan putih (4.9:1) */
  --teal-l:     #8fe0dc;   /* teal terang di atas latar gelap     */
  --orange:     #ee7a32;   /* oranye logo: aksen kecil            */
  --orange-l:   #ffb98a;
  --orange-d:   #b9541a;   /* oranye untuk latar label berteks putih (4.9:1) */

  /* --grad & --grad-h dipakai di latar bertuliskan putih: ujungnya teal gelap agar tetap terbaca.
     Garis dekoratif (--grad-line) memakai teal logo yang terang. */
  --grad:       linear-gradient(120deg, var(--navy) 0%, #114f74 55%, var(--teal-600) 100%);
  --grad-h:     linear-gradient(90deg, var(--navy), var(--teal-600));
  --grad-line:  linear-gradient(90deg, var(--navy) 0%, var(--teal) 75%, var(--orange) 100%);
  --grad-deep:  linear-gradient(135deg, var(--navy-900) 0%, var(--navy) 45%, #0b5d6e 100%);

  /* Warna teks (kontras di atas putih, WCAG AA = min 4.5:1) */
  --c-head:     #0f2d52;   /* judul & tautan judul  13.9:1 */
  --c-text:     #2b3648;   /* teks isi              12.1:1 */
  --c-muted:    #566377;   /* meta: tanggal, halaman 6.0:1 */
  --c-on-dark:  #e3ecf5;   /* teks di latar gelap */
  --c-on-dark-muted: #c2d1de;
  --c-line:     #e1e7ee;
  --c-tint:     #eef7f7;   /* latar lembut teal */
  --c-tint-2:   #f6fafb;
  --c-bg:       #f2f5f8;
  --c-card:     #ffffff;

  --gutter:     24px;      /* tepi kiri-kanan halaman */
  --gap:        24px;      /* jarak antar-kotak       */
  --pad:        32px;      /* padding kotak utama     */
  --pad-sm:     24px;      /* padding kotak sidebar   */

  --sh:         0 1px 2px rgba(15, 45, 82, .05), 0 6px 18px -8px rgba(15, 45, 82, .14);
  --sh-hover:   0 2px 4px rgba(15, 45, 82, .06), 0 18px 34px -14px rgba(15, 45, 82, .35);
  --ease:       cubic-bezier(.22, .8, .24, 1);
  --ease-soft:  cubic-bezier(.2, .7, .2, 1);

  /* Bayangan sampul: berlapis & lembut seperti buku sungguhan */
  --sh-book:       0 1px 2px rgba(10, 31, 58, .10), 0 8px 16px -6px rgba(10, 31, 58, .22), 0 28px 48px -18px rgba(10, 31, 58, .38);
  --sh-book-hover: 0 2px 4px rgba(10, 31, 58, .10), 0 14px 26px -8px rgba(10, 31, 58, .26), 0 44px 70px -24px rgba(10, 31, 58, .45);
  --shine:         linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 48%, rgba(255, 255, 255, .05) 56%, transparent 70%);
  --t:          .35s var(--ease);

  --font:       'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --display:    'Sora', 'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  /* Skala ukuran teks (satu sumber untuk seluruh situs) */
  --fs-2xs:     11.5px;    /* label huruf kapital berjarak  */
  --fs-xs:      13px;      /* meta: tanggal, DOI, halaman   */
  --fs-sm:      14px;      /* sidebar, tombol, penulis      */
  --fs-ui:      15px;      /* menu, judul blok sidebar      */
  --fs-base:    16px;      /* teks isi                      */
  --fs-md:      17px;      /* judul artikel & pengumuman    */
  --fs-h3:      18px;      /* subjudul                      */
  --fs-lg:      22px;      /* judul seksi                   */
  --fs-xl:      clamp(26px, 20px + 1.4vw, 34px);   /* judul halaman */
  --max:        1200px;

  /* Gelombang (motif akuakultur) */
  --wave-footer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23f2f5f8' d='M0 0h1440v22c-140 20-280 30-420 20S760 12 620 18 340 50 200 46 60 26 0 30z'/%3E%3C/svg%3E");
  --wave-soft:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' preserveAspectRatio='none'%3E%3Cpath d='M0 42c50-22 100 22 150 0s100-22 150 0v48H0z' fill='%23ffffff' fill-opacity='.07'/%3E%3Cpath d='M0 60c50-18 100 18 150 0s100-18 150 0v30H0z' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E");
}


/* ---------- 1. DASAR ------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--c-text);
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(10, 163, 163, .07), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgba(15, 45, 82, .06), transparent 60%),
    var(--c-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* Portal submission IPB (submission3) memuat stylesheet situs yang memberi
   latar gambar pada html & body; selektor "html body" lebih kuat sehingga
   latar JAVA tetap dipakai di kedua portal. */
html { background: var(--c-bg); }
html body {
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(10, 163, 163, .07), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgba(15, 45, 82, .06), transparent 60%),
    var(--c-bg);
  background-attachment: fixed;
}
.pkp_structure_page { background: transparent; }
::selection { background: rgba(10, 163, 163, .22); color: var(--navy-900); }
a { color: var(--teal-d); text-underline-offset: 3px; transition: color var(--t); }
a:hover, a:focus { color: var(--navy); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { color: var(--c-head); }

/* Tema bawaan memakai serif "Lora" di banyak judul; ganti dengan Sora */
h1, h2, h3, h4, h5, h6,
.obj_article_summary > .title,
.obj_issue_summary .title,
.cmp_breadcrumbs .current h1 { font-family: var(--display) !important; letter-spacing: -.01em; }
.obj_article_details .item .label { font-family: var(--font) !important; }

/* Tautan di dalam teks: garis bawah gradasi yang tumbuh saat hover */
.pkp_structure_main p a:not([class]),
.pkp_structure_main li a:not([class]) {
  text-decoration: none;
  background: var(--grad-h) no-repeat left bottom / 0% 2px;
  transition: background-size .4s var(--ease), color var(--t);
}
.pkp_structure_main p a:not([class]):hover,
.pkp_structure_main li a:not([class]):hover { background-size: 100% 2px; }


/* ---------- 2. HEADER & MENU ---------------------------------------- */
.pkp_structure_head {
  background: var(--grad) top / 100% 40px no-repeat, var(--c-card);
  border: 0;
  box-shadow: 0 1px 0 var(--c-line);
}

/* Lebar tetap bawaan tema dilepas */
.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user,
.pkp_structure_content,
.pkp_structure_footer { width: auto; }

/* Clearfix bawaan tema tidak boleh menjadi item flex/grid */
.pkp_navigation_primary_wrapper::before, .pkp_navigation_primary_wrapper::after,
.pkp_navigation_primary::before, .pkp_navigation_primary::after,
.pkp_navigation_user::before, .pkp_navigation_user::after,
.pkp_structure_content::before, .pkp_structure_content::after,
.obj_issue_toc .heading::before, .obj_issue_toc .heading::after,
.obj_issue_summary::before, .obj_issue_summary::after,
.obj_article_details .row::before, .obj_article_details .row::after,
.pkp_structure_main::before, .pkp_structure_main::after { display: none; }

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--gutter) 0;   /* 40px bar atas + 16px jarak ke banner */
}

/* Bar atas: info jurnal */
.pkp_structure_head .pkp_head_wrapper::before {
  content: "E-ISSN 3109-7731   \2022   Open Access   \2022   Peer-Reviewed   \2022   CC BY 4.0";
  white-space: pre;
  position: absolute;
  top: 0; left: var(--gutter);
  height: 40px;
  display: flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-on-dark);
}

/* Register & Login */
.pkp_navigation_user_wrapper {
  position: absolute;
  top: 0; left: auto; right: var(--gutter);
  transform: none;
  height: 40px;
  width: auto;
  padding: 0;
  display: flex;
  align-items: center;
}
.pkp_navigation_user { display: flex; gap: 8px; margin: 0; padding: 0; }
.pkp_navigation_user > li { margin: 0; }
.pkp_navigation_user > li > a,
.pkp_navigation_user > li:last-child > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .35);
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.pkp_navigation_user > li > a::before { font-family: FontAwesome; font-weight: normal; }
.pkp_navigation_user > li > a[href*="register"]::before { content: "\f234"; }
.pkp_navigation_user > li > a[href*="login"]::before    { content: "\f090"; }
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus { color: var(--navy); background: #fff; border-color: #fff; }
.pkp_navigation_user ul { background: var(--c-card); border: 1px solid var(--c-line); box-shadow: var(--sh-hover); }
.pkp_navigation_user ul a { color: var(--c-text); }

/* Banner */
.pkp_site_name_wrapper { padding: 0; margin: 0; height: auto; }
.pkp_site_name {
  position: relative;
  top: 0; left: 0; right: auto;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--sh);
}
.pkp_site_name .is_img { display: block; margin: 0; }
.pkp_site_name .is_img img {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  transform-origin: 70% 50%;
  animation: bnZoom 24s ease-in-out infinite alternate;     /* gerak perlahan seperti kamera */
}

/* Efek banner: bayangan biru dari pojok kanan bawah (bagian putih-biru gambar
   tidak ditimpa), kilau berkala, gerak kamera pelan, dan garis dongker-teal
   tebal di dasar. Semua lapisan tidak menghalangi klik. */
@keyframes bnZoom  { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes bnShine { 0%, 45% { transform: translateX(-110%) skewX(-18deg); } 100% { transform: translateX(400%) skewX(-18deg); } }   /* menyapu sampai ujung kanan */
@keyframes bnLine  { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.pkp_site_name::before {                         /* bayangan biru dari pojok kanan bawah, memudar ke kiri-atas */
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(120% 140% at 100% 100%, rgba(10, 31, 58, .62) 0%, rgba(15, 45, 82, .38) 28%, rgba(10, 125, 131, .16) 50%, transparent 72%);
  pointer-events: none;
}
.pkp_site_name::after {                          /* kilau diagonal yang lewat berkala */
  content: "";
  position: absolute;
  z-index: 2;
  top: 0; bottom: 0; left: 0;
  width: 30%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(214, 245, 243, .10) 22%,
    rgba(236, 251, 250, .28) 38%,
    rgba(255, 255, 255, .42) 50%,
    rgba(236, 251, 250, .28) 62%,
    rgba(214, 245, 243, .10) 78%,
    rgba(255, 255, 255, 0) 100%);                    /* cahaya lembut kebiruan, tanpa tepi tajam */
  filter: blur(6px);
  pointer-events: none;
  animation: bnShine 10s cubic-bezier(.45, 0, .25, 1) infinite;
}
.pkp_site_name .is_img { position: relative; }
.pkp_site_name .is_img::after {                  /* garis gradasi menyala di dasar banner */
  content: "";
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  height: 7px;                                   /* garis bawah tebal: dongker-teal mengalir */
  background: linear-gradient(90deg, var(--navy-900), var(--navy), var(--teal), var(--navy), var(--navy-900)) 0 0 / 200% 100%;
  box-shadow: 0 -2px 14px rgba(10, 163, 163, .35);
  animation: bnLine 6s linear infinite;
}
.pkp_site_name:hover::after { animation-duration: 4s; }  /* hover: kilau lewat lebih sering */
@media (prefers-reduced-motion: reduce) {
  .pkp_site_name .is_img img, .pkp_site_name::after, .pkp_site_name .is_img::after { animation: none; }
}

/* Menu utama */
.pkp_site_nav_menu { padding: 0; background: transparent; }
.pkp_navigation_primary_row { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.pkp_navigation_primary_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: none;
  margin: 0;
  padding: 12px 0;
}
.pkp_navigation_primary { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; text-align: left; }
.pkp_site_nav_menu .pkp_navigation_primary { margin: 0 0 0 -16px; }   /* ikon Home sejajar tepi banner */
.pkp_navigation_primary > li { margin: 0; padding: 0; position: relative; }
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li:first-child > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border: 0;
  transition: color var(--t);
}
.pkp_navigation_primary > li > a::before {
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 14px;
  color: var(--teal);
  transition: transform var(--t);
}
.pkp_navigation_primary > li > a::after {   /* garis gradasi tumbuh dari kiri */
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  background: var(--grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.pkp_navigation_primary a[href$="/index"]::before        { content: "\f015"; }
.pkp_navigation_primary a[href*="issue/current"]::before { content: "\f02d"; }
.pkp_navigation_primary a[href*="issue/archive"]::before { content: "\f187"; }
.pkp_navigation_primary a[href*="/about"]::before        { content: "\f05a"; }
.pkp_navigation_primary a[href*="announcement"]::before  { content: "\f0a1"; }
.pkp_navigation_primary a[href*="editorialTeam"]::before { content: "\f0c0"; }
.pkp_navigation_primary a[href*="submission"]::before    { content: "\f044"; }
.pkp_navigation_primary ul a::before,
.pkp_navigation_primary ul a::after { display: none; }

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a { color: var(--teal-d); background: transparent; border: 0; }
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after,
.pkp_navigation_primary > li.current > a::after { transform: scaleX(1); }
.pkp_navigation_primary > li > a:hover::before { transform: translateY(-2px); }

/* Submenu */
.pkp_navigation_primary ul {
  margin: 4px 0 0;
  padding: 8px;
  min-width: 240px;
  background: var(--c-card);
  border: 0;
  border-top: 3px solid var(--teal);
  box-shadow: var(--sh-hover);
}
.pkp_navigation_primary ul a {
  display: block;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  border: 0;
  transition: background-color var(--t), color var(--t), padding-left var(--t);
}
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus { color: var(--teal-d); background: var(--c-tint); padding-left: 16px; border: 0; }

/* Search */
.pkp_navigation_search_wrapper { margin: 0; padding: 0; float: none; }
.pkp_navigation_search_wrapper > a {          /* kolom pencarian oval: latar tipis + garis tepi halus */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  margin: 0;
  padding: 9px 20px 9px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: none;
  background: var(--c-tint-2);
  border: 1px solid rgba(10, 163, 163, .35);
  border-radius: 999px;
  box-shadow: none;
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t), color var(--t);
}
.pkp_navigation_search_wrapper > a .fa { color: var(--teal); font-size: 14px; }
.pkp_navigation_search_wrapper > a:hover,
.pkp_navigation_search_wrapper > a:focus-visible {
  color: var(--navy);
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(10, 163, 163, .12);
}

/* Garis khas di bawah header: dongker -> teal -> oranye */
.pkp_structure_head::after { content: ""; display: block; height: 4px; background: var(--grad-line); }


/* ---------- 3. TATA LETAK ------------------------------------------- */
.pkp_structure_content {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--gap) var(--gutter) 64px;
}

@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--gap);
    align-items: start;
  }
  .pkp_structure_main,
  .pkp_structure_sidebar { float: none; width: auto; margin: 0; }
  .pkp_structure_content.has_sidebar .pkp_structure_main    { grid-column: 1; grid-row: 1; }
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar { grid-column: 2; grid-row: 1; }
  /* Desktop: pencarian ada di blok sidebar, jadi tombol Search di menu disembunyikan.
     Ponsel tetap memakai Search di menu, karena sidebar berada di bawah halaman. */
  .pkp_navigation_search_wrapper { display: none; }

  /* Banner ikut menggulir, lalu menu menempel di atas layar.
     top = tinggi bar atas + jarak + tinggi banner (rasio 1920x400) */
  .pkp_structure_head {
    position: sticky;
    top: calc(-56px - (min(100vw, var(--max)) - 2 * var(--gutter)) * 0.20833);
    z-index: 1000;
  }
}

.pkp_structure_main {
  container-type: inline-size;
  padding: var(--pad);
  background: var(--c-card);
  border: 0;
  border-bottom: 4px solid;
  border-image: var(--grad-h) 1;
  box-shadow: var(--sh);
}

@keyframes jFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pkp_structure_main { animation: jFade .6s var(--ease) both; }


/* ---------- 4. KOMPONEN UMUM ---------------------------------------- */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 { margin: 0 0 16px; }
.pkp_structure_main p,
.pkp_structure_main ul { line-height: 1.75; margin: 0 0 1em; }

/* Judul halaman: teks bergradasi */
.pkp_structure_main h1,
.pkp_structure_main .page_title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--navy);
  background: linear-gradient(100deg, var(--navy) 30%, var(--teal-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Judul seksi: bar gradasi kiri + garis yang memudar */
.page_index_journal > section > h2,
.pkp_structure_main .page > h1,
.page_issue_archive > h1,
.obj_issue_toc .sections .section > h2,
.obj_issue_toc .sections .section > h3 {
  position: relative;
  top: 0; left: 0;
  transform: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 0 16px;
  margin: 0 0 24px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.page_index_journal > section > h2::before,
.pkp_structure_main .page > h1::before,
.page_issue_archive > h1::before,
.obj_issue_toc .sections .section > h2::before,
.obj_issue_toc .sections .section > h3::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 5px;
  background: linear-gradient(var(--navy), var(--teal));
}
.page_index_journal > section > h2::after,
.pkp_structure_main .page > h1::after,
.page_issue_archive > h1::after,
.obj_issue_toc .sections .section > h2::after,
.obj_issue_toc .sections .section > h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(10, 163, 163, .5), var(--c-line) 40%, transparent);
}
.obj_issue_toc .sections .section > h2,
.obj_issue_toc .sections .section > h3 { font-size: var(--fs-h3); }

.pkp_structure_main h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: 24px; }
.pkp_structure_main strong,
.pkp_structure_main b { color: var(--c-head); }

/* Halaman statis (About, kebijakan, panduan): gaya inline dari editor
   (Arial, 12-16px, justify) dinetralkan agar sama dengan teks situs */
.pkp_structure_main .page div[style*="font"],
.pkp_structure_main .page p[style*="font"],
.pkp_structure_main .page span[style*="font"] {
  max-width: none !important;
  font-family: var(--font) !important;
  font-size: var(--fs-base) !important;
  line-height: 1.75 !important;
  text-align: left !important;
  color: var(--c-text);
}
.pkp_structure_main .page p { margin: 0 0 1.1em; max-width: 72ch; }      /* panjang baris nyaman dibaca */
.pkp_structure_main .page p[style*="margin: 0"],
.pkp_structure_main .page p[style*="margin:0"] { margin: 0 0 1.1em !important; }
.pkp_structure_main .page strong { font-weight: 700; color: var(--c-head); }
.pkp_structure_main .page a[style] {
  color: var(--teal-d) !important;
  font-weight: 600 !important;
  text-decoration: none;
  background: var(--grad-h) no-repeat left bottom / 0% 2px;
  transition: background-size .4s var(--ease);
}
.pkp_structure_main .page a[style]:hover { background-size: 100% 2px; }
.pkp_structure_main .page img[style*="float"] {          /* sampul: gaya buku miring seperti beranda */
  float: left;
  width: 200px;
  max-width: 42%;
  height: auto;
  border: 0 !important;
  margin: 6px 32px 20px 0 !important;
  transform: perspective(1100px) rotateY(16deg) rotateX(2deg);
  transform-origin: left center;
  box-shadow: var(--sh-book);
  transition: transform .9s var(--ease-soft), box-shadow .9s var(--ease-soft);
}
.pkp_structure_main .page img[style*="float"]:hover {
  transform: perspective(1100px) rotateY(4deg) translateY(-6px);
  box-shadow: var(--sh-book-hover);
}

/* Halaman About: subjudul, tabel "Journal at a Glance", tombol ajakan */
.pkp_structure_main .page h2,
.homepage_about h3 { clear: both; }
.pkp_structure_main .page div > h2,
.pkp_structure_main .page > h2 {          /* judul bagian di halaman statis: 20px */
  margin: 40px 0 14px;
  padding-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--c-line);
  scroll-margin-top: 96px;                 /* tautan daftar isi tidak tertutup menu */
}
.pkp_structure_main .page div > h3,
.pkp_structure_main .page > h3 {          /* subjudul: 16px, lebih kecil dari judul bagian */
  margin: 24px 0 8px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-head);
}
.pkp_structure_main .page li { margin-bottom: .4em; }
.pkp_structure_main table.java-facts {
  clear: both;
  width: 100%;
  max-width: 72ch;
  margin: 8px 0 24px;
  border: 0;
  border-top: 2px solid var(--navy);
}
.pkp_structure_main table.java-facts th,
.pkp_structure_main table.java-facts td {
  padding: 10px 0;
  vertical-align: top;
  background: none;
  border-bottom: 1px solid var(--c-line);
}
.pkp_structure_main table.java-facts th {
  width: 36%;
  padding-right: 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-muted);
  text-align: left;
}
.pkp_structure_main table.java-facts td { font-size: var(--fs-sm); color: var(--c-text); }
.pkp_structure_main table.java-facts tr:nth-child(even) td { background: none; }
.java-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; clear: both; }
.java-cta .cmp_button { margin: 0; }

/* Tabel di halaman statis */
.pkp_structure_main table { width: 100%; border-collapse: collapse; border: 1px solid var(--c-line); }
.pkp_structure_main table th { background: var(--navy); color: #fff; text-align: left; font-weight: 700; }
.pkp_structure_main table th,
.pkp_structure_main table td { padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.pkp_structure_main table tr:nth-child(even) td { background: var(--c-tint-2); }

/* Breadcrumb */
.cmp_breadcrumbs { margin: 0 0 16px; }
.cmp_breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; font-size: var(--fs-xs); }
.cmp_breadcrumbs li { color: var(--c-muted); }
.cmp_breadcrumbs a { color: var(--c-muted); font-weight: 600; text-decoration: none; }
.cmp_breadcrumbs a:hover { color: var(--teal-d); }
.cmp_breadcrumbs .separator { padding: 0 8px; font-size: 0; }
.cmp_breadcrumbs .separator::before { content: "\f105"; font-family: FontAwesome; font-size: 12px; color: var(--orange); }
.cmp_breadcrumbs .current { color: var(--c-head); font-weight: 600; }

/* Tombol garis tepi -> terisi gradasi dari kiri (efek utama situs) */
.obj_galley_link,
.cmp_button,
.pkp_button,
.read_more,
.block_make_submission a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  text-decoration: none;
  border: 1.5px solid var(--navy);
  background: var(--grad-h) no-repeat left / 0% 100%;
  background-origin: border-box;   /* gradasi ikut menutupi garis tepi: tanpa bingkai putih */
  cursor: pointer;
  transition: background-size .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.obj_galley_link:hover, .obj_galley_link:focus-visible,
.cmp_button:hover, .cmp_button:focus-visible,
.pkp_button:hover, .pkp_button:focus-visible,
.read_more:hover, .read_more:focus-visible,
.block_make_submission a:hover {
  color: #fff;
  background-size: 100% 100%;
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(10, 163, 163, .7);
}
.obj_galley_link::before { font-family: FontAwesome; font-weight: normal; content: "\f0f6"; }
.obj_galley_link.pdf::before { content: "\f1c1"; color: var(--orange); transition: color var(--t); }
.obj_galley_link.pdf:hover::before { color: #fff; }
.read_more::after { content: "\f105"; font-family: FontAwesome; transition: transform var(--t); }
.read_more:hover::after { transform: translateX(4px); }

/* Tema bawaan memosisikan ikon ">" secara absolut & memaksa inline-block:
   kembalikan agar ikon sejajar tengah dengan teks */
.pkp_page_index .current_issue .read_more,
.obj_announcement_summary .read_more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--navy);
}
.pkp_page_index .current_issue .read_more::after,
.obj_announcement_summary .read_more::after {
  position: static;
  top: auto; right: auto;
  width: auto; height: auto;
  font-size: 1.1em;
  line-height: 1;
  transform: none;
}
.pkp_page_index .current_issue .read_more:hover,
.pkp_page_index .current_issue .read_more:focus-visible,
.obj_announcement_summary .read_more:hover,
.obj_announcement_summary .read_more:focus-visible { color: #fff; }
.pkp_page_index .current_issue .read_more:hover::after,
.obj_announcement_summary .read_more:hover::after { transform: translateX(4px); }

/* Tombol isi penuh (form) */
.cmp_form .buttons button,
.page_search .submit button,
button.submit,
input[type="submit"] {
  padding: 10px 24px;
  font-family: var(--font);
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  background-size: 200% 100%;
  border: 0;
  cursor: pointer;
  transition: background-position .5s var(--ease), box-shadow var(--t);
}
.cmp_form .buttons button:hover,
.page_search .submit button:hover,
button.submit:hover,
input[type="submit"]:hover { background-position: 100% 0; box-shadow: var(--sh-hover); }

/* Input */
.pkp_structure_main input[type="text"],
.pkp_structure_main input[type="email"],
.pkp_structure_main input[type="password"],
.pkp_structure_main input[type="search"],
.pkp_structure_main input[type="url"],
.pkp_structure_main input[type="tel"],
.pkp_structure_main select,
.pkp_structure_main textarea {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--c-text);
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 0;
  transition: border-color var(--t), box-shadow var(--t);
}
.pkp_structure_main input:focus,
.pkp_structure_main select:focus,
.pkp_structure_main textarea:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(10, 163, 163, .18);
}
.cmp_notification {
  padding: 12px 16px;
  color: var(--c-text);
  background: var(--c-tint);
  border: 0;
  border-left: 4px solid var(--teal);
}

/* Paginasi */
.cmp_pagination a,
.cmp_pagination .current {
  display: inline-block;
  min-width: 36px;
  padding: 6px 10px;
  margin: 0 2px;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--c-line);
}
.cmp_pagination a:hover { border-color: var(--teal); }
.cmp_pagination .current { color: #fff; background: var(--grad); border-color: transparent; }


/* Halaman Search: kolom oval senada dengan menu, ikon sebaris dengan teks,
   filter tanggal tersusun rapi (tema bawaan: ikon absolut menimpa teks) */
.page_search .search_input { margin: 0 0 20px; }
.pkp_structure_main .page_search .search_input .query {
  width: 100%;
  height: auto;
  padding: 12px 22px;
  font-size: var(--fs-base);
  line-height: 1.4;
  background: var(--c-tint-2);
  border: 1px solid rgba(10, 163, 163, .35);
  border-radius: 999px;
}
.pkp_structure_main .page_search .search_input .query:focus {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(10, 163, 163, .12);
}
.page_search .search_advanced {
  margin: 0 0 20px;
  padding: 4px 20px 20px;
  border: 1px solid var(--c-line);
}
.page_search .search_advanced::before,
.page_search .search_advanced::after { display: none; }
.page_search .search_advanced > legend {
  padding: 0 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}
.page_search .date_range,
.page_search .author { float: none; width: auto; }
.page_search .date_range {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 24px;
  margin: 0 0 16px;
}
.page_search .date_range fieldset { margin: 0; padding: 0; border: 0; }
.page_search .date_range legend,
.page_search .author label {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.page_search .date_range fieldset { display: flex; flex-wrap: wrap; gap: 6px; }
.page_search .date_range fieldset > legend { flex: 0 0 100%; }
.pkp_structure_main .page_search .date_range select {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 8px 10px;
  font-size: var(--fs-sm);
}
.page_search .date_range select + label + select { margin-left: 0; }
.pkp_structure_main .page_search .author input { width: 100%; padding: 8px 12px; font-size: var(--fs-sm); }
.page_search .submit { text-align: right; }
.pkp_structure_main .page_search .submit button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
}
.pkp_structure_main .page_search .submit button::after {      /* ikon kaca pembesar sebaris, di kiri teks */
  position: static;
  order: -1;
  width: auto;
  height: auto;
  line-height: 1;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}
.pkp_structure_main .page_search .submit button:hover::after,
.pkp_structure_main .page_search .submit button:focus::after { background: none; box-shadow: none; }
.page_search .cmp_notification { margin-top: 20px; }

/* ---------- 5. BERANDA ---------------------------------------------- */
.page_index_journal > section,
.page_index_journal .homepage_about,
.page_index_journal .cmp_announcements,
.page_index_journal .current_issue {
  margin: 0 0 40px;
  padding: 0;
  border: 0;
}
.page_index_journal > section:last-child { margin-bottom: 0; }

/* About: sampul dengan bingkai teal bergeser */
.homepage_about { color: var(--c-text); }
.homepage_about p[style] { margin-bottom: 1em !important; }
.homepage_about img[style*="float"] {   /* sampul miring 3D, tegak perlahan saat hover */
  float: left;
  width: 200px;
  max-width: 42%;
  height: auto;
  border: 0 !important;
  transform: perspective(1100px) rotateY(16deg) rotateX(2deg);
  transform-origin: left center;
  box-shadow: var(--sh-book);
  transition: transform .9s var(--ease-soft), box-shadow .9s var(--ease-soft);
}
.homepage_about img[style*="float"]:hover {
  transform: perspective(1100px) rotateY(4deg) translateY(-6px);
  box-shadow: var(--sh-book-hover);
}
.homepage_about a[style] { color: var(--teal-d) !important; }
.homepage_about a[style]:hover { color: var(--navy) !important; }

/* Statistik ringkas di beranda (Journal Summary tanpa HTML).
   Panel selebar konten di bawah sampul. Latar & label = gambar SVG di
   .homepage_about::after; angka & grafik = pseudo-elemen paragraf ringkasan,
   jadi angkanya berhitung dari 0 dan grafiknya terisi seperti di About.
   Hover/klik pada satu statistik mengulang animasinya dari 0.
   Syarat: ringkasan = 1 paragraf sampul + 3 paragraf teks (seperti sekarang). */
.page_index_journal .homepage_about {
  position: relative;
  container-type: inline-size;
  padding-bottom: calc(100% / 6 + 24px);          /* % = lebar ringkasan */
}
.homepage_about::after {                        /* panel: latar, pemisah, label */
  content: "";
  content: "" / "Acceptance rate 40%, rejection rate 65%, 42 days to first editorial decision, 154 days to acceptance";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(100cqw / 6);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 100%22 preserveAspectRatio=%22none%22 font-family=%22Helvetica Neue,Segoe UI,Arial,sans-serif%22%3E %3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%230a1f3a%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%230f2d52%22/%3E%3Cstop offset=%221%22 stop-color=%22%230a7d83%22/%3E%3C/linearGradient%3E %3CradialGradient id=%22glow%22 cx=%221%22 cy=%220%22 r=%22.7%22%3E%3Cstop offset=%220%22 stop-color=%22%238fe0dc%22 stop-opacity=%22.28%22/%3E%3Cstop offset=%221%22 stop-color=%22%238fe0dc%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E %3Crect width=%22600%22 height=%22100%22 fill=%22url(%23g)%22/%3E%3Crect width=%22600%22 height=%22100%22 fill=%22url(%23glow)%22/%3E %3Cpath d=%22M150 14V86M300 14V86M450 14V86%22 stroke=%22%23fff%22 stroke-opacity=%22.14%22/%3E%3Ccircle cx=%2275%22 cy=%2236%22 r=%2221%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.16%22 stroke-width=%226%22/%3E%3Ctext x=%2275%22 y=%2282%22 text-anchor=%22middle%22 font-size=%2210.5%22 font-weight=%22700%22 fill=%22%23fff%22%3EAcceptance rate%3C/text%3E%3Ccircle cx=%22225%22 cy=%2236%22 r=%2221%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.16%22 stroke-width=%226%22/%3E%3Ctext x=%22225%22 y=%2282%22 text-anchor=%22middle%22 font-size=%2210.5%22 font-weight=%22700%22 fill=%22%23fff%22%3ERejection rate%3C/text%3E%3Ctext x=%22375%22 y=%2255%22 text-anchor=%22middle%22 font-size=%229.5%22 font-weight=%22700%22 fill=%22%238fe0dc%22 letter-spacing=%22.5%22%3EDAYS%3C/text%3E%3Crect x=%22343%22 y=%2261%22 width=%2264%22 height=%223.5%22 rx=%221.75%22 fill=%22%23fff%22 fill-opacity=%22.16%22/%3E%3Ctext x=%22375%22 y=%2282%22 text-anchor=%22middle%22 font-size=%2210.5%22 font-weight=%22700%22 fill=%22%23fff%22%3EFirst decision%3C/text%3E%3Ctext x=%22525%22 y=%2255%22 text-anchor=%22middle%22 font-size=%229.5%22 font-weight=%22700%22 fill=%22%238fe0dc%22 letter-spacing=%22.5%22%3EDAYS%3C/text%3E%3Crect x=%22493%22 y=%2261%22 width=%2264%22 height=%223.5%22 rx=%221.75%22 fill=%22%23fff%22 fill-opacity=%22.16%22/%3E%3Ctext x=%22525%22 y=%2282%22 text-anchor=%22middle%22 font-size=%2210.5%22 font-weight=%22700%22 fill=%22%23fff%22%3ETime to acceptance%3C/text%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: 0 14px 28px -18px rgba(10, 31, 58, .7);
}
.homepage_about > p { position: static; }
.homepage_about > p:nth-of-type(-n+4)::before,
.homepage_about > p:nth-of-type(-n+4)::after {
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
/* angka berhitung */
.homepage_about > p:nth-of-type(-n+4)::after {
  counter-reset: jv var(--jv);
  content: counter(jv);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: center;
  color: #fff;
  animation: jvCount 1.8s var(--ease) both;
}
.homepage_about > p:nth-of-type(2) { --to: 40; }
.homepage_about > p:nth-of-type(3) { --to: 65; }
.homepage_about > p:nth-of-type(4) { --to: 42; --jw: 23; }
.homepage_about > p:nth-of-type(1) { --to: 154; --jw: 86; }
.homepage_about > p:nth-of-type(2)::after,
.homepage_about > p:nth-of-type(3)::after { content: counter(jv) "%"; }
/* donat */
.homepage_about > p:nth-of-type(2)::before,
.homepage_about > p:nth-of-type(3)::before {
  content: "";
  border-radius: 50%;
  background: conic-gradient(var(--teal-l) 0, #fff calc(var(--jv) * 1%), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 75%);
  mask: radial-gradient(closest-side, transparent 74%, #000 75%);
  animation: jvCount 1.8s var(--ease) both;
}
/* garis skala hari */
.homepage_about > p:nth-of-type(4)::before,
.homepage_about > p:nth-of-type(1)::before {
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-l), #fff);
  transform-origin: left;
  animation: jhGrowX 1.8s var(--ease) both;
}
.homepage_about > p:nth-of-type(3)::before, .homepage_about > p:nth-of-type(3)::after { animation-delay: .1s; }
.homepage_about > p:nth-of-type(4)::before, .homepage_about > p:nth-of-type(4)::after { animation-delay: .2s; }
.homepage_about > p:nth-of-type(1)::before, .homepage_about > p:nth-of-type(1)::after { animation-delay: .3s; }
/* hover = ulang dari 0; klik = ulang lagi */
.homepage_about > p:nth-of-type(-n+4):hover::after,
.homepage_about > p:nth-of-type(2):hover::before,
.homepage_about > p:nth-of-type(3):hover::before { animation-name: jvCount2; animation-delay: 0s; }
.homepage_about > p:nth-of-type(4):hover::before,
.homepage_about > p:nth-of-type(1):hover::before { animation-name: jhGrowX2; animation-delay: 0s; }
.homepage_about > p:nth-of-type(-n+4):active::after,
.homepage_about > p:nth-of-type(2):active::before,
.homepage_about > p:nth-of-type(3):active::before { animation-name: jvCount3; }
.homepage_about > p:nth-of-type(4):active::before,
.homepage_about > p:nth-of-type(1):active::before { animation-name: jhGrowX3; }
/* posisi (satuan cqw = 1% lebar ringkasan) */
.homepage_about > p:nth-of-type(2)::before { left: 8.500cqw; bottom: 6.667cqw; width: 8.000cqw; height: 8.000cqw; }
.homepage_about > p:nth-of-type(2)::after { left: 8.500cqw; bottom: 6.667cqw; width: 8.000cqw; line-height: 8.000cqw; font-size: 2.167cqw; }
.homepage_about > p:nth-of-type(3)::before { left: 33.500cqw; bottom: 6.667cqw; width: 8.000cqw; height: 8.000cqw; }
.homepage_about > p:nth-of-type(3)::after { left: 33.500cqw; bottom: 6.667cqw; width: 8.000cqw; line-height: 8.000cqw; font-size: 2.167cqw; }
.homepage_about > p:nth-of-type(4)::before { left: 57.167cqw; bottom: 5.917cqw; width: 2.453cqw; height: 0.583cqw; }
.homepage_about > p:nth-of-type(4)::after { left: 50.000cqw; bottom: 9.000cqw; width: 25.000cqw; line-height: 5.000cqw; font-size: 4.500cqw; }
.homepage_about > p:nth-of-type(1)::before { left: 82.167cqw; bottom: 5.917cqw; width: 9.173cqw; height: 0.583cqw; }
.homepage_about > p:nth-of-type(1)::after { left: 75.000cqw; bottom: 9.000cqw; width: 25.000cqw; line-height: 5.000cqw; font-size: 4.500cqw; }
@media (max-width: 600px) {
  .page_index_journal .homepage_about { padding-bottom: calc(100% + 24px); }
  .homepage_about::after {
    height: 100cqw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 preserveAspectRatio=%22none%22 font-family=%22Helvetica Neue,Segoe UI,Arial,sans-serif%22%3E %3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%230a1f3a%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%230f2d52%22/%3E%3Cstop offset=%221%22 stop-color=%22%230a7d83%22/%3E%3C/linearGradient%3E %3CradialGradient id=%22glow%22 cx=%221%22 cy=%220%22 r=%22.7%22%3E%3Cstop offset=%220%22 stop-color=%22%238fe0dc%22 stop-opacity=%22.28%22/%3E%3Cstop offset=%221%22 stop-color=%22%238fe0dc%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E %3Crect width=%22200%22 height=%22200%22 fill=%22url(%23g)%22/%3E%3Crect width=%22200%22 height=%22200%22 fill=%22url(%23glow)%22/%3E %3Cpath d=%22M100 14V86M100 114V186M14 100H186%22 stroke=%22%23fff%22 stroke-opacity=%22.14%22/%3E%3Ccircle cx=%2250%22 cy=%2236%22 r=%2221%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.16%22 stroke-width=%226%22/%3E%3Ctext x=%2250%22 y=%2282%22 text-anchor=%22middle%22 font-size=%229.2%22 font-weight=%22700%22 fill=%22%23fff%22%3EAcceptance rate%3C/text%3E%3Ccircle cx=%22150%22 cy=%2236%22 r=%2221%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.16%22 stroke-width=%226%22/%3E%3Ctext x=%22150%22 y=%2282%22 text-anchor=%22middle%22 font-size=%229.2%22 font-weight=%22700%22 fill=%22%23fff%22%3ERejection rate%3C/text%3E%3Ctext x=%2250%22 y=%22155%22 text-anchor=%22middle%22 font-size=%229.5%22 font-weight=%22700%22 fill=%22%238fe0dc%22 letter-spacing=%22.5%22%3EDAYS%3C/text%3E%3Crect x=%2218%22 y=%22161%22 width=%2264%22 height=%223.5%22 rx=%221.75%22 fill=%22%23fff%22 fill-opacity=%22.16%22/%3E%3Ctext x=%2250%22 y=%22182%22 text-anchor=%22middle%22 font-size=%229.2%22 font-weight=%22700%22 fill=%22%23fff%22%3EFirst decision%3C/text%3E%3Ctext x=%22150%22 y=%22155%22 text-anchor=%22middle%22 font-size=%229.5%22 font-weight=%22700%22 fill=%22%238fe0dc%22 letter-spacing=%22.5%22%3EDAYS%3C/text%3E%3Crect x=%22118%22 y=%22161%22 width=%2264%22 height=%223.5%22 rx=%221.75%22 fill=%22%23fff%22 fill-opacity=%22.16%22/%3E%3Ctext x=%22150%22 y=%22182%22 text-anchor=%22middle%22 font-size=%229.2%22 font-weight=%22700%22 fill=%22%23fff%22%3ETime to acceptance%3C/text%3E%3C/svg%3E");
  }
  .homepage_about > p:nth-of-type(2)::before { left: 13.000cqw; bottom: 70.000cqw; width: 24.000cqw; height: 24.000cqw; }
  .homepage_about > p:nth-of-type(2)::after { left: 13.000cqw; bottom: 70.000cqw; width: 24.000cqw; line-height: 24.000cqw; font-size: 6.500cqw; }
  .homepage_about > p:nth-of-type(3)::before { left: 63.000cqw; bottom: 70.000cqw; width: 24.000cqw; height: 24.000cqw; }
  .homepage_about > p:nth-of-type(3)::after { left: 63.000cqw; bottom: 70.000cqw; width: 24.000cqw; line-height: 24.000cqw; font-size: 6.500cqw; }
  .homepage_about > p:nth-of-type(4)::before { left: 9.000cqw; bottom: 17.750cqw; width: 7.360cqw; height: 1.750cqw; }
  .homepage_about > p:nth-of-type(4)::after { left: 0.000cqw; bottom: 27.000cqw; width: 50.000cqw; line-height: 15.000cqw; font-size: 13.500cqw; }
  .homepage_about > p:nth-of-type(1)::before { left: 59.000cqw; bottom: 17.750cqw; width: 27.520cqw; height: 1.750cqw; }
  .homepage_about > p:nth-of-type(1)::after { left: 50.000cqw; bottom: 27.000cqw; width: 50.000cqw; line-height: 15.000cqw; font-size: 13.500cqw; }
}

/* Pengumuman */
.cmp_announcements,
.cmp_announcements.highlight_first { display: block; }
.pkp_page_index .cmp_announcements { border: 0; }
.pkp_page_index .cmp_announcements > h2 {          /* tema menyembunyikan judul ini; tampilkan agar seragam */
  position: relative !important;
  left: auto;
  clip: auto;
}
.pkp_page_index .cmp_announcements > .obj_announcement_summary,
.pkp_page_index .cmp_announcements .more { float: none; width: auto; }
.pkp_page_index .cmp_announcements > .obj_announcement_summary::before,
.pkp_page_index .cmp_announcements .more::before { display: none; }
.pkp_page_index .cmp_announcements .more { margin: 0; padding: 0; }
.pkp_page_index .cmp_announcements .more .obj_announcement_summary { padding: 12px 0; }
.pkp_page_index .cmp_announcements > .obj_announcement_summary,
.cmp_announcements > .obj_announcement_summary {
  position: relative;
  padding: var(--pad-sm) var(--pad-sm) var(--pad-sm) calc(var(--pad-sm) + 4px);
  margin: 0 0 16px;
  background:
    linear-gradient(var(--navy), var(--teal)) left / 4px 100% no-repeat,   /* garis kiri gradasi */
    linear-gradient(135deg, var(--c-tint) 0%, #fff 70%);
  border: 1px solid var(--c-line);
}
.obj_announcement_summary h2,
.obj_announcement_summary h3,
.obj_announcement_summary h4 { margin: 0 0 6px; font-size: var(--fs-md); font-weight: 700; line-height: 1.45; }
.obj_announcement_summary h2 a,
.obj_announcement_summary h3 a,
.obj_announcement_summary h4 a { color: var(--navy); text-decoration: none; }
.obj_announcement_summary h2 a:hover,
.obj_announcement_summary h3 a:hover,
.obj_announcement_summary h4 a:hover { color: var(--teal-d); }
.obj_announcement_summary .date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-muted);
}
.obj_announcement_summary .date::before { content: "\f073"; font-family: FontAwesome; font-weight: normal; color: var(--orange); }
.obj_announcement_summary .summary img { display: block; margin: 8px 0 16px; box-shadow: var(--sh); }
.cmp_announcements .more .obj_announcement_summary {
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  transition: padding-left var(--t);
}
.cmp_announcements .more .obj_announcement_summary:hover { padding-left: 8px; }
.cmp_announcements .more .obj_announcement_summary:last-child { border-bottom: 0; }
.cmp_announcements .more h4 { font-size: var(--fs-ui); margin: 0 0 2px; }
.cmp_announcements .more .date { margin: 0; color: var(--c-muted); }

/* Slider pengumuman di beranda: 4 pengumuman terbaru bergantian otomatis
   (8 detik per slide, berhenti saat disorot). Poster tampil utuh (tidak
   terpotong), mengambang miring tipis dengan bayangan, tegak saat disorot. Gambar diambil dari poster
   tiap pengumuman lewat nomor ID-nya (daftar di bawah). Pengumuman baru
   tanpa gambar terdaftar tetap tampil dengan latar gradasi + ikon. */
@keyframes annSlide {
  0%       { opacity: 0; transform: translateX(48px); visibility: hidden; }
  1%       { visibility: visible; }
  4%, 22%  { opacity: 1; transform: none; visibility: visible; }
  25%      { opacity: 0; transform: translateX(-48px); visibility: hidden; }
  100%     { opacity: 0; transform: translateX(-48px); visibility: hidden; }
}
@keyframes annDot { 0% { background-position: 0 0, 0 0; } 25% { background-position: 20px 0, 0 0; } 50% { background-position: 40px 0, 0 0; } 75% { background-position: 60px 0, 0 0; } }
@keyframes annFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }

.pkp_page_index .cmp_announcements {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.pkp_page_index .cmp_announcements > h2 { grid-row: 1; }
.pkp_page_index .cmp_announcements .more { display: contents; }
.pkp_page_index .cmp_announcements .more .obj_announcement_summary:nth-child(n+4) { display: none; }
.pkp_page_index .cmp_announcements .obj_announcement_summary,
.pkp_page_index .cmp_announcements > .obj_announcement_summary,
.pkp_page_index .cmp_announcements .more .obj_announcement_summary {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 30px;
  min-height: 250px;
  margin: 0;
  padding: 0 32px 0 0;
  color: var(--c-text);
  background:
    linear-gradient(var(--teal), var(--orange)) left / 4px 100% no-repeat,          /* garis aksen kiri */
    radial-gradient(420px 220px at 100% 0%, rgba(10, 163, 163, .14), transparent 70%),
    linear-gradient(135deg, #fff 0%, var(--c-tint) 100%);
  border: 1px solid var(--c-line);
  box-shadow: 0 16px 32px -24px rgba(15, 45, 82, .45);
  animation: annSlide 32s var(--ease) infinite both;
  transition: none;
}
.pkp_page_index .cmp_announcements .more .obj_announcement_summary:hover { padding-left: 0; }
.pkp_page_index .cmp_announcements .more .obj_announcement_summary:nth-child(1) { animation-delay: 8s; }
.pkp_page_index .cmp_announcements .more .obj_announcement_summary:nth-child(2) { animation-delay: 16s; }
.pkp_page_index .cmp_announcements .more .obj_announcement_summary:nth-child(3) { animation-delay: 24s; }

/* Poster pengumuman (kiri) */
.pkp_page_index .cmp_announcements .obj_announcement_summary::before {
  content: "\f0a1";                                /* cadangan: ikon pengeras suara */
  position: static;                                /* tema memakai garis absolut 1px di sini */
  width: auto;
  height: auto;
  display: flex;
  grid-row: 1 / -1;
  grid-column: 1;
  align-items: center;
  justify-content: center;
  font-family: FontAwesome;
  margin: 22px 0 22px 22px;                       /* poster melayang di dalam kartu */
  font-size: 56px;
  color: rgba(255, 255, 255, .55);
  background: linear-gradient(150deg, var(--teal-600), var(--navy)) center / cover no-repeat;
  filter: drop-shadow(0 12px 16px rgba(15, 45, 82, .28));
  animation: annFloat 6s ease-in-out infinite;
  transition: transform .6s var(--ease);
}
.pkp_page_index .cmp_announcements .obj_announcement_summary:hover::before { animation: none; transform: none; }
.pkp_page_index .cmp_announcements .obj_announcement_summary:has(a[href$="/view/464"])::before { content: ""; background: url("https://journal.ipb.ac.id/public/site/images/imam_tw8/a-fresh-look-for-java.png") center / contain no-repeat; }
.pkp_page_index .cmp_announcements .obj_announcement_summary:has(a[href$="/view/463"])::before { content: ""; background: url("https://journal.ipb.ac.id/public/site/images/admin_java/whatsapp-image-2026-09-22-at-15.53.57.jpg") center / contain no-repeat; }
.pkp_page_index .cmp_announcements .obj_announcement_summary:has(a[href$="/view/389"])::before { content: ""; background: url("https://journal.ipb.ac.id/public/site/images/admin_java/call-for-papers-vol.-02-no.-1-nov-2025-955c62b252fe132ebbb01764b3681647.jpg") center / contain no-repeat; }
.pkp_page_index .cmp_announcements .obj_announcement_summary:has(a[href$="/view/352"])::before { content: ""; background: url("https://journal.ipb.ac.id/public/site/images/admin_java/Untitled-1-01-1-011.jpg") center / contain no-repeat; }
.pkp_page_index .cmp_announcements .obj_announcement_summary:has(a[href$="/view/342"])::before { content: ""; background: url("https://journal.ipb.ac.id/public/site/images/admin_java/call_for_paper1-012.jpg") center / contain no-repeat; }

/* Teks (kanan): tanggal, judul, ajakan */
.pkp_page_index .cmp_announcements .obj_announcement_summary .date {
  grid-row: 2;
  grid-column: 2;
  margin: 0 0 8px;
  color: var(--c-muted);
}
.pkp_page_index .cmp_announcements .obj_announcement_summary .date::before { color: var(--orange); }
.pkp_page_index .cmp_announcements .obj_announcement_summary h3,
.pkp_page_index .cmp_announcements .obj_announcement_summary h4 {
  grid-row: 3;
  grid-column: 2;
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}
.pkp_page_index .cmp_announcements .obj_announcement_summary h3 a,
.pkp_page_index .cmp_announcements .obj_announcement_summary h4 a { color: var(--navy); }
.pkp_page_index .cmp_announcements .obj_announcement_summary h3 a::after,
.pkp_page_index .cmp_announcements .obj_announcement_summary h4 a::after {     /* seluruh kartu dapat diklik */
  content: "Read more  \f061";
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 32px 26px calc(246px + 30px);
  font-family: var(--font), FontAwesome;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--teal-d);
}
.pkp_page_index .cmp_announcements .obj_announcement_summary:hover h3 a,
.pkp_page_index .cmp_announcements .obj_announcement_summary:hover h4 a { color: var(--teal-d); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.pkp_page_index .cmp_announcements .obj_announcement_summary .summary { display: none; }

/* Titik penanda slide + jeda saat disorot */
.pkp_page_index .cmp_announcements::after {
  content: "";
  display: block;
  grid-row: 3;
  justify-self: center;
  width: 80px;
  height: 10px;
  margin: 16px 0 0;
  background:
    radial-gradient(circle, var(--teal) 4px, transparent 4.5px) no-repeat,
    radial-gradient(circle, #c9d4df 3px, transparent 3.5px) repeat-x;
  background-size: 20px 10px, 20px 10px;
  animation: annDot 32s step-end infinite;
}
.pkp_page_index .cmp_announcements:hover .obj_announcement_summary,
.pkp_page_index .cmp_announcements:hover::after { animation-play-state: paused; }

@media (max-width: 600px) {
  .pkp_page_index .cmp_announcements .obj_announcement_summary,
  .pkp_page_index .cmp_announcements > .obj_announcement_summary,
  .pkp_page_index .cmp_announcements .more .obj_announcement_summary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    padding: 0 0 56px;
  }
  .pkp_page_index .cmp_announcements .obj_announcement_summary::before { grid-row: 1; aspect-ratio: 1; margin: 20px 20px 16px; }
  .pkp_page_index .cmp_announcements .obj_announcement_summary .date,
  .pkp_page_index .cmp_announcements .obj_announcement_summary h3,
  .pkp_page_index .cmp_announcements .obj_announcement_summary h4 { grid-column: 1; padding: 0 20px; }
  .pkp_page_index .cmp_announcements .obj_announcement_summary h3,
  .pkp_page_index .cmp_announcements .obj_announcement_summary h4 { font-size: 18px; }
  .pkp_page_index .cmp_announcements .obj_announcement_summary h3 a::after,
  .pkp_page_index .cmp_announcements .obj_announcement_summary h4 a::after { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pkp_page_index .cmp_announcements .obj_announcement_summary::before { animation: none; transform: none; }
}

/* Nomor terbitan terbaru */
.current_issue_title {
  display: inline-block;
  margin: -8px 0 16px;
  padding: 4px 12px;
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--teal-d);
  background: var(--c-tint);
  border-left: 3px solid var(--orange);
}


/* ---------- 6. TERBITAN & DAFTAR ARTIKEL ---------------------------- */

/* Panel terbitan: latar gradasi + gelombang, sampul berkilau */
.obj_issue_toc .heading {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 12px;
  align-content: center;
  margin: 0 0 32px;
  padding: 28px;
  color: var(--c-on-dark);
  background:
    var(--wave-soft) bottom / 100% 70% no-repeat,
    radial-gradient(360px 220px at 100% 0%, rgba(238, 122, 50, .30), transparent 70%),   /* cahaya hangat */
    linear-gradient(135deg, #064f57 0%, #0a7d83 48%, #0d3f63 100%);                      /* teal laut dalam */
  overflow: hidden;
}
.obj_issue_toc .heading > * { grid-column: 2; margin: 0; position: relative; }
.obj_issue_toc .heading .cover {
  grid-column: 1;
  grid-row: 1 / span 6;
  align-self: center;                      /* sampul tidak ikut memanjang saat teks panjang */
  float: none;
  width: auto;
  margin: 0;
  overflow: hidden;
  transform: perspective(1000px) rotateY(12deg);
  transform-origin: left center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 22px -8px rgba(0, 0, 0, .45), 0 32px 50px -20px rgba(0, 0, 0, .55);
  transition: transform .9s var(--ease-soft), box-shadow .9s var(--ease-soft);
}
.obj_issue_toc .heading .cover img { display: block; width: 100%; max-height: none; }
.obj_issue_toc .heading .cover::after {   /* kilau lembut melintas saat hover */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shine);
  transform: translateX(-120%);
  transition: transform 1.4s var(--ease-soft);
  pointer-events: none;
}
.obj_issue_toc .heading:hover .cover {
  transform: perspective(1000px) rotateY(3deg) translateY(-4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 18px 30px -10px rgba(0, 0, 0, .5), 0 46px 70px -24px rgba(0, 0, 0, .6);
}
.obj_issue_toc .heading:hover .cover::after { transform: translateX(120%); }
.obj_issue_toc .heading .description { color: var(--c-on-dark); }

/* Ringkasan terbitan (Issue > Description, java-issue-description.html).
   OJS membuang atribut class pada deskripsi, jadi gaya memakai struktur:
   p ke-1 = label, p ke-2 = ringkasan, ul ke-1 = angka, ul ke-2 = tag topik. */
.obj_issue_toc .heading .description { display: flex; flex-direction: column; gap: 10px; }
.obj_issue_toc .heading .description > div { display: contents; }
.obj_issue_toc .heading .description p { margin: 0; }
.obj_issue_toc .heading .description p:first-of-type {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-l);
}
.obj_issue_toc .heading .description p:nth-of-type(2) { max-width: 60ch; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-on-dark); }
.obj_issue_toc .heading .description ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.obj_issue_toc .heading .description ul:first-of-type li {
  margin: 0;
  padding: 4px 11px;
  font-size: var(--fs-xs);
  color: var(--c-on-dark);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px);
  transition: transform var(--t), background-color var(--t), border-color var(--t);
}
.obj_issue_toc .heading .description ul:first-of-type strong { font-family: var(--display); font-size: var(--fs-sm); color: var(--teal-l); }
.obj_issue_toc .heading .description ul:first-of-type li:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .14); border-color: var(--teal-l); }
.obj_issue_toc .heading .description ul:nth-of-type(2) li {
  margin: 0;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--teal-l);
  border: 1px solid rgba(143, 224, 220, .45);
  border-radius: 999px;
}
.obj_issue_toc .heading .description ul:nth-of-type(2) li::before { content: "#"; margin-right: 2px; opacity: .7; }
/* DOI & tanggal terbit berdampingan di bawah ringkasan, panel setinggi sampul */
.obj_issue_toc .heading:has(> .description) { grid-template-columns: 186px minmax(0, 1fr) auto; grid-template-rows: 1fr auto; row-gap: 14px; align-content: stretch; }
.obj_issue_toc .heading:has(> .description) > * { grid-column: 2 / -1; }
.obj_issue_toc .heading:has(> .description) .cover { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.obj_issue_toc .heading:has(> .description) .description { grid-row: 1; align-self: start; }
.obj_issue_toc .heading:has(> .description) .pub_id,
.obj_issue_toc .heading:has(> .description) .published { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
.obj_issue_toc .heading:has(> .description) .pub_id { grid-column: 2; grid-row: 2; align-self: end; }
.obj_issue_toc .heading:has(> .description) .published { grid-column: 3; grid-row: 2; align-self: end; padding-left: 24px; }
.obj_issue_toc .heading .pub_id,
.obj_issue_toc .heading .published { font-size: var(--fs-sm); color: #fff; }
.obj_issue_toc .heading .type,
.obj_issue_toc .heading .label {
  display: block;
  margin: 0 0 2px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-l);
}
.obj_issue_toc .heading .value { color: #fff; font-weight: 600; }
.obj_issue_toc .heading a { color: var(--teal-l); word-break: break-all; text-decoration: none; }
.obj_issue_toc .heading a:hover { color: #fff; }
.obj_issue_toc .galleys { margin: 0 0 24px; padding: 0; }
.obj_issue_toc .galleys::before { display: none; }
.obj_issue_toc .sections .section { margin: 0 0 32px; padding: 0; border: 0; }
.obj_issue_toc .sections .section::before { display: none; }

/* Daftar artikel bernomor */
.pkp_structure_main .cmp_article_list { margin: 0 -16px; padding: 0; list-style: none; counter-reset: jart; }
.cmp_article_list > li { margin: 0; padding: 0; counter-increment: jart; }

.obj_article_summary {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 56px 20px 16px;
  margin: 0;
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--t);
}
.cmp_article_list > li:last-child .obj_article_summary { border-bottom: 0; }
.obj_article_summary::before {             /* garis gradasi kiri saat hover */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(var(--navy), var(--teal));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s var(--ease);
}
.obj_article_summary::after {              /* nomor urut: outline tipis, sejajar baris pertama judul */
  content: counter(jart, decimal-leading-zero);
  position: absolute;
  top: 23px; right: 16px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: .75px rgba(10, 163, 163, .4);
  transition: -webkit-text-stroke-color var(--t);
  pointer-events: none;
}
.obj_article_summary:hover { background: linear-gradient(90deg, var(--c-tint) 0%, rgba(238, 247, 247, 0) 100%); }
.obj_article_summary:hover::before { transform: scaleY(1); }
.obj_article_summary:hover::after { -webkit-text-stroke-color: var(--teal); }

.obj_article_summary > .title {
  order: 1;
  margin: 0 0 8px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.45;
}
.obj_article_summary > .title a { color: var(--navy); text-decoration: none; transition: color var(--t); }
.obj_article_summary > .title a:hover { color: var(--teal-d); }
.obj_article_summary .subtitle { display: block; margin-top: 2px; font-family: var(--font); font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); }

.obj_article_summary .doiInSummary { order: 2; margin: 0 0 6px; font-size: var(--fs-xs); color: var(--c-text); }
.obj_article_summary .doiInSummary strong {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  color: #fff;
  background: var(--orange-d);
}
.obj_article_summary .doiInSummary a { color: var(--teal-d); word-break: break-all; }

.obj_article_summary .meta {
  order: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}
.obj_article_summary .authors { padding: 0; color: var(--c-text); }
.obj_article_summary .authors::before { content: "\f0c0"; font-family: FontAwesome; margin-right: 8px; color: var(--teal); }
.obj_article_summary .pages { position: static; flex: none; white-space: nowrap; line-height: inherit; color: var(--c-muted); font-weight: 600; }
.obj_article_summary .pages::before { content: "\f15c"; font-family: FontAwesome; font-weight: normal; margin-right: 6px; }
.obj_article_summary .published { font-size: var(--fs-xs); color: var(--c-muted); }

.obj_article_summary .galleys_links { order: 4; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.obj_article_summary .galleys_links:empty { display: none; }
.obj_article_summary .galleys_links li { margin: 0; }
.obj_article_summary .obj_galley_link { padding: 5px 14px; font-size: var(--fs-xs); }


/* ---------- 7. HALAMAN ARTIKEL -------------------------------------- */
.obj_article_details .page_title { margin-bottom: 8px; }
.obj_article_details .subtitle { margin: 0 0 16px; font-size: var(--fs-md); font-weight: 500; color: var(--c-muted); }

/* Satu kolom; dua kolom bila kolom konten cukup lebar */
.obj_article_details .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 24px 0 0; border: 0; }
.obj_article_details .main_entry,
.obj_article_details .entry_details { float: none; width: auto; margin: 0; padding: 0; border: 0; }
.obj_article_details .item { padding: 0; margin: 0 0 24px; border: 0; }
.obj_article_details .item .label,
.obj_article_details .entry_details .label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.obj_article_details .label::after { display: none; }

/* Penulis */
.obj_article_details .authors { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.obj_article_details .authors li {
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--c-line);
  transition: border-color var(--t);
}
.obj_article_details .authors li:hover { border-left-color: var(--teal); }
.obj_article_details .authors .name { display: block; font-weight: 700; color: var(--navy); }
.obj_article_details .authors .affiliation { display: block; font-size: var(--fs-xs); color: var(--c-muted); }
.obj_article_details .authors .orcid { display: block; font-size: var(--fs-xs); }

/* DOI & kata kunci */
.obj_article_details .item.doi,
.obj_article_details .item.keywords { margin-bottom: 12px; }
.obj_article_details .item.doi .label,
.obj_article_details .item.keywords .label { display: inline; margin: 0 8px 0 0; }
.obj_article_details .item.keywords .value { color: var(--c-text); }

/* Abstrak */
.obj_article_details .item.abstract {
  position: relative;
  padding: 28px 24px 8px;
  margin-top: 24px;
  background:
    var(--grad-line) top / 100% 4px no-repeat,                             /* garis atas gradasi */
    linear-gradient(160deg, var(--c-tint) 0%, #fff 60%);
  border: 1px solid var(--c-line);
  text-align: justify;
  hyphens: auto;
}
.obj_article_details .item.abstract p:empty { display: none; }

/* Referensi */
.obj_article_details .item.references .value p {
  margin: 0;
  padding: 8px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px dashed var(--c-line);
  word-break: break-word;
}

/* Detail: kartu di bawah abstrak, atau kolom kanan bila lebar */
.obj_article_details .entry_details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}
.obj_article_details .entry_details .item {
  margin: 0;
  padding: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
}
.obj_article_details .entry_details .item.cover_image { display: none; }
.obj_article_details .entry_details .item.galleys { order: -1; background: var(--grad-deep); border: 0; }
.obj_article_details .entry_details .item.galleys .obj_galley_link { color: #fff; border-color: rgba(255, 255, 255, .6); }
.obj_article_details .entry_details .item.galleys .obj_galley_link:hover { border-color: transparent; }
.obj_article_details .entry_details .sub_item + .sub_item { margin-top: 12px; }
.obj_article_details .entry_details .value { font-size: var(--fs-sm); color: var(--c-text); }
.obj_article_details .entry_details .galleys_links { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.obj_article_details .entry_details .obj_galley_link { width: 100%; justify-content: center; padding: 10px 14px; }
.obj_article_details .entry_details .item.copyright p { font-size: var(--fs-xs); margin: 8px 0 0; }
.obj_article_details .citation_display .csl-entry {
  padding: 10px 12px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  background: var(--c-tint-2);
  border-left: 3px solid var(--teal);
  word-break: break-word;
}
.obj_article_details .citation_formats { margin-top: 10px; border: 0; }
.obj_article_details .citation_formats_button {
  width: 100%;
  padding: 7px 10px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--c-line);
  cursor: pointer;
  transition: border-color var(--t);
}
.obj_article_details .citation_formats_button:hover { border-color: var(--teal); }
.obj_article_details .downloads_chart .value { padding: 12px; background: var(--c-tint-2); font-size: var(--fs-xs); color: var(--c-muted); }

@container (min-width: 700px) {
  .obj_article_details .row { grid-template-columns: minmax(0, 1fr) 230px; gap: 32px; }
  .obj_article_details .entry_details { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
  .obj_article_details .entry_details .item.cover_image { display: block; order: -2; padding: 0; border: 0; background: none; }
  .obj_article_details .entry_details .cover_image img {
    display: block;
    width: 100%;
    box-shadow: var(--sh-book);
    transition: transform .8s var(--ease-soft), box-shadow .8s var(--ease-soft);
  }
  .obj_article_details .entry_details .cover_image a:hover img { transform: translateY(-5px); box-shadow: var(--sh-book-hover); }
}


/* ---------- 8. ARSIP ------------------------------------------------ */
.issues_archive,
.page_issue_archive .issues_archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.issues_archive > li,
.page_issue_archive .issues_archive > li { margin: 0; padding: 0; border: 0; }
.obj_issue_summary { position: relative; }
.obj_issue_summary .cover {
  position: relative;
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 14px;
  overflow: hidden;
  aspect-ratio: 200 / 282;
  background: var(--c-tint);
  box-shadow: var(--sh-book);
  transition: transform .8s var(--ease-soft), box-shadow .8s var(--ease-soft);
}
.obj_issue_summary .cover img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.obj_issue_summary .cover::before {        /* lapisan gradasi + label saat hover */
  content: "View issue  \2192";
  white-space: pre;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(to top, rgba(10, 31, 58, .9) 0%, rgba(10, 31, 58, .2) 45%, transparent 70%);
  opacity: 0;
  transition: opacity .6s var(--ease-soft);
}
.obj_issue_summary .cover::after {         /* kilau lembut melintas */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--shine);
  transform: translateX(-120%);
  transition: transform 1.4s var(--ease-soft);
  pointer-events: none;
}
.obj_issue_summary:hover .cover { transform: translateY(-8px); box-shadow: var(--sh-book-hover); }
.obj_issue_summary:hover .cover img { transform: scale(1.04); }
.obj_issue_summary:hover .cover::before { opacity: 1; }
.obj_issue_summary:hover .cover::after { transform: translateX(120%); }
.obj_issue_summary h2 { margin: 0; padding: 0; font-size: var(--fs-ui); line-height: 1.4; }
.obj_issue_summary .title { display: block; font-weight: 700; color: var(--navy); text-decoration: none; transition: color var(--t); }
.obj_issue_summary .title::after { content: ""; position: absolute; inset: 0; z-index: 3; }   /* seluruh kartu dapat diklik */
.obj_issue_summary:hover .title { color: var(--teal-d); }
.obj_issue_summary .series {
  display: inline-block;
  margin: 6px 0 0;
  padding: 1px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-d);
  background: var(--c-tint);
  border-left: 2px solid var(--orange);
}
.obj_issue_summary .description { font-size: var(--fs-xs); color: var(--c-muted); }
.obj_issue_summary .description:empty { display: none; }

/* Halaman Archives: kartu seragam (ringkasan terbitan disembunyikan agar
   tinggi kartu sama), label "Latest issue" pada terbitan terbaru */
.page_issue_archive .issues_archive::before {         /* keterangan singkat di atas daftar (judul h1 sudah memakai garis dekoratif) */
  content: "All issues of JAVA, newest first. Click a cover to open the table of contents.";
  grid-column: 1 / -1;
  margin: -12px 0 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.page_issue_archive .issues_archive { gap: 24px 20px; }
.page_issue_archive .issues_archive > li { display: flex; }
.page_issue_archive .obj_issue_summary {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 14px 16px;
  background:
    linear-gradient(90deg, var(--teal), var(--navy)) bottom / 0 3px no-repeat,
    #fff;
  border: 1px solid var(--c-line);
  transition: border-color var(--t), box-shadow var(--t), background-size .6s var(--ease);
}
.page_issue_archive .obj_issue_summary:hover {
  border-color: rgba(10, 163, 163, .5);
  background-size: 100% 3px, auto;
  box-shadow: var(--sh-hover);
}
.page_issue_archive .obj_issue_summary .cover { margin: 0 0 14px; }
.pkp_structure_main .page_issue_archive .obj_issue_summary h2 { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 0; font-size: 17px; border: 0; }
.page_issue_archive .obj_issue_summary .title {          /* "BULAN TAHUN" selalu dua baris: bulan di atas, tahun di bawah */
  width: min-content;
  min-height: 2.8em;                                     /* tetap dua baris walau judulnya satu kata */
  line-height: 1.4;
}
.page_issue_archive .obj_issue_summary .series { margin: 0; }
.page_issue_archive .obj_issue_summary .description { display: none; }
/* Terbitan terbaru: kartu disorot (latar tint teal, bingkai gradasi), label di tengah atas */
.page_issue_archive .issues_archive > li:first-child .obj_issue_summary {
  background:
    linear-gradient(90deg, var(--teal), var(--navy)) bottom / 100% 3px no-repeat,
    linear-gradient(160deg, #e3f5f4 0%, #fff 55%) padding-box,
    linear-gradient(135deg, var(--teal), var(--navy) 60%, var(--orange)) border-box;
  border: 2px solid transparent;
  padding: 13px 13px 15px;                       /* bingkai 2px: padding dikurangi 1px agar baris volume tetap sejajar */
  box-shadow: 0 16px 30px -20px rgba(10, 125, 131, .7);
}
.page_issue_archive .issues_archive > li:first-child .obj_issue_summary:hover { background-size: 100% 3px, auto, auto; box-shadow: 0 22px 36px -20px rgba(10, 125, 131, .8); }
.page_issue_archive .issues_archive > li:first-child .obj_issue_summary .title { color: var(--teal-d); }
.page_issue_archive .issues_archive > li:first-child .obj_issue_summary .series { color: #fff; background: var(--teal-600); }
.page_issue_archive .issues_archive > li:first-child .obj_issue_summary::before {
  content: "Latest issue";
  display: block;                                /* tema menyembunyikan ::before kartu (clearfix) */
  position: absolute;
  z-index: 4;
  top: -12px; left: 50%;                         /* di tengah tepi atas kartu, tidak menutupi sampul */
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange-d);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45);
}


/* ---------- 9. SIDEBAR ---------------------------------------------- */
.pkp_structure_sidebar { padding: 0; background: none; border: 0; box-shadow: none; }

/* Blok kosong / ganda disembunyikan */
#customblock-editorial-team,
#customblock-publish-volume,
#customblock-information { display: none; }

.pkp_block {
  position: relative;
  padding: var(--pad-sm);
  margin: 0 0 var(--gap);
  background: var(--c-card);
  border: 0;
  border-bottom: 4px solid;
  border-image: var(--grad-h) 1;
  box-shadow: var(--sh);
  transition: box-shadow var(--t);
}
.pkp_block:hover { box-shadow: var(--sh-hover); }
.pkp_block .title:not(.pkp_screen_reader) {
  position: relative;
  display: block;
  margin: 0 0 16px;
  padding: 0 0 12px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-line);
}
.pkp_block .title:not(.pkp_screen_reader)::after {   /* garis pendek gradasi */
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  transition: width .5s var(--ease);
}
.pkp_block:hover .title:not(.pkp_screen_reader)::after { width: 72px; }
.pkp_block .content { font-size: var(--fs-sm); color: var(--c-text); }
.pkp_block .content p { margin: 0 0 8px; }
.pkp_block .content p:last-child { margin-bottom: 0; }

/* Blok pencarian di sidebar (Custom Block "search", isi: java-search-block.html) */
#customblock-search { padding: var(--pad-sm); }
.java-search-block { margin: 0; }
.java-search-block label {
  position: relative;
  display: block;
  margin: 0 0 14px;
  padding: 0 0 12px;
  font-family: var(--display);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--c-line);
}
.java-search-block label::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  transition: width .5s var(--ease);
}
#customblock-search:hover .java-search-block label::after { width: 72px; }
.java-search-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 16px;
  background: var(--c-tint-2);
  border: 1px solid rgba(10, 163, 163, .35);
  border-radius: 999px;
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
.java-search-field:focus-within {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(10, 163, 163, .12);
}
.java-search-field input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}
.java-search-field input[type="search"]::placeholder { color: var(--c-muted); opacity: 1; }
.java-search-field button {                /* tombol bulat berikon; teks "Search" tetap terbaca pembaca layar */
  flex: none;
  position: relative;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  font-size: 0;
  color: #fff;
  background: var(--grad);
  background-size: 200% 100%;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-position .5s var(--ease), transform var(--t);
}
.java-search-field button::before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 14px;
  line-height: 36px;
}
.java-search-field button:hover,
.java-search-field button:focus-visible { background-position: 100% 0; transform: scale(1.06); }
.java-search-adv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-d);
  text-decoration: none;
}
.java-search-adv::before { content: "\f1de"; font-family: FontAwesome; font-weight: normal; color: var(--teal); }
.java-search-adv:hover { color: var(--navy); text-decoration: underline; }

/* Sampul terbitan: panel gradasi bergelombang, sampul 3D dengan kilau */
#customblock-cover {
  padding: 24px 24px 36px;
  text-align: center;
  background:
    radial-gradient(220px 160px at 50% 55%, rgba(143, 224, 220, .18), transparent 70%),   /* cahaya lembut di belakang sampul */
    var(--wave-soft) bottom / 100% 90px no-repeat,
    var(--grad-deep);
}
#customblock-cover::before {
  content: "Our Issues";
  display: inline-block;
  margin: 0 0 18px;
  padding: 3px 12px;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}
#customblock-cover .ojs-slideshow-container,
#customblock-cover .slideshow-container { max-width: 190px; margin: 0 auto; perspective: 900px; }
#customblock-cover .ojs-slide {
  position: relative;
  overflow: hidden;
  transform: rotateY(16deg) rotateX(2deg);
  transform-origin: left center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 22px -8px rgba(0, 0, 0, .5), 0 34px 54px -20px rgba(0, 0, 0, .65);
  transition: transform .9s var(--ease-soft), box-shadow .9s var(--ease-soft);
}
#customblock-cover .ojs-slide img { display: block; width: 100%; }

/* Slideshow sampul: semua sampul ditumpuk di satu sel grid, lalu bergantian
   (crossfade) setiap 5 detik. Mendukung 2-6 sampul; 1 sampul tampil statis.
   Urutan mengikuti urutan di blok HTML (terbaru di atas). Berhenti saat di-hover. */
#customblock-cover .ojs-slides-wrapper { display: grid; }
#customblock-cover .ojs-slide {
  grid-area: 1 / 1;
  display: block;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
#customblock-cover .ojs-slides-wrapper:has(> .ojs-slide:nth-child(2):last-child) > .ojs-slide { animation-name: jCover2; animation-duration: 10s; }
#customblock-cover .ojs-slides-wrapper:has(> .ojs-slide:nth-child(3):last-child) > .ojs-slide { animation-name: jCover3; animation-duration: 15s; }
#customblock-cover .ojs-slides-wrapper:has(> .ojs-slide:nth-child(4):last-child) > .ojs-slide { animation-name: jCover4; animation-duration: 20s; }
#customblock-cover .ojs-slides-wrapper:has(> .ojs-slide:nth-child(5):last-child) > .ojs-slide { animation-name: jCover5; animation-duration: 25s; }
#customblock-cover .ojs-slides-wrapper:has(> .ojs-slide:nth-child(6):last-child) > .ojs-slide { animation-name: jCover6; animation-duration: 30s; }
/* Semua jeda dimundurkan 0,8 dtk (= lama fade-in) agar sampul pertama langsung tampil saat halaman dibuka */
#customblock-cover .ojs-slides-wrapper > .ojs-slide:nth-child(1) { animation-delay: -.8s; }
#customblock-cover .ojs-slides-wrapper > .ojs-slide:nth-child(2) { animation-delay: 4.2s; }
#customblock-cover .ojs-slides-wrapper > .ojs-slide:nth-child(3) { animation-delay: 9.2s; }
#customblock-cover .ojs-slides-wrapper > .ojs-slide:nth-child(4) { animation-delay: 14.2s; }
#customblock-cover .ojs-slides-wrapper > .ojs-slide:nth-child(5) { animation-delay: 19.2s; }
#customblock-cover .ojs-slides-wrapper > .ojs-slide:nth-child(6) { animation-delay: 24.2s; }
#customblock-cover:hover .ojs-slide { animation-play-state: paused; }
@keyframes jCover2 { 0% { opacity: 0; visibility: visible; } 8%    { opacity: 1; } 50%    { opacity: 1; } 58%    { opacity: 0; } 100% { opacity: 0; visibility: hidden; } }
@keyframes jCover3 { 0% { opacity: 0; visibility: visible; } 5.33% { opacity: 1; } 33.33% { opacity: 1; } 38.67% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } }
@keyframes jCover4 { 0% { opacity: 0; visibility: visible; } 4%    { opacity: 1; } 25%    { opacity: 1; } 29%    { opacity: 0; } 100% { opacity: 0; visibility: hidden; } }
@keyframes jCover5 { 0% { opacity: 0; visibility: visible; } 3.2%  { opacity: 1; } 20%    { opacity: 1; } 23.2%  { opacity: 0; } 100% { opacity: 0; visibility: hidden; } }
@keyframes jCover6 { 0% { opacity: 0; visibility: visible; } 2.67% { opacity: 1; } 16.67% { opacity: 1; } 19.33% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } }
#customblock-cover .ojs-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shine);
  transform: translateX(-120%);
  transition: transform 1.4s var(--ease-soft);
  pointer-events: none;
}
#customblock-cover:hover .ojs-slide {
  transform: rotateY(4deg) translateY(-6px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 18px 30px -10px rgba(0, 0, 0, .55), 0 48px 72px -24px rgba(0, 0, 0, .7);
}
#customblock-cover:hover .ojs-slide::after { transform: translateX(120%); }

/* Tombol Make a Submission (Custom Block "submission", java-submit-block.html)
   Blok tampil sebagai satu tombol merah marun gradasi: ikon pesawat kertas, panah, kilau. */
@keyframes jsbFlow  { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes jsbFly   { 0% { transform: none; } 45% { transform: translate(14px, -14px) rotate(12deg); opacity: 0; } 46% { transform: translate(-14px, 14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes jsbShine { from { transform: translateX(-140%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }
@keyframes jdlDrop  { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }

#customblock-submission { padding: 0; background: none; border: 0; box-shadow: none; }
#customblock-submission .content p { margin: 0; }
.java-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(120deg, #3d0a14, #6b1022, #9a1f36, #b8324a, #6b1022);
  background-size: 260% 260%;
  box-shadow: 0 14px 30px -18px rgba(90, 12, 28, .8);
  animation: jsbFlow 14s ease-in-out infinite;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.java-submit::before {                        /* ikon pesawat kertas dalam lingkaran */
  content: "\f1d8";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  font-family: FontAwesome;
  font-size: 18px;
  color: #8e1b30;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .14);
  transition: box-shadow .45s var(--ease);
}
.java-submit::after {                         /* kilau */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-140%) skewX(-20deg);
}
.jsb-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.jsb-text strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.jsb-text strong::after {                     /* panah */
  content: "\f061";
  font-family: FontAwesome;
  font-size: 14px;
  font-weight: 400;
  color: #ffc9d2;
  transition: transform .45s var(--ease);
}
.jsb-text > span { font-size: 12px; color: rgba(255, 235, 238, .85); }
.java-submit:hover,
.java-submit:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 36px -18px rgba(90, 12, 28, .9);
}
.java-submit:hover::before { animation: jsbFly .7s var(--ease); box-shadow: 0 0 0 8px rgba(255, 201, 210, .28); }
.java-submit:hover::after { animation: jsbShine 1.1s var(--ease); }
.java-submit:hover .jsb-text strong::after { transform: translateX(5px); }
.java-submit:active { transform: translateY(-1px) scale(.98); transition-duration: .15s; }

/* Template & formulir (Custom Block "template", java-template-block.html) */
#customblock-template .content p { margin: 0; }
.java-dl { display: grid; gap: 10px; }
.jdl-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 14px 12px 12px;
  color: var(--c-text);
  text-decoration: none;
  background: linear-gradient(90deg, var(--c-tint), #fff) no-repeat 0 0 / 0 100%, #fff;
  border: 1px solid var(--c-line);
  transition: background-size .5s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.jdl-item::before {                           /* ikon berkas */
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  font-family: FontAwesome;
  font-size: 18px;
  color: var(--teal-d);
  background: var(--c-tint);
  transition: color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.jdl-template::before { content: "\f1c2"; }
.jdl-form::before     { content: "\f0f6"; }
.jdl-item::after {                            /* ikon unduh */
  content: "\f019";
  grid-column: 3;
  grid-row: 1 / span 2;
  font-family: FontAwesome;
  font-size: 15px;
  color: #9aa7b6;
  transition: color .4s var(--ease);
}
.jdl-item strong { grid-column: 2; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: var(--navy); }
.jdl-item span   { grid-column: 2; font-size: 12px; color: var(--c-muted); }
.jdl-item:hover,
.jdl-item:focus-visible {
  color: var(--c-text);
  background-size: 100% 100%, auto;
  border-color: var(--teal);
  box-shadow: 0 12px 22px -16px rgba(15, 45, 82, .55);
  transform: translateX(4px);
}
.jdl-item:hover::before { color: #fff; background: linear-gradient(150deg, var(--teal-600), var(--navy)); transform: rotate(-8deg); }
.jdl-item:hover::after { color: var(--teal-d); animation: jdlDrop .8s var(--ease) infinite; }
.jdl-item:active { transform: translateX(4px) scale(.98); transition-duration: .15s; }

@media (prefers-reduced-motion: reduce) {
  .java-submit, .java-submit::before, .java-submit::after, .jdl-item::after { animation: none !important; }
}

/* Tautan sidebar: garis tepi + ikon, terisi gradasi dari kiri saat hover */
#customblock-additional-menu .content p { margin: 0 0 8px; }
#customblock-additional-menu .content a,
.journal-policy .policy-item,
.pkp_block .content > ul:not([class]) > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  text-decoration: none;
  background: var(--grad-h) no-repeat left / 0% 100%;
  background-origin: border-box;   /* gradasi ikut menutupi garis tepi: tanpa bingkai putih */
  border: 1.5px solid #c9d6e3;
  transition: background-size .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
#customblock-additional-menu .content a::before,
.journal-policy .policy-item::before,
.pkp_block .content > ul:not([class]) > li > a::before {
  content: "\f0f6";
  flex: none;
  width: 16px;
  text-align: center;
  font-family: FontAwesome;
  font-weight: normal;
  color: var(--teal);
  transition: color .45s var(--ease), transform .45s var(--ease);
}
#customblock-additional-menu .content a::after,
.journal-policy .policy-item::after,
.pkp_block .content > ul:not([class]) > li > a::after {
  content: "\f105";
  margin-left: auto;
  font-family: FontAwesome;
  font-weight: normal;
  color: var(--orange);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .45s var(--ease);
}
#customblock-additional-menu .content a:hover,
#customblock-additional-menu .content a:focus-visible,
.journal-policy .policy-item:hover,
.journal-policy .policy-item:focus-visible,
.pkp_block .content > ul:not([class]) > li > a:hover {
  color: #fff;
  background-size: 100% 100%;
  border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(15, 45, 82, .8);
}
#customblock-additional-menu .content a:hover::before,
#customblock-additional-menu .content a:focus-visible::before,
.journal-policy .policy-item:hover::before,
.journal-policy .policy-item:focus-visible::before,
.pkp_block .content > ul:not([class]) > li > a:hover::before { color: #fff; transform: scale(1.15); }
#customblock-additional-menu .content a:hover::after,
#customblock-additional-menu .content a:focus-visible::after,
.journal-policy .policy-item:hover::after,
.journal-policy .policy-item:focus-visible::after,
.pkp_block .content > ul:not([class]) > li > a:hover::after { opacity: 1; transform: none; color: var(--orange-l); }

/* Saat ditekan: sedikit turun sebagai umpan balik klik (tanpa warna tertahan) */
#customblock-additional-menu .content a:active,
.journal-policy .policy-item:active,
.obj_galley_link:active,
.read_more:active { transform: translateY(1px); box-shadow: none; transition-duration: .1s; }

/* Ikon per tautan */
#customblock-additional-menu a[href*="authorguideline"]::before { content: "\f044"; }
#customblock-additional-menu a[href*="reviewer"]::before,
#customblock-additional-menu a[href*="ethicalguid"]::before     { content: "\f06e"; }
#customblock-additional-menu a[href*="copyright"]::before       { content: "\f1f9"; }
.policy-item[href*="focusandscope"]::before        { content: "\f140"; }
.policy-item[href*="reviewprocess"]::before        { content: "\f046"; }
.policy-item[href*="publicationethic"]::before     { content: "\f24e"; }
.policy-item[href*="publicationfrequency"]::before { content: "\f073"; }
.policy-item[href*="openaccess"]::before           { content: "\f09c"; }
.policy-item[href*="deposit"]::before              { content: "\f1c0"; }
.policy-item[href*="orcid"]::before                { content: "\f2c3"; }
.policy-item[href*="license"]::before              { content: "\f25e"; }
.policy-item[href*="archiving"]::before            { content: "\f187"; }
.policy-item[href*="autorshipuseai"]::before,
.policy-item[href*="plagiarism"]::before           { content: "\f132"; }
.policy-item[href*="apc"]::before                  { content: "\f0d6"; }

/* Kebijakan jurnal */
.journal-policy { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.journal-policy h3 { display: none; }   /* sudah ada judul blok */

/* E-ISSN */
#customblock-e-issn .content { text-align: center; }
#customblock-e-issn img { max-width: 200px; }

/* Logo indeksasi: grid dua kolom, abu-abu -> berwarna saat hover */
#customblock-indexed-by .content { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#customblock-indexed-by .content p { margin: 0; }
#customblock-indexed-by .content p:not(:has(a)) { display: none; }   /* paragraf   kosong */
#customblock-indexed-by .content a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--c-line);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
#customblock-indexed-by .content img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .75; transition: filter var(--t), opacity var(--t); }
#customblock-indexed-by .content a:hover { border-color: var(--teal); box-shadow: var(--sh-hover); transform: translateY(-3px); }
#customblock-indexed-by .content a:hover img { filter: none; opacity: 1; }

/* Pengunjung */
#customblock-visitor2 { text-align: center; }

/* Blok bawaan OJS (jika diaktifkan) */
.block_make_submission a { width: 100%; justify-content: center; padding: 12px; }
.pkp_block .content ul { margin: 0; padding: 0; list-style: none; }
.pkp_block .content > ul:not([class]) > li { margin: 0 0 8px; }


/* ---------- 10. FOOTER ---------------------------------------------- */
.pkp_structure_footer_wrapper {
  position: relative;
  margin: 0;
  padding-top: 56px;                       /* ruang untuk gelombang */
  background:
    var(--wave-footer) top / 100% 56px no-repeat,
    radial-gradient(700px 300px at 85% 30%, rgba(10, 163, 163, .25), transparent 70%),
    var(--grad-deep);
  border: 0;
}
.pkp_structure_footer { max-width: var(--max); margin: 0 auto; padding: 0; }
.pkp_footer_content { padding: 0; text-align: left; }
.pkp_footer_content > p:first-child { display: none; }   /* paragraf kosong sebelum footer */
.pkp_brand_footer { display: none; }                      /* logo OJS/PKP ganda */

.java-footer {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--c-on-dark);
  background: none;
  font-family: var(--font);
  font-weight: 500;
  overflow: visible;
}
.java-footer .footer-content { max-width: none; margin: 0; padding: 24px var(--gutter) 8px; animation: none; }
.java-footer .footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 24px; }
.java-footer .footer-logo .logo-name {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 0;
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.15;
  color: #fff;
}
.java-footer .footer-logo .logo-name img {
  grid-row: 1 / span 2;
  width: 52px; height: 52px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.java-footer .logo-name small {
  grid-column: 2;
  display: block;
  margin: 2px 0 0;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--teal-l);
}
.java-footer .footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 8px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}
.java-footer .footer-social a:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-3px); }
.java-footer .footer-divider { height: 1px; margin: 0; background: linear-gradient(90deg, rgba(143, 224, 220, .45), rgba(255, 255, 255, .08) 60%, transparent); }

.java-footer .footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 32px 0 16px; }
.java-footer .footer-box { margin: 0; padding: 0; list-style: none; }
.java-footer .footer-box li { margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.55; }
.java-footer .box-title {
  position: relative;
  margin: 0 0 16px !important;
  padding-bottom: 10px;
  font-family: var(--display);
  font-size: var(--fs-ui) !important;
  font-weight: 700;
  color: #fff;
}
.java-footer .box-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
}
.java-footer .footer-box a {
  position: relative;
  color: var(--c-on-dark);
  text-decoration: none;
  transition: color var(--t), padding-left var(--t);
}
.java-footer .footer-box a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width var(--t);
}
.java-footer .footer-box a:hover { color: #fff; padding-left: 14px; }
.java-footer .footer-box a:hover::before { width: 8px; }
.java-footer .footer-contact li { color: var(--c-on-dark); }

.java-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--gutter) 24px;
  font-size: var(--fs-xs);
  color: var(--c-on-dark-muted);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.java-footer .footer-bottom a { color: #fff; font-weight: 600; text-decoration: none; }
.java-footer .footer-bottom a:hover { color: var(--teal-l); }


/* ---------- STATISTIK EDITORIAL & SITASI --------------------------- */
/* About (java-stats.html): satu panel biru gradasi berisi 4 statistik.
   Sidebar (Custom Block "citations", java-citations-block.html).
   Angka berhitung memakai kelas jn-XX: ganti angka DAN kelasnya bersamaan,
   lalu tambahkan nilai baru di daftar .jn-XX di bawah bila belum ada. */
@property --jv { syntax: '<integer>'; inherits: true; initial-value: 0; }
@keyframes jvCount { from { --jv: 0; } to { --jv: var(--to); } }
@keyframes jhRise  { from { opacity: 0; transform: translateY(16px); } }
@keyframes jhFlow  { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes jvCount2 { from { --jv: 0; } to { --jv: var(--to); } }   /* salinan: hover mengulang animasi */
@keyframes jvCount3 { from { --jv: 0; } to { --jv: var(--to); } }   /* salinan: klik mengulang animasi */
@keyframes jhFill  { from { background-size: 0 100%, 100% 100%; } }
@keyframes jhFill2 { from { background-size: 0 100%, 100% 100%; } }
@keyframes jhFill3 { from { background-size: 0 100%, 100% 100%; } }
@keyframes jhGrowX  { from { transform: scaleX(0); } }
@keyframes jhGrowX2 { from { transform: scaleX(0); } }
@keyframes jhGrowX3 { from { transform: scaleX(0); } }

.jn-2 { --to: 2; } .jn-9 { --to: 9; }
.jn-40 { --to: 40; } .jn-42 { --to: 42; } .jn-65 { --to: 65; } .jn-154 { --to: 154; }
.jh-w23 { --w: 23; } .jh-w86 { --w: 86; }                 /* hari / 180 */

/* Angka berhitung: teks asli disembunyikan, diganti counter yang bergerak */
.jn {
  --jv: var(--to);
  counter-reset: jv var(--jv);
  font-size: 0 !important;
  line-height: 1;
  color: #fff;
  animation: jvCount 1.8s var(--ease) both;
}
.jn::after {
  content: counter(jv);
  font-family: var(--display);
  font-size: var(--jn-fs, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.jh-pct::after { content: counter(jv) "%"; }

/* Panel biru gradasi bersama (dipakai About & sidebar) */
.jh-panel,
.jc-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  color: #fff;
  background: linear-gradient(120deg, var(--navy-900), var(--navy), #11557a, var(--teal-600), var(--navy));
  background-size: 260% 260%;
  box-shadow: 0 18px 36px -22px rgba(10, 31, 58, .7);
  animation: jhRise .8s var(--ease) both, jhFlow 16s ease-in-out infinite;
}
.jh-panel::before,
.jc-panel::before {                           /* cahaya teal lembut di pojok */
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%; right: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(143, 224, 220, .28), transparent 65%);
  pointer-events: none;
}
.jh-panel::after,
.jc-panel::after {                            /* gelombang tipis di dasar */
  content: "";
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  background: var(--wave-soft) repeat-x bottom / 300px 46px;
  opacity: .8;
  pointer-events: none;
}

/* --- About ---------------------------------------------------------- */
/* Pembuka: sampul kiri, dua paragraf di kanan, rata tengah terhadap sampul */
.java-intro {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 32px;
  align-items: center;
  margin: 0 0 32px;
}
.pkp_structure_main .page .java-intro-cover { margin: 0; }
.pkp_structure_main .page .java-intro-cover img[style*="float"] { float: none; width: 100% !important; max-width: none; margin: 0 !important; }
.java-intro-text p:last-child { margin-bottom: 0; }

.java-highlights { clear: both; margin: 0 0 8px; }
.pkp_structure_main .java-highlights p { margin: 0; }
.pkp_structure_main .java-highlights .jh-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.java-highlights .jh-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-line), transparent); }

.jh-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jh-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 18px 28px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color .4s var(--ease);
}
.jh-item + .jh-item { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14); }   /* garis pemisah */
.jh-item:nth-child(2) .jn, .jh-item:nth-child(2) .jh-donut { animation-delay: .1s; }
.jh-item:nth-child(3) .jn, .jh-item:nth-child(3) .jh-meter::before { animation-delay: .2s; }
.jh-item:nth-child(4) .jn, .jh-item:nth-child(4) .jh-meter::before { animation-delay: .3s; }

/* Grafik/angka mengisi separuh atas kotak */
.jh-top { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 124px; }

/* Donat persentase */
.jh-donut {
  --jv: var(--to);
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  animation: jvCount 1.8s var(--ease) both;
}
.jh-donut::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--teal-l) 0, #fff calc(var(--jv) * 1%), rgba(255, 255, 255, .16) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 77%);
  mask: radial-gradient(closest-side, transparent 76%, #000 77%);
}
.jh-donut .jn { --jn-fs: 28px; position: relative; }

/* Angka hari + garis skala */
.pkp_structure_main .java-highlights .jh-value { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.jh-value .jn { --jn-fs: 56px; }
.java-highlights .jh-unit { font-size: 15px; font-weight: 600; color: var(--teal-l); }
.pkp_structure_main .java-highlights .jh-meter { width: 100%; max-width: 140px; margin: 14px 0 0; font-size: 10px; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }
.jh-meter::before {
  content: "";
  display: block;
  height: 5px;
  margin: 0 0 6px;
  background:
    linear-gradient(90deg, var(--teal-l), #fff) no-repeat 0 0 / calc(var(--w) * 1%) 100%,
    rgba(255, 255, 255, .16);
  border-radius: 999px;
  animation: jhFill 1.8s var(--ease) both;
}

.pkp_structure_main .java-highlights .jh-label {
  width: 100%;
  margin: 18px 0 0;
  padding: 0 0 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.pkp_structure_main .java-highlights .jh-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--c-on-dark-muted); }
.pkp_structure_main .java-highlights .jh-source { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--c-muted); }

/* Hover & klik: grafik dan angka diulang dari 0 */
.jh-item:hover { background-color: rgba(255, 255, 255, .06); }
.jh-item:hover .jn,
.jh-item:hover .jh-donut { animation-name: jvCount2; animation-delay: 0s; }
.jh-item:hover .jh-meter::before { animation-name: jhFill2; animation-delay: 0s; }
.jh-item:active { background-color: rgba(255, 255, 255, .1); }
.jh-item:active .jn,
.jh-item:active .jh-donut { animation-name: jvCount3; }
.jh-item:active .jh-meter::before { animation-name: jhFill3; }


/* --- Sidebar: Citation Metrics ------------------------------------- */
#customblock-citations { padding: var(--pad-sm); }
.java-cite { margin: 0; }
.pkp_block .java-cite p { margin: 0; }
.pkp_block .java-cite .jc-title {
  position: relative;
  margin: 0 0 14px;
  padding: 0 0 12px;
  font-family: var(--display);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--c-line);
}
.java-cite .jc-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  transition: width .5s var(--ease);
}
#customblock-citations:hover .jc-title::after { width: 72px; }

.jc-panel { grid-template-columns: 1fr 1fr; }
.jc-m {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 8px 24px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color .4s var(--ease);
}
.jc-m + .jc-m { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14); }
.jc-m .jn { --jn-fs: 34px; transition: transform .45s var(--ease); }
.jc-m:nth-child(2) .jn { animation-delay: .1s; }
.jc-lab { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--teal-l); }
.jc-m:hover { background-color: rgba(255, 255, 255, .08); }
.jc-m:hover .jn { transform: scale(1.1); }
.jc-m:hover .jn { animation-name: jvCount2; animation-delay: 0s; }
.jc-m:active .jn { animation-name: jvCount3; }

.pkp_block .java-cite .jc-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--c-muted); }
.java-cite .jc-source { font-weight: 700; color: var(--teal-d); text-decoration: none; }
.java-cite .jc-source::before { content: "\f19d"; margin-right: 5px; font-family: FontAwesome; font-weight: 400; }
.java-cite .jc-source:hover { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .jh-panel, .jc-panel, .java-highlights *, .java-highlights *::before, .java-highlights *::after,
  .java-cite *, .java-cite *::before, .java-cite *::after,
  .homepage_about > p::before, .homepage_about > p::after { animation: none !important; }
}
@media (max-width: 767px) {
  .jh-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jh-item:nth-child(3) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
  .jh-item:nth-child(4) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .14); }
  .jh-item { padding: 22px 14px 24px; }
  .jh-top { height: 104px; }
  .jh-donut { width: 92px; height: 92px; }
  .jh-donut .jn { --jn-fs: 23px; }
  .jh-value .jn { --jn-fs: 44px; }
  .java-intro { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .pkp_structure_main .page .java-intro-cover { width: min(240px, 72%); margin: 0 auto; }
  .pkp_structure_main .page .java-intro-cover img[style*="float"] { margin: 0 !important; }
}


/* ---------- 11. TABLET & PONSEL ------------------------------------- */
@media (max-width: 991px) {
  :root { --gutter: 16px; --gap: 16px; --pad: 20px; --pad-sm: 20px; }

  /* Bar atas: nama jurnal + tombol menu */
  .pkp_structure_head { position: relative; background: var(--c-card); }
  .pkp_structure_head::before {
    content: "JAVA";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 var(--gutter);
    font-family: var(--display);
    font-size: var(--fs-h3);
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
    background: var(--grad);
  }
  .pkp_head_wrapper,
  .has_site_logo .pkp_head_wrapper { padding: 70px var(--gutter) var(--gutter); }
  .pkp_structure_head .pkp_head_wrapper::before { display: none; }
  .pkp_site_name_wrapper { position: static; }   /* tombol menu menempel ke bar atas */

  .pkp_site_nav_toggle {
    position: absolute;
    top: 8px; right: var(--gutter); left: auto;
    z-index: 10000;
    width: 40px; height: 38px;
    padding: 0;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .6);
    border-radius: 0;
    cursor: pointer;
  }
  .pkp_structure_head .pkp_site_nav_toggle > span {
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 2px;
    margin: -1px 0 0 -9px;
    border: 0;
    font-size: 0;
    color: transparent;
    background: #fff;
    box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
  }
  .pkp_site_nav_toggle > span::before,
  .pkp_site_nav_toggle > span::after { display: none; }
  .pkp_site_nav_toggle--transform { position: fixed; background: var(--navy); border-color: var(--navy); }
  .pkp_structure_head .pkp_site_nav_toggle--transform > span { background: #fff; box-shadow: none; transform: rotate(45deg); }
  .pkp_site_nav_toggle--transform > span::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: #fff;
    transform: rotate(-90deg);
  }

  /* Menu layar penuh */
  .pkp_site_nav_menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 72px var(--gutter) 28px;
    overflow-y: auto;
    background: var(--grad-line) top / 100% 4px no-repeat, var(--c-card);
  }
  .pkp_site_nav_menu--isOpen { display: block; }
  .pkp_navigation_primary_wrapper { display: block; padding: 0; }
  .pkp_navigation_primary,
  .pkp_site_nav_menu .pkp_navigation_primary { display: block; margin: 0; }
  .pkp_navigation_primary > li { border-bottom: 1px solid var(--c-line); }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary > li:first-child > a { padding: 14px 4px; font-size: var(--fs-base); }
  .pkp_navigation_primary > li > a::after { left: 4px; right: auto; width: 40px; }
  .pkp_navigation_primary ul { position: static; margin: 0 0 12px; padding: 0 0 0 24px; min-width: 0; border: 0; box-shadow: none; }
  .pkp_navigation_search_wrapper { margin: 24px 0 0; }
  .pkp_navigation_search_wrapper > a { display: flex; width: 100%; min-width: 0; }
  .pkp_navigation_user_wrapper { position: static; height: auto; margin: 24px 0 0; }
  .pkp_navigation_user,
  .pkp_navigation_user.pkp_navigation_user { width: 100%; justify-content: center; gap: 12px; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--c-line); }
  .pkp_navigation_user > li > a,
  .pkp_navigation_user > li:last-child > a { color: var(--navy); border-color: var(--navy); padding: 8px 16px; }
  .pkp_structure_head::after { height: 3px; }

  /* Tata letak bertumpuk */
  .pkp_structure_content { padding: var(--gap) var(--gutter) 48px; }
  .pkp_structure_main,
  .pkp_structure_sidebar { float: none; width: 100%; }
  .pkp_structure_sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
    margin-top: var(--gap);
  }
  .pkp_structure_sidebar .pkp_block { margin: 0; }

  .java-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .page_index_journal > section > h2,
  .pkp_structure_main .page > h1,
  .page_issue_archive > h1 { font-size: var(--fs-h3); }

  .pkp_structure_main .page img[style*="float"],
  .homepage_about img[style*="float"] {
    float: none !important;
    display: block;
    width: min(240px, 72%) !important;
    max-width: none;
    margin: 0 auto 28px !important;
    transform: perspective(1100px) rotateY(10deg);
    transform-origin: center;
  }
  .obj_issue_toc .heading { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .obj_issue_toc .heading > *,
  .obj_issue_toc .heading:has(> .description) > * { grid-column: 1; grid-row: auto; padding-left: 0; }
  .obj_issue_toc .heading:has(> .description) { grid-template-columns: minmax(0, 1fr); }
  .obj_issue_toc .heading .cover,
  .obj_issue_toc .heading:has(> .description) .cover { grid-column: 1; grid-row: auto; justify-self: center; width: 150px; margin: 0 0 10px; transform: perspective(1000px) rotateY(8deg); transform-origin: center; }
  .obj_issue_toc .heading:has(> .description) .description,
  .obj_issue_toc .heading:has(> .description) .pub_id,
  .obj_issue_toc .heading:has(> .description) .published { grid-column: 1; grid-row: auto; }
  .obj_issue_toc .heading:has(> .description) .published { padding-left: 0; border-top: 0; padding-top: 0; }
  .pkp_structure_main .cmp_article_list { margin: 0 -12px; }
  .obj_article_summary { padding: 16px 44px 16px 12px; }
  .obj_article_summary::after { top: 19px; right: 12px; font-size: 16px; }
  .obj_article_summary .meta { flex-direction: column; }
  .obj_article_details .item.abstract { padding: 20px 16px 6px; text-align: left; }
  .issues_archive,
  .page_issue_archive .issues_archive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .page_issue_archive .obj_issue_summary { padding: 10px 10px 12px; }
  .page_issue_archive .issues_archive > li:first-child .obj_issue_summary { padding: 9px 9px 11px; }
  .pkp_structure_main .page_issue_archive .obj_issue_summary h2 { font-size: 14px; }
  .page_issue_archive .obj_issue_summary .series { font-size: 11.5px; }

  .java-footer .footer-links { grid-template-columns: 1fr; gap: 24px; }
  .java-footer .footer-bottom { flex-direction: column; text-align: center; }
}


/* ---------- 12. ANIMASI GULIR, AKSESIBILITAS, CETAK ----------------- */

/* Elemen muncul halus saat digulir (browser modern; lainnya tampil biasa) */
@keyframes jReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .obj_article_summary,
  .pkp_structure_sidebar .pkp_block,
  .obj_issue_summary,
  .cmp_announcements > .obj_announcement_summary {
    animation: jReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.cmp_skip_to_content a { background: var(--navy); color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  #customblock-cover .ojs-slide:not(:first-child) { display: none; }   /* tanpa animasi: tampilkan sampul terbaru saja */
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #fff; }
  .pkp_structure_head, .pkp_structure_sidebar, .pkp_structure_footer_wrapper { display: none; }
  .pkp_structure_main { box-shadow: none; border: 0; padding: 0; }
  .pkp_structure_content.has_sidebar { display: block; }
}