/* ============================================================
   Loka Bhakti — Full Custom Style V7 CLEAN
   OJS 3.3.0.6 | lokabhakti-fisib.unpak.ac.id
   Updated: 2026-06-04
   ============================================================ */

/* ══════════════════════════════════════════════
   BAGIAN 0 — TYPOGRAPHY
   Font: Inter (UI) + Source Serif 4 (Konten)
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;500;600;700&display=swap');

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,
.obj_article_summary,
.obj_issue_summary,
.pkp_structure_main,
.page,
.block {
  font-family: 'Inter', sans-serif !important;
}

.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: 'Source Serif 4', serif !important;
  font-size:   17px;
  line-height: 1.85;
  font-weight: 400;
}

.pkp_page_article .main_entry h1,
.pkp_page_article .main_entry h2,
.pkp_page_article .main_entry h3,
.pkp_page_article .main_entry h4 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
}

.btn, button,
input[type="submit"],
input[type="button"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
}


/* ══════════════════════════════════════════════
   BAGIAN 1 — 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;

  --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-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-hover-bg:        #e8f0fb;
  --about-hover-color:     #1a4a7a;
  --about-hover-border:    #ea580c;
  --about-transition:      0.25s ease;

  --issue-cover-size:       180px;
  --published-margin-top:   12px;
  --published-text-align:   left;
  --published-font-size:    13px;
  --published-color:        #888;
}


/* ══════════════════════════════════════════════
   BAGIAN 2 — HEADER & NAVBAR
   ══════════════════════════════════════════════ */

.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;
}

.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;
}

.pkp_navigation_search_wrapper {
  margin-left:   auto !important;
  margin-top:    0 !important;
  margin-bottom: 0 !important;
  padding:       0 20px !important;
  align-self:    center !important;
}

/* ── USER DROPDOWN MENU ── */

ul.dropdown-menu {
  background:    #fff !important;
  border:        1px solid #f3ddd3 !important;
  border-radius: 12px !important;
  box-shadow:    0 8px 24px rgba(0,0,0,0.10) !important;
  padding:       6px !important;
  min-width:     160px !important;
  overflow:      hidden !important;
}

ul.dropdown-menu li.profile {
  border: none !important;
}

ul.dropdown-menu li.profile a,
ul.dropdown-menu li.profile a:link,
ul.dropdown-menu li.profile a:visited {
  font-family:     'Inter', sans-serif !important;
  font-size:       14px !important;
  font-weight:     500 !important;
  color:           #17324d !important;
  text-decoration: none !important;
  display:         block !important;
  padding:         8px 14px !important;
  border-radius:   8px !important;
  border:          none !important;
  outline:         none !important;
  box-shadow:      none !important;
  text-align:      left !important;
  transition:      background 0.2s ease, color 0.2s ease !important;
}

ul.dropdown-menu li.profile a:hover,
ul.dropdown-menu li.profile a:focus,
ul.dropdown-menu li.profile a:active {
  background:  #fdf0eb !important;
  color:       #e56a3a !important;
  border:      none !important;
  outline:     none !important;
  box-shadow:  none !important;
}

ul.dropdown-menu li.profile a span.task_count {
  float:         right;
  background:    #e56a3a;
  color:         #fff;
  font-size:     11px;
  font-weight:   600;
  padding:       1px 7px;
  border-radius: 999px;
  margin-left:   8px;
}

/* ══════════════════════════════════════════════
   SEARCH BAR — Pill style dengan tombol ikon
   ══════════════════════════════════════════════ */

.pkp_navigation_search_wrapper {
  margin-left:   auto !important;
  margin-top:    0 !important;
  margin-bottom: 0 !important;
  padding:       6px 20px !important;
  align-self:    center !important;
}

/* Wrapper form search */
.pkp_navigation_search_wrapper form {
  display:     flex;
  align-items: center;
  background:  #f0f0f0;
  border-radius: 999px;
  padding:     2px 4px 2px 10px; /* DIKECILKAN: Mengurangi tinggi kapsul & jarak teks di kiri */
  box-shadow:  0 1px 1px rgba(0,0,0,0.08);
  gap:         6px;
  min-width:   120px;            /* DIKECILKAN: Memperpendek lebar kapsul (sebelumnya 260px) */
}

/* Input teks */
.pkp_navigation_search_wrapper form input[type="text"],
.pkp_navigation_search_wrapper form input[type="search"] {
  border:          none !important;
  outline:         none !important;
  background:      transparent !important;
  font-family:     'Inter', sans-serif !important;
  font-size:       13px !important;  /* DIKECILKAN: Ukuran teks di dalam sedikit lebih kecil (sebelumnya 14px) */
  color:           #555 !important;
  width:           100% !important;
  padding:         3px 0 !important; /* DIKECILKAN: Mengurangi ruang kosong atas-bawah di dalam input (sebelumnya 6px) */
  box-shadow:      none !important;
  border-radius:   0 !important;
}

.pkp_navigation_search_wrapper form input::placeholder {
  color: #aaa !important;
}

/* Tombol submit — bulat gelap dengan ikon kaca pembesar */
.pkp_navigation_search_wrapper form button[type="submit"],
.pkp_navigation_search_wrapper form input[type="submit"],
.pkp_navigation_search_wrapper a.pkp_search.pkp_search_desktop {
  background:      #2b2b2b !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   999px !important;
  width:           24px !important;  /* DISESUAIKAN: Ukuran tombol bulat (proporsional dengan kapsul baru) */
  height:          24px !important;  /* DISESUAIKAN */
  min-width:       24px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  cursor:          pointer !important;
  flex-shrink:     0 !important;
  font-size:       0 !important;     
  padding:         0 !important;
  transition:      background 0.2s ease !important;
}

.pkp_navigation_search_wrapper form button[type="submit"]:hover,
.pkp_navigation_search_wrapper form input[type="submit"]:hover,
.pkp_navigation_search_wrapper a.pkp_search.pkp_search_desktop:hover {
  background: var(--lb-primary) !important;
}

/* Ikon kaca pembesar via pseudo-element */
.pkp_navigation_search_wrapper a.pkp_search.pkp_search_desktop::after,
.pkp_navigation_search_wrapper form button[type="submit"]::after {
  content:        ;
  font-size:      16px !important;
  line-height:    1;
  display:        block;
}

/* Jika OJS pakai <a> dengan fa-search icon — biarkan icon tetap tampil */
.pkp_navigation_search_wrapper .fa.fa-search {
  font-size:   16px !important;
  color:       #fff !important;
}

/* Sembunyikan teks " Search " tapi tetap tampilkan ikon */
.pkp_navigation_search_wrapper a.pkp_search span:not(.fa) {
  display: none !important;
}

/* Responsive — sembunyikan di mobile */
@media (max-width: 768px) {
  .pkp_navigation_search_wrapper form {
    min-width: 180px;
  }
}

.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 (min-width: 769px) {
  .pkp_navigation_primary {
    display:         flex;
    justify-content: center;
    gap:             10px;
  }
}

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


/* ══════════════════════════════════════════════
   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 BLOCK
   ══════════════════════════════════════════════ */

.pkp_block {
    background: #ffffff;
    border: 1px solid var(--lb-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    overflow: hidden;

    margin-bottom: 24px;
}

.pkp_block h2 {
  font-family:    'Inter', sans-serif !important;
  font-size:      13px !important;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          #1f2937;
  margin-bottom:  10px;
  position:       relative;
}

.pkp_block h2::after {
  content:       '';
  display:       block;
  width:         36px;
  height:        3px;
  background:    #ed753d;
  border-radius: 99px;
  margin-top:    3px;
}

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

.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;
  
  transform:  translateY(-2px);
}

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


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

.lb-about-menu {
  display:        flex;
  flex-direction: column;
  gap:            0 !important;
}

.lb-about-menu a {
  font-family:     'Inter', sans-serif;
  display:         flex !important;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         14px 0;
  background:      transparent !important;
  color:           #374151 !important;
  border:          none !important;
  border-bottom:   1px solid #e5e7eb !important;
  border-radius:   0 !important;
  box-shadow:      none !important;
  text-decoration: none !important;
  font-size:       14px;
  font-weight:     550;
  letter-spacing:  -0.2px;
  transition:      .25s ease;
}

.lb-about-menu a::before {
  display: none !important;
}

.lb-about-menu a::after {
  content:     "›";
  color:       #94a3b8;
  font-size:   18px;
  font-weight: 700;
}

.lb-about-menu a:hover {
  color:     #ea580c !important;
  transform: translateX(5px);
}

.lb-about-menu a:hover::after {
  color: #ea580c;
}

.lb-about-menu a:last-child {
  border-bottom: none !important;
}


/* ══════════════════════════════════════════════
   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 img[src*="/images/logo/"] {
  width:      var(--index-logo-width) !important;
  height:     auto !important;
  display:    block;
  object-fit: contain;
}


/* ══════════════════════════════════════════════
   BAGIAN 7 — HERO WHITE
   ══════════════════════════════════════════════ */

.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;
}

.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;
}

.lb-hw-inner {
  position:        relative;
  z-index:         2;
  width:           100%;
  box-sizing:      border-box;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         48px 56px 44px;
  gap:             40px;
  flex-wrap:       nowrap;
}

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

.lb-hw-right {
  flex:            0 0 auto;
  display:         flex;
  justify-content: center;
  align-items:     center;
  min-width:       0;
}

.lb-hw-cover {
  position:       relative;
  left: -120px;
  width:          220px;
  height:         auto;
  border-radius:  2px;
  box-shadow:     none;
  display:        block;
  mix-blend-mode: multiply;
  transition:     transform 0.3s ease;
}

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

