/* ============================================================
   Loka Bhakti — Full Custom Style V6 WHITE
   OJS 3.3.0.6 | jaf-fisib.unpak.ac.id
   Updated: 2026-06-01
   ============================================================ */

/* ══════════════════════════════════════════════
   BAGIAN 0 — TYPOGRAPHY (Frontiers-style)
   Font: DM Sans (UI) + STIX Two Text (konten ilmiah)
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Global UI semua halaman — DM Sans ── */
body, html,
p, li, td, th, label, input, textarea, select, button,
h1, h2, h3, h4, h5, h6,
.pkp_navigation_primary > li > a,
.pkp_block,
.pkp_footer_content,
.loka-reviewer-section,
.loka-editorial-section,
.pkp_structure_footer,
.pkp_page_article,
.pkp_page_issue,
.pkp_page_catalog {
  font-family: 'DM Sans', Arial, sans-serif !important;
}

/* ── Konten ilmiah — STIX Two Text ── */
.article-abstract, .abstract, #abstract,
.pkp_page_article .abstract,
.article_abstract, section.abstract,
.article-references, .references, #references,
.pkp_page_article .main_entry,
.pkp_page_article .main_entry p,
.pkp_page_article .main_entry li,
.obj_issue_toc .description {
  font-family: 'STIX Two Text', Georgia, serif !important;
  font-size: 16.5px;
  line-height: 1.8;
}

/* ──────────────────────────────────────────────
   VARIABEL UTAMA
   ────────────────────────────────────────────── */
:root {
  /* Cover & Homepage */
  --cover-width:            200px;
  --cover-margin-top:        78px;
  --cover-margin-right:      24px;
  --cover-margin-bottom:     16px;
  --cover-margin-left:       16px;
  --cover-bg:               #ffffff;
  --cover-frame-border:     1px solid #c8d8ec;
  --cover-frame-padding:     5px;
  --cover-frame-radius:       0px;

  /* Index By */
  --index-logo-width:        200px;
  --index-btn-bg:           #f4f7fb;
  --index-btn-bg-hover:     #e6eef8;
  --index-btn-border:       1px solid #c8d8ec;
  --index-btn-radius:        8px;
  --index-btn-padding:       8px 12px;
  --index-btn-margin:        4px;
  --index-btn-shadow:        0 1px 4px rgba(0,0,0,0.08);
  --index-btn-shadow-hover:  0 4px 12px rgba(0,0,0,0.15);

  /* About Journal Sidebar */
  --about-hover-bg:         #e8f0fb;
  --about-hover-color:      #1a4a7a;
  --about-hover-border:     #ea580c;
  --about-transition:       0.25s ease;

  /* Current Issue */
  --issue-cover-size:        180px;

  /* Published Date */
  --published-margin-left:   0px;
  --published-margin-top:    12px;
  --published-text-align:    left;
  --published-font-size:     13px;
  --published-color:         #888;
}


/* ══════════════════════════════════════════════
   BAGIAN 1 — HEADER
   ══════════════════════════════════════════════ */

.pkp_site_name .is_img img {
  max-height: 80px !important;
  width:      auto !important;
  height:     auto !important;
  transition: .3s;
}

.pkp_site_name_wrapper {
  background:    #fff;
  padding:       12px 0;
  border-bottom: 1px solid #eee;
  margin:        0 !important;
}

.pkp_site_name {
  margin:     0 !important;
  padding:    0 !important;
  text-align: left;
}

.pkp_head_wrapper {
  background:    #fff !important;
  border-bottom: 1px solid #e8e8e8 !important;
  padding:       0 !important;
}

.pkp_site_nav_menu {
  padding-top: 0 !important;
}

/* Sticky navbar */
.pkp_navigation_primary_wrapper {
  background:  #fff;
  position:    sticky;
  top:         0;
  z-index:     999;
  box-shadow:  0 4px 20px rgba(0,0,0,.06);
  display:     flex !important;
  align-items: center !important;
}

/* Search inline di kanan navbar */
.pkp_navigation_search_wrapper {
  margin-left:   auto !important;
  margin-top:    0 !important;
  margin-bottom: 0 !important;
  padding:       0 20px !important;
  align-self:    center !important;
}

/* Desktop: menu center */
@media (min-width: 769px) {
  .pkp_navigation_primary {
    display:         flex;
    justify-content: center;
    gap:             10px;
  }
}

.pkp_navigation_primary > li > a {
  font-size:      15px;
  font-weight:    700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding:        18px 20px !important;
  transition:     .3s;
}

.pkp_navigation_primary > li > a:hover {
  color: #d66b18 !important;
}

.pkp_navigation_primary .current > a,
.pkp_navigation_primary .active > a {
  color:    #d66b18 !important;
  position: relative;
}

.pkp_navigation_primary .current > a::after,
.pkp_navigation_primary .active > a::after {
  content:       "";
  position:      absolute;
  bottom:        0;
  left:          20%;
  width:         60%;
  height:        3px;
  background:    #d66b18;
  border-radius: 999px;
}

@media (max-width: 768px) {
  .pkp_site_name_wrapper {
    padding: 4px 0 !important;
  }
  .pkp_site_name .is_img img {
    max-height: 50px !important;
    width:      auto !important;
  }
}


/* ══════════════════════════════════════════════
   BAGIAN 2 — COVER & LAYOUT HOMEPAGE
   ══════════════════════════════════════════════ */

img[src*="homepageImage_en_US"] {
  float:         right !important;
  width:         var(--cover-width) !important;
  max-width:     var(--cover-width) !important;
  height:        auto !important;
  margin:        var(--cover-margin-top) var(--cover-margin-right) var(--cover-margin-bottom) var(--cover-margin-left) !important;
  display:       block;
  background:    var(--cover-bg);
  border:        var(--cover-frame-border) !important;
  border-radius: var(--cover-frame-radius) !important;
  padding:       var(--cover-frame-padding) !important;
  box-shadow:    0 2px 8px rgba(0,0,0,0.08);
}

/* [ADD v4] Cover float:none di HP kecil agar tidak makan lebar teks */
@media (max-width: 480px) {
  img[src*="homepageImage_en_US"] {
    float:      none !important;
    display:    block !important;
    margin:     0 auto 16px !important;
    width:      160px !important;
    max-width:  160px !important;
  }
}

