/* ============================================================
   DJADAJAT JOURNAL — Custom CSS v2.8 FINAL
   ============================================================ */

:root {
  --dj-navy:      #0D2B4E;
  --dj-navy-mid:  #1C4068;
  --dj-navy-dark: #071828;
  --dj-teal:      #1A6B7A;
  --dj-gold:      #D4881E;
  --dj-border:    #D1D9E0;
  --dj-bg-page:   #F2F4F7;
  --dj-muted:     #718096;
}

/* ── Background ombak laut ─────────────────────────────────── */
html, body {
  background-color: #0a3d6b !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='200' viewBox='0 0 1440 200'%3E%3Cpath fill='%23063256' fill-opacity='0.6' d='M0,80 C180,20 360,140 540,80 C720,20 900,140 1080,80 C1260,20 1350,100 1440,80 L1440,200 L0,200 Z'/%3E%3Cpath fill='%230d5a99' fill-opacity='0.4' d='M0,120 C200,60 400,160 600,120 C800,60 1000,160 1200,120 C1300,90 1370,130 1440,110 L1440,200 L0,200 Z'/%3E%3Cpath fill='%23155e8a' fill-opacity='0.35' d='M0,150 C240,100 480,180 720,150 C960,100 1200,180 1440,150 L1440,200 L0,200 Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='200' viewBox='0 0 1440 200'%3E%3Cpath fill='%23052a4a' fill-opacity='0.5' d='M0,60 C160,120 320,20 480,80 C640,140 800,20 960,80 C1120,140 1280,40 1440,90 L1440,0 L0,0 Z'/%3E%3Cpath fill='%230a4a7a' fill-opacity='0.35' d='M0,30 C200,80 400,0 600,50 C800,100 1000,10 1200,60 C1300,80 1380,30 1440,50 L1440,0 L0,0 Z'/%3E%3C/svg%3E") !important;
  background-repeat: repeat-x, repeat-x !important;
  background-position: bottom center, top center !important;
  background-size: 1440px 200px, 1440px 200px !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

/* ── Boxed layout ─────────────────────────────────────────── */
.pkp_structure_page {
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: #fff !important;
  box-shadow: 0 4px 32px rgba(13,43,78,.18) !important;
  padding: 0 !important;
}
@media (min-width: 1240px) {
  .pkp_structure_page {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    border-radius: 0 0 10px 10px !important;
    overflow: visible !important;  /* tidak crop gambar header */
  }
}

/* ============================================================
   HEAD WRAPPER — susun ulang urutan visual dengan flexbox
   Trick: bungkus head_wrapper dengan flex column-reverse
   agar user_nav yang ada di DOM bawah tampil di ATAS secara visual
   ============================================================ */
.pkp_head_wrapper {
  display: flex !important;
  flex-direction: column-reverse !important;  /* balik urutan visual */
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
}

/* ── Register/Login — tampil di ATAS secara visual ────────── */
.pkp_navigation_user_wrapper {
  order: 1 !important;              /* dalam flex: tampil pertama (atas) */
  background: transparent !important;
  padding: 5px 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 6px !important;
  border-bottom: none !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: auto !important;
  z-index: 50 !important;
}

.pkp_navigation_user_wrapper ul,
.pkp_navigation_user_wrapper > ul {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important;
  transform: none !important;
  min-width: auto !important;
  width: auto !important;
}

.pkp_navigation_user_wrapper li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.pkp_navigation_user_wrapper a,
.pkp_navigation_user_wrapper li > a {
  display: inline-block !important;
  font-size: 0.71rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 5px 14px !important;
  border-radius: 4px !important;
  background: var(--dj-navy) !important;
  color: #fff !important;
  border: 1.5px solid var(--dj-navy) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  transition: background .2s, border-color .2s !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

.pkp_navigation_user_wrapper a:hover,
.pkp_navigation_user_wrapper li > a:hover {
  background: var(--dj-gold) !important;
  border-color: var(--dj-gold) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(212,136,30,.4) !important;
}

/* Dropdown (jika sudah login) */
.pkp_navigation_user_wrapper li {
  position: relative !important;
}
.pkp_navigation_user_wrapper li ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  background: var(--dj-navy) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-top: 2px solid var(--dj-gold) !important;
  border-radius: 0 0 5px 5px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
  min-width: 160px !important;
  z-index: 500 !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
  width: auto !important;
}
.pkp_navigation_user_wrapper li:hover > ul {
  display: flex !important;
}
.pkp_navigation_user_wrapper li ul li {
  display: block !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.pkp_navigation_user_wrapper li ul a {
  display: block !important;
  padding: 8px 14px !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.82) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.pkp_navigation_user_wrapper li ul a:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--dj-gold) !important;
}

