/* Telebot Suite — gaya khusus halaman promosi & pendaftaran.
   Dibangun di atas gaya.css: hanya memakai variabel warna yang sudah ada.
   Mobile dulu. Tidak boleh ada yang meluber horizontal di 320px. PRD §12.1 */

/* ============================================================
   0. Dasar halaman
   ============================================================ */

/* Dua angka jarak dipakai seluruh halaman, supaya iramanya seragam:
   --jarak-bagian = ruang atas-bawah tiap bagian
   --jarak-kartu  = ruang antar kartu di dalam satu baris maupun tumpukan */
:root {
  --jarak-bagian: clamp(34px, 5vw, 52px);
  --jarak-kartu: 14px;
  --jarak-kepala: 20px;
  /* tinggi bar atas yang menempel (60px isi + 1px garis bawah);
     dipakai hero supaya layar pertama pas betul */
  --tinggi-bar: 61px;
}

.promo {
  /* membatalkan gaya <main> bawaan gaya.css supaya bisa lebar penuh */
  max-width: none;
  margin: 0;
  padding: 0;
}
.promo > * { animation: none; }

.wadah {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

/* satu nilai untuk semua bagian, termasuk penutup */
.bagian,
.bagian.rapat { padding: var(--jarak-bagian) 0; }

.bagian-kepala { margin-bottom: var(--jarak-kepala); max-width: 60ch; }
.bagian-kepala .label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--redup); margin-bottom: 9px;
}
.bagian-kepala .label::before {
  content: ""; width: 20px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--hijau), var(--biru));
}
.bagian-kepala h2 { font-size: clamp(20px, 5.4vw, 28px); margin-bottom: 7px; }
.bagian-kepala p { color: var(--redup); margin: 0; }

/* garis pemisah halus antar bagian */
.pisah {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--garis), transparent);
}

/* ============================================================
   1. Bar atas
   ============================================================ */

.bar-atas {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 15, 29, .78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.bar-atas.turun {
  border-bottom-color: var(--garis);
  background: rgba(10, 15, 29, .93);
}
.bar-atas .isi-bar {
  display: flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 9px 16px;
  max-width: 1080px; margin: 0 auto;
}
.merek-promo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; letter-spacing: -.4px; font-size: 15.5px;
  color: var(--teks); min-width: 0;
}
.merek-promo .tanda {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--hijau), var(--biru));
  display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(42, 209, 154, .45);
  animation: denyut-merek 3.6s ease-in-out infinite;
}
@keyframes denyut-merek {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42, 209, 154, .45); }
  55%      { box-shadow: 0 0 0 8px rgba(42, 209, 154, 0); }
}
.merek-promo .nama { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-atas .aksi-bar { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none; }
.bar-atas .tbl { min-height: 38px; padding: 7px 13px; font-size: 13.5px; border-radius: 10px; }

@media (max-width: 359px) {
  .merek-promo .nama { font-size: 13.5px; }
  .bar-atas .tbl { padding: 7px 10px; font-size: 13px; }
}

/* ============================================================
   2. Hero
   ============================================================ */

/* Layar pertama harus utuh tanpa digulir: tinggi hero mengikuti TINGGI LAYAR,
   bukan tinggi isinya. svh dipakai (bukan vh) supaya tidak meleset di peramban
   HP yang bar alamatnya menyusut-membesar. Baris pertama memuat isi hero yang
   dipusatkan, baris kedua penanda "masih ada di bawah".

   Tingginya DIBATASI --hero-maks. Tanpa batas itu, di layar jangkung isinya
   tetap dipusatkan sehingga muncul pita kosong lebar di atas dan di bawah —
   lapang bukan karena dirancang begitu, tapi karena tidak ada yang menahan.
   Karena yang dipakai min(), janji "muat satu layar" tidak ikut hilang:
   hasilnya tidak pernah lebih tinggi dari layar, hanya berhenti memuai. */
.hero-promo {
  --hero-maks: 620px;
  padding: 30px 0 0;
  position: relative;
  min-height: calc(100vh - var(--tinggi-bar));        /* cadangan peramban lama */
  min-height: min(calc(100svh - var(--tinggi-bar)), var(--hero-maks));
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
}
.hero-promo .wadah { display: grid; gap: 24px; align-items: center; }

/* penanda halus: halamannya berlanjut, jadi tidak ada yang merasa terpotong */
.hero-lanjut {
  grid-row: 2;
  justify-self: center;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 14px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  color: var(--redup2);
  transition: color .2s, transform .2s;
}
.hero-lanjut:hover { color: var(--hijau); }
.hero-lanjut svg { display: block; animation: turun-pelan 2.4s ease-in-out infinite; }
@keyframes turun-pelan {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(4px); opacity: 1; }
}

