/* ==========================================================================
   Pool Flower — situs publik (glassmorphism)
   Bahasa visual: halaman cokelat espresso gelap, cahaya amber/marigold besar di balik hero & About (sumber
   cahaya) + cahaya merah muda kamboja kedua, kartu kaca gelap beku bertepi tipis dengan sorot dalam di atas,
   teks krem, judul besar huruf kapital Archivo (lebar), label kecil kapital berjarak, tombol pil, cincin ukur.
   Satu berkas, tanpa pustaka. Lebar 360–1600 px tanpa gulir samping; gerak dimatikan saat
   prefers-reduced-motion; semua berfungsi tanpa JS (gating html.js).
   ========================================================================== */

/* ---------- 1. token ---------- */
:root {
  --latar: #1A110B;
  --latar-2: #241711;
  --cahaya: #E0893A;
  --cahaya-2: #F08A9B;
  --kaca: rgba(58, 38, 26, .46);
  --kaca-2: rgba(255, 255, 255, .06);
  --kaca-tepi: rgba(255, 255, 255, .14);
  --kaca-tepi-kuat: rgba(255, 255, 255, .28);
  --kaca-sorot: rgba(255, 255, 255, .10);
  --blur: 18px;
  --aksen: #F2A64A;
  --aksen-tua: #D97A2B;
  --aksen-terang: #FFC67A;
  --mawar: #F08A9B;
  --tinta: #F6EDE3;
  --tinta-redup: rgba(246, 237, 227, .74);
  --tinta-samar: rgba(246, 237, 227, .54); /* ≥ 4.5:1 juga di atas isian kartu (.kartu) */
  --tinta-aksen: #1A110B;
  --wa: #25D366;
  --radius: 18px;
  --radius-kecil: 12px;
  --radius-pil: 999px;
  --f-judul: "Archivo", "Archivo Narrow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-teks: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wadah: 1200px;
  --tepi: 20px;
  --nav-h: 64px;
  --nav-total: calc(var(--nav-h) + 12px);
  --bayang: 0 20px 60px rgba(0, 0, 0, .35);
  --bayang-kartu: 0 14px 40px rgba(0, 0, 0, .28);
  --mulus: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-total) + 16px);
  overflow-x: hidden;
  color-scheme: dark;
  background: var(--latar);
}
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--latar); color: var(--tinta);
  font: 400 1rem/1.6 var(--f-teks);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Teks terjemahan dibungkus <font>: warisi tipografi di sekitarnya. */
font { font: inherit; color: inherit; }
/* Mesin terjemah membuang spasi di sekitar nama merek/nomor (translate="no"); saat halaman diterjemahkan (lang ≠ en) beri jarak kecil */
html:not([lang="en"]) font + .notranslate, html:not([lang="en"]) .notranslate + font,
html:not([lang="en"]) font + [translate="no"], html:not([lang="en"]) [translate="no"] + font { margin-left: .25em; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-judul); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
p, figure, blockquote, dl { margin: 0; }
/* :where() = spesifisitas 0, supaya margin/padding kelas (.lh-fakta, .hk-statdaftar, .pg-kecil, .pita, …) tidak kalah oleh pemilih atribut */
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
.ikon { width: 1.25em; height: 1.25em; flex: none; }
.wadah { position: relative; z-index: 1; width: 100%; max-width: var(--wadah); margin-inline: auto; padding-inline: var(--tepi); }
.lewati {
  position: absolute; left: 16px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: var(--radius-pil);
  background: var(--aksen); color: var(--tinta-aksen); font-weight: 700; text-decoration: none;
}
.lewati:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
html.laci-buka, html.kc-buka { overflow: hidden; }
main:focus { outline: none; }

.bagian { position: relative; padding: clamp(48px, 5.5vw, 80px) 0; }
.bagian-layanan { padding-bottom: clamp(36px, 4.5vw, 64px); }
.bagian-layanan + .bagian-tentang { padding-top: clamp(32px, 4vw, 56px); } /* ubin layanan → kartu About: rapat */
.bagian-rapat { padding-block: clamp(32px, 5vw, 60px); }
.bagian-awal { padding-top: clamp(20px, 4vw, 40px); }
.bagian + .bagian-rapat, .bagian-rapat + .bagian-rapat { padding-top: 0; }

/* cahaya dekoratif: gradien radial tanpa filter blur (ringan di ponsel) */
.cahaya {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: min(1100px, 150vw); aspect-ratio: 1.25;
  background: radial-gradient(closest-side, rgba(224, 137, 58, .55), rgba(224, 137, 58, .22) 42%, rgba(224, 137, 58, 0) 72%);
}
.cahaya-mawar { background: radial-gradient(closest-side, rgba(240, 138, 155, .26), rgba(240, 138, 155, .1) 42%, rgba(240, 138, 155, 0) 72%); }

/* resep kaca: panel yang diburamkan (navigasi, kartu hero, About, FAQ, ajakan, info paket, laci) */
.panel {
  background: var(--kaca); border: 1px solid var(--kaca-tepi); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--kaca-sorot), var(--bayang);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: rgba(40, 26, 18, .92); }
}
/* kartu kaca tanpa blur (kisi panjang: paket, ubin, tipe, langkah, keunggulan, ulasan, FAQ) */
.kartu, .kartu-paket, .ubin, .kartu-tipe, .langkah-kartu, .kenapa-kartu, .kartu-ulasan, .faq, .kartu-layanan-besar, .lain-item, .kartu-kosong {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), rgba(44, 29, 20, .84);
  border: 1px solid var(--kaca-tepi); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--kaca-sorot), var(--bayang-kartu);
}