.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;
}

.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;
}

.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;
}

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

.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;
}

.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;
}

.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;
  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-num {
  font-size:      18px;
  font-weight:    800;
  color:          #1e293b;
  line-height:    1;
  letter-spacing: -0.5px;
}

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

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

/* ══════════════════════════════════════════════
   BAGIAN 8 — INDEXED BY (Homepage)
   ══════════════════════════════════════════════ */

.lb-indexed-slider-wrap {
  position: relative !important;
}
.lb-indexed-slider-wrap::before,
.lb-indexed-slider-wrap::after {
  content:  "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 40px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.lb-indexed-slider-wrap::before {
  left: 0 !important;
  background: linear-gradient(to right, #fff, transparent) !important;
}
.lb-indexed-slider-wrap::after {
  right: 0 !important;
  background: linear-gradient(to left, #fff, transparent) !important;
}

.lb-indexed-grid {
  display:                flex !important;
  flex-wrap:              nowrap !important;
  gap:                    10px !important;
  width:                  100% !important;
  overflow-x:             auto !important;
  scroll-snap-type:       x mandatory !important;
  scroll-behavior:        smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width:        none !important;
  padding:                4px 34px !important;
}
.lb-indexed-grid::-webkit-scrollbar {
  display: none !important;
}

.lb-indexed-grid a {
  flex:            0 0 auto !important;
  width:           170px !important;
  scroll-snap-align: center !important;
  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;
}

.lb-indexed-nav {
  position:        absolute !important;
  top:             50% !important;
  transform:       translateY(-50%) !important;
  width:           32px !important;
  height:          32px !important;
  border-radius:   50% !important;
  border:          1px solid #f1f5f9 !important;
  background:      #fff !important;
  color:           #d66b18 !important;
  font-size:       16px !important;
  line-height:     1 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  cursor:          pointer !important;
  z-index:         3 !important;
  box-shadow:      0 2px 6px rgba(0,0,0,0.05) !important;
  transition:      border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.lb-indexed-nav:hover {
  border-color: #fed7aa !important;
  box-shadow:   0 4px 10px rgba(0,0,0,0.08) !important;
}
.lb-indexed-prev { left: -4px !important; }
.lb-indexed-next { right: -4px !important; }

.lb-indexed-grid a.lb-indexed-placeholder {
  flex-direction: column !important;
  gap:            4px !important;
  cursor:         default !important;
}
 
.lb-indexed-placeholder-name {
  font-size:   13px !important;
  font-weight: 600 !important;
  color:       #9ca3af !important;
  text-align:  center !important;
  line-height: 1.2 !important;
}
 
.lb-indexed-placeholder-status {
  font-size:      9px !important;
  font-weight:    700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color:          #d66b18 !important;
}
 
.lb-indexed-grid a.lb-indexed-placeholder:hover {
  border-color: #f1f5f9 !important;
  transform:    none !important;
  box-shadow:   none !important;
}
.lb-indexed-section {
 padding: 0px 24px 24px !important;
}
@media (max-width: 900px) {
  .lb-indexed-section { padding: 15px 16px 20px !important; }
  .lb-indexed-grid a  { width: 140px !important; }
}

@media (max-width: 640px) {
  .lb-indexed-slider-wrap::before,
  .lb-indexed-slider-wrap::after { width: 20px !important; }
  .lb-indexed-grid { padding: 4px 30px !important; }
  .lb-indexed-grid a { width: 130px !important; min-height: 48px !important; }
 
  .lb-indexed-nav {
    display:   flex !important;
    width:     26px !important;
    height:    26px !important;
    font-size: 13px !important;
  }
  .lb-indexed-prev { left: -2px !important; }
  .lb-indexed-next { right: -2px !important; }
}

/* ══════════════════════════════════════════════
   BAGIAN 9 — HOMEPAGE LAYOUT
   ══════════════════════════════════════════════ */

/* Homepage Layout */
.pkp_structure_main {
    border-left: 1px solid #e5e7eb;
}

.pkp_page_index .additional_content {
  border-left:  1px solid #e5e7eb !important;
  border-right: 1px solid #e5e7eb !important;
}

/* Sidebar spacing fix */
.pkp_structure_sidebar {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
}

.pkp_structure_main {
    border-left: 1px solid #e5e7eb;
}

.pkp_structure_sidebar {
    border-right: 1px solid #e5e7eb;
}

.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; }

/* Sembunyikan announcement bawaan OJS di homepage (digantikan oleh #lb-announcements-section) */
.page_index_journal .announcements,
.page_index_journal .cmp_announcements,
.page_index_journal section.cmp_announcements,
.pkp_page_index .announcements,
.pkp_page_index .homepage_announcements,
.pkp_page_index .additional_content .obj_announcement_summary,
.pkp_page_index .additional_content ul.announcements,
.pkp_page_index .additional_content .pkp_announcements {
  display: none !important;
}

.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;
}

.page_index_journal .homepage_image,
.page_index_journal .current_issue,
.page_index_journal .additional_content {
  margin-bottom: 0 !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;
}


/* ============================================================
   LOKA BHAKTI — CURRENT ISSUE REDESIGN (Academic Elegant)
   Menggantikan BAGIAN 10 & 11 dari Loka_Bhakti_Full_Custom_V7.css
   ============================================================ */


/* ══════════════════════════════════════════════
   BAGIAN 10 (REVISI) — CURRENT ISSUE LAYOUT
   Cover sticky kiri, daftar artikel list kanan
   ══════════════════════════════════════════════ */

.page_index_journal .current_issue .obj_issue_toc {
  display:               grid;
  grid-template-columns: 240px 1fr;
  gap:                   48px;
  align-items:           start;
}

/* ── Kolom kiri: cover + meta, sticky ── */
.page_index_journal .current_issue .heading {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    flex-start !important;
  gap:            14px !important;
  grid-column:    1;
  grid-row:       1;
  margin:         0;
  position:       sticky;
  top:            96px;
}

.page_index_journal .current_issue .obj_issue_toc .heading a.cover {
  display:       block !important;
  align-self:    center;
}

.page_index_journal .current_issue .obj_issue_toc .heading a.cover img {
  width:         190px !important;
  max-width:     190px !important;
  height:        auto !important;
  object-fit:    cover !important;
  display:       block !important;
  border-radius: 2px !important;
  box-shadow:    0 10px 28px rgba(23,50,77,.14) !important;
}

/* Label "Vol. X No. X (Tahun)" — tipografi serif formal */
.page_index_journal .current_issue .heading .title,
.page_index_journal .current_issue .heading > a.title,
.page_index_journal .current_issue .heading h2 {
  font-family:    'Source Serif 4', serif !important;
  font-size:      16px !important;
  font-weight:    600 !important;
  color:          var(--lb-text-dark) !important;
  line-height:    1.4 !important;
  text-align:     left !important;
  margin:         0 !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-family:     'Inter', sans-serif !important;
  font-size:       12.5px !important;
  line-height:     1.75 !important;
  color:           var(--lb-text-meta) !important;
  margin:          0 !important;
  text-align:      left !important;
  text-align-last: left !important;
}

.page_index_journal .current_issue .obj_issue_toc .heading .published {
  font-family: 'Inter', sans-serif !important;
  font-size:   11px !important;
  font-weight: 600 !important;
  color:       var(--lb-primary) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-top:  2px !important;
  width:       100% !important;
}

/* ── Kolom kanan: daftar artikel (list akademik) ── */
.page_index_journal .current_issue .sections {
  grid-column: 2;
  grid-row:    1;
  margin:      0 !important;
  padding:     0 !important;
  display:     flex;
  flex-direction: column;
}

/* Header "Articles" di atas list */
.page_index_journal .current_issue .sections::before {
  content:        "Articles";
  display:        block;
  font-family:    'Inter', sans-serif;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          #94a3b8;
  padding-bottom: 14px;
  margin-bottom:  4px;
  border-bottom:  2px solid var(--lb-border);
}

.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;
}



/* ============================================================
   LOKA BHAKTI — REVISI v2
   1. Fix posisi cover homepage (geser kiri)
   2. Fix justify deskripsi issue (homepage & issue page)
   3. Terapkan desain list artikel academic-elegant
      ke halaman issue/view/X (page_issue)
   ============================================================ */


/* ══════════════════════════════════════════════
   FIX 1 — POSISI COVER HOMEPAGE
   Geser cover lebih ke kiri, kasih ruang dgn list
   ══════════════════════════════════════════════ */

.page_index_journal .current_issue .obj_issue_toc {
  display:               grid;
  grid-template-columns: 240px 1fr;
  gap:                   48px;
  align-items:           start;
  padding-left:          0;
}

.page_index_journal .current_issue .heading {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    flex-start !important;
  gap:            14px !important;
  grid-column:    1;
  grid-row:       1;
  margin:         0;
  position:       sticky;
  top:            96px;
  /* Tarik cover lebih ke kiri relatif terhadap kolomnya */
  margin-left:    -24px;
}

.page_index_journal .current_issue .obj_issue_toc .heading a.cover {
  display:    block !important;
  align-self: flex-start;
}


/* ══════════════════════════════════════════════
   FIX 2 — JUSTIFY DESKRIPSI ISSUE
   Berlaku di homepage & halaman issue/view/X
   ══════════════════════════════════════════════ */

.page_index_journal .current_issue .obj_issue_toc .heading .description p,
.page_issue .obj_issue_toc .description p {
  text-align:      justify !important;
  text-align-last: left !important;
  hyphens:         auto !important;
  word-break:      normal !important;
  overflow-wrap:   break-word !important;
}