.hero-teks .sorot {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px; border-radius: 999px;
  border: 1px solid var(--garis2); background: var(--kartu);
  font-size: 12.5px; font-weight: 600; color: var(--redup);
  margin-bottom: 15px; max-width: 100%;
}
.hero-teks .sorot .titik-hidup {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--hijau); box-shadow: 0 0 0 3px rgba(42, 209, 154, .18);
  animation: kedip-hidup 2s ease-in-out infinite;
}
@keyframes kedip-hidup { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Ukuran judul ikut LEBAR dan TINGGI layar sekaligus: di layar pendek
   (laptop 768px) suku vh yang menang, jadi judulnya otomatis lebih ringkas. */
.hero-teks h1 {
  font-size: clamp(27px, 8.4vw, 50px);
  font-size: clamp(27px, min(8.4vw, 7.4svh), 50px);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 14px;
  overflow-wrap: break-word;
}
.hero-teks h1 .tekan {
  background: linear-gradient(118deg, var(--hijau) 5%, var(--biru) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-teks .ajak {
  color: var(--redup); font-size: clamp(14.5px, 3.9vw, 17px);
  max-width: 50ch; margin-bottom: 22px;
}

.tombol-baris { display: flex; flex-wrap: wrap; gap: 10px; }
.tombol-baris .tbl { flex: 1 1 190px; }
.tbl.besar { min-height: 50px; padding: 12px 22px; font-size: 15.5px; border-radius: 13px; }

@media (min-width: 900px) {
  .hero-promo { padding: 30px 0 0; }
  /* kedua kolom sama tinggi: kartu diagram ikut tinggi kolom teks,
     diagramnya sendiri tetap seukuran wajar dan duduk di tengah kartu */
  .hero-promo .wadah { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 40px; }
  .hero-teks { display: flex; flex-direction: column; justify-content: center; }
  .hero-visual { display: flex; }
  .hero-visual .panggung { flex: 1 1 auto; padding: 18px; }
  .tombol-baris .tbl { flex: 0 0 auto; }
}

/* ---------- Layar pendek: kecilkan bertahap, jangan sampai terpotong ----------
   Ini yang dulu tidak ada sama sekali — hero hanya memperhitungkan lebar.
   Tombol tetap minimal 44px supaya masih enak ditekan. */
/* HP: ruang atas dirapatkan sedikit supaya diagramnya tetap utuh di layar pertama */
@media (max-width: 430px) {
  .hero-promo { padding-top: 20px; }
  .hero-lanjut { padding: 2px 12px 8px; }
}

@media (max-height: 820px) {
  .hero-promo { padding-top: 20px; }
  .hero-teks .sorot { margin-bottom: 11px; }
  .hero-teks h1 { margin-bottom: 11px; }
  .hero-teks .ajak { margin-bottom: 16px; font-size: clamp(14px, 3.9vw, 15.5px); }
  .hero-promo .wadah { gap: 20px; }
  .panggung svg { max-width: 400px; }
  .hero-promo .panggung { padding: 14px; }
  .tbl.besar { min-height: 46px; padding: 11px 20px; font-size: 15px; }
  .hero-lanjut { padding: 6px 14px 10px; }
}
@media (max-height: 700px) {
  .hero-promo { padding-top: 14px; }
  .hero-teks .sorot { margin-bottom: 9px; font-size: 12px; }
  .hero-teks h1 { margin-bottom: 9px; }
  .hero-teks .ajak { margin-bottom: 13px; }
  .hero-promo .wadah { gap: 16px; }
  .panggung svg { max-width: 340px; }
  .hero-promo .panggung-kaki { margin-top: 8px; font-size: 11px; }
  .tbl.besar { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }
  .hero-lanjut { font-size: 11.5px; padding: 4px 12px 8px; }
}

/* ---------- Pita di bawah hero: poin izin + lencana + catatan jujur ----------
   Dulu semuanya menumpuk di kolom kiri hero sehingga kolom kiri jauh lebih
   tinggi daripada kartu diagram di kanan. Sekarang selebar halaman. */

.hero-pita { padding: 26px 0 var(--jarak-bagian); }
.hero-pita .wadah { display: grid; gap: 18px; }

.hero-poin {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--jarak-kartu); align-items: stretch;
}
@media (min-width: 720px) { .hero-poin { grid-template-columns: repeat(3, 1fr); } }

.hero-poin li {
  position: relative; padding: 14px 16px 14px 34px;
  border: 1px solid var(--garis); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(22, 32, 58, .58), rgba(18, 26, 45, .58));
  font-size: 14px; line-height: 1.55; color: var(--redup);
  overflow-wrap: anywhere;
}
.hero-poin li::before {
  content: ""; position: absolute; left: 16px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hijau); box-shadow: 0 0 0 3px rgba(42, 209, 154, .16);
}
.hero-poin b { display: block; color: var(--teks); font-weight: 650; margin-bottom: 3px; }

.hero-pita-kaki {
  display: grid; gap: 12px;
  border-top: 1px solid var(--garis); padding-top: 16px;
}

.hero-kaki {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 12.5px; color: var(--redup2);
}
.hero-kaki span { display: inline-flex; align-items: center; gap: 6px; }
.hero-kaki span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--hijau); flex: none;
}

/* ---------- Visual bergerak (SVG murni) ---------- */

/* saat hero masih menumpuk (di bawah 900px), kartu diagram tidak melebar
   sampai memenuhi layar — ia tetap sedang dan duduk di tengah */
.hero-visual { width: 100%; max-width: 520px; margin-inline: auto; }
@media (min-width: 900px) { .hero-visual { max-width: none; margin-inline: 0; } }