/* ── Site name (logo/gambar header) — order 2 di bawah nav ── */
.pkp_site_name_wrapper {
  order: 2 !important;
  background: #fff !important;
  border-bottom: 4px solid var(--dj-gold) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;   /* tidak crop gambar */
}

.pkp_site_name_wrapper > *,
.pkp_site_name_wrapper .pkp_helpers_clear {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_site_name_wrapper .pkp_site_name {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.pkp_site_name_wrapper .pkp_site_name a.is_img {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* HEADER IMAGE — tinggi 340px, posisi tengah */
.pkp_site_name_wrapper .pkp_site_name a.is_img img,
.pkp_site_name_wrapper .pkp_site_name img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: fill !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: bottom !important;
}

.pkp_site_name_wrapper .pkp_site_name .is_text,
.pkp_site_name_wrapper .pkp_site_name a.is_text {
  display: block !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--dj-navy) !important;
  padding: 22px 28px !important;
  text-decoration: none !important;
}

/* ── Nav row — order 3 (ketiga, di bawah gambar) ─────────── */
.pkp_navigation_primary_row {
  order: 3 !important;
  background: var(--dj-navy) !important;
  border-bottom: 3px solid var(--dj-gold) !important;
  box-shadow: none !important;
  padding: 0 20px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.pkp_navigation_primary_wrapper { width: 100% !important; max-width: 100% !important; }

#navigationPrimary a,
#navigationPrimary > li > a {
  color: rgba(255,255,255,.88) !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-bottom: 3px solid transparent !important;
  transition: color .2s, border-color .2s !important;
}
#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus {
  color: var(--dj-gold) !important;
  border-bottom-color: var(--dj-gold) !important;
  text-decoration: none !important;
}
#navigationPrimary ul {
  background: var(--dj-navy) !important;
  border-top: 2px solid var(--dj-gold) !important;
  border-radius: 0 0 5px 5px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
  min-width: 200px !important;
}
#navigationPrimary ul a {
  color: rgba(255,255,255,.82) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
#navigationPrimary ul a:hover {
  background: var(--dj-navy-mid) !important;
  color: var(--dj-gold) !important;
}

.pkp_navigation_search_wrapper a {
  color: rgba(255,255,255,.75) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
}
.pkp_navigation_search_wrapper a:hover { color: var(--dj-gold) !important; }

/* ============================================================
   SIDEBAR BLOCKS
   ============================================================ */