/* ============================================================
   LOKA BHAKTI — REVISI v3
   Cover issue di-center terhadap lebar kolom kiri (= lebar
   paragraf deskripsi di bawahnya). Override rule -24px dari
   revisi v2 sebelumnya.
   ============================================================ */

/* ──────────────────────────────────────────
   🔧 ADJUST DI SINI SAJA
   ────────────────────────────────────────── */
:root {
  --lb-issue-cover-width: 190px;   /* lebar cover, samakan dgn rule lain kalau perlu */
  --lb-issue-col-width:   240px;   /* lebar kolom kiri (cover+deskripsi), harus sama dgn grid-template-columns di bawah */
  --lb-issue-cover-shift: -50px;     /* geser manual ke kiri(-)/kanan(+) kalau masih kurang pas */
}

/* ══════════════════════════════════════════════
   Override posisi heading dari revisi v2
   (hapus margin-left:-24px, ganti jadi center)
   ══════════════════════════════════════════════ */

.page_index_journal .current_issue .obj_issue_toc {
  display:               grid;
  grid-template-columns: var(--lb-issue-col-width) 1fr;
  gap:                   48px;
  align-items:           start;
}

.page_index_journal .current_issue .heading {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;   /* center-kan cover & teks dalam kolom */
  gap:            14px !important;
  grid-column:    1;
  grid-row:       1;
  margin:         0 !important;        /* reset margin-left dari v2 */
  position:       sticky;
  top:            96px;
  width:          var(--lb-issue-col-width);
}

.page_index_journal .current_issue .obj_issue_toc .heading a.cover {
  display:    block !important;
  align-self: center !important;       /* override flex-start dari v2 */
  transform:  translateX(var(--lb-issue-cover-shift));
}

.page_index_journal .current_issue .obj_issue_toc .heading a.cover img {
  width:     var(--lb-issue-cover-width) !important;
  max-width: var(--lb-issue-cover-width) !important;
}

/* Deskripsi & published mengikuti lebar kolom penuh, teks rata kiri (justify) */
.page_index_journal .current_issue .obj_issue_toc .heading .description,
.page_index_journal .current_issue .obj_issue_toc .heading .published {
  width: 100% !important;
}
/* ══════════════════════════════════════════════
   BAGIAN 12 — ISSUE PAGE
   ══════════════════════════════════════════════ */

.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;
}

.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;
}

.page_article .item.downloads {
  margin-top: 16px;
}

.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;
}


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

.loka-reviewer-section {
  padding: 32px 20px;
}

.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;
}

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

.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);
}

.loka-reviewer-photo {
  display: none !important;
}

.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;
}

.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;
}

.loka-reviewer-tags { display: none !important; }

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

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

.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; }


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

.loka-editorial-section  { padding: 32px 20px; }
.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;
}

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%;
}

.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%);
}

.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);
}

.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;
}

.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;
}

.loka-editorial-card:has(.loka-editorial-avatar)::before { display: none; }
.loka-editorial-avatar[data-error="true"]                { display: none; }

.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; }


/* ══════════════════════════════════════════════
   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:  1px solid #e5e7eb;
  margin-top:  0 !important;
  padding-top: 0 !important;
  box-shadow:  0 -1px 20px rgba(0,0,0,0.04);
}

.pkp_structure_footer {
  background:  #ffffff !important;
  color:       #374151 !important;
  padding:     0 40px 30px !important;
  margin-top:  0 !important;
  border-left: 1px solid #f1f5f9 !important;
  border-right: 1px solid #f1f5f9 !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:          #374151;
  font-size:      16px;
  letter-spacing: 0.3px;
}

.pkp_footer_content a {
  color:           #374151 !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; }
}

/* ══════════════════════════════════════════════
   FOOTER FULL WIDTH FIX
   ══════════════════════════════════════════════ */

.pkp_structure_footer_wrapper {
  box-shadow: 
    inset 1px 0 0 #e5e7eb,
    inset -1px 0 0 #e5e7eb,
    0 -1px 20px rgba(0,0,0,0.04) !important;
  border-left:  1px solid #e5e7eb !important;
  border-right: 1px solid #e5e7eb !important;
}

.pkp_structure_footer {
  padding-left:  0 !important;
  padding-right: 0 !important;
  border-left:   none !important;
  border-right:  none !important;
}

.pkp_footer_content {
  max-width: 100% !important;
  padding:   0 !important;
  border-left:  1px solid #e5e7eb !important;
  border-right: 1px solid #e5e7eb !important;
}

.jaf-footer-grid {
  max-width: 100% !important;
  padding:   20px 20px 20px !important;
}

.jaf-footer-bottom {
  padding-top:  20px !important;
  padding-bottom:  20px !important;
  padding-left:  20px !important;
  padding-right: 20px !important;
}

/* ══════════════════════════════════════════════
   BAGIAN 16 — 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%); }
}

/* ==================================
   ISSUE HEADER CARD
================================== */

.page_issue .obj_issue_toc{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

/* Card utama */

.page_issue .obj_issue_toc .heading{

    background:#fff !important;

    border:1px solid var(--lb-border) !important;

    border-radius:16px !important;

    padding:24px !important;

    margin-bottom:28px !important;

    box-shadow:0 2px 8px rgba(0,0,0,.04) !important;

    overflow:hidden !important;
}

/* Cover */

.page_issue .obj_issue_toc .cover{
    float:left;
    margin-right:24px;
    margin-bottom:8px;
}

.page_issue .obj_issue_toc .cover img{

    width:170px !important;

  

}

/* Deskripsi */

.page_issue .obj_issue_toc .description p{

    font-size:15px !important;

    line-height:1.9 !important;

    color:#475569 !important;

    text-align:justify !important;

    margin-bottom:14px !important;
}

/* Published */

.page_issue .obj_issue_toc .published{

    display:inline-block !important;

    padding:5px 12px !important;

    border-radius:20px !important;

    background:var(--lb-bg-soft) !important;

    border:1px solid var(--lb-border) !important;

    color:var(--lb-primary) !important;

    font-size:12px !important;

    font-weight:700 !important;
}

.page_issue .obj_issue_toc .published::before{
    content:"📅 ";
}

/* Clear float */

.page_issue .obj_issue_toc .heading::after{
    content:"";
    display:block;
    clear:both;
}

/* ═══════════════════════════════════════
   BAGIAN 18 — ISSUE ARCHIVE CARDS
   ═══════════════════════════════════════ */

/* Wrapper issue archive */

.page_issue_archive .obj_issue_summary{

    background:#fff !important;

    border:1px solid var(--lb-border) !important;

    border-radius:16px !important;

    padding:24px !important;

    margin-bottom:20px !important;

    box-shadow:0 2px 8px rgba(0,0,0,.04) !important;

    overflow:hidden !important;

    transition:all .25s ease !important;
}

.page_issue_archive .obj_issue_summary:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.08) !important;
}

/* Cover */

.page_issue_archive .obj_issue_summary .cover{

    float:left;

    margin-right:24px;

    margin-bottom:10px;
}

.page_issue_archive .obj_issue_summary .cover img{

    width:160px !important;

    height:auto !important;

    display:block !important;

   

}

/* Judul issue */

.page_issue_archive .obj_issue_summary .title{

    margin-bottom:12px !important;
}

.page_issue_archive .obj_issue_summary .title a{

    font-size:22px !important;

    font-weight:800 !important;

    line-height:1.3 !important;

    color:var(--lb-text-dark) !important;

    text-decoration:none !important;
}

.page_issue_archive .obj_issue_summary .title a:hover{

    color:var(--lb-primary) !important;
}

/* Deskripsi */

.page_issue_archive .obj_issue_summary .description p{

    font-size:14px !important;

    line-height:1.8 !important;

    color:#475569 !important;

    text-align:justify !important;
}

/* Published */

.page_issue_archive .obj_issue_summary .published{

    display:inline-block !important;

    margin-top:12px !important;

    padding:5px 12px !important;

    border-radius:20px !important;

    background:var(--lb-bg-soft) !important;

    border:1px solid var(--lb-border) !important;

    color:var(--lb-primary) !important;

    font-size:12px !important;

    font-weight:700 !important;
}

.page_issue_archive .obj_issue_summary .published::before{

    content:"📅 ";
}

/* Clear float */

.page_issue_archive .obj_issue_summary::after{

    content:"";

    display:block;

    clear:both;
}

/* Mobile */

@media (max-width:768px){

    .page_issue_archive .obj_issue_summary .cover{

        float:none;

        margin:0 0 16px 0;

        text-align:center;
    }

    .page_issue_archive .obj_issue_summary .cover img{

        width:130px !important;
    }

    .page_issue_archive .obj_issue_summary .title a{

        font-size:18px !important;
    }
}

/* ===== LOKA BHAKTI PREMIUM MENU ===== */

/* Reset semua state Bootstrap/OJS yang bikin biru & putih */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > a:link,
.pkp_navigation_primary > li > a:visited,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a:active,
.pkp_navigation_primary > li.active > a,
.pkp_navigation_primary > li.active > a:hover,
.pkp_navigation_primary > li.active > a:focus,
.pkp_navigation_primary > li.open > a,
.pkp_navigation_primary > li.open > a:hover,
.pkp_navigation_primary > li.open > a:focus {
    color: #333 !important;
    background-color: transparent !important;
    background-image: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-shadow: none !important;
}

/* Warna normal nav */
.pkp_navigation_primary > li > a {
    transition: color .3s ease;
}

/* Hover nav — oranye */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li:hover > a {
    color: #f57c00 !important;
    background-color: transparent !important;
}

