/* ============================================================
   halus.css — pemolesan tampilan situs desa
   Susi (46), 12 September 2026.

   Berkas ini TIDAK mengubah satu pun aturan yang sudah ada. Ia dimuat
   paling akhir dan hanya menimpa hal-hal yang kasatmata: jarak, warna
   latar baris kontak, gradasi hero, sudut kartu, dan irama judul.

   Membatalkannya: hapus satu baris <link> yang memuat berkas ini.
   Tidak ada perubahan lain yang perlu dibalik.
   ============================================================ */

:root{
  --hls-tinta:#1f2937;
  --hls-samar:#6b7280;
  --hls-garis:#e8eaed;
  --hls-lembut:#f7f8fa;
  --hls-gelap:#2b2f38;
  --hls-bayang:0 1px 2px rgba(16,24,40,.04), 0 6px 16px -6px rgba(16,24,40,.10);
  --hls-bayang-naik:0 2px 4px rgba(16,24,40,.05), 0 14px 28px -10px rgba(16,24,40,.16);
}

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--hls-tinta);
}

/* 1 — Baris kontak paling atas.
   Dulu jingga di atas jingga, jadi menyatu dengan navigasi dan tulisannya
   nyaris tak terbaca. Dipisahkan dengan warna gelap. */
.site-header{
  background:var(--hls-gelap) !important;
  padding:9px 0 !important;
  font-size:12.5px !important;
  letter-spacing:.02em;
  border-bottom:0;
}
.site-header a,
.site-header span,
.site-header p{ color:#e7e9ee !important; }
.site-header a:hover{ color:#fff !important; }

/* 2 — Hero.
   Dulu foto disiram warna rata 60%, sehingga wajah orang-orangnya hilang.
   Diganti gradasi: gelap tipis di atas supaya menu terbaca, warna desa di
   bawah supaya menyatu ke halaman. */
.hero-section .section-overlay{
  opacity:1 !important;
  background:linear-gradient(180deg,
      rgba(20,24,31,.55) 0%,
      rgba(20,24,31,.20) 38%,
      rgba(255,127,80,.55) 100%) !important;
}
.hero-section{ min-height:78vh !important; }
.hero-section::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);
  pointer-events:none; z-index:2;
}
.hero-section .container{ position:relative; z-index:3; }

/* 3 — Navigasi: diberi jarak, dan dibuat terbaca di atas foto. */
.navbar{ padding-top:.35rem !important; padding-bottom:.35rem !important; }
.navbar .nav-link{
  font-weight:500;
  letter-spacing:.01em;
  padding:.55rem .95rem !important;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
  border-radius:8px;
  transition:background .18s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible{ background:rgba(255,255,255,.14); }
.navbar .btn,
.navbar .nav-item .btn{
  border-radius:999px !important;
  padding:.45rem 1.15rem !important;
  font-weight:600;
}

/* 4 — Irama judul bagian: satu bentuk untuk semua, dengan garis penanda. */
main h2{
  font-weight:700 !important;
  letter-spacing:-.01em;
  line-height:1.25;
}
main h2.mb-4{
  position:relative;
  padding-bottom:.6rem;
  margin-bottom:1.6rem !important;
}
main h2.mb-4::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:56px; height:3px; border-radius:3px;
  background:currentColor; opacity:.35;
}

/* 5 — Kartu: sudut, bayangan lembut, naik sedikit saat disentuh. */
.shadow-sm,
.services-thumb,
.card{
  border-radius:14px !important;
  box-shadow:var(--hls-bayang) !important;
  border:1px solid var(--hls-garis) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.services-thumb:hover,
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--hls-bayang-naik) !important;
}
.services-image-wrap,
.services-image{ border-radius:12px !important; overflow:hidden; }
.services-image{ transition:transform .35s ease; }
.services-thumb:hover .services-image{ transform:scale(1.035); }

/* 6 — Angka statistik: lebar angka disamakan supaya tidak goyang
   saat berganti (1.109 dan 3.075 tidak lagi bergeser). */
main h3{
  font-variant-numeric:tabular-nums;
  font-weight:700 !important;
  letter-spacing:-.02em;
}

