/* Landing ikut tema gelap app (ui.css): warna, Instrument Serif/Sans, aksen limau.
   ponytail: nilai disalin dari ui.css, bukan diimport — halaman ni tak muat ui.css. Tukar di sana, tukar di sini. */
@font-face{
  font-family:"Instrument Sans";
  src:url(/fonts/instrument-sans.woff2) format("woff2");
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#0e1014; --ink:#eef1f5; --mute:#9aa3b0; --line:#262b33;
  --acc:#c6f27f; --acc-hi:#d4f79b; --acc-fg:#0e1014;
  --soft:#12151a; --surface:#171b21;
  --display:"Instrument Serif","Times New Roman",Times,serif;
  --cond:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --shadow:0 1px 2px #0006, 0 8px 24px #0004;
  --measure:34rem; --gap:clamp(6rem,18vw,10rem);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);overflow-x:clip;
  font:400 1.125rem/1.6 var(--sans);
  padding:0 1.5rem}
a{color:inherit}
img,video{display:block;max-width:100%}
.skip-link{position:absolute;left:-999px;top:0;padding:.625rem 1rem;border-radius:40px;background:var(--bg);box-shadow:var(--shadow)}
.skip-link:focus{left:1rem;top:1rem;z-index:10}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.nav,main,.foot{max-width:var(--measure);margin:0 auto}
.nav{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;font-size:1rem;font-weight:500}
.nav a{text-decoration:none}
.nav .brand{display:inline-flex;align-items:center;gap:.5rem}
.nav .brand img{width:1.75rem;height:1.75rem}
/* Login: pautan teks biasa, bukan butang, supaya CTA limau kekal satu-satunya butang */
.nav .ghost{color:var(--acc);padding:.75rem 0;font-size:.9375rem}
.nav .ghost:hover{text-decoration:underline}

section{padding-top:var(--gap)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;text-wrap:balance}
h1{font:400 clamp(3rem,12vw,6rem)/1 var(--display);letter-spacing:-.035em;margin-bottom:1.5rem}
h2{font-size:clamp(2.25rem,9vw,3.25rem);letter-spacing:-.02em;margin-bottom:2rem}
h3{font-size:1.75rem;letter-spacing:-.01em;margin:4rem 0 1.5rem}
.mute{color:var(--mute)}
.label{font-size:.875rem;font-weight:500;color:var(--mute);margin-bottom:1rem}
.after-list{margin-top:2rem}

/* CTA: pil limau, tinggi 48px */
.go{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1.5rem;
  background:var(--acc);color:var(--acc-fg);border-radius:9999px;text-decoration:none;
  font-weight:500;font-size:1rem;white-space:nowrap;box-shadow:var(--shadow);transition:background .2s}
.go:hover{background:var(--acc-hi)}
.cta{margin-top:2rem}