.panggung {
  position: relative;
  border: 1px solid var(--garis);
  border-radius: 20px;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(91, 157, 255, .12), transparent 70%),
    linear-gradient(180deg, rgba(22, 32, 58, .75), rgba(14, 21, 38, .75));
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 22px 54px rgba(0, 0, 0, .42);
  padding: 14px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.panggung::before {
  /* garis cahaya di tepi atas */
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 209, 154, .7), rgba(91, 157, 255, .7), transparent);
}
.panggung::after {
  /* sapuan cahaya pelan melintasi panel */
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -45%;
  background: linear-gradient(100deg, transparent, rgba(91, 157, 255, .09), transparent);
  animation: sapu 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sapu { 0%, 12% { left: -45%; } 70%, 100% { left: 115%; } }

/* diagram tidak pernah jadi raksasa: lebarnya dibatasi lalu ditaruh di tengah kartu */
.panggung svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; flex: none; }

/* kisi halus di dalam panel */
.panggung .kisi line { stroke: rgba(91, 157, 255, .09); stroke-width: 1; }

/* jalur sinyal: garis dasar + garis berjalan */
.jalur-dasar { fill: none; stroke: var(--garis2); stroke-width: 1.4; opacity: .55; }
.jalur-alir {
  fill: none; stroke: url(#alir); stroke-width: 2.1; stroke-linecap: round;
  stroke-dasharray: 16 150;
  animation: mengalir 3.2s linear infinite;
}
.jalur-alir.b2 { animation-duration: 4.1s; animation-delay: -1.1s; }
.jalur-alir.b3 { animation-duration: 3.6s; animation-delay: -2.2s; }
@keyframes mengalir { to { stroke-dashoffset: -166; } }

/* paket data kecil yang meluncur di jalur */
.paket { animation: luncur 3.2s linear infinite; }
.paket.b2 { animation-duration: 4.1s; animation-delay: -1.1s; }
.paket.b3 { animation-duration: 3.6s; animation-delay: -2.2s; }
@keyframes luncur {
  0%   { opacity: 0; transform: translateX(0); }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(158px); }
}

/* simpul yang berdenyut */
.simpul { transform-box: fill-box; transform-origin: center; animation: denyut-simpul 2.6s ease-in-out infinite; }
.simpul.s2 { animation-delay: -.9s; }
.simpul.s3 { animation-delay: -1.7s; }
@keyframes denyut-simpul {
  0%, 100% { opacity: .35; transform: scale(.78); }
  50%      { opacity: 1;   transform: scale(1.18); }
}

/* cincin di sekitar ikon telegram */
.cincin { transform-box: fill-box; transform-origin: center; animation: lebar 3s ease-out infinite; }
.cincin.c2 { animation-delay: -1.5s; }
@keyframes lebar {
  0%   { opacity: .55; transform: scale(.62); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/* layar komputer: baris yang "mengetik" sendiri */
.baris-layar { animation: isi-baris 4.4s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
.baris-layar.l2 { animation-delay: -1.4s; }
.baris-layar.l3 { animation-delay: -2.8s; }
@keyframes isi-baris {
  0%, 100% { transform: scaleX(.35); opacity: .45; }
  45%      { transform: scaleX(1);   opacity: 1; }
}

/* label kecil di bawah panel */
.panggung-kaki {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; padding: 0 4px; flex: none;
  font-size: 11.5px; color: var(--redup2); font-weight: 600;
}
.panggung-kaki span { min-width: 0; overflow-wrap: anywhere; }
.panggung-kaki b { color: var(--redup); font-weight: 700; }

/* ============================================================
   3. Kartu isi (masalah, keamanan, dll.)
   ============================================================ */

.petak { display: grid; gap: var(--jarak-kartu); align-items: stretch; }
@media (min-width: 680px) { .petak.tiga { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .petak.dua  { grid-template-columns: repeat(2, 1fr); } }

.kartu-isi {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22, 32, 58, .7), rgba(18, 26, 45, .7));
  border: 1px solid var(--garis);
  border-radius: var(--r);
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), border-color .22s, box-shadow .22s;
}
.kartu-isi:hover {
  transform: translateY(-3px);
  border-color: var(--garis2);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
}
.kartu-isi h3 { font-size: 16px; margin-bottom: 6px; overflow-wrap: anywhere; }
.kartu-isi p { color: var(--redup); font-size: 14px; margin: 0; overflow-wrap: anywhere; }
/* penutup kartu (tombol / catatan) selalu menempel di dasar */
.kartu-isi .tutupnya { margin-top: auto; padding-top: 14px; display: grid; gap: 8px; }

.ikon-kotak {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 12px;
  border: 1px solid var(--garis2); background: var(--bg2);
}
.ikon-kotak svg { display: block; }
.ikon-kotak.hijau { border-color: rgba(42, 209, 154, .3); background: var(--hijau-bg); color: var(--hijau); }
.ikon-kotak.biru  { border-color: rgba(91, 157, 255, .3); background: var(--biru-bg);  color: var(--biru); }
.ikon-kotak.kuning{ border-color: rgba(243, 193, 90, .3); background: var(--kuning-bg); color: var(--kuning); }
.ikon-kotak.merah { border-color: rgba(243, 115, 106, .3); background: var(--merah-bg); color: var(--merah); }

/* ============================================================
   4. Cara kerja — langkah bernomor
   ============================================================ */

.langkah-petak { display: grid; gap: var(--jarak-kartu); align-items: stretch; counter-reset: urut; }
@media (min-width: 760px) { .langkah-petak { grid-template-columns: repeat(3, 1fr); } }

.langkah-kartu {
  position: relative;
  display: flex; flex-direction: column;
  padding: 20px 18px 18px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(22, 32, 58, .68), rgba(16, 24, 42, .68));
  transition: transform .22s, border-color .22s;
}
.langkah-kartu:hover { transform: translateY(-3px); border-color: var(--garis2); }
.langkah-kartu .no-besar {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 11px;
  font-size: 15px; font-weight: 800; color: #04120d;
  background: linear-gradient(135deg, var(--hijau), var(--biru));
  box-shadow: 0 6px 18px rgba(42, 209, 154, .26);
}
.langkah-kartu h3 { font-size: 16px; margin-bottom: 6px; }
.langkah-kartu p { color: var(--redup); font-size: 14px; margin: 0; }
.langkah-kartu .tutupnya { margin-top: auto; padding-top: 14px; display: grid; gap: 8px; }

