/* =============================================================
   Stylesheet Premium untuk Jurnal Geologi Pertambangan (JGP)
   Universitas Kutai Kartanegara - Fakultas Teknik
   Versi: 2.2 | Fix Header Alignment & Clickable Search
   ============================================================= */

/* ---- 1. IMPOR FONT ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ---- 2. CSS VARIABLES / DESIGN TOKENS ---- */
:root {
  --color-primary:       #3d2008;
  --color-primary-mid:   #5c3010;
  --color-accent:        #b07d3c;
  --color-accent-light:  #d4a45a;
  --color-accent-pale:   #f0e4cc;
  --color-bg:            #fdfcfa;
  --color-bg-warm:       #f5f1eb;
  --color-bg-section:    #f9f7f4;
  --color-border:        #e0d8cc;
  --color-border-strong: #c8bca8;
  --color-text:          #1e1510;
  --color-text-muted:    #6b5c4a;
  --color-text-light:    #9a8778;
  --font-body:           'Lora', Georgia, serif;
  --font-heading:        'Inter', 'Helvetica Neue', sans-serif;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --shadow-xs:   0 1px 3px rgba(61, 32, 8, 0.06);
  --shadow-sm:   0 2px 8px rgba(61, 32, 8, 0.08);
  --shadow-md:   0 4px 16px rgba(61, 32, 8, 0.10);
  --shadow-lg:   0 8px 32px rgba(61, 32, 8, 0.13);
  --shadow-xl:   0 16px 48px rgba(61, 32, 8, 0.16);
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
}

/* ---- 3. RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text);
  background-color: var(--color-bg-warm);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .title, .pkp_block .title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

a {
  color: var(--color-primary-mid);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent); text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

/* ---- 4. STRUKTUR UTAMA ---- */
.pkp_structure_page {
  margin: 0 auto;
  max-width: 1200px;
  background: var(--color-bg);
  box-shadow: var(--shadow-xl);
}

/* ---- 5. HEADER & DEKORASI ---- */
.pkp_structure_head {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 60%, #7a4520 100%);
  border-bottom: none;
  padding: 0;
  position: relative;
  overflow: visible !important;
  z-index: 500 !important; /* FIX: pastikan header + dropdown selalu di atas konten (mis. .highlights) */
  isolation: isolate; /* FIX: kunci stacking context header agar tidak terpengaruh z-index elemen lain */
}

.pkp_head_wrapper {
  padding: 12px 28px 0 28px;
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

.pkp_head_wrapper::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(176, 125, 60, 0.15);
  pointer-events: none !important;
  z-index: 0;
}

.pkp_head_wrapper::after {
  content: '';
  position: absolute;
  bottom: -40px; right: 120px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(176, 125, 60, 0.10);
  pointer-events: none !important;
  z-index: 0;
}

.pkp_site_name_wrapper {
  padding: 8px 0 12px 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
  max-width: 70%;
  text-align: left !important;
}

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

.pkp_site_name a.is_text {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
  display: inline-block;
  position: relative;
  line-height: 1.2;
}

.pkp_site_name a.is_text::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 50px; height: 3px;
  background: var(--color-accent-light);
  border-radius: 2px;
}

/* --- NAVIGASI PENGGUNA (KANAN ATAS) --- */
/* FIX: sebelumnya position:absolute (top/right) sehingga di halaman
   dengan tinggi header lebih pendek (mis. halaman Search), kotak ini
   jatuh menimpa baris menu navigasi (ABOUT dkk). Sekarang dibuat
   mengikuti alur flex header agar posisinya selalu konsisten dan
   tidak pernah bertumpuk dengan menu di bawahnya. */
.pkp_head_wrapper {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  row-gap: 8px !important;
}

.pkp_navigation_user_wrapper {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: 10002;
  margin: 6px -18px 16px auto !important; /* FIX: -18px = selisih padding kanan head_wrapper (28px) vs baris menu (10px), agar sejajar tepat di bawah SEARCH */
  padding: 0;
  flex-shrink: 0 !important;
}

