/* ==========================================================================
   KOD FLOW — Penjana Prompt
   v2 "kemas & premium" (8/10/2026) — design token berjenama.
   AMARAN: SEMUA nama kelas & id DIKEKALKAN (JS bergantung pada .kad-bayar,
   .nota-ubah, .pil button, .chip, .chip-trial, .chip-vip). Tukar hanyalah
   NILAI token di bawah — jangan buang kelas.
   ========================================================================== */
:root{
  /* ---- gelap navy/plum berjenama ---- */
  --bg:#0b1020; --bg2:#121a33; --kad:#161f3d; --kad2:#1b2650; --garis:#243159;
  --teks:#eef2ff; --lembut:#9aa8cf; --halus:#6d7ba6;
  /* ---- aksen ---- */
  --utama:#3d7bff; --utama2:#6b9cff;
  --emas:#ffc247; --emas2:#ffb800; --emas-gelap:#c98a00;   /* CTA utama 3D */
  --hijau:#28c76f; --hijau-gelap:#149a48;
  --merah:#ff5c72;
  /* ---- radius & shadow (konsisten = kemas) ---- */
  --r:14px; --rl:20px; --rpil:999px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.6);
  --glow-emas:0 18px 30px -8px rgba(255,184,0,.5);
  /* ---- tipografi (3 peranan) ---- */
  --f-head:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-body:'Quicksand',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
/* PENTING: atribut `hidden` MESTI menang atas apa-apa `display` dalam kelas.
   Tanpa baris ini, `.f{display:flex}` tewaskan `hidden` → kawalan yang sepatutnya
   tersorok masih nampak (contoh: kod visual masih tunjuk "Ada gambar muka"). */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