/* panah penghubung antar langkah (hanya layar lebar) */
@media (min-width: 760px) {
  .langkah-kartu:not(:last-child)::after {
    content: ""; position: absolute; top: 38px; right: -8px;
    width: 14px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--hijau), transparent);
    animation: geser-panah 2.2s ease-in-out infinite;
  }
}
@keyframes geser-panah { 0%, 100% { transform: translateX(-3px); opacity: .5; } 50% { transform: translateX(3px); opacity: 1; } }

/* ============================================================
   5. Kenapa relay — panel dua kolom
   ============================================================ */

.panel-relay {
  border: 1px solid var(--garis);
  border-radius: 18px;
  padding: 20px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(42, 209, 154, .09), transparent 62%),
    linear-gradient(180deg, rgba(22, 32, 58, .72), rgba(16, 24, 42, .72));
  display: grid; gap: 20px;
}
@media (min-width: 880px) {
  .panel-relay { grid-template-columns: 1.05fr .95fr; align-items: stretch; padding: 28px; }
}

.cek { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cek li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; overflow-wrap: anywhere; }
.cek .tik {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--hijau-bg); border: 1px solid rgba(42, 209, 154, .32);
  color: var(--hijau); display: grid; place-items: center;
}
.cek b { display: block; }
.cek small { display: block; color: var(--redup); font-size: 13px; line-height: 1.5; }

/* diagram alur sederhana */
.alur {
  display: grid; gap: 8px; align-content: center;
  border: 1px solid var(--garis); border-radius: 14px;
  background: var(--bg2); padding: 14px;
}
.alur .baris-alur {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 11px;
  border: 1px solid var(--garis); background: var(--kartu);
  font-size: 13px; min-width: 0;
}
.alur .baris-alur .tp {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; border: 1px solid var(--garis2); background: var(--bg2);
}
.alur .baris-alur .ket { min-width: 0; }
.alur .baris-alur b { display: block; font-size: 13.5px; }
.alur .baris-alur span { color: var(--redup); font-size: 12px; overflow-wrap: anywhere; }
.alur .tali {
  height: 16px; width: 2px; margin-left: 26px; border-radius: 2px;
  background: linear-gradient(180deg, var(--hijau), var(--biru));
  position: relative; overflow: hidden;
}
.alur .tali::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px; top: -8px;
  background: rgba(255, 255, 255, .75); border-radius: 2px;
  animation: turun 1.9s linear infinite;
}
@keyframes turun { to { transform: translateY(26px); } }
.alur .catatan { font-size: 11.5px; color: var(--redup2); padding: 2px 2px 0; }

/* ============================================================
   6. Harga
   ============================================================ */

.harga-petak { display: grid; gap: var(--jarak-kartu); align-items: stretch; }
@media (min-width: 760px) { .harga-petak { grid-template-columns: 1fr 1fr; } }