/* Hero: kotak gelap bulat (nav di dalam), gambar bulat penuh di bawah. */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;
  margin:.75rem -.75rem 0;padding:0 1.25rem 1.25rem;overflow:hidden;
  border-radius:clamp(28px,5vw,48px);background:linear-gradient(180deg,#1a1f27,var(--bg) 85%);border:1px solid var(--line)}
.hero>.nav{width:100%;margin-bottom:2.5rem}
/* Serif headline inspired by america.gov; open-source font pairing. */
.hero h1{font-family:var(--display);font-size:clamp(2.25rem,11vw,4rem);font-weight:400;line-height:1.05;letter-spacing:-.04em;margin-bottom:1rem;max-width:8.2em}
.hero .mute{font-size:1.125rem;line-height:1.5;max-width:22rem;text-wrap:balance}
.hero .price-line{margin-top:1.5rem;font-size:.9375rem;font-weight:500}
.hero .cta{margin-top:.75rem}
/* Gambar hasil selepas ayat, sebelum harga dan butang; semua sudut bulat. */
.hero-img{width:100%;max-width:22rem;margin:2rem auto 0}
.hero-img .frame{border-radius:24px;box-shadow:var(--shadow)}
.price .pay-note{margin-top:1rem}

ol,ul{list-style:none;padding:0}
.list li{padding:1.25rem 0;border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.75rem 1fr}
.steps li::before{content:counter(s,decimal-leading-zero);font:1.25rem/1.3 var(--display);color:var(--acc)}
.steps b{display:block;font-weight:500;color:var(--ink)}
.steps span{color:var(--mute)}
.ticks li{display:flex;gap:.75rem}
.ticks svg{flex:none;width:1rem;height:1rem;margin-top:.35rem;fill:none;stroke:var(--acc);stroke-width:1.75}

/* Media: bingkai tetap nisbah supaya tiada lompatan layout */
.media{margin-top:3rem}
.media figcaption,.rail figcaption{margin-top:.75rem;font-size:.875rem;color:var(--mute)}
.media figcaption{text-align:center}
.frame{width:100%;height:auto;object-fit:cover;background:var(--soft);border-radius:28px}
.rail{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -1.5rem;padding:0 1.5rem;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{flex:0 0 62%;max-width:15rem;scroll-snap-align:center}
.rail .frame{aspect-ratio:9/16;border-radius:24px}

/* Petikan: tajuk besar, seperti kenyataan tengah halaman rujukan */
.quote{font:clamp(1.375rem,5.5vw,1.75rem)/1.25 var(--display);letter-spacing:-.015em}
.quote.weak{color:var(--mute)}
.quote+.label{margin-top:2.5rem}

/* Harga: kad kelabu lembut, sudut bulat */
.price{background:var(--surface);border-radius:clamp(28px,5vw,40px);padding:clamp(2rem,7vw,3rem) clamp(1.25rem,6vw,2.5rem);
  margin-inline:-.75rem}
.amt{font:400 clamp(3.5rem,15vw,5.5rem)/1 var(--display);letter-spacing:-.03em}
.price h2{font-size:1.125rem;letter-spacing:0;margin-bottom:1rem}
.price .fine{margin-top:2rem;font-size:.9375rem;color:var(--mute)}
.after-label{margin-top:3rem}
.after{counter-reset:a}
.after li{counter-increment:a;padding:.5rem 0 .5rem 2rem;position:relative}
.after li::before{content:counter(a);position:absolute;left:0;color:var(--acc);font-weight:500}

.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 0;font-weight:500;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:1.25rem;color:var(--mute)}

/* Penutup: tajuk besar di tengah */
#mula{text-align:center}
#mula h2{font:400 clamp(1.875rem,8.5vw,2.25rem)/1.05 var(--display);letter-spacing:-.03em;margin-top:3rem}
#mula .mute{margin-top:1rem;font-size:.9375rem}

/* Kaki: jalur kelabu lebar penuh */
.foot{max-width:none;margin:var(--gap) -1.5rem 0;padding:4rem 1.5rem 8rem;background:var(--surface);font-size:.875rem;color:var(--mute)}
.foot > *{max-width:var(--measure);margin-inline:auto;display:block}
.foot > a + a{margin-top:.75rem}
.foot small{margin-top:.75rem;font-size:inherit}

/* Bar bawah: pil terapung, muncul selepas hero, hilang di kad harga (home-cinematic.mjs) */
#sticky-cta{position:fixed;inset:auto 0 0;z-index:5;padding:0 .75rem calc(.75rem + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .25s ease;pointer-events:none}
#sticky-cta.is-shown{transform:none}
.sticky-in{max-width:30rem;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--bg);border:1px solid var(--line);border-radius:9999px;padding:.375rem .375rem .375rem 1.5rem;
  box-shadow:var(--shadow);pointer-events:auto}
.sticky-in p{color:var(--mute);font-size:.875rem;white-space:nowrap}
.sticky-in .go{box-shadow:none}

/* Slot media: kotak nisbah tetap untuk imej yang admin muat naik (home-admin).
   Slot kosong (src data:) dipaparkan sebagai bingkai placeholder. */