/* Saat dropdown terbuka, nav tetap oranye */
.pkp_navigation_primary > li.open > a,
.pkp_navigation_primary > li.show > a,
.pkp_navigation_primary > li:hover > a {
    color: #f57c00 !important;
    background-color: transparent !important;
}

/* Panah dropdown */
.pkp_navigation_primary .dropdown > a:after {
    content: "▾";
    font-size: 11px;
    margin-left: 6px;
    transition: transform .3s;
    display: inline-block;
}
.pkp_navigation_primary .dropdown:hover > a:after,
.pkp_navigation_primary .dropdown.open > a:after {
    transform: rotate(180deg);
}

/* Dropdown container */
.pkp_navigation_primary .dropdown-menu {
    border: none !important;
    border-radius: 14px !important;
    padding: 10px 0 !important;
    min-width: 240px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.12) !important;
    margin-top: 0px !important;
    overflow: hidden !important;
    animation: dropdownFade .25s ease;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Jembatan transparan */
.pkp_navigation_primary .dropdown-menu:before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

/* Reset semua state item dropdown */
.pkp_navigation_primary .dropdown-menu > li > a,
.pkp_navigation_primary .dropdown-menu > li > a:link,
.pkp_navigation_primary .dropdown-menu > li > a:visited,
.pkp_navigation_primary .dropdown-menu > li > a:focus,
.pkp_navigation_primary .dropdown-menu > li > a:active,
.pkp_navigation_primary .dropdown-menu > li.active > a,
.pkp_navigation_primary .dropdown-menu > li.active > a:hover,
.pkp_navigation_primary .dropdown-menu > li.active > a:focus {
    color: #333 !important;
    background-color: transparent !important;
    background-image: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Style item dropdown */
.pkp_navigation_primary .dropdown-menu > li > a {
    padding: 12px 20px !important;
    font-weight: 500 !important;
    display: block !important;
    transition: all .25s ease !important;
}

/* Hover item dropdown */
.pkp_navigation_primary .dropdown-menu > li > a:hover {
    background: #fff5eb !important;
    color: #f57c00 !important;
    padding-left: 26px !important;
}

/* Animasi */
@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
   ══════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .lb-hw-inner {
    padding: 36px 32px !important;
    gap:     24px !important;
  }

  .lb-hw-cover {
    left:  0 !important;
    width: 180px !important;
  }

  .lb-hero-white h1 {
    font-size: 38px !important;
  }

  .lb-hw-left {
    max-width: 480px !important;
  }

  .lb-hw-metrics {
    flex-wrap: wrap !important;
  }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 900px)
   ══════════════════════════════════════════════ */

@media (max-width: 900px) {
  .lb-hw-inner {
    flex-wrap:      wrap;
    flex-direction: column;
    padding:        28px 24px;
  }

  .lb-hw-cover {
    width: 160px !important;
  }

  .lb-hero-white h1 {
    font-size: 42px !important;
  }

  .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; }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Hero */
  .lb-hero-white { min-height: auto; overflow: visible; }
  .lb-hw-bg      { display: none; }
  .lb-hero-inner { padding: 30px 20px !important; }
  .lb-hero-v4    { min-height: auto !important; }

  .lb-hw-inner {
    flex-direction: column !important;
    align-items:    center !important;
    padding:        28px 20px 24px !important;
    gap:            16px !important;
  }

  .lb-hw-right {
    order:           1 !important;
    flex:            none !important;
    width:           100% !important;
    display:         flex !important;
    justify-content: center !important;
  }

  .lb-hw-left {
    order:      2 !important;
    width:      100% !important;
    max-width:  100% !important;
    text-align: center !important;
  }

  .lb-hw-cover {
    position:       static !important;
    left:           auto !important;
    right:          auto !important;
    top:            auto !important;
    width:          140px !important;
    margin:         0 auto !important;
    display:        block !important;
    mix-blend-mode: multiply !important;
    box-shadow:     none !important;
  }

  .lb-hw-badge,
  .lb-hw-divider {
    margin-left:  auto !important;
    margin-right: auto !important;
  }

  .lb-hero-buttons {
    flex-direction: column !important;
    align-items:    stretch !important;
    gap:            10px !important;
  }

  .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;
  }

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

  .lb-hero-white h1 {
    font-size:      32px !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; }

  .lb-hw-metrics {
    width:     100% !important;
    flex-wrap: wrap !important;
  }

  .lb-hw-metric {
    flex:       1 1 auto !important;
    min-width:  60px !important;
    padding:    10px 8px !important;
  }

  /* Indexed by */
  .lb-indexed-section { padding: 15px 16px 20px !important; }
  .lb-indexed-grid    { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Homepage additional content */
  .pkp_page_index .additional_content {
    display:   block !important;
    width:     100% !important;
    max-width: 100% !important;
    padding:   0 !important;
    margin:    0 !important;
    order:     unset !important;
  }

  /* Bento grid current issue */
  .page_index_journal .current_issue .obj_issue_toc {
    display:        flex !important;
    flex-direction: column !important;
    gap:            20px !important;
  }

  .page_index_journal .current_issue .heading {
    grid-column: unset !important;
    grid-row:    unset !important;
    align-items: center !important;
    text-align:  center;
  }

  .page_index_journal .current_issue .sections {
    grid-column:           unset !important;
    grid-row:              unset !important;
    grid-template-columns: 1fr !important;
    gap:                   12px !important;
  }

  .page_index_journal .current_issue .obj_article_summary {
    width:      100% !important;
    box-sizing: border-box !important;
  }

  .page_index_journal .current_issue .obj_article_summary .title a {
    white-space:   normal !important;
    overflow:      visible !important;
    text-overflow: clip !important;
  }

  .page_index_journal .current_issue .obj_issue_toc .heading a.cover img {
    width:     150px !important;
    max-width: 150px !important;
  }

  .page_index_journal .current_issue .obj_issue_toc .heading .description p {
    hyphens: auto !important;
  }

  /* Editorial & reviewer */
  .loka-reviewer-grid {
    grid-template-columns: 1fr !important;
  }

  .loka-editorial-grid,
  .loka-editorial-grid.loka-editorial-grid-single {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 540px)
   ══════════════════════════════════════════════ */

@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; }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — EXTRA SMALL (≤ 480px)
   ══════════════════════════════════════════════ */

@media (max-width: 480px) {
  .page_index_journal .current_issue .obj_article_summary {
    padding: 12px 12px 10px !important;
  }

  .page_index_journal .current_issue .obj_article_summary .title a {
    font-size: 12px !important;
  }

  .page_index_journal .current_issue .obj_article_summary .authors {
    font-size: 10px !important;
  }
}


/* ══════════════════════════════════════════════
   BAGIAN 22 — ANNOUNCEMENTS HOMEPAGE
   https://imgbb.com/
   [img:https://i.ibb.co/b54D7dpW/CALL-FOR-PAPERS-3.png]
   Deskripsi singkat kamu di sini
   ══════════════════════════════════════════════ */

#lb-announcements-section {
  padding: 32px 24px 28px;
  border-top: 1px solid #f1f5f9;
  background: #fff;
}

#lb-announcements-section .lb-ann-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
}

#lb-announcements-section .lb-ann-header-left {
  display:     flex;
  align-items: center;
  gap:         10px;
}

#lb-announcements-section .lb-ann-icon {
  width:         36px;
  height:        36px;
  background:    #fff7ed;
  border-radius: 10px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

#lb-announcements-section .lb-ann-icon svg {
  width:  18px;
  height: 18px;
}

#lb-announcements-section .lb-ann-title {
  font-size:      13px !important;
  font-weight:    700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color:          #1f2937 !important;
  margin:         0 !important;
  padding:        0 !important;
}

#lb-announcements-section .lb-ann-title::after {
  display: none !important;
}

#lb-announcements-section .lb-ann-view-all {
  font-size:       12px;
  font-weight:     600;
  color:           #ea580c;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  transition:      gap 0.2s ease;
}

#lb-announcements-section .lb-ann-view-all:hover {
  gap: 7px;
}

#lb-announcements-section .lb-ann-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
}

#lb-announcements-section .lb-ann-card {
  background:    #fff;
  border: 1px solid var(--lb-border);
  border-radius: 14px;
  padding:       18px 18px 14px;
  box-shadow:    0 2px 8px rgba(0,0,0,.04);
  transition:    transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:       flex;
  flex-direction: column;
  gap:           8px;
  text-decoration: none !important;
}

#lb-announcements-section .lb-ann-card:hover {
  transform:    translateY(-3px);
  box-shadow:   0 8px 18px rgba(229,106,58,.11);
  border-color: #fed7aa;
}

#lb-announcements-section .lb-ann-card-date {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color:          #ea580c;
  display:        flex;
  align-items:    center;
  gap:            5px;
}

#lb-announcements-section .lb-ann-card-date::before {
  content:       '';
  display:       inline-block;
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    #ea580c;
  flex-shrink:   0;
}

#lb-announcements-section .lb-ann-card-title {
  font-size:       13px;
  font-weight:     700;
  color:           #1e293b;
  line-height:     1.5;
  text-decoration: none;
  display:         -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:        hidden;
}

#lb-announcements-section .lb-ann-card:hover .lb-ann-card-title {
  color: #ea580c;
}

#lb-announcements-section .lb-ann-card-desc {
  font-size:          12px;
  color:              #64748b;
  line-height:        1.65;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  flex-grow:          1;
}

#lb-announcements-section .lb-ann-card-footer {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   11px;
  font-weight: 600;
  color:       #94a3b8;
  margin-top:  4px;
}

#lb-announcements-section .lb-ann-card:hover .lb-ann-card-footer {
  color: #ea580c;
}