/* ---------- 3. tipografi bagian ---------- */
.kicker-bagian {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 700 .72rem/1.2 var(--f-teks); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-samar);
}
.kicker-bagian::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--aksen); box-shadow: 0 0 0 4px rgba(242, 166, 74, .18); }
.kepala-tengah .kicker-bagian, .hal-kepala .kicker-bagian { justify-content: center; }
.judul-bagian { font-size: clamp(1.7rem, 3.2vw, 2.6rem); max-width: 24ch; text-wrap: balance; }
.judul-bagian b, .hero-judul b, .hal-judul b, .tentang-judul b { font-weight: inherit; color: var(--aksen); }
.sub-bagian { margin-top: 14px; max-width: 60ch; color: var(--tinta-redup); font-size: 1.05rem; }
.kepala-bagian { margin-bottom: clamp(28px, 4vw, 44px); }
.kepala-tengah { text-align: center; }
.kepala-tengah .judul-bagian, .kepala-tengah .sub-bagian { margin-inline: auto; }
.kepala-belah { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.kepala-belah .sub-bagian { margin-top: 0; }
.kepala-aksi { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.judul-kartu { font-size: 1.45rem; margin-bottom: 16px; }

/* baris aksen amber + kilau ✦ */
.aksen { display: block; margin-top: 12px; color: var(--aksen); font: 500 1.1rem/1.35 var(--f-judul); letter-spacing: -.005em; }
.kepala-tengah .aksen { margin-inline: auto; }
.aksen .kilau { display: inline-block; width: .85em; height: .85em; margin-left: .3em; vertical-align: -.08em; color: var(--aksen-terang); }
.aksen-akhir { white-space: nowrap; }

/* ---------- 4. tombol pil, cakram, cip ---------- */
.tbl {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 6px 6px 6px 22px; border-radius: var(--radius-pil); border: 1px solid transparent;
  font: 600 .95rem/1.2 var(--f-teks); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: translate .2s var(--mulus), background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tbl-panah { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; transition: translate .2s var(--mulus); }
.tbl-panah .ikon { width: 18px; height: 18px; }
.tbl-aksen { background: var(--aksen); color: var(--tinta-aksen); box-shadow: 0 10px 30px -10px rgba(242, 166, 74, .6); }
.tbl-aksen .tbl-panah { background: var(--tinta-aksen); color: var(--aksen); }
.tbl-aksen:hover { background: var(--aksen-terang); }
.tbl-kaca { background: var(--kaca-2); border-color: var(--kaca-tepi); color: var(--tinta); box-shadow: inset 0 1px 0 var(--kaca-sorot); }
/* buram hanya di atas foto hero; di tempat lain latarnya gelap polos (hemat tenaga di ponsel) */
.hero .tbl-kaca { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tbl-kaca .tbl-panah { background: var(--aksen); color: var(--tinta-aksen); }
.tbl-kaca:hover { border-color: var(--kaca-tepi-kuat); background: rgba(255, 255, 255, .1); }
.tbl:hover { translate: 0 -2px; }
.tbl:hover .tbl-panah { translate: 2px 0; }
.tbl-kecil { min-height: 44px; padding-left: 18px; gap: 10px; font-size: .88rem; }
.tbl-kecil .tbl-panah { width: 32px; height: 32px; }
.tbl-kecil .tbl-panah .ikon { width: 16px; height: 16px; }
.tbl-penuh { width: 100%; }
.tombol-baris { display: flex; flex-wrap: wrap; gap: 12px; }
.tombol-baris.tengah { justify-content: center; }
.cakram { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--aksen); color: var(--tinta-aksen); transition: translate .2s var(--mulus), background-color .2s; }
.cakram .ikon { width: 18px; height: 18px; }
.cakram-kecil { width: 34px; height: 34px; }
.cakram-kecil .ikon { width: 16px; height: 16px; }
.tbl-bulat { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--kaca-2); border: 1px solid var(--kaca-tepi); color: var(--aksen); transition: border-color .2s, background-color .2s, translate .2s var(--mulus); }
.tbl-bulat .ikon { width: 19px; height: 19px; }
.tbl-bulat:hover { border-color: var(--aksen); background: rgba(242, 166, 74, .14); translate: 0 -2px; }
.ikon-cip { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; flex: none; background: rgba(242, 166, 74, .14); border: 1px solid rgba(242, 166, 74, .38); color: var(--aksen); }
.ikon-cip .ikon { width: 24px; height: 24px; }
/* pil cip (layanan, saring, "cocok untuk") */
.cip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pil);
  background: var(--kaca-2); border: 1px solid var(--kaca-tepi); color: var(--tinta); font: 600 .84rem/1.2 var(--f-teks); text-decoration: none; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.cip .ikon { width: 18px; height: 18px; color: var(--aksen); }
.cip small { font-size: .78em; color: var(--tinta-samar); }
a.cip:hover, button.cip:hover { border-color: var(--kaca-tepi-kuat); background: rgba(255, 255, 255, .1); }
.cip.aktif { background: var(--aksen); border-color: var(--aksen); color: var(--tinta-aksen); }
.cip.aktif .ikon, .cip.aktif small { color: inherit; }
.cip-kecil { min-height: 30px; padding: 4px 10px 4px 8px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.cip-kecil .ikon { width: 15px; height: 15px; }
.pil-harga { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: var(--radius-pil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); font: 600 .8rem/1 var(--f-teks); color: var(--tinta); white-space: nowrap; }
.pil-jelajah { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px 9px 16px; border-radius: var(--radius-pil); background: var(--aksen); color: var(--tinta-aksen); font: 700 .8rem/1 var(--f-teks); white-space: nowrap; transition: background-color .2s; }
.pil-jelajah .ikon { width: 16px; height: 16px; }
.lencana-populer { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--radius-pil); background: var(--aksen); color: var(--tinta-aksen); font: 700 .64rem/1 var(--f-teks); letter-spacing: .1em; text-transform: uppercase; }
.lencana-populer .ikon { width: 12px; height: 12px; }
/* tautan yang meregang menutupi seluruh kartu; --r-regang = sudut kartunya (cincin fokus ikut membulat) */
.tautan-regang { text-decoration: none; color: inherit; }
.tautan-regang::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-regang, var(--radius)); }
.tautan-regang:focus-visible { outline: none; }
.tautan-regang:focus-visible::after { outline: 3px solid var(--tinta); outline-offset: 2px; }
/* bidang pengganti foto */
.foto-kosong { display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px; background: linear-gradient(135deg, rgba(242, 166, 74, .14), rgba(240, 138, 155, .08)), var(--latar-2); }
.foto-kosong-merek { width: 28%; max-width: 72px; min-width: 32px; aspect-ratio: 1; height: auto; opacity: .7; }
.kartu-kosong { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 20px 24px; }
.kosong-tanda { width: 72px; height: 72px; min-height: 0; border-radius: 16px; }
.kartu-kosong h2, .kartu-kosong h3 { font-size: 1.2rem; }
.kartu-kosong p { margin-top: 4px; color: var(--tinta-redup); font-size: .92rem; }

/* ---------- 5. navigasi: pil kaca melayang + laci ---------- */
.nav { position: sticky; top: 0; z-index: 60; padding-top: 12px; margin-bottom: calc(-1 * var(--nav-total)); pointer-events: none; }
.nav > .wadah { z-index: 2; }
.nav-pil, .laci { pointer-events: auto; }
.nav-pil {
  display: flex; align-items: center; gap: 16px; min-height: var(--nav-h); padding: 7px 7px 7px 18px; border-radius: var(--radius-pil);
  background: rgba(36, 23, 17, .5); border: 1px solid var(--kaca-tepi); box-shadow: inset 0 1px 0 var(--kaca-sorot), 0 12px 40px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); transition: background-color .3s ease;
}
.nav-gulir .nav-pil, .laci-buka .nav-pil { background: rgba(36, 23, 17, .78); }
.merek { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font: 600 1.08rem/1 var(--f-judul); letter-spacing: -.01em; white-space: nowrap; }
.merek-ikon { width: 36px; height: 36px; }
.merek-logo { height: 36px; width: auto; }
.nav-tautan { display: flex; gap: 2px; margin-inline: auto; }
.nav-tautan a { padding: 11px 15px; border-radius: var(--radius-pil); font: 600 .9rem/1 var(--f-teks); color: var(--tinta-redup); text-decoration: none; transition: color .2s, background-color .2s; }
.nav-tautan a:hover, .nav-tautan a.aktif, .nav-tautan a[aria-current] { color: var(--tinta); background: var(--kaca-2); }
.nav-aksi { display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--kaca-tepi); background: var(--kaca-2); color: var(--tinta); }
.nav-burger .ikon { width: 22px; height: 22px; }
/* laci: lembar kaca setinggi layar di bawah pil (ponsel/tablet); :target = cadangan tanpa JS */
.laci {
  position: fixed; inset: 0; z-index: 1; display: block; padding-top: calc(var(--nav-total) + 20px); overflow-y: auto;
  background: rgba(26, 17, 11, .9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.laci[hidden] { display: none; }
.laci:target { display: block; }
.laci-isi { display: grid; gap: 26px; padding-bottom: 48px; }
.laci-tutup-nojs { display: none; }
html:not(.js) .laci-tutup-nojs { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 10px 16px 10px 12px; border-radius: var(--radius-pil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); color: var(--tinta); font: 600 .86rem/1 var(--f-teks); text-decoration: none; }
.laci-tautan { display: grid; gap: 6px; }
.laci-tautan a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-radius: 14px;
  background: var(--kaca-2); border: 1px solid var(--kaca-tepi); color: var(--tinta); font: 500 1.15rem/1.2 var(--f-judul); text-decoration: none;
}
.laci-tautan a .ikon { width: 20px; height: 20px; color: var(--aksen); }
.laci-tautan a[aria-current], .laci-tautan a.aktif { border-color: rgba(242, 166, 74, .5); }
.laci-label { margin-bottom: 10px; font: 700 .7rem/1 var(--f-teks); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-samar); }
.laci-cip { display: flex; flex-wrap: wrap; gap: 8px; }
.laci-tombol { display: grid; gap: 10px; }
.laci-jam { display: flex; align-items: center; gap: 10px; color: var(--tinta-redup); font-size: .9rem; }
.laci-jam .ikon { color: var(--aksen); width: 18px; height: 18px; }

/* ---------- 6. hero ---------- */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(100vh, 920px); padding: calc(var(--nav-total) + 20px) 0 0; }
.hero-latar { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; filter: saturate(.82); opacity: 0; transition: opacity 1.4s ease; }
.hero-foto.aktif { opacity: 1; }
.hero-selubung {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(26, 17, 11, .93) 0%, rgba(26, 17, 11, .78) 34%, rgba(26, 17, 11, .32) 66%, rgba(26, 17, 11, .5) 100%),
    linear-gradient(180deg, rgba(26, 17, 11, .6) 0%, rgba(26, 17, 11, .05) 28%, rgba(26, 17, 11, .1) 62%, var(--latar) 100%);
}
.cahaya-hero { left: 50%; top: 42%; translate: -52% -50%; width: min(1150px, 160vw); opacity: .95; }
.cahaya-hero-2 { right: -14%; bottom: -34%; width: min(680px, 100vw); }
/* kelopak kabur yang hanyut perlahan di cahaya (CSS saja) */
.kelopak {
  position: absolute; width: 96px; height: 58px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 40% 40%, rgba(255, 198, 122, .6), rgba(240, 138, 155, .28) 58%, transparent 76%);
  filter: blur(9px); opacity: .5; animation: kelopak-apung 24s ease-in-out infinite alternate;
}
.kelopak-1 { left: 22%; top: 30%; rotate: -22deg; }
.kelopak-2 { left: 44%; top: 66%; width: 64px; height: 42px; animation-duration: 29s; animation-delay: -8s; rotate: 14deg; }
.kelopak-3 { right: 38%; top: 16%; animation-duration: 33s; animation-delay: -15s; rotate: 28deg; }
@keyframes kelopak-apung { to { translate: 56px -72px; } }

