/* PanduanHRMIS.my. One stylesheet, no JavaScript. Mobile first. */
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/zilla-slab-600-latin.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/zilla-slab-700-latin.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-sans-3-400-700-latin.woff2) format("woff2")}

:root{
  --dakwat:#1c2b3a;
  --kertas:#ffffff;
  --fail:#f3e7cb;
  --tab:#e3cf9b;
  --setem:#a3281c;
  --pen:#154b85;
  --lulus:#1e6b4a;
  --garis:#d8d2c4;
  --redup:#4a5563;
  --lembut:#f7f5f0;
  --font-badan:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-tajuk:"Zilla Slab",Rockwell,"Roboto Slab",Georgia,serif;
  --wrap:72rem;
  --ukur:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;font-family:var(--font-badan);font-size:1.0625rem;line-height:1.55;color:var(--dakwat);background:var(--kertas)}
img,svg{max-width:100%;height:auto}
a{color:var(--pen);text-decoration-thickness:1px;text-underline-offset:.14em}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--pen);outline-offset:3px}
h1,h2,h3{font-family:var(--font-tajuk);font-weight:700;line-height:1.15;margin:0 0 .5em;overflow-wrap:anywhere}
h1{font-size:2rem;letter-spacing:-.01em}
h2{font-size:1.5rem;line-height:1.2;margin-top:2.2em}
h3{font-size:1.2rem;line-height:1.3;margin-top:1.6em;font-weight:600}
p,ul,ol,table,figure{margin:0 0 1em}
ul,ol{padding-left:1.4em}
li{margin:.3em 0}
strong{font-weight:600}
code{font-family:inherit;background:var(--lembut);padding:.05em .3em}
hr{border:0;border-top:1px solid var(--garis);margin:2em 0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1rem}
@media (min-width:48em){.wrap{padding:0 1.5rem}}