#lb-announcements-section .lb-ann-empty {
  font-size: 13px;
  color:     #94a3b8;
  padding:   16px 0;
}

@media (max-width: 900px) {
  #lb-announcements-section .lb-ann-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #lb-announcements-section {
    padding: 24px 16px 20px;
  }
  #lb-announcements-section .lb-ann-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LOKA BHAKTI — HEADER PATCH v7
   Hanya mengurus header & user menu. Tidak menyentuh layout lain.
   Paste di bawah Loka_Bhakti_V1.css (sampai Bagian 22)
   ============================================================ */

/* ══ 1. Sembunyikan logo lama ══ */
.pkp_site_name_wrapper {
  display: none !important;
}

.pkp_head_wrapper {
  padding: 0 !important;
  border:  none !important;
}

.pkp_site_nav_menu {
  padding: 0 !important;
  margin:  0 !important;
}

/* ══ 2. Navbar wrapper — sticky, flex, relative sebagai anchor ══ */
.pkp_navigation_primary_wrapper {
  position:    sticky !important;
  top:         0 !important;
  z-index:     1000 !important;
  background:  #fff !important;
  box-shadow:  0 2px 12px rgba(0,0,0,.08) !important;
  display:     flex !important;
  align-items: center !important;
  min-height:  64px !important;
  padding:     0 !important;
  overflow:    visible !important;
}

/* ══ 3. Logo inject di kiri ══ */
.pkp_navigation_primary_wrapper::before {
  content:             '';
  display:             block;
  flex-shrink:         0;
  width:               120px;
  height:              40px;
  background-image:    url('https://lokabhakti-fisib.unpak.ac.id/public/journals/1/pageHeaderLogoImage_en_US.png');
  background-repeat:   no-repeat;
  background-size:     contain;
  background-position: center left;
  margin-left:         20px;
  margin-right:        16px;
}

/* ══ 4. Menu nav (HANYA UNTUK DESKTOP & LAYAR BESAR) ══ */
@media (min-width: 769px) {
  .pkp_navigation_primary_wrapper .pkp_navigation_primary {
    display:         flex !important;
    align-items:     center !important;
    flex:            1 !important;
    justify-content: flex-start !important;
    margin:          0 !important;
    padding:         0 !important;
    list-style:      none !important;
    overflow:        visible !important;
  }

  .pkp_navigation_primary > li {
    position: relative !important;
    overflow: visible !important;
  }

  .pkp_navigation_primary > li > a {
    font-size:      14px !important;
    font-weight:    700 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    padding:        22px 16px !important;
    color:          #17324d !important;
    white-space:    nowrap !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            4px !important;
    transition:     color .2s !important;
    background:     transparent !important;
  }
}

/* Style Link Menu Utama (Berlaku Global) */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary .current > a,
.pkp_navigation_primary .active > a {
  color:      var(--lb-primary) !important;
  background: transparent !important;
}

/* ══ 5. Search bar — push ke kanan ══ */
.pkp_navigation_search_wrapper {
  margin-left:  auto !important;
  margin-right: 100px !important;    
  flex-shrink:  0 !important;
  padding:      6px 0 !important;
}

/* ══ 6. User menu — ukuran pas mengikuti tulisan teks ══ */
div#navigationUserWrapper,
div.pkp_navigation_user_wrapper {
  position:    absolute !important;
  top:         50% !important;
  transform:   translateY(-50%) !important;
  right:       16px !important;
  left:        auto !important;
  width:       max-content !important;
  height:      max-content !important;
  display:     flex !important;
  align-items: center !important;
  z-index:     1001 !important;
  padding:     0 !important;
  margin:      0 !important;
  background:  transparent !important;
  border:      none !important;
  box-shadow:  none !important;
}

ul#navigationUser,
ul.pkp_navigation_user.pkp_nav_list {
  display:     flex !important;
  align-items: center !important;
  list-style:  none !important;
  margin:      0 !important;
  padding:     0 !important;
  position:    static !important;
  background:  transparent !important;
  width:       max-content !important;
  height:      max-content !important;
}

ul#navigationUser > li {
  position:    relative !important;
  display:     flex !important;
  align-items: center !important;
}

ul#navigationUser > li > a,
ul#navigationUser > li > button {
  font-family:     'Inter', sans-serif !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  color:           #17324d !important;
  padding:         6px 10px !important;
  border-radius:   8px !important;
  text-decoration: none !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             6px !important;
  white-space:     nowrap !important;
  background:      transparent !important;
  border:          none !important;
  cursor:          pointer !important;
  transition:      background .2s, color .2s !important;
}

ul#navigationUser > li > a:hover,
ul#navigationUser > li > button:hover {
  background: var(--lb-bg-soft) !important;
  color:      var(--lb-primary) !important;
}

ul#navigationUser .task_count,
ul#navigationUser span[class*="count"] {
  background:    var(--lb-primary) !important;
  color:         #fff !important;
  font-size:     10px !important;
  font-weight:   700 !important;
  padding:       1px 6px !important;
  border-radius: 999px !important;
  min-width:     18px !important;
  text-align:    center !important;
  display:       inline-block !important;
}

ul#navigationUser .dropdown-menu {
  position: absolute !important;
  top:      100% !important;
  right:    0 !important;
  left:     auto !important;
  z-index:  9999 !important;
}

.pkp_navigation_primary_wrapper {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

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


/* ============================================================
   LOKA BHAKTI — HEADER PATCH v7 (RESPONSIVE FULL)
   Mengatur Header, User Menu, dan Tombol Hamburger Mobile
   ============================================================ */

/* ══ 1. Sembunyikan Logo/Teks Lama (Hanya di Layar Desktop) ══ */
@media (min-width: 769px) {
  .pkp_site_name_wrapper {
    display: none !important;
  }
}

/* Di Mobile: Buat wrapper jadi transparan agar tombol di dalamnya bisa muncul */
@media (max-width: 768px) {
  .pkp_site_name_wrapper {
    position:   absolute !important;
    top:        0 !important;
    left:       0 !important;
    width:      100% !important;
    height:     0 !important;
    margin:     0 !important;
    padding:    0 !important;
    background: transparent !important;
    border:     none !important;
    overflow:   visible !important;
    z-index:    1005 !important;
  }
  .pkp_site_name {
    display:    none !important; /* Tetap sembunyikan logo bawaan teks/gambar */
  }
}

.pkp_head_wrapper {
  padding: 0 !important;
  border:  none !important;
}

.pkp_site_nav_menu {
  padding: 0 !important;
  margin:  0 !important;
}

/* ══ 2. Navbar wrapper — sticky, flex, relative sebagai anchor ══ */
.pkp_navigation_primary_wrapper {
  position:    sticky !important;
  top:         0 !important;
  z-index:     1000 !important;
  background:  #fff !important;
  box-shadow:  0 2px 12px rgba(0,0,0,.08) !important;
  display:     flex !important;
  align-items: center !important;
  min-height:  64px !important;
  padding:     0 !important;
  overflow:    visible !important;
}

/* ══ 3. Logo inject di kiri ══ */
.pkp_navigation_primary_wrapper::before {
  content:             '';
  display:             block;
  flex-shrink:         0;
  width:               200px;
  height:              60px;
  background-image:    url('https://lokabhakti-fisib.unpak.ac.id/public/journals/1/pageHeaderLogoImage_en_US.png');
  background-repeat:   no-repeat;
  background-size:     contain;
  background-position: center left;
  margin-left:         15px;
  margin-right:        15px;
}

/* ══ 4. Menu nav (Aturan Khusus Desktop) ══ */
@media (min-width: 769px) {
  .pkp_navigation_primary_wrapper .pkp_navigation_primary {
    display:         flex !important;
    align-items:     center !important;
    flex:            1 !important;
    justify-content: flex-start !important;
    margin:          0 !important;
    padding:         0 !important;
    list-style:      none !important;
    overflow:        visible !important;
  }

  .pkp_navigation_primary > li {
    position: relative !important;
    overflow: visible !important;
  }

  .pkp_navigation_primary > li > a {
    font-size:      14px !important;
    font-weight:    700 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    padding:        22px 16px !important;
    color:          #17324d !important;
    white-space:    nowrap !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            4px !important;
    transition:     color .2s !important;
    background:     transparent !important;
  }
}

/* Style Link Menu Utama (Global) */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary .current > a,
.pkp_navigation_primary .active > a {
  color:      var(--lb-primary) !important;
  background: transparent !important;
}

/* ══ 5. Search bar — push ke kanan ══ */
.pkp_navigation_search_wrapper {
  margin-left:  auto !important;
  margin-right: 100px !important;    
  flex-shrink:  0 !important;
  padding:      6px 0 !important;
}

/* ══ 6. User menu — Berada di kanan navbar ══ */
div#navigationUserWrapper,
div.pkp_navigation_user_wrapper {
  position:    absolute !important;
  top:         50% !important;
  transform:   translateY(-50%) !important;
  right:       16px !important;
  left:        auto !important;
  width:       max-content !important;
  height:      max-content !important;
  display:     flex !important;
  align-items: center !important;
  z-index:     1001 !important;
  padding:     0 !important;
  margin:      0 !important;
  background:  transparent !important;
  border:      none !important;
  box-shadow:  none !important;
}

ul#navigationUser,
ul.pkp_navigation_user.pkp_nav_list {
  display:     flex !important;
  align-items: center !important;
  list-style:  none !important;
  margin:      0 !important;
  padding:     0 !important;
  position:    static !important;
  background:  transparent !important;
}

ul#navigationUser > li {
  position:    relative !important;
  display:     flex !important;
  align-items: center !important;
}

