/* ===== Mega menu (desktop) dan menu offcanvas (telefon) =====
   Dimuat selepas gaya asas laman utama, jadi peraturan di sini mengatasi .dd lama. */

/* Panel mega selebar bar nav, bukan selebar item menu */
.menu > li.ada-mega{position:static}
.mega{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;padding:28px 32px 0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(10,22,51,.08),0 28px 60px -24px rgba(16,40,110,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.menu > li.open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
/* jambatan tidak nampak supaya tetikus boleh bergerak dari menu ke panel tanpa panel tertutup */
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mega-isi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px 32px}
.mega-lajur.mega-luas{grid-column:span 3}
.mega-luas ul{columns:3;column-gap:32px}
.mega-tajuk{display:block;font-family:var(--tajuk);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--dakwat);padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid var(--dakwat)}
a.mega-tajuk:hover{color:var(--laluan);border-bottom-color:var(--laluan)}
.mega ul{list-style:none}
.mega li{break-inside:avoid}
.mega li a{display:block;padding:7px 0;font-size:14.5px;line-height:1.35;color:#3F4A66}
.mega li a:hover{color:var(--laluan);text-decoration:underline;text-underline-offset:3px}
.mega-kaki{display:flex;flex-wrap:wrap;gap:4px 24px;margin:24px -32px 0;padding:14px 32px;border-top:1px solid rgba(10,22,51,.08);background:#F6F7FA;border-radius:0 0 18px 18px}
.mega-kaki a{display:inline-flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;font-weight:600;color:var(--dakwat)}
.mega-kaki a:hover{color:var(--laluan)}
.mega-kaki svg{width:16px;height:16px;color:var(--laluan)}
.menu > li > a[aria-current="page"]{color:var(--laluan)}

/* Telefon dan tablet kecil: menu bar disembunyikan, butang menu membuka offcanvas */
@media (max-width:920px){
  .menu,.menu.buka{display:none!important}
}

.oc[hidden]{display:none}
.oc{position:fixed;inset:0;z-index:200}
.oc-latar{position:absolute;inset:0;background:rgba(10,22,51,.42);opacity:0;transition:opacity .24s ease}
.oc-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);display:flex;flex-direction:column;background:#fff;box-shadow:-24px 0 60px -20px rgba(10,22,51,.35);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.oc.buka .oc-latar{opacity:1}
.oc.buka .oc-panel{transform:none}
html.oc-kunci,html.oc-kunci body{overflow:hidden}
.oc-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid rgba(10,22,51,.08)}
.oc-kepala img{height:32px;width:auto}
.oc-tutup{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#F1F2F6;color:var(--dakwat)}
.oc-tutup:hover{background:#E6E8EF}
.oc-tutup svg{width:20px;height:20px}
.oc-badan{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 20px 24px}
.oc-cari{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;margin:4px 0 12px;border:1px solid rgba(10,22,51,.16);border-radius:12px;font-size:15px;color:#6E7891}
.oc-cari svg{width:18px;height:18px;color:var(--dakwat-2)}
.oc-kump{border-bottom:1px solid rgba(10,22,51,.1)}
.oc-kump > summary{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-family:var(--tajuk);font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--dakwat);cursor:pointer;list-style:none}
.oc-kump > summary::-webkit-details-marker{display:none}
.oc-kump > summary::after,.oc-sub > summary::after{content:"";flex:none;width:8px;height:8px;margin-right:6px;border-right:2px solid #8A93A8;border-bottom:2px solid #8A93A8;transform:rotate(45deg);transition:transform .2s}
.oc-kump[open] > summary::after,.oc-sub[open] > summary::after{transform:rotate(-135deg)}
.oc-kump[aria-current] > summary{color:var(--laluan)}
.oc-kump-isi{padding:0 0 12px}
.oc-sub{border-top:1px solid rgba(10,22,51,.06)}
.oc-sub > summary{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:15.5px;font-weight:600;color:var(--dakwat);cursor:pointer;list-style:none}
.oc-sub > summary::-webkit-details-marker{display:none}
.oc-sub ul{list-style:none;padding:0 0 10px 12px;border-left:2px solid rgba(10,22,51,.08);margin-left:2px}
.oc-sub li a{display:block;padding:9px 0 9px 4px;font-size:15px;color:#3F4A66}
.oc-sub li a:hover,.oc-sub li a:focus-visible{color:var(--laluan)}
.oc-kaki-p{display:flex;flex-direction:column;gap:2px;padding-top:6px}
.oc-kaki-p a{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:15px;font-weight:600;color:var(--dakwat)}
.oc-kaki-p svg{width:18px;height:18px;color:var(--laluan)}
.oc-bawah{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(10,22,51,.08);background:#F6F7FA}
.oc-bawah .masuk{display:flex}
.oc-bawah .masuk span{display:inline}
.oc-bawah .bahasa{display:flex}