.hero-kisi { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 400px); gap: 48px; align-items: stretch; padding-bottom: 32px; }
.hero-isi { display: flex; flex-direction: column; justify-content: center; padding-top: 16px; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin-bottom: 26px; padding: 9px 16px 9px 12px; border-radius: var(--radius-pil);
  background: var(--kaca-2); border: 1px solid var(--kaca-tepi); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 700 .7rem/1.3 var(--f-teks); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-redup);
}
.kicker .ikon { width: 18px; height: 18px; color: var(--aksen); }
.hero-judul {
  max-width: 13ch; font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: .98; letter-spacing: -.01em; font-weight: 500;
  font-stretch: 110%; text-transform: uppercase; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero-aksen { margin-top: 18px; font-size: clamp(1.1rem, 1.8vw, 1.45rem); }
.hero-sub { position: relative; margin-top: 26px; padding-left: 22px; max-width: 54ch; color: var(--tinta-redup); font-size: clamp(1rem, 1.25vw, 1.12rem); }
.hero-sub::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 4px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--aksen) 0 6px, transparent 6px 10px); }
.hero-tombol { margin-top: 34px; }
.hero-bawah { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 44px; }
.hero-gulir { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 10px; color: var(--tinta-samar); font: 700 .68rem/1 var(--f-teks); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.hero-gulir:hover { color: var(--tinta); }
.hero-gulir .ikon { width: 20px; height: 20px; animation: gulir-goyang 2.4s ease-in-out infinite; }
@keyframes gulir-goyang { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
/* lencana bulat: cincin putus-putus + jumlah layanan */
.hero-lencana { position: relative; display: grid; place-items: center; width: 132px; height: 132px; flex: none; }
.hero-lencana::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: rgba(36, 23, 17, .5); border: 1px solid var(--kaca-tepi); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-lencana svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--aksen); stroke-width: 1.3; stroke-dasharray: .9 1.6; rotate: -90deg; opacity: .9; }
.hl-isi { position: relative; display: grid; gap: 3px; padding: 0 16px; text-align: center; }
.hl-isi b { font: 500 2rem/1 var(--f-judul); }
.hl-isi small { font-size: .6rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-samar); }

/* tiga kartu kaca di kanan hero */
.hero-kartu { display: grid; gap: 12px; align-content: center; }
.hk { position: relative; padding: 16px; }
.hk-judul { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font: 700 .68rem/1.3 var(--f-teks); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-samar); }
.hk-judul .ikon { width: 16px; height: 16px; color: var(--aksen); }
.hk-paket { --r-regang: var(--radius); }
.hk-foto { border-radius: var(--radius-kecil); overflow: hidden; aspect-ratio: 2 / 1; border: 1px solid var(--kaca-tepi); }
.hk-foto img, .hk-foto .foto-kosong { width: 100%; height: 100%; object-fit: cover; }
.hk-paket-isi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; margin-top: 14px; }
.hk-nama { font: 500 1.1rem/1.25 var(--f-judul); }
.hk-nama a { text-decoration: none; }
.hk-harga { grid-row: 2; font-size: .8rem; font-weight: 700; color: var(--aksen); }
.hk-paket-isi .cakram { grid-column: 2; grid-row: 1 / span 2; }
.hk-paket:hover .cakram { translate: 2px 0; }
/* cincin pengukur */
.cincin-wadah { display: flex; align-items: center; gap: 16px; }
.cincin { position: relative; width: 112px; height: 112px; flex: none; }
.cincin svg { width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.cincin circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.cincin-dasar { stroke: rgba(255, 255, 255, .1); }
.cincin-isi { stroke: var(--aksen); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 1) * 100); filter: drop-shadow(0 0 6px rgba(242, 166, 74, .55)); }
.js .cincin-isi { stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--mulus) .2s; }
.js .cincin.hidup .cincin-isi { stroke-dashoffset: calc(100 - var(--p, 1) * 100); }
.cincin-angka { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 1.6rem/1 var(--f-judul); letter-spacing: -.02em; }
.cincin-angka i { font-style: normal; font-size: .62em; margin-left: 2px; color: var(--aksen); }
.cincin-label { max-width: 16ch; font-size: .88rem; line-height: 1.4; color: var(--tinta-redup); }
.hk-statdaftar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kaca-tepi); }
.hk-statdaftar li { display: grid; gap: 4px; min-width: 0; }
.hk-statdaftar b { font: 500 1.35rem/1 var(--f-judul); letter-spacing: -.02em; white-space: nowrap; }
.hk-statdaftar i { font-style: normal; font-size: .7em; color: var(--aksen); }
.hk-statdaftar small { font-size: .68rem; line-height: 1.3; color: var(--tinta-samar); }
/* kartu chat */
.hk-status { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.5; color: var(--tinta-redup); }
.titik-hidup { position: relative; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--aksen); box-shadow: 0 0 0 3px rgba(242, 166, 74, .22); }
.titik-hidup::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--aksen); animation: denyut 2.2s ease-out infinite; }
@keyframes denyut { 0% { scale: .6; opacity: 1; } 100% { scale: 2; opacity: 0; } }
.hk-chat-kaki { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kaca-tepi); }
.hk-jam { display: flex; align-items: center; gap: 8px; font-size: .76rem; line-height: 1.3; color: var(--tinta-samar); }
.hk-jam .ikon { width: 16px; height: 16px; color: var(--aksen); }
.hk-tombol { display: flex; gap: 8px; flex: none; }

/* ---------- 7. pita acara ---------- */
.bagian-momen { position: relative; padding: 4px 0 8px; }
.momen-judul { margin-bottom: 14px; text-align: center; font: 700 .7rem/1.3 var(--f-teks); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-samar); }
.pita { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pita-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: var(--radius-pil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); font: 600 .86rem/1.2 var(--f-teks); color: var(--tinta-redup); white-space: nowrap; }
.pita-item .ikon { width: 20px; height: 20px; color: var(--aksen); }

/* ---------- 8. ubin layanan ---------- */
.cahaya-layanan { left: 50%; top: 0; translate: -50% -38%; width: min(1000px, 140vw); opacity: .6; }
.kisi-ubin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kisi-ubin-1 { grid-template-columns: minmax(0, 1fr); }
.kisi-ubin-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ubin {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 22px; overflow: hidden;
  --r-regang: var(--radius); transition: translate .25s var(--mulus), border-color .25s;
}
.kisi-ubin-3 .ubin { min-height: 390px; }
.kisi-ubin-1 .ubin { min-height: 360px; }
.ubin-foto { position: absolute; inset: 0; z-index: -2; }
.ubin-foto img, .ubin-foto .foto-kosong { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: scale .7s var(--mulus); } /* foto potret: potongan agak ke atas */
.ubin:hover .ubin-foto img { scale: 1.04; }
.ubin-selubung { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26, 17, 11, .12) 0%, rgba(26, 17, 11, .3) 42%, rgba(26, 17, 11, .93) 100%); }
.ubin-ikon, .klb-ikon { background: rgba(26, 17, 11, .74); border-color: rgba(242, 166, 74, .55); }
.ubin-ikon { position: absolute; left: 22px; top: 22px; }
.ubin-nama { font-size: clamp(1.4rem, 2vw, 1.65rem); }
.ubin-nama a { text-decoration: none; }
.ubin-sub { margin-top: 8px; max-width: 48ch; color: var(--tinta-redup); font-size: .95rem; }
.ubin-kaki { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.ubin-info, .klb-info { font: 700 .72rem/1.3 var(--f-teks); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-samar); }
.ubin:hover, .kartu-layanan-besar:hover, .kartu-paket:hover, .lain-item:hover { translate: 0 -3px; border-color: var(--kaca-tepi-kuat); }
.ubin:hover .pil-jelajah, .kartu-layanan-besar:hover .pil-jelajah { background: var(--aksen-terang); }

