/* ============================================================
   Style dasar — Website Jasa Pembuatan Website UMKM
   Basis: design/style-guide.md
   Dipakai mockup design/ dan menjadi basis assets/css/style.css
   ============================================================ */
:root{
  --warna-primer:#E4572E;
  --warna-primer-gelap:#C74320;
  --warna-primer-teks:#A8330F;
  --warna-amber:#F6AE2D;
  --warna-krem:#FBF3E4;
  --warna-krem-tua:#F3E6CE;
  --warna-kartu:#FFFFFF;
  --warna-tinta:#33261A;
  --warna-tinta-lembut:#6B5A48;
  --warna-garis:#E8D9BF;
  --warna-wa:#25D366;
  /* #1DA851 lama = putih di atasnya cuma 3,10:1, gagal AA 4,5:1 (lihat docs/laporan-uji-gerbang5.md BUG-05).
     #12803D terukur 5,02:1 dengan putih — masih terbaca sebagai hijau WhatsApp. */
  --warna-wa-gelap:#12803D;
  --warna-wa-gelap-hover:#0E6930;
  --warna-sukses-bg:#E7F6EC;
  --warna-sukses:#1E7A43;
  --warna-error:#C0392B;
  --warna-error-bg:#FBEAE8;
  --radius-kartu:16px;
  --bayangan:0 4px 16px rgba(51,38,26,.08);
  --bayangan-hover:0 10px 24px rgba(51,38,26,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{max-width:100%}
body{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--warna-krem);color:var(--warna-tinta);
  font-size:16px;line-height:1.65;
  max-width:100%;
}
img,svg{max-width:100%;display:block}
a{color:var(--warna-primer-teks)}
a:hover{color:var(--warna-primer-gelap)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

h1,h2,h3{line-height:1.2;color:var(--warna-tinta)}
h1{font-size:30px;font-weight:800;line-height:1.15}
h2{font-size:24px;font-weight:700}
h3{font-size:18px;font-weight:700}
.sorot{color:var(--warna-primer)}
.teks-lembut{color:var(--warna-tinta-lembut)}
.teks-kecil{font-size:14px}
.tengah{text-align:center}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,243,228,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--warna-garis);
}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1100px;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;color:var(--warna-tinta);text-decoration:none}
.logo .logo-ikon{width:34px;height:34px;border-radius:10px;background:var(--warna-primer);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.nav-toggle{display:none}
.nav-toggle-btn{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;
  width:44px;height:44px;align-items:center;justify-content:center}
.nav-toggle-btn span{width:24px;height:3px;border-radius:2px;background:var(--warna-tinta)}
.nav-mobile-acts{display:flex;align-items:center;gap:6px}
.nav-wa-mini{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--warna-wa-gelap);color:#fff;flex:0 0 auto}
.nav-wa-mini:hover{background:var(--warna-wa-gelap-hover)}
.nav-menu{display:none;list-style:none;width:100%;padding:8px 0 16px}
.nav-menu li a{display:block;padding:10px 4px;text-decoration:none;color:var(--warna-tinta);font-weight:600}
.nav-menu li a.aktif{color:var(--warna-primer-teks);box-shadow:inset 0 -3px 0 var(--warna-amber)}
.nav-menu-judul,.nav-menu-wa,.nav-tirai,.nav-tutup{display:none}

/* ============================================================
   Menu mobile — panel geser dari kanan
   ------------------------------------------------------------
   Sebelumnya menu mobile hanya mendorong header memanjang ke bawah: isinya
   menempel di tepi kiri layar, tanpa batas yang jelas antara menu dan halaman,
   dan halaman di belakangnya ikut tergeser. Panel bertirai memisahkan keduanya
   dengan tegas dan memberi tautan ruang sentuh yang layak.

   Statusnya tetap disimpan di kotak centang #navtg, bukan di JavaScript, jadi
   menu ini utuh walau JS gagal dimuat. JS hanya menambah yang tidak bisa
   dilakukan CSS: mengunci gulir halaman, menutup dengan Esc, dan menutup
   sendiri setelah tautan ditekan.
   ============================================================ */
@media(max-width:767px){
  /* backdrop-filter pada .site-header membuat header menjadi acuan bagi semua
     keturunannya yang position:fixed. Akibatnya tirai yang diminta inset:0
     hanya sebesar header — terukur 375x79 px, bukan 375x812 px, sehingga
     halaman di belakang panel tidak tergelapkan dan ketukan di luar panel
     tidak menutup menu. Blur itu hiasan desktop; di HP header dibuat pekat
     saja, dan masalahnya hilang di akarnya. */
  .site-header{backdrop-filter:none;background:var(--warna-krem)}

  .nav-tirai{
    display:block;position:fixed;inset:0;z-index:60;
    background:rgba(51,38,26,.42);
    opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
    cursor:pointer;
  }
  .nav-toggle:checked ~ .nav-tirai{opacity:1;visibility:visible}

  .nav-menu{
    display:block;                       /* selalu ada, hanya digeser keluar layar */
    position:fixed;top:0;right:0;z-index:61;
    width:min(84vw,330px);
    height:100dvh;
    margin:0;
    padding:26px 18px calc(24px + env(safe-area-inset-bottom,0px));
    background:var(--warna-krem);
    border-left:1px solid var(--warna-garis);
    box-shadow:-20px 0 46px rgba(51,38,26,.18);
    transform:translateX(102%);
    transition:transform .28s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto;
    overscroll-behavior:contain;         /* gulir panel tidak merembet ke halaman */
  }
  .nav-toggle:checked ~ .nav-menu{transform:translateX(0)}

  .nav-menu-judul{
    display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--warna-tinta-lembut);
    padding:0 12px 12px;
  }

  .nav-menu li a{
    display:flex;align-items:center;gap:10px;
    padding:14px 12px;margin-bottom:2px;
    border-radius:12px;font-size:16px;
    border-bottom:1px solid var(--warna-garis);
  }
  .nav-menu li:last-child a{border-bottom:0}

  /* Halaman yang sedang dibuka ditandai dengan latar dan batang di tepi kiri.
     Garis bawah amber milik versi desktop hampir tak terlihat di panel ini. */
  .nav-menu li a.aktif{
    background:#F6ECDC;box-shadow:inset 3px 0 0 var(--warna-primer);
    color:var(--warna-primer-teks);
  }

  .nav-menu .btn-nav{
    justify-content:center;margin-top:14px;border-bottom:0;
    padding:14px 20px !important;
  }

  .nav-menu-wa{display:block;margin-top:10px}
  /* Ditulis sebagai .nav-menu li.nav-menu-wa a, bukan .nav-menu-wa a: aturan umum
     .nav-menu li a di atas punya bobot lebih tinggi (satu kelas + dua tipe) dan
     akan menimpanya, sehingga teksnya jadi tinta gelap di atas hijau — nyaris
     tidak terbaca. Ketahuan 7 Sep 2026 saat memeriksa warna hasil hitung. */
  .nav-menu li.nav-menu-wa a{
    justify-content:center;background:var(--warna-wa-gelap);
    color:#fff;border-radius:999px;border-bottom:0;
    padding:14px 20px;font-weight:700;
  }
  .nav-menu li.nav-menu-wa a svg{width:20px;height:20px;flex:0 0 auto}
  .nav-menu-wa small{
    display:block;text-align:center;margin-top:8px;
    font-size:12.5px;color:var(--warna-tinta-lembut);
  }

  .nav-tutup{
    display:flex;align-items:center;justify-content:center;
    position:fixed;top:14px;right:14px;z-index:62;
    width:40px;height:40px;border-radius:50%;
    background:var(--warna-kartu);color:var(--warna-tinta);
    border:1px solid var(--warna-garis);cursor:pointer;
    opacity:0;visibility:hidden;transform:scale(.85);
    transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
  }
  .nav-toggle:checked ~ .nav-tutup{opacity:1;visibility:visible;transform:scale(1)}

  /* Kunci gulir dipasang JS lewat kelas ini. Ditulis di CSS supaya halaman di
     belakang panel benar-benar diam, bukan sekadar terlihat diam. */
  body.nav-terbuka{overflow:hidden}
}

@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .nav-menu,.nav-tirai,.nav-tutup{transition:none}
}

/* ============================================================
   Menu bawah (HP)
   ------------------------------------------------------------
   Menu yang bersembunyi di balik ikon tiga garis di pojok atas praktis tidak
   pernah ditekan di layar sempit. Batang bawah menaruh tujuan terpenting dan
   tombol WhatsApp dalam jangkauan ibu jari, di tempat yang sama sepanjang
   halaman. Hanya tampil di bawah 768px.
   ============================================================ */
.menu-bawah{display:none}

