/* =====================================================================
   MUHAZU — kawasan agent affiliate (pendaftaran + terma)
   Satu helaian untuk kedua-dua halaman. Teks terma dipaparkan pada BORANG,
   pada SALINAN selepas daftar, dan pada HALAMAN TERMA awam. Kalau gayanya
   hidup inline pada setiap satu, ketiga-tiganya akan terpesong dan salinan
   yang agent simpan tidak lagi kelihatan sama dengan yang mereka setujui.
   ===================================================================== */

:root{
  --ink:#1a1a1a; --muted:#6b6b6b; --line:#e6e6e6; --bg:#f7f7f8;
  --gold:#d4af37; --gold-dark:#b8860b; --blue:#0B57C4; --ok:#0f7b3d;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
     line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding:var(--s5) var(--s3) var(--s6)}
.wrap.wide{max-width:780px}
/* Logo jenama penuh, sama seperti admin. Tiada filter: huruf sudah pekat dan
   M sudah hijau limau. Menapisnya akan membunuh warna itu.
   44px di sini, bukan 38px seperti admin: halaman ini ada ruang dan logo
   berdiri sendiri tanpa teks tajuk di sebelahnya, jadi ia boleh bernafas.
   Pada 44px tagline terpapar 11px, selesa dibaca. */
.brand{display:flex;align-items:center;margin-bottom:var(--s5)}
.brand img{height:44px;width:auto}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;
      padding:var(--s5) var(--s4);box-shadow:0 1px 3px rgba(0,0,0,.04)}
h1{font-size:1.5rem;font-weight:700;margin:0 0 var(--s2);line-height:1.3}
.lede{color:var(--muted);font-size:.95rem;margin:0 0 var(--s5)}

/* ---- seksyen borang ---- */
.fs{border:none;margin:0 0 var(--s5);padding:0}
.fs:last-of-type{margin-bottom:var(--s3)}
.fs-head{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
         text-transform:uppercase;color:var(--muted);padding:0;margin:0 0 var(--s1)}
.fs-note{font-size:.82rem;color:var(--muted);margin:0 0 var(--s3);line-height:1.55}
.rule{height:1px;background:var(--line);margin:0 0 var(--s3)}

