/* ==========================================================================
   Sistem reka bentuk JPSM — MOCKUP 2 (portal mengutamakan tugasan)
   --------------------------------------------------------------------------
   Sengaja BERASINGAN daripada jpsm.css mockup 1. Dua mockup yang berkongsi
   satu helaian gaya bermakna setiap perubahan pada satu berisiko merosakkan
   yang lain; kebebasan lebih bernilai daripada mengelak pertindihan di sini.

   Idea teras: putih dominan, padat, berasaskan GARIS bukan kad berbayang.
   Hijau ialah aksen untuk pautan dan tindakan, bukan latar seksyen besar.
   ========================================================================== */
:root{
  --rimba:#0A2A21;
  --kanopi:#144535;
  --paku:#1F6B4F;
  --paku-gelap:#155238;
  --lumut:#E8F0EB;
  --kertas:#FFFFFF;
  --kabus:#F6F8F6;
  --arang:#121815;
  --asap:#59665F;
  --garis:#D3DBD6;
  --garis-tebal:#A9B7AF;
  --tualang:#B8860B;
  --bahaya:#A32116;
  --bahaya-latar:#FDF3F1;
  --fokus:#0B57D0;

  --tajuk:'Source Serif 4',Georgia,'Times New Roman',serif;
  --badan:'Inter',system-ui,-apple-system,sans-serif;

  --sk:1rem;
  --wrap:1180px;

  /* Skala lengkung. Mockup 1 guna bulat sederhana (4–11px) pada kad berbayang;
     mockup 2 pergi jauh lebih lembut — jejari besar, bentuk pil, dan tepi jalur
     melengkung. Lengkung yang MURAH HATI, bukan sekadar sudut tumpul, supaya
     kedua-dua cadangan masih jelas berbeza. */
  --r:10px;                      /* lalai: medan, kad kecil */
  --r-besar:22px;                /* kad utama, panel */
  --r-jalur:44px;                /* tepi jalur penuh-lebar */
  --r-pil:999px;                 /* butang, cip, carian */
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--kertas);color:var(--arang);font-family:var(--badan);
     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}
/* Garis fokus biru, bukan emas: pada latar putih, emas gagal ujian kontras. */
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--rimba);
      color:#fff;padding:12px 20px;font-weight:600}
.skip:focus{left:0}

h1,h2,h3,h4{font-family:var(--tajuk);font-weight:700;line-height:1.18;
            letter-spacing:-.012em;color:var(--rimba)}

/* ---------- BAR UTILITI ---------- */
.util{background:var(--rimba);color:#D6E3DA;font-size:.8em}
.util .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
            justify-content:space-between;min-height:38px}
.util-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.util a:hover{color:#fff;text-decoration:underline}
.util-tools{display:flex;align-items:center;gap:8px}
.tool{border:1px solid rgba(255,255,255,.3);padding:2px 11px;border-radius:var(--r-pil);
      font-size:.95em;line-height:1.5}
/* `.util a:hover` (0,2,1) mengatasi `.tool:hover` (0,2,0) untuk color —
   pemilih `.util a.tool:hover` (0,3,1) diperlukan. Jangan ringkaskan. */
.tool:hover,.util a.tool:hover,
.tool[aria-pressed="true"],.tool[aria-current="true"]{background:#fff;color:var(--rimba);
      border-color:#fff;font-weight:600}
.util-sep{width:1px;height:16px;background:rgba(255,255,255,.25)}

/* ---------- PENGEPALA ---------- */
.head{background:var(--kertas);border-bottom:1px solid var(--garis);
      position:sticky;top:0;z-index:40}
.head-top{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap}
.crest{flex:none;display:block;line-height:0}
.crest img{height:54px;width:auto}
.brand-name{font-family:var(--tajuk);font-weight:700;font-size:1.04rem;line-height:1.2}
.brand-sub{font-size:.76rem;color:var(--asap)}
/* min-width ialah lantai: tanpanya flex:1 mengecutkan medan sampai tak berguna
   pada lebar sederhana. Dengan flex-wrap ia jatuh ke barisnya sendiri. */
/* Sempadan pada BEKAS, bukan pada <input>. Dengan overflow:hidden pada bentuk
   pil, sempadan input dipotong oleh lengkung dan meninggalkan cebisan garis
   yang kelihatan pecah di tepi kiri. Bekas juga yang menerima keadaan fokus,
   melalui :focus-within, supaya seluruh pil menyala sebagai satu unit. */
.head-cari{margin-left:auto;display:flex;flex:1;min-width:230px;max-width:380px;
           border:1px solid var(--garis-tebal);border-radius:var(--r-pil);
           overflow:hidden;background:var(--kertas)}
.head-cari:focus-within{border-color:var(--paku);box-shadow:0 0 0 1px var(--paku)}
.head-cari input{width:100%;border:0;background:none;
      padding:10px 18px;font:inherit;font-size:.88em}
.head-cari input:focus{outline:none}
.head-cari button{background:var(--paku);color:#fff;padding:0 20px;font-weight:600;
      font-size:.88em;white-space:nowrap;
      border-radius:0 var(--r-pil) var(--r-pil) 0}
.head-cari button:hover{background:var(--paku-gelap)}
.btn-warga{background:var(--rimba);color:#fff;padding:10px 18px;border-radius:var(--r-pil);
      font-weight:600;font-size:.86em;white-space:nowrap;flex:none;
      display:inline-flex;align-items:center;gap:7px}
.btn-warga:hover{background:var(--kanopi);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-tebal);
      border-radius:var(--r);font-weight:600;font-size:.86em}

/* ---------- MEGA MENU ----------
   Panel dikumpulkan mengikut TUGASAN, bukan mengikut bahagian jabatan — susunan
   maklumat mockup 2 kekal walaupun bentuk menu berubah.
   Mengikut tema lengkung: panel berjejari besar, bukan kotak bersudut tajam. */
.nav{border-bottom:1px solid var(--garis);background:var(--kertas);position:relative;z-index:30}
.nav .wrap{position:relative}
.nav ul{list-style:none;display:flex;flex-wrap:wrap}
.nav-item{position:static}
.nav-pautan{display:flex;align-items:center;gap:6px;padding:13px 20px;font-weight:600;
  font-size:.92em;color:var(--arang);border-bottom:3px solid transparent;
  border-radius:var(--r-pil) var(--r-pil) 0 0;white-space:nowrap}
.nav-pautan:hover{color:var(--paku);background:var(--kabus)}
.nav-pautan[aria-current="page"],.nav-pautan[data-semasa]{color:var(--paku);
  border-bottom-color:var(--paku)}
.nav-panah{width:14px;height:14px;flex:none;transition:transform .2s ease;opacity:.7}
.nav-item.buka .nav-panah{transform:rotate(180deg)}
.nav-item.buka .nav-pautan{color:var(--paku);background:var(--kabus)}

/* Panel dijajarkan pada .wrap (nav-item ialah position:static), jadi ia
   sentiasa sepadan dengan lebar kandungan halaman, bukan lebar butang. */
.mega{position:absolute;left:0;right:0;top:100%;z-index:35;
  background:var(--kertas);border:1px solid var(--garis);
  border-radius:0 0 var(--r-besar) var(--r-besar);border-top:0;
  box-shadow:0 18px 44px rgba(10,42,33,.16);padding:24px 26px 22px}
.mega-dalam{display:grid;grid-template-columns:repeat(3,1fr) 300px;gap:26px}
.mega-kol h3{font-family:var(--badan);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--asap);margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--garis)}
.mega-kol ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.mega-kol a{display:block;padding:7px 10px;margin-inline:-10px;font-size:.89em;
  font-weight:500;color:var(--paku);border-radius:var(--r)}
.mega-kol a:hover{background:var(--kabus);color:var(--paku-gelap)}

/* Sorotan: satu tindakan utama per panel, supaya menu bukan sekadar dinding
   pautan yang sama beratnya. */
.mega-sorot{background:var(--rimba);color:#DCEAE1;border-radius:var(--r-besar);
  padding:20px 22px;display:flex;flex-direction:column;gap:7px;justify-content:center}
.mega-sorot strong{font-family:var(--tajuk);font-size:1.06rem;color:#fff;line-height:1.25}
.mega-sorot span{font-size:.85em;color:#9FBCAC;line-height:1.5}
.mega-sorot:hover{background:var(--kanopi);color:#DCEAE1}
.mega-sorot:hover strong{color:var(--tualang)}

@media(max-width:1000px){
  .mega-dalam{grid-template-columns:repeat(2,1fr)}
  .mega-sorot{grid-column:span 2}
}
@media(max-width:720px){
  /* Pada skrin kecil panel jadi senarai boleh kembang dalam aliran, bukan
     lapisan terapung — lapisan terapung tiada ruang untuk dibuka. */
  .nav ul{display:none;flex-direction:column}
  .nav.buka ul{display:flex}
  .nav-item{width:100%}
  .nav-pautan{width:100%;justify-content:space-between;border-radius:0;
    border-bottom:0;border-top:1px solid var(--garis)}
  .nav-pautan[aria-current="page"],.nav-pautan[data-semasa]{
    border-left:3px solid var(--paku);border-bottom:0}
  .mega{position:static;box-shadow:none;border:0;border-radius:0;
    border-top:1px solid var(--garis);padding:14px 12px 16px;background:var(--kabus)}
  .mega-dalam{grid-template-columns:1fr;gap:16px}
  .mega-sorot{grid-column:auto}
}

/* ---------- SUB-NAV SEKSYEN ----------
   Jalur mendatar di bawah masthead pada halaman hab. Sengaja BUKAN bar sisi:
   halaman hab ada dua hingga tiga seksyen kad, dan bar sisi di sebelah
   kandungan berbilang seksyen jadi janggal. Jalur ini memberi laluan sisi
   antara halaman adik-beradik — dahulu sekali anda masuk ke satu kad, satu-
   satunya jalan ke kad sebelahnya ialah undur ke belakang. */
.sub-nav{border-bottom:1px solid var(--garis);background:var(--kertas)}
.sub-nav .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:12px}
.sub-nav-tajuk{font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--asap);flex:none}
.sub-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.sub-nav a{display:block;padding:7px 16px;border-radius:var(--r-pil);
  font-size:.87em;font-weight:500;color:var(--paku);border:1px solid transparent}
.sub-nav a:hover{background:var(--kabus);border-color:var(--garis)}
.sub-nav a[aria-current="page"]{background:var(--rimba);color:#fff;font-weight:600}

@media(max-width:720px){
  .sub-nav .wrap{align-items:flex-start;flex-direction:column;gap:8px}
}

/* ---------- REMAH ---------- */
.remah{background:var(--kabus);border-bottom:1px solid var(--garis);font-size:.83em}
.remah .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:10px}
.remah a{color:var(--paku)}
.remah a:hover{text-decoration:underline}
.remah svg{width:13px;height:13px;color:var(--garis-tebal);flex:none}
.remah [aria-current="page"]{color:var(--asap)}

/* ---------- PENGHALA TUGASAN (laman utama) ----------
   Bahagian paling penting mockup ini: pengguna tiba dan terus melihat apa yang
   boleh dibuat, bukan lawatan bergambar tentang jabatan. */
/* Jalur pembuka gelap. Versi pertama seluruhnya putih dan rata — ia "tenang"
   sampai jadi hambar. Jalur pekat memberi halaman satu pembukaan yang yakin,
   dan kad niat kemudian BERTINDIH naik ke atasnya, jadi mata tahu di mana nak
   mula. Ini bukan hero bergambar mockup 1: tiada foto, warna sahaja. */
/* Tepi bawah melengkung — peralihan jalur gelap ke putih jadi lembut,
   bukan potongan mendatar keras. Ini isyarat 'tema lengkung' yang paling
   jelas dan mockup 1 tiada apa-apa seumpamanya. */
.penghala{background:var(--rimba);color:#DCEAE1;padding-block:60px 112px;position:relative;
          overflow:hidden;border-radius:0 0 var(--r-jalur) var(--r-jalur)}
.penghala .wrap{position:relative;z-index:2}
.penghala h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.5rem);max-width:17ch;
             letter-spacing:-.022em;margin-bottom:12px}