/* ---------- 9. About + lencana putar ---------- */
.bagian-tentang { overflow: clip; }
.cahaya-tentang { left: 8%; top: 50%; translate: -30% -50%; width: min(1000px, 140vw); opacity: .85; }
.cahaya-tentang-2 { right: -12%; top: 10%; width: min(620px, 100vw); }
.tentang-kartu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px 56px; padding: clamp(26px, 4vw, 48px); }
.tentang-judul { margin-top: 4px; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .95; letter-spacing: -.02em; font-stretch: 110%; text-transform: uppercase; }
.tentang-kolase { position: relative; margin-top: 30px; min-height: 250px; }
.tk-foto { position: absolute; border-radius: var(--radius-kecil); overflow: hidden; border: 1px solid var(--kaca-tepi); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); background: var(--latar-2); }
.tk-foto img { width: 100%; height: 100%; object-fit: cover; }
/* keterangan foto (sorotan[].judul) sebagai pil kaca kecil di sudut bawah kiri tiap foto kolase */
.tk-teks {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 10px; border-radius: var(--radius-pil);
  background: rgba(26, 17, 11, .74); border: 1px solid var(--kaca-tepi); color: var(--tinta);
  font: 600 .6rem/1.3 var(--f-teks); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-foto-2 .tk-teks { bottom: auto; top: 8px; } /* sudut bawah foto #2 tertutup lencana putar */
.tk-foto-1 { left: 0; top: 6px; width: 56%; aspect-ratio: 4 / 3; rotate: -3deg; }
.tk-foto-2 { right: 8%; top: 44px; width: 46%; aspect-ratio: 1; rotate: 2.5deg; }
.tentang-kolase .lencana-putar { position: absolute; right: 0; bottom: -6px; }
.tentang-kolase.tanpa-foto { min-height: 0; }
.tanpa-foto .lencana-putar { position: relative; right: auto; bottom: auto; }
.lencana-putar { position: relative; display: grid; place-items: center; width: 140px; height: 140px; }
.lencana-putar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(26, 17, 11, .72); border: 1px solid var(--kaca-tepi); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lencana-putar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lencana-teks { transform-origin: 60px 60px; animation: putar 30s linear infinite; fill: var(--aksen); font-family: var(--f-teks); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@keyframes putar { to { transform: rotate(360deg); } }
.lencana-pusat { position: relative; width: 54px; height: 54px; }
.lencana-merek { width: 100%; height: 100%; }
.tentang-kanan { display: flex; flex-direction: column; gap: 24px; }
.tentang-kanan .teks-kaya { font-size: 1.05rem; }
.tentang-aksi { display: flex; justify-content: flex-end; margin-top: auto; }

/* ---------- 10. kartu paket ---------- */
.kisi-paket { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kisi-paket-1 { grid-template-columns: minmax(0, 320px); }
.kisi-paket-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 740px; }
.kisi-paket-3, .kisi-paket-5, .kisi-paket-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kartu-paket { position: relative; display: flex; flex-direction: column; padding: 8px; --r-regang: var(--radius); transition: translate .25s var(--mulus), border-color .25s; }
.kp-foto { position: relative; border-radius: var(--radius-kecil); overflow: hidden; aspect-ratio: 4 / 3; }
.kp-foto img, .kp-foto .foto-kosong { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--mulus); }
.kartu-paket:hover .kp-foto img { scale: 1.04; }
.kp-isi { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 14px 10px 8px; }
.kp-layanan { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; padding: 4px 10px 4px 7px; border-radius: var(--radius-pil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); font: 700 .64rem/1.3 var(--f-teks); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-redup); }
.kp-layanan .ikon { width: 14px; height: 14px; color: var(--aksen); }
.kp-nama { font-size: 1.15rem; line-height: 1.2; }
.kp-nama a { text-decoration: none; }
.kp-sub { color: var(--tinta-samar); font-size: .88rem; line-height: 1.45; }
.kp-kaki { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.kartu-paket .cakram { width: 36px; height: 36px; }
.kartu-paket .cakram .ikon { width: 16px; height: 16px; }
.kartu-paket:hover .cakram { translate: 2px 0; }

/* ---------- 11. untuk siapa ---------- */
.kisi-tipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kisi-tipe-1 { grid-template-columns: minmax(0, 420px); }
.kisi-tipe-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartu-tipe { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; padding: 22px 22px 8px; transition: translate .25s var(--mulus), border-color .25s; }
.kartu-tipe:hover { translate: 0 -3px; }
.kartu-tipe h3 { font-size: 1.35rem; }
.tipe-cip { display: flex; flex-wrap: wrap; gap: 6px; }
.tipe-cip li { padding: 5px 11px; border-radius: var(--radius-pil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); font: 600 .74rem/1.3 var(--f-teks); color: var(--tinta-redup); }
.tipe-kutip { position: relative; padding-left: 30px; color: var(--tinta-redup); font-size: .95rem; font-style: italic; }
.tipe-kutip .ikon { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; color: var(--aksen); }
.tipe-foto { margin: 6px -14px 0; border-radius: var(--radius-kecil); overflow: hidden; aspect-ratio: 4 / 3; }
.tipe-foto img, .tipe-foto .foto-kosong { width: 100%; height: 100%; object-fit: cover; }
.kartu-tipe.sorot {
  border-color: rgba(242, 166, 74, .55);
  background: linear-gradient(180deg, rgba(242, 166, 74, .16), rgba(242, 166, 74, .04)), rgba(44, 29, 20, .86);
  box-shadow: inset 0 1px 0 rgba(255, 200, 130, .3), var(--bayang-kartu), 0 0 70px -24px rgba(242, 166, 74, .5);
}
.kartu-tipe.sorot .tipe-cip li { border-color: rgba(242, 166, 74, .4); }
.aksi-tengah { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- 12. cara pesan & keunggulan ---------- */
.langkah { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.langkah-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.langkah-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.langkah-1 { grid-template-columns: minmax(0, 460px); }
.langkah::before { content: ""; position: absolute; left: 12%; right: 12%; top: 44px; z-index: 0; border-top: 2px dashed rgba(242, 166, 74, .5); }
.langkah-1::before { display: none; }
.langkah-kartu { position: relative; z-index: 1; display: grid; gap: 12px; align-content: start; padding: 22px; }
.langkah-atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.langkah-nomor { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--aksen); color: var(--tinta-aksen); font: 600 .95rem/1 var(--f-judul); box-shadow: 0 0 0 6px rgba(242, 166, 74, .14); }
.langkah-ikon { width: 40px; height: 40px; border-radius: 12px; }
.langkah-ikon .ikon { width: 20px; height: 20px; }
.langkah-kartu h3, .kenapa-kartu h3 { font-size: 1.15rem; }
.langkah-kartu p, .kenapa-kartu p { color: var(--tinta-redup); font-size: .92rem; }
.cahaya-kenapa { right: -12%; top: 20%; width: min(720px, 110vw); opacity: .8; }
.kenapa-daftar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kenapa-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kenapa-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kenapa-1 { grid-template-columns: minmax(0, 520px); }
.kenapa-kartu { display: grid; gap: 14px; align-content: start; padding: 24px; transition: translate .25s var(--mulus), border-color .25s; }
.kenapa-kartu:hover { translate: 0 -3px; border-color: var(--kaca-tepi-kuat); }

/* ---------- 13. ulasan ---------- */
.kisi-ulasan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kisi-ulasan-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.kisi-ulasan-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartu-ulasan { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.ku-atas { display: flex; align-items: center; justify-content: space-between; }
.ku-kutip { width: 28px; height: 28px; color: var(--aksen); }
.bintang { display: inline-flex; gap: 2px; color: var(--aksen); }
.bintang .ikon { width: 16px; height: 16px; }
.bintang-redup { opacity: .25; }
.kartu-ulasan blockquote { color: var(--tinta-redup); font-size: .98rem; }
.kartu-ulasan blockquote p + p { margin-top: 8px; }
.kartu-ulasan figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none; background: rgba(242, 166, 74, .18); border: 1px solid rgba(242, 166, 74, .4); color: var(--aksen-terang); font: 600 .85rem/1 var(--f-judul); }
.ku-nama { display: grid; }
.ku-nama b { font-weight: 600; }
.ku-nama small { color: var(--tinta-samar); font-size: .8rem; }
.ku-paket { display: inline-flex; align-items: center; gap: 6px; color: var(--aksen); font-size: .84rem; font-weight: 700; text-decoration: none; }
.ku-paket .ikon { width: 16px; height: 16px; }

/* ---------- 14. tanya-jawab ---------- */
.faq-kisi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.faq-kepala { position: sticky; top: calc(var(--nav-total) + 16px); padding: 32px; }
.faq-kepala .tombol-baris { margin-top: 24px; }
.faq-daftar { display: grid; gap: 10px; }
.faq { border-radius: var(--radius-kecil); transition: border-color .25s; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 600 1.02rem/1.35 var(--f-teks); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; border-radius: var(--radius-kecil); }
.faq-tanda { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: rgba(242, 166, 74, .14); border: 1px solid rgba(242, 166, 74, .38); color: var(--aksen); transition: rotate .3s var(--mulus), background-color .3s, color .3s; }
.faq-tanda .ikon { width: 16px; height: 16px; }
.faq[open] { border-color: rgba(242, 166, 74, .45); }
.faq[open] .faq-tanda { rotate: 45deg; background: var(--aksen); color: var(--tinta-aksen); }
.faq-jawab { padding: 0 20px 20px; color: var(--tinta-redup); font-size: .96rem; }
.faq-jawab p + p, .faq-jawab ul, .faq-jawab ol { margin-top: 8px; }
.faq-jawab ul, .faq-jawab ol { padding-left: 20px; }
.faq-jawab b { color: var(--tinta); }

/* ---------- 15. panel ajakan ---------- */
.bagian-cta { overflow: clip; }
.cahaya-cta { left: 50%; top: 50%; translate: -50% -50%; width: min(1100px, 150vw); opacity: 1; }
.cta-kartu { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px); text-align: center; border-color: rgba(255, 255, 255, .2); }
.cta-merek { position: absolute; right: -48px; top: -48px; width: 280px; height: 280px; opacity: .1; rotate: 12deg; pointer-events: none; }
.cta-merek .ikon { width: 100%; height: 100%; }
.cta-isi { position: relative; display: flex; flex-direction: column; align-items: center; }
.cta-isi .judul-bagian { max-width: 18ch; color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.cta-isi .sub-bagian { max-width: 56ch; }
.cta-isi .tombol-baris { margin-top: 30px; }
.cta-jam { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--tinta-samar); font-size: .86rem; }
.cta-jam .ikon { width: 16px; height: 16px; color: var(--aksen); }

/* ---------- 16. kaki ---------- */
.kaki { position: relative; margin-top: 24px; padding: 64px 0 28px; background: var(--latar-2); border-top: 1px solid var(--kaca-tepi); }
.kaki-kisi { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
.kaki-merek p { margin-top: 18px; max-width: 38ch; color: var(--tinta-redup); font-size: .92rem; }
.sosial { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sosial a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--kaca-2); border: 1px solid var(--kaca-tepi); color: var(--tinta); transition: border-color .2s, color .2s; }
.sosial a:hover { border-color: var(--aksen); color: var(--aksen); }
.sosial .ikon { width: 18px; height: 18px; }
.kaki-kolom h2 { margin-bottom: 18px; font: 700 .7rem/1.3 var(--f-teks); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-samar); }
.kaki-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kaki-kolom a { color: var(--tinta-redup); text-decoration: none; font-size: .95rem; transition: color .2s; }
.kaki-kolom a:hover { color: var(--aksen); }
.kaki-kontak li { display: flex; align-items: flex-start; gap: 10px; color: var(--tinta-redup); font-size: .95rem; }
.kaki-kontak .ikon { width: 18px; height: 18px; margin-top: 3px; color: var(--aksen); }
.kaki-area { margin-top: 16px; font-size: .82rem; color: var(--tinta-samar); }
.kaki-bawah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--kaca-tepi); color: var(--tinta-samar); font-size: .82rem; }
.kaki-kredit { display: block; margin-top: 4px; }
.ke-atas { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-redup); font-weight: 700; text-decoration: none; }
.ke-atas .ikon { width: 16px; height: 16px; }
.ke-atas:hover { color: var(--aksen); }