#homepageAbout {
  display:    flow-root;
  text-align: justify;
}

#homepageAbout::after {
  content: "";
  display: table;
  clear:   both;
}

#homepageAbout h2 {
  margin-top: 0;
  text-align: left;
}

#homepageIssue {
  clear: both;
}

.about-journal-home {
  margin:        40px auto;
  padding:       30px;
  background:    #f8f8f8;
  border-radius: 12px;
}

.about-journal-home h2 {
  font-size:     32px;
  margin-bottom: 15px;
  color:         #222;
}

.about-journal-home p {
  font-size:   16px;
  line-height: 1.8;
  color:       #555;
}


/* ══════════════════════════════════════════════
   BAGIAN 3 — TEKS JUSTIFY
   ══════════════════════════════════════════════ */

#homepageAbout p,
#homepageAbout div,
#homepageAbout span,
.homepage_about p,
.pkp_page_index #homepageAbout p,
.pkp_page_issue .description p,
.obj_issue_summary .description p,
.issue_description p,
#homepageIssue .description p,
.pkp_page_index .description p,
.article-abstract p,
.abstract p,
#abstract p,
.pkp_page_article .abstract p,
.article_abstract p,
section.abstract p,
.article-references p,
.references p,
#references p,
.pkp_page_article .references p,
.article_references p,
section.references p,
.pkp_page_article .main_entry .references,
.pkp_page_article .main_entry .references p {
  text-align:      justify !important;
  text-align-last: left !important;
  hyphens:         manual !important;
  word-break:      normal !important;
  overflow-wrap:   break-word !important;
}


/* ══════════════════════════════════════════════
   BAGIAN 4 — SIDEBAR: ABOUT JOURNAL
   ══════════════════════════════════════════════ */

.pkp_block a[href*="editorialTeam"],
.pkp_block a[href*="PeerReview"],
.pkp_block a[href*="FocusScope"],
.pkp_block a[href*="AuthorGuidelines"],
.pkp_block a[href*="PublicationEthics"],
.pkp_block a[href*="JournalPolicy"],
.pkp_block a[href*="OnlineSubmission"],
.pkp_block a[href*="ReviewPolicy"],
.pkp_block a[href*="OpenAccess"],
.pkp_block a[href*="PublicationFrequency"],
.pkp_block a[href*="PublicationCharge"],
.pkp_block a[href*="information"] {
  display:         block !important;
  padding:         7px 12px !important;
  margin:          2px 0 !important;
  border-left:     3px solid transparent;
  border-radius:   6px;
  color:           inherit;
  text-decoration: none !important;
  font-size:       14px;
  line-height:     1.5;
  transition:
    background   var(--about-transition),
    color        var(--about-transition),
    transform    var(--about-transition),
    border-left  var(--about-transition),
    padding-left var(--about-transition),
    box-shadow   var(--about-transition);
}

.pkp_block a[href*="editorialTeam"]:hover,
.pkp_block a[href*="PeerReview"]:hover,
.pkp_block a[href*="FocusScope"]:hover,
.pkp_block a[href*="AuthorGuidelines"]:hover,
.pkp_block a[href*="PublicationEthics"]:hover,
.pkp_block a[href*="JournalPolicy"]:hover,
.pkp_block a[href*="submissions"]:hover,
.pkp_block a[href*="OnlineSubmission"]:hover,
.pkp_block a[href*="ReviewPolicy"]:hover,
.pkp_block a[href*="OpenAccess"]:hover,
.pkp_block a[href*="PublicationFrequency"]:hover,
.pkp_block a[href*="PublicationCharge"]:hover,
.pkp_block a[href*="information"]:hover {
  background:      var(--about-hover-bg) !important;
  color:           var(--about-hover-color) !important;
  border-left:     3px solid var(--about-hover-border) !important;
  padding-left:    12px !important;
  transform:       translateY(-3px);
  box-shadow:      2px 2px 8px rgba(74,144,217,0.15);
  text-decoration: none !important;
  border-radius:   6px;
}

.pkp_block a[href*="editorialTeam"]:active,
.pkp_block a[href*="PeerReview"]:active,
.pkp_block a[href*="FocusScope"]:active,
.pkp_block a[href*="AuthorGuidelines"]:active,
.pkp_block a[href*="JournalPolicy"]:active,
.pkp_block a[href*="submissions"]:active,
.pkp_block a[href*="OnlineSubmission"]:active,
.pkp_block a[href*="ReviewPolicy"]:active,
.pkp_block a[href*="OpenAccess"]:active,
.pkp_block a[href*="PublicationFrequency"]:active,
.pkp_block a[href*="PublicationCharge"]:active,
.pkp_block a[href*="information"]:active {
  transform:  translateX(2px);
  box-shadow: none;
  background: #d4e6f8 !important;
}


/* ══════════════════════════════════════════════
   BAGIAN 5 — SIDEBAR: ARTICLE TEMPLATE
   Note: :has() didukung Chrome 105+, Safari 15.4+,
   Firefox 121+. Aman untuk browser modern.
   ══════════════════════════════════════════════ */