.kartu-harga {
  position: relative; overflow: hidden;
  border: 1px solid var(--garis); border-radius: 18px; padding: 22px;
  background: linear-gradient(180deg, rgba(22, 32, 58, .76), rgba(16, 24, 42, .76));
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.kartu-harga:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0, 0, 0, .38); }
.kartu-harga.utama { border-color: rgba(42, 209, 154, .42); }
.kartu-harga.utama::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(42, 209, 154, .2) inset, 0 0 46px rgba(42, 209, 154, .1) inset;
}
.kartu-harga .atasnya { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kartu-harga h3 { margin: 0; font-size: 17px; }
.kartu-harga .angka {
  font-size: clamp(25px, 7vw, 33px); font-weight: 800; letter-spacing: -1px; line-height: 1.15;
  overflow-wrap: anywhere;
}
.kartu-harga .angka .per { font-size: 14px; font-weight: 600; color: var(--redup); letter-spacing: 0; }
.kartu-harga.utama .angka {
  background: linear-gradient(120deg, var(--teks) 8%, var(--hijau) 60%, var(--biru) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kartu-harga .rinci { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13.8px; }
.kartu-harga .rinci li { display: flex; gap: 9px; align-items: flex-start; overflow-wrap: anywhere; }
.kartu-harga .rinci li::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 4px; border-radius: 50%;
  background: var(--hijau-bg); border: 1px solid rgba(42, 209, 154, .35);
  box-shadow: 0 0 0 0 rgba(42, 209, 154, .22);
}
.kartu-harga .tutupnya { margin-top: auto; padding-top: 4px; display: grid; gap: 8px; }
.kartu-harga .kecil { margin: 0; }

/* --- empat kartu paket (PRD §12.7) --- */
/* menumpuk satu kolom di HP, 2 kolom di tablet, 4 kolom di layar lebar */
@media (min-width: 620px) { .harga-petak.empat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .harga-petak.empat { grid-template-columns: repeat(4, 1fr); } }

.kartu-harga.ringkas { padding: 18px 16px; gap: 12px; }
.kartu-harga.ringkas .angka { font-size: clamp(22px, 5.6vw, 27px); letter-spacing: -.7px; }
.kartu-harga.ringkas .angka .per { font-size: 13px; }
.kartu-harga.ringkas .rinci { font-size: 13.2px; gap: 8px; }

/* kartu Maksimal: garis tepi bergradasi + pita "Disarankan" */
.kartu-harga.disarankan {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, rgba(26, 38, 66, .96), rgba(16, 24, 42, .96)) padding-box,
    linear-gradient(130deg, var(--hijau), var(--biru)) border-box;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .34);
}
.kartu-harga.disarankan .angka {
  background: linear-gradient(120deg, var(--teks) 8%, var(--hijau) 55%, var(--biru) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kartu-harga .pita {
  position: absolute; top: 15px; right: -36px; width: 140px; transform: rotate(45deg);
  text-align: center; padding: 5px 0;
  background: linear-gradient(90deg, var(--hijau), var(--biru)); color: #05131f;
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
}
/* sisakan ruang supaya judul tidak tertimpa pita */
.kartu-harga.disarankan .atasnya { padding-right: 58px; }

/* --- promo langganan pertama di kartu Maksimal (3 Nov 2026) ---
   Aksen kuning yang tenang: lencana, harga normal dicoret, harga promo besar,
   satu kalimat syarat. Kontras kuning #f3c15a di atas latar kartu gelap ±10:1. */
.promo-pertama {
  display: grid; gap: 4px; min-width: 0;
  border: 1px solid rgba(243, 193, 90, .4); border-radius: 14px; padding: 12px 12px 11px;
  background: linear-gradient(160deg, var(--kuning-bg), rgba(243, 193, 90, .03));
}
.promo-lencana {
  justify-self: start; max-width: 100%;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(243, 193, 90, .16); border: 1px solid rgba(243, 193, 90, .55);
  color: var(--kuning); font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
  overflow-wrap: anywhere;
}
.promo-normal { color: var(--redup); font-size: 14px; font-weight: 600; margin-top: 4px; }
.promo-normal s { text-decoration-thickness: 2px; text-decoration-color: rgba(147, 161, 191, .85); }
.promo-normal .per { font-size: 12.5px; }
.kartu-harga .promo-angka { margin: 0; }
.promo-syarat { margin: 2px 0 0; font-size: 12.8px; color: var(--teks); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .promo-lencana { animation: promo-nyala 3.2s ease-in-out 1.2s 2; }
}
@keyframes promo-nyala {
  50% { box-shadow: 0 0 0 4px rgba(243, 193, 90, .14); }
}

/* --- catatan kejujuran plafon (wajib ada, PRD §12.7) --- */
.harga-catatan {
  margin-top: var(--jarak-kartu);
  border: 1px solid var(--garis); border-radius: 16px; padding: 18px 16px;
  background: linear-gradient(180deg, rgba(18, 26, 45, .7), rgba(14, 21, 38, .7));
  font-size: 13.8px; color: var(--redup);
}
.harga-catatan p { margin: 0 0 10px; }
.harga-catatan p:last-child { margin-bottom: 0; }
.harga-catatan b { color: var(--teks); }
.harga-catatan .kutip {
  border-left: 3px solid var(--hijau); border-radius: 0 10px 10px 0;
  background: var(--hijau-bg); color: var(--teks);
  padding: 10px 12px; font-style: italic;
}
.harga-catatan .perkiraan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.harga-catatan .perkiraan li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  border: 1px solid var(--garis); border-radius: 11px; padding: 9px 11px;
  background: rgba(10, 15, 29, .45); overflow-wrap: anywhere;
}
.harga-catatan .perkiraan li b { flex: 0 0 auto; min-width: 72px; }
.harga-catatan .perkiraan li span { color: var(--teks); font-weight: 600; }
.harga-catatan .perkiraan li i { color: var(--redup2); font-size: 12.5px; font-style: normal; }

/* kartu sewa VPS: layanan tambahan, berdiri sendiri di bawah paket */
.harga-tambahan { margin-top: var(--jarak-kartu); }

/* ============================================================
   7. Afiliasi
   ============================================================ */

.panel-afiliasi {
  border: 1px solid var(--garis); border-radius: 18px; padding: 22px;
  background:
    radial-gradient(85% 120% at 0% 0%, rgba(91, 157, 255, .1), transparent 60%),
    linear-gradient(180deg, rgba(22, 32, 58, .72), rgba(16, 24, 42, .72));
  display: grid; gap: 18px;
}
@media (min-width: 880px) {
  .panel-afiliasi { grid-template-columns: 1fr .95fr; align-items: stretch; }
  .panel-afiliasi > div:first-child { display: flex; flex-direction: column; justify-content: center; }
}

.tingkat { display: grid; gap: 8px; align-content: center; }
.tingkat .tkt {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 11px;
  border: 1px solid var(--garis); background: var(--bg2);
  font-size: 13.5px; min-width: 0;
}
.tingkat .tkt .lbl { color: var(--redup); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tingkat .tkt .pst {
  flex: none; font-weight: 800; font-size: 15px;
  background: linear-gradient(120deg, var(--hijau), var(--biru));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tingkat .tkt .btg {
  flex: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--hijau), var(--biru));
  opacity: .85;
}
.tingkat .tkt:nth-child(1) .btg { width: 56px; }
.tingkat .tkt:nth-child(2) .btg { width: 45px; }
.tingkat .tkt:nth-child(3) .btg { width: 34px; }
.tingkat .tkt:nth-child(4) .btg { width: 23px; }
.tingkat .tkt:nth-child(5) .btg { width: 12px; }
@media (max-width: 379px) { .tingkat .tkt .btg { display: none; } }

.tautan-contoh {
  display: block; margin-top: 4px;
  font-size: 12.5px; color: var(--redup);
  background: var(--bg2); border: 1px dashed var(--garis2); border-radius: 10px;
  padding: 9px 11px; overflow-wrap: anywhere;
}
.tautan-contoh b { color: var(--hijau); font-weight: 700; }

/* ============================================================
   8. Tanya jawab — akordeon
   ============================================================ */

.tanya { display: grid; gap: 10px; align-items: stretch; }
.tanya details {
  border: 1px solid var(--garis); border-radius: 13px;
  background: linear-gradient(180deg, rgba(22, 32, 58, .62), rgba(16, 24, 42, .62));
  overflow: hidden;
  transition: border-color .2s;
}
.tanya details[open] { border-color: var(--garis2); }
.tanya summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 15px; font-weight: 650; font-size: 14.5px;
  min-height: 44px; overflow-wrap: anywhere;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary:focus-visible { outline: 2px solid #3f69b5; outline-offset: -2px; border-radius: 13px; }
.tanya summary .tanda-buka {
  flex: none; margin-left: auto; width: 20px; height: 20px; position: relative; margin-top: 2px;
}
.tanya summary .tanda-buka::before,
.tanya summary .tanda-buka::after {
  content: ""; position: absolute; top: 50%; left: 50%; border-radius: 2px;
  background: var(--redup); transform: translate(-50%, -50%);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), background .2s;
}
.tanya summary .tanda-buka::before { width: 12px; height: 2px; }
.tanya summary .tanda-buka::after  { width: 2px; height: 12px; }
.tanya details[open] summary .tanda-buka::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.tanya details[open] summary .tanda-buka::before { background: var(--hijau); }
.tanya .jawab {
  padding: 0 15px 15px;
  color: var(--redup); font-size: 14px; line-height: 1.6;
  animation: buka-jawab .24s ease both;
  overflow-wrap: anywhere;
}
.tanya .jawab p { margin: 0 0 8px; }
.tanya .jawab p:last-child { margin: 0; }
@keyframes buka-jawab { from { opacity: 0; transform: translateY(-5px); } }

/* ============================================================
   9. Penutup & kaki
   ============================================================ */

.penutup {
  position: relative; overflow: hidden;
  border: 1px solid var(--garis); border-radius: 20px; padding: 30px 22px;
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(42, 209, 154, .14), transparent 66%),
    linear-gradient(180deg, rgba(22, 32, 58, .8), rgba(16, 24, 42, .8));
}
.penutup::before {
  content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 209, 154, .75), rgba(91, 157, 255, .75), transparent);
}
.penutup h2 { font-size: clamp(20px, 5.6vw, 28px); margin-bottom: 8px; }
.penutup p { color: var(--redup); max-width: 46ch; margin: 0 auto 18px; }
.penutup .tombol-baris { justify-content: center; }

