/* KELAS KURUS SF — sales page. Warna & font diambil dari CSS Elementor asal (post-18329.css). */
:root {
  --black: #000000;
  --ink: #151010;
  --white: #ffffff;
  --yellow: #ffc210;
  --yellow-2: #ffcd3a;
  --orange: #ffa500;
  --green: #4bff45;
  --red: #ec1515;
  --red-2: #d11010;
  --gold: #967000;
  --card-ink: #252323;
  --font: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-price: "Montserrat", "Poppins", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.3px;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 16px; }
.wrap.narrow { max-width: 750px; }
.center { text-align: center; }

/* ---------- Hero (jalur kuning) ---------- */
.hero { background: var(--yellow-2); color: var(--ink); text-align: center; padding: 14px 0; }
.hero h1 { font-size: 22px; font-weight: 800; line-height: 1.25; }

/* ---------- Sections ---------- */
.sec { padding: 40px 0; }
.sec .wrap > * + * { margin-top: 22px; }
.h-big { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: 0.7px; text-align: center; }
.h-mid { font-size: 22px; font-weight: 800; line-height: 1.25; text-align: center; }
.lead { font-size: 19px; font-weight: 500; line-height: 1.4; text-align: center; }
.lead.strong { font-weight: 700; }
.item-no { font-size: 20px; font-weight: 800; letter-spacing: 2px; text-align: center; color: var(--yellow); }
.plus { font-size: 40px; font-weight: 800; text-align: center; line-height: 1; color: var(--white); }

.coach-box { max-width: 480px; margin-inline: auto; }
.coach-box img { border-radius: 6px; width: 100%; }
.coach-box.round img { border-radius: 10px; }

/* Bingkai gambar: border kuning + shadow emas (ikut asal) */
.frame { border: 2px solid var(--yellow); box-shadow: 0 2px 5px 0 var(--gold); border-radius: 4px; overflow: hidden; background: #111; }
.frame img { width: 100%; }

.grid { display: grid; gap: 14px; align-items: start; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-mixed { align-items: start; }

/* Senarai dengan ikon */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; font-weight: 700; line-height: 1.3; }
.list .ic { flex: none; width: 30px; height: 30px; margin-top: 1px; }
.problems li { font-size: 19px; }
.problems .ic { width: 36px; height: 36px; }

.card { background: var(--white); color: var(--card-ink); border-radius: 10px; padding: 18px 20px; box-shadow: 0 0 55px 5px rgba(0,0,0,.06); }
.card li { font-size: 17px; }

/* ---------- Kotak offer (putih) ---------- */
.sec-offer { padding: 50px 0 60px; }
.offer { background: var(--white); color: #211e1e; border-radius: 20px; padding: 30px 22px; text-align: center; display: grid; gap: 18px; }
.badge { background: var(--yellow); color: var(--black); border-radius: 7px; padding: 10px 20px; font-weight: 800; font-size: 19px; line-height: 1.25; display: inline-block; justify-self: center; }
.badge.block { display: grid; gap: 8px; width: 100%; padding: 16px 20px; font-size: 17px; }
.offer-title { font-size: 24px; font-weight: 800; line-height: 1.2; }
.offer-red { color: #ff0000; font-size: 21px; font-weight: 600; line-height: 1.3; }
.price-big { font-family: var(--font-price); font-size: 40px; font-weight: 800; line-height: 1.1; }
.facts { text-align: left; margin: 0; }
.facts div { display: flex; gap: 6px; }
.facts dt { min-width: 128px; }
.facts dd { margin: 0; }
.note-red { color: #e31818; font-size: 13px; font-weight: 600; }
.soon { color: var(--black); font-size: 20px; font-weight: 400; line-height: 1.5; opacity: .75; }

/* ---------- Butang ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green); color: var(--black);
  font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: 0.7px; line-height: 1.25; text-align: center;
  border-radius: 10px; padding: 15px 30px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(75,255,69,.35);
  transition: background .3s, color .3s, transform .15s;
}
.btn:hover, .btn:focus-visible { background: var(--white); color: var(--black); transform: translateY(-1px); }
.btn-dark { background: var(--black); color: var(--white); box-shadow: 0 6px 18px rgba(0,0,0,.4); border: 2px solid #222; }
.btn-dark:hover, .btn-dark:focus-visible { background: #1a1a1a; color: var(--white); }
.btn .ic { width: 26px; height: 26px; }

/* ---------- Pakej / harga ---------- */
.sec-pricing { padding: 50px 0; }
.pricing { display: grid; gap: 28px; align-items: start; }
.coach-2 { max-width: 480px; margin-inline: auto; border-radius: 10px; }
.pkg { display: grid; gap: 14px; }
.pkg-title { background: var(--orange); color: var(--black); border-radius: 20px; padding: 10px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: 0.7px; text-align: center; box-shadow: 0 0 55px 5px rgba(0,0,0,.06); }
.price { font-family: var(--font-price); font-size: 45px; font-weight: 800; text-align: center; line-height: 1.1; }
.price-old { font-family: var(--font-price); font-size: 24px; font-weight: 600; color: var(--red-2); text-decoration: line-through; text-align: center; margin-top: -8px; }
.pkg h3 { background: var(--yellow); color: var(--black); border-radius: 8px; padding: 9px 14px; font-size: 16px; font-weight: 800; line-height: 1.25; margin-top: 6px; }
.checks li { font-size: 17px; font-weight: 600; }
.checks .nilai span { color: var(--orange); font-weight: 800; }
.oto { color: var(--orange); font-size: 14px; font-weight: 600; line-height: 1.35; }
.pkg .btn { justify-self: start; }

/* ---------- Penutup ---------- */
.sec-close .wrap > * + * { margin-top: 26px; }
.close-copy { display: grid; gap: 14px; text-align: center; font-size: 16px; font-weight: 800; line-height: 1.35; }
.big-yellow { font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--yellow-2); text-align: center; }
.warn { color: var(--orange); font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; }

/* ---------- Footer ---------- */
.foot { padding: 30px 0 40px; font-size: 11px; line-height: 1.5; text-align: center; }
.foot .wrap > * + * { margin-top: 14px; }
.foot .co { font-weight: 700; }

/* ---------- Desktop ---------- */
@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid { gap: 18px; }
  .hero h1 { font-size: 28px; }
  .h-big { font-size: 29px; }
  .h-mid { font-size: 24px; }
  .lead { font-size: 22px; }
  .list li { font-size: 18px; }
  .problems li { font-size: 24px; }
  .problems .ic { width: 44px; height: 44px; }
  .problems { padding-inline: 8%; }
  .badge { font-size: 20px; }
  .badge.block { font-size: 18px; }
  .price-big { font-size: 48px; }
  .offer { padding: 30px; }
  .offer-red { font-size: 24px; }
  .pkg-title { font-size: 28px; }
  .pkg h3 { font-size: 18px; }
  .btn { font-size: 18px; }
  .big-yellow { font-size: 32px; }
  .sec { padding: 50px 0; }
}
@media (min-width: 900px) {
  .pricing { grid-template-columns: 1fr 1.25fr; gap: 40px; }
  .coach-2 { position: sticky; top: 20px; }
  .close-copy { font-size: 18px; }
}