/* 7 — Batang capaian (SDGs, APBDes) dibuat lebih tenang. */
.progress{
  height:9px !important;
  border-radius:999px !important;
  background:var(--hls-lembut) !important;
}
.progress-bar{ border-radius:999px !important; }

/* 8 — Judul layanan dan berita: tinggi baris dilonggarkan. */
.services-title-link,
.services-judul,
.services-title,
.h4-judul{ line-height:1.35; }

/* 9 — Jarak antarbagian dibuat berirama, ikut lebar layar. */
main > section,
main > div > section{
  padding-top:clamp(2.2rem, 4vw, 3.6rem);
  padding-bottom:clamp(2.2rem, 4vw, 3.6rem);
}

/* 10 — Kaki halaman disamakan dengan baris kontak atas, supaya halaman
   punya dua kutub yang seimbang. */
.site-footer{ background:var(--hls-gelap) !important; }
.site-footer,
.site-footer a,
.site-footer p,
.site-footer li{ color:#cfd3db !important; }
.site-footer a:hover{ color:#fff !important; }

/* 11 — Tombol WhatsApp mengambang: dikecilkan supaya tidak menutupi
   judul bagian di bawah hero. */
.btwa{
  width:auto !important;
  max-width:230px;
  bottom:18px !important;
  right:18px !important;
  filter:drop-shadow(0 8px 22px rgba(16,24,40,.22));
}
.btwa > *{ border-radius:14px !important; }
@media (max-width:575px){
  .btwa{ transform:scale(.86); transform-origin:bottom right; }
}

/* 12 — Penggulung mendatar.
   Cacat lama, bukan akibat berkas ini: terbukti ada juga di desa yang belum
   memuat halus.css. Dua sebabnya:

   a) Di dalam <section class="partners-section"> ada .row Bootstrap yang
      induknya tidak punya padding. Margin negatif -12px milik .row menyembul
      ke kiri dan kanan, jadi halaman 24px lebih lebar dari layar.
   b) <canvas class="mgraph"> (grafik statistik) lebarnya disetel JS dalam
      piksel tanpa menghitung padding induknya; di layar 375px ia menyembul 3px.

   Perbaikan sebenarnya ada di mod_utamapengumuman (bungkus .row dengan
   .container) dan di skrip grafiknya. Sampai itu dikerjakan, dua aturan ini
   menahannya tanpa mengubah tata letak. */
.partners-section > .mb-2{ padding-left:12px; padding-right:12px; }
.partners-section{ overflow-x:clip; }
/* aturan lengkap untuk canvas.mgraph ada di bagian 14 di bawah */

/* 13 — Baris hak cipta di kaki halaman.
   Dulu sepotong jingga pekat di bawah kaki yang sudah gelap, jadi halaman
   berakhir dengan tabrakan warna. Disamakan dengan kakinya, dibedakan garis
   rambut saja. */
.box_footer_cpr{
  background:#23262e !important;
  border-top:1px solid rgba(255,255,255,.07);
  color:#9aa1ad !important;
  font-size:13px;
  padding:14px 0 !important;
}
.box_footer_cpr a{ color:#c9ced8 !important; }
.box_footer_cpr a:hover{ color:#fff !important; }

/* 14 — Kotak grafik statistik di HP: isinya keluar dan menimpa berita.
   Cacat lama, terukur sama persis dengan dan tanpa berkas ini (127px).

   Sebabnya: .mcontainer tingginya dipaku 400px, sedangkan isinya
   (.mvertical-center) dipasang position:absolute lalu ditengahkan dengan
   translateY(-50%). Di layar sempit isinya jadi 527px — lebih tinggi dari
   kotaknya — sehingga 63px menyembul ke atas dan 63px ke bawah, dan yang
   bawah mendarat di atas judul berita.

   Di HP luberannya 127px dan langsung terlihat; di layar komputer 74px dan
   lebih halus, tapi ADA -- diukur, bukan dikira. Karena itu tambalan ini
   berlaku di semua ukuran layar, bukan hanya di layar sempit.

   Kotaknya dibiarkan tumbuh mengikuti isi, dengan min-height 400px supaya
   ruang yang dulu dipesan tetap sama saat isinya pendek. Perbaikan sebenarnya
   ada di skrip grafiknya. */
.mcontainer{
  height:auto !important;
  min-height:0 !important;
  padding:20px 16px !important;
}
.mvertical-center{
  position:static !important;
  transform:none !important;
  width:auto !important;
  left:auto !important;
  top:auto !important;
}
.mvertical-center table{ margin-bottom:0; }

/* Tinggi grafiknya dibatasi. Tanpa ini, aturan max-width di bawah membuat
   lingkaran statistik ikut membesar mengikuti lebar kolom, dan bagian itu
   jadi terlalu jangkung di layar komputer. */
canvas.mgraph{
  max-width:100% !important;
  max-height:260px !important;
  width:auto !important;
  height:auto !important;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* 15 — Halaman dalam (infografis, APBDes, daftar, cek surat).
   Tabelnya memakai .table-sm dengan padding 4px — terlalu rapat untuk dibaca
   di layar kecil — dan baris selang-selingnya abu-abu pekat. */
main table{ font-variant-numeric:tabular-nums; }
table.table-sm > :not(caption) > * > *{ padding:.55rem .7rem !important; }
table.table > :not(caption) > * > *{ border-color:var(--hls-garis) !important; }
table.table thead th{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:600;
  color:var(--hls-samar) !important;
  border-bottom:2px solid var(--hls-garis) !important;
}
table.table td,
table.table th{ vertical-align:middle; }
.bg_pertama{ background:#ffffff !important; }
.bg_kedua{ background:var(--hls-lembut) !important; }
.garis_kiri_td,
.garis_kiri{ border-left-color:var(--hls-garis) !important; }

/* Tombol dalam tabel: seragam, tidak setinggi barisnya.
   Warnanya sengaja TIDAK diubah — sebagian dipakai sebagai penanda keadaan,
   dan menyeragamkannya berarti menghapus arti. */
.btn{ border-radius:10px; }
.btn-sm{
  border-radius:8px !important;
  padding:.25rem .65rem !important;
  font-size:12.5px !important;
  font-weight:500;
}

/* 16 — Kartu yang tidak seukuran.
   Kartu berita, UMKM, kuliner, dan fasilitas umum tingginya berbeda-beda dalam
   satu baris — terukur 121, 156, 175, 217, 245, 513, dan 677 piksel di satu
   halaman yang sama. Sebabnya dua: gambarnya bermacam-macam perbandingan
   sisinya, dan judulnya ada yang satu baris ada yang tiga.

   Diperbaiki tanpa menyentuh markah: kartu dalam satu baris dibuat sama tinggi,
   gambarnya dipotong ke satu perbandingan (16:10, object-fit cover jadi tidak
   ada yang gepeng), dan judulnya dipotong dua baris. */
.row > [class*="col-"]:has(> .services-thumb){ display:flex; }
.row > [class*="col-"] > .services-thumb{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.services-thumb .services-image-wrap{
  aspect-ratio:16 / 10;
  overflow:hidden;
}
.services-thumb .services-image-wrap .services-image{
  width:100%;
  height:100%;
  object-fit:cover;
}
.services-thumb .services-judul,
.services-thumb .services-title-link,
.services-thumb .h4-judul{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 17 — Kartu daftar berita (.box-md-mod) di halaman Informasi/Berita.
   Bentuk kartunya berbeda dari .services-thumb, jadi tidak ikut terkena
   aturan 16. Di satu halaman terukur 500, 523, 526, 553, dan 556 piksel untuk
   kartu yang selebar. Sebabnya judul dua atau tiga baris dan ringkasan yang
   panjangnya berbeda. */
.row > [class*="col-"]:has(> .box-md-mod){ display:flex; }
.row > [class*="col-"] > .box-md-mod{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.box-md-mod > .box-text{ flex:1 1 auto; }
.box-md-mod .box-img{ aspect-ratio:16 / 9; overflow:hidden; }
.box-md-mod .box-img img{ width:100%; height:100%; object-fit:cover; }
.services-judul{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.box-md-mod .box-text > div:not([class]){
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 18 — Tirai pemuat (plg_loader) yang menutup layar saat modul diambil.
   Dulu kelabu pekat 80% yang menjatuhkan seluruh halaman, dengan gambar
   pemutar 100px. Sekarang putih tipis berkabut, gambarnya 64px, dan kotak
   pesannya diberi sudut serta bayangan seperti kartu lain. */
#plg_box_loader{
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.box_img_loader{
  width:64px !important;
  height:64px !important;
  margin-left:-32px !important;
  margin-top:-32px !important;
}
.box_ket_loader{
  color:var(--hls-samar) !important;
  font-size:13px;
  letter-spacing:.02em;
  margin-top:44px !important;
}
.box_grid_pesan_loader_show{
  border-radius:14px;
  border:1px solid var(--hls-garis);
  box-shadow:0 18px 48px -12px rgba(16,24,40,.30);
  padding:16px 20px !important;
}

/* 19 — Kartu di dalam korsel terpotong kanannya, dan berdempetan.
   Judul dan tombol "Lihat Detail" pada kartu terakhir terpangkas; kartunya
   bersinggungan tanpa jarak.

   Sebabnya: .row di dalam .carousel-item memakai margin negatif -12px kiri dan
   kanan, sehingga lebarnya 24px melebihi .carousel-inner yang overflow-nya
   hidden. Terukur 720 di dalam 696, dan 1265 di dalam 1241 -- sama besar
   dengan dan tanpa berkas ini, jadi cacat lama.

   Margin negatifnya dinolkan. Lebar baris jadi persis selebar korselnya,
   tidak ada yang terpotong, dan padding kolom Bootstrap kembali berfungsi
   sebagai jarak antarkartu. */
.carousel-item .row{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Dan ini kesalahan berkas ini sendiri, bukan cacat lama.
   Aturan 16 dan 17 membuat kolom pembungkus kartu jadi display:flex supaya
   kartunya sama tinggi. Nilai bawaan min-width pada anak flex adalah 'auto',
   artinya kartu MENOLAK menyusut di bawah lebar alami isinya -- gambar dan
   tulisan panjang. Di dalam korsel yang sempit, kartu 472px dijejalkan ke
   kolom 348px, dan 124px sisanya terpotong oleh .carousel-inner.
   Terukur di halaman utama Undaan Lor: terpotong 136px sebelum, 0 sesudah. */
.row > [class*="col-"]:has(> .box-md-mod),
.row > [class*="col-"]:has(> .services-thumb){ min-width:0; }
.row > [class*="col-"] > .box-md-mod,
.row > [class*="col-"] > .services-thumb{ min-width:0; max-width:100%; }
.box-md-mod img,
.services-thumb img{ max-width:100%; }

/* 19a — Remah roti dicetak DUA KALI di setiap halaman: sekali di dalam banner
   berwarna (rata kanan) dan sekali lagi di bawahnya pada latar putih (rata
   kiri). Diperiksa di tujuh halaman — download, agenda, album, apbdes,
   infografis, sdgs, informasi — semuanya dua.

   Yang bawah disembunyikan, bukan yang di banner, karena banner selalu ada.
   Penjaga :has() di depan memastikan penyembunyian hanya terjadi kalau banner
   memang memuat remah roti; kalau tidak, yang bawah tetap tampil.
   Hemat 48px di tiap halaman, dan yang lebih penting: tidak ada lagi
   pengulangan yang membingungkan pembaca. */
main:has(.banner-section .breadcrumb) >
  section:not(.banner-section):has(> .container > .row > [class*="col-"] > nav > .breadcrumb){
  display:none !important;
}

/* 19b — Remah roti (Home > Nama Halaman) berdiri sendiri di dalam satu
   <section> berpadding penuh, lalu isi halaman datang di section berikutnya
   yang juga berpadding penuh. Di halaman profil terukur 187px kosong antara
   remah roti dan gambar pertama. Dirapatkan jadi sekitar 107px. */
main > section:has(.breadcrumb){ padding-top:16px !important; padding-bottom:4px !important; }
main > section:has(.breadcrumb) + section{ padding-top:12px !important; }
main > section:has(.breadcrumb) .row > [class*="col-"]{ margin-bottom:0 !important; }
.breadcrumb{ margin-bottom:0 !important; }

/* 19c — Jarak antarbagian secara umum dirapatkan. Sebelumnya 35-58px atas dan
   bawah untuk tiap bagian; dua bagian bersebelahan berarti seratus piksel
   kosong di tengah halaman. */
main > section,
main > div > section{
  padding-top:clamp(1.2rem, 2.2vw, 2.2rem) !important;
  padding-bottom:clamp(1.2rem, 2.2vw, 2.2rem) !important;
}
main > section + section{ padding-top:clamp(.8rem, 1.4vw, 1.4rem) !important; }

/* 20 — Jarak sesudah banner judul halaman.
   Banner berpadding bawah 50px, lalu bagian isi berpadding atas 51px — hampir
   seratus piksel kosong antara remah roti dan isi halaman. Dirapatkan. */
.banner-section{ padding-top:64px !important; padding-bottom:28px !important; }
.banner-section + section{ padding-top:24px !important; }
main > section.services-section{ padding-top:28px !important; }

/* 21 — Daftar "Info Terbaru" di sisi kanan halaman informasi.
   Gambar kecilnya 89x66 dengan object-fit:fill — jadi gepeng, dan tiap butir
   tingginya berbeda (156, 192, 193). Ukurannya diseragamkan, dipotong dengan
   cover supaya tidak gepeng, lalu tiap butir dipisah garis tipis. */
.mini-blok-image{ width:96px; }
.mini-blok-image img{
  width:96px !important;
  height:72px !important;
  object-fit:cover !important;
  border-radius:10px;
  display:block;
}
.row.mb-4:has(.mini-blok-image){
  margin-bottom:1rem !important;
  padding-bottom:1rem;
  border-bottom:1px solid #eef0f3;
}
.row.mb-4:has(.mini-blok-image):last-of-type{
  border-bottom:0;
  padding-bottom:0;
}

/* 22 — Baris hak cipta terlalu jangkung: 100px untuk dua baris teks.
   Padding dan jarak antarbarisnya dipangkas separuh (jadi 60px). */
.box_footer_cpr{ padding:8px 0 !important; }
.box_footer_cpr p.footerc{ margin-bottom:4px !important; }
.box_footer_cpr p.footerc:last-of-type{ margin-bottom:0 !important; }

/* 23 — Halaman Hubungi Kami: ukuran huruf disamakan dengan halaman lain.
   Hurufnya sudah Poppins seperti halaman lain, yang berbeda ukurannya:
   judul bagian di sini H3 30px, sedangkan di semua halaman lain H4 25px
   (diperiksa di Dokumen dan Agenda). Disamakan ke 25px.

   Diikat ke .row.services-thumb di dalam .contact-section supaya tidak
   mengenai h3 di halaman lain -- di halaman utama, h3 dipakai untuk angka
   statistik besar, dan mengecilkannya jadi 25px akan merusaknya. */
.contact-section .row.services-thumb > [class*="col-"] > h3{
  font-size:25px !important;
  font-weight:700 !important;
  line-height:1.3;
}

/* Borang isiannya juga disamakan: sudutnya 3-4px dan padding tegaknya 2px
   membuat kotak isian tampak gepeng dibanding kotak lain di aplikasi. */
.form_input .form-control{
  border-radius:10px !important;
  border:1px solid var(--hls-garis) !important;
  padding-top:.55rem !important;
  padding-bottom:.55rem !important;
  font-size:15px !important;
  line-height:1.4;
}
.form_input .form-control:focus{
  border-color:#ff7f50 !important;
  box-shadow:0 0 0 3px rgba(255,127,80,.15) !important;
}

/* 24 — Menghormati pemakai yang mematikan animasi di perangkatnya. */
@media (prefers-reduced-motion:reduce){
  .services-thumb,
  .card,
  .services-image{ transition:none !important; }
  .services-thumb:hover,
  .card:hover{ transform:none; }
  .services-thumb:hover .services-image{ transform:none; }
}