.pkp_navigation_user {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

#navigationUser > li,
.pkp_navigation_user > li {
  position: relative;
}

#navigationUser > li > a,
.pkp_navigation_user > li > a {
  color: rgba(255, 255, 255, 0.95) !important;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

#navigationUser > li > a:hover,
.pkp_navigation_user > li > a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

#navigationUser > li > ul,
.pkp_navigation_user > li > ul {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 4px !important;
  background: var(--color-primary) !important;
  border: 1px solid rgba(176,125,60,0.5) !important;
  border-top: 3px solid var(--color-accent) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.40) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  min-width: 190px !important;
  padding: 6px 0 !important;
  z-index: 10003 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
  display: block !important;
}

#navigationUser > li.show > ul,
.pkp_navigation_user > li.show > ul,
#navigationUser > li:hover > ul,
.pkp_navigation_user > li:hover > ul {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

#navigationUser > li > ul > li > a,
.pkp_navigation_user > li > ul > li > a {
  display: block !important;
  color: rgba(255,255,255,0.92) !important;
  background: transparent !important;
  font-family: var(--font-heading) !important;
  font-size: 0.84rem !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  transition: background 0.15s ease, padding-left 0.15s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#navigationUser > li > ul > li:last-child > a,
.pkp_navigation_user > li > ul > li:last-child > a { border-bottom: none !important; }

#navigationUser > li > ul > li > a:hover,
.pkp_navigation_user > li > ul > li > a:hover {
  color: #ffffff !important;
  background: rgba(176,125,60,0.32) !important;
  padding-left: 24px !important;
}

/* ---- 6. BARIS NAVIGASI UTAMA & SEARCH BAR ---- */
.pkp_site_nav_menu {
  overflow: visible !important;
  position: relative;
}

.pkp_navigation_primary_row {
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: none;
  margin-top: 6px;
  z-index: 1000;
  overflow: visible !important;
}

.pkp_navigation_primary_wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
  overflow: visible !important;
  padding: 0 10px;
}

.pkp_navigation_primary {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  overflow: visible !important;
}

.pkp_navigation_primary > li > a,
#navigationPrimary > li > a,
.pkp_nav_list > li > a {
  display: block;
  padding: 13px 18px 15px 18px;
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  user-select: none;
}

.pkp_navigation_primary > li > a::after,
#navigationPrimary > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 3px;
  background: var(--color-accent-light);
  border-radius: 2px 2px 0 0;
  transition: width var(--transition-base);
  pointer-events: none;
}

.pkp_navigation_primary > li > a:hover,
#navigationPrimary > li > a:hover,
.pkp_navigation_primary > li.show > a,
#navigationPrimary > li.show > a {
  color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
  text-decoration: none !important;
}

.pkp_navigation_primary > li > a:hover::after,
#navigationPrimary > li > a:hover::after,
.pkp_navigation_primary > li.show > a:hover::after,
#navigationPrimary > li.show > a::after { width: 70%; }

/* Dropdown Navigasi Utama */
.pkp_navigation_primary > li > ul,
#navigationPrimary > li > ul,
.pkp_nav_list > li > ul,
nav.pkp_site_nav_menu .pkp_nav_list > li > ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: -2px !important;
  z-index: 10000 !important;
  background-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  border: 1px solid rgba(176,125,60,0.5) !important;
  border-top: 3px solid var(--color-accent) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.40) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  min-width: 220px !important;
  padding: 6px 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
  display: block !important;
}

.pkp_navigation_primary > li.show > ul,
#navigationPrimary > li.show > ul,
.pkp_nav_list > li.show > ul,
nav.pkp_site_nav_menu .pkp_nav_list > li.show > ul,
.pkp_navigation_primary > li:hover > ul,
#navigationPrimary > li:hover > ul {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.pkp_navigation_primary > li,
#navigationPrimary > li { position: relative; }

.pkp_navigation_primary > li > ul > li > a,
#navigationPrimary > li > ul > li > a,
nav.pkp_site_nav_menu .pkp_nav_list > li > ul > li > a {
  display: block !important;
  color: rgba(255,255,255,0.92) !important;
  background: transparent !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  transition: background 0.15s ease, padding-left 0.15s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.pkp_navigation_primary > li > ul > li:last-child > a,
#navigationPrimary > li > ul > li:last-child > a { border-bottom: none !important; }

.pkp_navigation_primary > li > ul > li > a:hover,
#navigationPrimary > li > ul > li > a:hover,
nav.pkp_site_nav_menu .pkp_nav_list > li > ul > li > a:hover {
  color: #ffffff !important;
  background: rgba(176,125,60,0.32) !important;
  padding-left: 28px !important;
}

/* --- TOMBOL SEARCH FIX --- */
.pkp_navigation_search_wrapper {
  position: relative !important;
  z-index: 10005 !important;
  margin-left: auto !important;
  pointer-events: auto !important;
}

.pkp_search, 
a.pkp_search,
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper form,
.pkp_navigation_search_wrapper button,
.pkp_navigation_search_wrapper input {
  position: relative !important;
  z-index: 10006 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.pkp_search, a.pkp_search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm) !important;
  color: rgba(255,255,255,0.92) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.pkp_search:hover, a.pkp_search:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.20) !important;
}

