/* ==========================================================================
   BERANDA & KOMPONEN PUBLIK — Koperasi Kelurahan Merah Putih Latsari
   Lapisan 6: hero identitas, statistik kepercayaan, kartu unit usaha,
   bagian berita terkini, kartu peta, bagian transparansi, dan utilitas
   pengganti atribut style="" yang berulang.

   Alur cerita beranda (#72):
     HERO → STATISTIK → TENTANG → UNIT USAHA → BERITA TERKINI → GALERI →
     POSTER & INSTAGRAM → POTENSI → TRANSPARANSI → PROGRAM → LANGKAH →
     TENTANG KAMI → TIM PENYELENGGARA → FAQ → KONTAK
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO IDENTITAS
   Bukan slider berita: pesan utamanya adalah identitas koperasi.
   -------------------------------------------------------------------------- */
.hero-ds{
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-background-alt), var(--color-background) 60%);
  border-bottom: 1px solid var(--color-border);
}
.hero-ds__foto{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-ds__tirai{
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Diukur pada foto asli: dengan lapisan ini, latar di belakang teks mencapai
     kontras 9–11:1 untuk teks terang (jauh di atas ambang WCAG AA 4,5:1).
     Ketebalan dinaikkan dari versi awal (.9/.78/.45) setelah pengukuran piksel
     menunjukkan tepi foto yang terang hanya menyisakan 4,3:1. */
  background: linear-gradient(100deg, rgba(28,20,12,.92) 0%, rgba(28,20,12,.86) 48%, rgba(28,20,12,.62) 100%);
}
.hero-ds__isi{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--gap-seksi);
  align-items: center;
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}
.hero-ds__teks{ min-width: 0; }
.hero-ds__judul{
  font-size: clamp(2rem, 3.8vw, 2.6rem);
  line-height: var(--lh-display);
  margin: var(--sp-4) 0 var(--sp-4);
  max-width: 22ch;
}
.hero-ds__pengantar{
  font-size: 1.0625rem;
  line-height: var(--lh-teks);
  max-width: var(--lebar-pengantar);
  margin: 0 0 var(--sp-6);
}
.hero-ds__aksi{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.hero-ds__catatan{
  font-size: var(--fs-200);
  margin: 0;
  max-width: var(--lebar-kartu);
}
.hero-ds__lambang{
  display: flex;
  justify-content: center;
}
.hero-ds__lambang-bulat{
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  box-shadow: var(--shadow-lg);
}
.hero-ds__lambang-bulat img{ width: 100%; height: 100%; object-fit: contain; }

/* Tanpa foto: teks gelap di atas krem, lambang di kanan */
.hero-ds:not(.hero-ds--foto) .hero-ds__isi{ padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.hero-ds:not(.hero-ds--foto) .hero-ds__judul{ color: var(--color-text); }
.hero-ds:not(.hero-ds--foto) .hero-ds__pengantar{ color: var(--color-text-muted); }
.hero-ds:not(.hero-ds--foto) .hero-ds__catatan{ color: var(--color-text-muted); }

/* Dengan foto: teks terang */
.hero-ds--foto .hero-ds__judul{ color: #FFFDF8; }
.hero-ds--foto .hero-ds__pengantar{ color: rgba(255,253,248,.94); }
.hero-ds--foto .hero-ds__catatan{ color: rgba(255,253,248,.85); }
.hero-ds--foto .lencana{
  background: rgba(255,255,255,.16);
  color: #FFFDF8;
  border-color: rgba(255,255,255,.34);
}
.hero-ds--foto .btn--outline{
  background: rgba(255,255,255,.14);
  color: #FFFDF8;
  border-color: rgba(255,253,248,.75);
}
.hero-ds--foto .btn--outline:hover{ background: rgba(255,255,255,.26); }
.hero-ds__kredit{
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-3);
  z-index: 2;
  font-size: var(--fs-100);
  color: rgba(255,253,248,.75);
}

@media (max-width: 1080px){
  .hero-ds__isi{ grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero-ds__lambang{ order: -1; justify-content: flex-start; }
  .hero-ds__lambang-bulat{ width: 140px; height: 140px; }
  .hero-ds__judul{ max-width: none; }
}

/* --------------------------------------------------------------------------
   2. STATISTIK KOPERASI (TRUST STATISTICS)
   -------------------------------------------------------------------------- */
.stat-seksi{
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
  padding: var(--sp-9) 0;
}
.stat-seksi__kepala{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.stat-seksi__kepala h2{ color: #FFFDF8; margin: 0 0 var(--sp-2); }
.stat-seksi__kepala p{
  margin: 0;
  color: rgba(255,253,248,.78);
  max-width: var(--lebar-pengantar);
}
.stat-seksi .lencana{
  background: rgba(255,255,255,.14);
  color: #FFFDF8;
  border-color: rgba(255,255,255,.3);
}
.stat-seksi .stat-ds{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.stat-seksi .stat-ds__angka{ color: #FFFDF8; }
.stat-seksi .stat-ds__label{ color: #FFFDF8; }
.stat-seksi .stat-ds__catatan{ color: rgba(255,253,248,.7); }
.stat-seksi .stat-ds--hijau .stat-ds__angka{ color: var(--color-secondary-light); }

/* --------------------------------------------------------------------------
   3. KARTU UNIT USAHA (bagian beranda & halaman unit usaha)
   -------------------------------------------------------------------------- */
.unit-kisi{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: var(--gap-kartu-besar);
}
.unit-kartu{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--pad-kartu);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 0;
  transition: transform var(--transisi-sedang), box-shadow var(--transisi-sedang);
}
.unit-kartu:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.unit-kartu__kepala{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.unit-kartu__judul{ margin: 0; font-size: var(--fs-400); }
.unit-kartu__teks{
  margin: 0;
  color: var(--color-text-muted);
  max-width: var(--lebar-kartu);
}
.unit-kartu__meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}
.unit-kartu__meta li{ display: flex; gap: var(--sp-2); margin: 0; }
.unit-kartu__meta b{ font-weight: 700; color: var(--color-text); }
.unit-kartu__kaki{ margin-top: auto; padding-top: var(--sp-3); }

/* Rincian unit pada halaman unit usaha */
.unit-rinci{ border-radius: var(--radius-lg); }

/* --------------------------------------------------------------------------
   4. BAGIAN BERITA TERKINI (slider berita + News Flash)
   Slider berita dipindahkan ke sini — bukan lagi menjadi hero.
   -------------------------------------------------------------------------- */
.berita-terkini{ background: var(--color-background-alt); }
.berita-terkini__kepala{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* --------------------------------------------------------------------------
   5. KARTU PETA POTENSI
   -------------------------------------------------------------------------- */
.peta-kartu{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--gap-seksi);
  align-items: center;
  padding: var(--pad-kartu);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.peta-kartu__kategori{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}
.peta-kartu__kategori li{ margin: 0; }
.peta-kartu__kategori a{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
  padding: 4px var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}
.peta-kartu__kategori a:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.peta-kartu__angka{
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1;
}
@media (max-width: 900px){
  .peta-kartu{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6. BAGIAN TRANSPARANSI
   Susunan (dirapikan 2026-09-27):
     KPI  →  kotak dokumen (satu baris penuh)  →  kisi regulasi terbaru (rata)
   Kotak dokumen sengaja BUKAN separuh lebar: isinya hanya tiga baris, sehingga
   bila dipasang berdampingan dengan daftar regulasi akan menyisakan ruang kosong
   besar di bawahnya (terukur tinggi blok 881px vs kotak 200px pada 1440px).
   -------------------------------------------------------------------------- */
.trans-dokumen{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--gap-seksi);
  padding: var(--pad-kartu);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Lencana ikut aliran kisi dan TIDAK boleh melar selebar wadah (dulu melar
   434px di dalam kotak flex-column sehingga tampak seperti kotak kosong). */
.trans-dokumen .badge{ justify-self: start; }
.trans-dokumen__isi{ min-width: 0; }
.trans-dokumen__aksi{ margin: 0; }

/* Daftar regulasi terbaru: SATU kisi, semua kartu selebar sama. */
.trans-reg__kepala{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.trans-reg__judul{ margin: 0; }   /* judul h3 bawaan (20px) sudah tepat */
.trans-reg__jumlah{
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: #8A5F14;
  font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
}
.trans-reg__catatan{ margin-top: var(--sp-4); max-width: var(--lebar-baris); }

/* Kisi rata: jumlah kolom dipilih `kisi_kolom_terbaik()` supaya baris terakhir
   selalu penuh (sebelumnya 2 kolom tetap → 2+1 dan tampak menggantung).
   `align-items:start`: tinggi tiap kartu mengikuti isinya. Kalau diregangkan
   (bawaan kisi), kartu berisi paling pendek menyisakan ruang kosong 33–36%
   tinggi kotaknya (terukur pada 1080–1440px) — sedangkan mengikuti isi hanya
   10–16%, dan selisih tinggi antar-kartu memang dijelaskan oleh panjang teks. */
.reg-kisi--rata{
  grid-template-columns: repeat(var(--kisi-kolom, 3), minmax(0, 1fr));
  align-items: start;
  gap: var(--gap-kartu);
}
@media (max-width: 1080px){
  .trans-dokumen{ grid-template-columns: 1fr; align-items: start; }
  .trans-dokumen__aksi{ justify-self: start; }
  .reg-kisi--rata{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .reg-kisi--rata{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. KAKI HALAMAN — lima kolom (audit #40)
   Kolom 1 logo + deskripsi · kolom 2–4 Tentang/Layanan/Informasi · kolom 5 Kontak
   -------------------------------------------------------------------------- */
.kaki-isi{ grid-template-columns: 1.35fr 1fr 1fr 1fr 1.25fr; gap: var(--sp-7); }
.kaki-tautan-bawah{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kaki-tautan-bawah li{ margin: 0; font-size: inherit; }
.kaki-tautan-bawah a{ display: inline-block; padding: 3px 0; min-height: 24px; }
.kaki-tautan-bawah a{ color: rgba(239,231,217,.9); }
.kaki-tautan-bawah a:hover{ color: #fff; }

@media (max-width: 1080px){
  .kaki-isi{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .kaki-isi{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .kaki-bawah{ flex-direction: column; }
}

/* --------------------------------------------------------------------------
   8. UTILITAS PENGGANTI style="" BERULANG
   Dipakai untuk mengurangi atribut gaya sebaris (audit #64).
   -------------------------------------------------------------------------- */
.lompat{ scroll-margin-top: 90px; }          /* menggantikan style="scroll-margin-top:90px" */
.jarak-atas-kecil{ margin-top: var(--sp-6); }
.jarak-atas-sedang{ margin-top: var(--sp-7); }
.jarak-atas-besar{ margin-top: var(--sp-8); }
.tanpa-jarak-bawah{ margin-bottom: 0; }
.pengantar-tengah{ margin: 0 auto var(--sp-6); max-width: var(--lebar-pengantar); }
.aksi-tengah{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
.aksi-deret{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.kartu-lembut{
  background: linear-gradient(160deg, var(--color-secondary-soft), var(--color-surface));
  border-color: rgba(79,122,52,.24);
}
.garis-putus{
  border: 0;
  border-top: 1px dashed var(--color-border);
  margin: var(--sp-5) 0;
}
.lencana-terang{
  background: rgba(255,255,255,.18) !important;
  color: #FFFDF8 !important;
  border-color: rgba(255,255,255,.32) !important;
}
.teks-lembut{ color: var(--color-text-muted); }
.grid-atas-sejajar{ align-items: start; gap: var(--gap-seksi); }
.sorot-tengah{ text-align: center; border-left-width: 1px; }
.kartu-bagian-judul{
  margin: var(--sp-9) 0 var(--sp-5);
  font-size: var(--fs-400);
}
.kotak-kosong{
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface-muted);
  padding: var(--sp-7) var(--sp-5);
}

/* Kelengkapan utilitas yang dipakai halaman warga */
.kartu-ikon-kecil{
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  flex: none;
  margin: 0;
}
.sorot-rapat{ padding: var(--sp-5) var(--sp-5); }
.tanpa-jarak-atas{ margin-top: 0; }