/* Sistem reka bentuk JPSM — dikongsi oleh semua halaman */
:root{
  --rimba:#0A2A21;
  --kanopi:#123F31;
  --paku:#2C6B52;
  --lumut:#77A88F;
  --kabus:#EEF2EE;
  --kertas:#FFFFFF;
  --tualang:#E8B317;
  --arang:#16211D;
  --asap:#5C6B64;
  --garis:#D6DED8;
  --bahaya:#A33019;

  /* Satu keluarga fon sahaja: Poppins. Tiga pemboleh ubah dikekalkan kerana ia
     menandakan PERANAN (tajuk / teks badan / label & nombor), bukan fon berbeza —
     togol kebolehcapaian di bawah memetakan semula peranan ini, dan memisahkan
     semula kepada dua fon kemudian hanya perlu menukar satu baris di sini. */
  --display:'Poppins',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
  --data:'Poppins',system-ui,sans-serif;

  --sk:1rem;
  --wrap:1240px;
  --r:4px;

  /* Hutan bentuk-V pada jalur seksyen. Tiga lapisan latar:
     rimbunan tinggi di kiri + kanan, dan jalur kanopi rendah berjubin di tengah.
     Tinggi di tepi, rendah di tengah -> kandungan duduk di dalam "lembah" dan
     tidak pernah bersaing dengan hutan.
     Rimbunan tepi dijana dengan mask kecerunan pada tepi DALAMnya supaya ia
     larut ke dalam jalur tengah; tanpa mask ada jahitan menegak ketara.
     Jalur tengah berjubin tepat: setiap lengkung mahkota kembali ke garis
     dasarnya dan lebar berjumlah tepat 520px.
     Kelegapan .16 DIBAKAR dalam SVG, bukan filter CSS — filter akan
     melunturkan teks di atasnya juga. */
  --hutan-jalur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='132' viewBox='0 0 520 132'%3E%3Cg fill='%23234F3D' opacity='.16'%3E%3Cg opacity='.38'%3E%3Cpath d='M0 62 c10 -20 23 -25 30 0 c9 -32 45 -40 52 0 c8 -14 18 -17 24 0 c8 -26 38 -33 44 0 c12 -38 27 -46 36 0 c10 -22 51 -28 58 0 c10 -30 21 -37 28 0 c9 -18 42 -22 48 0 c12 -35 26 -43 34 0 c11 -25 54 -31 62 0 c14 -15 30 -19 40 0 c12 -31 56 -39 64 0 V132 H0 Z'/%3E%3C/g%3E%3Cg opacity='.62'%3E%3Cpath d='M0 82 c16 -28 35 -34 46 0 c12 -42 58 -53 66 0 c10 -20 23 -25 30 0 c10 -35 47 -43 54 0 c14 -25 30 -31 40 0 c13 -48 63 -59 72 0 c12 -22 27 -28 36 0 c10 -32 51 -40 58 0 c15 -38 34 -46 44 0 c13 -28 65 -34 74 0 V132 H0 Z'/%3E%3C/g%3E%3Cg opacity='.8'%3E%3Cpath d='M70 102 c1-24 1-37 2-74 h3 c1 37 1 24 2 74 Z'/%3E%3Cpath d='M42 41 c7-9 22-13 30-9 c-6 -7 -30 -3 -60 0 Z'/%3E%3Cpath d='M54 32 c6-7 21-9 37-6 c-5 -5 -24 -2 -37 0 Z'/%3E%3Cpath d='M196 102 c1-18 4-27 8-54 h4 c-4 27-6 18-7 54 Z'/%3E%3Cpath d='M196 48 c-10 -8 -19 -7 -25 3 c-1 5 -7 4 25 1 Z'/%3E%3Cpath d='M196 48 c-7 -12 -15 -17 -21 -16 c-1 5 -7 4 21 20 Z'/%3E%3Cpath d='M196 48 c2 -14 8 -18 16 -18 c-1 5 -7 4 -16 22 Z'/%3E%3Cpath d='M196 48 c10 -7 17 -3 22 5 c-1 5 -7 4 -22 -1 Z'/%3E%3Cpath d='M196 48 c9 4 13 9 14 17 c-1 5 -7 4 -14 -13 Z'/%3E%3Cpath d='M266 102 c1-20 1-31 2-62 h3 c1 31 1 20 2 62 Z'/%3E%3Cpath d='M243 53 c6-9 17-13 25-9 c-5 -7 -25 -3 -50 0 Z'/%3E%3Cpath d='M253 44 c5-7 18-9 31-6 c-5 -5 -20 -2 -31 0 Z'/%3E%3Cpath d='M410 102 c1-26 1-40 2-80 h3 c1 40 1 26 2 80 Z'/%3E%3Cpath d='M379 35 c8-9 25-13 33-9 c-7 -7 -33 -3 -66 0 Z'/%3E%3Cpath d='M392 26 c6-7 23-9 40-6 c-6 -5 -26 -2 -40 0 Z'/%3E%3Cpath d='M468 102 c1-15 4-23 8-46 h4 c-4 23-6 15-7 46 Z'/%3E%3Cpath d='M468 56 c-10 -8 -19 -7 -25 3 c-1 5 -7 4 25 1 Z'/%3E%3Cpath d='M468 56 c-7 -12 -15 -17 -21 -16 c-1 5 -7 4 21 20 Z'/%3E%3Cpath d='M468 56 c2 -14 8 -18 16 -18 c-1 5 -7 4 -16 22 Z'/%3E%3Cpath d='M468 56 c10 -7 17 -3 22 5 c-1 5 -7 4 -22 -1 Z'/%3E%3Cpath d='M468 56 c9 4 13 9 14 17 c-1 5 -7 4 -14 -13 Z'/%3E%3C/g%3E%3Cpath d='M0 102 c20 -32 46 -40 60 0 c15 -48 73 -59 84 0 c16 -25 37 -31 48 0 c13 -40 61 -50 70 0 c19 -30 43 -37 56 0 c17 -50 80 -62 92 0 c17 -28 38 -34 50 0 c11 -38 52 -46 60 0 V132 H0 Z'/%3E%3C/g%3E%3C/svg%3E");
  --hutan-kiri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='300' viewBox='0 0 460 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.58' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23000'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='460' height='300' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='%23234F3D' opacity='.16' mask='url(%23m)'%3E%3Cg opacity='.4'%3E%3Cpath d='M0 64 C6 29 35 46 38 85 C50 58 70 72 77 102 C83 59 111 70 115 118 C126 93 146 105 153 132 C159 95 188 105 192 147 C203 125 223 137 230 161 C236 128 265 138 268 174 C280 155 300 166 307 187 C313 160 341 170 345 200 C356 184 376 195 383 213 C389 191 418 202 422 226 C433 212 453 223 460 238 L460 300 L0 300 Z'/%3E%3C/g%3E%3Cg opacity='.8'%3E%3Cpath d='M43 150 c1-32 1-48 2-96 h4 c1 48 1 32 2 96 Z'/%3E%3Cpath d='M12 68 c8-10 26-14 34-10 c-7 -8 -34 -3 -68 0 Z'/%3E%3Cpath d='M26 58 c6-8 23-10 40-7 c-6 -6 -26 -2 -40 0 Z'/%3E%3Cpath d='M112 172 c1-22 5-34 9-68 h5 c-5 34-7 22-8 68 Z'/%3E%3Cpath d='M112 104 c-11 -9 -21 -8 -27 3 c-1 5 -7 4 27 1 Z'/%3E%3Cpath d='M112 104 c-8 -13 -16 -18 -23 -17 c-1 5 -7 4 23 21 Z'/%3E%3Cpath d='M112 104 c2 -15 9 -20 18 -20 c-1 5 -7 4 -18 24 Z'/%3E%3Cpath d='M112 104 c11 -8 19 -3 24 5 c-1 5 -7 4 -24 -1 Z'/%3E%3Cpath d='M112 104 c10 4 14 10 15 18 c-1 5 -7 4 -15 -14 Z'/%3E%3Cpath d='M155 196 c1-26 1-39 2-78 h4 c1 39 1 26 2 78 Z'/%3E%3Cpath d='M131 132 c6-10 19-14 27-10 c-6 -8 -27 -3 -54 0 Z'/%3E%3Cpath d='M142 122 c5-8 18-10 32-7 c-5 -6 -21 -2 -32 0 Z'/%3E%3Cpath d='M232 220 c1-17 5-26 9-52 h5 c-5 26-7 17-8 52 Z'/%3E%3Cpath d='M232 168 c-11 -9 -21 -8 -27 3 c-1 5 -7 4 27 1 Z'/%3E%3Cpath d='M232 168 c-8 -13 -16 -18 -23 -17 c-1 5 -7 4 23 21 Z'/%3E%3Cpath d='M232 168 c2 -15 9 -20 18 -20 c-1 5 -7 4 -18 24 Z'/%3E%3Cpath d='M232 168 c11 -8 19 -3 24 5 c-1 5 -7 4 -24 -1 Z'/%3E%3Cpath d='M232 168 c10 4 14 10 15 18 c-1 5 -7 4 -15 -14 Z'/%3E%3Cpath d='M289 240 c1-19 1-29 2-58 h4 c1 29 1 19 2 58 Z'/%3E%3Cpath d='M271 196 c5-10 13-14 21-10 c-5 -8 -21 -3 -42 0 Z'/%3E%3Cpath d='M280 186 c4-8 14-10 25-7 c-4 -6 -16 -2 -25 0 Z'/%3E%3Cpath d='M369 258 c1-14 1-21 2-42 h4 c1 21 1 14 2 42 Z'/%3E%3Cpath d='M356 230 c4-10 8-14 16-10 c-4 -8 -16 -3 -32 0 Z'/%3E%3Cpath d='M363 220 c3-8 11-10 19-7 c-3 -6 -12 -2 -19 0 Z'/%3E%3C/g%3E%3Cpath d='M0 96 C12 50 31 65 38 116 C44 81 73 93 77 132 C88 78 108 87 115 147 C121 117 150 128 153 161 C165 115 185 124 192 175 C198 148 226 158 230 188 C242 150 261 159 268 201 C274 177 303 187 307 214 C318 184 338 193 345 226 C351 207 380 217 383 238 C395 214 415 223 422 250 C428 234 456 244 460 262 L460 300 L0 300 Z'/%3E%3C/g%3E%3C/svg%3E");
  --hutan-kanan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='300' viewBox='0 0 460 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23000'/%3E%3Cstop offset='.42' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='460' height='300' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='%23234F3D' opacity='.16' mask='url(%23m)'%3E%3Cg transform='translate(460,0) scale(-1,1)'%3E%3Cg opacity='.4'%3E%3Cpath d='M0 64 C6 29 35 46 38 85 C50 58 70 72 77 102 C83 59 111 70 115 118 C126 93 146 105 153 132 C159 95 188 105 192 147 C203 125 223 137 230 161 C236 128 265 138 268 174 C280 155 300 166 307 187 C313 160 341 170 345 200 C356 184 376 195 383 213 C389 191 418 202 422 226 C433 212 453 223 460 238 L460 300 L0 300 Z'/%3E%3C/g%3E%3Cg opacity='.8'%3E%3Cpath d='M43 150 c1-32 1-48 2-96 h4 c1 48 1 32 2 96 Z'/%3E%3Cpath d='M12 68 c8-10 26-14 34-10 c-7 -8 -34 -3 -68 0 Z'/%3E%3Cpath d='M26 58 c6-8 23-10 40-7 c-6 -6 -26 -2 -40 0 Z'/%3E%3Cpath d='M112 172 c1-22 5-34 9-68 h5 c-5 34-7 22-8 68 Z'/%3E%3Cpath d='M112 104 c-11 -9 -21 -8 -27 3 c-1 5 -7 4 27 1 Z'/%3E%3Cpath d='M112 104 c-8 -13 -16 -18 -23 -17 c-1 5 -7 4 23 21 Z'/%3E%3Cpath d='M112 104 c2 -15 9 -20 18 -20 c-1 5 -7 4 -18 24 Z'/%3E%3Cpath d='M112 104 c11 -8 19 -3 24 5 c-1 5 -7 4 -24 -1 Z'/%3E%3Cpath d='M112 104 c10 4 14 10 15 18 c-1 5 -7 4 -15 -14 Z'/%3E%3Cpath d='M155 196 c1-26 1-39 2-78 h4 c1 39 1 26 2 78 Z'/%3E%3Cpath d='M131 132 c6-10 19-14 27-10 c-6 -8 -27 -3 -54 0 Z'/%3E%3Cpath d='M142 122 c5-8 18-10 32-7 c-5 -6 -21 -2 -32 0 Z'/%3E%3Cpath d='M232 220 c1-17 5-26 9-52 h5 c-5 26-7 17-8 52 Z'/%3E%3Cpath d='M232 168 c-11 -9 -21 -8 -27 3 c-1 5 -7 4 27 1 Z'/%3E%3Cpath d='M232 168 c-8 -13 -16 -18 -23 -17 c-1 5 -7 4 23 21 Z'/%3E%3Cpath d='M232 168 c2 -15 9 -20 18 -20 c-1 5 -7 4 -18 24 Z'/%3E%3Cpath d='M232 168 c11 -8 19 -3 24 5 c-1 5 -7 4 -24 -1 Z'/%3E%3Cpath d='M232 168 c10 4 14 10 15 18 c-1 5 -7 4 -15 -14 Z'/%3E%3Cpath d='M289 240 c1-19 1-29 2-58 h4 c1 29 1 19 2 58 Z'/%3E%3Cpath d='M271 196 c5-10 13-14 21-10 c-5 -8 -21 -3 -42 0 Z'/%3E%3Cpath d='M280 186 c4-8 14-10 25-7 c-4 -6 -16 -2 -25 0 Z'/%3E%3Cpath d='M369 258 c1-14 1-21 2-42 h4 c1 21 1 14 2 42 Z'/%3E%3Cpath d='M356 230 c4-10 8-14 16-10 c-4 -8 -16 -3 -32 0 Z'/%3E%3Cpath d='M363 220 c3-8 11-10 19-7 c-3 -6 -12 -2 -19 0 Z'/%3E%3C/g%3E%3Cpath d='M0 96 C12 50 31 65 38 116 C44 81 73 93 77 132 C88 78 108 87 115 147 C121 117 150 128 153 161 C165 115 185 124 192 175 C198 148 226 158 230 188 C242 150 261 159 268 201 C274 177 303 187 307 214 C318 184 338 193 345 226 C351 207 380 217 383 238 C395 214 415 223 422 250 C428 234 456 244 460 262 L460 300 L0 300 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
/* [hidden] mesti mengatasi mana-mana display:flex/grid berasaskan kelas.
   Tanpa !important, .pegawai{display:flex} membatalkan penapisan JS. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--kabus);color:var(--arang);font-family:var(--body);font-size:var(--sk);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--tualang);outline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.eyebrow{font-family:var(--data);font-size:.7em;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--paku)}
.eyebrow-lt{color:var(--tualang)}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.02em;margin:.35em 0 .2em}
.lede{color:var(--asap);max-width:62ch}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--tualang);color:var(--rimba);padding:12px 20px;font-weight:700}
.skip:focus{left:0}

/* ---------- BAR UTILITI ---------- */
/* z-index 41 mengatasi .head (40): tooltip ikon jatuh ke bawah melepasi tepi
   bar, dan tanpa ini ia dicat di belakang pengepala melekat. */
.util{background:var(--rimba);color:#CFE0D6;font-size:.78em;position:relative;z-index:41}
.util .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;min-height:40px}
.util-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.util a:hover{color:var(--tualang)}

/* ---------- IKON PAUTAN WAJIB (bar utiliti) ----------
   Empat CTA yang dahulunya jubin berteks dalam pengepala. Kini ikon sahaja;
   nama muncul sebagai tooltip semasa hover atau fokus papan kekunci.

   Teks tooltip datang daripada attr(aria-label) — satu sumber untuk nama boleh
   capai DAN label yang dilihat, jadi kedua-duanya tidak boleh terpisah, dan ia
   bertukar sendiri bila bahasa ditukar (penukar bahasa mengemas kini aria-label
   melalui data-en-label).

   Sengaja TIDAK menggunakan title=: mod tooltip kebolehcapaian memindahkan
   title -> data-tip, jadi title akan menghasilkan dua tooltip bertindih. */
.util-ikon-grup{display:flex;align-items:center;gap:2px}
.util-ikon{position:relative;display:grid;place-items:center;width:30px;height:30px;
           border-radius:var(--r);color:#CFE0D6;flex:none;
           transition:background .18s ease,color .18s ease}
.util-ikon svg{width:17px;height:17px}
.util-ikon:hover,.util-ikon:focus-visible{background:rgba(255,255,255,.14);color:var(--tualang)}
/* Aduan ialah CTA utama — kekalkan aksen merah seperti jubin terdahulu. */
.util-ikon--aduan{color:#F0A18B}
.util-ikon--aduan:hover,.util-ikon--aduan:focus-visible{background:var(--bahaya);color:#fff}

.util-ikon::after{content:attr(aria-label);position:absolute;top:calc(100% + 7px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:var(--arang);color:#fff;font-size:.78rem;font-weight:500;line-height:1.3;
  letter-spacing:0;text-transform:none;padding:6px 10px;border-radius:var(--r);
  white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:2}
.util-ikon:hover::after,.util-ikon:focus-visible::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.util-tools{display:flex;align-items:center;gap:10px}
.tool{border:1px solid rgba(255,255,255,.22);padding:3px 9px;border-radius:var(--r);font-family:var(--data);font-size:.95em;line-height:1.4}
/* `.util a:hover` (0,2,1) mengatasi `.tool:hover` (0,2,0) untuk `color`, jadi
   pautan .tool jadi emas-atas-emas. Pemilih `.util a.tool:hover` (0,3,1)
   diperlukan — jangan ringkaskan semula. */
.tool:hover,.util a.tool:hover,
.tool[aria-pressed="true"],.tool[aria-current="true"]{background:var(--tualang);color:var(--rimba);border-color:var(--tualang);font-weight:600}
.util-sep{width:1px;height:18px;background:rgba(255,255,255,.2)}

/* ---------- HEADER ---------- */
.head{background:var(--kertas);border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:40}
/* flex-wrap supaya kotak carian boleh jatuh ke barisnya sendiri pada skrin
   sempit, bukan memicit jenama sampai tak boleh dibaca. */
.head-top{display:flex;align-items:center;gap:20px;padding:14px 0;flex-wrap:wrap}
/* Jata Negara — nisbah 303:240, jangan paksa lebar tetap. */
.crest{flex:none;display:block;line-height:0}
.crest img{height:58px;width:auto;display:block}
.crest:hover{opacity:.85}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.15;letter-spacing:-.01em}
.brand-sub{font-size:.74rem;color:var(--asap)}
/* min-width ialah lantai: tanpanya flex:1 mengecutkan medan sampai ~100px pada
   lebar sederhana dan ia jadi tidak berguna. Dengan lantai ini + flex-wrap pada
   .head-top, ia jatuh ke barisnya sendiri dan bukannya mengecut. */
.head-search{margin-left:auto;display:flex;align-items:center;gap:8px;flex:1;
             min-width:210px;max-width:320px}
.head-search input{width:100%;border:1px solid var(--garis);border-radius:var(--r);padding:9px 12px;font:inherit;font-size:.85em;background:var(--kabus)}
.head-search input:focus{background:var(--kertas);border-color:var(--paku);outline:none}
/* CTA pengepala — pautan luar ke portal warga JPSM.
   Hijau, bukan merah: merah dikhaskan untuk Aduan di seluruh laman, jadi dua
   CTA merah akan bersaing. Ikon anak panah menandakan ia keluar dari portal. */
.btn-warga{background:var(--kanopi);color:#fff;padding:10px 16px;border-radius:var(--r);
  font-weight:600;font-size:.85em;white-space:nowrap;flex:none;
  display:inline-flex;align-items:center;gap:7px;transition:background .18s ease}
.btn-warga:hover{background:var(--paku);color:#fff}
.btn-warga svg{width:12px;height:12px;flex:none;opacity:.85}
.burger{display:none;margin-left:auto;padding:8px 12px;border:1px solid var(--garis);border-radius:var(--r);font-weight:600;font-size:.85em}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--rimba);color:#E6EFE8;overflow:hidden}
/* Hero terbelah kiri/kanan: teks pada panel pekat di kiri, media menduduki
   sebelah kanan dan berdarah ke tepi skrin.
   Media kini kelegapan PENUH — dahulu .42 semata-mata kerana teks duduk di
   atasnya. Setelah dipisahkan, tiada sebab untuk melunturkannya; kecerunan
   .hero-lapis hanya melembutkan jahitan antara panel dan media.
   Slaid bertindan; hanya .is-aktif kelihatan. */
.hero-media{position:absolute;inset:0 0 0 46%}
.hero-imej{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
           opacity:0;transition:opacity .6s ease}
.hero-imej.is-aktif{opacity:1}
/* Lajur teks dikekang supaya tidak pernah berjalan di bawah media.
   h1 dilepaskan daripada had 17ch (ditetapkan untuk hero penuh-lebar) dan
   dikecilkan sedikit — dalam lajur sempit, 17ch memaksa "Hutan" berdiri
   sendirian pada baris pertama. */
.hero-teks{max-width:560px}

/* Bar kawalan — anak terakhir .wrap, dalam aliran biasa (bukan absolute)
   supaya ia tidak boleh bertindih dengan kad Pintu pada mana-mana lebar. */
.hero-kawal{position:relative;display:flex;align-items:center;justify-content:flex-end;
            gap:14px;margin-top:18px}
.hero-titik{display:flex;gap:8px}
.hero-titik button{width:9px;height:9px;padding:0;border-radius:50%;flex:none;
                   background:rgba(255,255,255,.34);transition:background .2s ease,transform .2s ease}
.hero-titik button:hover{background:rgba(255,255,255,.62);transform:scale(1.2)}
.hero-titik button[aria-current="true"]{background:var(--tualang);transform:scale(1.2)}
.hero-jeda{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
           border:1px solid rgba(255,255,255,.3);color:#CFE0D6;flex:none;
           transition:background .2s ease,color .2s ease,border-color .2s ease}
.hero-jeda:hover{background:var(--tualang);border-color:var(--tualang);color:var(--rimba)}
.hero-jeda svg{width:12px;height:12px}
/* Ikon main disembunyikan semasa bermain, dan sebaliknya. */
.hero-jeda .ikon-main{display:none}
.hero-jeda[aria-pressed="true"] .ikon-jeda{display:none}
.hero-jeda[aria-pressed="true"] .ikon-main{display:block}
/* Hanya di atas media, meleraikan tepi kirinya ke dalam panel supaya jahitan
   itu lembut dan bukan garis lurus keras. */
.hero-lapis{position:absolute;inset:0 0 0 46%;
  background:linear-gradient(90deg,var(--rimba) 0%,var(--rimba) 5%,
             rgba(10,42,33,.80) 15%,rgba(10,42,33,.46) 32%,
             rgba(10,42,33,.20) 54%,rgba(10,42,33,.07) 78%,
             rgba(10,42,33,.03) 100%)}
/* Garis kontur dikurung pada panel teks; di atas foto ia hanya jadi bising. */
.hero-svg{position:absolute;inset:0 56% 0 0;width:auto;height:100%;opacity:.34}
.hero .wrap{position:relative;padding-top:74px;padding-bottom:56px}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.02;letter-spacing:-.032em;max-width:17ch;margin:.28em 0 .5em}
.hero p{color:#BCD2C4;max-width:56ch;font-size:1.02em}
/* Mesti datang SELEPAS .hero h1 — kekhususan sama (0,1,1), jadi urutan
   sumber yang menentukan. Melepaskan had 17ch yang ditetapkan untuk hero
   penuh-lebar: dalam lajur sempit ia memaksa "Hutan" berdiri sendirian. */
.hero-teks h1{max-width:none;font-size:clamp(1.9rem,3.4vw,3.05rem)}
.searchbig{display:flex;gap:10px;margin-top:30px;max-width:640px;flex-wrap:wrap}
.searchbig input{flex:1;min-width:240px;padding:16px 18px;font:inherit;border:1px solid rgba(255,255,255,.24);background:rgba(6,26,20,.55);color:#fff;border-radius:var(--r)}
.searchbig input::placeholder{color:#9DB6A8}
.searchbig input:focus{outline:none;border-color:var(--tualang);background:rgba(6,26,20,.75)}
.searchbig button{background:var(--tualang);color:var(--rimba);font-weight:700;padding:16px 26px;border-radius:var(--r)}
.searchbig button:hover{background:#F2C441}
.populer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;font-size:.8em;color:#9DB6A8}
.populer a{border:1px solid rgba(255,255,255,.24);padding:4px 11px;border-radius:99px;font-family:var(--data);font-size:.95em;background:rgba(6,26,20,.35)}
.populer a:hover{border-color:var(--tualang);color:var(--tualang)}

/* ---------- DUA PINTU ---------- */
.pintu{position:relative;margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.16)}
.pintu-kad{background:var(--kertas);color:var(--arang);padding:34px 32px 30px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease}
.pintu-kad:hover{transform:translateY(-4px)}
.pintu-kad h2{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.08;letter-spacing:-.022em}
.pintu-kad p{color:var(--asap);font-size:.92em}
.pintu-act{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.act-utama{background:var(--kanopi);color:#fff;padding:11px 20px;border-radius:var(--r);font-weight:700;font-size:.85em}
.act-utama:hover{background:var(--paku)}
.act-kedua{border:1px solid var(--garis);padding:11px 20px;border-radius:var(--r);font-weight:600;font-size:.85em}
.act-kedua:hover{border-color:var(--paku);color:var(--paku)}
.pintu-kad--aduan .act-utama{background:var(--bahaya)}
.pintu-kad--aduan .act-utama:hover{background:#8A2715}
.pintu-atas{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pintu-no{font-family:var(--data);font-size:.7em;letter-spacing:.14em;color:var(--tualang);font-weight:600}
.pintu-ikon{width:30px;height:30px;color:var(--paku);flex:none}
.pintu-kad--aduan .pintu-ikon{color:var(--bahaya)}

/* ---------- MAKLUMAN ---------- */
.makluman{background:var(--tualang);color:var(--rimba)}
.makluman .wrap{display:flex;align-items:center;gap:16px;padding-block:11px;flex-wrap:wrap}
.makluman-tag{font-family:var(--data);font-size:.7rem;font-weight:600;letter-spacing:.14em;background:var(--rimba);color:var(--tualang);padding:4px 10px;border-radius:var(--r);flex:none}
.makluman-teks{font-size:.87em;font-weight:500;flex:1;min-width:200px}
.makluman-teks a{text-decoration:underline;text-underline-offset:3px}
.makluman-nav{display:flex;gap:6px}
.makluman-nav button{width:26px;height:26px;border:1px solid rgba(10,42,33,.3);border-radius:var(--r);display:grid;place-items:center;font-size:.8em}
.makluman-nav button:hover{background:var(--rimba);color:var(--tualang)}

/* ---------- SEKSYEN AM ---------- */
.sek{padding-block:64px;background-color:var(--kabus);
     background-image:var(--hutan-kiri),var(--hutan-kanan),var(--hutan-jalur);
     background-repeat:no-repeat,no-repeat,repeat-x;
     background-position:left bottom,right bottom,center bottom;
     background-size:auto 300px,auto 300px,520px 132px}
/* background-image:none wajib — jalur putih mesti kekal bersih walaupun urutan peraturan berubah. */
.sek--putih{background:var(--kertas);background-image:none}
.sek-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.pautan-semua{font-weight:700;font-size:.84em;color:var(--paku);border-bottom:2px solid var(--tualang);padding-bottom:2px}
.pautan-semua:hover{color:var(--kanopi)}

/* jalur kontur pemisah */
.kontur{display:block;width:100%;height:52px;color:var(--lumut)}
.kontur--atas{background:var(--kertas)}
.kontur--bawah{background:var(--kabus)}

/* ---------- ANGKA ---------- */
.angka{background:var(--kanopi);color:#DCE9E1}
.angka .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);padding:0}
.angka-sel{background:var(--kanopi);padding:30px 24px}
.angka-nom{font-family:var(--data);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--tualang);line-height:1.05}
.angka-lab{font-size:.78em;color:#9FBBAB;margin-top:6px}

/* ---------- TAB PERKHIDMATAN ---------- */
.tabs{display:flex;gap:4px;margin-bottom:26px;border-bottom:1px solid var(--garis)}
.tab{padding:11px 20px;font-weight:700;font-size:.86em;border-bottom:3px solid transparent;color:var(--asap)}
.tab[aria-selected="true"]{color:var(--kanopi);border-bottom-color:var(--tualang)}
.panel[hidden]{display:none}
.grid-servis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.servis{background:var(--kertas);border:1px solid var(--garis);border-radius:10px;
  padding:22px 20px 20px;display:flex;flex-direction:column;gap:6px;min-height:158px;
  position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.servis:hover{border-color:var(--paku);box-shadow:0 10px 26px rgba(10,42,33,.10);transform:translateY(-3px)}

/* Ikon duotone dalam jubin berwarna. Dua lapisan dalam satu SVG: bentuk terisi
   (i-isi) pada opacity rendah untuk jisim, garis (i-garis) di atasnya untuk
   perincian — memberi rupa bergambar tanpa fail imej.
   Kedua-duanya guna currentColor, jadi ia mengikut warna jubin sendiri semasa
   hover dan kekal betul dalam mod kontras tinggi. */
.servis-tile{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  flex:none;background:#E3EDE7;color:var(--kanopi);margin-bottom:10px;
  transition:background .2s ease,color .2s ease}
.servis:hover .servis-tile{background:var(--kanopi);color:var(--tualang)}
.servis-ikon{width:25px;height:25px;display:block}
.servis-ikon .i-isi{fill:currentColor;opacity:.2}
.servis-ikon .i-garis{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.servis strong{font-family:var(--display);font-weight:700;font-size:.94rem;letter-spacing:-.008em}
.servis-teks{font-size:.79em;color:var(--asap)}
/* Anak panah muncul semasa hover — isyarat "ini boleh diklik". */
.servis::after{content:"\2192";position:absolute;right:18px;top:28px;color:var(--paku);
  font-size:1.05rem;line-height:1;opacity:0;transform:translateX(-5px);
  transition:opacity .2s ease,transform .2s ease}
.servis:hover::after{opacity:1;transform:none}

/* ---------- HUTAN LIPUR ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{border:1px solid var(--garis);background:var(--kertas);padding:7px 15px;border-radius:99px;font-size:.82em;font-weight:600}
.chip:hover{border-color:var(--paku)}
.chip[aria-pressed="true"]{background:var(--kanopi);color:#fff;border-color:var(--kanopi)}
.chip span{font-family:var(--data);font-size:.85em;opacity:.6;margin-left:6px}

.grid-lipur{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kad-lipur{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.kad-lipur:hover{border-color:var(--paku)}
.kad-img{aspect-ratio:16/10;position:relative;background:var(--kanopi);overflow:hidden}
.kad-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kad-lipur:hover .kad-img img{transform:scale(1.05)}
.status{position:absolute;top:12px;right:12px;font-family:var(--data);font-size:.62rem;font-weight:600;letter-spacing:.1em;padding:4px 9px;border-radius:99px;text-transform:uppercase;z-index:2}
.status--buka{background:var(--tualang);color:var(--rimba)}
.status--tutup{background:var(--bahaya);color:#fff}
.kad-isi{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.kad-negeri{font-family:var(--data);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paku)}
.kad-lipur h3{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
.kad-lipur p{font-size:.85em;color:var(--asap)}
.kad-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--garis);display:flex;gap:16px;font-family:var(--data);font-size:.72rem;color:var(--asap);flex-wrap:wrap}

/* ---------- INFO PERHUTANAN ---------- */
.grid-info{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--garis);border:1px solid var(--garis);border-radius:var(--r);overflow:hidden}
.info-sel{background:var(--kertas);padding:24px 22px;display:flex;gap:14px;align-items:flex-start}
.info-sel:hover{background:#F7FAF7}
.info-ikon{width:24px;height:24px;color:var(--paku);flex:none;margin-top:2px}
.info-sel strong{font-family:var(--display);font-weight:700;font-size:.98rem;display:block}
.info-sel span{font-size:.8em;color:var(--asap)}

/* ---------- BERITA ---------- */
.berita-layout{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.berita-list{display:flex;flex-direction:column;gap:20px}
.berita{display:grid;grid-template-columns:170px 1fr;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--garis)}
.berita:last-child{border-bottom:0}
.berita-img{aspect-ratio:4/3;background:var(--kanopi);border-radius:var(--r);overflow:hidden}
.berita-img img{width:100%;height:100%;object-fit:cover}
.berita time{font-family:var(--data);font-size:.72rem;color:var(--paku);letter-spacing:.06em}
.berita h3{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.25;margin:5px 0 6px;letter-spacing:-.012em}
.berita h3:hover{color:var(--paku)}
.berita p{font-size:.85em;color:var(--asap)}
.sisi-blok{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:22px;margin-bottom:20px}
.sisi-blok h3{font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:-.01em;margin-bottom:14px}
.sisi-blok ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.sisi-blok li{font-size:.85em;padding-bottom:11px;border-bottom:1px solid var(--garis)}
.sisi-blok li:last-child{border-bottom:0;padding-bottom:0}
.sisi-blok li:hover{color:var(--paku)}
.sisi-tarikh{font-family:var(--data);font-size:.7rem;color:var(--paku);display:block;margin-bottom:2px}

/* ---------- PENERBITAN ---------- */
.grid-terbit{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.terbit{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:4px}
.terbit:hover{border-color:var(--paku)}
.terbit-jenis{font-family:var(--data);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tualang);font-weight:600}
.terbit strong{font-family:var(--display);font-weight:700;font-size:.95rem}
.terbit span{font-size:.78em;color:var(--asap)}

/* ---------- NEGERI ---------- */
.grid-negeri{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.negeri{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:15px 14px;font-weight:600;font-size:.85em;display:flex;justify-content:space-between;align-items:center;gap:8px}
.negeri:hover{border-color:var(--paku);color:var(--paku)}
.negeri em{font-family:var(--data);font-style:normal;font-size:.72rem;color:var(--asap)}

/* ---------- E-PENYERTAAN ---------- */
.penyertaan{background:var(--rimba);color:#DCE9E1}
.penyertaan .wrap{padding-block:56px}
.grid-penyertaan{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);margin-top:30px}
.penyertaan-sel{background:var(--rimba);padding:22px 24px}
.penyertaan-sel strong{font-family:var(--display);font-weight:700;font-size:.98rem;display:block;margin-bottom:4px}
.penyertaan-sel span{font-size:.81em;color:#8FAA9C}
.penyertaan-sel:hover strong{color:var(--tualang)}

/* ---------- BANTUAN & ADUAN (CTA WAJIB) ---------- */
.bantuan{position:relative;overflow:hidden;background:#071E17;color:#E6EFE8}
.bantuan-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.30}
.bantuan-lapis{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,30,23,.90),rgba(7,30,23,.96))}
.bantuan .wrap{position:relative;padding-block:64px}
.bantuan-atas{text-align:center;max-width:60ch;margin:0 auto 34px}
.bantuan-atas .lede{color:#9DB6A8;margin-inline:auto}
.grid-bantuan{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bantuan-kad{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:26px 22px 24px;display:flex;flex-direction:column;gap:8px;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.bantuan-kad:hover{background:rgba(232,179,23,.12);border-color:var(--tualang);transform:translateY(-3px)}
.bantuan-ikon{width:32px;height:32px;color:var(--tualang);margin-bottom:6px}
.bantuan-kad strong{font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.015em}
.bantuan-kad span{font-size:.83em;color:#9DB6A8}
.bantuan-kad em{font-family:var(--data);font-style:normal;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tualang);margin-top:auto;padding-top:14px}
.bantuan-kad--utama{background:var(--bahaya);border-color:var(--bahaya)}
.bantuan-kad--utama:hover{background:#8A2715;border-color:#8A2715}
.bantuan-kad--utama .bantuan-ikon,.bantuan-kad--utama em{color:#fff}
.bantuan-kad--utama span{color:rgba(255,255,255,.82)}
.bantuan-talian{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;font-family:var(--data);font-size:.8rem;color:#9DB6A8}
.bantuan-talian b{color:var(--tualang);font-weight:600}

/* ---------- PAUTAN AGENSI (jalur logo sebelum footer) ----------
   Logo sumber setinggi ~40px sahaja, jadi ia dipaparkan pada saiz asal, bukan
   dibesarkan — membesarkannya hanya menghasilkan tepi kabur.
   Kelabu secara lalai supaya 21 logo pelbagai warna tidak bersaing dengan
   kandungan; warna penuh pada hover/fokus. */
.pautan-agensi{background:var(--kertas);border-top:1px solid var(--garis);padding-block:34px}
.pautan-tajuk{font-family:var(--data);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--asap);text-align:center;margin-bottom:22px}
.pautan-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 26px}
.pautan-logo{display:grid;place-items:center;height:52px;padding:6px 8px;border-radius:var(--r);
  filter:grayscale(1);opacity:.62;
  transition:filter .2s ease,opacity .2s ease,background .2s ease}
.pautan-logo img{max-height:40px;width:auto;max-width:120px;display:block}
.pautan-logo:hover,.pautan-logo:focus-visible{filter:none;opacity:1;background:var(--kabus)}
/* Mod kontras tinggi: kelabu + lut sinar merosakkan lagi keterlihatan. */
body.kontras .pautan-logo{filter:none;opacity:1}
.foot{background:var(--kanopi);color:#C6DAD0;padding-top:56px;font-size:.86em}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px}
.foot h4{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tualang);margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot a:hover{color:var(--tualang)}
.foot address{font-style:normal;line-height:1.75;color:#9FBBAB}
.foot-data{font-family:var(--data);font-size:.78rem;color:#9FBBAB;margin-top:14px;line-height:1.9}
.socmed{display:flex;gap:8px;margin-top:16px}
.socmed a{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r);display:grid;place-items:center}
.socmed a:hover{background:var(--tualang);color:var(--rimba);border-color:var(--tualang)}
.socmed svg{width:16px;height:16px}
.foot-bawah{border-top:1px solid rgba(255,255,255,.15);padding-block:20px;display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;font-size:.85em}
.foot-bawah nav{display:flex;flex-wrap:wrap;gap:16px}
.lencana{display:flex;gap:8px;flex-wrap:wrap}
.lencana span{font-family:var(--data);font-size:.66rem;letter-spacing:.08em;border:1px solid rgba(255,255,255,.24);padding:5px 9px;border-radius:var(--r);color:#9FBBAB}
.foot-akhir{background:var(--rimba);color:#7E9C8D;font-size:.78em;padding-block:16px}
.foot-akhir .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}

/* ==========================================================================
   KOMPONEN HALAMAN DALAMAN
   ========================================================================== */

/* ---------- REMAH (BREADCRUMB) ---------- */
.remah{background:var(--kertas);border-bottom:1px solid var(--garis);font-size:.8em}
.remah .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:12px;color:var(--asap)}
.remah a:hover{color:var(--paku);text-decoration:underline;text-underline-offset:3px}
.remah [aria-current]{color:var(--arang);font-weight:600}
.remah svg{width:12px;height:12px;color:var(--lumut);flex:none}

/* ---------- KEPALA HALAMAN ---------- */
.laman-tajuk{position:relative;background:var(--rimba);color:#E6EFE8;overflow:hidden}
.laman-tajuk .wrap{position:relative;padding-block:52px 46px}
.laman-tajuk h1{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.05;letter-spacing:-.03em;max-width:20ch;margin:.3em 0 .4em}
.laman-tajuk p{color:#A9C4B5;max-width:62ch}
.laman-svg{position:absolute;inset:0;width:100%;height:100%;opacity:.32;color:var(--lumut)}
.laman-tajuk--ringkas{background:var(--kanopi)}
.nota-bahasa{margin-top:16px;font-family:var(--data);font-size:.74rem;color:var(--tualang);border:1px dashed rgba(232,179,23,.5);border-radius:var(--r);padding:8px 12px;display:inline-block;max-width:none}

/* ---------- TATA LETAK 2 LAJUR ---------- */
.tataletak{display:grid;grid-template-columns:262px 1fr;gap:44px;align-items:start;padding-block:52px}
.tataletak--kanan{grid-template-columns:1fr 300px}

/* nav sisi seksyen */
.sisi-nav{position:sticky;top:156px;background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r)}
.sisi-nav h2{font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paku);padding:16px 18px 12px;border-bottom:1px solid var(--garis)}
.sisi-nav ul{list-style:none}
.sisi-nav li+li{border-top:1px solid var(--garis)}
.sisi-nav a{display:block;padding:11px 18px;font-size:.86em;font-weight:500;border-left:3px solid transparent}
.sisi-nav a:hover{background:#F7FAF7;color:var(--paku)}
.sisi-nav a[aria-current="page"]{border-left-color:var(--tualang);background:#F7FAF7;color:var(--kanopi);font-weight:700}

/* ---------- ARTIKEL (PROSA) ---------- */
.artikel{max-width:70ch}
.artikel>*+*{margin-top:1.05em}
.artikel h2{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin-top:1.8em;line-height:1.2}
.artikel h3{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.012em;margin-top:1.6em}
.artikel p{color:#31413A}
.artikel strong{color:var(--rimba)}
.artikel a:not(.act-utama):not(.act-kedua){color:var(--paku);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.artikel ul,.artikel ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.artikel li{color:#31413A}
.artikel li::marker{color:var(--paku)}
.artikel blockquote{border-left:3px solid var(--tualang);padding:4px 0 4px 20px;font-size:1.05em;color:var(--kanopi);font-style:italic}
.artikel hr{border:0;border-top:1px solid var(--garis);margin-block:2em}
.artikel figure{margin-block:1.6em}
.artikel figcaption{font-size:.8em;color:var(--asap);margin-top:8px;font-family:var(--data)}
.artikel-meta{font-family:var(--data);font-size:.75rem;color:var(--asap);letter-spacing:.05em;padding-bottom:16px;border-bottom:1px solid var(--garis);display:flex;flex-wrap:wrap;gap:6px 18px}

/* potret pegawai */
.potret{float:right;width:230px;margin:0 0 22px 28px}
.potret img{border-radius:var(--r);border:1px solid var(--garis)}
.potret figcaption{margin-top:10px;font-family:var(--body);font-size:.84em;color:var(--arang);line-height:1.45}
.potret figcaption b{display:block;font-family:var(--display);font-weight:700}
.potret figcaption span{color:var(--asap);font-size:.9em}

/* ---------- JADUAL DATA ---------- */
.jadual-bekas{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas)}
.jadual{width:100%;border-collapse:collapse;font-size:.87em;min-width:560px}
.jadual caption{text-align:left;padding:16px 18px;font-family:var(--display);font-weight:700;font-size:1rem;border-bottom:1px solid var(--garis)}
.jadual th,.jadual td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--garis)}
.jadual thead th{background:var(--kanopi);color:#DCE9E1;font-family:var(--data);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.jadual tbody tr:nth-child(even){background:#F7FAF7}
.jadual tbody tr:hover{background:#EFF5F1}
.jadual tbody tr:last-child td{border-bottom:0}
.jadual .nom{font-family:var(--data);text-align:right;white-space:nowrap}
.jadual tfoot td{background:var(--kabus);font-weight:700;border-top:2px solid var(--kanopi)}
.jadual-nota{font-size:.78em;color:var(--asap);margin-top:12px;font-family:var(--data)}

/* ---------- ALAT PENAPIS ---------- */
.alat{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.alat input[type="search"],.alat select{border:1px solid var(--garis);border-radius:var(--r);padding:10px 13px;font:inherit;font-size:.86em;background:var(--kertas);min-width:190px}
.alat input[type="search"]:focus,.alat select:focus{outline:none;border-color:var(--paku)}
.alat-kira{font-family:var(--data);font-size:.78rem;color:var(--asap);margin-left:auto}
.alat-kira b{color:var(--kanopi)}
.kosong{padding:38px 20px;text-align:center;color:var(--asap);font-size:.9em;background:var(--kertas);border:1px dashed var(--garis);border-radius:var(--r)}

/* ---------- DIREKTORI ---------- */
.grid-direktori{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pegawai{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:18px 20px;display:flex;gap:15px;align-items:flex-start}
.pegawai:hover{border-color:var(--paku)}
.pegawai-inisial{width:44px;height:44px;flex:none;border-radius:50%;background:var(--kabus);border:1px solid var(--garis);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--paku)}
.pegawai-isi{min-width:0}
.pegawai b{font-family:var(--display);font-weight:700;font-size:.96rem;display:block;letter-spacing:-.01em}
.pegawai .jawatan{font-size:.83em;color:var(--asap);display:block;margin-top:1px}
.pegawai dl{margin-top:9px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:.79em;font-family:var(--data)}
.pegawai dt{color:var(--asap)}
.pegawai dd{color:var(--arang);word-break:break-word}

/* ---------- CARTA ORGANISASI ---------- */
.carta{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:34px 24px;overflow-x:auto}
.carta-aras{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.carta-aras+.carta-aras{margin-top:34px;position:relative;padding-top:26px}
.carta-aras+.carta-aras::before{content:"";position:absolute;top:0;left:50%;width:1px;height:26px;background:var(--lumut)}
.kotak{border:1px solid var(--garis);border-radius:var(--r);padding:14px 18px;text-align:center;min-width:180px;background:var(--kertas)}
.kotak b{font-family:var(--display);font-weight:700;font-size:.9rem;display:block;line-height:1.25}
.kotak span{font-size:.76em;color:var(--asap);font-family:var(--data)}
.kotak--utama{background:var(--rimba);border-color:var(--rimba);color:#E6EFE8}
.kotak--utama span{color:var(--lumut)}
.kotak--timbalan{background:var(--kanopi);border-color:var(--kanopi);color:#E6EFE8}
.kotak--timbalan span{color:var(--lumut)}
.kotak--bahagian:hover{border-color:var(--paku);background:#F7FAF7}
.carta-aras--bahagian{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.carta-nota{font-size:.8em;color:var(--asap);text-align:center;margin-top:26px;font-family:var(--data)}

/* ---------- BORANG ---------- */
.borang{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:30px}
.borang-set{border:0;margin-bottom:30px}
.borang-set legend{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.015em;padding-bottom:6px;margin-bottom:18px;border-bottom:2px solid var(--tualang);width:100%}
.borang-baris{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.medan{margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.medan label{font-weight:600;font-size:.86em}
.medan label .wajib{color:var(--bahaya);margin-left:2px}
.medan-bantu{font-size:.78em;color:var(--asap)}
.medan input,.medan select,.medan textarea{border:1px solid var(--garis);border-radius:var(--r);padding:11px 13px;font:inherit;font-size:.9em;background:var(--kertas);width:100%}
.medan textarea{min-height:130px;resize:vertical}
.medan input:focus,.medan select:focus,.medan textarea:focus{outline:none;border-color:var(--paku);box-shadow:0 0 0 3px rgba(44,107,82,.14)}
.medan-ralat{font-size:.79em;color:var(--bahaya);font-weight:600}
.medan--ralat input,.medan--ralat select,.medan--ralat textarea{border-color:var(--bahaya);background:#FDF5F3}
.medan-radio{display:flex;flex-wrap:wrap;gap:10px}
.medan-radio label{display:flex;align-items:center;gap:8px;border:1px solid var(--garis);border-radius:var(--r);padding:10px 15px;font-weight:500;cursor:pointer}
.medan-radio input{width:auto}
.borang-ringkasan{background:#FDF5F3;border:1px solid var(--bahaya);border-left-width:4px;border-radius:var(--r);padding:18px 20px;margin-bottom:26px}
.borang-ringkasan:focus{outline:3px solid var(--tualang);outline-offset:2px}
.borang-ringkasan b{font-family:var(--display);color:var(--bahaya);display:block;margin-bottom:8px}
.borang-ringkasan ul{padding-left:1.2em;font-size:.87em;display:flex;flex-direction:column;gap:4px}
.borang-hantar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:22px;border-top:1px solid var(--garis)}
.btn-hantar{background:var(--kanopi);color:#fff;font-weight:700;padding:13px 30px;border-radius:var(--r);font-size:.9em}
.btn-hantar:hover{background:var(--paku)}
.borang-nota{font-size:.79em;color:var(--asap);max-width:46ch}

/* ---------- AKORDION ---------- */
.akordion{border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas);overflow:hidden}
.akordion-item+.akordion-item{border-top:1px solid var(--garis)}
.akordion-btn{width:100%;text-align:left;padding:17px 52px 17px 20px;font-family:var(--display);font-weight:700;font-size:.97rem;position:relative;letter-spacing:-.01em}
.akordion-btn:hover{background:#F7FAF7;color:var(--paku)}
.akordion-btn::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:var(--data);font-size:1.3rem;font-weight:400;color:var(--paku)}
.akordion-btn[aria-expanded="true"]::after{content:"–"}
.akordion-btn[aria-expanded="true"]{background:#F7FAF7}
.akordion-isi{padding:0 20px 20px;font-size:.9em;color:#31413A;max-width:74ch}
.akordion-isi>*+*{margin-top:.8em}

/* ---------- SENARAI MUAT TURUN ---------- */
.senarai-fail{display:flex;flex-direction:column;gap:10px}
.fail{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;gap:16px}
.fail:hover{border-color:var(--paku);background:#F7FAF7}
.fail-jenis{font-family:var(--data);font-size:.64rem;font-weight:600;letter-spacing:.08em;padding:6px 9px;border-radius:var(--r);background:var(--kanopi);color:var(--tualang);flex:none;min-width:48px;text-align:center}
.fail-jenis--xlsx{background:#175038}
.fail-jenis--doc{background:#1F4D72}
.fail-isi{flex:1;min-width:0}
.fail-isi b{font-family:var(--display);font-weight:700;font-size:.95rem;display:block;letter-spacing:-.01em}
.fail-isi span{font-size:.8em;color:var(--asap)}
.fail-meta{font-family:var(--data);font-size:.74rem;color:var(--asap);text-align:right;flex:none;white-space:nowrap}
.fail-meta b{display:block;color:var(--paku);font-weight:600}

/* ---------- GRID KAD HAB ---------- */
.grid-hab{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hab-kad{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column;gap:7px;min-height:150px;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.hab-kad:hover{border-color:var(--paku);background:#F7FAF7;transform:translateY(-2px)}
.hab-no{font-family:var(--data);font-size:.68rem;letter-spacing:.14em;color:var(--tualang);font-weight:600}
.hab-kad strong{font-family:var(--display);font-weight:700;font-size:1.04rem;letter-spacing:-.015em;line-height:1.2}
.hab-kad p{font-size:.84em;color:var(--asap)}
.hab-kad em{font-family:var(--data);font-style:normal;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paku);margin-top:auto;padding-top:12px}

/* ---------- PAPAN MAKLUMAT ---------- */
.papan{background:var(--kertas);border:1px solid var(--garis);border-left:4px solid var(--tualang);border-radius:var(--r);padding:20px 24px;margin-block:24px}
.papan b{font-family:var(--display);font-weight:800;display:block;margin-bottom:5px}
.papan p{font-size:.88em;color:#31413A}
.papan--amaran{border-left-color:var(--bahaya)}
.papan--hijau{border-left-color:var(--paku)}

/* ---------- PETA LAMAN ---------- */
.grid-peta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.grid-peta .sisi-blok h3 a:hover{color:var(--paku);text-decoration:underline;text-underline-offset:3px}
.grid-peta .sisi-blok li a{display:block}
.grid-peta .sisi-blok li a:hover{color:var(--paku)}

/* ---------- PAGINASI ---------- */
.paginasi{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:36px}
.paginasi a,.paginasi span{border:1px solid var(--garis);background:var(--kertas);padding:9px 15px;border-radius:var(--r);font-family:var(--data);font-size:.82rem}
.paginasi a:hover{border-color:var(--paku);color:var(--paku)}
.paginasi [aria-current="page"]{background:var(--kanopi);color:#fff;border-color:var(--kanopi);font-weight:600}

/* ==========================================================================
   MEGA MENU
   ========================================================================== */
.nav{border-top:1px solid var(--garis);position:relative}
.nav>ul{list-style:none;display:flex;flex-wrap:wrap}
.nav-item{position:static}

.nav-tajuk{display:flex;align-items:center;gap:7px;padding:14px 17px;font-weight:600;font-size:.86em;border-bottom:3px solid transparent;white-space:nowrap;background:none;color:inherit;font-family:inherit}
.nav-tajuk:hover,.nav-item.buka>.nav-tajuk{color:var(--paku);border-bottom-color:var(--tualang)}
.nav-item.buka>.nav-tajuk{background:#F7FAF7}
.nav>ul>li:first-child .nav-tajuk{padding-left:0}
.nav-tajuk .karet{width:10px;height:10px;flex:none;transition:transform .2s ease;opacity:.75}
.nav-item.buka>.nav-tajuk .karet{transform:rotate(180deg)}
.nav a[aria-current="page"],.nav-item[data-semasa] > .nav-tajuk{color:var(--kanopi);border-bottom-color:var(--tualang)}

.mega{position:absolute;left:24px;right:24px;top:100%;background:var(--kertas);border:1px solid var(--garis);border-top:3px solid var(--tualang);border-radius:0 0 var(--r) var(--r);box-shadow:0 20px 44px rgba(10,42,33,.17);padding:26px 28px 24px;z-index:55}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 30px}
.mega-grid--3{grid-template-columns:repeat(3,1fr) 1.05fr}

.mega-kol h3{font-family:var(--data);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paku);padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--garis)}
.mega-kol ul{list-style:none;display:flex;flex-direction:column}
.mega-kol li a{display:block;padding:5px 0;font-size:.83em;color:#41544B;line-height:1.4;border-bottom:1px solid transparent}
.mega-kol li a:hover{color:var(--paku)}
.mega-kol li a::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--lumut);margin-right:9px;vertical-align:middle;transition:background .15s ease}
.mega-kol li a:hover::before{background:var(--tualang)}

/* kad sorotan di hujung panel */
.mega-sorot{background:var(--rimba);color:#DCE9E1;border-radius:var(--r);padding:20px 20px 18px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
.mega-sorot .eyebrow{color:var(--tualang);position:relative}
.mega-sorot strong{font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.2;letter-spacing:-.015em;position:relative}
.mega-sorot p{font-size:.81em;color:#9DB6A8;position:relative}
.mega-sorot em{font-family:var(--data);font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tualang);margin-top:auto;padding-top:12px;position:relative}
.mega-sorot:hover{background:var(--kanopi)}
.mega-sorot svg{position:absolute;right:-18px;bottom:-18px;width:104px;height:104px;color:var(--paku);opacity:.3}

.mega-kaki{margin-top:20px;padding-top:14px;border-top:1px solid var(--garis);display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:.8em}
.mega-kaki .semua{font-weight:700;color:var(--paku);border-bottom:2px solid var(--tualang);padding-bottom:1px}
.mega-kaki .semua:hover{color:var(--kanopi)}
.mega-kaki span{color:var(--asap);font-family:var(--data);font-size:.9em}

/* ==========================================================================
   PANEL KEBOLEHCAPAIAN
   ========================================================================== */
.a11y-buka{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;background:var(--kanopi);color:var(--tualang);width:46px;height:52px;border-radius:var(--r) 0 0 var(--r);display:grid;place-items:center;box-shadow:-2px 0 10px rgba(10,42,33,.28)}
.a11y-buka:hover{background:var(--rimba)}
.a11y-buka svg{width:26px;height:26px}

.a11y-panel{position:fixed;right:0;top:0;bottom:0;width:340px;max-width:92vw;z-index:90;background:var(--kabus);border-left:1px solid var(--garis);box-shadow:-6px 0 26px rgba(10,42,33,.22);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s ease;visibility:hidden}
.a11y-panel.buka{transform:none;visibility:visible}
.a11y-kepala{background:var(--kanopi);color:#fff;display:flex;align-items:center;gap:10px;padding:15px 16px;flex:none}
.a11y-kepala h2{font-family:var(--display);font-weight:800;font-size:1rem;flex:1;letter-spacing:-.01em}
.a11y-kepala svg{width:22px;height:22px;color:var(--tualang);flex:none}
.a11y-kepala button{border:1px solid rgba(255,255,255,.3);border-radius:var(--r);width:32px;height:32px;display:grid;place-items:center;font-size:.9rem;flex:none}
.a11y-kepala button:hover{background:var(--tualang);color:var(--rimba);border-color:var(--tualang)}

.a11y-isi{overflow-y:auto;padding:14px;flex:1}
.a11y-grup{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:12px;margin-bottom:12px}
.a11y-grup h3{font-family:var(--data);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--asap);margin-bottom:10px}
.a11y-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.a11y-item{border:1px solid var(--garis);border-radius:var(--r);background:var(--kabus);padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:.7rem;font-weight:600;line-height:1.25;min-height:82px;justify-content:center}
.a11y-item:hover{border-color:var(--paku);background:#F7FAF7}
.a11y-item svg{width:21px;height:21px;color:var(--kanopi);flex:none}
.a11y-item[aria-pressed="true"]{background:var(--kanopi);border-color:var(--kanopi);color:#fff}
.a11y-item[aria-pressed="true"] svg{color:var(--tualang)}
.a11y-aras{display:flex;gap:3px;margin-top:1px}
.a11y-aras i{width:11px;height:3px;border-radius:2px;background:var(--garis);display:block}
.a11y-item[aria-pressed="true"] .a11y-aras i{background:rgba(255,255,255,.35)}
.a11y-aras i.on{background:var(--tualang)}
.a11y-nota{font-size:.72rem;color:var(--asap);padding:2px 4px 10px;line-height:1.5}

.a11y-lapis{position:fixed;inset:0;background:rgba(10,42,33,.45);z-index:85;opacity:0;visibility:hidden;transition:opacity .28s ease}
.a11y-lapis.buka{opacity:1;visibility:visible}

/* struktur halaman */
.a11y-struktur-kotak{position:fixed;inset:auto 0 0 0;top:0;z-index:95;background:var(--kabus);overflow-y:auto;padding:0}
.a11y-struktur-kotak[hidden]{display:none!important}
.a11y-struktur-kotak .wrap{padding-block:34px}
.a11y-struktur-kotak h2{font-family:var(--display);font-weight:800;font-size:1.5rem;margin-bottom:6px}
.a11y-struktur-senarai{list-style:none;margin-top:20px;background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r)}
.a11y-struktur-senarai li+li{border-top:1px solid var(--garis)}
.a11y-struktur-senarai a{display:block;padding:11px 16px;font-size:.9em}
.a11y-struktur-senarai a:hover{background:#F7FAF7;color:var(--paku)}
.a11y-struktur-senarai .aras-3{padding-left:34px;font-size:.85em;color:var(--asap)}

/* topeng baca */
.a11y-topeng-jalur{position:fixed;left:0;right:0;background:rgba(8,20,16,.72);z-index:70;pointer-events:none}

/* ==========================================================================
   KESAN KEBOLEHCAPAIAN PADA HALAMAN
   ========================================================================== */
body.a11y-tinggi-baris{line-height:2.1}
body.a11y-tinggi-baris p,body.a11y-tinggi-baris li,body.a11y-tinggi-baris dd{line-height:2.1}

body.a11y-rata-kiri,body.a11y-rata-kiri *{text-align:left!important}

/* --data mesti dipetakan semula juga. Dahulu ia fon mono (peranan berbeza, jadi
   sengaja dibiarkan); kini ia Poppins seperti yang lain, jadi meninggalkannya
   akan menyebabkan 38 peraturan label/nombor kekal Poppins sedangkan selebihnya
   bertukar — separuh halaman sahaja yang mematuhi pilihan pengguna. */
body.a11y-fon-mudah{--display:Verdana,Tahoma,Geneva,sans-serif;--body:Verdana,Tahoma,Geneva,sans-serif;--data:Verdana,Tahoma,Geneva,sans-serif}

/* Fon disleksia sebenar tiada secara luar talian — gunakan tindanan yang lebih
   mudah dibeza beserta jarak huruf dan perkataan yang dilonggarkan. */
body.a11y-disleksia{--display:'Comic Sans MS',Verdana,Tahoma,sans-serif;--body:'Comic Sans MS',Verdana,Tahoma,sans-serif;--data:'Comic Sans MS',Verdana,Tahoma,sans-serif;letter-spacing:.045em;word-spacing:.14em}
body.a11y-disleksia p,body.a11y-disleksia li{letter-spacing:.045em;word-spacing:.14em}

/* Pada <html>, bukan <body> — lihat PADA_AKAR dalam jpsm.js. */
html.a11y-kelabu{filter:grayscale(1)}

body.a11y-tanpa-imej img,body.a11y-tanpa-imej svg:not(.a11y-panel svg):not(.a11y-buka svg):not(.util-ikon svg){visibility:hidden}
/* .hero-kawal turut disembunyikan — tiada media tinggal untuk dikawal. */
body.a11y-tanpa-imej .hero-media,body.a11y-tanpa-imej .hero-kawal,
body.a11y-tanpa-imej .bantuan-img,body.a11y-tanpa-imej .laman-svg{display:none}
body.a11y-tanpa-imej .kad-img,body.a11y-tanpa-imej .berita-img{background:var(--kanopi)}

body.a11y-henti-animasi *,body.a11y-henti-animasi *::before,body.a11y-henti-animasi *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

body.a11y-tandai-pautan a:not(.a11y-item):not(.tool){text-decoration:underline!important;text-underline-offset:3px;outline:1px dotted currentColor;outline-offset:2px}

body.a11y-garis-fokus :focus{outline:4px solid var(--tualang)!important;outline-offset:3px!important;box-shadow:0 0 0 8px rgba(232,179,23,.32)!important}

body.a11y-kursor-besar,body.a11y-kursor-besar *{cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 2 6 34 14 26 20 40 26 37 20 24 32 24Z' fill='%23fff' stroke='%230A2A21' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto}

/* tooltip daripada atribut title */
.a11y-tip{position:fixed;z-index:96;background:var(--rimba);color:#fff;font-size:.8rem;padding:7px 11px;border-radius:var(--r);max-width:280px;pointer-events:none;box-shadow:0 4px 14px rgba(10,42,33,.3);line-height:1.4}

/* nav papan kekunci — papar laluan langkau sentiasa */
body.a11y-nav-kekunci .skip{position:static;display:inline-block;left:auto;margin:8px 0 0 24px}

@media(max-width:720px){
  .a11y-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}

/* ---------- KONTRAS TINGGI ---------- */
body.kontras{--kabus:#000;--kertas:#000;--arang:#fff;--asap:#e8e8e8;--garis:#fff;--rimba:#000;--kanopi:#000;--paku:#FFE45E;--lumut:#FFE45E;--tualang:#FFE45E;--bahaya:#FF7A5C}
body.kontras img{filter:grayscale(1) contrast(1.15)}
body.kontras .sek{background-image:none}
/* Corak hutan ialah background-image CSS, bukan elemen <img>/<svg>, jadi
   peraturan a11y-tanpa-imej di atas tidak menangkapnya. Buang di sini juga:
   pengguna yang mematikan imej mahu latar yang bersih. */
body.a11y-tanpa-imej .sek{background-image:none}
body.kontras .hero-lapis,body.kontras .bantuan-lapis{background:rgba(0,0,0,.86)}

/* ---------- RESPONSIF ---------- */
@media(max-width:1000px){
  /* Belahan kiri/kanan memerah teks terlalu sempit di sini — kembali kepada
     media penuh-lebar di bawah teks, dengan kelegapan dan tindanan asal. */
  .hero-media,.hero-lapis{inset:0}
  .hero-imej.is-aktif{opacity:.42}
  .hero-lapis{background:linear-gradient(105deg,rgba(10,42,33,.94) 0%,
              rgba(10,42,33,.80) 42%,rgba(10,42,33,.42) 100%)}
  .hero-svg{inset:0;width:100%}
  .hero-teks{max-width:none}

  /* Dua rimbunan 460px bertindih pada skrin sempit dan "lembah" V hilang.
     Kecilkan supaya bentuk V kekal terbaca. */
  .sek{background-size:auto 190px,auto 190px,420px 106px}
  .grid-servis,.grid-terbit,.grid-bantuan{grid-template-columns:repeat(2,1fr)}
  .mega-grid,.mega-grid--3{grid-template-columns:repeat(2,1fr)}
  .mega-sorot{grid-column:span 2}
  .grid-lipur,.grid-info{grid-template-columns:repeat(2,1fr)}
  .grid-negeri{grid-template-columns:repeat(3,1fr)}
  .berita-layout{grid-template-columns:1fr}
  .angka .wrap{grid-template-columns:repeat(2,1fr)}
  .grid-penyertaan{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .grid-hab,.grid-peta{grid-template-columns:repeat(2,1fr)}
  .carta-aras--bahagian{grid-template-columns:repeat(2,1fr)}
  .tataletak{grid-template-columns:1fr;gap:32px}
  .tataletak--kanan{grid-template-columns:1fr}
  .sisi-nav{position:static}
}
@media(max-width:720px){
  /* Di bawah lebar ini rimbunan tepi akan menutup hampir keseluruhan seksyen.
     Gugurkan keduanya; jalur kanopi tengah sahaja dikekalkan. */
  .sek{background-image:var(--hutan-jalur);background-repeat:repeat-x;
       background-position:center bottom;background-size:380px 96px}
  .burger{display:block}
  /* order:9 letak carian selepas burger, jadi ia jatuh ke baris penuhnya
     sendiri. Carian dikekalkan (bukan disembunyikan) kerana hanya laman utama
     ada carian hero — halaman lain tiada cara lain untuk mencari. */
  .head-search{order:9;flex-basis:100%;max-width:none;margin-left:0}
  .btn-warga{margin-left:auto}
  .nav>ul{display:none;flex-direction:column;padding-bottom:8px}
  .nav.buka>ul{display:flex}
  .nav>ul>li:first-child .nav-tajuk{padding-left:18px}
  .nav-item{border-top:1px solid var(--garis)}
  .nav-tajuk{width:100%;justify-content:space-between;padding:13px 18px}
  /* Pada skrin kecil panel jadi senarai boleh kembang, bukan lapisan terapung. */
  .mega{position:static;box-shadow:none;border:0;border-top:1px solid var(--garis);
        border-radius:0;padding:14px 18px 18px;background:#F7FAF7}
  .mega-grid,.mega-grid--3{grid-template-columns:1fr;gap:16px}
  .mega-sorot{display:none}
  .pintu{grid-template-columns:1fr}
  .grid-lipur,.grid-info,.grid-servis,.grid-terbit,.grid-penyertaan,.grid-bantuan{grid-template-columns:1fr}
  .grid-negeri{grid-template-columns:repeat(2,1fr)}
  .berita{grid-template-columns:1fr}
  .berita-img{aspect-ratio:16/9}
  .foot-grid{grid-template-columns:1fr}
  .hero .wrap{padding-top:48px}
  .kontur{height:32px}
  .grid-hab,.grid-peta,.grid-direktori,.borang-baris{grid-template-columns:1fr}
  .carta-aras--bahagian{grid-template-columns:1fr}
  .potret{float:none;width:100%;max-width:230px;margin:0 0 22px}
  .borang{padding:22px 18px}
  .fail{flex-wrap:wrap}
  .fail-meta{text-align:left;width:100%;padding-left:64px}
  .alat-kira{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- HALAMAN BUTIRAN HUTAN LIPUR ----------
   Enam kad pada hutan-lipur.html semuanya menuju ke href="#" � iaitu jurang
   terbesar mockup ini, kerana cadangan mockup 1 dipacu foto dan hutan lipur
   ialah kandungan terkuatnya.

   Hampir semuanya guna semula komponen sedia ada: .tataletak--kanan,
   .grid-info, .papan, .sisi-blok, .jadual, .status. Hanya dua perkara di sini
   yang belum wujud. */

/* Blok kandungan. Meminjam skala taip .artikel supaya kedua-duanya terbaca
   serupa, tetapi TANPA `max-width:70ch` miliknya � kekangan itu betul untuk
   prosa dan salah untuk jadual akses serta grid kemudahan di bawahnya. Lebar
   dihadkan pada perenggan sahaja. */
.sek-butir{margin-top:34px}
.sek-butir h2{font-family:var(--display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
.sek-butir p{color:#31413A;max-width:70ch}
.sek-butir p+p{margin-top:1.05em}

/* Imej utama halaman butiran. Nisbah dikunci supaya enam halaman mempunyai
   rupa yang sama walaupun sumber foto berbeza sedikit dimensinya. */
.lipur-utama{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--garis);margin-bottom:28px;display:block}

/* Kemudahan sebagai senarai bertanda, bukan prosa. Pelawat mengimbas ini untuk
   satu perkara sahaja � ada tandas atau tidak � dan perenggan menyembunyikan
   jawapan itu di tengah ayat. */
.kemudahan{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:10px 22px;margin-top:6px}
.kemudahan li{display:flex;align-items:center;gap:11px;font-size:.9em;
  padding:9px 0;border-bottom:1px solid var(--garis)}
.kemudahan svg{width:18px;height:18px;color:var(--paku);flex:none}

/* Pautan hutan lipur di sisi membawa nama negeri sebagai baris kedua. Tanpa
   ini <span> kekal inline dan terbaca "Taman Eko-Rimba ChemerongTerengganu"
   � dua medan berbeza bercantum menjadi satu perkataan. */
.sisi-blok li a{color:var(--kanopi);font-weight:600}
.sisi-blok li a:hover{color:var(--paku)}
.sisi-blok li a span{display:block;font-weight:400;font-size:.88em;
  color:var(--asap);margin-top:2px}

/* .info-sel dibina sebagai pautan dan membawa keadaan hover. Di sini selnya
   ialah FAKTA, bukan navigasi, jadi affordance itu dimatikan � kursor yang
   berubah atas sesuatu yang tidak boleh diklik ialah pembohongan kecil. */
.grid-info--fakta .info-sel:hover{background:var(--kertas)}

@media(max-width:720px){
  .kemudahan{grid-template-columns:1fr}
  .lipur-utama{aspect-ratio:16/9}
}

/* ---------- JALUR LANGKAH (halaman perkhidmatan) ----------
   Mockup 2 memaparkan proses sebagai tangga MENEGAK dengan garis penyambung.
   Di sini ia mendatar merentas empat lajur, kerana --wrap mockup 1 ialah 1240px
   dan ia menampung susunan itu � dan kerana dua cadangan sepatutnya menyelesaikan
   masalah yang sama dengan cara berbeza, bukan berkongsi komponen yang sama.

   Nombornya besar dan tualang: pada jalur mendatar urutan tidak lagi dinyatakan
   oleh kedudukan menegak, jadi angka itu terpaksa memikulnya sendiri. */
.langkah-jalur{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--garis);border:1px solid var(--garis);border-radius:var(--r);
  overflow:hidden;margin-top:6px;list-style:none}
.langkah-sel{background:var(--kertas);padding:22px 20px 20px}
.langkah-no{font-family:var(--data);font-weight:800;font-size:1.6rem;line-height:1;
  color:var(--tualang);display:block;margin-bottom:10px}
.langkah-sel strong{font-family:var(--display);font-weight:700;font-size:.98rem;
  letter-spacing:-.01em;line-height:1.25;display:block;margin-bottom:5px}
.langkah-sel p{font-size:.83em;color:var(--asap);line-height:1.55}

/* Butang penuh lebar dalam blok sisi. .act-utama ialah inline-block secara
   lalai, jadi di sini ia perlu dinyatakan supaya ia tidak terapung separuh
   lebar dalam kotak sisi 300px. */
.sisi-blok .act-utama{display:block;text-align:center;margin-top:4px}

@media(max-width:900px){
  .langkah-jalur{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .langkah-jalur{grid-template-columns:1fr}
}

/* ---------- GALERI VIDEO ----------
   Dibina atas .berita-img yang sedia ada, cuma menambah apa yang video perlukan
   dan berita tidak: affordance main dan tempoh. Grid dua lajur, bukan senarai
   penuh lebar seperti .berita � lakaran kecil video diimbas, bukan dibaca.

   Mockup 2 mendapat .grid-video tersendiri dengan bulatan main bertindih di
   tengah. Di sini bentuknya segi empat --r 4px dengan aksen tualang, mengikut
   loghat mockup 1. */
.grid-video{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.video-kad{background:var(--kertas);border:1px solid var(--garis);
  border-radius:var(--r);overflow:hidden;display:block}
.video-kad:hover{border-color:var(--paku)}
.video-imej{position:relative;aspect-ratio:16/9;background:var(--kanopi);overflow:hidden}
.video-imej img{width:100%;height:100%;object-fit:cover}
.video-main{position:absolute;inset:0;display:grid;place-items:center}
.video-main svg{width:52px;height:52px;border-radius:var(--r);
  background:rgba(10,42,33,.82);color:#fff;padding:13px;
  transition:background .15s ease,color .15s ease}
.video-kad:hover .video-main svg{background:var(--tualang);color:var(--rimba)}
.video-masa{position:absolute;right:10px;bottom:10px;font-family:var(--data);
  font-size:.7rem;font-weight:600;background:rgba(10,42,33,.88);color:#fff;
  padding:3px 8px;border-radius:var(--r)}
.video-isi{padding:16px 18px 18px}
.video-isi strong{font-family:var(--display);font-weight:700;font-size:.98rem;
  letter-spacing:-.01em;line-height:1.25;display:block;margin-bottom:5px}
.video-isi p{font-size:.84em;color:var(--asap);line-height:1.55}

/* Baris kalendar: tarikh sebagai lajur berlabuh supaya mata boleh mengimbas
   ke bawah tanpa membaca tajuk setiap acara. */
.jadual td.tarikh{font-family:var(--data);font-size:.82rem;color:var(--paku);
  font-weight:600;white-space:nowrap;vertical-align:top}

@media(max-width:720px){
  .grid-video{grid-template-columns:1fr}
}

/* ---------- LENCANA JENIS FAIL: CSV ----------
   Format keempat, dan set sedia ada hanya meliputi PDF, XLSX dan DOC. Plum
   dipilih kerana ia satu-satunya rona yang tinggal yang tidak bertembung dengan
   hijau XLSX atau biru DOC pada lencana selebar 48px.

   Kesemua lencana membawa teks tualang, bukan putih, jadi kontras diukur
   terhadap #E8B317: plum 5.15. Ukuran yang sama mendedahkan XLSX sedia ada pada
   3.83 � gagal AA � jadi ia digelapkan kepada #175038 (4.86) pada masa yang
   sama, kerana membiarkan satu jiran gagal sambil menambah yang lulus di
   sebelahnya tidak masuk akal. */
.fail-jenis--csv{background:#6B2D4F}

/* ---------- BLOK BAHAGIAN ----------
   bahagian-unit.html ialah satu halaman dengan sauh setiap bahagian, bukan 13
   halaman nipis. scroll-margin-top wajib: kepala tapak melekat, dan tanpanya
   setiap lompatan sauh mendaratkan tajuk bahagian di BELAKANG kepala itu. */
.bahagian-blok{scroll-margin-top:156px;padding-bottom:34px;margin-bottom:34px;
  border-bottom:1px solid var(--garis)}
.bahagian-blok:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.bahagian-blok .hab-no{margin-bottom:6px}
.bahagian-blok h2{font-family:var(--display);font-weight:800;font-size:1.42rem;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.bahagian-blok>p{color:#31413A;max-width:70ch;margin-bottom:14px}

/* ---------- GLOSARI ----------
   Setiap istilah dibalut <div data-teks> kerana penapis beroperasi pada satu
   elemen setiap rekod, dan <dt>+<dd> ialah dua. Membalutnya memberi penapis
   satu sasaran, dan menyembunyikan istilah bersama maknanya sekali gus. */
.glosari{border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas)}
.glosari>div{padding:16px 20px}
.glosari>div+div{border-top:1px solid var(--garis)}
.glosari dt{font-family:var(--display);font-weight:700;font-size:.96rem;
  color:var(--kanopi);margin-bottom:4px}
.glosari dd{font-size:.88em;color:#31413A;line-height:1.6;max-width:74ch}