.pkp_navigation_search_wrapper input[type="text"],
.pkp_navigation_search_wrapper input[type="search"] {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
}

.pkp_navigation_search_wrapper input[type="text"]::placeholder,
.pkp_navigation_search_wrapper input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- 7. SIDEBAR BLOCKS ---- */
.pkp_structure_sidebar.left {
  background-color: var(--color-bg-warm);
  border-right: 1px solid var(--color-border);
}

.pkp_block {
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.pkp_block .title,
.pkp_structure_sidebar.left .title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
  color: #ffffff;
  padding: 12px 16px;
  margin: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  position: relative;
}

.pkp_block .title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-accent);
}

.pkp_block .content { padding: 0; }

.block_language .content ul {
  list-style: none;
  margin: 0; padding: 8px;
  display: flex; gap: 6px;
}

.block_language .content ul li a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: all var(--transition-fast);
}

.block_language .content ul li.current a {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.block_language .content ul li a:hover {
  background: var(--color-accent-pale);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

/* ---- 8. VERTICAL MENU ---- */
.vertical-menu { width: 100%; }

.vertical-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-family: var(--font-heading);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
}

.vertical-menu a::before {
  content: '\203A';
  font-size: 1.2rem;
  color: var(--color-accent);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.vertical-menu a:hover {
  background: var(--color-accent-pale);
  color: var(--color-primary);
  padding-left: 20px;
  border-left: 3px solid var(--color-accent);
  text-decoration: none;
}

.vertical-menu a:hover::before { transform: translateX(3px); }

.vertical-menu a.active {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
  color: #ffffff;
  border-left: 4px solid var(--color-accent-light);
  padding-left: 16px;
  font-weight: 600;
}

.vertical-menu a.active::before { color: var(--color-accent-light); }
.vertical-menu a:last-child { border-bottom: none; }

/* ---- 9. KONTEN UTAMA ---- */
.pkp_structure_main { padding: 32px 36px; }

/* ---- 10. HOMEPAGE ABOUT ---- */
section.homepage_about {
  background: linear-gradient(135deg, #fdfcfa 0%, var(--color-accent-pale) 100%);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

section.homepage_about::before {
  content: '\201C';
  position: absolute;
  top: -10px; right: 20px;
  font-size: 8rem;
  color: var(--color-accent);
  opacity: 0.08;
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

section.homepage_about h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px; margin-top: 0;
  display: flex; align-items: center; gap: 10px;
}

section.homepage_about h2::before {
  content: '';
  display: inline-block;
  width: 4px; height: 20px;
  background: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

section.homepage_about p {
  color: var(--color-text);
  line-height: 1.85;
  font-size: 0.95rem;
  text-align: justify;
  margin: 0;
}

/* ---- 11. CURRENT ISSUE & ARTICLE LIST ---- */
section.current_issue { margin-bottom: 32px; }

section.current_issue > h2 {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-border);
  position: relative;
}

section.current_issue > h2::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 48px; height: 2px;
  background: var(--color-accent);
}

.current_issue_title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.obj_issue_toc .heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
  padding: 20px;
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.obj_issue_toc .heading .cover img {
  width: 120px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 3px solid var(--color-border);
}

.obj_issue_toc .heading .description {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  text-align: justify;
}

.obj_issue_toc .heading .published {
  font-family: var(--font-heading);
  font-size: 0.80rem;
  margin-top: 10px;
}

.obj_issue_toc .heading .published .label {
  font-weight: 600;
  color: var(--color-primary);
}

.obj_issue_toc .sections .section > h3 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent);
  padding: 8px 0;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--color-border);
}