/* ---------- 17. tombol mengambang: WhatsApp (kanan) & bahasa GTranslate (kiri) ---------- */
.wa-apung {
  position: fixed; right: 18px; bottom: 18px; z-index: 70; display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50%; background: var(--wa); color: #fff;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .7), 0 0 0 5px rgba(37, 211, 102, .16);
  transition: transform .2s var(--mulus), opacity .2s ease, visibility .2s;
}
.wa-apung:hover { transform: translateY(-2px) scale(1.04); }
/* desktop: menyingkir selama tombol pesan halaman terlihat (situs.js → html.wa-redam) */
@media (min-width: 961px) {
  html.wa-redam .wa-apung { opacity: 0; visibility: hidden; pointer-events: none; }
}
.wa-apung .ikon { width: 28px; height: 28px; }
.wa-apung-label {
  position: absolute; right: calc(100% + 12px); top: 50%; padding: 8px 12px; border-radius: 10px; white-space: nowrap;
  background: var(--latar-2); border: 1px solid var(--kaca-tepi); color: var(--tinta); font-size: .82rem; font-weight: 600;
  opacity: 0; pointer-events: none; transform: translate(6px, -50%); transition: opacity .2s ease, transform .2s ease;
}
.wa-apung:hover .wa-apung-label, .wa-apung:focus-visible .wa-apung-label { opacity: 1; transform: translate(0, -50%); }
.terjemah-kanan .wa-apung { bottom: 82px; }
/* cdn.gtranslate.net merender pil bahasanya ke .gtranslate_wrapper (pembungkus tetap di sudut bawah, z-index besar).
   Pil (a.gt_switcher-popup) dibuat kaca gelap supaya menyatu dengan tema; disembunyikan saat laci/kotak cahaya terbuka. */
.gtranslate_wrapper { font-family: var(--f-teks); line-height: normal; }
.gtranslate_wrapper a.gt_switcher-popup {
  display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 !important; gap: 0;
  border-radius: var(--radius-pil); background: rgba(36, 23, 17, .9) !important; border: 1px solid var(--kaca-tepi);
  color: var(--tinta) !important; font: 500 13px/1 var(--f-teks) !important; text-decoration: none !important;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .2s ease, border-color .2s ease;
}
.gtranslate_wrapper a.gt_switcher-popup:hover { background: rgba(58, 38, 26, .95) !important; border-color: rgba(242, 166, 74, .6); }
.gtranslate_wrapper a.gt_switcher-popup span { color: var(--tinta) !important; }
.gtranslate_wrapper a.gt_switcher-popup img { border-radius: 3px; }
/* Pil lebar (bendera + "English" + ▼) menutupi tepi kiri kolom isi, jadi dijadikan tombol bendera bundar 44 px:
   nama bahasa hanya disembunyikan secara visual (nama aksesibel tetap ada), ▼ dibuang. Gaya float/globe tak kena. */