.pkp_block a:has(img[src*="template"]) {
  display:       inline-block;
  border-radius: 4px;
  transition:    opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pkp_block a:has(img[src*="template"]):hover {
  opacity:    0.88;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transform:  translateY(-2px);
}

.pkp_block a:has(img[src*="template"]):active {
  transform:  translateY(0);
  box-shadow: none;
}


/* ══════════════════════════════════════════════
   BAGIAN 6 — SIDEBAR: INDEX BY
   ══════════════════════════════════════════════ */

.pkp_block:has(img[src*="/images/logo/"]) .pkp_block_content {
  display:         flex !important;
  flex-wrap:       wrap !important;
  justify-content: center !important;
  align-items:     center !important;
  gap:             6px !important;
  padding:         4px !important;
}

.pkp_block a:has(img[src*="/images/logo/"]) {
  display:         inline-flex !important;
  align-items:     center;
  justify-content: center;
  background:      var(--index-btn-bg);
  border:          var(--index-btn-border);
  border-radius:   var(--index-btn-radius);
  padding:         var(--index-btn-padding);
  margin:          var(--index-btn-margin);
  box-shadow:      var(--index-btn-shadow);
  text-decoration: none !important;
  transition:      all 0.2s ease;
}

.pkp_block a:has(img[src*="/images/logo/"]):hover {
  background:   var(--index-btn-bg-hover);
  box-shadow:   var(--index-btn-shadow-hover);
  transform:    translateY(-2px);
  border-color: #a0b8d8;
}

.pkp_block a:has(img[src*="/images/logo/"]):active {
  transform:  translateY(0);
  box-shadow: var(--index-btn-shadow);
}

.pkp_block img[src*="/images/logo/"]:not(a img) {
  display:       inline-flex !important;
  background:    var(--index-btn-bg);
  border:        var(--index-btn-border);
  border-radius: var(--index-btn-radius);
  padding:       var(--index-btn-padding);
  margin:        var(--index-btn-margin);
  box-shadow:    var(--index-btn-shadow);
}

.pkp_block img[src*="/images/logo/"] {
  width:      var(--index-logo-width) !important;
  height:     auto !important;
  display:    block;
  object-fit: contain;
}


/* ══════════════════════════════════════════════
   BAGIAN 7 — SIDEBAR BLOCK
   ══════════════════════════════════════════════ */

.pkp_block {
  background:    #fff;
  border-radius: 14px;
  padding:       16px;
  margin-bottom: 25px;
  border:        none;
  box-shadow:    0 4px 14px rgba(0,0,0,0.05);
}

.pkp_block h2 {
  font-size:     18px;
  font-weight:   700;
  margin-bottom: 15px;
}

.pkp_structure_sidebar {
  padding-left: 30px;
  padding-top:  10px;
}


/* ══════════════════════════════════════════════
   BAGIAN 10 — PEER REVIEWER SECTION
   ══════════════════════════════════════════════ */

.loka-reviewer-section {
  padding:     32px 20px;
  font-family: Arial, sans-serif;
}

.loka-reviewer-container {
  max-width: 1050px;
  margin:    auto;
}

.loka-reviewer-title {
  text-align:    center;
  margin-bottom: 30px;
}

.loka-reviewer-title small {
  color:          #ea580c;
  letter-spacing: 3px;
  font-size:      11px;
  font-weight:    bold;
  text-transform: uppercase;
}

.loka-reviewer-title h2 {
  font-size:     28px;
  color:         #1e293b;
  margin:        8px 0 10px;
}

.loka-reviewer-title p {
  color:       #64748b;
  font-size:   14px;
  line-height: 1.7;
  max-width:   600px;
  margin:      auto;
}

/* Grid 2 kolom */
.loka-reviewer-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   10px;
}

/* Card */
.loka-reviewer-card {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       14px 16px;
  background:    #ffffff;
  border:        1px solid #fed7aa;
  border-left:   4px solid #f97316;
  border-radius: 0 10px 10px 0;
  transition:    box-shadow 0.2s ease, transform 0.2s ease;
}

.loka-reviewer-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 18px rgba(249,115,22,0.10);
}

/* Sembunyikan foto */
.loka-reviewer-photo {
  display: none !important;
}

/* Avatar inisial via ::before */
.loka-reviewer-card::before {
  content:         attr(data-initials);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  min-width:       40px;
  border-radius:   50%;
  background:      #fff7ed;
  border:          2px solid #fdba74;
  font-size:       13px;
  font-weight:     bold;
  color:           #ea580c;
  flex-shrink:     0;
}

/* Info */
.loka-reviewer-info {
  flex:      1;
  min-width: 0;
}

.loka-reviewer-name {
  font-size:     13px;
  font-weight:   bold;
  color:         #1e293b;
  margin-bottom: 2px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.loka-reviewer-affiliation {
  font-size:     11px;
  color:         #64748b;
  line-height:   1.5;
  margin-bottom: 5px;
}

/* [FIX v4] Hapus dead code blok pill reviewer-tags.
   Sebelumnya ada style pill yang langsung di-override
   display:none tepat di bawahnya — kini hanya satu rule. */
.loka-reviewer-tags {
  display: none !important;
}

/* ID Links */
.loka-reviewer-ids {
  display:    flex;
  flex-wrap:  wrap;
  gap:        5px;
  margin-top: 6px;
}

.loka-reviewer-ids:empty {
  display: none;
}

/* Pill dasar */
.loka-id-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             3px;
  padding:         2px 6px;
  border-radius:   30px;
  border:          1px solid;
  font-size:       9px;
  font-weight:     bold;
  line-height:     1.3;
  text-decoration: none !important;
  transition:      opacity 0.15s, transform 0.15s;
}

.loka-id-pill:hover {
  opacity:   0.82;
  transform: translateY(-1px);
}

.loka-id-scholar {
  background:   #e8f0fe;
  color:        #1a56db !important;
  border-color: #b3c6f7;
}

.loka-id-orcid {
  background:   #f0f7e6;
  color:        #3a7a10 !important;
  border-color: #b5d97a;
}

.loka-id-scopus {
  background:   #fff3e8;
  color:        #b34700 !important;
  border-color: #ffc28a;
}

@media (max-width: 768px) {
  .loka-reviewer-grid {
    grid-template-columns: 1fr;
  }
  .loka-reviewer-card {
    padding: 12px 14px;
  }
}


/* ══════════════════════════════════════════════
   BAGIAN 11 — EDITORIAL TEAM SECTION
   ══════════════════════════════════════════════ */

.loka-editorial-section {
  padding:     32px 20px;
  font-family: Arial, sans-serif;
}

.loka-editorial-container {
  max-width: 1050px;
  margin:    auto;
}

.loka-editorial-title {
  text-align:    center;
  margin-bottom: 30px;
}

.loka-editorial-title small {
  color:          #ea580c;
  letter-spacing: 3px;
  font-size:      11px;
  font-weight:    bold;
  text-transform: uppercase;
}

.loka-editorial-title h2 {
  font-size:     28px;
  color:         #1e293b;
  margin:        8px 0 10px;
}

.loka-editorial-title p {
  color:       #64748b;
  font-size:   14px;
  line-height: 1.7;
  max-width:   600px;
  margin:      auto;
}