.cmp_article_list.articles,
.obj_issue_toc .articles {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmp_article_list.articles li,
.obj_issue_toc .articles > li {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.cmp_article_list.articles li::before,
.obj_issue_toc .articles > li::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-primary-mid) 100%);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.cmp_article_list.articles li:hover,
.obj_issue_toc .articles > li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-accent-pale) 100%);
}

.cmp_article_list.articles li:hover::before,
.obj_issue_toc .articles > li:hover::before { opacity: 1; }

.obj_article_summary .title { margin: 0 0 10px 0; }

.obj_article_summary .title a {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary) !important;
  line-height: 1.45;
  transition: color var(--transition-fast);
}

.obj_article_summary .title a:hover { color: var(--color-accent) !important; }

.obj_article_summary .meta { margin-top: 8px; }

.obj_article_summary .authors {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.galleys_links {
  list-style: none;
  margin: 10px 0 0 0; padding: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}

.galleys_links li a,
.galleys_links li .file {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--color-primary);
  color: #fff !important;
  transition: all var(--transition-fast);
}

.galleys_links li a:hover {
  background: var(--color-accent);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(61,32,8,0.25);
}

/* ---- 12. READ MORE ---- */
a.read_more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 24px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
  color: #fff !important;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

a.read_more::after { content: '\2192'; font-size: 1rem; }

a.read_more:hover {
  background: linear-gradient(135deg, var(--color-primary-mid) 0%, var(--color-accent) 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #fff !important;
}

/* ---- 13. ARTIKEL DETAIL ---- */
.obj_article_details .page_title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--color-primary);
  line-height: 1.3;
  padding: 0 0 20px 0;
  margin-bottom: 28px;
  border-bottom: 3px solid var(--color-border);
  background-color: transparent;
  box-shadow: none;
  position: relative;
}

.obj_article_details .page_title::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 64px; height: 3px;
  background: var(--color-accent);
}

.obj_article_details .abstract {
  text-align: justify;
  line-height: 1.9;
  font-size: 0.97rem;
  color: var(--color-text);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}

/* ---- 14. ADDITIONAL CONTENT ---- */
.additional_content { margin-top: 24px; }

.additional_content > div {
  background: linear-gradient(135deg, var(--color-bg-section) 0%, var(--color-accent-pale) 100%) !important;
  border-left: 5px solid var(--color-accent) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px 24px !important;
}

.additional_content h3 {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* ---- 15. FOOTER ---- */
.pkp_structure_footer_wrapper {
  background: linear-gradient(135deg, var(--color-primary) 0%, #2a1505 100%);
  color: #ffffff;
  border-top: 4px solid var(--color-accent);
}

.pkp_footer_content a {
  color: var(--color-accent-pale);
  transition: color var(--transition-fast);
}

.pkp_footer_content a:hover { color: var(--color-accent-light); }

.pkp_brand_footer {
  padding: 16px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  opacity: 0.5;
  transition: opacity var(--transition-base);
}

.pkp_brand_footer:hover { opacity: 0.9; }

/* ---- 16. CUSTOM SIDEBAR BLOCKS ---- */
#customblock-menu .content > div > p,
#customblock-template .content > div > p,
#customblock-issn .content > div > p,
#customblock-tools .content > div > p,
#customblock-jurnal_index .content > div > p {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%) !important;
  border-bottom: 3px solid var(--color-accent) !important;
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.07em !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ---- 17. KEYWORD CLOUD ---- */
.block_keyword_cloud .content {
  padding: 12px;
  background: var(--color-bg);
  min-height: 160px;
}

/* ---- 18. SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-warm); }
::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-mid); }

/* ---- 19. SELECTION ---- */
::selection { background: var(--color-accent); color: #fff; }

/* ---- 20. RESPONSIVE BREAKPOINTS ---- */
@media (max-width: 900px) {
  .pkp_structure_main { padding: 24px 20px; }
  .pkp_head_wrapper { padding: 12px 20px 0 20px; }
  .pkp_site_name a.is_text { font-size: 1.3rem; }
  .pkp_navigation_user_wrapper { position: relative; top: 0; right: 0; margin-bottom: 10px; }
  .obj_issue_toc .heading { grid-template-columns: 1fr; }
  .obj_issue_toc .heading .cover img { width: 90px; }
}

@media (max-width: 600px) {
  .pkp_structure_main { padding: 20px 16px; }
  section.homepage_about { padding: 20px 18px; }
  .obj_article_details .page_title { font-size: 1.5rem; }
}
/* =============================================================
   TAMBAHAN PERBAIKAN UNTUK STANDAR AKREDITASI SINTA & PROFESIONAL
   ============================================================= */

/* 1. Kerapihan Blok Informasi DOI pada Artikel */
.obj_article_details .doi {
  margin: 15px 0 20px 0;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
}

.obj_article_details .doi .label {
  color: var(--color-primary);
  margin-right: 6px;
}

.obj_article_details .doi .value a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-pale);
  color: var(--color-primary-mid) !important;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent-light);
  word-break: break-all;
}

