/* Gaya untuk halaman pembelajaran bertahap (belajar.php, tonton.php).
   Token warna diselaraskan dengan index.html. */

:root{
  --blue-950:#003B73;
  --blue-900:#014F86;
  --blue-800:#0288D1;
  --blue-700:#039be5;
  --gold-600:#b67d24;
  --gold-500:#efb84a;
  --gold-300:#f6d78d;
  --cream-50:#ffffff;
  --cream-100:#eef0fb;
  --cream-200:#e0e3f8;
  --ink-900:#221a1c;
  --ink-700:#564a4d;
  --ink-500:#7c6f72;
  --white:#ffffff;
  --line:rgba(0,59,115,.12);
  --shadow-sm:0 8px 26px rgba(0,59,115,.07);
  --shadow-md:0 18px 50px rgba(0,59,115,.12);
  --radius-sm:14px;
  --radius-md:22px;
  --radius-lg:32px;
  --asas:#1a7f5a;
  --asas-bg:rgba(26,127,90,.1);
  --tengah:#b67d24;
  --tengah-bg:rgba(182,125,36,.12);
  --lanjut:#8a3d5f;
  --lanjut-bg:rgba(138,61,95,.1);

  /* Tinggi .site-header: .navbar 86px + sempadan bawah 3px. Apa-apa yang melekat
     di bawah header mesti bermula di sini, bukan pada 0. Di bawah 860px header
     membenarkan nav membalut dan tingginya berubah — lihat media query. */
  --tinggi-header:89px;
}

/* ---- Corak jalinan geometri Islami (sama seperti .geo-surface di index.html) ----
   Gradien mesti ditulis di sini, bukan disimpan dalam satu sifat tersuai di :root,
   kerana var() di dalam sifat tersuai diganti pada elemen ia diisytiharkan —
   --geo-garis yang ditetapkan pada elemen anak tidak akan sampai. Setiap elemen
   yang memakai corak ini cuma menala --geo-garis / --geo-saiz / --geo-lut / --geo-topeng. */
.tahap-hero::before,
.tahap-seterusnya::before,
.bahan-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(22.5deg,transparent 33%,var(--geo-garis) 33%,var(--geo-garis) 36%,transparent 36%,transparent 64%,var(--geo-garis) 64%,var(--geo-garis) 67%,transparent 67%),
    linear-gradient(-22.5deg,transparent 33%,var(--geo-garis) 33%,var(--geo-garis) 36%,transparent 36%,transparent 64%,var(--geo-garis) 64%,var(--geo-garis) 67%,transparent 67%),
    linear-gradient(112.5deg,transparent 33%,var(--geo-garis) 33%,var(--geo-garis) 36%,transparent 36%,transparent 64%,var(--geo-garis) 64%,var(--geo-garis) 67%,transparent 67%),
    linear-gradient(-112.5deg,transparent 33%,var(--geo-garis) 33%,var(--geo-garis) 36%,transparent 36%,transparent 64%,var(--geo-garis) 64%,var(--geo-garis) 67%,transparent 67%);
  background-size:var(--geo-saiz) var(--geo-saiz);
  opacity:var(--geo-lut);
  -webkit-mask-image:var(--geo-topeng);mask-image:var(--geo-topeng);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:'Manrope',Arial,sans-serif;background:var(--cream-50);color:var(--ink-900);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:'Amiri',Georgia,serif}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue-950);color:#fff;padding:var(--tfd-space-3) var(--tfd-space-4);border-radius:0 0 10px 0;font-weight:800}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}

/* ---- Kepala & kaki ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(250,250,253,.96);backdrop-filter:blur(16px);border-bottom:3px solid rgba(239,184,74,.62);box-shadow:0 14px 34px rgba(0,24,49,.08)}
.navbar{height:86px;display:flex;align-items:center;justify-content:space-between;gap:var(--tfd-space-6)}
.brand{display:flex;align-items:center;gap:var(--tfd-space-3);text-decoration:none;min-width:max-content}
.brand-logo{width:60px;height:60px;border-radius:50%;object-fit:contain;background:var(--blue-950);padding:var(--tfd-space-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.brand-copy b{display:block;font-family:'Amiri',serif;font-size:25px;line-height:1;color:#002d5d}
.nav-menu{display:flex;align-items:center;gap:var(--tfd-space-2);flex-wrap:wrap;justify-content:flex-end}
.nav-menu a{padding:var(--tfd-space-2);border-radius:var(--tfd-radius-sm);text-decoration:none;font-size:14px;font-weight:700;color:#2f353e;transition:.2s}
.nav-menu a:hover{color:var(--blue-800);background:rgba(2,136,209,.08)}
.nav-menu a[aria-current="page"]{color:var(--blue-800);background:rgba(2,136,209,.12)}
/* Togol hamburger untuk .nav-menu: tersembunyi pada desktop (menu muat dalam
   satu baris), didedahkan semula bawah 860px — lihat media query. Dua ikon
   SVG bertindan, ditukar oleh aria-expanded, bukan JS yang menyunting DOM. */
.nav-toggle{display:none;position:relative;flex:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--tfd-radius-sm);background:#fff;color:#002d5d;transition:.2s}
.nav-toggle:hover{border-color:var(--blue-800);background:rgba(2,136,209,.06)}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle-tutup{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-buka{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-tutup{display:block}
/* a.nav-cta (bukan .nav-cta sahaja): .nav-menu a{color:#2f353e} mempunyai
   kekhususan lebih tinggi (1 kelas + 1 jenis) daripada .nav-cta sahaja
   (1 kelas), jadi teks CTA jatuh balik kepada kelabu gelap tanpa "a." di sini —
   pepijat kontras sedia ada, bukan sesuatu yang baru pecah. */
a.nav-cta{margin-left:var(--tfd-space-2);background:#0063a5;color:var(--white);padding:var(--tfd-space-3) var(--tfd-space-6);border-radius:var(--tfd-radius-sm)}
a.nav-cta:hover{background:var(--blue-700);color:var(--white)}
/* Pengganti menu penuh dalam aliran belajar (tfd_head 'ringkas'). */
.nav-balik{display:inline-flex;align-items:center;gap:var(--tfd-space-2);padding:var(--tfd-space-3) var(--tfd-space-4);border-radius:var(--tfd-radius-sm);text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap;color:var(--blue-800);border:1px solid var(--line);background:var(--white);transition:.2s}
.nav-balik svg{width:18px;height:18px;flex:none;transition:transform .2s ease}
.nav-balik:hover{border-color:var(--blue-800);background:rgba(2,136,209,.06)}
.nav-balik:hover svg{transform:translateX(-3px)}
/* Butang dalam kepala ringkas duduk di luar .nav-menu, jadi peraturan
   text-decoration:none di sana tidak sampai — tanpa baris ini butang Sumbangan
   muncul bergaris bawah seperti pautan teks biasa. */
.nav-ringkas{display:flex;align-items:center;gap:var(--tfd-space-2);flex-wrap:wrap;justify-content:flex-end}
.nav-ringkas a{text-decoration:none}
.nav-ringkas .nav-cta{margin-left:0;display:inline-flex;align-items:center;min-height:48px}
.site-footer{margin-top:var(--tfd-space-10);background:var(--blue-950);color:rgba(255,255,255,.82);padding:var(--tfd-space-8) 0}
.footer-inner{display:flex;flex-wrap:wrap;gap:var(--tfd-space-6);justify-content:space-between;align-items:center}
.site-footer strong{font-family:'Amiri',serif;font-size:24px;color:#fff;display:block}
.site-footer p{font-size:14px;margin-top:var(--tfd-space-2);max-width:46ch}
.footer-nav{display:flex;flex-wrap:wrap;gap:var(--tfd-space-4)}
.footer-nav a{font-size:14px;font-weight:700;text-decoration:none;color:rgba(255,255,255,.82)}
.footer-nav a:hover{color:var(--gold-300)}

/* ---- Butang ---- */
.btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:var(--tfd-space-2);padding:0 var(--tfd-space-5);border-radius:var(--tfd-radius-md);border:1px solid transparent;text-decoration:none;font-size:15px;font-weight:800;transition:.25s ease}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--gold-500);color:var(--blue-950);box-shadow:0 10px 30px rgba(239,184,74,.24)}
.btn-primary:hover{transform:translateY(-2px);background:var(--gold-300)}
.btn-ghost{border-color:var(--line);color:var(--blue-800);background:var(--white)}
.btn-ghost:hover{border-color:var(--blue-800);background:rgba(2,136,209,.06)}
.btn-dark{background:var(--blue-950);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:var(--blue-900)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--tfd-space-2);font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600)}

/* ---- Lencana tahap ---- */
.lencana{display:inline-flex;align-items:center;gap:var(--tfd-space-2);padding:var(--tfd-space-1) var(--tfd-space-3);border-radius:999px;font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.tahap-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.lencana-asas{color:var(--asas);background:var(--asas-bg);border-color:rgba(26,127,90,.28)}
.lencana-pertengahan{color:var(--tengah);background:var(--tengah-bg);border-color:rgba(182,125,36,.3)}
.lencana-lanjutan{color:var(--lanjut);background:var(--lanjut-bg);border-color:rgba(138,61,95,.28)}
.lencana-kuliah-umum{color:#0b6ea8;background:rgba(2,136,209,.1);border-color:rgba(2,136,209,.28)}
a.lencana:hover{filter:brightness(.92)}

/* ---- Hero halaman tahap ---- */
.tahap-hero{background:linear-gradient(160deg,var(--blue-950),var(--blue-900) 65%,#0a6ba8);color:#fff;padding:var(--tfd-space-9) 0 var(--tfd-space-10);position:relative;overflow:hidden;
  --geo-garis:rgba(246,215,141,.26);--geo-saiz:300px;--geo-lut:.3;
  --geo-topeng:linear-gradient(to bottom,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.14) 76%,transparent 100%)}
.tahap-hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;top:-160px;background:rgba(239,184,74,.1)}
.tahap-hero .container{position:relative;z-index:1}
.jejak{display:flex;gap:var(--tfd-space-2);align-items:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.7);margin-bottom:var(--tfd-space-5);flex-wrap:wrap}
.jejak a{text-decoration:none}
.jejak a:hover{color:var(--gold-300)}
.tahap-hero h1{font-size:clamp(34px,5vw,52px);line-height:1.15;margin:var(--tfd-space-3) 0 var(--tfd-space-3)}
.tahap-hero .lead{font-size:17px;max-width:62ch;color:rgba(255,255,255,.88)}
.tahap-syarat{margin-top:var(--tfd-space-2);font-size:14px;color:rgba(255,255,255,.68);max-width:70ch}
.tahap-angka{display:flex;gap:var(--tfd-space-7);flex-wrap:wrap;margin-top:var(--tfd-space-6)}
.tahap-angka div{display:flex;flex-direction:column}
.tahap-angka div[hidden]{display:none} /* [hidden] kalah kepada display:flex di atas */
.tahap-angka strong{font-family:'Amiri',serif;font-size:34px;line-height:1;color:var(--gold-300)}
.tahap-angka span{font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:var(--tfd-space-2)}

