/* ============================================================================
   BERANDA DesaPreneur — struktur mengikuti advi.dev (design system "corporate
   numbered sections"), warna tetap hijau koperasi. Semua kelas berawalan `dp-`
   supaya tidak bertabrakan dengan hub.css yang dipakai halaman dalam.

   Kenapa tanpa Google Fonts: desa bersinyal lemah. Tumpukan font sistem
   menghasilkan tampilan hampir sama tanpa satu permintaan jaringan tambahan.
   ========================================================================== */
.dp-situs {
  --dp-hijau: #175433;      /* utama (--hijau-800 hub) */
  --dp-hijau-tua: #12402a;
  --dp-hijau-muda: #ecf9f0;
  --dp-emas: #f2b01e;
  /* Kontras diukur terhadap putih: tinta 16.6:1, pudar 8.7:1 (sebelumnya
     5.65:1 — Bos menilai teks sekunder terlalu pudar di atas latar hijau). */
  --dp-tinta: #14211a;
  --dp-pudar: #3f4f46;
  --dp-pudar-lembut: #55665c;
  --dp-garis: #e2eae4;
  --dp-radius: .75rem;
  --dp-bayang: 0 14px 34px rgba(22, 35, 28, .09);
  --dp-bayang-kecil: 0 1px 3px rgba(22, 35, 28, .07);
  --dp-max: 64rem;
  --dp-bar-h: 76px;
  --dp-kepala: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --dp-tubuh: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: #fff; color: var(--dp-tinta);
  font: 16px/1.6 var(--dp-tubuh);
  -webkit-font-smoothing: antialiased;
}
.dp-situs *, .dp-situs *::before, .dp-situs *::after { box-sizing: border-box; }
.dp-situs img { max-width: 100%; height: auto; display: block; }
/* hub.css punya aturan global `h2 { font-size:.75rem; text-transform:uppercase }`
   untuk label seksi halaman dalam. Tanpa penimpaan di sini, SEMUA judul beranda
   ikut jadi huruf besar kecil — terukur: judul seksi tampil uppercase 12px. */
.dp-situs h1, .dp-situs h2, .dp-situs h3 {
  font-family: var(--dp-kepala); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.18; margin: 0; color: var(--dp-tinta);
  text-transform: none;
}
.dp-situs h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3rem); }
.dp-situs h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.dp-situs h3 { font-size: 1rem; }

/* Kaki halaman berlatar hijau tua: judul & teksnya WAJIB terang. Tanpa ini
   `.dp-situs h3` menang atas `.pub-kaki h3` (spesifisitas sama, dimuat
   belakangan) sehingga judul kaki tampil gelap di atas hijau — 1.47:1. */
