/* Mengurangi jarak antarelemen pada bagian Current Issue */
.obj_issue_toc {
    margin-bottom: 15px !important;
    padding-top: 0 !important;
}

/* Merapatkan judul volume, DOI, dan tanggal terbit */
.obj_issue_toc .heading,
.obj_issue_toc .pub_id,
.obj_issue_toc .published {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}

/* Merapatkan judul sub-bagian "Articles" */
.obj_issue_toc .sections h2,
.obj_issue_toc .section_title {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
}

/* Merapatkan jarak antar-judul artikel */
.obj_article_summary {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eee;
}

.obj_article_summary .title {
    margin-bottom: 2px !important;
}

.obj_article_summary .authors,
.obj_article_summary .pages {
    margin-top: 1px !important;
    margin-bottom: 2px !important;
}
/* =========================================================
   JLO Education - Background Merah Putih Elegan
   ========================================================= */

:root {
  --jlo-red: #b7192e;
  --jlo-red-dark: #8f1222;
  --jlo-red-soft: #fff3f5;
  --jlo-green: #07503f;
  --jlo-green-dark: #04382d;
  --jlo-white: #ffffff;
}

/* Latar luar: merah di bagian atas, putih-merah muda lembut ke bawah */
body {
  background: linear-gradient(
    180deg,
    #b7192e 0,
    #b7192e 150px,
    #f4dfe3 150px,
    #fff8f9 330px,
    #f5f7f6 620px,
    #f5f7f6 100%
  ) fixed !important;
}

/* Halaman tidak tampak putih polos */
.pkp_structure_page {
  overflow: hidden;
  background: linear-gradient(180deg, #fffafa 0%, #ffffff 38%, #fbfcfb 100%) !important;
  border-right: 1px solid rgba(183, 25, 46, .14);
  border-left: 1px solid rgba(183, 25, 46, .14);
  box-shadow: 0 12px 36px rgba(84, 17, 29, .13) !important;
}

/* Header merah-putih, tetapi banner tetap terbaca dengan jelas */
.pkp_structure_head {
  position: relative;
  background: linear-gradient(
    180deg,
    #b7192e 0%,
    #c4263b 28%,
    #fff7f8 28%,
    #ffffff 100%
  ) !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e5c9ce !important;
  box-shadow: 0 7px 20px rgba(75, 18, 28, .11) !important;
}

.pkp_structure_head::before {
  display: none !important;
}

/* Ukuran header sedang, tidak kecil dan tidak terlalu besar */
.pkp_head_wrapper {
  width: 94% !important;
  max-width: 1360px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.pkp_site_name_wrapper,
.pkp_site_name {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
}

.pkp_site_name {
  margin: 14px auto 10px !important;
  padding: 12px 18px !important;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(82, 19, 30, .09);
}

.pkp_site_name .is_img,
.pkp_site_name .is_img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

.pkp_site_name .is_img img {
  max-width: 1260px !important;
  max-height: 230px !important;
  object-fit: contain !important;
}

/* Navigasi merah tua sebagai penghubung header dan isi */
.pkp_navigation_primary_wrapper {
  background: linear-gradient(90deg, #8f1222, #b7192e 50%, #8f1222) !important;
  border-top: 1px solid rgba(255, 255, 255, .42);
  border-bottom: 4px solid #ffffff !important;
  box-shadow: 0 4px 0 var(--jlo-green-dark);
}

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

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .12) !important;
  border-color: #ffffff !important;
}

/* Semburat merah-putih sangat lembut pada area isi */
.pkp_structure_content {
  background:
    radial-gradient(circle at 100% 0, rgba(183, 25, 46, .06), transparent 32%),
    linear-gradient(180deg, #fffafa 0%, #ffffff 35%, #fbfcfb 100%) !important;
}

/* Panel isi tidak putih polos */
#homepageAbout,
.cmp_announcements,
.pkp_page_index .current_issue,
.pkp_page_index .additional_content {
  background: linear-gradient(135deg, #ffffff 0%, #fff7f8 100%) !important;
  border-color: #ead9dc !important;
}

#homepageAbout {
  background: linear-gradient(135deg, #fff4f6 0%, #ffffff 47%, #f2f8f5 100%) !important;
  border-top: 3px solid var(--jlo-red) !important;
}

.cmp_announcements {
  background: linear-gradient(135deg, #ffffff 0%, #fff2f4 100%) !important;
  border-left-color: var(--jlo-red) !important;
}

.pkp_page_index .current_issue {
  background: linear-gradient(135deg, #ffffff 0%, #f4f9f7 72%, #fff3f5 100%) !important;
}

/* Sidebar tetap akademik, dengan rona merah putih */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block_custom {
  background: linear-gradient(180deg, #ffffff 0%, #fff5f7 100%) !important;
  border-color: #ead9dc !important;
}

.pkp_structure_sidebar .title,
.pkp_structure_sidebar .pkp_block .title {
  background: linear-gradient(90deg, var(--jlo-green-dark), var(--jlo-green)) !important;
  border-bottom: 3px solid var(--jlo-red) !important;
}

/* Footer merah tua dengan garis putih dan hijau */
.pkp_structure_footer_wrapper {
  color: #ffffff !important;
  background: linear-gradient(135deg, #8f1222, #b7192e) !important;
  border-top: 5px solid #ffffff !important;
  box-shadow: inset 0 3px 0 var(--jlo-green-dark) !important;
}

.pkp_footer_content,
.pkp_footer_content a {
  color: #ffffff !important;
}

/* Responsif untuk ponsel */
@media (max-width: 767px) {
  body {
    background: linear-gradient(
      180deg,
      #b7192e 0,
      #b7192e 90px,
      #fff3f5 90px,
      #f5f7f6 300px,
      #f5f7f6 100%
    ) fixed !important;
  }

  .pkp_head_wrapper {
    width: 100% !important;
  }

  .pkp_site_name {
    margin: 8px 6px !important;
    padding: 8px !important;
    border-radius: 8px;
  }

  .pkp_site_name .is_img img {
    max-width: 100% !important;
    max-height: 160px !important;
  }
}

/* =========================================================
   Header terbaru JLO Education
   Disesuaikan untuk banner horizontal rasio sekitar 3.42:1
   ========================================================= */
.pkp_structure_head {
  background: linear-gradient(180deg, #b7192e 0 18%, #fff8f9 18% 100%) !important;
}

.pkp_head_wrapper {
  width: 96% !important;
  max-width: 1500px !important;
}

.pkp_site_name {
  margin: 10px auto 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pkp_site_name .is_img {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.pkp_site_name .is_img img {
  display: block !important;
  width: 100% !important;
  max-width: 1450px !important;
  height: auto !important;
  max-height: 290px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 1200px) {
  .pkp_head_wrapper { width: 98% !important; }
  .pkp_site_name .is_img img {
    max-width: 100% !important;
    max-height: 240px !important;
  }
}

@media (max-width: 767px) {
  .pkp_structure_head {
    background: linear-gradient(180deg, #b7192e 0 12%, #fff8f9 12% 100%) !important;
  }
  .pkp_site_name {
    margin: 6px auto 5px !important;
    padding: 0 5px !important;
  }
  .pkp_site_name .is_img img {
    max-height: 155px !important;
  }
}