/* ---- Penukar bidang ----
   Dulu peraturan ini dikongsi dengan .tukar-tahap. Penukar tahap sudah dibuang
   daripada halaman peta (nav atas sudah menyenaraikan semua peringkat), jadi
   pemilih ini berdiri sendiri sekarang. */
.tukar-bidang{display:flex;gap:var(--tfd-space-2);flex-wrap:wrap;margin-top:var(--tfd-space-6)}
.tukar-bidang a{display:inline-flex;align-items:center;gap:var(--tfd-space-2);padding:var(--tfd-space-2) var(--tfd-space-4);border-radius:999px;text-decoration:none;font-size:13.5px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:.2s}
.tukar-bidang a:hover{background:rgba(255,255,255,.18)}
.tukar-bidang a[aria-current="page"]{background:var(--gold-500);border-color:var(--gold-500);color:var(--blue-950)}
.tukar-bidang small{font-size:var(--tfd-text-caption);font-weight:800;opacity:.72;background:rgba(0,0,0,.14);border-radius:999px;padding:1px var(--tfd-space-2)}

/* ---- Kandungan laluan ---- */
.laluan{padding:var(--tfd-space-9) 0 var(--tfd-space-2)}
.bidang{margin-bottom:var(--tfd-space-9);scroll-margin-top:110px}
.bidang-head{display:flex;flex-wrap:wrap;gap:var(--tfd-space-3);align-items:baseline;justify-content:space-between;padding-bottom:var(--tfd-space-3);border-bottom:2px solid var(--line);margin-bottom:var(--tfd-space-6)}
.bidang-head h2{font-size:30px;color:var(--blue-950)}
.bidang-head p{font-size:14px;color:var(--ink-500);margin-top:var(--tfd-space-1);max-width:60ch}
.bidang-kira{font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);white-space:nowrap}

.mula-sini{background:linear-gradient(135deg,rgba(239,184,74,.14),rgba(2,136,209,.07));border:1px solid rgba(239,184,74,.4);border-radius:var(--radius-md);padding:var(--tfd-space-6);margin-bottom:var(--tfd-space-6)}
.mula-sini h3{font-size:21px;color:var(--blue-950);display:flex;align-items:center;gap:var(--tfd-space-2);flex-wrap:wrap}
.mula-sini > p{font-size:14px;color:var(--ink-700);margin:var(--tfd-space-2) 0 var(--tfd-space-4);max-width:70ch}
.mula-list{list-style:none;display:grid;gap:var(--tfd-space-2);counter-reset:m}
.mula-list li{counter-increment:m}
.mula-list a{display:flex;align-items:center;gap:var(--tfd-space-3);padding:var(--tfd-space-3) var(--tfd-space-4);background:var(--white);border:1px solid var(--line);border-radius:var(--tfd-radius-md);text-decoration:none;transition:.2s}
.mula-list a:hover{border-color:var(--gold-500);transform:translateX(4px)}
.mula-list a::before{content:counter(m);flex:none;width:30px;height:30px;border-radius:var(--tfd-radius-sm);display:grid;place-items:center;background:var(--blue-950);color:#fff;font-size:13px;font-weight:800}
.mula-list span{font-size:14px;font-weight:700;color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tajuk membawa nama kitab; <em> membawa pembezanya (bab, tempat, tahun) dan
   <i> membawa jenis kandungan bagi siri yang bukan berkitab. Nowrap dilepaskan
   di sini kerana baris kedua memang dibenarkan membalut. */
.mula-list .mula-tajuk{flex:1;min-width:0;white-space:normal;overflow:visible}
.mula-list .mula-tajuk em{display:block;font-style:normal;font-size:var(--tfd-text-caption);font-weight:400;color:var(--ink-500);margin-top:var(--tfd-space-1);line-height:1.45}
.mula-list .mula-tajuk i{display:inline-block;font-style:normal;font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-900);background:var(--cream-100);border:1px solid var(--line);border-radius:999px;padding:var(--tfd-space-1) var(--tfd-space-2);margin-top:var(--tfd-space-1);white-space:nowrap}
.mula-list small{flex:none;font-size:var(--tfd-text-caption);font-weight:700;color:var(--ink-500);white-space:nowrap}

.senarai-kitab{display:grid;gap:var(--tfd-space-4)}
.laluan-kad{display:grid;grid-template-columns:56px 220px 1fr auto;gap:var(--tfd-space-5);align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--tfd-space-4);transition:.22s ease}
.laluan-kad:hover{border-color:rgba(239,184,74,.55);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.laluan-urut{width:56px;height:56px;border-radius:var(--tfd-radius-lg);display:grid;place-items:center;background:var(--cream-100);color:var(--blue-950);font-family:'Amiri',serif;font-size:25px;border:1px solid var(--line)}
.laluan-kad:first-child .laluan-urut{background:var(--blue-950);color:var(--gold-300);border-color:var(--blue-950)}
.laluan-gambar{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--tfd-radius-md);overflow:hidden;background:var(--cream-100);border:0;padding:0;width:100%}
.laluan-gambar img{width:100%;height:100%;object-fit:cover}
.laluan-gambar .main{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,45,93,.32);opacity:0;transition:.2s}
.laluan-gambar:hover .main,.laluan-gambar:focus-visible .main{opacity:1}
.laluan-gambar .main span{width:46px;height:46px;border-radius:50%;background:var(--gold-500);display:grid;place-items:center}
.laluan-gambar .main svg{width:20px;height:20px;fill:var(--blue-950);margin-left:var(--tfd-space-1)}
.laluan-bil{position:absolute;left:8px;bottom:8px;background:rgba(0,26,52,.82);color:#fff;font-size:var(--tfd-text-caption);font-weight:800;padding:var(--tfd-space-1) var(--tfd-space-2);border-radius:var(--tfd-radius-xs)}
.laluan-isi h3{font-size:21px;line-height:1.28;color:var(--blue-800)}
.laluan-isi h3 a{text-decoration:none}
.laluan-isi h3 a:hover{color:var(--gold-600)}
.laluan-isi p{font-size:13.5px;color:var(--ink-500);margin-top:var(--tfd-space-2);max-width:64ch}
.laluan-meta{display:flex;gap:var(--tfd-space-2);flex-wrap:wrap;margin-top:var(--tfd-space-3);align-items:center}
.tanda{font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);background:var(--cream-100);border-radius:999px;padding:var(--tfd-space-1) var(--tfd-space-3)}
.laluan-aksi{display:flex;flex-direction:column;gap:var(--tfd-space-2);align-items:stretch;min-width:150px}
.laluan-aksi .btn{min-height:var(--tfd-control-height);font-size:13.5px;padding:0 var(--tfd-space-4)}

.tahap-seterusnya{position:relative;overflow:hidden;background:var(--cream-100);border-radius:var(--radius-md);padding:var(--tfd-space-7);text-align:center;margin:var(--tfd-space-2) 0 var(--tfd-space-5);
  --geo-garis:var(--blue-950);--geo-saiz:168px;--geo-lut:.09;
  --geo-topeng:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.4) 46%,transparent 88%)}
.tahap-seterusnya>*{position:relative;z-index:1}
.tahap-seterusnya h2{font-size:26px;color:var(--blue-950)}
.tahap-seterusnya p{font-size:15px;color:var(--ink-700);margin:var(--tfd-space-2) auto var(--tfd-space-5);max-width:60ch}

/* ---- Halaman tonton ---- */
.tonton-atas{background:var(--blue-950);padding:0 0 var(--tfd-space-1)}
.pemain-grid{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:0;align-items:stretch}
.pemain{position:relative;aspect-ratio:16/9;background:#000}
.pemain iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.episod-panel{background:#04294c;color:#fff;display:flex;flex-direction:column;max-height:min(78vh,720px)}
.episod-kepala{padding:var(--tfd-space-4) var(--tfd-space-4);border-bottom:1px solid rgba(255,255,255,.14)}
.episod-kepala strong{display:block;font-family:'Amiri',serif;font-size:19px;line-height:1.3}
.episod-kepala small{display:block;font-size:var(--tfd-text-caption);color:rgba(255,255,255,.62);margin-top:var(--tfd-space-1)}
.episod-senarai{list-style:none;overflow-y:auto;flex:1;padding:var(--tfd-space-2)}
.episod-senarai li{margin-bottom:var(--tfd-space-1)}
.episod-senarai a{display:grid;grid-template-columns:30px 1fr;gap:var(--tfd-space-3);align-items:start;padding:var(--tfd-space-2) var(--tfd-space-3);border-radius:var(--tfd-radius-sm);text-decoration:none;color:rgba(255,255,255,.86);font-size:13px;line-height:1.45;transition:.15s}
.episod-senarai a:hover{background:rgba(255,255,255,.09)}
.episod-senarai a[aria-current="true"]{background:var(--gold-500);color:var(--blue-950);font-weight:800}
.episod-num{font-size:var(--tfd-text-caption);font-weight:800;opacity:.7;padding-top:1px}
.episod-senarai a[aria-current="true"] .episod-num{opacity:1}

.tonton-badan{padding:var(--tfd-space-7) 0 0}
.tonton-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--tfd-space-8);align-items:start}
.tonton-tajuk{font-size:clamp(25px,3.4vw,34px);line-height:1.25;color:var(--blue-950)}
.tonton-meta{display:flex;gap:var(--tfd-space-2);flex-wrap:wrap;align-items:center;margin:var(--tfd-space-3) 0 var(--tfd-space-5)}
.tonton-huraian{font-size:15px;color:var(--ink-700);max-width:70ch;margin-top:var(--tfd-space-2)}
.tonton-huraian:first-of-type{margin-top:0}
.nav-video{display:flex;gap:var(--tfd-space-3);flex-wrap:wrap;margin:var(--tfd-space-8) 0 var(--tfd-space-2)}
.kotak-seterusnya{margin-top:var(--tfd-space-6);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--tfd-space-5);background:var(--white)}
.kotak-seterusnya .eyebrow{margin-bottom:var(--tfd-space-2)}
.kotak-seterusnya h3{font-size:21px;color:var(--blue-800)}
.kotak-seterusnya h3 a{text-decoration:none}
.kotak-seterusnya h3 a:hover{color:var(--gold-600)}
.kotak-seterusnya p{font-size:14px;color:var(--ink-500);margin:var(--tfd-space-2) 0 var(--tfd-space-4)}
/* Ganjaran ekstra sebelum ajakan channel WhatsApp — khusus halaman tonton
   supaya ia terasa spt bahagian sokongan berasingan, bukan sambungan terus
   drpd navigasi episod. .wa-channel dikongsi dgn siri.php/belajar-*.php,
   jadi margin asasnya (assets/tfd-pages.css, seksyen wa-channel) tak diubah. */
