/* Rumah Bulu — tema "Kertas Studio" (DESIGN.md).
 *
 * Gagasannya satu kalimat: halaman ini ADALAH kertas studionya. Tiap seksi
 * satu lembar kertas berwarna, dan foto yang dipasang memakai kertas yang sama
 * sehingga foto menyatu dengan lembarnya, bukan ditempel di atas kartu.
 *
 * Warna lembar diambil dari piksel kertas di foto berbayar (butter #FBCB3F
 * dari hero-anjing, salmon #F3A994 dari potret-klien-1, teal #AAD2CE dari
 * potret-klien-3) — aset berbayar itu final, CSS yang menyesuaikan.
 *
 * Mobile-first: semua aturan dasar untuk 390px; min-width hanya melebarkan.
 * Semua pasangan warna lolos WCAG AA, diaudit skrip — angkanya di DESIGN.md.
 * Jangan pernah meredupkan teks dengan `opacity`; pakai token.
 */

:root {
  /* lembar */
  --kertas: #F4F6F1;
  --putih: #FFFFFF;
  --butter: #FBCB3F;
  --salmon: #F3A994;
  --teal-kertas: #AAD2CE;
  --teal-dalam: #17594C;
  --ink: #24312B;

  /* teks */
  --ink-lembut: #3A4A42;      /* lolos AA di KELIMA lembar terang */
  --teal: #1F6F5F;            /* aksen — hanya di atas kertas/putih */
  --karat: #A34B32;
  --placeholder: #5A6C62;
  --terang: #F4F6F1;
  --terang-lembut: #CFE3DC;

  /* garis & non-teks */
  --teal-cerah: #2E8C7A;      /* dekoratif saja, tidak pernah teks */
  --garis: #DCE3DB;
  --garis-input: #7E8C84;
  --fokus: #24312B;

  --r-foto: 4px;
  --r-kotak: 10px;
  --sisi: clamp(1.15rem, 5vw, 3rem);
  --nafas: clamp(3rem, 8vw, 6.5rem);
  --judul: "Young Serif", "Georgia", serif;
  --teks: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --keluar: cubic-bezier(.22, 1, .36, 1);

  /* z-index bertingkat, bukan angka asal */
  --z-apung: 30;
  --z-lewati: 60;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--teks);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--kertas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

h1, h2, h3, h4 {
  font-family: var(--judul);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 7vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 4.6vw, 2.65rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }

p { text-wrap: pretty; }
p.utama { font-size: 1.0625rem; color: var(--ink-lembut); max-width: 62ch; }

a { color: var(--teal); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }

.lewati {
  position: absolute; left: -999px; top: 0; z-index: var(--z-lewati);
  background: var(--ink); color: var(--terang); padding: 12px 18px; text-decoration: none;
}
.lewati:focus { left: 0; }

/* ------------------------------------------------------------------ lembar */

.lembar { padding: var(--nafas) var(--sisi); }
.lembar.rapat { padding-top: clamp(2rem, 5vw, 3.5rem); }
.isi { max-width: 1140px; margin-inline: auto; }
.isi.sempit { max-width: 780px; }

.lembar.netral { background: var(--kertas); }
.lembar.fasilitas { background: var(--teal-kertas); }
.lembar.jemput { background: var(--salmon); }
.lembar.gelap { background: var(--teal-dalam); color: var(--terang); }
.lembar.tutup { background: var(--ink); color: var(--terang); }

.lembar.gelap p.utama, .lembar.tutup p.utama { color: var(--terang-lembut); }
/* Aturan warna tautan per lembar TIDAK BOLEH menyentuh tombol: `.lembar.tutup a`
   (0,2,1) mengalahkan `.tbl.terang` (0,2,0), dan tombol butter pun jadi teks
   butter di atas butter — labelnya hilang total. Sudah kejadian dua kali di
   halaman ini (tombol "Minta dijemput" dan "Chat Rumah Bulu"); dijaga oleh
   test "aturan warna lembar tidak menimpa tombol". */