/* Group label */
table.loka-editorial-group-header {
  width:           100%;
  border:          none !important;
  border-collapse: collapse;
  margin:          28px 0 10px;
  padding:         0;
  background:      transparent;
}

table.loka-editorial-group-header tr,
table.loka-editorial-group-header td {
  border:     none !important;
  background: transparent;
  padding:    0;
  margin:     0;
}

table.loka-editorial-group-header td:first-child {
  width:          6px;
  padding-right:  10px;
  vertical-align: middle;
}

.loka-editorial-group-bar {
  display:       block;
  width:         4px;
  height:        16px;
  background:    #f97316;
  border-radius: 2px;
}

table.loka-editorial-group-header td:last-child {
  font-size:      11px;
  font-weight:    bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          #ea580c;
  vertical-align: middle;
  padding-bottom: 10px;
  border-bottom:  2px solid #fed7aa !important;
  width:          100%;
}

/* Grid */
.loka-editorial-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   10px;
}

.loka-editorial-grid.loka-editorial-grid-single {
  grid-template-columns: minmax(280px, 50%);
}

@media (max-width: 768px) {
  .loka-editorial-grid,
  .loka-editorial-grid.loka-editorial-grid-single {
    grid-template-columns: 1fr;
  }
}

/* Card */
.loka-editorial-card {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       12px 14px;
  background:    #ffffff;
  border:        1px solid #fed7aa;
  border-left:   4px solid #f97316;
  border-radius: 0 10px 10px 0;
  min-width:     0;
  transition:    box-shadow 0.2s ease, transform 0.2s ease;
}

.loka-editorial-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 18px rgba(249,115,22,0.10);
}

/* Avatar inisial (default, tampil kalau tidak ada foto) */
.loka-editorial-card::before {
  content:         attr(data-initials);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  min-width:       40px;
  border-radius:   50%;
  background:      #fff7ed;
  border:          2px solid #fdba74;
  font-size:       13px;
  font-weight:     bold;
  color:           #ea580c;
  flex-shrink:     0;
}

/* Avatar foto */
.loka-editorial-avatar {
  width:         40px;
  height:        40px;
  min-width:     40px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid #fdba74;
  flex-shrink:   0;
  background:    #fff7ed;
  display:       block;
}

/* Kalau ada foto, sembunyikan inisial */
.loka-editorial-card:has(.loka-editorial-avatar)::before {
  display: none;
}

/* Kalau foto gagal load, sembunyikan img */
.loka-editorial-avatar[data-error="true"] {
  display: none;
}

/* Info */
.loka-editorial-info {
  flex:      1;
  min-width: 0;
}

.loka-editorial-name {
  font-size:     13px;
  font-weight:   bold;
  color:         #1e293b;
  margin-bottom: 2px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.loka-editorial-position {
  font-size:      11px;
  font-weight:    bold;
  color:          #ea580c;
  letter-spacing: 0.3px;
  margin-bottom:  2px;
}

.loka-editorial-affiliation {
  font-size:     11px;
  color:         #64748b;
  line-height:   1.4;
  margin-bottom: 4px;
}

.loka-editorial-ids {
  display:    flex;
  flex-wrap:  wrap;
  gap:        4px;
  margin-top: 4px;
}

.loka-editorial-ids:empty {
  display: none;
}

@media (max-width: 768px) {
  .loka-editorial-card {
    padding: 10px 12px;
  }
}


/* ══════════════════════════════════════════════
   BAGIAN 12 — RUNNING TEXT (Marquee)
   ══════════════════════════════════════════════ */

.loka-marquee {
  width:      100%;
  overflow:   hidden;
  background: #111827;
  color:      white;
  padding:    10px 0;
  box-sizing: border-box;
}

.loka-marquee-inner {
  display:   flex;
  width:     max-content;
  animation: lokaRun 30s linear infinite;
}

.loka-marquee-content {
  display:        inline-block;
  white-space:    nowrap;
  padding-right:  80px;
  font-size:      14px;
  font-weight:    500;
  letter-spacing: 0.5px;
}

.loka-marquee-content span {
  color:       #fbbf24;
  font-weight: bold;
}

@keyframes lokaRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ══════════════════════════════════════════════
   BAGIAN 13 — HERO CARD (LEGACY — tidak dipakai)
   Pertimbangkan hapus bila .lb-hero-card tidak ada
   di HTML OJS. Dipertahankan untuk backward compat.
   ══════════════════════════════════════════════ */

.lb-hero-card {
  background:    linear-gradient(135deg, #e87722 0%, #c75b12 100%);
  color:         white;
  padding:       40px 50px;
  border-radius: 18px;
  margin:        30px 0;
}

@media (max-width: 768px) {
  .lb-hero-card {
    padding: 24px 20px;
  }
}


/* ══════════════════════════════════════════════
   BAGIAN 14 — HERO WHITE ELEGANT
   ══════════════════════════════════════════════ */

.lb-hero-white {
  position:      relative;
  overflow:      hidden;
  width:         100%;
  min-height:    340px;
  display:       flex;
  align-items:   center;
  background:    #ffffff;
  border-radius: 0 !important;
  margin:        0 !important;
}

/* Motif lingkaran oranye tipis */
.lb-hw-bg {
  position:       absolute;
  right:          10px;
  top:            50%;
  transform:      translateY(-50%);
  width:          480px;
  height:         480px;
  pointer-events: none;
  z-index:        1;
}

.lb-hw-bg-fill {
  position:      absolute;
  width:         340px;
  height:        340px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(214,107,24,0.06) 0%, transparent 70%);
  top:           70px;
  left:          70px;
}

.lb-hw-bg-c1 {
  position:      absolute;
  width:         480px;
  height:        480px;
  border-radius: 50%;
  border:        1.5px solid rgba(214,107,24,0.10);
  top:           0;
  left:          0;
}

.lb-hw-bg-c2 {
  position:      absolute;
  width:         360px;
  height:        360px;
  border-radius: 50%;
  border:        1.5px solid rgba(214,107,24,0.08);
  top:           60px;
  left:          60px;
}

.lb-hw-bg-c3 {
  position:      absolute;
  width:         240px;
  height:        240px;
  border-radius: 50%;
  border:        1.5px solid rgba(214,107,24,0.07);
  top:           120px;
  left:          120px;
}

/* [FIX v4] Tambah position:relative agar .lb-hw-cover
   (position:absolute) memakai .lb-hw-inner sebagai
   reference point, bukan naik ke .lb-hero-white atau body */
.lb-hw-inner {
  position:        relative;
  z-index:         2;
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         48px 56px 44px;
  gap:             40px;
}

.lb-hw-left {
  flex:      1;
  max-width: 560px;
}

.lb-hw-right {
  flex:            0 0 200px;
  display:         flex;
  justify-content: center;
  align-items:     center;
}

/* Cover image */
.lb-hw-cover {
  position:      absolute;
  right:         230px;
  top:           50px;
  width:         250px;
  height:        auto;
  border-radius: 2px;
  box-shadow:    none;              /* hapus box shadow */
  display:       block;
  transition:    transform 0.3s ease;
  mix-blend-mode: multiply;         /* ini kunci utamanya */
}

.lb-hw-cover:hover {
  transform: translateY(-4px);
}

/* Badge */
.lb-hw-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        4px 12px;
  background:     #fff7ed;
  border:         1px solid #fed7aa;
  border-radius:  999px;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 2px;
  color:          #c2410c;
  text-transform: uppercase;
  margin-bottom:  20px;
}