.dp-situs .pub-kaki h3, .dp-situs .pub-kaki h4 { color: #fff; }
.dp-situs .pub-kaki p, .dp-situs .pub-kaki li, .dp-situs .pub-kaki a { color: #cfe0d5; }
.dp-situs .pub-kaki .pub-kaki-hub, .dp-situs .pub-kaki-bawah,
.dp-situs .pub-kaki-bawah p, .dp-situs .pub-kaki .pub-slogan { color: #b6cdbf; }
.dp-situs p { margin: 0; }
/* `.dp-situs a` (0,1,1) MENANG atas `.dp-btn-utama` (0,1,0), jadi teks tombol
   ikut jadi gelap di atas hijau — kontras terukur 1.82:1. Tombol dinaikkan
   spesifisitasnya di bawah, bukan `a` yang dilemahkan. */
.dp-situs a { color: inherit; text-decoration: none; }
.dp-situs .dp-btn { color: var(--dp-tinta); }
.dp-situs .dp-btn-utama { color: #fff; }
.dp-situs .dp-btn-terang { color: var(--dp-hijau-tua); }
.dp-situs .dp-btn-garis { color: var(--dp-tinta); }

/* ------------------------------------------------------------------- BAR -- */
.dp-bar {
  position: sticky; top: 0; z-index: 30; height: var(--dp-bar-h);
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--dp-garis);
}
.dp-bar-in {
  max-width: var(--dp-max); height: 100%; margin-inline: auto;
  padding: 0 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.dp-merek { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.dp-merek b { font-family: var(--dp-kepala); font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
/* Tagline TIDAK disembunyikan di ponsel: informasi tidak boleh hilang, hanya
   dikecilkan. (.dp-merek small tetap tampil di semua lebar.) */
.dp-merek small {
  display: block; font-size: .6rem; color: var(--dp-pudar); font-weight: 600;
  letter-spacing: .01em; line-height: 1.15;
}
.dp-nav { display: none; margin-left: auto; gap: 1.35rem; font-size: .88rem; font-weight: 600; color: var(--dp-pudar); }
.dp-nav a:hover { color: var(--dp-hijau); }
.dp-bar-masuk { margin-left: auto; }
.dp-menu { position: relative; }
.dp-menu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--dp-garis);
  font-size: 1.05rem; color: var(--dp-hijau);
}
.dp-menu summary::-webkit-details-marker { display: none; }
.dp-menu nav {
  position: absolute; right: 0; top: 48px; min-width: 200px; background: #fff;
  border: 1px solid var(--dp-garis); border-radius: var(--dp-radius);
  box-shadow: var(--dp-bayang); padding: .45rem; display: grid; gap: .1rem;
}
.dp-menu nav a { padding: .55rem .7rem; border-radius: 8px; font-size: .9rem; font-weight: 600; }
.dp-menu nav a:hover { background: var(--dp-hijau-muda); color: var(--dp-hijau); }
/* Di ponsel tombol "Masuk" di bar DIHAPUS: tujuan yang sama sudah ada di
   dalam menu (☰) sebagai "Masuk ke akun". Dua tombol untuk satu tujuan
   membuat bar sesak dan pengguna ragu mana yang harus ditekan.
   Tautan di menu ditebalkan + hijau supaya jelas itu aksi utamanya. */
@media (max-width: 899px) {
  /* Dua kelas, bukan satu: `.dp-btn` (0,1,0) mendefinisikan display:inline-flex
     dan dimuat BELAKANGAN, jadi `.dp-bar-masuk` sendiri kalah. */
  .dp-situs .dp-bar-masuk { display: none; }
  .dp-menu { margin-left: auto; }
  .dp-menu nav a { font-size: .95rem; }
  .dp-menu nav a:last-child {
    color: var(--dp-hijau); font-weight: 800;
    background: var(--dp-hijau-muda); margin-top: .2rem;
  }
}

@media (min-width: 900px) {
  .dp-nav { display: flex; }
  .dp-menu { display: none; }
  .dp-bar-masuk { margin-left: 1rem; }
  .dp-merek small { font-size: .68rem; }
}

/* ------------------------------------------------------------------ HERO -- */
.dp-hero {
  position: relative; overflow: hidden; margin-top: calc(-1 * var(--dp-bar-h));
  background: linear-gradient(180deg, #f1f8f3 0%, #ffffff 88%);
  border-bottom: 1px solid var(--dp-garis);
}
.dp-hero::before {
  content: ''; position: absolute; inset: auto -10% 30% auto;
  width: 42rem; height: 42rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 84, 51, .10), transparent 62%);
  pointer-events: none;
}
.dp-hero-in {
  position: relative; max-width: var(--dp-max); margin-inline: auto;
  padding: calc(3.4rem + var(--dp-bar-h)) 1.5rem 3.4rem;
  display: grid; gap: 2.5rem; align-items: center;
}
@media (min-width: 900px) {
  .dp-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding-block: calc(4rem + var(--dp-bar-h)) 4rem; }
}
.dp-hero-isi { min-width: 0; }
.dp-lencana {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--dp-garis); box-shadow: var(--dp-bayang-kecil);
  padding: .38rem .85rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  color: var(--dp-pudar);
}
.dp-lencana i { width: 7px; height: 7px; border-radius: 99px; background: #2e7d46; }
.dp-hero h1 {
  margin-top: 1.3rem; font-size: clamp(2rem, 1.3rem + 3.4vw, 3rem);
  letter-spacing: -.035em;
}
.dp-hero h1 mark { background: none; color: var(--dp-hijau); }
.dp-sub { margin-top: 1.1rem; max-width: 36rem; color: var(--dp-pudar); font-size: 1.03rem; }
.dp-sub b { color: var(--dp-hijau); font-weight: 700; }
.dp-hero-aksi { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.9rem; }

.dp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 44px; padding: 0 1.15rem; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--dp-kepala); font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.dp-btn:active { transform: translateY(1px); }
.dp-btn-utama { background: var(--dp-hijau); color: #fff; box-shadow: 0 6px 16px rgba(23, 84, 51, .22); }
.dp-btn-utama:hover { background: var(--dp-hijau-tua); }
.dp-btn-garis { background: #fff; color: var(--dp-tinta); border-color: var(--dp-garis); }
.dp-btn-garis:hover { background: var(--dp-hijau-muda); border-color: #cfe3d6; }
.dp-btn-terang { background: #fff; color: var(--dp-hijau-tua); }
.dp-btn-besar { height: 50px; padding: 0 1.4rem; font-size: .94rem; }

.dp-angka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 2.6rem; }
@media (min-width: 620px) { .dp-angka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dp-angka > div {
  background: #fff; border: 1px solid var(--dp-garis); border-radius: var(--dp-radius);
  padding: .8rem .7rem; text-align: center; box-shadow: var(--dp-bayang-kecil);
}
.dp-angka b { display: block; font-family: var(--dp-kepala); font-size: 1.15rem; color: var(--dp-hijau); }
.dp-angka span { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 600; color: var(--dp-pudar); line-height: 1.3; }

/* Tiruan antarmuka: memberi gambaran nyata, bukan ilustrasi abstrak. */
.dp-hero-visual { position: relative; min-width: 0; }
.dp-mock {
  background: #fff; border: 1px solid var(--dp-garis); border-radius: var(--dp-radius);
  box-shadow: var(--dp-bayang); overflow: hidden;
}
.dp-mock-bar { display: flex; gap: .35rem; padding: .6rem .75rem; border-bottom: 1px solid var(--dp-garis); background: var(--dp-hijau-muda); }
.dp-mock-bar span { width: 9px; height: 9px; border-radius: 99px; background: #c7dccf; }
.dp-mock-isi { padding: 1rem 1.05rem 1.15rem; display: grid; gap: .55rem; }
.dp-mock-judul { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-pudar); }
.dp-mock-baris { display: flex; justify-content: space-between; font-size: .86rem; padding: .35rem 0; border-bottom: 1px dashed var(--dp-garis); }
.dp-mock-baris b { font-variant-numeric: tabular-nums; }
.dp-mock-total { display: flex; justify-content: space-between; font-family: var(--dp-kepala); font-weight: 800; padding-top: .45rem; color: var(--dp-hijau); }
.dp-mock-tombol { margin-top: .45rem; text-align: center; background: var(--dp-hijau); color: #fff; border-radius: 9px; padding: .6rem; font-size: .84rem; font-weight: 700; }

/* ---------------------------------------------------------------- SEKSI -- */
.dp-seksi { padding: 0; }
.dp-seksi-lembut { background: #f7faf8; }
.dp-seksi-in { max-width: var(--dp-max); margin-inline: auto; padding: 3.4rem 1.5rem; }
.dp-seksi + .dp-seksi .dp-seksi-in { border-top: 1px solid var(--dp-garis); }
.dp-seksi-lembut + .dp-seksi .dp-seksi-in,
.dp-seksi + .dp-seksi-lembut .dp-seksi-in { border-top: 0; }

.dp-kepala { display: flex; align-items: flex-start; gap: 1rem; max-width: 52rem; }
.dp-kepala-pisah { margin-top: 3.2rem; padding-top: 2.6rem; border-top: 1px solid var(--dp-garis); }
.dp-nomor {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 auto;
  border-radius: 999px; background: var(--dp-hijau); color: #fff;
  font-family: var(--dp-kepala); font-size: 1.2rem; font-weight: 800;
  box-shadow: 0 6px 16px rgba(23, 84, 51, .25);
}
.dp-pil {
  display: inline-block; margin-bottom: .8rem; border-radius: 999px; background: #eef1f3;
  padding: .3rem .8rem; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dp-pudar);
}
.dp-pil-unggul { background: var(--dp-hijau-muda); color: var(--dp-hijau); }
.dp-kepala h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.dp-lead { margin-top: .55rem; color: var(--dp-pudar); font-size: 1rem; max-width: 46rem; }

.dp-dua { margin-top: 2rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .dp-dua { grid-template-columns: 1fr 1fr; } }

.dp-cek { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.dp-cek li { display: flex; align-items: flex-start; gap: .65rem; font-size: .92rem; }
.dp-tanda {
  display: grid; place-items: center; width: 1.3rem; height: 1.3rem; flex: 0 0 auto;
  margin-top: 1px; border-radius: 999px; background: var(--dp-hijau); color: #fff;
  font-size: .72rem; font-weight: 700;
}
.dp-cek strong { display: block; font-weight: 700; }
.dp-d { display: block; margin-top: .12rem; color: #55665c; font-size: .84rem; line-height: 1.5; }

.dp-visual {
  border: 1px solid var(--dp-garis); border-radius: var(--dp-radius);
  background: linear-gradient(150deg, #f6fbf7, #ffffff 62%);
  padding: 1.1rem; box-shadow: var(--dp-bayang); display: grid; gap: .55rem;
}
.dp-stat { background: #fff; border: 1px solid var(--dp-garis); border-radius: .6rem; padding: .7rem .85rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.dp-stat b { font-family: var(--dp-kepala); font-size: 1.05rem; color: var(--dp-hijau); }
.dp-stat span { font-size: .78rem; color: var(--dp-pudar); text-align: right; }

.dp-alur { display: grid; gap: .5rem; }
.dp-alur > div { background: #fff; border: 1px solid var(--dp-garis); border-radius: .6rem; padding: .65rem .8rem; }
.dp-alur b { display: block; font-family: var(--dp-kepala); font-size: .88rem; color: var(--dp-hijau); }
.dp-alur span { font-size: .8rem; color: var(--dp-pudar); }
.dp-alur i { display: block; text-align: center; color: #c3d6c9; font-style: normal; font-size: .95rem; }
.dp-catatan { font-size: .8rem; color: var(--dp-pudar); line-height: 1.5; }
.dp-catatan a { color: var(--dp-hijau); text-decoration: underline; text-underline-offset: 2px; }
.dp-catatan-tengah { margin-top: 2rem; text-align: center; }

.dp-kartu-absen { background: #fff; border: 1px solid var(--dp-garis); border-radius: .7rem; overflow: hidden; }
.dp-kartu-absen-kepala { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .85rem; background: var(--dp-hijau-muda); font-size: .82rem; font-weight: 700; }
.dp-lencana-kecil { font-size: .68rem; font-weight: 700; color: #2e7d46; background: #fff; border-radius: 999px; padding: .18rem .55rem; border: 1px solid #cfe3d6; }
.dp-kartu-absen-baris { display: flex; justify-content: space-between; padding: .55rem .85rem; border-bottom: 1px dashed var(--dp-garis); font-size: .88rem; }
.dp-kartu-absen-baris b { font-variant-numeric: tabular-nums; }
.dp-kartu-absen-kaki { padding: .55rem .85rem; font-size: .78rem; color: var(--dp-pudar); }

.dp-laporan { background: #fff; border: 1px solid var(--dp-garis); border-radius: .7rem; overflow: hidden; }
.dp-laporan-baris { display: flex; justify-content: space-between; gap: .6rem; padding: .6rem .85rem; border-bottom: 1px dashed var(--dp-garis); font-size: .86rem; }
.dp-laporan-baris b { color: var(--dp-hijau); font-weight: 700; font-size: .8rem; }
.dp-laporan-kaki { padding: .6rem .85rem; font-size: .76rem; color: var(--dp-pudar); background: #f7faf8; }

.dp-peta-akun { background: #fff; border: 1px solid var(--dp-garis); border-radius: .7rem; padding: .9rem; display: grid; gap: .6rem; }
.dp-peta-baris b { display: block; font-family: var(--dp-kepala); color: var(--dp-hijau); font-size: .95rem; }
.dp-peta-baris span { font-size: .78rem; color: var(--dp-pudar); }
.dp-peta-cabang { display: flex; flex-wrap: wrap; gap: .35rem; }
.dp-peta-cabang span { background: var(--dp-hijau-muda); color: var(--dp-hijau); border-radius: 999px; padding: .22rem .6rem; font-size: .74rem; font-weight: 700; }

/* ----------------------------------------------------------------- GRID -- */
.dp-grid-empat, .dp-grid-tiga, .dp-grid-dua { display: grid; gap: .8rem; margin-top: 1.8rem; }
.dp-grid-dua { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .dp-grid-empat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-grid-tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-grid-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .dp-grid-empat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dp-kartu {
  background: #fff; border: 1px solid var(--dp-garis); border-radius: var(--dp-radius);
  padding: 1.05rem 1.1rem 1.15rem; box-shadow: var(--dp-bayang-kecil);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dp-kartu:hover { border-color: #cfe3d6; box-shadow: var(--dp-bayang); transform: translateY(-2px); }
.dp-kartu h3 { font-size: 1rem; margin-bottom: .4rem; color: var(--dp-hijau); }
.dp-kartu p { font-size: .88rem; color: var(--dp-pudar); line-height: 1.55; }

.dp-langkah {
  position: relative; background: #fff; border: 1px solid var(--dp-garis);
  border-radius: var(--dp-radius); padding: 1.05rem 1.1rem 1.15rem;
  box-shadow: var(--dp-bayang-kecil);
}
.dp-langkah > span {
  display: inline-block; font-family: var(--dp-kepala); font-size: .76rem; font-weight: 800;
  letter-spacing: .1em; color: var(--dp-hijau); background: var(--dp-hijau-muda);
  border-radius: 999px; padding: .22rem .6rem; margin-bottom: .6rem;
}
.dp-langkah h3 { font-size: 1rem; margin-bottom: .35rem; }
.dp-langkah p { font-size: .86rem; color: var(--dp-pudar); }

/* ------------------------------------------------------------------ CTA -- */
/* background-color eksplisit: `background: linear-gradient(...)` hanya mengisi
   background-image, jadi backgroundColor tetap transparan — pembaca yang
   mengabaikan gradient (dan alat audit kontras) menganggap latarnya putih. */
.dp-cta {
  background-color: var(--dp-hijau-tua);
  background-image: linear-gradient(135deg, var(--dp-hijau-tua), #1d6b41);
  color: #eaf6ee;
}
.dp-cta-in { max-width: var(--dp-max); margin-inline: auto; padding: 3rem 1.5rem; text-align: center; display: grid; gap: .8rem; justify-items: center; }
.dp-cta h2 { color: #fff; font-size: clamp(1.15rem, 2.2vw, 1.55rem); max-width: 46rem; }
.dp-cta p { color: #d6ecdd; font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }

/* Di ponsel, jarak vertikal ditipiskan. Terukur sebelumnya: hero berakhir
   y=1178 lalu seksi berikut menambah 54px padding lagi — total ~108px ruang
   kosong yang membuat pengguna merasa "masih jauh" setelah daftar angka.
   Hanya di ponsel: layar desktop punya tinggi lebih, ruang lapang di sana
   justru membantu keterbacaan. */
@media (max-width: 899px) {
  .dp-hero-in { padding-bottom: 2rem; }
  .dp-seksi-in { padding: 2.4rem 1.5rem; }
  .dp-kepala-pisah { margin-top: 2.2rem; padding-top: 1.8rem; }
  .dp-angka { margin-top: 2rem; }
  .dp-catatan-tengah { margin-top: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-kartu, .dp-btn { transition: none; }
  .dp-situs html { scroll-behavior: auto; }
}