.tonton-badan .wa-channel{margin-top:var(--tfd-space-9)}

.sisi h2{font-size:19px;color:var(--blue-950);margin-bottom:var(--tfd-space-3);padding-bottom:var(--tfd-space-2);border-bottom:2px solid var(--line)}
.sisi-kad{margin-bottom:var(--tfd-space-6);padding:0 0 var(--tfd-space-4);border-bottom:1px solid var(--line)}
.sisi-kad h3{font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-600);margin-bottom:var(--tfd-space-2)}
.sisi-syarat{font-size:13.5px;color:var(--ink-700);line-height:1.5}
.sisi-siri{font-size:14.5px;font-weight:700;color:var(--blue-950);margin-top:var(--tfd-space-3)}
.sisi-siri small{display:block;font-size:var(--tfd-text-caption);font-weight:600;color:var(--ink-500);margin-top:var(--tfd-space-1)}
.sisi-taut{display:block;font-size:13.5px;font-weight:700;color:var(--blue-800);text-decoration:none;margin-top:var(--tfd-space-2)}
.sisi-taut:hover{color:var(--gold-600)}
.berkaitan{list-style:none;display:grid;gap:var(--tfd-space-2)}
.berkaitan a{display:grid;grid-template-columns:64px 1fr;gap:var(--tfd-space-3);align-items:center;text-decoration:none;padding:var(--tfd-space-2);border-radius:var(--tfd-radius-md);transition:.18s}
.berkaitan a:hover{background:var(--cream-100)}
.berkaitan img{width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--tfd-radius-xs)}
.berkaitan b{display:block;font-size:13.5px;font-weight:700;color:var(--ink-900);line-height:1.35}
.berkaitan small{display:block;font-size:var(--tfd-text-caption);color:var(--ink-500);margin-top:var(--tfd-space-1)}

/* Fasa 2 — modul kompak "Buku Berkaitan Pengajian Ini" (siri.php/tonton.php)
   dan "Pengajian Berkaitan" (buku.php). Sengaja kecil/sekunder: tidak pernah
   bersaing dengan pemain video atau CTA LIVE/Sertai. */