.lb-hw-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    #ea580c;
  display:       inline-block;
  flex-shrink:   0;
}

/* H1 */
.lb-hero-white h1 {
  font-size:      52px !important;
  font-weight:    900 !important;
  color:          #1e293b !important;
  line-height:    0.95 !important;
  letter-spacing: -1.5px !important;
  margin-bottom:  10px !important;
}

/* [ADD v4] Intermediate breakpoint tablet 769–900px */
@media (max-width: 900px) and (min-width: 769px) {
  .lb-hero-white h1 {
    font-size: 42px !important;
  }
}

/* H2 subtitle */
.lb-hero-white h2,
.lb-hero-white .lb-hw-subtitle {
  font-size:      15px !important;
  font-weight:    600 !important;
  color:          #ea580c !important;
  letter-spacing: 0.2px !important;
  line-height:    1.5 !important;
  margin-bottom:  12px !important;
}

/* Divider */
.lb-hw-divider {
  width:         36px;
  height:        2px;
  background:    #fdba74;
  border-radius: 2px;
  margin-bottom: 14px;
}

/* Deskripsi */
.lb-hero-white p {
  font-size:     13px !important;
  line-height:   1.75 !important;
  color:         #64748b !important;
  max-width:     420px;
  margin-bottom: 26px !important;
  font-weight:   400 !important;
}

/* Buttons */
.lb-hero-buttons {
  display:       flex;
  gap:           10px;
  flex-wrap:     wrap;
  margin-bottom: 24px;
}

.lb-hero-white .lb-btn-primary,
a.lb-btn-primary {
  display:         inline-flex !important;
  align-items:     center !important;
  padding:         11px 22px !important;
  background:      #ea580c !important;
  color:           #ffffff !important;
  font-size:       13px !important;
  font-weight:     700 !important;
  border-radius:   8px !important;
  text-decoration: none !important;
  border:          none !important;
  box-shadow:      0 4px 14px rgba(234,88,12,0.30) !important;
  line-height:     1 !important;
  transition:      transform 0.2s ease, box-shadow 0.2s ease;
}

.lb-hero-white .lb-btn-primary:hover,
a.lb-btn-primary:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(234,88,12,0.38) !important;
  color:      #ffffff !important;
}

.lb-hero-white .lb-btn-secondary,
a.lb-btn-secondary {
  display:         inline-flex !important;
  align-items:     center !important;
  padding:         11px 22px !important;
  background:      #ffffff !important;
  color:           #1e293b !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  border-radius:   8px !important;
  text-decoration: none !important;
  border:          1.5px solid #e2e8f0 !important;
  line-height:     1 !important;
  transition:      transform 0.2s ease, border-color 0.2s ease;
}

.lb-hero-white .lb-btn-secondary:hover,
a.lb-btn-secondary:hover {
  transform:    translateY(-2px) !important;
  border-color: #cbd5e1 !important;
  color:        #1e293b !important;
}

/* Metrics bar */
.lb-hw-metrics {
  display:       flex;
  gap:           0;
  width:         fit-content;
  border:        1px solid #f1f5f9;
  border-radius: 12px;
  overflow:      hidden;
}

.lb-hw-metric {
  padding:      12px 20px;
  text-align:   center;
  border-right: 1px solid #f1f5f9;
  background:   #fff;
}

.lb-hw-metric:last-child {
  border-right: none;
}

.lb-hw-num {
  font-size:      18px;
  font-weight:    800;
  color:          #1e293b;
  line-height:    1;
  letter-spacing: -0.5px;
}

.lb-hw-lbl {
  font-size:      9px;
  font-weight:    600;
  color:          #94a3b8;
  margin-top:     4px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  /* Hero wrapper */
  .lb-hero-white {
    min-height: auto;
    overflow:   visible;
  }

  /* Inner: kolom tunggal, teks di bawah cover */
  .lb-hw-inner {
    flex-direction: column;
    align-items:    center;
    padding:        28px 20px 24px;
    gap:            20px;
  }

  /* [FIX v5] Cover: cabut position:absolute, masuk ke flow normal
     Sebelumnya cover tetap absolute di mobile → overlap teks */
  .lb-hw-cover {
    position:       relative !important;
    right:          auto !important;
    top:            auto !important;
    width:          160px !important;
    margin:         0 auto !important;
    display:        block !important;
    box-shadow:     none !important;
    mix-blend-mode: multiply !important;
  }

  /* Right column: full width, center cover */
  .lb-hw-right {
    flex:            none;
    width:           100%;
    justify-content: center;
    order:           1;
  }

  /* Left column: teks di bawah cover */
  .lb-hw-left {
    width:      100%;
    max-width:  100%;
    text-align: center;
    order:      2;
  }

  /* Badge center */
  .lb-hw-badge {
    margin-left:  auto;
    margin-right: auto;
  }

  /* Divider center */
  .lb-hw-divider {
    margin-left:  auto;
    margin-right: auto;
  }

  /* Buttons: stack vertikal, full width */
  .lb-hero-buttons {
    flex-direction: column;
    align-items:    stretch;
    gap:            10px;
  }

  .lb-hero-white .lb-btn-primary,
  a.lb-btn-primary,
  .lb-hero-white .lb-btn-secondary,
  a.lb-btn-secondary {
    justify-content: center !important;
    width:           100% !important;
    text-align:      center !important;
  }

  /* Deskripsi max-width lepas */
  .lb-hero-white p {
    max-width: 100% !important;
  }

  /* Metrics: full width rata */
  .lb-hw-metrics {
    width: 100%;
  }
  .lb-hw-metric {
    flex:    1;
    padding: 10px 8px;
  }

  /* Heading */
  .lb-hero-white h1 {
    font-size:      34px !important;
    letter-spacing: -0.5px !important;
    line-height:    1.1 !important;
  }
  .lb-hero-white h2,
  .lb-hero-white .lb-hw-subtitle {
    font-size: 13px !important;
  }

  /* Sembunyikan dekorasi lingkaran */
  .lb-hw-bg { display: none; }
}
/* e-ISSN metric clickable effect */
.lb-hw-metric:last-child {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s, transform 0.2s;
}

