/* ══════════════════════════════════════════════════════════════════════════
KODELAHIR — halaman jualan "Arti Tanggal Lahir".
Gaya jual langsung, mengikuti pola halaman DPS milik Deswin: janji tegas di
atas, masalah, isi, bukti, penangkis keberatan, tumpukan penawaran, tanya
jawab, penutup menekan.
Warna sengaja BEDA dari beranda: pita gelap hanya di kepala dan penutup
(supaya tandanya tetap dikenali), badan halaman TERANG supaya isi jualan
terbaca cepat dan jelas di layar ponsel.
ATURAN YANG DIKUNCI (ada pemeriksaannya di uji_app.py):
- HARGA TIDAK PERNAH DISEBUT. Harga hidup di Scalev saja.
- Metode tidak diumumkan.
- Tanpa hitung mundur palsu, tanpa testimoni karangan.
══════════════════════════════════════════════════════════════════════════ */
:root{
--malam:#08090C; --terang:#EDE8DF; --emas:#C9A24B;
--kertas:#FBF8F2; --tinta:#17150F; --abu2:#5E5850; --garis:#E4DCCB;
--aksi:#B3421F; /* warna tindakan: bata hangat, bukan emas */
--aksi-tua:#8E3418;
--hijau:#2E6B4F;
--serif:"Cormorant Garamond",Georgia,serif;
--sans:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--kertas);color:var(--tinta);
font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
overflow-x:hidden}
.b{max-width:720px;margin:0 auto;padding:0 22px}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:3px solid var(--aksi);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ── pita gelap: kepala & penutup ── */
.pita{background:var(--malam);color:var(--terang);position:relative;overflow:hidden}
.pita #bintang{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.pita .b{position:relative;z-index:1}
.atas{padding:18px 0}
.atas .b{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gembok{display:flex;align-items:center;gap:9px;text-decoration:none}
.gembok .tanda-svg{width:22px;height:22px;flex:none;color:var(--emas)}
.kata{font-family:var(--serif);font-size:17px;letter-spacing:.18em;color:var(--terang)}
.kata i{font-style:normal;font-weight:300}.kata b{font-weight:500}
/* "Sudah pesan?" itu tindakan bagi pembeli lama — diberi bentuk tombol
bergaris supaya kelihatan bisa diklik, tapi tidak menyaingi tombol beli. */
.atas .masuk-tautan{position:relative;font:500 11.5px/1 var(--sans);
color:rgba(237,232,223,.85);
text-decoration:none;border:1px solid rgba(237,232,223,.28);
border-radius:99px;padding:11px 17px;white-space:nowrap;
transition:border-color .2s ease, background .2s ease}
/* bidang sentuh dilebarkan tanpa menambah tinggi tajuk */
.atas .masuk-tautan::after{content:"";position:absolute;inset:-6px -4px}
.atas .masuk-tautan:hover{border-color:var(--emas);color:var(--emas);
background:rgba(201,162,75,.08)}
/* ── kait ── */
.kait{padding:34px 0 52px;text-align:center}
.kait .label{display:inline-block;font:500 10.5px/1 var(--sans);letter-spacing:.2em;
text-transform:uppercase;color:var(--emas);border:1px solid rgba(201,162,75,.4);
border-radius:99px;padding:7px 14px;margin-bottom:22px}
/* Judul kait: angka dulu, baru janji. Dibuat rapat dan tebal supaya berhenti
dibaca dalam sekali lirik di layar ponsel. */
.kait h1{font-family:var(--sans);font-weight:700;
font-size:clamp(29px,7.2vw,46px);line-height:1.12;letter-spacing:-.03em;
text-wrap:balance;max-width:22ch;margin:0 auto}
.kait h1 em{font-style:normal;color:var(--emas)}
.kait .sub{margin-top:20px;color:rgba(237,232,223,.78);font-size:17px;
max-width:40ch;margin-left:auto;margin-right:auto;line-height:1.58}
.kait .sub b{color:#fff;font-weight:600}
/* Hook "sekali bayar, seumur hidup" — 3 Sep 2026, Deswin minta klaim ini
nonjol di paling atas, bukan cuma jadi baris kecil di bawah tombol. */
.kait .janji-hidup{margin-top:12px;font:600 16.5px/1.45 var(--sans);color:var(--emas)}
.kait .janji-hidup b{color:#fff;font-weight:700}
/* Angka coret di layar pertama — 4 Sep 2026. Label "Total nilai" sengaja
dibuat kecil tapi TIDAK boleh dihapus: itu yang membedakan "nilainya
segini" dari klaim "harga lamanya segini". */
.kait .kait-nilai{margin-top:24px;display:flex;flex-wrap:wrap;
align-items:baseline;justify-content:center;gap:5px 10px}
.kait .kn-label{font:600 10.5px/1 var(--sans);letter-spacing:.18em;
text-transform:uppercase;color:var(--abu);width:100%;margin-bottom:2px}
.kait .kn-coret{font-size:19px;color:rgba(237,232,223,.45);
text-decoration:line-through;font-variant-numeric:tabular-nums}
.kait .kn-harga{font:700 clamp(30px,7.4vw,42px)/1 var(--sans);color:#fff;
letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kait .segel{width:78px;height:78px;margin:0 auto 22px;display:block}
.kait .segel [data-garis]{stroke:var(--emas);fill:none;
stroke-dasharray:1;stroke-dashoffset:1;animation:gambar 1.6s ease forwards}
@keyframes gambar{to{stroke-dashoffset:0}}
.kait .segel circle[data-titik],.kait .segel circle[data-inti]{
fill:var(--emas);stroke:none;opacity:0;animation:muncul .5s ease forwards}
@keyframes muncul{to{opacity:1}}
/* ── tombol ── */
.ajak{display:inline-block;padding:18px 34px;border-radius:4px;
font:600 15px/1 var(--sans);letter-spacing:.01em;
color:#fff;background:var(--aksi);text-decoration:none;text-align:center;
box-shadow:0 6px 0 var(--aksi-tua);
transition:transform .12s ease, box-shadow .12s ease}
.ajak:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--aksi-tua)}
.ajak:active{transform:translateY(6px);box-shadow:none}
.ajak-besar{display:block;width:100%;max-width:420px;margin:0 auto;padding:20px 24px;
font-size:16.5px}
/* Tanda pisah + harga satu satuan: kalau tulisan tombol harus turun baris,
"—" tidak ditinggal menggantung sendirian di ujung baris atas. */
.ajak .nb{white-space:nowrap}
.di-bawah{margin-top:13px;font-size:13.5px;color:var(--abu2)}
.pita .di-bawah{color:rgba(237,232,223,.55)}
/* ── bagian terang ── */
.bag{padding:56px 0;border-bottom:1px solid var(--garis)}
.bag h2{font-family:var(--sans);font-weight:600;
font-size:clamp(23px,4.6vw,33px);line-height:1.22;letter-spacing:-.02em;
text-wrap:balance;margin-bottom:14px}
.bag h2 em{font-style:normal;color:var(--aksi)}
.bag .pengantar{color:var(--abu2);margin-bottom:26px;font-size:16.5px}
/* ── masalah ── */
.sakit{display:grid;gap:12px}
.sakit li{list-style:none;background:#fff;border:1px solid var(--garis);
border-left:4px solid var(--aksi);border-radius:4px;padding:17px 19px;
font-size:16.5px;line-height:1.5}
.sakit b{font-weight:600}
.jawab-sakit{margin-top:22px;font-size:17px;font-weight:500}
/* ── daftar bab ── */
.bab{counter-reset:bab;display:grid;gap:0}
.bab li{list-style:none;counter-increment:bab;display:flex;gap:14px;
align-items:center;padding:14px 0;border-bottom:1px solid var(--garis)}
.bab li:first-child{border-top:1px solid var(--garis)}
.bab li::before{content:counter(bab,decimal-leading-zero);
font:600 12px/1 var(--sans);color:var(--aksi);flex:none;width:24px;
font-variant-numeric:tabular-nums}
.bab .jd{font-size:16.5px;font-weight:500}
/* ── contoh sungguhan ── */
.contoh{background:#fff;border:1px solid var(--garis);border-radius:6px;
padding:24px 22px;box-shadow:0 3px 14px rgba(23,21,15,.05)}
.contoh .cap-contoh{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.16em;
text-transform:uppercase;color:var(--aksi);margin-bottom:18px}
.contoh dl{margin:0}
.contoh dt{font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
color:var(--abu2);margin-top:18px}
.contoh dt:first-of-type{margin-top:0}
.contoh dd{font-size:17px;line-height:1.5;margin:6px 0 0}
.contoh .kerja{margin-top:24px;padding-top:20px;border-top:1px solid var(--garis)}
.contoh .kerja h4{font-size:16.5px;font-weight:600;margin-bottom:4px}
.contoh .kerja p{font-size:15px;color:var(--abu2);line-height:1.5;margin-bottom:9px}
.keping{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.keping span{font:500 13px/1 var(--sans);background:#F4EFE4;
border-radius:3px;padding:7px 10px;color:var(--tinta)}
.kaki-contoh{margin-top:18px;font-size:14.5px;color:var(--abu2);line-height:1.6}
/* ── banding ── */
.banding{width:100%;border-collapse:collapse;margin-top:8px;font-size:15.5px}
.banding th,.banding td{padding:13px 12px;border-bottom:1px solid var(--garis);
text-align:left;vertical-align:top}
.banding thead th{font:600 11.5px/1.3 var(--sans);letter-spacing:.08em;
text-transform:uppercase;color:var(--abu2);
border-bottom:2px solid var(--tinta)}
.banding thead th.kita{color:var(--aksi)}
.banding td.kita{font-weight:500;background:#FFFDF8}
.banding td.lain{color:var(--abu2)}
@media(max-width:560px){
.banding thead{display:none}
.banding tr{display:block;border-bottom:1px solid var(--garis);padding:12px 0}
.banding td{display:block;border:0;padding:4px 0}
.banding td.lain::before{content:"Ramalan gratis: ";font-weight:600;color:var(--tinta)}
.banding td.kita::before{content:"Di sini: ";font-weight:600;color:var(--aksi)}
.banding td.kita{background:transparent}
}
/* ── yang kamu terima ── */
.dapat{display:grid;gap:0;background:#fff;border:1px solid var(--garis);
border-radius:6px;overflow:hidden}
.dapat li{list-style:none;display:flex;gap:13px;align-items:flex-start;
padding:16px 19px;border-bottom:1px solid var(--garis)}
.dapat li:last-child{border-bottom:0}
.dapat li::before{content:"";flex:none;width:19px;height:19px;margin-top:2px;
border-radius:50%;background:var(--hijau);
-webkit-mask:url("data:image/svg+xml;utf8,") center/86% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/86% no-repeat}
.dapat b{display:block;font-weight:600;font-size:16.5px}
.dapat .kcl{display:block;font-size:14.5px;color:var(--abu2);margin-top:2px;line-height:1.5}
/* ── testimoni (hanya tampil kalau ada kutipan asli) ── */
.testi{display:grid;gap:14px}
.testi figure{margin:0;background:#fff;border:1px solid var(--garis);
border-radius:6px;padding:20px 20px 16px;
box-shadow:0 2px 10px rgba(23,21,15,.04)}
.testi blockquote{margin:0;font-size:16.5px;line-height:1.6}
.testi blockquote::before{content:"\201C";color:var(--aksi);font-size:26px;
line-height:0;vertical-align:-6px;margin-right:2px}
.testi blockquote::after{content:"\201D";color:var(--aksi);font-size:26px;
line-height:0;vertical-align:-6px;margin-left:1px}
.testi figcaption{margin-top:12px;padding-top:11px;border-top:1px solid var(--garis);
font-size:14px;font-weight:600;color:var(--abu2)}
/* ── kotak harga ── */
.kotak-harga{margin-top:28px;background:var(--malam);color:var(--terang);
border-radius:8px;padding:30px 24px 26px;text-align:center;
box-shadow:0 8px 26px rgba(23,21,15,.16)}
.kh-atas{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
color:var(--emas);margin-bottom:14px}
.kh-angka{font:600 clamp(38px,10vw,54px)/1 var(--sans);letter-spacing:-.03em;
color:#fff;margin-bottom:12px;font-variant-numeric:tabular-nums}
.kh-bawah{font-size:15.5px;color:rgba(237,232,223,.75);line-height:1.55;
margin-bottom:20px}
.kh-bawah b{color:var(--terang);font-weight:600}
/* ── rincian nilai + angka dicoret ──
Yang dicoret adalah TOTAL NILAI dari baris-baris di atasnya, bukan harga
lama. Karena itu barisan rinciannya WAJIB tetap kelihatan di atas angka
coret — angka coret yang berdiri sendiri berubah arti jadi "harga normal",
dan itu klaim yang tidak benar. Lihat catatan NILAI di main.py. */
.tumpuk{list-style:none;margin:0 0 2px;padding:0;text-align:left}
.tumpuk li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:11px 0;border-bottom:1px solid rgba(237,232,223,.12);
font-size:15px;color:rgba(237,232,223,.9);line-height:1.45}
.tumpuk-nilai{flex:none;color:rgba(237,232,223,.6);
font-variant-numeric:tabular-nums;font-size:14.5px}
.tumpuk-total{display:flex;justify-content:space-between;align-items:baseline;
gap:16px;padding:14px 0 0;font-size:15px;
color:rgba(237,232,223,.75)}
.tumpuk-total s{color:rgba(237,232,223,.5);font-size:16.5px;
font-variant-numeric:tabular-nums}
.kotak-harga .kh-angka{margin-top:18px}
.kh-hemat{margin:-2px 0 20px;font:600 14.5px/1.5 var(--sans);color:var(--emas)}
.kh-poin{display:inline-block;text-align:left;margin:0 0 24px}
.kh-poin li{list-style:none;position:relative;padding-left:26px;margin-bottom:9px;
font-size:15.5px;color:rgba(237,232,223,.9)}
.kh-poin li::before{content:"";position:absolute;left:0;top:4px;
width:16px;height:16px;background:var(--emas);
-webkit-mask:url("data:image/svg+xml;utf8,") center/100% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/100% no-repeat}
.kotak-harga .di-bawah{color:rgba(237,232,223,.55)}
/* ── enam kode ──
Daftar bernomor dengan penanda "tetap"/"tiap tahun" di kanan. Penandanya
bukan hiasan: pembeda utama produk ini adalah lima kode yang TIDAK berubah,
dan satu yang berganti tiap tahun. */
.enam{list-style:none;margin:0;padding:0;counter-reset:none}
.enam li{display:flex;align-items:flex-start;gap:14px;
padding:16px 0;border-bottom:1px solid var(--garis)}
.enam li:last-child{border-bottom:0}
.ek-no{flex:none;width:26px;font-family:var(--serif);font-weight:300;
font-size:22px;line-height:1.2;color:var(--emas)}
.ek-isi{flex:1;min-width:0}
.ek-jd{display:block;font:600 12px/1.3 var(--sans);letter-spacing:.13em;
text-transform:uppercase;color:var(--tinta)}
.ek-ket{display:block;margin-top:5px;font-size:15.5px;line-height:1.55;
color:var(--abu2)}
.ek-cap{flex:none;align-self:center;font:600 10px/1 var(--sans);
letter-spacing:.1em;text-transform:uppercase;color:var(--abu2);
border:1px solid var(--garis);border-radius:99px;padding:6px 10px;
white-space:nowrap}
.ek-ganti{color:#8A5A2B;border-color:#E4CFA8;background:#FBF4E6}
/* Di ponsel penanda "tetap"/"tiap tahun" TURUN ke bawah keterangannya.
Waktu ia tetap di kanan, kolom teksnya tinggal separuh lebar dan tiap
keterangan pecah jadi tiga baris — terbaca sempit dan berdesakan. */
@media (max-width:520px){
.enam li{flex-wrap:wrap}
.ek-isi{flex:1 1 calc(100% - 40px)}
.ek-cap{align-self:flex-start;margin:10px 0 0 40px}
}
/* ── kenapa sekarang ── */
.alasan{background:#fff;border:1px solid var(--garis);border-left:4px solid var(--emas);
border-radius:4px;padding:20px 22px}
.alasan p{font-size:16.5px;line-height:1.6;margin-bottom:12px}
.alasan p:last-child{margin-bottom:0;color:var(--abu2);font-size:15.5px}
.alasan b{font-weight:600}
/* ── tanya jawab ── */
.tj details{background:#fff;border:1px solid var(--garis);border-radius:5px;
margin-bottom:10px}
.tj summary{list-style:none;cursor:pointer;padding:16px 18px;
font-weight:600;font-size:16.5px;
display:flex;justify-content:space-between;align-items:center;gap:14px}
.tj summary::-webkit-details-marker{display:none}
.tj summary::after{content:"+";color:var(--aksi);font-size:22px;font-weight:400;
flex:none;line-height:1;transition:transform .2s ease}
.tj details[open] summary::after{transform:rotate(45deg)}
.tj .jwb{padding:0 18px 18px;color:var(--abu2);font-size:16px;line-height:1.7}
/* ── muncul bertahap (dipasang oleh gerak.js; tanpa JS isi tetap terbaca) ── */
.masuk{opacity:0;transform:translateY(12px);
transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.masuk.tampil{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.masuk{opacity:1!important;transform:none!important}}
/* ── penutup ── */
.tutup-jual{padding:58px 0 66px;text-align:center}
.segel-kecil{width:52px;height:52px;margin:0 auto 20px;display:block;color:var(--emas)}
.tutup-jual h2{font-family:var(--sans);font-weight:600;
font-size:clamp(24px,5.2vw,36px);line-height:1.2;letter-spacing:-.02em;
max-width:18ch;margin:0 auto 16px;text-wrap:balance}
.tutup-jual p{color:rgba(237,232,223,.7);max-width:40ch;margin:0 auto 26px}
/* ── ajakan melayang ── */
.melayang{position:fixed;left:0;right:0;bottom:0;z-index:40;
background:rgba(251,248,242,.97);border-top:1px solid var(--garis);
box-shadow:0 -4px 18px rgba(23,21,15,.10);
padding:11px 16px calc(11px + env(safe-area-inset-bottom));
transform:translateY(115%);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.melayang.naik{transform:none}
.melayang .ajak{display:block;width:100%;max-width:460px;margin:0 auto;padding:15px 20px;
font-size:15.5px;box-shadow:0 4px 0 var(--aksi-tua)}
/* ── kaki ── */
.kaki{padding:26px 0 96px;font-size:13.5px;color:var(--abu2);line-height:1.8;
text-align:center}
.kaki a{color:var(--abu2)}
.kaki .moto-kaki{font-family:var(--serif);font-style:italic;font-size:16px;
color:var(--tinta);margin-bottom:10px}