.slot figcaption{margin-top:.75rem;font-size:.875rem;color:var(--mute);text-align:center}
.r4-5{aspect-ratio:4/5}.r16-10{aspect-ratio:16/10}.r16-9{aspect-ratio:16/9}
.r9-16{aspect-ratio:9/16;max-width:18rem;margin:0 auto}
.phone{max-width:18rem;margin:0 auto}
.price .media{margin:2rem 0}
.bleed{margin:3rem -1.5rem 0}
.bleed .frame{border-radius:0}

/* ── Mobile (<900px): ikut america.gov mobile ─────────────────────────────
   Kotak hero tepi ke tepi, gambar lebar dalam kotak; ayat penutup masalah
   jadi kenyataan besar; blok ciri buka dengan kad gambar dahulu. */
@media (max-width:899px){
  .hero{margin:.5rem -1.5rem 0;padding:0 1.5rem 1.5rem;border-radius:40px}
  .hero-img{max-width:none;width:calc(100% + 1.5rem);margin-inline:-.75rem}
  .hero-img .frame{border-radius:48px}

  #masalah .after-list{margin-top:4rem;text-align:center;
    font:400 clamp(1.625rem,7.5vw,2rem)/1.15 var(--display);letter-spacing:-.02em;text-wrap:balance}

  #sistem,#untuk{display:flex;flex-direction:column}
  #sistem>.media,#untuk>.media{order:-1;margin:0 0 2.5rem;padding:2.5rem 1.5rem 1.5rem;
    background:var(--surface);border-radius:28px}
  /* Kad kekal padat: gambar telefon dipotong 4:5 dari atas. */
  #sistem>.media .frame,#untuk>.media .frame{aspect-ratio:4/5;object-position:top;max-width:16rem;margin-inline:auto;border-radius:20px}
}

/* ── Desktop (≥900px): ikut susun atur america.gov ───────────────────────
   Mobile kekal satu lajur di atas. Di desktop: kandungan lebar 72rem,
   baris dua lajur (gambar sebelah teks, berselang-seli), grid hasil,
   kenyataan besar di tengah, kad harga dan soalan dua lajur. */