.field{margin-bottom:var(--s3)}
.field:last-child{margin-bottom:0}
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:var(--s1)}
.opt{font-weight:400;color:var(--muted)}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;background:#fff;color:var(--ink);transition:border-color .2s}
textarea{resize:vertical;min-height:78px;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
.hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.err{font-size:.8rem;color:#c0392b;margin-top:6px}
input.bad,select.bad,textarea.bad{border-color:#c0392b}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- terma ---- */
.terms-box{background:#fafafb;border:1px solid var(--line);border-radius:12px;
           padding:var(--s3);margin-bottom:var(--s2)}
/* Terma penuh boleh ditatal dalam borang. Memaparkan keseluruhannya sebaris
   menolak kotak persetujuan begitu jauh ke bawah sehingga ramai tidak sampai;
   menyembunyikannya di belakang pautan bermakna ramai tidak membacanya
   langsung. Kotak bertatal menunjukkan teks penuh dan mengekalkan kotak tanda
   dalam jangkauan. */
.terms-scroll{max-height:340px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.terms-scroll::-webkit-scrollbar{width:8px}
.terms-scroll::-webkit-scrollbar-thumb{background:#d8d8dc;border-radius:4px}
.terms-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
            flex-wrap:wrap;margin-bottom:var(--s2)}
.terms-title{font-size:.9rem;font-weight:700}
.terms-ver{font-size:.72rem;color:var(--muted);font-weight:500}

.tsec{margin-bottom:var(--s3)}
.tsec:last-child{margin-bottom:0}
.tsec h3{font-size:.86rem;font-weight:700;margin:0 0 var(--s1);line-height:1.4}
.tnote{font-size:.8rem;color:#7a5c00;background:#fff8e6;border:1px solid #f0dca8;
       border-radius:8px;padding:10px 12px;margin:0 0 10px;line-height:1.55}
.tlist{margin:0;padding-left:20px}
.tlist li{font-size:.83rem;line-height:1.6;margin-bottom:9px}
.tlist li:last-child{margin-bottom:0}
.tlist b{font-weight:700}

.agree{display:flex;align-items:flex-start;gap:11px;cursor:pointer;min-height:44px;padding-top:2px}
.agree input{width:19px;height:19px;margin:2px 0 0;flex:none;cursor:pointer;accent-color:var(--ok)}
.agree span{font-size:.88rem;font-weight:500;line-height:1.5}
.terms-link{font-size:.78rem;color:var(--blue);text-decoration:none;font-weight:600}
.terms-link:hover{text-decoration:underline}

button{width:100%;margin-top:var(--s2);padding:15px;border:none;border-radius:10px;
       background:linear-gradient(135deg,#d4af37 0%,#f4e06b 50%,#c9922a 100%);
       color:#1a1a1a;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
       transition:transform .2s,box-shadow .2s}
button:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(212,175,55,.35)}
.alert{background:#fdecea;border:1px solid #f5c6c2;color:#9b2c22;
       padding:var(--s2);border-radius:10px;font-size:.88rem;margin-bottom:var(--s3)}

/* ---- keadaan berjaya ---- */
.tick{width:52px;height:52px;border-radius:50%;background:#e8f5ee;color:var(--ok);
      display:flex;align-items:center;justify-content:center;font-size:1.6rem;
      margin:0 auto var(--s3)}
.ok-head{text-align:center;margin-bottom:var(--s5)}
.linkbox{background:#f4f8ff;border:1.5px solid #cfe0fb;border-radius:12px;
         padding:var(--s3);margin-bottom:var(--s3)}
.linklabel{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
           color:var(--blue);margin-bottom:var(--s1)}
.linkurl{font-size:.95rem;font-weight:600;word-break:break-all;line-height:1.5;margin-bottom:var(--s2)}
.copy{display:inline-block;width:auto;margin:0;padding:10px 20px;border-radius:8px;
      background:var(--blue);color:#fff;font-size:.85rem;font-weight:600;border:none;cursor:pointer}
.copy:hover{transform:none;box-shadow:none;background:#0a49a6}
.copy.ghost{background:#fff;color:var(--blue);border:1.5px solid #cfe0fb}
.copy.ghost:hover{background:#eef4ff}
.btnrow{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.todo{background:#fff8e6;border:1.5px solid #f0dca8;border-radius:12px;
      padding:var(--s3);margin-bottom:var(--s3)}
.todo-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
            color:#7a5c00;margin-bottom:6px}
.todo p{margin:0;font-size:.87rem;line-height:1.6}
.todo a{color:#7a5c00;font-weight:600}
.steps{margin:0;padding-left:20px}
.steps li{margin-bottom:var(--s2);font-size:.9rem}
.steps li:last-child{margin-bottom:0}
.note{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);
      padding-top:var(--s3);margin-top:var(--s4)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f0f0f2;
      padding:2px 7px;border-radius:5px;font-size:.88em}

/* ---- salinan terma yang disimpan agent ---- */
.receipt{border:1.5px solid var(--line);border-radius:12px;padding:var(--s3);
         margin-bottom:var(--s3);background:#fff}
.receipt-head{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
              color:var(--muted);margin-bottom:var(--s2)}
.receipt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
              gap:var(--s2);margin-bottom:var(--s3);padding-bottom:var(--s3);
              border-bottom:1px solid var(--line)}
.rk{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
    color:var(--muted);font-weight:600;margin-bottom:2px}
.rv{font-size:.88rem;font-weight:600;word-break:break-word}

@media (max-width:560px){
  .wrap{padding:var(--s4) var(--s2) var(--s5)}
  .card{padding:var(--s4) var(--s3);border-radius:14px}
  h1{font-size:1.28rem}
}

/* =====================================================================
   CETAK / SIMPAN PDF
   Agent menyimpan salinan terma dengan butang cetak pelayar. Tanpa peraturan
   ini, kertas keluar dengan butang, kotak tatal terpotong, dan latar kelabu
   yang membazir dakwat. "screen and" ditinggalkan dengan sengaja pada
   pertanyaan di atas supaya ia tidak menyala semasa cetakan.
   ===================================================================== */
@media print{
  body{background:#fff}
  .wrap{max-width:none;padding:0}
  .card{border:none;box-shadow:none;padding:0;border-radius:0}
  .noprint,button,.copy,.btnrow,.tick{display:none !important}
  /* Kotak tatal mesti dibuka penuh, jika tidak hanya skrin pertama dicetak. */
  .terms-scroll{max-height:none !important;overflow:visible !important}
  .terms-box,.receipt{border:1px solid #bbb;background:#fff}
  .tsec{break-inside:avoid;page-break-inside:avoid}
  .tsec h3{break-after:avoid;page-break-after:avoid}
  .tlist li{font-size:10pt;margin-bottom:5px}
  a[href]:after{content:""}
}

/* =====================================================================
   BLOK GANJARAN
   Panel gelap atas kad putih. Ia ditempatkan SEBELUM medan pertama dengan
   sengaja: meminta nombor IC dan akaun bank sebelum menyebut bayaran
   membuatkan program yang jujur terasa seperti skim.

   Peratus besar itu tidak pernah berdiri sendiri. Baris .reward-eq di
   bawahnya menyatakan maksudnya dalam sebutan sumbangan pelanggan, dalam
   blok yang sama dan dalam pandangan yang sama. Seseorang yang membaca "40%"
   akan menganggap 40% daripada jualan melainkan diberitahu sebaliknya, dan
   jurang tanggapan itu muncul semula pada hari bayaran pertama.
   ===================================================================== */
.reward{background:var(--ink);color:#fff;border-radius:14px;
        padding:var(--s4) var(--s3) var(--s3);margin:0 0 var(--s4);text-align:center}
.reward-upto{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
             color:rgba(255,255,255,.55);margin-bottom:-4px}
.reward-pct{font-size:3.4rem;font-weight:700;line-height:1;letter-spacing:-.03em;
            color:#ccf045;margin-bottom:var(--s2)}
.reward-lead{font-size:.95rem;line-height:1.55;margin-bottom:var(--s1);color:rgba(255,255,255,.88)}
.reward-lead b{color:#fff;font-weight:600}
.reward-eq{font-size:.95rem;line-height:1.55;margin-bottom:var(--s3);color:rgba(255,255,255,.88)}
.reward-eq b{color:#ccf045;font-weight:600}

.reward-rows{display:grid;gap:8px;margin-bottom:var(--s3);text-align:left}
.rrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
      background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
      border-radius:10px;padding:12px 15px}
.rr-k{font-size:.88rem;color:rgba(255,255,255,.75)}
.rr-v{font-size:1rem;font-weight:700;color:#fff;white-space:nowrap}

.reward-note{font-size:.79rem;line-height:1.6;color:rgba(255,255,255,.62);
             margin:0 0 var(--s3);text-align:left}
.reward-note b{color:rgba(255,255,255,.92);font-weight:600}
.reward-foot{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s2);
             font-size:.78rem;color:rgba(255,255,255,.55);
             display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.reward-foot .terms-link{color:#ccf045}

@media (max-width:560px){
  .reward{padding:var(--s3) var(--s2) var(--s2)}
  .reward-pct{font-size:2.8rem}
  .rrow{flex-direction:column;gap:2px;align-items:flex-start;padding:11px 13px;min-width:0}
  /* nowrap pada nilai memaksa lebar min-content, dan kerana .reward-rows ialah
     grid, SETIAP baris mengambil lebar baris terpanjang. Pada 320px baris
     rombongan menolak semuanya 8px melepasi bekas. Biarkan ia membalut. */
  .rr-v{white-space:normal}
}
/* Panel pekat penuh halaman membazir dakwat dan tidak memberi apa-apa di atas
   kertas. Balikkan kepada bingkai ringan semasa cetak. */
@media print{
  .reward{background:#fff;color:var(--ink);border:1px solid #bbb}
  .reward-pct{color:var(--ink)}
  .reward-lead,.reward-eq,.reward-note,.reward-foot{color:var(--ink)}
  .reward-eq b,.reward-foot .terms-link{color:var(--ink)}
  .rrow{background:#fff;border-color:#ccc}
  .rr-k,.rr-v{color:var(--ink)}
}

/* =====================================================================
   HALAMAN KADAR
   ===================================================================== */
.ksec{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--muted);margin:var(--s5) 0 var(--s2);padding-bottom:var(--s1);
      border-bottom:1px solid var(--line)}
.ktable{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-bottom:var(--s2)}
.ktable table{width:100%;border-collapse:collapse}
.ktable th,.ktable td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);
                      font-size:.88rem;white-space:nowrap}
.ktable th{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
           color:var(--muted);font-weight:600;background:#fbfbfc}
.ktable tbody tr:last-child td{border-bottom:none}
.kpct{font-weight:600}
.krm{font-weight:700}

/* Alamat halaman kadar, dicetak bersama setiap salinan terma. */
.tfoot{margin:var(--s3) 0 0;padding-top:var(--s2);border-top:1px solid var(--line);
       font-size:.8rem;color:var(--muted);line-height:1.6}
.tfoot b{color:var(--ink);font-weight:600;word-break:break-all}

/* Nama pengendali takaful dalam blok ganjaran. Tiga nama berlesen itu
   membuat kerja kredibiliti yang MUHAZU tidak perlu buat sendiri. */
.reward-co{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s2);
           margin-bottom:var(--s2);font-size:.8rem;line-height:1.6;
           color:rgba(255,255,255,.62)}
.reward-co b{color:#fff;font-weight:600}

/* Jemputan bertanya, diletak tepat sebelum medan pertama. Itu tempat orang
   teragak-agak, bukan selepas menghantar. */
.askline{font-size:.85rem;color:var(--muted);margin:0 0 var(--s4);
         padding:12px 15px;background:#f4f8ff;border:1px solid #cfe0fb;border-radius:10px}
.askline a{color:var(--blue);font-weight:600}

/* =====================================================================
   HALAMAN SEMAK-SENDIRI AGENT
   ===================================================================== */
.skpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      gap:var(--s2);margin-bottom:var(--s3)}
.skpi-box{border:1px solid var(--line);border-radius:12px;padding:var(--s3);background:#fff}
.skpi-hi{background:#f6fff6;border-color:#c5e8c5}
.skpi-k{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
        color:var(--muted);margin-bottom:6px}
.skpi-v{font-size:1.5rem;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.skpi-hi .skpi-v{color:var(--ok)}
.skpi-s{font-size:.76rem;color:var(--muted);margin-top:4px;line-height:1.45}

.sdate{color:var(--muted);font-size:.82rem}
.smuted{color:var(--muted)}
.ktable .sub{display:block;font-size:.74rem;color:var(--muted);font-weight:400;margin-top:1px}
.spill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:600;
       border:1px solid var(--line);background:#fbfbfc;color:var(--muted);white-space:nowrap}
.spill-ok{background:#e8f5ee;border-color:#b8dfc8;color:var(--ok)}

.empty-note{border:1px dashed var(--line);border-radius:12px;padding:var(--s4) var(--s3);
            text-align:center;color:var(--muted)}
.empty-note p{margin:0 0 6px;font-size:.9rem}
.empty-note .linkbox{text-align:left}


/* =====================================================================
   SEKSYEN SEO (bawah borang pendaftaran)
   Berada di luar .card supaya ia terbaca sebagai bahan rujukan, bukan
   sebahagian daripada borang. Orang yang datang untuk mendaftar sudah
   selesai sebelum sampai ke sini.
   ===================================================================== */
.seo{margin-top:var(--s5);color:var(--ink)}
.seo h2{font-size:1.1rem;font-weight:700;margin:var(--s5) 0 var(--s2);line-height:1.35}
.seo h2:first-child{margin-top:0}
.seo p{font-size:.92rem;margin:0 0 var(--s2)}
.seo-list,.seo-steps{font-size:.92rem;margin:0 0 var(--s2);padding-left:1.15rem}
.seo-list li,.seo-steps li{margin-bottom:10px}
.seo-list b{font-weight:600}

/* <details> memberi accordion tanpa satu baris JavaScript, dan kekal terbuka
   serta boleh dicari apabila JS gagal. Teks jawapan sentiasa ada dalam DOM,
   jadi Google membacanya walaupun ia tertutup pada skrin. */
.fq{border:1px solid var(--line);border-radius:12px;background:#fff;
    padding:14px var(--s2);margin-bottom:10px}
.fq summary{font-weight:600;font-size:.92rem;cursor:pointer;list-style:none;
            display:flex;justify-content:space-between;gap:var(--s2);align-items:flex-start}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";color:var(--muted);font-weight:400;flex-shrink:0;
                   font-size:1.15rem;line-height:1.2}
.fq[open] summary::after{content:"\2212"}
.fq p{font-size:.88rem;color:var(--muted);margin:12px 0 0}

.seo-cta{font-size:.92rem;margin-top:var(--s4)}
.seo-cta a{color:var(--blue);font-weight:600}

@media print{ .seo{display:none} }