.kaki-promo {
  margin-top: calc(var(--jarak-bagian) * .5);
  border-top: 1px solid var(--garis);
  padding: 22px 16px 30px;
  display: grid; gap: 10px; justify-items: center; text-align: center;
}
.kaki-promo .peringatan {
  max-width: 62ch; font-size: 12.5px; color: var(--redup2); line-height: 1.6;
  overflow-wrap: anywhere;
}
.kaki-promo .tautan-kaki { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 12.5px; }

/* ============================================================
   10. Dialog "Masuk"
   ============================================================ */

dialog.lembar {
  width: min(94vw, 420px);
  max-width: 94vw;
  border: 1px solid var(--garis2);
  border-radius: 18px;
  background: linear-gradient(180deg, #16203a, #101829);
  color: var(--teks);
  padding: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}
dialog.lembar::backdrop { background: rgba(5, 9, 18, .72); backdrop-filter: blur(5px); }
dialog.lembar[open] { animation: lembar-naik .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes lembar-naik { from { opacity: 0; transform: translateY(14px) scale(.985); } }
dialog.lembar .lembar-isi { padding: 20px; }
dialog.lembar .lembar-kepala {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px;
}
dialog.lembar h2 { margin: 0; }
dialog.lembar .lembar-kepala .kecil { margin: 2px 0 0; }
.tutup-lembar {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--garis2); background: var(--bg2); color: var(--redup);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.tutup-lembar:hover { color: var(--teks); border-color: #3d5080; }

/* ============================================================
   11. Kata sandi (dipakai dialog masuk & halaman daftar)
   ============================================================ */

.sandi-bungkus { position: relative; }
.sandi-bungkus input { padding-right: 52px; }
.mata {
  position: absolute; top: 0; right: 0;
  width: 46px; height: 100%;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  color: var(--redup); cursor: pointer; font: inherit; font-size: 15px;
  border-radius: 0 11px 11px 0;
}
.mata:hover { color: var(--teks); }
.mata:focus-visible { outline: 2px solid #3f69b5; outline-offset: -2px; }

/* indikator kekuatan */
.kuat { margin-top: 8px; }
.kuat .ruas { display: flex; gap: 5px; }
.kuat .ruas i {
  flex: 1 1 0; height: 5px; border-radius: 999px;
  background: var(--garis); transition: background .25s;
}
.kuat.t1 .ruas i:nth-child(-n+1) { background: var(--merah); }
.kuat.t2 .ruas i:nth-child(-n+2) { background: var(--kuning); }
.kuat.t3 .ruas i:nth-child(-n+3) { background: var(--biru); }
.kuat.t4 .ruas i { background: var(--hijau); }
.kuat .ket { display: block; margin-top: 5px; font-size: 12px; color: var(--redup); }

/* ============================================================
   12. Halaman daftar
   ============================================================ */

/* Halaman daftar — mobile dulu: satu kolom, formulir di atas, keterangan di bawah.
   Di layar lebar barulah jadi dua kolom, supaya ruang kosong di kiri terisi
   keterangan yang berguna, bukan sekadar diregangkan. */
.halaman-daftar {
  max-width: 540px; margin: 0 auto; padding: 24px 16px 40px;
  display: grid; gap: 22px; align-items: start;
}
.halaman-daftar > .daftar-utama { min-width: 0; order: 1; }
.daftar-sisi { min-width: 0; order: 2; }
.daftar-sisi h2 {
  font-size: clamp(17px, 4.6vw, 21px); margin: 0 0 14px; letter-spacing: -.3px;
}
.daftar-sisi .cek li { font-size: 14px; }

@media (min-width: 900px) {
  .halaman-daftar {
    max-width: 1020px;
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 44px;
    padding-top: 40px;
  }
  .daftar-sisi { order: 0; padding-top: 10px; }
}
.diajak {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; border-radius: 12px; margin-bottom: 14px;
  border: 1px solid rgba(42, 209, 154, .3); background: var(--hijau-bg);
  color: var(--teks); font-size: 13.5px; overflow-wrap: anywhere;
}
.diajak b { color: var(--hijau); overflow-wrap: anywhere; }

.setuju {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; margin-bottom: 16px;
  color: var(--teks); font-weight: 400; cursor: pointer;
}
.setuju input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0;
  accent-color: #2ad19a; cursor: pointer; padding: 0;
}
.setuju span { min-width: 0; overflow-wrap: anywhere; }

.garis-atau {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--redup2); font-size: 12px;
}
.garis-atau::before, .garis-atau::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--garis);
}