.lembar.gelap a:not(.tbl):not(.tbl-garis),
.lembar.tutup a:not(.tbl):not(.tbl-garis) { color: var(--butter); }
.lembar.gelap :focus-visible, .lembar.tutup :focus-visible { outline-color: var(--butter); }

/* Di lembar berwarna, teks sekunder TIDAK boleh pakai --teal (gagal AA di
   butter/salmon/teal-kertas). Yang dipakai --ink-lembut, sudah diaudit. */
.lembar.fasilitas p.utama, .lembar.jemput p.utama, .hero p.utama { color: var(--ink-lembut); }
.lembar.fasilitas a:not(.tbl):not(.tbl-garis),
.lembar.jemput a:not(.tbl):not(.tbl-garis),
.hero a:not(.tbl):not(.tbl-garis) { color: var(--ink); }

.judul-seksi { max-width: 34ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.judul-seksi h2 + .utama { margin-top: 0.85rem; max-width: 58ch; }
.judul-seksi { max-width: none; }

/* ------------------------------------------------------------------ tombol */

.tbl, .tbl-garis {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font: inherit; font-weight: 600; letter-spacing: -0.006em;
  padding: 0.72rem 1.15rem; border-radius: var(--r-kotak);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform 160ms var(--keluar), background-color 160ms var(--keluar),
              box-shadow 160ms var(--keluar);
}
.tbl { background: var(--teal); color: #fff; box-shadow: 0 1px 2px rgba(36, 49, 43, .16); }
.tbl:hover { background: #17594C; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(36, 49, 43, .18); }
.tbl:active { transform: translateY(0); }
.tbl.besar { padding: 0.95rem 1.5rem; font-size: 1.0625rem; }
.tbl.kecil { padding: 0.5rem 0.9rem; font-size: 0.9375rem; }
.tbl.penuh { width: 100%; }
.tbl.terang { background: var(--butter); color: var(--ink); }
.tbl.terang:hover { background: #FFD968; }
.tbl.gelapkan { background: var(--ink); color: var(--terang); }
.tbl.gelapkan:hover { background: #16211C; }

.tbl-garis {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.tbl-garis:hover { background: rgba(36, 49, 43, .08); transform: translateY(-1px); }
.tbl-garis.besar { padding: 0.93rem 1.5rem; font-size: 1.0625rem; }

/* ------------------------------------------------------------------ kepala */

/* Sengaja tidak sticky dan tanpa menu: ini halaman satu tujuan, dan tombol
   mengambang sudah memegang CTA yang selalu terjangkau (PRD § Hero). */
.atas {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem var(--sisi);
  background: var(--butter);
}
.merek { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.merek img { border-radius: 9px; width: 40px; height: 40px; }
.merek span { display: grid; line-height: 1.15; }
.merek b { font-family: var(--judul); font-weight: 400; font-size: 1.15rem; letter-spacing: -0.015em; }
.merek small { font-size: 0.75rem; color: var(--ink-lembut); letter-spacing: 0.01em; }
.atas .tbl { background: var(--ink); }
.atas .tbl:hover { background: #16211C; }

/* ------------------------------------------------------------------ 1 hero */

.hero {
  background: var(--butter);
  padding-bottom: 0;
  display: grid;
  gap: clamp(1.75rem, 5vw, 2.5rem);
  padding-top: clamp(2.25rem, 6vw, 4rem);
  overflow: hidden;
}
.hero-teks { max-width: 40rem; }
.hero h1 { letter-spacing: -0.02em; }
.hero h1 + .utama { margin-top: 1.05rem; font-size: 1.125rem; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.hero-aksi .tbl { background: var(--ink); }
.hero-aksi .tbl:hover { background: #16211C; }
.hero-kaki {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem;
  margin-top: 1.5rem; font-size: 0.9375rem; color: var(--ink-lembut);
}
.hero-kaki b { color: var(--ink-lembut); }
.hero-kaki svg { margin-right: -0.15rem; }

/* Tepi foto dilebur ke lembar: kertas studio di foto dan lembar halaman adalah
   warna yang sama, jadi sambungannya tidak boleh terlihat. Dua mask dipotong
   silang; browser tanpa mask-composite tetap aman — warnanya memang sama. */
.hero-foto { margin-inline: calc(var(--sisi) * -1); }
.hero-foto img {
  width: 100%;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%),
              linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end; gap: clamp(2rem, 4vw, 4rem);
  }
  .hero-teks { padding-bottom: clamp(3rem, 6vw, 5rem); }
  .hero-foto { margin-inline: 0 calc(var(--sisi) * -1); align-self: end; }
  .hero-foto img {
    mask-image: linear-gradient(to right, transparent 0, #000 16%),
                linear-gradient(to bottom, transparent 0, #000 9%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
}

/* ------------------------------------------------------------------ 2 pita */

.pita { background: var(--ink); color: var(--terang); padding: 1.05rem var(--sisi); }
.pita ul {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1140px;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; justify-content: flex-start;
}
.pita li { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.9375rem; }
.pita li svg { align-self: center; color: var(--butter); }
.pita b { font-weight: 600; letter-spacing: -0.01em; }
.pita span { color: var(--terang-lembut); }

@media (min-width: 760px) {
  .pita ul { justify-content: space-between; gap: 1rem 2rem; }
}

/* ------------------------------------------------------------------ 3 harga */

.harga-blok { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.harga-blok + .harga-blok { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--garis); }
.harga-kiri h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.harga-kiri h3 svg { color: var(--teal); }

.daftar-harga { width: 100%; border-collapse: collapse; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kotak); overflow: hidden; }
.daftar-harga caption { caption-side: bottom; text-align: left; padding: 0.7rem 0.1rem 0; font-size: 0.875rem; color: var(--ink-lembut); }
.daftar-harga tr.grup th {
  background: var(--kertas); text-align: left; padding: 0.5rem 1rem;
  font-family: var(--teks); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-lembut);
  border-block: 1px solid var(--garis);
}
.daftar-harga tbody tr:first-child th { border-top: 0; }
.daftar-harga th[scope="row"] { text-align: left; padding: 0.72rem 1rem; font-weight: 500; display: grid; gap: 0.1rem; }
.daftar-harga th[scope="row"] small { font-size: 0.8125rem; color: var(--ink-lembut); font-weight: 400; }
.daftar-harga td {
  text-align: right; padding: 0.72rem 1rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 600; vertical-align: top;
}
.daftar-harga th[scope="row"], .daftar-harga td { border-top: 1px solid var(--garis); }

.harga-rinci { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.harga-rinci h4 { margin-bottom: 0.6rem; }
ul.centang, ul.tambahan { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: 0.9375rem; }
ul.centang li { position: relative; padding-left: 1.5rem; color: var(--ink-lembut); }
/* Centang digambar clip-path, bukan dua border yang dirotasi: bentuknya sama,
   tapi berkas ini jadi bebas `border-left` tebal — sehingga penjaga anti strip
   aksen di test/alur.test.js bisa tetap galak tanpa pengecualian. */
ul.centang li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.78rem; height: 0.78rem; background: var(--teal-cerah);
  clip-path: polygon(13% 47%, 3% 58%, 38% 92%, 97% 22%, 86% 12%, 37% 70%);
}
ul.tambahan li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--garis); padding-bottom: 0.45rem; }
ul.tambahan span { color: var(--ink-lembut); }
ul.tambahan b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.kamar-daftar { display: grid; gap: 1rem; }
.kamar { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kotak); padding: 1.1rem 1.2rem; }
.kamar-atas { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kamar-harga { font-family: var(--judul); font-size: 1.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kamar-harga small { font-family: var(--teks); font-size: 0.8125rem; color: var(--ink-lembut); font-weight: 500; margin-left: 0.15em; }
.kamar-ukuran { font-size: 0.875rem; color: var(--ink-lembut); margin: 0.35rem 0 0.7rem; }
.catatan { margin-top: 1rem; font-size: 0.9375rem; color: var(--ink-lembut); max-width: 60ch; }

@media (min-width: 620px) {
  .harga-rinci { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .kamar-daftar { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 980px) {
  .harga-blok { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
  .harga-blok.balik .harga-kiri { order: 2; }
  .harga-blok.balik .harga-kanan { order: 1; }
  .harga-kanan { position: sticky; top: 1.5rem; }
}

/* ----------------------------------------------------------- penyusun WA */

.penyusun {
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kotak);
  padding: clamp(1.15rem, 3vw, 1.6rem);
  box-shadow: 0 1px 2px rgba(36, 49, 43, .05), 0 14px 32px rgba(36, 49, 43, .07);
}
.penyusun h3 { margin-bottom: 0.5rem; }
.penyusun-ket { font-size: 0.9375rem; color: var(--ink-lembut); margin-bottom: 1.15rem; }
.penyusun label { display: block; font-size: 0.875rem; font-weight: 600; margin: 0.9rem 0 0.35rem; }
.penyusun label:first-of-type { margin-top: 0; }
.penyusun .opsional { font-weight: 400; color: var(--ink-lembut); }
.penyusun input, .penyusun select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.68rem 0.8rem; border: 1px solid var(--garis-input); border-radius: 8px;
  background: var(--putih); min-height: 46px;
}
.penyusun select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.72rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.penyusun input::placeholder { color: var(--placeholder); }
.penyusun input:focus-visible, .penyusun select:focus-visible { border-color: var(--ink); }
.penyusun-dua { display: grid; gap: 0.15rem; }
.penyusun button { margin-top: 1.35rem; }
.penyusun-foto { margin-bottom: 1.25rem; }
/* Berkasnya sendiri sudah dipotong 4:3 telinga-sampai-syal di build_assets.py,
   jadi di sini tidak ada object-position yang perlu ditebak: rasio kotaknya
   sama persis dengan rasio berkasnya, tidak ada piksel yang dibuang browser. */
.penyusun-foto img {
  border-radius: var(--r-foto); width: 100%; height: auto;
  aspect-ratio: 4 / 3; display: block;
}

@media (min-width: 480px) {
  .penyusun-dua { grid-template-columns: 1fr 1fr; gap: 0 0.85rem; }
}

/* -------------------------------------------------------------- 4 fasilitas */

.grid-fasilitas { display: grid; gap: clamp(1rem, 3vw, 1.75rem); }
.grid-fasilitas figure { margin: 0; }
.grid-fasilitas img { border-radius: var(--r-foto); width: 100%; }
.grid-fasilitas figcaption { margin-top: 0.7rem; font-size: 0.9375rem; color: var(--ink-lembut); max-width: 46ch; }
.grid-fasilitas figcaption b { color: var(--ink); font-weight: 600; }

@media (min-width: 760px) {
  .grid-fasilitas { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------- 5 langkah */

.langkah { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; counter-reset: none; }
.langkah li { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; align-items: start; }
.langkah-no {
  grid-row: span 2; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--butter); color: var(--ink);
  font-family: var(--judul); font-size: 1.2rem; line-height: 1;
}
.langkah h3 { align-self: center; }
.langkah p { color: var(--terang-lembut); font-size: 0.9375rem; max-width: 52ch; }
.langkah-kaki {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.25rem;
  border-top: 1px solid rgba(244, 246, 241, .22);
  font-size: 0.9375rem; color: var(--terang-lembut); max-width: 62ch;
}
.langkah-kaki svg { color: var(--butter); margin-top: 0.15rem; }

@media (min-width: 760px) {
  .langkah { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 3rem; }
}
@media (min-width: 1060px) {
  .langkah { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: 2rem; }
  /* subgrid: judul dua baris di satu kolom tidak lagi menggeser paragraf
     kolom sebelahnya — keempatnya berbagi baris yang sama. */
  .langkah li { grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 3; gap: 0; }
  .langkah-no { grid-row: auto; margin-bottom: 0.75rem; }
  .langkah h3 { align-self: start; margin-bottom: 0.5rem; }
}

/* ---------------------------------------------------------------- 6 jemput */

.jemput-isi { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.jemput h2 + .utama { margin-top: 0.85rem; }
ul.tarif { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.1rem; }
ul.tarif li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0; border-bottom: 1px solid rgba(36, 49, 43, .18);
}
ul.tarif li:first-child { border-top: 1px solid rgba(36, 49, 43, .18); }
ul.tarif b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.area h3 { margin-bottom: 0.9rem; }
.area ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.area li {
  background: rgba(255, 255, 255, .58); border: 1px solid rgba(36, 49, 43, .2);
  border-radius: 999px; padding: 0.32rem 0.8rem; font-size: 0.875rem;
}
.jemput .catatan { color: var(--ink-lembut); }

@media (min-width: 860px) {
  .jemput-isi { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
}

/* -------------------------------------------------------------- 7 testimoni */

.ulasan { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
.ulasan figure { margin: 0; display: grid; gap: 0.9rem; }
.ulasan img { border-radius: var(--r-foto); width: 100%; }
.ulasan blockquote { margin: 0; }
.ulasan blockquote p { font-family: var(--judul); font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.005em; }
.ulasan figcaption { font-size: 0.875rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: baseline; }
.ulasan figcaption span { font-weight: 400; color: var(--ink-lembut); }
.ulasan figcaption span::before { content: "· "; }

@media (min-width: 700px) {
  .ulasan { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------- 8 FAQ */

.faq { display: grid; max-width: 820px; }
.faq details { border-top: 1px solid var(--garis); }
.faq details:last-child { border-bottom: 1px solid var(--garis); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 1rem;
  justify-content: space-between; padding: 1.1rem 0;
  font-family: var(--judul); font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .tanda { position: relative; flex: none; width: 1rem; height: 1rem; margin-top: 0.22rem; }
.faq .tanda::before, .faq .tanda::after {
  content: ""; position: absolute; background: var(--teal); border-radius: 1px;
  transition: transform 220ms var(--keluar), opacity 220ms var(--keluar);
}
.faq .tanda::before { inset: 45% 0 45% 0; }
.faq .tanda::after { inset: 0 45% 0 45%; }
.faq details[open] .tanda::after { transform: scaleY(0); opacity: 0; }
.faq .jawab { padding-bottom: 1.15rem; }
.faq .jawab p { color: var(--ink-lembut); max-width: 66ch; font-size: 0.9375rem; }

/* ----------------------------------------------------------------- 9 tutup */

.tutup { padding-bottom: clamp(2rem, 4vw, 3rem); }
.tutup-isi { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }
.plakat {
  display: inline-block; background: var(--kertas); border-radius: 12px;
  padding: 0.75rem 1rem; margin-bottom: 1.25rem;
}
.plakat img { width: 200px; height: auto; }
.tutup-ajak h2 + .utama { margin-top: 0.85rem; }
.tutup-ajak .tbl { margin-top: 1.6rem; }
.balas { margin-top: 0.95rem; font-size: 0.875rem; color: var(--terang-lembut); max-width: 44ch; }
.tutup-info { display: grid; gap: 1.75rem; }
.tutup-info h3 { font-size: 1rem; margin-bottom: 0.45rem; }
.tutup-info p, .tutup-info li { color: var(--terang-lembut); font-size: 0.9375rem; }
ul.jam { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
ul.jam li { display: flex; justify-content: space-between; gap: 1rem; max-width: 20rem; }
ul.jam b { color: var(--terang); font-variant-numeric: tabular-nums; font-weight: 600; }
.kaki-bawah {
  max-width: 1140px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.25rem; border-top: 1px solid rgba(244, 246, 241, .18);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between;
  font-size: 0.8125rem; color: var(--terang-lembut);
}

@media (min-width: 860px) {
  .tutup-isi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .tutup-info { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
}

/* ----------------------------------------------------------- tombol apung */

.wa-apung {
  position: fixed; z-index: var(--z-apung);
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 1.15rem; border-radius: 999px;
  background: var(--ink); color: var(--terang); text-decoration: none;
  font-weight: 600; font-size: 0.9375rem;
  box-shadow: 0 6px 22px rgba(36, 49, 43, .3);
  transition: transform 180ms var(--keluar), box-shadow 180ms var(--keluar);
}
.wa-apung:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(36, 49, 43, .36); }
.wa-apung svg { color: var(--butter); }
@media (max-width: 460px) {
  .wa-apung span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wa-apung { padding: 0.9rem; }
}

/* ------------------------------------------------------------------ gerak */

/* Semua reveal MENAMBAH pada konten yang default-nya sudah terlihat. Kelas
   .muncul hanya dipasang lp.js DI DALAM requestAnimationFrame, dan hanya pada
   elemen yang saat itu masih di bawah layar — jadi tab tersembunyi, perender
   headless, dan browser tanpa JS sama-sama mendapat halaman lengkap. Jangan
   pernah menaruh keadaan tersembunyi ini langsung di selector statis. */
.muncul { opacity: 0; transform: translateY(18px); }
.muncul.tampil {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--keluar), transform 620ms var(--keluar);
  transition-delay: var(--tunda, 0ms);
}

/* Satu koreografi muat-halaman, di hero saja. */
.pakai-gerak .hero-teks > * { animation: naik 800ms var(--keluar) both; }
.pakai-gerak .hero-teks > :nth-child(2) { animation-delay: 90ms; }
.pakai-gerak .hero-teks > :nth-child(3) { animation-delay: 170ms; }
.pakai-gerak .hero-teks > :nth-child(4) { animation-delay: 240ms; }
.pakai-gerak .hero-foto img { animation: lebur 1100ms var(--keluar) both; }

@keyframes naik { from { opacity: 0; transform: translateY(22px); } }
@keyframes lebur {
  from { opacity: 0; transform: scale(1.045); filter: blur(14px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.faq details[open] .jawab { animation: buka 260ms var(--keluar); }
@keyframes buka { from { opacity: 0; transform: translateY(-6px); } }

/* Cetak: daftar harga adalah hal yang benar-benar dicetak orang. Apa pun yang
   sedang menunggu reveal harus tampil, dan lembar berwarna tidak perlu tinta. */
@media print {
  .muncul { opacity: 1 !important; transform: none !important; }
  .wa-apung, .lewati { display: none; }
  .lembar, .pita { background: #fff; color: #000; padding-block: 1rem; }
  .lembar.gelap, .lembar.tutup, .pita { color: #000; }
  .lembar.gelap p.utama, .lembar.tutup p.utama, .pita span, .langkah p { color: #333; }
  .faq details { display: block; }
  .faq .jawab { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .muncul { opacity: 1; transform: none; }
  .muncul.tampil { transition: none; }
  .pakai-gerak .hero-teks > *, .pakai-gerak .hero-foto img,
  .faq details[open] .jawab { animation: none; }
  .tbl, .tbl-garis, .wa-apung { transition: none; }
  .tbl:hover, .tbl-garis:hover, .wa-apung:hover { transform: none; }
}

/* ------------------------------------------------------------------ layar besar */

@media (min-width: 760px) { body { font-size: 17px; } }