:root {
  --custom-hero-image: url("https://icdm.unand.ac.id/public/site/images/icdmm/icdm24a.jpg");
  --blue-dark: #0f1b3d;
  --orange-accent: #f26b00;
  --text-light: #ffffff;
}

/* ============================================== */
/* 1. KOREKSI BACKGROUND HERO SECTION (FINAL) */
/* ============================================== */

/* 1A. Target Halaman NON-INDEX (Solid Color) */
.hero-section.inner-page {
  background-image: none !important;
  background-color: var(--blue-dark) !important;
  background: var(--blue-dark) !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;

  color: var(--text-light) !important;
  min-height: 200px !important;
}

/* 1B. KOREKSI HOME PAGE (INDEX) - IMAGE & OVERLAY */
.pkp_page_index #hero {
  /* Menargetkan ID hero secara langsung */
  /* Gradasi Biru/Cyan semi-transparan sebagai overlay */
  background-image: linear-gradient(
      to bottom right,
      rgba(0, 150, 150, 0.4),
      rgba(0, 50, 100, 0.7)
    ),
    /* Gambar Anda */ var(--custom-hero-image) !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 500px !important;
  width: 100% !important;
}

/* ---------------------------------------------------- */
/* PENARGETAN FLEX UNTUK ROW (Memastikan konten ke bawah & tengah) */
/* ---------------------------------------------------- */

/* Menargetkan Div yang mungkin mengandung Row jika #hero adalah container Flex */
.pkp_page_index #hero > div.row {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important; /* MEMAKSA SEMUA KONTEN KE BAWAH */
  align-items: center !important; /* MEMUSATKAN HORIZONTAL */
  height: 100%; /* Memastikan row mengisi tinggi hero */
  color: var(--text-light) !important;
}

/* Menimpa col-lg-8 untuk menempati lebar penuh dan memusatkan teks */
.pkp_page_index .col-lg-8 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px 40px 20px !important; /* Tambahkan padding bawah */
  text-align: center !important;
  color: var(--text-light) !important;
}

/* Memastikan teks rata tengah dan menimpa text-lg-start */
.pkp_page_index .text-lg-start {
  text-align: center !important;
}

/* Hapus elemen lengkungan SVG (.wave) di semua halaman */
.wave {
  display: none !important;
}

/* ============================================== */
/* 2. KOREKSI BREADCRUMB (Jalur Navigasi) */
/* ============================================== */
.cmp_breadcrumbs {
  display: none !important;
}
.pkp_structure_page_header .cmp_breadcrumbs {
  display: none !important;
}

/* ============================================== */
/* 3. KUSTOMISASI NAVIGASI HEADER */
/* ============================================== */

/* Background navbar di SEMUA halaman (Solid) */
#header {
  background-color: var(--blue-dark) !important;
}

/* Khusus di Halaman Index, buat header semi-transparan (di atas gambar hero) */
.pkp_page_index #header {
  background-color: var(--blue-dark) !important;
}

/* ============================================== */
/* MEDIA QUERY: TARGET MOBILE KHUSUS (MAX-WIDTH: 767px) */
/* ============================================== */
@media (max-width: 767px) {
  /* 1. Mengurangi Ukuran Font Judul Inline (42px) */
  div[style*="font-size: 42px"] {
    font-size: 28px !important;
    letter-spacing: 0.05em !important;
  }

  /* 2. Memastikan Padding Konten Teks Aman */
  div[style*="max-width: 960px"] {
    padding: 20px 15px !important;
  }

  /* 3. Penyesuaian Ukuran Hero Text di Mobile */
  .pkp_site_name {
    font-size: 2rem !important;
  }
  .pkp_page_index .col-lg-8 > div > div > strong {
    font-size: 0.9rem !important;
  }
  .pkp_page_index .col-lg-8 > div > div:last-child {
    font-size: 0.8rem !important;
  }
}

/* ============================================== */
/* DESKTOP: Media Query (Untuk layar >= 1024px) */
/* ============================================== */
@media (min-width: 1024px) {
  .pkp_page_index #hero {
    min-height: 600px !important;
    padding-bottom: 80px !important;
  }
  .pkp_site_name {
    font-size: 5rem;
  }
  .pkp_page_index .col-lg-8 > div > div > strong {
    font-size: 1.8rem;
  }
  .pkp_page_index .col-lg-8 > div > div:last-child {
    font-size: 1.2rem;
  }
}

/* Menargetkan kontainer konten utama yang paling umum di OJS/Bootstrap */
.pkp_structure_main,
.pkp_structure_content {
  max-width: 1200px !important; /* Paksa container melebar agar kartu 270px muat */
  width: 100% !important;
}

/* Menghilangkan kredit/footer kecil (biasanya di bagian paling bawah) */
.credits {
  display: none !important;
}