ul#navigationUser > li > a,
ul#navigationUser > li > button {
  font-family:     'Inter', sans-serif !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  color:           #17324d !important;
  padding:         6px 10px !important;
  border-radius:   8px !important;
  text-decoration: none !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             6px !important;
  white-space:     nowrap !important;
  background:      transparent !important;
  border:          none !important;
  cursor:          pointer !important;
  transition:      background .2s, color .2s !important;
}

ul#navigationUser > li > a:hover,
ul#navigationUser > li > button:hover {
  background: var(--lb-bg-soft) !important;
  color:      var(--lb-primary) !important;
}

ul#navigationUser .task_count,
ul#navigationUser span[class*=\"count\"] {
  background:    var(--lb-primary) !important;
  color:         #fff !important;
  font-size:     10px !important;
  font-weight:   700 !important;
  padding:       1px 6px !important;
  border-radius: 999px !important;
  min-width:     18px !important;
  text-align:    center !important;
  display:       inline-block !important;
}

ul#navigationUser .dropdown-menu {
  position: absolute !important;
  top:      100% !important;
  right:    0 !important;
  left:     auto !important;
  z-index:  9999 !important;
}

.pkp_navigation_primary_wrapper {
  padding-left: 10px !important;
  padding-right: 20px !important;
}

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


/* ════════════════════════════════════════════════════════════
   ══ CUSTOM RESPONSIVE TOTAL (HP, TABLET & BROWSER MOBILE) ══
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Atur container navbar atas agar pas di mobile */
  .pkp_navigation_primary_wrapper {
    min-height:    56px !important;
    padding-left:  12px !important;
    padding-right: 12px !important;
  }

  /* Sesuaikan ukuran logo kiri di layar HP */
  .pkp_navigation_primary_wrapper::before {
    width:        130px !important;
    height:       44px !important;
    margin-left:  0 !important;
    margin-right: 8px !important;
  }

  /* Sembunyikan kolom pencarian bawaan biar ga sumpek */
  .pkp_navigation_search_wrapper {
    display:      none !important;
  }

  /* Geser posisi User Menu agak ke kiri supaya space kanan muat buat tombol burger */
  div#navigationUserWrapper,
  div.pkp_navigation_user_wrapper {
    right:     54px !important;
    top:       50% !important;
    transform: translateY(-50%) !important;
  }

  /* ▬▬ MUNCULKAN & DESIGN ULANG TOMBOL HAMBURGER MOBILE ▬▬ */
  .pkp_site_nav_toggle {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    position:        fixed !important; /* Nempel terus di atas walaupun di-scroll */
    top:             10px !important;
    right:           12px !important;
    width:           36px !important;
    height:          36px !important;
    background:      #17324d !important; /* Menggunakan warna biru utama website */
    border-radius:   8px !important;
    border:          none !important;
    cursor:          pointer !important;
    z-index:         2000 !important;
    text-decoration: none !important;
    font-size:       0 !important; /* Sembunyikan teks default tulisan "Menu" */
  }

  /* Membuat 3 Garis Icon Hamburger Putih Modern */
  .pkp_site_nav_toggle::before {
    content:    "" !important;
    display:    block !important;
    width:      16px !important;
    height:     2px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 0 #ffffff, 0 -5px 0 #ffffff !important;
    transition: 0.2s !important;
  }

  /* ▬▬ ATUR TAMPILAN DRAWER MENU SAAT DIKLIK/DIBUKA ▬▬ */
  .pkp_navigation_primary_wrapper .pkp_navigation_primary {
    display:        none !important; /* Default tersembunyi sebelum diklik */
  }

  /* Ketika tombol di klik (OJS otomatis mentoggle class open berikut) */
  .pkp_navigation_primary_wrapper.pkp_nav_list--open .pkp_navigation_primary,
  .pkp_navigation_primary_wrapper .pkp_navigation_primary.pkp_nav_list--open,
  .pkp_navigation_primary.pkp_nav_list--open {
    display:        flex !important;
    flex-direction: column !important;
    position:       absolute !important;
    top:            100% !important; /* Muncul tepat di bawah navbar putih */
    left:           0 !important;
    width:          100% !important;
    background:     #ffffff !important;
    box-shadow:     0 8px 20px rgba(0,0,0,0.12) !important;
    padding:        12px 0 !important;
    border-top:     1px solid #eee !important;
    z-index:        1500 !important;
    max-height:     75vh !important;
    overflow-y:     auto !important; /* Jika menu banyak bisa di-scroll ke bawah */
  }

  /* Penyesuaian List Link di Dalam Menu Mobile */
  .pkp_navigation_primary > li {
    width: 100% !important;
  }

  .pkp_navigation_primary > li > a {
    font-size:     14px !important;
    font-weight:   600 !important;
    padding:       14px 20px !important;
    width:         100% !important;
    color:         #17324d !important;
    border-bottom: 1px solid #f7f7f7 !important;
    white-space:   normal !important;
    display:       block !important;
  }
}

/* ============================================================
   PATCH FINAL — Mobile Nav Clean
   ============================================================ */
@media (max-width: 768px) {

  /* Wrapper navbar */
  .pkp_navigation_primary_wrapper {
    position:   relative !important;
    overflow:   visible !important;
    min-height: 56px !important;
  }

  /* Tampilkan wrapper tapi sembunyikan isi logo */
  .pkp_site_name_wrapper {
    display:    block !important;
    height:     auto !important;
    padding:    0 !important;
    margin:     0 !important;
    background: transparent !important;
    border:     none !important;
    overflow:   visible !important;
    position:   static !important;
  }

  .pkp_site_name_wrapper .pkp_site_name,
  .pkp_site_name_wrapper h1.pkp_site_name,
  .pkp_site_name_wrapper .pkp_screen_reader {
    display: none !important;
  }

  /* Hamburger — FIXED pojok kanan, z-index tertinggi */
  .pkp_site_nav_toggle {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    position:        fixed !important;
    top:             10px !important;
    right:           12px !important;
    z-index:         99999 !important;
    width:           36px !important;
    height:          36px !important;
    background:      #17324d !important;
    border-radius:   8px !important;
    border:          none !important;
    cursor:          pointer !important;
    font-size:       0 !important;
    line-height:     0 !important;
    padding:         0 !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
  }

  .pkp_site_nav_toggle * {
    display: none !important;
  }

  .pkp_site_nav_toggle::before {
    content:    '' !important;
    display:    block !important;
    width:      16px !important;
    height:     2px !important;
    background: #fff !important;
    box-shadow: 0 5px 0 #fff, 0 -5px 0 #fff !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
  }

  .pkp_site_nav_toggle[data-open="1"] {
    background: #e56a3a !important;
  }

  .pkp_site_nav_toggle[data-open="1"]::before {
    box-shadow:  none !important;
    transform:   rotate(45deg) translate(0, 0) !important;
  }

  .pkp_site_nav_toggle[data-open="1"]::after {
    content:    '' !important;
    display:    block !important;
    position:   absolute !important;
    width:      16px !important;
    height:     2px !important;
    background: #fff !important;
    transform:  rotate(-45deg) !important;
    top:        50% !important;
    left:       50% !important;
    margin-left: -8px !important;
    margin-top:  -1px !important;
  }

  /* Search — sembunyi di mobile */
  .pkp_navigation_search_wrapper {
    display: none !important;
  }

  /* User menu — geser kiri supaya gak nabrak tombol */
  div#navigationUserWrapper,
  div.pkp_navigation_user_wrapper {
    right: 56px !important;
  }

  /* Overlay */
  #lb-nav-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.5);
    z-index:    9990;
  }

  #lb-nav-overlay.lb-nav-overlay-show {
    display: block;
  }

  /* Nav list — default hidden */
  .pkp_navigation_primary_wrapper .pkp_navigation_primary {
    display:        none !important;
    flex-direction: column !important;
    position:       fixed !important;
    top:            56px !important;
    left:           0 !important;
    right:          0 !important;
    width:          100% !important;
    max-height:     calc(100vh - 56px) !important;
    overflow-y:     auto !important;
    background:     #ffffff !important;
    border-top:     3px solid #e56a3a !important;
    box-shadow:     0 8px 24px rgba(0,0,0,0.18) !important;
    padding:        8px 0 24px !important;
    z-index:        9995 !important;
    box-sizing:     border-box !important;
  }

  html body .pkp_navigation_primary.lb-nav-open {
    display: flex !important;
  }

  /* Item menu */
  .pkp_navigation_primary > li {
    width:         100% !important;
    background:    #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    list-style:    none !important;
    margin:        0 !important;
    padding:       0 !important;
  }

  .pkp_navigation_primary > li:last-child {
    border-bottom: none !important;
  }

  .pkp_navigation_primary > li > a {
    font-family:     'News Cycle', sans-serif !important;
    font-size:       15px !important;
    font-weight:     700 !important;
    padding:         14px 24px !important;
    color:           #17324d !important;
    background:      #ffffff !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    width:           100% !important;
    box-sizing:      border-box !important;
    text-transform:  uppercase !important;
    letter-spacing:  0.5px !important;
    text-decoration: none !important;
    border:          none !important;
  }

  .pkp_navigation_primary > li > a:hover {
    background: #fff7ed !important;
    color:      #e56a3a !important;
  }

  /* Submenu */
  .pkp_navigation_primary .dropdown-menu {
    position:      static !important;
    float:         none !important;
    width:         100% !important;
    background:    #f9f9f9 !important;
    box-shadow:    none !important;
    border:        none !important;
    border-radius: 0 !important;
    padding:       4px 0 8px !important;
    margin:        0 !important;
    animation:     none !important;
  }

  .pkp_navigation_primary .dropdown-menu > li {
    background: #f9f9f9 !important;
    border:     none !important;
    margin:     0 !important;
    padding:    0 !important;
  }

  .pkp_navigation_primary .dropdown-menu > li > a {
    padding:         10px 24px 10px 40px !important;
    font-size:       13px !important;
    font-weight:     500 !important;
    color:           #374151 !important;
    background:      #f9f9f9 !important;
    border-bottom:   1px solid #f0ede8 !important;
    display:         block !important;
    text-decoration: none !important;
    width:           100% !important;
    box-sizing:      border-box !important;
  }

  .pkp_navigation_primary .dropdown-menu > li > a:hover {
    background: #fff7ed !important;
    color:      #e56a3a !important;
  }
}

