@font-face {   font-family: 'Inter';   font-style: normal;   font-weight: 400 700;   font-display: swap;   src: url('../fonts/inter-latin-400.woff2') format('woff2');   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   @font-face {   font-family: 'Plus Jakarta Sans';   font-style: normal;   font-weight: 400 700;   font-display: swap;   src: url('../fonts/plus-jakarta-sans-latin-400.woff2') format('woff2');   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   @font-face {   font-family: 'Source Serif 4';   font-style: normal;   font-weight: 600 700;   font-display: swap;   src: url('../fonts/source-serif-4-latin-600.woff2') format('woff2');   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   @font-face {   font-family: 'Source Sans 3';   font-style: normal;   font-weight: 400 600;   font-display: swap;   src: url('../fonts/source-sans-3-latin-400.woff2') format('woff2');   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ol, ul { list-style: none; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; width: 100%; }   .jadual-pegawai, .kad__meta, .hasil__kiraan { font-variant-numeric: tabular-nums; }   :root {   --warna-primer: #0B3D6B;   --warna-primer-gelap: #082D50;   --warna-tindakan: #125EA8;   --warna-tindakan-hover: #0C4880;   --warna-aksen: #C8A44B;   --warna-atas-primer: #C9D9E8;   --warna-latar: #FFFFFF;   --warna-latar-alt: #F6F3EC;   --warna-permukaan: #FFFFFF;   --warna-sempadan: #D5DCE4;   --warna-sempadan-kuat: #AFBCCA;   --warna-dakwat: #14202C;   --warna-dakwat-lembut: #48586A;   --warna-jaya: #116639;   --warna-amaran: #7A4E00;   --warna-ralat: #A81E16;   --warna-fokus: #125EA8;   --warna-domain-rancangan: #0E6260;   --warna-domain-perkhidmatan: #1B6046;   --warna-domain-penerbitan: #7A2E5D;   --warna-domain-media: #9C4718;   --warna-domain-hubungi: #4B3A8F;   --warna-domain-perolehan: #8A5A00;   --warna-domain-mengenai: #125EA8;   --taip-muka-tajuk: 'Inter', system-ui, sans-serif;   --taip-muka-isi: 'Inter', system-ui, sans-serif;   --taip-muka-data: 'Inter', system-ui, sans-serif;   --taip-berat-tajuk: 700;   --taip-berat-isi: 400;   --bentuk-radius-kad: 8px;   --bentuk-radius-butang: 6px;   --bentuk-radius-cip: 999px;   --bentuk-radius-kawalan: 6px;   --bentuk-radius-panel: 8px;   --bentuk-radius-dialog: 12px;   --bentuk-lebar-sempadan: 1px;   --bayang-aras-1: 0 1px 2px rgba(9,32,54,.06), 0 4px 12px rgba(9,32,54,.07);   --bayang-aras-2: 0 4px 10px rgba(9,32,54,.09), 0 18px 44px rgba(9,32,54,.16);   --hero-jenis: tugasan;   --hero-imej: url('../img/hero-a.webp'); }   html[data-theme="b"] {   --warna-primer: #0F5A56;   --warna-primer-gelap: #0A403D;   --warna-tindakan: #0B655E;   --warna-tindakan-hover: #084C47;   --warna-aksen: #FFD2A8;   --warna-atas-primer: #C4DBD8;   --warna-latar: #FFFFFF;   --warna-latar-alt: #EDF3F1;   --warna-permukaan: #FFFFFF;   --warna-sempadan: #D2DEDB;   --warna-sempadan-kuat: #A9BDB9;   --warna-dakwat: #14211F;   --warna-dakwat-lembut: #465755;   --warna-jaya: #116639;   --warna-amaran: #7A4E00;   --warna-ralat: #A81E16;   --warna-fokus: #0B655E;   --warna-domain-rancangan: #0E6260;   --warna-domain-perkhidmatan: #1B6046;   --warna-domain-penerbitan: #7A2E5D;   --warna-domain-media: #9C4718;   --warna-domain-hubungi: #4B3A8F;   --warna-domain-perolehan: #8A5A00;   --warna-domain-mengenai: #125EA8;   --taip-muka-tajuk: 'Plus Jakarta Sans', system-ui, sans-serif;   --taip-muka-isi: 'Plus Jakarta Sans', system-ui, sans-serif;   --taip-muka-data: 'Plus Jakarta Sans', system-ui, sans-serif;   --taip-berat-tajuk: 700;   --taip-berat-isi: 400;   --bentuk-radius-kad: 8px;   --bentuk-radius-butang: 6px;   --bentuk-radius-cip: 999px;   --bentuk-radius-kawalan: 6px;   --bentuk-radius-panel: 8px;   --bentuk-radius-dialog: 12px;   --bentuk-lebar-sempadan: 1px;   --bayang-aras-1: 0 1px 2px rgba(10,40,38,.06), 0 4px 12px rgba(10,40,38,.07);   --bayang-aras-2: 0 4px 10px rgba(10,40,38,.09), 0 18px 44px rgba(10,40,38,.16);   --hero-jenis: peta;   --hero-imej: url('../img/hero-c.webp'); }   html[data-theme="c"] {   --warna-primer: #2B2A66;   --warna-primer-gelap: #1D1C4A;   --warna-tindakan: #403DAE;   --warna-tindakan-hover: #2F2D85;   --warna-aksen: #FFB5C0;   --warna-atas-primer: #CFCEE6;   --warna-latar: #FFFFFF;   --warna-latar-alt: #F4F2FA;   --warna-permukaan: #FFFFFF;   --warna-sempadan: #D9D7E6;   --warna-sempadan-kuat: #B3B0CA;   --warna-dakwat: #191927;   --warna-dakwat-lembut: #4C4B60;   --warna-jaya: #116639;   --warna-amaran: #7A4E00;   --warna-ralat: #A81E16;   --warna-fokus: #403DAE;   --warna-domain-rancangan: #0E6260;   --warna-domain-perkhidmatan: #1B6046;   --warna-domain-penerbitan: #7A2E5D;   --warna-domain-media: #9C4718;   --warna-domain-hubungi: #4B3A8F;   --warna-domain-perolehan: #8A5A00;   --warna-domain-mengenai: #125EA8;   --taip-muka-tajuk: 'Source Serif 4', Georgia, serif;   --taip-muka-isi: 'Source Sans 3', system-ui, sans-serif;   --taip-muka-data: 'Source Sans 3', system-ui, sans-serif;   --taip-berat-tajuk: 700;   --taip-berat-isi: 400;   --bentuk-radius-kad: 8px;   --bentuk-radius-butang: 6px;   --bentuk-radius-cip: 999px;   --bentuk-radius-kawalan: 6px;   --bentuk-radius-panel: 8px;   --bentuk-radius-dialog: 12px;   --bentuk-lebar-sempadan: 1px;   --bayang-aras-1: 0 1px 2px rgba(25,25,39,.06), 0 4px 12px rgba(25,25,39,.07);   --bayang-aras-2: 0 4px 10px rgba(25,25,39,.09), 0 18px 44px rgba(25,25,39,.16);   --hero-jenis: editorial;   --hero-imej: url('../img/hero-c.webp'); }   :root {   font-size: 16px;       --ruang-1: .25rem;   --ruang-2: .5rem;   --ruang-3: .75rem;   --ruang-4: 1rem;   --ruang-5: 1.5rem;   --ruang-6: 2rem;   --ruang-7: 2.5rem;   --ruang-8: 3rem;   --ruang-seksyen: clamp(3.25rem, 5vw, 4.5rem);       --ukuran-prosa: 68ch;   --ukuran-lead: 46rem; } html, body { max-inline-size: 100%; overflow-x: hidden; } [hidden] { display: none !important; } body {   font-family: var(--taip-muka-isi);   font-weight: var(--taip-berat-isi);   font-size: 1rem;   line-height: 1.6;   color: var(--warna-dakwat);   background: var(--warna-latar);   letter-spacing: 0;   text-rendering: optimizeLegibility; }   h1, h2, h3, h4, h5, h6 {   font-family: var(--taip-muka-tajuk);   font-weight: var(--taip-berat-tajuk);   color: var(--warna-dakwat);   line-height: 1.2;   text-wrap: balance; } h1 {   font-size: clamp(2rem, 1.35rem + 2.1vw, 2.625rem);   line-height: 1.14;   letter-spacing: -0.025em;   margin-block-end: var(--ruang-4); } h2 {   font-size: clamp(1.4375rem, 1.25rem + .8vw, 1.75rem);   letter-spacing: -0.02em;   margin-block-end: var(--ruang-3); } h3 {   font-size: 1.1875rem;   line-height: 1.3;   letter-spacing: -0.012em;   margin-block-end: var(--ruang-2); } h4 {   font-size: 1rem;   letter-spacing: -0.006em;   margin-block-end: var(--ruang-2); } p { margin-block-end: var(--ruang-4); line-height: 1.6; } p:last-child { margin-block-end: 0; }   .kandungan-prosa p, .kandungan-prosa li, .akordion__panel p, .artikel p { max-inline-size: var(--ukuran-prosa); } strong, b { font-weight: 600; }   a { color: var(--warna-tindakan); transition: color .15s, background-color .15s, border-color .15s; } a:hover { color: var(--warna-tindakan-hover); } .kandungan-prosa a:not(.btn), .akordion__panel a, p a:not(.btn) {   text-decoration: underline;   text-underline-offset: .18em;   text-decoration-thickness: 1px; }   :focus-visible {   outline: 3px solid var(--warna-fokus);   outline-offset: 2px;   border-radius: 2px; } .hero :focus-visible, .pengaki :focus-visible, .chatbot__panel h2 :focus-visible {   outline-color: #fff; }   .langkau {   position: absolute;   left: -9999px;   background: var(--warna-primer-gelap);   color: #fff;   padding: .75rem 1.25rem;   border-radius: var(--bentuk-radius-butang);   font-weight: 600;   z-index: 100; } .langkau:focus {   left: 1rem;   top: 1rem;   position: fixed; }   .sr-only {   position: absolute;   width: 1px;   height: 1px;   overflow: hidden;   clip-path: inset(50%);   white-space: nowrap; } @media (prefers-reduced-motion: reduce) {   *, *::before, *::after {     animation-duration: .001ms !important;     animation-iteration-count: 1 !important;     transition-duration: .001ms !important;     scroll-behavior: auto !important;   } } ::selection {   background: var(--warna-primer);   color: #fff; }   button {   cursor: pointer;   border: none;   background: none;   color: inherit; } button:disabled, input:disabled, select:disabled, textarea:disabled {   cursor: not-allowed;   opacity: .55; } input::placeholder, textarea::placeholder { color: var(--warna-dakwat-lembut); }   .medan {   inline-size: 100%;   min-block-size: 44px;   padding: .625rem .75rem;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   background: var(--warna-permukaan);   color: var(--warna-dakwat);   font-size: 1rem;   transition: border-color .15s, box-shadow .15s; } .medan:focus {   outline: none;   border-color: var(--warna-fokus);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--warna-fokus) 26%, transparent); } .medan:focus-visible { outline: none; } select.medan {   appearance: none;   padding-inline-end: 2.25rem;   background-image: linear-gradient(45deg, transparent 49%, currentColor 50% 51%, transparent 52%),                     linear-gradient(-45deg, transparent 49%, currentColor 50% 51%, transparent 52%);   background-size: 6px 6px, 6px 6px;   background-position: right 1.15rem center, right .75rem center;   background-repeat: no-repeat; }   .btn {   display: inline-flex;   align-items: center;   justify-content: center;   gap: .5rem;   min-height: 44px;   padding: .625rem 1.125rem;   border: 1px solid transparent;   border-radius: var(--bentuk-radius-butang);   font-family: var(--taip-muka-isi);   font-weight: 600;   font-size: .9375rem;   line-height: 1.3;   text-align: center;   text-decoration: none;   transition: background-color .15s, border-color .15s, color .15s; } .btn, .btn:not(.btn--sekunder):not(.btn--senyap) {   background: var(--warna-domain, var(--warna-tindakan));   color: #fff; } .btn:hover, .btn:not(.btn--sekunder):not(.btn--senyap):hover {   background: color-mix(in srgb, var(--warna-domain, var(--warna-tindakan)) 82%, #000);   color: #fff; } .btn--sekunder, .btn--sekunder:not(.btn--senyap) {   background: var(--warna-permukaan);   color: var(--warna-domain, var(--warna-tindakan));   border-color: var(--warna-sempadan-kuat); } .btn--sekunder:hover, .btn--sekunder:not(.btn--senyap):hover {   background: var(--warna-latar-alt);   color: var(--warna-domain, var(--warna-tindakan));   border-color: var(--warna-domain, var(--warna-tindakan)); } .btn--senyap, .btn--senyap:not(.btn--sekunder) {   min-height: 0;   padding: 0;   background: transparent;   color: var(--warna-tindakan); } .btn--senyap:hover, .btn--senyap:not(.btn--sekunder):hover {   background: transparent;   color: var(--warna-tindakan-hover);   text-decoration: underline;   text-underline-offset: .2em; }   mark {   background: color-mix(in srgb, var(--warna-tindakan) 16%, transparent);   color: inherit;   padding: 0 .15em; }   :root {   --grid-lajur: 4;   --grid-lurah: 1rem;   --isi-maksimum: 1280px;   --tepi-laman: 1.25rem; } @media (min-width: 768px) {   :root { --grid-lajur: 8; --grid-lurah: 1.5rem; --tepi-laman: 2rem; } } @media (min-width: 1024px) {   :root { --grid-lajur: 12; } } .grid {   display: grid;   grid-template-columns: repeat(var(--grid-lajur), minmax(0, 1fr));   gap: var(--grid-lurah); }   .bekas {   max-inline-size: var(--isi-maksimum);   margin-inline: auto;   padding-inline: var(--tepi-laman); }   .bar-kerajaan {   background: var(--warna-latar-alt);   border-block-end: 1px solid var(--warna-sempadan); } .bar-kerajaan__dalam {   max-inline-size: var(--isi-maksimum);   margin-inline: auto;   padding: .5rem var(--tepi-laman);   margin-block-end: 0;   color: var(--warna-dakwat-lembut);   font-size: .875rem;   line-height: 1.4; } .bar-kerajaan__ringkas { display: none; }   .pengepala {   display: flex;   align-items: center;   gap: var(--ruang-5);   min-height: 84px;   padding: 1rem var(--tepi-laman);   max-inline-size: var(--isi-maksimum);   margin-inline: auto;   position: relative; } .pengepala__logo {   display: flex;   align-items: center;   gap: .75rem;   text-decoration: none;   flex-shrink: 0; } .pengepala__lambang {   display: grid;   place-items: center;   inline-size: 44px;   block-size: 44px;   flex: 0 0 44px;   color: #fff;   background: var(--warna-primer);   border-radius: var(--bentuk-radius-kawalan); } .pengepala__lambang svg {   inline-size: 26px;   block-size: 26px;   fill: none;   stroke: currentColor;   stroke-linecap: square; } .pengepala__logo > span:not(.pengepala__lambang) {   display: block;   font-family: var(--taip-muka-tajuk);   font-weight: var(--taip-berat-tajuk);   font-size: 1.3125rem;   line-height: 1.1;   letter-spacing: -0.025em;   color: var(--warna-primer); } .pengepala__logo small {   display: block;   margin-block-start: .2rem;   color: var(--warna-dakwat-lembut);   font-family: var(--taip-muka-isi);   font-size: .75rem;   font-weight: 400;   letter-spacing: 0;   line-height: 1.25; }   .pengepala__carian {   flex: 1 1 auto;   max-inline-size: 30rem;   position: relative;   margin-inline-start: auto; } .pengepala__carian label {   position: absolute;   inline-size: 1px; block-size: 1px;   overflow: hidden; clip-path: inset(50%); } .pengepala__carian input {   inline-size: 100%;   min-block-size: 48px;   padding: .7rem 1rem;   padding-inline-end: 5.25rem;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   background: var(--warna-permukaan);   color: var(--warna-dakwat);   font-size: .9375rem;   transition: border-color .15s, box-shadow .15s; } .pengepala__carian input:focus {   outline: none;   border-color: var(--warna-fokus);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--warna-fokus) 26%, transparent); } .pengepala__carian input:focus-visible { outline: none; } .pengepala__carian button[type="submit"] {   position: absolute;   inset-inline-end: 4px;   inset-block-start: 4px;   min-block-size: 40px;   padding: .4rem 1.05rem;   background: var(--warna-tindakan);   color: #fff;   border-radius: calc(var(--bentuk-radius-kawalan) - 2px);   font-size: .875rem;   font-weight: 600;   transition: background-color .15s; } .pengepala__carian button[type="submit"]:hover { background: var(--warna-tindakan-hover); }   .pengepala__cadangan {   position: absolute;   inset-block-start: calc(100% + 4px);   inset-inline: 0;   background: var(--warna-permukaan);   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-panel);   box-shadow: var(--bayang-aras-2);   z-index: 50;   max-block-size: 22rem;   overflow-y: auto; } .pengepala__cadangan li {   padding: .7rem 1rem;   cursor: pointer;   font-size: .9375rem;   border-block-end: 1px solid var(--warna-sempadan);   transition: background-color .1s; } .pengepala__cadangan li:last-child { border-block-end: 0; } .pengepala__cadangan li:hover, .pengepala__cadangan li[aria-selected="true"] { background: var(--warna-latar-alt); } .pengepala__cadangan li small {   display: block;   color: var(--warna-dakwat-lembut);   font-size: .8125rem;   margin-block-start: .1rem; } .pengepala__bahasa {   display: inline-flex;   align-items: center;   white-space: nowrap;   transition: background-color .15s, color .15s, border-color .15s; }   .bar-utiliti {   display: flex;   align-items: center;   gap: .75rem;   flex: 0 0 auto; } .bar-utiliti .pengepala__bahasa {   min-block-size: 34px;   padding: .2rem .7rem;   font-size: .875rem;   font-weight: 600;   color: var(--warna-dakwat-lembut);   background: var(--warna-permukaan);   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan); } .bar-utiliti .pengepala__bahasa:hover {   color: var(--warna-tindakan);   background: var(--warna-latar-alt);   border-color: var(--warna-tindakan); } .bar-akses {   display: flex;   align-items: center;   gap: .5rem; } .bar-akses #label-saiz {   font-size: .875rem;   color: var(--warna-dakwat-lembut);   white-space: nowrap; }   .bar-akses__saiz {   display: flex;   background: var(--warna-permukaan);   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   overflow: hidden; } .bar-akses__saiz button {   min-block-size: 34px;   min-inline-size: 34px;   padding: .15rem .55rem;   font-size: .875rem;   font-weight: 600;   line-height: 1.2;   color: var(--warna-dakwat-lembut);   background: transparent;   border-inline-end: 1px solid var(--warna-sempadan);   white-space: nowrap;   transition: background-color .15s, color .15s; } .bar-akses__saiz button:last-child { border-inline-end: 0; } .bar-akses__saiz button:hover { color: var(--warna-tindakan); background: var(--warna-latar-alt); } .bar-akses__saiz button[aria-pressed="true"] { color: #fff; background: var(--warna-primer); } .bar-akses__ringkas { display: none; }   .pengepala__hamburger {   display: none;   inline-size: 44px;   block-size: 44px;   flex: 0 0 44px;   align-items: center;   justify-content: center;   position: relative;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   background: var(--warna-permukaan); } .pengepala__hamburger::before, .pengepala__hamburger::after {   content: '';   position: absolute;   inline-size: 20px;   block-size: 2px;   background: var(--warna-dakwat);   transition: transform .2s; } .pengepala__hamburger::before { transform: translateY(-4px); } .pengepala__hamburger::after { transform: translateY(4px); } .pengepala__hamburger[aria-expanded="true"]::before { transform: rotate(45deg); } .pengepala__hamburger[aria-expanded="true"]::after { transform: rotate(-45deg); }   @media (max-width: 1023px) {   .pengepala {     flex-wrap: wrap;     min-height: 0;     padding-block: .875rem;     gap: .75rem;     row-gap: .75rem;   }   .pengepala__hamburger { display: flex; }   .pengepala__logo { margin-inline-end: auto; }   .pengepala__carian { order: 3; flex-basis: 100%; max-inline-size: none; margin-inline-start: 0; }   .bar-utiliti { order: 4; flex-basis: 100%; justify-content: flex-start; gap: .5rem; } } @media (min-width: 1024px) {   .pengepala__carian { margin-inline: auto 0; } } @media (max-width: 767px) {   .bar-kerajaan__dalam { min-height: 40px; gap: .5rem; padding-block: .25rem; }   .bar-kerajaan__rasmi { white-space: nowrap; }   .bar-kerajaan__panjang { display: none; }   .bar-kerajaan__ringkas { display: inline; }   .bar-utiliti { gap: .375rem; }   .bar-akses { gap: .25rem; }   .bar-akses #label-saiz { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }   .bar-akses__panjang { display: none; }   .bar-akses__ringkas { display: inline; }   .bar-utiliti .pengepala__bahasa { padding-inline: .5rem; }   .pengepala__logo > span:not(.pengepala__lambang) { font-size: 1.1875rem; } } @media (max-width: 400px) {   .pengepala__logo small { display: none; }   .pengepala__lambang { inline-size: 40px; block-size: 40px; flex-basis: 40px; } }   .megamenu-bar {   max-inline-size: var(--isi-maksimum);   margin-inline: auto;   inline-size: 100%; } .megamenu__panel {   display: none;   background: var(--warna-permukaan); } @media (min-width: 1024px) {   .drawer {     display: flex;     position: relative;     border-block: 1px solid var(--warna-sempadan);     background: var(--warna-permukaan);   }   .drawer__tutup { display: none; }   .megamenu-bar {     display: flex;     justify-content: flex-start;     gap: 2rem;     padding-inline: var(--tepi-laman);   }   .megamenu { position: static; }   .megamenu > button {     display: inline-flex;     align-items: center;     min-height: 54px;     padding: 0;     font-family: var(--taip-muka-isi);     font-size: .9375rem;     font-weight: 600;     color: var(--warna-dakwat);     white-space: nowrap;     border-block-end: 3px solid transparent;     transition: color .15s, border-color .15s;   }   .megamenu > button:hover { color: var(--warna-tindakan); }   .megamenu > button[aria-expanded="true"] {     color: var(--warna-tindakan);     border-block-end-color: var(--warna-tindakan);   }       .megamenu:hover .megamenu__panel,   .megamenu__panel[data-buka] {     display: block;     position: absolute;     inset-inline: 0;     inset-block-start: 100%;     z-index: 40;     padding: 2rem 0 2.25rem;     border-block-end: 1px solid var(--warna-sempadan);     box-shadow: 0 18px 32px -22px rgba(9, 32, 54, .35);   }   .megamenu__panel[data-buka]::before,   .megamenu:hover .megamenu__panel::before {     content: '';     position: absolute;     inset-block-start: 0;     inset-inline: 0;     block-size: 1px;     background: var(--warna-sempadan);   }   .megamenu__dalam {     display: grid;     grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr);     gap: 2rem;     max-inline-size: var(--isi-maksimum);     margin-inline: auto;     padding-inline: var(--tepi-laman);   } } @media (max-width: 1023px) {   .drawer {     position: fixed;     inset: 0 0 0 auto;     inline-size: min(94vw, 25rem);     translate: 100% 0;     transition: translate .2s;     z-index: 60;     background: var(--warna-permukaan);     overflow-y: auto;     box-shadow: var(--bayang-aras-2);     display: flex;     flex-direction: column;     padding: 0;   }   .drawer[data-buka] { translate: 0 0; }   .drawer__tutup {     display: flex;     align-items: center;     justify-content: space-between;     gap: .5rem;     inline-size: 100%;     min-block-size: 56px;     padding: 1rem var(--tepi-laman);     font-size: .9375rem;     font-weight: 600;     color: var(--warna-dakwat);     background: var(--warna-latar-alt);     border-block-end: 1px solid var(--warna-sempadan);   }   .drawer__tutup::after {     content: '\00d7';     font-size: 1.5rem;     line-height: 1;     color: var(--warna-dakwat-lembut);   }   .megamenu-bar {     display: flex;     flex-direction: column;     padding-inline: var(--tepi-laman);   }   .megamenu > button {     inline-size: 100%;     display: flex;     align-items: center;     justify-content: space-between;     gap: 1rem;     min-block-size: 56px;     padding: .875rem 0;     text-align: left;     font-size: 1rem;     font-weight: 600;     color: var(--warna-dakwat);     border-block-end: 1px solid var(--warna-sempadan);   }   .megamenu > button::after {     content: '';     inline-size: .5rem;     block-size: .5rem;     flex: 0 0 auto;     border-inline-end: 2px solid var(--warna-dakwat-lembut);     border-block-end: 2px solid var(--warna-dakwat-lembut);     transform: rotate(45deg) translate(-2px, -2px);     transition: transform .2s;   }   .megamenu > button[aria-expanded="true"] { color: var(--warna-tindakan); }   .megamenu > button[aria-expanded="true"]::after {     border-color: var(--warna-tindakan);     transform: rotate(-135deg) translate(-3px, -3px);   }   .megamenu__panel[data-buka] {     display: block;     padding: .25rem 0 1rem;     border-block-end: 1px solid var(--warna-sempadan);   }   .megamenu__dalam { display: block; }   .megamenu__lajur + .megamenu__lajur { margin-block-start: 1rem; }   .megamenu__sorotan { display: none; } } .megamenu__lajur { min-inline-size: 0; } .megamenu__tajuk {   margin-block-end: .625rem;   font-family: var(--taip-muka-isi);   font-size: .75rem;   font-weight: 700;   letter-spacing: .08em;   text-transform: uppercase;   color: var(--warna-dakwat-lembut); } .megamenu__lajur a {   display: block;   padding: .4rem 0;   font-size: .9375rem;   line-height: 1.4;   color: var(--warna-dakwat); } .megamenu__lajur a:hover {   color: var(--warna-tindakan);   text-decoration: underline;   text-underline-offset: .2em; } .megamenu__sorotan {   padding-inline-start: 2rem;   border-inline-start: 1px solid var(--warna-sempadan); } .megamenu__sorotan strong {   display: block;   margin-block-end: .625rem;   font-size: .75rem;   font-weight: 700;   letter-spacing: .08em;   text-transform: uppercase;   color: var(--warna-dakwat-lembut); } .megamenu__sorotan a {   display: block;   font-family: var(--taip-muka-tajuk);   font-weight: 600;   font-size: 1rem;   line-height: 1.35;   color: var(--warna-tindakan); } .megamenu__sorotan a:hover { text-decoration: underline; text-underline-offset: .2em; } .drawer-overlay {   position: fixed;   inset: 0;   background: rgba(9, 32, 54, .45);   z-index: 55;   opacity: 0;   pointer-events: none;   transition: opacity .2s; } .drawer[data-buka] ~ .drawer-overlay { opacity: 1; pointer-events: auto; }   .breadcrumb {   max-inline-size: var(--isi-maksimum);   margin-inline: auto;   padding: 1.25rem var(--tepi-laman) 0;   font-size: .875rem;   color: var(--warna-dakwat-lembut); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; } .breadcrumb li { display: flex; align-items: center; } .breadcrumb li + li::before {   content: '';   inline-size: .35rem;   block-size: .35rem;   margin-inline: .55rem;   border-inline-end: 1px solid var(--warna-sempadan-kuat);   border-block-start: 1px solid var(--warna-sempadan-kuat);   transform: rotate(45deg); } .breadcrumb a { color: var(--warna-dakwat-lembut); } .breadcrumb a:hover { color: var(--warna-tindakan); text-decoration: underline; text-underline-offset: .2em; } .breadcrumb [aria-current="page"] { color: var(--warna-dakwat); font-weight: 600; }   main {   display: block;   min-block-size: 60vh;   padding-block-end: var(--ruang-8); } .seksyen { padding-block: var(--ruang-seksyen); } .seksyen--alt {   background: var(--warna-latar-alt);   border-block: 1px solid var(--warna-sempadan); } .seksyen--rapat { padding-block: calc(var(--ruang-seksyen) * .6); }   .seksyen__tajuk {   display: flex;   align-items: baseline;   justify-content: space-between;   gap: 1.5rem;   margin-block-end: var(--ruang-6);   padding-block-start: 1rem;   border-block-start: 2px solid var(--warna-dakwat); } .seksyen__tajuk h2 { max-inline-size: 34rem; margin-block-end: 0; } .seksyen__tajuk p {   margin-block: .5rem 0;   max-inline-size: 44rem;   color: var(--warna-dakwat-lembut); } .seksyen__tajuk > a {   flex: 0 0 auto;   display: inline-flex;   align-items: center;   gap: .4rem;   font-size: .9375rem;   font-weight: 600;   white-space: nowrap; } .seksyen__tajuk > a::after {   content: '';   inline-size: .4rem;   block-size: .4rem;   border-inline-end: 2px solid currentColor;   border-block-start: 2px solid currentColor;   transform: rotate(45deg); } .seksyen__tajuk > a:hover { text-decoration: underline; text-underline-offset: .25em; } @media (max-width: 767px) {   .seksyen__tajuk {     flex-direction: column;     align-items: flex-start;     gap: .75rem;     margin-block-end: var(--ruang-5);   } }   .pengaki {   margin-block-start: var(--ruang-8);   background: var(--warna-primer-gelap);   color: var(--warna-atas-primer); } .pengaki__atas {   display: grid;   grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));   gap: 2.5rem 2rem;   padding-block: 3.5rem 3rem; } .pengaki__logo { display: grid; gap: .5rem; } .pengaki__logo span {   font-family: var(--taip-muka-tajuk);   font-size: 1.25rem;   font-weight: var(--taip-berat-tajuk);   letter-spacing: -0.025em;   color: #fff; } .pengaki__logo p {   margin-block-end: 0;   max-inline-size: 18rem;   font-size: .9375rem;   line-height: 1.5;   color: var(--warna-atas-primer); } .pengaki__lajur h2 {   margin-block-end: .875rem;   color: #fff;   font-family: var(--taip-muka-isi);   font-size: .75rem;   font-weight: 700;   letter-spacing: .09em;   text-transform: uppercase; } .pengaki__lajur a {   display: block;   padding-block: .3rem;   font-size: .9375rem;   color: var(--warna-atas-primer); } .pengaki__lajur a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; } .pengaki__lajur p {   margin-block-end: 0;   font-size: .9375rem;   line-height: 1.6;   color: var(--warna-atas-primer); } .pengaki__bawah {   display: flex;   flex-wrap: wrap;   justify-content: space-between;   gap: .5rem 2rem;   padding-block: 1.25rem 1.5rem;   font-size: .875rem;   color: var(--warna-atas-primer); } .pengaki__bawah p { margin-block-end: 0; } .pengaki__bawah::before {   content: '';   order: -1;   flex: 0 0 100%;   block-size: 1px;   margin-block-end: 1.25rem;   background: color-mix(in srgb, var(--warna-atas-primer) 32%, transparent); } @media (max-width: 1023px) {   .pengaki__atas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) {   .pengaki__atas { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.5rem 2rem; } }   #dev-tema {   position: fixed;   inset-block-start: .5rem;   inset-inline-end: .5rem;   z-index: 999;   display: flex;   gap: .25rem;   background: rgba(9, 32, 54, .88);   padding: .5rem;   border-radius: .5rem; } #dev-tema button {   padding: .375rem .75rem;   color: #fff;   font-weight: 700;   font-size: .875rem;   border-radius: .25rem;   background: rgba(255, 255, 255, .16); } #dev-tema button:hover { background: rgba(255, 255, 255, .3); }   :root { --warna-domain: var(--warna-tindakan); } html[data-halaman="mengenai"], html[data-halaman="apakah-planmalaysia"], html[data-halaman="about-en"] { --warna-domain: var(--warna-domain-mengenai); } html[data-halaman="mengenai"] main, html[data-halaman="mengenai"] .breadcrumb, html[data-halaman="apakah-planmalaysia"] main, html[data-halaman="apakah-planmalaysia"] .breadcrumb, html[data-halaman="about-en"] main, html[data-halaman="about-en"] .breadcrumb {   --warna-tindakan: var(--warna-domain-mengenai);   --warna-tindakan-hover: color-mix(in srgb, var(--warna-domain-mengenai) 80%, #000);   --warna-fokus: var(--warna-domain-mengenai); } html[data-halaman="rancangan"], html[data-halaman="rfn4"] { --warna-domain: var(--warna-domain-rancangan); } html[data-halaman="rancangan"] main, html[data-halaman="rancangan"] .breadcrumb, html[data-halaman="rfn4"] main, html[data-halaman="rfn4"] .breadcrumb {   --warna-tindakan: var(--warna-domain-rancangan);   --warna-tindakan-hover: color-mix(in srgb, var(--warna-domain-rancangan) 80%, #000);   --warna-fokus: var(--warna-domain-rancangan); } html[data-halaman="perkhidmatan"] { --warna-domain: var(--warna-domain-perkhidmatan); } html[data-halaman="perkhidmatan"] main, html[data-halaman="perkhidmatan"] .breadcrumb {   --warna-tindakan: var(--warna-domain-perkhidmatan);   --warna-tindakan-hover: color-mix(in srgb, var(--warna-domain-perkhidmatan) 80%, #000);   --warna-fokus: var(--warna-domain-perkhidmatan); } html[data-halaman="perolehan"] { --warna-domain: var(--warna-domain-perolehan); } html[data-halaman="perolehan"] main, html[data-halaman="perolehan"] .breadcrumb {   --warna-tindakan: var(--warna-domain-perolehan);   --warna-tindakan-hover: color-mix(in srgb, var(--warna-domain-perolehan) 80%, #000);   --warna-fokus: var(--warna-domain-perolehan); } html[data-halaman="penerbitan"], html[data-halaman="dokumen"] { --warna-domain: var(--warna-domain-penerbitan); } html[data-halaman="penerbitan"] main, html[data-halaman="penerbitan"] .breadcrumb, html[data-halaman="dokumen"] main, html[data-halaman="dokumen"] .breadcrumb {   --warna-tindakan: var(--warna-domain-penerbitan);   --warna-tindakan-hover: color-mix(in srgb, var(--warna-domain-penerbitan) 80%, #000);   --warna-fokus: var(--warna-domain-penerbitan); } html[data-halaman="media"], html[data-halaman="berita"] { --warna-domain: var(--warna-domain-media); } html[data-halaman="media"] main, html[data-halaman="media"] .breadcrumb, html[data-halaman="berita"] main, html[data-halaman="berita"] .breadcrumb {   --warna-tindakan: var(--warna-domain-media);   --warna-tindakan-hover: color-mix(in srgb, var(--warna-domain-media) 80%, #000);   --warna-fokus: var(--warna-domain-media); } html[data-halaman="hubungi"], html[data-halaman="direktori"], html[data-halaman="direktori-bahagian"], html[data-halaman="soalan-lazim"], html[data-halaman="contact-en"] { --warna-domain: var(--warna-domain-hubungi); } html[data-halaman="hubungi"] main, html[data-halaman="hubungi"] .breadcrumb, html[data-halaman="direktori"] main, html[data-halaman="direktori"] .breadcrumb, html[data-halaman="direktori-bahagian"] main, html[data-halaman="direktori-bahagian"] .breadcrumb, html[data-halaman="soalan-lazim"] main, html[data-halaman="soalan-lazim"] .breadcrumb, html[data-halaman="contact-en"] main, html[data-halaman="contact-en"] .breadcrumb {   --warna-tindakan: var(--warna-domain-hubungi);   --warna-tindakan-hover: color-mix(in srgb, var(--warna-domain-hubungi) 80%, #000);   --warna-fokus: var(--warna-domain-hubungi); }   @media (min-width: 1024px) {   .megamenu:nth-child(1) { --warna-domain: var(--warna-domain-mengenai); }   .megamenu:nth-child(2) { --warna-domain: var(--warna-domain-rancangan); }   .megamenu:nth-child(3) { --warna-domain: var(--warna-domain-perkhidmatan); }   .megamenu:nth-child(4) { --warna-domain: var(--warna-domain-penerbitan); }   .megamenu:nth-child(5) { --warna-domain: var(--warna-domain-media); }   .megamenu:nth-child(6) { --warna-domain: var(--warna-domain-hubungi); }   .megamenu > button:hover { color: var(--warna-domain); }   .megamenu > button[aria-expanded="true"] {     color: var(--warna-domain);     border-block-end-color: var(--warna-domain);   }   .megamenu__panel[data-buka],   .megamenu:hover .megamenu__panel { border-block-start: 3px solid var(--warna-domain); }   .megamenu__panel[data-buka]::before,   .megamenu:hover .megamenu__panel::before { content: none; }   html[data-halaman="mengenai"] .megamenu:nth-child(1) > button,   html[data-halaman="apakah-planmalaysia"] .megamenu:nth-child(1) > button,   html[data-halaman="about-en"] .megamenu:nth-child(1) > button,   html[data-halaman="rancangan"] .megamenu:nth-child(2) > button,   html[data-halaman="rfn4"] .megamenu:nth-child(2) > button,   html[data-halaman="perkhidmatan"] .megamenu:nth-child(3) > button,   html[data-halaman="penerbitan"] .megamenu:nth-child(4) > button,   html[data-halaman="dokumen"] .megamenu:nth-child(4) > button,   html[data-halaman="media"] .megamenu:nth-child(5) > button,   html[data-halaman="berita"] .megamenu:nth-child(5) > button,   html[data-halaman="hubungi"] .megamenu:nth-child(6) > button,   html[data-halaman="direktori"] .megamenu:nth-child(6) > button,   html[data-halaman="direktori-bahagian"] .megamenu:nth-child(6) > button,   html[data-halaman="soalan-lazim"] .megamenu:nth-child(6) > button,   html[data-halaman="contact-en"] .megamenu:nth-child(6) > button,   html[data-halaman="perolehan"] .megamenu:nth-child(3) > button {     color: var(--warna-domain);     border-block-end-color: var(--warna-domain);   } } .megamenu__tajuk { color: var(--warna-domain); } .megamenu__sorotan a { color: var(--warna-domain); } .breadcrumb [aria-current="page"] { color: var(--warna-domain); }   .seksyen--tua {   background: var(--warna-primer-gelap);   color: var(--warna-atas-primer); } .seksyen--tua h2, .seksyen--tua h3, .seksyen--tua strong { color: #fff; } .seksyen--tua p { color: var(--warna-atas-primer); } .seksyen--tua .seksyen__tajuk { border-block-start-color: var(--warna-atas-primer); } .seksyen--tua .seksyen__tajuk > a { color: #fff; }   .ikon-sprite {   position: absolute;   inline-size: 0;   block-size: 0;   overflow: hidden; }   .eyebrow {   margin-block-end: .375rem;   color: var(--warna-dakwat-lembut);   font-family: var(--taip-muka-isi);   font-size: .8125rem;   font-weight: 600;   letter-spacing: .01em;   line-height: 1.3; }   .hero { display: none; } html[data-theme="a"] .hero--tugasan, html[data-theme="b"] .hero--peta, html[data-theme="c"] .hero--editorial { display: block; } .hero--tugasan, .hero--editorial {   position: relative;   background-color: var(--warna-primer-gelap);   background-image: var(--hero-imej);   background-size: cover;   background-position: 62% center;   color: #fff;   border-block-end: 1px solid var(--warna-sempadan); } .hero--tugasan::before, .hero--editorial::before {   content: '';   position: absolute;   inset: 0;   background: linear-gradient(100deg,     color-mix(in srgb, var(--warna-primer-gelap) 94%, transparent) 0%,     color-mix(in srgb, var(--warna-primer-gelap) 80%, transparent) 44%,     color-mix(in srgb, var(--warna-primer-gelap) 24%, transparent) 100%); } .hero__teks {   position: relative;   z-index: 1;   max-inline-size: var(--isi-maksimum);   margin-inline: auto;   display: flex;   flex-direction: column;   justify-content: center;   min-block-size: clamp(20rem, 30vw, 26rem);   padding: clamp(3.5rem, 6vw, 5rem) var(--tepi-laman); } .hero__teks h1 {   max-inline-size: 20ch;   color: #fff;   margin-block-end: 1rem; } .hero__teks p {   max-inline-size: 40rem;   margin-block-end: 0;   font-size: clamp(1rem, .95rem + .25vw, 1.125rem);   line-height: 1.6;   color: color-mix(in srgb, #fff 86%, var(--warna-primer)); } .hero__teks .eyebrow { display: none; }   .hero--peta {   background: var(--warna-primer-gelap);   color: #fff;   border-block-end: 1px solid var(--warna-sempadan); } .hero--peta .hero__teks {   display: grid;   grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);   gap: clamp(2rem, 5vw, 4rem);   align-items: center; } .hero--peta .peta--abstrak {   grid-column: 2;   grid-row: 1 / 3; } @media (max-width: 899px) {   .hero--peta .hero__teks { grid-template-columns: minmax(0, 1fr); }   .hero--peta .peta--abstrak { grid-column: 1; grid-row: auto; } } @media (max-width: 767px) {   .hero--tugasan,   .hero--editorial { background-position: 66% center; }   .hero--tugasan::before,   .hero--editorial::before {     background: linear-gradient(170deg,       color-mix(in srgb, var(--warna-primer-gelap) 90%, transparent) 0%,       color-mix(in srgb, var(--warna-primer-gelap) 62%, transparent) 100%);   }   .hero__teks { min-block-size: 17rem; padding-block: 2.75rem 3rem; } }   .tajuk-halaman {   padding-block: 2rem 2.25rem;   border-block-end: 1px solid var(--warna-sempadan); } .tajuk-halaman .bekas { padding-inline: var(--tepi-laman); } .tajuk-halaman h1 { max-inline-size: 22ch; } .tajuk-halaman p {   max-inline-size: var(--ukuran-lead);   margin-block-end: 0;   font-size: 1.0625rem;   line-height: 1.6;   color: var(--warna-dakwat-lembut); } .tajuk-halaman .eyebrow { display: none; } .tajuk-halaman--imej {   position: relative;   background-color: var(--warna-primer-gelap);   background-image: var(--hero-imej);   background-size: cover;   background-position: 60% center;   padding-block: clamp(3rem, 5vw, 4.5rem);   border-block-end: 0; } .tajuk-halaman--imej::before {   content: '';   position: absolute;   inset: 0;   background: linear-gradient(100deg,     color-mix(in srgb, var(--warna-primer-gelap) 94%, transparent) 0%,     color-mix(in srgb, var(--warna-primer-gelap) 82%, transparent) 46%,     color-mix(in srgb, var(--warna-primer-gelap) 34%, transparent) 100%); } .tajuk-halaman--imej .bekas { position: relative; z-index: 1; } .tajuk-halaman--imej h1 { color: #fff; } .tajuk-halaman--imej p { color: color-mix(in srgb, #fff 86%, var(--warna-primer)); }   .jubin {   display: grid;   grid-template-columns: repeat(4, minmax(0, 1fr));   border-block-start: 1px solid var(--warna-sempadan);   border-inline-start: 1px solid var(--warna-sempadan); } .jubin a {   display: flex;   flex-direction: column;   align-items: flex-start;   gap: .625rem;   min-block-size: 8.5rem;   padding: 1.375rem 1.25rem;   border-inline-end: 1px solid var(--warna-sempadan);   border-block-end: 1px solid var(--warna-sempadan);   color: var(--warna-dakwat);   font-family: var(--taip-muka-tajuk);   font-weight: 600;   font-size: 1rem;   line-height: 1.3;   transition: background-color .15s, color .15s; } .jubin a:hover {   background: var(--warna-latar-alt);   color: var(--warna-tindakan); } .jubin__ikon {   display: grid;   place-items: center;   inline-size: 1.75rem;   block-size: 1.75rem;   color: var(--warna-tindakan); } .jubin__ikon svg {   inline-size: 1.625rem;   block-size: 1.625rem;   fill: none;   stroke: currentColor;   stroke-width: 1.5;   stroke-linecap: round;   stroke-linejoin: round; } .jubin small {   margin-block-start: auto;   font-family: var(--taip-muka-isi);   font-size: .875rem;   font-weight: 400;   line-height: 1.45;   color: var(--warna-dakwat-lembut); } .jubin a:hover small { color: var(--warna-dakwat-lembut); } @media (max-width: 1023px) {   .jubin { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) {   .jubin { grid-template-columns: minmax(0, 1fr); }   .jubin a { min-block-size: 0; padding-block: 1.125rem; } }   .rak-aplikasi {   display: grid;   grid-template-columns: repeat(3, minmax(0, 1fr));   column-gap: 2.5rem;   border-block-start: 1px solid var(--warna-sempadan); } .rak-aplikasi > li {   min-inline-size: 0;   border-block-end: 1px solid var(--warna-sempadan); } .rak-aplikasi__item {   display: grid;   grid-template-columns: minmax(0, 1fr) auto;   align-items: start;   gap: .25rem 1rem;   min-block-size: 5.5rem;   padding: 1rem 0;   color: var(--warna-dakwat); } .rak-aplikasi__indeks { display: none; } .rak-aplikasi__teks { display: grid; gap: .2rem; min-inline-size: 0; } .rak-aplikasi__teks strong {   font-family: var(--taip-muka-tajuk);   font-size: .9375rem;   font-weight: 600;   line-height: 1.3;   color: var(--warna-dakwat); } .rak-aplikasi__teks small {   font-size: .875rem;   line-height: 1.45;   color: var(--warna-dakwat-lembut); } .rak-aplikasi__anak {   font-size: .875rem;   line-height: 1.3;   color: var(--warna-dakwat-lembut); } .rak-aplikasi__item:hover .rak-aplikasi__teks strong, .rak-aplikasi__item:hover .rak-aplikasi__anak { color: var(--warna-tindakan); } .rak-aplikasi__item:hover .rak-aplikasi__teks strong {   text-decoration: underline;   text-underline-offset: .2em; } @media (max-width: 1023px) {   .rak-aplikasi { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } } @media (max-width: 599px) {   .rak-aplikasi { grid-template-columns: minmax(0, 1fr); } }   [role="tablist"] {   display: flex;   gap: 1.75rem;   border-block-end: 1px solid var(--warna-sempadan);   overflow-x: auto; } [role="tab"] {   min-block-size: 48px;   padding: .75rem 0;   font-size: .9375rem;   font-weight: 600;   color: var(--warna-dakwat-lembut);   white-space: nowrap;   border-block-end: 3px solid transparent;   margin-block-end: -1px;   transition: color .15s, border-color .15s;   cursor: pointer; } [role="tab"][aria-selected="true"] {   color: var(--warna-dakwat);   border-block-end-color: var(--warna-tindakan); } [role="tab"]:hover { color: var(--warna-tindakan); } [role="tabpanel"] { padding-block-start: var(--ruang-6); } @media (max-width: 599px) {   [role="tablist"] { gap: 1.25rem; }   [role="tab"] { font-size: .9375rem; white-space: normal; text-align: left; } }   .hebahan .grid-kad {   display: grid;   grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);   column-gap: 3rem;   row-gap: 0;   align-items: start; } .kad-berita {   display: flex;   flex-direction: column;   gap: .375rem;   padding: 0;   background: none;   border: 0; } .kad-berita h2, .kad-berita h3 {   margin-block-end: 0;   font-size: 1.1875rem;   line-height: 1.35; } .kad-berita h2 a, .kad-berita h3 a { color: var(--warna-dakwat); } .kad-berita h2 a:hover, .kad-berita h3 a:hover {   color: var(--warna-tindakan);   text-decoration: underline;   text-underline-offset: .2em; } .kad-berita p {   margin-block-end: 0;   max-inline-size: 42rem;   font-size: .9375rem;   color: var(--warna-dakwat-lembut); } .kad-berita time {   margin-block-start: .25rem;   font-size: .8125rem;   font-variant-numeric: tabular-nums;   color: var(--warna-dakwat-lembut); } .hebahan .kad-berita:first-child {   grid-row: 1 / 3;   gap: .5rem; } .hebahan .kad-berita:first-child h3 {   font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem);   line-height: 1.2;   letter-spacing: -0.02em; } .hebahan .kad-berita:first-child p { font-size: 1.0625rem; } .hebahan .kad-berita:not(:first-child) {   padding-block: 1.25rem;   border-block-start: 1px solid var(--warna-sempadan); } .hebahan .kad-berita:nth-child(2) { border-block-start: 0; padding-block-start: 0; } @media (max-width: 767px) {   .hebahan .grid-kad { grid-template-columns: minmax(0, 1fr); }   .hebahan .kad-berita:first-child { grid-row: auto; }   .hebahan .kad-berita:nth-child(2) {     border-block-start: 1px solid var(--warna-sempadan);     padding-block-start: 1.25rem;     margin-block-start: 1.5rem;   } }   [data-senarai-berita] {   display: grid;   gap: 0;   border-block-start: 1px solid var(--warna-sempadan); } [data-senarai-berita] .kad-berita {   padding-block: 1.5rem;   border-block-end: 1px solid var(--warna-sempadan); }   .kad-rancangan {   display: grid;   grid-template-columns: minmax(0, 1fr) auto;   align-items: baseline;   column-gap: 1.5rem;   padding-block: 1.125rem;   border-block-end: 1px solid var(--warna-sempadan); } .kad-rancangan .eyebrow {   grid-column: 1;   margin-block-end: .125rem; } .kad-rancangan h3 {   grid-column: 1;   margin-block-end: 0;   font-size: 1.0625rem;   line-height: 1.35; } .kad-rancangan p {   grid-column: 2;   grid-row: 1 / 3;   margin-block-end: 0;   font-size: .875rem;   font-variant-numeric: tabular-nums;   white-space: nowrap;   color: var(--warna-dakwat-lembut); } .grid-kad[data-rancangan-utama] {   display: block;   border-block-start: 2px solid var(--warna-dakwat); } @media (max-width: 599px) {   .kad-rancangan { grid-template-columns: minmax(0, 1fr); }   .kad-rancangan p { grid-column: 1; grid-row: auto; margin-block-start: .3rem; white-space: normal; } }   .grid-kad {   display: grid;   grid-template-columns: repeat(3, minmax(0, 1fr));   gap: var(--grid-lurah); } .kad-pautan {   display: flex;   flex-direction: column;   gap: .375rem;   padding: 1.375rem 1.25rem;   min-block-size: 7rem;   background: var(--warna-permukaan);   border: 1px solid var(--warna-sempadan);   border-radius: var(--bentuk-radius-kad);   transition: background-color .15s, border-color .15s; } .kad-pautan strong {   font-family: var(--taip-muka-tajuk);   font-size: 1.0625rem;   font-weight: 600;   line-height: 1.3;   color: var(--warna-dakwat); } .kad-pautan span {   font-size: .9375rem;   line-height: 1.45;   color: var(--warna-dakwat-lembut); } .kad-pautan:hover {   background: var(--warna-latar-alt);   border-color: var(--warna-sempadan-kuat); } .kad-pautan:hover strong {   color: var(--warna-tindakan);   text-decoration: underline;   text-underline-offset: .2em; }   .tangga-rancangan {   counter-reset: peringkat;   border-block-start: 2px solid var(--warna-dakwat); } .tangga-rancangan .kad-pautan {   counter-increment: peringkat;   display: grid;   grid-template-columns: 6rem minmax(0, 1fr);   align-items: baseline;   column-gap: 1rem;   min-block-size: 0;   padding: 1.25rem 0;   background: none;   border: 0;   border-block-end: 1px solid var(--warna-sempadan);   border-radius: 0; } .tangga-rancangan .kad-pautan::before {   content: 'Peringkat ' counter(peringkat);   grid-row: 1 / 3;   white-space: nowrap;   font-size: .75rem;   font-weight: 600;   line-height: 1.3;   color: var(--warna-dakwat-lembut); } .tangga-rancangan .kad-pautan strong, .tangga-rancangan .kad-pautan span { grid-column: 2; } .tangga-rancangan .kad-pautan:hover { background: var(--warna-latar-alt); } @media (max-width: 599px) {   .tangga-rancangan .kad-pautan { grid-template-columns: minmax(0, 1fr); row-gap: .25rem; }   .tangga-rancangan .kad-pautan::before { grid-row: auto; } }   .sorotan-penerbitan, .hasil__senarai {   display: grid;   grid-template-columns: repeat(4, minmax(0, 1fr));   gap: var(--grid-lurah); } .kad {   display: flex;   flex-direction: column;   min-inline-size: 0;   background: var(--warna-permukaan);   border: 1px solid var(--warna-sempadan);   border-radius: var(--bentuk-radius-kad);   overflow: hidden;   transition: border-color .15s, background-color .15s; } .kad:hover { border-color: var(--warna-sempadan-kuat); } .kad__kulit {   display: flex;   align-items: flex-start;   justify-content: space-between;   gap: .5rem;   min-block-size: 6.5rem;   padding: .875rem;   background: var(--warna-latar-alt);   border-block-end: 1px solid var(--warna-sempadan);   position: relative; } .kad__kulit::after {   content: attr(data-year);   position: absolute;   inset-inline-start: .875rem;   inset-block-end: .625rem;   font-family: var(--taip-muka-data);   font-size: 1.5rem;   font-weight: 700;   line-height: 1;   letter-spacing: -0.03em;   font-variant-numeric: tabular-nums;   color: color-mix(in srgb, var(--warna-primer) 62%, transparent); } .kad__format {   padding: .15rem .4rem;   font-family: var(--taip-muka-data);   font-size: .6875rem;   font-weight: 700;   letter-spacing: .06em;   color: var(--warna-primer);   background: var(--warna-permukaan);   border: 1px solid var(--warna-sempadan-kuat);   border-radius: 3px; } .kad__kod {   font-family: var(--taip-muka-data);   font-size: .6875rem;   font-weight: 600;   letter-spacing: .06em;   color: var(--warna-dakwat-lembut); } .kad h3 {   padding: .875rem .875rem 0;   font-size: 1rem;   line-height: 1.35; } .kad h3 a { color: var(--warna-dakwat); } .kad:hover h3 a {   color: var(--warna-tindakan);   text-decoration: underline;   text-underline-offset: .2em; } .kad > p {   padding: 0 .875rem;   margin-block-end: .875rem;   font-size: .875rem;   line-height: 1.45;   color: var(--warna-dakwat-lembut); } .kad__meta {   display: flex;   flex-wrap: wrap;   gap: .3rem;   margin-block-start: auto;   padding: .625rem .875rem;   border-block-start: 1px solid var(--warna-sempadan);   font-size: .8125rem;   font-variant-numeric: tabular-nums;   color: var(--warna-dakwat-lembut); } .kad__meta span + span::before { content: '\00b7'; margin-inline-end: .3rem; } @media (max-width: 1099px) {   .sorotan-penerbitan,   .hasil__senarai { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 519px) {   .sorotan-penerbitan,   .hasil__senarai { grid-template-columns: minmax(0, 1fr); } }   .jalur-negeri {   display: grid;   grid-template-columns: repeat(2, minmax(0, 1fr));   column-gap: 3rem;   border-block-start: 1px solid var(--warna-sempadan); } .jalur-negeri li {   display: grid;   grid-template-columns: 3rem minmax(0, 1fr) auto;   align-items: baseline;   gap: .75rem;   min-block-size: 3.25rem;   padding-block: .875rem;   border-block-end: 1px solid var(--warna-sempadan);   font-size: .9375rem; } .jalur-negeri a {   display: contents;   color: var(--warna-dakwat);   font-family: var(--taip-muka-tajuk);   font-weight: 600; } .jalur-negeri li:hover a { color: var(--warna-tindakan); } .jalur-negeri__kod {   font-family: var(--taip-muka-data);   font-size: .75rem;   font-weight: 600;   letter-spacing: .07em;   color: var(--warna-dakwat-lembut); } .jalur-negeri__meta {   display: flex;   align-items: baseline;   gap: .3rem;   justify-self: end;   font-family: var(--taip-muka-isi);   font-weight: 400;   color: var(--warna-dakwat-lembut); } .jalur-negeri__meta strong {   font-family: var(--taip-muka-data);   font-size: 1rem;   font-variant-numeric: tabular-nums;   color: var(--warna-dakwat); } .jalur-negeri__meta small { font-size: .8125rem; } @media (max-width: 767px) {   .jalur-negeri { grid-template-columns: minmax(0, 1fr); } }   .cip {   display: inline-flex;   align-items: center;   gap: .3rem;   padding: .2rem .625rem;   font-size: .8125rem;   font-weight: 500;   line-height: 1.4;   border-radius: var(--bentuk-radius-cip);   background: var(--warna-latar-alt);   color: var(--warna-dakwat-lembut);   border: 1px solid var(--warna-sempadan);   white-space: nowrap; } .cip--aktif {   min-block-size: 32px;   background: var(--warna-tindakan);   color: #fff;   border-color: var(--warna-tindakan);   cursor: pointer; } .cip--aktif:hover { background: var(--warna-tindakan-hover); border-color: var(--warna-tindakan-hover); } .cip[data-status]::before {   content: '';   inline-size: .5rem;   block-size: .5rem;   border-radius: 50%;   background: currentColor; } .cip[data-status="Aktif"] { color: var(--warna-jaya); border-color: color-mix(in srgb, var(--warna-jaya) 40%, var(--warna-sempadan)); } .cip[data-status="Dalam Kajian"] { color: var(--warna-amaran); border-color: color-mix(in srgb, var(--warna-amaran) 40%, var(--warna-sempadan)); } .cip[data-status="Belum Bermula"] { color: var(--warna-dakwat-lembut); }   .susun-penapis {   display: grid;   grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);   gap: 3rem;   align-items: start;   padding-block: var(--ruang-6) var(--ruang-8); } .penapis {   position: sticky;   top: 1.5rem;   padding: 0;   background: none;   border: 0; } .penapis__kumpulan {   border: 0;   padding-block-end: 1rem;   margin-block-end: 1rem;   border-block-end: 1px solid var(--warna-sempadan); } .penapis__kumpulan:first-of-type { padding-block-start: 1rem; } .penapis [data-borang-penapis] { border-block-start: 2px solid var(--warna-dakwat); } .penapis__kumpulan legend {   padding: 0;   margin-block-end: .375rem;   font-family: var(--taip-muka-tajuk);   font-weight: 600;   font-size: .9375rem;   color: var(--warna-dakwat); } .penapis__kumpulan label {   display: flex;   align-items: center;   gap: .625rem;   min-block-size: 40px;   font-size: .9375rem;   color: var(--warna-dakwat-lembut);   cursor: pointer; } .penapis__kumpulan label:hover { color: var(--warna-dakwat); } .penapis__kumpulan input[type="checkbox"] {   accent-color: var(--warna-tindakan);   inline-size: 1.125rem;   block-size: 1.125rem;   flex: 0 0 auto; } .penapis__cip {   display: flex;   flex-wrap: wrap;   align-items: center;   gap: .375rem;   margin-block-end: 1rem; } .penapis__cip:empty { display: none; } .penapis__kosongkan, .penapis__kosongkan-kedua {   min-block-size: 40px;   font-size: .9375rem;   font-weight: 600;   color: var(--warna-tindakan); } .penapis__kosongkan:hover { text-decoration: underline; text-underline-offset: .2em; } .penapis__buka-lembaran, .penapis__lembaran-butang { display: none; } .penapis__bar {   display: flex;   align-items: center;   justify-content: space-between;   flex-wrap: wrap;   gap: 1rem;   padding-block-end: 1rem;   margin-block-end: 1.5rem;   border-block-end: 1px solid var(--warna-sempadan); } .penapis__bar label {   display: inline-flex;   align-items: center;   gap: .5rem;   font-size: .9375rem;   color: var(--warna-dakwat-lembut); } .penapis__bar select {   min-block-size: 40px;   padding: .3rem 2rem .3rem .625rem;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   font-size: .9375rem;   background: var(--warna-permukaan);   color: var(--warna-dakwat); } .penapis__paparan {   display: flex;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   overflow: hidden; } .penapis__paparan button {   min-block-size: 40px;   padding: .3rem .875rem;   font-size: .875rem;   font-weight: 600;   background: var(--warna-permukaan);   color: var(--warna-dakwat-lembut);   border-inline-end: 1px solid var(--warna-sempadan-kuat); } .penapis__paparan button:last-child { border-inline-end: 0; } .penapis__paparan button:hover { color: var(--warna-tindakan); background: var(--warna-latar-alt); } .penapis__paparan button[aria-pressed="true"] {   background: var(--warna-primer);   color: #fff; } .hasil { min-inline-size: 0; } .hasil__kiraan {   margin-block-end: 0;   font-size: .9375rem;   font-weight: 600;   font-variant-numeric: tabular-nums;   color: var(--warna-dakwat); }   .hasil[data-paparan="senarai"] .hasil__senarai {   display: block;   border-block-start: 2px solid var(--warna-dakwat); } .hasil[data-paparan="senarai"] .kad {   display: grid;   grid-template-columns: 4rem minmax(0, 1fr) auto;   align-items: baseline;   column-gap: 1.25rem;   padding-block: 1.125rem;   background: none;   border: 0;   border-block-end: 1px solid var(--warna-sempadan);   border-radius: 0;   overflow: visible; } .hasil[data-paparan="senarai"] .kad:hover { background: var(--warna-latar-alt); } .hasil[data-paparan="senarai"] .kad__kulit {   grid-row: 1 / 3;   display: block;   min-block-size: 0;   padding: 0;   background: none;   border: 0; } .hasil[data-paparan="senarai"] .kad__kulit::after { content: none; } .hasil[data-paparan="senarai"] .kad__kod { display: none; } .hasil[data-paparan="senarai"] .kad h3 {   grid-column: 2;   padding: 0;   margin-block-end: .2rem; } .hasil[data-paparan="senarai"] .kad > p {   grid-column: 2;   padding: 0;   margin-block-end: 0; } .hasil[data-paparan="senarai"] .kad__meta {   grid-column: 3;   grid-row: 1 / 3;   justify-content: flex-end;   padding: 0;   margin: 0;   border: 0;   white-space: nowrap; } @media (max-width: 767px) {   .hasil[data-paparan="senarai"] .kad { grid-template-columns: 3.25rem minmax(0, 1fr); }   .hasil[data-paparan="senarai"] .kad__meta {     grid-column: 2;     grid-row: auto;     justify-content: flex-start;     margin-block-start: .35rem;     white-space: normal;   } }   .hasil-carian { border-block-start: 2px solid var(--warna-dakwat); } .hasil__baris {   padding-block: 1.375rem;   border-block-end: 1px solid var(--warna-sempadan); } .hasil__baris h2 {   margin-block-end: .25rem;   font-size: 1.1875rem;   line-height: 1.35; } .hasil__baris h2 a { color: var(--warna-dakwat); } .hasil__baris h2 a:hover { color: var(--warna-tindakan); text-decoration: underline; text-underline-offset: .2em; } .hasil__baris p:last-child {   margin-block-end: 0;   max-inline-size: var(--ukuran-prosa);   font-size: .9375rem;   color: var(--warna-dakwat-lembut); } .hasil__laluan {   margin-block-end: .25rem;   font-size: .8125rem;   font-weight: 600;   color: var(--warna-dakwat-lembut); } .hasil-carian__segi { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.5rem; }   .keadaan-kosong {   padding: 3rem 0;   max-inline-size: 34rem;   color: var(--warna-dakwat-lembut); } .keadaan-kosong > span[aria-hidden] { display: none; } .keadaan-kosong h2 { color: var(--warna-dakwat); margin-block-end: .5rem; } .keadaan-kosong ul { margin-block-start: 1rem; } .keadaan-kosong li { padding-block: .25rem; } .keadaan-kosong button {   min-block-size: 44px;   margin-block-start: 1rem;   padding: .625rem 1.125rem;   background: var(--warna-tindakan);   color: #fff;   border-radius: var(--bentuk-radius-butang);   font-weight: 600; }   .penomboran {   display: flex;   justify-content: center;   gap: .375rem;   margin-block-start: 2rem; } .penomboran:empty { display: none; } .penomboran button {   min-block-size: 44px;   min-inline-size: 44px;   padding: .5rem .75rem;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-butang);   font-size: .9375rem;   background: var(--warna-permukaan);   color: var(--warna-dakwat); } .penomboran button[aria-current="true"] {   background: var(--warna-primer);   color: #fff;   border-color: var(--warna-primer); }   @media (max-width: 767px) {   .susun-penapis { display: block; padding-block: 1.5rem var(--ruang-7); }   .penapis {     position: fixed;     inset: auto 0 0 0;     z-index: 70;     background: var(--warna-permukaan);     padding: 1.25rem var(--tepi-laman) 1.5rem;     border-radius: var(--bentuk-radius-dialog) var(--bentuk-radius-dialog) 0 0;     box-shadow: var(--bayang-aras-2);     translate: 0 100%;     transition: translate .2s;     max-block-size: 82vh;     overflow-y: auto;   }   .penapis[data-buka] { translate: 0 0; }   .penapis__buka-lembaran {     display: inline-flex;     align-items: center;     gap: .5rem;     min-block-size: 44px;     margin-block-end: 1rem;     padding: .625rem 1rem;     background: var(--warna-permukaan);     border: 1px solid var(--warna-sempadan-kuat);     border-radius: var(--bentuk-radius-butang);     font-size: .9375rem;     font-weight: 600;     color: var(--warna-dakwat);   }   .penapis__lembaran-butang {     display: flex;     position: sticky;     inset-block-end: -1.5rem;     inline-size: 100%;     margin-block-start: 1rem;     box-shadow: 0 -1.5rem 0 1.5rem var(--warna-permukaan);   }   .penapis__bar { gap: .75rem; } }   .jadual-responsif { inline-size: 100%; } .jadual-pegawai {   inline-size: 100%;   border-collapse: collapse;   font-variant-numeric: tabular-nums; } .jadual-pegawai caption {   text-align: left;   margin-block-end: .75rem;   font-size: .9375rem;   color: var(--warna-dakwat-lembut); } .jadual-pegawai th, .jadual-pegawai td {   padding: .875rem 1rem .875rem 0;   text-align: left;   vertical-align: top;   font-size: .9375rem;   line-height: 1.4;   border-block-end: 1px solid var(--warna-sempadan); } .jadual-pegawai thead th {   padding-block: .625rem;   border-block-end: 2px solid var(--warna-dakwat);   font-size: .75rem;   font-weight: 700;   letter-spacing: .07em;   text-transform: uppercase;   color: var(--warna-dakwat-lembut);   white-space: nowrap; } .jadual-pegawai tbody th[scope="row"] { font-weight: 600; inline-size: 24%; } .jadual-pegawai tbody th a { color: var(--warna-dakwat); } .jadual-pegawai tbody th a:hover { color: var(--warna-tindakan); text-decoration: underline; text-underline-offset: .2em; } .jadual-pegawai tbody th small {   display: block;   margin-block-start: .15rem;   font-size: .8125rem;   font-weight: 400;   color: var(--warna-dakwat-lembut); } .jadual-pegawai td:nth-child(4) { white-space: nowrap; } .jadual-pegawai td a { text-decoration: underline; text-underline-offset: .2em; } .jadual-pegawai tbody tr:hover { background: var(--warna-latar-alt); } @media (max-width: 767px) {   .jadual-pegawai thead { display: none; }   .jadual-pegawai caption { margin-block-end: 0; }   .jadual-pegawai tbody { display: block; border-block-start: 2px solid var(--warna-dakwat); }   .jadual-pegawai tr {     display: block;     padding-block: 1.125rem;     border-block-end: 1px solid var(--warna-sempadan);   }   .jadual-pegawai tr:hover { background: none; }   .jadual-pegawai td,   .jadual-pegawai th[scope="row"] {     display: grid;     grid-template-columns: 7rem minmax(0, 1fr);     gap: .5rem;     padding: .2rem 0;     inline-size: auto;     border: 0;   }   .jadual-pegawai th[scope="row"] {     grid-template-columns: minmax(0, 1fr);     margin-block-end: .35rem;     font-size: 1.0625rem;   }   .jadual-pegawai td::before {     content: attr(data-label);     font-size: .8125rem;     color: var(--warna-dakwat-lembut);   } }   .akordion { border-block-end: 1px solid var(--warna-sempadan); } .akordion:first-of-type { border-block-start: 2px solid var(--warna-dakwat); } .akordion__butang {   inline-size: 100%;   display: flex;   justify-content: space-between;   align-items: center;   gap: 1.5rem;   min-block-size: 60px;   padding: 1.125rem 0;   text-align: left;   font-family: var(--taip-muka-tajuk);   font-size: 1.0625rem;   font-weight: 600;   line-height: 1.35;   color: var(--warna-dakwat); } .akordion__butang:hover { color: var(--warna-tindakan); } .akordion__butang::after {   content: '';   flex: 0 0 auto;   inline-size: .625rem;   block-size: .625rem;   border-inline-end: 2px solid var(--warna-dakwat-lembut);   border-block-end: 2px solid var(--warna-dakwat-lembut);   transform: rotate(45deg) translate(-2px, -2px);   transition: transform .2s; } .akordion__butang[aria-expanded="true"]::after {   border-color: var(--warna-tindakan);   transform: rotate(-135deg) translate(-3px, -3px); } .akordion__panel {   padding-block-end: 1.25rem;   font-size: 1rem;   line-height: 1.65;   color: var(--warna-dakwat-lembut); }   .chatbot__pelancar {   position: fixed;   inset-block-end: 1.5rem;   inset-inline-end: 1.5rem;   inline-size: 56px;   block-size: 56px;   border-radius: 50%;   background: var(--warna-primer);   color: #fff;   box-shadow: var(--bayang-aras-2);   z-index: 40;   display: flex;   align-items: center;   justify-content: center;   transition: background-color .15s; } .chatbot__pelancar::before {   content: '';   inline-size: 22px;   block-size: 17px;   border: 2px solid #fff;   border-radius: 4px; } .chatbot__pelancar::after {   content: '';   position: absolute;   inline-size: 6px;   block-size: 6px;   inset-inline-end: 17px;   inset-block-end: 15px;   border-inline-end: 2px solid #fff;   border-block-end: 2px solid #fff;   transform: skewY(35deg); } .chatbot__pelancar:hover { background: var(--warna-primer-gelap); } .chatbot__panel {   position: fixed;   inset-block-end: 5.75rem;   inset-inline-end: 1.5rem;   inline-size: min(24rem, calc(100vw - 2rem));   max-block-size: min(32rem, calc(100vh - 8rem));   background: var(--warna-permukaan);   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-dialog);   box-shadow: var(--bayang-aras-2);   z-index: 45;   display: flex;   flex-direction: column;   overflow: hidden; } .chatbot__panel h2 {   padding: 1rem 3.5rem 1rem 1rem;   margin-block-end: 0;   font-size: 1rem;   background: var(--warna-primer);   color: #fff; } .chatbot__tutup {   position: absolute;   inset-block-start: 0;   inset-inline-end: 0;   min-inline-size: 48px;   min-block-size: 52px;   color: #fff;   font-size: 1.25rem; } .chatbot__log {   flex: 1;   overflow-y: auto;   padding: 1rem;   display: flex;   flex-direction: column;   gap: .75rem; } .chatbot__gelembung {   max-inline-size: 88%;   margin-block-end: 0;   padding: .625rem .875rem;   border-radius: var(--bentuk-radius-kad);   font-size: .9375rem;   line-height: 1.5; } .chatbot__gelembung--pengguna {   align-self: flex-end;   background: var(--warna-primer);   color: #fff; } .chatbot__gelembung--bot {   align-self: flex-start;   background: var(--warna-latar-alt);   border: 1px solid var(--warna-sempadan);   color: var(--warna-dakwat); } .chatbot__gelembung--bot a {   color: var(--warna-tindakan);   font-weight: 600;   text-decoration: underline;   text-underline-offset: .2em; } .chatbot__penafian {   margin-block-end: 0;   padding-inline: 1rem;   font-size: .8125rem;   color: var(--warna-dakwat-lembut); } .chatbot__pantas {   display: flex;   flex-wrap: wrap;   gap: .375rem;   padding: .75rem 1rem 0; } .chatbot__pantas button {   min-block-size: 36px;   padding: .3rem .75rem;   font-size: .8125rem;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-cip);   background: var(--warna-permukaan);   color: var(--warna-tindakan); } .chatbot__pantas button:hover { background: var(--warna-latar-alt); } .chatbot__borang {   display: flex;   gap: .5rem;   padding: .875rem 1rem;   margin-block-start: .875rem;   border-block-start: 1px solid var(--warna-sempadan); } .chatbot__borang label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .chatbot__borang input {   flex: 1;   min-inline-size: 0;   min-block-size: 44px;   padding: .5rem .75rem;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   font-size: .9375rem; } .chatbot__borang button[type="submit"] {   min-block-size: 44px;   padding: .5rem 1rem;   background: var(--warna-tindakan);   color: #fff;   border-radius: var(--bentuk-radius-butang);   font-weight: 600;   font-size: .9375rem; } .chatbot__borang button[type="submit"]:hover { background: var(--warna-tindakan-hover); } @media (max-width: 599px) {   .chatbot__pelancar { inset-block-end: 1rem; inset-inline-end: 1rem; }   .chatbot__panel { inset-block-end: 5rem; inset-inline-end: 1rem; } }   .peta {   display: grid;   grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);   gap: 2.5rem 3rem;   align-items: start; } .peta__panel { grid-column: 2; grid-row: 1; } .peta__senarai { grid-column: 1; grid-row: 1; } .peta__senarai {   display: grid;   grid-template-columns: repeat(2, minmax(0, 1fr));   column-gap: 2rem;   border-block-start: 1px solid var(--warna-sempadan); } .peta__senarai li { border-block-end: 1px solid var(--warna-sempadan); } .peta__senarai button {   inline-size: 100%;   display: flex;   align-items: center;   justify-content: space-between;   gap: 1rem;   min-block-size: 48px;   padding-block: .625rem;   text-align: left;   font-size: .9375rem;   font-weight: 600;   color: var(--warna-dakwat); } .peta__senarai button:hover { color: var(--warna-tindakan); } .peta__senarai button[data-aktif] { color: var(--warna-tindakan); } .peta__senarai button[data-aktif] > span:first-child {   text-decoration: underline;   text-underline-offset: .2em; } .peta__panel {   position: sticky;   top: 1.5rem;   padding: 1.5rem;   background: var(--warna-latar-alt);   border: 1px solid var(--warna-sempadan);   border-radius: var(--bentuk-radius-panel); } .peta__panel h3 { margin-block-end: .5rem; font-size: 1.25rem; } .peta__panel p { font-size: .9375rem; color: var(--warna-dakwat-lembut); } .peta__panel .btn { margin-block-start: .5rem; } .peta__legenda {   display: flex;   flex-wrap: wrap;   gap: .375rem .875rem;   margin-block: 1rem 0;   font-size: .875rem;   color: var(--warna-dakwat-lembut); } .peta__legenda li { display: flex; align-items: center; gap: .375rem; } .peta__legenda li::before {   content: '';   inline-size: .625rem;   block-size: .625rem;   border-radius: 50%;   background: var(--warna-jaya); } .peta__legenda [data-status="Dalam Kajian"]::before { background: var(--warna-amaran); } .peta__legenda [data-status="Belum Bermula"]::before { background: var(--warna-sempadan-kuat); } @media (max-width: 899px) {   .peta { grid-template-columns: minmax(0, 1fr); }   .peta__panel { position: static; grid-column: 1; grid-row: 1; }   .peta__senarai { grid-column: 1; grid-row: 2; } } @media (max-width: 599px) {   .peta__senarai { grid-template-columns: minmax(0, 1fr); } }   .peta--abstrak {   display: grid;   place-items: center;   aspect-ratio: 4 / 3;   padding: 1.5rem;   background:     linear-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px),     linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px),     color-mix(in srgb, #fff 6%, transparent);   background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, auto;   border: 1px solid color-mix(in srgb, #fff 22%, transparent);   border-radius: var(--bentuk-radius-panel); } .peta--abstrak span {   font-family: var(--taip-muka-tajuk);   font-size: clamp(1.25rem, 3vw, 2rem);   font-weight: var(--taip-berat-tajuk);   letter-spacing: -0.02em;   color: #fff; }   .susun-dua {   display: grid;   grid-template-columns: repeat(2, minmax(0, 1fr));   gap: 3rem;   align-items: start; } .susun-dalaman {   display: grid;   grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);   gap: 3.5rem;   padding-block: var(--ruang-seksyen); } .menu-dalaman {   position: sticky;   top: 1.5rem;   padding-block-start: 1rem;   border-block-start: 2px solid var(--warna-dakwat); } .menu-dalaman h2 { font-size: .9375rem; margin-block-end: .5rem; } .menu-dalaman a {   display: block;   padding-block: .4rem;   font-size: .9375rem;   color: var(--warna-dakwat-lembut); } .menu-dalaman a:hover { color: var(--warna-tindakan); text-decoration: underline; text-underline-offset: .2em; } .kandungan-dalaman > section, .kandungan-prosa > section { margin-block: 2.5rem; } .kandungan-dalaman > section:first-child, .kandungan-prosa > section:first-child { margin-block-start: 0; } .kandungan-prosa { max-inline-size: 52rem; } .kandungan-prosa ul, .kandungan-dalaman ul { padding-inline-start: 1.25rem; } .kandungan-prosa li, .kandungan-dalaman li { list-style: disc; padding-block: .15rem; } .kandungan-prosa .senarai-semak li, .kandungan-dalaman .senarai-semak li { list-style: none; }   .kad-perkhidmatan {   display: flex;   flex-direction: column;   padding: 1.5rem;   background: var(--warna-permukaan);   border: 1px solid var(--warna-sempadan);   border-radius: var(--bentuk-radius-kad);   transition: border-color .15s, background-color .15s; } .kad-perkhidmatan:hover { border-color: var(--warna-sempadan-kuat); background: var(--warna-latar-alt); } .kad-perkhidmatan__ikon {   display: flex;   align-items: center;   justify-content: center;   inline-size: 40px;   block-size: 40px;   margin-block-end: 1rem;   font-size: 1.375rem;   color: var(--warna-primer); } .kad-perkhidmatan h3 { font-size: 1.0625rem; } .kad-perkhidmatan p {   flex: 1;   font-size: .9375rem;   line-height: 1.5;   color: var(--warna-dakwat-lembut); } .kad-perkhidmatan .btn { margin-block-start: 1.25rem; align-self: flex-start; }   .kad-pegawai {   padding: 1.5rem;   background: var(--warna-latar-alt);   border: 1px solid var(--warna-sempadan);   border-radius: var(--bentuk-radius-kad); }   .seruan, .notis {   padding: 1.5rem;   margin-block: 1.5rem;   background: var(--warna-latar-alt);   border: 1px solid var(--warna-sempadan);   border-radius: var(--bentuk-radius-kad); } .notis {   background: color-mix(in srgb, var(--warna-amaran) 7%, var(--warna-latar));   border-color: color-mix(in srgb, var(--warna-amaran) 34%, var(--warna-sempadan)); } .seruan h3 { margin-block-end: .375rem; } .seruan p { max-inline-size: 44rem; color: var(--warna-dakwat-lembut); } .seruan .btn { margin-block-start: .5rem; } .senarai-semak { display: grid; gap: .625rem; margin-block: 1.25rem; } .senarai-semak li { position: relative; padding-inline-start: 1.75rem; } .senarai-semak li::before {   content: '';   position: absolute;   inset-inline-start: .15rem;   inset-block-start: .45rem;   inline-size: .55rem;   block-size: .3rem;   border-inline-start: 2px solid var(--warna-jaya);   border-block-end: 2px solid var(--warna-jaya);   transform: rotate(-45deg); } .senarai-definisi { margin-block: 1.5rem; border-block-start: 1px solid var(--warna-sempadan); } .senarai-definisi div {   display: grid;   grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);   gap: 1rem;   padding-block: .875rem;   border-block-end: 1px solid var(--warna-sempadan); } .senarai-definisi dt { font-weight: 600; } .senarai-definisi dd { margin: 0; color: var(--warna-dakwat-lembut); }   .bar-carian-direktori {   display: grid;   grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);   gap: 1.5rem;   margin-block-end: 1.5rem;   max-inline-size: 48rem; } .bar-carian-direktori label {   display: block;   font-size: .9375rem;   font-weight: 600; } .bar-carian-direktori input, .bar-carian-direktori select {   display: block;   inline-size: 100%;   margin-block-start: .375rem;   min-block-size: 46px;   padding: .625rem .75rem;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   background: var(--warna-permukaan);   color: var(--warna-dakwat);   font-size: 1rem;   font-weight: 400; } .bar-carian-direktori input:focus, .bar-carian-direktori select:focus {   outline: none;   border-color: var(--warna-fokus);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--warna-fokus) 26%, transparent); }   .borang-hubungi label {   display: block;   font-size: .9375rem;   font-weight: 600;   margin-block-end: .375rem;   color: var(--warna-dakwat); } .borang-hubungi input, .borang-hubungi textarea, .borang-hubungi select {   inline-size: 100%;   min-block-size: 46px;   padding: .625rem .75rem;   border: 1px solid var(--warna-sempadan-kuat);   border-radius: var(--bentuk-radius-kawalan);   background: var(--warna-permukaan);   color: var(--warna-dakwat);   font-size: 1rem;   margin-block-end: 1.25rem; } .borang-hubungi textarea { min-block-size: 8rem; resize: vertical; } .borang-hubungi input:focus, .borang-hubungi textarea:focus, .borang-hubungi select:focus {   outline: none;   border-color: var(--warna-fokus);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--warna-fokus) 26%, transparent); }   .artikel { max-inline-size: 48rem; } .artikel__meta {   display: flex;   flex-wrap: wrap;   gap: .875rem;   margin-block-end: 1.5rem;   font-size: .875rem;   color: var(--warna-dakwat-lembut); } .artikel__imej { inline-size: 100%; border-radius: var(--bentuk-radius-kad); margin-block: 1.5rem; } .artikel__petikan {   padding-inline-start: 1.5rem;   margin-block: 1.75rem;   border-inline-start: 1px solid var(--warna-sempadan-kuat);   font-size: 1.1875rem;   line-height: 1.55;   color: var(--warna-dakwat); } .artikel__berkaitan {   margin-block-start: 3rem;   padding-block-start: 1.5rem;   border-block-start: 2px solid var(--warna-dakwat); } .menu-halaman { position: sticky; top: 1.5rem; } .menu-halaman a {   display: block;   padding: .375rem 0 .375rem 1rem;   font-size: .9375rem;   color: var(--warna-dakwat-lembut);   border-inline-start: 2px solid var(--warna-sempadan); } .menu-halaman a:hover, .menu-halaman a.aktif { color: var(--warna-tindakan); border-inline-start-color: var(--warna-tindakan); }   .imej-abstrak, .kulit-dokumen {   display: grid;   place-items: center;   min-block-size: 16rem;   padding: 2rem;   margin-block-end: 2rem;   color: #fff;   background-color: var(--warna-primer-gelap);   background-image:     linear-gradient(100deg,       color-mix(in srgb, var(--warna-primer-gelap) 88%, transparent),       color-mix(in srgb, var(--warna-primer-gelap) 55%, transparent)),     var(--hero-imej);   background-size: cover;   background-position: center;   border-radius: var(--bentuk-radius-kad);   font-family: var(--taip-muka-tajuk);   font-size: clamp(1.125rem, 2.5vw, 1.625rem);   text-align: center; } .kulit-dokumen { aspect-ratio: 3 / 4; max-inline-size: 18rem; min-block-size: 0; gap: 1rem; } .nota { margin-block-start: 1rem; font-size: .875rem; color: var(--warna-dakwat-lembut); } @media (max-width: 899px) {   .grid-kad { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) {   .susun-dua,   .susun-dalaman,   .bar-carian-direktori { grid-template-columns: minmax(0, 1fr); gap: 2rem; }   .susun-dalaman { padding-block: var(--ruang-7); }   .menu-dalaman { position: static; }   .senarai-definisi div { grid-template-columns: minmax(0, 1fr); gap: .25rem; } } @media (max-width: 519px) {   .grid-kad { grid-template-columns: minmax(0, 1fr); } }   @media (max-width: 767px) {   .eyebrow,   .bar-kerajaan p,   .pengaki__bawah,   .pengaki__lajur a,   .pengaki__lajur p,   .kad > p,   .kad__meta,   .kad-berita p,   .kad-berita time,   .kad-rancangan p,   .pengaki__logo p,   .kad-perkhidmatan p,   .kad-pautan span,   .jadual-pegawai th,   .jadual-pegawai td,   .jadual-pegawai caption,   .akordion__panel,   .akordion__panel p,   .peta__senarai li,   .peta__panel p,   .peta__legenda,   .jalur-negeri li,   .jubin small,   .rak-aplikasi__teks small,   .rak-aplikasi__anak,   .hasil__baris p:last-child,   .hasil__laluan,   .artikel__meta,   .breadcrumb,   .cip,   .nota { font-size: 1rem; }   .jadual-pegawai td::before,   .jadual-pegawai tbody th small,   .chatbot__penafian { font-size: .9375rem; } }   .seksyen__tajuk { border-block-start-color: var(--warna-domain); } html[data-halaman="utama"] .seksyen__tajuk { border-block-start-color: var(--warna-dakwat); }   .tajuk-halaman {   background: color-mix(in srgb, var(--warna-domain) 7%, var(--warna-latar));   border-block-end: 3px solid var(--warna-domain); } .tajuk-halaman--imej {   background-color: var(--warna-domain);   border-block-end: 3px solid var(--warna-domain); } .tajuk-halaman--imej::before {   background: linear-gradient(100deg,     color-mix(in srgb, var(--warna-domain) 90%, #000 14%) 0%,     color-mix(in srgb, var(--warna-domain) 62%, transparent) 48%,     color-mix(in srgb, var(--warna-domain) 16%, transparent) 100%); } .tajuk-halaman--imej p { color: color-mix(in srgb, #fff 88%, var(--warna-domain)); } .akordion:first-of-type, .penapis [data-borang-penapis], .hasil-carian, .hasil[data-paparan="senarai"] .hasil__senarai, .grid-kad[data-rancangan-utama], .tangga-rancangan, .menu-dalaman, .artikel__berkaitan, .jadual-pegawai thead th { border-block-start-color: var(--warna-domain); } @media (max-width: 767px) {   .jadual-pegawai tbody { border-block-start-color: var(--warna-domain); } } .penapis__paparan button[aria-pressed="true"], .penomboran button[aria-current="true"] {   background: var(--warna-domain);   border-color: var(--warna-domain); }   .jubin a[data-domain="rancangan"] { --warna-domain: var(--warna-domain-rancangan); } .jubin a[data-domain="perkhidmatan"] { --warna-domain: var(--warna-domain-perkhidmatan); } .jubin a[data-domain="perolehan"] { --warna-domain: var(--warna-domain-perolehan); } .jubin a[data-domain="penerbitan"] { --warna-domain: var(--warna-domain-penerbitan); } .jubin a[data-domain="media"] { --warna-domain: var(--warna-domain-media); } .jubin a[data-domain="hubungi"] { --warna-domain: var(--warna-domain-hubungi); } .jubin__ikon { color: var(--warna-domain); } .jubin a:hover {   color: var(--warna-domain);   background: color-mix(in srgb, var(--warna-domain) 7%, var(--warna-latar));   box-shadow: inset 0 -3px 0 var(--warna-domain); }   .kad__kulit[data-jenis="Garis Panduan"] { --warna-domain: var(--warna-domain-rancangan); } .kad__kulit[data-jenis="Laporan"] { --warna-domain: var(--warna-domain-penerbitan); } .kad__kulit[data-jenis="Manual"] { --warna-domain: var(--warna-domain-perkhidmatan); } .kad__kulit[data-jenis="Rancangan"] { --warna-domain: var(--warna-primer); } .kad__kulit[data-jenis="Piagam"] { --warna-domain: var(--warna-domain-hubungi); } .kad__kulit[data-jenis="Statistik"] { --warna-domain: var(--warna-domain-media); } .kad__kulit {   background: color-mix(in srgb, var(--warna-domain) 12%, var(--warna-latar));   border-block-end-color: color-mix(in srgb, var(--warna-domain) 28%, var(--warna-sempadan)); } .kad__kulit::after { color: color-mix(in srgb, var(--warna-domain) 78%, transparent); } .kad__format {   color: var(--warna-domain);   border-color: color-mix(in srgb, var(--warna-domain) 40%, var(--warna-sempadan)); } .hasil[data-paparan="senarai"] .kad__format {   background: color-mix(in srgb, var(--warna-domain) 10%, var(--warna-latar)); }   .seksyen--tua .rak-aplikasi, .seksyen--tua .rak-aplikasi > li {   border-color: color-mix(in srgb, var(--warna-atas-primer) 34%, transparent); } .seksyen--tua .rak-aplikasi__item, .seksyen--tua .rak-aplikasi__teks strong { color: #fff; } .seksyen--tua .rak-aplikasi__teks small, .seksyen--tua .rak-aplikasi__anak { color: var(--warna-atas-primer); } .seksyen--tua .rak-aplikasi__item:hover .rak-aplikasi__teks strong, .seksyen--tua .rak-aplikasi__item:hover .rak-aplikasi__anak { color: #fff; } .seksyen--tua :focus-visible { outline-color: #fff; }