/* ==========================================================================
   JURNAL PEMBANGUNAN KOTA TANGERANG (JPKT) - MATERIAL THEME OJS 3 COMPATIBLE
   Fix Homepage Image (1803x606 Cover) & Table Layer Current Issue
   ========================================================================== */

:root {
  --jpkt-primary-dark: #072957;
  --jpkt-primary-deep: #03142a;
  --jpkt-accent: #0098b7;
  --jpkt-accent-light: #38bdf8;
  --jpkt-text-dark: #1e293b;
  --jpkt-text-light: #cbd5e1;
  --jpkt-text-muted: #64748b;
  --jpkt-border: rgba(255, 255, 255, 0.12);
  --jpkt-card-bg: #ffffff;
  --jpkt-sky-light: #f8fafc;
  --jpkt-sky-border: #cbd5e1;
  --jpkt-shadow-sm: 0 2px 8px rgba(7, 41, 87, 0.06);
  --jpkt-shadow-md: 0 6px 20px rgba(7, 41, 87, 0.10);
}

/* Base Body & Layout Reset */
html {
  overflow-x: clip !important;
}

body {
  overflow-x: clip !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--jpkt-text-dark);
  background-color: #f8fafc;
}

.pkp_structure_page {
  flex: 1 0 auto;
  position: relative;
  overflow: visible !important;
}

/* Sembunyikan Logo Duplikat & Element Bawaan Yang Tidak Diperlukan */
img[src*="pageHeaderLogoImage_id_ID.png"],
.pkp_site_name .is_img,
.pkp_head_wrapper .pkp_site_name img,
.pkp_navigation_primary_row .pkp_site_name,
.hero-section .wave,
.wave,
.waves,
.wave-container {
  display: none !important;
}

/* ==========================================================================
   1. NAVIGASI UTAMA & MATERIAL THEME HEADER
   ========================================================================== */
.pkp_structure_head,
.pkp_head_wrapper {
  background-color: var(--jpkt-primary-dark) !important;
  width: 100% !important;
}

.pkp_navigation_primary_row,
header.pkp_structure_head .pkp_navigation_primary_row,
#navbar,
nav.pkp_navigation_primary_wrapper {
  background: var(--jpkt-primary-dark) !important;
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 3px solid var(--jpkt-accent) !important;
  box-shadow: var(--jpkt-shadow-md) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#navbar .navbar-nav,
#navbar #_navigationPrimary,
ul._pkp_navigation_primary,
.pkp_navigation_primary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 auto !important;
  max-width: 1320px !important;
  width: 100% !important;
  padding: 0 15px !important;
  list-style: none !important;
}

#navbar .navbar-nav .nav-link,
#navbar #_navigationPrimary .nav-item .nav-link,
.pkp_navigation_primary > li > a,
.pkp_nav_list > li > a {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  background-color: transparent !important;
  padding: 16px 20px !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

#navbar .navbar-nav .nav-link:hover,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.active > a {
  background-color: rgba(0, 152, 183, 0.25) !important;
  color: var(--jpkt-accent-light) !important;
  border-bottom: 3px solid var(--jpkt-accent) !important;
}

/* ==========================================================================
   2. HERO SECTION & HOMEPAGE IMAGE (Fix 1803x606 Cover - No Tile / No Repeat)
   ========================================================================== */
.hero-section,
.pkp_page_index .pkp_structure_main .hero-section,
.cmp_homepage_image {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1803 / 606 !important;
  min-height: 320px !important;
  max-height: 606px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background-color: var(--jpkt-primary-deep) !important;
}

/* Sembunyikan Tombol Direct Link / Submission Bawaan Material Theme di Banner */
.hero-section #hero .btn,
.hero-section .btn,
.hero-section a.btn,
.hero-section .btn-primary,
.hero-section a[href*="submission"],
.hero-section .send-article-btn,
.cmp_homepage_image .btn {
  display: none !important;
}

/* Kontainer Gambar Utama agar Full Fit Cover dan Terkunci Mutlak */
.pkp_page_index .homepage_image,
.homepage_image,
.homepage-image,
.pkp_structure_main .homepage_image,
.cmp_homepage_image .homepage_image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  background: none !important;
}

/* Overlay Gradasi Navy Transparan 35% */
.pkp_page_index .homepage_image::after,
.homepage_image::after,
.homepage-image::after,
.cmp_homepage_image::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    135deg,
    rgba(7, 41, 87, 0.40) 0%,
    rgba(3, 20, 42, 0.50) 100%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Memastikan Gambar Menjadi Single Cover Sempurna (Mencegah Efek Tile 4) */
.pkp_page_index .homepage_image img,
.homepage_image img,
.homepage-image img,
.pkp_structure_main .homepage_image img,
.cmp_homepage_image img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-image: none !important;
  z-index: 1 !important;
}

/* Wrapper Teks / Deskripsi Jurnal di dalam Hero Section */
.hero-section > .container,
.cmp_homepage_image .container,
.hero_content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  color: #ffffff !important;
}

.hero-section h2, 
.hero-section h1,
.cmp_homepage_image h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   3. ANNOUNCEMENT SECTION
   ========================================================================== */