@media(max-width:767px){
  .menu-bawah{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:var(--warna-kartu);
    border-top:1px solid var(--warna-garis);
    box-shadow:0 -6px 20px rgba(51,38,26,.08);
    padding-bottom:env(safe-area-inset-bottom,0px);   /* ruang bar gestur iPhone */
  }
  .menu-bawah > *{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 2px 8px;min-height:56px;
    font-size:10.5px;font-weight:600;line-height:1.2;
    color:var(--warna-tinta-lembut);text-decoration:none;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .menu-bawah svg{width:22px;height:22px;flex:0 0 auto}
  .menu-bawah a.aktif{color:var(--warna-primer-teks)}
  .menu-bawah a.aktif svg{color:var(--warna-primer)}
  .menu-bawah > *:focus-visible{outline:2px solid var(--warna-primer);outline-offset:-3px;border-radius:8px}

  /* WhatsApp diangkat dan dibulatkan supaya terbaca sebagai tindakan utama,
     bukan sekadar tujuan keempat yang setara dengan yang lain.

     Ukurannya 54px, bukan 38px seperti percobaan pertama: kalau hanya sedikit
     lebih besar dari ikon tetangganya, ia tetap terbaca sebagai satu dari lima
     tujuan yang sederajat. Ini satu-satunya tombol di batang ini yang bisa
     menghasilkan pesanan, jadi bedanya harus jelas dari jarak sekilas. 54px juga
     jauh di atas ambang sentuh nyaman 44px. */
  .menu-bawah .mb-wa{color:var(--warna-wa-gelap);font-weight:700}
  .menu-bawah .mb-wa-bulat{
    display:flex;align-items:center;justify-content:center;
    width:54px;height:54px;margin-top:-24px;
    border-radius:50%;background:var(--warna-wa-gelap);color:#fff;
    border:4px solid var(--warna-kartu);
    box-shadow:0 6px 16px rgba(18,128,61,.38);
  }
  .menu-bawah .mb-wa-bulat svg{width:28px;height:28px;position:relative;z-index:1}

  /* --- Denyut penarik perhatian ---------------------------------------------
     Dua lapis yang berjalan pada siklus 2,6 detik yang sama: satu cincin yang
     melebar lalu memudar, dan satu denyut kecil pada tombolnya sendiri.

     Yang penting justru JEDA-nya. Gerakan yang berdenyut terus-menerus tanpa
     henti berhenti terlihat setelah beberapa detik — mata menganggapnya latar,
     persis seperti iklan berkedip yang otomatis diabaikan. Denyutnya karena itu
     hanya terjadi di seperlima awal tiap siklus, sisanya diam. Yang menarik
     perhatian adalah gerakan yang muncul kembali setelah sunyi.

     Hanya transform dan opacity yang dianimasikan, jadi tidak ada perhitungan
     tata letak ulang dan baterai tidak terkuras. Saat pengguna memilih "kurangi
     gerak", aturan global di bawah mematikannya; cincinnya diberi opacity:0
     sebagai keadaan dasar supaya ia benar-benar tak terlihat, bukan berhenti
     sebagai lingkaran hijau diam. */
  .menu-bawah .mb-wa-bulat{
    position:relative;
    animation:mb-wa-denyut 2.6s ease-in-out infinite;
  }
  .menu-bawah .mb-wa-bulat::after{
    content:"";position:absolute;inset:-5px;border-radius:50%;
    border:2px solid var(--warna-wa);
    opacity:0;                      /* keadaan dasar: tak terlihat */
    pointer-events:none;
    animation:mb-wa-riak 2.6s ease-out infinite;
  }

  @keyframes mb-wa-denyut{
    0%,100%   {transform:scale(1)}
    6%        {transform:scale(1.09)}
    13%       {transform:scale(.985)}
    20%       {transform:scale(1)}
  }
  @keyframes mb-wa-riak{
    0%   {transform:scale(1);   opacity:.6}
    55%  {transform:scale(1.75);opacity:0}
    100% {transform:scale(1.75);opacity:0}
  }

  /* Isi halaman diberi ruang setinggi batang, kalau tidak baris terakhir footer
     tertutup permanen dan tidak ada cara menggulir lebih jauh untuk melihatnya. */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}

  /* Tombol WhatsApp melayang dimatikan di HP: ia menempati sudut yang sama dengan
     batang bawah, dan dua tombol WhatsApp bertumpuk membuat halaman terlihat
     tidak terurus. Tombol WhatsApp kecil di header ikut dimatikan karena alasan
     yang sama — sekarang ada satu tempat yang jelas, bukan tiga. */
  /* Ditulis "body .wa-float", bukan ".wa-float": aturan dasar .wa-float berada
     lebih bawah di berkas ini dengan bobot yang sama persis, jadi ia menang
     karena urutan dan tombolnya tetap muncul menumpuk di atas batang bawah.
     Terlihat 7 Sep 2026 saat memeriksa display hasil hitung — bukan dari
     tampilannya, karena di potret layar kedua tombol itu memang saling menutupi. */
  body .wa-float{display:none}
  body .nav-wa-mini{display:none}
}
.nav-wrap{flex-wrap:wrap}
.btn-nav{background:var(--warna-primer);color:#fff !important;border-radius:999px;padding:10px 20px !important;text-align:center;font-weight:700}
.btn-nav:hover{background:var(--warna-primer-gelap)}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;padding:14px 28px;font-weight:700;font-size:16px;
  text-decoration:none;border:0;cursor:pointer;min-height:48px;transition:.15s;font-family:inherit}
.btn-primer{background:var(--warna-primer-gelap);color:#fff}
.btn-primer:hover{background:var(--warna-primer-teks);color:#fff;transform:translateY(-1px)}
.btn-wa{background:var(--warna-wa-gelap);color:#fff}
.btn-wa:hover{background:var(--warna-wa-gelap-hover);color:#fff;transform:translateY(-1px)}
.btn-sekunder{background:transparent;color:var(--warna-primer-teks);border:2px solid var(--warna-primer)}
.btn-sekunder:hover{background:rgba(228,87,46,.08);color:var(--warna-primer-gelap)}
/* Tombol WA di hero: dua warna jenuh (hijau+oranye) bersaing di layar pertama — hero pakai oranye gelap,
   ikon WA tetap putih supaya masih terbaca sebagai jalur WhatsApp. Tombol WA lain di situs tetap hijau. */
.hero .btn-wa{background:var(--warna-primer-gelap)}
.hero .btn-wa:hover{background:var(--warna-primer-teks)}
.btn-blok{width:100%}
.ikon-wa{width:22px;height:22px;flex:0 0 auto}

/* ---------- Seksi ---------- */
.seksi{padding:64px 0}
.seksi-selang{background:var(--warna-krem-tua)}
.seksi-judul{margin-bottom:8px}
.seksi-sub{color:var(--warna-tinta-lembut);margin-bottom:32px;max-width:640px}
.seksi-kepala{margin-bottom:32px}
.seksi-kepala h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:var(--warna-amber);margin-top:12px}
.seksi-kepala.tengah h2::after{margin-inline:auto}

/* Variasi ritme: jangan semua seksi berpadding & berjudul sama (lihat style-guide §5) */
.seksi-padat{padding:48px 0}
.seksi-lega{padding:56px 0}
.judul-besar{font-size:28px}
@media(min-width:768px){
  .seksi-padat{padding:56px 0}
  .seksi-lega{padding:96px 0}
  .judul-besar{font-size:40px}
}

/* Kepala seksi rata-kiri TANPA garis amber — dipakai di hampir semua seksi.
   Pola "tengah + garis amber" (.seksi-kepala.tengah) disisakan HANYA untuk seksi harga. */
.seksi-kepala-kiri{margin-bottom:32px;max-width:640px}
.seksi-kepala-kiri h2{margin-bottom:0}
.label-kecil{display:block;font-size:13px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--warna-primer-teks);margin-bottom:8px}

/* ---------- Hero ---------- */
.hero{padding:56px 0 40px;position:relative;overflow:hidden}
.hero-grid{display:grid;gap:32px;align-items:center;grid-template-columns:minmax(0,1fr)}
.hero-grid>*{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.hero h1{margin-bottom:16px;max-width:100%;overflow-wrap:break-word;word-break:break-word}
.hero-sub{font-size:17px;color:var(--warna-tinta-lembut);margin-bottom:24px;max-width:560px;overflow-wrap:break-word}
.hero-cta{display:flex;flex-direction:column;gap:12px;margin-bottom:10px;max-width:100%}
.hero-cta .btn{max-width:100%;white-space:normal;text-align:center}
.hero-blob{position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--warna-amber),var(--warna-primer));opacity:.16;pointer-events:none}
.hero-ilustrasi{margin:0 auto;max-width:460px;width:100%;height:auto;object-fit:contain}
.hero-ilustrasi img,.hero-ilustrasi svg{width:100%;height:auto;object-fit:contain}
.hero-harga-kepala{max-width:640px}

/* ---------- Kartu umum ---------- */
.grid{display:grid;gap:20px}
.kartu{background:var(--warna-kartu);border:1px solid var(--warna-garis);border-radius:var(--radius-kartu);
  padding:24px;box-shadow:var(--bayangan);transition:.15s}
.kartu:hover{transform:translateY(-2px);box-shadow:var(--bayangan-hover)}
.kartu h3{margin-bottom:8px}
.kartu-ikon{width:52px;height:52px;border-radius:14px;background:var(--warna-krem);display:flex;
  align-items:center;justify-content:center;font-size:26px;margin-bottom:14px}
.kartu-link{font-weight:700;text-decoration:none}
.kartu-ilustrasi{width:calc(100% + 48px);margin:-24px -24px 16px;border-radius:var(--radius-kartu) var(--radius-kartu) 0 0;display:block;max-width:calc(100% + 48px)}

/* ---------- Paket harga ---------- */
.paket-grid{display:grid;gap:28px;align-items:stretch}
.paket{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--warna-garis);
  border-radius:var(--radius-kartu);padding:28px 24px;box-shadow:var(--bayangan)}