.gtranslate_wrapper a.gt_switcher-popup > span:first-of-type {
  position: absolute !important; width: 1px; height: 1px; margin: 0 !important; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.gtranslate_wrapper a.gt_switcher-popup > span:last-child:not(:first-of-type) { display: none !important; }
body:not(.terjemah-kanan) .gtranslate_wrapper .gt_switcher_wrapper:has(> a.gt_switcher-popup) { left: 18px !important; bottom: 25px !important; }
.terjemah-kanan .gtranslate_wrapper .gt_switcher_wrapper:has(> a.gt_switcher-popup) { right: 25px !important; bottom: 18px !important; }
/* jendela daftar bahasa (ps.js/popup.js: .gt_black_overlay + .gt_white_content) — ikut tema gelap amber */
.gtranslate_wrapper .gt_black_overlay { background: #0E0905 !important; }
.gtranslate_wrapper .gt_white_content {
  background: #241711 !important; color: var(--tinta) !important; color-scheme: dark;
  border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: var(--radius) !important;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(242, 166, 74, .35) !important;
}
.gtranslate_wrapper .gt_white_content .gt_search { background: transparent !important; color: var(--tinta-samar) !important; border-color: rgba(255, 255, 255, .1) !important; }
.gtranslate_wrapper .gt_white_content .gt_language_search {
  background: rgba(255, 255, 255, .06) !important; color: var(--tinta) !important; border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 10px !important; font: 400 14px/1.3 var(--f-teks) !important; outline-color: var(--aksen);
}
.gtranslate_wrapper .gt_white_content .gt_languages a { color: rgba(246, 237, 227, .9) !important; border-color: rgba(255, 255, 255, .07) !important; font-family: var(--f-teks) !important; }
.gtranslate_wrapper .gt_white_content .gt_languages a:hover,
.gtranslate_wrapper .gt_white_content .gt_languages a.gt-search-selected { background: rgba(242, 166, 74, .16) !important; color: var(--tinta) !important; }
.gtranslate_wrapper .gt_white_content .gt_languages a.gt-current-lang { background: rgba(242, 166, 74, .24) !important; font-weight: 600; }
/* gaya float.js: #gt_float_wrapper (fixed, sudut bawah) > .gt_float_switcher > .gt_options (daftar, terbuka = .gt-open) + .gt-selected
   (pil bendera + kode bahasa + panah). CSS bawaannya putih/Arial 20px → kaca gelap, Manrope 14px, panah diterangkan. */
.gtranslate_wrapper .gt_float_switcher {
  background: rgba(36, 23, 17, .94) !important; color: var(--tinta) !important; border: 1px solid var(--kaca-tepi); border-radius: 14px !important;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .8) !important; font: 600 14px/1.3 var(--f-teks) !important;
}
.gtranslate_wrapper .gt_float_switcher img { width: 24px !important; border-radius: 3px; }
.gtranslate_wrapper .gt_float_switcher .gt_options { background: transparent !important; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.gtranslate_wrapper .gt_float_switcher .gt_options::-webkit-scrollbar-track { background: transparent !important; }
.gtranslate_wrapper .gt_float_switcher .gt_options::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25) !important; }
.gtranslate_wrapper .gt_float_switcher .gt_options a { padding: 9px 14px !important; color: var(--tinta) !important; font-size: 14px !important; }
.gtranslate_wrapper .gt_float_switcher .gt_options a:hover, .gtranslate_wrapper .gt_float_switcher .gt_options a.gt-current-lang { background: rgba(242, 166, 74, .2) !important; color: var(--tinta) !important; }
.gtranslate_wrapper .gt_float_switcher .gt-selected { background: transparent !important; color: var(--tinta) !important; }
.gtranslate_wrapper .gt_float_switcher .gt_options.gt-open + .gt-selected { border-top: 1px solid var(--kaca-tepi); }
.gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang { padding: 10px 12px !important; color: var(--tinta) !important; }
.gtranslate_wrapper .gt_float_switcher .gt_float_switcher-arrow { filter: invert(.9); }
/* gaya globe.js: .gt_switcher_wrapper (fixed) > .gsatelites (bendera mengorbit saat diklik) + span.gglobe (bola dunia biru = background-image SVG).
   Bola dunia dikecilkan ke dalam cakram kaca gelap dan diwarnai amber lewat filter (sepia → jenuh) supaya senada dengan tema. */
.gtranslate_wrapper .gt_switcher_wrapper .gglobe {
  background-color: rgba(36, 23, 17, .92); background-size: 64% !important; background-position: center; background-repeat: no-repeat;
  border: 1px solid var(--kaca-tepi); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .8); opacity: 1 !important;
  filter: sepia(1) saturate(2.6) hue-rotate(-8deg);
}
.gtranslate_wrapper .gt_switcher_wrapper .gglobe:hover { transform: none !important; border-color: rgba(242, 166, 74, .6); }
.gtranslate_wrapper .gsatelite img { border: 2px solid rgba(36, 23, 17, .9); box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
html.kc-buka .gtranslate_wrapper, html.laci-buka .gtranslate_wrapper, html.kc-buka .wa-apung, html.laci-buka .wa-apung { display: none !important; }

/* ---------- 18. kepala halaman dalam, remah ---------- */
.hal-kepala { position: relative; padding: calc(var(--nav-total) + 44px) 0 36px; text-align: center; overflow: clip; }
.cahaya-hal { left: 50%; top: 0; translate: -50% -42%; width: min(1000px, 150vw); opacity: .75; }
.remah { margin-bottom: 22px; font-size: .82rem; }
.remah ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.remah li + li::before { content: "/"; margin-right: 6px; color: var(--tinta-samar); }
.remah a { color: var(--tinta-redup); text-decoration: none; }
.remah a:hover { color: var(--aksen); }
.remah [aria-current] { color: var(--tinta); }
.layanan-hero .remah ol, .paket-hal .remah ol { justify-content: flex-start; }
.hal-judul { max-width: 20ch; margin-inline: auto; font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -.015em; text-wrap: balance; }
.hal-sub { max-width: 62ch; margin: 16px auto 0; color: var(--tinta-redup); font-size: 1.08rem; }
.hal-tanggal { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 8px 14px; border-radius: var(--radius-pil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); color: var(--tinta-redup); font-size: .84rem; }
.hal-tanggal .ikon { width: 16px; height: 16px; color: var(--aksen); }
.saring { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }

/* ---------- 19. /services/ ---------- */
.kisi-layanan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kisi-layanan-1 { grid-template-columns: minmax(0, 1fr); }
.kartu-layanan-besar { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 8px; --r-regang: var(--radius); transition: translate .25s var(--mulus), border-color .25s; }
.kisi-layanan-1 .kartu-layanan-besar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
.klb-foto { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-kecil); overflow: hidden; }
.kisi-layanan-1 .klb-foto { aspect-ratio: auto; min-height: 320px; }
.klb-foto img, .klb-foto .foto-kosong { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: scale .7s var(--mulus); }
.kartu-layanan-besar:hover .klb-foto img { scale: 1.04; }
.klb-ikon { position: absolute; left: 12px; top: 12px; }
.klb-isi { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 12px; }
.klb-nama { font-size: 1.5rem; }
.klb-nama a { text-decoration: none; }
.klb-sub { color: var(--aksen); font-weight: 600; font-size: .95rem; }
.klb-ket { color: var(--tinta-redup); font-size: .95rem; }
.klb-kaki { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }

