/* sales.css — sales page + halaman legal. BERASINGAN sepenuhnya dari CSS game
   (app/css/style.css) supaya tiada pertembungan. */

:root{
  --ink:#2C2745; --lembut:#5a6a82; --kabur:#8a97a8;
  --hijau:#4CAF50; --hijau-d:#35803a; --hijau-cerah:#8BE86A;
  --kuning:#FFC93C; --kuning-d:#E09A00;
  --biru:#2E9FDF; --krim:#FFFDF6;
  --lebar:1080px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); background:#fff;
  font-family:"Baloo 2","Segoe UI Rounded","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--biru); }
.bekas{ max-width:var(--lebar); margin:0 auto; padding:0 20px; }

/* ---------- Butang ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:3px solid #fff; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:900; text-decoration:none;
  padding:16px 34px; font-size:19px; min-height:58px; text-align:center;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s ease;
}
.btn-utama{
  background:linear-gradient(180deg,var(--hijau-cerah),var(--hijau)); color:#fff;
  box-shadow:0 5px 0 var(--hijau-d), 0 10px 20px rgba(53,128,58,.25);
  text-shadow:0 2px 0 rgba(0,0,0,.18);
}
.btn-kedua{
  background:linear-gradient(180deg,#FFFFFF,#EEF4FF); color:var(--ink);
  box-shadow:0 5px 0 #C9D8EC, 0 10px 18px rgba(58,52,86,.14);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--hijau-d); }
.btn-besar{ font-size:21px; padding:18px 40px; min-height:64px; }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(165deg,#FFF7E3 0%,#FFE9C7 45%,#FFD9E8 100%);
  padding:34px 0 54px; text-align:center; position:relative; overflow:hidden;
}
.hero-logo{ width:min(340px,72vw); margin:0 auto 22px; }
.hero h1{
  font-size:clamp(28px,5.4vw,46px); line-height:1.2; margin:0 0 16px;
  font-weight:900; letter-spacing:-.5px;
}
.hero h1 .serlah{
  background:linear-gradient(180deg,transparent 62%, #FFD93D 62%);
  padding:0 4px;
}
.hero-sub{
  font-size:clamp(17px,2.4vw,21px); color:var(--lembut); font-weight:700;
  max-width:640px; margin:0 auto 26px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.hero-nota{ margin-top:16px; font-size:15px; color:var(--kabur); font-weight:700; }

/* ---------- Seksyen am ---------- */
.seksyen{ padding:56px 0; }
.seksyen-warna{ background:#FFFBF2; }
.seksyen h2{
  font-size:clamp(24px,4vw,34px); text-align:center; margin:0 0 12px;
  font-weight:900; line-height:1.25;
}
.seksyen-intro{
  text-align:center; color:var(--lembut); font-weight:700;
  max-width:640px; margin:0 auto 34px;
}

/* ---------- Masalah ---------- */
.masalah{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.masalah-kad{
  background:#fff; border:3px solid #FFE0E0; border-left-width:8px;
  border-radius:18px; padding:22px 24px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.masalah-kad .ikon{ font-size:32px; line-height:1; margin-bottom:8px; }
.masalah-kad p{ margin:0; font-weight:700; }

/* ---------- Penyelesaian ---------- */
.selesai-grid{
  display:grid; gap:30px; align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.selesai-teks p{ font-size:18px; }
.selesai-imej img{ border-radius:24px; box-shadow:0 12px 30px rgba(0,0,0,.16); }

/* ---------- Demo ---------- */
.demo-bingkai{
  max-width:760px; margin:0 auto; border-radius:24px; overflow:hidden;
  background:#1B1464; aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 40px rgba(27,20,100,.3); color:#fff; text-align:center; padding:20px;
}
.demo-bingkai video, .demo-bingkai iframe{ width:100%; height:100%; border:0; }

/* ---------- Ciri ---------- */
.ciri{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.ciri-kad{
  background:#fff; border:3px solid #F0E6D2; border-radius:20px;
  padding:22px 20px; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.ciri-kad .ikon{ font-size:38px; line-height:1; margin-bottom:8px; }
.ciri-kad h3{ margin:0 0 4px; font-size:18px; font-weight:900; }
.ciri-kad p{ margin:0; font-size:15px; color:var(--lembut); font-weight:700; }

/* ---------- Bukti sosial ---------- */
.testi{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.testi-kad{
  background:#fff; border:3px solid #E8F5E9; border-radius:20px; padding:22px 24px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.testi-bintang{ color:var(--kuning-d); font-size:18px; margin-bottom:8px; }
.testi-kad p{ margin:0 0 12px; font-weight:700; font-style:italic; }
.testi-nama{ font-size:14px; color:var(--kabur); font-weight:800; }

/* ---------- Harga ---------- */
.harga-kad{
  max-width:520px; margin:0 auto;
  background:linear-gradient(180deg,var(--krim),#FFF4DC);
  border:5px solid #fff; border-radius:30px; padding:34px 28px; text-align:center;
  box-shadow:0 8px 0 var(--kuning-d), 0 22px 46px rgba(30,20,60,.24);
}
.harga-lencana{
  display:inline-block; background:linear-gradient(180deg,var(--hijau-cerah),var(--hijau));
  color:#fff; border:3px solid #fff; border-radius:999px; padding:4px 20px;
  font-weight:900; font-size:14px; box-shadow:0 3px 0 var(--hijau-d); margin-bottom:12px;
}
.harga-banding{ color:var(--kabur); font-weight:800; font-size:16px; }
.harga-banding s{ opacity:.8; }
.harga-nilai{ font-size:clamp(48px,9vw,68px); font-weight:900; color:var(--hijau-d); line-height:1; margin:6px 0; }
.harga-nota{ color:var(--lembut); font-weight:800; margin-bottom:20px; }
.harga-senarai{ list-style:none; margin:0 0 24px; padding:0; text-align:left; display:flex; flex-direction:column; gap:9px; }
.harga-senarai li{ display:flex; gap:10px; font-weight:700; font-size:16px; }
.harga-senarai li::before{ content:"✓"; color:var(--hijau-d); font-weight:900; flex:0 0 auto; }
.jaminan{
  margin-top:18px; padding:14px 18px; border-radius:16px;
  background:#E8F5E9; border:2px dashed var(--hijau);
  font-weight:800; color:var(--hijau-d); font-size:15px;
}

/* ---------- FAQ ---------- */
.faq{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq details{
  background:#fff; border:3px solid #F0E6D2; border-radius:16px; padding:16px 20px;
}
.faq summary{ font-weight:900; cursor:pointer; font-size:17px; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:" ＋"; color:var(--kabur); float:right; }
.faq details[open] summary::after{ content:" －"; }
.faq p{ margin:10px 0 0; color:var(--lembut); font-weight:700; font-size:16px; }

/* ---------- CTA akhir ---------- */
.cta-akhir{
  background:linear-gradient(165deg,#34D399,#0EA5E9); color:#fff;
  text-align:center; padding:56px 0;
}
.cta-akhir h2{ color:#fff; }
.cta-akhir .seksyen-intro{ color:rgba(255,255,255,.92); }

/* ---------- Footer ---------- */
.kaki{ background:#2C2745; color:#C9C4DE; padding:34px 0; font-size:15px; }
.kaki a{ color:#9FD8FF; text-decoration:none; font-weight:700; }
.kaki a:hover{ text-decoration:underline; }
.kaki-pautan{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-bottom:14px; }
.kaki-hak{ text-align:center; color:#8A83A8; font-size:14px; }

/* ---------- Halaman legal ---------- */
.legal{ max-width:760px; margin:0 auto; padding:40px 20px 60px; }
.legal h1{ font-size:clamp(26px,4.4vw,34px); font-weight:900; margin:0 0 6px; }
.legal .kemaskini{ color:var(--kabur); font-weight:700; font-size:15px; margin:0 0 28px; }
.legal h2{ font-size:21px; font-weight:900; margin:28px 0 8px; }
.legal p, .legal li{ color:#3f3a5c; font-weight:600; }
.legal ul{ padding-left:22px; }
.legal .balik{ display:inline-block; margin-bottom:24px; font-weight:800; }
.legal .kotak{
  background:#FFFBF2; border:3px solid #F0E6D2; border-radius:16px;
  padding:18px 22px; margin:20px 0;
}

@media (max-width:640px){
  body{ font-size:16px; }
  .seksyen{ padding:42px 0; }
  .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn:hover, .btn:active{ transform:none; }
}