.buku-mini-kad{display:grid;grid-template-columns:64px 1fr auto;gap:var(--tfd-space-3);align-items:center;text-decoration:none;padding:var(--tfd-space-3);border-radius:var(--tfd-radius-md);border:1px solid var(--line);background:var(--cream-50,#fbf7ee);transition:.18s}
.buku-mini-kad:hover{border-color:var(--gold-500,#c9a227);background:var(--cream-100)}
.buku-mini-kulit{width:64px;height:90px;border-radius:var(--tfd-radius-xs);overflow:hidden;background:#0b3f2e;flex:none;display:flex;align-items:center;justify-content:center}
.buku-mini-kulit img{width:100%;height:100%;object-fit:cover}
.buku-mini-teks{min-width:0;display:flex;flex-direction:column;gap:2px}
.buku-mini-teks strong{font-size:15px;color:var(--ink-900);line-height:1.3}
.buku-mini-teks small{font-size:12.5px;color:var(--ink-500);line-height:1.4}
.buku-mini-teks b{font-size:15px;color:var(--blue-800);margin-top:2px}
.buku-mini-cta{white-space:nowrap;pointer-events:none}
.buku-mini-kad:focus-visible{outline:3px solid var(--tfd-blue-strong,#0057b8);outline-offset:2px}
@media(max-width:520px){.buku-mini-kad{grid-template-columns:56px 1fr;grid-template-areas:"kulit teks" "kulit cta"}.buku-mini-kulit{grid-area:kulit;width:56px;height:78px}.buku-mini-teks{grid-area:teks}.buku-mini-cta{grid-area:cta;justify-self:start;margin-top:var(--tfd-space-2)}}

.kosong{border:1px dashed var(--line);border-radius:var(--radius-md);padding:var(--tfd-space-8);text-align:center;color:var(--ink-500)}
.kosong strong{display:block;font-family:'Amiri',serif;font-size:23px;color:var(--blue-950);margin-bottom:var(--tfd-space-2)}

/* ---- Peta laluan: pilih bidang ---- */
.peta{padding:var(--tfd-space-9) 0 var(--tfd-space-2)}
.peta-kepala{font-size:30px;color:var(--blue-950);margin-bottom:var(--tfd-space-6)}

/* Satu lajur: setiap bidang boleh dikembangkan untuk menunjukkan senarai
   kitabnya, jadi grid berbilang lajur akan jadi tidak sekata apabila dibuka. */
.peta-grid{display:grid;grid-template-columns:1fr;gap:var(--tfd-space-3);margin-bottom:var(--tfd-space-8)}
.peta-kad{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;transition:border-color .24s ease,box-shadow .24s ease}
.peta-kad::before{content:"";position:absolute;z-index:2;inset:0 0 auto;height:4px;background:var(--cream-200);transition:.24s ease}
.peta-kad:hover{border-color:rgba(239,184,74,.55);box-shadow:var(--shadow-sm)}
.peta-kad[open]{border-color:rgba(239,184,74,.45);box-shadow:var(--shadow-sm)}
.peta-kad[open]::before,.peta-kad:hover::before{background:var(--gold-500)}

.peta-ringkas{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--tfd-space-4);align-items:center;padding:var(--tfd-space-5) var(--tfd-space-9) var(--tfd-space-5) var(--tfd-space-5);cursor:pointer;list-style:none}
.peta-ringkas::-webkit-details-marker{display:none}
/* Caret sendiri di hujung kanan; ia berputar apabila bahagian dibuka. */
.peta-ringkas::after{content:"";position:absolute;right:24px;top:50%;width:0;height:0;border-left:7px solid var(--ink-500);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;transform:translateY(-50%);transition:transform .2s ease}
.peta-kad[open] .peta-ringkas::after{transform:translateY(-50%) rotate(90deg)}
.peta-ringkas:hover::after{border-left-color:var(--gold-600)}
.peta-kad:focus-within .peta-ringkas{outline:3px solid var(--gold-500);outline-offset:-3px;border-radius:var(--radius-md)}

.peta-num{display:grid;place-items:center;min-width:40px;height:40px;padding:0 var(--tfd-space-2);border-radius:var(--tfd-radius-md);background:var(--cream-100);color:var(--blue-950);font-family:'Amiri',serif;font-size:18px;line-height:1;transition:.24s ease}
.peta-kad[open] .peta-num,.peta-kad:hover .peta-num{background:var(--blue-950);color:var(--gold-300)}
.peta-kad.berjalan .peta-num{background:var(--gold-500);color:var(--blue-950)}
.peta-kad.selesai .peta-num{background:var(--asas);color:#fff}
.peta-tajuk{display:block;min-width:0}
.peta-tajuk b{display:block;font-family:'Amiri',serif;font-size:23px;line-height:1.2;color:var(--blue-950)}
.peta-tajuk small{display:block;font-size:13.5px;color:var(--ink-500);margin-top:var(--tfd-space-1);line-height:1.6}
.peta-kira{display:block;font-size:13px;font-weight:700;color:var(--ink-500);white-space:nowrap}
.peta-progres{grid-column:1/-1;display:block;height:8px;border-radius:999px;background:var(--cream-100);overflow:hidden}
.peta-progres[hidden]{display:none} /* [hidden] kalah kepada display:block di atas */
.peta-progres i{display:block;width:100%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transform:scaleX(0);transform-origin:left center;transition:transform .5s ease}
.peta-status{grid-column:1/-1;font-size:var(--tfd-text-caption);font-weight:800;color:var(--ink-500)}
.peta-status:empty{display:none}

.peta-isi{position:relative;z-index:1;padding:0 var(--tfd-space-5) var(--tfd-space-5);border-top:1px solid var(--line);margin-top:-1px}
.peta-isi .mula-list{margin-top:var(--tfd-space-4);max-height:none}
/* Tajuk mengambil ruang lebihan supaya ia rapat ke nombor, dan kiraan video
   ditolak ke hujung kanan. */
.peta-isi .mula-list span{flex:1}
.peta-isi .mula-list small{flex:none;font-size:var(--tfd-text-caption);font-weight:700;color:var(--ink-500);white-space:nowrap}
.mula-mati{display:flex;align-items:center;gap:var(--tfd-space-3);padding:var(--tfd-space-3) var(--tfd-space-4);border:1px dashed var(--line);border-radius:var(--tfd-radius-md);font-size:14px;color:var(--ink-500)}
.peta-pergi-pautan{display:inline-block;margin-top:var(--tfd-space-4);text-decoration:none}
.peta-pergi{display:inline-flex;align-items:center;gap:var(--tfd-space-2);font-size:13.5px;font-weight:800;color:var(--gold-600);white-space:nowrap}
.peta-pergi svg{width:17px;height:17px;transition:.24s ease}
.peta-pergi-pautan:hover .peta-pergi svg{transform:translateX(4px)}

.peta-kad.berjalan{border-color:rgba(239,184,74,.5)}
.peta-kad.berjalan::before{background:var(--gold-500)}
.peta-kad.berjalan .peta-status{color:var(--gold-600)}
.peta-kad.selesai::before{background:var(--asas)}
.peta-kad.selesai .peta-progres i{background:var(--asas)}
.peta-kad.selesai .peta-status{color:var(--asas)}

/* ---- Hero laluan satu bidang ---- */
.laluan-hero h1{margin:var(--tfd-space-2) 0 var(--tfd-space-3)}
.laluan-progres{display:flex;align-items:center;gap:var(--tfd-space-3);margin-top:var(--tfd-space-5);max-width:620px;flex-wrap:wrap}
.laluan-progres[hidden]{display:none} /* [hidden] kalah kepada display:flex di atas */
.laluan-progres-bar{flex:1 1 240px;height:10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.laluan-progres-bar i{display:block;width:100%;height:100%;border-radius:999px;background:var(--gold-500);transform:scaleX(0);transform-origin:left center;transition:transform .5s ease}
.laluan-progres span{font-size:13px;font-weight:800;color:var(--gold-300)}

/* ---- Jalan berperingkat ---- */
.jalan{list-style:none;display:grid;gap:var(--tfd-space-5);margin:0 0 var(--tfd-space-8)}
.simpul{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--tfd-space-5);align-items:start}
.simpul::before{content:"";position:absolute;left:31px;top:72px;bottom:-22px;width:2px;background:var(--cream-200)}
.simpul:last-child::before{display:none}
.simpul-tanda{position:relative;z-index:1;width:64px;height:64px;border-radius:var(--tfd-radius-lg);display:grid;place-items:center;background:var(--cream-100);border:2px solid var(--line);color:var(--blue-950);font-family:'Amiri',serif;font-size:26px;line-height:1}
.simpul.berjalan .simpul-tanda{background:var(--gold-500);border-color:var(--gold-500)}
.simpul.selesai .simpul-tanda{background:var(--asas);border-color:var(--asas);color:#fff}
.simpul.selesai .simpul-tanda span{display:none}
.simpul.selesai .simpul-tanda::after{content:"✓";font-size:27px;font-weight:700}
.simpul.selesai::before{background:var(--asas)}

.simpul-kad{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--tfd-space-4);transition:.22s ease}
.simpul-kad:hover{border-color:rgba(239,184,74,.55);box-shadow:var(--shadow-sm)}
.simpul.berjalan .simpul-kad{border-color:rgba(239,184,74,.45)}
.simpul.selesai .simpul-kad{border-color:rgba(26,127,90,.32)}
.simpul-atas{display:grid;grid-template-columns:212px minmax(0,1fr) auto;gap:var(--tfd-space-5);align-items:center}
.simpul-gambar{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--tfd-radius-md);overflow:hidden;background:var(--cream-100);width:100%}
.simpul-gambar img{width:100%;height:100%;object-fit:cover}
.simpul-gambar .main{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,45,93,.32);opacity:0;transition:.2s}
.simpul-gambar:hover .main,.simpul-gambar:focus-visible .main{opacity:1}
.simpul-gambar .main span{width:46px;height:46px;border-radius:50%;background:var(--gold-500);display:grid;place-items:center}
.simpul-gambar .main svg{width:20px;height:20px;fill:var(--blue-950);margin-left:var(--tfd-space-1)}
.simpul-isi h3{font-size:21px;line-height:1.28;color:var(--blue-800)}
.simpul-isi h3 a{text-decoration:none}
.simpul-isi h3 a:hover{color:var(--gold-600)}
.simpul-isi p{font-size:13.5px;color:var(--ink-500);margin-top:var(--tfd-space-2);max-width:64ch}
.simpul-aksi{display:flex;flex-direction:column;gap:var(--tfd-space-2);min-width:158px}
.simpul-aksi .btn{min-height:var(--tfd-control-height);font-size:13.5px;padding:0 var(--tfd-space-4)}
.simpul-progres{margin-top:var(--tfd-space-3);max-width:420px}
.simpul-bar{height:7px;border-radius:999px;background:var(--cream-100);overflow:hidden}
.simpul-bar i{display:block;width:100%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transform:scaleX(0);transform-origin:left center;transition:transform .5s ease}
.simpul.selesai .simpul-bar i{background:var(--asas)}
.simpul-progres small{display:block;font-size:var(--tfd-text-caption);font-weight:700;color:var(--ink-500);margin-top:var(--tfd-space-2)}

.simpul-eps{margin-top:var(--tfd-space-4);border-top:1px solid var(--line);padding-top:var(--tfd-space-3)}
.simpul-eps summary{cursor:pointer;font-size:13px;font-weight:800;color:var(--blue-800);list-style:none;display:flex;align-items:center;gap:var(--tfd-space-2)}
.simpul-eps summary::-webkit-details-marker{display:none}
.simpul-eps summary::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;transition:transform .2s ease}
.simpul-eps[open] summary::before{transform:rotate(90deg)}
.simpul-eps .mula-list{margin-top:var(--tfd-space-3);max-height:360px;overflow-y:auto;padding-right:var(--tfd-space-2);scrollbar-width:thin}
.simpul-eps .mula-list a.sudah{border-color:rgba(26,127,90,.35);background:var(--asas-bg)}
.simpul-eps .mula-list a.sudah::before{background:var(--asas);content:"✓"}
.simpul-lagi{display:inline-block;margin-top:var(--tfd-space-3);font-size:13px;font-weight:800;color:var(--gold-600);text-decoration:none}
.simpul-lagi:hover{text-decoration:underline}
.kosong-gambar{background:var(--cream-100);border:1px dashed var(--line)}

.episod-senarai a.sudah span:last-child{opacity:.62}
.episod-senarai a.sudah .episod-num{background:var(--asas);color:#fff;font-size:0}
.episod-senarai a.sudah .episod-num::after{content:"✓";font-size:var(--tfd-text-caption)}

/* ---- Bahan pengajian yang dilampirkan pada video / siri / bidang ---- */
.bahan-panel{position:relative;overflow:hidden;background:var(--cream-100);border-radius:var(--radius-md);padding:var(--tfd-space-6);margin:var(--tfd-space-7) 0;
  --geo-garis:var(--blue-950);--geo-saiz:132px;--geo-lut:.09;
  --geo-topeng:linear-gradient(215deg,#000 0%,rgba(0,0,0,.42) 40%,transparent 76%)}
.bahan-panel>*{position:relative;z-index:1}
.bahan-kepala{display:flex;flex-wrap:wrap;gap:var(--tfd-space-3);align-items:flex-end;justify-content:space-between;margin-bottom:var(--tfd-space-4)}
.bahan-kepala h2{font-size:24px;color:var(--blue-950);margin-top:var(--tfd-space-2)}
.bahan-list{display:grid;gap:var(--tfd-space-3)}
.bahan-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--tfd-space-4);align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--tfd-space-4)}
.bahan-ikon{width:56px;height:56px;border-radius:var(--tfd-radius-lg);display:grid;place-items:center;background:var(--blue-950);color:var(--gold-300);font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.06em}
.bahan-item h3{font-size:18px;color:var(--blue-950);line-height:1.3}
.bahan-item p{font-size:13px;color:var(--ink-500);margin-top:var(--tfd-space-1);max-width:62ch}
.bahan-meta{display:flex;gap:var(--tfd-space-2);flex-wrap:wrap;margin-top:var(--tfd-space-2)}
.tanda-skop{color:var(--gold-600);background:rgba(239,184,74,.16)}
.bahan-aksi{display:flex;gap:var(--tfd-space-2);flex-wrap:wrap}
.bahan-aksi .btn{min-height:var(--tfd-control-height);font-size:13px;padding:0 var(--tfd-space-4)}

/* ---- Ajakan Channel WhatsApp ---- */
.wa-channel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--tfd-space-6);align-items:center;
  background:var(--blue-950);color:#fff;border-radius:var(--radius-md);padding:var(--tfd-space-7) var(--tfd-space-7);margin:var(--tfd-space-2) 0 var(--tfd-space-7);
  --geo-garis:rgba(246,215,141,.24);--geo-saiz:150px;--geo-lut:.5;
  --geo-topeng:linear-gradient(215deg,#000 0%,rgba(0,0,0,.4) 40%,transparent 74%)}
.wa-channel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(22.5deg,transparent 33%,var(--geo-garis) 33%,var(--geo-garis) 36%,transparent 36%,transparent 64%,var(--geo-garis) 64%,var(--geo-garis) 67%,transparent 67%),
    linear-gradient(-22.5deg,transparent 33%,var(--geo-garis) 33%,var(--geo-garis) 36%,transparent 36%,transparent 64%,var(--geo-garis) 64%,var(--geo-garis) 67%,transparent 67%),
    linear-gradient(112.5deg,transparent 33%,var(--geo-garis) 33%,var(--geo-garis) 36%,transparent 36%,transparent 64%,var(--geo-garis) 64%,var(--geo-garis) 67%,transparent 67%),
    linear-gradient(-112.5deg,transparent 33%,var(--geo-garis) 33%,var(--geo-garis) 36%,transparent 36%,transparent 64%,var(--geo-garis) 64%,var(--geo-garis) 67%,transparent 67%);
  background-size:var(--geo-saiz) var(--geo-saiz);opacity:var(--geo-lut);
  -webkit-mask-image:var(--geo-topeng);mask-image:var(--geo-topeng)}
.wa-channel>*{position:relative;z-index:1}
.wa-isi .eyebrow{color:var(--gold-300)}
.wa-isi h2{font-size:26px;line-height:1.25;margin-top:var(--tfd-space-2)}
.wa-isi p{font-size:14.5px;color:rgba(255,255,255,.8);margin-top:var(--tfd-space-2);max-width:56ch}
.wa-aksi{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tfd-space-2)}
.wa-aksi small{font-size:var(--tfd-text-caption);color:rgba(255,255,255,.6)}
/* Hijau ini lebih gelap daripada #25d366 jenama WhatsApp kerana teks butang
   putih. Putih atas #25d366 hanya 2.0:1 — gagal 4.5:1 dan hampir hilang di
   bawah cahaya matahari, iaitu keadaan sebenar orang menekan butang kongsi.
   Pada #157f3c ia 5.15:1 dan masih dikenali sebagai hijau WhatsApp. */
.btn-wa{background:#157f3c;color:#fff;white-space:nowrap}
/* Fasa 3 — satu tindakan utama setiap skrin.
   .btn-aksi ialah SATU-SATUNYA butang terisi penuh yang dibenarkan pada hero;
   ia memakai --tfd-blue kanonikal (tfd-system.css dimuat pada halaman ini).
   .btn-primary kekal emas untuk kegunaan sedia ada, tetapi emas dikhaskan
   untuk sijil, kitab dan pencapaian - bukan tindakan (DESIGN.md).
   .btn-atas-gelap ialah sekunder di atas latar navy, kerana .btn-ghost yang
   berlatar putih akan menonjol LEBIH daripada butang utama di sana. */
.btn-aksi{background:var(--tfd-blue);color:#fff;box-shadow:0 10px 30px rgba(59,130,246,.24)}
.btn-aksi:hover{background:var(--tfd-blue-strong)}
.btn-atas-gelap{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32);color:#fff}
.btn-atas-gelap:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
/* Tindakan ketiga: lebih senyap daripada .btn-atas-gelap supaya dua tindakan
   sekunder tidak kelihatan setara. Tinggi .btn (52px) dikekalkan supaya
   sasaran sentuh Fasa 2 tidak berundur. */
.btn-teks{background:transparent;border-color:transparent;color:rgba(255,255,255,.78);padding-inline:var(--tfd-space-3)}
.btn-teks:hover{color:#fff;text-decoration:underline}
.btn-wa:hover{background:#189044;transform:translateY(-2px)}
.btn-wa svg{width:20px;height:20px}
.wa-tunggu{display:inline-flex;align-items:center;padding:var(--tfd-space-3) var(--tfd-space-5);border-radius:var(--tfd-radius-md);font-size:13.5px;font-weight:700;
  color:rgba(255,255,255,.78);background:rgba(255,255,255,.09);border:1px dashed rgba(255,255,255,.28)}

/* ---- Responsif ---- */
@media (max-width:1080px){
  .pemain-grid{grid-template-columns:1fr}
  .episod-panel{max-height:420px}
  .tonton-grid{grid-template-columns:1fr;gap:var(--tfd-space-7)}
  .laluan-kad{grid-template-columns:48px 180px 1fr;grid-template-areas:"urut gambar isi" "aksi aksi aksi"}
  .laluan-urut{grid-area:urut}
  .laluan-gambar{grid-area:gambar}
  .laluan-isi{grid-area:isi}
  .laluan-aksi{grid-area:aksi;flex-direction:row;flex-wrap:wrap}
  .laluan-aksi .btn{flex:1 1 auto}
  .simpul-atas{grid-template-columns:180px minmax(0,1fr);grid-template-areas:"gambar isi" "aksi aksi"}
  .simpul-gambar{grid-area:gambar}
  .simpul-isi{grid-area:isi}
  .simpul-aksi{grid-area:aksi;flex-direction:row;flex-wrap:wrap}
  .simpul-aksi .btn{flex:1 1 auto}
}
@media (max-width:860px){
  .navbar{height:auto;padding:var(--tfd-space-3) 0;flex-wrap:wrap;gap:var(--tfd-space-3)}
  /* min-width:max-content menghalang jenama mengecut dan menolak halaman lebih
     lebar daripada viewport — pada skrin sempit ia mesti dilepaskan. */
  .brand{min-width:0}
  .brand-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand-logo{width:46px;height:46px}
  .brand-copy b{font-size:18px}
  .nav-balik{padding:var(--tfd-space-2) var(--tfd-space-3);font-size:13px;gap:var(--tfd-space-2)}

  /* ---- Menu penuh (.nav-menu) -> hamburger ----
     Dulu .nav-menu diberi width:100% dan dibiarkan membalut dalam .navbar —
     pada lebar tablet/telefon sederhana ia pecah kepada 2-3 baris bertindih
     dengan jenama. Kini ia keluar terus daripada aliran flex .navbar
     (position:absolute) dan hanya kelihatan sebagai panel penuh lebar di
     bawah kepala bila togol dibuka; brand + .nav-toggle kekal satu baris. */
  .nav-toggle{display:inline-flex}
  .nav-menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;width:auto;gap:2px;
    padding:var(--tfd-space-3) var(--tfd-space-4) var(--tfd-space-4);
    background:#fff;border-bottom:3px solid rgba(239,184,74,.62);
    box-shadow:0 14px 34px rgba(0,24,49,.1);
  }
  .nav-menu.is-open{display:flex}
  .nav-menu a{font-size:15px;padding:var(--tfd-space-3) var(--tfd-space-3);border-radius:var(--tfd-radius-sm)}
  .nav-cta{margin:var(--tfd-space-2) 0 0;padding:var(--tfd-space-3) var(--tfd-space-4);text-align:center}
}
@media (max-width:420px){
  /* Pada telefon paling sempit, butang kembali jadi ikon sahaja supaya header
     kekal satu baris. Label kekal untuk pembaca skrin melalui aria-label. */
  .nav-balik span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .nav-balik{padding:var(--tfd-space-2);gap:0}
}
@media (max-width:560px){
  /* column-reverse menjadikan "Episod seterusnya" (anak kedua dlm DOM)
     muncul di atas secara visual bila bertindan menegak, tanpa menukar
     turutan HTML/PHP butang sebelumnya/seterusnya. */
  .nav-video{flex-direction:column-reverse}
  .nav-video .btn{width:100%;justify-content:center}
}
@media (max-width:680px){
  .container{width:min(1180px,calc(100% - 28px))}
  .laluan-kad{grid-template-columns:44px 1fr;grid-template-areas:"urut isi" "gambar gambar" "aksi aksi";gap:var(--tfd-space-3)}
  .laluan-urut{width:44px;height:44px;font-size:20px;border-radius:var(--tfd-radius-md)}
  .tahap-hero{padding:var(--tfd-space-7) 0 var(--tfd-space-8)}
  .tahap-angka{gap:var(--tfd-space-5)}
  .bidang-head h2{font-size:25px}
  .laluan-aksi{flex-direction:column}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .peta-grid{grid-template-columns:1fr;gap:var(--tfd-space-3)}
  .peta-kad{padding:var(--tfd-space-5) var(--tfd-space-5) var(--tfd-space-4)}
  .peta-num{font-size:44px;top:10px;right:16px}
  .peta-tajuk{padding-right:var(--tfd-space-9)}
  .peta-kepala{font-size:25px}
  .simpul{grid-template-columns:46px minmax(0,1fr);gap:var(--tfd-space-3)}
  .simpul::before{left:22px;top:54px}
  .simpul-tanda{width:46px;height:46px;border-radius:var(--tfd-radius-md);font-size:20px}
  .simpul.selesai .simpul-tanda::after{font-size:21px}
  .simpul-kad{padding:var(--tfd-space-3)}
  .simpul-atas{grid-template-columns:1fr;grid-template-areas:"isi" "gambar" "aksi";gap:var(--tfd-space-3)}
  .simpul-aksi{flex-direction:column}
  .wa-channel{grid-template-columns:1fr;gap:var(--tfd-space-4);padding:var(--tfd-space-6) var(--tfd-space-5)}
  .wa-isi h2{font-size:22px}
  .wa-aksi{align-items:stretch}
  .wa-aksi .btn,.wa-tunggu{justify-content:center;text-align:center}
  .bahan-panel{padding:var(--tfd-space-5)}
  .bahan-item{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ikon isi" "aksi aksi"}
  .bahan-ikon{grid-area:ikon;width:44px;height:44px;border-radius:var(--tfd-radius-md);font-size:var(--tfd-text-caption)}
  .bahan-item > div:not(.bahan-aksi){grid-area:isi}
  .bahan-aksi{grid-area:aksi}
  .bahan-aksi .btn{flex:1 1 auto}
}
/* ================================================================== */
/* Tanya Ustaz                                                        */
/* ================================================================== */

/* Emas laman (--gold-600) hanya mencapai 3.2:1 di atas serpihan emas lut,
   di bawah 4.5:1 yang diperlukan teks kecil. Nada yang lebih gelap ini
   membaca 4.9:1 dan dipakai untuk setiap teks emas atas latar terang. */
:root{ --gold-800:#8a6412; --gold-lut:rgba(239,184,74,.18) }

.tanya-hero{
  background:linear-gradient(165deg,var(--blue-950) 0%,var(--blue-900) 55%,var(--blue-800) 145%);
  color:#fff;padding:var(--tfd-space-7) 0 var(--tfd-space-8)}
.tanya-hero h1{
  font-family:'Amiri',Georgia,serif;font-weight:700;
  font-size:clamp(28px,4.4vw,44px);line-height:1.15;letter-spacing:-.01em;
  margin-top:var(--tfd-space-3);max-width:18ch;text-wrap:balance
}
.tanya-hero p{margin-top:var(--tfd-space-3);font-size:15px;line-height:1.65;color:#bfd9ee;max-width:52ch}

/* Bar melekat. Kabur di sini bukan hiasan: kandungan menatal betul-betul di
   bawahnya, dan tanpa lapisan legap separa teks bertindih menjadi bubur.

   top mesti bermula di BAWAH .site-header, bukan pada 0. Kedua-duanya melekat,
   dan header membawa z-index 100 berbanding 20 di sini — pada top:0 bar ini
   hilang terus di sebalik header sebaik halaman ditatal. */
.tanya-bar{
  position:sticky;top:var(--tinggi-header);z-index:20;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)
}
.tanya-bar .container{padding-top:var(--tfd-space-3);padding-bottom:var(--tfd-space-3)}
.tanya-cari{display:flex;align-items:center;gap:var(--tfd-space-2);background:var(--white);
  border:1px solid var(--line);border-radius:var(--tfd-radius-md);padding:0 var(--tfd-space-3);max-width:520px}
.tanya-cari svg{width:18px;height:18px;color:var(--ink-500);flex:0 0 auto}
.tanya-cari input{flex:1 1 auto;min-width:0;font:inherit;font-size:15px;border:0;
  outline:none;padding:var(--tfd-space-3) 0;color:var(--ink-900);background:transparent}
.tanya-cari input::placeholder{color:var(--ink-500)}
.tanya-cari:focus-within{border-color:var(--blue-800);box-shadow:0 0 0 4px rgba(2,136,209,.12)}

.tanya-cip{display:flex;gap:var(--tfd-space-2);overflow-x:auto;margin-top:var(--tfd-space-2);padding-bottom:var(--tfd-space-1);
  scrollbar-width:none}
.tanya-cip::-webkit-scrollbar{display:none}
.tanya-cip button{flex:0 0 auto;font:inherit;font-size:13px;font-weight:700;
  padding:var(--tfd-space-2) var(--tfd-space-4);min-height:var(--tfd-control-height);border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--white);color:var(--ink-700);transition:.18s}
.tanya-cip button:hover{border-color:var(--blue-800);color:var(--blue-900)}
.tanya-cip button[aria-pressed="true"]{background:var(--blue-950);border-color:var(--blue-950);color:#fff}

/* Serpihan kategori */
.tanya-kat{align-self:flex-start;font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-800);background:var(--gold-lut);
  padding:var(--tfd-space-1) var(--tfd-space-2);border-radius:999px;white-space:nowrap}

/* Dek soalan */
.tanya-dek{padding:var(--tfd-space-6) 0 var(--tfd-space-1)}
.tanya-dek-kepala{display:flex;align-items:center;justify-content:space-between;gap:var(--tfd-space-3)}
.tanya-dek-kepala h2{font-family:'Amiri',Georgia,serif;font-size:24px;color:var(--blue-950)}
.tanya-dek-nav{display:flex;gap:var(--tfd-space-2);flex:0 0 auto}
.tanya-dek-nav button{width:var(--tfd-control-height);height:var(--tfd-control-height);border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--blue-900);display:grid;place-items:center;cursor:pointer;transition:.18s}
.tanya-dek-nav button:hover{border-color:var(--blue-800);background:var(--cream-100)}
.tanya-dek-nav button:disabled{opacity:.38;cursor:default;background:var(--white);border-color:var(--line)}
.tanya-dek-nav svg{width:17px;height:17px}
.tanya-dek-trek{display:flex;gap:var(--tfd-space-3);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:var(--tfd-space-4) 0 var(--tfd-space-5);scrollbar-width:none}
.tanya-dek-trek::-webkit-scrollbar{display:none}

.tanya-kad{scroll-snap-align:start;flex:0 0 min(320px,82%);background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--tfd-space-5);
  display:flex;flex-direction:column;gap:var(--tfd-space-2);text-decoration:none;
  box-shadow:0 16px 30px -26px rgba(0,59,115,.55);transition:.2s}
.tanya-kad:hover{border-color:var(--gold-500);transform:translateY(-2px);
  box-shadow:0 22px 38px -26px rgba(0,59,115,.6)}
/* max-height wajib bersama line-clamp: baris Arab lebih tinggi daripada baris
   Latin, jadi kotak clamp membocorkan cebisan baris keempat tanpa had tegas. */
.tanya-kad h3{font-family:'Amiri',Georgia,serif;font-size:18px;line-height:1.35;
  color:var(--blue-950);font-weight:700;max-height:calc(1.35em * 3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tanya-kad p{font-size:13.5px;line-height:1.6;color:var(--ink-500);max-height:calc(1.6em * 3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tanya-kad footer{margin-top:auto;padding-top:var(--tfd-space-2);display:flex;align-items:center;
  justify-content:space-between;gap:var(--tfd-space-2);font-size:var(--tfd-text-caption);font-weight:800}
.tanya-kad footer b{color:var(--gold-800);font-weight:800}
.tanya-kad footer span{color:var(--blue-900);display:inline-flex;align-items:center;gap:var(--tfd-space-1)}
.tanya-kad footer svg{width:14px;height:14px;transition:transform .2s}
.tanya-kad:hover footer svg{transform:translateX(3px)}

/* Grid soalan */
.tanya-seksyen{padding:var(--tfd-space-2) 0 var(--tfd-space-8)}
.tanya-kepala{display:flex;align-items:baseline;justify-content:space-between;gap:var(--tfd-space-3);margin-bottom:var(--tfd-space-3)}
.tanya-kepala h2{font-family:'Amiri',Georgia,serif;font-size:24px;color:var(--blue-950)}
.tanya-kepala span{font-size:var(--tfd-text-caption);color:var(--ink-500);font-weight:700;flex:0 0 auto}
.tanya-grid{display:grid;gap:var(--tfd-space-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.tanya-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--tfd-space-4);display:flex;flex-direction:column;gap:var(--tfd-space-2);text-decoration:none;transition:.18s}
.tanya-item[hidden]{display:none} /* [hidden] kalah kepada display:flex di atas */
.tanya-item:hover{border-color:var(--blue-800);transform:translateY(-2px);
  box-shadow:0 14px 26px -22px rgba(0,59,115,.5)}
.tanya-item-atas{display:flex;align-items:center;gap:var(--tfd-space-2);flex-wrap:wrap}
.tanya-item-atas small{font-size:var(--tfd-text-caption);color:var(--ink-500);font-weight:700}
.tanya-item h3{font-family:'Amiri',Georgia,serif;font-size:17px;line-height:1.4;
  color:var(--blue-950);font-weight:700;text-wrap:pretty;max-height:calc(1.4em * 3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tanya-item p{font-size:13.5px;line-height:1.6;color:var(--ink-500);max-height:calc(1.6em * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.tanya-kosong{background:var(--white);border:1px dashed var(--line);border-radius:var(--radius-md);
  padding:var(--tfd-space-7);text-align:center;color:var(--ink-500);font-size:14.5px;line-height:1.65}
.tanya-kosong .btn{margin-top:var(--tfd-space-4)}

/* Kad jemputan.
   Gambar ustaz bukan potongan lutsinar — latar hijau dan hiasannya terpahat
   dalam fail. Potongan bulat dengan cincin emas menjadikan hijau itu bulatan
   yang disengajakan, bukan segi empat yang bertelagah dengan navy. Corak sama
   sudah dipakai .lead-avatar pada index.html. */
.tanya-jemput{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--tfd-space-4);padding:var(--tfd-space-8) var(--tfd-space-6) var(--tfd-space-8);margin:var(--tfd-space-2) 0 var(--tfd-space-7);
  background:linear-gradient(165deg,var(--blue-950) 0%,var(--blue-900) 70%,var(--blue-800) 155%);
  border-radius:var(--radius-md);position:relative;overflow:hidden}
.tanya-jemput::after{content:"؟";position:absolute;right:14px;bottom:-58px;
  font-family:'Amiri',serif;font-size:190px;color:rgba(255,255,255,.05);pointer-events:none}
.tanya-jemput>*{position:relative;z-index:1}

.tanya-belon{max-width:32ch;background:var(--white);color:var(--blue-950);
  font-family:'Amiri',Georgia,serif;font-size:clamp(19px,2.6vw,25px);line-height:1.35;
  font-weight:700;padding:var(--tfd-space-4) var(--tfd-space-6);border-radius:var(--tfd-radius-lg);position:relative;
  box-shadow:0 18px 34px -22px rgba(0,0,0,.55)}
/* Ekor belon: clip-path, bukan helah sempadan, supaya bucunya kekal tajam pada
   skrin berketumpatan tinggi dan mewarisi warna belon secara automatik. */
.tanya-belon::after{content:"";position:absolute;left:50%;bottom:-13px;width:26px;height:14px;
  margin-left:-13px;background:inherit;clip-path:polygon(0 0,100% 0,42% 100%)}

.tanya-potret{width:132px;height:132px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 4px rgba(246,215,141,.42),0 16px 34px rgba(0,0,0,.3)}
.tanya-jemput .btn{min-width:210px}

/* Gerakan sekali sahaja. Kelas ditambah oleh IntersectionObserver apabila kad
   masuk skrin, kemudian pemerhati berhenti — halaman ini tempat orang membaca
   jawapan hukum, jadi tiada gelung yang bergerak di tepi mata. */
@keyframes tanya-belon-masuk{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* Belon KELIHATAN secara lalai. JavaScript menambah .sedia untuk menyembunyikannya
   sejurus sebelum lukisan pertama, barulah .masuk menganimasikannya kembali.
   Menyembunyikannya terus dalam CSS bermakna belon hilang selamanya jika skrip
   gagal dimuat — dan pada halaman ini itu menghapuskan ajakan bertanya. */
.tanya-jemput.sedia .tanya-belon{opacity:0}
.tanya-jemput.masuk .tanya-belon{animation:tanya-belon-masuk .5s cubic-bezier(.2,.8,.3,1) both}

/* Butang terapung */
.tanya-apung{position:sticky;bottom:18px;z-index:15;display:flex;justify-content:flex-end;
  pointer-events:none;margin-top:-8px}
.tanya-apung button{pointer-events:auto;display:inline-flex;align-items:center;gap:var(--tfd-space-3);
  font:inherit;font-size:14.5px;font-weight:800;color:#fff;background:var(--blue-950);
  border:0;border-radius:999px;padding:var(--tfd-space-2) var(--tfd-space-2) var(--tfd-space-2) var(--tfd-space-2);cursor:pointer;
  box-shadow:0 18px 34px -16px rgba(0,59,115,.85);transition:.2s}
.tanya-apung button:hover{background:var(--blue-900)}
.tanya-apung button img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(246,215,141,.5)}
.tanya-apung button span{width:34px;height:34px;border-radius:50%;background:var(--gold-500);
  color:var(--blue-950);display:grid;place-items:center;flex:0 0 auto}
.tanya-apung svg{width:17px;height:17px}

/* Bottom sheet — satu-satunya gerakan yang dikarang pada halaman ini. */
@keyframes tanya-pudar{from{opacity:0}to{opacity:1}}
@keyframes tanya-naik{from{transform:translateY(22px);opacity:.6}to{transform:translateY(0);opacity:1}}
/* z-index mesti mengatasi .site-header (100), atau header terapung di atas
   lapisan gelap: ia kekal cerah semasa selebihnya malap, dan pautan navnya
   masih boleh diklik sedangkan sheet sepatutnya menahan fokus. */
.tanya-sheet{position:fixed;inset:0;z-index:150;background:rgba(0,59,115,.55);
  display:flex;align-items:flex-end;justify-content:center;animation:tanya-pudar .18s ease}
/* display:flex di atas mengalahkan [hidden] daripada pelayar, jadi sheet akan
   terbuka pada muat pertama tanpa baris ini. */
.tanya-sheet[hidden]{display:none}
.tanya-sheet-panel{width:100%;max-width:720px;max-height:88vh;overflow-y:auto;
  background:var(--white);border-radius:22px 22px 0 0;
  animation:tanya-naik .28s cubic-bezier(.2,.8,.3,1)}
.tanya-sheet-kepala{position:sticky;top:0;z-index:2;background:var(--white);
  padding:var(--tfd-space-4) var(--tfd-space-5) var(--tfd-space-3);display:flex;align-items:center;gap:var(--tfd-space-3);border-bottom:1px solid var(--line)}
.tanya-sheet-kepala::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:38px;height:4px;border-radius:999px;background:var(--cream-200)}
.tanya-sheet-tutup{margin-left:auto;font:inherit;font-size:13px;font-weight:700;color:var(--ink-700);
  background:transparent;border:0;cursor:pointer;padding:var(--tfd-space-2);min-height:var(--tfd-control-height);
  display:inline-flex;align-items:center;gap:var(--tfd-space-2);border-radius:var(--tfd-radius-sm)}
.tanya-sheet-tutup:hover{color:var(--blue-900);background:var(--cream-100)}
.tanya-sheet-tutup svg{width:15px;height:15px}
.tanya-sheet-isi{padding:var(--tfd-space-5)}

/* Halaman satu soalan, dan isi sheet: satu set gaya untuk kedua-duanya. */
.tanya-soalan{padding:var(--tfd-space-7) 0 var(--tfd-space-9)}
.tanya-soalan h1,.tanya-sheet-isi h2{font-family:'Amiri',Georgia,serif;
  font-size:clamp(22px,3vw,32px);line-height:1.3;color:var(--blue-950);
  font-weight:700;margin-top:var(--tfd-space-3);max-width:32ch;text-wrap:pretty}
.tanya-meta{display:flex;gap:var(--tfd-space-3);flex-wrap:wrap;margin-top:var(--tfd-space-2);font-size:13px;color:var(--ink-500)}

/* Blok jawapan. Ia dibezakan dengan permukaan dan bayang, bukan jalur warna di
   tepi — jalur itu tanda siap-pakai yang halaman ini sengaja mengelaknya. */
.tanya-jawapan{margin-top:var(--tfd-space-5);background:var(--cream-100);border-radius:var(--radius-md);
  padding:var(--tfd-space-5) var(--tfd-space-6);box-shadow:0 18px 34px -30px rgba(0,59,115,.5)}
.tanya-jawapan-label{display:inline-flex;flex-direction:column;gap:var(--tfd-space-2);
  font-size:var(--tfd-text-caption);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-800)}
.tanya-jawapan-label::after{content:"";width:26px;height:2px;background:var(--gold-500);border-radius:2px}
.tanya-jawapan-teks{margin-top:var(--tfd-space-3);font-size:15.5px;line-height:1.8;color:var(--ink-900)}
.tanya-sumber{margin-top:var(--tfd-space-4);padding-top:var(--tfd-space-3);border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-500)}
.tanya-sumber strong{color:var(--blue-950)}

.tanya-aksi{display:flex;gap:var(--tfd-space-2);flex-wrap:wrap;margin:var(--tfd-space-4) 0 var(--tfd-space-7)}
.tanya-aksi .btn{flex:1 1 190px;justify-content:center}
.tanya-aksi .btn svg{width:17px;height:17px}
.tanya-undi[aria-pressed="true"]{background:var(--cream-100);border-color:var(--blue-800);color:var(--blue-900)}

.tanya-lain{display:grid;gap:var(--tfd-space-2)}
.tanya-lain a{background:var(--white);border:1px solid var(--line);border-radius:var(--tfd-radius-md);
  padding:var(--tfd-space-3) var(--tfd-space-4);font-size:14px;line-height:1.5;color:var(--blue-950);font-weight:700;
  text-decoration:none;transition:.18s;max-height:calc(1.5em * 2 + 28px);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tanya-lain a:hover{border-color:var(--blue-800);transform:translateX(3px)}

/* Borang */
.tanya-borang label{display:block;margin-top:var(--tfd-space-4);font-size:var(--tfd-text-caption);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue-950)}
/* "pilihan" mesti duduk pada baris yang sama dengan label; display:grid pada
   label menolaknya ke bawah dan ia kelihatan seperti medan yang tersasar. */
.tanya-borang label span{font-weight:600;color:var(--ink-500);text-transform:none;letter-spacing:0}
.tanya-borang input,.tanya-borang textarea,.tanya-borang select{display:block;margin-top:var(--tfd-space-2);
  width:100%;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:var(--tfd-radius-md);padding:var(--tfd-space-3);background:var(--white);
  color:var(--ink-900);outline:none;text-transform:none;letter-spacing:0;font-weight:400}
.tanya-borang textarea{min-height:130px;resize:vertical;line-height:1.6}
.tanya-borang input:focus,.tanya-borang textarea:focus,.tanya-borang select:focus{
  border-color:var(--blue-800);box-shadow:0 0 0 4px rgba(2,136,209,.12)}
.tanya-borang-kaki{display:flex;gap:var(--tfd-space-3);align-items:center;margin-top:var(--tfd-space-5);flex-wrap:wrap}
.tanya-borang-kaki .btn{flex:1 1 200px;justify-content:center}
.tanya-nota{flex:1 1 200px;font-size:var(--tfd-text-caption);line-height:1.55;color:var(--ink-500)}
.tanya-nota[data-keadaan="ralat"]{color:#a3221f;font-weight:700}
.tanya-nota[data-keadaan="jaya"]{color:#1d6b3f;font-weight:700}

/* Di bawah 860px nav membalut, jadi tinggi header tidak lagi diketahui dan
   sebarang nilai top yang ditetapkan akan salah. Bar berhenti melekat di sini:
   pada skrin sekecil itu, header melekat + bar melekat sudah memakan sebahagian
   besar tinggi skrin sebelum satu soalan pun kelihatan. */
@media (max-width:860px){
  .tanya-bar{position:static}
}

@media (max-width:720px){
  .tanya-hero{padding:var(--tfd-space-6) 0 var(--tfd-space-7)}
  .tanya-dek-kepala h2,.tanya-kepala h2{font-size:20px}
  .tanya-sheet-isi{padding:var(--tfd-space-4)}
  .tanya-jawapan{padding:var(--tfd-space-4)}
  .tanya-aksi .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .laluan-kad:hover,.mula-list a:hover,.btn:hover,.peta-kad:hover{transform:none}
  .peta-kad:hover .peta-pergi svg{transform:none}
  .tanya-dek-trek{scroll-snap-type:none;scroll-behavior:auto}
  .tanya-kad:hover,.tanya-item:hover,.tanya-lain a:hover{transform:none}
  .tanya-kad:hover footer svg{transform:none}
  /* Belon mesti kekal kelihatan, bukan tersangkut pada keadaan awal animasi. */
  .tanya-jemput.sedia .tanya-belon,
  .tanya-jemput.masuk .tanya-belon{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   Carian kepala — aliran belajar (belajar, siri, tonton).
   Dimuat pada setiap halaman, jadi gaya ini duduk di sini dan bukan dalam
   assets/tonton.css yang hanya dimuat oleh halaman tonton.
   ========================================================================== */

.tfd-cari{position:relative;flex:1 1 auto;max-width:460px;min-width:0}
.tfd-cari-kotak{display:flex;align-items:center;gap:var(--tfd-space-2);background:var(--white);border:1px solid var(--line);border-radius:var(--tfd-radius-sm);padding:0 var(--tfd-space-3);height:var(--tfd-control-height);transition:border-color .15s ease,box-shadow .15s ease}
.tfd-cari-kotak:focus-within{border-color:var(--blue-800);box-shadow:0 0 0 3px rgba(2,136,209,.14)}
.tfd-cari-ikon{width:18px;height:18px;color:var(--ink-500);flex:none}
.tfd-cari input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink-900);padding:0;outline:0}
.tfd-cari input::placeholder{color:var(--ink-500)}
.tfd-cari input::-webkit-search-cancel-button{display:none}
.tfd-cari-kosong{flex:none;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-500);display:grid;place-items:center;cursor:pointer}
.tfd-cari-kosong:hover{background:rgba(0,59,115,.07);color:var(--ink-900)}
.tfd-cari-kosong svg{width:14px;height:14px}

/* Panel hasil */
.tfd-cari-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:120;background:var(--white);border:1px solid var(--line);border-radius:var(--tfd-radius-md);box-shadow:0 18px 44px rgba(0,24,49,.16);overflow:hidden}
.tfd-cari-panel[hidden]{display:none}
.tfd-cari-senarai{max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain}

.tfd-cari-kitab{padding:var(--tfd-space-3) var(--tfd-space-3) var(--tfd-space-1);font-size:var(--tfd-text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.tfd-cari-kitab:not(:first-child){border-top:1px solid var(--line);margin-top:var(--tfd-space-1)}

.tfd-cari-item{display:flex;align-items:baseline;gap:var(--tfd-space-2);padding:var(--tfd-space-2) var(--tfd-space-3);text-decoration:none;color:var(--ink-900);font-size:14px;line-height:1.4}
.tfd-cari-item:hover,.tfd-cari-item[aria-selected="true"]{background:rgba(2,136,209,.09)}
.tfd-cari-item b{font-weight:400;flex:1;min-width:0}
.tfd-cari-item mark{background:var(--gold-lut);color:inherit;border-radius:3px;padding:0 1px}
.tfd-cari-ep{flex:none;font-size:var(--tfd-text-caption);color:var(--ink-500)}
.tfd-cari-tempoh{flex:none;font-size:var(--tfd-text-caption);color:var(--ink-500);font-variant-numeric:tabular-nums}

.tfd-cari-kosong-teks{padding:var(--tfd-space-5) var(--tfd-space-3);text-align:center;font-size:14px;color:var(--ink-500)}

.tfd-cari-kaki{display:flex;align-items:center;justify-content:space-between;gap:var(--tfd-space-3);padding:var(--tfd-space-2) var(--tfd-space-3);border-top:1px solid var(--line);background:rgba(0,59,115,.03);font-size:13px;color:var(--ink-500)}
.tfd-cari-luas{border:0;background:none;padding:var(--tfd-space-1) 0;font:inherit;font-size:13px;font-weight:700;color:var(--blue-800);cursor:pointer;white-space:nowrap}
.tfd-cari-luas:hover{text-decoration:underline}
.tfd-cari-luas[hidden]{display:none}

/* Butang ikon: telefon sahaja */
.tfd-cari-butang{display:none;width:var(--tfd-control-height);height:var(--tfd-control-height);padding:0;border:1px solid var(--line);border-radius:var(--tfd-radius-sm);background:var(--white);color:var(--blue-950);place-items:center;cursor:pointer}
.tfd-cari-butang svg{width:19px;height:19px}

@media (max-width:860px){
  .tfd-cari{max-width:300px}
}

/* Di bawah 720px kepala tiada ruang untuk medan penuh: ia menjadi butang ikon
   yang membuka lapisan carian penuh skrin. */
@media (max-width:720px){
  .tfd-cari{position:fixed;inset:0;z-index:200;max-width:none;background:rgba(250,250,253,.98);backdrop-filter:blur(10px);padding:var(--tfd-space-3);display:none;flex-direction:column;gap:var(--tfd-space-3)}
  body.cari-buka .tfd-cari{display:flex}
  body.cari-buka{overflow:hidden}
  .tfd-cari-kotak{height:52px}
  .tfd-cari-panel{position:static;flex:1;box-shadow:none;border-radius:var(--tfd-radius-sm);display:flex;flex-direction:column;min-height:0}
  .tfd-cari-senarai{flex:1;max-height:none}
  .tfd-cari-item{padding:var(--tfd-space-3) var(--tfd-space-3);min-height:var(--tfd-control-height)}
  .tfd-cari-butang{display:grid}
}

@media (prefers-reduced-motion:reduce){
  .tfd-cari-kotak{transition:none}
}

/* ==========================================================================
   Pembetulan mudah alih (Fasa 3 PWA)
   --------------------------------------------------------------------------
   Blok ini SENGAJA di hujung fail: ia mengatasi peraturan di atas pada
   kekhususan yang sama, jadi tiada peraturan sedia ada perlu disunting dan
   tiada !important diperlukan.

   Terpakai pada laman web mudah alih biasa DAN PWA terpasang.
   ========================================================================== */

/* ---- Kawasan selamat (skrin bertakuk) ----
   viewport-fit=cover menghamparkan halaman ke bawah takuk dan bar rumah.
   Nilai env() ialah 0 pada peranti tanpa takuk, jadi ini selamat sejagat. */
.site-header{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.site-footer{
  padding-bottom:calc(44px + env(safe-area-inset-bottom));
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
/* Butang terapung Tanya duduk di tepi kanan bawah; tanpa inset ia bertindih
   dengan bar rumah iOS. */
.tanya-apung{bottom:calc(18px + env(safe-area-inset-bottom))}
/* Lapisan carian skrin penuh: paddingnya mesti menghormati takuk, atau medan
   carian tersembunyi separa di bawahnya. */
@media (max-width:720px){
  .tfd-cari{
    padding-top:calc(14px + env(safe-area-inset-top));
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
  }
}
/* Helaian bawah Tanya: ruang tambahan supaya butang terakhir tidak jatuh di
   bawah bar rumah. */
.tanya-sheet-isi{padding-bottom:calc(20px + env(safe-area-inset-bottom))}

@media (max-width:860px){
  /* ---- Medan borang: 16px minimum ----
     iOS Safari mengezum masuk secara paksa pada medan di bawah 16px dan tidak
     mengezum keluar semula. Dalam PWA terpasang tiada bar alamat untuk
     membetulkannya, jadi zum itu kekal sehingga pengguna mencubitnya. */
  input,select,textarea,
  .tfd-cari input,
  .tanya-cari input,
  .tanya-borang input,.tanya-borang textarea,.tanya-borang select{font-size:16px}

  /* ---- Sasaran sentuh: kawalan utama ---- */
  .peta-pergi-pautan{min-height:var(--tfd-control-height);display:inline-flex;align-items:center}
  .tanya-cip button{min-height:var(--tfd-control-height)}
  .tanya-lain a{min-height:var(--tfd-control-height)}
  /* Nilai padding diukur, bukan diteka: kotak teks pautan ini ~21px, jadi
     11px atas dan bawah membawanya kepada ~43-45px tanpa menukar saiz fon. */
  .jejak a{display:inline-block;padding-block:var(--tfd-space-3)}
  .footer-nav a{display:inline-block;padding-block:var(--tfd-space-3)}
  .brand{min-height:var(--tfd-control-height)}
  .tanya-sheet-tutup{min-height:var(--tfd-control-height);min-width:44px}
  .tukar-bidang a{min-height:var(--tfd-control-height)}
  /* "Lihat kesemua N episod" — 21px sahaja, dan ia pintu masuk utama kepada
     senarai episod penuh bagi setiap siri. */
  .simpul-lagi{min-height:var(--tfd-control-height);display:inline-flex;align-items:center}
  /* Tajuk siri ialah pautan utama setiap kad simpul. Kotak teksnya ~27px. */
  .simpul-isi h3 a{display:inline-block;padding-block:var(--tfd-space-2)}
  .tonton-meta a[class*='lencana'],
  .tonton-meta a.tanda{position:relative}
  /* Lencana tahap dan tanda bidang ialah PAUTAN setinggi 26-30px sahaja.
     Membesarkannya kepada 44px menukar rupanya daripada lencana kepada butang,
     jadi kawasan sentuh diluaskan secara halimunan sebaliknya — sama seperti
     .kitab-tahap di index.html. Kedua-duanya duduk bersebelahan mendatar dalam
     .tonton-meta, jadi lanjutan menegak tidak boleh menyebabkan pertindihan. */
  .tonton-meta a[class*='lencana']::after,
  .tonton-meta a.tanda::after{
    content:'';position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }

  /* ---- Teks kecil ---- */
  .tanya-kat{font-size:var(--tfd-text-caption)}
}

/* ---- Kepala ringkas: satu baris, bukan dua ----
   tanya.php menghantar 'ringkas' DAN 'sumbangan', jadi kepala membawa jenama +
   butang kembali + CTA Sumbangan. Pada 360px ketiga-tiganya membalut kepada
   dua baris dan kepala membesar kepada 131px — 17% daripada tinggi skrin
   sebelum satu perkataan kandungan kelihatan.

   flex-wrap:nowrap memaksa satu baris; jenama dibenarkan mengecut (ia sudah
   mempunyai text-overflow:ellipsis daripada blok 860px di atas), dan butang
   kembali menjadi ikon sahaja lebih awal daripada 420px. */
@media (max-width:640px){
  .navbar{flex-wrap:nowrap;gap:var(--tfd-space-2);padding:var(--tfd-space-2) 0}
  .brand{flex:0 1 auto;min-width:0;overflow:hidden}
  .brand-copy{min-width:0;overflow:hidden}
  .brand-copy b{font-size:16px}
  .brand-logo{width:42px;height:42px}

  .nav-ringkas{flex:none;flex-wrap:nowrap;gap:var(--tfd-space-2)}
  /* Label kekal untuk pembaca skrin melalui aria-label pada pautan. */
  .nav-balik span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .nav-balik{width:var(--tfd-control-height);height:var(--tfd-control-height);padding:0;gap:0;justify-content:center;flex:none}
  .nav-ringkas .nav-cta{min-height:var(--tfd-control-height);padding:0 var(--tfd-space-3);font-size:var(--tfd-text-caption);white-space:nowrap;flex:none}

  /* Butang carian sudah 44px; disamakan supaya baris kekal rata. */
  .tfd-cari-butang{width:var(--tfd-control-height);height:var(--tfd-control-height);flex:none}
}

/* Pada 360px — telefon paling sempit yang masih lazim — jenama + kembali +
   Sumbangan hanya muat jika kedua-dua hujung dikecilkan sedikit. Tanpa ini
   nama jenama terpotong menjadi "Tafaqquh Fi Al-…". */
@media (max-width:389px){
  .brand-copy b{font-size:14.5px}
  .brand-logo{width:38px;height:38px}
  .navbar{gap:var(--tfd-space-2)}
  .nav-ringkas{gap:var(--tfd-space-2)}
  .nav-ringkas .nav-cta{padding:0 var(--tfd-space-2);font-size:var(--tfd-text-caption)}
}

/* ---- Palet app untuk laman awam (feature/app-redesign-v1) ----
   Kepala, pautan aktif dan CTA memakai navy/royal blue app; emas hanya untuk
   lencana kitab; garis emas kepala dibuang. index.html memakai token sebaris
   sendiri dan tidak terjejas. */
:root{--blue-900:#0F3D5E;--blue-800:#1D4ED8;--blue-700:#3B82F6}
:focus-visible{outline-color:var(--blue-700)}
.site-header{border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(15,61,94,.06)}
.nav-cta{background:var(--blue-800)}
.nav-cta:hover{background:var(--blue-700)}
.btn-primary{background:var(--blue-700);color:#fff;box-shadow:0 10px 30px rgba(59,130,246,.24)}
.btn-primary:hover{background:var(--blue-800)}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{color:var(--blue-800);background:rgba(29,78,216,.08)}
.nav-balik:hover{border-color:var(--blue-800);background:rgba(29,78,216,.06)}
.btn-ghost{color:var(--blue-800)}
.btn-ghost:hover{border-color:var(--blue-800);background:rgba(29,78,216,.06)}
/* Tahap Asas = teal kemajuan app (hijau hanya WhatsApp); angka hero siri putih, bukan emas. */
:root{--asas:#08776D;--asas-bg:rgba(8,119,109,.12)}
.lencana-asas{border-color:rgba(8,119,109,.3)}
.tahap-angka strong{color:#fff}