.lb-hw-metric:last-child:hover {
  background: #fff7ed;
  transform: translateY(-2px);
}

.lb-hw-metric:last-child .lb-hw-num {
  transition: color 0.2s;
}

.lb-hw-metric:last-child:hover .lb-hw-num {
  color: var(--lb-primary);
}

/* ══════════════════════════════════════════════
   BAGIAN 14A — INDEXED BY
   ══════════════════════════════════════════════ */

.lb-indexed-section {
  max-width: 1100px;
  margin:    0 auto !important;
  padding:   18px 56px 24px !important;
}

.lb-indexed-grid {
  display:               grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap:                   10px !important;
  width:                 100% !important;
}

.lb-indexed-grid a {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  min-height:      56px !important;
  padding:         12px 14px !important;
  background:      #fff !important;
  border:          1px solid #f1f5f9 !important;
  border-radius:   12px !important;
  text-decoration: none !important;
  transition:      transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lb-indexed-grid a:hover {
  border-color: #fed7aa !important;
  transform:    translateY(-2px) !important;
  box-shadow:   0 6px 16px rgba(0,0,0,0.06) !important;
}

.lb-indexed-grid img {
  max-width:  110px !important;
  max-height: 28px !important;
  width:      auto !important;
  height:     auto !important;
  object-fit: contain !important;
  opacity:    0.82;
  transition: opacity 0.2s ease;
}

.lb-indexed-grid a:hover img {
  opacity: 1;
}

@media (max-width: 768px) {
  .lb-indexed-section {
    padding: 15px 16px 20px !important;
  }
  .lb-indexed-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}


/* ══════════════════════════════════════════════
   BAGIAN 15 — FOOTER
   ══════════════════════════════════════════════ */

.pkp_brand_footer,
.page_footer .pkp_brand_footer,
footer .pkp_brand_footer {
  display:    none !important;
  visibility: hidden !important;
  height:     0 !important;
  overflow:   hidden !important;
}

.pkp_structure_footer_wrapper {
  background:  #ffffff !important;
  border-top:  4px solid #ea580c;
  margin-top:  0 !important;
  padding-top: 0 !important;
  box-shadow:  0 -2px 20px rgba(0,0,0,0.04);
}

.pkp_structure_footer {
  background:  #ffffff !important;
  color:       #111827 !important;
  padding:     0 40px 30px !important;
  margin-top:  0 !important;
  font-family: Arial, sans-serif;
}

.pkp_footer_content {
  max-width:   1200px;
  margin:      auto;
  line-height: 1.9;
  font-size:   15px;
  color:       #374151 !important;
}

.pkp_footer_content strong,
.pkp_footer_content b {
  color:          #111827;
  font-size:      16px;
  letter-spacing: 0.3px;
}

.pkp_footer_content a {
  color:           #ea580c !important;
  text-decoration: none;
  font-weight:     600;
  transition:      all 0.3s ease;
}

.pkp_footer_content a:hover {
  color:        #c2410c !important;
  padding-left: 3px;
}

.pkp_footer_content p {
  margin-bottom: 12px;
}

.page_index_journal .homepage_image,
.page_index_journal .current_issue,
.page_index_journal .additional_content {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .jaf-footer-grid   { grid-template-columns: 1fr 1fr !important; padding: 28px 24px 20px !important; }
  .jaf-col-brand     { padding-right: 20px !important; border-right: 1px solid #f0f0f0 !important; border-bottom: none !important; }
  .jaf-col-info      { padding-left: 20px !important; padding-right: 0 !important; border-right: none !important; }
  .jaf-col-index     { padding-left: 0 !important; padding-right: 20px !important; border-right: 1px solid #f0f0f0 !important; border-top: 1px solid #f0f0f0 !important; padding-top: 24px !important; }
  .jaf-col-contact   { padding-left: 20px !important; border-top: 1px solid #f0f0f0 !important; padding-top: 24px !important; }
  .jaf-footer-bottom { flex-direction: column !important; align-items: flex-start !important; padding: 13px 24px !important; }
}

@media (max-width: 540px) {
  .jaf-footer-grid      { grid-template-columns: 1fr !important; padding: 24px 16px !important; }
  .jaf-col-brand        { padding-right: 0 !important; border-right: none !important; border-bottom: 1px solid #f0f0f0 !important; padding-bottom: 20px !important; }
  .jaf-col-info         { padding: 20px 0 !important; border-right: none !important; border-bottom: 1px solid #f0f0f0 !important; }
  .jaf-col-index        { padding: 20px 0 !important; border-right: none !important; border-top: none !important; border-bottom: 1px solid #f0f0f0 !important; }
  .jaf-col-contact      { padding-left: 0 !important; padding-top: 20px !important; border-top: none !important; }
  .jaf-footer-bottom    { flex-direction: column !important; align-items: flex-start !important; padding: 12px 16px !important; gap: 6px !important; }
  .pkp_structure_footer { padding: 35px 20px 25px !important; }
  .pkp_footer_content   { font-size: 14px; line-height: 1.8; }
}


/* ══════════════════════════════════════════════
   BAGIAN 16 — ABOUT JOURNAL MODERN SIDEBAR
   ══════════════════════════════════════════════ */

.lb-about-menu {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.lb-about-menu a {
  display:         block;
  padding:         10px 14px;
  background:      #e0643a;
  color:           #fff !important;
  font-weight:     600;
  text-decoration: none !important;
  border-radius:   8px;
  box-shadow:      0 2px 6px rgba(0,0,0,0.08);
  transition:      background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.lb-about-menu a:hover {
  background: #c7522d;
  transform:  translateX(6px);
  box-shadow: 0 8px 18px rgba(224,100,58,0.25);
}

.lb-about-menu a::before {
  content:      "›";
  margin-right: 10px;
  font-size:    14px;
  font-weight:  700;
}


/* ══════════════════════════════════════════════
   BAGIAN 17 — URUTAN HOMEPAGE
   ══════════════════════════════════════════════ */

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

.page_index_journal .homepage_image  { order: 1 !important; }
.page_index_journal .homepage_about  { order: 2 !important; }
.page_index_journal .current_issue   { order: 3 !important; }


/* ══════════════════════════════════════════════
   BAGIAN 18 — HERO FULL WIDTH (JS-moved)
   [FIX v4] Hapus duplikat .lb-indexed-section yang
   ada di sini sebelumnya — sudah di-merge ke Bagian 14A.
   ══════════════════════════════════════════════ */

.pkp_page_index .additional_content {
  width:     100% !important;
  max-width: 100% !important;
  padding:   0 !important;
  margin:    0 !important;
}

.lb-hero-v4 {
  border-radius: 0 !important;
  margin:        0 !important;
  width:         100% !important;
  min-height:    480px !important;
}


/* ══════════════════════════════════════════════
   BAGIAN 19 — HERO MOBILE (after JS move)
   [FIX v4] Hapus duplikat .lb-indexed-grid mobile
   yang ada di sini — sudah di-merge ke Bagian 14A.
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .pkp_page_index .additional_content {
    display:   block !important;
    width:     100% !important;
    max-width: 100% !important;
    padding:   0 !important;
    margin:    0 !important;
    order:     unset !important;
  }

  .lb-hero-v4 {
    min-height:    auto !important;
    border-radius: 0 !important;
    margin:        0 !important;
  }

  .lb-hero-inner {
    padding: 30px 20px !important;
  }

  .lb-hero-v4 h1 { font-size: 36px !important; }
  .lb-hero-v4 h2 { font-size: 18px !important; }
  .lb-hero-v4 p  { font-size: 14px !important; }
}


/* ══════════════════════════════════════════
   LOKA BHAKTI — GLOBAL STYLESHEET
   Covers: Homepage, Issue Page, Article Page
   ══════════════════════════════════════════ */

/* ════════════════════════════════
   VARIABEL WARNA
════════════════════════════════ */
:root {
    --lb-primary:     #e56a3a;
    --lb-primary-dark:#c95529;
    --lb-border:      #f3ddd3;
    --lb-bg-soft:     #fdf0eb;
    --lb-text-dark:   #17324d;
    --lb-text-meta:   #667085;
    --lb-text-muted:  #98a2b3;
    --lb-text-pages:  #b0bac9;
}

/* ════════════════════════════════
   TOMBOL PDF — SEMUA HALAMAN
   Target: a.obj_galley_link
   (berlaku di homepage, issue, article)
════════════════════════════════ */
html body a.obj_galley_link,
html body .galleys_links a.obj_galley_link,
html body .value a.obj_galley_link,
html body .obj_article_summary a.obj_galley_link,
html body .full-width-button a.obj_galley_link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: var(--lb-primary) !important;
    background-color: var(--lb-primary) !important;
    color: #ffffff !important;
    border: 2px solid var(--lb-primary) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background .2s, transform .15s !important;
    cursor: pointer !important;
}
html body a.obj_galley_link:hover,
html body a.obj_galley_link:focus,
html body .galleys_links a.obj_galley_link:hover {
    background: var(--lb-primary-dark) !important;
    background-color: var(--lb-primary-dark) !important;
    border-color: var(--lb-primary-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(229,106,58,.25) !important;
}

/* ════════════════════════════════
   CARD ARTIKEL — DESAIN UNIVERSAL
   Berlaku di homepage + issue page
════════════════════════════════ */
.obj_article_summary {
    position: relative;
    background: #fff;
    border: 1px solid var(--lb-border);
    border-left: 4px solid var(--lb-primary);
    border-radius: 14px;
    padding: 16px 16px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.obj_article_summary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(229,106,58,.12);
}

/* JUDUL CARD */
.obj_article_summary .title {
    flex-grow: 1;
    margin-bottom: 8px;
    padding-right: 40px; /* biar nggak nabrak badge pages */
}
.obj_article_summary .title a {
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    color: var(--lb-text-dark) !important;
    text-decoration: none !important;
    display: block;
}
.obj_article_summary .title a:hover {
    color: var(--lb-primary) !important;
}

/* AUTHOR */
.obj_article_summary .authors {
    font-size: 11px !important;
    color: var(--lb-text-meta) !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
}

/* BADGE HALAMAN */
.obj_article_summary .pages {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--lb-text-pages);
    background: var(--lb-bg-soft);
    padding: 2px 7px;
    border-radius: 20px;
    line-height: 1.4;
}

/* GALLEY WRAPPER DI CARD */
.obj_article_summary .galleys_links {
    margin-top: auto !important;
    padding-top: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.obj_article_summary .galleys_links li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* STATS */
.obj_article_summary .lb-stats {
    font-size: 10px !important;
    color: var(--lb-text-muted) !important;
    line-height: 1.6 !important;
    margin-top: 6px !important;
}

/* ════════════════════════════════
   HOMEPAGE — GRID BENTO 2x2
   (hanya berlaku di current_issue)
════════════════════════════════ */
.page_index_journal .current_issue .obj_issue_toc {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
}
.page_index_journal .current_issue .heading {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}
.page_index_journal .current_issue .sections {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: stretch;
}
.page_index_journal .current_issue .section,
.page_index_journal .current_issue .cmp_article_list,
.page_index_journal .current_issue .cmp_article_list.articles {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
}
.page_index_journal .current_issue .section > h2,
.page_index_journal .current_issue .section > h3 {
    display: none !important;
}
.page_index_journal .current_issue .section::before,
.page_index_journal .current_issue .section::after {
    display: none !important;
    content: none !important;
}

/* ════════════════════════════════
   ISSUE PAGE (/issue/view/*)
   Card memanjang, list vertikal
════════════════════════════════ */
.page_issue .cmp_article_list.articles {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.page_issue .cmp_article_list.articles > li {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Section heading issue page tetap tampil */
.page_issue .section > h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--lb-text-dark);
    border-bottom: 2px solid var(--lb-border);
    padding-bottom: 6px;
    margin-bottom: 12px;
    margin-top: 24px;
}

/* ════════════════════════════════
   ARTICLE PAGE (/article/view/*)
   Tombol PDF di sidebar & download section
════════════════════════════════ */
/* Box download di halaman artikel */
.page_article .item.downloads {
    margin-top: 16px;
}
.page_article .item.downloads .label {
    font-size: 12px;
    font-weight: 700;
    color: var(--lb-text-dark);
    margin-bottom: 8px;
    display: block;
}
.page_article .item.galleys {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.page_article .item.galleys li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ════════════════════════════════
   AUTHOR — et al setelah 2 nama
   khusus di homepage
════════════════════════════════ */
.page_index_journal .current_issue .obj_article_summary .authors {
    font-size: 11px !important;
    color: #667085 !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
    /* Truncate dengan et al: tampilkan max 2 baris lalu potong */
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ══════════════════════════════════════════════
   BAGIAN 20 — MOBILE FIX: BENTO GRID HOMEPAGE
   Target: current_issue di layar ≤ 768px
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Bento outer grid: 2 kolom → 1 kolom ── */
  .page_index_journal .current_issue .obj_issue_toc {
    display:        flex !important;
    flex-direction: column !important;
    gap:            20px !important;
  }

  /* ── Cover issue: full width, center ── */
  .page_index_journal .current_issue .heading {
    grid-column: unset !important;
    grid-row:    unset !important;
    text-align:  center;
  }

  /* ── Sections grid: 2 kolom → 1 kolom ── */
  .page_index_journal .current_issue .sections {
    grid-column:           unset !important;
    grid-row:              unset !important;
    grid-template-columns: 1fr !important;
    gap:                   12px !important;
  }

  /* ── Card artikel: pastikan stretch full width ── */
  .page_index_journal .current_issue .obj_article_summary {
    width:      100% !important;
    box-sizing: border-box !important;
  }

  /* ── Judul artikel: izinkan wrap 2 baris ── */
  .page_index_journal .current_issue .obj_article_summary .title a {
    white-space:   normal !important;
    overflow:      visible !important;
    text-overflow: clip !important;
  }

  /* ── Badge halaman: posisi tetap tapi pastikan tidak overlap ── */
  .page_index_journal .current_issue .obj_article_summary .pages {
    top:   10px !important;
    right: 10px !important;
  }

  /* ── Galley buttons: stack rapi ── */
  .page_index_journal .current_issue .obj_article_summary .galleys_links {
    flex-wrap: wrap !important;
    gap:       6px !important;
  }
}

/* ── Breakpoint kecil tambahan: ≤ 480px ── */
@media (max-width: 480px) {

  /* Padding card lebih kecil di HP kecil */
  .page_index_journal .current_issue .obj_article_summary {
    padding: 12px 12px 10px !important;
  }

  /* Judul lebih kecil */
  .page_index_journal .current_issue .obj_article_summary .title a {
    font-size: 12px !important;
  }

  /* Author lebih compact */
  .page_index_journal .current_issue .obj_article_summary .authors {
    font-size: 10px !important;
  }
}

/* ══════════════════════════════════════════════
   BAGIAN 21 UPDATE — COVER CENTER + BIGGER
   ══════════════════════════════════════════════ */

.page_index_journal .current_issue .obj_issue_toc .heading {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  gap:            0px !important;
  grid-column:    1 !important;
  grid-row:       1 !important;
}

.page_index_journal .current_issue .obj_issue_toc .heading a.cover img {
  width:         160px !important;
  max-width:     160px !important;
  height:        auto !important;
  object-fit:    cover !important;
  display:       block !important;
  border-radius: 3px !important;
  box-shadow:    0 8px 24px rgba(0,0,0,0.14) !important;
}

.page_index_journal .current_issue .obj_issue_toc .heading .description {
  width:   100% !important;
  margin:  0 !important;
  padding: 0 !important;
}

.page_index_journal .current_issue .obj_issue_toc .heading .description p {
  font-size:       13px !important;
  line-height:     1.75 !important;
  color:           #64748b !important;
  margin:          0 !important;
  text-align:      justify !important;
  text-align-last: left !important;
}

.page_index_journal .current_issue .obj_issue_toc .heading .published {
  font-size:  12px !important;
  color:      #94a3b8 !important;
  margin-top: 4px !important;
  width:      100% !important;
}

@media (max-width: 768px) {
  .page_index_journal .current_issue .obj_issue_toc .heading {
    align-items: center !important;
  }

 @media (max-width: 768px) {
  .page_index_journal .current_issue .obj_issue_toc .heading a.cover img {
    width:        150px !important;
    max-width:    150px !important;
    height:       auto !important;
    object-fit:   cover !important;
  }

  .page_index_journal .current_issue .obj_issue_toc .heading .description p {
    text-align:      justify !important;
    text-align-last: left !important;
    hyphens:         auto !important;
  }
}




/* ══════════════════════════════════════════════
   PANDUAN KUSTOMISASI CEPAT

   CURRENT ISSUE COVER  → --issue-cover-size: 180px
   PUBLISHED MARGIN-TOP → --published-margin-top: 12px
   PUBLISHED ALIGN      → --published-text-align: left / center
   PUBLISHED WARNA      → --published-color: #888
   COVER HOMEPAGE       → --cover-width: 200px
   INDEX BY LOGO        → --index-logo-width: 200px
   MARQUEE SPEED        → ubah 30s di @keyframes lokaRun
   ══════════════════════════════════════════════ */