@import url('/assets/design-tokens.css?v=20260820-3');
@import url('/assets/global-ui.css?v=20260820-3');
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--ds-color-bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---------- Top bar ---------- */
.topbar{background:var(--plum-deep);color:#fff;font-size:var(--ds-text-xs);padding:.5rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--font-mono)}
.topbar .tag{color:var(--brass-bright);letter-spacing:.08em}
.topbar .dates{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:flex-end}
.topbar .dates span{white-space:nowrap;opacity:.92}

/* ---------- Site header + nav ---------- */
.sitehead{background:var(--ds-appbar-bg);color:var(--ink);position:relative;border-bottom:1px solid var(--line)}
.sitehead .pattern{display:none}
.sitehead-inner{max-width:1180px;margin:0 auto;padding:1rem 1.5rem 0;position:relative}
.brandrow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brandrow img.logo{width:84px;height:84px;aspect-ratio:1/1;display:block;object-fit:contain;object-position:center;background:#fff;border-radius:6px;padding:3px;overflow:visible;flex:0 0 84px}
.brandrow .nm h1,.brandrow .nm .brand-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,3.5vw,1.9rem);line-height:1.15}
.brandrow .nm h1,.brandrow .nm .brand-title{color:var(--plum);font-size:clamp(1.45rem,3.5vw,2rem)}
.brandrow .nm h1 em,.brandrow .nm .brand-title em{font-style:normal;color:var(--teal)}
.brandrow .nm p{font-size:var(--ds-text-xs);color:var(--muted);margin-top:.1rem}
nav.tabs{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem;padding:.7rem 0;border-top:1px solid var(--line);position:relative}
nav.tabs a{padding:.35rem 0;font-size:var(--ds-text-xs);font-weight:800;color:#4E5B57;border-radius:0;border-bottom:2px solid transparent;transition:.15s}
nav.tabs a:hover{background:transparent;color:var(--teal);border-color:var(--brass)}
nav.tabs a.active{background:transparent;color:var(--teal);font-weight:800;border-color:var(--brass)}
nav.tabs .nav-dropdown{position:relative;z-index:4}
nav.tabs .nav-dropdown summary{list-style:none;padding:.35rem 0;font-size:var(--ds-text-xs);font-weight:800;color:#4E5B57;border-radius:0;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
nav.tabs .nav-dropdown summary>a{padding:0;color:inherit;border-radius:0}
nav.tabs .nav-dropdown summary::-webkit-details-marker{display:none}
nav.tabs .nav-dropdown summary::after{content:'+';font-family:var(--font-mono);font-size:var(--ds-text-xs);margin-left:.45rem;color:var(--brass)}
nav.tabs .nav-dropdown:hover summary,nav.tabs .nav-dropdown[open] summary,nav.tabs .nav-dropdown.active summary{background:transparent;color:var(--teal);border-color:var(--brass)}
nav.tabs .subnav{display:grid;position:absolute;top:100%;left:-.7rem;min-width:195px;padding:.45rem;background:var(--ds-card-bg);border:1px solid var(--line);border-radius:7px;box-shadow:0 14px 28px rgba(20,32,31,.14);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
nav.tabs .nav-dropdown:hover .subnav,nav.tabs .nav-dropdown[open] .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .14s ease,transform .14s ease}
nav.tabs .subnav a{color:var(--ink);padding:.5rem .65rem;border-radius:5px;font-size:var(--ds-text-xs);white-space:nowrap}
nav.tabs .subnav a:hover{background:var(--plum-soft);color:var(--plum)}

/* ---------- Hero (laman utama) ---------- */
.hero-band{background:var(--plum);color:#fff;position:relative;overflow:hidden;padding:4.4rem 1.5rem 5.3rem}
.hero-band .pattern{position:absolute;inset:0;opacity:.06;pointer-events:none}
.hero-inner{max-width:1180px;margin:0 auto;position:relative}
.salam{font-family:var(--font-display);font-size:var(--ds-text-lg);color:var(--brass-bright);letter-spacing:.02em;margin-bottom:.6rem}
.hero-inner p.lede{margin-top:.6rem;max-width:56ch;color:#DFE9E5;font-size:var(--ds-text-base)}
.hero-kicker,.eyebrow{font-family:var(--font-mono);font-size:var(--ds-text-2xs);letter-spacing:.12em;color:var(--brass-bright);font-weight:700}
.hero-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.3rem}
.hero-actions a{border:1px solid rgba(255,255,255,.45);padding:.65rem .85rem;border-radius:5px;font-size:var(--ds-text-xs);font-weight:800;color:#fff;transition:.16s}
.hero-actions a:first-child{border-color:var(--brass-bright);background:var(--brass-bright);color:#17231F}
.hero-actions a:hover{border-color:var(--brass);background:rgba(255,255,255,.08);color:#fff}
.greet{display:inline-block;margin-top:1.5rem;font-family:var(--font-mono);font-size:var(--ds-text-2xs);color:#17231F;background:var(--brass-bright);padding:.45rem .8rem;border-radius:5px;letter-spacing:.04em}

/* ---------- Page header (sub pages) ---------- */
.pagehead{background:var(--plum);color:#fff;padding:3rem 1.5rem 3.4rem;position:relative;overflow:hidden}
.pagehead .pattern{position:absolute;inset:0;opacity:.08;pointer-events:none}
.pagehead-inner{max-width:1180px;margin:0 auto;position:relative}
.pagehead h1,.pagehead h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,4vw,2.3rem)}
.pagehead h1 em,.pagehead h2 em{font-style:normal;color:var(--brass-bright)}
.pagehead p{color:#E7D7E5;font-size:var(--ds-text-sm);margin-top:.3rem;max-width:60ch}
.ios-welcome h1,.ios-welcome h2{font:800 clamp(2.25rem,5vw,4.8rem)/.97 var(--font-body);margin:0;letter-spacing:0}
.contact-main{width:min(1080px,calc(100% - 2.5rem));margin:0 auto;padding:2.75rem 0 4.5rem}.contact-intro{max-width:650px;padding-bottom:1.75rem;border-bottom:1px solid var(--line)}.contact-intro h2{margin:.35rem 0 .55rem;font:400 clamp(1.5rem,3vw,2.2rem) var(--font-display);color:var(--plum)}.contact-intro p{max-width:54ch;color:var(--muted);font-size:var(--ds-text-sm);line-height:1.65}.contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:1.5rem;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}.contact-grid article{min-height:158px;padding:1.2rem;background:#fff}.contact-grid span{font:800 .63rem var(--font-mono);letter-spacing:.08em;color:var(--teal)}.contact-grid p{margin:.7rem 0 0;color:var(--ink);font-size:var(--ds-text-sm);line-height:1.65}.contact-grid a{color:var(--plum);font-weight:800;text-decoration:none}.contact-grid a:hover{text-decoration:underline}.contact-grid small{color:var(--muted);font-size:var(--ds-text-xs)}
/* ---- Fasa 3: baris berpemisah (ganti corak kotak berulang) ----
   Senarai satu-lajur: buang pemisah pada item terakhir supaya
   tiada garis menggantung di hujung.
   Grid berbilang-lajur (.staff-list, .takwim-cuti-list): pemisah
   DIKEKALKAN pada semua item — kerana item terakhir setiap lajur
   berakhir pada baris berbeza, membuangnya hanya pada :last-child
   akan menyebabkan baris akhir nampak tidak sekata. */
.aktiviti-list .aktiviti-item:last-child,
.takwim-term-list .takwim-term:last-child{border-bottom:0}

@media(max-width:760px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.contact-main{width:min(100% - 2rem,1080px);padding:1.75rem 0 3.5rem}.contact-grid{grid-template-columns:1fr}.contact-grid article{min-height:0}}

/* ---------- Waktu solat strip ---------- */
.solat{max-width:1080px;margin:-2.3rem auto 0;position:relative;padding:0 1.25rem}
.solat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 30px rgba(51,16,47,.10);padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.solat-label{font-family:var(--font-mono);font-size:var(--ds-text-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.solat-times{display:flex;gap:.5rem;flex-wrap:wrap;flex:1}
.solat-chip{display:flex;flex-direction:column;align-items:center;padding:.4rem .8rem;border-radius:10px;background:var(--plum-soft);min-width:74px}
.solat-chip .n{font-size:var(--ds-text-2xs);font-weight:600;color:var(--plum)}
.solat-chip .t{font-family:var(--font-mono);font-size:var(--ds-text-xs)}
.solat-chip.next{background:var(--plum);color:#fff}
.solat-chip.next .n{color:var(--brass-bright)}
.solat-note{font-size:var(--ds-text-2xs);color:var(--muted);flex-basis:100%}

/* ---------- Main sections ---------- */
main{max-width:1080px;margin:0 auto;padding:2.6rem 1.25rem 4rem}
.sec-head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.5rem}
.sec-head h2,.sec-head h3{font-family:var(--font-display);font-weight:400;font-size:var(--ds-text-xl);letter-spacing:.01em}
.sec-head .rule{flex:1;height:1px;background:var(--line)}
.sec-head .count{font-family:var(--font-mono);font-size:var(--ds-text-xs);color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.3rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(51,16,47,.10);border-color:var(--plum)}
.card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.card .icon{width:42px;height:42px;border-radius:11px;background:var(--plum-soft);display:grid;place-items:center;color:var(--plum);margin-bottom:.35rem}
.card h3{font-size:var(--ds-text-base);font-weight:700}
.card p{font-size:var(--ds-text-xs);color:var(--muted);flex:1}
.card .go{font-size:var(--ds-text-xs);font-weight:600;color:var(--plum);display:flex;align-items:center;gap:.35rem}
.card:hover .go{color:var(--brass)}
.badge{position:absolute;top:1rem;right:1rem;font-family:var(--font-mono);font-size:var(--ds-text-2xs);letter-spacing:.06em;padding:.18rem .5rem;border-radius:999px;background:var(--brass-soft);color:#7A6212}
.badge.live{background:var(--plum-soft);color:var(--plum)}

/* ---------- Pengumuman ---------- */
.pengumuman{margin-top:3.5rem}
.notis{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.notis-item{display:flex;gap:1.1rem;align-items:flex-start;padding:1.1rem 1.3rem}
.notis-item + .notis-item{border-top:1px solid var(--line)}
.notis-date{font-family:var(--font-mono);font-size:var(--ds-text-2xs);color:var(--plum);background:var(--plum-soft);border-radius:8px;padding:.35rem .55rem;text-align:center;width:calc(12ch + 1.1rem);line-height:1.35;flex:0 0 auto;white-space:nowrap}
.notis-item h4{font-size:var(--ds-text-sm);font-weight:700}
.notis-item p{font-size:var(--ds-text-xs);line-height:1.6;color:var(--muted);white-space:pre-line}

/* ---------- Sub page content ---------- */
.content-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;margin-bottom:1.2rem}
.content-card h3{font-family:var(--font-display);font-weight:400;font-size:var(--ds-text-lg);margin-bottom:.5rem;color:var(--plum)}
.content-card p{font-size:var(--ds-text-sm);color:#443A47}
.content-card ul{margin:.6rem 0 0 1.2rem;font-size:var(--ds-text-sm);color:#443A47}
.content-card ul li{margin-bottom:.3rem}
.placeholder{border:1px dashed var(--line);border-radius:10px;padding:1rem;text-align:center;color:var(--muted);font-size:var(--ds-text-xs);margin-top:.8rem;background:var(--paper)}

/* ---------- Asrama: jadual harian ---------- */
.asrama-schedule{margin-top:2rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:0 10px 24px rgba(20,32,31,.05)}
.asrama-rules{margin-top:2rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:0 10px 24px rgba(20,32,31,.05)}
.asrama-rules-head{margin-bottom:1.1rem}.asrama-rules h3{font:400 1.45rem var(--font-display);color:var(--plum);margin-top:.15rem}.asrama-rules-head p{font-size:var(--ds-text-xs);color:var(--muted);max-width:70ch;margin:.3rem 0 0}
.rules-accordion{display:grid;gap:.65rem}.rule-group{border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden}.rule-group summary{padding:.85rem 1rem;cursor:pointer;color:var(--plum);font:700 .86rem var(--font-sans);list-style-position:inside}.rule-group summary::marker{color:var(--brass)}.rule-group[open] summary{border-bottom:1px solid var(--line);background:#fff}.rule-group-body{padding:1rem 1.05rem}.rule-group-body ul{margin:0;padding-left:1.2rem}.rule-group-body li{font-size:var(--ds-text-xs);line-height:1.6;margin:.3rem 0;color:var(--ink)}.rule-grid,.discipline-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.rule-grid h4,.discipline-grid h4{margin:0 0 .45rem;color:var(--plum);font-size:var(--ds-text-sm)}.rules-time-note{display:grid;gap:.25rem;margin-top:.7rem;padding:.7rem;border-radius:7px;background:var(--plum-soft);font-size:var(--ds-text-2xs);color:var(--ink)}.rules-time-note strong{color:var(--plum)}.rules-columns{columns:2;column-gap:1.75rem}.rules-columns li{break-inside:avoid}
.asrama-schedule-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.asrama-schedule h3{font:400 1.45rem var(--font-display);color:var(--plum);margin-top:.15rem}
.asrama-schedule-head p{font-size:var(--ds-text-xs);color:var(--muted);margin-top:.2rem}
.schedule-note{font:600 .64rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#695116;background:var(--brass-soft);padding:.35rem .5rem;border-radius:4px;white-space:nowrap}
.schedule-tabs{display:flex;gap:.45rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:.7rem;margin-bottom:1rem}
.schedule-tab{appearance:none;border:1px solid var(--line);background:var(--paper);color:var(--plum);font:800 .76rem var(--font-body);padding:.48rem .75rem;border-radius:5px;cursor:pointer}
.schedule-tab:hover{border-color:var(--brass);background:var(--brass-soft)}
.schedule-tab.active{background:var(--plum);border-color:var(--plum);color:#fff}
.schedule-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:7px}
.schedule-table{width:100%;border-collapse:collapse;min-width:700px;font-size:var(--ds-text-xs);line-height:1.45}
.schedule-table th{background:var(--plum);color:#fff;text-align:left;font-size:var(--ds-text-2xs);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:.65rem .8rem}
.schedule-table th:first-child{width:25%}.schedule-table th:last-child{width:22%}
.schedule-table td{padding:.62rem .8rem;vertical-align:top;border-top:1px solid var(--line);color:var(--ink)}
.schedule-table td:first-child{font-family:var(--font-mono);font-size:var(--ds-text-2xs);font-weight:600;color:var(--plum);white-space:nowrap}
.schedule-table td:last-child{font-size:var(--ds-text-xs);color:var(--muted)}
.schedule-table small{display:block;font-size:var(--ds-text-2xs);color:var(--muted);margin-top:.22rem}
.schedule-group td{background:var(--plum-soft);text-align:center;color:var(--ink)}
.schedule-group strong{display:block;font:400 1.12rem var(--font-display);color:var(--plum);margin-bottom:.4rem}
.schedule-group span{display:block;font-size:var(--ds-text-xs);margin:.18rem 0}.schedule-group small{font-weight:700;color:var(--ink);margin-top:.45rem}
.schedule-info td{background:#FCF7E9;font-size:var(--ds-text-xs)!important;color:var(--ink)!important}.schedule-info td:first-child{color:var(--plum)!important}
.schedule-footnote{font-size:var(--ds-text-xs);line-height:1.55;color:#59471D;border-left:3px solid var(--brass);background:#FCF7E9;padding:.65rem .8rem;margin-top:.9rem}

/* ---------- Footer ---------- */
footer{background:var(--plum-deep);color:#D6C4D4;padding:2.2rem 1.25rem;font-size:var(--ds-text-xs)}
.foot-inner{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-inner .b{font-family:var(--font-display);color:#fff;font-size:var(--ds-text-base)}
.foot-inner .brass{color:var(--brass)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}
@media (max-width:560px){
  .topbar{flex-direction:column;align-items:flex-start;gap:.15rem}
  nav.tabs a{padding:.6rem .8rem;font-size:var(--ds-text-xs)}
  nav.tabs .nav-dropdown summary{padding:.6rem .8rem;font-size:var(--ds-text-xs)}
  nav.tabs .subnav{position:static;min-width:0;box-shadow:none;border-radius:0 0 8px 8px}
  .asrama-schedule,.asrama-rules{padding:1rem}.asrama-schedule-head{display:block}.rule-grid,.discipline-grid{grid-template-columns:1fr}.rules-columns{columns:1}.schedule-note{display:inline-block;margin-top:.55rem}.schedule-table{min-width:0;table-layout:fixed;font-size:var(--ds-text-2xs)}.schedule-table th:first-child{width:31%}.schedule-table th:last-child{width:20%}.schedule-table th,.schedule-table td{padding:.52rem .45rem;overflow-wrap:anywhere}.schedule-table td:first-child{font-size:var(--ds-text-2xs);white-space:normal}.schedule-group span{font-size:var(--ds-text-2xs)}.schedule-group strong{font-size:var(--ds-text-base)}
}

/* ---- Profil Sekolah: profile dl, org chart, staff listings, lagu ---- */
.profil-dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.1rem;font-size:var(--ds-text-sm);margin-top:.2rem}
.profil-dl dt{color:var(--muted);font-weight:600;white-space:nowrap}
.profil-dl dd{color:var(--ink);margin:0}
.content-card ol,.content-card > ul{margin:.6rem 0 0 1.2rem;font-size:var(--ds-text-sm);color:#443A47}
.content-card ol li,.content-card > ul li{margin-bottom:.4rem}
.profile-identity{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);gap:1.25rem;margin-bottom:1.25rem;padding:1.35rem;background:var(--plum);border:1px solid var(--plum);border-radius:var(--radius);color:#fff}
.profile-identity-copy{display:flex;flex-direction:column;align-items:flex-start}
.profile-identity .eyebrow{color:var(--brass-bright)}
.profile-identity h2{margin:.2rem 0 .5rem;font:400 clamp(1.35rem,3vw,2rem)/1.15 var(--font-display);color:#fff}
.profile-identity p{margin:0;color:#E7D7E5;font-size:var(--ds-text-sm);line-height:1.6}
.profile-identity-link{margin-top:auto;padding-top:1.2rem;color:var(--brass-bright);font-size:var(--ds-text-xs);font-weight:800;text-decoration:none}
.profile-identity-link:hover,.profile-identity-link:focus-visible{text-decoration:underline}
.profile-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:0}
.profile-facts div{padding:.8rem;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:7px}
.profile-facts dt{font:700 .62rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#E7D7E5}
.profile-facts dd{margin:.3rem 0 0;color:#fff;font-size:var(--ds-text-xs);line-height:1.45}
.profile-content-heading{margin:1.6rem 0 .9rem}.profile-content-heading h2{margin:.15rem 0 0;font:400 1.45rem var(--font-display);color:var(--plum)}

.lagu-card{background:var(--plum);color:#fff;border-radius:var(--radius);padding:2.2rem 1.8rem;text-align:center;margin-bottom:1.2rem;position:relative;overflow:hidden}
.lagu-card h3{font-family:var(--font-display);color:var(--brass-bright);font-size:var(--ds-text-lg);margin-bottom:1.5rem;letter-spacing:.02em;position:relative}
.lagu-card .bait{margin-bottom:1.15rem;font-size:var(--ds-text-sm);line-height:1.9;color:#F0E6EF;position:relative}
.lagu-card .arab{font-size:var(--ds-text-lg);color:var(--brass-bright);margin:1.4rem 0;direction:rtl;line-height:2.1;position:relative}
.lagu-card .korus{font-weight:700;color:#fff}

.staff-section-title{font-family:var(--font-display);font-weight:400;font-size:var(--ds-text-lg);color:var(--plum);margin:2.2rem 0 1rem;padding-top:.4rem;border-top:1px solid var(--line)}
.staff-section-title:first-of-type{border-top:none;margin-top:0}

.org-svg-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem .6rem;overflow-x:auto}
.org-svg-wrap svg{display:block;margin:0 auto;min-width:720px;max-width:1160px;width:100%}
.orgbox{width:100%;height:100%;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5px 7px;box-sizing:border-box;font-family:var(--font-body)}
.orgbox .role{font-family:var(--font-mono);font-size:9px;letter-spacing:.02em;text-transform:uppercase;line-height:1.25;margin-bottom:3px;color:var(--plum)}
.orgbox .nm{font-size:11px;font-weight:700;color:var(--ink);line-height:1.25}
.orgbox .gr{font-size:8.5px;color:var(--muted);margin-top:2px;font-family:var(--font-mono)}
.orgbox.top{background:var(--plum);box-shadow:0 4px 14px rgba(51,16,47,.25)}
.orgbox.top .role{color:var(--brass-bright)}
.orgbox.top .nm{color:#fff;font-size:13px}
.orgbox.top .gr{color:#E7D7E5}
.orgbox.tier2{background:#fff;border:1.5px solid var(--plum)}
.orgbox.tier3{background:var(--plum-soft);border:1.5px solid var(--plum)}

.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.staff-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.staff-card .role{font-family:var(--font-mono);font-size:var(--ds-text-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--brass-soft);background:var(--plum);display:inline-block;padding:.18rem .55rem;border-radius:999px;margin-bottom:.5rem}
.staff-card .nm{font-weight:700;font-size:var(--ds-text-sm);color:var(--ink)}
.staff-card .gr{font-size:var(--ds-text-xs);color:var(--muted);margin-top:.2rem;font-family:var(--font-mono)}

.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:0 1.6rem}
.staff-list .item{padding:.6rem 0;border-bottom:1px solid var(--line);font-size:var(--ds-text-xs);display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.staff-list .item .n{color:var(--ink);font-weight:600}
.staff-list .item .g{color:var(--muted);font-size:var(--ds-text-2xs);font-family:var(--font-mono);white-space:nowrap}
.staff-list.akp .item{flex-direction:column;align-items:flex-start;gap:.15rem}
.staff-list.akp .item .j{font-family:var(--font-mono);font-size:var(--ds-text-2xs);letter-spacing:.03em;text-transform:uppercase;color:var(--plum)}

@media (max-width:560px){
  .profil-dl{grid-template-columns:1fr}
  .profil-dl dt{margin-top:.4rem}
}

/* ---- Nav auth controls ---- */
nav.tabs a#nav-panel-admin{color:var(--brass);font-weight:800}
nav.tabs a#nav-login{opacity:.82}

/* ---- Panitia (susun ikut bidang) ---- */
.panitia-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:.8rem}
.panitia-bidang{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.panitia-bidang h4{font-family:var(--font-display);font-weight:400;color:var(--plum);font-size:var(--ds-text-base);margin-bottom:.3rem}
.panitia-bidang .gk{font-size:var(--ds-text-xs);color:var(--muted);margin-bottom:.5rem;font-style:italic}
.panitia-bidang .kp-list{list-style:none;font-size:var(--ds-text-xs)}
.panitia-bidang .kp-list li{padding:.3rem 0;border-top:1px dashed var(--line)}
.panitia-bidang .kp-list li:first-child{border-top:none}
.panitia-bidang .kp-list b{color:var(--ink)}

/* ---- Aktiviti terdekat (widget laman utama) + senarai aktiviti Takwim ---- */
.aktiviti-terdekat{margin:2.4rem 0}
.aktiviti-list{display:grid;gap:0}
.aktiviti-item{padding:.85rem 0;border-bottom:1px solid var(--line);display:flex;gap:1rem;align-items:center}
.aktiviti-item .tgl{font-family:var(--font-mono);font-size:var(--ds-text-2xs);color:var(--plum);background:var(--plum-soft);border-radius:8px;padding:.35rem .55rem;text-align:center;width:calc(27ch + 1.1rem);white-space:nowrap;font-weight:700;line-height:1.3;flex:0 0 auto}
.aktiviti-item .tj{font-size:var(--ds-text-sm);font-weight:600;color:var(--ink)}

/* ---- Takwim: kalendar akademik & cuti ---- */
.takwim-term-list{display:grid;gap:0}
.takwim-term{padding:.9rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.takwim-term .tj{font-weight:700;font-size:var(--ds-text-sm);color:var(--ink);flex:1 1 auto;min-width:200px}
.takwim-term .tr{font-family:var(--font-mono);font-size:var(--ds-text-xs);color:var(--plum);white-space:nowrap}
.takwim-term .kt{font-size:var(--ds-text-2xs);color:var(--muted);flex-basis:100%}
.takwim-cuti-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 1.6rem}
.takwim-cuti-item{padding:.6rem 0;border-bottom:1px solid var(--line);font-size:var(--ds-text-xs);display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}
.takwim-bulan{margin:1.6rem 0 .7rem;font-family:var(--font-display);color:var(--plum);font-size:var(--ds-text-base);padding-top:.6rem;border-top:1px solid var(--line)}
.takwim-bulan:first-of-type{border-top:none;margin-top:0}

/* ---- Pembahagi seksyen Profil (bergabung dalam laman utama) ---- */
.sec-divider{margin:3.2rem 0 1.6rem}
.sec-divider h2{font-family:var(--font-display);font-weight:400;font-size:var(--ds-text-xl);color:var(--plum);border-top:1px solid var(--line);padding-top:1.8rem}

/* ---------- Laman utama: ringkasan cepat ---------- */
.dashboard-strip{display:grid;grid-template-columns:.85fr 1.55fr 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:3.2rem;box-shadow:0 10px 30px rgba(51,16,47,.06);overflow:hidden}
.dashboard-item{padding:1.1rem 1.25rem;min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:.15rem}
.dashboard-item + .dashboard-item{border-left:1px solid var(--line)}
.dashboard-label{font-family:var(--font-mono);font-size:var(--ds-text-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.dashboard-item strong{font-family:var(--font-display);font-size:var(--ds-text-base);font-weight:400;color:var(--plum);line-height:1.35}
.dashboard-item > span:last-child{font-size:var(--ds-text-xs);color:var(--muted)}
.dashboard-event{background:linear-gradient(120deg,#fff,#FBF6E7)}
.dashboard-event a{font-size:var(--ds-text-2xs);font-weight:700;color:var(--teal);margin-top:.2rem}
.dashboard-links div{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}
.dashboard-links a{font-size:var(--ds-text-2xs);font-weight:700;color:var(--plum);background:var(--plum-soft);padding:.25rem .45rem;border-radius:5px}
.home-widgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:3.2rem}.home-widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;min-width:0}.home-widget h2{font:400 1.25rem var(--font-display);color:var(--plum);margin:.35rem 0 .8rem}.home-widget h3{font:700 .78rem var(--font-body);margin:1rem 0 .45rem;color:var(--muted)}.home-widget.home-search{grid-column:1/-1}.home-search #search-results{max-height:260px;overflow:auto}.compact-form{padding:0;border:0;max-width:none}.compact-form textarea{min-height:72px}
.widget-links{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.widget-links a{font-size:var(--ds-text-2xs);font-weight:800;color:var(--plum);background:var(--plum-soft);padding:.35rem .5rem;border-radius:5px}

/* ---------- Tab kandungan sekolah ---------- */
.school-info{margin-top:3.8rem}
.subtabs{display:flex;align-items:center;flex-wrap:nowrap;gap:.4rem;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:1.3rem;padding-bottom:.55rem}
.subtab{appearance:none;flex:0 0 auto;border:1px solid transparent;background:transparent;color:var(--muted);font:700 .82rem var(--font-body);padding:.55rem .85rem;border-radius:7px;cursor:pointer;white-space:nowrap}
.subtab:hover{background:var(--plum-soft);color:var(--plum)}
.subtab.active{background:var(--plum);color:#fff;box-shadow:0 4px 10px rgba(51,16,47,.16)}
.subtab-panel[hidden]{display:none}
.subtab-panel .staff-section-title:first-child{margin-top:0}
.info-contact-intro{max-width:650px;padding:0 0 1.25rem;border-bottom:1px solid var(--line)}.info-contact-intro h2{margin:.35rem 0 .55rem;font:400 clamp(1.35rem,3vw,1.9rem) var(--font-display);color:var(--plum)}.info-contact-intro p{margin:0;color:var(--muted);font-size:var(--ds-text-sm);line-height:1.65}.info-contact-intro+.contact-grid{margin-top:1.3rem}

/* ---------- Kokurikulum: tiga lajur ---------- */
.koku-intro{margin-bottom:1.25rem;max-width:70ch}
.koku-intro p{font-size:var(--ds-text-sm);color:var(--muted)}
.koku-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.koku-column{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}
.koku-column:nth-child(1) .koku-column-head{background:var(--plum)}
.koku-column:nth-child(2) .koku-column-head{background:var(--teal)}
.koku-column:nth-child(3) .koku-column-head{background:#7A6212}
.koku-column-head{padding:1rem 1.1rem;color:#fff;display:flex;align-items:center;gap:.65rem}
.koku-column-head span{font-family:var(--font-mono);font-size:var(--ds-text-2xs);color:var(--brass-soft)}
.koku-column-head h3{font:400 1.08rem var(--font-display)}
.koku-unit-card{padding:1rem 1.1rem}
.koku-unit-card + .koku-unit-card{border-top:1px solid var(--line)}
.koku-unit-card .gk{font-size:var(--ds-text-xs);color:var(--muted);line-height:1.45;margin-bottom:.65rem}
.koku-unit-card .gk strong{color:var(--ink);font-style:normal}
.koku-unit-card .kp-list{list-style:none;font-size:var(--ds-text-xs)}
.koku-unit-card .kp-list li{display:grid;gap:.1rem;padding:.42rem 0;border-top:1px dashed var(--line)}
.koku-unit-card .kp-list li:first-child{border-top:0}
.koku-unit-card .kp-list b{color:var(--plum)}
.koku-unit-card .kp-list span{color:var(--muted)}
.achievement-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.achievement-card{display:grid;grid-template-rows:auto 1fr;min-width:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.achievement-card:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 12px 24px rgba(20,32,31,.1)}
.achievement-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.achievement-card-media{aspect-ratio:16/9;background:var(--plum);overflow:hidden;display:grid;place-items:center;color:var(--brass-bright);font:700 .64rem var(--font-mono);letter-spacing:.1em}
.achievement-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.achievement-card-media.is-empty{background:linear-gradient(135deg,var(--plum),var(--teal))}
.achievement-card-body{display:flex;flex-direction:column;align-items:flex-start;padding:1rem 1.05rem 1.05rem}
.achievement-card-label{font:700 .62rem var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--teal)}
.achievement-card h3{margin:.4rem 0 .45rem;font-size:var(--ds-text-sm);line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.achievement-card p{margin:0;color:var(--muted);font-size:var(--ds-text-xs);line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.achievement-card-date{margin-top:.75rem;color:var(--muted);font:600 .65rem var(--font-mono)}
.achievement-card-link{margin-top:auto;padding-top:.85rem;color:var(--plum);font-size:var(--ds-text-xs);font-weight:800}
.achievement-card:hover .achievement-card-link{color:var(--teal)}
.achievement-empty{margin:0;color:var(--muted);font-size:var(--ds-text-xs)}
.achievement-list-featured{grid-template-columns:1fr}
.achievement-list-featured .achievement-card{grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr);grid-template-rows:1fr}
.achievement-list-featured .achievement-card-media{aspect-ratio:auto;min-height:228px}

/* ---------- Program sekolah dan artikel ---------- */
.program-main{max-width:1120px;padding-top:2.55rem}
.program-intro{max-width:700px;margin-bottom:1.45rem}.program-intro h2{margin:.25rem 0 .4rem;font:400 clamp(1.6rem,3vw,2.25rem) var(--font-display);color:var(--plum)}.program-intro p{color:var(--muted);font-size:var(--ds-text-sm);line-height:1.65}
.program-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.program-card-grid .achievement-card{height:100%}
.achievement-article-main{max-width:920px;padding-top:2rem}
.achievement-back{max-width:920px;margin:0 auto 1rem}.achievement-back a{color:var(--plum);font-size:var(--ds-text-xs);font-weight:800;text-decoration:none}.achievement-back a:hover{color:var(--teal);text-decoration:underline}
.achievement-article{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--ds-shadow-sm)}
.achievement-article-header{padding:2rem 2rem 1.5rem}.achievement-article-kicker{font:700 .65rem var(--font-mono);letter-spacing:.1em;color:var(--teal)}.achievement-article h1{max-width:18ch;margin:.55rem 0 .7rem;font:400 clamp(2rem,5vw,3.25rem)/1.06 var(--font-display);color:var(--plum)}.achievement-article-dek{max-width:62ch;color:var(--muted);font-size:var(--ds-text-sm);line-height:1.65}.achievement-article-date{display:block;margin-top:1rem;color:var(--muted);font:600 .68rem var(--font-mono)}
.achievement-article-figure{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.achievement-article-figure img{display:block;width:100%;height:auto}.achievement-article-figure figcaption{padding:.7rem 2rem;color:var(--muted);font-size:var(--ds-text-2xs)}
.achievement-article-prose{max-width:700px;padding:1.8rem 2rem 2.4rem}.achievement-article-prose p,.achievement-article-prose li{color:#443A47;font-size:var(--ds-text-sm);line-height:1.8}.achievement-article-prose p{margin:0 0 1rem}.achievement-article-prose h2{margin:1.8rem 0 .65rem;font:400 1.45rem var(--font-display);color:var(--plum)}.achievement-article-prose ol,.achievement-article-prose ul{margin:0 0 1.2rem;padding-left:1.35rem}.achievement-article-prose li{padding-left:.25rem;margin:.3rem 0}.achievement-article-prose strong{color:var(--ink)}
.achievement-gallery{padding:0 2rem 2.4rem}.achievement-gallery h2{margin:0 0 1rem;font:400 1.45rem var(--font-display);color:var(--plum)}.achievement-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.achievement-gallery figure{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}.achievement-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.achievement-gallery figcaption{padding:.65rem .75rem;color:var(--muted);font-size:var(--ds-text-2xs);line-height:1.45}

/* ---------- Takwim: ringkas + kalendar ---------- */
.takwim-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start;margin-bottom:1.2rem}
.takwim-overview-grid .content-card{height:100%;margin:0;padding:1.25rem}
.takwim-overview-grid .content-card h3{font-size:var(--ds-text-base)}
.takwim-term{padding:.7rem .75rem;border-radius:7px;display:block}
.takwim-term .tj{display:block;min-width:0;font-size:var(--ds-text-xs)}
.takwim-term .tr{display:block;margin-top:.25rem;font-size:var(--ds-text-2xs);white-space:normal}
.takwim-term .kt{display:none}
.takwim-cuti-list{display:block}
.takwim-cuti-item{padding:.55rem 0;border:0;border-top:1px dashed var(--line);border-radius:0;font-size:var(--ds-text-xs);display:block}
.takwim-cuti-item:first-child{border-top:0}
.takwim-cuti-item span:last-child{display:block;font-size:var(--ds-text-2xs);margin-top:.15rem}
.takwim-summary-card{background:linear-gradient(145deg,var(--plum),var(--plum-mid));border-color:var(--plum)}
.takwim-summary-card h3,.takwim-summary-card p{color:#fff}
.takwim-summary-card p{font-size:var(--ds-text-xs);color:#E7D7E5;margin:.65rem 0 1rem}
.calendar-jump{display:inline-block;color:var(--brass);font-size:var(--ds-text-xs);font-weight:800}
.activity-calendar-card{padding:1.4rem}
.calendar-heading{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;margin-bottom:1.2rem}
.calendar-heading h3{margin:0}
.calendar-heading p{font-size:var(--ds-text-xs);color:var(--muted);max-width:31ch;text-align:right}
.activity-calendar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.calendar-month{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.65rem}
.calendar-month h4{font:400 .92rem var(--font-display);color:var(--plum);margin:0 0 .45rem}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.calendar-weekdays span{font:600 .52rem var(--font-mono);color:var(--muted);padding-bottom:.25rem}
.calendar-day{position:relative;aspect-ratio:1;display:grid;place-items:center;font-size:var(--ds-text-2xs);color:var(--ink);border-radius:4px}
.calendar-day b{font-weight:500}
.calendar-day.has-event{background:var(--plum-soft);color:var(--plum);cursor:help}
.calendar-day.has-event i{position:absolute;right:1px;top:1px;width:4px;height:4px;background:var(--teal);border-radius:50%;font-size:0}
.calendar-day.today{outline:1px solid var(--brass);font-weight:800}
.calendar-legend{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:var(--ds-text-2xs);color:var(--muted)}
.calendar-legend span{display:inline-block;width:9px;height:9px;background:var(--plum-soft);border:1px solid var(--plum);border-radius:2px;vertical-align:middle}
.takwim-info-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
.takwim-month-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:1rem;align-items:start}
.activity-calendar-grid-single{display:block}
.calendar-month-current{width:100%;padding:1rem}
.calendar-month-current .calendar-weekdays span{font-size:var(--ds-text-2xs);padding-bottom:.45rem}
.calendar-month-current .calendar-day{font-size:var(--ds-text-xs);border-radius:6px}
.calendar-month-current .calendar-day.has-event i{width:5px;height:5px;right:4px;top:4px}
.takwim-month-controls{display:flex;gap:.45rem;flex-wrap:wrap}
.takwim-month-controls button{border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--plum);font:700 .72rem var(--font-sans);padding:.55rem .7rem;cursor:pointer}
.takwim-month-controls button:hover,.takwim-month-controls button:focus-visible{background:var(--plum);border-color:var(--plum);color:#fff}
.takwim-month-summary{margin:0;padding:1.25rem}
.takwim-month-summary h3{font-size:var(--ds-text-base);margin:.35rem 0 1rem}
.month-activity-list{display:grid;gap:.6rem}
.month-activity{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.65rem;padding:.7rem 0;border-top:1px dashed var(--line)}
.month-activity:first-child{border-top:0;padding-top:0}
.month-activity-date{font:700 .62rem var(--font-mono);color:var(--plum)}
.month-activity h4{margin:0;font-size:var(--ds-text-xs);line-height:1.4}
.month-activity p{margin:.2rem 0 0;font-size:var(--ds-text-2xs);line-height:1.55;color:var(--muted)}
.month-activity-empty{margin:0;color:var(--muted);font-size:var(--ds-text-xs)}
.takwim-upcoming-panel{margin:0 0 1.2rem;padding:1.25rem;background:#FCF7E9;border-color:#E6CE8A}
.takwim-upcoming-panel .calendar-heading{margin-bottom:.75rem}
.takwim-upcoming-panel .calendar-heading h3{color:var(--ink);font-size:var(--ds-text-lg)}
.takwim-upcoming-note{color:var(--muted);font-size:var(--ds-text-2xs);text-align:right}
.takwim-upcoming-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem}
.takwim-upcoming-item{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.7rem;align-items:start;padding:.7rem 0;border-top:1px dashed #DCCB9D}
.takwim-upcoming-item:nth-child(-n+2){border-top:0}
.takwim-upcoming-date{font:700 .62rem/1.35 var(--font-mono);color:var(--plum);background:#fff;border:1px solid #E6CE8A;border-radius:5px;padding:.35rem .4rem}
.takwim-upcoming-item h4{margin:0;color:var(--ink);font-size:var(--ds-text-xs);line-height:1.4}
.takwim-upcoming-item p{margin:.2rem 0 0;color:var(--muted);font-size:var(--ds-text-2xs);line-height:1.45}
.takwim-upcoming-live{display:inline-block;margin-top:.35rem;color:var(--teal);font:800 .58rem var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.takwim-upcoming-empty{margin:0;color:var(--muted);font-size:var(--ds-text-xs)}

@media (max-width:820px){
  .dashboard-strip,.koku-columns,.takwim-overview-grid,.home-widgets{grid-template-columns:1fr}
  .program-card-grid{grid-template-columns:1fr}
  .achievement-list-featured .achievement-card{grid-template-columns:1fr;grid-template-rows:auto 1fr}.achievement-list-featured .achievement-card-media{aspect-ratio:16/9;min-height:0}
  .takwim-month-layout{grid-template-columns:1fr}
  .dashboard-item + .dashboard-item{border-left:0;border-top:1px solid var(--line)}
  .activity-calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hero-band{padding-bottom:3.4rem}
  .dashboard-strip{margin-bottom:2.4rem}
  .activity-calendar-card{padding:1rem}
  .calendar-heading{display:block}
  .calendar-heading p{text-align:left;margin-top:.3rem}
  .activity-calendar-grid{grid-template-columns:1fr}
  .takwim-month-controls{margin-top:.85rem}
  .achievement-article-main{padding-top:1.4rem}.achievement-article-header{padding:1.45rem 1.15rem 1.2rem}.achievement-article h1{font-size:var(--ds-text-2xl)}.achievement-article-figure figcaption,.achievement-article-prose,.achievement-gallery{padding-left:1.15rem;padding-right:1.15rem}.achievement-article-prose p,.achievement-article-prose li{font-size:var(--ds-text-sm)}.achievement-gallery-grid{grid-template-columns:1fr}
  .calendar-month-current{padding:.7rem}
  .month-activity{grid-template-columns:4.5rem minmax(0,1fr)}
  .profile-identity{grid-template-columns:1fr;padding:1.1rem}
  .profile-facts{grid-template-columns:1fr}
  .profile-identity-link{margin-top:.85rem;padding-top:0}
  .takwim-upcoming-list{grid-template-columns:1fr}
  .takwim-upcoming-item:nth-child(2){border-top:1px dashed #DCCB9D}
  .takwim-upcoming-note{text-align:left;display:block;margin-top:.35rem}
}

/* ---------- Laman utama: susun atur aplikasi iOS ---------- */
body.ios-home{background:var(--ds-color-bg)}
.ios-welcome{background:#12362f url('/assets/hero-sekolah.jpg') center/cover no-repeat;color:#fff;padding:3.5rem 1.5rem 3.8rem}
.ios-welcome-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(210px,.75fr);gap:2rem;align-items:end}
.ios-overline{display:block;font:700 .64rem var(--font-mono);letter-spacing:.11em;color:var(--brass-bright);margin-bottom:.45rem}
.ios-welcome h1,.ios-welcome h2{font:800 clamp(1.8rem,4vw,2.8rem)/1.1 var(--font-body);letter-spacing:0;margin:0}
.ios-welcome p{max-width:55ch;color:#D6E4DF;font-size:var(--ds-text-sm);margin:.85rem 0 0}
.ios-hero-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem}
.ios-hero-actions a{border:1px solid rgba(255,255,255,.38);color:#fff;padding:.55rem .8rem;border-radius:6px;font-weight:800;font-size:var(--ds-text-xs)}
.ios-hero-actions a:first-child{background:var(--brass-bright);border-color:var(--brass-bright);color:var(--ink)}
.ios-greeting{border-left:1px solid rgba(255,255,255,.22);padding:.15rem 0 .15rem 1.25rem;display:grid;gap:.35rem;text-shadow:0 1px 8px rgba(0,0,0,.52)}
.ios-greeting span,.ios-greeting small{font:600 .66rem var(--font-mono);letter-spacing:.07em;color:#D6E4DF}
.ios-greeting strong{font:800 1.05rem var(--font-body);color:#fff}
.ios-home-main{max-width:1080px;padding:1.2rem 1.25rem 4rem}
.ios-summary{display:grid;grid-template-columns:.85fr 1.45fr 1.1fr;gap:.8rem;margin-bottom:1.1rem}
.ios-summary-card,.ios-panel,.ios-search-panel,.ios-prayer{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 20px rgba(20,32,31,.045)}
.ios-summary-card{padding:1rem 1.05rem;min-height:132px;display:flex;flex-direction:column;align-items:flex-start}
.ios-card-label{font:700 .62rem var(--font-mono);letter-spacing:.08em;color:var(--muted)}
.ios-date-card strong{font:800 1.15rem var(--font-body);color:var(--plum);margin-top:.62rem}.ios-date-card>span:last-child{font-size:var(--ds-text-xs);color:var(--muted);margin-top:.15rem}
.ios-event-card{background:#F8FBFA}.ios-event-card strong{font:700 .9rem/1.45 var(--font-body);color:var(--ink);margin:.58rem 0 auto}.ios-event-card a,.ios-section-heading>a{font-size:var(--ds-text-xs);font-weight:800;color:var(--teal)}
.ios-link-card{background:#FFFDF7}.ios-shortcuts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.65rem}.ios-shortcuts a{background:#E6EFEC;color:var(--plum);font-size:var(--ds-text-2xs);font-weight:800;padding:.32rem .47rem;border-radius:5px}
.ios-prayer{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.85fr);padding:0;margin-bottom:1.1rem;overflow:hidden}.ios-prayer-main{min-width:0;padding:1.05rem 1.1rem}.ios-prayer .solat-card{box-shadow:none;border:0;padding:.5rem 0 0;background:transparent}.ios-prayer .solat-label{display:none}.ios-prayer .solat-note{margin-top:.1rem}.ios-hadith{display:flex;flex-direction:column;align-items:flex-start;background:#F8F5EA;border-left:1px solid var(--line);padding:1.05rem 1.1rem}.ios-hadith h2{font:800 1.02rem var(--font-body);letter-spacing:0;color:var(--ink);margin:.35rem 0 .6rem}.ios-hadith blockquote{margin:0;font:400 .9rem/1.58 var(--font-quote);color:var(--plum)}.ios-hadith cite{margin-top:auto;padding-top:.7rem;font:600 .64rem var(--font-mono);letter-spacing:.04em;color:var(--muted);font-style:normal}
.ios-section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;margin-bottom:.9rem}.ios-section-heading .ios-overline{margin-bottom:.2rem}.ios-section-heading h2,.ios-search-panel h2{font:800 1.05rem var(--font-body);letter-spacing:0;color:var(--ink);margin:0}.ios-section-meta{font:600 .66rem var(--font-mono);letter-spacing:.05em;color:var(--muted);padding-top:.25rem}
.ios-primary-grid,.ios-utility-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.ios-panel{padding:1.1rem;min-width:0}.ios-panel .notis{border:0;border-radius:0}.ios-panel .notis-item{padding:.75rem 0}.ios-panel .notis-item:first-child{padding-top:0}.ios-panel .notis-item:last-child{padding-bottom:0}.ios-panel .notis-date{min-width:68px;border-radius:5px}.ios-panel .notis-item h4{font-size:var(--ds-text-xs)}.ios-panel .notis-item p{font-size:var(--ds-text-xs)}
.ios-activities .aktiviti-item{border:0;border-top:1px solid var(--line);border-radius:0;padding:.72rem 0}.ios-activities .aktiviti-item:first-child{border-top:0;padding-top:0}.ios-activities .aktiviti-item:last-child{padding-bottom:0}.ios-activities .aktiviti-item .tgl{border-radius:5px;min-width:70px}
.ios-search-panel{padding:1.1rem;margin-bottom:1rem}.ios-search-panel .portal-filter{margin:.85rem 0 0}.ios-search-panel .portal-filter input{border-radius:6px;background:#F7F9F8}.ios-search-panel .search-results{margin-top:.75rem}
.ios-utility-grid{margin-bottom:0}.ios-utility-grid .portal-row{box-shadow:none}.ios-utility-grid .portal-row:last-child{margin-bottom:0}.ios-utility-grid .portal-row a{border-radius:5px}
.ios-service-dock{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 20px rgba(20,32,31,.045);padding:1.1rem;margin-bottom:1rem}.ios-service-dock .ios-section-heading{margin-bottom:.8rem}.ios-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.ios-service-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.65rem;min-height:76px;background:#F7F9F8;border:1px solid #DCE4E1;border-radius:7px;padding:.72rem;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.ios-service-item:hover{transform:translateY(-2px);box-shadow:0 10px 18px rgba(20,32,31,.08);border-color:#8BBAB3}.ios-service-item b,.ios-service-item small{display:block}.ios-service-item b{font-size:var(--ds-text-xs);color:var(--ink);line-height:1.35}.ios-service-item small{font-size:var(--ds-text-2xs);color:var(--muted);line-height:1.35;margin-top:.12rem}.ios-service-item i{font-style:normal;color:var(--teal);font-size:var(--ds-text-base)}.ios-service-icon{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;font:800 .6rem var(--font-mono);letter-spacing:.03em}.ios-service-item.pss .ios-service-icon{background:#F6EDCF;color:#725716}.ios-service-item.booking .ios-service-icon{background:#D8ECE7;color:#075B55}.ios-service-item.calendar .ios-service-icon{background:#E5EAF7;color:#3E4D82}.ios-service-item.dorm .ios-service-icon{background:#F3E3DC;color:#924F34}
@media (max-width:820px){.ios-welcome-inner,.ios-primary-grid,.ios-utility-grid,.ios-prayer{grid-template-columns:1fr}.ios-summary{grid-template-columns:1fr 1fr}.ios-link-card{grid-column:1/-1}.ios-service-grid{grid-template-columns:1fr 1fr}.ios-greeting{border-left:0;border-top:1px solid rgba(255,255,255,.22);padding:1rem 0 0}.ios-hadith{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:560px){.ios-welcome{padding:2.35rem 1.25rem 2.5rem}.ios-home-main{padding:1rem 1rem 3rem}.ios-summary{grid-template-columns:1fr;gap:.65rem}.ios-link-card{grid-column:auto}.ios-summary-card{min-height:auto}.ios-primary-grid,.ios-utility-grid{gap:.75rem}.ios-service-grid{grid-template-columns:1fr}.ios-service-dock,.ios-panel,.ios-search-panel{padding:1rem}.ios-prayer-main,.ios-hadith{padding:1rem}.ios-prayer .solat-times{gap:.35rem}.ios-prayer .solat-chip{min-width:61px;padding:.35rem .45rem}.ios-prayer .solat-chip .t{font-size:var(--ds-text-xs)}.ios-section-heading{margin-bottom:.75rem}}

/* ---------- Navigasi menu utama dan panduan halaman ---------- */
nav.tabs{align-items:center;gap:.85rem;flex-wrap:nowrap}
nav.tabs .nav-mega{position:static}
nav.tabs .nav-mega summary{display:flex;align-items:center;gap:.25rem}
nav.tabs .nav-mega.is-active summary{color:var(--teal);border-color:var(--brass)}
nav.tabs .nav-mega-panel{left:0;top:calc(100% + 1px);width:min(680px,calc(100vw - 3rem));min-width:0;grid-template-columns:minmax(150px,.7fr) minmax(0,1.45fr);gap:0;padding:0;overflow:hidden;border-radius:var(--radius);box-shadow:0 16px 32px rgba(20,32,31,.15)}
.nav-mega-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.1rem;background:var(--plum);color:#fff}
.nav-mega-copy strong{font-family:var(--font-display);font-size:var(--ds-text-base);font-weight:400;color:#fff}
.nav-mega-copy small{font-size:var(--ds-text-xs);line-height:1.5;color:#D6E4DF}
nav.tabs .nav-mega-copy .nav-overview{margin-top:auto;padding:.45rem .55rem;color:var(--ink);background:var(--brass-bright);border:1px solid var(--brass-bright);border-radius:6px;font-size:var(--ds-text-2xs);line-height:1.2;white-space:normal}
nav.tabs .nav-mega-copy .nav-overview:hover{background:#fff;border-color:#fff;color:var(--plum)}
.nav-mega-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;background:var(--ds-card-bg)}
nav.tabs .nav-mega-links a{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;min-height:77px;padding:.85rem .9rem;color:var(--ink);white-space:normal;border:0;border-bottom:1px solid var(--line);border-radius:0}
nav.tabs .nav-mega-links a:nth-child(odd){border-right:1px solid var(--line)}
nav.tabs .nav-mega-links a:hover{background:var(--plum-soft);color:var(--plum)}
.nav-mega-links b{font-size:var(--ds-text-xs);line-height:1.35}
.nav-mega-links small{font-size:var(--ds-text-2xs);font-weight:500;line-height:1.4;color:var(--muted)}
.page-guide{background:#fff;border-bottom:1px solid var(--line)}
.page-guide-inner{max-width:1180px;margin:0 auto;padding:.85rem 1.5rem;display:grid;grid-template-columns:150px minmax(0,1fr);gap:1rem;align-items:start}
.page-guide-inner>span{font:700 .66rem var(--font-mono);letter-spacing:.08em;color:var(--muted);padding-top:.45rem}
.page-guide-inner>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:.55rem}
.page-guide a{display:flex;flex-direction:column;gap:.16rem;min-height:54px;padding:.55rem .65rem;background:var(--paper);border:1px solid var(--line);border-radius:7px;color:var(--ink)}
.page-guide a:hover,.page-guide a:focus-visible{background:var(--plum-soft);border-color:var(--teal);color:var(--plum)}
.page-guide a b{font-size:var(--ds-text-2xs);line-height:1.3}.page-guide a small{font-size:var(--ds-text-2xs);line-height:1.35;color:var(--muted)}
#page-content,#academic-calendar,#koku-uniform-section,#koku-persatuan-section,#koku-permainan-section,#peraturan,#jadual-harian{scroll-margin-top:1.25rem}
.school-menu-toggle{display:none}
@media (max-width:1020px){nav.tabs{gap:.55rem}nav.tabs a,nav.tabs .nav-dropdown summary{font-size:var(--ds-text-2xs)}}
@media (max-width:820px){nav.tabs{flex-wrap:wrap}.nav-mega-copy{padding:1rem}.nav-mega-panel{width:min(640px,calc(100vw - 3rem))}.page-guide-inner{grid-template-columns:1fr}.page-guide-inner>span{padding-top:0}}
@media (max-width:560px){.school-menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:38px;margin-top:.75rem;padding:.45rem .8rem;border:1px solid var(--teal);border-radius:6px;background:var(--plum);color:#fff;font:700 .72rem var(--font-body);cursor:pointer}.school-menu-toggle:hover,.school-menu-toggle:focus-visible{background:var(--teal);border-color:var(--teal)}nav.tabs{display:none;gap:.15rem}nav.tabs.is-open{display:flex}.nav-mega-copy{padding:.9rem}.nav-mega-copy small{font-size:var(--ds-text-2xs)}nav.tabs .nav-mega{flex:0 0 100%}nav.tabs .nav-mega summary{padding:.6rem .8rem}nav.tabs .nav-mega:not([open]) .nav-mega-panel{display:none}nav.tabs .nav-mega[open] .nav-mega-panel{display:grid;position:static;width:100%;margin:.25rem 0 .4rem;visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:none}nav.tabs .nav-mega-panel{width:auto;grid-template-columns:1fr;gap:0}.nav-mega-links{grid-template-columns:1fr}.nav-mega-links a:nth-child(odd){border-right:0}.page-guide-inner{padding:.75rem 1rem}.page-guide-inner>div{grid-template-columns:1fr}.page-guide a{min-height:0}}

/* ---------- Dropdown desktop: kekal dekat dengan tab yang dibuka ---------- */
@media (min-width:821px){
  .sitehead{z-index:20}
  nav.tabs .nav-mega{position:relative;z-index:50}
  nav.tabs .nav-mega-panel{top:calc(100% + 10px);left:0;width:min(440px,calc(100vw - 3rem));grid-template-columns:1fr;border-radius:var(--ds-card-radius);background:var(--ds-card-bg);box-shadow:var(--ds-shadow-md)}
  .nav-mega-copy{display:none}
  .nav-mega-links{grid-template-columns:repeat(2,minmax(0,1fr));background:var(--ds-card-bg)}
  nav.tabs .nav-mega-links a{min-height:72px;padding:.8rem .85rem;background:transparent}
  nav.tabs .nav-mega-links a:hover{background:var(--ds-color-brand-soft);color:var(--ds-color-brand-strong)}
}

/* ---------- Menu mudah alih: padat dan tidak menolak hero ---------- */
@media (max-width:820px){
  .sitehead{z-index:20}
  nav.tabs.is-open{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:1fr;gap:.25rem;max-height:calc(100svh - 320px);overflow-y:auto;padding:.7rem 1rem;background:var(--ds-color-surface-raised);border-top:1px solid var(--ds-card-border);box-shadow:var(--ds-shadow-md);z-index:60}
  nav.tabs.is-open .nav-mega{flex:0 0 auto;width:100%}
  nav.tabs.is-open .nav-mega summary{padding:.65rem .75rem;border:1px solid var(--ds-card-border);border-radius:var(--ds-radius-sm);background:var(--ds-color-surface-raised)}
  nav.tabs.is-open .nav-mega[open] summary{border-color:var(--ds-color-accent);background:var(--ds-color-brand-soft)}
  nav.tabs.is-open .nav-mega-panel{display:none;position:static;width:100%;margin:.25rem 0 .25rem;padding:0;border:1px solid var(--ds-card-border);border-radius:var(--ds-radius-sm);background:var(--ds-color-surface-raised);box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none}
  nav.tabs.is-open .nav-mega[open] .nav-mega-panel{display:block}
  nav.tabs.is-open .nav-mega-copy{display:none}
  nav.tabs.is-open .nav-mega-links{display:grid;grid-template-columns:1fr;background:transparent}
  nav.tabs.is-open .nav-mega-links a{min-height:0;padding:.7rem .8rem;border-bottom:1px solid var(--ds-card-border)}
  nav.tabs.is-open .nav-mega-links a:last-child{border-bottom:0}
  nav.tabs.is-open .nav-mega-links a:nth-child(odd){border-right:0}
  nav.tabs.is-open>a{padding:.65rem .75rem;border:1px solid var(--ds-card-border);border-radius:var(--ds-radius-sm);background:var(--ds-color-surface-raised)}
}

/* ---------- Navigasi mudah alih ---------- */
.school-mobile-dock {
  display: none;
}

@media (max-width: 560px) {
  body {
    padding-bottom: 4.8rem;
  }

  .school-mobile-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.15rem;
    padding: 0.42rem 0.45rem calc(0.42rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 252, 245, 0.96);
    box-shadow: 0 -8px 24px rgba(20, 69, 63, 0.12);
    backdrop-filter: blur(12px);
  }

  .school-mobile-dock a,
  .school-mobile-dock button {
    display: grid;
    min-height: 2.55rem;
    place-items: center;
    padding: 0.25rem 0.1rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--ds-text-2xs);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
  }

  .school-mobile-dock a:first-child,
  .school-mobile-dock button {
    color: var(--teal);
  }

  .school-mobile-dock button {
    cursor: pointer;
  }

  .school-mobile-dock a:focus-visible,
  .school-mobile-dock button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
}

/* ---------- Akademik: rujukan pantas, takwim dan kandungan CMS ---------- */
.academic-main{max-width:1180px;padding-top:2rem}.academic-section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.58fr);gap:1.25rem;align-items:end;margin-bottom:1rem}.academic-kicker,.academic-card-label{display:block;font:700 .65rem var(--font-mono);letter-spacing:.08em;color:var(--teal)}.academic-section-heading h3,.academic-live-heading h3{font:400 1.48rem var(--font-display);line-height:1.15;color:var(--plum);margin:.2rem 0 0}.academic-section-heading p{font-size:var(--ds-text-xs);line-height:1.55;color:var(--muted);max-width:40ch;margin:0 0 .1rem}.academic-access{margin-bottom:1.25rem}.academic-access-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-areas:"primary calendar panitia" "primary documents documents";gap:.7rem}.academic-access-card{display:flex;flex-direction:column;align-items:flex-start;min-height:112px;padding:1rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.academic-access-card:hover,.academic-access-card:focus-visible{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 10px 20px rgba(20,32,31,.08)}.academic-access-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}.academic-access-card strong{font-size:var(--ds-text-sm);line-height:1.3;color:var(--ink);margin-top:.45rem}.academic-access-card small{font-size:var(--ds-text-2xs);line-height:1.48;color:var(--muted);margin-top:.25rem}.academic-access-primary{grid-area:primary;justify-content:flex-end;min-height:231px;background:var(--plum);border-color:var(--plum)}.academic-access-primary .academic-card-label{color:var(--brass-bright)}.academic-access-primary strong{font:400 1.45rem/1.16 var(--font-display);color:#fff}.academic-access-primary small{max-width:26ch;color:#D6E4DF}.academic-access-calendar{grid-area:calendar;background:#F7F9F8}.academic-access-panitia{grid-area:panitia;background:var(--plum-soft)}.academic-access-documents{grid-area:documents;background:#FCF7E9}.academic-access-documents{justify-content:center}.academic-live-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(280px,.82fr);gap:1rem;margin-bottom:1.8rem}.academic-live-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}.academic-live-heading{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;margin-bottom:.8rem}.academic-live-heading h3{font-size:var(--ds-text-lg)}.academic-live-heading>a{font-size:var(--ds-text-2xs);font-weight:800;color:var(--teal);white-space:nowrap;padding-top:.2rem}.academic-live-heading>a:hover,.academic-live-heading>a:focus-visible{color:var(--plum);text-decoration:underline}.academic-timeline,.academic-notice-list{display:grid;gap:.1rem}.academic-timeline-item,.academic-notice-item{display:grid;grid-template-columns:92px minmax(0,1fr);gap:.8rem;padding:.76rem 0;border-top:1px solid var(--line)}.academic-timeline-item:first-child,.academic-notice-item:first-child{border-top:0;padding-top:.1rem}.academic-timeline-item>span,.academic-notice-item>span{font:700 .64rem/1.4 var(--font-mono);color:var(--plum);background:var(--plum-soft);height:max-content;padding:.32rem .42rem;border-radius:5px}.academic-timeline-item h4,.academic-notice-item h4{font-size:var(--ds-text-xs);line-height:1.4;color:var(--ink)}.academic-timeline-item p,.academic-notice-item p{font-size:var(--ds-text-2xs);line-height:1.5;color:var(--muted);margin:.14rem 0 0}.academic-empty{font-size:var(--ds-text-xs);line-height:1.55;color:var(--muted);padding:.2rem 0}.academic-content-heading{margin-bottom:1.2rem}.academic-content .content-card{margin-bottom:1rem;box-shadow:0 8px 18px rgba(20,32,31,.035)}.academic-content .content-card h3{font-size:var(--ds-text-lg)}.academic-content .panitia-grid{grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:.8rem}.academic-content .panitia-bidang{background:#F7F9F8;border-color:#DCE4E1}.academic-content .panitia-bidang h4{color:var(--teal)}
@media (max-width:820px){.academic-section-heading{grid-template-columns:1fr;gap:.35rem}.academic-access-grid{grid-template-columns:1fr 1fr;grid-template-areas:"primary primary" "calendar panitia" "documents documents"}.academic-access-primary{min-height:155px}.academic-live-grid{grid-template-columns:1fr}.academic-section-heading p{max-width:65ch}}
@media (max-width:560px){.academic-main{padding:1.5rem 1rem 3rem}.academic-access-grid{grid-template-columns:1fr;grid-template-areas:"primary" "calendar" "panitia" "documents"}.academic-access-card,.academic-access-primary{min-height:0}.academic-access-primary{padding:1.1rem;min-height:146px}.academic-live-card{padding:1rem}.academic-live-heading h3{font-size:var(--ds-text-base)}.academic-timeline-item,.academic-notice-item{grid-template-columns:76px minmax(0,1fr);gap:.6rem}.academic-content .content-card{padding:1.15rem}}

/* ---------- Komponen sekolah dikongsi ---------- */
.topbar{background:var(--ds-color-brand-strong)}.sitehead{background:var(--ds-appbar-bg);backdrop-filter:blur(14px)}.brandrow img.logo{border:1px solid var(--ds-card-border);box-shadow:var(--ds-shadow-sm)}nav.tabs a:focus-visible,nav.tabs .nav-dropdown summary:focus-visible,nav.tabs .subnav a:focus-visible{outline:none;box-shadow:var(--ds-focus-ring)}nav.tabs .subnav{border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md)}.card,.content-card,.asrama-schedule,.asrama-rules,.notis{border-radius:var(--ds-card-radius);border-color:var(--ds-card-border);box-shadow:var(--ds-card-shadow)}.card:hover{border-color:var(--ds-color-brand-strong);box-shadow:var(--ds-shadow-md)}.card .icon{border-radius:var(--ds-radius-md)}.solat-chip{border-radius:var(--ds-radius-md)}.solat-chip.next{background:var(--ds-color-brand-strong)}.notis-date{background:var(--ds-color-brand-soft);color:var(--ds-color-brand-strong)}

/* ---------- Akses pantas untuk Kokurikulum dan Asrama ---------- */
.school-section-main{max-width:1180px;padding-top:2rem}.school-quick-nav{margin-bottom:1.5rem}.school-section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.58fr);gap:1.25rem;align-items:end;margin-bottom:1rem}.school-kicker{display:block;font:700 .65rem var(--font-mono);letter-spacing:.08em;color:var(--teal)}.school-section-heading h3{font:400 1.48rem/1.15 var(--font-display);color:var(--plum);margin:.2rem 0 0}.school-section-heading p{font-size:var(--ds-text-xs);line-height:1.55;color:var(--muted);max-width:40ch;margin:0}.school-quick-grid{display:grid;gap:.7rem}.school-quick-grid-koku{grid-template-columns:1.15fr .85fr .85fr;grid-template-areas:"primary club sport" "primary record record"}.school-quick-grid-asrama{grid-template-columns:1.15fr .85fr .85fr;grid-template-areas:"primary schedule rules"}.school-quick-card{display:flex;flex-direction:column;align-items:flex-start;min-height:104px;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.school-quick-card:hover,.school-quick-card:focus-visible{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 10px 20px rgba(20,32,31,.08)}.school-quick-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}.school-quick-card span{font:700 .65rem var(--font-mono);letter-spacing:.08em;color:var(--teal)}.school-quick-card strong{font-size:var(--ds-text-sm);line-height:1.32;color:var(--ink);margin-top:.42rem}.school-quick-card small{font-size:var(--ds-text-2xs);line-height:1.48;color:var(--muted);margin-top:.25rem}.school-quick-primary{grid-area:primary;justify-content:flex-end;background:var(--plum);border-color:var(--plum);min-height:215px}.school-quick-primary span{color:var(--brass-bright)}.school-quick-primary strong{font:400 1.35rem/1.18 var(--font-display);color:#fff}.school-quick-primary small{color:#D6E4DF}.school-quick-grid-koku>a:nth-child(2){grid-area:club}.school-quick-grid-koku>a:nth-child(3){grid-area:sport}.school-quick-grid-koku>a:nth-child(4){grid-area:record}.school-quick-grid-asrama>a:nth-child(2){grid-area:schedule}.school-quick-grid-asrama>a:nth-child(3){grid-area:rules}.school-quick-tint{background:var(--plum-soft)}.school-quick-doc{background:#FCF7E9}.school-section-main #page-content{margin-bottom:1.2rem}@media(max-width:820px){.school-section-heading{grid-template-columns:1fr;gap:.35rem}.school-quick-grid-koku,.school-quick-grid-asrama{grid-template-columns:1fr 1fr;grid-template-areas:"primary primary" "club sport" "record record"}.school-quick-grid-asrama{grid-template-areas:"primary primary" "schedule rules"}.school-quick-primary{min-height:150px}.school-section-heading p{max-width:65ch}}@media(max-width:560px){.school-section-main{padding:1.5rem 1rem 3rem}.school-quick-grid-koku,.school-quick-grid-asrama{grid-template-columns:1fr;grid-template-areas:"primary" "club" "sport" "record"}.school-quick-grid-asrama{grid-template-areas:"primary" "schedule" "rules"}.school-quick-card,.school-quick-primary{min-height:0}.school-quick-primary{min-height:142px}}