.penghala .lede{color:#9FBCAC;max-width:54ch;font-size:1.06em}
/* Latar jalur: garis kontur topografi + dua pancaran radial.
   Kontur dipilih dengan sengaja. Mockup 1 sudah guna foto/video dalam hero dan
   siluet pokok pada jalur seksyen; mengulangi mana-mana satu di sini akan
   membuat dua cadangan itu bertemu. Garis kontur merujuk peta ukur hutan —
   sesuai dengan watak "perkhidmatan & data" mockup 2, dan tiada kaitan visual
   dengan pokok mockup 1.
   Lapisan PERTAMA dicat paling atas, jadi kontur duduk di atas pancaran. */
.penghala::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='820' viewBox='0 0 820 820'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.15'%3E%3Cpath d='M760.3 720.0C761.8 727.3 761.5 735.5 759.8 742.8C758.1 750.0 754.2 757.1 750.4 763.5C746.6 769.9 741.7 775.7 736.8 781.3C732.0 786.8 726.9 792.3 721.2 796.7C715.5 801.2 709.1 805.6 702.4 808.1C695.7 810.6 688.0 811.8 681.0 811.9C673.9 812.0 666.7 810.1 660.0 808.8C653.3 807.5 647.3 805.4 640.8 804.3C634.2 803.2 627.7 803.0 620.5 802.0C613.3 801.0 604.9 800.8 597.6 798.2C590.3 795.7 582.1 791.9 576.6 786.5C571.1 781.1 566.9 773.3 564.8 765.9C562.6 758.4 563.3 749.6 563.9 741.9C564.5 734.3 566.9 727.0 568.3 720.0C569.8 713.0 571.1 706.7 572.6 700.1C574.1 693.4 575.1 686.6 577.4 680.2C579.8 673.8 582.7 667.2 586.7 661.6C590.7 656.0 596.1 651.0 601.5 646.6C606.9 642.2 613.0 638.8 619.1 635.1C625.2 631.5 631.4 627.8 638.3 624.7C645.1 621.7 652.5 618.1 660.0 616.8C667.5 615.5 676.2 615.1 683.5 617.1C690.8 619.2 698.2 623.9 703.8 629.0C709.5 634.2 713.5 641.8 717.3 648.1C721.1 654.4 723.3 661.1 726.7 666.8C730.1 672.6 733.7 677.2 737.7 682.6C741.8 688.0 747.3 693.0 751.0 699.2C754.8 705.5 758.9 712.7 760.3 720.0Z' opacity='0.3'/%3E%3Cpath d='M797.8 720.0C797.7 730.1 794.7 740.4 791.8 750.1C788.8 759.7 784.6 768.9 780.1 777.8C775.5 786.7 770.8 795.7 764.5 803.4C758.3 811.0 751.0 818.6 742.8 823.8C734.5 828.9 724.5 832.3 715.1 834.4C705.7 836.5 695.7 835.8 686.5 836.2C677.3 836.6 669.0 836.1 660.0 836.9C651.0 837.7 642.2 840.1 632.4 841.1C622.5 842.2 611.1 844.5 600.7 843.2C590.2 841.9 578.4 838.9 569.8 833.2C561.1 827.4 553.7 818.0 548.8 808.7C544.0 799.4 542.3 787.6 540.7 777.5C539.1 767.3 539.6 757.2 539.1 747.6C538.7 738.0 538.0 729.2 537.8 720.0C537.7 710.8 537.0 701.4 538.3 692.2C539.6 683.1 542.0 673.5 545.8 665.0C549.7 656.5 555.5 648.7 561.3 641.3C567.1 633.8 573.8 627.3 580.6 620.5C587.5 613.6 594.3 606.4 602.3 600.1C610.3 593.8 619.1 586.6 628.7 582.7C638.3 578.9 649.7 576.1 660.0 576.9C670.3 577.7 681.3 582.3 690.2 587.6C699.1 593.0 706.5 601.9 713.5 609.0C720.4 616.0 725.4 623.6 731.9 629.9C738.3 636.2 744.9 640.8 752.1 646.6C759.3 652.4 768.2 657.5 774.9 664.7C781.7 671.8 788.8 680.5 792.6 689.7C796.4 699.0 798.0 709.9 797.8 720.0Z' opacity='0.281'/%3E%3Cpath d='M832.9 720.0C832.2 732.9 830.3 745.7 827.4 758.2C824.5 770.7 821.3 783.6 815.7 795.0C810.0 806.3 802.6 817.8 793.5 826.4C784.3 835.0 772.3 841.6 761.0 846.7C749.8 851.7 737.2 853.5 725.9 856.8C714.6 860.1 704.4 862.4 693.4 866.4C682.4 870.4 672.1 876.6 660.0 881.0C647.9 885.4 634.0 891.6 620.6 892.7C607.1 893.8 591.6 892.7 579.3 887.6C567.0 882.4 555.5 872.2 546.9 861.8C538.4 851.4 533.1 837.4 528.0 825.3C522.9 813.2 520.2 800.8 516.5 789.1C512.8 777.4 508.9 766.7 506.0 755.2C503.0 743.6 499.6 731.9 498.9 720.0C498.2 708.1 499.1 695.5 501.8 683.9C504.4 672.2 509.7 661.0 514.8 650.1C519.9 639.1 526.0 628.9 532.3 618.2C538.7 607.4 544.7 595.9 552.8 585.5C560.9 575.2 569.9 563.4 581.0 555.9C592.0 548.4 605.9 542.3 619.1 540.8C632.3 539.3 647.4 542.6 660.0 547.0C672.6 551.4 684.2 560.5 694.9 567.1C705.6 573.7 714.2 581.1 724.2 586.7C734.3 592.3 744.3 595.6 755.2 600.7C766.0 605.7 778.7 609.8 789.1 617.0C799.5 624.3 810.3 633.6 817.4 644.2C824.5 654.8 829.0 668.2 831.6 680.8C834.2 693.5 833.6 707.1 832.9 720.0Z' opacity='0.262'/%3E%3Cpath d='M873.6 720.0C873.9 735.9 873.9 752.6 870.0 767.9C866.2 783.2 859.7 799.1 850.6 811.8C841.6 824.5 828.2 835.2 815.8 844.3C803.5 853.3 788.9 858.8 776.5 866.0C764.0 873.3 752.8 879.5 740.9 887.9C728.9 896.3 718.3 907.5 704.8 916.4C691.3 925.3 676.0 936.5 660.0 941.2C644.0 945.9 624.9 948.0 608.7 944.6C592.6 941.2 576.3 931.3 563.2 921.0C550.1 910.7 540.0 895.5 530.4 882.6C520.7 869.6 513.4 856.1 505.4 843.3C497.4 830.5 489.1 818.7 482.4 805.5C475.6 792.4 468.5 778.8 464.7 764.6C460.9 750.3 459.4 734.8 459.6 720.0C459.9 705.2 463.4 690.5 466.4 675.8C469.4 661.2 473.3 647.1 477.6 632.2C481.9 617.2 485.3 601.1 492.1 586.1C498.9 571.2 506.8 554.2 518.3 542.4C529.9 530.5 545.5 519.9 561.2 514.9C577.0 510.0 596.2 510.7 612.7 512.8C629.2 514.8 645.3 522.5 660.0 527.2C674.7 531.9 687.1 537.5 700.9 541.0C714.7 544.4 728.2 545.0 742.8 548.0C757.4 551.0 774.1 552.7 788.5 558.9C802.9 565.1 817.9 574.0 829.1 585.2C840.2 596.3 848.8 611.4 855.4 625.9C861.9 640.5 865.3 656.8 868.3 672.5C871.3 688.1 873.4 704.1 873.6 720.0Z' opacity='0.243'/%3E%3Cpath d='M921.6 720.0C920.9 739.1 916.5 759.5 908.7 776.8C901.0 794.0 887.3 809.7 875.0 823.5C862.8 837.4 847.5 847.5 835.1 859.7C822.8 871.8 812.2 882.9 800.8 896.5C789.4 910.2 780.1 927.1 766.6 941.4C753.1 955.7 737.6 972.8 719.8 982.2C702.1 991.6 679.9 997.9 660.0 997.6C640.1 997.3 618.6 989.4 600.5 980.6C582.5 971.8 566.6 957.2 551.6 945.0C536.7 932.8 523.9 919.8 510.7 907.2C497.5 894.6 484.1 883.1 472.6 869.5C461.0 855.8 449.5 841.2 441.6 825.2C433.7 809.2 428.6 791.1 425.3 773.6C422.0 756.0 422.2 738.0 421.6 720.0C420.9 702.0 420.8 684.4 421.3 665.5C421.8 646.6 420.7 626.2 424.5 606.6C428.4 587.0 433.5 564.8 444.2 547.9C455.0 531.1 471.5 515.1 489.0 505.6C506.6 496.1 529.8 492.7 549.7 490.9C569.6 489.1 590.2 493.6 608.6 494.8C627.0 495.9 642.8 497.9 660.0 497.6C677.2 497.3 693.7 493.6 711.8 493.1C729.9 492.6 750.1 490.7 768.6 494.5C787.0 498.4 806.6 505.8 822.4 516.3C838.2 526.8 851.9 542.4 863.5 557.7C875.1 573.0 883.8 590.8 892.1 608.2C900.3 625.7 907.8 643.7 912.8 662.3C917.7 680.9 922.2 700.9 921.6 720.0Z' opacity='0.224'/%3E%3Cpath d='M961.2 720.0C956.2 741.9 943.6 763.2 933.0 782.3C922.4 801.4 908.0 816.9 897.5 834.4C887.0 851.9 879.1 868.2 870.0 887.5C861.0 906.7 855.1 929.6 843.2 949.8C831.4 969.9 817.3 993.5 798.9 1008.5C780.5 1023.4 756.0 1035.1 732.9 1039.4C709.7 1043.6 683.1 1039.3 660.0 1033.9C636.9 1028.5 615.1 1016.6 594.5 1007.1C573.9 997.5 555.3 987.1 536.5 976.5C517.7 965.8 498.7 956.2 481.9 943.3C465.1 930.4 448.3 915.8 435.4 899.1C422.6 882.3 412.9 862.4 404.7 842.9C396.5 823.5 392.1 803.0 386.1 782.5C380.2 762.0 374.3 742.0 369.2 720.0C364.2 698.0 356.7 674.3 355.8 650.6C355.0 626.8 355.6 599.6 364.2 577.5C372.7 555.5 388.8 533.5 407.2 518.4C425.5 503.3 451.7 494.1 474.1 486.9C496.6 479.7 520.9 479.2 542.1 475.1C563.2 471.0 581.5 467.7 601.2 462.2C620.8 456.7 639.2 447.3 660.0 441.9C680.8 436.5 704.0 429.7 726.2 429.9C748.4 430.1 772.6 434.7 793.4 443.1C814.2 451.5 833.5 466.0 851.0 480.5C868.5 495.0 883.8 512.4 898.3 530.0C912.8 547.6 927.3 565.9 938.1 586.1C948.9 606.2 959.4 628.5 963.3 650.8C967.2 673.1 966.3 698.1 961.2 720.0Z' opacity='0.205'/%3E%3Cpath d='M983.3 720.0C976.2 744.3 964.8 765.3 958.2 788.1C951.6 810.8 948.4 832.1 943.8 856.7C939.2 881.3 938.9 909.7 930.5 935.7C922.1 961.8 911.2 991.9 893.6 1013.0C876.1 1034.1 850.4 1052.3 824.9 1062.5C799.5 1072.6 768.3 1074.0 740.8 1073.9C713.3 1073.9 685.8 1067.0 660.0 1062.2C634.2 1057.4 610.0 1051.8 585.8 1045.0C561.6 1038.3 537.1 1032.3 514.7 1021.7C492.3 1011.1 470.0 997.7 451.5 981.5C432.9 965.3 417.7 944.5 403.5 924.5C389.3 904.5 378.8 882.9 366.2 861.5C353.7 840.0 340.3 819.3 328.1 795.7C316.0 772.2 300.4 746.9 293.3 720.0C286.2 693.1 280.7 661.6 285.5 634.5C290.3 607.4 304.5 578.8 322.1 557.3C339.7 535.8 367.5 519.5 391.0 505.5C414.6 491.6 441.0 484.3 463.4 473.5C485.9 462.7 504.9 452.9 525.6 440.8C546.2 428.8 564.8 412.6 587.2 401.2C609.6 389.8 634.6 377.0 660.0 372.2C685.4 367.4 713.7 367.7 739.4 372.3C765.0 377.0 790.4 388.4 814.1 400.0C837.8 411.6 860.2 426.3 881.7 442.0C903.1 457.8 925.3 474.3 943.0 494.3C960.7 514.3 978.3 537.4 987.9 562.1C997.5 586.7 1001.6 615.9 1000.8 642.2C1000.1 668.5 990.4 695.7 983.3 720.0Z' opacity='0.186'/%3E%3Cpath d='M1010.8 720.0C1010.3 747.2 1014.1 772.2 1016.0 801.2C1017.9 830.3 1025.2 863.0 1022.2 894.4C1019.2 925.8 1013.3 962.0 998.1 989.6C983.0 1017.3 957.6 1042.9 931.3 1060.2C904.9 1077.5 870.5 1086.4 839.9 1093.5C809.3 1100.7 777.5 1101.3 747.5 1103.3C717.5 1105.3 688.9 1106.7 660.0 1105.7C631.1 1104.8 601.6 1104.1 573.8 1097.5C546.1 1090.9 518.0 1080.1 493.4 1066.0C468.8 1051.9 447.3 1031.9 426.3 1013.1C405.3 994.3 387.7 973.6 367.5 953.2C347.3 932.9 325.5 914.0 305.1 890.9C284.7 867.8 259.8 843.2 245.1 814.7C230.4 786.2 217.4 751.7 216.8 720.0C216.3 688.3 226.9 652.9 241.9 624.6C256.9 596.2 284.2 571.6 306.8 549.9C329.4 528.3 355.8 513.0 377.3 494.6C398.9 476.2 416.6 458.8 436.2 439.4C455.9 420.0 473.0 396.5 495.4 378.2C517.8 359.8 543.4 340.3 570.8 329.2C598.2 318.1 630.0 312.7 660.0 311.7C690.0 310.8 720.9 316.9 750.5 323.4C780.2 329.9 809.4 339.2 837.9 350.6C866.3 362.1 896.3 374.4 921.3 392.3C946.4 410.2 971.8 432.5 988.3 458.2C1004.8 483.9 1015.3 516.4 1020.5 546.4C1025.6 576.4 1020.8 609.1 1019.2 638.0C1017.6 666.9 1011.4 692.8 1010.8 720.0Z' opacity='0.167'/%3E%3Cpath d='M1079.2 720.0C1089.4 751.9 1106.1 787.1 1110.3 822.8C1114.5 858.4 1115.2 899.9 1104.3 934.0C1093.4 968.0 1070.3 1001.5 1044.9 1027.0C1019.6 1052.4 984.1 1070.5 952.3 1086.5C920.5 1102.6 886.5 1112.6 854.2 1123.3C821.9 1134.0 790.7 1144.2 758.3 1150.7C725.9 1157.3 692.5 1163.5 660.0 1162.5C627.5 1161.6 593.7 1154.9 563.1 1144.8C532.4 1134.6 504.2 1117.1 476.2 1101.7C448.1 1086.4 423.1 1069.1 394.9 1052.4C366.7 1035.7 336.1 1021.6 307.0 1001.5C277.8 981.4 243.2 960.1 219.9 931.9C196.7 903.7 174.9 867.7 167.4 832.4C160.0 797.1 164.9 755.1 175.2 720.0C185.4 684.9 209.9 651.3 229.0 621.6C248.1 591.9 271.6 568.1 289.8 541.7C308.0 515.4 321.7 490.3 338.2 463.3C354.6 436.3 368.0 405.5 388.7 379.8C409.3 354.0 433.9 327.2 462.0 308.8C490.1 290.4 524.1 277.8 557.2 269.4C590.2 261.0 625.5 259.5 660.0 258.5C694.5 257.6 729.5 258.6 764.2 263.4C798.9 268.2 836.0 273.6 868.4 287.3C900.8 301.0 934.3 320.5 958.5 345.6C982.8 370.7 1001.1 405.5 1013.8 437.9C1026.4 470.2 1028.6 507.5 1034.4 539.7C1040.2 571.9 1041.3 601.2 1048.8 631.3C1056.2 661.3 1068.9 688.1 1079.2 720.0Z' opacity='0.148'/%3E%3C/g%3E%3C/svg%3E"),
                   radial-gradient(circle at 82% 118%,rgba(31,107,79,.55),transparent 58%),
                   radial-gradient(circle at 96% 8%,rgba(184,134,11,.16),transparent 45%);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:right -120px bottom -180px,center,center;
  background-size:820px 820px,auto,auto}