.paket-unggulan{border:3px solid var(--warna-amber);box-shadow:var(--bayangan-hover)}
.paket-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--warna-amber);color:var(--warna-tinta);font-weight:800;font-size:13px;
  padding:5px 16px;border-radius:999px;white-space:nowrap}
.paket-nama{font-size:20px;margin-bottom:2px}
.paket-cocok{font-size:14px;color:var(--warna-tinta-lembut);margin-bottom:14px;min-height:42px}
.paket-harga{font-size:32px;font-weight:800;color:var(--warna-primer)}
.paket-harga small{font-size:13px;font-weight:400;color:var(--warna-tinta-lembut);display:block}
.paket-harga-coret{display:block;font-size:13.5px;font-weight:600;color:var(--warna-tinta-lembut);margin-top:4px}
.paket-harga-coret s{text-decoration-color:var(--warna-tinta-lembut)}
.paket-tahunan{margin:10px 0 0;padding:9px 12px;background:#F5EFE6;border-radius:8px;font-size:13.5px;line-height:1.5;color:var(--warna-tinta)}
.paket-tahunan strong{white-space:nowrap}
.paket-tahunan span{color:var(--warna-tinta-lembut);font-size:12.5px}
.paket-fitur{list-style:none;margin:18px 0 22px;flex:1}
.paket-fitur li{padding:6px 0 6px 30px;position:relative;font-size:15px}
.paket-fitur li::before{content:"✔";position:absolute;left:2px;color:var(--warna-primer);font-weight:800}
.paket-catatan{margin-top:24px;padding:16px 20px;background:var(--warna-krem-tua);border-radius:12px;font-size:15px}

/* ---------- Strip fakta di hero harga (pengganti ilustrasi kartun) ---------- */
.fakta-strip{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0}
.fakta-strip li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--warna-garis);
  padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--warna-tinta);box-shadow:var(--bayangan)}
.fakta-strip li span{color:var(--warna-primer-teks);font-weight:800}

/* ---------- Langkah proses ---------- */
.langkah-grid{display:grid;gap:20px}
.langkah{display:flex;gap:16px;align-items:flex-start}
.langkah-no{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--warna-amber);
  color:var(--warna-tinta);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}

/* ---------- Testimoni placeholder ---------- */
.testi{background:var(--warna-krem-tua);border:2px dashed var(--warna-tinta-lembut);border-radius:var(--radius-kartu);
  padding:24px;color:var(--warna-tinta-lembut);font-style:italic}

/* ---------- FAQ ---------- */
.faq{border-bottom:1px solid var(--warna-garis)}
.faq summary{padding:16px 30px 16px 0;font-weight:700;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"▾";position:absolute;right:6px;color:var(--warna-primer);transition:.2s}
.faq[open] summary::after{transform:rotate(180deg)}
.faq p{padding:0 0 16px;color:var(--warna-tinta-lembut)}

/* ---------- CTA penutup ---------- */
/* Titik tengah gradient digeser lebih awal (35% bukan 60%) supaya area di bawah teks paragraf
   (yang duduk di tengah blok) jatuh di zona lebih gelap — kontras putih ≥4,5:1 terukur, bukan ditebak
   (lihat laporan Gerbang 4: putih di atas #E4572E murni cuma ~3,7:1, gagal untuk teks biasa). */