.pkp_block {
  border: 1px solid var(--dj-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.pkp_block .title {
  display: block !important;
  background: var(--dj-navy) !important;
  color: #fff !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 9px 14px !important;
  border-left: 4px solid var(--dj-gold) !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
.pkp_block a { color: var(--dj-navy) !important; text-decoration: none !important; }
.pkp_block a:hover { color: var(--dj-gold) !important; }

.block_make_submission a {
  display: block !important;
  text-align: center !important;
  background: var(--dj-navy) !important;
  color: #fff !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
  margin: 10px 14px !important;
  border: 2px solid var(--dj-navy) !important;
  transition: all .2s !important;
  text-decoration: none !important;
}
.block_make_submission a:hover {
  background: var(--dj-gold) !important;
  border-color: var(--dj-gold) !important;
}

/* ============================================================
   GALLEY, ARTICLES, MISC
   ============================================================ */
.obj_galley_link {
  display: inline-block !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: var(--dj-navy) !important;
  color: #fff !important;
  border: 2px solid var(--dj-navy) !important;
  border-radius: 4px !important;
  padding: 0.38em 0.95em !important;
  transition: all .2s !important;
  text-decoration: none !important;
  margin-top: 6px !important;
}
.obj_galley_link:hover {
  background: var(--dj-gold) !important;
  border-color: var(--dj-gold) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.pkp_page_index .current_issue h2,
.page_issue_archive h1, .page_search h1, .page_announcement h1 {
  display: inline-block !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--dj-navy) !important;
  border-bottom: 3px solid var(--dj-gold) !important;
  padding-bottom: 6px !important;
  margin-bottom: 18px !important;
}
.obj_issue_toc .section h2 {
  display: inline-block !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--dj-navy) !important;
  border-bottom: 3px solid var(--dj-gold) !important;
  padding-bottom: 5px !important;
  margin-bottom: 14px !important;
  background: transparent !important;
  position: static !important;
}
.obj_article_summary { padding: 16px 0 !important; border-bottom: 1px solid var(--dj-border) !important; }
.obj_article_summary h3 a, .obj_article_summary h4 a { color: var(--dj-navy) !important; text-decoration: none !important; font-weight: 700 !important; }
.obj_article_summary h3 a:hover { color: var(--dj-teal) !important; }
.obj_article_summary .authors { font-size: 0.82rem !important; color: var(--dj-muted) !important; margin-top: 4px !important; }
.obj_article_details h1 { font-size: 1.3rem !important; color: var(--dj-navy) !important; font-weight: 700 !important; border-bottom: 3px solid var(--dj-gold) !important; padding-bottom: 14px !important; margin-bottom: 14px !important; }
.obj_article_details .entry_details .item { border: 1px solid var(--dj-border) !important; border-radius: 8px !important; overflow: hidden !important; }
.obj_article_details .entry_details .item > .label, .obj_article_details .entry_details .sub_item:first-child > .label { display: block !important; background: var(--dj-navy) !important; color: #fff !important; padding: 7px 14px !important; font-size: 0.74rem !important; font-weight: 700 !important; text-transform: uppercase !important; border-left: 4px solid var(--dj-gold) !important; }
.cmp_announcements .read_more, .obj_announcement_summary .read_more { color: var(--dj-gold) !important; font-size: 0.76rem !important; font-weight: 700 !important; text-transform: uppercase !important; }
.obj_issue_summary .title a { color: var(--dj-navy) !important; text-decoration: none !important; font-weight: 700 !important; }
.cmp_breadcrumbs { font-size: 0.76rem !important; text-transform: uppercase !important; color: var(--dj-muted) !important; border-bottom: 1px solid var(--dj-border) !important; padding-bottom: 10px !important; margin-bottom: 18px !important; }
.cmp_breadcrumbs a { color: var(--dj-teal) !important; }
.cmp_breadcrumbs a:hover { color: var(--dj-navy) !important; }
.cmp_breadcrumbs .current { color: var(--dj-navy) !important; font-weight: 600 !important; }
.cmp_pagination a { font-weight: 700 !important; border: 2px solid var(--dj-border) !important; border-radius: 4px !important; color: var(--dj-teal) !important; }
.cmp_pagination a:hover { background: var(--dj-navy) !important; border-color: var(--dj-navy) !important; color: #fff !important; }
a { color: var(--dj-teal) !important; }
a:hover { color: var(--dj-navy) !important; }

/* ── Footer ───────────────────────────────────────────────── */
.pkp_structure_footer_wrapper { background: var(--dj-navy-dark) !important; border-top: none !important; border-bottom: 5px solid var(--dj-gold) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
.pkp_structure_footer_wrapper .pkp_footer_content { padding: 28px 28px 20px !important; color: rgba(255,255,255,.75) !important; font-size: 0.84rem !important; width: 100% !important; box-sizing: border-box !important; }
.pkp_structure_footer_wrapper a { color: rgba(255,255,255,.70) !important; text-decoration: none !important; }
.pkp_structure_footer_wrapper a:hover { color: var(--dj-gold) !important; }
.pkp_structure_footer_wrapper p { color: rgba(255,255,255,.65) !important; line-height: 1.7 !important; }
.pkp_structure_footer_wrapper h2, .pkp_structure_footer_wrapper h3 { color: var(--dj-gold) !important; font-size: 0.80rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; margin-bottom: 12px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(212,136,30,.35) !important; }
.pkp_brand_footer, .pkp_brand_footer img, a[href*="pkp.sfu.ca"], img[alt="Public Knowledge Project"] { display: none !important; }
.header_view { background: var(--dj-navy) !important; border-bottom: 3px solid var(--dj-gold) !important; color: #fff !important; }
.cmp_notification { border-left: 4px solid var(--dj-gold) !important; border-radius: 0 4px 4px 0 !important; }

/* ============================================================
   RESPONSIVE — Mobile Portrait ≤767px
   Disesuaikan dari AKMI custom CSS yang sudah teruji
   ============================================================ */
@media (max-width: 767px) {

  .pkp_structure_page {
    margin-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── HEAD WRAPPER ────────────────────────────────────────────
   * DOM OJS urutan asli:
   *   .pkp_head_wrapper
   *     [1] .pkp_navigation_user_wrapper  = Register/Login
   *     [2] .pkp_site_name_wrapper        = Banner/Logo
   *     [3] .pkp_navigation_primary_row   = Nav + hamburger
   *
   * Desktop: column-reverse → visual: nav|banner|user ✓
   * Mobile:  display:block → biarkan urutan DOM natural
   * ─────────────────────────────────────────────────────────── */
  .pkp_head_wrapper {
    display: block !important;
    position: relative !important;
    flex-direction: unset !important;
  }

  /* User nav — static, full width, bar gelap */
  .pkp_navigation_user_wrapper {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    background: var(--dj-navy-dark) !important;
    padding: 5px 10px !important;
    gap: 4px !important;
    z-index: auto !important;
    order: unset !important;
  }

  .pkp_navigation_user_wrapper ul,
  .pkp_navigation_user_wrapper > ul {
    justify-content: flex-end !important;
    width: auto !important;
  }

  .pkp_navigation_user_wrapper a,
  .pkp_navigation_user_wrapper li > a {
    font-size: 0.62rem !important;
    padding: 4px 9px !important;
    white-space: nowrap !important;
  }

  /* Banner — static, lebih ramping di mobile */
  .pkp_site_name_wrapper {
    display: block !important;
    order: unset !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pkp_site_name_wrapper .pkp_site_name {
    position: static !important;
    text-align: center !important;
  }

  .pkp_site_name_wrapper .pkp_site_name a.is_img img,
  .pkp_site_name_wrapper .pkp_site_name img {
    height: auto !important;
    max-height: 160px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* Nav primary */
  .pkp_navigation_primary_row {
    order: unset !important;
    padding: 0 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--dj-navy) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Wrapper di dalam nav row — jangan full width agar tidak mendorong ke tengah */
  .pkp_navigation_primary_wrapper {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Hamburger button — warna solid navy agar selalu terlihat */
  .pkp_site_nav_toggle,
  .pkp_navigation_primary_row .pkp_site_nav_toggle,
  .pkp_navigation_primary_row button,
  .pkp_navigation_primary_wrapper .pkp_site_nav_toggle {
    color: #fff !important;
    background: var(--dj-navy) !important;
    border: 2px solid var(--dj-gold) !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    position: static !important;
    transform: none !important;
    cursor: pointer !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Paksa nav primary row background navy agar tidak di-override theme */
  .pkp_navigation_primary_row,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper {
    background: var(--dj-navy) !important;
  }

  /* ── Konten utama — padding-top global semua halaman ──────── */
  .pkp_structure_main {
    padding: 12px !important;
    padding-top: 60px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Sidebar full width */
  .pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 12px 12px !important;
    box-sizing: border-box !important;
  }

  .pkp_block {
    margin-bottom: 12px !important;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .pkp_structure_footer_wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .pkp_structure_footer_wrapper .pkp_footer_content {
    padding: 20px 16px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .pkp_structure_footer_wrapper .pkp_footer_content > div {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pkp_structure_footer_wrapper .pkp_footer_content > div[style*="grid"],
  .pkp_structure_footer_wrapper .pkp_footer_content > div[style*="grid-template-columns"],
  .pkp_structure_footer_wrapper .pkp_footer_content > div[style*="display: grid"],
  .pkp_structure_footer_wrapper .pkp_footer_content > div[style*="display:grid"] {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pkp_structure_footer_wrapper .pkp_footer_content > div > div,
  .pkp_structure_footer_wrapper .pkp_footer_content .footer-col,
  .pkp_structure_footer_wrapper .pkp_footer_content [class*="col"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    margin-bottom: 20px !important;
  }

  .pkp_structure_footer_wrapper table {
    width: 100% !important;
    table-layout: fixed !important;
    word-break: break-word !important;
  }

  .pkp_structure_footer_wrapper td,
  .pkp_structure_footer_wrapper th {
    display: block !important;
    width: 100% !important;
    padding: 2px 0 !important;
    word-break: break-word !important;
  }

  .pkp_structure_footer_wrapper iframe {
    width: 100% !important;
    height: 200px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* ── Article & issue ─────────────────────────────────────── */
  .obj_article_summary {
    padding: 10px 0 !important;
  }

  .obj_galley_link {
    font-size: 0.68rem !important;
    padding: 0.3em 0.7em !important;
  }

  /* Cover issue */
  .obj_issue_summary .cover,
  .issue_cover,
  .pkp_page_index .current_issue .cover,
  .obj_issue_toc .cover,
  .current_issue .cover {
    margin-top: 60px !important;
  }

  .obj_issue_summary .cover img,
  .issue_cover img,
  .pkp_page_index .current_issue .cover img,
  .obj_issue_toc .cover img,
  .issue_cover_image img,
  .current_issue .cover img {
    max-width: 160px !important;
    max-height: 220px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 12px !important;
  }

  /* Gambar buku besar di homepage */
  .pkp_page_index .pkp_structure_main img[src*="blobid"],
  .pkp_page_index .pkp_structure_main img[src*="/site/images/"],
  .pkp_page_index .pkp_structure_main .page > p:first-child img,
  .pkp_page_index .pkp_structure_main .page > div:first-child img {
    display: block !important;
    margin-top: 60px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .pkp_page_index .current_issue .obj_issue_summary,
  .current_issue .obj_issue_summary {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 60px !important;
  }

  .pkp_page_index .current_issue {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Padding atas konten homepage */
  .pkp_page_index .pkp_structure_main {
    padding-top: 60px !important;
  }

  /* Breadcrumb */
  .cmp_breadcrumbs {
    font-size: 0.68rem !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
  }

  /* Heading */
  .pkp_page_index .current_issue h2,
  .page_issue_archive h1 {
    font-size: 0.88rem !important;
  }

} /* end @media max-width: 767px */

/* ── Sidebar Menu Jurnal (Custom Block .dj-menu) ─────────── */
ul.dj-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
}

ul.dj-menu li {
  border-bottom: 1px solid #EEF0F3 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

ul.dj-menu li:last-child {
  border-bottom: none !important;
}

ul.dj-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0D2B4E !important;
  text-decoration: none !important;
  border-left: 4px solid transparent !important;
  transition: background .15s, border-color .15s, color .15s !important;
  line-height: 1.3 !important;
}

ul.dj-menu li a:hover {
  background: #EEF5FF !important;
  color: #0D2B4E !important;
  border-left-color: #D4881E !important;
  text-decoration: none !important;
}

ul.dj-menu li a:active {
  background: #dceeff !important;
  color: #185FA5 !important;
  border-left-color: #185FA5 !important;
}

ul.dj-menu li a .dj-icon {
  font-size: 15px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  text-align: center !important;
}

ul.dj-menu li a .dj-label {
  flex: 1 !important;
}

ul.dj-menu li a .dj-arrow {
  font-size: 9px !important;
  color: #cbd5e0 !important;
  flex-shrink: 0 !important;
  transition: transform .15s, color .15s !important;
}

ul.dj-menu li a:hover .dj-arrow {
  transform: translateX(3px) !important;
  color: #D4881E !important;
}

ul.dj-menu li a:active .dj-arrow {
  color: #185FA5 !important;
}