.cari-besar{display:flex;margin-top:28px;max-width:640px;border-radius:var(--r-pil);
            overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.24)}
.cari-besar input{flex:1;min-width:0;border:0;padding:17px 26px;font:inherit;
      font-size:1.02em;background:#fff}
.cari-besar input:focus{outline:3px solid var(--tualang);outline-offset:-3px}
.cari-besar button{background:var(--tualang);color:#231A02;padding:0 34px;font-weight:700;
      white-space:nowrap;font-size:.98em;
      border-radius:0 var(--r-pil) var(--r-pil) 0}
.cari-besar button:hover{background:#D19E12}

/* Empat kumpulan niat. Disusun mengikut apa pengguna mahu BUAT, bukan mengikut
   bahagian mana yang memiliki perkhidmatan itu.
   Kad sebenar (bukan lajur bergaris) dengan jubin ikon — versi pertama hanya
   empat senarai teks bersebelahan, jadi tiada apa yang menarik mata masuk. */
.niat-bekas{margin-top:-64px;position:relative;z-index:3;padding-bottom:42px}
.niat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.niat-kol{background:var(--kertas);border:1px solid var(--garis);border-top:3px solid var(--paku);
      border-radius:var(--r-besar);padding:22px 22px 24px;display:flex;flex-direction:column;
      box-shadow:0 2px 10px rgba(10,42,33,.07);
      transition:box-shadow .2s ease,transform .2s ease,border-top-color .2s ease}
.niat-kol:hover{box-shadow:0 14px 32px rgba(10,42,33,.13);transform:translateY(-3px);
      border-top-color:var(--tualang)}
.niat-tile{width:46px;height:46px;border-radius:var(--r-pil);display:grid;place-items:center;
      background:var(--lumut);color:var(--kanopi);margin-bottom:12px;flex:none;
      transition:background .2s ease,color .2s ease}
.niat-kol:hover .niat-tile{background:var(--rimba);color:var(--tualang)}
.niat-ikon{width:22px;height:22px}
.niat-kol h2{font-size:1.06rem;margin-bottom:10px}
.niat-kol ul{list-style:none;display:flex;flex-direction:column}
.niat-kol li+li{border-top:1px solid var(--garis)}
.niat-kol a{display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:9px 0;font-size:.9em;color:var(--paku);font-weight:500}
.niat-kol a::after{content:"\2192";color:var(--paku);opacity:0;transform:translateX(-5px);
      transition:opacity .18s ease,transform .18s ease;flex:none}
.niat-kol a:hover{color:var(--paku-gelap)}
.niat-kol a:hover::after{opacity:1;transform:none}

/* ---------- PANEL GALERI HERO (laman utama) ----------
   Panel TERKURUNG di sebelah tajuk, bukan media penuh-lebar. Hero mockup 1
   sudah guna media berdarah ke tepi skrin; kalau mockup 2 buat perkara sama,
   dua cadangan itu jadi serupa dan klien tiada pilihan sebenar.

   Kapsyen menamakan setiap lokasi, jadi panel ini KANDUNGAN (mempamer
   destinasi hutan lipur) dan bukan sekadar hiasan latar. */
.penghala-grid{display:grid;grid-template-columns:1fr 440px;gap:44px;align-items:center}
.penghala-teks{min-width:0}

.hero-panel{position:relative;border-radius:var(--r-besar);overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14)}
.hero-media{position:relative;aspect-ratio:4/3;background:var(--kanopi)}
.hero-slaid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s ease}
.hero-slaid.is-aktif{opacity:1}

/* Kapsyen duduk atas kecerunan supaya teks kekal boleh dibaca walau foto
   mana pun di belakangnya. */
.hero-kapsyen-bekas{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
  background:linear-gradient(to top,rgba(6,26,20,.92),rgba(6,26,20,.55) 55%,transparent);
  pointer-events:none;min-height:86px}