.cta-akhir{background:linear-gradient(135deg,var(--warna-primer),#d1491f 35%,var(--warna-primer-gelap));
  border-radius:20px;color:#fff;padding:40px 24px;text-align:center}
.cta-akhir h2{color:#fff;margin-bottom:10px}
.cta-akhir p{color:#fff;max-width:560px;margin:0 auto 24px}
.cta-akhir .btn-wa{background:#fff;color:var(--warna-wa-gelap)}
.cta-akhir .btn-wa:hover{background:var(--warna-krem)}
.cta-akhir .btn-sekunder{border-color:#fff;color:#fff}
.cta-akhir .btn-sekunder:hover{background:rgba(255,255,255,.12);color:#fff}
.cta-tombol{display:flex;flex-direction:column;gap:12px;align-items:center}

/* ---------- Form ---------- */
.form-grup{margin-bottom:18px}
.form-grup label{display:block;font-weight:700;margin-bottom:6px}
.wajib{color:var(--warna-error)}
input[type=text],input[type=tel],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--warna-garis);border-radius:10px;
  font:inherit;background:#fff;color:var(--warna-tinta)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(228,87,46,.25);border-color:var(--warna-primer)}
.form-bantuan{font-size:14px;color:var(--warna-tinta-lembut);margin-top:4px}
.form-error-teks{font-size:14px;color:var(--warna-error);margin-top:4px;font-weight:600}
.field-error{border-color:var(--warna-error) !important}
.form-ringkasan-error{background:var(--warna-error-bg);border-left:4px solid var(--warna-error);
  border-radius:10px;padding:14px 18px;margin-bottom:20px}
.form-ringkasan-error ul{margin:6px 0 0 18px}
.kartu-sukses{background:var(--warna-sukses-bg);border:1px solid var(--warna-sukses);border-radius:var(--radius-kartu);padding:28px;text-align:center}
.kartu-sukses h2{color:var(--warna-sukses)}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- Footer ---------- */
.site-footer{background:var(--warna-tinta);color:var(--warna-krem);padding:48px 0 90px;margin-top:64px}
.site-footer a{color:var(--warna-amber);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-grid{display:grid;gap:28px}
/* Di lebar menengah empat kolom jadi terlalu sempit; dua kolom lebih terbaca.
   Di HP tetap satu kolom (bawaan grid). */
@media(min-width:560px) and (max-width:767px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
.footer-judul{font-weight:800;font-size:18px;margin-bottom:10px;color:#fff}
.site-footer ul{list-style:none}
.site-footer li{padding:4px 0}
.footer-bawah{border-top:1px solid rgba(251,243,228,.2);margin-top:28px;padding-top:18px;font-size:14px;color:rgba(251,243,228,.75)}

/* ---------- Tombol WA mengambang ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;align-items:center;gap:10px;
  background:var(--warna-wa-gelap);color:#fff;border-radius:999px;width:60px;height:60px;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);text-decoration:none;transition:.15s}
.wa-float:hover{background:var(--warna-wa-gelap-hover);color:#fff;transform:scale(1.06)}
.wa-float .wa-teks{display:none;font-weight:700}
/* BUG-03 (gerbang 5): di kontak.php lebar <768px, WA-float terbukti menutupi field dropdown
   "Paket yang diminati" pada posisi gulir awal (getBoundingClientRect overlap, lihat
   docs/laporan-uji-gerbang5.md). Halaman ini sudah punya CTA WA sendiri di dalam konten
   (kartu "Lebih Suka Langsung Chat" + ikon WA di header mobile), jadi tombol mengambang di sini
   hanya menghalangi form, bukan menambah jalur baru — disembunyikan khusus di breakpoint ini,
   bukan dihapus dari desktop atau dari halaman lain. */
@media(max-width:767px){
  .hal-kontak .wa-float{display:none}
}

/* ---------- Breadcrumb & artikel ---------- */
.breadcrumb{font-size:14px;color:var(--warna-tinta-lembut);padding:16px 0}
.breadcrumb a{text-decoration:none}
.artikel-isi{max-width:720px}
/* BUG-01 (gerbang 5): sampul di atas judul artikel + satu gambar pendukung di tengah isi —
   lihat sampul_artikel()/gambar_artikel() di includes/tampilan.php. */
.artikel-sampul{margin:0 0 28px}
.artikel-gambar-tengah{margin:28px auto;max-width:420px}
.artikel-isi h2{margin:32px 0 12px}
.artikel-isi h3{margin:24px 0 10px}
.artikel-isi p{margin-bottom:16px}
.artikel-isi ul,.artikel-isi ol{margin:0 0 16px 22px}
.artikel-meta{color:var(--warna-tinta-lembut);font-size:14px;margin:8px 0 24px}

/* ---------- Responsive ---------- */
@media(min-width:768px){
  h1{font-size:44px}
  h2{font-size:32px}
  h3{font-size:20px}
  body{font-size:17px}
  .seksi{padding:96px 0}
  .container{padding:0 32px}
  .nav-toggle-btn{display:none}
  .nav-wa-mini{display:none}
  .nav-menu{display:flex !important;width:auto;padding:0;gap:6px;align-items:center}
  .nav-menu li a{padding:8px 12px}
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:end}
  .hero-cta{flex-direction:row}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .paket-grid{grid-template-columns:repeat(3,1fr)}
  .paket-unggulan{transform:scale(1.04)}
  .paket-unggulan:hover{transform:scale(1.04) translateY(-2px)}
  .langkah-grid{grid-template-columns:repeat(4,1fr)}
  .langkah{flex-direction:column}
  .cta-tombol{flex-direction:row;justify-content:center}
  /* Empat kolom, bukan tiga.

     Kolom "Jenis Usaha" ditambahkan 7 Sep 2026 tanpa memperbarui aturan ini,
     yang masih dipatok tiga kolom. Akibatnya kolom keempat (Kontak) terlempar
     ke baris berikutnya dan meninggalkan lubang kosong selebar setengah footer.

     Kolom merek diberi 1.6fr, bukan 2fr: dengan empat kolom, 2fr membuat tiga
     kolom tautan terlalu sempit sehingga nama panjang seperti "Praktik Dokter
     Spesialis" pecah jadi dua baris. */
  .footer-grid{grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;gap:32px}
  .wa-float{width:auto;padding:0 22px}
  .wa-float .wa-teks{display:inline}
  .form-baris-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .kontak-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
}

/* ============================================================
   Lapisan visual Dagangweb — tekstur, ilustrasi, variasi layout
   ============================================================ */

/* Garis warna merek di bawah header. Dulu gerigi tenda dari gambar SVG; pemilik tidak
   mau ada gambar vektor (11 Sep 2026), jadi tinggal dua warna rata dari CSS biasa. */
.site-header::after{
  content:"";display:block;height:5px;
  background:linear-gradient(90deg,var(--warna-primer,#E4572E) 0 50%,#F6AE2D 50% 100%);
  background-size:48px 5px;background-repeat:repeat-x;
}

/* Pola titik halus di hero (di atas krem, di bawah konten) */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(199,67,32,.08) 1.5px,transparent 1.5px);
  background-size:24px 24px;
}
.hero>.container{position:relative}

/* Tekstur anyaman tikar untuk seksi selang-seling (bukan blok polos) */
.seksi-selang{
  background-color:var(--warna-krem-tua);
  background-image:
    repeating-linear-gradient(45deg,rgba(51,38,26,.03) 0 2px,transparent 2px 13px),
    repeating-linear-gradient(-45deg,rgba(51,38,26,.03) 0 2px,transparent 2px 13px);
}

/* Logo */
.logo svg{flex:0 0 auto}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo span{font-weight:800;font-size:22px;color:#fff}

/* Ikon kartu memakai SVG khas (bukan emoji) */
.kartu-ikon{background:var(--warna-krem-tua)}
.kartu-ikon svg{display:block}

/* Layout split: foto/ilustrasi bersanding teks, selang kiri-kanan */
.split{display:grid;gap:28px;align-items:center}
.split .foto-kartu{margin:0}
.foto-kartu{border-radius:var(--radius-kartu);overflow:hidden;box-shadow:var(--bayangan-hover);
  border:4px solid #fff;background:var(--warna-krem-tua);line-height:0}
.foto-kartu img{width:100%;height:100%;object-fit:cover}
.foto-potret img{max-height:440px;object-position:center 35%}
.foto-kartu figcaption{line-height:1.5;font-size:13px;color:var(--warna-tinta-lembut);
  background:#fff;padding:8px 14px}
.daftar-ikon{list-style:none;display:grid;gap:18px;margin-top:20px}
.daftar-ikon li{display:flex;gap:14px;align-items:flex-start}
.daftar-ikon .kartu-ikon{flex:0 0 52px;margin-bottom:0}
.daftar-ikon h3{margin-bottom:4px}

/* Band foto full-bleed dengan kutipan */
.band-foto{position:relative;overflow:hidden;margin:0}
.band-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band-foto>img{filter:saturate(.85)}
.band-isi{position:relative;background:linear-gradient(rgba(51,38,26,.74),rgba(51,38,26,.84));
  padding:72px 0;color:var(--warna-krem);text-align:center}
.band-isi blockquote{max-width:680px;margin:0 auto;font-size:20px;font-weight:600;line-height:1.5}
.band-isi cite{display:block;margin-top:14px;font-style:normal;font-size:15px;color:var(--warna-amber)}

/* Langkah proses bergaya lintasan */
.langkah{position:relative}
.langkah .kartu-ikon{background:var(--warna-krem-tua);margin-bottom:10px}

/* Ilustrasi keadaan kosong & 404 */
.foto-kosong{max-width:320px;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin:0 auto 12px}
.foto-404{max-width:420px;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;margin:0 auto 14px}

@media(min-width:768px){
  .split{grid-template-columns:1fr 1fr;gap:48px}
  .split-balik .split-foto{order:2}
  /* Split dengan mockup HP (potret sempit) — kolom gambar dikecilkan supaya mockup tegak lurus
     tidak jadi sangat tinggi dan mendominasi baris dibanding kolom teks di sebelahnya. */
  .split-mockup{grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:center}
  .split-mockup .mockup-wrap{max-width:220px;margin:0 auto}
  .band-isi blockquote{font-size:24px}
  .langkah:not(:last-child)::before{content:"";position:absolute;top:21px;left:60px;right:-8px;
    border-top:3px dashed var(--warna-garis)}
}

/* ---------- Tambahan produksi ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--warna-tinta);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 10px 0}
.skip-link:focus{left:0;color:#fff}
/* Tangkapan layar demo, polos tanpa bingkai perangkat. Bingkai laptop/HP dulu digambar
   sebagai SVG; pemilik tidak mau ada gambar vektor (11 Sep 2026). object-position:top
   memastikan yang terlihat selalu bagian atas halaman, bukan tengahnya. */
.porto-thumb{border-radius:10px;background:var(--warna-krem);width:100%;height:auto;aspect-ratio:1000/683;object-fit:cover;object-position:top;border:1px solid var(--warna-garis)}
.mockup-wrap{border-radius:10px;background:var(--warna-krem);width:100%;height:auto;aspect-ratio:1000/683;object-fit:cover;object-position:top;border:1px solid var(--warna-garis);box-shadow:0 10px 26px rgba(51,38,26,.12)}
/* Tangkapan layar HP sangat tegak (500x1923). Dipotong setinggi satu layar HP dan lebarnya
   dibatasi — tanpa ini gambarnya ikut melebar penuh kolom dan jadi setinggi hampir 2 meter layar. */
.mockup-wrap-potret{aspect-ratio:9/16;max-width:260px;margin-left:auto;margin-right:auto}
.kartu-kosong{background:var(--warna-krem-tua);border:2px dashed var(--warna-tinta-lembut);border-radius:var(--radius-kartu);padding:36px 24px;text-align:center}

/* Galeri bento (kotak beda ukuran) — pengganti grid 3-kolom seragam di portofolio */
.bento-grid{display:grid;gap:20px}
.bento-item{display:flex;flex-direction:column}
.bento-item .porto-thumb{flex:1}
@media(min-width:768px){
  .bento-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(160px,auto);gap:24px}
  .bento-item{grid-column:span 2}
  .bento-besar{grid-column:span 2;grid-row:span 2}
  /* Kartu unggulan bento memakai kolom tinggi (span 2 baris grid) untuk efek "besar", tapi mockup
     laptop berasio landscape (16:10-an) tak pernah butuh setinggi itu — kalau porto-thumb dipaksa
     flex:1 mengisi penuh (aturan .bento-item .porto-thumb di atas), object-fit:contain menyisakan
     ruang kosong senada latar di sekeliling gambar dan terlihat seperti kotak kosong/rusak. Di sini
     tinggi gambar dibatasi wajar (bukan flex:1, jadi tak ikut memenuhi tinggi kolom) dan sisa ruang
     tinggi kartu jatuh sebagai jarak napas di BAWAH teks (perilaku flex default: justify-content
     flex-start membariskan img→judul→teks rapat ke atas), bukan sebagai rongga kosong di sekitar gambar. */
  .bento-besar .porto-thumb{aspect-ratio:16/10;height:auto;max-height:420px;flex:0 0 auto;
    background:linear-gradient(180deg,var(--warna-krem-tua),var(--warna-krem) 65%)}
  .bento-lebar{grid-column:span 2}
}
@media(min-width:1024px){
  .bento-besar{grid-column:span 2;grid-row:span 2}
  .bento-item:not(.bento-besar){grid-column:span 2}
}

/* Galeri mockup beranda: pecah simetri 3-kolom sama besar */
.mockup-bento{display:grid;gap:20px}
@media(min-width:768px){
  .mockup-bento{grid-template-columns:1.3fr 1.3fr 1fr;align-items:end}
}

/* Baris layanan berselang-seling (pengganti grid 3-kartu seragam di beranda) —
   tiga kerangka BEDA sengaja: kartu foto putih, mockup perangkat, gambar polos tanpa bingkai */
.layanan-baris{display:grid;gap:0}
.layanan-baris > *{padding:18px 0}
.layanan-baris > *:first-child{padding-top:0}
.layanan-baris > *:not(:last-child){border-bottom:1px solid var(--warna-garis)}
.layanan-row-besar .split-foto img{max-width:200px;margin:0 auto}
.layanan-row-mockup .mockup-wrap{max-width:130px;margin:0 auto}
.layanan-row-polos{display:grid;gap:18px;align-items:center}
.layanan-row-polos img{max-width:190px;height:auto;margin:0 auto;transform:rotate(-2deg)}
@media(min-width:768px){
  .layanan-row-polos{grid-template-columns:.4fr 1fr;gap:28px}
  .layanan-row-polos img{margin:0}
}

/* Kartu kontak gabungan (pengganti dua kartu terpusat berulang) */
.kontak-info{text-align:left}
.kontak-info-atas{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.kontak-info-atas img{flex:0 0 auto;width:76px;height:57px;border-radius:8px;object-fit:cover}
.kontak-info-jam{display:flex;gap:12px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--warna-garis)}
.kontak-info-jam img{flex:0 0 64px;height:40px;object-fit:contain}
.kontak-info-jam-teks .ikon{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--warna-krem-tua);
  display:flex;align-items:center;justify-content:center;font-size:18px}
@media(min-width:900px){
  .foto-offset{margin-right:-28px}
}

/* Seksi yang diikuti tombol WA melayang di mobile: beri napas bawah supaya tak tumpang tindih */
@media(max-width:767px){
  .seksi-akhir-cta{padding-bottom:104px}
}

/* ---------- Blok "Garansi & Janji Kami" (pengganti testimoni saat belum ada klien) ---------- */
.garansi-blok{background:#fff;border:1px solid var(--warna-garis);border-radius:var(--radius-kartu);
  box-shadow:var(--bayangan);padding:32px 28px;display:grid;gap:24px}
.garansi-item{display:flex;gap:14px;align-items:flex-start}
.garansi-item .kartu-ikon{flex:0 0 44px;width:44px;height:44px;margin-bottom:0}
.garansi-badge{display:inline-flex;align-items:center;gap:8px;background:var(--warna-amber);
  color:var(--warna-tinta);font-weight:800;font-size:13px;padding:6px 16px;border-radius:999px;margin-bottom:14px}
@media(min-width:768px){
  .garansi-blok{grid-template-columns:repeat(3,1fr);padding:40px 36px}
}

/* Kredit foto stok — satu baris kecil di footer, bukan di bawah tiap gambar (lihat kritik-pembeli KRITIK-09) */

/* ============================================================
   Animasi — reveal saat masuk layar, hover mikro, angka menghitung
   WAJIB nonaktif total di prefers-reduced-motion: reduce
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .4s ease-out,transform .4s ease-out}
.reveal.reveal-terlihat{opacity:1;transform:translateY(0)}
.reveal-stagger.reveal-terlihat > *{opacity:0;transform:translateY(16px);
  animation:reveal-naik .45s ease-out forwards}
.reveal-stagger.reveal-terlihat > *:nth-child(1){animation-delay:.03s}
.reveal-stagger.reveal-terlihat > *:nth-child(2){animation-delay:.11s}
.reveal-stagger.reveal-terlihat > *:nth-child(3){animation-delay:.19s}
.reveal-stagger.reveal-terlihat > *:nth-child(4){animation-delay:.27s}
.reveal-stagger.reveal-terlihat > *:nth-child(5){animation-delay:.35s}
.reveal-stagger.reveal-terlihat > *:nth-child(6){animation-delay:.43s}
@keyframes reveal-naik{to{opacity:1;transform:translateY(0)}}

/* Ping halus di ilustrasi hero — menandai "Pesanan baru!" yang sudah tergambar di SVG */
.hero-ilustrasi-wrap{position:relative;margin:0 auto;max-width:460px;width:100%}
.hero-ilustrasi-wrap .hero-ilustrasi{margin:0}
.hero-ping{position:absolute;left:68%;top:23.5%;width:13px;height:13px;border-radius:50%;
  background:var(--warna-wa-gelap);pointer-events:none;animation:ping-cincin 2s ease-out infinite}
@keyframes ping-cincin{
  0%{box-shadow:0 0 0 0 rgba(29,168,81,.55)}
  70%{box-shadow:0 0 0 15px rgba(29,168,81,0)}
  100%{box-shadow:0 0 0 0 rgba(29,168,81,0)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important
  }
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important}
  .hero-ping{animation:none;box-shadow:none}
}

/* ============================================================
   BERANDA BARU (Gerbang 4) — 1:1 dari design/mockup-beranda.html
   Semua selektor di bawah DISENGAJA di-scope dengan .dw-home supaya
   tidak menabrak gaya generik di atas yang masih dipakai halaman lain
   (layanan/harga/portofolio/kontak). Token warna memakai nama singkat
   sesuai mockup, didefinisikan ulang di lingkup .dw-home saja.
   ============================================================ */
.dw-home{
  --primer:#E4572E;--primer-gelap:#C74320;--amber:#F6AE2D;
  --krem:#FBF3E4;--krem-tua:#F3E6CE;--kartu:#FFFFFF;
  --tinta:#33261A;--tinta-lembut:#6B5A48;--garis:#E8D9BF;
  /* Sama seperti --warna-wa-gelap global (lihat :root): #1DA851 lama gagal kontras AA (3,10:1
     dengan putih). Token lokal ini terpisah dari :root dan sempat terlewat sesi lalu — BUG-05. */
  --wa:#25D366;--wa-gelap:#12803D;--wa-gelap-hover:#0E6930;
  --bayangan:0 10px 30px rgba(51,38,26,.10);
  --bayangan-kuat:0 18px 44px rgba(51,38,26,.18);
  background:var(--krem);
}
.dw-home .foto-warm{filter:saturate(1.08) contrast(1.03) brightness(1.02)}
.dw-home h1,.dw-home h2,.dw-home h3{line-height:1.16;color:var(--tinta);font-weight:800}
.dw-home .seksi{padding:76px 0}
.dw-home .seksi-tua{background:var(--krem-tua)}
/* Jeda kontras gelap di tengah halaman (seksi Bukti) — sama seperti footer, memutus rentang
   panjang berlatar krem/krem-tua. Semua turunan teks/kartu di dalamnya ikut disesuaikan,
   bukan cuma latar diganti. Kontras diukur: putih 85% di atas #33261A ≈ 11:1, amber di atas
   #33261A ≈ 7,7:1 — jauh di atas ambang 4,5:1. */
.dw-home .seksi-gelap{background:var(--tinta)}
.dw-home .seksi-gelap h2{color:#fff}
.dw-home .seksi-gelap .bukti-pull{color:#fff}
.dw-home .seksi-gelap .bukti-pull b{color:var(--amber)}
.dw-home .seksi-gelap .bukti-body,
.dw-home .seksi-gelap .bukti-lokasi{color:rgba(255,255,255,.85)}
.dw-home .seksi-gelap .testi-ganti{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.35)}
.dw-home .seksi-gelap .testi-ganti .cap{background:var(--amber);color:var(--tinta)}
.dw-home .seksi-gelap .testi-ganti h3{color:#fff}
.dw-home .seksi-gelap .testi-ganti p{color:rgba(255,255,255,.85)}
.dw-home .judul-l{font-size:22px;max-width:640px}
.dw-home .sub-seksi{color:var(--tinta-lembut);font-size:15.5px;max-width:600px;margin-top:10px}
.dw-home .mikrocopy{font-size:13.5px;color:var(--tinta-lembut);margin-top:12px}
/* rgba(255,255,255,.82) terukur cuma ~3,8:1 di atas gradient primer-gelap — gagal 4,5:1 untuk teks
   kecil. Putih penuh di sini terukur ~4,94:1 (lihat laporan Gerbang 4). */
.dw-home .mikrocopy.terang{color:#fff}
@media(min-width:860px){ .dw-home .judul-l{font-size:26px} }

/* Tombol dipakai ulang dari .btn/.btn-wa/.btn-primer/.btn-sekunder global — hanya tambahan mini.
   btn-sekunder di beranda memakai outline tinta gelap (bukan oranye) sesuai style-guide §5. */
.dw-home .btn-mini{padding:10px 18px;font-size:14.5px;min-height:auto;border-radius:999px;background:var(--tinta);color:#fff;font-weight:700}
.dw-home .btn-sekunder{border-color:var(--tinta);color:var(--tinta)}
.dw-home .btn-sekunder:hover{background:rgba(51,38,26,.06);color:var(--tinta)}
/* .btn-primer SENGAJA tidak di-override ke var(--primer) (#E4572E): putih di atasnya cuma ~3,68:1,
   gagal 4,5:1 untuk label tombol 16px bold. Dibiarkan memakai warna global --warna-primer-gelap
   (#C74320, sama dengan token --primer-gelap di sini) yang terukur ~4,94:1 — beda visual nyaris tak
   terlihat, kontras terukur aman. */

/* ===== 1. HERO SLIDER ===== */
.dw-home .hero-dw{padding:52px 0 60px;position:relative;overflow:hidden}
.dw-home .hero-dw::before{content:"";position:absolute;top:-160px;right:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--amber),var(--primer));opacity:.14;pointer-events:none}
.dw-home .hero-slider{border-radius:24px}
/* Hukum #1: tanpa JS semua slide tampil (stack), TIDAK display:none.
   Hanya saat .js aktif, JS mengambil alih dan CSS menyembunyikan slide non-aktif. */
.dw-home .slide{padding-bottom:34px;border-bottom:1px dashed var(--garis);margin-bottom:34px}
.dw-home .slide:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.js .dw-home .slide{display:none;padding:0;border:0;margin:0}
.js .dw-home .slide.aktif{display:block}
.dw-home .slide-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:6px}
.dw-home .slide-grid>*{min-width:0}
.dw-home .slide-teks .no-slide{font-size:13px;font-weight:800;color:var(--tinta-lembut);letter-spacing:.06em;margin-bottom:14px}
.dw-home .slide-teks h1,.dw-home .slide-teks>h2{font-size:30px;letter-spacing:-.01em;margin-bottom:18px;overflow-wrap:break-word}
.dw-home .slide-teks h1 .sorot-dw,.dw-home .slide-teks>h2 .sorot-dw{color:var(--primer)}
.dw-home .slide-sub{font-size:15.5px;color:var(--tinta-lembut);max-width:520px;margin-bottom:26px}
.dw-home .slide-foto{position:relative}
.dw-home .slide-foto .bingkai{border-radius:22px;overflow:hidden;box-shadow:var(--bayangan-kuat);aspect-ratio:4/5;background:#e7d9bc}
.dw-home .slide-foto img{width:100%;height:100%;object-fit:cover}

.dw-home .hero-nav{display:flex;align-items:center;justify-content:space-between;margin-top:30px;flex-wrap:wrap;gap:14px}
.dw-home .dots{display:flex;gap:9px}
/* BUG-04 (gerbang 5): titik navigasi visualnya sengaja kecil (10px/26x10px), tapi area sentuh
   wajib >=44px (spesifikasi §7). ::before menambah area sentuh transparan tanpa mengubah ukuran
   tampak — teknik standar, bukan memperbesar dot itu sendiri. */
.dw-home .dots button{position:relative;width:10px;height:10px;padding:0;border-radius:50%;background:#DCC9A8;display:block;transition:.2s;border:0;cursor:pointer}
.dw-home .dots button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.dw-home .dots button.aktif{background:var(--primer);width:26px;border-radius:6px}
.dw-home .slide-peek{display:flex;gap:22px;font-size:13px;color:var(--tinta-lembut);flex-wrap:wrap}
.dw-home .slide-peek b{color:var(--tinta);font-weight:700}

/* ===== 2. SEBELUM/SESUDAH ===== */
.dw-home .ss-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:22px;overflow:hidden;box-shadow:var(--bayangan);position:relative;margin-top:34px}
.dw-home .ss-panel{position:relative;min-width:0}
.dw-home .ss-panel img{width:100%;height:380px;object-fit:cover;display:block}
.dw-home .ss-panel .label{position:absolute;top:18px;left:18px;background:rgba(51,38,26,.82);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;border-radius:999px}
/* BUG-06 (gerbang 5): putih di atas var(--primer) #E4572E murni terukur 3,68:1, gagal 4,5:1 untuk
   label 12,5px. var(--primer-gelap) #C74320 terukur 4,94:1 — lolos, beda visual nyaris tak terlihat. */
.dw-home .ss-panel.sesudah .label{background:var(--primer-gelap)}
.dw-home .ss-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;width:64px;height:64px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.22);font-size:26px;color:var(--tinta);font-weight:800}
.dw-home .ss-caption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:14px}
.dw-home .ss-caption p{font-size:14px;color:var(--tinta-lembut);padding:0 4px;min-width:0}
.dw-home .ss-caption p:first-child{padding-right:28px}
.dw-home .ss-caption p:last-child{padding-left:28px}
.dw-home .ss-para{margin-top:30px;font-size:16.5px;max-width:820px;color:var(--tinta)}
.dw-home .ss-cta{margin-top:28px}

/* ===== 3. GALERI DEMO (bento) ===== */
.dw-home .galeri-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.dw-home .bento{display:flex;flex-direction:column;gap:22px;margin-top:36px}
.dw-home .demo-kartu{background:var(--kartu);border-radius:22px;overflow:hidden;border:1px solid var(--garis);box-shadow:var(--bayangan);display:flex;flex-direction:column;min-width:0}
.dw-home .demo-kartu .layar{background:linear-gradient(160deg,#EFE2C7,#E6D6B4);padding:22px 22px 0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.dw-home .demo-kartu.kecil .layar{min-height:150px;padding:16px 16px 0}
.dw-home .demo-kartu .layar img{width:100%;height:auto;display:block;border-radius:10px 10px 0 0;box-shadow:0 -4px 22px rgba(51,38,26,.16)}
.dw-home .demo-featured .layar img{border-radius:10px}
.dw-home .demo-kartu .isi{padding:22px 24px 24px}
/* #C74320 (primer-gelap) di atas #FCE6DA cuma ~4,11:1 — di bawah 4,5:1 untuk teks 11,5px.
   #A8330F (setara --warna-primer-teks global) di atas #FCE6DA terukur ~5,55:1. */
.dw-home .demo-tag{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#A8330F;background:#FCE6DA;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.dw-home .demo-kartu h3{font-size:17px;margin-bottom:8px}
.dw-home .demo-kartu.kecil h3{font-size:16px}
.dw-home .demo-kartu p{font-size:14.5px;color:var(--tinta-lembut);margin-bottom:16px}
.dw-home .demo-kartu.kecil p{font-size:13.5px;margin-bottom:12px}
.dw-home .demo-link{font-weight:800;color:var(--primer-gelap);font-size:14.5px;display:inline-flex;align-items:center;gap:6px}

.dw-home .demo-featured{display:grid;grid-template-columns:1.25fr 1fr}
.dw-home .demo-featured>*{min-width:0}
.dw-home .demo-featured .layar{padding:28px 12px 28px 28px;min-height:340px;align-items:center}
.dw-home .demo-featured .isi{padding:20px 40px 20px 24px;justify-content:center}
.dw-home .demo-featured h3{font-size:22px}
.dw-home .demo-featured p{font-size:15.5px}
.dw-home .bento-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.dw-home .galeri-catatan{margin-top:26px;font-size:13.5px;color:var(--tinta-lembut);max-width:760px;border-left:3px solid var(--amber);padding-left:16px}

/* ===== 4. PROSES 3 LANGKAH (timeline) ===== */
.dw-home .proses-wrap{margin-top:52px;position:relative}
.dw-home .proses-garis{position:absolute;top:27px;left:6%;right:6%;height:3px;background:repeating-linear-gradient(90deg,var(--garis) 0 10px,transparent 10px 18px)}
.dw-home .proses-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative}
.dw-home .langkah-dw{display:flex;flex-direction:column;min-width:0}
.dw-home .langkah-no-dw{width:56px;height:56px;border-radius:50%;background:var(--amber);color:var(--tinta);font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 6px 16px rgba(246,174,45,.4);position:relative;z-index:2}
.dw-home .langkah-dw:nth-child(2){margin-top:34px}
.dw-home .langkah-dw h3{font-size:18.5px;margin-bottom:10px}
.dw-home .langkah-dw p{font-size:14.5px;color:var(--tinta-lembut)}
.dw-home .proses-info{margin-top:44px;background:#fff;border:1px solid var(--garis);border-radius:18px;padding:24px 28px;display:flex;gap:18px;align-items:flex-start;max-width:900px}
.dw-home .proses-info .ikon{width:40px;height:40px;border-radius:50%;background:var(--krem-tua);display:flex;align-items:center;justify-content:center;flex:none;font-size:18px}
.dw-home .proses-info p{font-size:14.5px;color:var(--tinta-lembut)}
.dw-home .proses-cta{margin-top:34px}

/* ===== 5. HARGA ===== */
.dw-home .harga-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:38px;align-items:stretch}
.dw-home .paket-dw{background:#fff;border:1.5px solid var(--garis);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;position:relative;box-shadow:var(--bayangan);min-width:0}
.dw-home .paket-dw.unggulan{border:2.5px solid var(--amber);box-shadow:var(--bayangan-kuat);transform:translateY(-10px)}
.dw-home .paket-badge-dw{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--tinta);font-weight:800;font-size:12.5px;padding:6px 16px;border-radius:999px;white-space:nowrap}
.dw-home .paket-nama-dw{font-size:20px;margin-bottom:6px}
.dw-home .paket-desc-dw{font-size:14px;color:var(--tinta-lembut);margin-bottom:16px;min-height:40px}
.dw-home .paket-harga-dw{margin-bottom:18px}
.dw-home .paket-harga-dw > span:first-child{display:block;font-size:30px;font-weight:800;color:var(--primer-gelap)}
.dw-home .paket-harga-coret-dw{display:block;font-size:13.5px;font-weight:600;color:var(--tinta-lembut);margin-top:4px}
.dw-home .paket-harga-coret-dw s{text-decoration-color:var(--tinta-lembut)}
.dw-home .paket-fitur-dw{list-style:none;margin-bottom:24px;flex:1}
.dw-home .paket-fitur-dw li{font-size:14.5px;padding:7px 0 7px 26px;position:relative}
.dw-home .paket-fitur-dw li::before{content:"✔";position:absolute;left:0;color:var(--primer);font-weight:800}
.dw-home .harga-bawah{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:44px}
.dw-home .harga-bawah .blok h4{font-size:15px;margin-bottom:8px;color:var(--tinta)}
.dw-home .harga-bawah .blok p{font-size:14.5px;color:var(--tinta-lembut)}
/* Stop kedua digeser ke 30% (bukan gradient 2-titik polos) supaya sebagian besar kotak — termasuk
   area di bawah paragraf — jatuh di primer-gelap (putih ~4,94:1) bukan primer murni (putih ~3,68:1,
   gagal untuk teks 15px biasa). Judul h3 di dekat sudut primer masih aman karena besar+tebal (≥3:1). */
.dw-home .jaminan{margin-top:38px;background:linear-gradient(135deg,var(--primer) 0%,var(--primer-gelap) 30%);color:#fff;border-radius:22px;padding:40px 44px;position:relative;overflow:hidden}
.dw-home .jaminan::before{content:"\201C";position:absolute;top:-30px;left:20px;font-size:180px;font-weight:800;color:rgba(255,255,255,.12);line-height:1;font-family:Georgia,serif}
.dw-home .jaminan h3{color:#fff;font-size:21px;margin-bottom:14px;position:relative;max-width:640px}
.dw-home .jaminan p{color:#fff;font-size:15px;max-width:680px;position:relative}
.dw-home .harga-cta{margin-top:34px}

/* ===== 6. BUKTI & WAJAH ===== */
.dw-home .bukti-wrap{max-width:840px}
.dw-home .bukti-pull{font-size:21px;font-weight:700;line-height:1.45;color:var(--tinta);margin-bottom:20px}
.dw-home .bukti-pull b{color:var(--primer-gelap)}
.dw-home .bukti-body{font-size:15.5px;color:var(--tinta-lembut);margin-bottom:14px}
.dw-home .bukti-lokasi{font-size:14px;color:var(--tinta-lembut);margin-bottom:34px}
.dw-home .testi-ganti{background:#fff;border:1.5px dashed #C9A876;border-radius:20px;padding:30px 34px;position:relative}
/* #B5711A di atas #FCEFD9 cuma ~3,46:1 — di bawah 4,5:1. #8A5714 terukur ~5,35:1. */
.dw-home .testi-ganti .cap{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8A5714;background:#FCEFD9;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.dw-home .testi-ganti h3{font-size:19px;margin-bottom:12px}
.dw-home .testi-ganti p{font-size:14.5px;color:var(--tinta-lembut)}
.dw-home .bukti-cta{margin-top:26px}
@media(min-width:860px){ .dw-home .bukti-pull{font-size:24px} }

/* ===== 7. JENIS USAHA ===== */
.dw-home .usaha-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.dw-home .usaha-item{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1;box-shadow:0 4px 14px rgba(51,38,26,.10);min-width:0}
.dw-home .usaha-item img{width:100%;height:100%;object-fit:cover}
.dw-home .usaha-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(51,38,26,.82) 0%,rgba(51,38,26,.15) 45%,transparent 70%)}
.dw-home .usaha-item .nama{position:absolute;left:14px;bottom:12px;color:#fff;font-weight:700;font-size:14.5px;z-index:2}
.dw-home .usaha-item .no{position:absolute;right:12px;top:12px;color:rgba(255,255,255,.85);font-size:12px;font-weight:800;z-index:2}
.dw-home .usaha-note{margin-top:22px;font-size:14px;color:var(--tinta-lembut)}

/* ===== 8. AJAKAN TERAKHIR ===== */
/* Titik tengah gradient di 35% (bukan 55%) + teks putih penuh (bukan rgba .92): kontras terukur
   ≥4,48:1 tepat di area tengah blok tempat paragraf duduk (putih di atas #E4572E murni cuma ~3,7:1,
   gagal untuk teks biasa — dihitung, bukan ditebak). Judul (h2, besar+tebal) tetap aman di ambang 3:1. */
.dw-home .ajakan-dw{position:relative;background:linear-gradient(135deg,var(--primer) 0%,#D1491F 35%,var(--primer-gelap) 100%);color:#fff;border-radius:22px;overflow:hidden;margin-top:0}
.dw-home .ajakan-dot{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.6px,transparent 1.6px);background-size:26px 26px;opacity:.5}
.dw-home .ajakan-inner{position:relative;text-align:center;max-width:640px;margin:0 auto;padding:80px 24px}
.dw-home .ajakan-inner h2{color:#fff;font-size:26px;margin-bottom:18px}
.dw-home .ajakan-inner p{color:#fff;font-size:16.5px;margin-bottom:30px}
.dw-home .ajakan-inner .btn-wa{background:#fff;color:var(--wa-gelap);font-size:17px;padding:17px 36px}
.dw-home .ajakan-inner .btn-wa:hover{background:var(--krem)}
@media(min-width:860px){ .dw-home .ajakan-inner h2{font-size:34px} }

/* ===================== RESPONSIVE (mobile-first override desktop di atas) ===================== */
@media(max-width:859px){
  .dw-home .slide-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .dw-home .slide-foto{order:-1;max-width:340px;margin:0 auto}
  .dw-home .hero-nav{flex-direction:column;align-items:flex-start}
  /* slide-peek disembunyikan di HP. Di layar lebar ia duduk mendatar di samping
     titik navigasi sebagai petunjuk halus isi slide lain. Ditumpuk vertikal di HP
     ia berubah jadi tiga baris daftar yang terbaca seperti sisa uji coba — dan
     nama personanya ("Mbak Dina") tidak berarti apa pun bagi pengunjung baru.
     Titik navigasinya sudah cukup menunjukkan posisi slide. */
  .dw-home .slide-peek{display:none}
  /* Setelah slide-peek disembunyikan, sisa ruang di bawah titik navigasi terasa
     menganga. Diukur 7 Sep 2026 di lebar 390px: hero 26px + seksi 76px = 102px
     kosong antara titik navigasi dan judul berikutnya. Di layar setinggi 800px
     jarak sebesar itu terbaca seperti halaman sudah habis, dan sebagian orang
     berhenti menggulir di situ. */
  .dw-home .hero-dw{padding-bottom:16px}
  .dw-home .hero-nav{margin-top:18px}

  /* Jarak antar-seksi 76px atas + 76px bawah = 152px di layar HP. Angka itu lahir
     dari tata letak desktop tiga kolom; di satu kolom selebar 390px ia jadi lompatan
     kosong yang memutus alur baca. 44px menyisakan napas tanpa memutus. */
  .dw-home .seksi{padding:44px 0}

  .dw-home .ss-grid{grid-template-columns:minmax(0,1fr)}
  .dw-home .ss-panel img{height:220px}
  .dw-home .ss-caption{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px}
  .dw-home .ss-caption p{padding:0 !important}

  .dw-home .demo-featured{grid-template-columns:minmax(0,1fr)}
  .dw-home .demo-featured .layar{min-height:auto;padding:22px 22px 0}
  .dw-home .demo-featured .isi{padding:22px 24px 24px}
  .dw-home .demo-kartu.kecil .layar{min-height:auto}
  .dw-home .bento-pair{grid-template-columns:minmax(0,1fr);gap:22px}

  .dw-home .proses-garis{display:none}
  .dw-home .proses-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .dw-home .langkah-dw:nth-child(2),.dw-home .langkah-dw:nth-child(3){margin-top:0}

  .dw-home .harga-grid{grid-template-columns:minmax(0,1fr)}
  .dw-home .paket-dw.unggulan{transform:none;order:-1}
  .dw-home .harga-bawah{grid-template-columns:minmax(0,1fr);gap:24px}
  .dw-home .jaminan{padding:30px 24px}
  .dw-home .jaminan h3{font-size:19px}

  .dw-home .usaha-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .dw-home .usaha-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ============================================================
   Halaman pendaratan per jenis usaha (usaha.php, jasa-website.php)
   ------------------------------------------------------------
   Ditulis di akhir berkas dengan sengaja: aturan di sini tidak boleh kalah
   oleh aturan umum yang berada lebih bawah, dan menaruhnya paling akhir
   membuat urutan cascade berpihak padanya tanpa perlu menaikkan bobot
   pemilih dengan cara yang aneh.
   ============================================================ */
.lp-hero{background:var(--warna-krem-tua);padding:52px 0 44px;border-bottom:1px solid var(--warna-garis)}
/* Batas lebar dipasang pada teksnya, BUKAN pada .container. .container sudah
   memakai margin otomatis, jadi menambahkan max-width padanya ikut menggeser
   tepi kirinya ke tengah — dan hero jadi tidak sejajar dengan judul seksi di
   bawahnya. Terlihat saat memeriksa tangkapan layar 7 Sep 2026. */
.lp-hero h1,.lp-pembuka,.lp-hero-isi > .lp-kicir{max-width:720px}
.lp-kicir{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warna-primer-teks);margin:0 0 10px}
.lp-hero h1{margin:0 0 14px}
.lp-pembuka{font-size:17px;line-height:1.75;color:var(--warna-tinta-lembut);margin:0}
.lp-aksi{margin:26px 0 0}
.lp-mikro{font-size:13px;color:var(--warna-tinta-lembut);margin:9px 0 0}

/* Tiga janji yang paling sering jadi penentu, ditaruh di layar pertama supaya
   pengunjung tidak perlu menggulir untuk tahu ini terjangkau atau tidak. */
.lp-poin-cepat{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:9px}
.lp-poin-cepat li{background:var(--warna-kartu);border:1px solid var(--warna-garis);
  border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600}

/* Daftar masalah memakai penanda netral, bukan centang. Centang berarti "sudah
   beres" — dipakai pada daftar keluhan, ia mengirim pesan yang berlawanan. */
.lp-daftar-masalah,.lp-daftar-isi{list-style:none;padding:0;margin:18px 0 0;max-width:760px}
.lp-daftar-masalah li,.lp-daftar-isi li{position:relative;padding:11px 0 11px 30px;
  border-bottom:1px solid var(--warna-garis);line-height:1.65}
.lp-daftar-masalah li:last-child,.lp-daftar-isi li:last-child{border-bottom:0}
.lp-daftar-masalah li::before{content:"";position:absolute;left:6px;top:19px;
  width:7px;height:7px;border-radius:50%;background:var(--warna-amber)}
.lp-daftar-isi li::before{content:"✓";position:absolute;left:2px;top:10px;
  color:var(--warna-primer);font-weight:800}
.lp-catatan{margin-top:18px;font-size:14px;color:var(--warna-tinta-lembut);max-width:640px}

.lp-harga-kotak{background:var(--warna-kartu);border:1px solid var(--warna-garis);
  border-radius:16px;padding:26px 26px 22px;max-width:520px}
.lp-harga-label{font-size:13px;color:var(--warna-tinta-lembut);margin:0}
.lp-harga-nama{font-size:19px;font-weight:800;margin:4px 0 2px}
.lp-harga-angka{font-size:38px;font-weight:800;color:var(--warna-primer);margin:6px 0 0;line-height:1.1}
.lp-harga-ket{font-size:13.5px;color:var(--warna-tinta-lembut);margin:4px 0 12px}
.lp-harga-rawat{font-size:13.5px;margin:0 0 18px;padding-top:12px;border-top:1px dashed var(--warna-garis)}

.lp-penutup{text-align:center}
.lp-penutup p{max-width:560px;margin-left:auto;margin-right:auto}

.lp-lain-daftar{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:9px}
.lp-lain-daftar a{display:inline-block;background:var(--warna-kartu);
  border:1px solid var(--warna-garis);border-radius:999px;padding:9px 16px;
  font-size:14px;font-weight:600;color:var(--warna-tinta);text-decoration:none}
.lp-lain-daftar a:hover{border-color:var(--warna-primer);color:var(--warna-primer-teks)}

.lp-induk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.lp-induk-kartu{display:flex;flex-direction:column;gap:8px;background:var(--warna-kartu);
  border:1px solid var(--warna-garis);border-radius:14px;padding:20px;
  text-decoration:none;color:var(--warna-tinta);transition:border-color .18s,transform .18s}
.lp-induk-kartu:hover{border-color:var(--warna-primer);transform:translateY(-2px)}
.lp-induk-kartu h2{font-size:18px;margin:0}
.lp-induk-kartu p{font-size:14px;line-height:1.6;color:var(--warna-tinta-lembut);margin:0;flex:1}
.lp-induk-tautan{font-size:13.5px;font-weight:700;color:var(--warna-primer-teks)}

@media(max-width:767px){
  .lp-hero{padding:34px 0 30px}
  .lp-hero h1{font-size:26px;line-height:1.25}
  .lp-pembuka{font-size:15.5px}
  .lp-harga-angka{font-size:32px}
  .lp-induk-grid{grid-template-columns:minmax(0,1fr)}
}

/* Gambar bukti di halaman jenis usaha. width/height ditulis di HTML supaya
   peramban menyediakan ruangnya sebelum gambar termuat — tanpa itu, isi halaman
   melompat saat gambar datang, dan lompatan itu ikut menurunkan nilai Core Web
   Vitals. Batas lebar dipasang agar mockup tidak melar di layar besar. */
.lp-bukti-gambar{display:block;width:100%;max-width:760px;height:auto;
  border-radius:14px;margin-top:18px}

/* Galeri bukti di halaman jenis usaha: DUA BARIS BERBENTUK SERAGAM.

   Riwayat singkat, supaya jalan buntu yang sama tidak diulang:

   1. Versi pertama memajang gambar pertama selebar penuh. Satu tangkapan layar
      raksasa memaksa pengunjung menggulir jauh sebelum sampai ke harga.
   2. Versi kedua memakai kolom CSS (columns:3). Kolom memang menyusun rapat
      mengikuti tinggi masing-masing gambar, tapi TEPI BAWAHNYA bergerigi:
      diukur di 1440px, kolom terpendek berakhir 243px di atas kolom terpanjang,
      dan karena tombol di bawahnya cuma selebar 200px di sisi kiri, dua pertiga
      lebar halaman terlihat kosong sejauh ~508px sampai judul seksi berikutnya.
      Itulah "ruang kosong 300-350px" yang dikeluhkan.

   Penyebab aslinya bukan jarak antarseksi, melainkan bentuk isinya yang
   bercampur: tangkapan layar komputer mendatar (1000x683, kadang 1000x358)
   berdampingan dengan tangkapan layar HP yang sangat tegak (500x1900). Selama
   keduanya diadu dalam satu aliran - kolom maupun grid - selalu ada sisa.

   Perbaikannya: pisahkan menurut bentuk. Satu baris berisi gambar mendatar
   saja, satu baris berisi gambar tegak saja. Karena tiap baris seragam, tinggi
   kartunya bisa dikunci dengan aspect-ratio dan tepi bawahnya rata sempurna.
   Urutannya pun jadi lebih jujur dibaca: "begini di komputer", lalu "begini di
   HP". Tombol ajakan ikut masuk ke sel kosong di baris kedua, bukan berdiri
   sendiri di satu baris penuh yang menyisakan ruang kosong di kanannya. */
.lp-galeri{margin-top:18px}
.lp-galeri-baris{display:grid;gap:14px}

/* Baris mendatar. auto-fit dengan minmax: tiga gambar jadi tiga kolom sama
   lebar, dua gambar jadi dua kolom sama lebar - track yang tak terpakai
   diciutkan sendiri oleh auto-fit, jadi tidak pernah ada sel menganga. */
.lp-galeri-datar{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Baris tegak + ajakan, tiga kolom sama lebar seperti baris di atasnya - dua
   baris yang segaris kolomnya terbaca sebagai satu tabel gambar, bukan dua
   tumpukan yang kebetulan bertetangga.

   Lebar kartu HP-nya sendiri dipatok dan dipusatkan di dalam kolomnya, tidak
   ikut melar: tangkapan layar HP yang dilebarkan sampai sepertiga halaman
   terlihat seperti gambar yang salah pasang. */
.lp-galeri-bawah{grid-template-columns:repeat(3,1fr);margin-top:14px}

.lp-galeri-item{margin:0;background:var(--warna-kartu);
  border:1px solid var(--warna-garis);border-radius:10px;
  overflow:hidden;line-height:0}
.lp-galeri-item img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center}

/* Tinggi kartu ditentukan rasio, bukan tinggi asli gambar - itu yang membuat
   tepi bawah tiap baris rata. Dipotong dari ATAS karena bagian atas halamanlah
   yang menunjukkan judul dan tombol: bagian yang menjelaskan gambar itu apa. */
.lp-galeri-mendatar{aspect-ratio:3/2}
.lp-galeri-tegak{aspect-ratio:1/2;width:100%;max-width:216px;justify-self:center}

/* Gambar yang jauh lebih lebar daripada kotaknya (mis. 1000x358) kalau
   dipotong-isi akan kehilangan hampir separuh isinya ke kiri dan kanan.
   Yang seperti ini dimuat utuh di dalam kartu putih. */
.lp-galeri-utuh{padding:10px}
.lp-galeri-utuh img{object-fit:contain;object-position:center}

.lp-galeri-ajak{display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:14px;padding:22px;border-radius:10px;
  background:var(--warna-krem-tua);border:1px solid var(--warna-garis)}
.lp-galeri-ajak p{margin:0;font-size:14.5px;line-height:1.55;
  color:var(--warna-tinta-lembut);max-width:24em}
.lp-galeri-ajak .lp-galeri-ajak-judul{font-size:17px;font-weight:800;
  color:var(--warna-tinta);line-height:1.35}

@media(max-width:1023px){
  /* Dua kolom untuk gambar mendatar. Kalau jumlahnya ganjil, yang terakhir
     melebar penuh dengan potongan lebih rendah - sengaja terlihat seperti
     panji, bukan seperti sel yang lupa diisi. */
  .lp-galeri-datar{grid-template-columns:repeat(2,1fr)}
  /* Rasionya sengaja tidak diubah: dipotong jadi panji tipis, tangkapan layar
     isi halaman kehilangan justru bagian yang mau ditunjukkan. Melebar dengan
     rasio yang sama, gambarnya tampil hampir utuh (1000x683 vs kotak 3:2). */
  .lp-galeri-datar-3 .lp-galeri-item:last-child{grid-column:1/-1}
}

@media(max-width:820px){
  /* Kotak ajakan tidak muat lagi di samping dua kartu HP; ia turun ke bawah
     dan melebar penuh. Kartu HP tetap berdampingan karena memang bentuknya
     tegak - ditumpuk satu per satu, barisnya jadi sepanjang layar. */
  .lp-galeri-bawah{grid-template-columns:1fr 1fr}
  .lp-galeri-ajak{grid-column:1/-1}
}

@media(max-width:600px){
  /* Di layar sempit dua kolom membuat tulisan di dalam tangkapan layar komputer
     tidak terbaca lagi, dan gambar yang isinya tak terbaca sama saja dengan
     tidak ada. Gambar mendatar jadi satu kolom; kartu HP tetap dua karena
     tegak dan sempit, dua muat berdampingan tanpa kehilangan keterbacaan. */
  .lp-galeri-datar{grid-template-columns:1fr}
  .lp-galeri-datar-3 .lp-galeri-item:last-child{grid-column:auto}
  .lp-galeri-ajak .btn{width:100%;text-align:center}
}

/* Bukti dan harga adalah satu tarikan napas: "beginilah bentuknya" lalu
   "segini biayanya". Jarak antarseksi standar 96px+96px membuat keduanya
   terbaca sebagai dua topik terpisah, dengan sabuk kosong 192px di antaranya.
   Dirapatkan seperlunya - tetap ada jeda, tapi tidak sampai memutus alurnya. */
@media(min-width:768px){
  .lp-bukti{padding-bottom:64px}
  .lp-bukti + .lp-harga{padding-top:72px}
}

/* Nomor WhatsApp jangan dipecah dua baris. Nomor telepon yang terputus di tengah
   sulit dibaca ulang dan sulit disalin — orang menyalinnya untuk disimpan. */
.site-footer a[href^="https://wa.me"]{white-space:nowrap}