/* ============================================================
   PATCH — Fix gap tembus + cleanup menu mobile
   ============================================================ */
@media (max-width: 768px) {

  /* Hapus semua margin/padding/border yang bocor ke nav */
  .pkp_navigation_primary_wrapper .pkp_navigation_primary,
  .pkp_navigation_primary_wrapper .pkp_navigation_primary > li,
  .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a {
    margin:  0 !important;
    outline: none !important;
  }

  /* Gap di bawah li terakhir tiap section */
  .pkp_navigation_primary > li:last-child {
    border-bottom:  none !important;
    margin-bottom:  0 !important;
    padding-bottom: 0 !important;
  }

  /* Pastikan nav container tidak punya gap di bawah */
  html body .pkp_navigation_primary.lb-nav-open {
    gap:            0 !important;
    padding-bottom: 0 !important;
  }

  /* Hilangkan garis sisa dari rule global OJS */
  .pkp_navigation_primary > li > a {
    border-top:    none !important;
    border-left:   none !important;
    border-right:  none !important;
  }

  /* Pastikan background li solid, tidak tembus */
  .pkp_navigation_primary > li {
    background:  #ffffff !important;
    box-shadow:  none !important;
    flex-shrink: 0 !important;
  }

  /* Submenu juga solid */
  .pkp_navigation_primary li ul,
  .pkp_navigation_primary .dropdown-menu {
    background:   #f9f9f9 !important;
    border:       none !important;
    margin:       0 !important;
    padding:      0 0 4px 0 !important;
    box-shadow:   none !important;
  }

  /* Hapus ::before / ::after dari li yang bisa bikin garis ghost */
  .pkp_navigation_primary > li::before,
  .pkp_navigation_primary > li::after {
    display: none !important;
    content: none !important;
  }
}



/* ── Desktop View Toggle Button ── */
#lb-view-toggle {
  position:        fixed !important;
  bottom:          20px !important;
  right:           16px !important;
  z-index:         99998 !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             6px !important;
  padding:         8px 14px !important;
  background:      #17324d !important;
  color:           #ffffff !important;
  border:          none !important;
  border-radius:   999px !important;
  font-family:     'Inter', sans-serif !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  cursor:          pointer !important;
  box-shadow:      0 4px 16px rgba(0,0,0,0.25) !important;
  transition:      background 0.2s ease !important;
  white-space:     nowrap !important;
}

#lb-view-toggle:hover {
  background: #e56a3a !important;
}

/* Sembunyikan di desktop */
@media (min-width: 901px) {
  #lb-view-toggle {
    display: none !important;
  }
}

#lb-view-toggle {
  position:    fixed !important;
  bottom:      20px !important;
  right:       16px !important;
  z-index:     99998 !important;
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  padding:     8px 14px !important;
  background:  #17324d !important;
  color:       #ffffff !important;
  border:      none !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size:   12px !important;
  font-weight: 600 !important;
  cursor:      pointer !important;
  box-shadow:  0 4px 16px rgba(0,0,0,0.25) !important;
  transition:  background 0.2s ease !important;
  white-space: nowrap !important;
}

#lb-view-toggle:hover {
  background: #e56a3a !important;
}

/* Sembunyikan di desktop KECUALI kalau desktop mode aktif */
@media (min-width: 901px) {
  #lb-view-toggle {
    display: none !important;
  }
  /* Tapi kalau body punya class lb-desktop-mode, tetap tampil */
  body.lb-desktop-mode #lb-view-toggle {
    display: flex !important;
  }
}

/* ── Desktop View Toggle — ukuran tetap tidak ikut zoom ── */
body.lb-desktop-mode #lb-view-toggle {
  position:   fixed !important;
  bottom:     20px !important;
  right:      16px !important;
  /* Kalau viewport di-scale jadi 1200px di layar 400px,
     skala efektifnya ~0.33x — tombol ikut mengecil.
     Kita counter dengan zoom kebalikannya */
  zoom:       1 !important;
  /* Fallback untuk browser yang tidak support zoom */
  -moz-transform:        scale(3) !important;
  -moz-transform-origin: bottom right !important;
  transform:             scale(3) !important;
  transform-origin:      bottom right !important;
}

html.lb-desktop-mode #lb-view-toggle,
body.lb-desktop-mode #lb-view-toggle {
  display: flex !important;
}

/* ==========================================
   MODERN LANGUAGE TOGGLE - LOKA BHAKTI THEME (FIXED)
   ========================================== */

/* 1. Menyelaraskan garis bawah judul dengan tema Orange Loka Bhakti */
.block_language .title {
    border-bottom: 2px solid #e06a3b !important; 
    color: #1e293b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding-bottom: 6px !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* 2. Merapikan struktur list bawaan OJS */
.block_language .content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; 
}

.block_language .content li {
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Mengubah link teks menjadi tombol pil (Pills) yang clean */
.block_language .content a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important; 
    padding: 10px 14px !important;
    background: #f8fafc !important; 
    color: #475569 !important; 
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease-in-out !important;
}

/* Efek Hover (Saat kursor di atas tombol) */
.block_language .content a:hover {
    background: #e06a3b !important; 
    color: #ffffff !important; 
    border-color: #e06a3b !important;
    box-shadow: 0 4px 12px rgba(224, 106, 59, 0.2) !important;
    transform: translateY(-1px);
}

/* 4. INJECT BENDERA (SUDAH DI-FIX AGAR TIDAK BENTROK INDEX.PHP) */