@media (min-width:900px){
:root{--wide:72rem;--gap:clamp(8rem,12vw,11rem)}
  body{padding:0 2.5rem}
  .nav,main{max-width:var(--wide)}
  /* Lalai: setiap blok kekal pada lebar bacaan, di tengah. */
  main>section>*{max-width:var(--measure);margin-inline:auto}

  .hero h1{font-size:clamp(4.5rem,8vw,8rem);max-width:8.2em;margin-bottom:1.25rem}
  .hero .mute{font-size:1.375rem;max-width:36rem}
  .hero .price-line{font-size:1.0625rem}
  /* Butang lebih besar di desktop supaya seimbang dengan tajuk besar; bar melekat kekal 48px. */
  .go{min-height:3.5rem;padding:0 2rem;font-size:1.0625rem}
  .sticky-in .go{min-height:3rem;padding:0 1.5rem;font-size:1rem}
  .hero .cta{margin-top:1rem}
  .hero>.nav{margin-bottom:4rem}
  /* Seperti rujukan: tajuk, ayat, tindakan dahulu; media di bawah. */
  /* Kotak hampir lebar skrin penuh (jarak 2.5rem dari tepi), bukan lebar main. */
  .hero{margin-inline:calc(50% - 50vw + 2.5rem);padding:0 3.5rem 3.5rem}
  .hero>.nav{max-width:none;padding-top:2.5rem}
  /* Saiz seperti rujukan: 3:2, ~48vw lebar, bucu 69px. */
  .hero-img{width:47.75vw;max-width:none;margin-top:3rem}
  .hero-img .frame{aspect-ratio:3/2;object-position:50% 30%;border-radius:69px}

  /* Masalah: senarai di tengah, ayat penutup jadi kenyataan besar. */
  #masalah h2{text-align:center}
  #masalah .after-list{max-width:52rem;margin-top:5rem;text-align:center;
    font:400 clamp(2.5rem,3.8vw,3.5rem)/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance}

  /* Baris ciri: teks dan gambar sebelah-menyebelah, teks di tengah menegak. */
  #sistem,#untuk{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;
    column-gap:clamp(3rem,7vw,7rem);max-width:64rem;margin-inline:auto}
  #sistem>*,#untuk>*{max-width:none;margin-inline:0}
  #sistem>h2,#untuk>h2{grid-row:2}
  #sistem>.list,#untuk>.list{grid-row:3}
  #sistem>.media,#untuk>.media{grid-row:1/-1;align-self:center;margin-top:0}
  #sistem>:not(.media){grid-column:2}
  #sistem>.media{grid-column:1}
  #untuk>:not(.media){grid-column:1}
  #untuk>.media{grid-column:2}
  #sistem .phone,#untuk .r9-16{max-width:22rem}
  /* Slot potret 4:5 jangan setinggi skrin di desktop. */
  .slot .r4-5{max-width:24rem;margin-inline:auto}

  /* Hasil: rel jadi grid empat, tiada tatal mendatar. */
  #hasil>h2{text-align:center;max-width:none}
  #hasil>.rail{max-width:64rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;
    margin-inline:auto;padding:0;overflow:visible}
  .rail figure{max-width:none}
  #hasil>figure.media{max-width:64rem;margin-top:6rem}
  #hasil>h3{text-align:center;font-size:2rem;margin-top:7rem}
  #hasil>.label,#hasil>.quote{text-align:center}
  #hasil>.cta{text-align:center}

  /* Harga: kad lebar, butiran pembelian kiri, gambar dan "Lepas bayar" kanan. */
  #harga>.price{max-width:64rem;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:4rem;
    align-items:start;padding:4rem}
  .price>:nth-child(1){grid-area:1/1}
  .price>:nth-child(2){grid-area:1/2/3/3}
  .price>:nth-child(3){grid-area:2/1/4/2}
  .price>:nth-child(4){grid-area:3/2}
  .price .media{margin-top:0}
  .price h2{font-size:1.375rem}

  /* Soalan: tajuk kiri, jawapan kanan. */
  #soalan{display:grid;grid-template-columns:1fr 2fr;column-gap:4rem;max-width:64rem;margin-inline:auto}
  #soalan>*{max-width:none;margin-inline:0}
  #soalan h2{position:sticky;top:2rem;align-self:start}

  /* Penutup: gambar jadi kad bulat lebar, bukan jalur penuh. */
  #mula>.bleed{max-width:64rem;margin:0 auto}
  #mula .bleed .frame{border-radius:40px}
  #mula h2{max-width:44rem;font-size:clamp(3.5rem,5vw,4.5rem)}

  .foot{margin-inline:-2.5rem;padding-inline:2.5rem}
}

/* Nav, butang dan label: condensed huruf besar dengan jarak huruf, seperti rujukan. */
.nav,.go,.label,.sticky-in p{font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.1em}

/* Smaller section headings and controls follow the clean sans-serif reference. */
#sistem h2,#untuk h2,.price h2,h3{font-family:var(--sans);font-weight:500;line-height:1.2}
.nav,.go,.label,.sticky-in p{text-transform:none;letter-spacing:-.01em}

/* Perbandingan dan prompt kekal bersama setiap gambar. */
.image-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;text-align:left}
.image-comparison>figure{min-width:0}
.image-comparison .frame{aspect-ratio:4/5;border-radius:16px}
.image-comparison figcaption{font-size:.9375rem;color:var(--ink);margin-top:1rem;text-align:left}
.image-prompt{margin-top:.75rem;border-top:1px solid var(--line);font-size:.875rem}
.image-prompt summary{cursor:pointer;padding:.75rem 0;color:var(--acc)}
.image-prompt p{color:var(--mute);line-height:1.65;overflow-wrap:anywhere;padding-bottom:1rem;user-select:text}
.comparison-note{font-size:.875rem;color:var(--mute);margin-top:1.5rem;text-align:left}
@media(min-width:900px){
  #masalah>.image-comparison,#hasil>.image-comparison,#mula>.image-comparison{max-width:56rem}
  #mula>.comparison-note{max-width:56rem}
}
@media(max-width:599px){
  .image-comparison{grid-template-columns:1fr;gap:2.5rem}
}