/* ==========================================================================
   [CHANGE 2026-07-23] what: sistem reka bentuk portal Bahagian Pengurusan Kewangan
   why: portal kewangan perlu padat, tepat, mudah diimbas
   verify: buka setiap halaman dalam tema terang dan gelap, semak lebar mudah alih

   [CHANGE 2026-07-24] Arahan Founder: laman utama kini mengguna rupa papan pemuka
   ala AdminLTE 2.x — kad berwarna (hijau/biru/kuning/merah), carta interaktif, dan
   glassmorphism ringan. Warna kad hanya pada kad papan pemuka; di dalam kandungan,
   hijau hutan kekal = jenama & pautan, oker terbakar kekal = "tarikh akhir" sahaja.
   Kad dibina sendiri (SVG + JS vanila) — tiada Bootstrap, tiada CDN, sedar-tema.
   ========================================================================== */

:root{
  --ground:#f6f7f4;
  --surface:#ffffff;
  --surface-2:#eef1ea;
  --line:#dde3d9;
  --line-soft:#e9ede5;

  --ink:#16211a;
  --ink-soft:#42504a;
  --muted:#74827a;

  --hijau:#1f5c3d;
  --hijau-gelap:#153f2b;
  --hijau-lembut:#e6efe9;

  --oker:#9c4d16;
  --oker-lembut:#fbeee1;
  --oker-garis:#e8c9a8;

  /* [CHANGE 2026-07-24] palet kad papan pemuka + aksen carta (sedar-tema) */
  --biru:#2563a8; --kuning:#a8712a; --merah:#c0392b;
  --kad-hijau:#2f7a4f; --kad-biru:#2563a8; --kad-kuning:#a8712a; --kad-merah:#c0392b;

  --radius:10px;
  --radius-lg:14px;
  --maxw:1180px;
  --bayang:0 1px 2px rgba(20,40,30,.05), 0 8px 24px -18px rgba(20,40,30,.35);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0e1411; --surface:#151d18; --surface-2:#1b241e;
    --line:#2b362e; --line-soft:#222c26;
    --ink:#e7eee9; --ink-soft:#b2c0b7; --muted:#7e8e85;
    --hijau:#5fae80; --hijau-gelap:#4a9169; --hijau-lembut:#1a2b21;
    --oker:#e59255; --oker-lembut:#2c1f14; --oker-garis:#5a3d23;
    --biru:#6aa5e0; --kuning:#cf9a3a; --merah:#e0685a;
    --kad-hijau:#34805a; --kad-biru:#2f6cb0; --kad-kuning:#9c6a20; --kad-merah:#b8443a;
    --bayang:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="light"]{
  --ground:#f6f7f4; --surface:#ffffff; --surface-2:#eef1ea;
  --line:#dde3d9; --line-soft:#e9ede5;
  --ink:#16211a; --ink-soft:#42504a; --muted:#74827a;
  --hijau:#1f5c3d; --hijau-gelap:#153f2b; --hijau-lembut:#e6efe9;
  --oker:#9c4d16; --oker-lembut:#fbeee1; --oker-garis:#e8c9a8;
  --biru:#2563a8; --kuning:#a8712a; --merah:#c0392b;
  --kad-hijau:#2f7a4f; --kad-biru:#2563a8; --kad-kuning:#a8712a; --kad-merah:#c0392b;
}
:root[data-theme="dark"]{
  --ground:#0e1411; --surface:#151d18; --surface-2:#1b241e;
  --line:#2b362e; --line-soft:#222c26;
  --ink:#e7eee9; --ink-soft:#b2c0b7; --muted:#7e8e85;
  --hijau:#5fae80; --hijau-gelap:#4a9169; --hijau-lembut:#1a2b21;
  --oker:#e59255; --oker-lembut:#2c1f14; --oker-garis:#5a3d23;
  --biru:#6aa5e0; --kuning:#cf9a3a; --merah:#e0685a;
  --kad-hijau:#34805a; --kad-biru:#2f6cb0; --kad-kuning:#9c6a20; --kad-merah:#b8443a;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  line-height:1.62; font-size:16px;
  -webkit-font-smoothing:antialiased;
  /* [CHANGE 2026-07-24] kolam warna lembut supaya panel berkaca ada sesuatu untuk dikaburkan.
     Sengaja RINGAN — portal kerajaan, bukan papan pemuka SaaS. */
  background:
    radial-gradient(1100px 560px at 8% -6%, color-mix(in srgb, var(--hijau) 9%, transparent), transparent 60%),
    radial-gradient(900px 520px at 100% 2%, color-mix(in srgb, var(--biru) 8%, transparent), transparent 62%),
    var(--ground);
  background-attachment:fixed;
}
a{color:var(--hijau); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--hijau); outline-offset:2px; border-radius:3px}
img{max-width:100%; height:auto; display:block}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px}