/* Skip link */
.langkau{position:absolute;left:-999px;top:0;background:var(--dakwat);color:#fff;padding:.6em 1em;z-index:10}
.langkau:focus{left:1rem;top:1rem}

/* Header */
.atas{border-bottom:1px solid var(--garis);background:var(--kertas)}
.atas-baris{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding-top:.9rem;padding-bottom:.6rem}
.jenama{display:inline-flex;align-items:center;gap:.5rem;color:var(--dakwat);text-decoration:none;font-family:var(--font-tajuk);font-weight:700;font-size:1.35rem;line-height:1}
.jenama .tanda{color:var(--dakwat);flex:none}
.jenama b{font-weight:600;color:var(--redup)}
.setem{margin:0;font-size:.82rem;font-weight:600;color:var(--setem);border:2px solid var(--setem);padding:.25em .6em;line-height:1.25}
.menu ul{list-style:none;margin:0;padding:.35rem 0 .55rem;display:flex;flex-wrap:wrap;gap:.15rem .25rem}
.menu a{display:block;padding:.35em .6em;color:var(--dakwat);text-decoration:none;font-weight:600;font-size:.95rem;border-bottom:3px solid transparent}
.menu a:hover{border-bottom-color:var(--garis)}
.menu a[aria-current="page"]{border-bottom-color:var(--dakwat)}

/* Breadcrumb and page head */
.jejak{font-size:.9rem;margin:1.2rem 0 .8rem}
.jejak ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.jejak li+li::before{content:"/";color:var(--redup);margin-right:.5rem}
.jejak a[aria-current="page"]{color:var(--dakwat);text-decoration:none}
.kepala{margin-bottom:1.5rem}
.kepala .modul{margin:0 0 .4rem;color:var(--redup);font-size:.95rem}
.kepala h1{max-width:28ch}
.meta{color:var(--redup);font-size:.95rem;margin:0}
.meta a{color:inherit}

/* Content measure */
.isi{max-width:var(--ukur)}
.isi h2{scroll-margin-top:1rem}
.isi > p,.isi > ul,.isi > ol{max-width:var(--ukur)}
.isi table{max-width:none}

/* Folder panel */
.fail{position:relative;background:var(--fail);color:var(--dakwat);padding:1.1rem 1.1rem .4rem;margin:2.4rem 0 1.6rem}
.fail .tab{position:absolute;left:0;top:-1.55rem;background:var(--tab);color:var(--dakwat);font-family:var(--font-tajuk);font-weight:600;font-size:.95rem;line-height:1;padding:.5rem .9rem .45rem;border-radius:.5rem .5rem 0 0}
.fail .fail-isi > :last-child{margin-bottom:.6rem}
.fail a{color:var(--pen)}
.fail h2,.fail h3{margin-top:.2em}
.ringkas{margin-top:2.4rem}
.ringkas p{font-size:1.1rem}
.ringkas p:last-child{margin-bottom:.6rem}

/* Routing slip */
.slip{border:1.5px solid var(--dakwat);padding:1rem 1.1rem .4rem;margin:1.6rem 0;background:var(--kertas);color:var(--dakwat);max-width:34rem}
.slip-judul{font-family:var(--font-tajuk);font-weight:700;font-size:1.1rem;margin:0 0 .9rem;border-bottom:1.5px solid var(--dakwat);padding-bottom:.5rem}
.slip-laluan{list-style:none;margin:0;padding:0 0 0 1.4rem;position:relative}
.slip-laluan::before{content:"";position:absolute;left:.42rem;top:.6rem;bottom:1.2rem;border-left:2px solid var(--dakwat)}
.slip-laluan li{position:relative;margin:0 0 1rem;padding-left:.6rem}
.slip-laluan li::before{content:"";position:absolute;left:-1.4rem;top:.45rem;width:.9rem;height:.9rem;border:2px solid var(--dakwat);background:var(--kertas)}
.slip-laluan li.akhir::before{background:var(--lulus);border-color:var(--lulus)}
.slip-nama{display:block;font-weight:600;line-height:1.3}
.slip-laluan li.akhir .slip-nama{color:var(--lulus)}
.slip-kod{display:block;color:var(--redup);font-size:.9rem}
.slip-nota{margin:.4rem 0 .6rem;font-size:.9rem;color:var(--redup)}

/* Official-site button */
.butang-rasmi{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.1rem;background:var(--dakwat);color:#fff;text-decoration:none;padding:.7rem 1.1rem;margin:.2rem 1rem .8rem 0;line-height:1.2}
.butang-rasmi:hover,.butang-rasmi:focus-visible{background:var(--pen)}
.butang-rasmi .label{font-weight:600;font-size:1.05rem}
.butang-rasmi .domain{font-size:.82rem;color:#e8edf3}
.tindakan{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;margin:1rem 0 1.2rem}
.pautan{font-weight:600}

/* Callouts */
.nota{border-left:5px solid var(--garis);background:var(--lembut);color:var(--dakwat);padding:.9rem 1rem .1rem;margin:1.4rem 0}
.nota > p:last-of-type{margin-bottom:.9rem}
.nota-label{font-weight:600;margin:0 0 .3rem}
.nota-rasmi{border-left-color:var(--dakwat)}
.nota-rasmi blockquote{margin:0 0 .8rem;padding:0;font-style:italic}
.nota-amaran{border-left-color:var(--setem)}
.nota-amaran .nota-label{color:var(--setem)}
.nota-petua{border-left-color:var(--lulus)}
.nota-petua .nota-label{color:var(--lulus)}
.nota-sumber{font-size:.9rem;color:var(--redup)}

/* Numbered steps */
.langkah{list-style:none;counter-reset:langkah;margin:1.2rem 0 1.6rem;padding:0}
.langkah > li{counter-increment:langkah;position:relative;padding:0 0 1.2rem 3.4rem;margin:0;border-left:2px solid var(--garis);margin-left:1.15rem}
.langkah > li:last-child{border-left-color:transparent;padding-bottom:.4rem}
.langkah > li::before{content:counter(langkah);position:absolute;left:-1.2rem;top:-.15rem;width:2.3rem;height:2.3rem;background:var(--dakwat);color:#fff;font-family:var(--font-tajuk);font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.langkah h3{margin:0 0 .35rem;font-size:1.15rem}
.langkah p,.langkah ul{margin-bottom:.6rem}

/* Tables */
.jadual{overflow-x:auto;margin:1.2rem 0 1.6rem}
table{border-collapse:collapse;width:100%;font-size:.97rem}
th,td{text-align:left;vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid var(--garis)}
thead th{border-bottom:2px solid var(--dakwat);font-weight:600}
tbody th{font-weight:600}
caption{text-align:left;caption-side:top;font-weight:600;padding:0 0 .5rem}
.angka{text-align:right;white-space:nowrap}

/* Status chips */
.status{display:inline-block;border:1.5px solid var(--dakwat);padding:.05em .5em;font-size:.92rem;font-weight:600;white-space:nowrap}
.status-lulus{border-color:var(--lulus);color:var(--lulus)}
.status-tolak{border-color:var(--setem);color:var(--setem)}

/* Figures */
.gambar{margin:1.6rem 0}
.gambar img{display:block;border:1px solid var(--garis);background:var(--lembut)}
.gambar figcaption{font-size:.9rem;color:var(--redup);margin-top:.5rem}
.gambar.telefon img{max-width:22rem}

/* Table of contents */
.kandungan-senarai{margin:1.4rem 0 2rem;padding:1rem 1.1rem .3rem;border:1px solid var(--garis)}
.kandungan-senarai p{font-weight:600;margin:0 0 .5rem}
.kandungan-senarai ol{margin:0 0 .8rem;padding-left:1.3rem;columns:1}
.kandungan-senarai a{color:var(--dakwat)}
@media (min-width:40em){.kandungan-senarai ol{columns:2;column-gap:2rem}}

/* FAQ */
.soalan details{border-top:1px solid var(--garis)}
.soalan details:last-child{border-bottom:1px solid var(--garis)}
.soalan summary{cursor:pointer;font-weight:600;padding:.8rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.soalan summary::-webkit-details-marker{display:none}
.soalan summary::after{content:"+";font-family:var(--font-tajuk);font-size:1.4rem;line-height:1;color:var(--redup);flex:none}
.soalan details[open] summary::after{content:"\2212"}
.soalan .jawapan{padding:0 0 .6rem}
.soalan .jawapan > :last-child{margin-bottom:.6rem}

/* Sources and related */
.sumber ul{font-size:.95rem}
.berkaitan{margin:2.5rem 0 1rem;padding-top:1.2rem;border-top:2px solid var(--dakwat)}
.berkaitan h2{margin-top:0;font-size:1.3rem}
.berkaitan ul{list-style:none;padding:0;margin:0}
.berkaitan li{margin:0 0 .8rem}
.berkaitan a{font-weight:600}
.berkaitan span{display:block;color:var(--redup);font-size:.95rem}

/* Home */
.pembuka{padding:2rem 0 .5rem}
.pembuka-grid{display:grid;gap:1.5rem}
@media (min-width:56em){.pembuka-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem;align-items:start}}
.pembuka h1{font-size:2.3rem;max-width:22ch}
.pembuka .utama{font-size:1.15rem;max-width:var(--ukur)}
.tarikh{color:var(--redup);font-size:.95rem;margin:0}
.bahagian{padding:1.2rem 0}
.bahagian h2{margin-top:1rem}
.urusan{list-style:none;padding:0;margin:0;display:grid;gap:.2rem 2rem}
@media (min-width:40em){.urusan{grid-template-columns:1fr 1fr}}
.urusan li{margin:0;padding:.7rem 0;border-top:1px solid rgba(28,43,58,.18)}
.urusan a{font-family:var(--font-tajuk);font-weight:600;font-size:1.15rem;color:var(--dakwat)}
.urusan span{display:block;font-size:.95rem;margin-top:.15rem}
.tahap{list-style:none;padding:0;margin:1rem 0;display:grid;gap:1rem}
@media (min-width:40em){.tahap{grid-template-columns:repeat(3,1fr)}}
.tahap li{margin:0;border-top:3px solid var(--dakwat);padding-top:.7rem}
.tahap h3{margin:0 0 .3rem;font-size:1.1rem}
.tahap p{margin:0 0 .4rem;font-size:.97rem}

/* Trust pages */
.halaman{max-width:var(--ukur);padding-bottom:2rem}

/* 404 */
.tiada{padding:3rem 0}

/* Footer */
.kaki{margin-top:3.5rem;background:var(--dakwat);color:#e6e9ee}
.kaki a{color:#ffffff}
.kaki-grid{display:grid;gap:1.5rem;padding-top:2.2rem;padding-bottom:1.5rem}
@media (min-width:48em){.kaki-grid{grid-template-columns:2fr 1fr 1fr;gap:3rem}}
.jenama-kaki{font-family:var(--font-tajuk);font-weight:700;font-size:1.3rem;margin:0 0 .5rem;color:#fff}
.kaki-jenama p{font-size:.95rem;max-width:52ch}
.kaki-senarai h2{font-size:1rem;margin:0 0 .5rem;color:#fff}
.kaki-senarai ul{list-style:none;padding:0;margin:0}
.kaki-senarai li{margin:.25rem 0;font-size:.95rem}
.kaki-bawah{border-top:1px solid rgba(255,255,255,.18);padding-top:1rem;padding-bottom:1.6rem}
.kaki-bawah p{margin:0;font-size:.88rem;color:#c9d0d9}

@media print{.atas,.kaki,.langkau,.kandungan-senarai,.berkaitan{display:none}body{font-size:11pt}}