/* ==========================================================================
   FULL CUSTOM CSS UNTUK INDONESIAN STUDIES (OJS 3.4 - MANUSCRIPT THEME)
   Fitur: Boxed Paper Shadow, Full Width Header/Footer, & Two-Column Grid
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESET & BODY BACKGROUND
   -------------------------------------------------------------------------- */
html, body {
  background-color: #e5e5e5 !important; /* Warna luar kertas */
  margin: 0 !important;
  padding: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #333333;
}

/* --------------------------------------------------------------------------
   2. KONTAINER UTAMA / BOXED LAYOUT (OJS 3.4)
   -------------------------------------------------------------------------- */
.pkp_structure_page,
#app {
  max-width: 1140px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.16) !important;
  border: none !important;
  position: relative;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   3. HEADER - FULL WIDTH (KHUSUS OJS 3.4)
   -------------------------------------------------------------------------- */
.pkp_structure_head,
header.pkp_structure_head {
  display: block !important;
  background-color: transparent !important;
  border-bottom: 1px solid #ddd;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.pkp_site_name,
.pkp_head_wrapper {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

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

/* Gambar Header Proporsional */
.pkp_site_name img,
.pkp_site_name .is_img img,
header.pkp_structure_head img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_site_name_wrapper {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Fallback Teks Judul jika Tanpa Gambar Banner */
.pkp_site_name .is_text {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: 25px 30px !important;
  display: block !important;
  background: linear-gradient(135deg, #7c5d05 0%, #4a3602 100%) !important;
}

/* --------------------------------------------------------------------------
   4. NAVIGASI BAR & DROPDOWN (OJS 3.4 FIX)
   -------------------------------------------------------------------------- */
.pkp_navigation_primary_wrapper,
.pkp_nav_primary {
  background-color: #ffffff !important;
  border-top: 1px solid #e7e5e4 !important;
  border-bottom: 1px solid #e7e5e4 !important;
  padding: 0 25px !important;
  position: relative !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
}

.pkp_navigation_primary > li > a,
.pkp_nav_primary > li > a {
  color: #44403c !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 18px !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_nav_primary > li > a:hover {
  color: #7c5d05 !important;
  background: transparent !important;
}

.pkp_navigation_primary ul,
.pkp_nav_primary ul {
  background-color: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_nav_primary ul a:hover {
  background-color: #fefce8 !important;
  color: #7c5d05 !important;
}

/* --------------------------------------------------------------------------
   5. LAYOUT 2 KOLOM KONTEN & SIDEBAR (OJS 3.4 STRUCTURE FIX)
   -------------------------------------------------------------------------- */
.pkp_structure_content,
.pkp_page_content {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 30px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Kolom Utama / Kiri */
.pkp_structure_main,
.pkp_main {
  width: 70% !important;
  max-width: 70% !important;
  box-sizing: border-box !important;
  padding-right: 20px !important;
  float: left !important;
}

/* Kolom Sidebar / Kanan */
.pkp_structure_sidebar,
.pkp_sidebar {
  width: 28% !important;
  max-width: 28% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  float: right !important;
}

.pkp_structure_content::after,
.pkp_page_content::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* --------------------------------------------------------------------------
   6. SIDEBAR "MAIN MENU" STYLING (OJS 3.4 CUSTOM BLOCK)
   -------------------------------------------------------------------------- */
.pkp_structure_sidebar .pkp_block,
.pkp_sidebar .pkp_block,
.pkp_block.block_custom {
  background-color: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin-bottom: 25px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
  width: 100% !important;
}

.pkp_structure_sidebar .pkp_block .title,
.pkp_sidebar .pkp_block .title,
.pkp_block.block_custom .title,
.pkp_block.block_custom h2 {
  background: linear-gradient(135deg, #7c5d05 0%, #4a3602 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border: none !important;
}

.pkp_structure_sidebar .pkp_block ul,
.pkp_sidebar .pkp_block ul,
.pkp_block.block_custom ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_structure_sidebar .pkp_block ul li,
.pkp_sidebar .pkp_block ul li,
.pkp_block.block_custom ul li {
  border-bottom: 1px solid #f5f5f4 !important;
}

.pkp_structure_sidebar .pkp_block ul li:last-child,
.pkp_sidebar .pkp_block ul li:last-child,
.pkp_block.block_custom ul li:last-child {
  border-bottom: none !important;
}

.pkp_structure_sidebar .pkp_block ul li a,
.pkp_sidebar .pkp_block ul li a,
.pkp_block.block_custom ul li a {
  display: block !important;
  padding: 10px 16px !important;
  color: #44403c !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.pkp_structure_sidebar .pkp_block ul li a:hover,
.pkp_sidebar .pkp_block ul li a:hover,
.pkp_block.block_custom ul li a:hover {
  background-color: #fefce8 !important;
  color: #7c5d05 !important;
  padding-left: 20px !important;
}

/* --------------------------------------------------------------------------
   7. FOOTER FULL WIDTH (OJS 3.4 MATCHING)
   -------------------------------------------------------------------------- */
.pkp_structure_footer,
footer.pkp_structure_footer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 30px 0 !important;
  background-color: #0f172a !important;
  color: #94a3b8 !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.pkp_structure_footer .pkp_footer_content,
.pkp_footer_content,
.pkp_brand_footer {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  float: none !important;
  padding: 10px 20px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.pkp_structure_footer a {
  color: #fde047 !important;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE UTK LAYAR HP / MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .pkp_structure_page,
  #app {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }

  .pkp_structure_main,
  .pkp_main {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    float: none !important;
  }

  .pkp_structure_sidebar,
  .pkp_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 25px !important;
    float: none !important;
  }
}