h1,h2,h3,h4{font-family:"Libre Franklin",system-ui,sans-serif; font-weight:800; letter-spacing:-.018em; text-wrap:balance; line-height:1.2}

/* ---------- jalur demo: satu-satunya tempat oker digunakan selain tarikh akhir ---------- */
.jalur-demo{background:var(--oker-lembut); border-bottom:1px solid var(--oker-garis)}
.jalur-demo .wrap{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding-block:8px}
.jalur-demo p{font-size:12.5px; color:var(--oker); font-weight:600}
.jalur-demo span{font-size:12.5px; color:var(--ink-soft)}

/* ---------- kepala ---------- */
.kepala{background:var(--surface); border-bottom:1px solid var(--line)}

/* [CHANGE 2026-07-23] what: gambar latar kepala yang dimuat naik pentadbir
   why: tanpa tabir, gambar terang menjadikan teks gelap tidak terbaca dan
        pentadbir tiada cara membetulkannya selain cuba gambar lain berulang kali.
        Tabir menggunakan warna permukaan tema semasa, jadi ia berfungsi dalam
        tema terang DAN gelap tanpa tetapan tambahan.
   verify: muat naik gambar terang dan gelap, nama serta carian kekal terbaca */
.kepala.ada-latar{
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--surface) 80%, transparent),
      color-mix(in srgb, var(--surface) 80%, transparent)
    ),
    var(--latar-kepala);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.kepala .wrap{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; padding-block:20px}
.jenama{display:flex; align-items:center; gap:14px; min-width:0}
.lambang{
  width:46px; height:46px; flex:none; border-radius:9px;
  background:var(--hijau); color:#fff;
  display:grid; place-items:center;
  font-family:"Libre Franklin",sans-serif; font-weight:800; font-size:17px; letter-spacing:-.03em;
}
/* [CHANGE 2026-07-23] what: kedua-dua bahagian nama pada saiz yang sama
   why: sebelum ini teks atas 11.5px dan nama 19px, jadi ia nampak seperti dua
        elemen berasingan yang tersangkut bersama, bukan satu kunci jenama.
        Hierarki kini dibawa oleh BERAT dan WARNA, bukan saiz — kalau saiz sama
        dan berat juga sama, mata tidak tahu mana nama sebenar bahagian
   verify: kepala portal, kedua-dua bahagian sebaris pada ketinggian huruf sama */
.jenama-teks{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 .45ch; min-width:0}
/* [CHANGE 2026-07-23] teks atas dibuang sepenuhnya atas permintaan.
   Peraturan .institut dibuang sekali — CSS mati adalah CSS yang mengelirukan. */
.jenama-teks .bahagian{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:clamp(15px,1.7vw,19px);
  line-height:1.2;
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.015em;
}

.cari{display:flex; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--ground)}
.cari input{
  border:0; background:transparent; color:var(--ink);
  padding:9px 13px; font:inherit; font-size:14.5px; width:230px; max-width:44vw;
}
.cari input::placeholder{color:var(--muted)}
.cari button{
  border:0; background:var(--hijau); color:#fff; cursor:pointer;
  padding:9px 16px; font:inherit; font-size:14px; font-weight:600;
}
.cari button:hover{background:var(--hijau-gelap)}

