/* =====================================================================
   GOV THEME  —  Lapisan penyelaras tampilan JDIH (gaya web pemerintah)
   ---------------------------------------------------------------------
   File ini di-load PALING AKHIR (setelah $this->head() di main.php),
   sehingga aturan di sini menang atas registerCss inline tiap halaman
   untuk selector dengan specificity yang sama. Fokusnya HANYA polesan
   visual (tipografi, warna, spasi, bayangan, radius) — bukan mengubah
   mekanika layout (position/z-index/display) agar tidak merusak header
   & slider yang sudah ada.
   ===================================================================== */

:root {
  --gov-navy: #1e3c72;
  --gov-navy-2: #2a5298;
  --gov-navy-dark: #142a52;
  --gov-navy-ink: #0f2444;
  --gov-accent: #f26b38;      /* aksen oranye (dipertahankan agar konsisten) */
  --gov-gold: #e0a83e;        /* aksen emas untuk sentuhan resmi */
  --gov-ink: #1f2937;         /* warna teks utama */
  --gov-muted: #64748b;       /* teks sekunder */
  --gov-line: #e6eaf0;        /* garis/border halus */
  --gov-surface: #ffffff;
  --gov-bg: #f4f7fb;          /* latar section abu kebiruan */
  --gov-radius: 14px;
  --gov-shadow-sm: 0 4px 14px rgba(15, 36, 68, .06);
  --gov-shadow: 0 10px 30px rgba(15, 36, 68, .10);
  --gov-font: "Plus Jakarta Sans", "Poppins", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

/* ---------- Tipografi dasar ---------- */
body {
  font-family: var(--gov-font);
  color: var(--gov-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .1px;
}

h1, h2, h3, h4, h5, h6,
.slide-text h1, .welcome-title {
  font-family: var(--gov-font);
  letter-spacing: -.2px;
}

/* Judul di atas latar gelap harus putih.
   (plugins/default.css memaksa semua heading ke #232323 sehingga judul
   yang seharusnya putih malah gelap & nyaris tak terbaca di section navy.) */
.slide-text h1,
.welcome-title,
.welcome-subtitle,
.monografi-container h1 {
  color: #fff;
}
.monografi-container h1 { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }

a { text-decoration: none; }

/* Aksesibilitas: outline fokus yang jelas (standar layanan publik) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(30, 60, 114, .45);
  outline-offset: 2px;
}

::selection { background: rgba(30, 60, 114, .18); }

/* ---------- Scrollbar halus ---------- */
* { scrollbar-color: var(--gov-navy-2) #e9eef6; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e9eef6; }
::-webkit-scrollbar-thumb {
  background: var(--gov-navy-2);
  border-radius: 8px;
  border: 2px solid #e9eef6;
}

/* =====================================================================
   TOP INFO BAR — identitas resmi instansi
   ===================================================================== */
.top-info-bar {
  background: linear-gradient(135deg, var(--gov-navy) 0%, var(--gov-navy-2) 100%);
  border-bottom: 3px solid var(--gov-gold);
  box-shadow: 0 2px 10px rgba(15, 36, 68, .18);
}
.top-info-text { font-size: 13px; letter-spacing: .2px; }
.top-info-text .text-warning {
  color: var(--gov-gold) !important;
  font-weight: 700;
  margin-right: 4px;
}
.top-info-logo {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .12);
  padding: 4px;
  object-fit: contain;
}
.top-info-contact span,
.top-info-contact a { font-weight: 500; }
.btn-login {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}
.btn-login:hover { background: var(--gov-gold) !important; border-color: var(--gov-gold) !important; }

/* =====================================================================
   HEADER / NAV — navigasi utama
   ===================================================================== */
.header.main-header {
  border-bottom: 1px solid var(--gov-line);
  box-shadow: 0 4px 18px rgba(15, 36, 68, .07);
}
.nav-menu > li > a {
  font-weight: 600;
  color: #33415c;
  letter-spacing: .1px;
}
.nav-menu > li > a:hover,
.nav-menu > li > a.active {
  color: var(--gov-navy) !important;
  background: rgba(30, 60, 114, .07) !important;
}
.nav-menu > li > a:after { background: var(--gov-gold); height: 3px; border-radius: 3px; }

.dropdown-menu { border: 1px solid var(--gov-line); box-shadow: var(--gov-shadow); }
.dropdown-menu li a:hover,
.submenu-level-2 li a:hover { background: rgba(30, 60, 114, .08); color: var(--gov-navy); }

.header-search-form { border-radius: 999px !important; }

/* =====================================================================
   JUDUL SECTION — heading konsisten dengan garis aksen
   ===================================================================== */
section h4.fw-bold,
.statistics h4,
.latest-documents h4,
.news h4 {
  position: relative;
  color: var(--gov-navy-ink);
  font-weight: 800;
  letter-spacing: -.3px;
}
section h4.fw-bold span[style],
.latest-documents h4 span[style] { color: var(--gov-accent) !important; }

/* Tombol "Lihat semua ..." — jadikan navy resmi, bukan hitam */
.btn-dark {
  background: linear-gradient(135deg, var(--gov-navy), var(--gov-navy-2)) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  box-shadow: 0 6px 16px rgba(30, 60, 114, .22) !important;
}
.btn-dark:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* =====================================================================
   KARTU — statistik, dokumen, berita
   ===================================================================== */
.stat-card,
.doc-card,
.news-card {
  border: 1px solid var(--gov-line) !important;
  border-radius: var(--gov-radius) !important;
  box-shadow: var(--gov-shadow-sm) !important;
}
.stat-card:hover,
.doc-card:hover,
.news-card:hover {
  border-color: rgba(30, 60, 114, .25) !important;
  box-shadow: var(--gov-shadow) !important;
}
.stat-card h4 { color: var(--gov-navy-ink); font-weight: 800; }
.stat-card .text-muted { text-transform: capitalize; letter-spacing: .2px; }

/* Badge jenis dokumen — nuansa navy resmi */
.badge.bg-light.text-orange {
  background: rgba(30, 60, 114, .08) !important;
  color: var(--gov-navy) !important;
}
.text-orange { color: var(--gov-accent) !important; }

/* Kartu dokumen di halaman /dokumen */
.doc-badge { background: rgba(30, 60, 114, .08) !important; color: var(--gov-navy) !important; }
.doc-link-pill {
  border-color: var(--gov-navy) !important;
  color: var(--gov-navy) !important;
  background: rgba(30, 60, 114, .06) !important;
  border-radius: 999px !important;
}
.doc-link-pill:hover {
  background: var(--gov-navy) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(30, 60, 114, .3) !important;
}
.doc-title a:hover { color: var(--gov-navy) !important; }

/* =====================================================================
   FILTER / PENCARIAN — tombol cari produk hukum
   ===================================================================== */
.btn-filter {
  color: var(--gov-navy) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}
.filter-form-container,
.filter-form { border-radius: var(--gov-radius) !important; }

/* Banner hero halaman dalam (subpage) — gambar navy on-brand, judul di bawahnya */
.page-hero img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}
.page-hero .container { padding-top: 22px; padding-bottom: 22px; }
.page-hero .container h2 { color: var(--gov-navy-ink); font-weight: 800; }
.page-hero .active { color: var(--gov-accent) !important; font-weight: 600; }

/* =====================================================================
   FOOTER RESMI  (markup baru di footer.php)
   ===================================================================== */
.gov-footer {
  background: linear-gradient(180deg, #16305e 0%, #0f2444 100%);
  color: #cdd7e6;
  font-size: 14.5px;
  line-height: 1.7;
}
.gov-footer a { color: #cdd7e6; transition: color .2s ease, padding-left .2s ease; }
.gov-footer a:hover { color: #fff; }
.gov-footer .gov-footer-top {
  padding: 56px 0 34px;
  border-top: 4px solid var(--gov-gold);
}
.gov-footer h5 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 12px;
}
.gov-footer h5::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 3px;
  background: var(--gov-gold);
  border-radius: 3px;
}
.gov-footer .gov-footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.gov-footer .gov-footer-brand img {
  width: 58px; height: 58px; object-fit: contain;
  background: #fff; border-radius: 10px; padding: 6px; flex-shrink: 0;
}
.gov-footer .gov-footer-brand strong { color: #fff; font-size: 15px; display: block; }
.gov-footer ul { list-style: none; padding: 0; margin: 0; }
.gov-footer ul li { margin-bottom: 10px; }
.gov-footer .gov-footer-links li a { display: inline-flex; align-items: center; gap: 8px; }
.gov-footer .gov-footer-links li a::before {
  content: "\203A"; /* › */
  color: var(--gov-gold); font-weight: 700;
}
.gov-footer .gov-footer-links li a:hover { padding-left: 4px; }
.gov-footer .gov-contact-item { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
.gov-footer .gov-contact-item i { color: var(--gov-gold); width: 18px; margin-top: 4px; flex-shrink: 0; }
.gov-footer .gov-social { display: flex; gap: 10px; margin-top: 18px; }
.gov-footer .gov-social a {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px;
}
.gov-footer .gov-social a:hover { background: var(--gov-gold); transform: translateY(-2px); }
.gov-footer .gov-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 0;
  font-size: 13px;
}
.gov-footer .gov-footer-bottom .gov-copyright { color: #aab7cc; margin: 0; }
.gov-footer .gov-footer-bottom .gov-copyright strong { color: #fff; }

/* =====================================================================
   BACK TO TOP
   ===================================================================== */
.back-to-top,
.scroll-to-top {
  background: linear-gradient(135deg, var(--gov-navy), var(--gov-navy-2)) !important;
  box-shadow: 0 8px 20px rgba(15, 36, 68, .28) !important;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 767px) {
  .gov-footer .gov-footer-top { padding: 40px 0 24px; }
  .gov-footer .gov-footer-brand { justify-content: flex-start; }
  .top-info-text { font-size: 12px; }
}

/* =====================================================================
   ENHANCEMENTS "LEBIH KEREN" — animasi & micro-interaction (tetap resmi)
   Di-drive oleh gov-theme.js. Semua efek menghormati prefers-reduced-motion.
   ===================================================================== */
html { scroll-behavior: smooth; }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gov-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
                transform .7s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
  }
  .gov-reveal.gov-in { opacity: 1; transform: none; }
}

/* ---------- Kartu: aksen atas + lift + shadow berwarna ---------- */
.stat-card, .doc-card, .news-card {
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1),
              box-shadow .28s ease, border-color .28s ease;
}
.stat-card::before, .doc-card::before, .news-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gov-navy), var(--gov-gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
  z-index: 3;
}
.stat-card:hover, .doc-card:hover, .news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 42px rgba(30, 60, 114, .18) !important;
}
.stat-card:hover::before, .doc-card:hover::before, .news-card:hover::before {
  transform: scaleX(1);
}