/* ============================================================
   12b. Halaman referal afiliasi (§12.5)
   Semua bagian ini hanya tampil kalau Worker menyisipkan window.PROMOTOR.
   ============================================================ */

/* --- kartu identitas pengajak: foto besar berbingkai, di atas hero --- */
.promotor { display: none; }
body.ada-promotor .promotor { display: block; }

.promotor .wadah { padding-top: 26px; padding-bottom: 4px; }

.promotor-kartu {
  display: grid; justify-items: center; text-align: center; gap: 2px;
}

/* bingkai foto */
.bingkai {
  position: relative;
  width: clamp(128px, 38vw, 200px);
  height: clamp(128px, 38vw, 200px);
  margin: 0 auto 20px;
  flex: none;
}

/* cahaya lembut di belakang bingkai */
.bingkai .cahaya {
  position: absolute; inset: -22%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(50% 50% at 38% 32%, rgba(42, 209, 154, .34), transparent 70%),
    radial-gradient(50% 50% at 68% 70%, rgba(91, 157, 255, .32), transparent 70%);
  filter: blur(16px);
  animation: nafas-cahaya 5.5s ease-in-out infinite;
}
@keyframes nafas-cahaya {
  0%, 100% { opacity: .65; transform: scale(.96); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* cincin bergradasi yang berputar pelan */
.bingkai .cincin-putar {
  position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    #2ad19a 0deg, #5b9dff 110deg, rgba(91, 157, 255, .12) 200deg,
    rgba(42, 209, 154, .12) 270deg, #2ad19a 360deg);
  animation: putar-cincin 9s linear infinite;
}
@keyframes putar-cincin { to { transform: rotate(360deg); } }

/* cincin tipis kedua, arah berlawanan */
.bingkai .cincin-tipis {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 1px dashed rgba(91, 157, 255, .35);
  animation: putar-cincin 22s linear infinite reverse;
}

/* potret / inisial */
.bingkai .potret {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, #1b2744, #0e1526);
  box-shadow: 0 0 0 3px var(--bg), 0 16px 40px rgba(0, 0, 0, .5);
  display: grid; place-items: center;
}
.bingkai .potret img { width: 100%; height: 100%; object-fit: cover; display: none; }
.bingkai .potret img.ada { display: block; }
.bingkai .potret .inisial {
  font-size: clamp(38px, 12vw, 62px); font-weight: 800; letter-spacing: -1px; line-height: 1;
  background: linear-gradient(135deg, var(--hijau), var(--biru));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}

/* label TELEBOT menempel di tepi bawah bingkai */
.bingkai .label-merek {
  position: absolute; z-index: 2;
  left: 50%; bottom: -11px; transform: translateX(-50%);
  padding: 4px 13px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 3.2px;
  color: var(--teks); white-space: nowrap;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #121a2d, #0a0f1d) padding-box,
    linear-gradient(90deg, var(--hijau), var(--biru)) border-box;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

.promotor-mata {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--redup2); margin: 0;
}
.promotor-nama {
  font-size: clamp(19px, 5.4vw, 26px); font-weight: 800; letter-spacing: -.5px;
  margin: 2px 0 3px; overflow-wrap: anywhere; max-width: 22ch;
}
.promotor-sub {
  margin: 0; font-size: 12.5px; color: var(--redup);
  display: inline-flex; align-items: center; gap: 7px;
}
.promotor-sub::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--hijau); box-shadow: 0 0 0 3px rgba(42, 209, 154, .18);
}