/* ---------- navigasi ---------- */
.nav{background:var(--hijau)}
.nav .wrap{display:flex; flex-wrap:wrap; gap:2px; padding-inline:12px}
.nav a{
  color:#e9f2ec; font-size:14px; font-weight:600;
  padding:12px 14px; border-bottom:3px solid transparent;
}
.nav a:hover{background:rgba(255,255,255,.10); text-decoration:none}
.nav a.aktif{border-bottom-color:#ffffff; background:rgba(255,255,255,.13); color:#fff}

/* ---------- susun atur kandungan ---------- */
main{padding-block:30px 56px}
.grid-utama{display:grid; gap:26px; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); align-items:start}
@media (max-width:880px){ .grid-utama{grid-template-columns:1fr} }

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--bayang); overflow:hidden}
.panel + .panel{margin-top:22px}
.panel-kepala{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line-soft); background:var(--surface-2);
}
.panel-kepala h2{font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:800}
.panel-kepala a{font-size:13px; font-weight:600}
.panel-isi{padding:18px}
.panel-isi.rapat{padding:0}

/* ---------- senarai rekod ---------- */
.senarai{list-style:none}
.senarai li{padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.senarai li:last-child{border-bottom:0}
.senarai .tajuk{font-weight:600; color:var(--ink); display:block}
.senarai a.tajuk:hover{color:var(--hijau)}
.senarai .meta{font-size:12.5px; color:var(--muted); margin-top:4px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center}

.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; font-variant-numeric:tabular-nums}

/* ---------- lencana ---------- */
.lencana{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap}
.lencana-hijau{background:var(--hijau-lembut); color:var(--hijau); border-color:color-mix(in srgb, var(--hijau) 22%, transparent)}
.lencana-oker{background:var(--oker-lembut); color:var(--oker); border-color:var(--oker-garis)}
.lencana-senyap{background:var(--surface-2); color:var(--muted); border-color:var(--line)}

/* ---------- takwim: tarikh akhir dapat oker, yang lain tidak ---------- */
.takwim-item{display:flex; gap:14px; padding:13px 18px; border-bottom:1px solid var(--line-soft)}
.takwim-item:last-child{border-bottom:0}
.takwim-tarikh{
  flex:none; width:54px; text-align:center; border-radius:8px; padding:6px 0;
  background:var(--surface-2); border:1px solid var(--line);
}
.takwim-item.akhir .takwim-tarikh{background:var(--oker-lembut); border-color:var(--oker-garis)}
.takwim-hari{font-family:"Libre Franklin",sans-serif; font-weight:800; font-size:18px; line-height:1.1; color:var(--ink)}
.takwim-item.akhir .takwim-hari{color:var(--oker)}
.takwim-bulan{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.takwim-teks .t{font-weight:600; font-size:14.5px}
.takwim-teks .k{font-size:12.5px; color:var(--muted); margin-top:3px}

/* ---------- jadual ---------- */
.jadual-bekas{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px}
table.data th, table.data td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.data th{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; background:var(--surface-2); white-space:nowrap}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.nombor{font-family:"IBM Plex Mono",monospace; font-size:12.5px; white-space:nowrap; color:var(--ink-soft)}

/* ---------- artikel ---------- */
.artikel{max-width:70ch}
.artikel h1{font-size:clamp(1.6rem,3.6vw,2.2rem); margin-bottom:8px}
.artikel .terbit{font-size:13px; color:var(--muted); margin-bottom:22px}
.artikel p{margin-bottom:15px; color:var(--ink-soft)}
.artikel p:last-child{margin-bottom:0}

/* ---------- tapis ---------- */
.tapis{display:flex; flex-wrap:wrap; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.tapis a{
  font-size:13px; font-weight:600; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft);
}
.tapis a:hover{border-color:var(--hijau); color:var(--hijau); text-decoration:none}
.tapis a.aktif{background:var(--hijau); border-color:var(--hijau); color:#fff}

/* ---------- borang ---------- */
.medan{display:block; margin-bottom:16px}
.medan span{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px}
.medan input, .medan select, .medan textarea{
  width:100%; padding:10px 12px; font:inherit; font-size:15px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ground); color:var(--ink);
}
.medan textarea{min-height:150px; resize:vertical}
.butang{
  display:inline-block; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:15px;
  padding:11px 22px; border-radius:var(--radius); background:var(--hijau); color:#fff;
}
.butang:hover{background:var(--hijau-gelap); text-decoration:none}

.notis{padding:13px 16px; border-radius:var(--radius); margin-bottom:20px; font-size:14.5px; border:1px solid}
.notis-baik{background:var(--hijau-lembut); border-color:color-mix(in srgb, var(--hijau) 30%, transparent); color:var(--hijau)}
.notis-ralat{background:var(--oker-lembut); border-color:var(--oker-garis); color:var(--oker)}
.notis ul{margin:6px 0 0 18px}

/* ---------- keadaan kosong ---------- */
.kosong{padding:42px 18px; text-align:center; color:var(--muted)}
.kosong strong{display:block; font-family:"Libre Franklin",sans-serif; color:var(--ink); font-size:16px; margin-bottom:6px}

/* ---------- kaki ---------- */
footer{background:var(--surface); border-top:1px solid var(--line); padding-block:26px 34px; margin-top:10px}
.kaki-grid{display:flex; flex-wrap:wrap; gap:20px 44px; justify-content:space-between}
.kaki-grid h3{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px}
.kaki-grid ul{list-style:none; font-size:14px; display:flex; flex-direction:column; gap:5px}
.kaki-nota{margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--muted)}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* ==========================================================================
   [CHANGE 2026-07-23] what: pementasan slaid di bawah menu
   why: portal agensi guna ruang ini untuk hebahan bermusim. Ia diurus dari admin,
        bukan dikodkan keras — lihat modul "Slaid Laman Utama"
   verify: buka laman utama; anak panah, titik dan papan kekunci semuanya berfungsi
   ========================================================================== */

