:root{
  --ink:#172026;
  --paper:#f7f6f1;
  --card:#ffffff;
  --muted:#4b5560;
  --line:#d9d6cc;
  --gaji:#0b5d4b;
  --pencen:#5b2a86;
  --link:#0a5a8c;
  --strip:#e9e4d6;
  --mark:#fff1c7;
  --note-bg:#eef5f2;
  --warn-bg:#fbefe6;
  --warn-ink:#5a2a0c;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --wrap:68rem;
  --read:50rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #e0a100;outline-offset:2px}

.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

.topbar{background:var(--ink);color:var(--paper)}
.topbar-in{max-width:calc(var(--read) + 2rem);margin:0 auto;padding:.7rem 1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--paper);text-decoration:none;font-family:var(--serif);font-size:1.35rem;letter-spacing:.01em}
.brand b{color:#9fe0c8;font-weight:700}
.menu{display:flex;flex-wrap:wrap;gap:.25rem .9rem}
.menu a{color:var(--paper);text-decoration:none;font-size:.95rem;padding:.25rem 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{border-bottom-color:#9fe0c8}

main{max-width:calc(var(--read) + 2rem);margin:0 auto;padding:1.25rem 1rem 3rem}
h1,h2,h3{font-family:var(--serif);line-height:1.2;color:var(--ink)}
h1{font-size:clamp(1.8rem,4.5vw,2.6rem);margin:.6rem 0 .4rem}
h2{font-size:1.5rem;margin:2.2rem 0 .6rem;padding-top:.3rem;border-top:1px solid var(--line)}
h3{font-size:1.15rem;margin:1.4rem 0 .4rem}
p,ul,ol{margin:0 0 1rem}
li{margin-bottom:.35rem}
.lead{font-size:1.15rem}
.byline{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem}

.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;font-size:.9rem;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:.3rem}

.seterusnya{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin:1.2rem 0 1.6rem}
.kad{border-radius:14px;padding:1.1rem 1.25rem;color:#ffffff}
.kad p{margin:0}
.kad-gaji{background:var(--gaji);color:#ffffff}
.kad-pencen{background:var(--pencen);color:#ffffff}
.kad-label{font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:#ffffff}
.kad-tarikh{font-family:var(--serif);font-size:1.75rem;line-height:1.2;margin:.35rem 0 .3rem !important;color:#ffffff}
.kad-hari{display:block;font-size:1rem;font-family:var(--sans);color:#ffffff}
.kad-kira{font-size:.95rem;color:#ffffff}

.table-wrap{overflow-x:auto;margin:1rem 0 1.4rem;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.jadual{border-collapse:collapse;width:100%;min-width:34rem;font-size:.97rem;background:var(--card);color:var(--ink)}
.jadual caption{text-align:left;padding:.7rem .9rem;font-weight:600;color:var(--ink)}
.jadual th,.jadual td{padding:.55rem .9rem;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.jadual thead th{background:var(--strip);color:var(--ink);font-size:.88rem}
.jadual tbody th{font-weight:600}
.jadual tr.lepas{color:var(--muted)}
.jadual tr.seterusnya-baris{background:var(--mark);color:var(--ink)}
.jadual tr.seterusnya-baris th::after{content:" ← seterusnya";font-weight:400;font-size:.85rem}

.nota{background:var(--note-bg);color:var(--ink);border-left:4px solid var(--gaji);padding:.8rem 1rem;border-radius:0 8px 8px 0}
.nota p:last-child{margin-bottom:0}
.amaran{background:var(--warn-bg);color:var(--warn-ink);border-left:4px solid #b4541a;padding:.8rem 1rem;border-radius:0 8px 8px 0}
.amaran p,.amaran li,.amaran strong{color:var(--warn-ink)}
.amaran p:last-child{margin-bottom:0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1rem 0 1.5rem}
.petak{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.petak h3{margin-top:0}
.petak p:last-child{margin-bottom:0}

.sumber{font-size:.92rem;color:var(--muted)}
.sumber li{margin-bottom:.5rem}

.faq-item{border-bottom:1px solid var(--line);padding:.2rem 0}
.faq-item summary{cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{display:inline;font-size:1.08rem}
.faq-item summary::after{content:"+";float:right;font-size:1.3rem;line-height:1.3;color:var(--muted)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:.5rem 0 .9rem}

.foot{background:var(--ink);color:var(--paper);margin-top:2rem}
.foot-in{max-width:calc(var(--read) + 2rem);margin:0 auto;padding:1.6rem 1rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem}
.foot p{color:var(--paper);font-size:.93rem}
.foot-brand{font-family:var(--serif);font-size:1.2rem !important;margin-bottom:.3rem}
.foot nav{display:flex;flex-direction:column;gap:.4rem}
.foot a{color:var(--paper)}
.foot-note{max-width:calc(var(--read) + 2rem);margin:0 auto;padding:1rem 1rem 1.5rem;font-size:.85rem !important;opacity:.9}

@media print{.topbar,.foot{display:none}body{background:#fff}}