.obj_article_details .doi .value a:hover {
  background: var(--color-accent);
  color: #ffffff !important;
}

/* 2. Penyempurnaan Tampilan Abstrak (SINTA Standard) */
.obj_article_details .item.abstract .heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
  padding-bottom: 3px;
}

.obj_article_details .abstract {
  font-family: var(--font-heading); /* Mengubah ke Inter agar lebih modern & readable */
  font-size: 0.92rem;
  line-height: 1.8;
  color: #2b2b2b;
  background: #faf8f5;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}

/* 3. Pengaturan Gambar Indexing di Sidebar (Garuda, SINTA, Crossref) */
.pkp_block .content img,
#customblock-jurnal_index .content img,
#customblock-tools .content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 8px auto;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast);
}

.pkp_block .content img:hover {
  transform: scale(1.03);
}

/* 4. Tampilan Block Citation ("How to Cite") */
.item.citation .sub_item.citation_display {
  background: var(--color-bg-section);
  border: 1px dashed var(--color-border-strong);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-top: 10px;
}

/* 5. Mencegah Overlap Header pada Layar Sedang/Responsif */
@media (max-width: 1100px) {
  .pkp_head_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .pkp_navigation_user_wrapper {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin-bottom: 12px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .pkp_site_name_wrapper {
    max-width: 100% !important;
  }
}

/* =============================================================
   PERBAIKAN TAMPILAN ISSUE HEADER (ARCHIVES / CURRENT ISSUE)
   ============================================================= */

/* 1. Container Utama Issue Header */
.obj_issue_toc .heading {
  display: grid !important;
  grid-template-columns: 200px 1fr !important; /* Membagi gambar di kiri & deskripsi di kanan */
  gap: 28px !important;
  align-items: start !important;
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 32px !important;
}

/* 2. Ukuran Sampul/Cover Jurnal */
.obj_issue_toc .heading .cover {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 100% !important;
  margin: 0 !important;
}

.obj_issue_toc .heading .cover img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--color-border-strong) !important;
}

/* 3. Deskripsi / Kata Pengantar Jurnal */
.obj_issue_toc .heading .description {
  grid-column: 2 !important;
  font-family: var(--font-heading) !important;
  font-size: 0.93rem !important;
  line-height: 1.8 !important;
  color: var(--color-text) !important;
  text-align: justify !important;
  margin-bottom: 20px !important;
}

/* 4. Formatting DOI Block (Agar Menjadi Badge) */
.obj_issue_toc .heading .pub_id.doi,
.obj_issue_toc .heading .doi {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.88rem !important;
}

.obj_issue_toc .heading .pub_id.doi .label,
.obj_issue_toc .heading .doi .label {
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

.obj_issue_toc .heading .pub_id.doi .value a,
.obj_issue_toc .heading .doi a {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--color-accent-pale) !important;
  color: var(--color-primary-mid) !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-accent-light) !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  transition: all var(--transition-fast) !important;
}

.obj_issue_toc .heading .pub_id.doi .value a:hover,
.obj_issue_toc .heading .doi a:hover {
  background: var(--color-accent) !important;
  color: #ffffff !important;
}

/* 5. Formatting Tanggal Terbit (Published Date) */
.obj_issue_toc .heading .published {
  grid-column: 2 !important;
  font-family: var(--font-heading) !important;
  font-size: 0.82rem !important;
  color: var(--color-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--color-bg-section) !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-border) !important;
  width: fit-content !important;
}

