/**
 * ==============================================================================
 * MARCHA - ADVANCING RESEARCH FOR MEANINGFUL COMMUNITIES
 * Stylesheet khusus untuk mereplikasi desain referensi
 * ==============================================================================
 */

/* 1. VARIABEL WARNA & DASAR */
:root {
  --marcha-dark: #071933;
  --marcha-navy: #0B2545;
  --marcha-blue-bar: #0B3C78;
  --marcha-gold: #F3A812;
  --marcha-gold-hover: #D98E00;
  --marcha-bg: #F4F7FB;
  --marcha-surface: #FFFFFF;
  --marcha-text: #1E293B;
  --marcha-muted: #64748B;
  --marcha-border: #E2E8F0;
}

body.pkp_page_index,
body.pkp_page_journal,
body.pkp_page_issue,
body.pkp_page_article {
  background-color: var(--marcha-bg) !important;
  color: var(--marcha-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  margin: 0;
  padding: 0;
}

/* 2. HEADER ATAS (NAVY DENGAN AKSEN) */
.pkp_structure_head {
  background: linear-gradient(90deg, #07172E 0%, #0C2B54 50%, #081B38 100%) !important;
  border-bottom: 3px solid var(--marcha-gold) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
}

.pkp_head_wrapper {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 12px 20px !important;
}

/* Navigasi Utama */
.pkp_navigation_primary_row {
  background: rgba(4, 15, 33, 0.6) !important;
  border-radius: 6px !important;
  padding: 2px 10px !important;
}

.pkp_navigation_primary > li > a {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 8px 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.current > a {
  color: var(--marcha-gold) !important;
}

/* 3. TATA LETAK UTAMA (68% Konten Utama : 32% Sidebar) */
.pkp_structure_content {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 24px 20px 60px 20px !important;
  display: flex !important;
  gap: 30px !important;
}

.pkp_structure_main {
  flex: 1 1 68% !important;
  width: 68% !important;
  min-width: 0 !important;
}

.pkp_structure_sidebar {
  flex: 0 0 32% !important;
  width: 32% !important;
  max-width: 360px !important;
}

/* 4. CURRENT ISSUE & DUA KOLOM BAWAH */
.current_issue_section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  margin-top: 24px;
}

.issue-box, .articles-box {
  background: var(--marcha-surface);
  border: 1px solid var(--marcha-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.box-header-navy {
  background: var(--marcha-navy);
  color: #FFFFFF;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

/* Tombol Oranye / Emas */
.btn-gold-action {
  display: inline-block;
  background: linear-gradient(135deg, #F3A812 0%, #E08E00 100%);
  color: #071933 !important;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(243, 168, 18, 0.3);
  transition: all 0.2s ease;
}

.btn-gold-action:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Tombol Transparan / Outline */
.btn-outline-white {
  display: inline-block;
  background: transparent;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,0.8);
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.btn-outline-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: #FFFFFF;
}

/* 5. RESPONSIVE MOBILE */
@media (max-width: 992px) {
  .pkp_structure_content {
    flex-direction: column !important;
  }
  .pkp_structure_main, .pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
  .current_issue_section {
    grid-template-columns: 1fr;
  }
}