/* latar pada html supaya tiada jalur putih bila halaman panjang (iOS Safari / overscroll) */
html{background:var(--bg);min-height:100%}
body{
  /* PENTING (Android): JANGAN guna background-attachment:fixed.
     Chrome Android melukis semula gradien besar itu pada SETIAP frame scroll →
     halaman rasa "heng". Gradien biasa (scroll) jauh lebih laju. */
  background:var(--bg) radial-gradient(1100px 620px at 50% 0,#1c2a55 0%,transparent 62%) no-repeat;
  background-color:var(--bg);
  min-height:100vh;
  color:var(--teks);
  font:16px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;
}
/* heading guna Outfit (tegas/modern) — teks badan kekal Quicksand (mesra) */
h1,h2,h3,.brand,.btn,.chip{font-family:var(--f-head)}
h1,h2,h3{letter-spacing:-.02em}

.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.wrap.sempit{max-width:620px}
a{color:var(--utama2);text-decoration:none}
h1{font-size:2rem;line-height:1.2;margin:28px 0 10px;letter-spacing:-.03em;font-weight:800}
h1 em{font-style:normal;color:var(--emas)}
h2{font-size:1.1rem;margin:0 0 10px;font-weight:700}
.bawah{color:var(--lembut);margin:0 0 20px}
/* ---------- jalur kepercayaan (trust strip) ---------- */
.aman{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.aman span{font-size:.74rem;font-weight:700;color:var(--lembut);background:var(--kad);
  border:1px solid var(--garis);border-radius:999px;padding:5px 11px;
  font-family:var(--f-head);letter-spacing:.01em}


/* ---------- header ---------- */
/* PENTING (Android): JANGAN guna backdrop-filter:blur pada header sticky.
   ia buat Chrome Android rasa "heng" semasa scroll. Latar legap sudah cukup. */
.top{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--garis)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{display:flex;align-items:center;gap:9px;color:var(--teks);font-weight:800;
  letter-spacing:.06em;font-size:.9rem}
.mark{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;
  background:linear-gradient(135deg,var(--utama),#8b5cf6);font-size:.72rem;font-weight:900}
.who{display:flex;align-items:center;gap:8px}
.chip{font-size:.76rem;padding:5px 11px;border-radius:999px;border:1px solid var(--garis);
  background:var(--kad);color:var(--lembut);white-space:nowrap}
.chip-trial{border-color:#3a4a7a;color:var(--emas)}
.chip-ok{border-color:#1e5c39;color:var(--hijau)}
.chip-vip{border-color:#8a6a12;color:#ffc247;background:linear-gradient(135deg,#3b2f00,#1a1400);
  font-weight:700}
/* jalur "versi baharu tersedia" — supaya tak perlu buka Chrome baru */
.jalur-baru{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:center;gap:12px;padding:9px 14px;font-size:.86rem;
  background:linear-gradient(135deg,#1d4ed8,#3d7bff);color:#fff}
.jalur-baru .btn{padding:6px 14px;font-size:.82rem}
.versi{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;color:var(--halus)}
/* teks prestij di atas headline */
.prestij{font-size:.72rem;letter-spacing:2.4px;color:var(--emas);font-weight:700;
  margin:0 0 10px;text-transform:uppercase}
.emas{color:var(--emas)}
/* sub-tajuk Inggeris dalam tajuk penjana */
.tajuk-jana .sub-en{display:block;font-size:.62em;letter-spacing:.6px;
  color:var(--lembut);font-weight:600;text-transform:none;margin-top:3px}

/* ---------- butang ---------- */
/* ---------- butang (3D "boleh tekan" — kunci rasa premium) ---------- */
.btn{font:inherit;font-weight:800;border:0;border-radius:12px;padding:13px 20px;
  cursor:pointer;transition:transform .08s ease,box-shadow .08s ease,filter .15s;
  min-height:46px;font-family:var(--f-head);letter-spacing:.01em}
/* CTA UTAMA — emas 3D (gradien + lapis gelap bawah = nampak timbul) */
.btn-utama{
  background:linear-gradient(180deg,#ffd977,var(--emas2));color:#2a1f00;
  box-shadow:0 6px 0 -1px var(--emas-gelap), 0 14px 26px -10px rgba(255,184,0,.55);
}
.btn-utama:hover{filter:brightness(1.05)}
.btn-utama:active{transform:translateY(4px);
  box-shadow:0 2px 0 -1px var(--emas-gelap), 0 6px 14px -8px rgba(255,184,0,.4)}
.btn-utama[disabled]{opacity:.45;cursor:not-allowed;filter:none;
  box-shadow:0 6px 0 -1px #5a4a1a}
/* SEKUNDER — biru 3D */
.btn-ghost{background:var(--kad2);color:var(--lembut);border:1px solid var(--garis);
  box-shadow:0 4px 0 -1px #131b33}
.btn-ghost:hover{color:var(--teks);border-color:#3a4a7a}
.btn-ghost:active{transform:translateY(3px);box-shadow:0 1px 0 -1px #131b33}
/* butang WhatsApp (kalau dipakai) */
.btn-wa{background:linear-gradient(180deg,#3ee07d,var(--hijau));color:#05361a;
  box-shadow:0 6px 0 -1px var(--hijau-gelap), 0 14px 26px -10px rgba(37,211,102,.5)}
.btn-wa:active{transform:translateY(4px);box-shadow:0 2px 0 -1px var(--hijau-gelap)}
.lebar{width:100%}


/* ---------- kad ---------- */
.kad{background:var(--kad);border:1px solid var(--garis);border-radius:var(--rl);
  padding:20px;box-shadow:var(--shadow)}
label{display:block;font-size:.84rem;font-weight:700;color:var(--lembut);margin:0 0 6px;
  font-family:var(--f-head)}
input,textarea,select{font:inherit;width:100%;background:#0e1730;color:var(--teks);
  border:1px solid var(--garis);border-radius:12px;padding:12px 14px;outline:none;
  transition:border-color .15s,box-shadow .15s}

input:focus,textarea:focus{border-color:var(--utama);
  box-shadow:0 0 0 3px rgba(61,123,255,.18)}
select{cursor:pointer;appearance:none;padding-right:40px;min-height:46px;
  background-image:linear-gradient(45deg,transparent 50%,var(--lembut) 50%),
    linear-gradient(135deg,var(--lembut) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  -webkit-tap-highlight-color:transparent}
select:focus{border-color:var(--utama)}
select option{background:#0e1730;color:var(--teks)}
textarea{resize:vertical;min-height:190px;font-size:.86rem;line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.halus{font-size:.76rem;color:var(--halus);margin:12px 0 0;line-height:1.5}
/* Nota penjelasan medan (cth SUASANA) — kecil, tak ganggu */
.medan .halus{margin:5px 0 0}
.medan .halus[data-penting="1"]{color:#ffb700}
.ralat{color:var(--merah);font-size:.84rem;margin:10px 0 0}
/* borang bayar dalam kad pakej */
.kad-bayar{margin-top:14px;padding-top:14px;border-top:1px dashed var(--garis);
  display:flex;flex-direction:column;gap:9px}
.kad-bayar input{margin:0}
.kad-bayar .halus{margin:0}
.kad-bayar .ralat{margin:0}
/* kotak "dah beli? masukkan kunci" */
.sudah-beli{margin:14px 0 0;border:1px solid var(--garis);border-radius:11px;
  padding:10px 12px;background:#0e1730}
/* kad pakej VIP (Bisnes) — rangka emas */
.pk.vip{border-color:#8a6a12;box-shadow:0 0 0 1px #6b5210 inset,0 8px 26px rgba(255,194,71,.10)}
.tag-vip{background:linear-gradient(135deg,#ffc247,#c98f0a);color:#2a1f00}
/* kad BUNDLE RM199 — paling menonjol */
.pk.bundle{border-color:#b91c1c;background:linear-gradient(180deg,#2a1013,#161f3d);
  box-shadow:0 0 0 1px #7f1d1d inset,0 10px 30px rgba(220,38,38,.14)}
.tag-bundle{background:linear-gradient(135deg,#f43f5e,#b91c1c);color:#fff}
/* grid pakej: 4 pakej -> 2x2 di desktop sederhana, 4 lajur di skrin lebar */
@media(min-width:640px){.grid-pakej{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid-pakej{grid-template-columns:repeat(4,1fr)}}
.sudah-beli summary{cursor:pointer;font-size:.86rem;color:var(--utama2);
  font-weight:600;list-style:none}
.sudah-beli summary::-webkit-details-marker{display:none}
.sudah-beli summary::before{content:"🔑 ";font-size:.9em}
.sudah-beli[open] summary{margin-bottom:10px}
.sudah-beli label{margin-top:0}
.nota-bayar-ok{color:var(--hijau);font-size:.84rem;margin:10px 0 0;line-height:1.5}
.nota-bayar-ok a{color:var(--utama2)}

/* ---------- dua cara masuk (percuma / kunci akses) ---------- */
.cara-tajuk{display:flex;align-items:center;gap:10px;font-size:.92rem;
  color:var(--teks);margin-bottom:12px;font-weight:600}
.cara-tajuk .nombor{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--utama);color:#fff;font-size:.82rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.cara-tajuk .nombor-beli{background:linear-gradient(135deg,#ffc247,#c98f0a);color:#2a1f00}
.kad-beli{border-color:#2b3d70;background:linear-gradient(180deg,#18223f,#161f3d)}
.nota-beli{margin:0 0 14px;font-size:.8rem}
.nota-beli code{background:#0b1226;padding:2px 6px;border-radius:5px;
  color:#7dd3fc;font-size:.86em;letter-spacing:.5px}
.medan-kunci{text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
/* pemisah "ATAU" antara dua borang */
.pemisah{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--halus);
  font-size:.72rem;letter-spacing:2px;font-weight:700}
.pemisah::before,.pemisah::after{content:"";flex:1;height:1px;background:var(--garis)}

/* ---------- video cara guna ---------- */
.video-kotak{margin:22px 0 26px;border:1px solid var(--garis);border-radius:var(--rl);
  background:var(--kad);overflow:hidden}
.video-kotak>summary{cursor:pointer;font-weight:700;font-size:.95rem;color:var(--utama2);
  padding:14px 18px;list-style:none;display:flex;align-items:center;gap:10px}
.video-kotak>summary::-webkit-details-marker{display:none}
.video-kotak>summary::after{content:"▾";margin-left:auto;color:var(--halus);font-size:.9rem}
.video-kotak[open]>summary::after{content:"▴"}
.video-kotak[open]>summary{border-bottom:1px solid var(--garis)}
.ikon-main{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--utama);color:#fff;font-size:.7rem}
.demo-video{display:block;width:100%;height:auto;background:#0b1020;
  border-bottom:1px solid var(--garis)}
.video-kotak .halus{padding:0 18px 14px;margin:10px 0 0}

/* ---------- pakej ---------- */
.pakej{margin-top:36px}
.grid-pakej{display:grid;gap:12px;grid-template-columns:1fr}
.pk{background:var(--kad);border:1px solid var(--garis);border-radius:var(--rl);
  padding:18px;position:relative;display:flex;flex-direction:column;
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.pk:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.pk.pop{border-color:var(--emas);box-shadow:0 0 0 1px var(--emas) inset,var(--shadow)}
.pk .tag{position:absolute;top:-10px;left:18px;background:var(--emas);color:#20180a;
  font-size:.68rem;font-weight:900;padding:4px 10px;border-radius:999px;letter-spacing:.04em;
  font-family:var(--f-head);box-shadow:0 4px 10px -4px rgba(255,194,71,.7)}
.pk h3{margin:0 0 4px;font-size:.98rem;font-family:var(--f-head)}
.pk .hrg{font-size:1.7rem;font-weight:900;letter-spacing:-.03em;font-family:var(--f-head)}
.pk .hrg small{font-size:.8rem;font-weight:600;color:var(--lembut)}
.pk ul{margin:12px 0 16px;padding-left:18px;color:var(--lembut);font-size:.85rem}
.pk li{margin:5px 0}
.pk .btn{margin-top:auto}


/* ---------- skrin penjana ---------- */
.skrin{padding-bottom:60px}
.bar-jana{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:24px 0 16px}
.tajuk-jana{margin:0;font-size:1.3rem}
.sub-jana{margin:2px 0 0;color:var(--lembut);font-size:.85rem}
.susun{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.susun{grid-template-columns:1fr 1.15fr 1.15fr}}
.panel{background:var(--kad);border:1px solid var(--garis);border-radius:var(--rl);padding:16px}
.label{display:block;font-size:.8rem;font-weight:800;color:var(--lembut);
  margin:0 0 8px;letter-spacing:.02em;text-transform:uppercase}
.panel .label:not(:first-child){margin-top:18px}
.kira{color:var(--halus);font-weight:600;text-transform:none;letter-spacing:0}

.cip{display:flex;flex-wrap:wrap;gap:6px}
.cip button{font:inherit;font-size:.78rem;font-weight:600;padding:7px 11px;border-radius:999px;
  background:#0e1730;color:var(--lembut);border:1px solid var(--garis);cursor:pointer;min-height:34px}
.cip button[aria-pressed="true"]{background:var(--utama);border-color:var(--utama);color:#fff}

.senarai-kod{max-height:430px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  padding-right:4px;margin-top:2px}
.kod{text-align:left;font:inherit;background:#0e1730;border:1px solid var(--garis);
  border-radius:11px;padding:10px 12px;cursor:pointer;color:var(--teks)}
.kod:hover{border-color:#3a4a7a}
.kod[aria-pressed="true"]{border-color:var(--utama);background:#16224a}
.kod .n{font-weight:700;font-size:.86rem;display:block}
.kod .m{font-size:.72rem;color:var(--halus);display:block;margin-top:2px}
.kod .b{font-size:.66rem;font-weight:800;color:var(--emas);margin-left:6px}

.kosong{color:var(--halus);font-size:.88rem;text-align:center;padding:34px 10px}
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.f .nota{font-size:.71rem;color:var(--halus);margin:0;line-height:1.45}
.f select{font-size:.85rem;padding:10px 40px 10px 12px}
.pisah{border:0;border-top:1px solid var(--garis);margin:20px 0 16px}
.pil{display:flex;gap:6px;flex-wrap:wrap}
.pil button{font:inherit;font-size:.78rem;font-weight:600;padding:7px 12px;border-radius:999px;
  background:#0e1730;color:var(--lembut);border:1px solid var(--garis);cursor:pointer;min-height:34px}
.pil button[aria-pressed="true"]{background:var(--utama);border-color:var(--utama);color:#fff}
.bar-aksi{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bar-aksi .btn{flex:1;min-width:140px}
.cara{margin-top:16px;font-size:.85rem;color:var(--lembut)}
.cara summary{cursor:pointer;font-weight:700;color:var(--utama2);padding:6px 0}
.cara ol{margin:8px 0 0;padding-left:20px}
.cara li{margin:5px 0}
.cara em{color:var(--teks);font-style:normal;font-weight:600}

.kaki{border-top:1px solid var(--garis);padding:20px 0;color:var(--halus);font-size:.8rem}
.kaki .wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dot{opacity:.4}

/* ---------- MOD EXTEND (dua klip 8s + 8s) ---------- */
.kotak-extend{margin-top:14px;padding:13px 15px;border-radius:12px;
  background:linear-gradient(180deg,#101c38,#0c1428);border:1px solid #24406e}
.tajuk-extend{font-size:.85rem;font-weight:800;color:var(--utama2);margin-bottom:9px;
  display:flex;align-items:center;gap:7px}
.tajuk-extend::before{content:"⏱";font-size:.95rem}
.pengen-extend{margin:0 0 12px;font-size:.82rem;color:var(--lembut);line-height:1.6;
  padding-bottom:11px;border-bottom:1px solid #24406e}
.langkah-extend{margin:0;padding-left:20px;font-size:.83rem;color:var(--lembut);line-height:1.65}
.langkah-extend li{margin:7px 0}
.langkah-extend li strong{color:var(--emas)}

/* blok CONTOH — prompt mana pergi ke mana */
.contoh-extend{margin-top:13px;padding-top:12px;border-top:1px solid #24406e}
.tajuk-contoh{font-size:.75rem;font-weight:800;letter-spacing:.9px;color:var(--utama2);
  margin-bottom:9px}
.grid-contoh{display:grid;gap:9px}
@media(min-width:520px){.grid-contoh{grid-template-columns:1fr 1fr}}
.kad-contoh{border:1px solid #24406e;border-radius:10px;
  padding:10px 12px;background:rgba(255,255,255,.03)}
.nama-contoh{font-size:.8rem;font-weight:800;color:var(--emas);font-family:var(--f-head)}
.masa-contoh{font-size:.72rem;color:var(--halus);margin:2px 0 7px}
.guna-contoh{font-size:.79rem;font-weight:700;color:var(--teks);margin-bottom:3px}
.nota-contoh{font-size:.74rem;color:var(--lembut);line-height:1.5}

/* kesilapan biasa */
.salah-extend{margin-top:12px;padding:10px 12px;border-radius:10px;
  background:rgba(220,60,60,.09);border:1px solid rgba(220,60,60,.3)}
.tajuk-salah{font-size:.75rem;font-weight:800;letter-spacing:.7px;color:#ff8f8f;
  margin-bottom:7px}
.senarai-salah{margin:0;padding-left:19px;font-size:.78rem;color:var(--lembut);line-height:1.6}
.senarai-salah li{margin:4px 0}

.amaran-extend{margin:10px 0 0;padding:8px 11px;border-radius:9px;font-size:.79rem;line-height:1.5;
  background:rgba(255,183,0,.09);border:1px solid rgba(255,183,0,.32);color:#ffd479}
#kotakHasil2{margin-top:14px}
#notaAyat[data-ok="1"]{color:var(--hijau)}
#notaAyat[data-ok="0"]{color:#ffb700}

/* ---------- SKRIN PENDEK (telefon lama / landskap) ----------
   Sasaran: butang "Mula Cuba Percuma" mesti kelihatan TANPA skrol.
   Pada skrin ≤700px tinggi, rapatkan jarak atas supaya borang percuma naik
   ke lipatan. Video kekal sebagai pilihan (ditutup), cuma jaraknya dirapatkan. */
@media (max-height:700px){
  h1{font-size:1.6rem;margin:14px 0 8px}
  .prestij{display:none}
  .bawah{margin:0 0 12px;font-size:.92rem}
  .aman{margin:0 0 10px;gap:6px}
  .aman span{font-size:.68rem;padding:4px 9px}
  .video-kotak{margin:10px 0 12px}
}