.pementasan{padding-top:22px}
.pementasan-bingkai{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface-2);
  aspect-ratio:1600/460;
  max-height:420px;
}
@media (max-width:640px){ .pementasan-bingkai{aspect-ratio:16/10; max-height:none} }

.slaid{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease;
  display:block; color:inherit; text-decoration:none;
}
.slaid.aktif{opacity:1; visibility:visible}
.slaid img{width:100%; height:100%; object-fit:cover; display:block}

/* Tabir kecerunan supaya teks kekal terbaca atas mana-mana gambar,
   bukan hiasan — ia menjamin kontras. */
.slaid-teks{
  position:absolute; inset:auto 0 0 0;
  padding:26px 26px 22px;
  background:linear-gradient(to top, rgba(6,14,10,.92) 0%, rgba(6,14,10,.72) 45%, rgba(6,14,10,0) 100%);
  color:#f2f7f3;
}
.slaid-teks h2{
  font-family:"Libre Franklin",sans-serif; font-weight:800;
  font-size:clamp(1.05rem,2.4vw,1.6rem); line-height:1.18; letter-spacing:-.02em;
  text-wrap:balance; max-width:34ch; color:#ffffff;
}
.slaid-teks p{
  margin-top:6px; font-size:clamp(.85rem,1.4vw,.98rem);
  color:#d5e2d9; max-width:56ch;
}
a.slaid:hover .slaid-teks h2{text-decoration:underline; text-underline-offset:3px}