/* ============================================================
   TIANG TOMBOL MELAYANG — kanan bawah
   Satu kolom berisi, dari atas ke bawah: "naik ke atas" lalu WhatsApp.
   Keduanya berlaku di SEMUA lebar layar — tidak ada media query yang
   menyembunyikannya. Yang menyembunyikan sementara hanya kelas .minggir,
   dipasang skrip saat tiang benar-benar menutupi tombol penting.
   ============================================================ */
.tiang-melayang {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* ruang kosong di antara tombol tidak boleh menghalangi klik di halaman */
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.tiang-melayang.minggir { opacity: 0; visibility: hidden; }

.fab {
  pointer-events: auto;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, opacity .25s ease, visibility .25s ease, background .2s ease;
}
.fab svg { display: block; }
.fab:focus-visible { outline: 2px solid var(--hijau); outline-offset: 3px; }

/* --- tombol naik ke atas --- */
.fab-naik {
  width: 46px; height: 46px;
  padding: 0; margin: 0; font: inherit; cursor: pointer;
  background: rgba(18, 26, 46, .88);
  color: var(--teks);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(.88);
}
.fab-naik.tampak { opacity: 1; visibility: visible; transform: none; }
.fab-naik.tampak:hover { background: rgba(28, 40, 68, .96); transform: scale(1.07); }

/* --- tombol WhatsApp melayang --- */
.fab-wa {
  display: none;
  width: 54px; height: 54px;
  background: linear-gradient(145deg, #30c75e, #1da851);
  color: #04120d;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 0 rgba(48, 199, 94, .45);
  animation: denyut-wa 3s ease-in-out infinite;
}
body.ada-wa .fab-wa { display: flex; }
.fab-wa:hover { transform: scale(1.06); }
@keyframes denyut-wa {
  0%, 100% { box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 0 rgba(48, 199, 94, .5); }
  55%      { box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 12px rgba(48, 199, 94, 0); }
}

/* layar sempit: kolom sedikit dirapatkan, tetap nyaman disentuh (≥44px) */
@media (max-width: 380px) {
  .tiang-melayang { right: 12px; gap: 10px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fab-naik { width: 44px; height: 44px; }
  .fab-wa { width: 50px; height: 50px; }
}

/* jarak aman supaya tiang tidak menutupi teks kaki halaman */
body.ada-tiang .kaki-promo { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
body.ada-tiang.ada-wa .kaki-promo { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }

/* --- baris penutup tanya jawab --- */
.tanya-tutup {
  display: none;
  margin-top: var(--jarak-kartu);
  padding: 16px;
  border: 1px solid var(--garis2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 32, 58, .7), rgba(16, 24, 42, .7));
  align-items: center; gap: 12px; flex-wrap: wrap;
}
body.ada-wa .tanya-tutup { display: flex; }
.tanya-tutup .kata { flex: 1 1 220px; min-width: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.tanya-tutup .kata b { color: var(--teks); }
.tanya-tutup .tbl-wa {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 11px;
  background: linear-gradient(180deg, #30c75e, #1da851);
  border: 1px solid transparent; color: #04120d;
  font: inherit; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 6px 20px rgba(48, 199, 94, .24);
  max-width: 100%;
}
.tanya-tutup .tbl-wa:hover { filter: brightness(1.07); }
@media (max-width: 420px) { .tanya-tutup .tbl-wa { width: 100%; } }

/* ============================================================
   13. Muncul saat digulir
   ============================================================ */

.muncul { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1); }
.muncul.tampak { opacity: 1; transform: none; }
.muncul.d1 { transition-delay: .06s; }
.muncul.d2 { transition-delay: .12s; }
.muncul.d3 { transition-delay: .18s; }

/* ============================================================
   14. Hormati "kurangi gerakan"
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .muncul { opacity: 1 !important; transform: none !important; }
  .panggung::after { display: none; }
  /* cincin foto promotor berhenti berputar, tetap terlihat utuh */
  .bingkai .cincin-putar,
  .bingkai .cincin-tipis { animation: none !important; transform: none !important; }
}