/* ---------- Angka statistik: lebih besar & gradient ---------- */
.stat-card h4 {
  font-size: 2.1rem;
  color: var(--gov-navy-ink); /* fallback */
  background: linear-gradient(135deg, var(--gov-navy) 0%, var(--gov-navy-2) 60%, var(--gov-gold) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card i { transition: transform .3s ease; }
.stat-card:hover i { transform: scale(1.16) translateY(-2px); }

/* ---------- Tombol: shine sweep ---------- */
.btn-dark, .btn-filter {
  position: relative;
  overflow: hidden;
}
.btn-dark::after, .btn-filter::after {
  content: "";
  position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn-dark:hover::after, .btn-filter:hover::after { left: 150%; }

/* ---------- Hero slider: sheen halus ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-slider::after { animation: govHeroShift 12s ease-in-out infinite alternate; }
  @keyframes govHeroShift { from { opacity: .92; } to { opacity: .78; } }
}

/* ---------- Statistik kunjungan: glass + hover ---------- */
.visitor-stats .stat-box {
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.visitor-stats .stat-box:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
}
.visitor-stats h2 { text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }

/* ---------- Filter form: glow lebih dalam ---------- */
.filter-form-container { box-shadow: 0 22px 55px rgba(0, 0, 0, .3) !important; }

/* ---------- Badge dokumen: sedikit hidup ---------- */
.doc-badge { transition: transform .2s ease; }
.doc-card:hover .doc-badge { transform: translateY(-1px); }

/* =====================================================================
   PERBAIKAN TATA LETAK MOBILE / HP
   ===================================================================== */
@media (max-width: 575.98px) {
  /* 1) Header section (judul + tombol "Lihat semua") jangan bertumpuk —
        susun vertikal & jadikan tombol selebar penuh. */
  .d-flex.justify-content-between.align-items-center:has(> .btn-dark) {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }
  .d-flex.justify-content-between.align-items-center:has(> .btn-dark) > .btn-dark {
    width: 100%;
    justify-content: center;
  }

  /* 2) Hero: panah navigasi menimpa tombol → sembunyikan di layar kecil,
        dan tampilkan satu gambar saja agar tidak sesak. */
  .hero-slider .slide-controls { display: none; }
  .hero-slider .slide-image-right { display: none; }
  .hero-slider .slide-images { gap: 0; }
  .hero-slider .slide-buttons .btn { display: block; width: 100%; margin: 0 0 10px; }

  /* 3) Kartu statistik & kunjungan: 2 per baris agar ringkas (bukan 1 memanjang). */
  .statistics .row.g-3 > [class*="col-"],
  .visitor-stats .row.g-3 > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .statistics .stat-card,
  .visitor-stats .stat-box { padding: 1.25rem .75rem !important; }
  .stat-card h4 { font-size: 1.7rem; }

  /* 4) Rapikan judul section yang panjang agar tidak terpotong pasangan tombol. */
  section h4.fw-bold { font-size: 1.15rem; line-height: 1.3; }
}

/* Layar sangat kecil (≤360px): pastikan kartu tetap terbaca */
@media (max-width: 360px) {
  .statistics .row.g-3 > [class*="col-"],
  .visitor-stats .row.g-3 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}