/* ---------- 20. halaman layanan ---------- */
.layanan-hero { position: relative; padding: calc(var(--nav-total) + 28px) 0 0; overflow: clip; }
.lh-kartu { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; padding: 10px; }
.lh-tanpa-foto { grid-template-columns: minmax(0, 1fr); }
.lh-teks { padding: clamp(18px, 3vw, 38px); }
.lh-ikon { margin-bottom: 20px; }
.lh-judul { font-size: clamp(2.2rem, 4.4vw, 3.4rem); letter-spacing: -.015em; }
.lh-aksen { font-size: 1.15rem; }
.lh-ket { margin-top: 16px; max-width: 52ch; color: var(--tinta-redup); font-size: 1.05rem; }
.lh-teks .tombol-baris { margin-top: 26px; }
.lh-fakta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--kaca-tepi); color: var(--tinta-redup); font-size: .88rem; }
.lh-fakta li { display: flex; align-items: center; gap: 8px; }
.lh-fakta .ikon { width: 18px; height: 18px; color: var(--aksen); }
.lh-foto { border-radius: var(--radius-kecil); overflow: hidden; min-height: 100%; }
.lh-foto img { width: 100%; height: 100%; object-fit: cover; }
.rinci-kisi { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rinci-tunggal { grid-template-columns: minmax(0, 1fr); }
.kartu { padding: clamp(22px, 3vw, 32px); }
.rinci-samping { position: sticky; top: calc(var(--nav-total) + 16px); }
.langkah-mini { display: grid; gap: 14px; margin-bottom: 20px; }
.langkah-mini li { display: flex; gap: 12px; }
.lm-nomor { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--aksen); color: var(--tinta-aksen); font: 600 .85rem/1 var(--f-judul); }
.langkah-mini b { display: block; font-weight: 600; }
.langkah-mini p { margin-top: 2px; color: var(--tinta-redup); font-size: .9rem; }
.daftar-centang { display: grid; gap: 10px; }
.daftar-centang li { display: flex; gap: 10px; color: var(--tinta-redup); font-size: .95rem; }
.daftar-centang .ikon { width: 20px; height: 20px; margin-top: 2px; color: var(--aksen); }
.daftar-centang b { color: var(--tinta); font-weight: 600; }
.rinci-samping .daftar-centang { margin-bottom: 20px; }
/* teks markdown */
.teks-kaya { color: var(--tinta-redup); line-height: 1.7; }
.teks-kaya p + p { margin-top: 14px; }
.teks-kaya h2, .teks-kaya h3, .teks-kaya h4, .teks-kaya h5 { margin: 26px 0 10px; color: var(--tinta); }
.teks-kaya h2 { font-size: 1.5rem; }
.teks-kaya h3 { font-size: 1.25rem; }
.teks-kaya h4, .teks-kaya h5 { font-size: 1.08rem; }
.teks-kaya > :first-child { margin-top: 0; }
.teks-kaya ul, .teks-kaya ol { margin: 12px 0 0; padding-left: 22px; }
.teks-kaya li + li { margin-top: 6px; }
.teks-kaya b { color: var(--tinta); }
.teks-kaya a { color: var(--aksen); }
/* deret layanan lain */
.deret-lain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.deret-lain-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.deret-lain-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lain-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; color: inherit; text-decoration: none; transition: translate .25s var(--mulus), border-color .25s; }
.lain-foto { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; }
.lain-foto img, .lain-foto .foto-kosong { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.lain-teks { display: grid; gap: 2px; min-width: 0; }
.lain-teks b { font: 500 1.05rem/1.2 var(--f-judul); }
.lain-teks small { color: var(--tinta-samar); font-size: .8rem; }
.lain-item .cakram { margin-left: auto; }

/* ---------- 21. halaman paket ---------- */
.paket-hal { position: relative; padding: calc(var(--nav-total) + 28px) 0 0; }
.paket-kisi { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px); gap: 24px; align-items: start; }
.p-galeri { grid-column: 1; }
.pg-utama { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--kaca-tepi); background: var(--latar-2); }
.pg-gambar { width: 100%; height: 100%; object-fit: cover; }
.pg-kosong { display: grid; }
.pg-perbesar, .pg-hitung { position: absolute; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-pil); background: rgba(26, 17, 11, .8); border: 1px solid var(--kaca-tepi); color: var(--tinta); font: 700 .76rem/1 var(--f-teks); }
.pg-perbesar { right: 12px; }
.pg-perbesar .ikon { width: 16px; height: 16px; color: var(--aksen); }
.pg-hitung { left: 12px; color: var(--tinta-redup); }
.pg-kecil { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.pg-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 2px solid transparent; opacity: .66; transition: opacity .2s, border-color .2s; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg-thumb.aktif, .pg-thumb:hover { opacity: 1; border-color: var(--aksen); }
/* lengket di bawah navigasi; kartu yang lebih tinggi dari layar lengket pada tepi bawahnya (--p-info-h dari situs.js) */
.p-info { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: min(calc(var(--nav-total) + 16px), calc(100vh - var(--p-info-h, 0px) - 16px)); padding: 24px; }
.pi-atas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.pi-atas .lencana-populer { position: static; }
.pi-judul { font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.015em; }
.pi-sub { margin-top: 8px; color: var(--tinta-redup); }
.pi-label, .pi-judul-kecil { display: block; margin-bottom: 8px; font: 700 .66rem/1.3 var(--f-teks); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-samar); }
.pi-cocok { margin-top: 16px; }
.pi-cocok ul { display: flex; flex-wrap: wrap; gap: 6px; }
.pi-cocok li { padding: 5px 11px; border-radius: var(--radius-pil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); font: 600 .76rem/1.3 var(--f-teks); color: var(--tinta-redup); }
.pi-harga { margin-top: 18px; padding: 16px; border-radius: var(--radius-kecil); background: rgba(242, 166, 74, .1); border: 1px solid rgba(242, 166, 74, .32); }
.pi-harga .pi-label { margin-bottom: 4px; color: var(--aksen); }
.pi-angka { display: block; font: 500 1.7rem/1.1 var(--f-judul); letter-spacing: -.02em; }
.pi-satuan { display: block; margin-top: 4px; color: var(--tinta-samar); font-size: .84rem; }
.pi-tombol { display: grid; gap: 10px; margin-top: 16px; }
.pi-catatan { display: flex; gap: 8px; margin-top: 12px; color: var(--tinta-samar); font-size: .82rem; line-height: 1.5; }
.pi-catatan .ikon { width: 16px; height: 16px; margin-top: 3px; color: var(--aksen); }
.pi-catatan a { color: var(--tinta-redup); }
.pi-blok { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--kaca-tepi); }
.pi-judul-kecil { margin-bottom: 12px; }
.pi-fakta { display: grid; gap: 8px; }
.pi-fakta div { display: grid; grid-template-columns: minmax(88px, 36%) minmax(0, 1fr); gap: 12px; font-size: .9rem; } /* label tak terbungkus oleh nilai panjang */
.pi-fakta dt { color: var(--tinta-samar); }
.pi-fakta dd { margin: 0; text-align: right; font-weight: 600; }
.p-rinci { grid-column: 1; display: grid; gap: 18px; margin-top: 24px; }
.rinci-pembuka { margin-bottom: 14px; color: var(--tinta); font-size: 1.1rem; }
.catatan-kecil { color: var(--tinta-samar); font-size: .86rem; }
.varian { display: grid; gap: 8px; margin-top: 14px; }
.varian a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-kecil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); color: inherit; text-decoration: none; transition: border-color .2s; }
.varian a:hover { border-color: var(--aksen); }
.varian-nama { display: grid; gap: 2px; flex: 1; min-width: 0; }
.varian-nama b { font-weight: 600; }
.varian-nama small { color: var(--tinta-samar); font-size: .84rem; }
.varian-harga { font: 500 .95rem/1 var(--f-judul); color: var(--aksen); white-space: nowrap; }
.varian-wa { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: rgba(242, 166, 74, .16); color: var(--aksen); }
.varian-wa .ikon { width: 18px; height: 18px; }
.bagikan-baris { display: flex; flex-wrap: wrap; gap: 8px; }
.tbl-ikon-teks { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-pil); background: var(--kaca-2); border: 1px solid var(--kaca-tepi); color: var(--tinta); font: 600 .84rem/1 var(--f-teks); text-decoration: none; cursor: pointer; transition: border-color .2s; }
.tbl-ikon-teks .ikon { width: 18px; height: 18px; color: var(--aksen); }
.tbl-ikon-teks:hover { border-color: var(--kaca-tepi-kuat); }

/* ---------- 22. galeri ---------- */
.masonry { columns: 3 260px; column-gap: 12px; }
.mas-item { position: relative; display: block; margin-bottom: 12px; break-inside: avoid; border-radius: var(--radius-kecil); overflow: hidden; border: 1px solid var(--kaca-tepi); background: var(--latar-2); }
.mas-item[hidden] { display: none; }
.mas-item img { width: 100%; height: auto; transition: scale .7s var(--mulus); }
.mas-item:hover img { scale: 1.03; }
.mas-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 30px 12px 10px; background: linear-gradient(180deg, transparent, rgba(26, 17, 11, .88)); color: var(--tinta); font: 600 .84rem/1.3 var(--f-teks); opacity: 0; transition: opacity .25s; }
.mas-item:hover .mas-label, .mas-item:focus-visible .mas-label { opacity: 1; }
.mas-label .ikon { width: 18px; height: 18px; color: var(--aksen); }
.mas-label > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: none) { .mas-label { opacity: 1; } }
.saring-kosong { padding: 40px 0; text-align: center; color: var(--tinta-samar); }

/* ---------- 23. syarat & 404 ---------- */
.syarat-kartu { max-width: 860px; margin-inline: auto; }
.syarat-kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--kaca-tepi); color: var(--tinta-redup); }
.galat-tanda { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; color: var(--aksen); font: 500 clamp(4rem, 12vw, 7rem)/1 var(--f-judul); letter-spacing: -.04em; }
.galat-merek { width: .9em; height: .9em; }
.hal-404-kepala .tombol-baris { margin-top: 28px; }

/* ---------- 24. kotak cahaya ---------- */
.kotak-cahaya {
  position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  align-items: center; gap: 0 10px; padding: 0 12px 12px; background: rgba(14, 9, 6, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.kotak-cahaya[hidden] { display: none; }
.kc-bilah { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; color: var(--tinta-redup); font-size: .88rem; }
.kc-tombol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--kaca-tepi); background: var(--kaca-2); color: var(--tinta); cursor: pointer; transition: border-color .2s, color .2s; }
.kc-tombol .ikon { width: 22px; height: 22px; }
.kc-tombol:hover { border-color: var(--aksen); color: var(--aksen); }
.kc-nav[hidden] { display: grid; visibility: hidden; }
.kc-figur { display: grid; justify-items: center; gap: 12px; min-height: 0; }
.kc-figur img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; border-radius: var(--radius-kecil); }
.kc-figur img:not([src]) { display: none; }
.kc-teks { color: var(--tinta-redup); font-size: .9rem; text-align: center; }
.kc-teks a { color: var(--aksen); font-weight: 700; }

/* ---------- 25. muncul saat digulir ---------- */
.js .muncul { opacity: 0; translate: 0 12px; transition: opacity .7s var(--mulus), translate .7s var(--mulus); }
.js .muncul.tampak { opacity: 1; translate: none; }