.page_announcement,
.announcements_container,
.pkp_page_announcement,
.pkp_page_index .cmp_announcements,
.additional_content {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 35px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.pkp_page_index .cmp_announcements > .obj_announcement_summary,
.summary,
.announcement_summary,
.item.announcement {
  background: #ffffff !important;
  border: 1px solid var(--jpkt-sky-border) !important;
  border-left: 4px solid var(--jpkt-accent) !important;
  border-radius: 6px !important;
  padding: 24px 28px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--jpkt-shadow-sm) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   4. CURRENT ISSUE - FORMAT TABLE LAYER KHAS JPKT (Rapi & Bergaris Tegas)
   ========================================================================== */
.current_issue,
.pkp_page_index .current_issue_section {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 40px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.current_issue .heading,
.current_issue h2 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  background: var(--jpkt-primary-dark) !important;
  color: #ffffff !important;
  padding: 16px 22px !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 3px solid var(--jpkt-accent) !important;
  margin-bottom: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Kontainer Utama Tabel / Toggable Content Terbitan */
.obj_issue_toc {
  background: #ffffff !important;
  border: 1px solid var(--jpkt-sky-border) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: var(--jpkt-shadow-md) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* Sub-Heading / Kategori Bagian Artikel dalam Terbitan */
.obj_issue_toc .section h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--jpkt-primary-dark) !important;
  background: var(--jpkt-sky-light) !important;
  padding: 12px 18px !important;
  border-left: 5px solid var(--jpkt-accent) !important;
  border-top: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  margin: 25px 0 15px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* Format Kartu/Baris Artikel Menyerupai Layer Tabel Profesional */
.obj_article_summary {
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 22px !important;
  margin-bottom: 12px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important; /* Garis tepi tegas gaya tabel */
  border-left: 4px solid var(--jpkt-primary-dark) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease-in-out !important;
}

.obj_article_summary:hover {
  border-color: var(--jpkt-accent) !important;
  border-left-color: var(--jpkt-accent) !important;
  background: var(--jpkt-sky-light) !important;
  box-shadow: var(--jpkt-shadow-sm) !important;
  transform: translateX(3px) !important;
}

.obj_article_summary .title a {
  color: var(--jpkt-primary-dark) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
}

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

.obj_article_summary .authors {
  font-size: 0.88rem !important;
  color: var(--jpkt-text-muted) !important;
  margin-top: 6px !important;
  font-style: italic !important;
}

.obj_article_summary .galleys_links {
  margin-top: 12px !important;
}

.obj_article_summary .galleys_links a.galley_link {
  display: inline-block !important;
  background-color: var(--jpkt-primary-dark) !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color 0.2s ease !important;
}

.obj_article_summary .galleys_links a.galley_link:hover {
  background-color: var(--jpkt-accent) !important;
}

/* ==========================================================================
   5. FOOTER FULL WIDTH CONTAINER (100% Full-Bleed Layout)
   ========================================================================== */
footer#pkp_content_footer.pkp_structure_footer_wrapper,
footer.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 60px !important;
  padding: 50px 0 25px 0 !important;
  background: linear-gradient(180deg, var(--jpkt-primary-dark) 0%, var(--jpkt-primary-deep) 100%) !important;
  border-top: 4px solid var(--jpkt-accent) !important;
  color: var(--jpkt-text-light) !important;
  box-sizing: border-box !important;
}

.pkp_structure_footer .container,
.pkp_footer_content {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   KOREKSI TOTAL: MENGHILANGKAN EFEK TILE / BACKGROUND BERULANG 
   ========================================================================== */

.hero-section,
.cmp_homepage_image,
.pkp_page_index .homepage_image,
.homepage_image,
.homepage-image,
.pkp_structure_main .homepage_image {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Memastikan elemen gambar tunggal terkunci dalam mode full cover proporsional */
.pkp_page_index .homepage_image img,
.homepage_image img,
.homepage-image img,
.cmp_homepage_image img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  background-repeat: no-repeat !important;
}

/* ==========================================================================
   ATURAN JUDUL HALAMAN LAIN (EDITORIAL TEAM, ABOUT, DLL) - MIDDLE BOTTOM
   ========================================================================== */

/* Targetkan kontainer judul atau h1 AOS pada halaman selain beranda */
.pkp_page_content h1,
.pkp_structure_main h1[data-aos],
.page_title h1,
.header_view h1,
.obj_breadcrumb + h1,
#content h1 {
  position: absolute !important;
  left: 50% !important;
  bottom: 25px !important; /* Posisi di dekat bagian bawah banner */
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 1320px !important;
  text-align: center !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  z-index: 3 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Pastikan struktur pembungkus halaman (header view) mendukung posisi absolute */
.pkp_structure_main,
.pkp_page_content,
.page_about,
.page_editorial_team,
.page_archives {
  position: relative !important;
}

/* Penyesuaian area kepala halaman dalaman agar memiliki ruang untuk judul bottom */
.pkp_page_content > .row:first-child,
.pkp_structure_main > .page_head,
.header_view {
  position: relative !important;
  min-height: 220px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 30px !important;
  box-sizing: border-box !important;
}