.slaid-anak-panah{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(6,14,10,.5); color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background .18s ease, border-color .18s ease;
}
.slaid-anak-panah:hover{background:rgba(6,14,10,.8); border-color:#fff}
.slaid-anak-panah.sebelum{left:14px}
.slaid-anak-panah.selepas{right:14px}
@media (max-width:640px){ .slaid-anak-panah{width:32px; height:32px; font-size:18px} }

.slaid-titik{
  position:absolute; right:20px; bottom:18px;
  display:flex; gap:7px;
}
.slaid-titik button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.55); background:transparent;
  transition:background .18s ease, transform .18s ease;
}
.slaid-titik button:hover{background:rgba(255,255,255,.6)}
.slaid-titik button.aktif{background:#fff; border-color:#fff; transform:scale(1.15)}

@media (prefers-reduced-motion: reduce){
  .slaid{transition:none}
}
/* ---------- logo yang dimuat naik menggantikan kotak berhuruf ---------- */
.lambang-imej{
  height:46px; width:auto; max-width:230px;
  object-fit:contain; flex:none; display:block;
}
@media (max-width:520px){ .lambang-imej{height:38px; max-width:160px} }
/* ---------- pemilih tema ---------- */
.tema-pilih{
  display:inline-flex; gap:2px; flex:none;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); padding:2px;
}
.tema-pilih button{
  border:0; cursor:pointer; font:inherit;
  font-size:12px; font-weight:600; line-height:1;
  padding:6px 11px; border-radius:999px;
  background:transparent; color:var(--muted);
  transition:background .16s ease, color .16s ease;
}
.tema-pilih button:hover{color:var(--ink)}
.tema-pilih button.aktif{background:var(--hijau); color:#fff}
.tema-pilih button:focus-visible{outline:2px solid var(--hijau); outline-offset:2px}

/* Tanpa JavaScript kawalan ini tidak berfungsi, jadi ia disembunyikan sehingga
   skrip menandakannya sedia — lebih baik tiada butang daripada butang mati. */
.tema-pilih{visibility:hidden}
.js-sedia .tema-pilih{visibility:visible}

.kepala-kanan{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
@media (max-width:560px){
  .tema-pilih button{padding:6px 9px; font-size:11.5px}
}
/* ==========================================================================
   [CHANGE 2026-07-23] what: jalur statistik ringkas laman utama
   why: angka kedudukan semasa tanpa perlu membuka laporan

   Tiga nada sahaja, dan setiap satu bermakna:
     hijau  = biasa
     oker   = perlu perhatian (makna SAMA seperti tarikh akhir di seluruh portal)
     senyap = neutral, sekadar rujukan
   Pemilih warna bebas akan menghasilkan pelangi di mana tiada satu pun menonjol.
   verify: buka laman utama dalam tema terang dan gelap
   ========================================================================== */

/* ==========================================================================
   [CHANGE 2026-07-24] Papan pemuka laman utama — kad berwarna ala AdminLTE 2.x
   ========================================================================== */
.papan{margin-bottom:26px}

.kotak-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}

/* Kad kecil berwarna solid, teks putih — nadi papan pemuka */
.kotak-kecil{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--radius-lg); color:#fff;
  box-shadow:0 10px 30px -16px rgba(20,40,30,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.kotak-kecil:hover{transform:translateY(-3px); box-shadow:0 18px 40px -16px rgba(20,40,30,.65)}
/* kilau halus supaya warna solid tidak rata mati */
.kotak-kecil::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(158deg, rgba(255,255,255,.20), rgba(255,255,255,0) 52%);
}
.kotak-atas{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:17px 18px 14px}
.kotak-teks{min-width:0}
.kotak-nilai{
  font-family:"Libre Franklin",system-ui,sans-serif; font-weight:800;
  font-size:clamp(2rem,4.4vw,2.65rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.kotak-label{margin-top:7px; font-weight:700; font-size:14.5px; opacity:.96; text-wrap:balance}
.kotak-ikon{flex:none; opacity:.30; margin-top:2px}
.kotak-ikon svg{width:54px; height:54px; display:block}
.kotak-kaki{
  display:block; padding:8px 18px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.16); color:rgba(255,255,255,.9);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kotak-hijau{background:var(--kad-hijau)}
.kotak-biru{background:var(--kad-biru)}
.kotak-kuning{background:var(--kad-kuning)}
.kotak-merah{background:var(--kad-merah)}

/* ---------- panel carta ---------- */
.carta-panel{margin-bottom:26px}
.carta-grid{display:grid; gap:24px; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); padding:18px 20px 20px; align-items:center}
@media (max-width:760px){ .carta-grid{grid-template-columns:1fr} }
.carta-blok{min-width:0}
.carta-tajuk{font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft)}
.carta-sub{font-size:11.5px; color:var(--muted); margin:2px 0 12px; font-family:"IBM Plex Mono",ui-monospace,monospace}
.carta-svg{width:100%; height:auto; display:block; overflow:visible; touch-action:none}

/* garis + isi kawasan */
.carta-grid-baris{stroke:var(--line-soft); stroke-width:1}
.carta-paksi{fill:var(--muted); font-size:10.5px; font-family:"IBM Plex Mono",ui-monospace,monospace}
.siri-garis{fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .2s ease}
.siri-isi{transition:opacity .2s ease}
.siri-tuntutan .siri-garis{stroke:var(--hijau)}
.siri-tuntutan .siri-isi{fill:var(--hijau); fill-opacity:.13}
.siri-baucar   .siri-garis{stroke:var(--biru)}
.siri-baucar   .siri-isi{fill:var(--biru); fill-opacity:.10}
.siri.sorok{opacity:0; pointer-events:none}
.carta-titik{r:3.5; stroke:var(--surface); stroke-width:2; transition:r .12s ease}
.siri-tuntutan .carta-titik{fill:var(--hijau)}
.siri-baucar   .carta-titik{fill:var(--biru)}
.carta-panduan{stroke:var(--ink-soft); stroke-width:1; stroke-dasharray:3 3; opacity:0; transition:opacity .1s ease}
.carta-panduan.papar{opacity:.5}
.carta-titik-aktif{opacity:0; transition:opacity .1s ease}
.carta-titik-aktif.papar{opacity:1}
.carta-titik-aktif circle{r:5; stroke:var(--surface); stroke-width:2.5}

/* legenda boleh-klik */
.carta-legenda{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.carta-legenda button{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
.carta-legenda button:hover{background:var(--line-soft)}
.carta-legenda button .cip{width:11px; height:11px; border-radius:3px; flex:none}
.carta-legenda button.mati{opacity:.42; text-decoration:line-through}
.cip-tuntutan{background:var(--hijau)}
.cip-baucar{background:var(--biru)}

/* tips terapung */
.carta-tip{
  position:fixed; z-index:60; pointer-events:none; opacity:0;
  transform:translate(-50%,-115%); transition:opacity .1s ease;
  background:var(--ink); color:var(--surface);
  border-radius:8px; padding:8px 11px; font-size:12px; line-height:1.5;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5); white-space:nowrap;
}
.carta-tip.papar{opacity:1}
.carta-tip b{font-weight:700}
.carta-tip .baris{display:flex; align-items:center; gap:6px}
.carta-tip .cip{width:9px; height:9px; border-radius:2px; flex:none}

/* ---------- donat peruntukan ---------- */
.donat-bekas{position:relative; width:min(220px,80%); margin:0 auto; aspect-ratio:1}
.donat-svg{width:100%; height:100%; transform:rotate(-90deg)}
.donat-trek{fill:none; stroke:var(--line); stroke-width:14}
.donat-arka{fill:none; stroke:var(--kad-biru); stroke-width:14; stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.donat-tengah{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.donat-nilai{font-family:"Libre Franklin",sans-serif; font-weight:800; font-size:clamp(1.8rem,6vw,2.3rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.donat-kecil{font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.donat-legenda{display:flex; justify-content:center; gap:16px; margin-top:14px; font-size:12.5px; color:var(--ink-soft)}
.donat-legenda span{display:inline-flex; align-items:center; gap:7px}
.donat-legenda .cip{width:11px; height:11px; border-radius:3px; flex:none}

@media (prefers-reduced-motion: reduce){
  .kotak-kecil, .siri-garis, .siri-isi, .donat-arka{transition:none !important}
  .kotak-kecil:hover{transform:none}
}

/* ---------- glassmorphism ringan pada panel putih ---------- */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .panel, .carta-panel{
    background:color-mix(in srgb, var(--surface) 74%, transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.3);
    backdrop-filter:blur(12px) saturate(1.3);
    border-color:color-mix(in srgb, var(--line) 62%, transparent);
  }
  .panel-kepala{background:color-mix(in srgb, var(--surface-2) 52%, transparent)}
}
/* ---------- pemilih bahasa ---------- */
.bahasa-pilih{
  display:inline-flex; gap:2px; flex:none;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); padding:2px;
}
.bahasa-pilih a{
  font-size:12px; font-weight:700; line-height:1;
  padding:6px 11px; border-radius:999px;
  color:var(--muted); text-decoration:none;
  transition:background .16s ease, color .16s ease;
}
.bahasa-pilih a:hover{color:var(--ink); text-decoration:none}
.bahasa-pilih a.aktif{background:var(--hijau); color:#fff}
.bahasa-pilih a:focus-visible{outline:2px solid var(--hijau); outline-offset:2px}
@media (max-width:560px){ .bahasa-pilih a{padding:6px 9px; font-size:11.5px} }
/* ==========================================================================
   [CHANGE 2026-07-23] what: gaya halaman panduan pengguna
   why: panduan dibaca dari atas ke bawah, bukan diimbas seperti jadual —
        ia perlu ruang baris dan lebar teks yang selesa dibaca
   verify: /admin/panduan
   ========================================================================== */

.panduan{max-width:860px}
.panduan-intro{
  font-size:15px; color:var(--ink-soft); line-height:1.7;
  margin-bottom:22px; max-width:68ch;
}
.panduan .panel + .panel{margin-top:20px}
.panduan .panel-isi{padding:20px 22px}

/* peraturan asas - kad ringkas */
.panduan-kunci{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kunci-item{background:var(--ground); border:1px solid var(--line-soft); border-radius:var(--radius); padding:14px 16px}
.kunci-item strong{display:block; font-size:14px; margin-bottom:5px; color:var(--hijau)}
.kunci-item p{font-size:13.5px; color:var(--ink-soft); line-height:1.6}

/* tugasan boleh buka-tutup */
.tugas{border:1px solid var(--line-soft); border-radius:var(--radius); margin-bottom:10px; background:var(--ground)}
.tugas[open]{background:var(--surface); border-color:var(--line)}
.tugas summary{
  cursor:pointer; padding:13px 16px; font-weight:700; font-size:14.5px;
  font-family:"Libre Franklin",system-ui,sans-serif; letter-spacing:-.01em;
  list-style:none; display:flex; align-items:center; gap:9px;
}
.tugas summary::-webkit-details-marker{display:none}
.tugas summary::before{
  content:"+"; font-family:"IBM Plex Mono",monospace; font-weight:500;
  color:var(--hijau); font-size:15px; width:14px; flex:none;
}
.tugas[open] summary::before{content:"−"}
.tugas summary:hover{color:var(--hijau)}
.tugas ol{margin:0 18px 6px 40px; font-size:14px; color:var(--ink-soft); line-height:1.7}
.tugas ol li{margin-bottom:7px}
.tugas-nota{
  margin:0 16px 14px 40px; padding:10px 13px;
  background:var(--hijau-lembut); border-radius:8px;
  font-size:13px; color:var(--ink-soft);
}

/* senarai biasa */
.panduan-senarai{margin-left:18px; font-size:14px; color:var(--ink-soft); line-height:1.7}
.panduan-senarai li{margin-bottom:8px}

/* soal jawab */
.panduan-soal dt{font-weight:700; font-size:14px; color:var(--ink); margin-top:14px}
.panduan-soal dt:first-child{margin-top:0}
.panduan-soal dd{margin:5px 0 0; font-size:13.5px; color:var(--ink-soft); line-height:1.65}
.panduan kbd{
  font-family:"IBM Plex Mono",monospace; font-size:12px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:4px; padding:1px 5px;
}
.panduan code{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  background:var(--surface-2); border-radius:4px; padding:1px 5px; color:var(--hijau);
}

/* amaran akhir */
.panduan-amaran{border-color:var(--oker-garis)}
.panduan-amaran .panel-kepala{background:var(--oker-lembut); border-bottom-color:var(--oker-garis)}
.panduan-amaran .panel-kepala h2{color:var(--oker)}
.panduan-amaran .panel-isi p{font-size:14px; color:var(--ink-soft); line-height:1.7}

@media print{
  .sisi, .kerja-kepala{display:none}
  .tugas{break-inside:avoid}
  .tugas summary::before{content:""}
  details{open:true}
}
/* tajuk halaman panduan versi awam - susun atur admin sudah ada tajuknya sendiri */
.panduan-tajuk{
  font-size:clamp(1.5rem,3.4vw,2rem);
  letter-spacing:-.028em; margin-bottom:6px;
}

/* [CHANGE 2026-07-27] Galeri: grid gambar + lightbox (dulu senarai teks).
   Guna token sedia ada — hijau jenama, bukan warna baharu; tiada pustaka luar. */
.galeri-grid{
  list-style:none; display:grid; gap:16px; padding:18px 20px 22px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.galeri-item{min-width:0}
.galeri-pautan{display:block; text-decoration:none; color:inherit; border-radius:var(--radius-lg); outline-offset:3px}
.galeri-item figure, .galeri-kosong-sel{margin:0}
.galeri-imej-bekas{
  position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2);
}
.galeri-imej-bekas img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.galeri-pautan:hover .galeri-imej-bekas img,
.galeri-pautan:focus-visible .galeri-imej-bekas img{transform:scale(1.05)}
/* butang zum halus, muncul atas hover/fokus */
.galeri-zum{
  position:absolute; right:10px; bottom:10px; width:34px; height:34px;
  display:grid; place-items:center; border-radius:9px; font-size:15px;
  background:rgba(6,14,10,.62); color:#fff; opacity:0; transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease;
}
.galeri-pautan:hover .galeri-zum, .galeri-pautan:focus-visible .galeri-zum{opacity:1; transform:none}
/* sel tanpa imej — tetap dipapar, tidak pecah */
.galeri-tiada{display:grid; place-items:center}
.galeri-ikon{font-size:40px; opacity:.35}
.galeri-item figcaption{padding:11px 3px 2px}
.galeri-tajuk{display:block; font-weight:600; color:var(--ink); font-size:14.5px; line-height:1.35}
.galeri-pautan:hover .galeri-tajuk{color:var(--hijau)}
.galeri-tarikh{display:block; font-size:12px; color:var(--muted); margin-top:4px}
.galeri-meta{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center}
.galeri-meta .galeri-tarikh{margin-top:4px}
/* lencana bilangan gambar pada kover album */
.galeri-kira-lencana{
  position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.01em;
  background:rgba(6,14,10,.62); color:#fff; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}

/* [CHANGE 2026-07-28] Notis Privasi (PDPA) + persetujuan borang */
.notis-isi{padding:20px 22px 26px; max-width:76ch}
.notis-isi h2{font-size:1.05rem; letter-spacing:-.01em; margin:22px 0 8px; color:var(--ink)}
.notis-isi h2:first-of-type{margin-top:10px}
.notis-isi p{margin:0 0 12px; color:var(--ink-soft); line-height:1.6}
.notis-isi ul{margin:0 0 12px; padding-left:20px; color:var(--ink-soft)}
.notis-isi li{margin-bottom:5px; line-height:1.55}
.notis-tarikh{font-size:12px; color:var(--muted); margin-bottom:16px}
.notis-amaran{
  border:1px solid var(--line); border-left:3px solid var(--oker, #b5651d);
  background:var(--surface-2); border-radius:8px; padding:12px 14px; margin:0 0 20px;
  font-size:13.5px; color:var(--ink-soft);
}
.notis-hubungi{padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px}
.notis-nota{font-size:12px; color:var(--muted)}
/* kotak persetujuan pada borang maklum balas */
.semak-persetujuan{display:flex; gap:10px; align-items:flex-start; margin:4px 0 18px; font-size:13.5px; color:var(--ink-soft); line-height:1.5}
.semak-persetujuan input{margin-top:3px; flex:none}
.semak-persetujuan a{color:var(--hijau); font-weight:600}

/* Lightbox — tabir gelap, imej penuh, navigasi */
.galeri-lightbox{
  position:fixed; inset:0; z-index:80; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(6,12,9,.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.galeri-lightbox.buka{opacity:1; visibility:visible}
.galeri-lightbox img{
  max-width:min(1100px,94vw); max-height:78vh; object-fit:contain;
  border-radius:var(--radius-lg); box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.galeri-lb-kapsyen{margin-top:16px; text-align:center; color:#eef3ef; max-width:64ch}
.galeri-lb-kapsyen strong{display:block; font-size:16px; font-weight:700}
.galeri-lb-kapsyen span{display:block; font-size:12.5px; color:#aebcb3; margin-top:4px}
.galeri-lb-tutup{
  position:absolute; top:16px; right:16px; width:44px; height:44px;
  border:0; border-radius:11px; background:rgba(255,255,255,.14); color:#fff;
  font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.galeri-lb-tutup:hover{background:rgba(255,255,255,.24)}
.galeri-lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border:0; border-radius:50%; background:rgba(255,255,255,.14);
  color:#fff; font-size:28px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.galeri-lb-nav:hover{background:rgba(255,255,255,.26)}
.galeri-lb-prev{left:16px} .galeri-lb-next{right:16px}
.galeri-lb-kira{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#aebcb3; font-size:12px; letter-spacing:.05em}
@media (max-width:560px){
  .galeri-lb-nav{width:42px; height:42px; font-size:22px}
  .galeri-lb-prev{left:8px} .galeri-lb-next{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .galeri-imej-bekas img, .galeri-zum, .galeri-lightbox{transition:none}
  .galeri-pautan:hover .galeri-imej-bekas img,
  .galeri-pautan:focus-visible .galeri-imej-bekas img{transform:none}
}