/* Bendera Inggris untuk pilihan English */
.block_language .content a[href*="setLocale/en"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 14px !important;
    background-image: url('https://flagcdn.com/w20/gb.png') !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Bendera Indonesia untuk pilihan Bahasa Indonesia */
.block_language .content a[href*="setLocale/id"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 14px !important;
    background-image: url('https://flagcdn.com/w20/id.png') !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* ============================================================
   LOKA BHAKTI — GLOBAL PDF/GALLEY BUTTON
   Menyamakan style tombol PDF di SEMUA halaman:
   - Homepage (current issue list)
   - Issue archive (issue/view/X)
   - Article detail page (page_article, galleys besar)
   - Search results, dll

   Outline tipis (1px) senada dengan border .pkp_block sidebar.
   Rule ini menggantikan SEMUA rule a.obj_galley_link sebelumnya
   yang scoped (.page_index_journal / .page_issue).
   ============================================================ */

html body a.obj_galley_link,
html body .obj_article_summary a.obj_galley_link,
html body .galleys_links a.obj_galley_link,
html body .item.galleys a.obj_galley_link,
html body .page_article a.obj_galley_link,
html body .value a.obj_galley_link {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             6px !important;
  background:      transparent !important;
  color:           var(--lb-primary) !important;
  border:          1px solid var(--lb-primary) !important;
  border-radius:   6px !important;
  padding:         4px 12px !important;
  font-family:     'Inter', sans-serif !important;
  font-size:       11px !important;
  font-weight:     600 !important;
  line-height:     1.4 !important;
  text-decoration: none !important;
  white-space:     nowrap !important;
  box-shadow:      none !important;
  transition:      background .2s ease, color .2s ease, border-color .2s ease !important;
  cursor:          pointer !important;
}

html body a.obj_galley_link:hover,
html body .obj_article_summary a.obj_galley_link:hover,
html body .galleys_links a.obj_galley_link:hover,
html body .item.galleys a.obj_galley_link:hover,
html body .page_article a.obj_galley_link:hover,
html body .value a.obj_galley_link:hover {
  background:   var(--lb-primary) !important;
  border-color: var(--lb-primary) !important;
  color:        #ffffff !important;
  transform:    none !important;
  box-shadow:   none !important;
}

/* Halaman artikel detail biasanya pakai ukuran lebih besar — samakan tapi
   beri sedikit padding ekstra agar tetap proporsional di area itu */
html body .page_article .item.galleys a.obj_galley_link {
  font-size: 12px !important;
  padding:   6px 14px !important;
}

/* ============================================================
   LOKA BHAKTI — FIX: Current Issue layout mobile
   - Cover di-center, ukuran proporsional (tidak full-width)
   - Deskripsi & published dapat padding horizontal
   - Semua elemen center-align rapi
   ============================================================ */

@media (max-width: 768px) {

  /* Hilangkan sticky (carry-over dari fix sebelumnya) */
  .page_index_journal .current_issue .heading {
    position: static !important;
    top:      auto !important;
  }

  /* Container utama dapat padding horizontal */
  .page_index_journal .current_issue .obj_issue_toc {
    padding-left:  20px !important;
    padding-right: 20px !important;
    box-sizing:    border-box !important;
    width:         100% !important;
  }

  /* Heading (cover + deskripsi) — center semua */
  .page_index_journal .current_issue .heading {
    width:       100% !important;
    align-items: center !important;
    text-align:  center !important;
  }

  /* Cover — ukuran proporsional, center */
  .page_index_journal .current_issue .obj_issue_toc .heading a.cover {
    align-self: center !important;
    transform:  none !important; /* reset shift dari revisi v3 */
  }

  .page_index_journal .current_issue .obj_issue_toc .heading a.cover img {
    width:     160px !important;
    max-width: 160px !important;
    margin:    0 auto !important;
  }

  /* Deskripsi — full width dalam container yang sudah ber-padding,
     teks justify tapi tetap rapi */
  .page_index_journal .current_issue .obj_issue_toc .heading .description {
    width: 100% !important;
  }

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

  /* Published — center */
  .page_index_journal .current_issue .obj_issue_toc .heading .published {
    text-align: center !important;
  }

  /* Sections (list artikel) — full width, ikut padding container */
  .page_index_journal .current_issue .sections {
    width: 100% !important;
  }
}

/* ============================================================
   LOKA BHAKTI — GLOBAL ARTICLE CARD
   Berlaku di: homepage current issue, issue/view/X,
   search results, dan semua halaman yang ada .obj_article_summary
   ============================================================ */

/* ── Reset list wrapper ── */
html body .obj_article_summary,
html body .page_index_journal .current_issue .obj_article_summary,
html body .page_issue .obj_article_summary {
  position:       relative !important;
  background:     #ffffff !important;
  border:         1px solid var(--lb-border) !important;
  border-left:    3px solid var(--lb-primary) !important;
  border-radius:  14px !important;
  padding:        16px 18px 13px !important;
  box-shadow:     none !important;
  margin-bottom:  10px !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            7px !important;
  transition:     box-shadow .22s ease, transform .22s ease, border-color .22s ease !important;
  box-sizing:     border-box !important;
}

/* Hapus border-bottom list lama */
html body .obj_article_summary {
  border-bottom: 1px solid var(--lb-border) !important;
}

/* Hover card */
html body .obj_article_summary:hover,
html body .page_index_journal .current_issue .obj_article_summary:hover,
html body .page_issue .obj_article_summary:hover {
  box-shadow:    0 8px 22px rgba(229,106,58,.12) !important;
  transform:     translateY(-3px) !important;
  border-color:  #fdba74 !important;
  border-left-color: var(--lb-primary) !important;
  padding-left:  18px !important; /* reset indent dari rule lama */
}

/* ── Judul artikel — dikecilkan, tetap serif ── */
html body .obj_article_summary .title a,
html body .obj_article_summary > h3.title a,
html body .page_index_journal .current_issue .obj_article_summary .title a,
html body .page_issue .obj_article_summary .title a {
  font-family:     'Source Serif 4', serif !important;
  font-size:       13.5px !important;
  line-height:     1.5 !important;
  font-weight:     600 !important;
  color:           var(--lb-text-dark) !important;
  text-decoration: none !important;
  display:         block !important;
}

html body .obj_article_summary .title a:hover,
html body .page_index_journal .current_issue .obj_article_summary .title a:hover,
html body .page_issue .obj_article_summary .title a:hover {
  color: var(--lb-primary) !important;
}

/* ── Authors ── */
html body .obj_article_summary .authors,
html body .page_index_journal .current_issue .obj_article_summary .authors,
html body .page_issue .obj_article_summary .authors {
  font-family:        'Inter', sans-serif !important;
  font-size:          11px !important;
  color:              var(--lb-text-meta) !important;
  line-height:        1.5 !important;
  margin-bottom:      0 !important;
  display:            -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow:           hidden !important;
  text-overflow:      ellipsis !important;
}

/* ── Pages — inline muted ── */
html body .obj_article_summary .pages,
html body .page_index_journal .current_issue .obj_article_summary .pages,
html body .page_issue .obj_article_summary .pages {
  position:    static !important;
  display:     inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-size:   10px !important;
  font-weight: 500 !important;
  color:       var(--lb-text-muted) !important;
  background:  transparent !important;
  padding:     0 !important;
  margin-top:  0 !important;
  line-height: 1.5 !important;
}

html body .obj_article_summary .pages::before,
html body .page_index_journal .current_issue .obj_article_summary .pages::before,
html body .page_issue .obj_article_summary .pages::before {
  content: "· " !important;
  color:   var(--lb-text-muted) !important;
}

/* ── Galley/PDF button — tetap pakai rule global yang sudah ada ── */
html body .obj_article_summary .galleys_links,
html body .obj_article_summary .item.galleys {
  margin-top:   6px !important;
  display:      flex !important;
  flex-wrap:    wrap !important;
  align-items:  center !important;
  gap:          6px !important;
  list-style:   none !important;
  padding-left: 0 !important;
  margin-left:  0 !important;
}

html body .obj_article_summary .galleys_links li,
html body .obj_article_summary .item.galleys li {
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
}

/* ── Reset hover indent dari rule lama (BAGIAN 11 & FIX 3) ── */
html body .page_index_journal .current_issue .obj_article_summary:hover,
html body .page_issue .obj_article_summary:hover {
  border-left:  3px solid var(--lb-primary) !important;
  padding-left: 18px !important;
}

/* ── last-child: tetap ada border bawah karena sekarang pakai card ── */
html body .page_index_journal .current_issue .obj_article_summary:last-child,
html body .page_issue .cmp_article_list.articles > li:last-child .obj_article_summary {
  border-bottom: 1px solid var(--lb-border) !important;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
  html body .obj_article_summary {
    padding:     14px 14px 11px !important;
    margin-bottom: 8px !important;
  }

  html body .obj_article_summary .title a,
  html body .page_index_journal .current_issue .obj_article_summary .title a,
  html body .page_issue .obj_article_summary .title a {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  html body .obj_article_summary {
    padding: 12px 12px 10px !important;
  }

  html body .obj_article_summary .title a {
    font-size: 12.5px !important;
  }
}

/* ============================================================
   LOKA BHAKTI — ARTICLE CARD SLIM (Homepage only) — FINAL
   ============================================================ */

html body .page_index_journal .current_issue .obj_article_summary {
  padding:        7px 14px 7px !important;
  gap:            5px !important;
  margin-bottom:  8px !important;
  border-radius:  10px !important;
  position:       relative !important;
}

html body .page_index_journal .current_issue .obj_article_summary .title a {
  font-size:   12.5px !important;
  line-height: 1.45 !important;
}

html body .page_index_journal .current_issue .obj_article_summary .authors {
  font-size: 10.5px !important;
}

html body .page_index_journal .current_issue .obj_article_summary .galleys_links,
html body .page_index_journal .current_issue .obj_article_summary .item.galleys {
  margin-top: 4px !important;
  gap:        5px !important;
}

html body .page_index_journal .current_issue a.obj_galley_link {
  font-size: 9.5px !important;
  padding:   3px 9px !important;
}

/* Pages — pojok kanan atas card */
html body .page_index_journal .current_issue .obj_article_summary .pages {
  position:   absolute !important;
  top:        9px !important;
  right:      14px !important;
  font-size:  9.5px !important;
  margin:     0 !important;
}

html body .page_index_journal .current_issue .obj_article_summary .pages::before {
  content: none !important;
}

/* Homepage article card — hover tanpa transform */
html body .page_index_journal .current_issue .obj_article_summary:hover {
  transform:         none !important;
  box-shadow:        0 4px 14px rgba(229,106,58,.10) !important;
  border-color:      #fdba74 !important;
  border-left-color: var(--lb-primary) !important;
  padding-left:      14px !important;
}

/* Hapus border-left orange — semua halaman */
html body .obj_article_summary,
html body .page_index_journal .current_issue .obj_article_summary,
html body .page_issue .obj_article_summary {
  border-left: 1px solid var(--lb-border) !important;
}

/* Reset hover border-left homepage */
html body .page_index_journal .current_issue .obj_article_summary:hover {
  border-left:  1px solid #fdba74 !important;
  padding-left: 14px !important;
}

/* Reset hover border-left halaman lain */
html body .obj_article_summary:hover,
html body .page_issue .obj_article_summary:hover {
  border-left: 1px solid #fdba74 !important;
}

/* ── Pages pojok kanan — semua halaman artikel ── */
html body .obj_article_summary {
  position: relative !important;
}

html body .obj_article_summary .pages {
  position: absolute !important;
  top:      10px !important;
  right:    14px !important;
  margin:   0 !important;
}

html body .obj_article_summary .pages::before {
  content: none !important;
}

/* ── Gap antar card lebih rapat — issue page ── */
html body .page_issue .cmp_article_list.articles {
  gap: 10px !important;
}

html body .page_issue .obj_article_summary {
  margin-bottom: 0 !important;
}

/* Gap artikel homepage lebih rapat */
html body .page_index_journal .current_issue .sections {
  gap: 0 !important;
}

html body .page_index_journal .current_issue .obj_article_summary {
  margin-bottom: 6px !important;
}

/* Reset margin li bawaan OJS di homepage */
html body .page_index_journal .current_issue .cmp_article_list.articles > li {
  margin-bottom: 6px !important;
}

/* Sedikit breathing room artikel pertama dari label ARTICLES */
html body .page_index_journal .current_issue .sections::before {
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}

/* ── FINAL FIX: Pages absolute semua halaman issue ── */
html body .page_issue .obj_article_summary,
html body .pkp_page_issue .obj_article_summary {
  position: relative !important;
}

html body .page_issue .obj_article_summary .pages,
html body .pkp_page_issue .obj_article_summary .pages {
  position: absolute !important;
  top:      12px !important;
  right:    16px !important;
  left:     auto !important;
  margin:   0 !important;
  padding:  0 !important;
}

html body .page_issue .obj_article_summary .pages::before,
html body .pkp_page_issue .obj_article_summary .pages::before {
  content: none !important;
}