/* Halaman iklan (somah.id/gaji, somah.id/berdua): satu masalah, satu tujuan. Melengkapi landing.css. */
.lp-polos .lp-nav-polos { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.lp-polos .lp-nav-polos .lp-logo { cursor: default; }
.lp-polos .lp-nav-polos .tbl { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* ---------- Pembuka ---------- */
.lpi-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding-top: 28px; padding-bottom: 64px; }
.lpi-hero-teks { display: flex; flex-direction: column; gap: 18px; }
.lpi-hero h1 { margin: 0; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.06; letter-spacing: -1.4px; font-weight: 800; }
.lpi-hero h1 em { font-style: normal; color: var(--hijau); background: linear-gradient(transparent 62%, var(--kunyit-muda) 62%); }
.lpi-sub { margin: 0; font-size: 19px; line-height: 1.55; color: var(--redup); max-width: 560px; }
.lpi-sub b { color: var(--tinta); }
.lpi-hero .lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.lpi-hero .lp-cta .tbl { min-height: 58px; padding: 0 34px; font-size: 18px; box-shadow: 0 14px 30px -14px rgba(232,163,61,.9); }
.lpi-tautan { font-weight: 700; color: var(--hijau); text-decoration: none; border-bottom: 1.5px dashed currentColor; }
.lpi-bukti { margin: 0; font-size: 15px; color: var(--redup); }
.lpi-hero-gambar { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
.lpi-hero-gambar::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 40px; background: radial-gradient(120% 90% at 30% 10%, var(--hijau-muda), var(--kunyit-muda)); z-index: -1; }
.lpi-cap { position: absolute; bottom: 8px; right: 12px; font-size: 12px; color: var(--redup); }

/* Ponsel tiruan */
.lpi-hp { width: 300px; background: var(--tinta-tetap); border-radius: 42px; padding: 11px; box-shadow: 0 34px 60px -24px rgba(22,33,43,.55); transform: rotate(-2deg); }
.lpi-layar { background: #F3F5F4; border-radius: 32px; overflow: hidden; color: #16212B; }
.lpi-hp-kepala { background: var(--hijau); color: #fff; padding: 26px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.lpi-hp-kepala small { font-size: 12px; color: var(--hijau-pucat); }
.lpi-hp-kepala small strong { color: #fff; }
.lpi-hp-kepala b { font-size: 30px; letter-spacing: -.6px; }
.lpi-hp-isi { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.lpi-bar { height: 7px; border-radius: 9px; background: #E7ECEA; overflow: hidden; }
.lpi-bar i { display: block; height: 100%; background: var(--hijau); border-radius: 9px; }
.lpi-hp-kepala .lpi-bar { background: rgba(255,255,255,.2); margin: 6px 0 2px; }
.lpi-hp-kepala .lpi-bar i { background: var(--kunyit); }
.lpi-amplop { background: #fff; border-radius: 15px; padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.lpi-amplop span { font-size: 11px; font-weight: 700; color: #5B6670; }
.lpi-amplop b { font-size: 14.5px; }
.lpi-amplop.pribadi { background: #FDF3E2; }
.lpi-chat { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 6px; }
.lpi-chat .saya { align-self: flex-end; background: var(--hijau); color: #fff; padding: 8px 12px; border-radius: 16px 16px 4px 16px; font-size: 14px; font-weight: 600; }
.lpi-chat .balas { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: #fff; padding: 8px 11px; border-radius: 16px 16px 16px 4px; font-size: 12.5px; }
.lpi-chat .balas svg { color: var(--hijau); }
.lpi-notif { background: #16212B; color: #fff; border-radius: 15px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.lpi-notif b { font-size: 11px; color: var(--kunyit); text-transform: uppercase; letter-spacing: .6px; }
.lpi-dua-hp { gap: 0; }
.lpi-dua-hp .lpi-hp.kecil { width: 238px; position: relative; }
.lpi-dua-hp .lpi-hp.kecil:first-child { transform: rotate(-5deg) translate(26px, -18px); z-index: 1; }
.lpi-dua-hp .lpi-hp.kanan { transform: rotate(4deg) translate(-26px, 34px); z-index: 2; }
.lpi-dua-hp .lpi-hp-isi { padding-top: 26px; min-height: 300px; }
.lpi-hp-nama { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--hijau); white-space: nowrap; }

/* ---------- Kalkulator jatah harian ---------- */
.lpi-kalk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; max-width: 980px; margin: 0 auto; }
.lpi-kalk-isian { display: flex; flex-direction: column; gap: 16px; background: var(--latar); border-radius: 24px; padding: 26px; }
.lpi-kalk-isian label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
.lpi-kalk-isian input, .lpi-kalk-isian select { min-height: 52px; border-radius: 14px; border: 1.5px solid var(--garis); background: #fff; padding: 0 14px; font: 600 18px inherit; font-family: inherit; color: var(--tinta); }
.lpi-kalk-isian input:focus, .lpi-kalk-isian select:focus { outline: none; border-color: var(--hijau); box-shadow: 0 0 0 3px var(--hijau-muda); }
.lpi-kalk-isian small { font-weight: 500; color: var(--redup); font-size: 13px; }
.lpi-kalk-hasil, .lpi-kuis-hasil { background: var(--hijau); color: #fff; border-radius: 24px; padding: 30px 28px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.lpi-hasil-label { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--hijau-pucat); }
.lpi-kalk-hasil strong, .lpi-kuis-hasil strong { font-size: clamp(40px, 6vw, 58px); line-height: 1.05; letter-spacing: -1.5px; color: #fff; }
.lpi-kalk-hasil [data-j="ket"] { font-size: 17px; color: var(--hijau-pucat); }
.lpi-status { margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.1); font-size: 15px; line-height: 1.5; }
.lpi-status.merah { background: rgba(154,59,46,.55); }
.lpi-status.kuning { background: rgba(232,163,61,.28); }
.lpi-hasil-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.lpi-hasil-cta .tbl { width: 100%; text-align: center; }
.lpi-hasil-cta small { color: var(--hijau-pucat); font-size: 13px; text-align: center; }

/* ---------- Kebocoran kecil ---------- */
.lpi-bocor { max-width: 760px; margin: 0 auto 40px; background: #fff; border-radius: 24px; padding: 28px; box-shadow: 0 20px 40px -30px rgba(22,33,43,.4); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.lpi-bocor label { font-weight: 700; color: var(--redup); }
.lpi-bocor output { font-size: 34px; font-weight: 800; color: var(--tinta); letter-spacing: -.8px; }
.lpi-bocor input[type=range] { width: 100%; accent-color: var(--kunyit); height: 28px; }
.lpi-bocor-hasil { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.lpi-bocor-hasil div { background: var(--bata-muda); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.lpi-bocor-hasil span { font-size: 13px; font-weight: 700; color: var(--bata); text-transform: uppercase; letter-spacing: .6px; }
.lpi-bocor-hasil b { font-size: clamp(22px, 3.4vw, 30px); color: var(--bata); letter-spacing: -.5px; }
.lpi-bocor p { margin: 6px 0 0; color: var(--redup); }

/* ---------- Kartu tiga masalah, langkah, banding, fitur ---------- */
.lpi-tiga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lpi-tiga article { background: #fff; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.lpi-tiga h3 { margin: 0; font-size: 20px; }
.lpi-tiga p { margin: 0; color: var(--redup); line-height: 1.55; }
.lpi-tiga .jawab { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--garis); color: var(--tinta); display: flex; gap: 8px; font-weight: 600; }
.lpi-tiga .jawab svg { color: var(--hijau); flex: none; margin-top: 3px; }
.lpi-emoji { font-size: 32px; }
.lpi-langkah { list-style: none; counter-reset: langkah; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; }
.lpi-langkah li { counter-increment: langkah; background: var(--latar); border-radius: 22px; padding: 26px 22px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.lpi-langkah li::before { content: counter(langkah); width: 42px; height: 42px; border-radius: 50%; background: var(--kunyit); color: var(--tinta-tetap); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; margin-bottom: 4px; }
.lpi-langkah b { font-size: 19px; }
.lpi-langkah span { color: var(--redup); line-height: 1.55; }
.lpi-tengah { text-align: center; margin-top: 30px; }
.lpi-banding { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 940px; margin: 0 auto; }
.lpi-banding > div { border-radius: 22px; padding: 26px; }
.lpi-banding h3 { margin: 0 0 12px; font-size: 20px; }
.lpi-banding ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lpi-banding li { padding-left: 30px; position: relative; line-height: 1.5; }
.lpi-sebelum { background: #fff; color: var(--redup); }
.lpi-sebelum li::before { content: "✕"; position: absolute; left: 4px; color: var(--bata); font-weight: 800; }
.lpi-sesudah { background: var(--hijau); color: #fff; }
.lpi-sesudah li::before { content: "✓"; position: absolute; left: 4px; color: var(--kunyit); font-weight: 800; }
.lpi-fitur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lpi-fitur article { background: var(--latar); border-radius: 20px; padding: 22px; }
.lpi-fitur h3 { margin: 0 0 6px; font-size: 18px; }
.lpi-fitur p { margin: 0; color: var(--redup); line-height: 1.55; }
.lpi-aman { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.lpi-aman h2 { margin: 8px 0 0; }
.lpi-aman .lpi-sub { margin-top: 12px; }
.lpi-aman ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lpi-aman li { display: flex; gap: 10px; background: #fff; border-radius: 16px; padding: 14px 16px; line-height: 1.5; }
.lp-putih .lpi-aman li { background: var(--latar); }
.lpi-aman li svg { color: var(--hijau); flex: none; margin-top: 3px; }

/* ---------- Kuis ---------- */
.lpi-kuis { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lpi-kuis fieldset { border: 0; margin: 0; padding: 16px 18px; border-radius: 18px; background: var(--latar); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.lpi-kuis legend { float: left; display: flex; gap: 12px; align-items: flex-start; font-weight: 600; line-height: 1.45; padding: 0; }
.lpi-kuis legend span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--hijau-muda); color: var(--hijau); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.lpi-kuis label { cursor: pointer; }
.lpi-kuis input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lpi-kuis label span { display: block; min-width: 82px; text-align: center; padding: 10px 12px; border-radius: 999px; border: 1.5px solid var(--garis); background: #fff; font-weight: 700; font-size: 15px; }
.lpi-kuis input:checked + span { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.lpi-kuis input[value="0"]:checked + span { background: var(--bata); border-color: var(--bata); }
.lpi-kuis input:focus-visible + span { outline: 3px solid var(--kunyit); outline-offset: 2px; }
.lpi-kuis button { align-self: center; margin-top: 8px; min-width: 220px; cursor: pointer; }
.lpi-kuis-galat { text-align: center; color: var(--bata); font-weight: 700; margin: 0; }
.lpi-kuis-hasil { max-width: 760px; margin: 22px auto 0; }
.lpi-kuis-hasil h3 { margin: 4px 0 0; font-size: 24px; }
.lpi-kuis-hasil p { margin: 0; color: var(--hijau-pucat); font-size: 17px; line-height: 1.55; }
.lpi-kuis-hasil [data-k="saran-kotak"] { background: rgba(255,255,255,.1); border-radius: 16px; padding: 16px; margin-top: 10px; }
.lpi-kuis-hasil ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }

/* ---------- Ajakan akhir & kaki ---------- */
.lpi-akhir { background: radial-gradient(120% 120% at 10% 0%, #146b65, var(--hijau-tua)); color: #fff; text-align: center; }
.lpi-akhir .lp { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lpi-akhir h2 { margin: 0; color: #fff; }
.lpi-akhir p { margin: 0; font-size: 19px; color: var(--hijau-pucat); max-width: 560px; }
.lpi-akhir .tbl { min-height: 58px; padding: 0 36px; font-size: 18px; margin-top: 6px; }
.lpi-akhir small { color: var(--hijau-pucat); }
.lp-kaki-polos .lp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; }
.lp-kaki-polos nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ---------- Layar kecil ---------- */
@media (max-width: 900px) {
  .lpi-hero { grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
  .lpi-hero-gambar { min-height: 0; padding: 30px 0 20px; }
  .lpi-kalk, .lpi-banding, .lpi-aman { grid-template-columns: 1fr; }
  .lpi-tiga, .lpi-langkah, .lpi-fitur { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lpi-hero h1 { letter-spacing: -.8px; }
  .lpi-sub { font-size: 17px; }
  .lpi-hero .lp-cta .tbl { width: 100%; }
  .lpi-hp { width: 260px; }
  .lpi-dua-hp { padding-top: 46px; }
  .lpi-dua-hp .lpi-hp.kecil { width: 172px; padding: 8px; border-radius: 30px; }
  .lpi-dua-hp .lpi-layar { border-radius: 23px; }
  .lpi-dua-hp .lpi-hp.kecil:first-child { transform: rotate(-4deg) translate(14px, -8px); }
  .lpi-dua-hp .lpi-hp.kanan { transform: rotate(3deg) translate(-14px, 26px); }
  .lpi-dua-hp .lpi-hp-isi { min-height: 250px; padding: 22px 8px 10px; gap: 7px; }
  .lpi-dua-hp .lpi-amplop b, .lpi-dua-hp .lpi-notif { font-size: 12px; }
  .lpi-dua-hp .lpi-chat .saya { font-size: 12px; }
  .lpi-kuis fieldset { grid-template-columns: 1fr 1fr; }
  .lpi-kuis legend { grid-column: 1 / -1; float: none; }
  .lpi-kuis label span { min-width: 0; }
  .lpi-bocor, .lpi-kalk-isian { padding: 20px; }
  .lpi-kalk-hasil, .lpi-kuis-hasil { padding: 24px 20px; }
  .lp-polos main { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .lpi-hp, .lpi-dua-hp .lpi-hp.kecil { transform: none !important; } }

/* Tambahan: WhatsApp, pengingat waktu, skor pasangan */
.lpi-wa { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: #E7F7EE; color: #0B5A35; text-decoration: none; }
.lpi-wa svg { flex: none; color: #128C4B; }
.lpi-wa span { display: flex; flex-direction: column; line-height: 1.4; }
.lpi-wa b { color: #0B3F26; }
.lpi-waktu { font-size: 16px !important; background: rgba(255,255,255,.1); border-radius: 14px; padding: 10px 16px; }
.lpi-waktu b { color: var(--kunyit); }
.lpi-pasangan { max-width: 760px; margin: 0 auto 16px; padding: 14px 18px; border-radius: 16px; background: var(--kunyit-muda); color: var(--kunyit-teks); text-align: center; font-size: 16px; }
.lpi-banding-pasangan { background: rgba(232,163,61,.25); border-radius: 14px; padding: 12px 14px; color: #fff !important; }
.lpi-hasil-cta .tbl.putih { display: inline-flex; align-items: center; justify-content: center; }
.lp-polos .lp-tempel { transition: transform .3s ease, opacity .3s ease; }
.lp-polos .lp-tempel.sembunyi { transform: translateY(140%); opacity: 0; pointer-events: none; }