:root{--ink:#173427;--muted:#617369;--green:#1d674e;--lime:#d8ed5e;--cream:#f7f5ef;--paper:#fff;--line:#e5e8e1;--orange:#ed8759;--shadow:0 16px 36px rgba(22,52,39,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:15px 'DM Sans',sans-serif}.topbar{height:37px;background:#153d2e;color:#e5f2e9;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,32px);font-size:12px}.site-header{height:82px;background:#fff;display:flex;align-items:center;padding:0 max(5vw,32px);gap:34px;position:sticky;top:0;z-index:5;border-bottom:1px solid #edf0ea}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);line-height:1}.brand b{display:block;font-size:9px;letter-spacing:1.3px}.brand strong{display:block;font-family:'Playfair Display';font-size:20px;letter-spacing:.2px;margin-top:4px}.crest{width:42px;height:42px;border-radius:50%;border:2px solid var(--green);color:var(--green);display:grid;place-items:center;font-family:'Playfair Display';font-weight:700;background:radial-gradient(circle at 50% 40%,#fff 0 37%,#d9ed5e 39% 44%,#fff 46%)}nav{display:flex;align-items:center;gap:20px;margin-left:auto}nav a{color:#466055;text-decoration:none;font-size:13px;font-weight:600}nav a:hover{color:var(--green)}button{font:inherit;cursor:pointer;border:0}.admin-trigger,.primary{padding:12px 17px;border-radius:9px;background:var(--green);color:white;font-weight:700}.admin-trigger:hover,.primary:hover{background:#14523d}.hero{min-height:475px;padding:82px max(5vw,32px);background:linear-gradient(100deg,rgba(18,53,39,.96),rgba(25,100,75,.75)),url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1800&q=80') center/cover;color:white;position:relative}.hero-inner{max-width:730px}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:700;color:#779b88;margin:0 0 10px}.hero .eyebrow{color:var(--lime)}h1,h2,h3{font-family:'Playfair Display',serif;margin:0}h1{font-size:clamp(42px,6vw,73px);line-height:1.05}.hero p:not(.eyebrow){font-size:17px;line-height:1.65;max-width:600px;color:#edf4ef;margin:20px 0 28px}.hero-stats{display:flex;gap:28px;margin-top:48px}.hero-stats div{border-left:1px solid rgba(255,255,255,.4);padding-left:15px}.hero-stats b{font:700 26px 'Playfair Display';display:block}.hero-stats span{font-size:12px;color:#dbe8df}.section{padding:78px max(5vw,32px);scroll-margin-top:74px}.section.alt{background:#edf2eb}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:31px}.section-head h2{font-size:38px}.section-head p{max-width:480px;color:var(--muted);margin:0;text-align:right;line-height:1.55}.feature-grid{display:grid;grid-template-columns:1.05fr 2fr;gap:22px}.leader-card{background:#214d3c;color:white;padding:31px;border-radius:16px;min-height:330px;display:flex;flex-direction:column;justify-content:end;background:linear-gradient(0deg,#173e30 0%,rgba(23,62,48,.2) 65%),url('https://images.unsplash.com/photo-1562788869-4ed32648eb72?auto=format&fit=crop&w=700&q=80') center/cover}.leader-card h3{font-size:29px}.leader-card p{margin:5px 0 18px;color:#d9e9df}.outline{border:1px solid rgba(255,255,255,.55);color:white;padding:10px 13px;border-radius:7px;background:none;align-self:start;font-weight:700}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards.compact{grid-template-columns:repeat(3,1fr)}.card{background:white;border:1px solid var(--line);border-radius:13px;overflow:hidden;min-width:0;box-shadow:0 3px 9px rgba(20,48,37,.025);transition:.2s}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.thumb{height:140px;background:linear-gradient(135deg,#cfe9ce,#85b99d);position:relative;background-size:cover;background-position:center}.thumb:after{content:attr(data-icon);position:absolute;inset:0;display:grid;place-items:center;font-size:34px;background:rgba(20,74,54,.08)}.card-body{padding:17px}.tag{font-size:10px;letter-spacing:1.2px;color:#608576;font-weight:700;text-transform:uppercase;margin-bottom:6px}.card h3{font-family:'DM Sans';font-size:17px;line-height:1.25}.card p{color:var(--muted);font-size:13px;line-height:1.45;margin:7px 0 15px}.card-link{color:var(--green);font-size:13px;font-weight:700;text-decoration:none}.notice{background:#d8ed5e;padding:38px;border-radius:15px;display:flex;align-items:center;justify-content:space-between;gap:30px}.notice h2{font-size:31px;max-width:620px}.notice p{color:#3b5e42;max-width:640px;line-height:1.6}.notice a{white-space:nowrap}.empty{grid-column:1/-1;padding:34px;text-align:center;color:var(--muted);border:1px dashed #b7c7ba;border-radius:12px}footer{background:#143c2e;color:#e4f0e7;padding:45px max(5vw,32px);display:flex;align-items:center;justify-content:space-between}footer .brand{color:white}footer p{font-size:12px;color:#b9d0c0}footer a{color:#d8ed5e;text-decoration:none;font-weight:700;font-size:13px}
dialog{border:0;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.3);padding:0;background:#fff;color:var(--ink)}dialog::backdrop{background:rgba(7,27,19,.66);backdrop-filter:blur(3px)}#adminModal{width:min(1200px,96vw);height:min(780px,92vh)}.login-view{width:min(430px,94vw);padding:44px;text-align:center;position:relative}.large{width:62px;height:62px;font-size:19px;margin:auto}.login-view h2{font-size:32px;margin-bottom:8px}.login-view>p:not(.eyebrow){color:var(--muted);line-height:1.55}.close{background:none;font-size:28px;line-height:1;color:#6f8177;position:absolute;right:17px;top:15px}.login-view form{text-align:left;margin:25px 0 14px}.login-view label{display:block;font-weight:700;font-size:12px;margin:13px 0}.login-view input,.editor-fields input,.editor-fields textarea,.editor-fields select{display:block;width:100%;border:1px solid #dce4dc;border-radius:8px;padding:11px;margin-top:6px;font:inherit;color:var(--ink);background:white}.login-view small{color:var(--muted)}.wide{width:100%;margin-top:9px}.dashboard{height:100%;display:grid;grid-template-columns:240px 1fr}.dash-side{background:#153d2e;color:#dceae0;padding:27px 16px}.dash-side .brand{color:#fff;padding:0 8px 28px}.dash-nav{display:grid;gap:4px}.dash-nav button{background:none;color:#c6ddd0;text-align:left;padding:11px 12px;border-radius:7px;font-size:13px}.dash-nav button.active,.dash-nav button:hover{background:#28634e;color:white}.dash-side-bottom{margin-top:24px;padding:14px 10px;border-top:1px solid rgba(255,255,255,.15);font-size:12px}.dash-main{padding:34px;overflow:auto;background:#f7f8f4}.dash-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:25px}.dash-head h2{font-size:31px}.dash-head p{margin:5px 0;color:var(--muted)}.dash-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.stat{background:white;border:1px solid var(--line);border-radius:11px;padding:16px}.stat b{display:block;font:28px 'Playfair Display'}.stat span{font-size:12px;color:var(--muted)}.dash-toolbar{display:flex;justify-content:space-between;gap:12px;margin:28px 0 15px}.dash-toolbar input{border:1px solid var(--line);border-radius:7px;padding:10px;width:250px}.content-table{width:100%;border-collapse:collapse;background:white;border:1px solid var(--line);border-radius:11px;overflow:hidden}.content-table th{text-align:left;font-size:11px;letter-spacing:1px;color:#73857b;background:#fbfcfa;padding:12px}.content-table td{padding:12px;border-top:1px solid var(--line);font-size:13px}.mini-pic{width:33px;height:33px;border-radius:7px;background:#d5e8d1;display:inline-grid;place-items:center;margin-right:8px;vertical-align:middle}.status{font-size:10px;font-weight:700;padding:5px 7px;border-radius:99px;background:#dff2de;color:#276146}.status.draft{background:#fff0d8;color:#956117}.table-actions button{background:none;color:var(--green);font-weight:700;margin-right:8px;font-size:12px}.table-actions button.delete{color:#ba4635}.log-list{background:white;border:1px solid var(--line);border-radius:11px}.log-list div{padding:14px;border-bottom:1px solid var(--line);font-size:13px}.log-list small{float:right;color:var(--muted)}.editor-head{display:flex;justify-content:space-between;position:relative;padding:24px 25px 10px}.editor-head h2{font-size:28px}.editor-head .close{position:static}.editor-fields{padding:10px 25px 24px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.editor-fields label{font-size:12px;font-weight:700}.editor-fields .full{grid-column:1/-1}.editor-fields textarea{min-height:105px;resize:vertical}.editor-fields input[type=file]{padding:8px}.editor-actions{padding:16px 25px;border-top:1px solid var(--line);display:flex;justify-content:end;gap:9px}.ghost{background:#edf1eb;color:var(--ink);font-weight:700;padding:11px 15px;border-radius:8px}
 .site-header nav{margin-left:auto;flex-wrap:nowrap}.page-hero{padding:78px max(5vw,32px) 74px;background:linear-gradient(115deg,#143c2e,#2b7258);color:white}.page-hero .eyebrow{color:var(--lime)}.page-hero h1{font-size:clamp(42px,5vw,62px)}.page-hero>p:last-child{max-width:590px;font-size:17px;line-height:1.65;color:#e4efe8}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.info-card{padding:33px;border-radius:14px;background:#fff;border:1px solid var(--line)}.info-card>span{color:var(--green);font-size:32px}.info-card h2{font-size:25px;line-height:1.3}.info-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.info-facts div{padding:24px 18px;background:#edf2eb;border-radius:11px}.info-facts b{display:block;font:22px 'Playfair Display';margin-bottom:5px}.info-facts span{font-size:12px;color:var(--muted)}.directory{background:#f7f5ef}.directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.directory-card{display:flex;align-items:center;gap:15px;padding:21px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;transition:.2s}.directory-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b5d5be}.directory-card>span{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:#dcefa6;color:#295c42;font-size:20px}.directory-card h3{font-family:'DM Sans';font-size:15px}.directory-card p{font-size:12px;line-height:1.4;color:var(--muted);margin:4px 0 0}.directory-card>b{margin-left:auto;color:var(--green);font-size:20px}
@media(max-width:900px){nav{display:none}.site-header{justify-content:space-between}.cards,.cards.compact,.directory-grid{grid-template-columns:repeat(2,1fr)}.dash-statgrid,.info-facts{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.topbar{display:none}.site-header{height:67px;padding:0 18px}.brand strong{font-size:17px}.admin-trigger{padding:10px;font-size:12px}.hero,.section,.page-hero{padding-left:20px;padding-right:20px}.hero{min-height:440px;padding-top:72px}.hero-stats{gap:14px}.feature-grid,.info-grid{grid-template-columns:1fr}.cards,.cards.compact,.info-facts,.directory-grid{grid-template-columns:1fr}.section-head{display:block}.section-head p{text-align:left;margin-top:10px}.notice,footer{display:block}.notice a{display:inline-block;margin-top:12px}footer p{margin:22px 0}.dashboard{grid-template-columns:1fr}.dash-side{padding:14px}.dash-side .brand{padding-bottom:10px}.dash-nav{display:flex;overflow:auto}.dash-nav button{white-space:nowrap}.dash-side-bottom{display:none}.dash-main{padding:21px}.content-table th:nth-child(3),.content-table td:nth-child(3){display:none}.editor-fields{grid-template-columns:1fr}.editor-fields .full{grid-column:auto}}
/* Identiti digital SK Api Api */
:root{--ink:#eaf2ff;--muted:#9fb2d2;--green:#4c7dff;--lime:#45f0cb;--cream:#071126;--paper:#101c39;--line:rgba(157,187,255,.18);--shadow:0 18px 45px rgba(0,0,0,.28)}body{background:radial-gradient(circle at 84% 5%,#202c70 0,transparent 26%),radial-gradient(circle at 5% 38%,#123f68 0,transparent 25%),#071126;color:var(--ink)}.topbar{background:linear-gradient(90deg,#121c50,#263a91,#0e6e7d);color:#c9eaff}.site-header{background:rgba(7,17,38,.87);border-bottom:1px solid rgba(106,168,255,.22);backdrop-filter:blur(16px)}.brand{color:#fff}.crest{border-color:#59e8d0;color:#fff;background:radial-gradient(circle at 50% 40%,#203881 0 37%,#45f0cb 39% 44%,#142054 46%);box-shadow:0 0 20px rgba(69,240,203,.35)}nav a{color:#bbcaed}nav a:hover{color:#52f4d4}.admin-trigger,.primary{background:linear-gradient(100deg,#526dff,#a34ffa);box-shadow:0 7px 20px rgba(102,83,255,.32)}.admin-trigger:hover,.primary:hover{background:linear-gradient(100deg,#36bdef,#7e3ce2)}.hero{background:linear-gradient(105deg,rgba(5,12,39,.93),rgba(17,24,79,.78)),radial-gradient(circle at 72% 18%,rgba(72,236,214,.35),transparent 24%),url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1800&q=80') center/cover}.hero .eyebrow,.page-hero .eyebrow{color:#54f4d5}.hero-stats div{border-left-color:#54f4d5}.section.alt,.directory{background:linear-gradient(140deg,rgba(15,31,67,.75),rgba(11,22,51,.75))}.section-head p,.card p,.info-facts span{color:#aebed8}.page-hero{background:linear-gradient(120deg,#15296c,#672b9d 56%,#126b7f);position:relative;overflow:hidden}.page-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(130deg,transparent 0 45%,rgba(83,239,214,.16) 46% 47%,transparent 48%);pointer-events:none}.card,.info-card,.directory-card,.stat,.content-table,.log-list{background:linear-gradient(145deg,rgba(26,42,84,.92),rgba(14,26,57,.95));border-color:rgba(140,181,255,.19);box-shadow:0 10px 25px rgba(0,0,0,.16)}.card:hover,.directory-card:hover{border-color:#54f4d5;box-shadow:0 17px 35px rgba(21,123,213,.23)}.thumb{background:linear-gradient(135deg,#3150b6,#b34bd5)}.thumb:after{background:linear-gradient(135deg,rgba(45,211,226,.2),rgba(105,49,211,.18))}.tag{color:#64efd6}.card h3,.directory-card h3{color:#f3f6ff}.card-link{color:#59e8d0}.leader-card{background-color:#182761}.notice{background:linear-gradient(110deg,#3044bd,#6435ae 55%,#167c89);color:white;box-shadow:0 16px 35px rgba(47,64,191,.28)}.notice p{color:#e5eaff}.info-facts div{background:linear-gradient(140deg,#1d3474,#17234e);border:1px solid rgba(126,187,255,.2)}.info-facts b{color:#5bf2d6}.directory-card>span{background:linear-gradient(135deg,#43e7d2,#6178ff);color:#071126}.directory-card>b{color:#59f1d6}footer{background:linear-gradient(110deg,#08122d,#152052 54%,#103a55);border-top:1px solid rgba(117,181,255,.18)}.login-view,.dash-main{background:#0d1835;color:var(--ink)}.login-view input,.editor-fields input,.editor-fields textarea,.editor-fields select,.dash-toolbar input{background:#111f43;color:#edf4ff;border-color:rgba(139,180,255,.28)}.dash-side{background:linear-gradient(180deg,#101d4d,#17225d)}.dash-nav button{color:#bdc9ee}.dash-nav button.active,.dash-nav button:hover{background:linear-gradient(100deg,#4a61e5,#803db6)}.ghost{background:#203461;color:#e8f3ff}.content-table th{background:#15234a;color:#a9bce4}.content-table td,.log-list div{border-color:rgba(142,180,255,.14)}.status{background:#204c5a;color:#66f3d8}.status.draft{background:#634c28;color:#ffd477}.editor-head,.editor-actions{background:#0e1937;border-color:rgba(142,180,255,.16)}dialog{background:#0d1835;color:var(--ink)}
.achievement-table-wrap{max-height:560px;overflow:auto;border:1px solid rgba(140,181,255,.2);border-radius:14px;background:rgba(12,25,56,.8);scrollbar-color:#56dfd0 #142451;scrollbar-width:thin}.achievement-table{width:100%;border-collapse:collapse;min-width:700px}.achievement-table th{padding:16px 20px;text-align:left;font-size:11px;letter-spacing:1.1px;color:#73f4dc;background:linear-gradient(90deg,#172d67,#27368a);position:sticky;top:0;z-index:1}.achievement-table td{padding:18px 20px;color:#dbe7ff;border-top:1px solid rgba(140,181,255,.14);vertical-align:top;line-height:1.5}.achievement-table tr:hover td{background:rgba(70,101,211,.13)}.achievement-table td:first-child{color:#fff;min-width:230px}.achievement-table td span{color:#64efd6;font-weight:700}.achievement-table .no-record{text-align:center;color:#9fb2d2;padding:34px}

/* Tipografi dan ritma kandungan */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.01em}h1,h2,h3{text-wrap:balance}.hero h1{max-width:780px;letter-spacing:-.045em;line-height:1.02}.hero p:not(.eyebrow){max-width:625px;line-height:1.75}.page-hero h1{letter-spacing:-.04em;line-height:1.08;margin-bottom:15px}.page-hero>p:last-child{letter-spacing:.005em;line-height:1.75}.eyebrow{font-size:10px;letter-spacing:.18em;line-height:1.3}.section-head{gap:35px}.section-head h2{font-size:clamp(31px,3.1vw,42px);letter-spacing:-.025em;line-height:1.14}.section-head p{font-size:14px;line-height:1.72}.card-body{padding:20px}.tag{line-height:1.35;margin-bottom:8px}.card h3{font-size:17px;line-height:1.38;letter-spacing:-.015em}.card p{font-size:13px;line-height:1.65;margin:9px 0 17px}.card-link{display:inline-flex;align-items:center;gap:5px;line-height:1.3}.directory-card{min-height:106px}.directory-card h3{font-size:16px;line-height:1.35;letter-spacing:-.015em}.directory-card p{line-height:1.55;margin-top:5px}.notice h2{font-size:clamp(27px,3vw,36px);line-height:1.2;letter-spacing:-.025em}.notice p{line-height:1.72}.leader-card h3{letter-spacing:-.03em;line-height:1.15}.leader-card p{line-height:1.7}.info-card h2{line-height:1.38;letter-spacing:-.02em}.achievement-table td{font-size:14px;line-height:1.65}.achievement-table td:first-child b{font-size:15px;letter-spacing:-.01em}.achievement-table th{font-size:10px;letter-spacing:.14em}@media(max-width:600px){.hero h1{font-size:44px}.section-head h2{font-size:31px}.section-head{gap:12px}.card-body{padding:18px}.page-hero h1{font-size:43px}}
.menu-trigger{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid rgba(102,207,231,.4);border-radius:9px;background:rgba(19,42,91,.72);color:#eaf5ff;font-weight:700;font-size:12px}.menu-trigger:hover,.menu-trigger.open{background:linear-gradient(100deg,#284fbd,#6139ab);border-color:#58f0d5}.hamburger-icon{font-size:17px;line-height:1}.hamburger-menu{display:none!important;position:absolute;z-index:20;right:max(5vw,32px);top:calc(100% + 8px);width:255px;margin:0!important;padding:9px;background:rgba(12,25,57,.98);border:1px solid rgba(105,185,255,.35);border-radius:13px;box-shadow:0 20px 38px rgba(0,0,0,.35);backdrop-filter:blur(16px)}.hamburger-menu.open{display:grid!important;gap:2px}.hamburger-menu a{padding:11px 12px;border-radius:7px;color:#d7e6ff;font-size:13px}.hamburger-menu a:hover{background:rgba(81,114,236,.3);color:#55f2d7}@media(max-width:600px){.menu-trigger span:last-child{display:none}.menu-trigger{padding:10px 11px}.hamburger-menu{right:18px;width:245px}}
.stats-section{padding-top:62px;padding-bottom:62px;background:linear-gradient(140deg,rgba(16,35,83,.82),rgba(9,21,51,.88))}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat-public{min-height:185px;padding:25px 21px;border:1px solid rgba(126,186,255,.24);border-radius:14px;background:linear-gradient(145deg,rgba(39,64,137,.9),rgba(18,34,77,.98));box-shadow:0 15px 30px rgba(0,0,0,.18);position:relative;overflow:hidden}.stat-public:after{content:'';position:absolute;width:125px;height:125px;right:-45px;bottom:-60px;border-radius:50%;background:rgba(78,240,212,.12)}.stat-public>span{display:block;font-size:24px;margin-bottom:17px}.stat-public b{display:block;color:#62f0d8;font:38px 'Playfair Display';letter-spacing:-.04em;line-height:1}.stat-public h3{font-family:'DM Sans';font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin:12px 0 5px}.stat-public p{margin:0;color:#a8bbdb;font-size:12px;line-height:1.45}@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.stats-grid{grid-template-columns:1fr}.stat-public{min-height:150px}}
.cards.compact .thumb{height:auto;aspect-ratio:3/4;background-size:contain!important;background-position:center top!important;background-repeat:no-repeat;background-color:#172b64}.leader-card{background-size:cover,contain!important;background-position:center,center top!important;background-repeat:no-repeat!important;background-color:#182761}@media(max-width:600px){.cards.compact .thumb{aspect-ratio:4/5}}
#kurikulum .thumb,#hem .thumb,#kokurikulum .thumb{height:auto;aspect-ratio:3/4;background-size:contain!important;background-position:center top!important;background-repeat:no-repeat;background-color:#172b64}@media(max-width:600px){#kurikulum .thumb,#hem .thumb,#kokurikulum .thumb{aspect-ratio:4/5}}
#berita .thumb{height:auto;aspect-ratio:16/9;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#071a42}

/* Tema navy blue, emerald green dan putih */
:root{--ink:#ffffff;--muted:#b9cad8;--green:#0b8f68;--lime:#34d399;--cream:#061426;--paper:#0b2038;--line:rgba(255,255,255,.15);--shadow:0 18px 42px rgba(0,0,0,.28)}body{background:radial-gradient(circle at 82% 4%,rgba(11,143,104,.24),transparent 28%),#061426;color:#fff}.topbar{background:#04101f;color:#fff}.site-header{background:rgba(6,20,38,.95);border-bottom-color:rgba(52,211,153,.3)}nav a,.hamburger-menu a{color:#fff}nav a:hover,.hamburger-menu a:hover{color:#34d399}.admin-trigger,.primary{background:linear-gradient(110deg,#0b8f68,#10b981);color:#fff;box-shadow:0 8px 22px rgba(16,185,129,.25)}.admin-trigger:hover,.primary:hover{background:linear-gradient(110deg,#087456,#0b8f68)}.menu-trigger{background:#0b2038;border-color:rgba(52,211,153,.55);color:#fff}.menu-trigger:hover,.menu-trigger.open{background:#0b8f68;border-color:#fff}.hero{background:linear-gradient(105deg,rgba(4,16,31,.95),rgba(6,39,53,.82)),radial-gradient(circle at 72% 18%,rgba(52,211,153,.28),transparent 25%),url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1800&q=80') center/cover}.hero .eyebrow,.page-hero .eyebrow,.eyebrow{color:#34d399}.page-hero{background:linear-gradient(120deg,#071a35,#0a3f4b 60%,#0b8f68)}.card,.info-card,.directory-card,.stat,.content-table,.log-list{background:linear-gradient(145deg,#0d2945,#081a30);border-color:rgba(255,255,255,.14)}.card:hover,.directory-card:hover{border-color:#34d399;box-shadow:0 17px 35px rgba(11,143,104,.22)}.thumb{background:linear-gradient(135deg,#0a2e50,#0b8f68)}.tag,.card-link,.directory-card>b,.info-facts b{color:#34d399}.notice{background:linear-gradient(110deg,#0a3154,#0b8f68);color:#fff}.stats-section,.section.alt,.directory{background:linear-gradient(140deg,#081b31,#0a2636)}.stat-public{background:linear-gradient(145deg,#0b3150,#09263a);border-color:rgba(52,211,153,.25)}.stat-public b{color:#34d399}.announcement-ticker{background:#071a30;border-color:rgba(52,211,153,.45)}.announcement-label{background:#0b8f68;color:#fff}.achievement-table th{background:linear-gradient(90deg,#0a3154,#0b8f68);color:#fff}.achievement-table td span{color:#34d399}footer{background:linear-gradient(110deg,#04101f,#071b30 60%,#063a32)}footer h3,footer section>a:hover,footer section>p a:hover{color:#34d399}.dash-side{background:linear-gradient(180deg,#071a31,#064338)}.dash-nav button.active,.dash-nav button:hover{background:#0b8f68}.login-view,.dash-main,#adminModal,dialog{background-color:#061426;color:#fff}.utility-panel{background:#0b2038;border-color:rgba(52,211,153,.5)}.site-utilities button{background:#0b2038;border-color:#34d399;color:#34d399}.site-utilities button:hover{background:#0b8f68;color:#fff}.secondary-cta{border-color:#34d399;color:#fff;background:rgba(11,143,104,.16)}.program-countdown{border-color:#34d399;background:rgba(6,20,38,.72)}.program-countdown b{color:#34d399}
.thumb[style]{background-repeat:no-repeat;background-position:center;background-color:#172b64}.thumb[style]::after{display:none}
.save-status{position:fixed;right:24px;bottom:24px;z-index:100;padding:13px 17px;border-radius:10px;color:white;font-size:13px;font-weight:700;box-shadow:0 14px 30px rgba(0,0,0,.3);animation:status-in .25s ease-out}.save-status.success{background:linear-gradient(100deg,#197d72,#3470c8)}.save-status.error{background:linear-gradient(100deg,#a13d58,#d26943)}@keyframes status-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.save-status{right:18px;left:18px;bottom:18px;text-align:center}}
.hero{text-align:center}.hero-inner{margin-left:auto;margin-right:auto}.hero h1{font-size:0;max-width:950px;margin-left:auto;margin-right:auto}.hero h1::after{content:'SELAMAT DATANG KE PORTAL DIGITAL RASMI SK API API KOTA KINABALU';display:block;font:700 clamp(38px,5.3vw,67px)/1.12 'Playfair Display',serif;letter-spacing:-.038em}.hero p:not(.eyebrow){margin-left:auto;margin-right:auto}.hero-stats{justify-content:center;text-align:left}.hero .primary{display:inline-block}
.secondary-cta{display:inline-block;margin-left:10px;padding:11px 16px;border:1px solid rgba(101,244,216,.8);border-radius:9px;color:#efffff;background:rgba(10,30,66,.35);font-weight:700;text-decoration:none;transition:.2s}.secondary-cta:hover{background:rgba(73,235,211,.18);transform:translateY(-2px)}@media(max-width:600px){.secondary-cta{margin:10px 0 0}.hero .primary{display:block;margin:auto;width:max-content}}

/* Palet navy blue digital neon */
:root{--ink:#edf6ff;--muted:#a8bdd8;--green:#2378ff;--lime:#38f5d1;--cream:#040b1d;--paper:#0a1733;--line:rgba(78,163,255,.22)}body{background:radial-gradient(circle at 82% 0,#123d84 0,transparent 28%),radial-gradient(circle at 4% 42%,#07526a 0,transparent 28%),#040b1d}.topbar{background:linear-gradient(90deg,#071631,#0b3370,#07546d)}.site-header{background:rgba(4,11,29,.91)}.admin-trigger,.primary{background:linear-gradient(100deg,#126dff,#129dc4);box-shadow:0 8px 24px rgba(20,125,255,.35)}.admin-trigger:hover,.primary:hover{background:linear-gradient(100deg,#089fd3,#20d7c0)}.hero{background:linear-gradient(105deg,rgba(2,9,29,.95),rgba(5,34,79,.79)),radial-gradient(circle at 72% 18%,rgba(38,241,209,.3),transparent 25%),url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1800&q=80') center/cover}.page-hero{background:linear-gradient(120deg,#071b4a,#0d4d91 58%,#087173)}.card,.info-card,.directory-card,.stat,.content-table,.log-list{background:linear-gradient(145deg,rgba(13,43,91,.94),rgba(6,22,54,.98))}.thumb{background:linear-gradient(135deg,#0d58bc,#0c9bb5)}.notice{background:linear-gradient(110deg,#0e4dba,#0a7197 58%,#087875)}.dash-side{background:linear-gradient(180deg,#071a48,#0b3677)}.dash-nav button.active,.dash-nav button:hover{background:linear-gradient(100deg,#155eca,#098ea5)}.page-hero:after{background:linear-gradient(130deg,transparent 0 45%,rgba(54,245,209,.19) 46% 47%,transparent 48%)}.stats-section{background:linear-gradient(140deg,rgba(5,29,77,.9),rgba(3,16,44,.94))}.stat-public{background:linear-gradient(145deg,rgba(11,63,140,.92),rgba(5,27,70,.99))}.achievement-table th{background:linear-gradient(90deg,#0a3a83,#0a6893)}
.hero-stats{display:none}
#adminModal{width:100vw;max-width:none;height:100vh;max-height:none;margin:0;border-radius:0;background:radial-gradient(circle at 75% 15%,#123f87 0,transparent 31%),radial-gradient(circle at 15% 85%,#075d73 0,transparent 30%),#040b1d}.login-view{width:100%;min-height:100vh;padding:52px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(120deg,rgba(4,11,29,.55),rgba(5,27,69,.18))}.login-view>p,.login-view h2,.login-view form,.login-view small{width:min(430px,100%)}.login-view .large{margin:0 0 22px}.login-view h2{font-size:clamp(34px,4vw,48px);text-align:center}.login-view>p:not(.eyebrow),.login-view .eyebrow{text-align:center}.login-view form{margin:30px 0 15px;padding:24px;border:1px solid rgba(108,190,255,.25);border-radius:16px;background:rgba(7,24,57,.72);box-shadow:0 20px 50px rgba(0,0,0,.28)}
.login-error{margin:12px 0 0;color:#ffbdc8;font-size:12px;font-weight:700;text-align:center}
.login-view[hidden],#dashboardView[hidden]{display:none!important}#dashboardView:not([hidden]){display:block;height:100vh}.dashboard{height:100vh}
.announcement-ticker{height:42px;display:flex;align-items:stretch;background:#071a42;border-bottom:1px solid rgba(67,240,210,.34);color:#e9f5ff;overflow:hidden}.announcement-label{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:0 21px;background:linear-gradient(100deg,#0c62c0,#0a9b9b);font-size:11px;font-weight:700;letter-spacing:.1em}.announcement-window{display:flex;align-items:center;overflow:hidden;min-width:0;flex:1}.announcement-track{white-space:nowrap;display:inline-block;padding-left:100%;font-size:13px;font-weight:600;animation:announcement-scroll 28s linear infinite}.announcement-ticker:hover .announcement-track{animation-play-state:paused}@keyframes announcement-scroll{to{transform:translateX(-100%)}}@media(max-width:600px){.announcement-label{padding:0 12px;font-size:9px}.announcement-track{font-size:12px}}
#announcementTicker{width:min(1180px,90vw);margin:0 auto;border:1px solid rgba(67,240,210,.34);border-radius:0 0 9px 9px;text-align:left}
.site-header + #announcementTicker{width:100%;margin:0;border-left:0;border-right:0;border-radius:0}
footer{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:start;gap:38px;padding-top:55px;padding-bottom:45px}footer .footer-brand p{max-width:290px;margin:16px 0 0;color:#b5c9e8;font-size:13px;line-height:1.65}footer .copyright{font-size:11px;color:#7d9fc9}footer h3{margin:3px 0 17px;font:700 15px 'DM Sans',sans-serif;color:#63f2d9}footer section>p{margin:0 0 10px;color:#c4d6f2;font-size:13px;line-height:1.5}footer section>a,footer section>p a{display:block;color:#dbeaff;text-decoration:none;font-size:13px;margin-bottom:10px}footer section>a:hover,footer section>p a:hover{color:#5cf4d8}.social-links{display:flex;gap:9px;margin-bottom:14px}.social-links a{display:grid;place-items:center;width:34px;height:34px;margin:0;border:1px solid rgba(104,239,218,.55);border-radius:50%;color:#65f2d9;font-size:16px;font-weight:700;text-decoration:none}.social-links a:hover{background:#53ecd5;color:#08214a}@media(max-width:900px){footer{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){footer{grid-template-columns:1fr;gap:28px}.footer-brand{margin-bottom:6px}}
.site-utilities{position:fixed;right:18px;bottom:20px;z-index:30;display:grid;gap:8px}.site-utilities button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(80,239,213,.55);background:#0a3171;color:#6af5d8;font-size:18px;box-shadow:0 8px 20px rgba(0,0,0,.25)}.site-utilities button:hover{background:#098ca2;color:white}.utility-panel{position:fixed;z-index:40;right:70px;bottom:25px;width:min(390px,calc(100vw - 100px));max-height:70vh;overflow:auto;padding:23px;border:1px solid rgba(85,231,216,.4);border-radius:15px;background:#081a42;color:#eaf4ff;box-shadow:0 25px 55px rgba(0,0,0,.45)}.utility-panel h2{font-size:24px;margin:0 0 12px}.utility-panel input{width:100%;padding:12px;border:1px solid #426db5;border-radius:8px;background:#102958;color:white}.panel-close{float:right;background:none;color:white;font-size:24px}.utility-panel a{display:block;padding:10px 0;color:#85f5de;text-decoration:none;border-bottom:1px solid rgba(126,180,255,.15)}.utility-panel a span{display:block;color:#9db7dc;font-size:11px;margin-top:3px}.chat-log{padding:11px;margin:14px 0;background:#102857;border-radius:8px;font-size:13px;line-height:1.5}.chat-log p{margin:7px 0}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}.calendar-days b{color:#65f2d9;font-size:11px}.calendar-days span,.calendar-days i{padding:8px 2px;font-style:normal}.calendar-days .today{border-radius:50%;background:#1a78cd}.visitor-analytics,.weather-widget{position:fixed;left:18px;z-index:25;padding:8px 12px;border:1px solid rgba(91,238,215,.27);border-radius:20px;background:rgba(5,26,65,.84);color:#d9edff;font-size:11px}.visitor-analytics{bottom:18px}.weather-widget{bottom:52px}.program-countdown{display:flex;justify-content:center;gap:12px;margin:24px auto 0;padding:11px 16px;width:max-content;max-width:100%;border:1px solid rgba(95,245,218,.45);border-radius:9px;background:rgba(4,24,66,.6);color:#dffaff;font-size:13px}.program-countdown b{color:#62f2d8}@media(max-width:600px){.utility-panel{right:14px;left:14px;width:auto;bottom:76px}.visitor-analytics{display:none}.weather-widget{left:12px;bottom:14px}.site-utilities{right:12px;bottom:70px}.program-countdown{font-size:11px}}
.visitor-analytics,.weather-widget{display:none}
.light-mode{--ink:#102049;--muted:#496384;--cream:#edf6ff;--paper:#fff;background:#eaf4ff;color:#102049}.light-mode .site-header,.light-mode .announcement-ticker{background:#f7fbff;color:#102049}.light-mode .card,.light-mode .stat-public,.light-mode .info-card{background:#fff;color:#102049}.light-mode .section.alt,.light-mode .directory,.light-mode .stats-section{background:#e8f3ff}.light-mode .utility-panel{background:#fff;color:#102049}

/* Palet rasmi: navy, emerald, putih dan mustard */
:root{--ink:#f8fafc;--muted:#b8c6d6;--green:#087f5b;--lime:#d4a72c;--cream:#06152e;--paper:#0c2344;--line:rgba(255,255,255,.16);--orange:#d4a72c}body{background:radial-gradient(circle at 85% 0,rgba(8,127,91,.32),transparent 29%),radial-gradient(circle at 0 45%,rgba(212,167,44,.15),transparent 24%),#06152e;color:#f8fafc}.topbar{background:linear-gradient(90deg,#041027,#0b2345,#087f5b);color:#fff}.site-header{background:rgba(6,21,46,.94);border-bottom-color:rgba(212,167,44,.36)}.brand,.site-header .brand{color:#fff}.site-header .brand strong::after{color:#d4a72c}.admin-trigger,.primary{background:linear-gradient(105deg,#087f5b,#0a9b70);color:#fff;box-shadow:0 8px 22px rgba(8,127,91,.3)}.admin-trigger:hover,.primary:hover{background:linear-gradient(105deg,#d4a72c,#b98716);color:#06152e}.menu-trigger{border-color:rgba(212,167,44,.62);background:#0c2344;color:#d4a72c}.menu-trigger:hover,.menu-trigger.open{background:#087f5b;border-color:#fff;color:#fff}.hero{background:linear-gradient(105deg,rgba(4,16,39,.94),rgba(6,41,55,.78)),radial-gradient(circle at 72% 18%,rgba(8,127,91,.32),transparent 25%),url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1800&q=80') center/cover}.hero .eyebrow,.page-hero .eyebrow,.tag,.card-link,footer h3{color:#d4a72c}.page-hero{background:linear-gradient(120deg,#06152e,#0b3150 55%,#087f5b)}.card,.info-card,.directory-card,.stat,.content-table,.log-list{background:linear-gradient(145deg,rgba(15,42,76,.96),rgba(7,26,53,.98));border-color:rgba(255,255,255,.14)}.card:hover,.directory-card:hover{border-color:#d4a72c;box-shadow:0 17px 35px rgba(8,127,91,.22)}.thumb{background:linear-gradient(135deg,#087f5b,#d4a72c)}.notice{background:linear-gradient(110deg,#087f5b,#07664b 62%,#d4a72c);color:#fff}.notice p{color:#f5f7f4}.stats-section{background:linear-gradient(140deg,#0a2344,#071a35)}.stat-public{background:linear-gradient(145deg,#0b3e51,#0a2344);border-color:rgba(212,167,44,.3)}.stat-public b,.stat-public h3,.achievement-table td span{color:#d4a72c}.achievement-table th{background:linear-gradient(90deg,#087f5b,#0a5f49);color:#fff}.announcement-label{background:linear-gradient(100deg,#087f5b,#d4a72c);color:#06152e}.announcement-ticker{background:#0a2344;border-color:rgba(212,167,44,.4)}footer{background:linear-gradient(110deg,#041027,#08213f 58%,#075640);border-top-color:rgba(212,167,44,.3)}.social-links a{border-color:#d4a72c;color:#d4a72c}.social-links a:hover{background:#d4a72c;color:#06152e}.site-utilities button{background:#087f5b;border-color:#d4a72c;color:#fff}.site-utilities button:hover{background:#d4a72c;color:#06152e}.dash-side{background:linear-gradient(180deg,#06152e,#087f5b)}.dash-nav button.active,.dash-nav button:hover{background:#d4a72c;color:#06152e}.status{background:#0b5f48;color:#fff}.secondary-cta{border-color:#d4a72c;color:#fff;background:rgba(6,21,46,.55)}.secondary-cta:hover{background:#d4a72c;color:#06152e}.light-mode{--ink:#10223c;--muted:#53657a;--cream:#f6f7f3;--paper:#fff;background:#f6f7f3;color:#10223c}.light-mode .site-header,.light-mode .announcement-ticker{background:#fff;color:#10223c}.light-mode .card,.light-mode .stat-public,.light-mode .info-card{background:#fff;color:#10223c;border-color:rgba(6,21,46,.14)}.light-mode .section.alt,.light-mode .directory,.light-mode .stats-section{background:#eef3ee}.light-mode .utility-panel{background:#fff;color:#10223c}

/* Navy blue + neon + putih + mustard */
:root{--ink:#ffffff;--muted:#b9c9df;--green:#168bff;--lime:#41f5d0;--mustard:#d6a928;--cream:#030a19;--paper:#091833;--line:rgba(214,169,40,.28)}body{background:radial-gradient(circle at 80% 0,rgba(13,75,151,.58),transparent 28%),radial-gradient(circle at 5% 45%,rgba(7,115,126,.35),transparent 27%),#030a19}.topbar{background:linear-gradient(90deg,#06132d,#0a356c 62%,#5c4811)}.site-header{background:rgba(3,10,25,.94);border-bottom-color:rgba(214,169,40,.35)}.site-header .brand strong,.site-header .brand b{color:#fff}.admin-trigger,.primary{background:linear-gradient(105deg,#1676e8,#0c9fa7);border:1px solid rgba(65,245,208,.36)}.menu-trigger{border-color:rgba(214,169,40,.65);color:#f3c84f}.menu-trigger:hover,.menu-trigger.open{background:linear-gradient(105deg,#7a5b0a,#d6a928);color:#071126;border-color:#f7d96f}.hero{background:linear-gradient(105deg,rgba(2,8,25,.95),rgba(7,36,78,.82)),radial-gradient(circle at 73% 18%,rgba(65,245,208,.26),transparent 25%),url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1800&q=80') center/cover}.hero h1::after,.page-hero h1,.section-head h2{color:#fff}.eyebrow,.hero .eyebrow,.page-hero .eyebrow,.tag{color:#f0c64f}.card,.info-card,.directory-card,.stat,.content-table,.log-list{background:linear-gradient(145deg,rgba(12,43,88,.96),rgba(5,20,49,.99));border-color:rgba(214,169,40,.28)}.card:hover,.directory-card:hover{border-color:#f0c64f;box-shadow:0 18px 38px rgba(14,148,210,.2)}.card-link,.directory-card>b,footer h3{color:#49f0d2}.notice{background:linear-gradient(110deg,#0d4b9c,#087787 64%,#8b6710)}.stat-public{background:linear-gradient(145deg,#0c418a,#071e49);border-color:rgba(214,169,40,.4)}.stat-public b,.info-facts b{color:#f1c64d}.achievement-table th{color:#fff5cc;background:linear-gradient(90deg,#0b3877,#12697e 72%,#7e6011)}.announcement-label{color:#081228;background:linear-gradient(100deg,#d6a928,#f2cf67)}.announcement-ticker{border-color:rgba(214,169,40,.45)}footer{background:linear-gradient(110deg,#030a19,#071d43 68%,#44360c);border-top-color:rgba(214,169,40,.4)}.social-links a{border-color:#d6a928;color:#f4ca50}.social-links a:hover{background:#d6a928;color:#071126}.site-utilities button{border-color:rgba(214,169,40,.7);color:#f2c94f;background:#09285d}.site-utilities button:hover{background:#d6a928;color:#071126}.program-countdown{border-color:rgba(214,169,40,.65)}.program-countdown b{color:#f1c64d}.light-mode{--ink:#10203e;--muted:#536780;--cream:#f6f8fb;--paper:#fff;background:#f6f8fb;color:#10203e}.light-mode .site-header,.light-mode .announcement-ticker{background:#fff;color:#10203e}.light-mode .card,.light-mode .stat-public,.light-mode .info-card{background:#fff;color:#10203e;border-color:rgba(174,126,8,.34)}
.site-header .brand strong::after{content:' KOTA KINABALU';font:inherit;letter-spacing:inherit;color:inherit}@media(max-width:600px){.site-header .brand strong::after{font-size:inherit}}
.menu-trigger span:last-child{display:none}.menu-trigger{width:42px;height:42px;justify-content:center;padding:0}
.site-header .admin-trigger{margin-left:auto}.site-header .menu-trigger{margin-left:8px}
.site-header .admin-trigger{width:42px;height:42px;padding:0;font-size:0;display:grid;place-items:center}.site-header .admin-trigger::after{content:'⌘';font-size:19px;line-height:1}
.crest{font-size:0!important;border:0!important;background:#fff url('https://iili.io/Cr7yVHJ.md.jpg') center/contain no-repeat!important;box-shadow:0 0 16px rgba(56,245,209,.28)}

/* Digital Emerald Neon Education */
:root{--navy:#0F172A;--midnight:#1E293B;--emerald:#10B981;--cyan:#06B6D4;--blue:#3B82F6;--gold:#FBBF24;--ink:#F8FAFC;--muted:#CBD5E1;--cream:#0F172A;--paper:rgba(30,41,59,.68);--line:rgba(148,163,184,.2);--shadow:0 22px 55px rgba(2,6,23,.35)}html{background:#0F172A}body{font-family:'Inter',sans-serif;background:radial-gradient(circle at 10% 10%,rgba(16,185,129,.13),transparent 30%),radial-gradient(circle at 90% 20%,rgba(59,130,246,.14),transparent 28%),linear-gradient(135deg,#0F172A,#1E293B);color:#F8FAFC}h1,h2,h3,.brand strong,.hero h1::after{font-family:'Poppins',sans-serif!important}.site-header{background:rgba(15,23,42,.78);border-bottom:1px solid rgba(6,182,212,.25);backdrop-filter:blur(20px);box-shadow:0 8px 35px rgba(2,6,23,.22)}.topbar{background:linear-gradient(90deg,#0F172A,#14263c);border-bottom:1px solid rgba(16,185,129,.18)}.hero{background:linear-gradient(110deg,rgba(15,23,42,.96),rgba(30,41,59,.82)),radial-gradient(circle at 72% 18%,rgba(6,182,212,.22),transparent 28%),url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1800&q=80') center/cover}.page-hero{background:radial-gradient(circle at 80% 20%,rgba(251,191,36,.13),transparent 25%),linear-gradient(120deg,#0F172A,#164E63 55%,#065F46)}.eyebrow,.hero .eyebrow,.page-hero .eyebrow{color:#67E8F9}.card,.info-card,.directory-card,.stat,.stat-public,.log-list,.content-table,.achievement-table-wrap,.utility-panel,.program-countdown,.login-view form{background:linear-gradient(145deg,rgba(30,41,59,.72),rgba(15,23,42,.64));border:1px solid rgba(148,163,184,.2);border-radius:22px;box-shadow:0 18px 45px rgba(2,6,23,.28);backdrop-filter:blur(18px);transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease}.card:hover,.info-card:hover,.directory-card:hover,.stat-public:hover{transform:translateY(-7px);border-color:rgba(16,185,129,.7);box-shadow:0 20px 50px rgba(2,6,23,.34),0 0 28px rgba(16,185,129,.18)}.thumb{background:linear-gradient(135deg,#3B82F6,#06B6D4 52%,#10B981);border-bottom:1px solid rgba(255,255,255,.12)}.card,.thumb{border-radius:22px}.card .thumb{border-radius:22px 22px 0 0}.tag,.card-link,.directory-card>b,.stat-public b,.info-facts b,.achievement-table td span,footer h3{color:#34D399}.admin-trigger,.primary,.menu-trigger,.secondary-cta,.outline,.ghost,.site-utilities button,.social-links a{border:1px solid rgba(103,232,249,.55);border-radius:14px;background:linear-gradient(115deg,#10B981,#06B6D4 52%,#3B82F6);color:#fff;box-shadow:0 0 18px rgba(16,185,129,.28),0 9px 26px rgba(2,6,23,.28);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}.admin-trigger:hover,.primary:hover,.menu-trigger:hover,.secondary-cta:hover,.outline:hover,.ghost:hover,.site-utilities button:hover,.social-links a:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.12);box-shadow:0 0 27px rgba(6,182,212,.42),0 12px 32px rgba(2,6,23,.34)}.directory-card>span,.stat-public>span,.mini-pic{filter:drop-shadow(0 7px 10px rgba(2,6,23,.45));transform:perspective(120px) rotateX(8deg);text-shadow:0 3px 10px rgba(6,182,212,.42)}.notice{border-radius:24px;background:linear-gradient(120deg,rgba(59,130,246,.82),rgba(6,182,212,.76),rgba(16,185,129,.8));box-shadow:0 20px 55px rgba(2,6,23,.3)}.stats-section,.section.alt,.directory{background:linear-gradient(135deg,rgba(15,23,42,.72),rgba(30,41,59,.54))}.announcement-ticker{background:rgba(15,23,42,.88);border-color:rgba(6,182,212,.42);backdrop-filter:blur(14px)}.announcement-label{background:linear-gradient(105deg,#10B981,#06B6D4);color:#fff;box-shadow:6px 0 20px rgba(6,182,212,.2)}.achievement-table th{background:linear-gradient(90deg,#065F46,#0891B2,#2563EB);color:#fff}.achievement-table tr:hover td{background:rgba(16,185,129,.08)}.dash-side{background:linear-gradient(180deg,#0F172A,#0B3B36);box-shadow:8px 0 30px rgba(2,6,23,.25)}.dash-nav button.active,.dash-nav button:hover{background:linear-gradient(100deg,#10B981,#0891B2);box-shadow:0 0 18px rgba(16,185,129,.24)}.dash-main,#adminModal,dialog{background:radial-gradient(circle at 85% 8%,rgba(59,130,246,.12),transparent 28%),linear-gradient(135deg,#0F172A,#1E293B);color:#F8FAFC}.editor-head,.editor-actions{background:rgba(15,23,42,.8)}footer{background:linear-gradient(115deg,#0B1120,#0F2940 60%,#064E3B);border-top:1px solid rgba(16,185,129,.32)}.hamburger-menu{background:rgba(15,23,42,.94);border-color:rgba(6,182,212,.35);border-radius:18px}.hamburger-menu a:hover{background:linear-gradient(90deg,rgba(16,185,129,.2),rgba(6,182,212,.16));color:#fff}.info-facts div{border-radius:20px;background:linear-gradient(145deg,rgba(59,130,246,.22),rgba(16,185,129,.12));border-color:rgba(6,182,212,.23)}.status{background:rgba(16,185,129,.18);color:#6EE7B7}.status.draft{background:rgba(251,191,36,.15);color:#FBBF24}.save-status.success{background:linear-gradient(100deg,#10B981,#06B6D4)}.save-status.error{background:linear-gradient(100deg,#F59E0B,#EF4444)}.light-mode{--ink:#0F172A;--muted:#475569;background:linear-gradient(135deg,#F8FAFC,#E2E8F0);color:#0F172A}.light-mode .site-header,.light-mode .card,.light-mode .info-card,.light-mode .stat-public,.light-mode .utility-panel{background:rgba(255,255,255,.82);color:#0F172A}.light-mode .section.alt,.light-mode .stats-section{background:#EAF5F2}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(max-width:600px){.card,.info-card,.stat-public,.utility-panel{border-radius:20px}.hero{padding-top:64px;padding-bottom:64px}}
.site-header{column-gap:0}.site-header .menu-trigger{margin-left:5px}.site-header .admin-trigger{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1}.site-header .admin-trigger::after{display:block;margin:0;line-height:1;transform:translateY(0)}
.font-controls{display:inline-flex;gap:3px;margin:0 0 0 18px;vertical-align:middle}.font-controls button{min-width:27px;height:23px;padding:0 5px;border:1px solid rgba(103,232,249,.5);border-radius:6px;background:rgba(16,185,129,.18);color:#fff;font:700 10px 'Inter',sans-serif;line-height:1;box-shadow:0 0 9px rgba(16,185,129,.18)}.font-controls button:hover{background:#10B981;box-shadow:0 0 13px rgba(16,185,129,.45)}

/* Pautan pantas di bawah pencapaian sekolah */
.quick-links-section{padding-top:58px;background:radial-gradient(circle at 90% 10%,rgba(6,182,212,.1),transparent 28%),linear-gradient(135deg,rgba(15,23,42,.8),rgba(30,41,59,.58))}.quick-links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.quick-links-grid a{min-height:116px;display:flex;align-items:center;gap:14px;padding:20px 18px;position:relative;overflow:hidden;border:1px solid rgba(103,232,249,.24);border-radius:21px;background:linear-gradient(145deg,rgba(30,41,59,.86),rgba(15,23,42,.72));color:#fff;text-decoration:none;box-shadow:0 15px 34px rgba(2,6,23,.27);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.quick-links-grid a:before{content:'';position:absolute;width:90px;height:90px;right:-42px;top:-48px;border-radius:50%;background:rgba(16,185,129,.12);transition:transform .35s ease}.quick-links-grid a:hover{transform:translateY(-6px);border-color:#34D399;box-shadow:0 20px 40px rgba(2,6,23,.34),0 0 26px rgba(16,185,129,.2)}.quick-links-grid a:hover:before{transform:scale(1.5)}.quick-links-grid a>span{width:46px;height:46px;display:grid;place-items:center;flex:none;border-radius:14px;background:linear-gradient(135deg,#10B981,#06B6D4 58%,#3B82F6);font-size:21px;box-shadow:0 0 18px rgba(6,182,212,.3),inset 0 1px rgba(255,255,255,.28)}.quick-links-grid a>div{min-width:0}.quick-links-grid b{display:block;margin-bottom:5px;font:600 14px 'Poppins',sans-serif}.quick-links-grid small{display:block;color:#B9C9DF;font:400 11px/1.45 'Inter',sans-serif}.quick-links-grid i{margin-left:auto;flex:none;color:#67E8F9;font-size:19px;font-style:normal;transition:transform .25s ease}.quick-links-grid a:hover i{transform:translateX(4px)}@media(max-width:900px){.quick-links-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.quick-links-section{padding-top:42px}.quick-links-grid{grid-template-columns:1fr}.quick-links-grid a{min-height:100px;padding:17px}.quick-links-grid a>span{width:43px;height:43px}}

/* Countdown program */
.program-countdown.countdown-fixed{width:min(650px,100%);margin:28px 0 0;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:18px;border:1px solid rgba(103,232,249,.5);background:linear-gradient(135deg,rgba(15,23,42,.88),rgba(6,78,59,.64));box-shadow:0 0 24px rgba(16,185,129,.2),0 16px 34px rgba(2,6,23,.3);backdrop-filter:blur(15px)}.countdown-title{display:flex;align-items:center;gap:7px;color:#F8FAFC;line-height:1.4}.countdown-title strong{font:600 13px 'Poppins',sans-serif}.countdown-units{display:flex;align-items:center;gap:7px}.countdown-units>span{min-width:48px;padding:7px 8px;text-align:center;border:1px solid rgba(103,232,249,.2);border-radius:10px;background:rgba(15,23,42,.62)}.countdown-units b{display:block;color:#6EE7B7;font:700 17px 'Poppins',sans-serif;line-height:1.05}.countdown-units small{display:block;margin-top:4px;color:#CBD5E1;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.countdown-message{color:#FBBF24!important;font-size:12px!important}@media(max-width:600px){.program-countdown.countdown-fixed{align-items:flex-start;flex-direction:column;width:100%;gap:11px;padding:13px}.countdown-units{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.countdown-units>span{min-width:0;padding:7px 3px}.countdown-title strong{font-size:11px}}
.countdown-form-help{margin:2px 0 0;padding:11px 13px;border-radius:10px;background:rgba(6,182,212,.1);color:#A5F3FC;font-size:12px;line-height:1.5}

/* Tajuk besar aktiviti akan datang. */
.upcoming-activity-title{margin:38px 0 0;color:#F8FAFC;font:700 clamp(25px,3.2vw,38px)/1.18 'Poppins',sans-serif;letter-spacing:-.025em;text-shadow:0 0 20px rgba(6,182,212,.28)}.upcoming-activity-title:after{content:'';display:block;width:72px;height:3px;margin-top:11px;border-radius:99px;background:linear-gradient(90deg,#10B981,#06B6D4,#3B82F6);box-shadow:0 0 14px rgba(6,182,212,.45)}

/* Kad countdown aktiviti di bawah Statistik Utama. */
.program-countdown.countdown-card{width:100%;margin:24px 0 0;padding:22px 24px;border-radius:22px;background:radial-gradient(circle at 8% 50%,rgba(16,185,129,.2),transparent 28%),linear-gradient(135deg,rgba(15,23,42,.9),rgba(6,78,59,.64),rgba(8,47,73,.78));box-shadow:0 18px 42px rgba(2,6,23,.34),0 0 26px rgba(16,185,129,.16)}.countdown-card-heading{display:flex;align-items:center;gap:14px;min-width:0}.countdown-icon{width:52px;height:52px;display:grid;place-items:center;flex:none;border:1px solid rgba(103,232,249,.42);border-radius:16px;background:linear-gradient(135deg,#10B981,#06B6D4);font-size:24px;box-shadow:0 0 20px rgba(6,182,212,.24)}.countdown-card-heading small{display:block;margin-bottom:4px;color:#67E8F9;font:700 9px 'Inter',sans-serif;letter-spacing:.15em}.countdown-card-heading strong{display:block;color:#F8FAFC;font:700 clamp(14px,2vw,18px)/1.35 'Poppins',sans-serif}@media(max-width:700px){.program-countdown.countdown-card{padding:18px;gap:16px}.countdown-card-heading{width:100%}.countdown-icon{width:46px;height:46px}.countdown-card-heading strong{font-size:13px}}

/* Halaman Info Sekolah */
.school-info-hero{background:radial-gradient(circle at 82% 18%,rgba(251,191,36,.15),transparent 24%),linear-gradient(120deg,#0F172A,#164E63 55%,#065F46)}.school-info-section{background:radial-gradient(circle at 8% 8%,rgba(16,185,129,.09),transparent 24%),linear-gradient(135deg,rgba(15,23,42,.82),rgba(30,41,59,.62))}.school-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.school-info-card{min-height:235px;position:relative;overflow:hidden;border:1px solid rgba(103,232,249,.22);border-radius:23px;background:linear-gradient(145deg,rgba(30,41,59,.84),rgba(15,23,42,.72));box-shadow:0 18px 42px rgba(2,6,23,.3);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.school-info-card.wide{grid-column:span 2}.school-info-card:hover{transform:translateY(-5px);border-color:rgba(52,211,153,.68);box-shadow:0 23px 48px rgba(2,6,23,.34),0 0 25px rgba(16,185,129,.16)}.school-info-card:after{content:'';position:absolute;width:155px;height:155px;right:-75px;bottom:-85px;border-radius:50%;background:rgba(6,182,212,.09);pointer-events:none}.school-info-image{height:210px;background-size:cover;background-position:center;border-bottom:1px solid rgba(103,232,249,.18)}.school-info-content{display:flex;align-items:flex-start;gap:17px;padding:27px}.school-info-content>span{width:51px;height:51px;display:grid;place-items:center;flex:none;border-radius:15px;background:linear-gradient(135deg,#10B981,#06B6D4 58%,#3B82F6);font-size:23px;box-shadow:0 0 20px rgba(6,182,212,.27)}.school-info-copy{min-width:0}.school-info-copy .eyebrow{margin:2px 0 7px}.school-info-copy h2{margin:0 0 10px;font-size:clamp(21px,2vw,27px)}.school-info-copy>p:not(.eyebrow){margin:0;color:#CBD5E1;font-size:13px;line-height:1.75;white-space:pre-line}.light-mode .school-info-card{background:rgba(255,255,255,.86);color:#0F172A}.light-mode .school-info-copy>p:not(.eyebrow){color:#475569}@media(max-width:700px){.school-info-grid{grid-template-columns:1fr}.school-info-card.wide{grid-column:auto}.school-info-card{min-height:0}.school-info-content{padding:22px}.school-info-image{height:175px}}
.school-song-player{margin-top:20px;padding:15px;border:1px solid rgba(103,232,249,.28);border-radius:16px;background:linear-gradient(135deg,rgba(16,185,129,.13),rgba(6,182,212,.1));position:relative;z-index:1}.school-song-player>div{display:flex;align-items:center;gap:11px;margin-bottom:12px}.school-song-player>div>span{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#10B981,#06B6D4);color:#fff;font-size:18px;box-shadow:0 0 14px rgba(16,185,129,.25)}.school-song-player p{margin:0!important}.school-song-player b{display:block;color:#F8FAFC;font:600 12px 'Poppins',sans-serif}.school-song-player small{display:block;margin-top:2px;color:#A5F3FC;font-size:10px}.school-song-player audio{display:block;width:100%;height:42px;accent-color:#10B981}.audio-upload-field{padding:13px;border:1px solid rgba(6,182,212,.25);border-radius:11px;background:rgba(6,182,212,.08)}.audio-upload-field small{display:block;margin-top:7px;color:#A5F3FC;font-weight:400}.remove-audio{display:flex!important;align-items:center;gap:8px;color:#FBBF24}.remove-audio input{width:auto!important;margin:0!important}.light-mode .school-song-player b{color:#0F172A}

/* Nisbah gambar Guru Besar diseragamkan dengan gambar guru lain. */
.feature-grid{align-items:start}.feature-grid>.leader-card{width:100%;min-height:0;aspect-ratio:3/4;background-size:cover,contain!important;background-position:center,center top!important;background-repeat:no-repeat!important}@media(max-width:600px){.feature-grid>.leader-card{aspect-ratio:4/5}}

/* Pastikan nama sekolah pada kad tajuk kekal sebaris. */
.hero h1::after{content:'SELAMAT DATANG KE PORTAL DIGITAL RASMI SK\00a0 API\00a0 API\00a0 KOTA\00a0 KINABALU'}@media(max-width:600px){.hero h1::after{font-size:clamp(21px,7vw,30px);line-height:1.2;letter-spacing:-.025em}}
.hero h1::after,.page-hero h1{text-shadow:0 0 8px rgba(255,255,255,.45),0 0 18px rgba(16,185,129,.55),0 0 34px rgba(6,182,212,.4);animation:title-neon 3.2s ease-in-out infinite alternate}@keyframes title-neon{from{text-shadow:0 0 7px rgba(255,255,255,.38),0 0 16px rgba(16,185,129,.42),0 0 28px rgba(6,182,212,.28)}to{text-shadow:0 0 10px rgba(255,255,255,.62),0 0 24px rgba(16,185,129,.68),0 0 42px rgba(59,130,246,.45)}}.site-header .brand b{display:none}.site-header .brand strong{display:flex;align-items:center;white-space:nowrap;margin:0;font-size:20px}.site-header .brand strong::before{content:'SK\00a0'}.site-header .brand strong::after{content:'\00a0 KOTA KINABALU'}@media(max-width:600px){.site-header .brand strong{font-size:15px}}
.site-header .brand strong::before{content:'SEKOLAH\00a0 KEBANGSAAN\00a0'}.site-header .brand strong{font-size:clamp(14px,1.35vw,19px)}@media(max-width:760px){.site-header .brand strong{font-size:11px;letter-spacing:-.02em}.site-header .brand{gap:7px}.site-header .crest{width:38px;height:38px;flex:none}}@media(max-width:600px){.site-header .brand strong{font-size:9px}}

/* Maklumat sekolah dalam footer */
footer{grid-template-columns:minmax(320px,1.8fr) 1fr 1fr}.footer-school-details{max-width:590px}.footer-school-details h3{margin:22px 0 7px;font-size:18px}.footer-school-details .footer-school-name{margin:0 0 9px;color:#F8FAFC;font-weight:700;font-size:14px}.footer-school-details address{color:#CBD5E1;font-size:13px;line-height:1.7;font-style:normal}.footer-contact{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px;color:#D7E8F5;font-size:13px}.footer-contact a{color:#6EE7B7;text-decoration:none}.footer-contact a:hover{color:#67E8F9}.footer-school-details .copyright{margin-top:18px}@media(max-width:900px){footer{grid-template-columns:1.5fr 1fr}.footer-school-details{grid-column:1/-1}}@media(max-width:600px){footer{grid-template-columns:1fr}.footer-school-details{grid-column:auto}.footer-contact{display:grid;gap:6px}}
.footer-bottom-copyright{grid-column:1/-1;width:100%;max-width:none!important;margin:16px 0 -18px!important;padding-top:22px;border-top:1px solid rgba(103,232,249,.18);text-align:center;color:#94A3B8!important;font-size:11px!important;letter-spacing:.02em}

/* Slaid gambar kad tajuk */
.hero{overflow:hidden}.hero-slideshow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.hero-slide{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);animation:hero-slide-fade 24s ease-in-out infinite}.hero-slide:nth-child(2){animation-delay:-8s}.hero-slide:nth-child(3){animation-delay:-16s}.hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(15,23,42,.94),rgba(15,23,42,.67) 55%,rgba(6,78,59,.45)),radial-gradient(circle at 72% 18%,rgba(6,182,212,.18),transparent 28%)}.hero>.hero-inner{position:relative;z-index:2}.hero-slide-dots{position:absolute;left:50%;bottom:20px;display:flex;gap:7px;transform:translateX(-50%);z-index:2}.hero-slide-dots i{width:23px;height:4px;border-radius:9px;background:rgba(255,255,255,.35);animation:hero-dot 24s ease-in-out infinite}.hero-slide-dots i:nth-child(2){animation-delay:-8s}.hero-slide-dots i:nth-child(3){animation-delay:-16s}@keyframes hero-slide-fade{0%,28%{opacity:1;transform:scale(1.04)}34%,94%{opacity:0;transform:scale(1.1)}100%{opacity:1;transform:scale(1.04)}}@keyframes hero-dot{0%,28%{background:#34D399;box-shadow:0 0 10px rgba(52,211,153,.65)}34%,94%{background:rgba(255,255,255,.32);box-shadow:none}100%{background:#34D399}}@media(prefers-reduced-motion:reduce){.hero-slide{animation:none;opacity:0}.hero-slide:first-child{opacity:1}.hero-slide-dots{display:none}}
.hero>.hero-inner>.eyebrow{font-size:clamp(14px,1.35vw,17px);line-height:1.3;letter-spacing:.2em;margin-bottom:16px;color:#67E8F9;text-shadow:0 0 10px rgba(6,182,212,.45)}@media(max-width:600px){.hero>.hero-inner>.eyebrow{font-size:13px;letter-spacing:.15em;margin-bottom:13px}}

/* Latar digital neon cyan dan biru */
body{background-color:#020817;background-image:linear-gradient(rgba(6,182,212,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.05) 1px,transparent 1px),radial-gradient(circle at 12% 8%,rgba(6,182,212,.26),transparent 26%),radial-gradient(circle at 88% 28%,rgba(37,99,235,.26),transparent 30%),radial-gradient(circle at 50% 82%,rgba(14,116,144,.18),transparent 34%),linear-gradient(135deg,#020817,#071733 48%,#041429);background-size:42px 42px,42px 42px,auto,auto,auto,auto;background-attachment:fixed}.section,.section.alt,.directory,.stats-section,.school-info-section,.quick-links-section{background:linear-gradient(135deg,rgba(3,12,31,.72),rgba(7,34,65,.6))}.section:nth-of-type(even){box-shadow:inset 0 1px rgba(34,211,238,.08),inset 0 -1px rgba(59,130,246,.08)}.card,.info-card,.school-info-card,.directory-card,.stat-public,.achievement-table-wrap{background:linear-gradient(145deg,rgba(8,38,72,.82),rgba(3,15,39,.82));border-color:rgba(34,211,238,.25);box-shadow:0 18px 44px rgba(0,8,28,.38),inset 0 1px rgba(125,211,252,.05)}.card:hover,.info-card:hover,.school-info-card:hover,.directory-card:hover,.stat-public:hover{border-color:#22D3EE;box-shadow:0 22px 48px rgba(0,8,28,.44),0 0 28px rgba(6,182,212,.2)}.site-header{background:rgba(2,8,23,.82);border-bottom-color:rgba(34,211,238,.32)}.topbar{background:linear-gradient(90deg,#020817,#062654 55%,#083B66)}.page-hero{background:radial-gradient(circle at 82% 20%,rgba(34,211,238,.22),transparent 25%),linear-gradient(120deg,#020817,#073B67 58%,#075985)}footer{background:linear-gradient(115deg,#020817,#05254A 60%,#063D56);border-top-color:rgba(34,211,238,.32)}

/* Kad Statistik Pelawat di bawah Ekosistem Digital Sekolah. */
.visitor-card-section{padding-top:24px;padding-bottom:58px;background:linear-gradient(135deg,rgba(3,12,31,.72),rgba(7,34,65,.6))}.visitor-card{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:29px 32px;border:1px solid rgba(52,211,153,.3);border-radius:24px;background:radial-gradient(circle at 8% 50%,rgba(16,185,129,.18),transparent 30%),linear-gradient(125deg,rgba(8,47,83,.88),rgba(3,16,42,.92));box-shadow:0 20px 48px rgba(0,7,25,.4),0 0 28px rgba(16,185,129,.1)}.visitor-card-heading{display:flex;align-items:center;gap:15px;min-width:260px}.visitor-card-heading>span{width:58px;height:58px;display:grid;place-items:center;flex:none;border:1px solid rgba(103,232,249,.4);border-radius:18px;background:linear-gradient(135deg,#10B981,#06B6D4 55%,#3B82F6);color:#fff;font-size:26px;box-shadow:0 0 22px rgba(6,182,212,.24)}.visitor-card-heading .eyebrow{margin-bottom:5px}.visitor-card-heading h2{color:#F8FAFC;font:700 clamp(21px,2.5vw,31px)/1.2 'Poppins',sans-serif}.visitor-card-stats{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:14px;flex:1;max-width:650px}.visitor-card-stats>div{min-height:118px;display:grid;grid-template-columns:auto 1fr;align-content:center;column-gap:12px;padding:18px 20px;border:1px solid rgba(103,232,249,.2);border-radius:18px;background:linear-gradient(145deg,rgba(15,23,42,.62),rgba(6,78,59,.35))}.visitor-card-stats>div>span{grid-row:1/3;align-self:center;color:#67E8F9;font-size:25px;text-shadow:0 0 13px rgba(6,182,212,.55)}.visitor-card-stats b{color:#6EE7B7;font:700 30px/1 'Poppins',sans-serif}.visitor-card-stats small{margin-top:7px;color:#CBD5E1;font-size:10px;letter-spacing:.07em;text-transform:uppercase}@media(max-width:850px){.visitor-card{align-items:stretch;flex-direction:column}.visitor-card-heading{min-width:0}.visitor-card-stats{width:100%;max-width:none}}@media(max-width:560px){.visitor-card-section{padding-top:18px;padding-bottom:42px}.visitor-card{padding:22px 18px}.visitor-card-stats{grid-template-columns:1fr}.visitor-card-stats>div{min-height:103px}.visitor-card-heading h2{font-size:22px}}

/* Kad Ekosistem Digital Sekolah */
.digital-ecosystem-section{padding-top:28px;background:linear-gradient(135deg,rgba(3,12,31,.72),rgba(7,34,65,.6))}.digital-ecosystem-card{min-height:330px;display:grid;grid-template-columns:minmax(220px,.75fr) 1.55fr;align-items:center;gap:42px;padding:42px;overflow:hidden;position:relative;border:1px solid rgba(34,211,238,.32);border-radius:26px;background:radial-gradient(circle at 12% 50%,rgba(6,182,212,.2),transparent 28%),linear-gradient(125deg,rgba(8,47,83,.88),rgba(3,16,42,.9));box-shadow:0 24px 55px rgba(0,7,25,.42),0 0 34px rgba(6,182,212,.12)}.digital-ecosystem-card:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(34,211,238,.04),transparent);transform:translateX(-100%);animation:digital-scan 5s linear infinite;pointer-events:none}@keyframes digital-scan{to{transform:translateX(100%)}}.digital-ecosystem-visual{width:190px;aspect-ratio:1;margin:auto;display:grid;place-items:center;position:relative;border:1px solid rgba(103,232,249,.35);border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.22),rgba(37,99,235,.08) 55%,transparent 57%);box-shadow:0 0 45px rgba(6,182,212,.22),inset 0 0 32px rgba(59,130,246,.15)}.digital-ecosystem-visual>span{font-size:58px;color:#67E8F9;text-shadow:0 0 20px #06B6D4}.digital-ecosystem-visual i{position:absolute;width:15px;height:15px;border-radius:50%;background:#22D3EE;box-shadow:0 0 16px #06B6D4}.digital-ecosystem-visual i:nth-child(2){top:13%;right:17%}.digital-ecosystem-visual i:nth-child(3){bottom:14%;left:16%;background:#3B82F6}.digital-ecosystem-visual i:nth-child(4){bottom:24%;right:4%;background:#10B981}.digital-ecosystem-copy{position:relative;z-index:1}.digital-ecosystem-copy h2{font-size:clamp(29px,3.4vw,45px);margin:0 0 14px;color:#fff}.digital-ecosystem-copy>p:not(.eyebrow){max-width:720px;margin:0;color:#C5D9EC;font-size:14px;line-height:1.75}.digital-ecosystem-features{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.digital-ecosystem-features span{padding:7px 10px;border:1px solid rgba(103,232,249,.22);border-radius:99px;background:rgba(6,182,212,.08);color:#A5F3FC;font-size:11px}.digital-ecosystem-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-width:520px}.digital-ecosystem-actions a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:12px 17px;border:1px solid rgba(103,232,249,.55);border-radius:13px;background:linear-gradient(115deg,#0891B2,#2563EB);color:#fff;text-decoration:none;font-weight:700;font-size:13px;box-shadow:0 0 18px rgba(6,182,212,.2);transition:.25s}.digital-ecosystem-actions a:last-child{background:linear-gradient(115deg,#2563EB,#10B981)}.digital-ecosystem-actions a:hover{transform:translateY(-3px);box-shadow:0 0 26px rgba(34,211,238,.4)}@media(max-width:760px){.digital-ecosystem-card{grid-template-columns:1fr;gap:24px;padding:28px 22px;text-align:center}.digital-ecosystem-visual{width:145px}.digital-ecosystem-copy>p:not(.eyebrow){font-size:13px}.digital-ecosystem-features{justify-content:center}.digital-ecosystem-actions{width:100%;max-width:520px;margin:0 auto;text-align:left}}@media(max-width:430px){.digital-ecosystem-actions{gap:8px}.digital-ecosystem-actions a{padding:10px 11px;font-size:10px}.digital-ecosystem-actions a b{font-size:14px}}@media(prefers-reduced-motion:reduce){.digital-ecosystem-card:after{animation:none}}

/* Nama sekolah header dalam dua baris. */
.site-header .brand strong{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;font-size:0!important;line-height:1;white-space:nowrap}.site-header .brand strong::before{content:'SEKOLAH\00a0 KEBANGSAAN\00a0 API\00a0 API';font:700 clamp(13px,1.25vw,18px)/1 'Poppins',sans-serif;letter-spacing:-.015em;color:#F8FAFC}.site-header .brand strong::after{content:'KOTA\00a0 KINABALU';font:700 10px/1 'Inter',sans-serif;letter-spacing:.2em;color:#67E8F9;text-shadow:0 0 9px rgba(6,182,212,.45)}@media(max-width:600px){.site-header .brand strong::before{font-size:10px}.site-header .brand strong::after{font-size:8px;letter-spacing:.14em}}

/* Tatal bebas khusus dalam senarai Pencapaian Sekolah. */
.achievement-table-wrap{max-height:min(560px,65vh);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}
.achievement-table-wrap:focus-visible{outline:2px solid rgba(34,211,238,.8);outline-offset:3px}

/* Kawalan carian dan mod warna di sebelah butang admin. */
.header-quick-tools{display:flex;align-items:center;margin-left:auto;margin-right:2px}.header-quick-tools button{width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid rgba(103,232,249,.55);border-radius:14px;background:linear-gradient(145deg,rgba(16,185,129,.82),rgba(6,182,212,.88) 55%,rgba(59,130,246,.9));color:#fff;font-size:20px;line-height:1;box-shadow:0 0 17px rgba(6,182,212,.24),0 8px 22px rgba(2,6,23,.25);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}.header-quick-tools button:hover,.header-quick-tools button:focus-visible{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 0 25px rgba(6,182,212,.42),0 11px 27px rgba(2,6,23,.3)}.site-utilities [data-tool="theme"]{display:none}@media(max-width:760px){.header-quick-tools{margin-right:2px}.header-quick-tools button{width:38px;height:38px;border-radius:12px;font-size:18px}.site-header .admin-trigger{width:38px;height:38px}.site-header{padding-left:14px;padding-right:14px}}@media(max-width:430px){.header-quick-tools button{width:34px;height:34px;font-size:16px}.site-header .admin-trigger,.site-header .menu-trigger{width:34px;height:34px}.header-quick-tools{margin-right:1px}}

/* Rapatkan butang mod dengan butang admin tanpa ruang automatik. */
.site-header .header-quick-tools{margin-right:2px}.site-header .header-quick-tools+.admin-trigger{margin-left:0}

/* Jarak seragam: mod — admin — hamburger. */
.site-header{--header-control-gap:5px}.site-header .header-quick-tools{margin-right:var(--header-control-gap)}.site-header .admin-trigger+.menu-trigger{margin-left:var(--header-control-gap)}

/* Pautan Pantas dan Takwim Persekolahan bersebelahan. */
.home-resource-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);align-items:start;gap:26px}.quick-links-column{min-width:0}.quick-links-column .quick-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.school-calendar-card{overflow:hidden;border:1px solid rgba(103,232,249,.28);border-radius:24px;background:linear-gradient(145deg,rgba(8,47,83,.88),rgba(3,15,39,.92));box-shadow:0 18px 44px rgba(0,8,28,.38),0 0 25px rgba(16,185,129,.1)}.school-calendar-head{display:flex;align-items:center;gap:14px;padding:24px;border-bottom:1px solid rgba(103,232,249,.16);background:linear-gradient(120deg,rgba(16,185,129,.16),rgba(6,182,212,.1))}.school-calendar-head>span{width:52px;height:52px;display:grid;place-items:center;flex:none;border-radius:16px;background:linear-gradient(135deg,#10B981,#06B6D4);font-size:24px;box-shadow:0 0 20px rgba(6,182,212,.22)}.school-calendar-head .eyebrow{margin-bottom:5px}.school-calendar-head h2{color:#F8FAFC;font:700 clamp(20px,2vw,27px)/1.18 'Poppins',sans-serif}.school-calendar-list{max-height:505px;overflow:auto;padding:8px 20px 15px;scrollbar-color:#10B981 rgba(15,23,42,.5)}.school-calendar-list article{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:17px 4px;border-bottom:1px solid rgba(148,163,184,.14)}.school-calendar-list article:last-child{border-bottom:0}.school-calendar-list time{align-self:start;padding:7px 8px;border:1px solid rgba(52,211,153,.28);border-radius:9px;background:rgba(16,185,129,.12);color:#A7F3D0;text-align:center;font:700 10px/1.35 'Inter',sans-serif}.school-calendar-list b{display:block;color:#F8FAFC;font:600 13px/1.4 'Poppins',sans-serif}.school-calendar-list small{display:block;margin-top:5px;color:#67E8F9;font-size:10px}.calendar-empty{padding:25px 5px;color:#CBD5E1;text-align:center}.bulk-calendar-editor{margin-top:25px;padding:25px;border:1px solid rgba(103,232,249,.25);border-radius:22px;background:linear-gradient(145deg,rgba(8,47,83,.7),rgba(3,15,39,.8));box-shadow:0 18px 42px rgba(2,6,23,.3)}.bulk-calendar-editor label{display:block;color:#A7F3D0;font-weight:700}.bulk-calendar-editor textarea{width:100%;min-height:390px;margin-top:10px;padding:18px;border:1px solid rgba(103,232,249,.3);border-radius:14px;outline:0;resize:vertical;background:rgba(2,8,23,.72);color:#F8FAFC;font:500 13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}.bulk-calendar-editor textarea:focus{border-color:#22D3EE;box-shadow:0 0 0 3px rgba(6,182,212,.12)}.bulk-calendar-editor>p{color:#CBD5E1;font-size:12px}.bulk-calendar-editor>div{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}.bulk-calendar-editor>div span{color:#67E8F9;font-size:12px}@media(max-width:1000px){.home-resource-layout{grid-template-columns:1fr}.school-calendar-list{max-height:430px}}@media(max-width:600px){.quick-links-column .quick-links-grid{grid-template-columns:1fr}.school-calendar-head{padding:19px}.school-calendar-list{padding-left:15px;padding-right:15px}.school-calendar-list article{grid-template-columns:82px 1fr}.bulk-calendar-editor{padding:18px}.bulk-calendar-editor>div{align-items:stretch;flex-direction:column}.bulk-calendar-editor>div button{width:100%}}

/* Tatal Takwim dikunci di dalam kad sendiri. */
.school-calendar-card{height:540px;max-height:540px;display:flex;flex-direction:column}.school-calendar-head{flex:0 0 auto}.school-calendar-list{flex:1 1 auto;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-y;-webkit-overflow-scrolling:touch}.school-calendar-list::-webkit-scrollbar{width:9px}.school-calendar-list::-webkit-scrollbar-track{background:rgba(15,23,42,.48);border-radius:99px}.school-calendar-list::-webkit-scrollbar-thumb{border:2px solid rgba(15,23,42,.48);border-radius:99px;background:linear-gradient(#10B981,#06B6D4)}@media(max-width:1000px){.school-calendar-card{height:480px;max-height:480px}}@media(max-width:600px){.school-calendar-card{height:450px;max-height:450px}}

/* Ketinggian Takwim sama dengan keseluruhan Pautan Pantas. */
@media(min-width:1001px){.home-resource-layout{align-items:stretch}.quick-links-column{height:540px;display:flex;flex-direction:column}.quick-links-column .quick-links-grid{flex:1}.school-calendar-card{height:540px;max-height:540px;align-self:stretch}}

/* Slide bergambar utama 1500 × 500. */
.home-slideshow-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Editor pukal Guru Bertugas Mingguan */
.weekly-bulk-help {
  padding: 14px 16px;
  border: 1px solid rgba(6, 182, 212, .3);
  border-radius: 14px;
  background: rgba(6, 182, 212, .08);
  color: var(--muted);
  line-height: 1.6;
}
.weekly-bulk-help b { color: var(--cyan); }
#editorFields textarea[name="teacherNames"],
#editorFields textarea[name="teacherTasks"] {
  min-height: 190px;
  line-height: 1.65;
  resize: vertical;
  white-space: pre-wrap;
}

/* Kad gambar khusus bagi dua analisis utama Laporan Mingguan */
.weekly-analysis-image-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  margin: 0 0 20px;
  border: 1px solid rgba(103, 232, 249, .26);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(6, 182, 212, .10), rgba(15, 23, 42, .72));
  box-shadow: 0 14px 32px rgba(2, 6, 23, .24);
}
.weekly-analysis-image-card .weekly-image.analysis-full {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  background: rgba(7, 20, 38, .34);
}
.weekly-analysis-image-card .weekly-image.analysis-full img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.weekly-analysis-image-card > div:last-child {
  display: grid;
  gap: 4px;
  padding: 14px 18px 16px;
}
.weekly-analysis-image-card > div:last-child span {
  color: #67e8f9;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.weekly-analysis-image-card > div:last-child b { color: #f8fafc; }
.weekly-analysis-image-card > div:last-child small { color: #94a3b8; }
@media (max-width: 600px) {
  .weekly-analysis-image-card { border-radius: 15px; }
  .weekly-analysis-image-card .weekly-image.analysis-full { aspect-ratio: 4 / 3; }
  .weekly-analysis-image-card > div:last-child { padding: 12px 14px 14px; }
}

/* Semua bingkai gambar Laporan Mingguan mengikut saiz kad Kurikulum, HEM dan Kokurikulum. */
.weekly-dashboard .weekly-image,
.weekly-dashboard .weekly-image.portrait,
.weekly-dashboard .weekly-image.analysis-full,
.weekly-dashboard .weekly-image.compact-media,
.weekly-dashboard .weekly-image.class-media,
.weekly-dashboard .weekly-image.monthly-full,
.weekly-dashboard .weekly-hero-upload .weekly-image {
  width: min(360px, 100%);
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 4;
  margin-left: auto;
  margin-right: auto;
  border-radius: 22px;
}
.weekly-dashboard .weekly-image img,
.weekly-dashboard .weekly-image.portrait img,
.weekly-dashboard .weekly-image.analysis-full img,
.weekly-dashboard .weekly-image.compact-media img,
.weekly-dashboard .weekly-image.class-media img,
.weekly-dashboard .weekly-image.monthly-full img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.weekly-dashboard .weekly-analysis-image-card {
  width: min(360px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.weekly-dashboard .weekly-duty-photo {
  display: grid;
  place-items: center;
}
.weekly-dashboard .weekly-hero-upload {
  width: min(360px, 100%);
}
@media (max-width: 600px) {
  .weekly-dashboard .weekly-image,
  .weekly-dashboard .weekly-image.portrait,
  .weekly-dashboard .weekly-image.analysis-full,
  .weekly-dashboard .weekly-image.compact-media,
  .weekly-dashboard .weekly-image.class-media,
  .weekly-dashboard .weekly-image.monthly-full,
  .weekly-dashboard .weekly-hero-upload .weekly-image {
    width: min(100%, 330px);
    aspect-ratio: 3 / 4;
    border-radius: 19px;
  }
}

/* Telefon mengekalkan paparan jadual Pencapaian yang sama seperti laptop dan tablet. */
@media (max-width: 600px) {
  #pencapaian .achievement-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(560px, 65vh) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #pencapaian .achievement-table {
    display: table !important;
    width: 100% !important;
    min-width: 700px !important;
    border-collapse: collapse !important;
  }

  #pencapaian .achievement-table thead {
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
  }

  #pencapaian .achievement-table tbody { display: table-row-group !important; padding: 0 !important; }
  #pencapaian .achievement-table tr {
    display: table-row !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #pencapaian .achievement-table th,
  #pencapaian .achievement-table td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0;
    padding: 14px 16px !important;
    font-size: 9px;
    text-align: left !important;
    vertical-align: top;
  }

  #pencapaian .achievement-table td:first-child { min-width: 230px !important; }
  #pencapaian .achievement-table td::before { content: none !important; display: none !important; }
}

/* Menu utama sentiasa berada di atas sticky quick navigation Laporan Mingguan. */
.site-header { z-index: 100 !important; }
.site-header .hamburger-menu { z-index: 120 !important; }
.weekly-quick-nav { z-index: 20; }

/* Penguatkuasaan akhir penjajaran keterangan Pencapaian pada semua peranti. */
#pencapaian .achievement-table tbody td:nth-child(1),
#pencapaian .achievement-table tbody td:nth-child(2) {
  text-align: justify !important;
  text-align-last: left;
  white-space: pre-line;
}

/* Direktori digital Guru Kelas pada halaman HEM. */
.class-teachers-section{position:relative;padding:clamp(42px,6vw,82px) 5%;overflow:hidden;background:linear-gradient(145deg,rgba(8,23,50,.96),rgba(9,47,75,.9) 58%,rgba(6,78,59,.82));border-bottom:1px solid rgba(251,191,36,.18)}
.class-teachers-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 12%,rgba(59,130,246,.2),transparent 28%),radial-gradient(circle at 88% 18%,rgba(251,191,36,.12),transparent 24%)}
.class-teachers-shell{position:relative;z-index:1;width:min(1500px,100%);margin:auto}
.class-teachers-heading{display:flex;align-items:flex-start;gap:18px;max-width:850px;margin-bottom:28px}
.class-teachers-icon{display:grid;flex:0 0 58px;width:58px;height:58px;place-items:center;border:1px solid rgba(251,191,36,.48);border-radius:18px;background:linear-gradient(145deg,rgba(59,130,246,.28),rgba(251,191,36,.13));box-shadow:0 12px 32px rgba(2,6,23,.32),inset 0 1px rgba(255,255,255,.16);font-size:27px}
.class-teachers-heading h2{margin:2px 0 5px;color:#fff;font:800 clamp(27px,4vw,44px)/1.05 Poppins,Inter,sans-serif;letter-spacing:.02em}
.class-teachers-heading strong{display:block;color:#fbbf24;font-size:clamp(12px,1.6vw,16px);letter-spacing:.02em}
.class-teachers-heading p:last-child{margin:10px 0 0;color:#cbd5e1;line-height:1.7}
.class-teachers-stats{display:grid;grid-template-columns:repeat(3,minmax(0,190px));gap:12px;margin:0 0 25px}
.class-teachers-stats article{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:13px;row-gap:3px;padding:13px 15px;border:1px solid rgba(148,193,255,.2);border-radius:17px;background:rgba(15,36,70,.62);box-shadow:0 12px 30px rgba(2,6,23,.22);backdrop-filter:blur(12px)}
.class-teachers-stats span{grid-row:1/3;font-size:21px}.class-teachers-stats b{color:#fff;font:800 23px/1 Poppins,Inter,sans-serif}.class-teachers-stats small{margin-top:4px;color:#a9bed7;font-size:9px}
.class-teachers-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:32px}
.class-teacher-tabs{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.class-teacher-tabs button{flex:none;padding:10px 16px;border:1px solid rgba(96,165,250,.32);border-radius:999px;background:rgba(15,41,75,.72);color:#dbeafe;font:700 10px/1 Poppins,Inter,sans-serif;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.class-teacher-tabs button:hover,.class-teacher-tabs button.active{transform:translateY(-2px);border-color:#fbbf24;background:linear-gradient(110deg,#1d4ed8,#2563eb);color:#fff;box-shadow:0 7px 20px rgba(37,99,235,.32),0 0 15px rgba(251,191,36,.12)}
.class-teacher-search{display:grid;grid-template-columns:32px minmax(180px,270px);align-items:center;flex:none;padding:0 13px;border:1px solid rgba(96,165,250,.36);border-radius:14px;background:rgba(5,20,44,.74);color:#93c5fd;box-shadow:inset 0 1px rgba(255,255,255,.07)}
.class-teacher-search span:first-child{font-size:21px}.class-teacher-search input{width:100%;height:43px;border:0;outline:0;background:transparent;color:#fff;font:500 11px Inter,sans-serif}.class-teacher-search input::placeholder{color:#91a7c2}
.class-teacher-year-group{margin:0 0 34px}.class-teacher-year-group>h3{display:flex;align-items:center;gap:9px;margin:0 0 15px;padding-bottom:10px;border-bottom:1px solid rgba(251,191,36,.25);color:#fbbf24;font:800 15px Poppins,Inter,sans-serif;letter-spacing:.08em}
.class-teacher-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.class-teachers-directory{height:clamp(460px,68vh,720px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:5px 12px 8px 5px;border-radius:26px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.class-teachers-directory:focus-visible{outline:2px solid #22d3ee;outline-offset:5px}
.class-teachers-directory::-webkit-scrollbar{width:9px}.class-teachers-directory::-webkit-scrollbar-track{border-radius:999px;background:rgba(15,23,42,.38)}.class-teachers-directory::-webkit-scrollbar-thumb{border:2px solid rgba(15,23,42,.38);border-radius:999px;background:linear-gradient(#06b6d4,#10b981)}
.class-teacher-card{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;min-height:145px;padding:16px;border:1px solid rgba(96,165,250,.23);border-radius:22px;background:linear-gradient(145deg,rgba(24,55,96,.76),rgba(9,31,62,.72));box-shadow:0 15px 35px rgba(2,6,23,.3),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(15px);opacity:0;transform:translateY(16px);transition:opacity .38s ease var(--class-card-delay),transform .38s ease var(--class-card-delay),border-color .22s ease,box-shadow .22s ease}
.class-teacher-card.is-visible{opacity:1;transform:translateY(0)}.class-teacher-card:hover{transform:translateY(-5px);border-color:rgba(251,191,36,.52);box-shadow:0 20px 42px rgba(2,6,23,.42),0 0 24px rgba(59,130,246,.12)}
.class-teacher-photo{display:grid;width:76px;aspect-ratio:3/4;place-items:center;overflow:hidden;border:2px solid rgba(251,191,36,.48);border-radius:17px;background:linear-gradient(145deg,#1e3a8a,#0f766e);box-shadow:0 10px 22px rgba(2,6,23,.35);font-size:30px}
.class-teacher-photo img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.class-teacher-body{min-width:0}.class-teacher-body small{display:inline-block;margin-bottom:7px;padding:4px 8px;border-radius:99px;background:rgba(59,130,246,.18);color:#bfdbfe;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.class-teacher-body h4{margin:0 0 11px;color:#fff;font:700 13px/1.42 Poppins,Inter,sans-serif;overflow-wrap:anywhere}
.class-teacher-body strong{display:flex;align-items:center;gap:6px;color:#fbbf24;font:800 12px/1.3 Poppins,Inter,sans-serif;text-transform:uppercase}.class-teacher-body p{margin:5px 0 0;color:#9fb7d2;font-size:9px}
.class-teachers-empty{grid-column:1/-1;padding:42px 20px;text-align:center;border:1px dashed rgba(96,165,250,.3);border-radius:22px;background:rgba(15,35,66,.48)}.class-teachers-empty span{font-size:35px}.class-teachers-empty h3{margin:10px 0 5px;color:#fff}.class-teachers-empty p{margin:0;color:#a9bed7}
.light-mode .class-teachers-section{background:linear-gradient(145deg,#eff6ff,#e0f2fe 58%,#ecfdf5)}.light-mode .class-teachers-heading h2,.light-mode .class-teacher-body h4,.light-mode .class-teachers-stats b{color:#0f172a}.light-mode .class-teachers-heading p:last-child,.light-mode .class-teacher-body p{color:#475569}.light-mode .class-teachers-stats article,.light-mode .class-teacher-card{background:rgba(255,255,255,.78);border-color:rgba(37,99,235,.2)}.light-mode .class-teacher-search{background:#fff}.light-mode .class-teacher-search input{color:#0f172a}
@media(max-width:1100px){.class-teacher-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.class-teachers-tools{align-items:stretch;flex-direction:column}.class-teacher-search{width:min(100%,380px)}}
@media(max-width:800px){.class-teacher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-teachers-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.class-teachers-stats article{grid-template-columns:1fr;row-gap:7px;text-align:center}.class-teachers-stats span{grid-row:auto}}
@media(max-width:520px){.class-teachers-section{padding:34px 14px}.class-teachers-heading{gap:12px}.class-teachers-icon{flex-basis:47px;width:47px;height:47px;border-radius:15px;font-size:22px}.class-teachers-stats{gap:7px}.class-teachers-stats article{padding:10px 5px;border-radius:14px}.class-teachers-stats b{font-size:19px}.class-teachers-stats small{font-size:7px}.class-teachers-directory{height:62vh;min-height:430px;padding-right:7px}.class-teacher-grid{grid-template-columns:1fr;gap:12px}.class-teacher-card{grid-template-columns:82px minmax(0,1fr);min-height:130px;padding:13px;border-radius:19px}.class-teacher-photo{width:68px}.class-teacher-body h4{font-size:12px}.class-teacher-search{grid-template-columns:28px 1fr;width:100%}.class-teacher-tabs button{padding:9px 13px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.class-teacher-card{opacity:1;transform:none;transition:none}}

/* Penjajaran tengah menyeluruh untuk direktori Guru Kelas. */
.class-teachers-heading{align-items:center;justify-content:center;max-width:920px;margin-left:auto;margin-right:auto;text-align:center}
.class-teachers-stats{justify-content:center;margin-left:auto;margin-right:auto}
.class-teachers-tools{justify-content:center;flex-wrap:wrap}
.class-teacher-tabs{justify-content:center}
.class-teacher-year-group>h3{justify-content:center;text-align:center}
.class-teacher-card{grid-template-columns:1fr;justify-items:center;text-align:center}
.class-teacher-photo{margin-bottom:12px}
.class-teacher-body strong{justify-content:center}
@media(max-width:520px){.class-teachers-heading{flex-direction:column}.class-teachers-icon{margin:auto}.class-teacher-tabs{justify-content:flex-start}.class-teacher-card{grid-template-columns:1fr}.class-teacher-photo{width:76px}}

.class-teacher-search{position:relative;display:block;padding:0 38px}
.class-teacher-search>span:first-child{position:absolute;left:13px;top:50%;transform:translateY(-50%)}
.class-teacher-search input{text-align:center}

/* Kotak carian berada pada baris sendiri dan tepat di tengah seksyen. */
.class-teachers-tools{flex-direction:column;align-items:center}
.class-teacher-tabs{width:100%;justify-content:center}
.class-teacher-search{width:min(100%,420px);margin-left:auto;margin-right:auto}
@media(max-width:520px){.class-teacher-tabs{justify-content:flex-start}.class-teacher-search{width:100%}}

/* Kemasan premium Direktori Guru Kelas. */
.class-teachers-section{isolation:isolate;background:linear-gradient(155deg,#061a38 0%,#0a3157 48%,#064e3b 100%)}
.class-teachers-section::after{content:"";position:absolute;z-index:-1;inset:18px 3%;pointer-events:none;border:1px solid rgba(147,197,253,.12);border-radius:34px;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 46%,rgba(251,191,36,.025));box-shadow:inset 0 1px rgba(255,255,255,.05)}
.class-teachers-heading{position:relative;padding:24px clamp(18px,4vw,46px);border:1px solid rgba(147,197,253,.2);border-radius:26px;background:linear-gradient(145deg,rgba(30,64,175,.2),rgba(8,47,73,.3));box-shadow:0 20px 50px rgba(2,6,23,.3),inset 0 1px rgba(255,255,255,.09);backdrop-filter:blur(16px)}
.class-teachers-heading::before,.class-teachers-heading::after{content:"";position:absolute;top:50%;width:clamp(28px,6vw,75px);height:1px;background:linear-gradient(90deg,transparent,#fbbf24)}
.class-teachers-heading::before{right:calc(100% + 12px)}.class-teachers-heading::after{left:calc(100% + 12px);transform:rotate(180deg)}
.class-teachers-heading .eyebrow{display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;padding:5px 12px;border:1px solid rgba(251,191,36,.28);border-radius:999px;background:rgba(251,191,36,.08);color:#fde68a;letter-spacing:.16em}
.class-teachers-heading h2{background:linear-gradient(100deg,#fff 18%,#bfdbfe 50%,#fef3c7 82%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 26px rgba(59,130,246,.18)}
.class-teachers-heading strong{margin-top:3px;font-weight:700}.class-teachers-heading p:last-child{max-width:640px;margin:11px auto 0}
.class-teachers-stats{max-width:650px;margin-top:22px;margin-bottom:28px}
.class-teachers-stats article{position:relative;overflow:hidden;min-height:84px;padding:15px 18px;border-color:rgba(147,197,253,.25);background:linear-gradient(145deg,rgba(30,64,175,.3),rgba(8,47,73,.48));transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.class-teachers-stats article::after{content:"";position:absolute;right:-20px;bottom:-28px;width:70px;height:70px;border-radius:50%;background:rgba(251,191,36,.08);filter:blur(2px)}
.class-teachers-stats article:hover{transform:translateY(-3px);border-color:rgba(251,191,36,.45);box-shadow:0 15px 34px rgba(2,6,23,.33)}
.class-teachers-stats article>span{display:grid;width:36px;height:36px;place-items:center;border:1px solid rgba(251,191,36,.25);border-radius:12px;background:rgba(251,191,36,.1);filter:drop-shadow(0 5px 8px rgba(0,0,0,.22))}
.class-teachers-stats b{font-size:26px;text-shadow:0 0 16px rgba(96,165,250,.4)}
.class-teachers-tools{max-width:1050px;margin-left:auto;margin-right:auto;padding:17px;border:1px solid rgba(147,197,253,.14);border-radius:22px;background:rgba(3,20,44,.28);backdrop-filter:blur(12px)}
.class-teacher-tabs button{position:relative;overflow:hidden;min-width:82px;padding:11px 17px;border-color:rgba(147,197,253,.25);background:linear-gradient(145deg,rgba(30,58,138,.5),rgba(8,47,73,.55));box-shadow:inset 0 1px rgba(255,255,255,.06)}
.class-teacher-tabs button::after{content:"";position:absolute;inset:auto 18px 5px;height:2px;border-radius:99px;background:#fbbf24;opacity:0;transform:scaleX(.4);transition:.22s ease}
.class-teacher-tabs button.active::after{opacity:1;transform:scaleX(1)}
.class-teacher-search{height:49px;border-color:rgba(147,197,253,.35);border-radius:16px;background:linear-gradient(145deg,rgba(3,18,42,.84),rgba(8,47,73,.62));box-shadow:0 10px 25px rgba(2,6,23,.24),inset 0 1px rgba(255,255,255,.07);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.class-teacher-search:focus-within{transform:translateY(-2px);border-color:#fbbf24;box-shadow:0 12px 30px rgba(2,6,23,.3),0 0 0 3px rgba(251,191,36,.08)}
.class-teacher-year-group{padding:20px;border:1px solid rgba(147,197,253,.12);border-radius:27px;background:linear-gradient(145deg,rgba(8,32,66,.32),rgba(6,78,59,.13));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.class-teacher-year-group>h3{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;padding:8px 22px;border:1px solid rgba(251,191,36,.26);border-radius:999px;background:rgba(251,191,36,.075);color:#fde68a;box-shadow:0 8px 20px rgba(2,6,23,.18)}
.class-teacher-card{position:relative;overflow:hidden;min-height:270px;padding:22px 18px;border-color:rgba(147,197,253,.22);background:linear-gradient(155deg,rgba(30,64,175,.32),rgba(10,37,72,.76) 52%,rgba(6,78,59,.3));box-shadow:0 18px 42px rgba(2,6,23,.34),inset 0 1px rgba(255,255,255,.09)}
.class-teacher-card::before{content:"";position:absolute;top:-48px;left:50%;width:180px;height:120px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.2),transparent 70%);pointer-events:none}
.class-teacher-card::after{content:none}
.class-teacher-card:hover{transform:translateY(-7px);border-color:rgba(251,191,36,.55);box-shadow:0 25px 52px rgba(2,6,23,.48),0 0 28px rgba(59,130,246,.14)}
.class-teacher-photo{position:relative;z-index:1;width:94px;margin-bottom:17px;border-width:3px;border-color:rgba(251,191,36,.7);border-radius:22px;box-shadow:0 14px 28px rgba(2,6,23,.4),0 0 0 5px rgba(59,130,246,.09)}
.class-teacher-body{position:relative;z-index:1;width:100%}.class-teacher-body small{margin-bottom:10px;padding:5px 11px;border:1px solid rgba(147,197,253,.18);background:rgba(59,130,246,.16)}
.class-teacher-body h4{max-width:260px;margin:0 auto 13px;color:#fff;font-size:14px;line-height:1.5}
.class-teacher-body strong{width:max-content;max-width:100%;margin:auto;padding:8px 13px;border:1px solid rgba(251,191,36,.28);border-radius:11px;background:rgba(251,191,36,.085);color:#fde68a;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.class-teacher-body p{margin-top:8px;color:#bfdbfe;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.class-teachers-empty{padding:55px 20px;border-color:rgba(251,191,36,.25);background:linear-gradient(145deg,rgba(30,64,175,.14),rgba(6,78,59,.14));box-shadow:inset 0 1px rgba(255,255,255,.05)}
.class-teachers-empty span{display:grid;width:62px;height:62px;margin:auto;place-items:center;border:1px solid rgba(251,191,36,.28);border-radius:20px;background:rgba(251,191,36,.08)}
.light-mode .class-teachers-heading,.light-mode .class-teachers-tools,.light-mode .class-teacher-year-group{background:rgba(255,255,255,.72)}
@media(max-width:800px){.class-teachers-heading::before,.class-teachers-heading::after{display:none}.class-teacher-card{min-height:250px}.class-teachers-tools{padding:13px}}
@media(max-width:520px){.class-teachers-section::after{inset:10px 6px;border-radius:24px}.class-teachers-heading{padding:20px 14px;border-radius:22px}.class-teachers-stats article{min-height:78px;padding:11px 5px}.class-teachers-stats article>span{margin:auto}.class-teacher-year-group{padding:13px;border-radius:22px}.class-teacher-card{min-height:245px;padding:19px 14px}.class-teacher-photo{width:90px}.class-teacher-body h4{font-size:13px}}

/* Analisis: gambar kiri dan statistik kanan. */
.weekly-dashboard .weekly-analysis-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(18px, 3vw, 30px);
}
.weekly-dashboard .weekly-analysis-layout .weekly-analysis-image-card {
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
}
.weekly-dashboard .weekly-analysis-layout .weekly-analysis-image-card .weekly-image {
  width: 100% !important;
}
.weekly-dashboard .weekly-analysis-layout > .weekly-kpi,
.weekly-dashboard .weekly-analysis-layout > .weekly-late-summary {
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  gap: 16px;
}
.weekly-dashboard .weekly-analysis-layout > .weekly-kpi > div,
.weekly-dashboard .weekly-analysis-layout > .weekly-late-summary > article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
@media (max-width: 760px) {
  .weekly-dashboard .weekly-analysis-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .weekly-dashboard .weekly-analysis-layout .weekly-analysis-image-card {
    width: min(330px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Bingkai lebih kompak untuk dua bahagian bulanan sahaja. */
.weekly-dashboard #star-bulanan .weekly-image,
.weekly-dashboard #anugerah-bulanan .weekly-image.monthly-full {
  width: min(280px, 100%) !important;
  aspect-ratio: 3 / 4 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.weekly-dashboard #anugerah-bulanan .weekly-champion-card {
  align-items: center;
}
@media (max-width: 600px) {
  .weekly-dashboard #star-bulanan .weekly-image,
  .weekly-dashboard #anugerah-bulanan .weekly-image.monthly-full {
    width: min(240px, 100%) !important;
  }
}

/* Dua bahagian bulanan dipaparkan tanpa gambar pada halaman awam. */
.weekly-dashboard #anugerah-bulanan .weekly-champion-card.no-public-image {
  min-height: 260px;
  justify-content: center;
}
.weekly-dashboard #anugerah-bulanan .weekly-champion-card.no-public-image > div:last-child {
  padding: clamp(28px, 5vw, 54px);
}
.weekly-dashboard #star-bulanan .weekly-podium article.no-public-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
}
@media (max-width: 600px) {
  .weekly-dashboard #anugerah-bulanan .weekly-champion-card.no-public-image {
    min-height: 220px;
  }
}

/* Kad bulanan menggunakan saiz dan grid yang sama seperti Star Rating Mingguan. */
.weekly-dashboard #star-bulanan .weekly-podium,
.weekly-dashboard #anugerah-bulanan .weekly-champion-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding-top: 0 !important;
}
.weekly-dashboard #star-bulanan .weekly-podium article.no-public-image,
.weekly-dashboard #anugerah-bulanan .weekly-champion-card.no-public-image {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 22px !important;
  transform: none !important;
  border: 1px solid rgba(103, 232, 249, .16) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(15, 56, 79, .78), rgba(15, 23, 42, .72)) !important;
  text-align: center;
}
.weekly-dashboard #anugerah-bulanan .weekly-champion-card.no-public-image > div:last-child {
  width: 100%;
  padding: 0 !important;
}
.weekly-dashboard #star-bulanan .weekly-podium article.no-public-image > span,
.weekly-dashboard #anugerah-bulanan .weekly-champion-card.no-public-image span {
  display: block;
  margin-top: 0;
}
@media (max-width: 900px) {
  .weekly-dashboard #star-bulanan .weekly-podium,
  .weekly-dashboard #anugerah-bulanan .weekly-champion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .weekly-dashboard #star-bulanan .weekly-podium,
  .weekly-dashboard #anugerah-bulanan .weekly-champion-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 13px !important;
  }
  .weekly-dashboard #star-bulanan .weekly-podium article.no-public-image,
  .weekly-dashboard #anugerah-bulanan .weekly-champion-card.no-public-image {
    padding: 18px !important;
  }
}

/* Bintang bergerak dalam ruang tersendiri supaya tidak bertindih dengan tajuk anugerah. */
.weekly-dashboard #anugerah-bulanan .weekly-award-stars {
  position: static;
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #fbbf24;
  pointer-events: none;
}
.weekly-dashboard #anugerah-bulanan .weekly-award-stars i {
  display: inline-block;
  font-style: normal;
  font-size: 18px;
  text-shadow: 0 0 13px rgba(251, 191, 36, .72);
  animation: weeklyAwardStarFloat 1.8s ease-in-out infinite alternate;
}
.weekly-dashboard #anugerah-bulanan .weekly-award-stars i:nth-child(2) { animation-delay: -.35s; }
.weekly-dashboard #anugerah-bulanan .weekly-award-stars i:nth-child(3) { animation-delay: -.7s; }
.weekly-dashboard #anugerah-bulanan .weekly-award-stars i:nth-child(4) { animation-delay: -1.05s; }
.weekly-dashboard #anugerah-bulanan .weekly-award-stars i:nth-child(5) { animation-delay: -1.4s; }
@keyframes weeklyAwardStarFloat {
  from { transform: translateY(4px) scale(.82) rotate(-8deg); opacity: .55; }
  to { transform: translateY(-4px) scale(1.12) rotate(8deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .weekly-dashboard #anugerah-bulanan .weekly-award-stars i { animation: none; }
}

/* Elakkan paparan kandungan sementara/flicker ketika membuka halaman dalaman. */
html { background-color: #020617; }
html.portal-page-booting body { visibility: hidden; }
#publicApp { min-height: 100vh; }

/* Animasi opacity dan scroll reveal untuk semua halaman portal. */
.portal-scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.portal-scroll-reveal.portal-reveal-visible {
  opacity: 1;
  transform: none;
}

/* Berita dan Pencapaian dipaparkan terus tanpa animasi opacity. */
body:has(.all-news-hero) .portal-scroll-reveal,
body:has(.achievement-gallery-section) .portal-scroll-reveal,
body:has(.annual-activity-section) .portal-scroll-reveal,
#berita.portal-scroll-reveal,
#pencapaian.portal-scroll-reveal,
.annual-activity-section.portal-scroll-reveal,
.news-archive-section.portal-scroll-reveal,
.achievement-gallery-section.portal-scroll-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .portal-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Bingkai Anugerah Sahsiah Mingguan sama seperti kad bergambar halaman Pencapaian. */
.weekly-dashboard #sahsiah .weekly-achievement-card .weekly-image.portrait {
  width: 100% !important;
  height: 205px !important;
  max-height: 205px !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #07162d;
}
.weekly-dashboard #sahsiah .weekly-achievement-card .weekly-image.portrait img {
  width: 100% !important;
  height: 205px !important;
  object-fit: contain !important;
  object-position: center !important;
}

.home-slideshow {
  width: min(1500px, 100%);
  aspect-ratio: 3 / 1;
  min-height: 260px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, .38);
  border-radius: 24px;
  background: #020617;
  box-shadow: 0 24px 58px rgba(2, 6, 23, .48), 0 0 32px rgba(6, 182, 212, .14);
}

.home-slideshow-track,
.home-slide {
  position: absolute;
  inset: 0;
}

.home-slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .75s ease, visibility .75s ease, transform 5s ease;
}

.home-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.home-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #020617;
}

.home-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 8, 23, .78), rgba(2, 8, 23, .08) 65%), linear-gradient(0deg, rgba(2, 8, 23, .48), transparent 45%);
}

/* Galeri tanpa lapisan/keterangan: hanya gambar penuh dalam bingkai nipis. */
.home-slideshow {
  border-color: rgba(103,232,249,.2);
  border-radius: 14px;
  background: linear-gradient(135deg, #073B4C, #065F46);
  box-shadow: 0 12px 30px rgba(2,6,23,.3), 0 0 16px rgba(6,182,212,.08);
}

.home-slide {
  background: linear-gradient(135deg, #073B4C, #065F46);
}

.home-slide::after,
.home-slide > div {
  display: none !important;
}

.home-slide img {
  object-fit: contain !important;
  background: linear-gradient(135deg, #073B4C, #065F46) !important;
}

.home-slide > div {
  max-width: 620px;
  position: absolute;
  z-index: 1;
  left: clamp(24px, 5vw, 72px);
  bottom: clamp(28px, 5vw, 65px);
  right: 80px;
  color: #fff;
}

.home-slide small {
  color: #67E8F9;
  font: 700 10px 'Inter', sans-serif;
  letter-spacing: .16em;
}

.home-slide h3 {
  margin: 7px 0 0;
  font: 700 clamp(22px, 3.4vw, 46px)/1.15 'Poppins', sans-serif;
  text-shadow: 0 4px 22px rgba(2, 8, 23, .72);
}

.home-slide p {
  margin: 10px 0 0;
  color: #E2E8F0;
  font-size: 14px;
  line-height: 1.6;
}

.home-slide-control {
  width: 50px;
  height: 58px;
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 15px;
  background: rgba(2, 8, 23, .5);
  color: #fff;
  font-size: 34px;
  backdrop-filter: blur(12px);
}

.home-slide-control:hover {
  background: linear-gradient(135deg, #10B981, #06B6D4);
  box-shadow: 0 0 24px rgba(6, 182, 212, .38);
}

.home-slide-control.previous { left: 18px; }
.home-slide-control.next { right: 18px; }

.home-slide-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 16px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.home-slide-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .55);
  transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}

.home-slide-dots button.active {
  width: 28px;
  background: #34D399;
  box-shadow: 0 0 13px rgba(52, 211, 153, .75);
}

@media (max-width: 760px) {
  .home-slideshow {
    aspect-ratio: 3 / 1.35;
    min-height: 230px;
    border-radius: 20px;
  }

  .home-slide > div {
    left: 58px;
    right: 58px;
    bottom: 38px;
  }

  .home-slide p {
    display: none;
  }

  .home-slide-control {
    width: 38px;
    height: 46px;
    border-radius: 12px;
    font-size: 27px;
  }

  .home-slide-control.previous { left: 10px; }
  .home-slide-control.next { right: 10px; }
}

@media (max-width: 480px) {
  .home-slideshow-section {
    padding-top: 45px;
    padding-bottom: 45px;
  }

  .home-slideshow {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 1;
    border-radius: 8px;
    box-shadow: 0 7px 18px rgba(2,6,23,.24);
  }

  .home-slide-control {
    width: 28px;
    height: 34px;
    border-radius: 8px;
    font-size: 21px;
  }

  .home-slide-control.previous { left: 5px; }
  .home-slide-control.next { right: 5px; }

  .home-slide-dots {
    bottom: 6px;
    gap: 5px;
  }

  .home-slide-dots button {
    width: 6px;
    height: 6px;
  }

  .home-slide-dots button.active {
    width: 18px;
  }

  .home-slide > div {
    left: 50px;
    right: 50px;
    bottom: 37px;
  }

  .home-slide small {
    font-size: 7px;
  }

  .home-slide h3 {
    font-size: 18px;
  }
}

/* Pautan Pantas: enam kad besar dalam susunan 3 × 2. */
.quick-links-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.quick-links-grid a{min-height:152px;gap:18px;padding:28px 24px;border-radius:23px}.quick-links-grid a>span{width:58px;height:58px;border-radius:17px;font-size:26px}.quick-links-grid b{margin-bottom:7px;font-size:16px}.quick-links-grid small{font-size:12px;line-height:1.55}.quick-links-grid i{font-size:22px}@media(max-width:900px){.quick-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.quick-links-grid{grid-template-columns:1fr;gap:14px}.quick-links-grid a{min-height:120px;padding:21px 19px}.quick-links-grid a>span{width:50px;height:50px;font-size:22px}}

/* Peta Google Maps dalam kad lokasi sekolah. */
.school-info-map{position:relative;z-index:1;margin:0 27px 27px;overflow:hidden;border:1px solid rgba(103,232,249,.3);border-radius:18px;background:rgba(2,8,23,.58);box-shadow:0 15px 35px rgba(2,6,23,.3)}.school-info-map iframe{display:block;width:100%;height:390px;border:0}.school-info-map a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 18px;background:linear-gradient(110deg,rgba(16,185,129,.9),rgba(6,182,212,.9),rgba(59,130,246,.9));color:#fff;text-align:center;text-decoration:none;font:700 13px 'Poppins',sans-serif;transition:filter .25s ease,letter-spacing .25s ease}.school-info-map a:hover{filter:brightness(1.14);letter-spacing:.02em}.light-mode .school-info-map{background:#fff;border-color:rgba(14,116,144,.25)}@media(max-width:700px){.school-info-map{margin:0 18px 20px;border-radius:15px}.school-info-map iframe{height:310px}}

/* Enam kad Info Sekolah yang membuka keterangan apabila ditekan. */
.school-info-accordion-list{display:grid;gap:15px;max-width:1120px;margin:0 auto}.school-info-accordion{overflow:hidden;border:1px solid rgba(103,232,249,.24);border-radius:22px;background:linear-gradient(145deg,rgba(8,38,72,.86),rgba(3,15,39,.86));box-shadow:0 16px 38px rgba(0,8,28,.32);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}.school-info-accordion:hover{transform:translateY(-2px);border-color:rgba(52,211,153,.65);box-shadow:0 20px 42px rgba(0,8,28,.38),0 0 24px rgba(6,182,212,.13)}.school-info-accordion[open]{border-color:rgba(52,211,153,.62);box-shadow:0 22px 46px rgba(0,8,28,.4),0 0 26px rgba(16,185,129,.14)}.school-info-accordion summary{min-height:112px;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:17px;padding:22px 25px;cursor:pointer;list-style:none;user-select:none}.school-info-accordion summary::-webkit-details-marker{display:none}.school-info-number{color:#67E8F9;font:700 11px 'Poppins',sans-serif;letter-spacing:.12em}.school-info-summary-icon{width:55px;height:55px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#10B981,#06B6D4 58%,#3B82F6);font-size:24px;box-shadow:0 0 19px rgba(6,182,212,.28)}.school-info-accordion summary small{display:block;margin-bottom:4px;color:#6EE7B7;font:700 10px 'Inter',sans-serif;letter-spacing:.14em}.school-info-accordion summary b{display:block;color:#F8FAFC;font:700 clamp(17px,2vw,23px) 'Poppins',sans-serif}.school-info-accordion summary i{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(103,232,249,.3);border-radius:12px;color:#67E8F9;font:400 25px/1 'Inter',sans-serif;font-style:normal;transition:transform .3s ease,background .3s ease}.school-info-accordion[open] summary i{transform:rotate(45deg);background:rgba(16,185,129,.15)}.school-info-detail{padding:0 25px 27px;border-top:1px solid rgba(103,232,249,.14)}.school-info-detail-block{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:25px 0 0}.school-info-detail-block+.school-info-detail-block{margin-top:25px;border-top:1px solid rgba(148,163,184,.16)}.school-info-detail-block:has(.school-info-detail-image){grid-template-columns:minmax(180px,.65fr) 1.5fr}.school-info-detail-image{width:100%;max-height:310px;object-fit:contain;border:1px solid rgba(103,232,249,.2);border-radius:16px;background:rgba(2,8,23,.35)}.school-info-detail-block h3{margin:0 0 9px;color:#F8FAFC;font-size:19px}.school-info-detail-block>div>p:not(.eyebrow){margin:0;color:#CBD5E1;line-height:1.75;white-space:pre-line}.school-location-card{max-width:1120px;margin:28px auto 0;padding-top:25px;overflow:hidden;border:1px solid rgba(103,232,249,.25);border-radius:23px;background:linear-gradient(145deg,rgba(8,38,72,.84),rgba(3,15,39,.84));box-shadow:0 18px 44px rgba(0,8,28,.35)}.school-location-heading{display:flex;align-items:flex-start;gap:17px;padding:0 27px 25px}.school-location-heading>span{width:55px;height:55px;display:grid;place-items:center;flex:none;border-radius:17px;background:linear-gradient(135deg,#10B981,#06B6D4 58%,#3B82F6);font-size:24px}.school-location-heading h2{margin:0 0 8px;font-size:clamp(20px,2.2vw,27px)}.school-location-heading>div>p:not(.eyebrow){margin:0;color:#CBD5E1;line-height:1.65}.light-mode .school-info-accordion,.light-mode .school-location-card{background:rgba(255,255,255,.88);color:#0F172A}.light-mode .school-info-accordion summary b,.light-mode .school-info-detail-block h3{color:#0F172A}.light-mode .school-info-detail-block>div>p:not(.eyebrow),.light-mode .school-location-heading>div>p:not(.eyebrow){color:#475569}@media(max-width:700px){.school-info-accordion summary{min-height:92px;grid-template-columns:auto auto 1fr auto;gap:11px;padding:17px 15px}.school-info-number{display:none}.school-info-summary-icon{width:47px;height:47px;border-radius:14px;font-size:21px}.school-info-accordion summary i{width:33px;height:33px}.school-info-detail{padding:0 18px 21px}.school-info-detail-block:has(.school-info-detail-image){grid-template-columns:1fr}.school-location-heading{padding:0 18px 20px}.school-location-card{border-radius:19px}}

/* Status cuaca langsung pada bar atas. */
#topWeather{display:inline-flex;align-items:center;min-height:24px;white-space:nowrap;transition:opacity .2s ease,color .2s ease}#topWeather[data-state="loading"]{opacity:.72}#topWeather[data-state="ready"]{color:#D1FAE5}#topWeather[data-state="error"]{color:#FDE68A}@media(max-width:700px){#topWeather{max-width:48vw;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}}

/* Penjajaran sekata untuk semua keterangan dalam kad. */
.card p,.leader-card p:not(.eyebrow),.info-card p:not(.eyebrow),.directory-card p,.quick-links-grid small,.notice p:not(.eyebrow),.school-info-copy>p:not(.eyebrow),.school-info-detail-block>div>p:not(.eyebrow),.school-location-heading>div>p:not(.eyebrow),.digital-ecosystem-copy>p:not(.eyebrow){text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}

/* Identiti rasmi di bahagian atas kad Latar Belakang. */
.school-identity-banner{display:flex;align-items:center;gap:24px;margin-top:25px;padding:25px 28px;border:1px solid rgba(103,232,249,.28);border-radius:19px;background:radial-gradient(circle at 12% 50%,rgba(16,185,129,.18),transparent 26%),linear-gradient(120deg,rgba(8,47,83,.9),rgba(3,16,42,.88));box-shadow:0 15px 34px rgba(2,6,23,.3)}.school-identity-banner img{width:105px;height:105px;object-fit:contain;flex:none;padding:7px;border-radius:18px;background:#fff;box-shadow:0 0 24px rgba(6,182,212,.24)}.school-identity-banner small{display:block;margin-bottom:7px;color:#67E8F9;font:700 10px 'Inter',sans-serif;letter-spacing:.18em}.school-identity-banner h2{margin:0;color:#F8FAFC;font:700 clamp(22px,3vw,34px)/1.18 'Poppins',sans-serif}.school-identity-banner p{margin:11px 0 0;color:#CBD5E1;font-size:13px}.school-identity-banner p b{display:inline-block;margin-left:6px;padding:5px 10px;border:1px solid rgba(52,211,153,.35);border-radius:99px;background:rgba(16,185,129,.13);color:#6EE7B7;letter-spacing:.08em}.light-mode .school-identity-banner{background:linear-gradient(120deg,#ECFDF5,#E0F2FE);border-color:rgba(14,116,144,.22)}.light-mode .school-identity-banner h2{color:#0F172A}.light-mode .school-identity-banner p{color:#475569}@media(max-width:600px){.school-identity-banner{flex-direction:column;gap:16px;padding:22px 18px;text-align:center}.school-identity-banner img{width:88px;height:88px}.school-identity-banner h2{font-size:21px}.school-identity-banner p{text-align:center}}

/* Kad identiti berada di luar dan tepat di atas kad Latar Belakang. */
.school-info-section>.school-identity-banner{width:100%;max-width:1120px;margin:0 auto 20px}

/* Maklum balas visual ketika tatal automatik pencapaian dijeda. */
.achievement-table-wrap[data-auto-scroll="paused"]{border-color:rgba(251,191,36,.42)}.achievement-table-wrap[data-auto-scroll="running"]{border-color:rgba(52,211,153,.38)}

/* Ucapan khas pada kad tajuk EduSpace. */
.eduspace-welcome{display:inline-flex;align-items:center;margin:3px 0 12px!important;padding:8px 14px;border:1px solid rgba(103,232,249,.38);border-radius:99px;background:linear-gradient(90deg,rgba(16,185,129,.2),rgba(6,182,212,.18));color:#A7F3D0!important;font:700 clamp(12px,1.4vw,15px)/1.3 'Poppins',sans-serif!important;letter-spacing:.1em;text-shadow:0 0 12px rgba(16,185,129,.42);box-shadow:0 0 20px rgba(6,182,212,.12)}@media(max-width:600px){.eduspace-welcome{letter-spacing:.06em;padding:7px 11px}}

/* Latar digital Navy Blue dan Cyan untuk seluruh portal. */
html{background:#020617}body:not(.light-mode){background-color:#020617!important;background-image:linear-gradient(rgba(34,211,238,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.055) 1px,transparent 1px),linear-gradient(rgba(59,130,246,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.025) 1px,transparent 1px),radial-gradient(circle at 8% 8%,rgba(6,182,212,.28),transparent 25%),radial-gradient(circle at 92% 23%,rgba(37,99,235,.3),transparent 29%),radial-gradient(circle at 45% 76%,rgba(8,145,178,.18),transparent 34%),linear-gradient(135deg,#020617 0%,#071A36 48%,#031226 100%)!important;background-size:44px 44px,44px 44px,176px 176px,176px 176px,auto,auto,auto,auto!important;background-attachment:fixed!important}.section:not(.light-mode *),.directory:not(.light-mode *),.stats-section:not(.light-mode *),.school-info-section:not(.light-mode *),.quick-links-section:not(.light-mode *),.digital-ecosystem-section:not(.light-mode *){background:linear-gradient(135deg,rgba(2,6,23,.5),rgba(7,35,68,.42))!important;border-top:1px solid rgba(34,211,238,.055)}body:not(.light-mode) .site-header{background:linear-gradient(90deg,rgba(2,6,23,.92),rgba(5,35,67,.88))!important;border-bottom-color:rgba(34,211,238,.34);box-shadow:0 10px 36px rgba(0,6,24,.4),0 0 24px rgba(6,182,212,.07)}body:not(.light-mode) .page-hero{background:radial-gradient(circle at 82% 18%,rgba(34,211,238,.25),transparent 24%),radial-gradient(circle at 16% 88%,rgba(37,99,235,.22),transparent 28%),linear-gradient(120deg,#020617,#073B67 58%,#075985)!important}@media(max-width:700px){body:not(.light-mode){background-attachment:scroll!important;background-size:34px 34px,34px 34px,136px 136px,136px 136px,auto,auto,auto,auto!important}}

body:not(.light-mode) .section,body:not(.light-mode) .directory,body:not(.light-mode) .stats-section,body:not(.light-mode) .school-info-section,body:not(.light-mode) .quick-links-section,body:not(.light-mode) .digital-ecosystem-section{background:linear-gradient(135deg,rgba(2,6,23,.5),rgba(7,35,68,.42))!important;border-top:1px solid rgba(34,211,238,.055)}

/* Nama sekolah rasmi di atas alamat footer. */
.footer-school-details .footer-address-name{margin:20px 0 8px;color:#6EE7B7;font:700 14px/1.4 'Poppins',sans-serif;letter-spacing:.035em;text-transform:uppercase;text-shadow:0 0 12px rgba(16,185,129,.25)}

/* Saiz kad Pentadbiran diseragamkan dengan kad halaman lain. */
.page-hero+.section .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:18px}.page-hero+.section .feature-grid>.cards.compact{display:contents}.page-hero+.section .feature-grid>.leader-card{height:100%;min-width:0;aspect-ratio:auto!important;border:1px solid rgba(148,163,184,.2);border-radius:22px}.page-hero+.section .feature-grid .card{width:100%;height:100%}.page-hero+.section .feature-grid .thumb{width:100%;aspect-ratio:3/4}.page-hero+.section .feature-grid .card-body{min-height:176px}@media(max-width:900px){.page-hero+.section .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.page-hero+.section .feature-grid{grid-template-columns:1fr}.page-hero+.section .feature-grid>.leader-card{min-height:440px}.page-hero+.section .feature-grid .thumb{aspect-ratio:4/5}.page-hero+.section .feature-grid .card-body{min-height:0}}

/* Paparan penuh PIN sebelum memasuki EduSpace. */
body.eduspace-locked{overflow:hidden}.eduspace-pin-gate{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:24px;overflow:auto;background:radial-gradient(circle at 18% 15%,rgba(6,182,212,.28),transparent 28%),radial-gradient(circle at 85% 78%,rgba(37,99,235,.28),transparent 30%),linear-gradient(135deg,rgba(2,6,23,.98),rgba(5,35,67,.98));backdrop-filter:blur(24px);transition:opacity .36s ease,transform .36s ease}.eduspace-pin-gate:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(34,211,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.05) 1px,transparent 1px);background-size:42px 42px}.eduspace-pin-gate.unlocked{opacity:0;transform:scale(1.025);pointer-events:none}.eduspace-pin-card{width:min(480px,100%);position:relative;padding:38px 38px 30px;border:1px solid rgba(103,232,249,.38);border-radius:26px;background:linear-gradient(145deg,rgba(8,47,83,.9),rgba(3,15,39,.92));color:#F8FAFC;text-align:center;box-shadow:0 30px 75px rgba(0,3,18,.58),0 0 40px rgba(6,182,212,.16)}.eduspace-pin-card>img{width:88px;height:88px;padding:6px;object-fit:contain;border-radius:20px;background:#fff;box-shadow:0 0 26px rgba(6,182,212,.3)}.eduspace-pin-card>.eyebrow{margin:20px 0 8px;color:#67E8F9}.eduspace-pin-card h1{margin:0;font:700 clamp(25px,4vw,34px)/1.2 'Poppins',sans-serif}.eduspace-pin-card>p:not(.eyebrow){max-width:370px;margin:13px auto 24px;color:#CBD5E1;font-size:13px;line-height:1.7}.eduspace-pin-card form{text-align:left}.eduspace-pin-card label{display:flex;justify-content:space-between;margin-bottom:8px;color:#A7F3D0;font-size:11px;font-weight:700;letter-spacing:.08em}.eduspace-pin-card label span{color:#67E8F9;font-size:9px}.eduspace-pin-card input{width:100%;height:62px;padding:8px 18px;border:1px solid rgba(103,232,249,.38);border-radius:15px;outline:0;background:rgba(2,8,23,.68);color:#fff;text-align:center;font:700 30px/1 'Poppins',sans-serif;letter-spacing:.45em;caret-color:#22D3EE;transition:border-color .2s ease,box-shadow .2s ease}.eduspace-pin-card input:focus{border-color:#22D3EE;box-shadow:0 0 0 3px rgba(6,182,212,.14),0 0 22px rgba(6,182,212,.16)}.eduspace-pin-card input::placeholder{color:#64748B;letter-spacing:.3em}.eduspace-pin-error{min-height:20px;margin:7px 0 4px!important;color:#FCA5A5!important;font-size:11px!important;text-align:center}.eduspace-pin-card form>button{width:100%;min-height:52px;border:1px solid rgba(103,232,249,.48);border-radius:14px;background:linear-gradient(110deg,#10B981,#06B6D4 55%,#3B82F6);color:#fff;font-weight:800;box-shadow:0 0 22px rgba(6,182,212,.22);transition:transform .22s ease,filter .22s ease}.eduspace-pin-card form>button:hover{transform:translateY(-2px);filter:brightness(1.12)}.eduspace-pin-back{display:inline-block;margin-top:19px;color:#A5F3FC;text-decoration:none;font-size:11px}.eduspace-pin-card>small{display:block;margin-top:22px;padding-top:17px;border-top:1px solid rgba(103,232,249,.14);color:#64748B;font-size:9px;letter-spacing:.08em}@keyframes pin-shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}.eduspace-pin-card form.invalid{animation:pin-shake .35s ease}@media(max-width:540px){.eduspace-pin-gate{padding:15px}.eduspace-pin-card{padding:30px 21px 24px;border-radius:22px}.eduspace-pin-card>img{width:76px;height:76px}.eduspace-pin-card input{height:58px}}

/* Kad jawatan: gambar dan isi hanya muncul selepas kad ditekan. */
.reveal-card:not(.revealed) .thumb{display:none}.feature-grid>.reveal-leader:not(.revealed){min-height:96px!important;aspect-ratio:auto!important;background-image:linear-gradient(120deg,rgba(5,45,77,.96),rgba(4,78,91,.9))!important;background-color:#052D4D!important}
.reveal-leader{position:relative}

/* Gambar Kurikulum, HEM dan Kokum hanya dipaparkan selepas kad ditekan. */
#kurikulum .reveal-card:not(.revealed)>.thumb,#hem .reveal-card:not(.revealed)>.thumb,#kokurikulum .reveal-card:not(.revealed)>.thumb{display:none!important;visibility:hidden!important;opacity:0!important;background-image:none!important}#kurikulum .reveal-card.revealed>.thumb,#hem .reveal-card.revealed>.thumb,#kokurikulum .reveal-card.revealed>.thumb{display:block!important;visibility:visible!important;opacity:1!important;transition:opacity .3s ease}

/* Kad tertutup kecil; kad berkembang penuh selepas ditekan. */
#kurikulum .reveal-card:not(.revealed),#hem .reveal-card:not(.revealed),#kokurikulum .reveal-card:not(.revealed){width:min(360px,100%);height:88px!important;min-height:88px!important;justify-self:center;overflow:hidden;background:linear-gradient(120deg,rgba(5,45,77,.96),rgba(4,78,91,.9));border-color:rgba(103,232,249,.25);transition:height .34s ease,min-height .34s ease,border-color .3s ease,box-shadow .3s ease}#kurikulum .reveal-card:not(.revealed)>.card-body,#hem .reveal-card:not(.revealed)>.card-body,#kokurikulum .reveal-card:not(.revealed)>.card-body{position:relative!important;width:100%;height:88px;min-height:88px!important;padding:20px 58px 20px 20px!important;display:flex;align-items:center;background:transparent!important}#kurikulum .reveal-card:not(.revealed) .tag,#hem .reveal-card:not(.revealed) .tag,#kokurikulum .reveal-card:not(.revealed) .tag{display:block;margin:0;line-height:1.4}#kurikulum .reveal-card.revealed,#hem .reveal-card.revealed,#kokurikulum .reveal-card.revealed{height:480px!important;min-height:480px!important;transition:height .34s ease,min-height .34s ease,border-color .3s ease,box-shadow .3s ease}

/* Guru Besar bersendirian di atas grid kad Pentadbiran. */
.page-hero+.section .feature-grid{display:block}.page-hero+.section .feature-grid>.leader-card{width:min(360px,100%);min-height:480px;margin:0 auto 28px}.page-hero+.section .feature-grid>.cards.compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.page-hero+.section .feature-grid>.cards.compact .card{height:100%}@media(max-width:900px){.page-hero+.section .feature-grid>.cards.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.page-hero+.section .feature-grid>.leader-card{width:100%;min-height:440px;margin-bottom:20px}.page-hero+.section .feature-grid>.cards.compact{grid-template-columns:1fr}}

/* Kad guru bergambar menggunakan paparan visual seperti kad Guru Besar. */
.page-hero+.section .cards .card,#kurikulum .cards .card.revealed,#hem .cards .card.revealed,#kokurikulum .cards .card.revealed{position:relative;isolation:isolate;min-height:480px;display:flex;justify-content:flex-end;overflow:hidden;background:#071A30}.page-hero+.section .cards .card>.thumb,#kurikulum .cards .card.revealed>.thumb,#hem .cards .card.revealed>.thumb,#kokurikulum .cards .card.revealed>.thumb{display:block;position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background-size:contain!important;background-position:center top!important;background-repeat:no-repeat!important;border-radius:22px}.page-hero+.section .cards .card>.thumb:before,#kurikulum .cards .card.revealed>.thumb:before,#hem .cards .card.revealed>.thumb:before,#kokurikulum .cards .card.revealed>.thumb:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(2,8,23,.32) 58%,rgba(2,8,23,.96) 100%)}.page-hero+.section .cards .card>.card-body,#kurikulum .cards .card.revealed>.card-body,#hem .cards .card.revealed>.card-body,#kokurikulum .cards .card.revealed>.card-body{position:relative;z-index:1;width:100%;min-height:0;padding:88px 20px 22px;background:linear-gradient(180deg,transparent,rgba(2,8,23,.9));color:#F8FAFC}.page-hero+.section .cards .card h3,#kurikulum .cards .card.revealed h3,#hem .cards .card.revealed h3,#kokurikulum .cards .card.revealed h3{color:#fff}.page-hero+.section .cards .card p,#kurikulum .cards .card.revealed p,#hem .cards .card.revealed p,#kokurikulum .cards .card.revealed p{color:#D8E4EE}@media(max-width:600px){.page-hero+.section .cards .card,#kurikulum .cards .card.revealed,#hem .cards .card.revealed,#kokurikulum .cards .card.revealed{min-height:440px}}

/* Susunan tulisan kad guru mengikut kad Guru Besar. */
.page-hero+.section .cards .card>.card-body,#kurikulum .cards .card.revealed>.card-body,#hem .cards .card.revealed>.card-body,#kokurikulum .cards .card.revealed>.card-body{padding:88px 31px 31px}.page-hero+.section .cards .card .tag,#kurikulum .cards .card.revealed .tag,#hem .cards .card.revealed .tag,#kokurikulum .cards .card.revealed .tag{margin:0 0 7px;color:#67E8F9;font:700 10px/1.35 'Poppins',sans-serif;letter-spacing:.16em}.page-hero+.section .cards .card h3,#kurikulum .cards .card.revealed h3,#hem .cards .card.revealed h3,#kokurikulum .cards .card.revealed h3{font:700 clamp(21px,2.2vw,29px)/1.15 'Poppins',sans-serif;letter-spacing:-.03em}.page-hero+.section .cards .card p,#kurikulum .cards .card.revealed p,#hem .cards .card.revealed p,#kokurikulum .cards .card.revealed p{margin:7px 0 18px;text-align:left;line-height:1.55}.page-hero+.section .cards .card .card-link,#kurikulum .cards .card.revealed .card-link,#hem .cards .card.revealed .card-link,#kokurikulum .cards .card.revealed .card-link{width:max-content;padding:9px 13px;border:1px solid rgba(255,255,255,.5);border-radius:9px;background:rgba(2,8,23,.35);color:#fff}

/* Tulisan dikunci tepat pada bahagian bawah gambar kad guru. */
.page-hero+.section .cards .card>.card-body,#kurikulum .cards .card.revealed>.card-body,#hem .cards .card.revealed>.card-body,#kokurikulum .cards .card.revealed>.card-body{position:absolute;z-index:2;left:0;right:0;bottom:0;width:100%;margin:0;padding-top:96px;background:linear-gradient(180deg,transparent 0,rgba(2,8,23,.38) 30%,rgba(2,8,23,.96) 72%,#020817 100%)}

/* Kesan warna fade seragam seperti kad Guru Besar. */
.page-hero+.section .cards .card>.card-body,#kurikulum .cards .card.revealed>.card-body,#hem .cards .card.revealed>.card-body,#kokurikulum .cards .card.revealed>.card-body{background:linear-gradient(0deg,rgba(3,35,30,.98) 0%,rgba(3,35,30,.88) 32%,rgba(3,35,30,.52) 58%,rgba(3,35,30,.12) 82%,transparent 100%)}.page-hero+.section .cards .card,#kurikulum .cards .card.revealed,#hem .cards .card.revealed,#kokurikulum .cards .card.revealed{border-color:rgba(52,211,153,.34);box-shadow:0 18px 42px rgba(2,6,23,.36),0 0 22px rgba(16,185,129,.1)}.page-hero+.section .cards .card:hover,#kurikulum .cards .card.revealed:hover,#hem .cards .card.revealed:hover,#kokurikulum .cards .card.revealed:hover{border-color:rgba(52,211,153,.72);box-shadow:0 22px 48px rgba(2,6,23,.42),0 0 30px rgba(16,185,129,.2)}

/* Semua kad bergambar menggunakan ukuran sama seperti kad Guru Besar. */
.page-hero+.section .feature-grid>.leader-card{width:min(360px,100%);height:480px;min-height:480px}.page-hero+.section .feature-grid>.cards.compact,#kurikulum .cards,#hem .cards,#kokurikulum .cards{grid-template-columns:repeat(3,minmax(0,360px));justify-content:center;align-items:start}.page-hero+.section .cards .card,#kurikulum .cards .card.revealed,#hem .cards .card.revealed,#kokurikulum .cards .card.revealed{width:min(360px,100%);height:480px;min-height:480px;justify-self:center}@media(max-width:900px){.page-hero+.section .feature-grid>.cards.compact,#kurikulum .cards,#hem .cards,#kokurikulum .cards{grid-template-columns:repeat(2,minmax(0,360px))}}@media(max-width:600px){.page-hero+.section .feature-grid>.cards.compact,#kurikulum .cards,#hem .cards,#kokurikulum .cards{grid-template-columns:minmax(0,360px)}.page-hero+.section .feature-grid>.leader-card,.page-hero+.section .cards .card,#kurikulum .cards .card.revealed,#hem .cards .card.revealed,#kokurikulum .cards .card.revealed{width:min(360px,100%);height:480px;min-height:480px}}

/* Halaman Muat Turun Dokumen dan Borang. */
.document-download-section{min-height:520px}.document-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.document-card{min-height:285px;display:flex;flex-direction:column;padding:25px;position:relative;overflow:hidden;border:1px solid rgba(103,232,249,.25);border-radius:23px;background:radial-gradient(circle at 90% 8%,rgba(16,185,129,.17),transparent 32%),linear-gradient(145deg,rgba(8,47,83,.86),rgba(3,15,39,.92));box-shadow:0 18px 42px rgba(2,6,23,.34);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.document-card:hover{transform:translateY(-6px);border-color:rgba(52,211,153,.72);box-shadow:0 22px 48px rgba(2,6,23,.4),0 0 28px rgba(16,185,129,.18)}.document-icon{width:60px;height:60px;display:grid;place-items:center;margin-bottom:21px;border:1px solid rgba(103,232,249,.38);border-radius:18px;background:linear-gradient(135deg,#10B981,#06B6D4 58%,#3B82F6);font-size:27px;box-shadow:0 0 22px rgba(6,182,212,.22)}.document-copy{flex:1}.document-copy small{display:block;margin-bottom:7px;color:#67E8F9;font:700 9px 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase}.document-copy h3{color:#F8FAFC;font:700 18px/1.35 'Poppins',sans-serif}.document-copy p{margin:9px 0 20px;color:#CBD5E1;font-size:12px;line-height:1.65;text-align:justify}.document-card>a{display:flex;align-items:center;justify-content:space-between;min-height:45px;padding:11px 14px;border:1px solid rgba(103,232,249,.5);border-radius:12px;background:linear-gradient(110deg,#10B981,#06B6D4 55%,#3B82F6);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 0 18px rgba(6,182,212,.18)}.document-card>a:hover{filter:brightness(1.12)}.document-card>a b{font-size:18px}@media(max-width:900px){.document-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.document-grid{grid-template-columns:1fr}.document-card{min-height:255px;padding:21px}}

.document-download-button.downloading{pointer-events:none;opacity:.72;filter:saturate(.7)}
.document-storage-note{margin:0;padding:11px 13px;border:1px solid rgba(52,211,153,.22);border-radius:11px;background:rgba(16,185,129,.1);color:#A7F3D0;font-size:11px;line-height:1.55}

/* Tagline Pendidikan Digital pada kad tajuk utama. */
.hero>.hero-inner>.eyebrow{width:100%;max-width:none;margin:0 auto 5px;text-align:center}.hero>.hero-inner>.hero-digital-tagline{width:100%;max-width:none!important;margin:0 auto 19px!important;color:#A7F3D0!important;font:700 clamp(11px,1.15vw,14px)/1.35 'Poppins',sans-serif!important;letter-spacing:.14em;text-align:center!important;text-transform:uppercase;text-shadow:0 0 12px rgba(16,185,129,.55)}@media(max-width:600px){.hero>.hero-inner>.hero-digital-tagline{margin:0 auto 16px!important;font-size:10px!important;letter-spacing:.1em}}

/* Tema latar digital Navy Blue dan Emerald Green. */
html{background:#020617}body:not(.light-mode){background-color:#020617!important;background-image:linear-gradient(rgba(16,185,129,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(16,185,129,.055) 1px,transparent 1px),linear-gradient(rgba(59,130,246,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.022) 1px,transparent 1px),radial-gradient(circle at 8% 10%,rgba(16,185,129,.3),transparent 26%),radial-gradient(circle at 91% 22%,rgba(5,150,105,.25),transparent 29%),radial-gradient(circle at 48% 82%,rgba(6,78,59,.28),transparent 35%),linear-gradient(135deg,#020617 0%,#0F172A 44%,#052E2B 100%)!important;background-size:44px 44px,44px 44px,176px 176px,176px 176px,auto,auto,auto,auto!important}body:not(.light-mode) .section,body:not(.light-mode) .directory,body:not(.light-mode) .stats-section,body:not(.light-mode) .school-info-section,body:not(.light-mode) .quick-links-section,body:not(.light-mode) .digital-ecosystem-section{background:linear-gradient(135deg,rgba(2,6,23,.55),rgba(4,47,46,.44))!important;border-top-color:rgba(52,211,153,.1)}body:not(.light-mode) .site-header{background:linear-gradient(90deg,rgba(2,6,23,.94),rgba(6,52,49,.9))!important;border-bottom-color:rgba(52,211,153,.32);box-shadow:0 10px 36px rgba(0,6,24,.4),0 0 25px rgba(16,185,129,.09)}body:not(.light-mode) .topbar{background:linear-gradient(90deg,#020617,#0F2940 52%,#064E3B)!important}body:not(.light-mode) .page-hero{background:radial-gradient(circle at 82% 18%,rgba(52,211,153,.27),transparent 25%),radial-gradient(circle at 15% 88%,rgba(16,185,129,.2),transparent 28%),linear-gradient(120deg,#020617,#0F2940 52%,#065F46)!important}

.reveal-card,.reveal-leader{cursor:pointer;outline:0}.reveal-card:focus-visible,.reveal-leader:focus-visible{border-color:#67E8F9!important;box-shadow:0 0 0 3px rgba(6,182,212,.18),0 0 28px rgba(6,182,212,.24)!important}.reveal-card .card-body{position:relative;min-height:61px}.reveal-card:not(.revealed) .card-body h3,.reveal-card:not(.revealed) .card-body p,.reveal-card:not(.revealed) .card-body .card-link{display:none}.reveal-card:not(.revealed) .card-body .tag{max-width:calc(100% - 38px);margin:0;color:#A7F3D0;font-size:11px;line-height:1.45}.reveal-card .card-body:after{content:'+';position:absolute;right:17px;top:50%;width:28px;height:28px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid rgba(103,232,249,.35);border-radius:9px;color:#67E8F9;font:500 20px/1 'Inter',sans-serif;transition:transform .25s ease,background .25s ease}.reveal-card.revealed .card-body:after{top:18px;transform:rotate(45deg);background:rgba(16,185,129,.15)}.reveal-card.revealed .card-body{padding-right:56px}.reveal-card.revealed{border-color:rgba(52,211,153,.55);box-shadow:0 18px 42px rgba(2,6,23,.36),0 0 24px rgba(16,185,129,.14)}.reveal-leader:not(.revealed) h3,.reveal-leader:not(.revealed)>p:not(.eyebrow),.reveal-leader:not(.revealed) .outline{display:none}.reveal-leader:not(.revealed) .eyebrow{margin:0;max-width:calc(100% - 38px);color:#A7F3D0;font-size:12px}.reveal-leader:after{content:'+';position:absolute;right:25px;bottom:25px;width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(103,232,249,.45);border-radius:10px;background:rgba(2,8,23,.5);color:#67E8F9;font:500 22px/1 'Inter',sans-serif;transition:transform .25s ease,background .25s ease}.reveal-leader.revealed:after{transform:rotate(45deg);background:rgba(16,185,129,.25)}.reveal-leader.revealed{border:1px solid rgba(52,211,153,.58);box-shadow:0 20px 45px rgba(2,6,23,.42),0 0 27px rgba(16,185,129,.16)}

/* Info Sekolah: tajuk di kiri dan kandungan aktif di kanan. */
.school-info-split{width:min(1180px,100%);margin:24px auto 0;display:grid;grid-template-columns:minmax(255px,.72fr) minmax(0,1.8fr);gap:22px;align-items:start}.school-info-tabs{position:sticky;top:108px;display:grid;gap:10px;padding:13px;border:1px solid rgba(103,232,249,.22);border-radius:23px;background:linear-gradient(145deg,rgba(8,47,73,.8),rgba(2,12,31,.86));box-shadow:0 18px 44px rgba(2,6,23,.35)}.school-info-tab{width:100%;min-height:78px;display:grid;grid-template-columns:34px 38px minmax(0,1fr) 22px;align-items:center;gap:10px;padding:12px;border:1px solid rgba(103,232,249,.14);border-radius:16px;background:rgba(15,23,42,.55);color:#E2E8F0;text-align:left;cursor:pointer;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}.school-info-tab:hover{transform:translateX(4px);border-color:rgba(103,232,249,.5);background:rgba(6,78,91,.48)}.school-info-tab.active{border-color:rgba(52,211,153,.75);background:linear-gradient(110deg,rgba(5,150,105,.3),rgba(8,47,73,.84));box-shadow:0 0 24px rgba(16,185,129,.16),inset 3px 0 #34D399}.school-info-tab .school-info-number{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(2,8,23,.55);color:#67E8F9;font:700 10px 'Inter',sans-serif}.school-info-tab .school-info-summary-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#10B981,#06B6D4);font-size:18px;box-shadow:0 0 15px rgba(6,182,212,.2)}.school-info-tab small{display:block;margin-bottom:3px;color:#67E8F9;font:700 8px 'Inter',sans-serif;letter-spacing:.13em}.school-info-tab b{display:block;color:#F8FAFC;font:600 12px/1.35 'Poppins',sans-serif}.school-info-tab>i{color:#67E8F9;font-style:normal;font-size:16px;transition:transform .22s ease}.school-info-tab.active>i{transform:translateX(3px);color:#6EE7B7}.school-info-panels{min-width:0}.school-info-panel{min-height:535px;padding:30px;border:1px solid rgba(103,232,249,.25);border-radius:24px;background:radial-gradient(circle at 92% 5%,rgba(16,185,129,.15),transparent 30%),linear-gradient(145deg,rgba(8,47,73,.86),rgba(3,15,39,.92));box-shadow:0 22px 52px rgba(2,6,23,.38);animation:school-info-panel-in .3s ease}.school-info-panel[hidden]{display:none}.school-info-panel-head{display:flex;align-items:center;gap:16px;margin-bottom:8px;padding-bottom:20px;border-bottom:1px solid rgba(103,232,249,.16)}.school-info-panel-head>span{width:58px;height:58px;display:grid;place-items:center;flex:none;border:1px solid rgba(103,232,249,.4);border-radius:17px;background:linear-gradient(135deg,#10B981,#06B6D4 58%,#3B82F6);font-size:26px;box-shadow:0 0 22px rgba(6,182,212,.24)}.school-info-panel-head .eyebrow{margin:0 0 5px}.school-info-panel-head h2{margin:0;color:#F8FAFC;font:700 clamp(23px,3vw,32px)/1.2 'Poppins',sans-serif}.school-info-panel-body .school-info-detail-block{padding-left:0;padding-right:0}.school-info-panel-body .school-info-detail-block:last-child{padding-bottom:0}.school-info-panel-body .school-info-detail-block>div>p:not(.eyebrow){text-align:justify}.light-mode .school-info-tabs,.light-mode .school-info-panel{background:rgba(255,255,255,.9);border-color:rgba(15,118,110,.22)}.light-mode .school-info-tab{background:#F1F5F9;color:#0F172A}.light-mode .school-info-tab.active{background:linear-gradient(110deg,#D1FAE5,#CFFAFE)}.light-mode .school-info-tab b,.light-mode .school-info-panel-head h2{color:#0F172A}@keyframes school-info-panel-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}@media(max-width:820px){.school-info-split{grid-template-columns:1fr}.school-info-tabs{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.school-info-tab:hover{transform:translateY(-2px)}.school-info-panel{min-height:0}}@media(max-width:560px){.school-info-tabs{grid-template-columns:1fr;padding:10px}.school-info-tab{min-height:68px}.school-info-panel{padding:21px;border-radius:20px}.school-info-panel-head>span{width:50px;height:50px}.school-info-panel-head h2{font-size:22px}}
/* Skrin loading tiga saat untuk halaman utama. */
body.site-loading{overflow:hidden}.site-loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;overflow:hidden;background:radial-gradient(circle at 18% 18%,rgba(16,185,129,.28),transparent 30%),radial-gradient(circle at 82% 78%,rgba(6,182,212,.25),transparent 32%),linear-gradient(135deg,#020617,#0F2940 54%,#064E3B);color:#F8FAFC;opacity:1;visibility:visible;transition:opacity .6s ease,visibility .6s ease}.site-loader.leaving{opacity:0;visibility:hidden}.site-loader-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(52,211,153,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.065) 1px,transparent 1px);background-size:42px 42px;transform:perspective(600px) rotateX(55deg) scale(1.4);animation:loader-grid 5s linear infinite}.site-loader-card{width:min(560px,100%);position:relative;z-index:1;padding:38px 32px;text-align:center;border:1px solid rgba(103,232,249,.36);border-radius:28px;background:linear-gradient(145deg,rgba(8,47,73,.72),rgba(2,12,31,.78));box-shadow:0 28px 80px rgba(0,3,18,.55),0 0 45px rgba(16,185,129,.15);backdrop-filter:blur(20px)}.site-loader-logo{width:104px;height:104px;margin:0 auto 24px;padding:7px;border:1px solid rgba(103,232,249,.55);border-radius:25px;background:#fff;box-shadow:0 0 32px rgba(6,182,212,.32);animation:loader-logo 1.7s ease-in-out infinite alternate}.site-loader-logo img{width:100%;height:100%;display:block;object-fit:contain;border-radius:18px}.site-loader-card>p{margin:0 0 9px;color:#67E8F9;font:700 10px 'Inter',sans-serif;letter-spacing:.22em}.site-loader-card h1{margin:0;color:#F8FAFC;font:700 clamp(22px,4vw,34px)/1.25 'Poppins',sans-serif;letter-spacing:-.02em;text-shadow:0 0 18px rgba(52,211,153,.36)}.site-loader-progress{height:7px;margin:28px auto 15px;overflow:hidden;border:1px solid rgba(103,232,249,.25);border-radius:99px;background:rgba(2,8,23,.72)}.site-loader-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#10B981,#06B6D4,#3B82F6);box-shadow:0 0 16px rgba(6,182,212,.7);animation:loader-progress 3s linear forwards}.site-loader-card small{color:#A7F3D0;font-size:11px;letter-spacing:.04em}@keyframes loader-progress{to{width:100%}}@keyframes loader-logo{to{transform:translateY(-5px) scale(1.025);box-shadow:0 0 42px rgba(16,185,129,.42)}}@keyframes loader-grid{to{background-position:42px 42px}}@media(max-width:520px){.site-loader{padding:16px}.site-loader-card{padding:31px 19px;border-radius:23px}.site-loader-logo{width:88px;height:88px}.site-loader-card h1{font-size:21px}.site-loader-progress{margin-top:23px}}
.site-loader-logo{padding:0;border:0;border-radius:0;background:none;box-shadow:none;animation:loader-logo-float 1.7s ease-in-out infinite alternate}.site-loader-logo img{border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 0 18px rgba(6,182,212,.48))}@keyframes loader-logo-float{to{transform:translateY(-5px) scale(1.025)}}

/* Halaman dan butang Senarai Aktiviti Tahunan. */
.annual-activity-cta{max-width:1120px;min-height:92px;margin:30px auto 0;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid rgba(103,232,249,.42);border-radius:21px;background:radial-gradient(circle at 85% 50%,rgba(59,130,246,.2),transparent 34%),linear-gradient(110deg,rgba(5,150,105,.72),rgba(8,47,73,.9));color:#fff;text-decoration:none;box-shadow:0 18px 42px rgba(2,6,23,.34),0 0 25px rgba(16,185,129,.13);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.annual-activity-cta:hover{transform:translateY(-4px);border-color:#67E8F9;box-shadow:0 22px 48px rgba(2,6,23,.4),0 0 30px rgba(6,182,212,.22)}.annual-activity-cta small{display:block;margin-bottom:5px;color:#A7F3D0;font:700 9px 'Inter',sans-serif;letter-spacing:.14em}.annual-activity-cta b{font:700 clamp(16px,2vw,21px) 'Poppins',sans-serif}.annual-activity-cta i{width:48px;height:48px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.4);border-radius:14px;background:rgba(2,8,23,.25);font-style:normal;font-size:23px}.annual-activity-section{min-height:560px}.annual-activity-list{max-width:1120px;margin:0 auto;display:grid;gap:15px}.annual-activity-list article{display:grid;grid-template-columns:minmax(190px,.65fr) minmax(0,1.6fr) auto;align-items:center;gap:22px;padding:21px 24px;border:1px solid rgba(103,232,249,.22);border-radius:20px;background:linear-gradient(145deg,rgba(8,47,73,.84),rgba(3,15,39,.9));box-shadow:0 15px 36px rgba(2,6,23,.3);transition:transform .25s ease,border-color .25s ease}.annual-activity-list article:hover{transform:translateX(5px);border-color:rgba(52,211,153,.7)}.annual-activity-date{display:flex;align-items:center;gap:13px}.annual-activity-date>span{width:48px;height:48px;display:grid;place-items:center;flex:none;border-radius:14px;background:linear-gradient(135deg,#10B981,#06B6D4 58%,#3B82F6);font-size:22px;box-shadow:0 0 18px rgba(6,182,212,.2)}.annual-activity-date time{color:#A7F3D0;font:700 12px/1.45 'Poppins',sans-serif;text-transform:capitalize}.annual-activity-copy small{display:block;margin-bottom:4px;color:#67E8F9;font-size:9px;letter-spacing:.13em}.annual-activity-copy h3{margin:0;color:#F8FAFC;font:700 18px/1.35 'Poppins',sans-serif}.annual-activity-copy p{margin:6px 0 0;color:#CBD5E1;font-size:12px;line-height:1.6;text-align:justify}.annual-activity-list article>b{padding:7px 10px;border:1px solid rgba(52,211,153,.3);border-radius:99px;background:rgba(16,185,129,.12);color:#6EE7B7;font-size:10px;white-space:nowrap}.light-mode .annual-activity-list article{background:rgba(255,255,255,.9)}.light-mode .annual-activity-copy h3{color:#0F172A}.light-mode .annual-activity-copy p{color:#475569}@media(max-width:760px){.annual-activity-list article{grid-template-columns:1fr;gap:13px}.annual-activity-list article>b{width:max-content}.annual-activity-cta{min-height:82px;padding:16px 18px}.annual-activity-cta i{width:42px;height:42px}}

/* Skala tipografi kecil khusus untuk paparan telefon. */
@media(max-width:600px){body{font-size:12px}.topbar,.topbar span,.font-controls button{font-size:9px}.site-header .brand strong{font-size:9px}.hamburger-menu a,.menu-trigger,.admin-trigger,.site-utilities button{font-size:10px}.hero h1::after{font-size:23px;line-height:1.22}.hero>.hero-inner>.eyebrow{font-size:10px}.hero>.hero-inner>.hero-digital-tagline{font-size:9px!important}.hero p:not(.eyebrow),.page-hero>p:not(.eyebrow){font-size:12px;line-height:1.6}.page-hero h1{font-size:29px}.section-head h2,.quick-links-section .section-head h2,.school-calendar-head h2{font-size:24px}.section-head p{font-size:11px;line-height:1.55}.eyebrow,.tag{font-size:8px}.card h3,.directory-card h3,.annual-activity-copy h3,.school-info-detail-block h3{font-size:15px}.card p,.directory-card p,.annual-activity-copy p,.school-info-detail-block>div>p:not(.eyebrow),.school-location-heading>div>p:not(.eyebrow){font-size:11px}.card-link,.primary,.secondary-cta,.outline,.annual-activity-cta b{font-size:11px}.stat-public b{font-size:25px}.stat-public h3{font-size:13px}.stat-public p{font-size:10px}.achievement-table th,.achievement-table td,.content-table th,.content-table td{font-size:9px}.announcement-label,.announcement-track{font-size:9px}.school-info-accordion summary b{font-size:14px}.school-info-accordion summary small{font-size:8px}.annual-activity-date time{font-size:10px}.annual-activity-list article>b{font-size:8px}.quick-links-grid a b{font-size:11px}.quick-links-grid a small,.school-calendar-list time,.school-calendar-list small{font-size:9px}.digital-ecosystem-copy h2{font-size:23px}.digital-ecosystem-copy>p,.digital-ecosystem-features span{font-size:10px}.countdown-card-heading strong{font-size:12px}.countdown-units b{font-size:20px}.countdown-units small{font-size:8px}footer h3{font-size:13px}footer p,footer a,footer address,.footer-contact{font-size:10px}.login-view h2{font-size:29px}.login-view>p:not(.eyebrow),.login-view label,.login-view input,.editor-fields label,.editor-fields input,.editor-fields textarea,.editor-fields select,.dash-nav button,.dash-main p{font-size:10px}.dash-head h2{font-size:24px}.content-table{font-size:9px}}

/* Pratonton dan kawalan gambar Guru Besar dalam Panel Admin. */
.principal-admin-preview{grid-column:1/-1;min-height:180px;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid rgba(103,232,249,.28);border-radius:18px;background:linear-gradient(145deg,rgba(8,47,73,.72),rgba(3,15,39,.82))}.principal-admin-preview img{width:145px;height:180px;object-fit:contain;object-position:center top}.principal-admin-preview span{position:absolute;left:12px;bottom:10px;padding:5px 8px;border-radius:8px;background:rgba(2,8,23,.75);color:#A7F3D0;font-size:9px}.principal-admin-preview.empty-preview span{position:static;background:none;color:#94A3B8}.editor-fields label small{display:block;margin-top:7px;color:#94A3B8;font-weight:400}.principal-remove-photo{display:flex!important;align-items:center;gap:9px;padding:11px 13px;border:1px solid rgba(248,113,113,.25);border-radius:11px;background:rgba(127,29,29,.14);color:#FCA5A5}.principal-remove-photo input{width:auto!important;margin:0!important}

/* Gambar guru memenuhi keseluruhan bingkai kad. */
.page-hero+.section .feature-grid>.leader-card{background-size:cover,cover!important;background-position:center,center top!important}.page-hero+.section .cards .card>.thumb,#kurikulum .cards .card.revealed>.thumb,#hem .cards .card.revealed>.thumb,#kokurikulum .cards .card.revealed>.thumb,.cards.compact .thumb,#kurikulum .thumb,#hem .thumb,#kokurikulum .thumb{background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important}.principal-admin-preview img{width:100%;height:210px;object-fit:cover;object-position:center top}

/* Ikon buka kad Info Sekolah sentiasa kekal di hujung kanan. */
.school-info-accordion summary{grid-template-columns:auto auto minmax(0,1fr) 38px!important;width:100%}.school-info-accordion summary>span:nth-of-type(3){min-width:0}.school-info-accordion summary>i{grid-column:4;justify-self:end;margin-left:auto;flex:none}@media(max-width:700px){.school-info-accordion summary{grid-template-columns:0 47px minmax(0,1fr) 33px!important}.school-info-accordion summary>i{grid-column:4}}

/* Tetingkap Ucapan Guru Besar. */
.principal-speech-dialog{width:min(720px,calc(100% - 30px));max-height:min(82vh,760px);padding:0;overflow:auto;border:1px solid rgba(103,232,249,.34);border-radius:24px;background:linear-gradient(145deg,#0F2940,#052E2B);color:#F8FAFC;box-shadow:0 30px 90px rgba(2,6,23,.65)}.principal-speech-dialog::backdrop{background:rgba(2,6,23,.8);backdrop-filter:blur(8px)}.principal-speech-dialog article{position:relative;padding:clamp(27px,5vw,48px)}.principal-speech-dialog h2{margin:0 0 5px;font:700 clamp(24px,4vw,36px)/1.2 'Poppins',sans-serif}.principal-speech-dialog article>span{display:block;color:#6EE7B7;font-weight:700}.principal-speech-text{margin:27px 0;color:#E2E8F0;font-size:15px;line-height:1.9;text-align:justify;text-justify:inter-word;white-space:pre-line;hyphens:auto;-webkit-hyphens:auto}.principal-speech-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border:1px solid rgba(103,232,249,.35);border-radius:12px;background:rgba(2,8,23,.5);color:#fff;font-size:24px}.principal-speech-done{display:block;margin-left:auto}.light-mode .principal-speech-dialog{background:#fff;color:#0F172A}.light-mode .principal-speech-text{color:#334155}@media(max-width:600px){.principal-speech-dialog article{padding:25px 20px}.principal-speech-text{font-size:12px;line-height:1.75}}

/* Kad Guru Besar menggunakan tona biru dan tipografi lebih besar. */
.page-hero+.section .feature-grid>.leader-card{position:relative;isolation:isolate;overflow:hidden;border-color:rgba(59,130,246,.55)!important;background-color:#0B3150!important;box-shadow:0 20px 48px rgba(2,8,28,.42),0 0 26px rgba(59,130,246,.2)}.page-hero+.section .feature-grid>.leader-card::before{content:'';position:absolute;z-index:0;inset:0;background:linear-gradient(0deg,rgba(3,20,48,.96) 0%,rgba(7,59,103,.72) 36%,rgba(6,182,212,.16) 70%,rgba(59,130,246,.08) 100%);pointer-events:none}.page-hero+.section .feature-grid>.leader-card>*{position:relative;z-index:1}.page-hero+.section .feature-grid>.leader-card>.eyebrow{margin-bottom:8px;color:#67E8F9!important;font-size:12px;letter-spacing:.12em;text-shadow:0 0 14px rgba(6,182,212,.65)}.page-hero+.section .feature-grid>.leader-card>h3{color:#F8FAFC;font-size:21px;line-height:1.25;text-shadow:0 3px 18px rgba(2,8,23,.75)}@media(max-width:600px){.page-hero+.section .feature-grid>.leader-card>.eyebrow{font-size:10px}.page-hero+.section .feature-grid>.leader-card>h3{font-size:17px;line-height:1.3}}

/* Fade biru gelap hanya pada bahagian bawah gambar Guru Besar. */
.page-hero+.section .feature-grid>.leader-card::before{display:block!important;background:linear-gradient(to bottom,transparent 0%,transparent 52%,rgba(8,38,72,.18) 62%,rgba(8,38,72,.82) 79%,rgba(3,15,39,.98) 100%)!important}.page-hero+.section .feature-grid>.leader-card{background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important}
/* Jarak yang jelas antara input dan butang Pembantu Digital. */
#chatForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  margin-top: 14px;
}

#chatForm input {
  min-width: 0;
}

#chatForm .primary {
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 600px) {
  #chatForm {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #chatForm .primary {
    width: 100%;
  }
}

/* Galeri Pencapaian Sekolah pada halaman khusus. */
.achievement-gallery-section {
  position: relative;
  overflow: hidden;
  padding-top: 72px;
  padding-bottom: 88px;
}

.achievement-gallery-section::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  top: -180px;
  right: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.18), transparent 68%);
  pointer-events: none;
}

.achievement-gallery-heading {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 36px;
}

.achievement-gallery-heading > div { max-width: 760px; }
.achievement-gallery-heading h2 {
  margin: 7px 0 12px;
  color: #fff;
  font: 800 clamp(30px, 4vw, 46px)/1.12 'Poppins', sans-serif;
  letter-spacing: -.04em;
}
.achievement-gallery-heading > div > p:last-child {
  margin: 0;
  color: #CBD5E1;
  font-size: 14px;
  line-height: 1.75;
  text-align: justify;
}
.achievement-gallery-heading > span {
  min-width: 176px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  border: 1px solid rgba(103,232,249,.35);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(16,185,129,.16),rgba(6,182,212,.1));
  box-shadow: 0 14px 35px rgba(2,6,23,.24), inset 0 1px rgba(255,255,255,.08);
}
.achievement-gallery-heading > span b {
  color: #67E8F9;
  font: 800 32px/1 'Poppins', sans-serif;
  text-shadow: 0 0 18px rgba(6,182,212,.55);
}
.achievement-gallery-heading > span small {
  color: #A7F3D0;
  font: 700 9px/1.45 'Poppins', sans-serif;
  letter-spacing: .12em;
}

.achievement-level-filter {
  display: flex;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  margin: -8px auto 32px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.achievement-level-filter button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(103,232,249,.27);
  border-radius: 999px;
  background: rgba(15,41,68,.74);
  color: #DBEAFE;
  font: 750 11px/1 'Poppins',sans-serif;
  cursor: pointer;
  transition: .24s ease;
}
.achievement-level-filter button:hover,
.achievement-level-filter button.active {
  transform: translateY(-2px);
  border-color: #34D399;
  background: linear-gradient(110deg,#059669,#0891B2);
  color: #fff;
  box-shadow: 0 9px 24px rgba(6,182,212,.22),0 0 17px rgba(16,185,129,.16);
}
.achievement-level-filter button:focus-visible { outline: 2px solid #FBBF24; outline-offset: 3px; }
.achievement-gallery-card[hidden],.achievement-filter-empty[hidden] { display:none!important; }
.achievement-filter-empty { padding: 44px 20px; text-align:center; border:1px dashed rgba(103,232,249,.3); border-radius:22px; background:rgba(15,41,68,.45); }
.achievement-filter-empty span { font-size:38px; }
.achievement-filter-empty h3 { margin:9px 0 5px; color:#fff; }
.achievement-filter-empty p { margin:0; color:#94A3B8; }

.achievement-gallery-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 22px;
}
@media(max-width:600px){.achievement-level-filter{justify-content:flex-start;margin-bottom:23px}.achievement-level-filter button{min-height:38px;padding:9px 14px;font-size:9px}}
.achievement-gallery-card {
  min-width: 0;
  min-height: 365px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(103,232,249,.22);
  border-radius: 24px;
  background: linear-gradient(150deg,rgba(30,41,59,.9),rgba(9,25,47,.94));
  box-shadow: 0 22px 48px rgba(2,6,23,.3);
  transition: transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.achievement-gallery-card:hover {
  transform: translateY(-7px);
  border-color: rgba(52,211,153,.7);
  box-shadow: 0 26px 55px rgba(2,6,23,.38),0 0 28px rgba(16,185,129,.14);
}
.achievement-gallery-top {
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: radial-gradient(circle at 18% 15%,rgba(251,191,36,.22),transparent 34%),linear-gradient(120deg,rgba(16,185,129,.72),rgba(6,182,212,.58),rgba(59,130,246,.68));
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.achievement-gallery-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 18px;
  background: rgba(15,23,42,.36);
  font-size: 31px;
  box-shadow: 0 12px 26px rgba(2,6,23,.25),inset 0 1px rgba(255,255,255,.2);
}
.achievement-gallery-top small {
  color: #fff;
  font: 700 10px/1 'Poppins',sans-serif;
  letter-spacing: .15em;
}
.achievement-gallery-top.has-image {
  position: relative;
  min-height: 205px;
  padding: 0;
  overflow: hidden;
  background: #07162d;
}
.achievement-gallery-top.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 42%,rgba(2,6,23,.68));
  pointer-events: none;
}
.achievement-gallery-top.has-image img {
  width: 100%;
  height: 205px;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform .45s ease;
}
.achievement-gallery-image-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg,#065F46,#0891B2,#2563EB);
  font-size: 46px;
}
.achievement-gallery-top.has-image img { position: relative; z-index: 1; }
.achievement-gallery-top.image-unavailable::after { display: none; }
.achievement-gallery-top.image-unavailable small { z-index: 2; }
.achievement-gallery-card:hover .achievement-gallery-top.has-image img { transform: scale(1.035); }
.achievement-gallery-top.has-image small {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 16px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(10px);
}
.achievement-admin-preview {
  grid-column: 1/-1;
  position: relative;
  height: 210px;
  overflow: hidden;
  border: 1px solid rgba(103,232,249,.3);
  border-radius: 18px;
  background: #07162d;
}
.achievement-admin-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.achievement-admin-preview span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(15,23,42,.82);
  color: #A7F3D0;
  font-size: 10px;
  font-weight: 700;
}
.achievement-admin-preview.marked-for-removal img { opacity: .2; filter: grayscale(1); }
.achievement-admin-preview.marked-for-removal::after {
  content: 'GAMBAR AKAN DIPADAM';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #FCA5A5;
  font: 800 12px 'Poppins',sans-serif;
  letter-spacing: .12em;
}
.achievement-image-action-status {
  min-height: 20px;
  margin: -4px 0 2px;
  color: #A7F3D0;
  font-size: 11px;
  line-height: 1.5;
}
.achievement-remove-image { border-color: rgba(248,113,113,.36) !important; }
.achievement-gallery-copy {
  flex: 1;
  padding: 23px 24px 18px;
}
.achievement-gallery-copy > p:first-child,
.achievement-gallery-result small {
  display: block;
  margin: 0 0 8px;
  color: #6EE7B7;
  font: 700 9px/1.35 'Poppins',sans-serif;
  letter-spacing: .13em;
}
.achievement-gallery-copy h3 {
  margin: 0;
  color: #fff;
  font: 700 19px/1.38 'Poppins',sans-serif;
  overflow-wrap: anywhere;
}
.achievement-gallery-result {
  margin-top: 21px;
  padding-top: 17px;
  border-top: 1px solid rgba(148,163,184,.18);
}
.achievement-gallery-result p {
  margin: 0;
  color: #DCE8F6;
  font-size: 13px;
  line-height: 1.72;
  text-align: justify;
  overflow-wrap: anywhere;
}
.achievement-gallery-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  border: 0;
  border-top: 1px solid rgba(148,163,184,.16);
  background: rgba(4,15,32,.48);
}
.achievement-gallery-meta span {
  color: #94A3B8;
  font: 700 9px/1.3 'Poppins',sans-serif;
  letter-spacing: .12em;
}
.achievement-gallery-meta b {
  max-width: 68%;
  padding: 7px 11px;
  border-radius: 99px;
  background: rgba(16,185,129,.14);
  color: #6EE7B7;
  font: 700 11px/1.35 'Poppins',sans-serif;
  text-align: right;
  overflow-wrap: anywhere;
}
.achievement-gallery-empty {
  grid-column: 1/-1;
  padding: 70px 24px;
  border: 1px dashed rgba(103,232,249,.35);
  border-radius: 24px;
  background: rgba(15,23,42,.55);
  text-align: center;
}
.achievement-gallery-empty span { font-size: 46px; }
.achievement-gallery-empty h3 { margin: 15px 0 7px; color: #fff; }
.achievement-gallery-empty p { margin: 0; color: #CBD5E1; }

@media(max-width:920px){
  .achievement-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px){
  .achievement-gallery-section { padding-top: 46px; padding-bottom: 62px; }
  .achievement-gallery-heading { align-items: stretch; flex-direction: column; gap: 20px; }
  .achievement-gallery-heading > span { align-self: flex-start; min-width: 0; }
  .achievement-gallery-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .achievement-gallery-card { min-height: 0; border-radius: 20px; }
  .achievement-gallery-top { min-height: 88px; padding: 16px 18px; }
  .achievement-gallery-icon { width: 53px; height: 53px; font-size: 27px; border-radius: 16px; }
  .achievement-gallery-copy { padding: 20px 19px 16px; }
  .achievement-gallery-copy h3 { font-size: 17px; }
  .achievement-gallery-meta { padding: 14px 19px; }
}

/* Logo loading kekal telus sepenuhnya untuk semua viewer dan mod paparan. */
.site-loader .site-loader-logo,
.site-loader .site-loader-logo::before,
.site-loader .site-loader-logo::after,
.light-mode .site-loader .site-loader-logo,
.light-mode .site-loader .site-loader-logo::before,
.light-mode .site-loader .site-loader-logo::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-loader .site-loader-logo::before,
.site-loader .site-loader-logo::after {
  content: none !important;
  display: none !important;
}

.site-loader .site-loader-logo img,
.light-mode .site-loader .site-loader-logo img {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Halaman loading tanpa kotak biru dan dengan logo lebih besar. */
.site-loader-card {
  width: min(620px, 100%);
  padding: 28px 24px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-loader-logo {
  width: auto !important;
  height: 160px !important;
  margin-bottom: 25px;
}

.site-loader-logo img {
  width: auto !important;
  max-width: min(100%, 220px);
  height: 100% !important;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(6, 182, 212, .52));
}

.site-loader-progress {
  max-width: 520px;
}

@media (max-width: 520px) {
  .site-loader-card {
    padding: 22px 10px;
  }

  .site-loader-logo {
    height: 125px !important;
    margin-bottom: 20px;
  }
}

/* Logo loading dipaparkan tanpa kotak, warna latar, bingkai atau bayangan. */
.site-loader-logo,
.site-loader-logo::before,
.site-loader-logo::after {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-loader-logo {
  width: auto;
  height: 104px;
  padding: 0 !important;
  overflow: visible;
}

.site-loader-logo::before,
.site-loader-logo::after {
  display: none !important;
  content: none !important;
}

.site-loader-logo img {
  width: auto;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 520px) {
  .site-loader-logo {
    width: auto;
    height: 88px;
  }
}

/* Susunan tipografi kad Info Sekolah yang konsisten pada semua peranti. */
.school-info-accordion summary > span:nth-of-type(3),
.school-info-detail-block > div,
.school-location-heading > div,
.school-identity-banner > div {
  min-width: 0;
}

/* Tiada corak segi empat/grid hiasan pada halaman loading. */
.site-loader-grid {
  display: none !important;
  background: none !important;
  animation: none !important;
}

/* Senarai Guru dan AKP pada halaman Pentadbiran. */
.administration-rosters {
  padding-top: 18px;
}

.administration-roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.administration-roster-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(103, 232, 249, .25);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(8, 47, 73, .82), rgba(3, 15, 39, .9));
  box-shadow: 0 18px 44px rgba(2, 6, 23, .34);
}

.administration-roster-head {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-bottom: 1px solid rgba(103, 232, 249, .16);
}

.administration-roster-head h2 {
  margin: 0;
  color: #F8FAFC;
  font: 700 clamp(21px, 2.5vw, 28px)/1.25 'Poppins', sans-serif;
}

.administration-roster-head > div > p:last-child {
  margin: 7px 0 0;
  color: #CBD5E1;
  font-size: 12px;
  line-height: 1.55;
}

.administration-roster-head > span {
  min-width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #10B981, #06B6D4);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(6, 182, 212, .24);
}

.administration-roster-list {
  display: grid;
  max-height: 380px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #10B981 rgba(2, 8, 23, .36);
  -webkit-overflow-scrolling: touch;
}

.administration-roster-list::-webkit-scrollbar {
  width: 8px;
}

.administration-roster-list::-webkit-scrollbar-track {
  background: rgba(2, 8, 23, .36);
}

.administration-roster-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #06B6D4, #10B981);
}

.leadership-section-heading {
  max-width: 1120px;
  margin: 0 auto 28px;
  text-align: center;
}
.leadership-section-heading .eyebrow { margin: 0 0 7px; }
.leadership-section-heading h2 {
  margin: 0;
  color: #F8FAFC;
  font: 700 clamp(25px, 3vw, 38px)/1.18 'Poppins', sans-serif;
  text-shadow: 0 0 18px rgba(6,182,212,.16);
}
.leadership-section-heading > p:last-child {
  max-width: 690px;
  margin: 11px auto 0;
  color: #CBD5E1;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.light-mode .leadership-section-heading h2 { color: #0F172A; }
.light-mode .leadership-section-heading > p:last-child { color: #475569; }
@media(max-width:600px) {
  .leadership-section-heading { margin-bottom: 21px; padding: 0 5px; }
  .leadership-section-heading h2 { font-size: 24px; }
  .leadership-section-heading > p:last-child { font-size: 11px; }
}

/* Butang tindakan kad tajuk utama: ukuran seragam dan tanpa garisan bawah. */
.hero .primary,
.hero .secondary-cta {
  width: 220px;
  max-width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  box-sizing: border-box;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  border-bottom-style: solid;
}
@media(max-width:600px) {
  .hero .primary,
  .hero .secondary-cta {
    width: 220px;
    max-width: 100%;
    min-height: 43px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero .secondary-cta { margin-top: 10px; }
}

/* Kebolehgunaan sejagat untuk butang, pautan, media dan paparan kecil. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}
img,
video,
iframe {
  max-width: 100%;
}
a,
button,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #FBBF24;
  outline-offset: 3px;
}
.card-link-unset {
  border: 1px solid rgba(148,163,184,.42);
  border-radius: 11px;
  background: rgba(15,23,42,.42);
  color: #CBD5E1;
  cursor: help;
}
.card-link-unset:hover {
  border-color: #67E8F9;
  color: #F8FAFC;
}
@media(max-width:600px) {
  .primary,
  .secondary-cta,
  .card-link {
    min-height: 42px;
  }
  .site-header button,
  .header-quick-tools button,
  .font-controls button {
    min-height: 0;
  }
  dialog {
    max-width: calc(100vw - 20px);
  }
}

/* Kad tajuk setiap halaman menggunakan latar gradient bersih tanpa garisan hiasan. */
.page-hero::before,
.page-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Keterangan Pertandingan / Program dan Pencapaian sejajar kiri-kanan. */
.achievement-table tbody td:nth-child(1),
.achievement-table tbody td:nth-child(2) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Kalendar Jadual Perjumpaan Kokurikulum. */
.kokurikulum-calendar-section{padding-top:34px;padding-bottom:34px}.kokurikulum-calendar-card{border:1px solid rgba(34,211,238,.3);border-radius:24px;padding:30px;background:linear-gradient(145deg,rgba(8,38,72,.9),rgba(3,15,39,.9));box-shadow:0 22px 55px rgba(0,8,28,.4),0 0 28px rgba(16,185,129,.08)}.kokurikulum-calendar-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.kokurikulum-calendar-head h2{margin:4px 0 8px;font-size:clamp(25px,3vw,38px)}.kokurikulum-calendar-head>div>p:last-child{max-width:650px;margin:0;color:#b9c9df;line-height:1.65}.kokurikulum-calendar-nav{display:grid;grid-template-columns:42px minmax(150px,1fr) 42px;align-items:center;border:1px solid rgba(34,211,238,.3);border-radius:14px;overflow:hidden;background:rgba(15,23,42,.62)}.kokurikulum-calendar-nav button{height:42px;border:0;background:rgba(6,182,212,.14);color:#fff;font-size:25px;cursor:pointer}.kokurikulum-calendar-nav button:hover{background:#10b981}.kokurikulum-calendar-nav strong{text-align:center;text-transform:capitalize;font-size:13px}.kokurikulum-calendar-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.7fr);gap:24px}.kokurikulum-weekdays,.kokurikulum-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.kokurikulum-weekdays{margin-bottom:8px}.kokurikulum-weekdays b{text-align:center;color:#67e8f9;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.kokurikulum-calendar-grid>i,.kokurikulum-calendar-grid>button{min-height:68px;border-radius:13px}.kokurikulum-calendar-grid>button{position:relative;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.62);color:#dbeafe;font:inherit;cursor:default}.kokurikulum-calendar-grid>button.has-event{cursor:pointer;border-color:rgba(16,185,129,.7);background:linear-gradient(145deg,rgba(16,185,129,.34),rgba(6,182,212,.19));box-shadow:inset 0 0 18px rgba(16,185,129,.08),0 0 14px rgba(6,182,212,.1)}.kokurikulum-calendar-grid>button.has-event:hover,.kokurikulum-calendar-grid>button.selected{transform:translateY(-2px);border-color:#67e8f9;box-shadow:0 0 22px rgba(6,182,212,.3)}.kokurikulum-calendar-grid>button.is-today{outline:2px solid #fbbf24;outline-offset:-3px}.kokurikulum-calendar-grid>button span{font-weight:800;font-size:15px}.kokurikulum-calendar-grid>button small{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#10b981;color:white;font-size:9px}.kokurikulum-calendar-detail{min-height:260px;display:flex;align-items:flex-start;gap:14px;padding:23px;border:1px solid rgba(34,211,238,.24);border-radius:20px;background:linear-gradient(150deg,rgba(14,116,144,.2),rgba(16,185,129,.1))}.kokurikulum-calendar-detail>span{font-size:30px}.kokurikulum-calendar-detail small{color:#67e8f9;font-size:9px;letter-spacing:.12em}.kokurikulum-calendar-detail h3{margin:7px 0 15px;font-size:20px}.kokurikulum-calendar-detail article{padding:12px 0;border-top:1px solid rgba(148,163,184,.16)}.kokurikulum-calendar-detail article b{color:#6ee7b7}.kokurikulum-calendar-detail p{margin:5px 0 0;color:#cbd5e1;font-size:12px;line-height:1.6;text-align:justify}.kokurikulum-calendar-legend{display:flex;gap:20px;margin-top:18px;color:#b9c9df;font-size:11px}.kokurikulum-calendar-legend span{display:flex;align-items:center;gap:7px}.kokurikulum-calendar-legend i{width:11px;height:11px;border-radius:3px;background:#10b981}.kokurikulum-calendar-legend span:last-child i{background:transparent;border:2px solid #fbbf24}.bulk-calendar-editor textarea{min-height:320px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.7}@media(max-width:800px){.kokurikulum-calendar-head{align-items:stretch;flex-direction:column}.kokurikulum-calendar-nav{width:100%}.kokurikulum-calendar-layout{grid-template-columns:1fr}.kokurikulum-calendar-detail{min-height:180px}}@media(max-width:520px){.kokurikulum-calendar-card{padding:20px 13px}.kokurikulum-weekdays b{font-size:7px}.kokurikulum-calendar-grid>i,.kokurikulum-calendar-grid>button{min-height:48px;border-radius:9px}.kokurikulum-calendar-grid>button span{font-size:12px}.kokurikulum-calendar-grid>button small{width:16px;height:16px;right:3px;bottom:3px}.kokurikulum-calendar-layout{gap:16px}.kokurikulum-calendar-detail{padding:18px}.kokurikulum-calendar-legend{flex-direction:column;gap:8px}}

.administration-roster-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 13px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, .13);
}

.administration-roster-list article:last-child {
  border-bottom: 0;
}

.administration-roster-list article > b {
  color: #67E8F9;
  font-size: 10px;
  letter-spacing: .08em;
}

.administration-roster-list h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #F8FAFC;
  font: 600 14px/1.4 'Poppins', sans-serif;
}

.administration-roster-list p {
  margin: 4px 0 0;
  color: #A7F3D0;
  font-size: 11px;
  line-height: 1.45;
}

.administration-roster-list article > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(16, 185, 129, .14);
  font-style: normal;
  font-size: 18px;
}

.light-mode .administration-roster-card {
  background: rgba(255, 255, 255, .9);
}

.light-mode .administration-roster-head h2,
.light-mode .administration-roster-list h3 {
  color: #0F172A;
}

.light-mode .administration-roster-head > div > p:last-child {
  color: #475569;
}

@media (max-width: 780px) {
  .administration-roster-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .administration-roster-list {
    max-height: 320px;
  }
}

@media (max-width: 430px) {
  .administration-roster-head {
    padding: 19px 16px;
  }

  .administration-roster-list article {
    grid-template-columns: 27px minmax(0, 1fr) 34px;
    gap: 9px;
    padding: 14px 15px;
  }

  .administration-roster-list h3 {
    font-size: 12px;
  }
}

/* Kad SmartHub dan EduSpace menggunakan fungsi buka/tutup seperti kad pengurusan. */
#smarthub .cards,
#eduspace .cards {
  grid-template-columns: repeat(3, minmax(0, 360px));
  justify-content: center;
  align-items: start;
}

#smarthub .reveal-card:not(.revealed),
#eduspace .reveal-card:not(.revealed) {
  width: min(360px, 100%);
  height: 88px !important;
  min-height: 88px !important;
  justify-self: center;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(5, 45, 77, .96), rgba(4, 78, 91, .9));
  border-color: rgba(103, 232, 249, .25);
  transition: height .34s ease, min-height .34s ease, border-color .3s ease, box-shadow .3s ease;
}

#smarthub .reveal-card:not(.revealed) > .thumb,
#eduspace .reveal-card:not(.revealed) > .thumb {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background-image: none !important;
}

#smarthub .reveal-card:not(.revealed) > .card-body,
#eduspace .reveal-card:not(.revealed) > .card-body {
  position: relative !important;
  width: 100%;
  height: 88px;
  min-height: 88px !important;
  padding: 18px 56px 18px 19px !important;
  display: flex;
  align-items: center;
  background: transparent !important;
}

#smarthub .reveal-card:not(.revealed) .tag,
#eduspace .reveal-card:not(.revealed) .tag,
#smarthub .reveal-card:not(.revealed) p,
#eduspace .reveal-card:not(.revealed) p,
#smarthub .reveal-card:not(.revealed) .card-link,
#eduspace .reveal-card:not(.revealed) .card-link {
  display: none !important;
}

#smarthub .reveal-card:not(.revealed) h3,
#eduspace .reveal-card:not(.revealed) h3 {
  display: block !important;
  margin: 0;
  color: #A7F3D0;
  font: 700 14px/1.4 'Poppins', sans-serif;
  overflow-wrap: anywhere;
}

#smarthub .reveal-card.revealed,
#eduspace .reveal-card.revealed {
  position: relative;
  isolation: isolate;
  width: min(360px, 100%);
  height: 480px !important;
  min-height: 480px !important;
  display: flex;
  justify-content: flex-end;
  justify-self: center;
  overflow: hidden;
  background: #071A30;
  border-color: rgba(52, 211, 153, .42);
}

#smarthub .reveal-card.revealed > .thumb,
#eduspace .reveal-card.revealed > .thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  aspect-ratio: auto;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  border-radius: 22px;
}

#smarthub .reveal-card.revealed > .thumb::before,
#eduspace .reveal-card.revealed > .thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(2, 8, 23, .3) 58%, rgba(2, 8, 23, .96) 100%);
}

#smarthub .reveal-card.revealed > .card-body,
#eduspace .reveal-card.revealed > .card-body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 0;
  padding: 96px 56px 27px 27px;
  background: linear-gradient(0deg, rgba(3, 35, 30, .98) 0%, rgba(3, 35, 30, .88) 34%, rgba(3, 35, 30, .48) 65%, transparent 100%);
  color: #F8FAFC;
}

#smarthub .reveal-card.revealed h3,
#eduspace .reveal-card.revealed h3 {
  color: #fff;
  font: 700 clamp(20px, 2.2vw, 27px)/1.2 'Poppins', sans-serif;
}

#smarthub .reveal-card.revealed p,
#eduspace .reveal-card.revealed p {
  margin: 8px 0 18px;
  color: #D8E4EE;
  line-height: 1.58;
  text-align: left;
}

#smarthub .reveal-card.revealed .card-link,
#eduspace .reveal-card.revealed .card-link {
  width: max-content;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 9px;
  background: rgba(2, 8, 23, .38);
  color: #fff;
}

@media (max-width: 900px) {
  #smarthub .cards,
  #eduspace .cards {
    grid-template-columns: repeat(2, minmax(0, 360px));
  }
}

@media (max-width: 600px) {
  #smarthub .cards,
  #eduspace .cards {
    grid-template-columns: minmax(0, 360px);
  }

  #smarthub .reveal-card.revealed,
  #eduspace .reveal-card.revealed {
    height: 440px !important;
    min-height: 440px !important;
  }
}

/* Bar atas header sentiasa dipaparkan pada semua saiz peranti. */
.topbar {
  display: flex !important;
  min-height: 37px;
  height: auto;
}

.topbar > span {
  min-width: 0;
}

.topbar > span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: none;
}

.topbar .font-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.topbar .font-controls button[data-accessibility] {
  padding: 0;
  font-size: 11px;
}

@media (max-width: 700px) {
  .topbar {
    min-height: 42px;
    padding: 5px 10px;
    gap: 6px;
    font-size: 8px;
    line-height: 1.3;
  }

  .topbar > span:first-child {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar > span:last-child {
    gap: 5px;
  }

  #topWeather {
    max-width: none;
    overflow: visible;
    flex: none;
  }

  .font-controls {
    margin-left: 0;
    gap: 2px;
    flex: none;
  }

  .font-controls button {
    min-width: 23px;
    width: 23px;
    height: 21px;
    padding: 0 2px;
    font-size: 8px;
  }

  .topbar .font-controls button[data-accessibility] {
    font-size: 9px;
  }
}

@media (max-width: 420px) {
  .topbar {
    min-height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 8px;
    font-size: clamp(5.5px, 1.7vw, 7px);
    line-height: 1;
    white-space: nowrap;
  }

  .topbar > span:first-child {
    flex: 1 1 auto;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar > span:last-child {
    display: inline-flex;
    justify-content: flex-end;
    gap: 3px;
    flex: none;
    white-space: nowrap;
  }

  #topWeather {
    font-size: 7px;
    line-height: 1;
  }

  .font-controls {
    gap: 2px;
  }

  .font-controls button {
    min-width: 21px;
    width: 21px;
    height: 20px;
    padding: 0 2px;
    font-size: 7px;
  }

  .topbar .font-controls button[data-accessibility] {
    font-size: 8px;
  }
}

/* Tema global diseragamkan dengan halaman loading Cyan–Emerald–Navy. */
html {
  background: #0F172A;
}

body:not(.light-mode) {
  background-color: #0F172A !important;
  background-image:
    linear-gradient(rgba(103, 232, 249, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, .11) 1px, transparent 1px),
    radial-gradient(circle at 12% 14%, rgba(6, 182, 212, .34), transparent 33%),
    radial-gradient(circle at 86% 76%, rgba(16, 185, 129, .32), transparent 38%),
    linear-gradient(135deg, #0F172A 0%, #0B3550 48%, #064E3B 100%) !important;
  background-size: 44px 44px, 44px 44px, auto, auto, auto !important;
  background-attachment: fixed !important;
}

body:not(.light-mode) main {
  background: transparent;
}

body:not(.light-mode) .section,
body:not(.light-mode) .section.alt,
body:not(.light-mode) .directory,
body:not(.light-mode) .stats-section,
body:not(.light-mode) .school-info-section,
body:not(.light-mode) .quick-links-section,
body:not(.light-mode) .digital-ecosystem-section,
body:not(.light-mode) .annual-activity-section,
body:not(.light-mode) .document-download-section,
body:not(.light-mode) .administration-rosters {
  background: linear-gradient(135deg, rgba(15, 23, 42, .58), rgba(6, 78, 59, .38)) !important;
  border-top: 1px solid rgba(103, 232, 249, .09);
  backdrop-filter: blur(2px);
}

body:not(.light-mode) .page-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(6, 182, 212, .32), transparent 27%),
    radial-gradient(circle at 15% 86%, rgba(16, 185, 129, .28), transparent 30%),
    linear-gradient(120deg, #0F172A, #0E4B68 52%, #065F46) !important;
}

body:not(.light-mode) .site-header,
body:not(.light-mode) .topbar {
  background: linear-gradient(90deg, rgba(15, 23, 42, .97), rgba(8, 75, 94, .94), rgba(6, 95, 70, .94)) !important;
}

body:not(.light-mode) footer {
  background: linear-gradient(115deg, #0B1120, #0E4B68 54%, #064E3B) !important;
}

body:not(.light-mode) .dash-main,
body:not(.light-mode) #adminModal,
body:not(.light-mode) dialog {
  background:
    radial-gradient(circle at 88% 10%, rgba(6, 182, 212, .18), transparent 28%),
    linear-gradient(135deg, #0F172A, #0B3550 55%, #064E3B) !important;
}

@media (max-width: 700px) {
  body:not(.light-mode) {
    background-size: 32px 32px, 32px 32px, auto, auto, auto !important;
    background-attachment: scroll !important;
  }
}

/* Dialog keterangan penuh Berita Terkini. */
.news-read-button {
  width: max-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px;
  border: 1px solid rgba(103, 232, 249, .58);
  border-radius: 11px;
  background: linear-gradient(115deg, rgba(16, 185, 129, .24), rgba(6, 182, 212, .2));
  color: #F8FAFC;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 16px rgba(6, 182, 212, .14);
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.news-read-button:hover,
.news-read-button:focus-visible {
  transform: translateY(-2px);
  border-color: #A7F3D0;
  background: linear-gradient(115deg, #10B981, #06B6D4 58%, #3B82F6);
  color: #fff;
  box-shadow: 0 0 24px rgba(6, 182, 212, .38), 0 10px 24px rgba(2, 6, 23, .32);
  outline: none;
}

.news-read-button:active {
  transform: translateY(0) scale(.98);
}

.light-mode .news-read-button {
  border-color: rgba(8, 145, 178, .5);
  background: linear-gradient(115deg, rgba(16, 185, 129, .12), rgba(6, 182, 212, .14));
  color: #065F46;
}

@media (max-width: 600px) {
  .news-read-button {
    min-height: 36px;
    padding: 9px 12px;
    font-size: 10px;
  }
}

.news-detail-dialog {
  width: min(780px, calc(100% - 28px));
  max-height: 88vh;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(103, 232, 249, .36);
  border-radius: 24px;
  background: linear-gradient(145deg, #0F2940, #052E2B);
  color: #F8FAFC;
  box-shadow: 0 30px 90px rgba(2, 6, 23, .68), 0 0 36px rgba(6, 182, 212, .14);
}

.news-detail-dialog::backdrop {
  background: rgba(2, 6, 23, .82);
  backdrop-filter: blur(8px);
}

.news-detail-dialog article {
  position: relative;
}

.news-detail-image {
  width: 100%;
  max-height: 390px;
  display: block;
  object-fit: contain;
  object-position: center;
  background: rgba(2, 8, 23, .48);
}

.news-detail-gallery { padding: 14px 14px 0;background: rgba(2,8,23,.42); }
.news-detail-gallery > small { display:block;padding:10px 4px 12px;color:#67e8f9;font:700 9px/1.3 'Inter',sans-serif;letter-spacing:.13em;text-align:right; }
.news-detail-gallery-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.news-detail-gallery-grid button { min-width:0;padding:0;overflow:hidden;border:1px solid rgba(103,232,249,.25);border-radius:14px;background:#020817;cursor:zoom-in; }
.news-detail-gallery-grid button:first-child { grid-column:1/-1; }
.news-detail-gallery-grid button.expanded { grid-column:1/-1; }
.news-detail-gallery-grid img { width:100%;height:210px;display:block;object-fit:contain;background:#020817; }
.news-detail-gallery-grid button:first-child img,.news-detail-gallery-grid button.expanded img { height:min(430px,52vh); }

.news-admin-gallery { padding:15px;border:1px solid rgba(103,232,249,.24);border-radius:17px;background:rgba(2,8,23,.35); }
.news-admin-gallery>p { margin:0 0 12px; }
.news-admin-gallery>p b,.news-admin-gallery>p small { display:block; }
.news-admin-gallery>p small { margin-top:4px;color:#94a3b8;font-size:10px; }
.news-admin-gallery>div { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.news-admin-gallery article { overflow:hidden;padding:8px;border:1px solid rgba(148,163,184,.2);border-radius:13px;background:rgba(15,23,42,.72); }
.news-admin-gallery img { width:100%;aspect-ratio:4/3;display:block;margin-bottom:8px;border-radius:8px;object-fit:cover; }
.news-admin-gallery article label { display:flex;align-items:center;gap:6px;margin-top:5px;font-size:9px; }
.news-new-cover { display:flex!important;align-items:center;gap:8px; }

.news-detail-copy {
  padding: clamp(25px, 5vw, 46px);
}

.news-detail-copy h2 {
  margin: 0;
  color: #F8FAFC;
  font: 700 clamp(23px, 4vw, 36px)/1.25 'Poppins', sans-serif;
}

.news-detail-text {
  margin: 24px 0 28px;
  color: #E2E8F0;
  font-size: 15px;
  line-height: 1.85;
  text-align: justify;
  text-justify: inter-word;
  white-space: pre-line;
}

.news-detail-close {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(103, 232, 249, .4);
  border-radius: 12px;
  background: rgba(2, 8, 23, .78);
  color: #fff;
  font-size: 24px;
}

.news-detail-done {
  display: block;
  margin-left: auto;
}

.light-mode .news-detail-dialog {
  background: #fff;
  color: #0F172A;
}

.light-mode .news-detail-copy h2 {
  color: #0F172A;
}

.light-mode .news-detail-text {
  color: #334155;
}

@media (max-width: 600px) {
  .news-detail-image {
    max-height: 280px;
  }

  .news-detail-copy {
    padding: 24px 19px;
  }

  .news-detail-gallery { padding:8px 8px 0; }
  .news-detail-gallery-grid { gap:7px; }
  .news-detail-gallery-grid img { height:135px; }
  .news-detail-gallery-grid button:first-child img,.news-detail-gallery-grid button.expanded img { height:min(300px,43vh); }
  .news-admin-gallery>div { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .news-detail-text {
    font-size: 12px;
    line-height: 1.75;
  }
}

/* Latar loading Cyan–Emerald–Navy dengan kotak digital memenuhi skrin. */
.site-loader {
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 14%, rgba(6, 182, 212, .46), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(16, 185, 129, .42), transparent 38%),
    linear-gradient(135deg, #0F172A 0%, #0B3550 48%, #064E3B 100%) !important;
}

.site-loader::before {
  content: '' !important;
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block !important;
  background-image:
    linear-gradient(rgba(103, 232, 249, .19) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, .18) 1px, transparent 1px),
    linear-gradient(135deg, rgba(6, 182, 212, .055), transparent 48%, rgba(16, 185, 129, .06));
  background-size: 44px 44px, 44px 44px, 88px 88px;
  box-shadow: inset 0 0 130px rgba(2, 6, 23, .55);
  opacity: .82;
  animation: loading-tile-screen 7s linear infinite;
  pointer-events: none;
}

.site-loader::after {
  content: none !important;
  display: none !important;
}

.site-loader-card {
  z-index: 2;
}

@keyframes loading-tile-screen {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 44px 44px, 44px 44px, 88px 88px; }
}

@media (max-width: 520px) {
  .site-loader::before {
    background-size: 32px 32px, 32px 32px, 64px 64px;
    animation-name: loading-tile-screen-mobile;
  }
}

@keyframes loading-tile-screen-mobile {
  to { background-position: 32px 32px, 32px 32px, 64px 64px; }
}

/* Loader kekal kemas tetapi tidak melambatkan akses kepada kandungan. */
.site-loader { transition-duration: .38s !important; }
.site-loader-progress span { animation-duration: 2s !important; }
@media (prefers-reduced-motion: reduce) {
  .site-loader,
  .site-loader-progress span,
  .site-loader-logo,
  .site-loader::before { animation: none !important; transition-duration: .08s !important; }
}

/* Nombor Statistik Utama tanpa efek neon. */
.stats-section .stat-public > b {
  position: relative;
  z-index: 1;
  color: #6EE7F9;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  text-shadow: none;
  animation: none;
  filter: none;
}

.stats-section .stat-public:hover > b {
  color: #A5F3FC;
  text-shadow: none;
}

.light-mode .stats-section .stat-public > b {
  color: #047857;
  text-shadow: none;
}

/* Penapis aksesibiliti warna; kedua-duanya boleh digunakan serentak. */
html{--access-invert:;--access-grey:;filter:var(--access-invert) var(--access-grey)}
html.access-invert{--access-invert:invert(1) hue-rotate(180deg)}
html.access-grey{--access-grey:grayscale(1)}
.font-controls button[data-accessibility].active{border-color:#FBBF24;background:linear-gradient(135deg,#F59E0B,#10B981);color:#fff;box-shadow:0 0 14px rgba(251,191,36,.38)}

/* Carian portal dan Pembantu Digital dipertingkat. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.smart-tool-panel{width:min(480px,calc(100vw - 100px));max-height:min(78vh,720px);border-radius:22px}.smart-tool-intro{margin:-4px 0 18px;color:#CBD5E1;font-size:12px;line-height:1.6}.smart-search-box{display:grid;grid-template-columns:38px 1fr;align-items:center;overflow:hidden;border:1px solid rgba(103,232,249,.42);border-radius:14px;background:rgba(2,8,23,.58);box-shadow:0 0 0 0 rgba(6,182,212,0);transition:border-color .2s ease,box-shadow .2s ease}.smart-search-box:focus-within{border-color:#22D3EE;box-shadow:0 0 0 3px rgba(6,182,212,.13)}.smart-search-box>span{display:grid;place-items:center;color:#67E8F9;font-size:22px}.smart-search-box input{height:50px!important;padding:10px 13px 10px 0!important;border:0!important;outline:0!important;background:transparent!important}.smart-search-meta{min-height:34px;padding:11px 2px 6px;color:#94A3B8;font-size:10px}.smart-search-results{display:grid;gap:8px}.utility-panel .smart-search-result{display:block;padding:13px 14px;border:1px solid rgba(103,232,249,.15);border-radius:12px;background:rgba(15,41,69,.62);text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}.utility-panel .smart-search-result:hover{transform:translateX(3px);border-color:rgba(52,211,153,.55);background:rgba(6,78,59,.35)}.smart-search-result>span{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.smart-search-result b{color:#F8FAFC;font-size:13px;line-height:1.4}.smart-search-result small{flex:none;padding:4px 7px;border-radius:99px;background:rgba(16,185,129,.15);color:#6EE7B7;font-size:7px;text-transform:uppercase}.smart-search-result em{display:block;margin-top:5px;color:#AFC1D3;font-size:10px;font-style:normal;line-height:1.5}.smart-empty{padding:25px 16px;text-align:center;border:1px dashed rgba(103,232,249,.22);border-radius:13px;color:#CBD5E1}.smart-empty p{margin:7px 0 0;font-size:10px}.chat-quick-prompts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}.chat-quick-prompts button{padding:7px 10px;border:1px solid rgba(103,232,249,.3);border-radius:99px;background:rgba(6,182,212,.1);color:#A5F3FC;font-size:9px}.chat-quick-prompts button:hover{border-color:#34D399;background:rgba(16,185,129,.18);color:#D1FAE5}.smart-chat-log{height:min(330px,40vh);overflow:auto;margin:0 0 14px;padding:14px;overscroll-behavior:contain;scrollbar-color:#10B981 rgba(15,23,42,.5)}.smart-chat-log>div{width:fit-content;max-width:88%;margin:0 0 10px;padding:10px 12px;border-radius:13px;font-size:11px;line-height:1.6}.assistant-message{background:rgba(8,47,73,.86);color:#E2E8F0;border-bottom-left-radius:4px!important}.user-message{margin-left:auto!important;background:linear-gradient(120deg,#059669,#0891B2);color:#fff;border-bottom-right-radius:4px!important}.assistant-message a,.chat-suggestions a{display:block;margin-top:7px;padding:7px 9px!important;border:1px solid rgba(103,232,249,.25)!important;border-radius:9px;color:#A7F3D0!important;text-decoration:none}.chat-suggestions{display:grid;gap:2px;margin-top:7px}.smart-chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}.smart-chat-form input{min-width:0;height:48px}.smart-chat-form button{min-width:82px;padding:0 15px}.light-mode .smart-tool-intro,.light-mode .smart-search-meta{color:#475569}.light-mode .smart-search-box,.light-mode .smart-chat-log{background:#F1F5F9}.light-mode .utility-panel .smart-search-result{background:#F8FAFC}.light-mode .smart-search-result b{color:#0F172A}.light-mode .assistant-message{background:#E0F2FE;color:#0F172A}@media(max-width:600px){.smart-tool-panel{right:10px;left:10px;bottom:68px;width:auto;max-height:76vh;padding:18px;border-radius:18px}.smart-tool-panel h2{font-size:20px}.smart-chat-form{grid-template-columns:1fr}.smart-chat-form button{height:45px}.smart-chat-log{height:34vh}.smart-search-result>span{display:block}.smart-search-result small{display:inline-block;margin-top:5px}}

/* Halaman arkib berita memaparkan kandungan penuh serta reaksi viewer. */
.news-full-list {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
.news-full-card {
  overflow: hidden;
  border: 1px solid rgba(103,232,249,.25);
  border-radius: 24px;
  background: linear-gradient(145deg,rgba(12,43,88,.94),rgba(5,20,49,.98));
  box-shadow: 0 22px 52px rgba(2,6,23,.34);
}
.news-full-image {
  width: 100%;
  aspect-ratio: 1500 / 650;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg,#0C4A6E,#047857);
}
.news-full-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: rgba(2,8,23,.45);
}
.news-full-image > span {
  font-size: clamp(55px,9vw,100px);
}
.news-full-content {
  padding: clamp(22px,4vw,42px);
}
.news-full-content h2 {
  margin: 0;
  color: #F8FAFC;
  font: 700 clamp(23px,3vw,36px)/1.3 'Poppins',sans-serif;
  overflow-wrap: anywhere;
}
.news-full-summary {
  margin: 15px 0 0;
  color: #A7F3D0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.75;
  text-align: justify;
}
.news-full-text {
  margin-top: 21px;
  padding-top: 21px;
  border-top: 1px solid rgba(148,163,184,.2);
  color: #D7E2F0;
  font-size: 14px;
  line-height: 1.9;
  text-align: justify;
  text-justify: inter-word;
  white-space: pre-line;
}
.news-full-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 27px;
}
.news-full-actions .news-read-button { flex: none; margin-right: auto; }
.light-mode .news-full-card { background: rgba(255,255,255,.92); }
.light-mode .news-full-content h2 { color: #0F172A; }
.light-mode .news-full-summary { color: #047857; }
.light-mode .news-full-text { color: #334155; }
@media(max-width:600px) {
  .news-full-list { gap: 18px; }
  .news-full-card { border-radius: 19px; }
  .news-full-image { aspect-ratio: 4 / 3; }
  .news-full-content { padding: 20px 17px; }
  .news-full-content h2 { font-size: 20px; }
  .news-full-summary,.news-full-text { font-size: 11px; line-height: 1.75; }
  .news-full-actions { align-items: center; flex-wrap: nowrap; gap: 7px; margin-top: 21px; }
  .news-full-actions .news-read-button { width: auto; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 9px; white-space: nowrap; }
}

.school-info-accordion summary small,
.school-info-accordion summary b,
.school-info-detail-block h3,
.school-info-detail-block > div > p:not(.eyebrow),
.school-location-heading h2,
.school-location-heading > div > p:not(.eyebrow),
.school-identity-banner h2,
.school-identity-banner p {
  overflow-wrap: anywhere;
  word-break: normal;
}

.school-info-accordion summary small {
  line-height: 1.35;
}

.school-info-accordion summary b {
  line-height: 1.35;
}

.school-info-detail-block > div > p:not(.eyebrow),
.school-location-heading > div > p:not(.eyebrow) {
  width: 100%;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .school-info-accordion summary {
    grid-template-columns: 47px minmax(0, 1fr) 33px !important;
    column-gap: 12px;
  }

  .school-info-accordion summary > .school-info-number {
    display: none;
  }

  .school-info-accordion summary > .school-info-summary-icon {
    grid-column: 1;
  }

  .school-info-accordion summary > span:nth-of-type(3) {
    grid-column: 2;
  }

  .school-info-accordion summary > i {
    grid-column: 3;
  }

  .school-info-detail-block,
  .school-info-detail-block:has(.school-info-detail-image) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .school-info-accordion summary {
    min-height: 82px;
    grid-template-columns: 42px minmax(0, 1fr) 30px !important;
    gap: 9px;
    padding: 14px 12px;
  }

  .school-info-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 19px;
  }

  .school-info-accordion summary b {
    font-size: 13px;
  }

  .school-info-accordion summary i {
    width: 30px;
    height: 30px;
    font-size: 21px;
  }

  .school-info-detail {
    padding: 0 14px 19px;
  }

  .school-info-detail-block {
    gap: 14px;
    padding-top: 19px;
  }

  .school-info-detail-block > div > p:not(.eyebrow),
  .school-location-heading > div > p:not(.eyebrow) {
    font-size: 11px;
    line-height: 1.75;
  }

  .school-location-heading {
    gap: 12px;
    padding-right: 14px;
    padding-left: 14px;
  }
}

/* Kad Berita Terkini. */
#berita .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#berita .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

#berita .card-body > p {
  flex: 1;
}

#berita .news-read-button {
  margin-top: auto;
}

/* Arkib menggunakan paparan kad yang sama sepenuhnya dengan Berita Terkini. */
.page-hero + .news-archive-section .news-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.page-hero + .news-archive-section .news-archive-grid .card {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-self: stretch;
}

.page-hero + .news-archive-section .news-archive-grid .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  flex: none;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.page-hero + .news-archive-section .news-archive-grid .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.page-hero + .news-archive-section .news-archive-grid .card-body > p {
  flex: 1;
}

@media (max-width: 900px) {
  .page-hero + .news-archive-section .news-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .page-hero + .news-archive-section .news-archive-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard Laporan Mingguan Sekolah */
.weekly-dashboard{--weekly-card:linear-gradient(145deg,rgba(30,41,59,.9),rgba(9,27,48,.88));background:radial-gradient(circle at 8% 8%,rgba(6,182,212,.12),transparent 24%),radial-gradient(circle at 92% 34%,rgba(16,185,129,.12),transparent 25%);color:#f8fafc;padding-bottom:72px;min-height:100vh}.weekly-report-hero{position:relative;overflow:hidden;text-align:center;padding:70px max(20px,calc((100vw - 1180px)/2));background:linear-gradient(125deg,#0f172a 5%,#12334b 50%,#065f46);border-bottom:1px solid rgba(103,232,249,.26)}.weekly-report-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 25%,rgba(6,182,212,.24),transparent 25%),linear-gradient(rgba(103,232,249,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.035) 1px,transparent 1px);background-size:auto,38px 38px,38px 38px}.weekly-report-hero>*{position:relative}.weekly-report-hero h1{margin:8px auto 22px;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.045em;text-shadow:0 0 30px rgba(6,182,212,.32)}.weekly-period{display:grid;gap:5px;justify-items:center}.weekly-period b{font:800 clamp(24px,3vw,38px)/1.1 Poppins,sans-serif;color:#6ee7b7}.weekly-period span{font-weight:700;color:#e2e8f0}.weekly-period p{max-width:720px;margin:8px auto 0;color:#cbd5e1}.weekly-period-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:16px;margin-top:30px}.weekly-period-nav>div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.weekly-period-nav label,.weekly-admin-toolbar label{display:grid;gap:6px;text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;color:#a7f3d0}.weekly-period-nav select,.weekly-period-nav button,.weekly-admin-toolbar select{min-height:44px;border:1px solid rgba(103,232,249,.35);border-radius:12px;background:#0f2941;color:#fff;padding:10px 13px;font:700 13px Inter,sans-serif}.weekly-period-nav button{cursor:pointer;background:linear-gradient(110deg,#10b981,#0891b2);box-shadow:0 0 18px rgba(6,182,212,.2)}.weekly-period-nav button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.weekly-quick-nav{position:sticky;z-index:20;top:var(--header-offset,0);display:flex;justify-content:center;gap:6px;overflow-x:auto;overscroll-behavior-inline:contain;padding:10px max(16px,calc((100vw - 1180px)/2));background:rgba(7,20,38,.9);border-bottom:1px solid rgba(16,185,129,.26);backdrop-filter:blur(18px);scrollbar-width:thin}.weekly-quick-nav a{flex:0 0 auto;padding:10px 14px;border-radius:11px;color:#dbeafe;text-decoration:none;font-size:12px;font-weight:750;white-space:nowrap}.weekly-quick-nav a:hover{background:rgba(16,185,129,.18);color:#6ee7b7}.weekly-report-main{width:min(1180px,calc(100% - 32px));margin:34px auto;display:grid;gap:26px}.weekly-section,.weekly-summary{scroll-margin-top:92px;border:1px solid rgba(148,163,184,.18);border-radius:24px;background:var(--weekly-card);padding:clamp(20px,3vw,34px);box-shadow:0 20px 50px rgba(2,6,23,.3);overflow:hidden}.weekly-section.premium{border-color:rgba(251,191,36,.3);background:radial-gradient(circle at 100% 0,rgba(251,191,36,.12),transparent 35%),var(--weekly-card)}.weekly-section-title{display:flex;align-items:center;gap:14px;margin-bottom:22px}.weekly-section-title>span{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:15px;background:linear-gradient(140deg,rgba(16,185,129,.22),rgba(6,182,212,.22));font-size:25px;box-shadow:inset 0 0 0 1px rgba(103,232,249,.18)}.weekly-section-title .eyebrow{margin:0 0 2px;font-size:10px}.weekly-section-title h2{margin:0;font-size:clamp(21px,2.7vw,32px);line-height:1.15}.weekly-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.weekly-stat-grid article,.weekly-ranking-card,.weekly-late-summary article{position:relative;border:1px solid rgba(103,232,249,.16);border-radius:20px;background:linear-gradient(145deg,rgba(15,56,79,.78),rgba(15,23,42,.72));padding:22px;min-width:0;transition:.28s ease}.weekly-stat-grid article:hover,.weekly-ranking-card:hover,.weekly-profile-card:hover,.weekly-achievement-card:hover{transform:translateY(-5px);border-color:rgba(52,211,153,.55);box-shadow:0 15px 30px rgba(2,6,23,.28),0 0 20px rgba(16,185,129,.12)}.weekly-stat-grid article>span{font-size:24px}.weekly-stat-grid strong{display:block;margin:9px 0 5px;font:800 clamp(27px,3vw,39px)/1 Poppins,sans-serif;color:#67e8f9;text-shadow:0 0 20px rgba(6,182,212,.4)}.weekly-stat-grid h3{margin:0;color:#cbd5e1;font-size:12px;line-height:1.45}.weekly-profile-grid,.weekly-achievement-grid,.weekly-ranking-grid,.weekly-champion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.weekly-profile-card,.weekly-achievement-card{overflow:hidden;border:1px solid rgba(148,163,184,.18);border-radius:22px;background:rgba(15,23,42,.62);transition:.28s ease}.weekly-profile-card>div,.weekly-achievement-card>div{padding:18px}.weekly-profile-card small,.weekly-achievement-card span,.weekly-champion-card span{color:#6ee7b7;font-size:10px;font-weight:850;letter-spacing:.07em}.weekly-profile-card h3,.weekly-achievement-card h3,.weekly-champion-card h3{margin:6px 0;font-size:21px}.weekly-profile-card p,.weekly-achievement-card p,.weekly-champion-card p,.weekly-podium p,.weekly-bars p{color:#cbd5e1;line-height:1.65;text-align:justify}.weekly-image{display:block;width:100%;padding:0;border:0;background:#071426;cursor:zoom-in;overflow:hidden}.weekly-image img{display:block;width:100%;height:100%;object-fit:contain;background:linear-gradient(135deg,#071426,#0c3445)}.weekly-image.portrait{aspect-ratio:3/4}.weekly-image:not(.portrait){aspect-ratio:16/9}.weekly-image-empty{display:grid;place-items:center;background:linear-gradient(135deg,#0b3146,#064e3b);cursor:default}.weekly-image-empty span{font-size:55px;filter:drop-shadow(0 9px 13px rgba(2,6,23,.35))}.weekly-ranking-card{text-align:center}.weekly-ranking-card>span{display:block;font-size:38px}.weekly-ranking-card small{color:#67e8f9;font-weight:800}.weekly-ranking-card h3{font-size:23px;margin:8px 0}.weekly-ranking-card>b,.weekly-podium>b{display:block;margin-top:8px;color:#a7f3d0}.weekly-ranking-card.five-star{border-color:rgba(251,191,36,.65);box-shadow:0 0 24px rgba(251,191,36,.12)}.weekly-stars{display:flex;justify-content:center;gap:2px}.weekly-stars i{font-style:normal;color:#475569;font-size:21px;transition:.25s}.weekly-stars i.active{color:#fbbf24;text-shadow:0 0 12px rgba(251,191,36,.55);animation:weeklyStar 2.4s ease-in-out infinite}.weekly-kpi,.weekly-late-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.weekly-kpi>div,.weekly-late-summary article{padding:25px;border-radius:20px;background:rgba(7,31,52,.75);border:1px solid rgba(103,232,249,.18)}.weekly-kpi small{color:#67e8f9;font-weight:800}.weekly-kpi strong{display:block;margin:8px 0;font:800 clamp(36px,5vw,58px)/1 Poppins,sans-serif;color:#6ee7b7}.weekly-kpi i{display:block;height:9px;border-radius:10px;background:rgba(148,163,184,.2);overflow:hidden}.weekly-kpi i:after{content:"";display:block;width:var(--progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,#10b981,#06b6d4);animation:weeklyProgress 1.1s ease both}.weekly-bars{display:grid;gap:14px}.weekly-bars article{padding:16px 18px;border-radius:16px;background:rgba(15,23,42,.54);border:1px solid rgba(148,163,184,.14)}.weekly-bars article>div{display:flex;justify-content:space-between;gap:15px}.weekly-bars article>div span{color:#67e8f9;font-weight:800}.weekly-bars article>i{display:block;height:11px;margin-top:10px;border-radius:10px;background:#1e293b;overflow:hidden}.weekly-bars article>i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#10b981,#06b6d4,#3b82f6)}.weekly-bars p{margin:8px 0 0;font-size:12px}.weekly-late-summary article{text-align:center}.weekly-late-summary article span{font-size:30px}.weekly-late-summary article b{display:block;margin:9px 0;font:800 38px/1 Poppins,sans-serif;color:#67e8f9}.weekly-table-wrap,.weekly-admin-table-wrap{overflow:auto;border:1px solid rgba(148,163,184,.16);border-radius:17px}.weekly-table-wrap table{width:100%;min-width:650px;border-collapse:collapse}.weekly-table-wrap th,.weekly-table-wrap td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(148,163,184,.13)}.weekly-table-wrap th{position:sticky;top:0;background:#0b3a4b;color:#a7f3d0;font-size:11px;letter-spacing:.05em}.weekly-champion-card{position:relative;display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;align-items:center;overflow:hidden;border:1px solid rgba(251,191,36,.42);border-radius:24px;background:linear-gradient(120deg,rgba(120,75,12,.24),rgba(15,23,42,.7));box-shadow:0 0 30px rgba(251,191,36,.1)}.weekly-champion-card>div:last-child{padding:28px}.weekly-champion-card strong{display:block;color:#fbbf24;font:800 clamp(28px,4vw,44px)/1 Poppins,sans-serif}.weekly-confetti{position:absolute;z-index:2;right:18px;top:14px;color:#fbbf24;letter-spacing:10px;animation:weeklyFloat 2.6s ease-in-out infinite}.weekly-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:16px;padding-top:28px}.weekly-podium article{text-align:center;border:1px solid rgba(148,163,184,.18);border-radius:22px 22px 8px 8px;background:linear-gradient(145deg,rgba(15,56,79,.86),rgba(15,23,42,.72));padding-bottom:22px;overflow:hidden}.weekly-podium .rank-1{min-height:430px;border-color:rgba(251,191,36,.55);transform:translateY(-24px)}.weekly-podium .rank-2{min-height:380px}.weekly-podium .rank-3{min-height:350px}.weekly-podium article>span{display:block;margin-top:17px;color:#fbbf24;font-weight:850;font-size:11px}.weekly-podium h3{margin:7px;font-size:21px}.weekly-podium p{padding:0 16px;font-size:12px}.weekly-empty{text-align:center;padding:34px;border:1px dashed rgba(103,232,249,.25);border-radius:18px;background:rgba(15,23,42,.35)}.weekly-empty>span{font-size:34px;color:#67e8f9}.weekly-empty h3{margin:7px 0}.weekly-empty p{margin:0;color:#94a3b8}.weekly-lightbox{width:min(1000px,92vw);max-height:92vh;padding:0;border:1px solid rgba(103,232,249,.35);border-radius:20px;overflow:hidden}.weekly-lightbox::backdrop,.weekly-admin-preview::backdrop{background:rgba(2,6,23,.88);backdrop-filter:blur(8px)}.weekly-lightbox img{display:block;width:100%;max-height:88vh;object-fit:contain;background:#020617}.weekly-lightbox>button,.weekly-admin-preview article>button{position:absolute;z-index:2;right:12px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(2,6,23,.78);color:#fff;font-size:25px;cursor:pointer}.weekly-admin-toolbar{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr)) minmax(180px,1.5fr) auto;align-items:end;gap:12px;margin:20px 0;padding:18px;border:1px solid rgba(103,232,249,.2);border-radius:18px;background:rgba(15,23,42,.52)}.weekly-admin-toolbar .primary{height:44px}.weekly-admin-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:15px}.weekly-admin-summary span{padding:10px 14px;border-radius:12px;background:rgba(16,185,129,.12);color:#cbd5e1}.weekly-admin-summary b{color:#6ee7b7}.weekly-admin-table-wrap .content-table{min-width:760px}.weekly-admin-table-wrap td:first-child b,.weekly-admin-table-wrap td:first-child small{display:block;margin-left:42px}.weekly-admin-table-wrap tr[draggable=true]{cursor:grab}.weekly-admin-preview{width:min(520px,92vw);border:1px solid rgba(103,232,249,.35);border-radius:22px;padding:0;overflow:hidden}.weekly-admin-preview article{position:relative;padding:24px}.weekly-admin-preview .weekly-image{border-radius:15px;margin-bottom:18px}.weekly-admin-preview p{text-align:justify;white-space:pre-line}.weekly-editor-preview{grid-column:1/-1;display:flex;align-items:center;gap:12px}.weekly-editor-preview img{width:100px;height:120px;object-fit:contain;border-radius:13px;background:#071426}.weekly-editor-preview span{color:#a7f3d0;font-weight:800}.weekly-report-hero-button{white-space:nowrap}
[data-weekly-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}[data-weekly-reveal].visible{opacity:1;transform:none}@keyframes weeklyProgress{from{width:0}}@keyframes weeklyStar{50%{transform:translateY(-2px);filter:brightness(1.18)}}@keyframes weeklyFloat{50%{transform:translateY(-5px)}}
.light-mode .weekly-dashboard{color:#0f172a;--weekly-card:linear-gradient(145deg,rgba(255,255,255,.95),rgba(236,254,255,.9))}.light-mode .weekly-section,.light-mode .weekly-summary,.light-mode .weekly-stat-grid article,.light-mode .weekly-profile-card,.light-mode .weekly-achievement-card,.light-mode .weekly-ranking-card,.light-mode .weekly-kpi>div,.light-mode .weekly-late-summary article,.light-mode .weekly-bars article{color:#0f172a}.light-mode .weekly-profile-card p,.light-mode .weekly-achievement-card p,.light-mode .weekly-bars p{color:#475569}
@media(max-width:900px){.weekly-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.weekly-profile-grid,.weekly-achievement-grid,.weekly-ranking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.weekly-period-nav{grid-template-columns:1fr 1fr}.weekly-period-nav>div{grid-column:1/-1;grid-row:1}.weekly-admin-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.weekly-admin-toolbar .primary{grid-column:1/-1}.weekly-podium .rank-1,.weekly-podium .rank-2,.weekly-podium .rank-3{min-height:0}}
@media(max-width:600px){.weekly-report-hero{padding:45px 16px}.weekly-report-hero h1{font-size:31px}.weekly-period-nav{gap:8px}.weekly-period-nav>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.weekly-period-nav select{width:100%;padding:8px 4px;font-size:10px}.weekly-period-nav button{padding:9px 7px;font-size:10px}.weekly-quick-nav{justify-content:flex-start}.weekly-report-main{width:min(100% - 20px,1180px);gap:16px;margin-top:18px}.weekly-section,.weekly-summary{border-radius:19px;padding:17px}.weekly-section-title{align-items:flex-start}.weekly-section-title>span{flex-basis:40px;height:40px;font-size:20px}.weekly-section-title h2{font-size:20px}.weekly-stat-grid,.weekly-profile-grid,.weekly-achievement-grid,.weekly-ranking-grid,.weekly-kpi,.weekly-late-summary,.weekly-champion-card,.weekly-podium{grid-template-columns:1fr}.weekly-stat-grid article{padding:18px}.weekly-stat-grid strong{font-size:31px}.weekly-profile-grid,.weekly-achievement-grid{gap:13px}.weekly-image.portrait{max-height:440px}.weekly-champion-card>div:last-child{padding:20px}.weekly-podium{padding-top:0}.weekly-podium .rank-1{transform:none}.weekly-podium article{min-height:0!important}.weekly-admin-toolbar{grid-template-columns:1fr}.weekly-admin-toolbar .primary{grid-column:auto}.weekly-report-hero-button{margin-left:0!important}.weekly-lightbox{border-radius:13px}}

/* Trend kehadiran mingguan dijana automatik daripada rekod minggu terdahulu. */
.weekly-attendance-trend{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin:9px 0 12px;padding:7px 10px;border:1px solid rgba(148,163,184,.22);border-radius:999px;background:rgba(148,163,184,.1);color:#cbd5e1;font-size:10px;font-weight:800;line-height:1.35}.weekly-attendance-trend b{font-size:18px;line-height:1}.weekly-attendance-trend.up{border-color:rgba(52,211,153,.38);background:rgba(16,185,129,.14);color:#6ee7b7}.weekly-attendance-trend.down{border-color:rgba(251,113,133,.38);background:rgba(225,29,72,.13);color:#fda4af}.weekly-attendance-trend.steady{border-color:rgba(250,204,21,.38);background:rgba(202,138,4,.13);color:#fde047}.weekly-stat-grid .weekly-attendance-trend{margin-bottom:0;white-space:normal}
@media(prefers-reduced-motion:reduce){[data-weekly-reveal]{opacity:1;transform:none}.weekly-stars i.active,.weekly-confetti{animation:none}}

/* Paparan Pencapaian Sekolah yang stabil dan mudah dibaca pada telefon. */
@media (max-width: 600px) {
  #pencapaian,
  #pencapaian.portal-scroll-reveal,
  #pencapaian.portal-scroll-reveal.portal-reveal-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #pencapaian .achievement-table-wrap {
    display: block !important;
    width: 100%;
    max-width: 100%;
    max-height: 540px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
  }

  #pencapaian .achievement-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  #pencapaian .achievement-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #pencapaian .achievement-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  #pencapaian .achievement-table tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(103,232,249,.2);
    border-radius: 15px;
    background: linear-gradient(145deg,rgba(15,56,79,.78),rgba(15,23,42,.76));
  }

  #pencapaian .achievement-table tbody td {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr);
    gap: 10px;
    width: 100%;
    min-width: 0 !important;
    padding: 12px 14px;
    border-top: 1px solid rgba(148,163,184,.12);
    color: #E2E8F0;
    font-size: 11px;
    line-height: 1.6;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  #pencapaian .achievement-table tbody td:first-child { border-top: 0; }
  #pencapaian .achievement-table tbody td::before {
    color: #6EE7B7;
    font: 700 8px/1.5 'Poppins',sans-serif;
    letter-spacing: .08em;
  }
  #pencapaian .achievement-table tbody td:nth-child(1)::before { content: 'PERTANDINGAN / PROGRAM'; }
  #pencapaian .achievement-table tbody td:nth-child(2)::before { content: 'PENCAPAIAN'; }
  #pencapaian .achievement-table tbody td:nth-child(3)::before { content: 'PERINGKAT'; }

  #pencapaian .achievement-table .no-record {
    display: block;
    padding: 28px 16px;
    text-align: center !important;
  }
  #pencapaian .achievement-table .no-record::before { content: none; }
}

/* Paparan penuh Anugerah Kehadiran Bulanan Terbaik. */
.weekly-champion-grid{grid-template-columns:minmax(0,1fr);width:100%}
.weekly-champion-card{display:flex;flex-direction:column;align-items:stretch}
.weekly-champion-card .weekly-image.monthly-full{width:100%;aspect-ratio:16/9;max-height:none;background:#071426}
.weekly-champion-card .weekly-image.monthly-full img{width:100%;height:100%;object-fit:contain}
.weekly-champion-card>div:last-child{width:100%;box-sizing:border-box;text-align:center}
.weekly-champion-card>div:last-child p{max-width:760px;margin:9px auto;text-align:center;white-space:pre-line}
@media(max-width:600px){.weekly-champion-card{border-radius:18px}.weekly-champion-card .weekly-image.monthly-full{aspect-ratio:4/3}.weekly-champion-card>div:last-child{padding:18px}.weekly-champion-card strong{font-size:29px}}

/* Gambar analisis dipaparkan terus di bawah tajuk bahagian. */
.weekly-analysis-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}
.weekly-analysis-gallery.single{grid-template-columns:minmax(0,1fr)}
.weekly-analysis-gallery .weekly-image.analysis-full{width:100%;aspect-ratio:16/9;border:1px solid rgba(103,232,249,.18);border-radius:18px;background:#071426}
.weekly-analysis-gallery .weekly-image.analysis-full img{width:100%;height:100%;object-fit:contain}
@media(max-width:600px){.weekly-analysis-gallery{grid-template-columns:1fr;gap:10px}.weekly-analysis-gallery .weekly-image.analysis-full{aspect-ratio:4/3;border-radius:14px}}
.weekly-hero-upload{width:min(760px,100%);margin:0 auto 22px}
.weekly-hero-upload .weekly-image{aspect-ratio:16/9;border:1px solid rgba(103,232,249,.28);border-radius:18px;box-shadow:0 16px 35px rgba(2,6,23,.3)}
.weekly-ranking-card .weekly-image.compact-media{margin:-22px -22px 17px;width:calc(100% + 44px);aspect-ratio:16/9}
.weekly-bars .weekly-image.class-media{width:100%;aspect-ratio:16/9;margin-bottom:14px;border-radius:12px}
.weekly-ranking-card .weekly-image img,.weekly-bars .weekly-image img,.weekly-hero-upload .weekly-image img{object-fit:contain}
@media(max-width:600px){.weekly-hero-upload{margin-bottom:18px}.weekly-hero-upload .weekly-image{aspect-ratio:4/3;border-radius:14px}}

/* Satu gambar pasukan di kiri, nama dan tugas guru di kanan. */
.weekly-duty-card{display:grid;grid-template-columns:minmax(260px,38%) minmax(0,1fr);overflow:hidden;border:1px solid rgba(103,232,249,.2);border-radius:24px;background:linear-gradient(145deg,rgba(15,56,79,.78),rgba(15,23,42,.72));box-shadow:0 16px 38px rgba(2,6,23,.25)}
.weekly-duty-photo{align-self:start;width:100%;min-height:0;aspect-ratio:3/4;background:#071426}
.weekly-duty-photo .weekly-image{width:100%;height:auto;aspect-ratio:3/4}
.weekly-duty-photo .weekly-image img{object-fit:contain}
.weekly-duty-list{padding:clamp(22px,3vw,36px)}
.weekly-duty-list>h3{margin:4px 0 22px;font-size:clamp(22px,3vw,32px)}
.weekly-duty-list>div{display:grid;gap:12px}
.weekly-duty-list section{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:15px;border:1px solid rgba(148,163,184,.15);border-radius:16px;background:rgba(15,23,42,.42)}
.weekly-duty-list section>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#10b981,#0891b2);color:#fff;font-weight:850}
.weekly-duty-list h4{margin:0 0 3px;font-size:18px;color:#fff}
.weekly-duty-list b{color:#6ee7b7;font-size:11px;letter-spacing:.04em}
.weekly-duty-list p{margin:7px 0 0;color:#cbd5e1;line-height:1.65;text-align:justify;white-space:pre-line}
.light-mode .weekly-duty-card,.light-mode .weekly-duty-list section{color:#0f172a;background:rgba(255,255,255,.8)}
.light-mode .weekly-duty-list h4{color:#0f172a}
.light-mode .weekly-duty-list p{color:#475569}
@media(max-width:700px){.weekly-duty-card{grid-template-columns:1fr}.weekly-duty-photo{width:min(100%,420px);margin-inline:auto}.weekly-duty-photo .weekly-image{aspect-ratio:3/4}.weekly-duty-list{padding:18px}.weekly-duty-list section{grid-template-columns:36px minmax(0,1fr);padding:12px}.weekly-duty-list section>span{width:36px;height:36px}.weekly-duty-list h4{font-size:16px}.weekly-duty-list p{font-size:11px}}

/* Panel Admin laporan mengikut susunan seksyen pada halaman awam. */
.weekly-admin-period{grid-template-columns:repeat(3,minmax(130px,1fr)) auto;max-width:980px}
.weekly-delete-period{min-height:44px;padding:10px 15px;border:1px solid rgba(248,113,113,.5);border-radius:12px;background:rgba(127,29,29,.3);color:#fecaca;font-weight:800;cursor:pointer;white-space:nowrap;transition:.2s ease}
.weekly-delete-period:hover:not(:disabled){background:#b91c1c;color:#fff;box-shadow:0 0 20px rgba(239,68,68,.22);transform:translateY(-2px)}
.weekly-delete-period:disabled{opacity:.4;cursor:not-allowed}
.weekly-admin-period .weekly-delete-period{position:relative;z-index:2;pointer-events:auto;touch-action:manipulation}
.weekly-admin-sections{display:grid;gap:20px;margin-top:20px}
.weekly-admin-section{overflow:hidden;border:1px solid rgba(103,232,249,.2);border-radius:20px;background:linear-gradient(145deg,rgba(30,41,59,.76),rgba(15,23,42,.68));box-shadow:0 14px 34px rgba(2,6,23,.22)}
.weekly-admin-section>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid rgba(148,163,184,.16);background:linear-gradient(100deg,rgba(16,185,129,.1),rgba(6,182,212,.08))}
.weekly-admin-section>header>div{display:flex;align-items:center;gap:13px;min-width:0}
.weekly-admin-section>header>div>span{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:14px;background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(6,182,212,.25));font-size:22px}
.weekly-admin-section h3{margin:0;font-size:18px;color:#fff}
.weekly-admin-section-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.weekly-admin-section-name>b{padding:4px 8px;border:1px solid rgba(103,232,249,.25);border-radius:999px;background:rgba(6,182,212,.12);color:#67e8f9;font-size:9px;letter-spacing:.04em;white-space:nowrap}
.weekly-admin-section header p{margin:4px 0 0;color:#aebdce;font-size:11px;line-height:1.45}
.weekly-admin-section header .primary{flex:0 0 auto;padding:10px 15px;white-space:nowrap}
.weekly-admin-section .weekly-admin-table-wrap{border:0;border-radius:0}
.weekly-admin-section .content-table{margin:0;border:0;border-radius:0;box-shadow:none;min-width:700px}
.weekly-admin-empty{display:flex;justify-content:center;align-items:center;gap:8px;min-height:58px;color:#94a3b8;text-align:center}
.weekly-admin-empty b{color:#cbd5e1}
.light-mode .weekly-admin-section{background:rgba(255,255,255,.88)}
.light-mode .weekly-admin-section h3{color:#0f172a}
.light-mode .weekly-admin-section header p{color:#475569}
@media(max-width:720px){.weekly-admin-period{grid-template-columns:1fr}.weekly-admin-section>header{align-items:flex-start;padding:15px}.weekly-admin-section>header>div>span{flex-basis:38px;height:38px}.weekly-admin-section h3{font-size:15px}.weekly-admin-section header .primary{padding:9px 11px;font-size:10px}.weekly-admin-empty{flex-direction:column}.weekly-admin-sections{gap:14px}}

/* Kad pemenang bulanan diseragamkan dengan saiz kad Star Rating Bulanan. */
.weekly-champion-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:16px}
.weekly-champion-card{min-width:0;border-radius:22px}
.weekly-champion-card .weekly-image.monthly-full{aspect-ratio:16/9}
.weekly-champion-card>div:last-child{padding:20px}
.weekly-champion-card h3{font-size:21px}
.weekly-champion-card strong{font-size:clamp(24px,2.7vw,34px)}
.weekly-champion-card>div:last-child p:last-child{font-size:12px;line-height:1.55}
@media(max-width:900px){.weekly-champion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.weekly-champion-grid{grid-template-columns:1fr}.weekly-champion-card{width:100%;max-width:420px;margin-inline:auto}.weekly-champion-card .weekly-image.monthly-full{aspect-ratio:16/9}}

/* Kekalkan susunan baris yang ditaip oleh Admin pada keterangan pencapaian. */
.achievement-table tbody td:nth-child(2),
.achievement-gallery-result p {
  white-space: pre-line;
}

/* Keterangan Pencapaian Sekolah pada halaman utama dijajarkan kiri dan kanan. */
#pencapaian .achievement-table tbody td:nth-child(1),
#pencapaian .achievement-table tbody td:nth-child(2) {
  text-align: justify !important;
  text-align-last: left;
  white-space: pre-line;
}

/* Navigasi aktif dan pusat notifikasi portal. */
#mainNav a.current-page,
#mainNav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(90deg,rgba(16,185,129,.24),rgba(6,182,212,.2));
  box-shadow: inset 3px 0 #34d399;
}

.notification-trigger {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(103,232,249,.55);
  border-radius: 13px;
  background: linear-gradient(145deg,rgba(16,185,129,.22),rgba(6,182,212,.2));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(6,182,212,.18);
}

.notification-trigger:hover,
.notification-trigger[aria-expanded="true"] {
  background: linear-gradient(115deg,#10b981,#06b6d4);
  transform: translateY(-2px);
}

.notification-trigger > span { font-size: 17px; }
.notification-trigger > b {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid #0f172a;
  border-radius: 999px;
  background: #fbbf24;
  color: #0f172a;
  font: 800 10px/1 'Inter',sans-serif;
}

.notification-trigger > b[hidden] {
  display: none !important;
}

.header-control-cluster {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  flex: none;
}

.header-control-cluster .menu-trigger,
.header-control-cluster .notification-trigger,
.header-mode-trigger {
  margin: 0 !important;
}

.header-mode-trigger {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(103,232,249,.55);
  border-radius: 13px;
  background: linear-gradient(145deg,rgba(16,185,129,.22),rgba(6,182,212,.2));
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(6,182,212,.18);
}

.header-mode-trigger:hover {
  background: linear-gradient(115deg,#10b981,#06b6d4);
  transform: translateY(-2px);
}

/* Ketiga-tiga kawalan header menggunakan warna yang sama. */
.header-control-cluster .menu-trigger,
.header-control-cluster .notification-trigger,
.header-control-cluster .header-mode-trigger {
  border-color: rgba(103,232,249,.55) !important;
  background: linear-gradient(115deg,#10B981,#06B6D4 52%,#3B82F6) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(16,185,129,.28),0 9px 26px rgba(2,6,23,.28) !important;
}

.header-control-cluster .menu-trigger:hover,
.header-control-cluster .menu-trigger.open,
.header-control-cluster .notification-trigger:hover,
.header-control-cluster .notification-trigger[aria-expanded="true"],
.header-control-cluster .header-mode-trigger:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 27px rgba(6,182,212,.42),0 12px 32px rgba(2,6,23,.34) !important;
}

.notification-panel {
  position: fixed;
  z-index: 9998;
  top: 86px;
  right: clamp(12px,3vw,42px);
  width: min(390px,calc(100vw - 24px));
  max-height: min(620px,calc(100vh - 110px));
  overflow: hidden;
  border: 1px solid rgba(103,232,249,.38);
  border-radius: 22px;
  background: linear-gradient(150deg,rgba(15,23,42,.98),rgba(17,52,63,.98));
  color: #f8fafc;
  box-shadow: 0 24px 70px rgba(2,6,23,.58),0 0 32px rgba(6,182,212,.15);
  backdrop-filter: blur(22px);
}

.notification-panel[hidden] { display: none; }
.notification-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 19px 20px;
  border-bottom: 1px solid rgba(148,163,184,.2);
}
.notification-head small,.notification-list small { color: #67e8f9;font: 700 9px/1.35 'Inter',sans-serif;letter-spacing: .13em; }
.notification-head h2 { margin: 4px 0 0;font-size: 20px; }
.notification-head button { width: 34px;height: 34px;border: 0;border-radius: 11px;background: rgba(255,255,255,.09);color: #fff;font-size: 22px;cursor: pointer; }
.notification-list { max-height: min(520px,calc(100vh - 195px));overflow-y: auto;padding: 10px;scrollbar-width: thin;scrollbar-color: #10b981 transparent; }
.notification-list article { display: grid;grid-template-columns: 38px minmax(0,1fr);gap: 12px;padding: 14px 11px;border-radius: 15px; }
.notification-list article + article { border-top: 1px solid rgba(148,163,184,.14); }
.notification-list article:hover { background: rgba(16,185,129,.09); }
.notification-list article.notification-new { background: linear-gradient(100deg,rgba(16,185,129,.16),rgba(6,182,212,.08));box-shadow: inset 3px 0 #34d399; }
.notification-list article[data-notification-url] { cursor: pointer;transition: background .2s ease,transform .2s ease,box-shadow .2s ease; }
.notification-list article[data-notification-url]:hover,.notification-list article[data-notification-url]:focus-visible { background: linear-gradient(100deg,rgba(16,185,129,.25),rgba(6,182,212,.14));box-shadow: inset 3px 0 #34d399,0 0 18px rgba(6,182,212,.12);outline: none;transform: translateX(2px); }

/* Paparan gambar kad yang konsisten serta sandaran apabila fail tidak tersedia. */
.thumb{overflow:hidden;isolation:isolate}
.thumb>img{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:center top;background:linear-gradient(135deg,#073B67,#065F46);transition:transform .4s ease}
.card:hover .thumb>img{transform:scale(1.025)}
.thumb.has-image::after{display:none}
.thumb.image-unavailable::after{display:grid!important}
.thumb.image-unavailable>img{display:none!important}
#berita .thumb>img{object-fit:contain;object-position:center;background:linear-gradient(135deg,#073B67,#065F46)}
.cards.compact .thumb>img,#kurikulum .thumb>img,#hem .thumb>img,#kokurikulum .thumb>img{object-fit:cover;object-position:center top}
.image-unavailable>img{visibility:hidden}
@media(max-width:600px){.thumb>img{object-position:center top}.card:hover .thumb>img{transform:none}}
.notification-list article.notification-read { opacity: .78; }
.notification-list article > span { width: 38px;height: 38px;display: grid;place-items: center;border-radius: 12px;background: rgba(6,182,212,.13); }
.notification-list h3 { margin: 3px 0 5px;font-size: 14px;line-height: 1.35; }
.notification-list p { margin: 0;color: #cbd5e1;font-size: 11px;line-height: 1.55;text-align: justify;white-space: pre-line; }
.notification-empty { margin: 0;padding: 28px 15px;text-align: center;color: #cbd5e1; }

/* Floating Quick Menu: dipaparkan pada telefon sahaja. */
.phone-quick-dock{display:none}
body.site-loading .phone-quick-dock{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@media(max-width:600px){
  body.has-phone-quick-dock{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  body.has-phone-quick-dock .site-utilities{display:none!important}
  .phone-quick-dock{position:fixed;z-index:9996;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:9px;width:min(92vw,390px);pointer-events:none;opacity:.94;transform:translate(-50%,12px);animation:phoneDockIn .32s cubic-bezier(.2,.8,.2,1) forwards;transition:opacity .25s ease,transform .25s ease,filter .25s ease}
  .phone-quick-dock.has-scrolled{opacity:1;transform:translate(-50%,0)}
  .phone-quick-dock.is-reading,.phone-quick-dock.is-compact{opacity:.72;transform:translate(-50%,5px) scale(.92)}
  .phone-quick-dock:is(:hover,:focus-within),.phone-quick-dock:active{opacity:1;transform:translate(-50%,0) scale(1)}
  .phone-quick-pill,.phone-quick-menu{pointer-events:auto;border:1px solid rgba(103,232,249,.38);background:linear-gradient(145deg,rgba(15,23,42,.88),rgba(15,54,62,.82));-webkit-backdrop-filter:blur(20px) saturate(145%);backdrop-filter:blur(20px) saturate(145%);box-shadow:0 16px 42px rgba(2,6,23,.46),inset 0 1px rgba(255,255,255,.12)}
  .phone-quick-pill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:6px 8px;border-radius:999px}
  .phone-quick-pill>i{width:1px;height:28px;background:linear-gradient(transparent,rgba(103,232,249,.45),transparent)}
  .phone-quick-pill button{position:relative;min-width:74px;height:40px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;overflow:hidden;border:0;border-radius:999px;background:transparent;color:#ecfeff;font:700 10px/1 'Inter',sans-serif;letter-spacing:.02em;cursor:pointer;transition:transform .22s ease,background .22s ease,color .22s ease}
  .phone-quick-pill button:hover,.phone-quick-pill button:focus-visible,.phone-quick-pill button[aria-expanded="true"]{background:linear-gradient(115deg,rgba(16,185,129,.78),rgba(6,182,212,.78));color:#fff;transform:scale(1.05);outline:2px solid rgba(103,232,249,.75);outline-offset:2px}
  .phone-quick-pill button[hidden]{display:none!important}
  .phone-quick-pill svg,.phone-quick-menu svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
  .phone-quick-pill button:hover svg,.phone-quick-menu :is(button,a):hover svg{transform:scale(1.1)}
  .phone-quick-menu{position:absolute;left:50%;bottom:62px;width:min(92vw,360px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px;border-radius:22px;opacity:0;transform:translate(-50%,15px) scale(.95);transform-origin:bottom center;visibility:hidden;transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.2,1),visibility .26s}
  .phone-quick-menu.is-open{opacity:1;transform:translate(-50%,0) scale(1);visibility:visible}
  .phone-quick-menu[hidden]{display:grid!important;visibility:hidden}
  .phone-quick-menu :is(button,a){position:relative;min-width:0;min-height:47px;display:flex;align-items:center;gap:9px;padding:9px 11px;overflow:hidden;border:1px solid rgba(103,232,249,.12);border-radius:14px;background:rgba(15,23,42,.34);color:#e6fffb;text-decoration:none;text-align:left;font:700 10px/1.2 'Inter',sans-serif;cursor:pointer;opacity:0;transform:translateY(9px) scale(.97);transition:background .2s ease,border-color .2s ease,transform .2s ease,opacity .24s ease}
  .phone-quick-menu.is-open :is(button,a){opacity:1;transform:none}
  .phone-quick-menu.is-open :is(button,a):nth-child(2){transition-delay:.025s}.phone-quick-menu.is-open :is(button,a):nth-child(3){transition-delay:.05s}.phone-quick-menu.is-open :is(button,a):nth-child(4){transition-delay:.075s}.phone-quick-menu.is-open :is(button,a):nth-child(5){transition-delay:.1s}.phone-quick-menu.is-open :is(button,a):nth-child(6){transition-delay:.125s}
  .phone-quick-menu :is(button,a):hover,.phone-quick-menu :is(button,a):focus-visible{background:linear-gradient(115deg,rgba(16,185,129,.24),rgba(6,182,212,.28));border-color:rgba(103,232,249,.55);transform:translateY(-1px);outline:2px solid rgba(103,232,249,.72);outline-offset:1px}
  .phone-quick-menu :is(button,a).tap-ripple::after,.phone-quick-pill button.tap-ripple::after{content:"";position:absolute;inset:50%;border-radius:999px;background:rgba(255,255,255,.35);animation:phoneRipple .42s ease-out}
  @keyframes phoneDockIn{to{opacity:1;transform:translate(-50%,0)}}
  @keyframes phoneRipple{from{inset:50%;opacity:.75}to{inset:-35%;opacity:0}}
}
@media(max-width:360px){.phone-quick-menu{grid-template-columns:1fr;width:min(90vw,300px);max-height:58vh;overflow:auto}.phone-quick-pill button{min-width:68px;padding:0 9px}.phone-quick-menu :is(button,a){min-height:42px}}
@media(max-width:600px) and (prefers-reduced-motion:reduce){.phone-quick-dock,.phone-quick-menu,.phone-quick-menu :is(button,a),.phone-quick-pill button{animation:none!important;transition:none!important}}

/* Semua ikon Quick Menu sentiasa kelihatan tanpa perlu membuka menu Akses. */
@media(max-width:600px){
  body.has-phone-quick-dock{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .phone-quick-dock{width:min(96vw,430px)}
  .phone-quick-menu,.phone-quick-menu[hidden],.phone-quick-menu.is-open{position:static;left:auto;bottom:auto;width:100%;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:7px;border-radius:22px;opacity:1;visibility:visible;transform:none}
  .phone-quick-menu :is(button,a),.phone-quick-menu.is-open :is(button,a){min-height:48px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:5px 3px;opacity:1;transform:none;text-align:center;font-size:8px;white-space:nowrap}
  .phone-quick-menu svg{width:18px;height:18px}
  .phone-quick-menu .phone-scroll-up.is-muted{opacity:.42;filter:saturate(.55)}
  .phone-quick-menu .phone-scroll-up:disabled{cursor:default}
}
@media(max-width:360px){
  .phone-quick-menu,.phone-quick-menu.is-open{grid-template-columns:repeat(5,minmax(0,1fr));width:100%;max-height:none;overflow:visible}
  .phone-quick-menu :is(button,a){min-height:45px;font-size:7px}
}

/* Quick Menu telefon menggunakan ikon sahaja tanpa kotak individu. */
@media(max-width:600px){
  .phone-quick-dock{width:min(88vw,350px)}
  .phone-quick-menu,.phone-quick-menu.is-open{gap:2px;padding:7px 10px;border-radius:999px}
  .phone-quick-menu :is(button,a),.phone-quick-menu.is-open :is(button,a){min-height:48px;height:48px;padding:0;display:grid;place-items:center;border:0!important;border-radius:50%;background:transparent!important;box-shadow:none!important;color:#ecfeff;overflow:visible}
  .phone-quick-menu :is(button,a)>span{display:none!important}
  .phone-quick-menu svg{width:26px;height:26px;stroke-width:2}
  .phone-quick-menu :is(button,a):hover,.phone-quick-menu :is(button,a):focus-visible{background:transparent!important;border:0!important;transform:translateY(-2px) scale(1.1);outline:2px solid rgba(103,232,249,.78);outline-offset:-3px}
  .phone-quick-menu :is(button,a):active{transform:scale(.94)}
}
@media(max-width:360px){.phone-quick-dock{width:min(92vw,330px)}.phone-quick-menu :is(button,a){min-height:44px;height:44px}.phone-quick-menu svg{width:24px;height:24px}}

/* Panel Carian, Pembantu dan Kalendar berada sepenuhnya di atas Quick Menu. */
@media(max-width:600px){
  body.has-phone-quick-dock .utility-panel{z-index:9997;right:10px;left:10px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:auto;max-height:calc(100dvh - 118px - env(safe-area-inset-bottom,0px));overscroll-behavior:contain;border-radius:20px;box-shadow:0 20px 55px rgba(2,6,23,.58)}
  body.has-phone-quick-dock .utility-panel form:last-child{padding-bottom:4px}
}

@media (max-width:600px) {
  .header-control-cluster { gap: 5px; }
  .header-mode-trigger,
  .notification-trigger { width: 32px;height: 32px;flex-basis: 32px;border-radius: 10px; }
  .header-mode-trigger { font-size: 15px; }
  .notification-trigger > span { font-size: 14px; }
  .notification-panel { top: 72px;right: 8px;width: calc(100vw - 16px);border-radius: 18px; }
  .notification-head { padding: 15px 16px; }
  .notification-head h2 { font-size: 17px; }
}

/* Jajaran seragam untuk semua penerangan ringkas dalam kad awam. */
.card .card-body > p:not(.tag):not(.eyebrow),
.leader-card > p:not(.eyebrow),
.info-card p:not(.eyebrow),
.directory-card p,
.document-copy p,
.digital-ecosystem-copy > p:not(.eyebrow),
.quick-links-grid small,
.annual-activity-copy p,
.administration-roster-head p,
.administration-roster-list article p,
.news-full-summary,
.news-full-text,
.news-detail-text,
.achievement-gallery-result p,
.achievement-gallery-heading > div > p:last-child,
.kokurikulum-calendar-detail p,
.kokurikulum-calendar-head > div > p:last-child,
.school-info-detail-block > div > p:not(.eyebrow),
.school-location-heading > div > p:not(.eyebrow),
.notice p:not(.eyebrow),
.stat-public p {
  width: 100%;
  text-align: justify !important;
  text-align-last: left;
  text-justify: inter-word;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Interaksi halaman Berita mengikut kad Kurikulum/HEM/Kokurikulum. */
.page-hero + .news-archive-section .news-archive-grid {
  grid-template-columns: repeat(3, minmax(0, 360px));
  justify-content: center;
  align-items: start;
}

.page-hero + .news-archive-section .reveal-card:not(.revealed) {
  width: min(360px, 100%);
  height: auto !important;
  min-height: 88px !important;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(120deg, rgba(5,45,77,.96), rgba(4,78,91,.9));
  border-color: rgba(103,232,249,.25);
}

.page-hero + .news-archive-section .reveal-card:not(.revealed) > .thumb {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background-image: none !important;
}

.page-hero + .news-archive-section .reveal-card:not(.revealed) > .card-body {
  position: relative !important;
  width: 100%;
  height: auto;
  min-height: 88px !important;
  padding: 20px 58px 20px 20px !important;
  display: flex;
  align-items: center;
  background: transparent !important;
}

.page-hero + .news-archive-section .reveal-card:not(.revealed) .tag {
  display: none !important;
}

.page-hero + .news-archive-section .reveal-card:not(.revealed) p,
.page-hero + .news-archive-section .reveal-card:not(.revealed) .card-link {
  display: none !important;
}

.page-hero + .news-archive-section .reveal-card:not(.revealed) h3 {
  display: block !important;
  max-width: calc(100% - 12px);
  margin: 0;
  overflow: visible;
  color: #A7F3D0;
  font: 700 14px/1.4 'Poppins', sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.page-hero + .news-archive-section .reveal-card.revealed {
  width: min(360px, 100%);
  height: 480px !important;
  min-height: 480px !important;
  cursor: pointer;
}

.page-hero + .news-archive-section .reveal-card.revealed > .thumb {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.news-archive-section .card-body > p,
.news-detail-dialog .news-detail-text {
  width: 100%;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Kad tajuk halaman Berita sentiasa dipaparkan penuh pada semua peranti. */
.all-news-hero {
  width: 100%;
  min-height: 300px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

.all-news-hero h1,
.all-news-hero > p {
  width: 100%;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .all-news-hero {
    min-height: 245px;
    padding: 48px 20px;
  }

  .all-news-hero h1 {
    font-size: 29px;
    line-height: 1.2;
  }
}

/* Tipografi tajuk kad seragam untuk Kurikulum, HEM dan Kokurikulum. */
#kurikulum .reveal-card:not(.revealed) .tag,
#hem .reveal-card:not(.revealed) .tag,
#kokurikulum .reveal-card:not(.revealed) .tag {
  max-width: calc(100% - 38px);
  margin: 0 !important;
  color: #A7F3D0 !important;
  font: 700 11px/1.45 'Poppins', sans-serif !important;
  letter-spacing: .02em !important;
  text-align: left;
}

#kurikulum .reveal-card.revealed h3,
#hem .reveal-card.revealed h3,
#kokurikulum .reveal-card.revealed h3 {
  margin: 0;
  color: #FFFFFF !important;
  font: 700 clamp(21px, 2.2vw, 29px)/1.15 'Poppins', sans-serif !important;
  letter-spacing: -.03em !important;
  text-align: left;
}

@media (max-width: 600px) {
  #kurikulum .reveal-card:not(.revealed) .tag,
  #hem .reveal-card:not(.revealed) .tag,
  #kokurikulum .reveal-card:not(.revealed) .tag {
    font-size: 10px !important;
  }

  #kurikulum .reveal-card.revealed h3,
  #hem .reveal-card.revealed h3,
  #kokurikulum .reveal-card.revealed h3 {
    font-size: 21px !important;
  }
}

@media (max-width: 900px) {
  .page-hero + .news-archive-section .news-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 360px));
  }
}

@media (max-width: 600px) {
  .page-hero + .news-archive-section .news-archive-grid {
    grid-template-columns: minmax(0, 360px);
  }

  .page-hero + .news-archive-section .reveal-card.revealed {
    height: 440px !important;
    min-height: 440px !important;
  }
}

/* Penguatkuasaan akhir: bingkai potret 360 × 480 untuk setiap gambar Laporan Mingguan. */
.weekly-dashboard .weekly-image,
.weekly-dashboard .weekly-image.portrait,
.weekly-dashboard .weekly-image.analysis-full,
.weekly-dashboard .weekly-image.compact-media,
.weekly-dashboard .weekly-image.class-media,
.weekly-dashboard .weekly-image.monthly-full,
.weekly-dashboard .weekly-hero-upload .weekly-image {
  width: min(360px, 100%) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 3 / 4 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 22px !important;
}
.weekly-dashboard .weekly-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
.weekly-dashboard .weekly-analysis-image-card,
.weekly-dashboard .weekly-hero-upload {
  width: min(360px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 600px) {
  .weekly-dashboard .weekly-image,
  .weekly-dashboard .weekly-image.portrait,
  .weekly-dashboard .weekly-image.analysis-full,
  .weekly-dashboard .weekly-image.compact-media,
  .weekly-dashboard .weekly-image.class-media,
  .weekly-dashboard .weekly-image.monthly-full,
  .weekly-dashboard .weekly-hero-upload .weekly-image {
    width: min(330px, 100%) !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 19px !important;
  }
}

/* Penguatkuasaan terakhir: telefon menggunakan jadual Pencapaian desktop/tablet. */
@media (max-width: 600px) {
  #pencapaian .achievement-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(560px, 65vh) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #pencapaian .achievement-table {
    display: table !important;
    width: 100% !important;
    min-width: 700px !important;
    border-collapse: collapse !important;
  }
  #pencapaian .achievement-table thead {
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
  }
  #pencapaian .achievement-table tbody { display: table-row-group !important; padding: 0 !important; }
  #pencapaian .achievement-table tr {
    display: table-row !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #pencapaian .achievement-table th,
  #pencapaian .achievement-table td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0;
    padding: 14px 16px !important;
    font-size: 9px;
    text-align: left !important;
    vertical-align: top;
  }
  #pencapaian .achievement-table td:first-child { min-width: 230px !important; }
  #pencapaian .achievement-table td::before { content: none !important; display: none !important; }
}

/* Menu hamburger sentiasa berada di hadapan sticky quick navigation. */
.site-header { z-index: 100 !important; }
.site-header .hamburger-menu { z-index: 120 !important; }
.weekly-quick-nav { z-index: 20; }

/* Pastikan keterangan Pencapaian kekal justify selepas aturan responsif telefon. */
#pencapaian .achievement-table tbody td:nth-child(1),
#pencapaian .achievement-table tbody td:nth-child(2) {
  text-align: justify !important;
  text-align-last: left;
  white-space: pre-line;
}
.class-teacher-quick-add[hidden]{display:none!important}
.class-teacher-quick-add{margin:0 0 24px;padding:22px;border:1px solid rgba(16,185,129,.35);background:linear-gradient(145deg,rgba(15,23,42,.94),rgba(6,78,89,.42));border-radius:22px;box-shadow:0 18px 42px rgba(2,6,23,.28)}
.class-teacher-quick-add .editor-fields{margin-top:18px}
.class-teacher-quick-add .editor-actions{justify-content:flex-end;margin-top:14px}
.school-info-slideshow{width:min(1120px,100%);margin:0 auto 25px}.school-info-slide-stage{position:relative;overflow:hidden;aspect-ratio:3/1;min-height:300px;border:1px solid rgba(103,232,249,.3);border-radius:26px;background:#06172d;box-shadow:0 24px 58px rgba(2,6,23,.4),0 0 28px rgba(6,182,212,.08)}
.school-info-slide{position:absolute;inset:0;visibility:hidden;opacity:0;transform:scale(1.025);transition:opacity .65s ease,transform 1.1s ease,visibility .65s}.school-info-slide.active{visibility:visible;opacity:1;transform:scale(1);z-index:1}.school-info-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.04) contrast(1.02)}
.school-info-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,6,23,.88) 0%,rgba(2,6,23,.58) 38%,rgba(2,6,23,.08) 70%),linear-gradient(0deg,rgba(2,6,23,.7),transparent 48%);pointer-events:none}.school-info-slide-overlay{position:absolute;z-index:2;left:clamp(24px,5vw,64px);bottom:clamp(24px,4vw,50px);width:min(610px,72%);color:#fff}.school-info-slide-overlay small{display:inline-block;margin-bottom:8px;padding:6px 10px;border:1px solid rgba(110,231,183,.4);border-radius:999px;background:rgba(5,150,105,.2);color:#A7F3D0;font:800 9px Poppins,sans-serif;letter-spacing:.14em}.school-info-slide-overlay h2{margin:0 0 9px;font:800 clamp(23px,3.2vw,42px)/1.1 Poppins,sans-serif;text-shadow:0 5px 22px rgba(0,0,0,.5)}.school-info-slide-overlay p{display:-webkit-box;max-width:570px;margin:0;overflow:hidden;color:#E2E8F0;font-size:clamp(11px,1.2vw,14px);line-height:1.65;text-align:justify;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-line}
.school-info-slide-arrow{position:absolute;z-index:4;top:50%;display:grid;width:44px;height:44px;place-items:center;transform:translateY(-50%);border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(2,8,23,.54);color:#fff;font:300 31px/1 Inter,sans-serif;cursor:pointer;backdrop-filter:blur(10px);transition:.22s ease}.school-info-slide-arrow:hover{border-color:#6EE7B7;background:rgba(5,150,105,.72);box-shadow:0 0 20px rgba(16,185,129,.28)}.school-info-slide-arrow.prev{left:14px}.school-info-slide-arrow.next{right:14px}.school-info-slide-count{position:absolute;z-index:4;right:20px;bottom:17px;display:flex;align-items:baseline;gap:4px;padding:7px 10px;border-radius:10px;background:rgba(2,8,23,.58);color:#CBD5E1;font-size:10px;backdrop-filter:blur(9px)}.school-info-slide-count b{color:#67E8F9;font-size:15px}.school-info-slide-dots{display:flex;justify-content:center;gap:7px;padding:13px 5px 0}.school-info-slide-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#475569;cursor:pointer;transition:.25s ease}.school-info-slide-dots button.active{width:29px;background:linear-gradient(90deg,#10B981,#06B6D4);box-shadow:0 0 13px rgba(6,182,212,.4)}
.info-slide-admin-preview img{width:min(100%,420px);height:150px;object-fit:cover}.light-mode .school-info-slide-stage{border-color:rgba(13,148,136,.28);box-shadow:0 20px 45px rgba(15,23,42,.16)}
@media(max-width:700px){.school-info-slide-stage{aspect-ratio:16/9;min-height:240px;border-radius:20px}.school-info-slide-overlay{left:20px;bottom:22px;width:calc(100% - 80px)}.school-info-slide-overlay h2{font-size:21px}.school-info-slide-overlay p{-webkit-line-clamp:2;font-size:10px}.school-info-slide-arrow{width:36px;height:36px;font-size:25px}.school-info-slide-arrow.prev{left:8px}.school-info-slide-arrow.next{right:8px}.school-info-slide-count{right:12px;bottom:10px}.school-info-slide-overlay small{font-size:7px}}

/* Tajuk galeri Info Sekolah lebih kecil supaya gambar menjadi fokus utama. */
.school-info-slide-overlay h2{max-width:520px;margin:0;font-size:clamp(17px,2.1vw,28px);line-height:1.2}
@media(max-width:700px){.school-info-slide-overlay h2{font-size:16px}}

/* Telefon: paparkan keseluruhan gambar galeri Info Sekolah tanpa crop. */
@media(max-width:700px){
  .school-info-slideshow{width:100%;overflow:hidden}
  .school-info-slide-stage{width:100%;min-height:0;aspect-ratio:16/9;background:linear-gradient(145deg,#071a33,#063c3a)}
  .school-info-slide img{width:100%;height:100%;object-fit:contain;object-position:center}
  .school-info-slide:after{background:linear-gradient(0deg,rgba(2,6,23,.72) 0%,rgba(2,6,23,.08) 42%,transparent 70%)}
  .school-info-slide-overlay{left:52px;right:52px;bottom:14px;width:auto;text-align:center}
  .school-info-slide-overlay small{display:none}
  .school-info-slide-overlay h2{max-width:none;font-size:14px;line-height:1.25}
}

/* Pencapaian Sekolah — paparan premium pada halaman utama. */
.achievement-home-premium{position:relative;overflow:hidden;background:radial-gradient(circle at 92% 6%,rgba(251,191,36,.14),transparent 25%),radial-gradient(circle at 5% 72%,rgba(16,185,129,.16),transparent 28%),linear-gradient(145deg,rgba(5,21,48,.94),rgba(4,44,58,.84));border-top:1px solid rgba(103,232,249,.14);border-bottom:1px solid rgba(16,185,129,.18)}
.achievement-home-premium:before{content:"";position:absolute;top:-110px;right:-90px;width:300px;height:300px;border:1px solid rgba(251,191,36,.12);border-radius:50%;box-shadow:0 0 0 35px rgba(251,191,36,.025),0 0 0 70px rgba(6,182,212,.025);pointer-events:none}
.achievement-home-premium>.section-head{position:relative;z-index:1;margin-bottom:26px}.achievement-home-premium>.section-head h2{font-size:clamp(30px,4vw,48px)}
.achievement-home-showcase{position:relative;z-index:1;display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:28px;margin:0 0 26px;padding:27px 30px;border:1px solid rgba(103,232,249,.25);border-radius:25px;background:linear-gradient(120deg,rgba(8,47,83,.78),rgba(5,78,70,.52));box-shadow:0 22px 55px rgba(1,8,24,.34),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(16px)}
.achievement-home-emblem{position:relative;width:118px;aspect-ratio:1;display:grid;place-items:center;margin:auto;border:1px solid rgba(251,191,36,.42);border-radius:50%;background:radial-gradient(circle,rgba(251,191,36,.2),rgba(6,182,212,.09) 58%,transparent 60%);box-shadow:0 0 34px rgba(251,191,36,.12),inset 0 0 28px rgba(6,182,212,.12)}
.achievement-home-emblem span{font-size:50px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}.achievement-home-emblem i{position:absolute;width:8px;height:8px;border-radius:50%;background:#FBBF24;box-shadow:0 0 14px #FBBF24;animation:achievementSpark 2.8s ease-in-out infinite}.achievement-home-emblem i:nth-child(2){top:17%;right:12%}.achievement-home-emblem i:nth-child(3){bottom:18%;left:8%;animation-delay:-.8s}.achievement-home-emblem i:nth-child(4){right:2%;bottom:32%;background:#67E8F9;box-shadow:0 0 14px #06B6D4;animation-delay:-1.6s}@keyframes achievementSpark{50%{transform:scale(1.8);opacity:.42}}
.achievement-home-copy h3{margin:3px 0 8px;color:#fff;font-size:clamp(20px,2.4vw,30px);line-height:1.25}.achievement-home-copy>p:not(.eyebrow){max-width:700px;margin:0;color:#C8D8E9;font-size:13px;line-height:1.7;text-align:justify}.achievement-home-metrics{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}.achievement-home-metrics>span{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid rgba(103,232,249,.18);border-radius:12px;background:rgba(15,23,42,.38)}.achievement-home-metrics b{color:#FBBF24;font:800 18px Poppins,sans-serif}.achievement-home-metrics small{color:#CFE6F3;font-size:9px}.achievement-home-metrics .latest{max-width:270px}.achievement-home-metrics .latest b{font-size:9px;letter-spacing:.1em}.achievement-home-metrics .latest small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.achievement-home-link{display:flex;align-items:center;gap:15px;padding:13px 16px;border:1px solid rgba(251,191,36,.46);border-radius:15px;background:linear-gradient(115deg,rgba(16,185,129,.9),rgba(6,182,212,.88));color:#fff;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 0 22px rgba(6,182,212,.18);transition:.25s}.achievement-home-link b{font-size:24px;line-height:1}.achievement-home-link:hover{transform:translateY(-3px);border-color:#FBBF24;box-shadow:0 0 28px rgba(16,185,129,.32)}
.achievement-home-premium .achievement-table-wrap{position:relative;z-index:1;border-color:rgba(103,232,249,.26);border-radius:24px;background:rgba(3,16,39,.72);box-shadow:0 22px 50px rgba(1,8,24,.34);scrollbar-color:#10B981 rgba(15,23,42,.65)}.achievement-home-premium .achievement-table{border-spacing:0}.achievement-home-premium .achievement-table thead{position:sticky;top:0;z-index:3}.achievement-home-premium .achievement-table th{padding:17px 20px;background:linear-gradient(100deg,#064E3B,#0E7490 58%,#1D4ED8);font-size:10px;letter-spacing:.1em}.achievement-home-premium .achievement-table tbody{counter-reset:achievementRow}.achievement-home-premium .achievement-table tbody tr{counter-increment:achievementRow;transition:background .24s ease,transform .24s ease}.achievement-home-premium .achievement-table tbody tr:nth-child(even) td{background:rgba(15,51,73,.23)}.achievement-home-premium .achievement-table tbody tr:hover td{background:rgba(16,185,129,.105)}.achievement-home-premium .achievement-table td{padding:19px 20px;border-bottom-color:rgba(148,163,184,.11);line-height:1.65}.achievement-home-premium .achievement-table td:first-child{position:relative;padding-left:62px}.achievement-home-premium .achievement-table td:first-child:before{content:var(--achievement-index,"•");position:absolute;left:19px;top:18px;display:grid;width:28px;height:28px;place-items:center;border:1px solid rgba(103,232,249,.28);border-radius:9px;background:linear-gradient(145deg,rgba(16,185,129,.25),rgba(37,99,235,.25));color:#A7F3D0;font:800 9px Poppins,sans-serif}.achievement-home-premium .achievement-table td:first-child b{color:#F8FAFC;font-size:12px}.achievement-home-premium .achievement-table td:nth-child(3) span{display:inline-flex;padding:7px 10px;border:1px solid rgba(52,211,153,.3);border-radius:999px;background:rgba(16,185,129,.12);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.achievement-home-premium .achievement-table td:nth-child(3) span[data-level="national"],.achievement-home-premium .achievement-table td:nth-child(3) span[data-level="international"]{border-color:rgba(251,191,36,.42);background:rgba(251,191,36,.12);color:#FDE68A}.achievement-home-premium .achievement-table td:nth-child(3) span[data-level="state"]{border-color:rgba(103,232,249,.38);background:rgba(6,182,212,.13);color:#A5F3FC}
.light-mode .achievement-home-premium{background:linear-gradient(145deg,#F0FDFA,#EFF6FF)}.light-mode .achievement-home-showcase,.light-mode .achievement-home-premium .achievement-table-wrap{background:rgba(255,255,255,.82);color:#0F172A}.light-mode .achievement-home-copy h3,.light-mode .achievement-home-premium .achievement-table td:first-child b{color:#0F172A}.light-mode .achievement-home-copy>p:not(.eyebrow),.light-mode .achievement-home-metrics small{color:#475569}
@media(max-width:850px){.achievement-home-showcase{grid-template-columns:105px minmax(0,1fr)}.achievement-home-emblem{width:92px}.achievement-home-emblem span{font-size:40px}.achievement-home-link{grid-column:1/-1;justify-content:center}}
@media(max-width:600px){.achievement-home-premium{padding-left:14px!important;padding-right:14px!important}.achievement-home-showcase{grid-template-columns:1fr;gap:16px;padding:22px 18px;text-align:center}.achievement-home-emblem{width:82px}.achievement-home-copy>p:not(.eyebrow){font-size:10px;text-align:center}.achievement-home-metrics{justify-content:center}.achievement-home-metrics>span{flex:1 1 120px;justify-content:center}.achievement-home-metrics .latest{display:none}.achievement-home-premium .achievement-table td:first-child{padding-left:54px!important}.achievement-home-premium .achievement-table td:first-child:before{left:14px;top:13px}.achievement-home-premium .achievement-table th{padding:13px 14px!important}}
@media(prefers-reduced-motion:reduce){.achievement-home-emblem i{animation:none}}

/* Aktiviti Akan Datang — kad countdown premium. */
.countdown-list{display:grid;gap:18px;width:100%;margin-top:24px}.countdown-list .program-countdown.countdown-card{margin:0}.countdown-list .program-countdown.countdown-card:nth-child(2n){background:radial-gradient(circle at 4% 50%,rgba(6,182,212,.25),transparent 27%),radial-gradient(circle at 92% 25%,rgba(16,185,129,.22),transparent 28%),linear-gradient(125deg,rgba(5,25,55,.97),rgba(8,47,73,.9))}
.upcoming-activity-host{position:relative}.upcoming-activity-title{position:relative;margin-top:42px;padding-left:18px;font-size:clamp(27px,3.5vw,42px);line-height:1.15}.upcoming-activity-title:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:99px;background:linear-gradient(#FBBF24,#10B981,#06B6D4);box-shadow:0 0 18px rgba(6,182,212,.5)}.upcoming-activity-title:after{display:none}.upcoming-activity-title>span{display:block;margin-bottom:7px;color:#67E8F9;font:800 9px/1 Poppins,sans-serif;letter-spacing:.18em}.upcoming-activity-title>small{display:block;max-width:620px;margin-top:9px;color:#AFC4D8;font:500 12px/1.65 Inter,sans-serif;letter-spacing:0;text-shadow:none}
.program-countdown.countdown-card{isolation:isolate;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(230px,1.35fr) minmax(180px,.75fr) auto;align-items:center;gap:26px;min-height:164px;padding:30px 32px;border:1px solid rgba(103,232,249,.32);border-radius:27px;background:radial-gradient(circle at 4% 50%,rgba(16,185,129,.27),transparent 27%),radial-gradient(circle at 92% 25%,rgba(59,130,246,.25),transparent 28%),linear-gradient(125deg,rgba(5,25,55,.97),rgba(5,65,70,.88));box-shadow:0 28px 65px rgba(1,8,24,.42),0 0 34px rgba(6,182,212,.11),inset 0 1px rgba(255,255,255,.08);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.program-countdown.countdown-card:hover{transform:translateY(-4px);border-color:rgba(110,231,183,.62);box-shadow:0 32px 70px rgba(1,8,24,.46),0 0 38px rgba(16,185,129,.18)}
.program-countdown.countdown-card:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.05) 48%,transparent 70%);transform:translateX(-110%);animation:countdownShimmer 6s ease-in-out infinite}@keyframes countdownShimmer{0%,45%{transform:translateX(-110%)}75%,100%{transform:translateX(110%)}}
.countdown-card-orbit{position:absolute;z-index:-1;left:-60px;top:50%;width:220px;height:220px;transform:translateY(-50%);border:1px solid rgba(103,232,249,.1);border-radius:50%;box-shadow:0 0 0 32px rgba(6,182,212,.025),0 0 0 64px rgba(16,185,129,.02)}.countdown-card-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:#67E8F9;box-shadow:0 0 15px #06B6D4;animation:countdownPulse 2.6s ease-in-out infinite}.countdown-card-orbit i:nth-child(1){right:17px;top:40px}.countdown-card-orbit i:nth-child(2){right:3px;bottom:57px;background:#FBBF24;box-shadow:0 0 14px #FBBF24;animation-delay:-.8s}.countdown-card-orbit i:nth-child(3){left:90px;bottom:-4px;background:#34D399;animation-delay:-1.5s}@keyframes countdownPulse{50%{opacity:.35;transform:scale(1.75)}}
.countdown-card-heading{position:relative;z-index:1;gap:18px}.countdown-icon{width:68px;height:68px;border-color:rgba(255,255,255,.3);border-radius:21px;background:linear-gradient(145deg,#F59E0B,#10B981 58%,#0891B2);font-size:31px;box-shadow:0 12px 30px rgba(2,6,23,.32),0 0 25px rgba(16,185,129,.22);animation:countdownIconFloat 3.2s ease-in-out infinite}@keyframes countdownIconFloat{50%{transform:translateY(-5px) rotate(-3deg)}}.countdown-card-heading small{margin-bottom:7px;color:#A7F3D0;font-size:9px}.countdown-card-heading strong{max-width:430px;font-size:clamp(17px,2vw,23px);line-height:1.3}
.countdown-event-date{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 16px;border-left:1px solid rgba(103,232,249,.21)}.countdown-event-date>span{display:grid;width:39px;height:39px;place-items:center;border:1px solid rgba(251,191,36,.28);border-radius:12px;background:rgba(251,191,36,.1);font-size:18px}.countdown-event-date small{display:block;margin-bottom:5px;color:#67E8F9;font-size:8px;font-weight:800;letter-spacing:.13em}.countdown-event-date b{display:block;color:#F8FAFC;font:700 12px/1.4 Poppins,sans-serif;text-transform:capitalize}
.program-countdown.countdown-card .countdown-units{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(62px,1fr));gap:9px}.program-countdown.countdown-card .countdown-units>span{position:relative;min-width:0;padding:15px 10px 12px;border:1px solid rgba(103,232,249,.23);border-radius:16px;background:linear-gradient(155deg,rgba(15,23,42,.78),rgba(8,47,73,.62));box-shadow:inset 0 1px rgba(255,255,255,.06),0 9px 22px rgba(2,6,23,.18)}.program-countdown.countdown-card .countdown-units>span:not(:last-child):after{content:":";position:absolute;right:-8px;top:18px;color:#67E8F9;font-size:17px;font-weight:800}.program-countdown.countdown-card .countdown-units b{color:#FBBF24;font-size:clamp(22px,2.6vw,31px);text-shadow:0 0 17px rgba(251,191,36,.28)}.program-countdown.countdown-card .countdown-units small{margin-top:7px;color:#CDE2ED;font-size:8px}.program-countdown.countdown-card .countdown-message{grid-column:1/-1;padding:18px;border:1px solid rgba(251,191,36,.3);border-radius:15px;background:rgba(251,191,36,.08);text-align:center}
.light-mode .program-countdown.countdown-card{background:radial-gradient(circle at 5% 50%,rgba(16,185,129,.13),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.96),rgba(224,242,254,.94));color:#0F172A}.light-mode .countdown-card-heading strong,.light-mode .countdown-event-date b{color:#0F172A}.light-mode .countdown-event-date{border-color:rgba(15,23,42,.13)}.light-mode .program-countdown.countdown-card .countdown-units>span{background:rgba(255,255,255,.86)}.light-mode .program-countdown.countdown-card .countdown-units small{color:#475569}
@media(max-width:1000px){.program-countdown.countdown-card{grid-template-columns:1fr 1fr}.program-countdown.countdown-card .countdown-units{grid-column:1/-1}.countdown-event-date{justify-self:end}}
@media(max-width:650px){.upcoming-activity-title{padding-left:14px;font-size:25px}.upcoming-activity-title>small{font-size:10px}.program-countdown.countdown-card{display:flex;align-items:stretch;gap:17px;min-height:0;padding:23px 17px;border-radius:22px}.countdown-card-heading{align-items:center}.countdown-icon{width:54px;height:54px;border-radius:17px;font-size:25px}.countdown-card-heading strong{font-size:15px}.countdown-event-date{justify-content:center;padding:12px;border:1px solid rgba(103,232,249,.17);border-radius:14px;background:rgba(15,23,42,.24)}.program-countdown.countdown-card .countdown-units{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.program-countdown.countdown-card .countdown-units>span{padding:12px 3px 10px;border-radius:12px}.program-countdown.countdown-card .countdown-units>span:not(:last-child):after{display:none}.program-countdown.countdown-card .countdown-units b{font-size:21px}.countdown-card-orbit{opacity:.65}}
@media(prefers-reduced-motion:reduce){.program-countdown.countdown-card:before,.countdown-card-orbit i,.countdown-icon{animation:none}}

/* Aktiviti / Program Mingguan pada dashboard laporan. */
.weekly-activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.weekly-activity-card{overflow:hidden;border:1px solid rgba(103,232,249,.2);border-radius:23px;background:radial-gradient(circle at 100% 0,rgba(16,185,129,.14),transparent 30%),linear-gradient(145deg,rgba(8,47,73,.86),rgba(3,15,39,.93));box-shadow:0 18px 40px rgba(2,6,23,.3);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}.weekly-activity-card:hover{transform:translateY(-5px);border-color:rgba(52,211,153,.66);box-shadow:0 24px 50px rgba(2,6,23,.4),0 0 26px rgba(16,185,129,.12)}.weekly-activity-card>.weekly-image{width:100%;height:205px;border:0;border-radius:0;background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(6,182,212,.22));box-shadow:none}.weekly-activity-card>.weekly-image img{width:100%;height:100%;object-fit:cover}.weekly-activity-copy{padding:20px}.weekly-activity-copy>span{display:flex;align-items:center;gap:9px;color:#A7F3D0;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.weekly-activity-copy>span b{display:grid;width:29px;height:29px;place-items:center;border:1px solid rgba(103,232,249,.28);border-radius:9px;background:rgba(6,182,212,.1);color:#67E8F9;font-size:10px}.weekly-activity-copy h3{margin:13px 0 8px;color:#F8FAFC;font:700 18px/1.4 Poppins,sans-serif}.weekly-activity-copy small{display:block;margin-bottom:11px;color:#FBBF24;font-size:10px;font-weight:700}.weekly-activity-copy p{margin:0;color:#CBD5E1;font-size:12px;line-height:1.75;text-align:justify;white-space:pre-line}.light-mode .weekly-activity-card{background:linear-gradient(145deg,#fff,#ecfeff)}.light-mode .weekly-activity-copy h3{color:#0F172A}.light-mode .weekly-activity-copy p{color:#475569}@media(max-width:900px){.weekly-activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.weekly-activity-grid{grid-template-columns:1fr}.weekly-activity-card>.weekly-image{height:auto;aspect-ratio:16/9}.weekly-activity-copy{padding:17px}.weekly-activity-copy h3{font-size:15px}.weekly-activity-copy p{font-size:11px}}

/* Laporan Mingguan: gambar menggunakan nisbah asal dan tiada bingkai jika gambar kosong. */
.weekly-dashboard .weekly-image,
.weekly-dashboard .weekly-image.portrait,
.weekly-dashboard .weekly-image.analysis-full,
.weekly-dashboard .weekly-image.compact-media,
.weekly-dashboard .weekly-image.class-media,
.weekly-dashboard .weekly-image.monthly-full,
.weekly-dashboard #sahsiah .weekly-achievement-card .weekly-image.portrait,
.weekly-dashboard .weekly-activity-card > .weekly-image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.weekly-dashboard .weekly-image img,
.weekly-dashboard #sahsiah .weekly-achievement-card .weekly-image.portrait img,
.weekly-dashboard .weekly-activity-card > .weekly-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
.weekly-dashboard .weekly-duty-card.without-image {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Info Sekolah — identiti visual premium dan responsif. */
.school-info-hero{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(68px,8vw,108px);padding-bottom:clamp(68px,8vw,108px);background:radial-gradient(circle at 83% 25%,rgba(52,211,153,.3),transparent 24%),radial-gradient(circle at 13% 88%,rgba(59,130,246,.23),transparent 27%),linear-gradient(120deg,#020617,#0B3A53 54%,#065F46)!important}.school-info-hero:before{content:""!important;display:block!important;position:absolute;z-index:-1;right:-95px;top:-105px;width:390px;height:390px;border:1px solid rgba(103,232,249,.14);border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.08),transparent 62%);box-shadow:0 0 0 42px rgba(16,185,129,.025),0 0 0 84px rgba(59,130,246,.02)}.school-info-hero>p,.school-info-hero>h1,.school-info-hero-badges{position:relative;z-index:1}.school-info-hero h1{margin-top:9px;font-size:clamp(40px,6vw,72px);letter-spacing:-.045em;text-shadow:0 10px 35px rgba(2,6,23,.42),0 0 25px rgba(6,182,212,.16)}.school-info-hero>p:not(.eyebrow){max-width:720px;color:#D3E4EE;font-size:clamp(13px,1.4vw,16px);line-height:1.75}.school-info-hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.school-info-hero-badges span{padding:9px 13px;border:1px solid rgba(167,243,208,.25);border-radius:999px;background:rgba(15,23,42,.38);color:#D7F9EE;font-size:10px;font-weight:700;backdrop-filter:blur(10px);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.school-info-section{position:relative;padding-top:clamp(45px,6vw,78px)!important;padding-bottom:clamp(55px,7vw,90px)!important}.school-info-section>.section-head{width:min(1120px,100%);margin:0 auto 24px;align-items:flex-end}.school-info-section>.section-head h2{font-size:clamp(30px,4vw,47px);letter-spacing:-.035em}.school-info-section>.section-head>p{max-width:520px}.school-info-overview{width:min(1120px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 auto 20px}.school-info-overview>span{display:flex;align-items:center;gap:12px;padding:14px 17px;border:1px solid rgba(103,232,249,.19);border-radius:16px;background:linear-gradient(145deg,rgba(8,47,73,.65),rgba(3,15,39,.58));box-shadow:0 12px 28px rgba(2,6,23,.2)}.school-info-overview b{color:#FBBF24;font:800 17px Poppins,sans-serif;letter-spacing:.03em}.school-info-overview small{color:#C9DFEA;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.school-identity-banner{isolation:isolate;position:relative;overflow:hidden;min-height:172px;padding:30px 190px 30px 34px!important;border-radius:25px!important;background:radial-gradient(circle at 12% 50%,rgba(16,185,129,.24),transparent 27%),linear-gradient(120deg,rgba(8,47,83,.95),rgba(3,69,68,.83))!important;box-shadow:0 23px 55px rgba(1,8,24,.4),0 0 30px rgba(16,185,129,.1)!important}.school-identity-banner:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.045) 50%,transparent 66%);transform:translateX(-100%);animation:schoolIdentityScan 7s ease-in-out infinite}@keyframes schoolIdentityScan{0%,48%{transform:translateX(-100%)}78%,100%{transform:translateX(100%)}}.school-identity-banner img{width:118px;height:118px;padding:8px;border-radius:23px!important;box-shadow:0 14px 32px rgba(2,6,23,.32),0 0 28px rgba(103,232,249,.22)!important}.school-identity-banner small{color:#A7F3D0}.school-identity-banner h2{font-size:clamp(24px,3.3vw,39px);letter-spacing:-.025em}.school-identity-seal{position:absolute;right:32px;top:50%;display:grid;width:118px;height:118px;place-content:center;transform:translateY(-50%) rotate(4deg);border:1px solid rgba(251,191,36,.32);border-radius:50%;background:radial-gradient(circle,rgba(251,191,36,.16),rgba(6,182,212,.06) 60%,transparent 62%);text-align:center;box-shadow:0 0 0 12px rgba(251,191,36,.025)}.school-identity-seal span{color:#FBBF24;font:900 29px/1 Poppins,sans-serif}.school-identity-seal small{margin:7px 0 0;color:#A7F3D0;font-size:7px;letter-spacing:.2em}
.school-info-slideshow{margin-top:25px!important;margin-bottom:28px!important}.school-info-slide-stage{border-radius:27px!important;border-color:rgba(103,232,249,.34)!important;box-shadow:0 26px 62px rgba(1,8,24,.44),0 0 30px rgba(6,182,212,.11)!important}
.school-info-accordion-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.school-info-accordion{position:relative;border-radius:23px;background:radial-gradient(circle at 95% 8%,rgba(6,182,212,.11),transparent 28%),linear-gradient(145deg,rgba(8,38,72,.9),rgba(3,15,39,.9));box-shadow:0 18px 42px rgba(0,8,28,.34),inset 0 1px rgba(255,255,255,.045)}.school-info-accordion:nth-child(3n+2){background:radial-gradient(circle at 95% 8%,rgba(16,185,129,.13),transparent 28%),linear-gradient(145deg,rgba(6,52,67,.9),rgba(3,15,39,.91))}.school-info-accordion:nth-child(3n){background:radial-gradient(circle at 95% 8%,rgba(59,130,246,.14),transparent 28%),linear-gradient(145deg,rgba(8,38,72,.9),rgba(3,15,39,.91))}.school-info-accordion summary{min-height:126px;padding:24px}.school-info-accordion summary:after{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:99px;background:linear-gradient(#10B981,#06B6D4);opacity:.55}.school-info-number{display:grid;width:33px;height:33px;place-items:center;border:1px solid rgba(103,232,249,.21);border-radius:10px;background:rgba(2,8,23,.36)}.school-info-summary-icon{width:61px;height:61px;border-radius:19px;box-shadow:0 11px 25px rgba(2,6,23,.26),0 0 22px rgba(6,182,212,.2)}.school-info-accordion summary b{font-size:clamp(16px,1.7vw,21px)}.school-info-accordion summary i{border-radius:50%;background:rgba(6,182,212,.08)}.school-info-accordion[open]{grid-column:1/-1}.school-info-accordion[open] summary{min-height:102px;background:linear-gradient(90deg,rgba(16,185,129,.1),transparent)}.school-info-detail{background:rgba(2,8,23,.17)}.school-info-detail-block>div>p:not(.eyebrow){font-size:13px;line-height:1.85}.school-info-detail-image{padding:6px;border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 15px 35px rgba(2,6,23,.28)}
.school-song-player{border-radius:18px!important;background:linear-gradient(145deg,rgba(16,185,129,.13),rgba(6,182,212,.08))!important}.school-location-card{position:relative;border-radius:27px;background:radial-gradient(circle at 93% 5%,rgba(16,185,129,.16),transparent 30%),linear-gradient(145deg,rgba(8,38,72,.91),rgba(3,15,39,.92));box-shadow:0 25px 58px rgba(0,8,28,.4)}.school-location-heading{padding:29px 31px 25px}.school-location-heading>span{width:62px;height:62px;border-radius:19px;box-shadow:0 10px 26px rgba(2,6,23,.26),0 0 22px rgba(6,182,212,.2)}.school-location-heading h2{font-size:clamp(22px,2.7vw,31px)}.school-info-map{margin:0 31px 31px;border-radius:21px;box-shadow:0 18px 42px rgba(1,8,24,.37)}.school-info-map iframe{height:430px}.school-info-map a{min-height:58px;background:linear-gradient(110deg,#059669,#0891B2,#2563EB);letter-spacing:.015em}
.light-mode .school-info-overview>span{background:rgba(255,255,255,.86)}.light-mode .school-info-overview small{color:#475569}.light-mode .school-identity-seal{background:rgba(255,255,255,.55)}.light-mode .school-info-accordion{background:rgba(255,255,255,.9)}.light-mode .school-info-detail{background:rgba(241,245,249,.72)}
@media(max-width:800px){.school-info-accordion-list{grid-template-columns:1fr}.school-info-accordion[open]{grid-column:auto}.school-identity-banner{padding-right:150px!important}.school-identity-seal{right:20px;width:100px;height:100px}}
@media(max-width:600px){.school-info-hero{text-align:center;padding-left:18px!important;padding-right:18px!important}.school-info-hero>p:not(.eyebrow){margin-left:auto;margin-right:auto}.school-info-hero-badges{justify-content:center}.school-info-hero-badges span{font-size:8px;padding:8px 10px}.school-info-section>.section-head{display:block;text-align:center}.school-info-section>.section-head>p{text-align:center;margin:10px auto 0}.school-info-overview{grid-template-columns:1fr}.school-info-overview>span{justify-content:center}.school-identity-banner{min-height:0;padding:24px 18px!important}.school-identity-seal{display:none}.school-info-accordion summary{min-height:102px;padding:18px 15px}.school-info-accordion summary:after{top:17px;bottom:17px}.school-info-summary-icon{width:49px;height:49px}.school-info-map{margin:0 17px 20px}.school-info-map iframe{height:300px}.school-location-heading{padding:23px 18px 20px}.school-location-heading>span{width:51px;height:51px}.school-info-detail-block>div>p:not(.eyebrow){font-size:11px}.school-info-hero h1{font-size:38px}}
@media(prefers-reduced-motion:reduce){.school-identity-banner:before{animation:none}}
/* Pencapaian Sekolah — premium gallery refresh */
body:has(.achievement-gallery-section) .achievement-gallery-section {
  position: relative;
  isolation: isolate;
}
.achievement-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0,1fr) auto;
  align-items: center;
  gap: 26px;
  margin: 30px 0 24px;
  padding: 25px 28px;
  overflow: hidden;
  border: 1px solid rgba(45,212,191,.25);
  border-radius: 26px;
  background:
    radial-gradient(circle at 7% 15%,rgba(16,185,129,.23),transparent 30%),
    linear-gradient(120deg,rgba(8,47,73,.91),rgba(15,23,42,.88) 58%,rgba(6,78,59,.82));
  box-shadow: 0 24px 58px rgba(2,6,23,.28),inset 0 1px rgba(255,255,255,.08);
}
.achievement-showcase::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.07) 43%,transparent 65%);
  transform:translateX(-100%);
  animation:achievementShowcaseShine 8s ease-in-out infinite;
}
@keyframes achievementShowcaseShine { 45%,100%{transform:translateX(110%)} }
.achievement-showcase-emblem {
  width:108px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(251,191,36,.45);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(251,191,36,.20),rgba(6,182,212,.11));
  box-shadow:0 0 34px rgba(251,191,36,.15),inset 0 0 24px rgba(255,255,255,.06);
}
.achievement-showcase-emblem span { font-size:52px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); }
.achievement-showcase-copy small { color:#5eead4;font-size:10px;font-weight:900;letter-spacing:.17em; }
.achievement-showcase-copy h3 { margin:8px 0 7px;color:#fff;font-size:clamp(20px,2vw,30px);line-height:1.2; }
.achievement-showcase-copy p { max-width:710px;margin:0;color:#cbd5e1;line-height:1.75;text-align:justify; }
.achievement-showcase-stats { display:grid;grid-template-columns:repeat(3,minmax(76px,1fr));gap:9px; }
.achievement-showcase-stats span { min-width:80px;padding:14px 10px;text-align:center;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:rgba(15,23,42,.42);backdrop-filter:blur(8px); }
.achievement-showcase-stats b { display:block;color:#fbbf24;font-size:24px;line-height:1;text-shadow:0 0 18px rgba(251,191,36,.35); }
.achievement-showcase-stats small { display:block;margin-top:7px;color:#dbeafe;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.achievement-filter-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:28px;
  padding:13px 15px 13px 20px;
  border:1px solid rgba(6,182,212,.2);
  border-radius:20px;
  background:rgba(15,23,42,.42);
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.achievement-filter-bar>div:first-child { flex:0 0 auto; }
.achievement-filter-bar>div:first-child small { display:block;color:#22d3ee;font-size:9px;font-weight:900;letter-spacing:.14em; }
.achievement-filter-bar>div:first-child strong { display:block;margin-top:3px;color:#e2e8f0;font-size:13px; }
.achievement-filter-bar .achievement-level-filter { margin:0;justify-content:flex-end; }
.achievement-gallery-card { overflow:hidden;transform:translateZ(0); }
.achievement-gallery-card::after {
  content:"";
  position:absolute;
  inset:auto 10% -55px;
  height:90px;
  border-radius:50%;
  background:rgba(16,185,129,.16);
  filter:blur(28px);
  pointer-events:none;
}
.achievement-gallery-card[data-achievement-level="daerah"] { --achievement-accent:#22d3ee; }
.achievement-gallery-card[data-achievement-level="negeri"] { --achievement-accent:#10b981; }
.achievement-gallery-card[data-achievement-level="kebangsaan"] { --achievement-accent:#3b82f6; }
.achievement-gallery-card[data-achievement-level="antarabangsa"] { --achievement-accent:#fbbf24; }
.achievement-gallery-card .achievement-gallery-meta b {
  color:var(--achievement-accent,#5eead4);
  border-color:color-mix(in srgb,var(--achievement-accent,#5eead4) 38%,transparent);
  background:color-mix(in srgb,var(--achievement-accent,#5eead4) 10%,transparent);
}
.achievement-gallery-top small { box-shadow:0 8px 18px rgba(2,6,23,.25); }
.achievement-gallery-copy h3 { text-wrap:balance; }
.achievement-gallery-result p { white-space:pre-line; }
body.light .achievement-showcase { background:linear-gradient(120deg,#083344,#0f766e 58%,#065f46); }
body.light .achievement-filter-bar { background:rgba(255,255,255,.78); }
body.light .achievement-filter-bar>div:first-child strong { color:#0f172a; }
@media (max-width:980px) {
  .achievement-showcase { grid-template-columns:92px minmax(0,1fr); }
  .achievement-showcase-emblem { width:86px;border-radius:23px; }
  .achievement-showcase-emblem span { font-size:43px; }
  .achievement-showcase-stats { grid-column:1/-1; }
  .achievement-filter-bar { align-items:flex-start;flex-direction:column; }
  .achievement-filter-bar .achievement-level-filter { justify-content:flex-start;width:100%; }
}
@media (max-width:600px) {
  .achievement-showcase { grid-template-columns:66px minmax(0,1fr);gap:15px;margin:22px 0 18px;padding:18px;border-radius:21px; }
  .achievement-showcase-emblem { width:64px;border-radius:18px; }
  .achievement-showcase-emblem span { font-size:32px; }
  .achievement-showcase-copy h3 { margin-top:5px;font-size:17px; }
  .achievement-showcase-copy p { grid-column:1/-1;font-size:12px;line-height:1.65; }
  .achievement-showcase-stats { gap:6px; }
  .achievement-showcase-stats span { min-width:0;padding:11px 5px;border-radius:13px; }
  .achievement-showcase-stats b { font-size:19px; }
  .achievement-showcase-stats small { font-size:7px;letter-spacing:.04em; }
  .achievement-filter-bar { padding:14px;border-radius:17px; }
  .achievement-filter-bar .achievement-level-filter { flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 7px;scrollbar-width:none; }
  .achievement-filter-bar .achievement-level-filter::-webkit-scrollbar { display:none; }
  .achievement-filter-bar .achievement-level-filter button { flex:0 0 auto; }
}
@media (prefers-reduced-motion:reduce) { .achievement-showcase::after { animation:none; } }

/* Aktiviti Tahunan — premium calendar timeline */
.annual-activity-section { position:relative;isolation:isolate; }
.annual-activity-heading { max-width:1120px;margin-left:auto;margin-right:auto; }
.annual-activity-showcase {
  position:relative;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) auto;
  align-items:center;
  gap:25px;
  max-width:1120px;
  margin:0 auto 27px;
  padding:25px 27px;
  overflow:hidden;
  border:1px solid rgba(103,232,249,.28);
  border-radius:27px;
  background:radial-gradient(circle at 8% 10%,rgba(16,185,129,.25),transparent 31%),linear-gradient(120deg,rgba(8,47,73,.94),rgba(15,23,42,.9) 58%,rgba(30,58,138,.78));
  box-shadow:0 25px 62px rgba(2,6,23,.32),inset 0 1px rgba(255,255,255,.08);
}
.annual-activity-showcase::before { content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border:1px solid rgba(103,232,249,.13);border-radius:50%;box-shadow:0 0 0 34px rgba(16,185,129,.035),0 0 0 68px rgba(59,130,246,.025);pointer-events:none; }
.annual-showcase-icon { width:102px;aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(251,191,36,.44);border-radius:28px;background:linear-gradient(145deg,rgba(251,191,36,.2),rgba(6,182,212,.12));box-shadow:0 0 32px rgba(6,182,212,.16),inset 0 1px rgba(255,255,255,.12); }
.annual-showcase-icon span { font-size:48px;filter:drop-shadow(0 9px 15px rgba(0,0,0,.3)); }
.annual-showcase-copy { position:relative;z-index:1; }
.annual-showcase-copy small { color:#5eead4;font-size:9px;font-weight:900;letter-spacing:.17em; }
.annual-showcase-copy h3 { margin:8px 0 7px;color:#f8fafc;font:700 clamp(19px,2vw,28px)/1.23 Poppins,sans-serif;text-wrap:balance; }
.annual-showcase-copy p { max-width:700px;margin:0;color:#cbd5e1;font-size:12px;line-height:1.7;text-align:justify; }
.annual-showcase-stats { position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(78px,1fr));gap:8px; }
.annual-showcase-stats span { min-width:80px;padding:14px 9px;text-align:center;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:rgba(2,8,23,.32);backdrop-filter:blur(8px); }
.annual-showcase-stats b { display:block;color:#fbbf24;font-size:24px;line-height:1;text-shadow:0 0 17px rgba(251,191,36,.34); }
.annual-showcase-stats small { display:block;margin-top:7px;color:#dbeafe;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.annual-list-heading { max-width:1120px;margin:0 auto 14px;display:flex;align-items:end;justify-content:space-between;gap:18px;padding:0 4px; }
.annual-list-heading small { color:#22d3ee;font-size:9px;font-weight:900;letter-spacing:.16em; }
.annual-list-heading h3 { margin:4px 0 0;color:#f8fafc;font:700 clamp(18px,2vw,23px)/1.25 Poppins,sans-serif; }
.annual-list-heading>span { padding:7px 11px;border:1px solid rgba(52,211,153,.25);border-radius:999px;background:rgba(16,185,129,.1);color:#a7f3d0;font-size:9px;font-weight:800;white-space:nowrap; }
.annual-activity-list { position:relative; }
.annual-activity-list::before { content:"";position:absolute;left:47px;top:24px;bottom:24px;width:1px;background:linear-gradient(transparent,#06b6d4 10%,#10b981 90%,transparent);opacity:.5;pointer-events:none; }
.annual-activity-list article { position:relative;grid-template-columns:minmax(255px,.8fr) minmax(0,1.5fr) auto;padding:19px 22px 19px 16px;overflow:hidden;border-color:rgba(103,232,249,.2);background:radial-gradient(circle at 0 50%,rgba(16,185,129,.13),transparent 26%),linear-gradient(145deg,rgba(8,47,73,.86),rgba(3,15,39,.93)); }
.annual-activity-list article::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.035) 48%,transparent 70%);transform:translateX(-100%);transition:transform .65s ease; }
.annual-activity-list article:hover { transform:translateY(-4px);border-color:rgba(52,211,153,.68);box-shadow:0 20px 45px rgba(2,6,23,.38),0 0 24px rgba(16,185,129,.11); }
.annual-activity-list article:hover::after { transform:translateX(100%); }
.annual-activity-date { position:relative;z-index:1;gap:11px; }
.annual-date-tile { width:62px;height:67px;display:grid;place-content:center;text-align:center;flex:none;border:1px solid rgba(103,232,249,.34);border-radius:17px;background:linear-gradient(150deg,rgba(6,182,212,.2),rgba(16,185,129,.13));box-shadow:0 8px 22px rgba(2,6,23,.25); }
.annual-date-tile strong { color:#fff;font:800 24px/1 Poppins,sans-serif; }
.annual-date-tile small { margin-top:5px;color:#67e8f9;font-size:9px;font-weight:900;letter-spacing:.1em; }
.annual-activity-date>span { width:43px;height:43px;border-radius:13px;font-size:20px; }
.annual-activity-date time { max-width:106px;color:#d1fae5;font-size:11px; }
.annual-activity-copy { position:relative;z-index:1;padding-left:4px; }
.annual-activity-copy h3 { font-size:17px;text-wrap:balance; }
.annual-activity-copy p { white-space:pre-line; }
.annual-activity-list article>b { position:relative;z-index:1;border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.09);color:#fde68a; }
.annual-activity-empty { padding:46px 24px!important;text-align:center; }
.annual-activity-empty>span { display:block;font-size:42px;margin-bottom:10px; }
.annual-activity-empty h3 { margin:0;color:#f8fafc;font:700 19px Poppins,sans-serif; }
.annual-activity-empty p { margin:8px 0 0;color:#94a3b8; }
.light-mode .annual-activity-showcase { background:linear-gradient(120deg,#064e3b,#0f766e 58%,#1e3a8a); }
.light-mode .annual-list-heading h3 { color:#0f172a; }
@media(max-width:920px){
  .annual-activity-showcase { grid-template-columns:88px minmax(0,1fr); }
  .annual-showcase-icon { width:82px;border-radius:23px; }
  .annual-showcase-icon span { font-size:39px; }
  .annual-showcase-stats { grid-column:1/-1; }
  .annual-activity-list article { grid-template-columns:minmax(230px,.8fr) minmax(0,1.35fr); }
  .annual-activity-list article>b { grid-column:2;width:max-content; }
}
@media(max-width:650px){
  .annual-activity-showcase { grid-template-columns:64px minmax(0,1fr);gap:14px;padding:18px;border-radius:21px; }
  .annual-showcase-icon { width:62px;border-radius:17px; }
  .annual-showcase-icon span { font-size:30px; }
  .annual-showcase-copy h3 { font-size:16px; }
  .annual-showcase-copy p { font-size:10px; }
  .annual-showcase-stats { gap:6px; }
  .annual-showcase-stats span { min-width:0;padding:11px 4px;border-radius:13px; }
  .annual-showcase-stats b { font-size:19px; }
  .annual-showcase-stats small { font-size:7px; }
  .annual-list-heading { align-items:flex-start;flex-direction:column;gap:9px; }
  .annual-activity-list::before { left:45px; }
  .annual-activity-list article { grid-template-columns:1fr;gap:14px;padding:16px;border-radius:19px; }
  .annual-activity-list article>b { grid-column:auto; }
  .annual-date-tile { width:58px;height:62px; }
  .annual-date-tile strong { font-size:21px; }
  .annual-activity-date time { max-width:none; }
}
@media(prefers-reduced-motion:reduce){.annual-activity-list article::after{display:none}}

/* Dokumen & Borang — premium download centre */
.document-download-section { position:relative;isolation:isolate; }
.document-page-heading { max-width:1120px;margin-left:auto;margin-right:auto; }
.document-hub-showcase {
  position:relative;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) auto;
  align-items:center;
  gap:25px;
  max-width:1120px;
  margin:0 auto 28px;
  padding:25px 27px;
  overflow:hidden;
  border:1px solid rgba(103,232,249,.28);
  border-radius:27px;
  background:radial-gradient(circle at 8% 10%,rgba(16,185,129,.26),transparent 31%),linear-gradient(120deg,rgba(8,47,73,.94),rgba(15,23,42,.91) 58%,rgba(30,58,138,.8));
  box-shadow:0 25px 62px rgba(2,6,23,.33),inset 0 1px rgba(255,255,255,.08);
}
.document-hub-showcase::after { content:"";position:absolute;right:-50px;bottom:-115px;width:260px;height:260px;border:1px solid rgba(103,232,249,.13);border-radius:50%;box-shadow:0 0 0 34px rgba(16,185,129,.035),0 0 0 68px rgba(59,130,246,.025);pointer-events:none; }
.document-hub-emblem { width:102px;aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(251,191,36,.43);border-radius:28px;background:linear-gradient(145deg,rgba(251,191,36,.19),rgba(6,182,212,.12));box-shadow:0 0 32px rgba(6,182,212,.16),inset 0 1px rgba(255,255,255,.12); }
.document-hub-emblem span { font-size:48px;filter:drop-shadow(0 9px 15px rgba(0,0,0,.3)); }
.document-hub-copy { position:relative;z-index:1; }
.document-hub-copy small { color:#5eead4;font-size:9px;font-weight:900;letter-spacing:.17em; }
.document-hub-copy h3 { margin:8px 0 7px;color:#f8fafc;font:700 clamp(20px,2vw,28px)/1.23 Poppins,sans-serif;text-wrap:balance; }
.document-hub-copy p { max-width:690px;margin:0;color:#cbd5e1;font-size:12px;line-height:1.7;text-align:justify; }
.document-hub-stats { position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(78px,1fr));gap:8px; }
.document-hub-stats span { min-width:80px;padding:14px 9px;text-align:center;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:rgba(2,8,23,.32);backdrop-filter:blur(8px); }
.document-hub-stats b { display:block;color:#fbbf24;font-size:24px;line-height:1;text-shadow:0 0 17px rgba(251,191,36,.34); }
.document-hub-stats small { display:block;margin-top:7px;color:#dbeafe;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.document-library-heading { max-width:1120px;margin:0 auto 15px;display:flex;align-items:end;justify-content:space-between;gap:18px;padding:0 4px; }
.document-library-heading small { color:#22d3ee;font-size:9px;font-weight:900;letter-spacing:.16em; }
.document-library-heading h3 { margin:4px 0 0;color:#f8fafc;font:700 clamp(18px,2vw,23px)/1.25 Poppins,sans-serif; }
.document-library-heading>span { padding:7px 11px;border:1px solid rgba(52,211,153,.25);border-radius:999px;background:rgba(16,185,129,.1);color:#a7f3d0;font-size:9px;font-weight:800;white-space:nowrap; }
.document-download-section .document-grid { max-width:1120px;margin:0 auto; }
.document-download-section .document-card { min-height:320px;padding:20px;border-color:rgba(103,232,249,.2);background:radial-gradient(circle at 92% 4%,rgba(16,185,129,.16),transparent 29%),linear-gradient(145deg,rgba(8,47,73,.87),rgba(3,15,39,.94)); }
.document-download-section .document-card::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.045) 48%,transparent 70%);transform:translateX(-100%);transition:transform .7s ease; }
.document-download-section .document-card:hover::before { transform:translateX(100%); }
.document-card-top { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px; }
.document-card-top .document-icon { margin:0; }
.document-card-top>div { display:flex;align-items:center;gap:8px; }
.document-card-top>div small { color:#67e8f9;font-size:8px;font-weight:900;letter-spacing:.13em; }
.document-card-top>div b { min-width:42px;padding:6px 8px;text-align:center;border:1px solid rgba(251,191,36,.32);border-radius:9px;background:rgba(251,191,36,.09);color:#fde68a;font-size:9px;letter-spacing:.08em; }
.document-download-section .document-copy { position:relative;z-index:1; }
.document-download-section .document-copy h3 { font-size:18px;text-wrap:balance; }
.document-download-section .document-copy p { white-space:pre-line; }
.document-download-section .document-card>a { position:relative;z-index:1;overflow:hidden; }
.document-download-section .document-card>a::before { content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.22) 48%,transparent 72%);transform:translateX(-110%);transition:transform .55s ease; }
.document-download-section .document-card>a:hover::before { transform:translateX(110%); }
.document-download-section .document-card>a span,.document-download-section .document-card>a b { position:relative;z-index:1; }
.document-download-section .document-card>a b { width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:rgba(2,8,23,.18);font-size:16px; }
.document-library-empty { grid-column:1/-1;padding:48px 24px!important;text-align:center; }
.document-library-empty>span { display:block;margin-bottom:10px;font-size:43px; }
.document-library-empty h3 { margin:0;color:#f8fafc;font:700 19px Poppins,sans-serif; }
.document-library-empty p { margin:8px 0 0;color:#94a3b8; }
.light-mode .document-hub-showcase { background:linear-gradient(120deg,#064e3b,#0f766e 58%,#1e3a8a); }
.light-mode .document-library-heading h3 { color:#0f172a; }
@media(max-width:920px){
  .document-hub-showcase { grid-template-columns:88px minmax(0,1fr); }
  .document-hub-emblem { width:82px;border-radius:23px; }
  .document-hub-emblem span { font-size:39px; }
  .document-hub-stats { grid-column:1/-1; }
}
@media(max-width:600px){
  .document-hub-showcase { grid-template-columns:64px minmax(0,1fr);gap:14px;padding:18px;border-radius:21px; }
  .document-hub-emblem { width:62px;border-radius:17px; }
  .document-hub-emblem span { font-size:30px; }
  .document-hub-copy h3 { font-size:16px; }
  .document-hub-copy p { font-size:10px; }
  .document-hub-stats { gap:6px; }
  .document-hub-stats span { min-width:0;padding:11px 4px;border-radius:13px; }
  .document-hub-stats b { font-size:19px; }
  .document-hub-stats small { font-size:7px; }
  .document-library-heading { align-items:flex-start;flex-direction:column;gap:9px; }
  .document-download-section .document-card { min-height:270px;padding:18px; }
  .document-card-top .document-icon { width:53px;height:53px;border-radius:16px;font-size:24px; }
}
@media(prefers-reduced-motion:reduce){.document-download-section .document-card::before,.document-download-section .document-card>a::before{display:none}}

/* Berita Sekolah — premium editorial portal */
.news-archive-section { position:relative;isolation:isolate; }
.news-page-heading { max-width:1120px;margin-left:auto;margin-right:auto; }
.news-hub-showcase {
  position:relative;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) auto;
  align-items:center;
  gap:25px;
  max-width:1120px;
  margin:0 auto 28px;
  padding:25px 27px;
  overflow:hidden;
  border:1px solid rgba(103,232,249,.28);
  border-radius:27px;
  background:radial-gradient(circle at 8% 10%,rgba(16,185,129,.25),transparent 31%),linear-gradient(120deg,rgba(8,47,73,.94),rgba(15,23,42,.91) 58%,rgba(30,58,138,.8));
  box-shadow:0 25px 62px rgba(2,6,23,.33),inset 0 1px rgba(255,255,255,.08);
}
.news-hub-showcase::after { content:"";position:absolute;right:-55px;top:-105px;width:270px;height:270px;border:1px solid rgba(103,232,249,.13);border-radius:50%;box-shadow:0 0 0 35px rgba(16,185,129,.035),0 0 0 70px rgba(59,130,246,.025);pointer-events:none; }
.news-hub-emblem { width:102px;aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(251,191,36,.43);border-radius:28px;background:linear-gradient(145deg,rgba(251,191,36,.19),rgba(6,182,212,.12));box-shadow:0 0 32px rgba(6,182,212,.16),inset 0 1px rgba(255,255,255,.12); }
.news-hub-emblem span { font-size:48px;filter:drop-shadow(0 9px 15px rgba(0,0,0,.3)); }
.news-hub-copy { position:relative;z-index:1; }
.news-hub-copy small { color:#5eead4;font-size:9px;font-weight:900;letter-spacing:.17em; }
.news-hub-copy h3 { margin:8px 0 7px;color:#f8fafc;font:700 clamp(20px,2vw,28px)/1.23 Poppins,sans-serif;text-wrap:balance; }
.news-hub-copy p { max-width:690px;margin:0;color:#cbd5e1;font-size:12px;line-height:1.7;text-align:justify; }
.news-hub-stats { position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(78px,1fr));gap:8px; }
.news-hub-stats span { min-width:80px;padding:14px 9px;text-align:center;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:rgba(2,8,23,.32);backdrop-filter:blur(8px); }
.news-hub-stats b { display:block;color:#fbbf24;font-size:24px;line-height:1;text-shadow:0 0 17px rgba(251,191,36,.34); }
.news-hub-stats small { display:block;margin-top:7px;color:#dbeafe;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.news-library-heading { max-width:1120px;margin:0 auto 15px;display:flex;align-items:end;justify-content:space-between;gap:18px;padding:0 4px; }
.news-library-heading small { color:#22d3ee;font-size:9px;font-weight:900;letter-spacing:.16em; }
.news-library-heading h3 { margin:4px 0 0;color:#f8fafc;font:700 clamp(18px,2vw,23px)/1.25 Poppins,sans-serif; }
.news-library-heading>span { padding:7px 11px;border:1px solid rgba(52,211,153,.25);border-radius:999px;background:rgba(16,185,129,.1);color:#a7f3d0;font-size:9px;font-weight:800;white-space:nowrap; }
.news-archive-section .news-full-list { grid-template-columns:repeat(2,minmax(0,1fr));gap:21px; }
.news-archive-section .news-full-card { position:relative;display:flex;flex-direction:column;border-color:rgba(103,232,249,.2);background:radial-gradient(circle at 94% 5%,rgba(16,185,129,.14),transparent 27%),linear-gradient(145deg,rgba(8,47,73,.88),rgba(3,15,39,.95));transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.news-archive-section .news-full-card:hover { transform:translateY(-6px);border-color:rgba(52,211,153,.66);box-shadow:0 25px 55px rgba(2,6,23,.42),0 0 27px rgba(16,185,129,.13); }
.news-archive-section .news-full-image { position:relative;aspect-ratio:16/9;border-bottom:1px solid rgba(103,232,249,.16);background:linear-gradient(135deg,#082f49,#065f46); }
.news-archive-section .news-full-image img { transition:transform .45s ease; }
.news-archive-section .news-full-card:hover .news-full-image img { transform:scale(1.025); }
.news-archive-section .news-full-image>small,.news-archive-section .news-full-image>b { position:absolute;z-index:2;top:13px;padding:6px 9px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(2,8,23,.72);backdrop-filter:blur(8px);font-size:8px;letter-spacing:.11em; }
.news-archive-section .news-full-image>small { left:13px;color:#67e8f9;font-weight:900; }
.news-archive-section .news-full-image>b { right:13px;color:#fde68a; }
.news-archive-section .news-full-content { display:flex;flex:1;flex-direction:column;padding:23px; }
.news-card-meta { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px; }
.news-card-meta span { padding:5px 8px;border:1px solid rgba(52,211,153,.27);border-radius:999px;background:rgba(16,185,129,.1);color:#a7f3d0;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; }
.news-card-meta time { color:#94a3b8;font-size:9px;font-weight:700; }
.news-archive-section .news-full-content h2 { font-size:clamp(18px,2vw,24px);line-height:1.35;text-wrap:balance; }
.news-archive-section .news-full-summary { flex:1;margin-top:11px;color:#cbd5e1;font-size:12px;font-weight:500;white-space:pre-line; }
.news-archive-section .news-full-actions { margin-top:19px;padding-top:16px;border-top:1px solid rgba(148,163,184,.14); }
.news-archive-section .news-read-button { min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 10px 9px 14px!important;border:1px solid rgba(103,232,249,.42);border-radius:12px;background:linear-gradient(110deg,rgba(16,185,129,.22),rgba(6,182,212,.19));color:#ecfeff;text-decoration:none;transition:background .25s ease,border-color .25s ease,transform .25s ease; }
.news-archive-section .news-read-button:hover { transform:translateX(3px);border-color:#67e8f9;background:linear-gradient(110deg,rgba(16,185,129,.36),rgba(6,182,212,.31)); }
.news-archive-section .news-read-button b { width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(2,8,23,.22);font-size:16px; }
.news-library-empty { grid-column:1/-1;padding:48px 24px!important;text-align:center; }
.news-library-empty>span { display:block;margin-bottom:10px;font-size:43px; }
.news-library-empty h3 { margin:0;color:#f8fafc;font:700 19px Poppins,sans-serif; }
.news-library-empty p { margin:8px 0 0;color:#94a3b8; }
.light-mode .news-hub-showcase { background:linear-gradient(120deg,#064e3b,#0f766e 58%,#1e3a8a); }
.light-mode .news-library-heading h3 { color:#0f172a; }
.light-mode .news-card-meta time { color:#64748b; }
@media(max-width:920px){
  .news-hub-showcase { grid-template-columns:88px minmax(0,1fr); }
  .news-hub-emblem { width:82px;border-radius:23px; }
  .news-hub-emblem span { font-size:39px; }
  .news-hub-stats { grid-column:1/-1; }
}
@media(max-width:700px){.news-archive-section .news-full-list{grid-template-columns:1fr}}
@media(max-width:600px){
  .news-hub-showcase { grid-template-columns:64px minmax(0,1fr);gap:14px;padding:18px;border-radius:21px; }
  .news-hub-emblem { width:62px;border-radius:17px; }
  .news-hub-emblem span { font-size:30px; }
  .news-hub-copy h3 { font-size:16px; }
  .news-hub-copy p { font-size:10px; }
  .news-hub-stats { gap:6px; }
  .news-hub-stats span { min-width:0;padding:11px 4px;border-radius:13px; }
  .news-hub-stats b { font-size:19px; }
  .news-hub-stats small { font-size:7px; }
  .news-library-heading { align-items:flex-start;flex-direction:column;gap:9px; }
  .news-archive-section .news-full-image { aspect-ratio:16/10; }
  .news-archive-section .news-full-content { padding:18px; }
  .news-card-meta { align-items:flex-start;flex-direction:column;gap:7px; }
}

/* Sorotan tajuk seragam seperti halaman Info Sekolah */
.page-hero-badges {
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:25px;
}
.page-hero-badges span {
  padding:9px 13px;
  border:1px solid rgba(103,232,249,.24);
  border-radius:999px;
  background:rgba(2,8,23,.28);
  color:#d7f9ee;
  font:700 10px/1.25 Inter,sans-serif;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 8px 18px rgba(2,6,23,.14);
  backdrop-filter:blur(10px);
}
.page-hero>* { position:relative;z-index:1; }
.weekly-report-hero>.eyebrow,.weekly-report-hero>h1,.weekly-report-hero>.page-hero-badges { width:min(1180px,calc(100% - 40px));margin-left:auto;margin-right:auto;text-align:left; }
.weekly-report-hero>.eyebrow { margin-bottom:12px;color:#6ee7b7;font:800 9px/1.2 Inter,sans-serif;letter-spacing:.19em; }
.weekly-report-hero>.page-hero-badges { margin-top:20px;margin-bottom:25px; }
@media(max-width:600px){
  .page-hero-badges { justify-content:center;margin-top:19px; }
  .page-hero-badges span { padding:8px 10px;font-size:8px; }
  .weekly-report-hero>.eyebrow,.weekly-report-hero>h1,.weekly-report-hero>.page-hero-badges { width:100%;text-align:center; }
}

/* Kad tindakan Berita dan Perancangan Program pada halaman utama */
.home-news-actions {
  width:min(1120px,100%);
  margin:30px auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px;
}
.home-news-actions .annual-activity-cta {
  position:relative;
  min-width:0;
  min-height:128px;
  margin:0;
  padding:20px;
  overflow:hidden;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:15px;
  border:1px solid rgba(103,232,249,.3);
  border-radius:24px;
  background:radial-gradient(circle at 100% 0,rgba(59,130,246,.2),transparent 38%),linear-gradient(135deg,rgba(8,47,73,.94),rgba(3,15,39,.95));
  box-shadow:0 18px 42px rgba(2,6,23,.34),inset 0 1px rgba(255,255,255,.06);
}
.home-news-actions .all-news-cta { background:radial-gradient(circle at 100% 0,rgba(6,182,212,.22),transparent 38%),linear-gradient(135deg,rgba(7,50,77,.95),rgba(3,15,39,.95)); }
.home-news-actions .annual-activity-cta:not(.all-news-cta) { background:radial-gradient(circle at 100% 0,rgba(16,185,129,.23),transparent 38%),linear-gradient(135deg,rgba(6,61,60,.94),rgba(3,15,39,.95)); }
.home-news-actions .annual-activity-cta::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(108deg,transparent 24%,rgba(255,255,255,.07) 48%,transparent 70%);transform:translateX(-110%);transition:transform .65s ease; }
.home-news-actions .annual-activity-cta:hover::before { transform:translateX(110%); }
.home-news-actions .annual-activity-cta:hover { transform:translateY(-6px);border-color:#67e8f9;box-shadow:0 24px 52px rgba(2,6,23,.42),0 0 28px rgba(6,182,212,.17); }
.home-news-actions .annual-activity-cta>i { position:relative;z-index:1;width:58px;height:58px;margin:0;border-radius:18px;font-size:27px;background:linear-gradient(145deg,rgba(16,185,129,.28),rgba(6,182,212,.22));box-shadow:inset 0 1px rgba(255,255,255,.1),0 9px 22px rgba(2,6,23,.28); }
.home-news-actions .all-news-cta>i { background:linear-gradient(145deg,rgba(6,182,212,.3),rgba(59,130,246,.24)); }
.home-news-actions .annual-activity-cta>span { position:relative;z-index:1;min-width:0; }
.home-news-actions .annual-activity-cta small { margin-bottom:6px;color:#67e8f9;font-size:8px;letter-spacing:.16em; }
.home-news-actions .annual-activity-cta b { display:block;color:#f8fafc;font-size:clamp(15px,1.6vw,20px);line-height:1.3;text-wrap:balance; }
.home-news-actions .annual-activity-cta em { display:block;margin-top:6px;color:#afc4d8;font-size:10px;font-style:normal;line-height:1.45; }
.home-news-actions .annual-activity-cta>strong { position:relative;z-index:1;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(103,232,249,.3);border-radius:50%;background:rgba(2,8,23,.3);color:#a7f3d0;font:400 25px/1 Inter,sans-serif;transition:transform .25s ease,background .25s ease; }
.home-news-actions .annual-activity-cta:hover>strong { transform:translateX(3px);background:rgba(16,185,129,.25); }
.light-mode .home-news-actions .annual-activity-cta { background:linear-gradient(135deg,#064e3b,#0f766e); }
.light-mode .home-news-actions .all-news-cta { background:linear-gradient(135deg,#0c4a6e,#1e3a8a); }
@media(max-width:760px){.home-news-actions{grid-template-columns:1fr}}
@media(max-width:480px){
  .home-news-actions { gap:12px;margin-top:22px; }
  .home-news-actions .annual-activity-cta { min-height:108px;grid-template-columns:48px minmax(0,1fr);gap:11px;padding:16px;border-radius:19px; }
  .home-news-actions .annual-activity-cta>i { width:48px;height:48px;border-radius:15px;font-size:22px; }
  .home-news-actions .annual-activity-cta b { font-size:14px; }
  .home-news-actions .annual-activity-cta em { font-size:9px; }
  .home-news-actions .annual-activity-cta>strong { width:29px;height:29px;font-size:20px; }
}

/* Galeri Digital Sekolah — bingkai visual premium */
.home-slideshow-section {
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 8% 8%,rgba(16,185,129,.13),transparent 27%),radial-gradient(circle at 92% 82%,rgba(6,182,212,.12),transparent 28%),linear-gradient(135deg,rgba(3,15,39,.84),rgba(6,50,66,.68))!important;
}
.home-slideshow-section::before { content:"";position:absolute;right:-120px;top:-170px;width:390px;height:390px;border:1px solid rgba(103,232,249,.08);border-radius:50%;box-shadow:0 0 0 48px rgba(16,185,129,.02),0 0 0 96px rgba(59,130,246,.018);pointer-events:none; }
.home-gallery-heading { position:relative;z-index:1;width:min(1500px,100%);margin-left:auto;margin-right:auto;align-items:center; }
.home-gallery-title { display:flex;align-items:center;gap:16px; }
.home-gallery-title>span { width:58px;height:58px;display:grid;place-items:center;flex:none;border:1px solid rgba(103,232,249,.33);border-radius:18px;background:linear-gradient(145deg,rgba(16,185,129,.25),rgba(6,182,212,.2));color:#a7f3d0;font-size:25px;box-shadow:0 10px 24px rgba(2,6,23,.28),0 0 20px rgba(6,182,212,.12); }
.home-gallery-title .eyebrow { margin-bottom:5px; }
.home-gallery-title h2 { margin:0;color:#f8fafc;text-shadow:0 0 20px rgba(6,182,212,.16); }
.home-gallery-shell { position:relative;z-index:1;width:min(1500px,100%);margin:0 auto;padding:7px;border:1px solid rgba(103,232,249,.22);border-radius:25px;background:linear-gradient(145deg,rgba(6,182,212,.1),rgba(16,185,129,.07));box-shadow:0 26px 62px rgba(2,6,23,.43),0 0 32px rgba(6,182,212,.1); }
.home-gallery-shell .home-slideshow { width:100%;border:1px solid rgba(103,232,249,.25);border-radius:18px;background:linear-gradient(135deg,#082f49,#065f46);box-shadow:none; }
.home-gallery-shell .home-slide,.home-gallery-shell .home-slide img { background:linear-gradient(135deg,#082f49,#065f46)!important; }
.home-gallery-shell .home-slide-control { width:46px;height:52px;border-color:rgba(167,243,208,.42);border-radius:15px;background:rgba(2,8,23,.42);box-shadow:0 8px 20px rgba(2,6,23,.28);transition:transform .24s ease,background .24s ease,box-shadow .24s ease; }
.home-gallery-shell .home-slide-control:hover { transform:translateY(-50%) scale(1.06); }
.home-slide-progress { position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;overflow:hidden;background:rgba(255,255,255,.08); }
.home-slide-progress i { display:block;width:0;height:100%;background:linear-gradient(90deg,#10b981,#06b6d4,#3b82f6);box-shadow:0 0 12px rgba(6,182,212,.65); }
.home-slide-progress i.running { animation:homeGalleryProgress 5s linear both; }
@keyframes homeGalleryProgress { from{width:0}to{width:100%} }
.light-mode .home-slideshow-section { background:linear-gradient(135deg,rgba(236,254,255,.92),rgba(209,250,229,.85))!important; }
.light-mode .home-gallery-title h2 { color:#0f172a; }
@media(max-width:600px){
  .home-slideshow-section { padding-top:42px;padding-bottom:42px; }
  .home-gallery-heading { display:flex;align-items:center;flex-direction:row;gap:10px;margin-bottom:18px;text-align:left; }
  .home-gallery-title { gap:10px;min-width:0; }
  .home-gallery-title>span { width:45px;height:45px;border-radius:14px;font-size:20px; }
  .home-gallery-title h2 { font-size:22px; }
  .home-gallery-shell { padding:3px;border-radius:12px; }
  .home-gallery-shell .home-slideshow { border-radius:9px; }
  .home-gallery-shell .home-slide-control { width:28px;height:34px;border-radius:8px; }
}
@media(prefers-reduced-motion:reduce){.home-slide-progress i.running{animation:none;width:100%}}

/* Tajuk premium yang seragam untuk semua halaman awam */
.page-hero {
  min-height:clamp(285px,34vw,410px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(64px,8vw,104px);
  padding-right:max(5vw,calc((100vw - 1180px)/2));
  padding-bottom:clamp(64px,8vw,104px);
  padding-left:max(5vw,calc((100vw - 1180px)/2));
  border-bottom:1px solid rgba(103,232,249,.2);
  background:
    radial-gradient(circle at 83% 22%,rgba(6,182,212,.27),transparent 27%),
    radial-gradient(circle at 13% 88%,rgba(16,185,129,.22),transparent 30%),
    radial-gradient(circle at 63% 115%,rgba(59,130,246,.2),transparent 34%),
    linear-gradient(120deg,#020617 2%,#07334c 54%,#065f46 100%)!important;
  box-shadow:inset 0 -26px 54px rgba(2,6,23,.18),0 18px 48px rgba(2,6,23,.18);
  text-align:left;
}
.page-hero>.eyebrow {
  width:max-content;
  max-width:100%;
  margin:0 0 13px;
  padding:7px 11px;
  border:1px solid rgba(103,232,249,.27);
  border-radius:999px;
  background:rgba(2,8,23,.25);
  color:#6ee7b7!important;
  font:800 9px/1.2 Inter,sans-serif;
  letter-spacing:.19em;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 7px 20px rgba(2,6,23,.16);
  backdrop-filter:blur(10px);
}
.page-hero>h1 {
  width:min(920px,100%);
  margin:0 0 16px;
  color:#f8fafc;
  font:800 clamp(39px,6vw,74px)/1.04 Poppins,sans-serif;
  letter-spacing:-.052em;
  text-wrap:balance;
  overflow-wrap:anywhere;
  text-shadow:0 10px 34px rgba(2,6,23,.48),0 0 27px rgba(6,182,212,.2);
}
.page-hero>h1::first-line { color:#fff; }
.page-hero>p:not(.eyebrow):not(.eduspace-welcome) {
  width:min(720px,100%);
  max-width:720px;
  margin:0;
  color:#d4e5ef;
  font:500 clamp(13px,1.4vw,16px)/1.8 Inter,sans-serif;
  letter-spacing:.002em;
  text-wrap:pretty;
}
.page-hero .eduspace-welcome {
  width:max-content;
  max-width:100%;
  margin:1px 0 13px;
  padding:7px 11px;
  border:1px solid rgba(251,191,36,.28);
  border-radius:999px;
  background:rgba(251,191,36,.08);
  color:#fde68a;
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
}
.page-hero.school-info-hero,.page-hero.all-news-hero { min-height:clamp(300px,35vw,425px); }
.school-info-hero-badges { margin-top:25px; }
.school-info-hero-badges span { border-color:rgba(103,232,249,.24);background:rgba(2,8,23,.28);box-shadow:inset 0 1px rgba(255,255,255,.07),0 8px 18px rgba(2,6,23,.14); }
.weekly-report-hero {
  padding-top:clamp(58px,7vw,90px);
  padding-bottom:clamp(48px,6vw,78px);
  background:radial-gradient(circle at 83% 20%,rgba(6,182,212,.25),transparent 27%),radial-gradient(circle at 14% 82%,rgba(16,185,129,.2),transparent 29%),linear-gradient(120deg,#020617,#07334c 55%,#065f46)!important;
  box-shadow:inset 0 -28px 55px rgba(2,6,23,.2),0 18px 48px rgba(2,6,23,.18);
}
.weekly-report-hero h1 { color:#fff;font-family:Poppins,sans-serif;font-weight:800;text-shadow:0 10px 34px rgba(2,6,23,.5),0 0 28px rgba(6,182,212,.22); }
.light-mode .page-hero,.light-mode .weekly-report-hero { background:radial-gradient(circle at 84% 22%,rgba(34,211,238,.32),transparent 28%),linear-gradient(120deg,#0f172a,#0f766e 60%,#047857)!important; }
@media(max-width:600px){
  .page-hero,.page-hero.school-info-hero,.page-hero.all-news-hero {
    min-height:255px;
    padding:48px 18px!important;
    text-align:center;
    align-items:center;
  }
  .page-hero>.eyebrow { margin-bottom:11px;font-size:7px; }
  .page-hero>h1,.school-info-hero h1,.all-news-hero h1 { margin-bottom:13px;font-size:clamp(29px,10vw,39px);line-height:1.12;letter-spacing:-.04em; }
  .page-hero>p:not(.eyebrow):not(.eduspace-welcome) { margin-left:auto;margin-right:auto;font-size:11px;line-height:1.7;text-align:center; }
  .page-hero .eduspace-welcome { margin-left:auto;margin-right:auto;font-size:8px; }
  .school-info-hero-badges { justify-content:center;margin-top:19px; }
  .weekly-report-hero { padding-top:48px;padding-bottom:43px; }
}

/* Kad hero halaman utama — glassmorphism digital premium */
.hero {
  min-height:clamp(560px,66vw,720px);
  display:grid;
  place-items:center;
  padding:clamp(54px,7vw,88px) max(5vw,22px) clamp(68px,8vw,96px);
  isolation:isolate;
}
.hero::before {
  content:"";
  position:absolute;
  z-index:1;
  width:min(76vw,880px);
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(103,232,249,.08);
  border-radius:50%;
  box-shadow:0 0 0 58px rgba(16,185,129,.025),0 0 0 116px rgba(59,130,246,.018);
  pointer-events:none;
}
.hero>.hero-inner {
  width:min(1080px,100%);
  max-width:none;
  min-height:390px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(38px,5vw,66px) clamp(25px,6vw,82px);
  overflow:hidden;
  border:1px solid rgba(103,232,249,.3);
  border-radius:32px;
  background:
    radial-gradient(circle at 12% 10%,rgba(16,185,129,.18),transparent 32%),
    radial-gradient(circle at 92% 85%,rgba(59,130,246,.18),transparent 34%),
    linear-gradient(145deg,rgba(2,15,39,.73),rgba(8,47,73,.5));
  box-shadow:0 32px 80px rgba(2,6,23,.55),inset 0 1px rgba(255,255,255,.1),0 0 36px rgba(6,182,212,.1);
  backdrop-filter:blur(15px) saturate(130%);
  -webkit-backdrop-filter:blur(15px) saturate(130%);
}
.hero>.hero-inner::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(112deg,transparent 20%,rgba(255,255,255,.065) 48%,transparent 73%);
  transform:translateX(-110%);
  animation:heroCardSheen 8s ease-in-out infinite;
  pointer-events:none;
}
.hero>.hero-inner::after {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-62px;
  top:-64px;
  border:1px solid rgba(167,243,208,.2);
  border-radius:32px;
  transform:rotate(28deg);
  box-shadow:0 0 0 26px rgba(6,182,212,.025);
  pointer-events:none;
}
@keyframes heroCardSheen {
  0%,62%{transform:translateX(-115%)}
  82%,100%{transform:translateX(115%)}
}
.hero>.hero-inner>* { position:relative;z-index:1; }
.hero>.hero-inner>.eyebrow {
  width:max-content;
  max-width:100%;
  margin-bottom:7px;
  padding:8px 14px;
  border:1px solid rgba(103,232,249,.3);
  border-radius:999px;
  background:rgba(2,8,23,.35);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 22px rgba(2,6,23,.2);
}
.hero>.hero-inner>.hero-digital-tagline {
  margin-bottom:22px!important;
  color:#fde68a!important;
  text-shadow:0 0 15px rgba(251,191,36,.32)!important;
}
.hero h1 { width:min(940px,100%); }
.hero h1::after {
  font-size:clamp(35px,5vw,65px);
  line-height:1.13;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero p:not(.eyebrow):not(.hero-digital-tagline) {
  width:min(680px,100%);
  margin:22px auto 29px;
  color:#d9e9f3;
  font-size:clamp(13px,1.35vw,16px);
  line-height:1.75;
  text-wrap:pretty;
}
.hero .primary,.hero .secondary-cta {
  min-height:48px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  margin:0 5px;
  padding:12px 20px;
  border-radius:15px;
  white-space:nowrap;
  text-decoration:none;
}
.hero .primary { border-color:rgba(167,243,208,.58); }
.hero .secondary-cta { background:rgba(2,15,39,.54); }
.hero .primary:focus-visible,.hero .secondary-cta:focus-visible {
  outline:3px solid #fbbf24;
  outline-offset:4px;
}
.hero-slide-dots {
  bottom:26px;
  padding:7px 10px;
  border:1px solid rgba(103,232,249,.17);
  border-radius:999px;
  background:rgba(2,8,23,.34);
  backdrop-filter:blur(9px);
}
.hero-slide-dots i { width:30px;height:3px; }
.light-mode .hero>.hero-inner {
  background:linear-gradient(145deg,rgba(15,23,42,.7),rgba(6,78,59,.5));
}
@media(max-width:600px){
  .hero {
    min-height:530px;
    padding:42px 14px 67px;
  }
  .hero::before { width:105vw; }
  .hero>.hero-inner {
    min-height:390px;
    padding:29px 16px 31px;
    border-radius:24px;
  }
  .hero>.hero-inner>.eyebrow { padding:7px 10px;font-size:9px; }
  .hero>.hero-inner>.hero-digital-tagline { margin-bottom:17px!important;font-size:8px!important; }
  .hero h1::after { font-size:clamp(22px,7.1vw,30px);line-height:1.2; }
  .hero p:not(.eyebrow):not(.hero-digital-tagline) { margin:17px auto 22px;font-size:11px;line-height:1.65; }
  .hero .primary,.hero .secondary-cta {
    min-height:42px;
    margin:4px 2px 0;
    padding:10px 12px;
    border-radius:13px;
    font-size:9px;
  }
  .hero-slide-dots { bottom:17px; }
  .hero-slide-dots i { width:22px; }
}
@media(max-width:370px){
  .hero>.hero-inner { padding-left:11px;padding-right:11px; }
  .hero .primary,.hero .secondary-cta { padding-left:9px;padding-right:9px;font-size:8px; }
}
@media(prefers-reduced-motion:reduce){.hero>.hero-inner::before{animation:none}}

/* Hero panorama — gambar slaid kekal jelas di belakang kandungan */
.hero {
  min-height:clamp(580px,67vw,735px);
  background:#020617;
}
.hero-slide-overlay {
  background:
    linear-gradient(180deg,rgba(2,6,23,.28),rgba(2,6,23,.12) 43%,rgba(2,6,23,.48)),
    linear-gradient(90deg,rgba(2,6,23,.32),transparent 35%,transparent 65%,rgba(2,6,23,.3)),
    radial-gradient(circle at 50% 48%,rgba(6,182,212,.05),transparent 48%);
}
.hero-slide { filter:saturate(1.08) contrast(1.03) brightness(.94); }
.hero>.hero-inner {
  width:min(1040px,94%);
  min-height:0;
  padding:clamp(34px,4.7vw,58px) clamp(22px,5vw,70px);
  border:1px solid rgba(207,250,254,.35);
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(2,8,23,.24),rgba(3,30,46,.16)),
    radial-gradient(circle at 50% 0,rgba(6,182,212,.1),transparent 54%);
  box-shadow:0 24px 70px rgba(2,6,23,.28),inset 0 1px rgba(255,255,255,.14),0 0 0 6px rgba(2,8,23,.07);
  backdrop-filter:blur(4px) saturate(112%);
  -webkit-backdrop-filter:blur(4px) saturate(112%);
}
.hero>.hero-inner::after {
  width:auto;
  height:auto;
  inset:12px;
  border:1px solid rgba(167,243,208,.12);
  border-radius:21px;
  transform:none;
  box-shadow:none;
}
.hero>.hero-inner>.eyebrow {
  background:rgba(2,8,23,.38);
  border-color:rgba(165,243,252,.42);
  box-shadow:0 8px 22px rgba(2,6,23,.22),0 0 16px rgba(6,182,212,.1);
}
.hero h1::after {
  text-shadow:0 3px 22px rgba(2,6,23,.92),0 0 17px rgba(16,185,129,.48),0 0 32px rgba(6,182,212,.32);
}
.hero p:not(.eyebrow):not(.hero-digital-tagline) {
  padding:9px 14px;
  border-radius:14px;
  background:linear-gradient(90deg,transparent,rgba(2,8,23,.34) 16%,rgba(2,8,23,.34) 84%,transparent);
  color:#f0f9ff;
  text-shadow:0 2px 10px rgba(2,6,23,.9);
}
.hero .primary,.hero .secondary-cta {
  border-color:rgba(207,250,254,.66);
  box-shadow:0 12px 28px rgba(2,6,23,.35),0 0 18px rgba(6,182,212,.16);
}
.hero .secondary-cta {
  background:rgba(2,8,23,.43);
  backdrop-filter:blur(8px);
}
.hero-slide-dots { background:rgba(2,8,23,.22); }
@media(max-width:600px){
  .hero { min-height:540px;padding:38px 10px 65px; }
  .hero>.hero-inner {
    width:100%;
    padding:26px 12px 28px;
    border-radius:22px;
    background:linear-gradient(145deg,rgba(2,8,23,.2),rgba(3,30,46,.12));
    backdrop-filter:blur(2px) saturate(110%);
    -webkit-backdrop-filter:blur(2px) saturate(110%);
  }
  .hero>.hero-inner::after { inset:7px;border-radius:16px; }
  .hero p:not(.eyebrow):not(.hero-digital-tagline) { padding:7px 5px;background:rgba(2,8,23,.23); }
}

/* Jarak seragam bagi tiga butang tindakan pada kad hero. */
.hero .primary,
.hero #latestActivity,
.hero #weeklyReportHeroButton {
  margin:0;
}
.hero-actions {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  width:100%;
}
.hero-actions .primary,
.hero-actions .secondary-cta {
  background:rgba(2,8,23,.43)!important;
  border-color:rgba(207,250,254,.55)!important;
  color:#f8fafc!important;
  box-shadow:0 12px 28px rgba(2,6,23,.35),0 0 18px rgba(6,182,212,.12)!important;
}
.hero-actions .primary:hover,
.hero-actions .secondary-cta:hover,
.hero-actions .primary:focus-visible,
.hero-actions .secondary-cta:focus-visible,
.hero-actions .primary:active,
.hero-actions .secondary-cta:active {
  background:linear-gradient(115deg,#06b6d4,#3b82f6)!important;
  border-color:#a5f3fc!important;
  color:#fff!important;
  box-shadow:0 0 28px rgba(6,182,212,.45),0 13px 30px rgba(2,6,23,.38)!important;
}
@media(max-width:600px){
  .hero-actions { gap:10px 8px; }
  .hero-actions .primary,.hero-actions .secondary-cta { width:auto;min-width:0;margin:0!important; }
}

/* Logo aplikasi media sosial di bawah tindakan utama hero. */
.hero-social-links{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  width:100%;
  margin-top:18px;
}
.hero-social-links a{
  display:grid;
  width:43px;
  height:43px;
  place-items:center;
  padding:0;
  border:1px solid rgba(207,250,254,.3);
  border-radius:50%;
  background:rgba(2,8,23,.4);
  box-shadow:0 10px 24px rgba(2,6,23,.3),inset 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.hero-social-links svg{width:22px;height:22px;fill:currentColor}
.hero-social-links .facebook{color:#60a5fa}
.hero-social-links .gmail{color:#f8fafc}
.hero-social-links .youtube{color:#fb7185}
.hero-social-links .delima{border-color:rgba(251,191,36,.48);background:linear-gradient(145deg,rgba(251,191,36,.24),rgba(180,83,9,.26));color:#fde68a}
.hero-social-links .ains{border-color:rgba(52,211,153,.48);background:linear-gradient(145deg,rgba(52,211,153,.23),rgba(4,120,87,.28));color:#a7f3d0}
.hero-social-links .delima span,.hero-social-links .ains span{font:900 18px/1 Poppins,sans-serif;text-shadow:0 3px 8px rgba(2,6,23,.52)}
.hero-social-links a:hover,.hero-social-links a:focus-visible{
  transform:translateY(-4px) scale(1.08);
  border-color:currentColor;
  box-shadow:0 14px 30px rgba(2,6,23,.38),0 0 18px currentColor;
  outline:none;
}
.light-mode .hero-social-links a{background:rgba(255,255,255,.82)}
.light-mode .hero-social-links .gmail{color:#ea4335}
@media(max-width:600px){
  .hero-social-links{gap:11px;margin-top:14px}
  .hero-social-links a{width:38px;height:38px}
  .hero-social-links svg{width:20px;height:20px}
}

/* Direktori Guru Kelas — kemasan premium dan responsif */
.class-teachers-section {
  padding-top:clamp(50px,7vw,88px);
  padding-bottom:clamp(52px,7vw,90px);
  background:
    radial-gradient(circle at 8% 5%,rgba(6,182,212,.2),transparent 27%),
    radial-gradient(circle at 93% 18%,rgba(16,185,129,.18),transparent 25%),
    radial-gradient(circle at 48% 105%,rgba(59,130,246,.15),transparent 34%),
    linear-gradient(145deg,#020817,#082b4d 53%,#064e3b)!important;
}
.class-teachers-section::before {
  background:
    linear-gradient(rgba(103,232,249,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,232,249,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.class-teachers-shell { width:min(1320px,100%); }
.class-teachers-heading {
  max-width:980px;
  margin-bottom:30px;
  padding:clamp(27px,4vw,43px);
  border-color:rgba(103,232,249,.25);
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 0,rgba(6,182,212,.16),transparent 44%),
    linear-gradient(145deg,rgba(8,47,73,.62),rgba(2,15,39,.63));
  box-shadow:0 25px 60px rgba(2,6,23,.4),inset 0 1px rgba(255,255,255,.1),0 0 34px rgba(6,182,212,.08);
}
.class-teachers-heading .eyebrow {
  border-color:rgba(103,232,249,.27);
  background:rgba(6,182,212,.09);
  color:#a5f3fc;
}
.class-teachers-heading h2 {
  font-size:clamp(32px,4.4vw,52px);
  letter-spacing:-.035em;
  background:linear-gradient(100deg,#fff 12%,#a5f3fc 52%,#a7f3d0 88%);
  -webkit-background-clip:text;
  background-clip:text;
}
.class-teachers-heading strong { color:#6ee7b7;font-size:clamp(12px,1.6vw,17px); }
.class-teachers-heading p:last-child { color:#cfe4ef;font-size:13px; }
.class-teachers-stats { max-width:760px;gap:15px;margin-bottom:30px; }
.class-teachers-stats article {
  min-height:96px;
  padding:17px 19px;
  border-color:rgba(103,232,249,.25);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(8,47,73,.72),rgba(6,78,59,.35));
  box-shadow:0 16px 36px rgba(2,6,23,.3),inset 0 1px rgba(255,255,255,.08);
}
.class-teachers-stats article::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:20px 0 0 20px;
  background:linear-gradient(#22d3ee,#10b981);
  box-shadow:0 0 15px rgba(6,182,212,.55);
}
.class-teachers-stats article>span {
  border-color:rgba(103,232,249,.28);
  background:linear-gradient(145deg,rgba(6,182,212,.18),rgba(16,185,129,.14));
}
.class-teachers-stats b { color:#f8fafc;font-size:28px; }
.class-teachers-stats small { color:#c6d8e7;font-weight:700;letter-spacing:.06em;text-transform:uppercase; }
.class-teachers-tools {
  max-width:1180px;
  margin-bottom:25px;
  padding:19px;
  border-color:rgba(103,232,249,.2);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(2,15,39,.67),rgba(8,47,73,.4));
  box-shadow:0 18px 42px rgba(2,6,23,.28),inset 0 1px rgba(255,255,255,.06);
}
.class-teacher-tabs button {
  min-height:40px;
  border-color:rgba(103,232,249,.25);
  background:rgba(8,47,73,.58);
}
.class-teacher-tabs button:hover,
.class-teacher-tabs button.active {
  border-color:#67e8f9;
  background:linear-gradient(110deg,#0891b2,#2563eb);
  box-shadow:0 8px 22px rgba(6,182,212,.25),0 0 18px rgba(59,130,246,.16);
}
.class-teacher-tabs button::after { background:#a7f3d0; }
.class-teacher-search {
  border-color:rgba(103,232,249,.34);
  background:rgba(2,12,32,.72);
}
.class-teacher-search:focus-within {
  border-color:#67e8f9;
  box-shadow:0 12px 30px rgba(2,6,23,.3),0 0 0 3px rgba(6,182,212,.1);
}
.class-teachers-directory {
  height:clamp(500px,70vh,760px);
  padding:20px 16px 22px;
  border:1px solid rgba(103,232,249,.18);
  border-radius:29px;
  background:linear-gradient(145deg,rgba(2,12,32,.5),rgba(6,50,66,.24));
  box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -20px 45px rgba(2,6,23,.15),0 20px 48px rgba(2,6,23,.25);
}
.class-teacher-year-group {
  margin-bottom:27px;
  padding:22px;
  border-color:rgba(103,232,249,.13);
  background:linear-gradient(145deg,rgba(8,47,73,.28),rgba(6,78,59,.1));
}
.class-teacher-year-group>h3 {
  margin-bottom:20px;
  border-color:rgba(103,232,249,.24);
  background:linear-gradient(110deg,rgba(6,182,212,.13),rgba(16,185,129,.11));
  color:#a7f3d0;
  box-shadow:0 8px 22px rgba(2,6,23,.2),inset 0 1px rgba(255,255,255,.06);
}
.class-teacher-grid { gap:20px; }
.class-teacher-card {
  min-height:310px;
  padding:24px 18px 22px;
  border-color:rgba(103,232,249,.2);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0,rgba(6,182,212,.18),transparent 36%),
    linear-gradient(155deg,rgba(8,47,73,.84),rgba(3,20,48,.9) 60%,rgba(6,78,59,.28));
  box-shadow:0 20px 44px rgba(2,6,23,.38),inset 0 1px rgba(255,255,255,.09);
}
.class-teacher-card::before {
  top:0;
  left:0;
  width:100%;
  height:3px;
  transform:none;
  border-radius:0;
  background:linear-gradient(90deg,transparent,#22d3ee,#10b981,transparent);
  box-shadow:0 0 17px rgba(6,182,212,.45);
}
.class-teacher-card:hover {
  border-color:rgba(103,232,249,.62);
  box-shadow:0 28px 58px rgba(2,6,23,.48),0 0 30px rgba(6,182,212,.15);
}
.class-teacher-photo {
  width:110px;
  margin-bottom:18px;
  border-color:rgba(103,232,249,.65);
  border-radius:23px;
  background:linear-gradient(145deg,#0e7490,#047857);
  box-shadow:0 15px 32px rgba(2,6,23,.43),0 0 0 5px rgba(6,182,212,.08),0 0 25px rgba(6,182,212,.13);
}
.class-teacher-body small {
  border-color:rgba(103,232,249,.21);
  background:rgba(6,182,212,.11);
  color:#a5f3fc;
}
.class-teacher-body h4 {
  min-height:42px;
  display:grid;
  align-items:center;
  color:#f8fafc;
  font-size:14px;
}
.class-teacher-body strong {
  border-color:rgba(167,243,208,.3);
  background:rgba(16,185,129,.11);
  color:#a7f3d0;
}
.class-teacher-body p { color:#bae6fd; }
.light-mode .class-teachers-section {
  background:linear-gradient(145deg,#eff6ff,#ecfeff 52%,#ecfdf5)!important;
}
@media(max-width:800px){
  .class-teachers-directory { padding:15px 12px 18px; }
  .class-teacher-year-group { padding:17px; }
  .class-teacher-card { min-height:295px; }
}
@media(max-width:520px){
  .class-teachers-section { padding:38px 11px 48px; }
  .class-teachers-heading { padding:24px 13px;border-radius:23px; }
  .class-teachers-heading h2 { font-size:31px; }
  .class-teachers-heading p:last-child { font-size:10px; }
  .class-teachers-stats { gap:8px; }
  .class-teachers-stats article { min-height:82px;padding:11px 5px; }
  .class-teachers-stats article::before { width:2px; }
  .class-teachers-stats b { font-size:21px; }
  .class-teachers-tools { padding:12px;border-radius:19px; }
  .class-teachers-directory { height:64vh;min-height:450px;padding:11px 8px 15px;border-radius:21px; }
  .class-teacher-year-group { padding:11px;border-radius:18px; }
  .class-teacher-year-group>h3 { margin-bottom:15px;padding:7px 14px;font-size:11px; }
  .class-teacher-card { min-height:280px;padding:20px 13px;border-radius:20px; }
  .class-teacher-photo { width:100px; }
}

/* Tiga kawalan header — glassmorphism digital premium */
.header-control-cluster {
  gap:8px;
  padding:4px;
  border:1px solid rgba(165,243,252,.13);
  border-radius:18px;
  background:rgba(2,8,23,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 9px 24px rgba(2,6,23,.18);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
}
.header-control-cluster .notification-trigger,
.header-control-cluster .header-mode-trigger,
.header-control-cluster .menu-trigger {
  position:relative;
  width:40px;
  height:40px;
  min-width:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  padding:0!important;
  border:1px solid rgba(207,250,254,.3)!important;
  border-radius:13px!important;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.18),transparent 34%),
    linear-gradient(145deg,rgba(15,55,82,.52),rgba(8,47,73,.29))!important;
  color:#ecfeff!important;
  text-shadow:0 0 10px rgba(103,232,249,.34);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 8px 22px rgba(2,6,23,.25),0 0 15px rgba(6,182,212,.08)!important;
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease,filter .24s ease;
}
.header-control-cluster .menu-trigger>span:not(.hamburger-icon) { display:none; }
.header-control-cluster .menu-trigger .hamburger-icon { display:block;font-size:19px;line-height:1; }
.header-control-cluster .notification-trigger:hover,
.header-control-cluster .notification-trigger:focus-visible,
.header-control-cluster .notification-trigger[aria-expanded="true"],
.header-control-cluster .header-mode-trigger:hover,
.header-control-cluster .header-mode-trigger:focus-visible,
.header-control-cluster .menu-trigger:hover,
.header-control-cluster .menu-trigger:focus-visible,
.header-control-cluster .menu-trigger.open {
  transform:translateY(-2px);
  border-color:rgba(165,243,252,.75)!important;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(135deg,rgba(6,182,212,.72),rgba(59,130,246,.66))!important;
  filter:none;
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 11px 27px rgba(2,6,23,.3),0 0 24px rgba(6,182,212,.3)!important;
  outline:none;
}
.header-control-cluster :is(.notification-trigger,.header-mode-trigger,.menu-trigger):focus-visible {
  outline:2px solid #fbbf24;
  outline-offset:3px;
}
.light-mode .header-control-cluster {
  border-color:rgba(8,145,178,.2);
  background:rgba(255,255,255,.28);
}
.light-mode .header-control-cluster :is(.notification-trigger,.header-mode-trigger,.menu-trigger) {
  border-color:rgba(8,145,178,.27)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(207,250,254,.42))!important;
  color:#075985!important;
  text-shadow:none;
}
@media(max-width:600px){
  .header-control-cluster { gap:5px;padding:3px;border-radius:14px; }
  .header-control-cluster .notification-trigger,
  .header-control-cluster .header-mode-trigger,
  .header-control-cluster .menu-trigger {
    width:32px;
    height:32px;
    min-width:32px;
    flex-basis:32px;
    border-radius:10px!important;
  }
  .header-control-cluster .menu-trigger .hamburger-icon { font-size:16px; }
}

/* Butang pantas sebelah kanan — sepadan dengan glassmorphism header */
.site-utilities {
  gap:8px;
  padding:6px;
  border:1px solid rgba(165,243,252,.14);
  border-radius:20px;
  background:rgba(2,8,23,.2);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 16px 36px rgba(2,6,23,.28);
  backdrop-filter:blur(16px) saturate(135%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
}
.site-utilities button {
  position:relative;
  width:42px;
  height:42px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(207,250,254,.3)!important;
  border-radius:14px!important;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.18),transparent 34%),
    linear-gradient(145deg,rgba(15,55,82,.52),rgba(8,47,73,.29))!important;
  color:#ecfeff!important;
  font-size:18px;
  line-height:1;
  text-shadow:0 0 10px rgba(103,232,249,.34);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 8px 22px rgba(2,6,23,.25),0 0 15px rgba(6,182,212,.08)!important;
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
}
.site-utilities button:hover,
.site-utilities button:focus-visible,
.site-utilities button:active {
  transform:translateY(-2px) scale(1.03);
  border-color:rgba(165,243,252,.75)!important;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(135deg,rgba(6,182,212,.72),rgba(59,130,246,.66))!important;
  color:#fff!important;
  filter:none;
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 11px 27px rgba(2,6,23,.3),0 0 24px rgba(6,182,212,.3)!important;
}
.site-utilities button:focus-visible {
  outline:2px solid #fbbf24;
  outline-offset:3px;
}
.light-mode .site-utilities {
  border-color:rgba(8,145,178,.2);
  background:rgba(255,255,255,.3);
}
.light-mode .site-utilities button {
  border-color:rgba(8,145,178,.27)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(207,250,254,.44))!important;
  color:#075985!important;
  text-shadow:none;
}
@media(max-width:600px){
  .site-utilities { gap:5px;padding:4px;border-radius:16px; }
  .site-utilities button { width:36px;height:36px;border-radius:11px!important;font-size:15px; }
}
/* MEDIALIT JUNIOR — Digital School Media Studio */
.tvpss-menu-label{display:block;padding:11px 16px 4px;color:#fbbf24;font:800 9px Poppins,sans-serif;letter-spacing:.18em}.hamburger-menu a[data-medialit-menu]{padding-left:25px;color:#a5f3fc}.medialit-page{--media-blue:#2563eb;--media-navy:#020b24;--media-gold:#fbbf24;overflow:hidden;background:radial-gradient(circle at 8% 18%,rgba(37,99,235,.16),transparent 25%),linear-gradient(135deg,#020617,#061a38 56%,#081b33);color:#f8fafc}.medialit-hero{position:relative;isolation:isolate;display:grid;min-height:670px;place-items:center;overflow:hidden;padding:100px max(24px,6vw);background:linear-gradient(90deg,rgba(2,6,23,.94),rgba(2,18,48,.74) 55%,rgba(2,6,23,.45)),var(--medialit-banner,linear-gradient(135deg,#071a45,#063b66 52%,#0b2760));background-position:center;background-size:cover}.medialit-hero:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 78% 44%,rgba(59,130,246,.35),transparent 26%),linear-gradient(115deg,transparent 34%,rgba(255,255,255,.06) 50%,transparent 64%);animation:medialitScan 8s ease-in-out infinite}.medialit-hero-grid{position:absolute;z-index:-1;inset:0;opacity:.36;background-image:linear-gradient(rgba(96,165,250,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.08) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 88%)}.medialit-hero-copy{width:min(1180px,100%);position:relative;z-index:2}.medialit-hero-copy h1{max-width:850px;margin:12px 0 5px;color:#fff;font:900 clamp(56px,9vw,118px)/.88 Poppins,sans-serif;letter-spacing:-.07em;text-shadow:0 16px 45px rgba(0,0,0,.55),0 0 38px rgba(37,99,235,.32)}.medialit-hero-copy h1 span{display:block;color:#fbbf24;text-shadow:0 0 30px rgba(251,191,36,.28)}.medialit-hero-copy h2{margin:22px 0 13px;color:#a5f3fc;font:700 clamp(14px,2vw,22px) Poppins,sans-serif;letter-spacing:.12em}.medialit-hero-copy>p:not(.eyebrow){color:#dbeafe;font-size:clamp(12px,1.5vw,17px);font-weight:700;letter-spacing:.12em}.medialit-hero-copy>p i{color:#fbbf24;font-style:normal}.medialit-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.medialit-hero-actions a,.medialit-onair a{padding:13px 18px;border:1px solid rgba(147,197,253,.38);border-radius:14px;background:linear-gradient(130deg,rgba(37,99,235,.8),rgba(8,145,178,.75));color:#fff;text-decoration:none;font-size:11px;font-weight:800;box-shadow:0 12px 30px rgba(2,6,23,.32);transition:.25s ease}.medialit-hero-actions a:hover{transform:translateY(-4px);border-color:#fbbf24;box-shadow:0 15px 36px rgba(37,99,235,.38)}.medialit-studio-art{position:absolute;right:8%;top:50%;display:grid;width:330px;height:330px;place-items:center;transform:translateY(-50%);border:1px solid rgba(147,197,253,.18);border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.22),transparent 67%);box-shadow:0 0 0 38px rgba(37,99,235,.025),0 0 0 76px rgba(251,191,36,.018)}.medialit-studio-art span{font-size:110px;filter:drop-shadow(0 20px 25px rgba(0,0,0,.48));animation:medialitFloat 3.6s ease-in-out infinite}.medialit-studio-art i{position:absolute;right:15px;bottom:55px;font-size:58px;font-style:normal}.medialit-studio-art b{position:absolute;left:-10px;top:45px;padding:8px 13px;border-radius:9px;background:#dc2626;color:#fff;font:800 10px Poppins,sans-serif;letter-spacing:.13em;box-shadow:0 0 25px rgba(239,68,68,.5)}.medialit-onair{position:relative;z-index:4;display:flex;align-items:center;gap:12px;width:min(1180px,calc(100% - 36px));margin:-30px auto 0;padding:19px 22px;border:1px solid rgba(248,113,113,.33);border-radius:20px;background:linear-gradient(110deg,rgba(69,10,10,.92),rgba(15,23,42,.95) 62%,rgba(30,64,175,.75));box-shadow:0 22px 48px rgba(0,0,0,.38);backdrop-filter:blur(18px)}.medialit-onair>span{color:#ef4444;font-size:21px;text-shadow:0 0 15px #ef4444;animation:medialitPulse 1.2s infinite}.medialit-onair b{color:#fecaca;font:800 11px Poppins,sans-serif;letter-spacing:.08em}.medialit-onair p{flex:1;margin:0;color:#e2e8f0;font-size:12px}.medialit-onair a{padding:9px 13px}.medialit-nav{position:sticky;z-index:35;top:0;display:flex;justify-content:center;gap:7px;overflow:auto;padding:12px 18px;border-bottom:1px solid rgba(96,165,250,.2);background:rgba(2,12,37,.86);backdrop-filter:blur(18px);scrollbar-width:none}.medialit-nav a{flex:0 0 auto;padding:9px 12px;border-radius:999px;color:#bfdbfe;text-decoration:none;font-size:9px;font-weight:800}.medialit-nav a:hover{background:rgba(37,99,235,.26);color:#fbbf24}.medialit-main{width:min(1240px,100%);margin:auto;padding:30px clamp(18px,4vw,46px) 95px}.medialit-section{padding:75px 0;scroll-margin-top:75px}.medialit-section+.medialit-section{border-top:1px solid rgba(96,165,250,.1)}.medialit-heading{margin-bottom:25px}.medialit-heading h2,.medialit-about h2{margin:7px 0 0;color:#fff;font:800 clamp(29px,4vw,49px)/1.08 Poppins,sans-serif;letter-spacing:-.04em}.medialit-about{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:45px}.medialit-about>div:first-child>p:not(.eyebrow){color:#cbd5e1;font-size:14px;line-height:1.9;text-align:justify;white-space:pre-line}.medialit-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;grid-column:1/-1}.medialit-stat-grid article{padding:19px 12px;border:1px solid rgba(96,165,250,.18);border-radius:18px;background:linear-gradient(145deg,rgba(30,64,175,.25),rgba(15,23,42,.65));text-align:center;box-shadow:0 16px 32px rgba(0,0,0,.18)}.medialit-stat-grid article>span{font-size:22px}.medialit-stat-grid strong{display:block;margin:8px 0 5px;color:#fbbf24;font:800 31px Poppins,sans-serif}.medialit-stat-grid small{color:#bfdbfe;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.medialit-objectives{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.medialit-objectives article,.medialit-category-grid article{padding:22px;border:1px solid rgba(96,165,250,.18);border-radius:20px;background:radial-gradient(circle at 100% 0,rgba(251,191,36,.09),transparent 34%),linear-gradient(145deg,rgba(10,35,80,.78),rgba(3,13,37,.78));transition:.28s ease}.medialit-objectives article:hover,.medialit-category-grid article:hover{transform:translateY(-5px);border-color:rgba(251,191,36,.5)}.medialit-objectives span{font-size:31px}.medialit-objectives p{margin:13px 0 0;color:#e2e8f0;font-size:12px;line-height:1.65}.medialit-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.medialit-category-grid article{display:grid;grid-template-columns:45px 1fr;align-items:center;gap:3px 12px;padding:17px}.medialit-category-grid article>span{grid-row:1/3;display:grid;width:45px;height:45px;place-items:center;border-radius:14px;background:rgba(37,99,235,.2);font-size:22px}.medialit-category-grid b{color:#f8fafc;font-size:12px}.medialit-category-grid small{color:#93c5fd;font-size:8px}.medialit-video-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.65fr);gap:18px}.medialit-featured-video,.medialit-content-card,.medialit-crew-grid>article,.medialit-timeline>article,.medialit-achievement-grid>article{overflow:hidden;border:1px solid rgba(96,165,250,.2);border-radius:23px;background:linear-gradient(145deg,rgba(9,31,71,.85),rgba(2,10,31,.92));box-shadow:0 22px 48px rgba(0,0,0,.25)}.medialit-player{display:grid;aspect-ratio:16/9;place-items:center;background:#000}.medialit-player iframe,.medialit-player img{width:100%;height:100%;border:0;object-fit:contain}.medialit-video-placeholder{text-align:center;color:#94a3b8}.medialit-video-placeholder span{font-size:54px;color:#60a5fa}.medialit-featured-video>div:last-child{padding:20px}.medialit-featured-video span,.medialit-content-card small,.medialit-crew-grid small,.medialit-achievement-grid small{color:#fbbf24;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.medialit-featured-video h3,.medialit-content-card h3,.medialit-crew-grid h3,.medialit-timeline h3,.medialit-achievement-grid h3{margin:7px 0;color:#fff;font:700 19px/1.35 Poppins,sans-serif}.medialit-featured-video p,.medialit-content-card p,.medialit-crew-grid p,.medialit-timeline p,.medialit-achievement-grid p{margin:0;color:#cbd5e1;font-size:11px;line-height:1.75;text-align:justify;white-space:pre-line}.medialit-video-list{display:grid;align-content:start;gap:10px;max-height:610px;overflow:auto}.medialit-video-list>a{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px;border:1px solid rgba(96,165,250,.15);border-radius:15px;background:rgba(15,23,42,.7);color:#fff;text-decoration:none}.medialit-video-list>a>img,.medialit-video-list>a>span{width:92px;height:67px;object-fit:cover;border-radius:10px;background:#071733}.medialit-video-list>a>span{display:grid;place-items:center;color:#60a5fa;font-size:25px}.medialit-video-list small,.medialit-video-list time{display:block;color:#93c5fd;font-size:7px}.medialit-video-list b{display:block;margin:4px 0;font-size:11px}.medialit-card-grid,.medialit-crew-grid,.medialit-achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.medialit-image{display:block;width:100%;padding:0;border:0;background:#051127;cursor:zoom-in}.medialit-image img{display:block;width:100%;height:auto;max-height:430px;object-fit:contain}.medialit-image.portrait{aspect-ratio:3/4}.medialit-image.portrait img{height:100%}.medialit-content-card>div:last-child,.medialit-crew-grid>article>div:last-child,.medialit-achievement-grid>article>div:last-child{padding:19px}.medialit-content-card a{display:inline-block;margin-top:15px;color:#93c5fd;font-size:10px;font-weight:800}.medialit-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.medialit-gallery article{position:relative;overflow:hidden;min-height:240px;border-radius:19px;background:#071733}.medialit-gallery .medialit-image,.medialit-gallery img{height:100%}.medialit-gallery img{object-fit:cover}.medialit-gallery article>div{position:absolute;inset:auto 0 0;padding:35px 15px 15px;background:linear-gradient(transparent,rgba(2,6,23,.95))}.medialit-gallery span{color:#fbbf24;font-size:8px;font-weight:800}.medialit-gallery h3{margin:4px 0 0;font-size:13px}.medialit-timeline{position:relative;display:grid;gap:15px;padding-left:30px}.medialit-timeline:before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:linear-gradient(#fbbf24,#2563eb)}.medialit-timeline>article{position:relative;display:grid;grid-template-columns:minmax(170px,260px) 1fr}.medialit-timeline>article:before{content:"";position:absolute;left:-30px;top:27px;width:14px;height:14px;border:3px solid #020617;border-radius:50%;background:#fbbf24;box-shadow:0 0 18px rgba(251,191,36,.45)}.medialit-timeline .medialit-image img{height:100%;object-fit:cover}.medialit-timeline>article>div:last-child{padding:22px}.medialit-timeline time{color:#93c5fd;font-size:9px;font-weight:800}.medialit-timeline span{float:right;padding:5px 8px;border-radius:999px;background:rgba(37,99,235,.2);color:#bfdbfe;font-size:8px}.medialit-achievement-grid>article{position:relative}.medialit-achievement-grid>article>span{position:absolute;z-index:2;right:13px;top:13px;font-size:35px;filter:drop-shadow(0 7px 10px rgba(0,0,0,.5))}.medialit-empty{grid-column:1/-1;padding:36px;border:1px dashed rgba(96,165,250,.3);border-radius:20px;text-align:center;color:#94a3b8}.medialit-empty span{display:block;color:#60a5fa;font-size:38px}.medialit-empty b{display:block;margin:7px;color:#e2e8f0}.medialit-empty p{margin:0;font-size:11px}.medialit-lightbox{width:min(1100px,94vw);max-height:92vh;padding:0;border:1px solid rgba(96,165,250,.4);border-radius:20px;background:#020617}.medialit-lightbox::backdrop{background:rgba(0,0,0,.9);backdrop-filter:blur(9px)}.medialit-lightbox img{display:block;width:100%;max-height:90vh;object-fit:contain}.medialit-lightbox button{position:absolute;z-index:2;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(2,6,23,.8);color:#fff;font-size:25px}.medialit-admin-summary{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.medialit-admin-summary span{padding:10px 13px;border-radius:12px;background:rgba(37,99,235,.14);color:#cbd5e1}.medialit-admin-summary b{color:#fbbf24}.medialit-admin-sections{display:grid;gap:17px}.medialit-admin-sections>section{padding:18px;border:1px solid rgba(96,165,250,.18);border-radius:20px;background:rgba(15,23,42,.4)}.medialit-admin-sections>section>header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}.medialit-admin-sections>section>header>div{display:flex;align-items:center;gap:12px}.medialit-admin-sections>section>header>div>span{font-size:25px}.medialit-admin-sections h3,.medialit-admin-sections p{margin:0}.medialit-admin-sections p{color:#94a3b8;font-size:10px}.medialit-admin-sections .mini-pic img{width:100%;height:100%;border-radius:inherit;object-fit:cover}@keyframes medialitFloat{50%{transform:translateY(-10px) rotate(-3deg)}}@keyframes medialitPulse{50%{opacity:.35}}@keyframes medialitScan{0%,45%{transform:translateX(-15%)}75%,100%{transform:translateX(15%)}}
.light-mode .medialit-page{background:linear-gradient(135deg,#eaf2ff,#f8fafc);color:#0f172a}.light-mode .medialit-section+.medialit-section{border-color:rgba(37,99,235,.12)}.light-mode .medialit-heading h2,.light-mode .medialit-about h2,.light-mode .medialit-content-card h3,.light-mode .medialit-crew-grid h3,.light-mode .medialit-timeline h3,.light-mode .medialit-achievement-grid h3{color:#0f172a}.light-mode .medialit-objectives article,.light-mode .medialit-category-grid article,.light-mode .medialit-content-card,.light-mode .medialit-crew-grid>article,.light-mode .medialit-timeline>article,.light-mode .medialit-achievement-grid>article{background:#fff}.light-mode .medialit-objectives p,.light-mode .medialit-featured-video p,.light-mode .medialit-content-card p,.light-mode .medialit-crew-grid p,.light-mode .medialit-timeline p,.light-mode .medialit-achievement-grid p{color:#475569}
@media(max-width:960px){.medialit-studio-art{opacity:.32;right:-70px}.medialit-video-layout{grid-template-columns:1fr}.medialit-video-list{grid-template-columns:repeat(2,1fr);max-height:none}.medialit-card-grid,.medialit-crew-grid,.medialit-achievement-grid{grid-template-columns:repeat(2,1fr)}.medialit-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.medialit-hero{min-height:590px;padding:75px 20px;text-align:center}.medialit-hero-copy h1{font-size:57px}.medialit-hero-copy h2{font-size:12px}.medialit-hero-actions{justify-content:center}.medialit-studio-art{display:none}.medialit-onair{display:grid;grid-template-columns:auto 1fr;margin-top:-22px;padding:15px}.medialit-onair p,.medialit-onair a{grid-column:1/-1}.medialit-nav{justify-content:flex-start}.medialit-main{padding-inline:16px}.medialit-section{padding:52px 0}.medialit-about{grid-template-columns:1fr;gap:20px}.medialit-stat-grid{grid-template-columns:repeat(2,1fr)}.medialit-stat-grid article:last-child{grid-column:1/-1}.medialit-objectives,.medialit-category-grid,.medialit-card-grid,.medialit-crew-grid,.medialit-achievement-grid{grid-template-columns:1fr}.medialit-video-list{grid-template-columns:1fr}.medialit-gallery{grid-template-columns:1fr 1fr}.medialit-gallery article{min-height:190px}.medialit-timeline{padding-left:21px}.medialit-timeline>article{grid-template-columns:1fr}.medialit-timeline>article:before{left:-21px}.medialit-timeline .medialit-image img{height:auto}.medialit-admin-sections>section{padding:13px}.medialit-admin-sections>section>header{align-items:flex-start}.medialit-admin-sections>section>header .primary{padding:10px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.medialit-hero:before,.medialit-studio-art span,.medialit-onair>span{animation:none}}

/* Elakkan navigasi studio menindih header utama. */
.medialit-nav{top:82px;z-index:4}.medialit-section{scroll-margin-top:145px}
@media(max-width:600px){.medialit-nav{top:67px}.medialit-section{scroll-margin-top:125px}}

/* Sorotan MEDIALIT JUNIOR pada halaman utama. */
.medialit-home-section{position:relative;padding-top:35px!important;padding-bottom:70px!important}.medialit-home-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);align-items:center;min-height:430px;overflow:hidden;border:1px solid rgba(96,165,250,.34);border-radius:30px;background:radial-gradient(circle at 15% 50%,rgba(37,99,235,.35),transparent 31%),radial-gradient(circle at 91% 8%,rgba(251,191,36,.13),transparent 25%),linear-gradient(125deg,#020617,#09265b 57%,#061a38);box-shadow:0 35px 75px rgba(1,8,24,.48),0 0 38px rgba(37,99,235,.13)}.medialit-home-card:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.055) 48%,transparent 67%);transform:translateX(-100%);animation:medialitHomeScan 7s ease-in-out infinite}.medialit-home-grid{position:absolute;z-index:-2;inset:0;opacity:.38;background-image:linear-gradient(rgba(96,165,250,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.07) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(90deg,#000,transparent 78%)}.medialit-home-visual{position:relative;display:grid;min-height:390px;place-items:center}.medialit-home-visual:before,.medialit-home-visual:after{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(147,197,253,.17);border-radius:50%;box-shadow:0 0 0 30px rgba(37,99,235,.035),0 0 0 60px rgba(251,191,36,.018)}.medialit-home-visual:after{width:170px;height:170px;border-color:rgba(251,191,36,.17);animation:medialitHomeOrbit 13s linear infinite}.medialit-home-camera{position:relative;z-index:2;display:grid;width:150px;height:150px;place-items:center;border:1px solid rgba(147,197,253,.24);border-radius:41px;background:linear-gradient(145deg,rgba(37,99,235,.48),rgba(2,6,23,.74));box-shadow:0 25px 45px rgba(0,0,0,.42),0 0 36px rgba(59,130,246,.25);transform:rotate(-4deg)}.medialit-home-camera span{font-size:76px;filter:drop-shadow(0 15px 15px rgba(0,0,0,.44))}.medialit-home-camera i{position:absolute;right:-11px;top:-11px;width:24px;height:24px;border:5px solid #020617;border-radius:50%;background:#ef4444;box-shadow:0 0 18px #ef4444;animation:medialitPulse 1.2s infinite}.medialit-home-mic{position:absolute;z-index:3;right:17%;bottom:19%;font-size:55px;filter:drop-shadow(0 13px 13px rgba(0,0,0,.5));animation:medialitFloat 3.4s ease-in-out infinite}.medialit-home-visual>b{position:absolute;z-index:4;left:15%;top:18%;padding:8px 13px;border:1px solid rgba(248,113,113,.38);border-radius:999px;background:rgba(127,29,29,.72);color:#fecaca;font:800 9px Poppins,sans-serif;letter-spacing:.14em;box-shadow:0 0 22px rgba(239,68,68,.25)}.medialit-home-visual>b i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 9px #ef4444}.medialit-home-copy{padding:54px 55px 54px 15px}.medialit-home-copy h2{margin:8px 0 2px;color:#fff;font:900 clamp(42px,6vw,78px)/.95 Poppins,sans-serif;letter-spacing:-.055em;text-shadow:0 12px 32px rgba(0,0,0,.42)}.medialit-home-copy h2 span{color:#fbbf24}.medialit-home-copy h3{margin:13px 0;color:#a5f3fc;font:700 clamp(11px,1.4vw,15px) Poppins,sans-serif;letter-spacing:.08em}.medialit-home-copy>p:not(.eyebrow){max-width:690px;margin:0;color:#d5e4f5;font-size:13px;line-height:1.8;text-align:justify}.medialit-home-features{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.medialit-home-features span{padding:8px 11px;border:1px solid rgba(147,197,253,.18);border-radius:11px;background:rgba(15,23,42,.48);color:#cbd5e1;font-size:9px}.medialit-home-features b{color:#fbbf24}.medialit-home-copy>a{display:inline-flex;align-items:center;gap:11px;padding:13px 18px;border:1px solid rgba(147,197,253,.45);border-radius:14px;background:linear-gradient(115deg,#2563eb,#0891b2);color:#fff;text-decoration:none;font-size:11px;font-weight:800;box-shadow:0 13px 30px rgba(2,6,23,.35),0 0 22px rgba(37,99,235,.2);transition:.25s ease}.medialit-home-copy>a:hover{transform:translateY(-4px);border-color:#fbbf24;box-shadow:0 17px 38px rgba(2,6,23,.44),0 0 28px rgba(37,99,235,.32)}.medialit-home-copy>a b{color:#fbbf24;font-size:17px}@keyframes medialitHomeScan{0%,48%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}@keyframes medialitHomeOrbit{to{transform:rotate(360deg)}}.light-mode .medialit-home-card{background:radial-gradient(circle at 15% 50%,rgba(37,99,235,.2),transparent 31%),linear-gradient(125deg,#0f2d62,#164e63)}
@media(max-width:850px){.medialit-home-card{grid-template-columns:250px 1fr}.medialit-home-copy{padding:42px 35px 42px 5px}.medialit-home-visual{min-height:350px}.medialit-home-camera{width:125px;height:125px}.medialit-home-camera span{font-size:63px}}
@media(max-width:620px){.medialit-home-section{padding-left:16px!important;padding-right:16px!important}.medialit-home-card{display:block;text-align:center;border-radius:24px}.medialit-home-visual{min-height:250px}.medialit-home-visual:before{width:205px;height:205px}.medialit-home-visual:after{width:125px;height:125px}.medialit-home-camera{width:108px;height:108px;border-radius:31px}.medialit-home-camera span{font-size:55px}.medialit-home-mic{right:20%;bottom:13%;font-size:43px}.medialit-home-visual>b{left:9%;top:18%}.medialit-home-copy{padding:5px 20px 32px}.medialit-home-copy h2{font-size:43px}.medialit-home-copy h2 span{display:block}.medialit-home-copy>p:not(.eyebrow){font-size:11px}.medialit-home-features{justify-content:center}.medialit-home-copy>a{justify-content:center;width:100%}}

/* MEDIALIT JUNIOR — kemasan teknologi premium untuk isi kandungan sahaja. */
.medialit-main{position:relative;isolation:isolate}.medialit-main:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 8% 12%,rgba(37,99,235,.16),transparent 20%),radial-gradient(circle at 94% 38%,rgba(6,182,212,.12),transparent 21%),radial-gradient(circle at 13% 77%,rgba(251,191,36,.07),transparent 18%)}.medialit-main:after{content:"";position:absolute;z-index:-1;inset:0;opacity:.18;background-image:linear-gradient(rgba(96,165,250,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.055) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);pointer-events:none}.medialit-section{position:relative}.medialit-section:not(.medialit-about){margin:24px 0;padding:48px clamp(18px,3vw,38px);overflow:hidden;border:1px solid rgba(96,165,250,.16)!important;border-radius:30px;background:radial-gradient(circle at 100% 0,rgba(37,99,235,.12),transparent 27%),linear-gradient(145deg,rgba(7,26,62,.62),rgba(2,10,31,.5));box-shadow:0 25px 58px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(8px)}.medialit-section:not(.medialit-about):before{content:"";position:absolute;right:-70px;top:-80px;width:230px;height:230px;border:1px solid rgba(96,165,250,.1);border-radius:50%;box-shadow:0 0 0 30px rgba(37,99,235,.018),0 0 0 60px rgba(6,182,212,.012);pointer-events:none}.medialit-heading{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:25px;padding-bottom:21px;margin-bottom:28px;border-bottom:1px solid rgba(96,165,250,.15)}.medialit-heading:after{content:"";position:absolute;left:0;bottom:-1px;width:92px;height:3px;border-radius:99px;background:linear-gradient(90deg,#fbbf24,#06b6d4,#2563eb);box-shadow:0 0 16px rgba(6,182,212,.45)}.medialit-heading .eyebrow{margin:0 0 8px}.medialit-heading h2{max-width:850px;text-wrap:balance}.medialit-about{position:relative;margin-top:20px;padding:44px clamp(18px,3vw,38px);border:1px solid rgba(96,165,250,.2);border-radius:30px;background:linear-gradient(135deg,rgba(15,42,88,.75),rgba(3,15,39,.7));box-shadow:0 26px 58px rgba(0,0,0,.25)}.medialit-about:before{content:"MEDIA LAB";position:absolute;right:28px;top:20px;color:rgba(147,197,253,.08);font:900 clamp(38px,7vw,85px)/1 Poppins,sans-serif;letter-spacing:-.06em;pointer-events:none}.medialit-stat-grid article{position:relative;isolation:isolate;overflow:hidden;min-height:132px;display:grid;align-content:center}.medialit-stat-grid article:before{content:"";position:absolute;z-index:-1;inset:auto -25% -65% 25%;height:110px;border-radius:50%;background:rgba(37,99,235,.2);filter:blur(23px)}.medialit-stat-grid article:nth-child(2n):before{background:rgba(6,182,212,.2)}.medialit-stat-grid article:nth-child(5):before{background:rgba(251,191,36,.16)}.medialit-stat-grid article:hover{transform:translateY(-6px);border-color:rgba(251,191,36,.45);box-shadow:0 20px 38px rgba(0,0,0,.28),0 0 22px rgba(37,99,235,.16)}.medialit-stat-grid article>span{filter:drop-shadow(0 8px 9px rgba(0,0,0,.4))}.medialit-objectives article{position:relative;min-height:160px;padding:27px;overflow:hidden}.medialit-objectives article:after{content:counter(mediaObjective,decimal-leading-zero);position:absolute;right:15px;bottom:-10px;color:rgba(147,197,253,.08);font:900 66px Poppins,sans-serif}.medialit-objectives{counter-reset:mediaObjective}.medialit-objectives article{counter-increment:mediaObjective}.medialit-objectives article span{display:grid;width:58px;height:58px;place-items:center;border:1px solid rgba(147,197,253,.2);border-radius:18px;background:linear-gradient(145deg,rgba(37,99,235,.24),rgba(6,182,212,.12));box-shadow:0 12px 25px rgba(0,0,0,.2)}.medialit-category-grid article{position:relative;min-height:92px;background:linear-gradient(135deg,rgba(10,45,96,.78),rgba(3,15,39,.82))}.medialit-category-grid article:after{content:"";position:absolute;right:14px;top:14px;width:6px;height:6px;border-radius:50%;background:#22d3ee;box-shadow:0 0 13px #22d3ee}.medialit-category-grid article:nth-child(3n):after{background:#fbbf24;box-shadow:0 0 13px #fbbf24}.medialit-category-grid article>span{border-color:rgba(147,197,253,.27);background:linear-gradient(145deg,rgba(37,99,235,.35),rgba(6,182,212,.13));box-shadow:0 9px 19px rgba(0,0,0,.2),0 0 16px rgba(37,99,235,.12)}.medialit-featured-video{border-color:rgba(96,165,250,.32);box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 30px rgba(37,99,235,.11)}.medialit-player{position:relative}.medialit-player:after{content:"MEDIALIT JUNIOR • DIGITAL BROADCAST";position:absolute;left:16px;top:15px;padding:6px 9px;border:1px solid rgba(147,197,253,.23);border-radius:8px;background:rgba(2,6,23,.68);color:#bfdbfe;font:800 7px Poppins,sans-serif;letter-spacing:.12em;pointer-events:none}.medialit-video-list>a{position:relative;transition:transform .24s ease,border-color .24s ease,background .24s ease}.medialit-video-list>a:hover{transform:translateX(-5px);border-color:rgba(251,191,36,.4);background:rgba(30,64,175,.23)}.medialit-content-card,.medialit-crew-grid>article,.medialit-achievement-grid>article{position:relative;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}.medialit-content-card:hover,.medialit-crew-grid>article:hover,.medialit-achievement-grid>article:hover{transform:translateY(-7px);border-color:rgba(96,165,250,.48);box-shadow:0 28px 55px rgba(0,0,0,.34),0 0 25px rgba(37,99,235,.14)}.medialit-content-card:after,.medialit-crew-grid>article:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#2563eb,#06b6d4,#fbbf24);opacity:.7}.medialit-content-card>div:last-child{min-height:190px;display:flex;flex-direction:column}.medialit-content-card>div:last-child a{margin-top:auto;align-self:flex-start}.medialit-gallery{grid-auto-flow:dense}.medialit-gallery article{min-height:265px;border:1px solid rgba(96,165,250,.18);box-shadow:0 18px 36px rgba(0,0,0,.22);transition:transform .28s ease,border-color .28s ease}.medialit-gallery article:nth-child(6n+1){grid-column:span 2}.medialit-gallery article:hover{z-index:2;transform:translateY(-5px) scale(1.015);border-color:rgba(251,191,36,.5)}.medialit-gallery article:hover img{transform:scale(1.055)}.medialit-gallery img{transition:transform .45s ease}.medialit-crew-grid>article{text-align:center}.medialit-crew-grid .medialit-image.portrait{width:150px;height:150px;margin:24px auto 0;border:4px solid rgba(147,197,253,.17);border-radius:50%;background:linear-gradient(145deg,#0f2d62,#071426);box-shadow:0 18px 35px rgba(0,0,0,.35),0 0 24px rgba(37,99,235,.18)}.medialit-crew-grid .medialit-image.portrait img{border-radius:50%;object-fit:cover}.medialit-timeline>article{border-color:rgba(96,165,250,.22);transition:transform .28s ease,border-color .28s ease}.medialit-timeline>article:hover{transform:translateX(7px);border-color:rgba(251,191,36,.42)}.medialit-timeline>article:before{z-index:3}.medialit-achievement-grid>article{background:radial-gradient(circle at 90% 10%,rgba(251,191,36,.15),transparent 30%),linear-gradient(145deg,rgba(51,35,8,.28),rgba(4,16,42,.9));border-color:rgba(251,191,36,.24)}.medialit-achievement-grid>article:hover{border-color:rgba(251,191,36,.58);box-shadow:0 28px 55px rgba(0,0,0,.34),0 0 27px rgba(251,191,36,.12)}.medialit-achievement-grid>article>span{animation:medialitTrophy 2.8s ease-in-out infinite}.medialit-empty{background:linear-gradient(145deg,rgba(15,42,88,.38),rgba(2,10,31,.5));box-shadow:inset 0 1px rgba(255,255,255,.035)}@keyframes medialitTrophy{50%{transform:translateY(-5px) rotate(4deg);filter:drop-shadow(0 10px 12px rgba(251,191,36,.4))}}
.light-mode .medialit-section:not(.medialit-about),.light-mode .medialit-about{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(239,246,255,.92));box-shadow:0 20px 45px rgba(30,64,175,.1)}.light-mode .medialit-section:not(.medialit-about){border-color:rgba(37,99,235,.14)!important}
@media(max-width:800px){.medialit-section:not(.medialit-about),.medialit-about{border-radius:24px;padding:35px 22px}.medialit-heading{display:block}.medialit-gallery article:nth-child(6n+1){grid-column:span 1}}
@media(max-width:600px){.medialit-main{padding-left:12px;padding-right:12px}.medialit-section:not(.medialit-about),.medialit-about{margin:15px 0;padding:29px 15px;border-radius:21px}.medialit-heading h2{font-size:28px}.medialit-objectives article{min-height:135px}.medialit-category-grid article{min-height:82px}.medialit-content-card>div:last-child{min-height:0}.medialit-gallery{grid-template-columns:1fr}.medialit-gallery article{min-height:245px}.medialit-crew-grid .medialit-image.portrait{width:132px;height:132px}.medialit-player:after{left:8px;top:8px;font-size:6px}}
@media(prefers-reduced-motion:reduce){.medialit-achievement-grid>article>span,.medialit-home-card:before{animation:none}}

/* Logo rasmi MEDIALIT JUNIOR — tambahan visual sahaja. */
.medialit-brand-logo{display:block;width:clamp(150px,20vw,270px);height:auto;margin:0 0 20px;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(0,0,0,.48)) drop-shadow(0 0 18px rgba(6,182,212,.45));transform-origin:center;animation:medialitLogoFloat 4s ease-in-out infinite;transition:transform .3s ease,filter .3s ease}
.medialit-brand-logo:hover{transform:translateY(-4px) scale(1.035);filter:drop-shadow(0 20px 22px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(59,130,246,.62))}
@keyframes medialitLogoFloat{50%{transform:translateY(-6px)}}
@media(max-width:680px){.medialit-brand-logo{width:min(210px,68vw);margin:0 auto 20px}}

/* Halaman utama: paparkan emoji kamera tanpa kotak latar. */
.medialit-home-section .medialit-home-camera{border:0;border-radius:0;background:transparent;box-shadow:none}
@media(prefers-reduced-motion:reduce){.medialit-brand-logo{animation:none}}

/* MEDIALIT JUNIOR: paparan hero telefon statik dan tiga tindakan dalam satu baris. */
@media(max-width:680px){
  .medialit-hero:before{animation:none;transform:none}
  .medialit-hero{background-attachment:scroll}
  .medialit-hero-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-top:25px}
  .medialit-hero-actions a{display:flex;align-items:center;justify-content:center;min-width:0;padding:11px 3px;border-radius:10px;font-size:7.5px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
  .medialit-about:before{display:none}
}

/* Paparan loading 3D premium — logo kekal telus tanpa kotak latar. */
.site-loader{perspective:1100px;background:radial-gradient(circle at 12% 14%,rgba(6,182,212,.46),transparent 34%),radial-gradient(circle at 86% 78%,rgba(16,185,129,.42),transparent 38%),linear-gradient(135deg,#0F172A 0%,#0B3550 48%,#064E3B 100%)!important}
.site-loader::before{transform:none;transform-origin:center;opacity:.82;animation:loading-tile-screen 7s linear infinite!important}
.site-loader::after{content:none!important;display:none!important}
.site-loader-orbits{display:none!important}
.site-loader-orbits i{position:absolute;inset:12%;border:1px solid rgba(103,232,249,.2);border-radius:50%;box-shadow:0 0 28px rgba(34,211,238,.1),inset 0 0 28px rgba(16,185,129,.08);animation:loader-orbit 5.8s linear infinite}
.site-loader-orbits i:nth-child(2){inset:21%;border-color:rgba(52,211,153,.22);animation-duration:4.8s;animation-direction:reverse}
.site-loader-orbits i:nth-child(3){inset:31%;border-color:rgba(96,165,250,.24);animation-duration:3.8s}
.site-loader-card{width:min(610px,calc(100% - 32px));padding:34px 34px 30px!important;border:1px solid rgba(165,243,252,.22)!important;border-radius:32px!important;background:linear-gradient(145deg,rgba(15,23,42,.48),rgba(6,78,59,.2))!important;box-shadow:0 38px 80px rgba(2,6,23,.58),inset 0 1px 0 rgba(255,255,255,.16),0 0 55px rgba(6,182,212,.14)!important;backdrop-filter:blur(14px) saturate(135%)!important;transform-style:preserve-3d;animation:loader-card-3d 2.4s ease-in-out infinite alternate}
.site-loader-logo{height:168px!important;margin:0 auto 26px!important;transform-style:preserve-3d;animation:loader-logo-3d 1.8s ease-in-out infinite alternate!important}
.site-loader-logo img,.light-mode .site-loader-logo img{filter:drop-shadow(0 13px 12px rgba(2,6,23,.42)) drop-shadow(0 0 16px rgba(56,245,209,.28))!important;transform:translateZ(70px);animation:loader-logo-glow 1.7s ease-in-out infinite alternate}
.site-loader .site-loader-logo{position:relative;isolation:isolate;overflow:visible!important}
.site-loader .site-loader-logo::before,.light-mode .site-loader .site-loader-logo::before{content:none!important;display:none!important}
.site-loader-card>p{color:#a5f3fc;text-shadow:0 0 16px rgba(34,211,238,.55)}.site-loader-card h1{transform:translateZ(28px);text-shadow:0 4px 3px rgba(2,6,23,.7),0 0 25px rgba(52,211,153,.42)}
.site-loader-progress{height:9px;padding:2px;border-color:rgba(165,243,252,.3);background:rgba(2,6,23,.6);box-shadow:inset 0 2px 8px rgba(2,6,23,.75),0 8px 25px rgba(6,182,212,.14);transform:translateZ(22px)}
.site-loader-progress span{height:100%;background:linear-gradient(90deg,#10b981,#22d3ee,#60a5fa,#22d3ee);background-size:220% 100%;box-shadow:0 0 18px rgba(34,211,238,.85);animation:loader-progress 2s linear forwards,loader-progress-glow 1s linear infinite!important}.site-loader-card small{display:block;transform:translateZ(18px);color:#d1fae5}
@keyframes loading-grid-3d{to{background-position:44px 44px,44px 44px,88px 88px}}@keyframes loader-light-sweep{from{opacity:.4;transform:translateX(-4%)}to{opacity:.9;transform:translateX(4%)}}@keyframes loader-card-3d{from{transform:rotateX(4deg) rotateY(-1.2deg) translateZ(38px) translateY(2px)}to{transform:rotateX(2deg) rotateY(1.2deg) translateZ(48px) translateY(-5px)}}@keyframes loader-logo-3d{from{transform:translateY(2px) rotateY(-4deg) scale(.99)}to{transform:translateY(-8px) rotateY(4deg) scale(1.035)}}@keyframes loader-orbit{to{transform:rotateX(68deg) rotateZ(360deg)}}@keyframes loader-progress-glow{to{background-position:220% 0}}
@keyframes loader-logo-glow{from{filter:drop-shadow(0 13px 12px rgba(2,6,23,.42)) drop-shadow(0 0 13px rgba(56,245,209,.22))}to{filter:drop-shadow(0 13px 12px rgba(2,6,23,.42)) drop-shadow(0 0 18px rgba(56,245,209,.34))}}
@media(max-width:520px){.site-loader-card{padding:27px 18px 24px!important;border-radius:26px!important;animation:loader-card-mobile 2.2s ease-in-out infinite alternate}.site-loader-logo{height:128px!important;margin-bottom:19px!important}.site-loader-card h1{font-size:20px;line-height:1.3}.site-loader-orbits{width:108vw;height:108vw}.site-loader-progress{margin-top:22px}}@keyframes loader-card-mobile{to{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.site-loader-card,.site-loader-logo,.site-loader-logo::before,.site-loader-orbits i,.site-loader::after{animation:none!important}}

/* Tarikh dan masa mula/tamat pada kad countdown. */
.countdown-event-dates{display:grid;gap:8px;min-width:0}.countdown-event-dates .countdown-event-date{justify-self:stretch;min-width:0;padding:10px 12px}.countdown-event-dates .countdown-event-date span{font-size:14px}.countdown-event-dates .countdown-event-date b{font-size:11px;line-height:1.35;white-space:normal}.program-countdown.countdown-card .countdown-units>em{grid-column:1/-1;margin-bottom:1px;color:#67e8f9;font:700 9px 'Inter',sans-serif;font-style:normal;letter-spacing:.12em;text-align:center;text-transform:uppercase}
.program-countdown.countdown-card .countdown-live{color:#6ee7b7!important;border-color:rgba(110,231,183,.42);background:rgba(16,185,129,.13);box-shadow:0 0 22px rgba(16,185,129,.16);animation:countdown-live-pulse 1.4s ease-in-out infinite alternate}@keyframes countdown-live-pulse{to{color:#d1fae5;box-shadow:0 0 30px rgba(16,185,129,.3)}}
@media(max-width:1000px){.countdown-event-dates{justify-self:end;width:min(100%,310px)}}
@media(max-width:650px){.countdown-event-dates{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch}.countdown-event-dates .countdown-event-date{padding:10px 8px}.countdown-event-dates .countdown-event-date b{font-size:9px}.countdown-event-dates .countdown-event-date small{font-size:7px}}

/* Ikon media sosial rasmi di atas Statistik Utama. */

/* Setiap siaran MEDIALIT mempunyai pratonton visual apabila pautan tersedia. */
.medialit-video-list>a>.medialit-broadcast-preview{display:block;width:92px;height:67px;overflow:hidden;border-radius:10px;background:#020617}
.medialit-broadcast-preview iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.medialit-broadcast-preview img{display:block;width:100%;height:100%;object-fit:cover}
.medialit-broadcast-preview .medialit-neutral-cover{display:grid;width:100%;height:100%;place-items:center;background:linear-gradient(135deg,#0b2d5d,#071426);color:#fbbf24;font-size:25px}
.medialit-cover-only{display:grid;width:100%;height:100%;place-items:center;background:radial-gradient(circle,rgba(37,99,235,.3),transparent 52%),linear-gradient(135deg,#071a45,#020617)}

/* Pautan utama AINS dan saluran rasmi MEDIALIT JUNIOR. */
.medialit-feature-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 4px}
.medialit-feature-links>a{position:relative;isolation:isolate;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:88px;overflow:hidden;padding:16px 19px;border:1px solid rgba(103,232,249,.3);border-radius:22px;color:#fff;text-decoration:none;box-shadow:0 18px 38px rgba(2,6,23,.3),inset 0 1px rgba(255,255,255,.08);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.medialit-feature-links>a:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.12) 48%,transparent 72%);transform:translateX(-120%);transition:transform .65s ease}
.medialit-feature-links>a:hover{transform:translateY(-5px);border-color:rgba(251,191,36,.7);box-shadow:0 25px 48px rgba(2,6,23,.42),0 0 28px rgba(6,182,212,.2)}
.medialit-feature-links>a:hover:before{transform:translateX(120%)}
.medialit-ains-link{background:radial-gradient(circle at 12% 20%,rgba(52,211,153,.26),transparent 34%),linear-gradient(135deg,rgba(4,120,87,.88),rgba(8,47,73,.96))}
.medialit-channel-link{background:radial-gradient(circle at 12% 20%,rgba(248,113,113,.26),transparent 34%),linear-gradient(135deg,rgba(153,27,27,.9),rgba(30,41,59,.97))}
.medialit-feature-links>a>span{display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:17px;background:rgba(2,6,23,.28);font-size:24px;box-shadow:0 10px 22px rgba(0,0,0,.25)}
.medialit-feature-links small{display:block;margin-bottom:4px;color:#dbeafe;font-size:8px;font-weight:800;letter-spacing:.14em}
.medialit-feature-links b{display:block;color:#fff;font:800 clamp(13px,1.6vw,19px)/1.25 Poppins,sans-serif}
.medialit-feature-links i{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);color:#fbbf24;font-size:17px;font-style:normal;transition:transform .28s ease}
.medialit-feature-links>a:hover i{transform:translate(3px,-3px)}
@media(max-width:680px){.medialit-feature-links{grid-template-columns:1fr;gap:9px;margin:15px 0 0}.medialit-feature-links>a{min-height:72px;padding:12px 14px;border-radius:17px}.medialit-feature-links>a>span{width:43px;height:43px;border-radius:13px;font-size:20px}.medialit-feature-links b{font-size:13px}.medialit-feature-links i{width:30px;height:30px}}

/* Kedua-dua pautan utama menggunakan glass kuning keemasan tanpa anak panah. */
.medialit-feature-links>a{grid-template-columns:auto 1fr;border-color:rgba(253,224,71,.48);background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.2),transparent 32%),linear-gradient(135deg,rgba(251,191,36,.7),rgba(180,83,9,.76) 55%,rgba(69,26,3,.88));box-shadow:0 18px 38px rgba(69,26,3,.3),inset 0 1px rgba(255,255,255,.25),0 0 22px rgba(251,191,36,.12);backdrop-filter:blur(18px)}
.medialit-feature-links>a>span{border-color:rgba(255,255,255,.32);background:rgba(120,53,15,.24);color:#fff7d6;box-shadow:0 10px 22px rgba(69,26,3,.28),inset 0 1px rgba(255,255,255,.15)}
.medialit-feature-links small{color:#fff3c4}.medialit-feature-links i{display:none}
.medialit-feature-links>a:hover{border-color:#fde68a;box-shadow:0 25px 48px rgba(69,26,3,.38),0 0 30px rgba(251,191,36,.3),inset 0 1px rgba(255,255,255,.3)}

/* Ikon 3D untuk AINS dan MEDIALIT JUNIOR CHANNEL. */
.medialit-feature-links>a>span{position:relative;transform:perspective(180px) rotateX(8deg) rotateY(-8deg);text-shadow:0 2px 0 rgba(255,255,255,.28),0 5px 6px rgba(0,0,0,.45);box-shadow:inset 3px 3px 7px rgba(255,255,255,.3),inset -5px -6px 9px rgba(0,0,0,.32),0 9px 0 rgba(69,26,3,.5),0 15px 22px rgba(0,0,0,.36);transition:transform .28s ease,box-shadow .28s ease}
.medialit-ains-link>span{background:linear-gradient(145deg,#6ee7b7,#059669 58%,#064e3b)!important;color:#ecfdf5!important}
.medialit-channel-link>span{background:linear-gradient(145deg,#fca5a5,#dc2626 56%,#7f1d1d)!important;color:#fff!important}
.medialit-tiktok-link>span{background:linear-gradient(145deg,#67e8f9,#111827 52%,#fb7185)!important;color:#fff!important}
.medialit-facebook-link>span{background:linear-gradient(145deg,#93c5fd,#2563eb 55%,#1e3a8a)!important;color:#fff!important;font-family:Arial,sans-serif;font-weight:900}
.medialit-feature-links>a:hover>span{transform:perspective(180px) rotateX(0) rotateY(0) translateY(-3px);box-shadow:inset 3px 3px 7px rgba(255,255,255,.35),inset -5px -6px 9px rgba(0,0,0,.28),0 6px 0 rgba(69,26,3,.48),0 14px 25px rgba(0,0,0,.4)}

/* Ketiga-tiga tindakan hero MEDIALIT menggunakan saiz yang seragam. */
.medialit-hero-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(620px,100%);gap:12px}
.medialit-hero-actions a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:46px;padding:12px 10px;text-align:center;line-height:1.25;white-space:nowrap}

/* Visi dan misi rasmi MEDIALIT Junior. */
.medialit-vision-mission{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.medialit-vision-mission article{position:relative;overflow:hidden;padding:18px;border:1px solid rgba(96,165,250,.25);border-radius:18px;background:radial-gradient(circle at 100% 0,rgba(251,191,36,.12),transparent 38%),linear-gradient(145deg,rgba(15,50,96,.78),rgba(3,16,43,.88));box-shadow:0 15px 30px rgba(0,0,0,.2)}
.medialit-vision-mission article:first-child{border-color:rgba(103,232,249,.32)}
.medialit-vision-mission article:last-child{border-color:rgba(251,191,36,.32)}
.medialit-vision-mission span{display:inline-flex;margin-bottom:9px;padding:5px 9px;border-radius:999px;background:rgba(6,182,212,.16);color:#a5f3fc;font:800 8px Poppins,sans-serif;letter-spacing:.15em}
.medialit-vision-mission article:last-child span{background:rgba(251,191,36,.14);color:#fde68a}
.medialit-vision-mission p{margin:0!important;color:#e2e8f0!important;font-size:11px!important;line-height:1.75!important;text-align:justify}

/* Hierarki paparan Krew MEDIALIT Junior. */
.medialit-crew-group-title{grid-column:1/-1;margin:18px 0 0;padding:10px 14px;border-radius:8px;background:linear-gradient(90deg,transparent,rgba(251,191,36,.15),transparent);color:#fde68a;font:800 11px Poppins,sans-serif;letter-spacing:.14em;text-align:center}
.medialit-crew-group-title:first-child{margin-top:0}
.medialit-crew-grid>article.crew-adviser,.medialit-crew-grid>article.crew-coordinator{grid-column:1/-1;justify-self:center;width:calc((100% - 34px)/3);text-align:center}
.medialit-crew-grid>article.crew-adviser p,.medialit-crew-grid>article.crew-coordinator p{text-align:justify;text-justify:inter-word}
@media(max-width:980px){.medialit-crew-grid>article.crew-adviser,.medialit-crew-grid>article.crew-coordinator{width:calc((100% - 17px)/2)}}

@media(max-width:680px){
  .medialit-feature-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .medialit-feature-links>a{display:flex;min-width:0;min-height:128px;flex-direction:column;justify-content:center;gap:13px;padding:13px 8px;text-align:center}
  .medialit-feature-links>a>span{flex:0 0 auto;width:46px;height:46px;font-size:21px}
  .medialit-feature-links>a>div{min-width:0;width:100%}
  .medialit-feature-links small{font-size:6.5px;letter-spacing:.08em}
  .medialit-feature-links b{font-size:10px;line-height:1.3;overflow-wrap:anywhere}
  .medialit-vision-mission{grid-template-columns:1fr;gap:9px;margin-top:17px}
  .medialit-vision-mission article{padding:15px;border-radius:15px}
  .medialit-hero-actions{width:100%;gap:6px}
  .medialit-hero-actions a{min-height:42px;padding:10px 3px;font-size:7.5px}
  .medialit-crew-grid>article.crew-adviser,.medialit-crew-grid>article.crew-coordinator{grid-column:1;width:100%}
}

/* Statistik Utama — kemasan premium, kemas dan responsif. */
.stats-section{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(58px,7vw,92px);padding-bottom:clamp(62px,7vw,96px)}
.stats-section::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 8% 18%,rgba(6,182,212,.2),transparent 27%),radial-gradient(circle at 92% 78%,rgba(16,185,129,.18),transparent 30%),linear-gradient(rgba(103,232,249,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.035) 1px,transparent 1px);background-size:auto,auto,36px 36px,36px 36px}
.stats-section .section-head{position:relative;z-index:1;align-items:end;margin-bottom:30px;padding-bottom:19px;border-bottom:1px solid rgba(103,232,249,.14)}
.stats-section .section-head h2{margin-top:5px;font-size:clamp(29px,4vw,44px);letter-spacing:-.035em}
.stats-section .section-head>p{max-width:480px;margin:0;color:#cbd5e1;line-height:1.7}
.stats-section .stats-grid{position:relative;z-index:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stats-section .stat-public{isolation:isolate;display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;min-height:225px;padding:25px 23px 23px;border:1px solid rgba(103,232,249,.22);border-radius:24px;background:radial-gradient(circle at 90% 5%,rgba(6,182,212,.18),transparent 34%),linear-gradient(145deg,rgba(9,48,82,.9),rgba(4,25,52,.92));box-shadow:0 20px 42px rgba(2,6,23,.34),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(16px);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.stats-section .stat-public::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:4px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,#06b6d4,#34d399);box-shadow:0 0 18px rgba(6,182,212,.38)}
.stats-section .stat-public::after{content:"";position:absolute;z-index:-1;width:145px;height:145px;right:-66px;bottom:-72px;border:1px solid rgba(103,232,249,.12);border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.14),transparent 68%)}
.stats-section .stat-public:nth-child(2)::before{background:linear-gradient(90deg,#3b82f6,#06b6d4)}
.stats-section .stat-public:nth-child(3)::before{background:linear-gradient(90deg,#fbbf24,#10b981)}
.stats-section .stat-public:nth-child(4)::before{background:linear-gradient(90deg,#10b981,#22d3ee)}
.stats-section .stat-public>span{display:grid;width:54px;height:54px;place-items:center;margin:0 0 20px;border:1px solid rgba(103,232,249,.22);border-radius:17px;background:linear-gradient(145deg,rgba(6,182,212,.24),rgba(16,185,129,.15));font-size:27px;filter:drop-shadow(0 9px 13px rgba(2,6,23,.42));transform:none;text-shadow:0 0 16px rgba(103,232,249,.38)}
.stats-section .stat-public>b{margin:0;font-size:clamp(35px,4vw,48px);line-height:1;letter-spacing:-.045em}
.stats-section .stat-public h3{margin:13px 0 7px;color:#f8fafc;font:800 13px/1.35 Poppins,sans-serif;letter-spacing:.07em;text-transform:uppercase}
.stats-section .stat-public p{align-self:end;margin:0;color:#b9c9df;font-size:11px;line-height:1.6}
.stats-section .stat-public:hover{transform:translateY(-8px);border-color:rgba(103,232,249,.62);box-shadow:0 27px 56px rgba(2,6,23,.45),0 0 30px rgba(6,182,212,.16),inset 0 1px rgba(255,255,255,.1)}
.stats-section .stat-public:hover>span{transform:translateY(-2px) scale(1.05)}
.light-mode .stats-section::before{opacity:.4}
.light-mode .stats-section .section-head>p{color:#475569}
.light-mode .stats-section .stat-public{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,253,245,.9));border-color:rgba(5,150,105,.2);box-shadow:0 18px 38px rgba(15,23,42,.1)}
.light-mode .stats-section .stat-public h3{color:#0f172a}
.light-mode .stats-section .stat-public p{color:#475569}
@media(max-width:900px){.stats-section .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.stats-section{padding-top:48px;padding-bottom:52px}.stats-section .section-head{align-items:flex-start;margin-bottom:22px}.stats-section .stats-grid{grid-template-columns:1fr;gap:12px}.stats-section .stat-public{grid-template-columns:54px 1fr;grid-template-rows:auto auto auto;column-gap:16px;min-height:0;padding:19px;border-radius:20px}.stats-section .stat-public>span{grid-row:1/4;margin:0;align-self:center;width:50px;height:50px;font-size:24px}.stats-section .stat-public>b{font-size:31px}.stats-section .stat-public h3{margin:7px 0 3px;font-size:11px}.stats-section .stat-public p{font-size:9px;line-height:1.45}.stats-section .stat-public::before{border-radius:20px 20px 0 0}}

/* Pautan Pantas — kad digital premium, jelas dan responsif. */
.quick-links-section{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(58px,7vw,88px);padding-bottom:clamp(60px,7vw,92px)}
.quick-links-section::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 5% 10%,rgba(6,182,212,.18),transparent 26%),radial-gradient(circle at 94% 88%,rgba(16,185,129,.16),transparent 29%),linear-gradient(rgba(103,232,249,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.03) 1px,transparent 1px);background-size:auto,auto,38px 38px,38px 38px}
.quick-links-column{position:relative;z-index:1}
.quick-links-column .section-head{align-items:end;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(103,232,249,.16)}
.quick-links-column .section-head h2{margin-top:5px;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.035em}
.quick-links-column .section-head>p{max-width:430px;margin:0;color:#cbd5e1;line-height:1.65}
.quick-links-column .quick-links-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.quick-links-grid a{position:relative;isolation:isolate;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:16px;min-height:132px;padding:20px 48px 20px 19px;overflow:hidden;border:1px solid rgba(103,232,249,.22);border-radius:22px;background:radial-gradient(circle at 5% 15%,rgba(6,182,212,.19),transparent 40%),linear-gradient(145deg,rgba(9,48,82,.9),rgba(4,25,52,.94));box-shadow:0 17px 36px rgba(2,6,23,.3),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(15px);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease}
.quick-links-grid a::before{content:"";position:absolute;z-index:-1;width:120px;height:120px;right:-65px;bottom:-68px;border:1px solid rgba(103,232,249,.13);border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.18),transparent 68%);transition:transform .35s ease}
.quick-links-grid a::after{content:"›";position:absolute;right:18px;top:50%;display:grid;width:27px;height:27px;place-items:center;border:1px solid rgba(103,232,249,.22);border-radius:50%;background:rgba(8,47,73,.55);color:#67e8f9;font:700 22px/1 Arial,sans-serif;transform:translateY(-50%);transition:transform .28s ease,background .28s ease,color .28s ease}
.quick-links-grid a:nth-child(2n){background:radial-gradient(circle at 5% 15%,rgba(16,185,129,.18),transparent 40%),linear-gradient(145deg,rgba(8,54,72,.9),rgba(4,25,52,.94))}
.quick-links-grid a:nth-child(3n)::before{background:radial-gradient(circle,rgba(59,130,246,.2),transparent 68%)}
.quick-links-grid a>span{display:grid;width:58px;height:58px;place-items:center;margin:0;border:1px solid rgba(103,232,249,.25);border-radius:18px;background:linear-gradient(145deg,rgba(6,182,212,.26),rgba(16,185,129,.13));box-shadow:0 11px 22px rgba(2,6,23,.3),inset 0 1px rgba(255,255,255,.1);font-size:28px;filter:drop-shadow(0 7px 10px rgba(2,6,23,.35));transform:none;transition:transform .28s ease,box-shadow .28s ease}
.quick-links-grid a>div{min-width:0}
.quick-links-grid b{display:block;margin-bottom:7px;color:#f8fafc;font:800 clamp(12px,1.25vw,14px)/1.35 Poppins,sans-serif;letter-spacing:.025em}
.quick-links-grid small{display:block;color:#b9c9df;font-size:10px;line-height:1.55}
.quick-links-grid a:hover{transform:translateY(-6px);border-color:rgba(103,232,249,.6);box-shadow:0 24px 48px rgba(2,6,23,.42),0 0 25px rgba(6,182,212,.13),inset 0 1px rgba(255,255,255,.1)}
.quick-links-grid a:hover::before{transform:scale(1.18)}
.quick-links-grid a:hover::after{background:linear-gradient(135deg,#06b6d4,#10b981);color:#fff;transform:translate(3px,-50%)}
.quick-links-grid a:hover>span{transform:translateY(-2px) scale(1.06);box-shadow:0 14px 27px rgba(2,6,23,.4),0 0 18px rgba(34,211,238,.16)}
.quick-links-grid a:focus-visible{outline:3px solid #67e8f9;outline-offset:4px}
.light-mode .quick-links-section::before{opacity:.42}
.light-mode .quick-links-column .section-head>p{color:#475569}
.light-mode .quick-links-grid a,.light-mode .quick-links-grid a:nth-child(2n){border-color:rgba(5,150,105,.2);background:radial-gradient(circle at 5% 15%,rgba(6,182,212,.12),transparent 40%),linear-gradient(145deg,rgba(255,255,255,.97),rgba(236,253,245,.91));box-shadow:0 16px 34px rgba(15,23,42,.1)}
.light-mode .quick-links-grid b{color:#0f172a}
.light-mode .quick-links-grid small{color:#475569}
.light-mode .quick-links-grid a::after{background:rgba(255,255,255,.72);color:#0891b2}
@media(max-width:1000px){.quick-links-column .quick-links-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-links-grid a{grid-template-columns:52px minmax(0,1fr);min-height:122px;padding:18px 42px 18px 16px}.quick-links-grid a>span{width:52px;height:52px;font-size:25px}}
@media(max-width:760px){.quick-links-column .section-head{align-items:flex-start}.quick-links-column .quick-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.quick-links-section{padding-top:48px;padding-bottom:52px}.quick-links-column .section-head{margin-bottom:19px}.quick-links-column .quick-links-grid{grid-template-columns:1fr;gap:10px}.quick-links-grid a{grid-template-columns:48px minmax(0,1fr);min-height:92px;padding:14px 44px 14px 14px;border-radius:18px}.quick-links-grid a>span{width:48px;height:48px;border-radius:15px;font-size:23px}.quick-links-grid a::after{right:14px;width:25px;height:25px}.quick-links-grid b{margin-bottom:4px;font-size:11px}.quick-links-grid small{font-size:9px;line-height:1.45}}

/* Takwim Persekolahan — kad premium dengan senarai dalaman yang kemas. */
.school-calendar-card{position:relative;isolation:isolate;border-color:rgba(103,232,249,.3);border-radius:24px;background:radial-gradient(circle at 88% 5%,rgba(16,185,129,.22),transparent 31%),linear-gradient(150deg,rgba(9,48,82,.94),rgba(3,17,43,.97));box-shadow:0 22px 48px rgba(2,6,23,.4),0 0 28px rgba(6,182,212,.1),inset 0 1px rgba(255,255,255,.07)}
.school-calendar-card::before{content:"";position:absolute;z-index:-1;right:-74px;bottom:-82px;width:190px;height:190px;border:1px solid rgba(103,232,249,.11);border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.13),transparent 68%);pointer-events:none}
.school-calendar-card::after{content:"";position:absolute;z-index:2;top:0;left:0;right:0;height:4px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,#10b981,#22d3ee,#3b82f6);box-shadow:0 0 18px rgba(34,211,238,.36);pointer-events:none}
.school-calendar-head{position:relative;gap:16px;padding:25px 23px 22px;border-bottom:1px solid rgba(103,232,249,.18);background:linear-gradient(120deg,rgba(16,185,129,.17),rgba(6,182,212,.1),transparent)}
.school-calendar-head::after{content:"SCROLL UNTUK LIHAT SEMUA";position:absolute;right:19px;bottom:10px;color:rgba(165,243,252,.6);font:700 7px/1 Poppins,sans-serif;letter-spacing:.12em}
.school-calendar-head>span{width:57px;height:57px;border:1px solid rgba(167,243,208,.32);border-radius:18px;background:linear-gradient(145deg,#10b981,#0891b2);box-shadow:0 13px 25px rgba(2,6,23,.3),0 0 22px rgba(6,182,212,.2),inset 0 1px rgba(255,255,255,.25);font-size:27px;transform:rotate(-3deg)}
.school-calendar-head .eyebrow{color:#6ee7b7;letter-spacing:.15em}
.school-calendar-head h2{margin:0;color:#f8fafc;font-size:clamp(21px,2.1vw,28px);letter-spacing:-.025em}
.school-calendar-list{position:relative;padding:10px 16px 18px;scrollbar-width:thin;scrollbar-color:#10b981 rgba(15,23,42,.4)}
.school-calendar-list article{position:relative;grid-template-columns:94px minmax(0,1fr);align-items:center;gap:15px;margin:8px 0;padding:15px 34px 15px 12px;border:1px solid rgba(148,163,184,.13);border-radius:17px;background:linear-gradient(140deg,rgba(15,43,75,.72),rgba(8,28,58,.58));box-shadow:inset 0 1px rgba(255,255,255,.025);transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.school-calendar-list article:last-child{border-bottom:1px solid rgba(148,163,184,.13)}
.school-calendar-list article::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 12px #22d3ee;transform:translateY(-50%)}
.school-calendar-list article:hover{transform:translateX(4px);border-color:rgba(103,232,249,.42);background:linear-gradient(140deg,rgba(8,73,96,.72),rgba(8,35,68,.68));box-shadow:0 12px 25px rgba(2,6,23,.24),inset 0 1px rgba(255,255,255,.05)}
.school-calendar-list time{padding:9px 8px;border:1px solid rgba(52,211,153,.32);border-radius:11px;background:linear-gradient(145deg,rgba(16,185,129,.2),rgba(6,182,212,.12));color:#d1fae5;font:800 10px/1.4 Inter,sans-serif;letter-spacing:.015em;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.school-calendar-list b{color:#f8fafc;font:700 12px/1.45 Poppins,sans-serif;overflow-wrap:anywhere}
.school-calendar-list small{margin-top:6px;color:#67e8f9;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.school-calendar-list::-webkit-scrollbar{width:8px}
.school-calendar-list::-webkit-scrollbar-track{margin:8px 0;background:rgba(15,23,42,.38);border-radius:99px}
.school-calendar-list::-webkit-scrollbar-thumb{border:2px solid rgba(15,23,42,.38);border-radius:99px;background:linear-gradient(#34d399,#06b6d4)}
.calendar-empty{margin:18px 0;padding:30px 14px;border:1px dashed rgba(103,232,249,.26);border-radius:16px;background:rgba(15,23,42,.32);color:#cbd5e1}
.light-mode .school-calendar-card{border-color:rgba(5,150,105,.22);background:radial-gradient(circle at 88% 5%,rgba(16,185,129,.12),transparent 31%),linear-gradient(150deg,rgba(255,255,255,.98),rgba(236,253,245,.93));box-shadow:0 20px 42px rgba(15,23,42,.11)}
.light-mode .school-calendar-head{background:linear-gradient(120deg,rgba(16,185,129,.12),rgba(6,182,212,.07),transparent)}
.light-mode .school-calendar-head h2,.light-mode .school-calendar-list b{color:#0f172a}
.light-mode .school-calendar-list article{border-color:rgba(5,150,105,.13);background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(236,253,245,.72))}
.light-mode .school-calendar-list article:hover{border-color:rgba(8,145,178,.35);background:linear-gradient(140deg,#fff,rgba(207,250,254,.65))}
.light-mode .school-calendar-list time{color:#065f46}
.light-mode .school-calendar-list small{color:#0e7490}
@media(max-width:600px){.school-calendar-card{height:450px;max-height:450px;border-radius:20px}.school-calendar-card::after{border-radius:20px 20px 0 0}.school-calendar-head{padding:20px 17px 21px}.school-calendar-head::after{right:15px;bottom:8px;font-size:6px}.school-calendar-head>span{width:49px;height:49px;border-radius:15px;font-size:23px}.school-calendar-list{padding:7px 11px 14px}.school-calendar-list article{grid-template-columns:79px minmax(0,1fr);gap:11px;margin:7px 0;padding:13px 28px 13px 9px;border-radius:14px}.school-calendar-list article::after{right:11px}.school-calendar-list time{padding:7px 5px;font-size:8px}.school-calendar-list b{font-size:10px}.school-calendar-list small{font-size:8px}}

/* Berita Terkini halaman utama — susunan editorial premium dan responsif. */
#berita{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(60px,7vw,92px);padding-bottom:clamp(62px,7vw,96px)}
#berita::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 7% 12%,rgba(6,182,212,.18),transparent 27%),radial-gradient(circle at 94% 84%,rgba(16,185,129,.15),transparent 29%),linear-gradient(rgba(103,232,249,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.028) 1px,transparent 1px);background-size:auto,auto,40px 40px,40px 40px}
#berita>.section-head{position:relative;z-index:1;align-items:end;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid rgba(103,232,249,.16)}
#berita>.section-head h2{margin-top:5px;font-size:clamp(30px,4vw,45px);letter-spacing:-.038em}
#berita>.section-head>p{max-width:500px;margin:0;color:#cbd5e1;line-height:1.7}
#berita>.cards{position:relative;z-index:1;counter-reset:home-news;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:18px}
#berita>.cards>.card{counter-increment:home-news;position:relative;isolation:isolate;min-width:0;overflow:hidden;border:1px solid rgba(103,232,249,.22);border-radius:24px;background:radial-gradient(circle at 100% 0,rgba(6,182,212,.15),transparent 30%),linear-gradient(150deg,rgba(9,48,82,.93),rgba(3,17,43,.97));box-shadow:0 20px 43px rgba(2,6,23,.36),inset 0 1px rgba(255,255,255,.06);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
#berita>.cards>.card::before{content:"BERITA " counter(home-news,decimal-leading-zero);position:absolute;z-index:4;top:15px;left:15px;padding:7px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(2,15,38,.72);backdrop-filter:blur(10px);color:#d1fae5;font:800 8px/1 Poppins,sans-serif;letter-spacing:.11em;box-shadow:0 8px 18px rgba(2,6,23,.25)}
#berita>.cards>.card::after{content:"";position:absolute;z-index:-1;right:-68px;bottom:-75px;width:155px;height:155px;border:1px solid rgba(103,232,249,.11);border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.14),transparent 68%);pointer-events:none}
#berita>.cards>.card:hover{transform:translateY(-8px);border-color:rgba(103,232,249,.62);box-shadow:0 29px 58px rgba(2,6,23,.46),0 0 28px rgba(6,182,212,.14),inset 0 1px rgba(255,255,255,.09)}
#berita>.cards>.card .thumb{position:relative;width:100%;height:auto;aspect-ratio:16/9;overflow:hidden;border:0;border-radius:0;background:linear-gradient(145deg,#082f49,#064e3b)!important}
#berita>.cards>.card .thumb::before{content:"";position:absolute;z-index:2;inset:auto 0 0;height:40%;pointer-events:none;background:linear-gradient(transparent,rgba(3,15,39,.68))}
#berita>.cards>.card .thumb::after{z-index:1;color:#a7f3d0;font-size:40px;background:radial-gradient(circle,rgba(6,182,212,.15),transparent 62%)}
#berita>.cards>.card .thumb.has-image::after{display:none}
#berita>.cards>.card .thumb img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:linear-gradient(145deg,#082f49,#064e3b);transition:transform .45s ease,filter .45s ease}
#berita>.cards>.card:hover .thumb img{transform:scale(1.025);filter:saturate(1.07) brightness(1.04)}
#berita>.cards>.card .card-body{position:relative;z-index:1;display:flex;flex:1;align-items:stretch;padding:21px 20px 20px}
#berita>.cards>.card .tag{align-self:flex-start;margin:0 0 11px;padding:6px 9px;border:1px solid rgba(52,211,153,.25);border-radius:999px;background:rgba(16,185,129,.1);color:#a7f3d0;font:800 8px/1 Poppins,sans-serif;letter-spacing:.1em}
#berita>.cards>.card h3{color:#f8fafc;font:750 clamp(16px,1.7vw,20px)/1.4 Poppins,sans-serif;letter-spacing:-.02em;text-wrap:balance}
#berita>.cards>.card .card-body>p{margin:11px 0 19px;color:#bdcadb;font-size:11px;line-height:1.75;text-align:justify;white-space:pre-line}
#berita>.cards>.card .news-read-button{display:flex;width:100%;min-height:43px;align-items:center;justify-content:space-between;margin-top:auto;padding:10px 13px;border:1px solid rgba(103,232,249,.28);border-radius:13px;background:linear-gradient(110deg,rgba(6,182,212,.15),rgba(16,185,129,.13));color:#d1fae5;font:800 10px/1.2 Poppins,sans-serif;letter-spacing:.035em;text-align:left;transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
#berita>.cards>.card .news-read-button:hover{border-color:#67e8f9;background:linear-gradient(110deg,#0891b2,#059669);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(6,182,212,.2)}
#berita>.cards>.card .news-read-button:focus-visible{outline:3px solid #67e8f9;outline-offset:3px}
#berita .home-news-actions{position:relative;z-index:1}
.light-mode #berita::before{opacity:.4}
.light-mode #berita>.section-head>p{color:#475569}
.light-mode #berita>.cards>.card{border-color:rgba(5,150,105,.19);background:radial-gradient(circle at 100% 0,rgba(6,182,212,.1),transparent 30%),linear-gradient(150deg,rgba(255,255,255,.98),rgba(236,253,245,.92));box-shadow:0 18px 38px rgba(15,23,42,.11)}
.light-mode #berita>.cards>.card h3{color:#0f172a}
.light-mode #berita>.cards>.card .card-body>p{color:#475569}
.light-mode #berita>.cards>.card .tag{color:#047857}
.light-mode #berita>.cards>.card .news-read-button{color:#065f46;background:linear-gradient(110deg,rgba(6,182,212,.09),rgba(16,185,129,.1))}
@media(max-width:900px){#berita>.cards{grid-template-columns:repeat(2,minmax(0,1fr))}#berita>.cards>.card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(0,1fr)}#berita>.cards>.card:first-child .thumb{height:100%;min-height:270px;aspect-ratio:auto}}
@media(max-width:650px){#berita{padding-top:49px;padding-bottom:54px}#berita>.section-head{align-items:flex-start;margin-bottom:21px}#berita>.cards{grid-template-columns:1fr;gap:13px}#berita>.cards>.card:first-child{grid-column:auto;display:flex}#berita>.cards>.card:first-child .thumb{height:auto;min-height:0;aspect-ratio:16/9}#berita>.cards>.card{border-radius:20px}#berita>.cards>.card::before{top:11px;left:11px;padding:6px 8px;font-size:7px}#berita>.cards>.card .card-body{padding:17px}#berita>.cards>.card h3{font-size:15px}#berita>.cards>.card .card-body>p{margin:9px 0 15px;font-size:10px;line-height:1.65}#berita>.cards>.card .news-read-button{min-height:40px;font-size:9px}}

/* Dropdown hamburger — navigasi glassmorphism premium. */
.site-header .hamburger-menu{
  counter-reset:portal-menu;
  z-index:300!important;
  right:max(4vw,22px);
  top:calc(100% + 12px);
  width:min(330px,calc(100vw - 28px));
  max-height:min(72vh,650px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:12px;
  border:1px solid rgba(103,232,249,.32);
  border-radius:24px;
  background:radial-gradient(circle at 92% 4%,rgba(16,185,129,.22),transparent 31%),radial-gradient(circle at 3% 95%,rgba(59,130,246,.18),transparent 35%),linear-gradient(145deg,rgba(8,31,57,.94),rgba(3,15,37,.97));
  box-shadow:0 28px 65px rgba(2,6,23,.58),0 0 32px rgba(6,182,212,.12),inset 0 1px rgba(255,255,255,.09);
  backdrop-filter:blur(24px) saturate(155%);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
  transform-origin:top right;
  scrollbar-width:thin;
  scrollbar-color:#10b981 rgba(15,23,42,.42)
}
.site-header .hamburger-menu.open{display:grid!important;gap:5px;animation:hamburgerMenuEnter .3s cubic-bezier(.2,.75,.25,1) both}
.site-header .hamburger-menu::before{
  content:"NAVIGASI PORTAL";
  display:block;
  margin:0 3px 5px;
  padding:10px 11px 13px;
  border-bottom:1px solid rgba(103,232,249,.17);
  color:#a7f3d0;
  font:800 9px/1 Poppins,sans-serif;
  letter-spacing:.18em
}
.site-header .hamburger-menu a{
  counter-increment:portal-menu;
  position:relative;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 19px;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:14px;
  background:rgba(15,42,73,.34);
  color:#e7f2ff;
  font:700 11px/1.35 Poppins,sans-serif;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease
}
.site-header .hamburger-menu a::before{
  content:counter(portal-menu,decimal-leading-zero);
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border:1px solid rgba(103,232,249,.22);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(16,185,129,.2),rgba(6,182,212,.13));
  color:#67e8f9;
  font:800 8px/1 Poppins,sans-serif;
  box-shadow:inset 0 1px rgba(255,255,255,.07)
}
.site-header .hamburger-menu a::after{
  content:"›";
  display:grid;
  width:19px;
  height:19px;
  place-items:center;
  border-radius:50%;
  color:#6ee7b7;
  font:700 20px/1 Arial,sans-serif;
  transition:transform .22s ease,background .22s ease,color .22s ease
}
.site-header .hamburger-menu a:hover,
.site-header .hamburger-menu a:focus-visible{
  transform:translateX(4px);
  border-color:rgba(103,232,249,.43);
  background:linear-gradient(100deg,rgba(16,185,129,.22),rgba(6,182,212,.18),rgba(59,130,246,.12));
  color:#fff;
  box-shadow:0 9px 22px rgba(2,6,23,.25),inset 0 1px rgba(255,255,255,.05)
}
.site-header .hamburger-menu a:hover::after,.site-header .hamburger-menu a:focus-visible::after{transform:translateX(2px);background:#06b6d4;color:#fff}
.site-header .hamburger-menu a:focus-visible{outline:2px solid #67e8f9;outline-offset:2px}
.site-header .hamburger-menu a[aria-current="page"]{border-color:rgba(52,211,153,.46);background:linear-gradient(100deg,rgba(16,185,129,.3),rgba(6,182,212,.18));color:#fff}
.site-header .hamburger-menu .tvpss-menu-label{margin:7px 4px 1px;padding:10px 10px 5px;border-top:1px solid rgba(251,191,36,.15);color:#fbbf24;font-size:8px;letter-spacing:.17em}
.site-header .hamburger-menu a[data-medialit-menu]{padding-left:9px;color:#dbeafe;background:linear-gradient(100deg,rgba(37,99,235,.18),rgba(251,191,36,.08))}
.site-header .hamburger-menu::-webkit-scrollbar{width:7px}
.site-header .hamburger-menu::-webkit-scrollbar-track{margin:14px 0;background:rgba(15,23,42,.28);border-radius:99px}
.site-header .hamburger-menu::-webkit-scrollbar-thumb{border:2px solid rgba(15,23,42,.28);border-radius:99px;background:linear-gradient(#34d399,#06b6d4)}
.light-mode .site-header .hamburger-menu{border-color:rgba(8,145,178,.25);background:radial-gradient(circle at 92% 4%,rgba(16,185,129,.12),transparent 31%),linear-gradient(145deg,rgba(255,255,255,.97),rgba(236,253,245,.95));box-shadow:0 25px 55px rgba(15,23,42,.2)}
.light-mode .site-header .hamburger-menu::before{color:#047857;border-bottom-color:rgba(5,150,105,.17)}
.light-mode .site-header .hamburger-menu a{background:rgba(255,255,255,.58);color:#17304b}
.light-mode .site-header .hamburger-menu a:hover,.light-mode .site-header .hamburger-menu a:focus-visible{background:linear-gradient(100deg,rgba(16,185,129,.13),rgba(6,182,212,.1));color:#0f172a}
@keyframes hamburgerMenuEnter{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){
  .site-header .hamburger-menu{right:12px;top:calc(100% + 8px);width:calc(100vw - 24px);max-height:calc(100dvh - 112px);padding:10px;border-radius:21px}
  .site-header .hamburger-menu::before{padding:8px 9px 11px;font-size:8px}
  .site-header .hamburger-menu a{grid-template-columns:29px minmax(0,1fr) 18px;min-height:42px;gap:8px;padding:6px 8px;border-radius:12px;font-size:10px}
  .site-header .hamburger-menu a::before{width:27px;height:27px;border-radius:9px;font-size:7px}
}

/* Notifikasi Terkini — panel premium, jelas dan mesra telefon. */
.notification-panel{
  isolation:isolate;
  width:min(430px,calc(100vw - 24px));
  border-color:rgba(103,232,249,.34);
  border-radius:26px;
  background:radial-gradient(circle at 94% 2%,rgba(16,185,129,.25),transparent 30%),radial-gradient(circle at 0 100%,rgba(37,99,235,.18),transparent 35%),linear-gradient(145deg,rgba(7,28,53,.97),rgba(3,15,37,.985));
  box-shadow:0 32px 80px rgba(2,6,23,.62),0 0 35px rgba(6,182,212,.13),inset 0 1px rgba(255,255,255,.08);
  animation:notificationPanelEnter .28s cubic-bezier(.2,.75,.25,1) both
}
.notification-panel::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.055),transparent 34%)}
.notification-head{position:relative;padding:23px 23px 17px;border-bottom:0;background:linear-gradient(105deg,rgba(16,185,129,.11),rgba(6,182,212,.055),transparent)}
.notification-head::after{content:"";position:absolute;right:23px;bottom:0;left:23px;height:1px;background:linear-gradient(90deg,rgba(52,211,153,.55),rgba(34,211,238,.28),transparent)}
.notification-head small{color:#6ee7b7;font-size:8px;letter-spacing:.18em}
.notification-head h2{margin:5px 0 4px;color:#fff;font:800 23px/1.15 Poppins,sans-serif;letter-spacing:-.025em}
.notification-head p{margin:0;color:#a9bad0;font-size:9px;line-height:1.5}
.notification-head button{display:grid;width:37px;height:37px;place-items:center;border:1px solid rgba(103,232,249,.2);border-radius:12px;background:rgba(15,42,73,.64);box-shadow:inset 0 1px rgba(255,255,255,.06);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.notification-head button:hover,.notification-head button:focus-visible{transform:rotate(6deg) scale(1.05);border-color:#67e8f9;background:#0891b2;outline:none}
.notification-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:13px 13px 3px;padding:10px 12px;border:1px solid rgba(103,232,249,.13);border-radius:13px;background:rgba(15,42,73,.4);color:#a9bad0;font:700 8px/1.2 Poppins,sans-serif;letter-spacing:.04em}
.notification-summary span{display:flex;align-items:center;gap:6px}
.notification-summary b{color:#f8fafc;font-size:12px}
.notification-summary i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.notification-list{max-height:min(510px,calc(100vh - 250px));padding:9px 13px 15px}
.notification-list article{position:relative;grid-template-columns:46px minmax(0,1fr) 24px;align-items:center;gap:12px;margin:7px 0;padding:13px;border:1px solid rgba(148,163,184,.11);border-radius:17px;background:linear-gradient(135deg,rgba(15,42,73,.62),rgba(8,27,52,.5));box-shadow:inset 0 1px rgba(255,255,255,.025)}
.notification-list article+article{border-top:1px solid rgba(148,163,184,.11)}
.notification-list article.notification-new{border-color:rgba(52,211,153,.3);background:linear-gradient(105deg,rgba(16,185,129,.19),rgba(6,182,212,.09),rgba(15,42,73,.55));box-shadow:inset 3px 0 #34d399,0 9px 22px rgba(2,6,23,.17)}
.notification-list article.notification-new::after{content:"BARU";position:absolute;right:10px;top:8px;padding:3px 5px;border-radius:999px;background:rgba(16,185,129,.18);color:#a7f3d0;font:800 6px/1 Poppins,sans-serif;letter-spacing:.09em}
.notification-list article.notification-read{opacity:.82}
.notification-list article[data-notification-url]:hover,.notification-list article[data-notification-url]:focus-visible{transform:translateY(-2px);border-color:rgba(103,232,249,.48);background:linear-gradient(105deg,rgba(16,185,129,.24),rgba(6,182,212,.15));box-shadow:0 14px 29px rgba(2,6,23,.31),inset 3px 0 #34d399;outline:none}
.notification-list article>.notification-item-icon{display:grid;width:46px;height:46px;place-items:center;border:1px solid rgba(103,232,249,.2);border-radius:14px;background:linear-gradient(145deg,rgba(16,185,129,.2),rgba(6,182,212,.14));font-size:21px;box-shadow:0 8px 17px rgba(2,6,23,.2),inset 0 1px rgba(255,255,255,.08)}
.notification-item-copy{min-width:0}
.notification-item-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:2px}
.notification-item-meta small{overflow:hidden;color:#67e8f9;font-size:7px;letter-spacing:.11em;text-overflow:ellipsis;white-space:nowrap}
.notification-item-meta time{flex:0 0 auto;color:#8294ac;font:700 7px/1 Inter,sans-serif}
.notification-list h3{margin:5px 0 4px;padding-right:23px;color:#f8fafc;font:700 13px/1.4 Poppins,sans-serif;overflow-wrap:anywhere}
.notification-list p{display:-webkit-box;overflow:hidden;margin:0;color:#b9c8da;font-size:9px;line-height:1.55;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.notification-item-arrow{display:grid;width:23px;height:23px;place-items:center;border-radius:50%;background:rgba(6,182,212,.1);color:#67e8f9;font:700 20px/1 Arial,sans-serif;transition:transform .2s ease,background .2s ease,color .2s ease}
.notification-list article:hover .notification-item-arrow{transform:translateX(2px);background:#06b6d4;color:#fff}
.notification-empty{display:grid;min-height:190px;place-items:center;align-content:center;gap:8px;margin:8px 0;padding:30px 18px;border:1px dashed rgba(103,232,249,.21);border-radius:18px;background:rgba(15,42,73,.26)}
.notification-empty>span{display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(52,211,153,.27);border-radius:50%;background:rgba(16,185,129,.12);color:#6ee7b7;font-size:22px;box-shadow:0 0 25px rgba(16,185,129,.11)}
.notification-empty>b{color:#f8fafc;font:700 13px Poppins,sans-serif}
.notification-empty>p{margin:0;color:#94a3b8;font-size:9px}
.light-mode .notification-panel{border-color:rgba(8,145,178,.22);background:radial-gradient(circle at 94% 2%,rgba(16,185,129,.13),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.98),rgba(236,253,245,.96));color:#0f172a;box-shadow:0 28px 65px rgba(15,23,42,.2)}
.light-mode .notification-head h2,.light-mode .notification-summary b,.light-mode .notification-list h3,.light-mode .notification-empty>b{color:#0f172a}
.light-mode .notification-head p,.light-mode .notification-list p,.light-mode .notification-empty>p{color:#526276}
.light-mode .notification-summary,.light-mode .notification-list article{border-color:rgba(5,150,105,.14);background:rgba(255,255,255,.63)}
.light-mode .notification-list article.notification-new{background:linear-gradient(105deg,rgba(16,185,129,.14),rgba(6,182,212,.08),rgba(255,255,255,.7))}
@keyframes notificationPanelEnter{from{opacity:0;transform:translateY(-9px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){
  .notification-panel{top:70px;right:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 84px);border-radius:21px}
  .notification-head{padding:17px 17px 14px}.notification-head::after{right:17px;left:17px}.notification-head h2{font-size:19px}.notification-head button{width:33px;height:33px}
  .notification-summary{margin:10px 10px 2px;padding:8px 10px}
  .notification-list{max-height:calc(100dvh - 202px);padding:7px 10px 12px}
  .notification-list article{grid-template-columns:40px minmax(0,1fr) 20px;gap:9px;margin:6px 0;padding:10px;border-radius:14px}
  .notification-list article>.notification-item-icon{width:40px;height:40px;border-radius:12px;font-size:18px}
  .notification-list h3{font-size:11px}.notification-list p{font-size:8px}.notification-item-meta small,.notification-item-meta time{font-size:6px}
}

/* Navigasi Portal telefon: dropdown kompak dengan scroll sentuhan dalaman. */
@media(max-width:600px){
  .site-header .hamburger-menu{
    position:absolute!important;
    inset:auto 8px auto auto!important;
    top:calc(100% + 8px)!important;
    width:min(310px,calc(100vw - 16px))!important;
    height:auto!important;
    max-height:min(68dvh,520px)!important;
    padding:9px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    border:1px solid rgba(103,232,249,.32)!important;
    border-radius:20px!important;
    scrollbar-width:thin;
    scrollbar-color:#10b981 rgba(15,23,42,.35)
  }
  .site-header .hamburger-menu.open{display:grid!important;grid-template-columns:1fr!important;align-content:start;gap:4px}
  .site-header .hamburger-menu::before{position:sticky;z-index:2;top:-9px;display:block;padding:12px 10px 11px;background:linear-gradient(180deg,rgba(7,28,53,.99) 76%,rgba(7,28,53,.9));backdrop-filter:blur(12px)}
  .site-header .hamburger-menu a{min-height:42px;padding:6px 8px;border-radius:12px}
  .site-header .hamburger-menu .tvpss-menu-label{position:relative;z-index:1;background:transparent}
  .light-mode .site-header .hamburger-menu::before{background:linear-gradient(180deg,rgba(248,250,252,.99) 76%,rgba(248,250,252,.9))}
  .site-header .hamburger-menu::-webkit-scrollbar{width:6px}
  .site-header .hamburger-menu::-webkit-scrollbar-track{margin:12px 0;border-radius:99px;background:rgba(15,23,42,.22)}
  .site-header .hamburger-menu::-webkit-scrollbar-thumb{border-radius:99px;background:linear-gradient(#34d399,#06b6d4)}
}

/* Notifikasi Terkini: dropdown kompak dengan senarai bertatal sendiri. */
.notification-panel:not([hidden]){
  display:flex;
  flex-direction:column;
  height:auto;
  max-height:min(620px,calc(100dvh - 110px));
  overflow:hidden
}
.notification-panel .notification-head,.notification-panel .notification-summary{flex:0 0 auto}
.notification-panel .notification-list{
  flex:1 1 auto;
  min-height:0;
  max-height:430px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:#10b981 rgba(15,23,42,.25)
}
.notification-panel .notification-list::-webkit-scrollbar{width:6px}
.notification-panel .notification-list::-webkit-scrollbar-track{margin:10px 0;border-radius:99px;background:rgba(15,23,42,.22)}
.notification-panel .notification-list::-webkit-scrollbar-thumb{border-radius:99px;background:linear-gradient(#34d399,#06b6d4)}
@media(max-width:600px){
  .notification-panel{
    top:70px;
    right:8px;
    width:min(310px,calc(100vw - 16px));
    max-height:min(68dvh,520px);
    border-radius:20px
  }
  .notification-panel .notification-list{max-height:min(390px,calc(68dvh - 142px))}
}

/* Butang tarikh 3D untuk Bermula dan Tamat pada Countdown Aktiviti. */
.countdown-event-dates .countdown-event-date{
  isolation:isolate;
  overflow:hidden;
  min-height:62px;
  border:1px solid rgba(255,255,255,.2);
  border-left:1px solid rgba(255,255,255,.2);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(16,185,129,.9),rgba(8,145,178,.82));
  box-shadow:0 7px 0 #055b63,0 13px 24px rgba(2,6,23,.34),inset 0 2px rgba(255,255,255,.26),inset 0 -3px rgba(2,6,23,.17);
  transform:translateY(-3px);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease
}
.countdown-event-dates .countdown-event-date:nth-child(2){background:linear-gradient(145deg,#f59e0b,#d97706 65%,#b45309);box-shadow:0 7px 0 #78350f,0 13px 24px rgba(2,6,23,.34),inset 0 2px rgba(255,255,255,.27),inset 0 -3px rgba(120,53,15,.26)}
.countdown-event-dates .countdown-event-date::before{content:"";position:absolute;z-index:-1;inset:0 0 52% 0;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);pointer-events:none}
.countdown-event-dates .countdown-event-date::after{content:"";position:absolute;right:-20px;top:-22px;width:70px;height:70px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.045);pointer-events:none}
.countdown-event-dates .countdown-event-date:hover{filter:brightness(1.08);transform:translateY(-5px);box-shadow:0 9px 0 #055b63,0 17px 29px rgba(2,6,23,.38),inset 0 2px rgba(255,255,255,.3),inset 0 -3px rgba(2,6,23,.17)}
.countdown-event-dates .countdown-event-date:nth-child(2):hover{box-shadow:0 9px 0 #78350f,0 17px 29px rgba(2,6,23,.38),inset 0 2px rgba(255,255,255,.3),inset 0 -3px rgba(120,53,15,.26)}
.countdown-event-dates .countdown-event-date>span{flex:0 0 auto;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.17);color:#fff;box-shadow:0 5px 11px rgba(2,6,23,.22),inset 0 1px rgba(255,255,255,.25);text-shadow:0 2px 4px rgba(2,6,23,.28)}
.countdown-event-dates .countdown-event-date small{color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(2,6,23,.32)}
.countdown-event-dates .countdown-event-date b{color:#fff;text-shadow:0 2px 5px rgba(2,6,23,.36)}
.light-mode .countdown-event-dates .countdown-event-date b{color:#fff}
@media(max-width:650px){
  .countdown-event-dates{gap:10px;padding-bottom:7px}
  .countdown-event-dates .countdown-event-date{min-height:58px;padding:9px 7px;box-shadow:0 6px 0 #055b63,0 11px 20px rgba(2,6,23,.3),inset 0 2px rgba(255,255,255,.25)}
  .countdown-event-dates .countdown-event-date:nth-child(2){box-shadow:0 6px 0 #78350f,0 11px 20px rgba(2,6,23,.3),inset 0 2px rgba(255,255,255,.25)}
  .countdown-event-dates .countdown-event-date>span{width:32px;height:32px;border-radius:10px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.countdown-event-dates .countdown-event-date{transition:none}}

/* Navigasi Portal tanpa nombor turutan. */
.site-header .hamburger-menu a{grid-template-columns:minmax(0,1fr) 19px;padding-left:14px}
.site-header .hamburger-menu a::before{display:none;content:none}
@media(max-width:600px){
  .site-header .hamburger-menu a{grid-template-columns:minmax(0,1fr) 18px;padding-left:12px}
}

/* Footer portal — susunan premium, kemas dan responsif. */
footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  grid-template-columns:minmax(330px,1.65fr) minmax(190px,.72fr) minmax(210px,.82fr);
  gap:clamp(18px,3vw,42px);
  padding:clamp(55px,6vw,78px) max(5vw,32px) 34px;
  border-top:1px solid rgba(103,232,249,.3);
  background:radial-gradient(circle at 6% 20%,rgba(6,182,212,.2),transparent 28%),radial-gradient(circle at 92% 80%,rgba(16,185,129,.2),transparent 27%),linear-gradient(120deg,#061226,#082e4d 58%,#064e3b)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04)
}
footer::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;background-image:linear-gradient(rgba(103,232,249,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
footer::after{content:"";position:absolute;z-index:-1;right:-110px;top:-125px;width:330px;height:330px;border:1px solid rgba(103,232,249,.11);border-radius:50%;box-shadow:0 0 0 45px rgba(6,182,212,.025),0 0 0 90px rgba(16,185,129,.018);pointer-events:none}
footer>section{position:relative;min-width:0;padding:24px;border:1px solid rgba(103,232,249,.15);border-radius:21px;background:linear-gradient(145deg,rgba(15,42,73,.5),rgba(4,22,44,.4));box-shadow:0 18px 38px rgba(2,6,23,.2),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(10px)}
footer>.footer-school-details{padding:28px;max-width:none;border-color:rgba(52,211,153,.24);background:radial-gradient(circle at 96% 5%,rgba(16,185,129,.15),transparent 29%),linear-gradient(145deg,rgba(8,56,78,.62),rgba(4,25,49,.48))}
footer .footer-school-details .brand{width:max-content;max-width:100%;gap:14px}
footer .footer-school-details .crest{width:54px;height:54px;flex:0 0 54px;border-color:#67e8f9;box-shadow:0 0 24px rgba(6,182,212,.28),0 10px 25px rgba(2,6,23,.32)}
footer .footer-school-details .brand b{color:#a7f3d0;font-size:8px;letter-spacing:.17em}
footer .footer-school-details .brand strong{color:#fff;font-size:20px;letter-spacing:-.015em}
footer .footer-school-details .footer-address-name{margin:24px 0 9px;color:#67e8f9;font-size:12px;letter-spacing:.09em;text-shadow:0 0 16px rgba(6,182,212,.28)}
footer .footer-school-details address{max-width:460px;color:#c6d5e5;font-size:11px;line-height:1.85}
footer .footer-contact{gap:10px;margin-top:18px}
footer .footer-contact a,footer .footer-contact span{display:inline-flex;align-items:center;min-height:34px;margin:0;padding:8px 11px;border:1px solid rgba(103,232,249,.16);border-radius:11px;background:rgba(15,42,73,.48);color:#d8e8f7;font-size:9px}
footer .footer-contact a::before{content:"☎";margin-right:6px;color:#6ee7b7}
footer h3{position:relative;margin:0 0 20px;padding-bottom:12px;color:#a7f3d0;font:800 13px/1.3 Poppins,sans-serif;letter-spacing:.025em}
footer h3::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;border-radius:99px;background:linear-gradient(90deg,#34d399,#22d3ee);box-shadow:0 0 12px rgba(34,211,238,.28)}
footer section>p{color:#aebfd2;font-size:10px;line-height:1.7}
footer section>a{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:37px;margin:0 0 6px;padding:8px 10px;border:1px solid transparent;border-radius:10px;color:#dbeafe;font-size:10px;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
footer section>a::after{content:"›";color:#67e8f9;font:700 18px/1 Arial,sans-serif;transition:transform .2s ease}
footer section>a:hover,footer section>a:focus-visible{transform:translateX(3px);border-color:rgba(103,232,249,.24);background:linear-gradient(90deg,rgba(16,185,129,.14),rgba(6,182,212,.09));color:#fff;outline:none}
footer section>a:hover::after{transform:translateX(2px)}
footer #footerAdmin{margin-top:10px;border-color:rgba(52,211,153,.22);background:linear-gradient(100deg,rgba(16,185,129,.15),rgba(6,182,212,.1));color:#a7f3d0}
footer .social-links{gap:10px;margin:3px 0 17px}
footer .social-links a{width:43px;height:43px;border-color:rgba(103,232,249,.32);border-radius:14px;background:linear-gradient(145deg,rgba(16,185,129,.25),rgba(6,182,212,.15));color:#fff;font-size:17px;box-shadow:0 8px 18px rgba(2,6,23,.28),inset 0 1px rgba(255,255,255,.12)}
footer .social-links a:hover,footer .social-links a:focus-visible{transform:translateY(-4px) scale(1.04);border-color:#67e8f9;background:linear-gradient(145deg,#10b981,#0891b2);box-shadow:0 13px 25px rgba(2,6,23,.34),0 0 18px rgba(6,182,212,.18);outline:none}
footer .footer-bottom-copyright{position:relative;z-index:1;grid-column:1/-1;margin:2px 0 -10px!important;padding-top:25px;border-top-color:rgba(103,232,249,.17);color:#8297ad!important;font-size:9px!important;letter-spacing:.055em}
.light-mode footer{border-top-color:rgba(5,150,105,.2);background:radial-gradient(circle at 6% 20%,rgba(6,182,212,.09),transparent 28%),linear-gradient(120deg,#f8fafc,#ecfdf5 58%,#e0f2fe)!important}
.light-mode footer>section{border-color:rgba(5,150,105,.14);background:rgba(255,255,255,.7);box-shadow:0 16px 35px rgba(15,23,42,.09)}
.light-mode footer .footer-school-details .brand strong,.light-mode footer h3,.light-mode footer section>a{color:#0f172a}
.light-mode footer .footer-school-details address,.light-mode footer section>p{color:#526276}
.light-mode footer .footer-contact a,.light-mode footer .footer-contact span{border-color:rgba(5,150,105,.13);background:rgba(255,255,255,.65);color:#334155}
@media(max-width:900px){footer{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:52px}footer>.footer-school-details{grid-column:1/-1}}
@media(max-width:600px){
  footer{display:grid;grid-template-columns:1fr;gap:12px;padding:38px 14px calc(92px + env(safe-area-inset-bottom,0px))}
  footer>.footer-school-details{grid-column:auto;padding:21px}
  footer>section{padding:19px;border-radius:17px}
  footer .footer-school-details .crest{width:47px;height:47px;flex-basis:47px}
  footer .footer-school-details .brand strong{font-size:16px}
  footer .footer-school-details .footer-address-name{margin-top:19px;font-size:10px}
  footer .footer-school-details address{font-size:9px;line-height:1.75}
  footer .footer-contact{display:flex;gap:7px}
  footer .footer-contact a,footer .footer-contact span{font-size:8px}
  footer h3{margin-bottom:15px;font-size:12px}
  footer .footer-bottom-copyright{grid-column:auto;margin:4px 0 -52px!important;padding:20px 8px 0;text-align:center;line-height:1.65}
}

/* Footer terbuka tanpa kotak berasingan. */
footer>section,footer>.footer-school-details,.light-mode footer>section{
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none
}
@media(max-width:600px){
  footer{gap:27px;padding-right:20px;padding-left:20px}
  footer>section,footer>.footer-school-details{padding:0}
}

/* Slaid bergambar Pencapaian Sekolah; Jejak Kecemerlangan dikekalkan. */
.achievement-photo-slider{position:relative;z-index:1;overflow:hidden;border:1px solid rgba(103,232,249,.28);border-radius:25px;background:linear-gradient(145deg,rgba(8,38,72,.96),rgba(3,15,39,.98));box-shadow:0 24px 58px rgba(1,8,24,.38)}
.achievement-photo-stage{position:relative;height:auto;overflow:hidden;transition:height .45s ease}
.achievement-photo-slide{position:absolute;inset:0 auto auto 0;display:grid;width:100%;grid-template-rows:auto auto;opacity:0;visibility:hidden;transform:scale(1.012);transition:opacity .65s ease,visibility .65s ease,transform .9s ease}
.achievement-photo-slide.active{opacity:1;visibility:visible;transform:scale(1)}
.achievement-photo-frame{position:relative;overflow:hidden;background:transparent}
.achievement-photo-main{display:block;width:100%;height:auto;object-fit:contain;object-position:center;background:transparent}
.achievement-photo-caption{min-height:170px;padding:21px clamp(24px,4vw,48px) 25px;background:radial-gradient(circle at 95% 0,rgba(16,185,129,.16),transparent 34%),linear-gradient(110deg,#082648,#031127);color:#fff}
.achievement-photo-caption small{display:inline-flex;margin-bottom:9px;padding:6px 10px;border:1px solid rgba(251,191,36,.36);border-radius:999px;background:rgba(120,53,15,.25);color:#FDE68A;font:800 8px/1 Poppins,sans-serif;letter-spacing:.11em}
.achievement-photo-caption h3{margin:0;color:#fff;font:800 clamp(20px,2.7vw,31px)/1.28 Poppins,sans-serif}
.achievement-photo-caption p{margin:10px 0 0;color:#CBD5E1;font-size:11px;line-height:1.75;text-align:justify;text-justify:inter-word;white-space:pre-line;hyphens:auto}
.achievement-photo-arrow{position:absolute;z-index:4;top:min(36%,260px);display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(2,15,38,.68);backdrop-filter:blur(12px);color:#fff;font:300 30px/1 Arial,sans-serif;box-shadow:0 12px 25px rgba(2,6,23,.32);transform:translateY(-50%);transition:.22s ease}
.achievement-photo-arrow.prev{left:15px}.achievement-photo-arrow.next{right:15px}.achievement-photo-arrow:hover,.achievement-photo-arrow:focus-visible{border-color:#67E8F9;background:linear-gradient(145deg,#10B981,#0891B2);outline:none;transform:translateY(-50%) scale(1.06)}
.achievement-photo-footer{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid rgba(103,232,249,.14);background:linear-gradient(100deg,rgba(15,42,73,.95),rgba(6,78,59,.72))}
.achievement-photo-dots{display:flex;flex:1;gap:7px;overflow:auto;padding:3px;scrollbar-width:none}.achievement-photo-dots button{flex:0 0 auto;width:8px;height:8px;padding:0;border-radius:99px;background:rgba(148,163,184,.45);transition:.25s ease}.achievement-photo-dots button.active{width:28px;background:linear-gradient(90deg,#FBBF24,#34D399);box-shadow:0 0 11px rgba(52,211,153,.38)}
.achievement-photo-footer>span{flex:none;color:#9FB1C7;font:700 9px Poppins,sans-serif}.achievement-photo-footer>span b{color:#fff;font-size:13px}
.achievement-photo-empty{display:grid;min-height:280px;place-items:center;align-content:center;gap:9px;padding:32px;text-align:center}.achievement-photo-empty>span{font-size:48px}.achievement-photo-empty h3{margin:0;color:#fff}.achievement-photo-empty p{margin:0;color:#AEBFD2}
.light-mode .achievement-photo-slider{border-color:rgba(5,150,105,.2);background:#fff}.light-mode .achievement-photo-caption{background:linear-gradient(110deg,#ECFDF5,#E0F2FE);color:#0F172A}.light-mode .achievement-photo-caption h3{color:#0F172A}.light-mode .achievement-photo-caption p{color:#475569}
@media(max-width:700px){.achievement-photo-slider{border-radius:19px}.achievement-photo-caption{min-height:0;padding:18px 17px 21px}.achievement-photo-caption h3{font-size:18px}.achievement-photo-caption p{font-size:9px;line-height:1.7}.achievement-photo-arrow{top:min(30%,190px);width:38px;height:38px;border-radius:12px;font-size:25px}.achievement-photo-arrow.prev{left:9px}.achievement-photo-arrow.next{right:9px}.achievement-photo-footer{padding:11px 12px}}
@media(prefers-reduced-motion:reduce){.achievement-photo-slide{transition:none}}

/* Ekosistem Digital Sekolah — hab premium dan kad rasmi DELIMa/AINS. */
.digital-ecosystem-card{grid-template-columns:minmax(210px,.62fr) minmax(0,1.6fr);gap:46px;min-height:470px;padding:48px;background:radial-gradient(circle at 9% 52%,rgba(6,182,212,.25),transparent 25%),radial-gradient(circle at 94% 8%,rgba(16,185,129,.14),transparent 27%),linear-gradient(125deg,rgba(4,31,62,.96),rgba(3,16,42,.98))}
.digital-ecosystem-card:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(103,232,249,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.045) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,#000,transparent 72%)}
.digital-ecosystem-visual{width:210px;border-color:rgba(103,232,249,.45);background:radial-gradient(circle,rgba(34,211,238,.24),rgba(37,99,235,.1) 52%,transparent 54%);box-shadow:0 0 58px rgba(6,182,212,.24),inset 0 0 38px rgba(59,130,246,.18)}
.digital-ecosystem-visual:before,.digital-ecosystem-visual:after{content:"";position:absolute;border:1px solid rgba(103,232,249,.17);border-radius:50%;inset:-23px;animation:digitalOrbit 13s linear infinite}.digital-ecosystem-visual:after{inset:-48px;border-style:dashed;animation-direction:reverse;animation-duration:19s}
.digital-ecosystem-visual>span{font-size:72px}.digital-ecosystem-visual>b{position:absolute;display:grid;width:58px;height:58px;place-items:center;border:0;border-radius:0;background:transparent;color:#fff;font:900 19px Poppins,sans-serif;box-shadow:none;transform:rotate(-7deg)}
.digital-hub-icon svg{width:35px;height:35px;overflow:visible;fill:rgba(255,255,255,.13);stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 7px rgba(2,6,23,.4))}
@keyframes digitalOrbit{to{transform:rotate(360deg)}}
.digital-ecosystem-copy h2{max-width:760px;font-size:clamp(31px,4vw,51px);letter-spacing:-.035em}.digital-ecosystem-copy>p:not(.eyebrow){max-width:850px}
.digital-ecosystem-actions{width:100%;max-width:760px}.digital-ecosystem-actions a{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;justify-content:start;padding:13px 15px;background:linear-gradient(135deg,rgba(8,145,178,.8),rgba(37,99,235,.72));backdrop-filter:blur(12px)}.digital-ecosystem-actions a>span{grid-row:1/3;display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:11px;background:rgba(2,8,23,.22);font-size:17px}.digital-ecosystem-actions a>b{font-size:11px}.digital-ecosystem-actions a>small{color:#CFFAFE;font-size:8px}
.digital-platform-heading{display:flex;align-items:center;gap:12px;max-width:760px;margin:24px 0 11px}.digital-platform-heading span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(103,232,249,.34))}.digital-platform-heading span:last-child{background:linear-gradient(90deg,rgba(103,232,249,.34),transparent)}.digital-platform-heading p{margin:0;color:#A5F3FC;font:800 8px Poppins,sans-serif;letter-spacing:.16em;white-space:nowrap}
.digital-platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:760px}.digital-platform-card{position:relative;display:grid;grid-template-columns:65px minmax(0,1fr);align-items:center;gap:14px;min-height:118px;padding:18px;border:1px solid rgba(251,191,36,.32);border-radius:19px;overflow:hidden;color:#fff;text-decoration:none;box-shadow:0 18px 38px rgba(2,6,23,.3),inset 0 1px rgba(255,255,255,.09);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}.digital-platform-card:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 12% 50%,rgba(251,191,36,.18),transparent 32%),linear-gradient(130deg,rgba(120,53,15,.42),rgba(8,47,73,.76))}.digital-platform-card.ains:before{background:radial-gradient(circle at 12% 50%,rgba(52,211,153,.2),transparent 32%),linear-gradient(130deg,rgba(6,78,59,.58),rgba(8,47,73,.76))}.digital-platform-card:hover{transform:translateY(-5px);border-color:#FBBF24;box-shadow:0 24px 45px rgba(2,6,23,.38),0 0 25px rgba(251,191,36,.14)}
.digital-platform-logo{display:grid;width:62px;height:62px;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:19px;background:linear-gradient(145deg,#FBBF24,#F59E0B 55%,#B45309);color:#fff;font:900 29px Poppins,sans-serif;text-shadow:0 3px 7px rgba(120,53,15,.45);box-shadow:inset 0 2px rgba(255,255,255,.35),0 12px 23px rgba(2,6,23,.32);transform:perspective(100px) rotateX(7deg) rotateY(-5deg)}.ains .digital-platform-logo{background:linear-gradient(145deg,#34D399,#10B981 55%,#047857)}.digital-platform-card small{display:block;margin-bottom:3px;color:#FDE68A;font:700 7px Poppins,sans-serif;letter-spacing:.08em}.digital-platform-card.ains small{color:#A7F3D0}.digital-platform-card b{display:block;color:#fff;font:900 20px Poppins,sans-serif;letter-spacing:-.02em}.digital-platform-card p{margin:3px 0 0!important;color:#DCE8F3!important;font-size:8px!important;line-height:1.45!important;text-align:left!important}
.light-mode .digital-platform-card{color:#0F172A}.light-mode .digital-platform-card:before{background:linear-gradient(135deg,#FFFBEB,#E0F2FE)}.light-mode .digital-platform-card.ains:before{background:linear-gradient(135deg,#ECFDF5,#E0F2FE)}.light-mode .digital-platform-card b{color:#0F172A}.light-mode .digital-platform-card p{color:#475569!important}
@media(max-width:820px){.digital-ecosystem-card{grid-template-columns:1fr;gap:31px;padding:35px 25px;text-align:center}.digital-ecosystem-visual{width:165px}.digital-ecosystem-copy>p:not(.eyebrow){text-align:center}.digital-ecosystem-actions,.digital-platform-grid,.digital-platform-heading{width:100%;max-width:760px;margin-left:auto;margin-right:auto}.digital-platform-card{text-align:left}}
@media(max-width:520px){.digital-ecosystem-card{padding:30px 16px;border-radius:23px}.digital-ecosystem-visual{width:145px}.digital-ecosystem-actions{gap:8px}.digital-ecosystem-actions a{grid-template-columns:30px 1fr;padding:10px}.digital-ecosystem-actions a>span{width:28px;height:28px;font-size:14px}.digital-platform-grid{gap:8px}.digital-platform-card{grid-template-columns:43px minmax(0,1fr);gap:9px;min-height:105px;padding:12px 10px}.digital-platform-logo{width:42px;height:42px;border-radius:13px;font-size:20px}.digital-platform-card small{font-size:5px}.digital-platform-card b{font-size:15px}.digital-platform-card p{font-size:7px!important}.digital-platform-heading p{font-size:7px}}
@media(prefers-reduced-motion:reduce){.digital-ecosystem-visual:before,.digital-ecosystem-visual:after{animation:none}}

/* Badge trend kehadiran yang lebih jelas dan kemas. */
.weekly-attendance-trend{
  display:inline-grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:9px;
  width:fit-content;
  max-width:100%;
  margin:10px 0 14px;
  padding:7px 12px 7px 7px;
  border-radius:15px;
  font-size:inherit;
  line-height:1.25;
  text-align:left;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 8px 20px rgba(2,6,23,.15)
}
.weekly-attendance-trend .weekly-trend-icon{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid currentColor;
  border-radius:11px;
  background:rgba(2,6,23,.16);
  font:900 20px/1 Poppins,sans-serif
}
.weekly-attendance-trend .weekly-trend-copy{display:grid;gap:2px;min-width:0}
.weekly-attendance-trend .weekly-trend-copy strong{margin:0;color:inherit;font:800 10px/1.2 Poppins,sans-serif;text-shadow:none}
.weekly-attendance-trend .weekly-trend-copy small{color:inherit;font:650 8px/1.35 Inter,sans-serif;opacity:.82}
.weekly-attendance-trend.up{background:linear-gradient(120deg,rgba(16,185,129,.22),rgba(5,150,105,.1));box-shadow:inset 3px 0 #34d399,inset 0 1px rgba(255,255,255,.08),0 8px 20px rgba(16,185,129,.1)}
.weekly-attendance-trend.down{background:linear-gradient(120deg,rgba(225,29,72,.2),rgba(190,18,60,.09));box-shadow:inset 3px 0 #fb7185,inset 0 1px rgba(255,255,255,.07),0 8px 20px rgba(225,29,72,.09)}
.weekly-attendance-trend.steady{background:linear-gradient(120deg,rgba(202,138,4,.2),rgba(161,98,7,.08));box-shadow:inset 3px 0 #facc15,inset 0 1px rgba(255,255,255,.07),0 8px 20px rgba(202,138,4,.08)}
.weekly-attendance-trend.none{border-color:rgba(148,163,184,.25);background:rgba(148,163,184,.09);color:#cbd5e1;box-shadow:inset 3px 0 #64748b,inset 0 1px rgba(255,255,255,.06)}
.weekly-stat-grid .weekly-attendance-trend{display:grid;width:100%;margin-top:12px}
.light-mode .weekly-attendance-trend.none{color:#475569}
@media(max-width:600px){.weekly-attendance-trend{grid-template-columns:31px minmax(0,1fr);padding:6px 10px 6px 6px}.weekly-attendance-trend .weekly-trend-icon{width:31px;height:31px;font-size:18px}}

/* Statistik Pelawat — kad analitik digital premium. */
.visitor-card-section{position:relative;overflow:hidden;padding-top:36px;padding-bottom:70px;background:radial-gradient(circle at 12% 35%,rgba(6,182,212,.1),transparent 28%),linear-gradient(180deg,rgba(3,16,42,.82),rgba(3,12,31,.72))}
.visitor-card-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(103,232,249,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.visitor-card{position:relative;isolation:isolate;overflow:hidden;gap:42px;padding:34px 38px;border-color:rgba(103,232,249,.3);border-radius:27px;background:radial-gradient(circle at 3% 15%,rgba(16,185,129,.24),transparent 31%),radial-gradient(circle at 96% 90%,rgba(37,99,235,.18),transparent 34%),linear-gradient(125deg,rgba(7,37,69,.96),rgba(3,16,42,.98));box-shadow:0 28px 68px rgba(0,7,25,.46),0 0 32px rgba(6,182,212,.1),inset 0 1px rgba(255,255,255,.08)}
.visitor-card::before{content:"";position:absolute;z-index:-1;right:-80px;top:-110px;width:280px;height:280px;border:1px solid rgba(103,232,249,.12);border-radius:50%;box-shadow:0 0 0 35px rgba(103,232,249,.025),0 0 0 70px rgba(103,232,249,.018)}
.visitor-card-heading{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:16px;min-width:315px}
.visitor-card-heading>.visitor-heading-icon{display:grid;width:64px;height:64px;place-items:center;border:1px solid rgba(103,232,249,.45);border-radius:20px;background:linear-gradient(145deg,rgba(16,185,129,.9),rgba(6,182,212,.82) 58%,rgba(37,99,235,.8));box-shadow:0 13px 28px rgba(2,6,23,.3),0 0 24px rgba(6,182,212,.2),inset 0 2px rgba(255,255,255,.24)}
.visitor-heading-icon svg,.visitor-stat-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.visitor-card-heading .eyebrow{margin:0 0 5px;color:#6ee7b7;font-size:8px;letter-spacing:.17em}
.visitor-card-heading h2{margin:0;color:#f8fafc;font:800 clamp(23px,2.5vw,32px)/1.15 Poppins,sans-serif;letter-spacing:-.025em}
.visitor-card-intro{max-width:330px;margin:6px 0 0;color:#a9bad0;font-size:9px;line-height:1.55}
.visitor-live{position:absolute;left:0;top:calc(100% + 14px);display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid rgba(52,211,153,.25);border-radius:999px;background:rgba(16,185,129,.1);color:#a7f3d0;font:800 7px/1 Poppins,sans-serif;letter-spacing:.1em}
.visitor-live i{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;animation:visitorLivePulse 1.8s ease-in-out infinite}
.visitor-card-stats{gap:15px;max-width:690px}
.visitor-card-stats>div{position:relative;overflow:hidden;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;align-content:center;gap:14px;min-height:132px;padding:20px 22px;border-color:rgba(103,232,249,.22);border-radius:21px;background:linear-gradient(145deg,rgba(15,56,79,.78),rgba(15,23,42,.65));box-shadow:inset 0 1px rgba(255,255,255,.055),0 14px 30px rgba(2,6,23,.22);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.visitor-card-stats>div::after{content:"";position:absolute;right:-25px;bottom:-28px;width:100px;height:100px;border:1px solid rgba(103,232,249,.08);border-radius:50%;background:rgba(6,182,212,.025)}
.visitor-card-stats>div:hover{transform:translateY(-4px);border-color:rgba(103,232,249,.55);box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 38px rgba(2,6,23,.3),0 0 20px rgba(6,182,212,.1)}
.visitor-card-stats .visitor-stat-icon{grid-row:auto;display:grid;width:56px;height:56px;place-items:center;border:1px solid rgba(103,232,249,.3);border-radius:17px;background:linear-gradient(145deg,rgba(16,185,129,.24),rgba(6,182,212,.16));color:#67e8f9;box-shadow:inset 0 1px rgba(255,255,255,.1),0 10px 22px rgba(2,6,23,.2)}
.visitor-card-stats .visitor-total .visitor-stat-icon{border-color:rgba(167,139,250,.35);background:linear-gradient(145deg,rgba(124,58,237,.22),rgba(37,99,235,.16));color:#c4b5fd}
.visitor-card-stats>div>div{position:relative;z-index:1;display:grid;min-width:0}
.visitor-card-stats small{order:0;margin:0 0 7px;color:#9fb8cd;font:800 7px/1 Poppins,sans-serif;letter-spacing:.16em}
.visitor-card-stats b{order:1;color:#6ee7b7;font:850 clamp(31px,3vw,42px)/.95 Poppins,sans-serif;letter-spacing:-.035em;text-shadow:0 0 22px rgba(16,185,129,.35)}
.visitor-card-stats .visitor-total b{color:#a5b4fc;text-shadow:0 0 22px rgba(99,102,241,.32)}
.visitor-card-stats p{order:2;margin:8px 0 0;color:#d7e2ee;font-size:9px;line-height:1.35}
.light-mode .visitor-card-section{background:linear-gradient(180deg,#f8fafc,#ecfdf5)}
.light-mode .visitor-card{border-color:rgba(8,145,178,.22);background:radial-gradient(circle at 3% 15%,rgba(16,185,129,.14),transparent 31%),linear-gradient(125deg,#fff,#ecfeff);box-shadow:0 25px 58px rgba(15,23,42,.13)}
.light-mode .visitor-card-heading h2,.light-mode .visitor-card-stats p{color:#0f172a}.light-mode .visitor-card-intro{color:#526276}.light-mode .visitor-card-stats>div{border-color:rgba(5,150,105,.15);background:rgba(255,255,255,.72)}
@keyframes visitorLivePulse{50%{opacity:.45;transform:scale(.75)}}
@media(max-width:850px){.visitor-card{gap:36px}.visitor-card-heading{min-width:0}.visitor-live{left:auto;right:0;top:4px}}
@media(max-width:560px){.visitor-card-section{padding-top:24px;padding-bottom:50px}.visitor-card{gap:28px;padding:24px 17px;border-radius:22px}.visitor-card-heading{grid-template-columns:52px minmax(0,1fr);gap:12px}.visitor-card-heading>.visitor-heading-icon{width:52px;height:52px;border-radius:16px}.visitor-heading-icon svg{width:26px;height:26px}.visitor-card-heading h2{font-size:21px}.visitor-card-intro{padding-right:0;font-size:8px}.visitor-live{position:static;grid-column:1/-1;width:max-content;margin-top:-2px}.visitor-card-stats{grid-template-columns:1fr;gap:11px}.visitor-card-stats>div{grid-template-columns:48px minmax(0,1fr);min-height:105px;padding:15px 17px;border-radius:17px}.visitor-card-stats .visitor-stat-icon{width:46px;height:46px;border-radius:14px}.visitor-stat-icon svg{width:25px;height:25px}.visitor-card-stats b{font-size:32px}}
@media(prefers-reduced-motion:reduce){.visitor-live i{animation:none}.visitor-card-stats>div{transition:none}}

/* Penjajaran kemas label status dan ikon analitik Statistik Pelawat. */
.visitor-heading-copy{display:grid;justify-items:start;min-width:0}
.visitor-live{position:static;left:auto;top:auto;display:inline-flex;margin-top:10px;padding:6px 10px;border-color:rgba(52,211,153,.3);background:linear-gradient(100deg,rgba(16,185,129,.17),rgba(6,182,212,.09));box-shadow:inset 0 1px rgba(255,255,255,.07)}
.visitor-live span{font:800 7px/1 Poppins,sans-serif;letter-spacing:.11em;white-space:nowrap}
@media(max-width:850px){.visitor-live{position:static;left:auto;right:auto;top:auto}}
@media(max-width:560px){.visitor-heading-copy{align-content:center}.visitor-live{grid-column:auto;width:max-content;margin-top:8px}.visitor-card-heading{align-items:start}}

/* Mod Cerah menyeluruh — latar cerah, tulisan gelap dan kontras konsisten. */
body.light-mode{
  --ink:#10253f;
  --muted:#516579;
  --cream:#f4f9fc;
  --paper:#ffffff;
  --line:rgba(15,75,105,.14);
  --shadow:0 18px 42px rgba(30,64,88,.12);
  color:#10253f;
  background:radial-gradient(circle at 88% 3%,rgba(34,211,238,.14),transparent 26%),radial-gradient(circle at 4% 36%,rgba(52,211,153,.12),transparent 25%),linear-gradient(180deg,#f8fcff,#eef8f6 56%,#f4f9fc)
}
.light-mode :is(h1,h2,h3,h4,h5,h6,strong,b){color:#10253f}
.light-mode :is(p,small,label,li,td,address){color:#516579}
.light-mode .eyebrow,.light-mode .tag{color:#057a67}
.light-mode .topbar{background:linear-gradient(90deg,#e6f7f3,#e4f5fb,#edf3ff);color:#1e425b;border-bottom:1px solid rgba(8,145,178,.13)}
.light-mode .site-header{background:rgba(255,255,255,.92);border-bottom-color:rgba(8,145,178,.15);box-shadow:0 8px 28px rgba(30,64,88,.09);backdrop-filter:blur(18px)}
.light-mode .site-header .brand,.light-mode .site-header nav a{color:#17344e}
.light-mode .site-header nav a:hover{color:#047857}
.light-mode .site-header .crest{border-color:#10b981;background:radial-gradient(circle at 50% 40%,#fff 0 37%,#a7f3d0 39% 44%,#effcf8 46%);color:#065f46;box-shadow:0 0 18px rgba(16,185,129,.16)}
.light-mode .hero{color:#10253f;background:linear-gradient(105deg,rgba(248,252,255,.94),rgba(236,253,245,.82)),radial-gradient(circle at 72% 18%,rgba(34,211,238,.2),transparent 25%),var(--hero-slide-image,none) center/cover}
.light-mode .hero::before{background:linear-gradient(90deg,rgba(255,255,255,.16),transparent)}
.light-mode .hero :is(h1,h2,h3),.light-mode .hero-stats b{color:#10253f;text-shadow:none}
.light-mode .hero p:not(.eyebrow),.light-mode .hero-stats span{color:#405c70}
.light-mode .hero-stats div{border-left-color:rgba(5,150,105,.34)}
.light-mode .hero .eyebrow{color:#047857}
.light-mode :is(.section,.section.alt,.directory,.stats-section,.visitor-card-section){background:transparent}
.light-mode :is(.card,.info-card,.directory-card,.stat,.stat-public,.notice,.leader-card,.feature-card,.gallery-card,.calendar-card,.digital-card,.achievement-showcase,.visitor-card){border-color:rgba(8,145,178,.16);background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,250,248,.9));color:#10253f;box-shadow:0 16px 38px rgba(30,64,88,.1)}
.light-mode :is(.card,.info-card,.directory-card,.stat-public,.notice,.leader-card,.feature-card,.gallery-card,.calendar-card,.digital-card,.achievement-showcase,.visitor-card) :is(h2,h3,h4,b,strong){color:#10253f;text-shadow:none}
.light-mode :is(.card,.info-card,.directory-card,.stat-public,.notice,.leader-card,.feature-card,.gallery-card,.calendar-card,.digital-card,.achievement-showcase,.visitor-card) p{color:#516579}
.light-mode .card-link,.light-mode .directory-card>b{color:#047857}
.light-mode .page-hero{color:#10253f;background:radial-gradient(circle at 84% 10%,rgba(34,211,238,.17),transparent 30%),linear-gradient(120deg,#effcf8,#e7f6fd 58%,#eef2ff);border-bottom:1px solid rgba(8,145,178,.13)}
.light-mode .page-hero::after{opacity:.28}
.light-mode .page-hero :is(h1,h2,h3){color:#10253f;text-shadow:none}
.light-mode .page-hero>p:last-child,.light-mode .page-hero p{color:#405c70}
.light-mode :is(.hamburger-menu,.notification-panel,.utility-panel,.smart-tool-panel){border-color:rgba(8,145,178,.2);background:radial-gradient(circle at 95% 3%,rgba(34,211,238,.12),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,250,248,.97));color:#10253f;box-shadow:0 24px 58px rgba(30,64,88,.18)}
.light-mode .site-header .hamburger-menu a{color:#17344e}
.light-mode .site-header .hamburger-menu a:hover,.light-mode .site-header .hamburger-menu a:focus-visible{background:linear-gradient(100deg,rgba(16,185,129,.13),rgba(6,182,212,.1));color:#064e3b}
.light-mode .site-header .hamburger-menu::before{color:#047857;background:linear-gradient(180deg,rgba(255,255,255,.98) 76%,rgba(244,252,250,.92))}
.light-mode .notification-head{background:linear-gradient(105deg,rgba(16,185,129,.11),rgba(6,182,212,.07),transparent)}
.light-mode .notification-head h2,.light-mode .notification-list h3,.light-mode .notification-summary b{color:#10253f}
.light-mode .notification-head p,.light-mode .notification-list p{color:#526579}
.light-mode .notification-summary,.light-mode .notification-list article{border-color:rgba(5,150,105,.14);background:rgba(255,255,255,.72)}
.light-mode :is(input,textarea,select){border-color:rgba(8,145,178,.22);background:#fff;color:#10253f;box-shadow:inset 0 1px 2px rgba(30,64,88,.04)}
.light-mode :is(input,textarea)::placeholder{color:#7a8d9e}
.light-mode dialog,.light-mode .login-view,.light-mode .dash-main,.light-mode .editor-head,.light-mode .editor-actions{background:#f8fcff;color:#10253f}
.light-mode .content-table,.light-mode .log-list{border-color:rgba(8,145,178,.15);background:#fff;color:#10253f}
.light-mode .content-table th{background:#eaf7f5;color:#31566d}.light-mode .content-table td{color:#243e52;border-color:rgba(8,145,178,.11)}
.light-mode .weekly-dashboard{--weekly-card:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,250,247,.93));color:#10253f;background:radial-gradient(circle at 8% 8%,rgba(6,182,212,.1),transparent 24%),radial-gradient(circle at 92% 34%,rgba(16,185,129,.1),transparent 25%),#f4f9fc}
.light-mode .weekly-report-hero{color:#10253f;background:radial-gradient(circle at 18% 25%,rgba(6,182,212,.14),transparent 25%),linear-gradient(125deg,#f8fcff,#eafaf5 50%,#e8f4ff)}
.light-mode .weekly-report-hero :is(h1,h2,h3),.light-mode .weekly-period b{color:#10253f;text-shadow:none}
.light-mode .weekly-period :is(span,p){color:#516579}
.light-mode .weekly-quick-nav{background:rgba(255,255,255,.91);border-bottom-color:rgba(5,150,105,.18)}
.light-mode .weekly-quick-nav a{color:#23445c}.light-mode .weekly-quick-nav a:hover{background:rgba(16,185,129,.12);color:#047857}
.light-mode :is(.weekly-section,.weekly-summary,.weekly-stat-grid article,.weekly-ranking-card,.weekly-profile-card,.weekly-achievement-card,.weekly-kpi>div,.weekly-late-summary article,.weekly-bars article,.weekly-duty-card,.weekly-duty-list section,.weekly-podium article,.weekly-champion-card){border-color:rgba(8,145,178,.14);background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(238,250,248,.88));color:#10253f;box-shadow:0 14px 34px rgba(30,64,88,.09)}
.light-mode :is(.weekly-section,.weekly-summary,.weekly-stat-grid article,.weekly-ranking-card,.weekly-profile-card,.weekly-achievement-card,.weekly-kpi>div,.weekly-late-summary article,.weekly-bars article,.weekly-duty-card,.weekly-duty-list section,.weekly-podium article,.weekly-champion-card) :is(h2,h3,h4,b,strong){color:#10253f;text-shadow:none}
.light-mode :is(.weekly-section,.weekly-summary,.weekly-stat-grid article,.weekly-ranking-card,.weekly-profile-card,.weekly-achievement-card,.weekly-kpi>div,.weekly-late-summary article,.weekly-bars article,.weekly-duty-card,.weekly-duty-list section,.weekly-podium article,.weekly-champion-card) p{color:#516579}
.light-mode .weekly-stat-grid strong,.light-mode .weekly-kpi strong,.light-mode .weekly-late-summary article b{color:#047857}
.light-mode footer{border-top-color:rgba(5,150,105,.2);background:radial-gradient(circle at 6% 20%,rgba(6,182,212,.09),transparent 28%),linear-gradient(120deg,#f8fcff,#ecfdf5 58%,#e8f4ff)!important;color:#10253f}
.light-mode footer .brand,.light-mode footer .footer-school-details .brand strong,.light-mode footer h3,.light-mode footer section>a{color:#10253f}
.light-mode footer p,.light-mode footer address,.light-mode footer .footer-bottom-copyright{color:#526579!important}
.light-mode footer .footer-contact a,.light-mode footer .footer-contact span{border-color:rgba(5,150,105,.13);background:rgba(255,255,255,.7);color:#334155}
.light-mode .floating-quick-menu,.light-mode .site-utilities{border-color:rgba(8,145,178,.2);background:rgba(255,255,255,.88);box-shadow:0 16px 38px rgba(30,64,88,.15);backdrop-filter:blur(18px)}
.light-mode .floating-quick-menu button,.light-mode .site-utilities button{color:#17344e}
@media(max-width:600px){.light-mode .hero{background:linear-gradient(105deg,rgba(248,252,255,.94),rgba(236,253,245,.86)),var(--hero-slide-image,none) center/cover}.light-mode .weekly-report-hero{padding-top:45px}.light-mode .site-header .hamburger-menu{background:rgba(255,255,255,.98)}}

/* Nama sekolah pada header kekal gelap dalam Mod Cerah. */
.light-mode .site-header .brand strong::before{color:#10253f!important;text-shadow:none!important}
.light-mode .site-header .brand strong::after{color:#31566d!important;text-shadow:none!important}

/* Pilihan bahasa BM / English pada kelompok kawalan header. */
.header-control-cluster .language-trigger{
  display:none!important;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:0 0 auto;
  min-width:54px;
  height:40px;
  padding:0 10px;
  border:1px solid rgba(207,250,254,.3)!important;
  border-radius:13px;
  background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.18),transparent 34%),linear-gradient(145deg,rgba(15,55,82,.52),rgba(8,47,73,.29))!important;
  color:#ecfeff;
  text-shadow:0 0 10px rgba(103,232,249,.34);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 8px 22px rgba(2,6,23,.25),0 0 15px rgba(6,182,212,.08)!important;
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease
}
.header-control-cluster .language-trigger .language-globe{position:relative;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:transparent;box-shadow:none;line-height:1}
.header-control-cluster .language-trigger .language-globe::after{content:none}
.header-control-cluster .language-trigger .language-globe svg{width:17px;height:17px;overflow:visible;fill:none;stroke:#d9fbff;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;filter:none;transition:transform .3s ease,stroke .3s ease}
.header-control-cluster .language-trigger b{color:inherit;font:800 9px/1 Poppins,sans-serif;letter-spacing:.08em}
.header-control-cluster .language-trigger:hover,.header-control-cluster .language-trigger:focus-visible,.header-control-cluster .language-trigger[aria-pressed="true"]{transform:translateY(-2px);border-color:rgba(165,243,252,.75)!important;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.22),transparent 34%),linear-gradient(135deg,rgba(6,182,212,.72),rgba(59,130,246,.66))!important;box-shadow:inset 0 1px rgba(255,255,255,.18),0 11px 27px rgba(2,6,23,.3),0 0 24px rgba(6,182,212,.3)!important;outline:none}
.header-control-cluster .language-trigger:hover .language-globe svg,.header-control-cluster .language-trigger:focus-visible .language-globe svg{transform:rotate(12deg) scale(1.08);stroke:#fff;filter:none}
.header-control-cluster .language-trigger:focus-visible{outline:2px solid #fbbf24;outline-offset:3px}
.light-mode .header-control-cluster .language-trigger{border-color:rgba(8,145,178,.27)!important;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(207,250,254,.42))!important;color:#075985;text-shadow:none;box-shadow:inset 0 1px rgba(255,255,255,.8),0 8px 20px rgba(30,64,88,.11)!important}
.light-mode .header-control-cluster .language-trigger .language-globe svg{stroke:#0783a4;filter:none}
.light-mode .header-control-cluster .language-trigger:hover,.light-mode .header-control-cluster .language-trigger:focus-visible,.light-mode .header-control-cluster .language-trigger[aria-pressed="true"]{background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.9),transparent 34%),linear-gradient(135deg,rgba(207,250,254,.95),rgba(167,243,208,.85))!important;color:#065f46}
@media(max-width:600px){.header-control-cluster .language-trigger{min-width:43px;height:32px;gap:3px;padding:0 6px;border-radius:10px}.header-control-cluster .language-trigger .language-globe{width:17px;height:17px}.header-control-cluster .language-trigger .language-globe svg{width:14px;height:14px}.header-control-cluster .language-trigger b{font-size:7px}}

/* Kekalkan nombor Statistik Utama kemas dan konsisten pada semua peranti. */
.stats-section .stat-public > b{
  display:block;
  width:fit-content;
  max-width:100%;
  white-space:nowrap;
  overflow-wrap:normal;
  font-variant-numeric:tabular-nums lining-nums;
  transform:translateZ(0);
}
@media(min-width:601px) and (max-width:900px){
  .stats-section .stat-public > b{font-size:clamp(34px,6vw,44px)}
}
@media(max-width:600px){
  .stats-section .stat-public > b{
    position:relative;
    z-index:1;
    font-family:'Poppins',sans-serif;
    font-size:clamp(39px,11vw,48px);
    font-weight:800;
    line-height:1;
    letter-spacing:-.035em;
    color:#6EE7F9;
    text-shadow:none;
    animation:none;
    filter:none;
  }
  .stats-section .stat-public{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    align-content:center;
    min-height:0;
    padding:19px;
    column-gap:16px;
    border-radius:20px;
  }
  .stats-section .stat-public > span{
    grid-row:1/4;
    align-self:center;
    width:50px;
    height:50px;
    margin:0;
    border-radius:16px;
    font-size:24px;
  }
  .stats-section .stat-public h3{
    margin:7px 0 3px;
    font-size:11px;
    line-height:1.35;
  }
  .stats-section .stat-public p{
    align-self:auto;
    font-size:9px;
    line-height:1.45;
  }
  .stats-section .stat-public::before{border-radius:20px 20px 0 0}
  .light-mode .stats-section .stat-public > b{
    color:#047857;
    text-shadow:none;
  }
}