/* ---------- 26. responsif ---------- */
@media (max-width: 1180px) {
  .hero-kisi { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 360px); gap: 32px; }
  .kisi-paket { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kenapa-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaki-kisi { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; }
}
/* wadah menyentuh tepi layar: bilah bawah kaki diberi ruang supaya tidak tertutup tombol bahasa (kiri) & WhatsApp (kanan) yang mengambang */
@media (max-width: 1360px) {
  .kaki { padding-bottom: 96px; }
}
@media (max-width: 960px) {
  .nav-tautan { display: none; }
  .nav-aksi { margin-left: auto; } /* tautan tengah hilang: tombol & burger menempel ke kanan */
  .nav-burger { display: grid; }
  .hero { min-height: 0; }
  .hero-kisi { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-bottom: 28px; }
  .hero-isi { padding-top: 0; }
  .hero-bawah { justify-content: center; padding-top: 30px; } /* lencana di tengah: jauh dari tombol bahasa (kiri) & WhatsApp (kanan) yang mengambang */
  .hero-gulir { display: none; }
  .hero-lencana { width: 112px; height: 112px; }
  .hl-isi b { font-size: 1.7rem; }
  .hero-kartu { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--tepi) 14px; margin-inline: calc(-1 * var(--tepi)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hero-kartu::-webkit-scrollbar { display: none; }
  .hk { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; }
  .hero-foto { object-position: 70% 50%; }
  .hero-selubung { background: linear-gradient(180deg, rgba(26, 17, 11, .72) 0%, rgba(26, 17, 11, .55) 40%, rgba(26, 17, 11, .82) 72%, var(--latar) 100%); }
  .kepala-belah { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tentang-kartu { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tentang-kolase { max-width: 480px; }
  .kisi-ubin-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kisi-paket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kisi-tipe, .kisi-ulasan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kisi-tipe-1, .kisi-ulasan-1 { grid-template-columns: minmax(0, 1fr); }
  .langkah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .langkah::before { display: none; }
  .kenapa-daftar, .kenapa-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-kisi { grid-template-columns: minmax(0, 1fr); }
  .faq-kepala { position: static; }
  .kaki-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .lh-kartu { grid-template-columns: minmax(0, 1fr); }
  .lh-foto { aspect-ratio: 16 / 9; min-height: 0; }
  .rinci-kisi { grid-template-columns: minmax(0, 1fr); }
  .rinci-samping { position: static; }
  .deret-lain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paket-kisi { grid-template-columns: minmax(0, 1fr); }
  .p-galeri, .p-info, .p-rinci { grid-column: 1; }
  .p-info { grid-row: auto; position: static; }
  .p-rinci { margin-top: 0; }
}
@media (max-width: 700px) {
  :root { --tepi: 16px; --nav-h: 58px; }
  .bagian { padding: 48px 0; }
  .merek { font-size: 1rem; }
  .merek-ikon, .merek-logo { width: 32px; height: 32px; }
  .nav-pil { padding: 6px 6px 6px 14px; gap: 10px; }
  .nav-burger { width: 44px; height: 44px; }
  .hero-tombol .tbl, .cta-isi .tombol-baris .tbl, .hal-404-kepala .tombol-baris .tbl, .lh-teks .tombol-baris .tbl { width: 100%; }
  .hero-sub { font-size: 1rem; }
  .pita { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 4px var(--tepi) 10px; margin-inline: calc(-1 * var(--tepi)); scroll-snap-type: x proximity; scrollbar-width: none; }
  .pita::-webkit-scrollbar { display: none; }
  .pita-item { flex: none; scroll-snap-align: start; }
  .kisi-ubin, .kisi-ubin-3 { grid-template-columns: minmax(0, 1fr); }
  .ubin, .kisi-ubin-3 .ubin, .kisi-ubin-1 .ubin { min-height: 300px; padding: 18px; }
  .ubin-ikon { left: 18px; top: 18px; }
  /* deret geser-samping: kartu paket (beranda, terkait, 404) & kartu tipe */
  .geser { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--tepi) 16px; margin-inline: calc(-1 * var(--tepi)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .geser::-webkit-scrollbar { display: none; }
  .geser > * { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
  .kisi-paket:not(.geser) { grid-template-columns: minmax(0, 1fr); }
  .kisi-tipe:not(.geser), .kisi-ulasan, .langkah, .kenapa-daftar, .kenapa-4, .kisi-layanan, .deret-lain { grid-template-columns: minmax(0, 1fr); }
  .kepala-aksi .kepala-kanan { width: 100%; }
  .tentang-kartu { padding: 22px; }
  .tentang-kolase { min-height: 220px; }
  .tk-foto-2 { top: 30px; }
  .tentang-kolase .lencana-putar { width: 112px; height: 112px; }
  .tentang-aksi { justify-content: flex-start; }
  .tentang-aksi .tbl { width: 100%; }
  .faq-kepala { padding: 24px; }
  .faq summary { padding: 16px; font-size: .98rem; }
  .faq-jawab { padding: 0 16px 16px; }
  .cta-kartu { padding: 36px 20px; }
  .kaki { padding-top: 48px; }
  .kaki-kisi { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kaki-bawah { flex-direction: column; align-items: flex-start; }
  .kaki { padding-bottom: 132px; }
  .hal-kepala { padding-bottom: 28px; }
  .kartu-kosong { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .lh-kartu { padding: 8px; }
  .lh-fakta { gap: 8px 16px; }
  .masonry { columns: 2 150px; column-gap: 10px; }
  .mas-item { margin-bottom: 10px; }
  .kotak-cahaya { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto; padding-bottom: 16px; }
  .kc-figur { grid-column: 1 / -1; grid-row: 2; }
  .kc-figur img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
  .kc-sebelum { grid-row: 3; grid-column: 1; justify-self: start; }
  .kc-sesudah { grid-row: 3; grid-column: 2; justify-self: end; }
  .wa-apung { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .wa-apung-label { display: none; }
  .terjemah-kanan .wa-apung { bottom: 74px; }
  body:not(.terjemah-kanan) .gtranslate_wrapper .gt_switcher_wrapper:has(> a.gt_switcher-popup) { left: 14px !important; bottom: 19px !important; }
  .terjemah-kanan .gtranslate_wrapper .gt_switcher_wrapper:has(> a.gt_switcher-popup) { right: 19px !important; bottom: 14px !important; }
  .syarat-kaki { flex-direction: column; align-items: flex-start; }
  .syarat-kaki .tombol-baris { width: 100%; }
}
@media (max-width: 480px) {
  .nav-pesan { display: none; }
  .hero-judul { font-size: clamp(2.3rem, 11vw, 2.9rem); }
  .hk { flex-basis: 86vw; }
  .hk-statdaftar { gap: 8px; }
  .hk-statdaftar b { font-size: 1.2rem; }
  .tombol-baris .tbl { width: 100%; }
  .kepala-aksi .tbl { width: 100%; }
  .pg-kecil { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bagikan-baris .tbl-ikon-teks { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .tk-teks { display: none; } /* foto kolase terlalu kecil untuk keterangan */
  /* popup.js menata daftar bahasa 2 kolom yang terpotong di layar sempit → satu kolom bergulir (ps.js sudah satu kolom) */
  .gtranslate_wrapper .gt_white_content .gt_languages { display: block !important; max-height: none !important; }
}
/* layar sentuh: area ketuk tautan kecil (remah, kaki) diperbesar tanpa menggeser tata letak */
@media (hover: none) and (pointer: coarse) {
  .remah a, .kaki-kolom a { padding: 6px 0; margin: -6px 0; }
}

/* ---------- 27. gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .muncul { opacity: 1; translate: none; }
  .js .cincin-isi { stroke-dashoffset: calc(100 - var(--p, 1) * 100); }
  .kelopak { display: none; }
  .hero-foto { transition: none; }
  .ubin:hover, .kartu-paket:hover, .kartu-layanan-besar:hover, .lain-item:hover, .kartu-tipe:hover, .kenapa-kartu:hover, .tbl:hover { translate: none; }
}

/* ---------- 28. cetak ---------- */
@media print {
  .nav, .laci, .wa-apung, .gtranslate_wrapper, .kotak-cahaya, .hero-latar, .cahaya, .bagian-cta, .kelopak { display: none !important; }
  body { background: #fff; color: #000; }
  .js .muncul { opacity: 1; translate: none; }
  .panel, .kartu, .kartu-paket, .ubin, .kartu-tipe, .langkah-kartu, .kenapa-kartu, .kartu-ulasan, .faq { background: #fff; border-color: #ccc; box-shadow: none; color: #000; }
}