.obj_issue_toc .heading .published .label {
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* 6. Responsif untuk Layar HP/Tablet */
@media (max-width: 768px) {
  .obj_issue_toc .heading {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .obj_issue_toc .heading .cover {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: 160px !important;
    margin: 0 auto 10px auto !important;
  }
  
  .obj_issue_toc .heading .description,
  .obj_issue_toc .heading .pub_id.doi,
  .obj_issue_toc .heading .published {
    grid-column: 1 !important;
  }
}

/* =============================================================
   OVERRIDE HIGHLIGHTS SLIDER & CONTAINER MAIN (FAKULTAS TEKNIK)
   ============================================================= */

/* 1. Menetralkan Latar Belakang Abu-abu & Memperbaiki Jarak Bawah */
.highlights {
  background: transparent !important; /* Hapus background abu-abu #ddd */
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 2.5rem !important; /* Memberikan jarak napas yang pas ke kartu About */
  box-sizing: border-box !important;
}

/* 2. Container Utama Swiper menggunakan Variabel Tema Warm */
.highlights .swiper,
.highlights .swiper-container,
.highlights .swiper-wrapper {
  background: var(--color-bg-warm, #f5f1eb) !important; /* Warna hangat tema */
  border: 1px solid var(--color-border, #e0d8cc) !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(61, 32, 8, 0.08)) !important;
  height: auto !important; /* Mematikan inline style height: 280px bawaan JS Swiper */
  max-height: none !important;
  overflow: hidden !important;
}

/* 3. Layout Flexbox Dalam Slide */
.highlights .swiper-slide {
  background: var(--color-bg-warm, #f5f1eb) !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 2.25rem 2.5rem !important;
  gap: 2rem !important;
  box-sizing: border-box !important;
  height: auto !important;
}

/* 4. Area Konten Teks */
.highlights .swiper-slide-content {
  flex: 1 1 auto !important;
  text-align: left !important;
  width: 100% !important;
}

/* Judul Highlights Menggunakan Font Heading & Aksen Garis Kiri */
.highlights .swiper-slide-title {
  font-family: var(--font-heading, sans-serif) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--color-primary, #3d2008) !important;
  margin: 0 0 1rem 0 !important;
  padding-left: 0.875rem !important;
  border-left: 4px solid var(--color-accent, #b07d3c) !important; /* Line aksen emas-cokelat */
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  line-height: 1.3 !important;
}

/* Paragraf Deskripsi Menggunakan Font Body (Lora) */
.highlights .swiper-slide-desc {
  font-family: var(--font-body, serif) !important;
  color: var(--color-text, #1e1510) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

.highlights .swiper-slide-desc p {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

.highlights .swiper-slide-desc p:last-child {
  margin-bottom: 1.5rem !important;
}

/* Gambar Cover 3D (Tampil Otomatis jika Ada Gambar) */
.highlights .swiper-slide-image {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(61, 32, 8, 0.15)) !important;
}

/* 5. Tombol Action (Submit Manuscript) */
.highlights .swiper-slide-button.pkp_button {
  display: inline-block !important;
  background: var(--color-primary, #3d2008) !important;
  color: #ffffff !important;
  font-family: var(--font-heading, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: var(--radius-md, 8px) !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(61, 32, 8, 0.06)) !important;
  transition: all var(--transition-base, 0.25s ease) !important;
}

.highlights .swiper-slide-button.pkp_button:hover {
  background: var(--color-primary-mid, #5c3010) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(61, 32, 8, 0.08)) !important;
}

/* Sembunyikan Navigasi Bawaan Swiper yang Terkunci */
.highlights .swiper-button-lock,
.highlights .swiper-pagination-lock {
  display: none !important;
}

/* 6. Penyesuaian Layar Perangkat HP */
@media (max-width: 768px) {
  .highlights {
    margin-bottom: 1.5rem !important;
  }
  
  .highlights .swiper-slide {
    flex-direction: column-reverse !important;
    padding: 1.5rem 1.25rem !important;
    gap: 1.25rem !important;
  }

  .highlights .swiper-slide-image {
    flex: 0 0 auto !important;
    max-width: 170px !important;
  }

  .highlights .swiper-slide-title {
    font-size: 1.2rem !important;
  }
}

/* =============================================================
   OVERRIDE HIGHLIGHTS SLIDER & CONTAINER MAIN (FAKULTAS TEKNIK)
   ============================================================= */

/* 1. Menetralkan Latar Belakang Abu-abu & Memperbaiki Jarak Bawah */
.highlights {
  background: transparent !important; /* Hapus background abu-abu #ddd */
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 2.5rem !important; /* Memberikan jarak napas yang pas ke kartu About */
  box-sizing: border-box !important;
}

/* 2. Container Utama Swiper menggunakan Variabel Tema Warm */
.highlights .swiper,
.highlights .swiper-container,
.highlights .swiper-wrapper {
  background: var(--color-bg-warm, #f5f1eb) !important; /* Warna hangat tema */
  border: 1px solid var(--color-border, #e0d8cc) !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(61, 32, 8, 0.08)) !important;
  height: auto !important; /* Mematikan inline style height: 280px bawaan JS Swiper */
  max-height: none !important;
  overflow: hidden !important;
}

/* 3. Layout Flexbox Dalam Slide */
.highlights .swiper-slide {
  background: var(--color-bg-warm, #f5f1eb) !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 2.25rem 2.5rem !important;
  gap: 2rem !important;
  box-sizing: border-box !important;
  height: auto !important;
}

/* 4. Area Konten Teks */
.highlights .swiper-slide-content {
  flex: 1 1 auto !important;
  text-align: left !important;
  width: 100% !important;
}

/* Judul Highlights Menggunakan Font Heading & Aksen Garis Kiri */
.highlights .swiper-slide-title {
  font-family: var(--font-heading, sans-serif) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--color-primary, #3d2008) !important;
  margin: 0 0 1rem 0 !important;
  padding-left: 0.875rem !important;
  border-left: 4px solid var(--color-accent, #b07d3c) !important; /* Line aksen emas-cokelat */
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  line-height: 1.3 !important;
}

/* Paragraf Deskripsi Menggunakan Font Body (Lora) */
.highlights .swiper-slide-desc {
  font-family: var(--font-body, serif) !important;
  color: var(--color-text, #1e1510) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

.highlights .swiper-slide-desc p {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

.highlights .swiper-slide-desc p:last-child {
  margin-bottom: 1.5rem !important;
}

/* Gambar Cover 3D (Tampil Otomatis jika Ada Gambar) */
.highlights .swiper-slide-image {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(61, 32, 8, 0.15)) !important;
}

/* 5. Tombol Action (Submit Manuscript) */
.highlights .swiper-slide-button.pkp_button {
  display: inline-block !important;
  background: var(--color-primary, #3d2008) !important;
  color: #ffffff !important;
  font-family: var(--font-heading, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: var(--radius-md, 8px) !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(61, 32, 8, 0.06)) !important;
  transition: all var(--transition-base, 0.25s ease) !important;
}

.highlights .swiper-slide-button.pkp_button:hover {
  background: var(--color-primary-mid, #5c3010) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(61, 32, 8, 0.08)) !important;
}

/* Sembunyikan Navigasi Bawaan Swiper yang Terkunci */
.highlights .swiper-button-lock,
.highlights .swiper-pagination-lock {
  display: none !important;
}

/* 6. Penyesuaian Layar Perangkat HP */
@media (max-width: 768px) {
  .highlights {
    margin-bottom: 1.5rem !important;
  }
  
  .highlights .swiper-slide {
    flex-direction: column-reverse !important;
    padding: 1.5rem 1.25rem !important;
    gap: 1.25rem !important;
  }

  .highlights .swiper-slide-image {
    flex: 0 0 auto !important;
    max-width: 170px !important;
  }

  .highlights .swiper-slide-title {
    font-size: 1.2rem !important;
  }
}
/* =============================================================
   FIX: DROPDOWN MENU (mis. "ABOUT") TERTUTUP OLEH SECTION .highlights
   -------------------------------------------------------------
   Penyebab: elemen internal Swiper di dalam .highlights membawa
   position + z-index bawaan sehingga membentuk stacking context
   sendiri. Karena .pkp_structure_head sebelumnya tidak punya
   z-index eksplisit & tidak mengunci stacking context-nya, dropdown
   menu di header bisa tampil di BAWAH section .highlights walau
   z-index dropdown sudah tinggi (10000).
   Solusi: kunci (isolate) masing-masing stacking context, lalu
   pastikan z-index header jauh lebih tinggi dari highlights.
   ============================================================= */

.pkp_structure_head {
  position: relative !important;
  z-index: 500 !important;
  isolation: isolate !important;
}

.highlights {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
}