.hero-kapsyen{position:absolute;left:18px;right:18px;bottom:16px;
  opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;
  font-size:.84rem;color:#B9CFC3;line-height:1.4}
.hero-kapsyen.is-aktif{opacity:1;transform:none}
.hero-kapsyen strong{display:block;font-family:var(--tajuk);font-size:1.02rem;
  color:#fff;font-weight:700;letter-spacing:-.01em}

.hero-kawal{position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:10px;
  background:rgba(6,26,20,.62);backdrop-filter:blur(3px);padding:6px 10px;
  border-radius:99px}
.hero-titik{display:flex;gap:6px}
.hero-titik button{width:7px;height:7px;padding:0;border-radius:50%;flex:none;
  background:rgba(255,255,255,.42);transition:background .2s ease,transform .2s ease}
.hero-titik button:hover{background:rgba(255,255,255,.8)}
.hero-titik button[aria-current="true"]{background:var(--tualang);transform:scale(1.3)}
.hero-jeda{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  color:#DCEAE1;flex:none;transition:background .2s ease,color .2s ease}
.hero-jeda:hover{background:var(--tualang);color:var(--rimba)}
.hero-jeda svg{width:9px;height:9px}
.hero-jeda .ikon-main{display:none}
.hero-jeda[aria-pressed="true"] .ikon-jeda{display:none}
.hero-jeda[aria-pressed="true"] .ikon-main{display:block}

@media(max-width:1000px){
  /* Panel jatuh ke bawah teks; 440px di sebelah memerah tajuk terlalu sempit. */
  .penghala-grid{grid-template-columns:1fr;gap:32px}
  .hero-panel{max-width:560px}
}
@media(max-width:720px){
  .hero-media{aspect-ratio:16/10}
}

/* ---------- TUGASAN POPULAR ---------- */
.popular{padding-block:42px}
.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.popular a{border:1px solid var(--garis);border-left:4px solid var(--paku);
      padding:14px 20px;font-size:.9em;font-weight:500;border-radius:var(--r-pil);
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.popular a::after{content:"\2192";color:var(--paku);opacity:.45;flex:none;
      transition:opacity .16s ease,transform .16s ease}
.popular a:hover{background:var(--kabus);border-left-color:var(--tualang);
      box-shadow:0 4px 14px rgba(10,42,33,.08)}
.popular a:hover::after{opacity:1;transform:translateX(3px)}

/* ---------- TAJUK SEKSYEN ---------- */
.sek{padding-block:38px}
.sek--garis{border-top:1px solid var(--garis)}
.sek-head{display:flex;align-items:baseline;justify-content:space-between;
          gap:20px;flex-wrap:wrap;margin-bottom:18px}
.sek-head h2{font-size:1.5rem}
.pautan-semua{font-size:.88em;font-weight:600;color:var(--paku)}
.pautan-semua:hover{text-decoration:underline}

/* ---------- MAKLUMAN ----------
   Notis perkhidmatan dikekalkan menonjol: penutupan laluan dan tarikh tutup
   permohonan benar-benar mendesak untuk pengguna. */
/* Papan notis, bukan jalur amaran.
   Bekas NEUTRAL: versi pertama mewarnakan seluruh jalur merah, jadi berita baik
   ("permohonan kini dibuka") kelihatan seperti amaran. Keterukan kini dibawa
   oleh lencana setiap notis, bukan oleh bekas. */
.makluman{padding-block:6px 6px}
.makluman-slab{background:var(--kabus);border:1px solid var(--garis);
  border-left:5px solid var(--tualang);border-radius:var(--r-besar);
  padding:20px 24px 8px}
.makluman-kepala{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.makluman-ikon{width:21px;height:21px;color:var(--tualang);flex:none}
.makluman-kepala h2{font-size:1.05rem}
.makluman-kira{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--rimba);color:#fff;
  border-radius:var(--r-pil);padding:4px 12px;flex:none}

.makluman-senarai{list-style:none}
.makluman-senarai li+li{border-top:1px solid var(--garis)}
/* Seluruh baris boleh diklik — dahulu hanya pautan ekor kecil yang boleh, jadi
   sasaran sentuh terlalu kecil dan tajuk sendiri tidak boleh diklik. */
.makluman-senarai a{display:flex;gap:14px;align-items:flex-start;padding:13px 10px;
  margin-inline:-10px;border-radius:var(--r);transition:background .15s ease}
.makluman-senarai a:hover{background:var(--kertas)}
.makluman-jenis{font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--r-pil);padding:4px 11px;flex:none;margin-top:2px;color:#fff;
  white-space:nowrap}
.makluman-jenis--tutup{background:var(--bahaya)}
.makluman-jenis--buka{background:var(--paku)}
.makluman-isi{min-width:0}
.makluman-isi strong{display:block;font-weight:600;font-size:.94em;line-height:1.42;
  color:var(--arang)}
.makluman-senarai a:hover .makluman-isi strong{color:var(--paku)}
.makluman-meta{display:block;font-size:.8em;color:var(--asap);margin-top:3px;
  font-variant-numeric:tabular-nums}
.makluman-semua{display:inline-block;margin:6px 0 14px;font-size:.86em;font-weight:600;
  color:var(--paku)}
.makluman-semua:hover{text-decoration:underline}

@media(max-width:720px){
  .makluman-senarai a{flex-direction:column;gap:7px}
  .makluman-jenis{align-self:flex-start;margin-top:0}
}

/* ---------- PERANGKAAN ----------
   Jalur gelap. Halaman ini putih hampir keseluruhannya; satu jalur pekat di
   tengah memberi irama menegak, jadi mata ada tempat berehat antara senarai. */
/* Slab terselit dengan jejari besar, bukan jalur penuh-lebar — memberi
   lengkung satu lagi tempat untuk kelihatan. */
.angka-jalur{padding-block:14px 40px}
.angka-jalur .wrap{background:var(--kanopi);color:#CFE0D7;border-radius:var(--r-besar);
      padding:30px 34px 32px}
.angka-jalur h2{color:#fff}
.angka-jalur .pautan-semua{color:var(--tualang)}
.angka{display:grid;grid-template-columns:repeat(4,1fr)}
.angka-sel{padding:6px 22px}
.angka-sel+.angka-sel{border-left:1px solid rgba(255,255,255,.18)}
.angka-nom{font-family:var(--tajuk);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.3rem);
           color:var(--tualang);line-height:1.05;letter-spacing:-.02em}
.angka-lab{font-size:.83em;color:#9FBCAC;margin-top:5px}

/* ---------- BERITA (senarai biasa, tiada gambar kecil) ---------- */
.berita-senarai{list-style:none;border-top:1px solid var(--garis)}
.berita-senarai li{border-bottom:1px solid var(--garis)}
.berita-senarai a{display:grid;grid-template-columns:118px 1fr auto;gap:18px;
                  padding:15px 14px;align-items:baseline;margin-inline:-14px;
                  border-radius:var(--r);transition:background .15s ease}
.berita-senarai a:hover{background:var(--kabus)}
.berita-senarai time{font-size:.79em;color:var(--asap);font-variant-numeric:tabular-nums;
      font-weight:600;letter-spacing:.02em}
.berita-senarai strong{font-weight:600;font-size:.97em;line-height:1.45}
.berita-senarai a:hover strong{color:var(--paku)}
.berita-senarai a::after{content:"\2192";color:var(--paku);opacity:0;
      transform:translateX(-5px);transition:opacity .16s ease,transform .16s ease;
      align-self:center}
.berita-senarai a:hover::after{opacity:1;transform:none}

/* ---------- HALAMAN DALAM ---------- */
.laman-kepala{border-bottom:1px solid var(--garis);padding-block:30px 26px}
.laman-kepala h1{font-size:clamp(1.65rem,3.2vw,2.35rem)}
.laman-kepala .lede{color:var(--asap);max-width:68ch;margin-top:8px}
.tataletak{display:grid;grid-template-columns:236px 1fr;gap:38px;
           align-items:start;padding-block:34px}
.sisi-nav{position:sticky;top:96px;border:1px solid var(--garis);border-radius:var(--r)}
.sisi-nav h2{font-family:var(--badan);font-size:.72rem;font-weight:700;letter-spacing:.12em;
      text-transform:uppercase;color:var(--asap);padding:13px 15px 10px;
      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:10px 15px;font-size:.88em;border-left:3px solid transparent}
.sisi-nav a:hover{background:var(--kabus);color:var(--paku)}
.sisi-nav a[aria-current="page"]{border-left-color:var(--paku);background:var(--kabus);
      color:var(--paku);font-weight:600}

.artikel>*+*{margin-top:1em}
.artikel h2{font-size:1.35rem;margin-top:1.6em}
.artikel h3{font-size:1.1rem;margin-top:1.4em}
.artikel p,.artikel li{max-width:72ch}
.artikel ul,.artikel ol{padding-left:1.3em}
.artikel li+li{margin-top:.35em}
.artikel a{color:var(--paku);text-decoration:underline}

/* ---------- CARTA BAR (perangkaan) ----------
   Bar mendatar diisih menurun. Satu siri sahaja, jadi TIADA legenda — tajuk
   yang menamakannya. Warna disahkan dengan validator, bukan diagak:
   hijau jenama --paku (#1F6B4F) GAGAL lantai kroma pada 0.087, iaitu sebagai
   isian besar ia terbaca kelabu. #1B7A4F daripada keluarga rona yang sama lulus
   kesemua enam semakan pada permukaan terang dan gelap.

   Jadual di bawah kekal sebagai paparan data boleh capai — carta menambah
   bentuk, tidak menggantikan angka. */
:root{--carta-bar:#1B7A4F;--carta-alur:#EDF1EE}

.carta-bar{border:1px solid var(--garis);border-radius:var(--r-besar);
  padding:22px 24px 18px;margin-bottom:20px;background:var(--kertas)}
.carta-bar figcaption{margin-bottom:16px}
.carta-bar h3{font-size:1.05rem;margin-bottom:3px}
.carta-bar figcaption p{font-size:.83em;color:var(--asap)}

.bar-senarai{list-style:none;display:flex;flex-direction:column;gap:2px}
/* Jurang 2px antara bar ialah permukaan, bukan sempadan — bar bersentuhan
   membaca sebagai satu jisim. */
.bar-baris{display:grid;grid-template-columns:132px 1fr 68px;align-items:center;
  gap:14px;padding:3px 0}
.bar-label{font-size:.86em;color:var(--arang);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{position:relative;background:var(--carta-alur);border-radius:var(--r);
  height:20px}
.bar-isi{display:block;height:100%;background:var(--carta-bar);
  border-radius:0 4px 4px 0;   /* hujung data bulat, pangkal berlabuh garis dasar */
  transition:filter .15s ease}
.bar-baris:hover .bar-isi{filter:brightness(1.12)}
.bar-nilai{font-size:.86em;font-weight:600;color:var(--arang);
  font-variant-numeric:tabular-nums;text-align:right}

/* Tooltip setiap bar. Carta HTML sepatutnya interaktif secara lalai. */
.bar-tip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:5;
  background:var(--arang);color:#fff;font-size:.78rem;line-height:1.35;
  padding:7px 11px;border-radius:var(--r);white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.bar-baris:hover .bar-tip,.bar-baris:focus-within .bar-tip{
  opacity:1;visibility:visible;transform:none}

/* Kontras tinggi: hijau atas hitam gagal: tukar kepada kuning skema itu. */
body.kontras{--carta-bar:#FFE45E;--carta-alur:#333}
body.kontras .bar-label,body.kontras .bar-nilai{color:#fff}

@media(max-width:720px){
  .bar-baris{grid-template-columns:96px 1fr 56px;gap:10px}
  .bar-label,.bar-nilai{font-size:.8em}
}

/* ---------- JADUAL ---------- */
.jadual-bekas{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--r)}
.jadual{width:100%;border-collapse:collapse;font-size:.9em;min-width:560px}
.jadual caption{text-align:left;padding:14px 16px;font-family:var(--tajuk);font-weight:700;
      font-size:1rem;border-bottom:1px solid var(--garis)}
.jadual th,.jadual td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--garis)}
.jadual thead th{background:var(--kabus);font-size:.76rem;font-weight:700;
      letter-spacing:.06em;text-transform:uppercase;color:var(--asap)}
/* Inter ADA angka jadual — guna supaya lajur nombor berbaris betul. */
.jadual .nom{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.jadual tbody tr:hover{background:var(--kabus)}

/* ---------- KAD & SENARAI AM ---------- */
.senarai-kad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kad{border:1px solid var(--garis);border-radius:var(--r);padding:16px 18px;
     transition:border-color .15s ease,background .15s ease}
.kad:hover{border-color:var(--paku);background:var(--kabus)}
.kad strong{display:block;font-family:var(--tajuk);font-size:1rem;margin-bottom:4px}
.kad span{font-size:.86em;color:var(--asap)}

.btn{display:inline-block;background:var(--paku);color:#fff;padding:11px 24px;
     border-radius:var(--r-pil);font-weight:600;font-size:.9em}
.btn:hover{background:var(--paku-gelap);color:#fff}
/* .act-kedua ialah butang sekunder yang dibawa daripada markup mockup 1
   (butang "Tutup" panel struktur halaman). Beri gaya yang sama seperti
   .btn--kedua supaya ia tidak terpapar sebagai teks kosong. */
.btn--kedua,.act-kedua{background:none;color:var(--paku);
        border:1px solid var(--garis-tebal);border-radius:var(--r-pil);
        padding:11px 24px;font-weight:600;font-size:.88em;display:inline-block}
.btn--kedua:hover,.act-kedua:hover{background:var(--kabus);color:var(--paku-gelap)}
.btn--bahaya{background:var(--bahaya)}
.btn--bahaya:hover{background:#7E1A11}

/* ---------- PAUTAN AGENSI ---------- */
.pautan-agensi{background:var(--kabus);border-top:1px solid var(--garis);padding-block:30px}
.pautan-tajuk{font-family:var(--badan);font-size:.7rem;font-weight:700;letter-spacing:.14em;
      text-transform:uppercase;color:var(--asap);text-align:center;margin-bottom:18px}
.pautan-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px}
.pautan-logo{display:grid;place-items:center;height:48px;padding:5px 7px;border-radius:var(--r);
      filter:grayscale(1);opacity:.6;transition:filter .2s ease,opacity .2s ease}
.pautan-logo img{max-height:36px;width:auto;max-width:112px}
.pautan-logo:hover,.pautan-logo:focus-visible{filter:none;opacity:1;background:var(--kertas)}

/* ---------- FOOTER ---------- */
/* Markup footer dibawa daripada mockup 1, jadi ia guna h4 (bukan h2),
   .foot-data, .foot-akhir dan <address>. Gayakan apa yang markup itu
   sebenarnya gunakan, bukan apa yang saya sangka ia gunakan. */
.foot{background:var(--rimba);color:#C8D8CE;font-size:.88em;padding-top:44px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:32px}
.foot h4{font-family:var(--badan);font-size:.72rem;font-weight:700;letter-spacing:.12em;
      text-transform:uppercase;color:var(--tualang);margin-bottom:12px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.foot a:hover{color:#fff;text-decoration:underline}
.foot address{font-style:normal;line-height:1.75;color:#9DB3A6}
.foot-data{font-size:.8rem;color:#9DB3A6;margin-top:12px;line-height:1.85;
      font-variant-numeric:tabular-nums}
.foot-bawah{border-top:1px solid rgba(255,255,255,.16);padding-block:18px;
      display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
      font-size:.88em;color:#9DB3A6}
.foot-bawah nav{display:flex;flex-wrap:wrap;gap:16px}
.foot-akhir{background:#061C15;color:#7E9C8D;font-size:.8em;padding-block:14px}
.foot-akhir .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- KELAS FOOTER & PANEL YANG TERLEPAS ----------
   Ditemui melalui audit: bandingkan setiap kelas dalam HTML dengan kelas yang
   wujud dalam CSS ini. Tiga kelas ini datang bersama footer dan panel
   kebolehcapaian yang disuntik daripada mockup 1, jadi ia terlepas daripada
   tinjauan komponen asal — tinjauan itu hanya mengimbas kawasan KANDUNGAN
   halaman, bukan footer.

   Akibatnya .socmed tiada saiz langsung: setiap SVG dibentang 332px dan
   footer menjadi lajur setinggi 1352px. */
.socmed{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.socmed a{width:38px;height:38px;border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-pil);display:grid;place-items:center;flex:none;
  color:#C8D8CE;transition:background .18s ease,color .18s ease,border-color .18s ease}
.socmed a:hover{background:var(--tualang);color:var(--rimba);border-color:var(--tualang)}
.socmed svg{width:17px;height:17px}

.lencana{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.lencana span{font-size:.68rem;letter-spacing:.07em;border:1px solid rgba(255,255,255,.24);
  padding:5px 12px;border-radius:var(--r-pil);color:#9DB3A6}

/* Penunjuk aras saiz teks dalam panel kebolehcapaian. */
.a11y-aras{display:flex;gap:3px;margin-top:2px}
.a11y-aras i{width:11px;height:3px;border-radius:var(--r-pil);background:var(--garis);
  display:block}
.a11y-aras i.on{background:var(--paku)}
.a11y-item[aria-pressed="true"] .a11y-aras i{background:rgba(255,255,255,.3)}
.a11y-item[aria-pressed="true"] .a11y-aras i.on{background:var(--tualang)}

/* ---------- KEBOLEHCAPAIAN (dibawa daripada mockup 1) ----------
   Kewajipan portal kerajaan, bukan pilihan gaya — jadi tingkah lakunya
   dikekalkan walaupun rupanya berbeza. */
.a11y-buka{position:fixed;right:0;top:45%;z-index:60;background:var(--rimba);color:var(--tualang);
      width:42px;height:46px;display:grid;place-items:center;border-radius:var(--r) 0 0 var(--r)}
.a11y-buka svg{width:22px;height:22px}
.a11y-lapis{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70}
.a11y-panel{position:fixed;top:0;right:0;height:100%;width:min(340px,92vw);background:var(--kertas);
      z-index:80;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease;
      box-shadow:-4px 0 24px rgba(0,0,0,.18)}
.a11y-panel[aria-hidden="false"]{transform:none}
.a11y-kepala{display:flex;align-items:center;gap:10px;padding:16px 18px;
      border-bottom:1px solid var(--garis)}
.a11y-kepala svg{width:22px;height:22px;color:var(--paku)}
.a11y-kepala h2{font-size:1rem;flex:1}
.a11y-kepala button{font-size:1.2rem;line-height:1;padding:4px 8px;color:var(--asap)}
.a11y-isi{padding:16px 18px 40px}
.a11y-nota{font-size:.82em;color:var(--asap);margin-bottom:16px}
.a11y-grup{margin-bottom:20px}
.a11y-grup h3{font-family:var(--badan);font-size:.68rem;font-weight:700;letter-spacing:.12em;
      text-transform:uppercase;color:var(--asap);margin-bottom:8px}
.a11y-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.a11y-item{border:1px solid var(--garis);border-radius:var(--r);padding:10px 6px;
      display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.7rem;
      text-align:center;line-height:1.25}
.a11y-item svg{width:19px;height:19px;color:var(--paku)}
.a11y-item[aria-pressed="true"]{background:var(--rimba);border-color:var(--rimba);color:#fff}
.a11y-item[aria-pressed="true"] svg{color:var(--tualang)}

/* ---------- MOD KEBOLEHCAPAIAN ---------- */
body.a11y-tinggi-baris p,body.a11y-tinggi-baris li{line-height:2.1}
body.a11y-rata-kiri,body.a11y-rata-kiri *{text-align:left!important}
/* --tajuk dan --badan MESTI dipetakan semula kedua-duanya; melangkau satu
   bermakna separuh halaman sahaja mematuhi pilihan pengguna. */
body.a11y-fon-mudah{--tajuk:Verdana,Tahoma,Geneva,sans-serif;--badan:Verdana,Tahoma,Geneva,sans-serif}
body.a11y-disleksia{--tajuk:'Comic Sans MS',Verdana,sans-serif;--badan:'Comic Sans MS',Verdana,sans-serif;
      letter-spacing:.045em;word-spacing:.14em}
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-tanpa-imej img{visibility:hidden}
body.a11y-tanpa-imej .pautan-logo{display:none}
html.a11y-kelabu{filter:grayscale(1)}
body.a11y-kursor-besar,body.a11y-kursor-besar *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 2l24 15-11 2 6 12-5 2-6-12-8 7z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 4 2,auto}

/* Kontras tinggi: hitam-putih-kuning. Pada latar putih mockup ini, hijau aksen
   tidak cukup kuat — jadi keseluruhan skema ditukar, bukan digelapkan sahaja. */
body.kontras{--kertas:#000;--kabus:#000;--arang:#fff;--asap:#e8e8e8;--garis:#fff;
      --garis-tebal:#fff;--rimba:#000;--kanopi:#000;--paku:#FFE45E;--paku-gelap:#FFE45E;
      --lumut:#000;--tualang:#FFE45E;--bahaya:#FF7A5C;--bahaya-latar:#000;--fokus:#FFE45E}
body.kontras h1,body.kontras h2,body.kontras h3,body.kontras h4{color:#fff}
body.kontras img{filter:grayscale(1) contrast(1.15)}
/* Latar kontur/pancaran jalur ialah background-image CSS, bukan elemen <img>,
   jadi peraturan a11y-tanpa-imej dan kontras di atas tidak menangkapnya.
   Buang di kedua-dua mod: pengguna kontras tinggi mahu kejelasan maksimum, dan
   pengguna yang mematikan imej mahu latar bersih. */
body.kontras .penghala::after,body.kontras .laman-tajuk::after,
body.a11y-tanpa-imej .penghala::after,
body.a11y-tanpa-imej .laman-tajuk::after{background-image:none}
body.kontras .pautan-logo{filter:none;opacity:1}

/* ---------- RESPONSIF ---------- */
@media(max-width:1000px){
  .niat{grid-template-columns:repeat(2,1fr)}
  .niat-kol:nth-child(odd){border-left:0}
  .niat-kol:nth-child(n+3){border-top:1px solid var(--garis)}
  .popular-grid{grid-template-columns:repeat(2,1fr)}
  .angka{grid-template-columns:repeat(2,1fr)}
  .angka-sel:nth-child(odd){border-left:0}
  .angka-sel:nth-child(n+3){border-top:1px solid var(--garis)}
  .senarai-kad{grid-template-columns:repeat(2,1fr)}
  .tataletak{grid-template-columns:1fr;gap:26px}
  .sisi-nav{position:static}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .head-cari{order:9;flex-basis:100%;max-width:none;margin-left:0}
  .btn-warga{margin-left:auto}
  .burger{display:block}
  .nav ul{display:none;flex-direction:column}
  .nav.buka ul{display:flex}
  .nav a{border-bottom:0;border-left:3px solid transparent;
         border-top:1px solid var(--garis)}
  .nav a[aria-current="page"]{border-left-color:var(--paku)}
  .niat,.popular-grid,.angka,.senarai-kad,.foot-grid{grid-template-columns:1fr}
  .niat-kol{border-left:0!important}
  .niat-kol+.niat-kol{border-top:1px solid var(--garis)}
  .angka-sel{border-left:0!important}
  .angka-sel+.angka-sel{border-top:1px solid var(--garis)}
  .berita-senarai a{grid-template-columns:1fr;gap:3px}
  .a11y-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;
                       scroll-behavior:auto!important}
}

/* ==========================================================================
   KOMPONEN KANDUNGAN HALAMAN DALAM
   --------------------------------------------------------------------------
   Kandungan 14 halaman dibawa daripada mockup 1, jadi ia menggunakan nama kelas
   mockup 1. Kelas itu digayakan SEMULA di sini mengikut bahasa visual mockup 2
   (putih, garis, hampir segi empat) — kandungan sama, rupa berbeza.

   NOTA: kelas .rv sengaja TIDAK ditakrifkan. Dalam mockup 1 ia opacity:0 sampai
   JS menambah .on; mockup 2 tiada JS dedah-semasa-tatal, jadi membiarkannya
   tidak ditakrifkan bermakna elemen kekal kelihatan. Menakrifkannya dengan
   opacity:0 akan menyembunyikan 68 elemen secara kekal.
   ========================================================================== */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
         color:var(--paku)}
.eyebrow-lt{color:var(--tualang)}
.lede{color:var(--asap);max-width:68ch}
.h2{font-family:var(--tajuk);font-weight:700;font-size:1.5rem;line-height:1.2;margin:.3em 0 .2em}

/* Kepala halaman.
   Dahulu putih kosong: selepas laman utama dibuka dengan jalur gelap yang
   yakin, setiap halaman dalam terasa jatuh mendadak. Kini ia jalur pekat yang
   sama tetapi jauh lebih pendek — cukup untuk melabuhkan halaman, tidak cukup
   untuk menolak kandungan ke bawah skrin. Kontur yang sama seperti hero
   digunakan semula supaya kedua-duanya jelas milik laman yang sama. */
.laman-tajuk{background:var(--rimba);color:#DCEAE1;padding-block:32px 34px;
  position:relative;overflow:hidden;border-radius:0 0 var(--r-jalur) var(--r-jalur)}
.laman-tajuk .wrap{position:relative;z-index:2}
.laman-tajuk h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.2em 0 .3em;
  letter-spacing:-.02em}
.laman-tajuk .eyebrow{color:var(--tualang)}
.laman-tajuk .lede{color:#9FBCAC;max-width:66ch}
.laman-tajuk::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='820' viewBox='0 0 820 820'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.15'%3E%3Cpath d='M760.3 720.0C761.8 727.3 761.5 735.5 759.8 742.8C758.1 750.0 754.2 757.1 750.4 763.5C746.6 769.9 741.7 775.7 736.8 781.3C732.0 786.8 726.9 792.3 721.2 796.7C715.5 801.2 709.1 805.6 702.4 808.1C695.7 810.6 688.0 811.8 681.0 811.9C673.9 812.0 666.7 810.1 660.0 808.8C653.3 807.5 647.3 805.4 640.8 804.3C634.2 803.2 627.7 803.0 620.5 802.0C613.3 801.0 604.9 800.8 597.6 798.2C590.3 795.7 582.1 791.9 576.6 786.5C571.1 781.1 566.9 773.3 564.8 765.9C562.6 758.4 563.3 749.6 563.9 741.9C564.5 734.3 566.9 727.0 568.3 720.0C569.8 713.0 571.1 706.7 572.6 700.1C574.1 693.4 575.1 686.6 577.4 680.2C579.8 673.8 582.7 667.2 586.7 661.6C590.7 656.0 596.1 651.0 601.5 646.6C606.9 642.2 613.0 638.8 619.1 635.1C625.2 631.5 631.4 627.8 638.3 624.7C645.1 621.7 652.5 618.1 660.0 616.8C667.5 615.5 676.2 615.1 683.5 617.1C690.8 619.2 698.2 623.9 703.8 629.0C709.5 634.2 713.5 641.8 717.3 648.1C721.1 654.4 723.3 661.1 726.7 666.8C730.1 672.6 733.7 677.2 737.7 682.6C741.8 688.0 747.3 693.0 751.0 699.2C754.8 705.5 758.9 712.7 760.3 720.0Z' opacity='0.3'/%3E%3Cpath d='M797.8 720.0C797.7 730.1 794.7 740.4 791.8 750.1C788.8 759.7 784.6 768.9 780.1 777.8C775.5 786.7 770.8 795.7 764.5 803.4C758.3 811.0 751.0 818.6 742.8 823.8C734.5 828.9 724.5 832.3 715.1 834.4C705.7 836.5 695.7 835.8 686.5 836.2C677.3 836.6 669.0 836.1 660.0 836.9C651.0 837.7 642.2 840.1 632.4 841.1C622.5 842.2 611.1 844.5 600.7 843.2C590.2 841.9 578.4 838.9 569.8 833.2C561.1 827.4 553.7 818.0 548.8 808.7C544.0 799.4 542.3 787.6 540.7 777.5C539.1 767.3 539.6 757.2 539.1 747.6C538.7 738.0 538.0 729.2 537.8 720.0C537.7 710.8 537.0 701.4 538.3 692.2C539.6 683.1 542.0 673.5 545.8 665.0C549.7 656.5 555.5 648.7 561.3 641.3C567.1 633.8 573.8 627.3 580.6 620.5C587.5 613.6 594.3 606.4 602.3 600.1C610.3 593.8 619.1 586.6 628.7 582.7C638.3 578.9 649.7 576.1 660.0 576.9C670.3 577.7 681.3 582.3 690.2 587.6C699.1 593.0 706.5 601.9 713.5 609.0C720.4 616.0 725.4 623.6 731.9 629.9C738.3 636.2 744.9 640.8 752.1 646.6C759.3 652.4 768.2 657.5 774.9 664.7C781.7 671.8 788.8 680.5 792.6 689.7C796.4 699.0 798.0 709.9 797.8 720.0Z' opacity='0.281'/%3E%3Cpath d='M832.9 720.0C832.2 732.9 830.3 745.7 827.4 758.2C824.5 770.7 821.3 783.6 815.7 795.0C810.0 806.3 802.6 817.8 793.5 826.4C784.3 835.0 772.3 841.6 761.0 846.7C749.8 851.7 737.2 853.5 725.9 856.8C714.6 860.1 704.4 862.4 693.4 866.4C682.4 870.4 672.1 876.6 660.0 881.0C647.9 885.4 634.0 891.6 620.6 892.7C607.1 893.8 591.6 892.7 579.3 887.6C567.0 882.4 555.5 872.2 546.9 861.8C538.4 851.4 533.1 837.4 528.0 825.3C522.9 813.2 520.2 800.8 516.5 789.1C512.8 777.4 508.9 766.7 506.0 755.2C503.0 743.6 499.6 731.9 498.9 720.0C498.2 708.1 499.1 695.5 501.8 683.9C504.4 672.2 509.7 661.0 514.8 650.1C519.9 639.1 526.0 628.9 532.3 618.2C538.7 607.4 544.7 595.9 552.8 585.5C560.9 575.2 569.9 563.4 581.0 555.9C592.0 548.4 605.9 542.3 619.1 540.8C632.3 539.3 647.4 542.6 660.0 547.0C672.6 551.4 684.2 560.5 694.9 567.1C705.6 573.7 714.2 581.1 724.2 586.7C734.3 592.3 744.3 595.6 755.2 600.7C766.0 605.7 778.7 609.8 789.1 617.0C799.5 624.3 810.3 633.6 817.4 644.2C824.5 654.8 829.0 668.2 831.6 680.8C834.2 693.5 833.6 707.1 832.9 720.0Z' opacity='0.262'/%3E%3Cpath d='M873.6 720.0C873.9 735.9 873.9 752.6 870.0 767.9C866.2 783.2 859.7 799.1 850.6 811.8C841.6 824.5 828.2 835.2 815.8 844.3C803.5 853.3 788.9 858.8 776.5 866.0C764.0 873.3 752.8 879.5 740.9 887.9C728.9 896.3 718.3 907.5 704.8 916.4C691.3 925.3 676.0 936.5 660.0 941.2C644.0 945.9 624.9 948.0 608.7 944.6C592.6 941.2 576.3 931.3 563.2 921.0C550.1 910.7 540.0 895.5 530.4 882.6C520.7 869.6 513.4 856.1 505.4 843.3C497.4 830.5 489.1 818.7 482.4 805.5C475.6 792.4 468.5 778.8 464.7 764.6C460.9 750.3 459.4 734.8 459.6 720.0C459.9 705.2 463.4 690.5 466.4 675.8C469.4 661.2 473.3 647.1 477.6 632.2C481.9 617.2 485.3 601.1 492.1 586.1C498.9 571.2 506.8 554.2 518.3 542.4C529.9 530.5 545.5 519.9 561.2 514.9C577.0 510.0 596.2 510.7 612.7 512.8C629.2 514.8 645.3 522.5 660.0 527.2C674.7 531.9 687.1 537.5 700.9 541.0C714.7 544.4 728.2 545.0 742.8 548.0C757.4 551.0 774.1 552.7 788.5 558.9C802.9 565.1 817.9 574.0 829.1 585.2C840.2 596.3 848.8 611.4 855.4 625.9C861.9 640.5 865.3 656.8 868.3 672.5C871.3 688.1 873.4 704.1 873.6 720.0Z' opacity='0.243'/%3E%3Cpath d='M921.6 720.0C920.9 739.1 916.5 759.5 908.7 776.8C901.0 794.0 887.3 809.7 875.0 823.5C862.8 837.4 847.5 847.5 835.1 859.7C822.8 871.8 812.2 882.9 800.8 896.5C789.4 910.2 780.1 927.1 766.6 941.4C753.1 955.7 737.6 972.8 719.8 982.2C702.1 991.6 679.9 997.9 660.0 997.6C640.1 997.3 618.6 989.4 600.5 980.6C582.5 971.8 566.6 957.2 551.6 945.0C536.7 932.8 523.9 919.8 510.7 907.2C497.5 894.6 484.1 883.1 472.6 869.5C461.0 855.8 449.5 841.2 441.6 825.2C433.7 809.2 428.6 791.1 425.3 773.6C422.0 756.0 422.2 738.0 421.6 720.0C420.9 702.0 420.8 684.4 421.3 665.5C421.8 646.6 420.7 626.2 424.5 606.6C428.4 587.0 433.5 564.8 444.2 547.9C455.0 531.1 471.5 515.1 489.0 505.6C506.6 496.1 529.8 492.7 549.7 490.9C569.6 489.1 590.2 493.6 608.6 494.8C627.0 495.9 642.8 497.9 660.0 497.6C677.2 497.3 693.7 493.6 711.8 493.1C729.9 492.6 750.1 490.7 768.6 494.5C787.0 498.4 806.6 505.8 822.4 516.3C838.2 526.8 851.9 542.4 863.5 557.7C875.1 573.0 883.8 590.8 892.1 608.2C900.3 625.7 907.8 643.7 912.8 662.3C917.7 680.9 922.2 700.9 921.6 720.0Z' opacity='0.224'/%3E%3Cpath d='M961.2 720.0C956.2 741.9 943.6 763.2 933.0 782.3C922.4 801.4 908.0 816.9 897.5 834.4C887.0 851.9 879.1 868.2 870.0 887.5C861.0 906.7 855.1 929.6 843.2 949.8C831.4 969.9 817.3 993.5 798.9 1008.5C780.5 1023.4 756.0 1035.1 732.9 1039.4C709.7 1043.6 683.1 1039.3 660.0 1033.9C636.9 1028.5 615.1 1016.6 594.5 1007.1C573.9 997.5 555.3 987.1 536.5 976.5C517.7 965.8 498.7 956.2 481.9 943.3C465.1 930.4 448.3 915.8 435.4 899.1C422.6 882.3 412.9 862.4 404.7 842.9C396.5 823.5 392.1 803.0 386.1 782.5C380.2 762.0 374.3 742.0 369.2 720.0C364.2 698.0 356.7 674.3 355.8 650.6C355.0 626.8 355.6 599.6 364.2 577.5C372.7 555.5 388.8 533.5 407.2 518.4C425.5 503.3 451.7 494.1 474.1 486.9C496.6 479.7 520.9 479.2 542.1 475.1C563.2 471.0 581.5 467.7 601.2 462.2C620.8 456.7 639.2 447.3 660.0 441.9C680.8 436.5 704.0 429.7 726.2 429.9C748.4 430.1 772.6 434.7 793.4 443.1C814.2 451.5 833.5 466.0 851.0 480.5C868.5 495.0 883.8 512.4 898.3 530.0C912.8 547.6 927.3 565.9 938.1 586.1C948.9 606.2 959.4 628.5 963.3 650.8C967.2 673.1 966.3 698.1 961.2 720.0Z' opacity='0.205'/%3E%3Cpath d='M983.3 720.0C976.2 744.3 964.8 765.3 958.2 788.1C951.6 810.8 948.4 832.1 943.8 856.7C939.2 881.3 938.9 909.7 930.5 935.7C922.1 961.8 911.2 991.9 893.6 1013.0C876.1 1034.1 850.4 1052.3 824.9 1062.5C799.5 1072.6 768.3 1074.0 740.8 1073.9C713.3 1073.9 685.8 1067.0 660.0 1062.2C634.2 1057.4 610.0 1051.8 585.8 1045.0C561.6 1038.3 537.1 1032.3 514.7 1021.7C492.3 1011.1 470.0 997.7 451.5 981.5C432.9 965.3 417.7 944.5 403.5 924.5C389.3 904.5 378.8 882.9 366.2 861.5C353.7 840.0 340.3 819.3 328.1 795.7C316.0 772.2 300.4 746.9 293.3 720.0C286.2 693.1 280.7 661.6 285.5 634.5C290.3 607.4 304.5 578.8 322.1 557.3C339.7 535.8 367.5 519.5 391.0 505.5C414.6 491.6 441.0 484.3 463.4 473.5C485.9 462.7 504.9 452.9 525.6 440.8C546.2 428.8 564.8 412.6 587.2 401.2C609.6 389.8 634.6 377.0 660.0 372.2C685.4 367.4 713.7 367.7 739.4 372.3C765.0 377.0 790.4 388.4 814.1 400.0C837.8 411.6 860.2 426.3 881.7 442.0C903.1 457.8 925.3 474.3 943.0 494.3C960.7 514.3 978.3 537.4 987.9 562.1C997.5 586.7 1001.6 615.9 1000.8 642.2C1000.1 668.5 990.4 695.7 983.3 720.0Z' opacity='0.186'/%3E%3Cpath d='M1010.8 720.0C1010.3 747.2 1014.1 772.2 1016.0 801.2C1017.9 830.3 1025.2 863.0 1022.2 894.4C1019.2 925.8 1013.3 962.0 998.1 989.6C983.0 1017.3 957.6 1042.9 931.3 1060.2C904.9 1077.5 870.5 1086.4 839.9 1093.5C809.3 1100.7 777.5 1101.3 747.5 1103.3C717.5 1105.3 688.9 1106.7 660.0 1105.7C631.1 1104.8 601.6 1104.1 573.8 1097.5C546.1 1090.9 518.0 1080.1 493.4 1066.0C468.8 1051.9 447.3 1031.9 426.3 1013.1C405.3 994.3 387.7 973.6 367.5 953.2C347.3 932.9 325.5 914.0 305.1 890.9C284.7 867.8 259.8 843.2 245.1 814.7C230.4 786.2 217.4 751.7 216.8 720.0C216.3 688.3 226.9 652.9 241.9 624.6C256.9 596.2 284.2 571.6 306.8 549.9C329.4 528.3 355.8 513.0 377.3 494.6C398.9 476.2 416.6 458.8 436.2 439.4C455.9 420.0 473.0 396.5 495.4 378.2C517.8 359.8 543.4 340.3 570.8 329.2C598.2 318.1 630.0 312.7 660.0 311.7C690.0 310.8 720.9 316.9 750.5 323.4C780.2 329.9 809.4 339.2 837.9 350.6C866.3 362.1 896.3 374.4 921.3 392.3C946.4 410.2 971.8 432.5 988.3 458.2C1004.8 483.9 1015.3 516.4 1020.5 546.4C1025.6 576.4 1020.8 609.1 1019.2 638.0C1017.6 666.9 1011.4 692.8 1010.8 720.0Z' opacity='0.167'/%3E%3Cpath d='M1079.2 720.0C1089.4 751.9 1106.1 787.1 1110.3 822.8C1114.5 858.4 1115.2 899.9 1104.3 934.0C1093.4 968.0 1070.3 1001.5 1044.9 1027.0C1019.6 1052.4 984.1 1070.5 952.3 1086.5C920.5 1102.6 886.5 1112.6 854.2 1123.3C821.9 1134.0 790.7 1144.2 758.3 1150.7C725.9 1157.3 692.5 1163.5 660.0 1162.5C627.5 1161.6 593.7 1154.9 563.1 1144.8C532.4 1134.6 504.2 1117.1 476.2 1101.7C448.1 1086.4 423.1 1069.1 394.9 1052.4C366.7 1035.7 336.1 1021.6 307.0 1001.5C277.8 981.4 243.2 960.1 219.9 931.9C196.7 903.7 174.9 867.7 167.4 832.4C160.0 797.1 164.9 755.1 175.2 720.0C185.4 684.9 209.9 651.3 229.0 621.6C248.1 591.9 271.6 568.1 289.8 541.7C308.0 515.4 321.7 490.3 338.2 463.3C354.6 436.3 368.0 405.5 388.7 379.8C409.3 354.0 433.9 327.2 462.0 308.8C490.1 290.4 524.1 277.8 557.2 269.4C590.2 261.0 625.5 259.5 660.0 258.5C694.5 257.6 729.5 258.6 764.2 263.4C798.9 268.2 836.0 273.6 868.4 287.3C900.8 301.0 934.3 320.5 958.5 345.6C982.8 370.7 1001.1 405.5 1013.8 437.9C1026.4 470.2 1028.6 507.5 1034.4 539.7C1040.2 571.9 1041.3 601.2 1048.8 631.3C1056.2 661.3 1068.9 688.1 1079.2 720.0Z' opacity='0.148'/%3E%3C/g%3E%3C/svg%3E"),
                   radial-gradient(circle at 88% 130%,rgba(31,107,79,.5),transparent 55%);
  background-repeat:no-repeat,no-repeat;
  background-position:right -180px bottom -320px,center;
  background-size:820px 820px,auto}
.laman-tajuk--ringkas{padding-block:26px 28px}
/* SVG hiasan mockup 1 dibuang: mockup 2 minima imej dengan sengaja. */
.laman-svg{display:none}
.nota-bahasa{margin-top:14px;font-size:.82em;color:var(--asap);
             border-left:3px solid var(--tualang);padding:8px 12px;background:var(--kabus)}

/* Tataletak dua lajur */
.tataletak--kanan{grid-template-columns:1fr 236px}
.sisi-blok{border:1px solid var(--garis);border-radius:var(--r);padding:16px 18px;
           margin-bottom:14px}
.sisi-blok h2,.sisi-blok h3{font-family:var(--badan);font-size:.72rem;font-weight:700;
      letter-spacing:.12em;text-transform:uppercase;color:var(--asap);margin-bottom:10px}
.sisi-blok ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.88em}
.sisi-blok a{color:var(--paku)}
.sisi-blok a:hover{text-decoration:underline}
.sisi-tarikh{display:block;font-size:.76rem;color:var(--asap);margin-bottom:2px;
             font-variant-numeric:tabular-nums}

/* Papan notis */
.papan{border:1px solid var(--garis);border-left:4px solid var(--garis-tebal);
       border-radius:var(--r);padding:16px 18px;background:var(--kabus)}
.papan h2,.papan h3,.papan strong{font-family:var(--tajuk);font-size:1rem;display:block;
       margin-bottom:5px}
.papan--amaran{border-left-color:var(--bahaya);background:var(--bahaya-latar)}
.papan--hijau{border-left-color:var(--paku);background:var(--lumut)}

/* Kad hutan lipur / negeri */
.grid-lipur{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kad-lipur{border:1px solid var(--garis);border-radius:var(--r);overflow:hidden;
           display:flex;flex-direction:column;position:relative}
.kad-lipur:hover{border-color:var(--paku)}
.kad-img{aspect-ratio:16/10;object-fit:cover;width:100%}
.kad-isi{padding:14px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.kad-negeri{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
            color:var(--paku)}
.kad-lipur h3,.kad-lipur strong{font-family:var(--tajuk);font-size:1.02rem}
.kad-lipur p{font-size:.86em;color:var(--asap)}
.kad-meta{margin-top:auto;padding-top:12px;border-top:1px solid var(--garis);
      display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.76rem;color:var(--asap)}
.status{position:absolute;top:10px;right:10px;font-size:.64rem;font-weight:700;
      letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r);
      background:var(--bahaya);color:#fff}
.status--buka{background:var(--paku)}

/* ---------- PANEL PENAPIS ----------
   Menggantikan .alat + .chips yang berasingan. Dahulu kotak carian, kiraan dan
   cip negeri adalah tiga blok tidak berkaitan yang bertaburan menegak; kini
   satu panel supaya jelas kesemuanya menapis senarai yang SAMA. */
.tapis-panel{border:1px solid var(--garis);border-radius:var(--r-besar);
  background:var(--kabus);padding:18px 20px 16px;margin-bottom:22px}

.tapis-cari{position:relative;display:flex;align-items:center;max-width:520px}
.tapis-ikon{position:absolute;left:16px;width:18px;height:18px;color:var(--asap);
  pointer-events:none}
.tapis-cari input{width:100%;border:1px solid var(--garis-tebal);background:var(--kertas);
  border-radius:var(--r-pil);padding:12px 18px 12px 44px;font:inherit;font-size:.92em}
.tapis-cari input:focus{outline:none;border-color:var(--paku);
  box-shadow:0 0 0 1px var(--paku)}

.tapis-baris{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.tapis-label{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--asap);flex:none}
.tapis-baris .chips{margin-bottom:0}

.tapis-kira{margin-top:14px;padding-top:12px;border-top:1px solid var(--garis);
  font-size:.85em;color:var(--asap)}
.tapis-kira b{color:var(--rimba);font-weight:700;font-variant-numeric:tabular-nums}

@media(max-width:720px){
  .tapis-baris{align-items:flex-start;flex-direction:column;gap:8px}
}

/* Cip penapis */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.chip{border:1px solid var(--garis-tebal);border-radius:var(--r-pil);padding:7px 16px;
      font-size:.85em;font-weight:500;background:var(--kertas)}
.chip:hover{border-color:var(--paku);color:var(--paku)}
.chip[aria-pressed="true"]{background:var(--rimba);border-color:var(--rimba);color:#fff}
.chip span{opacity:.65;margin-left:5px;font-variant-numeric:tabular-nums}

/* Hab / pintu masuk bernombor */
.grid-hab{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hab-kad{border:1px solid var(--garis);border-left:3px solid var(--paku);border-radius:var(--r);
      padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.hab-kad:hover{background:var(--kabus);border-left-color:var(--rimba)}
.hab-no{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
        color:var(--asap)}
.hab-kad h2,.hab-kad h3,.hab-kad strong{font-family:var(--tajuk);font-size:1.04rem}
.hab-kad p{font-size:.87em;color:var(--asap)}
.hab-kad em{font-style:normal;font-size:.78rem;font-weight:600;color:var(--paku);
            margin-top:auto;padding-top:10px}

/* Akordion */
.akordion{border:1px solid var(--garis);border-radius:var(--r);overflow:hidden}
.akordion-item+.akordion-item{border-top:1px solid var(--garis)}
.akordion-btn{width:100%;text-align:left;padding:15px 48px 15px 18px;font-family:var(--tajuk);
      font-weight:700;font-size:.98rem;position:relative;color:var(--rimba)}
.akordion-btn:hover{background:var(--kabus)}
.akordion-btn::after{content:"+";position:absolute;right:18px;top:50%;
      transform:translateY(-50%);font-family:var(--badan);font-size:1.25rem;font-weight:400;
      color:var(--paku)}
.akordion-btn[aria-expanded="true"]::after{content:"\2013"}
.akordion-btn[aria-expanded="true"]{background:var(--kabus)}
.akordion-isi{padding:0 18px 18px;font-size:.92em;color:#2B3833;max-width:74ch}
.akordion-isi>*+*{margin-top:.8em}

/* Senarai fail muat turun */
.senarai-fail{display:flex;flex-direction:column;border-top:1px solid var(--garis)}
.fail{border-bottom:1px solid var(--garis);padding:14px 4px;display:flex;align-items:center;
      gap:14px}
.fail:hover{background:var(--kabus)}
.fail-jenis{font-size:.62rem;font-weight:700;letter-spacing:.07em;padding:5px 8px;
      border-radius:var(--r);background:var(--lumut);color:var(--kanopi);flex:none;
      min-width:46px;text-align:center}
.fail-isi{flex:1;min-width:0}
/* Markup guna <b>, bukan <strong> — memilih 'strong' sahaja bermakna tajuk
   dan keterangan kekal inline dan bercantum pada satu baris. */
.fail-isi b,.fail-isi strong{display:block;font-weight:600;font-size:.95em;
   line-height:1.4;color:var(--arang)}
.fail-isi span{display:block;font-size:.83em;color:var(--asap);margin-top:2px}
/* Affordance muat turun. Dahulu hanya perkataan "Muat turun" bercetak tebal —
   tiada isyarat visual bahawa seluruh baris itu boleh diklik. */
.fail-meta{display:flex;align-items:center;gap:12px;flex:none;
           font-size:.78rem;color:var(--asap);white-space:nowrap;
           font-variant-numeric:tabular-nums}
.fail-panah{width:20px;height:20px;color:var(--paku);flex:none;
           transition:transform .16s ease}
.fail:hover .fail-panah{transform:translateY(2px)}
.fail:hover .fail-isi b{color:var(--paku)}

/* Borang */
.borang-set{border:0;padding:0;margin-bottom:22px}
.borang-set legend{font-family:var(--tajuk);font-weight:700;font-size:1.1rem;
      margin-bottom:12px;color:var(--rimba)}
.borang-baris{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.medan{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.medan label{font-weight:600;font-size:.89em}
.medan .wajib{color:var(--bahaya);margin-left:2px}
.medan-bantu{font-size:.8em;color:var(--asap)}
.medan input,.medan select,.medan textarea{border:1px solid var(--garis-tebal);
      border-radius:var(--r);padding:10px 12px;font:inherit;font-size:.92em;width:100%;
      background:var(--kertas)}
.medan textarea{min-height:130px;resize:vertical}
.medan input:focus,.medan select:focus,.medan textarea:focus{outline:none;
      border-color:var(--paku);box-shadow:inset 0 0 0 1px var(--paku)}
.medan-ralat{font-size:.82em;color:var(--bahaya);font-weight:600}
.medan--ralat input,.medan--ralat select,.medan--ralat textarea{border-color:var(--bahaya);
      background:var(--bahaya-latar)}
.medan-radio{display:flex;flex-wrap:wrap;gap:8px}
.medan-radio label{display:flex;align-items:center;gap:7px;border:1px solid var(--garis-tebal);
      border-radius:var(--r);padding:9px 14px;font-weight:500;cursor:pointer}
.medan-radio input{width:auto}
.borang-ringkasan{background:var(--bahaya-latar);border:1px solid var(--bahaya);
      border-left-width:4px;border-radius:var(--r);padding:16px 18px;margin-bottom:22px}
.borang-nota{font-size:.82em;color:var(--asap);max-width:48ch}

/* Direktori pegawai */
.pegawai{border:1px solid var(--garis);border-radius:var(--r);padding:14px 16px;
      display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.pegawai:hover{border-color:var(--paku)}
.pegawai-inisial{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
      background:var(--lumut);color:var(--kanopi);font-weight:700;font-size:.92rem;flex:none}
.pegawai-isi{flex:1;min-width:0}
.pegawai-isi strong{font-family:var(--tajuk);font-size:1rem;display:block}
.jawatan{font-size:.86em;color:var(--asap)}
.pegawai dl{margin-top:8px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;
      font-size:.83em}
.pegawai dt{color:var(--asap)}

/* Carta organisasi */
.carta-aras{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px}
.carta-aras--bahagian{display:grid;grid-template-columns:repeat(4,1fr)}
.kotak{border:1px solid var(--garis);border-radius:var(--r);padding:13px 15px;text-align:center}
.kotak b{font-family:var(--tajuk);font-weight:700;font-size:.94rem;display:block;line-height:1.3}
.kotak span{font-size:.78em;color:var(--asap)}
.kotak--utama{background:var(--rimba);border-color:var(--rimba);color:#fff}
.kotak--utama b{color:#fff}
.kotak--utama span{color:#A9C4B6}
.kotak--timbalan{background:var(--kanopi);border-color:var(--kanopi);color:#fff}
.kotak--timbalan b{color:#fff}
.kotak--timbalan span{color:#A9C4B6}
.kotak--bahagian:hover{border-color:var(--paku);background:var(--kabus)}
.carta-nota{font-size:.83em;color:var(--asap);text-align:center;margin-top:20px}

/* Alat kira / lain-lain */
/* .alat ialah bar alat lama. Ia TIDAK PERNAH mempunyai peraturan untuk
   <input> di dalamnya, jadi kotak carian pada tiga halaman terpapar sebagai
   kotak pelayar lalai yang kecil dan tidak bergaya. Kesemua tiga kini guna
   .tapis-panel; peraturan ini dikekalkan sebagai sandaran sekiranya markup
   lama muncul semula, kali ini dengan input yang bergaya. */
.alat{border:1px solid var(--garis);border-radius:var(--r-besar);padding:16px 18px;
      background:var(--kabus);margin-bottom:16px}
.alat input,.alat select{border:1px solid var(--garis-tebal);border-radius:var(--r-pil);
      padding:10px 16px;font:inherit;font-size:.9em;background:var(--kertas)}

/* Pemilih dalam panel penapis (cth. tahun rujukan pada Perangkaan). */
.tapis-pilih{border:1px solid var(--garis-tebal);border-radius:var(--r-pil);
      padding:8px 16px;font:inherit;font-size:.88em;background:var(--kertas);
      color:var(--arang)}
.tapis-pilih:focus{outline:none;border-color:var(--paku);
      box-shadow:0 0 0 1px var(--paku)}
.alat-kira{font-size:.82rem;color:var(--asap);margin-left:auto;
           font-variant-numeric:tabular-nums}
.kosong{padding:26px;text-align:center;color:var(--asap);border:1px dashed var(--garis-tebal);
        border-radius:var(--r)}
.paginasi{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;justify-content:center}
.paginasi a,.paginasi span{border:1px solid var(--garis);background:var(--kertas);
      padding:8px 14px;border-radius:var(--r);font-size:.88em}
.paginasi a:hover{border-color:var(--paku);color:var(--paku)}
.paginasi [aria-current="page"]{background:var(--rimba);border-color:var(--rimba);color:#fff}

/* Panel struktur halaman (dibuka daripada panel kebolehcapaian) */
.a11y-struktur-kotak{position:fixed;inset:8% 50% auto auto;transform:translateX(50%);
      z-index:90;background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);
      width:min(560px,92vw);max-height:80vh;overflow:auto;padding:20px 22px;
      box-shadow:0 12px 40px rgba(0,0,0,.22)}
.a11y-struktur-senarai{list-style:none;margin-top:12px}
.a11y-struktur-senarai li+li{border-top:1px solid var(--garis)}
.a11y-struktur-senarai a{display:block;padding:9px 0;font-size:.9em;color:var(--paku)}

@media(max-width:1000px){
  .grid-lipur,.grid-hab,.carta-aras--bahagian{grid-template-columns:repeat(2,1fr)}
  .tataletak--kanan{grid-template-columns:1fr}
}
@media(max-width:720px){
  .grid-lipur,.grid-hab,.borang-baris,.carta-aras--bahagian{grid-template-columns:1fr}
  .fail{flex-wrap:wrap}
  .fail-meta{text-align:left;width:100%;padding-left:60px}
}

/* ==========================================================================
   KOMPONEN HALAMAN DALAM YANG TERLEPAS
   --------------------------------------------------------------------------
   Ditemui melalui audit kelas-demi-kelas merentas 14 halaman: bandingkan setiap
   kelas dalam <main> dengan kelas yang wujud dalam CSS ini.

   Antaranya .status--tutup (lencana "DITUTUP" pada kad hutan lipur) dan
   keseluruhan .borang aduan — kedua-duanya nampak rosak sepenuhnya sebelum ini,
   bukan sekadar hodoh.
   ========================================================================== */

/* .sek--putih: dalam mockup 1 ini menjadikan seksyen putih di atas latar
   berwarna. Mockup 2 sudah putih, jadi ia jadi seksyen BERTINT sebaliknya —
   fungsi asalnya (memberi irama berselang-seli) dikekalkan, bukan tiada kesan. */
.sek--putih{background:var(--kabus);border-top:1px solid var(--garis)}

/* ---------- AMARAN KECEMASAN (borang aduan) ----------
   Diletak SEBELUM borang, bukan dalam bar sisi. Borang ini mengambil masa
   sehingga tiga hari bekerja; kebakaran aktif tidak boleh menunggu. Kalau
   amaran ini muncul selepas borang, orang yang paling memerlukannya sudah
   mula menaip sebelum melihatnya. */
.kecemasan{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--bahaya-latar);border:1px solid #E9C9C2;
  border-left:5px solid var(--bahaya);border-radius:var(--r-besar);
  padding:16px 20px;margin-bottom:20px}
.kecemasan-ikon{width:24px;height:24px;color:var(--bahaya);flex:none}
.kecemasan div{flex:1;min-width:220px}
.kecemasan strong{display:block;font-family:var(--tajuk);font-size:1rem;
  color:var(--bahaya);margin-bottom:2px}
.kecemasan p{font-size:.87em;color:var(--asap);line-height:1.5}
.kecemasan-talian{flex:none;background:var(--bahaya);color:#fff;font-weight:700;
  padding:11px 22px;border-radius:var(--r-pil);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.kecemasan-talian:hover{background:#7E1A11;color:#fff}

/* ---------- PENUNJUK LANGKAH ----------
   Tiga fieldset sudah bernombor dalam teks, tetapi tiada apa yang menunjukkan
   BERAPA BANYAK langkah kesemuanya — jadi borang terasa tidak berpenghujung
   semasa ditatal. Nombor dipindahkan daripada <legend> ke sini supaya ia tidak
   berulang dua kali. */
.langkah{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin-bottom:26px;
  border:1px solid var(--garis);border-radius:var(--r-pil);overflow:hidden;
  background:var(--kabus)}
.langkah li{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;
  padding:12px 18px;font-size:.87em;color:var(--asap)}
.langkah li+li{border-left:1px solid var(--garis)}
.langkah span{width:24px;height:24px;border-radius:var(--r-pil);flex:none;
  display:grid;place-items:center;font-size:.76rem;font-weight:700;
  background:var(--garis);color:var(--asap)}
.langkah b{font-weight:600}
.langkah-aktif{background:var(--kertas);color:var(--arang)}
.langkah-aktif span{background:var(--paku);color:#fff}

@media(max-width:720px){
  .langkah{border-radius:var(--r-besar);flex-direction:column}
  .langkah li+li{border-left:0;border-top:1px solid var(--garis)}
  .kecemasan-talian{width:100%;text-align:center}
}

/* Borang aduan */
.borang{background:var(--kertas);border:1px solid var(--garis);
        border-radius:var(--r-besar);padding:28px 30px}
.borang-hantar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
        padding-top:22px;margin-top:6px;border-top:1px solid var(--garis)}
.btn-hantar{background:var(--paku);color:#fff;font-weight:700;padding:13px 32px;
        border-radius:var(--r-pil);font-size:.9em}
.btn-hantar:hover{background:var(--paku-gelap);color:#fff}

/* Carta organisasi */
.carta{background:var(--kertas);border:1px solid var(--garis);
       border-radius:var(--r-besar);padding:30px 24px;overflow-x:auto}
/* Garis penyambung antara aras — memberi carta struktur pokok, bukan sekadar
   baris kotak yang tidak berkaitan. */
.carta-aras+.carta-aras{margin-top:32px;position:relative;padding-top:26px}
.carta-aras+.carta-aras::before{content:"";position:absolute;top:0;left:50%;
       width:1px;height:26px;background:var(--garis-tebal)}

/* Grid direktori & peta laman */
.grid-direktori{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid-peta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.grid-peta .sisi-blok li a{display:block;padding:3px 0}
.grid-peta .sisi-blok li a:hover{color:var(--paku);text-decoration:underline}

/* Perutusan: potret Ketua Pengarah */
.potret{float:right;width:230px;margin:0 0 22px 28px}
.potret img{border-radius:var(--r-besar);border:1px solid var(--garis)}
.potret figcaption{margin-top:10px;font-size:.85em;line-height:1.45;color:var(--asap)}
.potret figcaption b{display:block;font-family:var(--tajuk);font-weight:700;
       color:var(--arang)}
.artikel-meta{font-size:.78rem;color:var(--asap);letter-spacing:.04em;
       padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--garis);
       font-variant-numeric:tabular-nums}

/* Nota bawah jadual */
.jadual-nota{font-size:.8em;color:var(--asap);margin-top:12px}

/* Lencana status pada kad hutan lipur. Tanpa ini "DITUTUP" mewarisi latar
   .status (merah) — jadi buka dan tutup kelihatan SAMA. */
.status--tutup{background:var(--bahaya);color:#fff}

/* Lencana jenis fail. Warna berbeza per format supaya senarai muat turun boleh
   diimbas pantas. */
.fail-jenis--xlsx{background:#1D6144;color:#fff}
.fail-jenis--doc{background:#1F4D72;color:#fff}

@media(max-width:1000px){
  .grid-peta{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .grid-direktori,.grid-peta{grid-template-columns:1fr}
  .borang{padding:22px 18px}
  .potret{float:none;width:100%;max-width:230px;margin:0 0 20px}
}

/* ---------- HALAMAN BUTIRAN HUTAN LIPUR ----------
   Menutup jurang terbesar mockup: laman ini berhujah "mengutamakan tugasan"
   dan tugasan nombor satunya ialah mencari hutan untuk dilawati — tetapi
   sebelum ini setiap kad menuju ke href="#". */
.tajuk-status{margin-top:14px}
.laman-tajuk .status{position:static;display:inline-block}

.lipur-hero{width:100%;height:auto;border-radius:var(--r-besar);
  border:1px solid var(--garis);margin-bottom:20px}

/* Jalur fakta: empat perkara yang ditanya pelawat SEBELUM bergerak —
   bila buka, berapa bayaran, berapa jauh, seberapa sukar. Ia diletak di atas
   prosa kerana itulah keputusan sebenar yang perlu dibuat. */
.fakta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--garis);border:1px solid var(--garis);
  border-radius:var(--r-besar);overflow:hidden;margin-bottom:26px}
.fakta{background:var(--kertas);padding:16px 18px;display:flex;gap:12px;
  align-items:flex-start}
.fakta-ikon{width:22px;height:22px;color:var(--paku);flex:none;margin-top:2px}
.fakta span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--asap);margin-bottom:2px}
.fakta b{font-size:.94em;font-weight:600;color:var(--arang);line-height:1.4}

/* scroll-margin-top wajib: .lipur-sek ialah sasaran sauh pada halaman Mengenai
   dan Hasil Hutan Bukan Kayu, dan kepala tapak melekat setinggi 83px. Tanpanya
   setiap lompatan sauh mendaratkan tajuk seksyen 33px DI BELAKANG kepala itu.
   99px = 83 kepala + 16 ruang lega. */
.lipur-sek{margin-bottom:28px;scroll-margin-top:99px}
.lipur-sek .h2{font-size:1.3rem;margin-bottom:10px}
.lipur-sek p{max-width:70ch}
.lipur-sek p+p{margin-top:.8em}

.kemudahan{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.kemudahan li{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border:1px solid var(--garis);border-radius:var(--r-pil);font-size:.89em}
.kemudahan svg{width:19px;height:19px;color:var(--paku);flex:none}

.akses{border:1px solid var(--garis);border-radius:var(--r-besar);overflow:hidden}
.akses-baris{padding:15px 18px}
.akses-baris+.akses-baris{border-top:1px solid var(--garis)}
.akses-baris h3{font-size:1rem;margin-bottom:3px}
.akses-baris p{font-size:.89em;color:var(--asap);max-width:66ch}

/* Papan amaran di halaman ini membawa ikon, jadi ia perlu susun atur flex.
   .papan asas ialah blok teks sahaja. */
.papan{display:flex;gap:13px;align-items:flex-start}
.papan-ikon{width:22px;height:22px;flex:none;margin-top:2px;color:var(--bahaya)}

.sisi-fakta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.88em}
.sisi-fakta dt{color:var(--asap)}
.sisi-fakta dd{font-weight:600}

.sisi-lokasi{list-style:none;display:flex;flex-direction:column}
.sisi-lokasi li+li{border-top:1px solid var(--garis)}
.sisi-lokasi a{display:block;padding:9px 0;font-size:.88em;font-weight:500;color:var(--paku)}
.sisi-lokasi a span{display:block;font-size:.8em;font-weight:400;color:var(--asap)}
.sisi-lokasi a:hover{color:var(--paku-gelap)}
.sisi-semua{display:inline-block;margin-top:12px;font-size:.85em;font-weight:600;
  color:var(--paku)}
.sisi-semua:hover{text-decoration:underline}

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

/* ---------- GALERI VIDEO ---------- */
.grid-video{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.video-kad{border:1px solid var(--garis);border-radius:var(--r-besar);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s ease,box-shadow .18s ease}
.video-kad:hover{border-color:var(--paku);box-shadow:0 10px 26px rgba(10,42,33,.10)}
.video-imej{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--kanopi)}
.video-imej img{width:100%;height:100%;object-fit:cover}
/* Butang main mesti kelihatan sebagai video, bukan sekadar foto pegun. */
.video-main{position:absolute;inset:0;display:grid;place-items:center}
.video-main svg{width:26px;height:26px;color:#fff;padding:14px;box-sizing:content-box;
  background:rgba(10,42,33,.7);border-radius:var(--r-pil);
  transition:background .18s ease,transform .18s ease}
.video-kad:hover .video-main svg{background:var(--tualang);color:var(--rimba);transform:scale(1.06)}
.video-masa{position:absolute;right:10px;bottom:10px;background:rgba(6,26,20,.85);color:#fff;
  font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:var(--r-pil);
  font-variant-numeric:tabular-nums}
.video-kad strong{font-family:var(--tajuk);font-size:1.02rem;padding:14px 16px 0;line-height:1.3}
.video-kad>span:last-child{font-size:.87em;color:var(--asap);padding:4px 16px 16px;line-height:1.5}

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

/* ---------- HALAMAN BUTIRAN PERKHIDMATAN ----------
   Susunan halaman ini ialah hujah "mengutamakan tugasan" dalam bentuk paling
   tulen: kelayakan -> dokumen -> proses -> fi. Pengguna diberitahu sama ada
   dia layak SEBELUM diberitahu apa itu jabatan. */

/* Senarai semak. Tanda tik hijau, bukan bulet — item ini ialah syarat yang
   dipenuhi atau tidak, jadi bentuknya patut membaca sebagai borang semakan.
   Satu lajur: setiap item ialah ayat penuh, dan dua lajur akan memecahkannya
   pada baris kedua tanpa faedah imbasan. */
.semak{list-style:none;display:flex;flex-direction:column;gap:2px}
.semak li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--garis);font-size:.95em;line-height:1.55}
.semak li:last-child{border-bottom:0}
.semak svg{width:19px;height:19px;color:var(--paku);flex:none;margin-top:3px}

/* Tangga proses. Nombor berlabuh pada garis menegak yang menyambung langkah —
   garis itu yang menyatakan "ini berturutan", bukan sekadar senarai bernombor.
   Garis dilukis pada ::before setiap item dan diberhentikan pada item terakhir,
   supaya ia tamat pada bulatan akhir dan bukan menjuntai ke bawah. */
.proses{list-style:none;counter-reset:none}
.proses li{position:relative;display:flex;gap:16px;padding-bottom:22px}
.proses li:last-child{padding-bottom:0}
.proses li::before{content:"";position:absolute;left:15px;top:34px;bottom:0;
  width:2px;background:var(--garis)}
.proses li:last-child::before{display:none}
.proses-no{flex:none;width:32px;height:32px;border-radius:var(--r-pil);
  display:grid;place-items:center;background:var(--paku);color:#fff;
  font-family:var(--badan);font-size:.9rem;font-weight:700;position:relative;z-index:1}
.proses strong{display:block;font-family:var(--tajuk);font-size:1.08rem;
  font-weight:600;color:var(--arang);margin-bottom:3px;padding-top:4px}
.proses p{font-size:.92em;color:var(--asap);max-width:64ch}

/* Blok "Mohon" di sisi. Ia dipenuhi warna kerana ia SATU-SATUNYA tindakan
   utama di halaman ini — .sisi-blok biasa di bawahnya kekal kosong supaya
   perbezaan itu membawa maksud. */
.sisi-mohon{background:var(--lumut);border-color:var(--paku);padding:18px 18px 20px}
.sisi-mohon h2{color:var(--paku-gelap)}
.sisi-mohon p{font-size:.88em;color:var(--arang);margin-bottom:13px;line-height:1.55}
/* Warna MESTI dinyatakan semula: `.sisi-blok a` ialah (0,1,1) dan mengalahkan
   `.btn` (0,1,0), jadi butang mewarisi hijau --paku atas latar hijau --paku dan
   labelnya hilang terus. Dua kelas di sini menjadikannya (0,2,0). */
.sisi-mohon .btn{display:block;text-align:center;color:#fff}
.sisi-mohon .btn:hover{color:#fff}

body.kontras .sisi-mohon{background:#000;border-color:#FFE45E}
body.kontras .sisi-mohon h2,body.kontras .sisi-mohon p{color:#fff}
body.kontras .proses-no{background:#FFE45E;color:#000}
body.kontras .semak svg,body.kontras .fakta-ikon{color:#FFE45E}

@media(max-width:720px){
  .proses li{gap:12px}
  .proses li::before{left:13px}
  .proses-no{width:28px;height:28px;font-size:.82rem}
}

/* ---------- PEMBETULAN KONTRAS TINGGI: TEKS ATAS ISIAN KUNING ----------
   `body.kontras` memetakan --paku kepada kuning #FFE45E, tetapi setiap peraturan
   yang menggunakan `background:var(--paku)` mengunci `color:#fff` secara tetap.
   Hasilnya putih atas kuning pada 1.27:1 — praktikalnya tidak boleh dibaca,
   tepat dalam mod yang wujud untuk menjadikannya lebih mudah dibaca.

   Isian bertukar warna melalui token; teksnya tidak boleh, jadi ia dinyatakan
   di sini sekali sahaja untuk kesemua permukaan kuning. */
body.kontras .btn,
body.kontras .btn:hover,
body.kontras .btn-hantar,
body.kontras .btn-hantar:hover,
body.kontras .sisi-mohon .btn,
body.kontras .sisi-mohon .btn:hover,
body.kontras .head-cari button,
body.kontras .langkah-aktif span{color:#000}

/* ---------- 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.

   Jejari --r-besar dan bukan --r: ini kad kandungan, dan mockup 2 memberi kad
   lengkung murah hati. */
.glosari{border:1px solid var(--garis);border-radius:var(--r-besar);
  background:var(--kertas);overflow:hidden}
.glosari>div{padding:17px 22px}
.glosari>div+div{border-top:1px solid var(--garis)}
.glosari dt{font-family:var(--tajuk);font-weight:600;font-size:1.02rem;
  color:var(--rimba);margin-bottom:4px}
.glosari dd{font-size:.9em;color:var(--asap);line-height:1.62;max-width:74ch}