:root{color-scheme:dark;--navy: #0a1424;--navy-deep: #070e1b;--gold: #efc575;--gold-bright: #ffe0a0;--white: #f4f7fd;--muted: #a9b6ce;--line: rgba(181,201,235,.12)}*{box-sizing:border-box}html{min-width:320px;background:var(--navy-deep)}body.portal-home{margin:0;min-width:320px;color:var(--white);font-family:Segoe UI,Arial,sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 85% 0%,#142743 0,transparent 55%),radial-gradient(ellipse at 0% 100%,#17213d,transparent 50%),#070e1b}a,button{font:inherit}a,button{color:inherit}svg{display:block}:focus-visible{outline:3px solid var(--gold-bright);outline-offset:4px}.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:12px 20px;background:var(--gold-bright);color:var(--navy-deep);border-radius:10px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);white-space:nowrap;overflow:hidden;border:0}.portal-shell{display:grid;grid-template-columns:244px minmax(0,1fr);gap:30px;max-width:1740px;min-height:100svh;padding:20px;margin:0 auto}.school-identity{isolation:isolate;position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:24px;padding:28px 20px 18px;border:1px solid #95baf326;border-radius:25px;background:radial-gradient(ellipse at 50% 0,#23457499,transparent 62%),linear-gradient(175deg,#162e50,#0f1c30 75%);box-shadow:inset 0 1px #ffffff09;overflow:hidden}.school-identity:before{content:"";position:absolute;z-index:-1;width:320px;height:320px;top:-225px;left:50%;transform:translate(-50%);border:1px solid #aacdff1f;border-radius:50%;box-shadow:0 0 0 28px #aacdff05,0 0 0 56px #aacdff03}.school-identity:after{content:"";position:absolute;top:0;left:40px;right:40px;height:1px;background:linear-gradient(90deg,transparent,#9bb8e58c,transparent)}.identity-top{text-align:center}.identity-mark{display:grid;place-items:center;width:120px;height:128px;padding:0;margin:0 auto 21px;border:0;border-radius:0;background:none;box-shadow:none}.identity-mark img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 5px 9px #0003)}.identity-copy>span{display:block;margin-bottom:8px;color:#b7c9e4;font-size:12px;font-weight:700;letter-spacing:.27em}.identity-copy>strong{display:block;font-size:24px;font-weight:800;line-height:1.12;letter-spacing:-.045em}.identity-name{white-space:nowrap}.identity-location{display:block;margin-top:12px;color:var(--gold);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}.identity-rule{display:flex;align-items:center;justify-content:center;gap:9px;margin:20px auto 16px;width:100%;max-width:150px;color:#efc575b3;font-size:10px}.identity-rule:before{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#efc57555)}.identity-rule:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#efc57555,transparent)}.identity-motto{margin:0;padding:11px 8px;border:1px solid #b0c8ef10;border-radius:11px;background:#b0c8ef07;color:#d4e0f1;font-size:12px;font-weight:500;line-height:1.7}.identity-bottom{position:relative;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}.identity-campus{position:relative;flex:1;min-height:165px;margin:0;border:1px solid #a3bfd626;border-radius:15px;background:#10213a;overflow:hidden}.identity-campus img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:54% center;object-position:54% center;opacity:.92}.identity-campus:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,#07172eef,#07172e20 65%,#07172e05)}.identity-photo-copy{position:absolute;z-index:1;left:13px;right:13px;bottom:15px;text-align:left}.identity-photo-copy>span{display:block;color:#f3f7fd;font-size:12px;font-weight:700}.identity-photo-copy small{display:flex;align-items:center;gap:5px;margin-top:7px;color:#bacce2;font-size:9px;line-height:1.5}.identity-photo-copy svg{width:12px;height:12px;flex-shrink:0;color:var(--gold)}.identity-caption{display:flex;align-items:center;justify-content:center;gap:7px;min-height:30px;padding:7px 4px 0;color:#aabed8;font-size:8px;font-weight:600;letter-spacing:.07em}.identity-caption svg{width:13px;height:13px;color:#95afd0}.identity-address{display:block;margin-top:11px;color:#91a7c3;font-size:10px}.portal-stage{isolation:isolate;position:relative;display:flex;flex-direction:column;min-width:0;padding-right:10px}.campus-backdrop{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 70% 0,#306bb812,transparent 50%)}.stage-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:45px}.portal-wordmark{display:flex;align-items:center;gap:9px;color:#bed0ea;font-size:10px;font-weight:700;letter-spacing:.15em;white-space:nowrap}.portal-wordmark>span{color:var(--gold);font-size:22px}.utility-panel{display:flex;align-items:center;gap:9px;min-height:35px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:#111e3266;color:#a9b9d1;font-size:10px;white-space:nowrap}.utility-panel time{color:#e8f0ff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}.utility-divider{width:1px;height:13px;margin-inline:2px;background:#ffffff20}.timezone{color:var(--gold);font-size:9px}.welcome-heading{margin:20px 0 24px}.eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 9px;color:var(--gold);font-size:9px;font-weight:700;letter-spacing:.17em}.eyebrow:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px #efc57560}.welcome-heading h1{margin:0;font-size:40px;font-weight:800;line-height:1.14;letter-spacing:-.045em}.welcome-heading h1 strong{color:var(--gold-bright);font-weight:800;background:linear-gradient(100deg,#ffe5ac,#f5bd61);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.welcome-description{margin:11px 0 0;color:#a9b9d1;font-size:13px;line-height:1.65}.portal-section{min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-heading h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em}.availability{display:flex;align-items:center;gap:6px;color:#9edec7;font-size:10px}.availability i{width:5px;height:5px;border-radius:50%;background:#78dbb3;box-shadow:0 0 8px #78dbb33d}.portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.portal-card{position:relative;min-width:0;text-decoration:none}.portal-card.is-active{--accent: 126,175,255;display:flex;align-items:center;gap:14px;min-height:122px;padding:21px 18px;border:1px solid rgba(var(--accent),.24);border-radius:18px;background:linear-gradient(125deg,rgba(var(--accent),.1),#102039 85%);box-shadow:0 7px 18px #02071125,inset 0 1px #ffffff06;color:#f3f6ff;text-align:left;cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s,background .22s}.portal-card.is-active:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 100% 0,rgba(var(--accent),.1),transparent 65%)}.portal-card.is-active[data-portal=siswa]{--accent: 182,154,255}.portal-card.is-active[data-portal=absensi]{--accent: 91,222,179}.portal-card.is-active[data-portal=keuangan]{--accent: 255,201,107}.portal-card.is-active[data-portal=spmb]{--accent: 255,146,171}.portal-card.is-active[data-portal=perpustakaan]{--accent: 103,211,240}.portal-card.is-active:hover,.portal-card.is-active:focus-visible{transform:translateY(-4px);border-color:rgba(var(--accent),.68);box-shadow:0 14px 26px #02071155,0 0 20px rgba(var(--accent),.07);background:linear-gradient(125deg,rgba(var(--accent),.17),#14273e 85%)}.portal-icon{display:grid;place-items:center;flex-shrink:0}.is-active .portal-icon{width:46px;height:49px;border:1px solid rgba(var(--accent),.18);border-radius:14px;color:rgb(var(--accent));background:rgba(var(--accent),.12);box-shadow:inset 0 1px #ffffff0c;transition:transform .22s}.portal-icon svg{width:28px;height:28px}.is-active:hover .portal-icon{transform:translateY(-2px) rotate(-4deg)}.portal-copy{position:relative;display:flex;flex-direction:column;min-width:0;gap:7px}.portal-copy strong{font-size:16px;line-height:1.3;letter-spacing:-.02em;font-weight:700}.portal-copy>span{font-size:11px;color:#afc0d8;line-height:1.6}.portal-arrow{display:grid;place-items:center;flex-shrink:0;width:25px;height:25px;margin-left:auto;border-radius:50%;color:rgb(var(--accent));background:rgba(var(--accent),.08);transition:background .22s,transform .22s}.portal-arrow svg{width:14px;height:14px}.is-active:hover .portal-arrow{background:rgba(var(--accent),.2);transform:translate(2px)}.upcoming-section{margin-top:23px}.upcoming-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.upcoming-heading h2{margin:0;color:#a7b7cf;font-size:11px;font-weight:600}.upcoming-heading>span{padding:4px 7px;border-radius:5px;background:#c5d5fa09;color:#a1aec5;font-size:9px}.upcoming-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.portal-card.is-pending{display:flex;align-items:center;gap:8px;min-height:46px;padding:9px;border:1px solid #bad2ff0c;border-radius:10px;background:#0d192ccc;color:#9baec9}.is-pending .portal-icon{color:#7d92b0}.is-pending .portal-icon svg{width:18px;height:18px}.is-pending strong{font-size:10px;line-height:1.4;font-weight:500}.manager-access{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding:15px 18px;border:1px solid #b8d0ff12;border-radius:15px;background:linear-gradient(100deg,#18273c99,#15213555)}.access-title{display:flex;align-items:center;gap:11px}.access-title>svg{width:23px;height:23px;color:var(--gold)}.access-title h2{margin:0;font-size:12px;font-weight:700}.access-title p{margin:5px 0 0;color:#96a9c6;font-size:10px}.access-actions{display:flex;gap:9px}.access-button{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:40px;padding:10px 14px;border:1px solid #efc5754a;border-radius:10px;color:#ffe4b1;text-decoration:none;font-size:11px;font-weight:600;transition:transform .18s,background .18s,border-color .18s}.access-button:first-child{color:#1d2533;border-color:#efce91;background:linear-gradient(115deg,#f5dbab,#e8bb71);box-shadow:0 4px 12px #efc57512}.access-button:hover{transform:translateY(-2px);border-color:var(--gold-bright);background:#efc57514}.access-button:first-child:hover{background:#ffe5b6}.access-button svg{width:15px;height:15px}.stage-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding:20px 0 0;color:#8297b6;font-size:9px}.footer-dot{padding-inline:7px;color:#536780}.stage-footer b{color:#c3a975;font-weight:500}@media (min-width: 1600px) and (min-height: 900px){.portal-shell{grid-template-columns:280px minmax(0,1fr);gap:48px;padding:28px}.school-identity{padding:40px 30px 28px}.identity-copy>strong{font-size:26px}.identity-campus{min-height:240px}.welcome-heading{margin:32px 0}.welcome-heading h1{font-size:50px}.portal-card.is-active{min-height:162px;padding:27px;gap:18px}.portal-copy strong{font-size:19px}.portal-copy>span{font-size:13px}.is-active .portal-icon{width:55px;height:58px;border-radius:17px}.portal-icon svg{width:34px;height:34px}.section-heading h2{font-size:19px}.portal-grid{gap:18px}.upcoming-section{margin-top:30px}.portal-card.is-pending{min-height:58px;padding:13px}.manager-access{padding:20px;margin-top:30px}}@media (max-width: 1200px){.portal-shell{grid-template-columns:210px minmax(0,1fr);gap:22px;padding:16px}.school-identity{padding:26px 21px 20px}.identity-copy>strong{font-size:20px}.portal-stage{padding-right:0}.welcome-heading h1{font-size:34px}.portal-card.is-active{gap:10px;padding:17px 13px;min-height:118px}.is-active .portal-icon{width:36px;height:40px;border-radius:11px}.portal-icon svg{width:25px;height:25px}.portal-copy strong{font-size:14px}.portal-copy>span{font-size:10px}.portal-arrow{width:18px;height:18px}.portal-arrow svg{width:12px;height:12px}.upcoming-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.portal-card.is-pending{min-height:34px;padding:7px 9px}.access-button{gap:13px}}@media (max-height: 820px) and (min-width: 981px){.portal-shell{padding-block:16px}.welcome-heading{margin:16px 0 19px}.welcome-heading h1{font-size:36px}.portal-card.is-active{min-height:113px;padding-block:17px}.upcoming-section{margin-top:18px}.manager-access{margin-top:17px;padding-block:12px}.stage-footer{padding-top:14px}.identity-campus{min-height:150px}}@media (max-width: 980px){.portal-shell{display:block;padding:18px}.school-identity{flex-direction:row;padding:14px 19px;border-radius:18px}.identity-top{display:flex;align-items:center;gap:13px;text-align:left}.identity-mark{width:49px;height:54px;border:0;background:none;box-shadow:none;margin:0}.identity-mark img{width:100%;height:100%}.identity-copy>span,.identity-rule,.identity-motto,.identity-bottom{display:none}.identity-copy>strong{font-size:23px}.identity-copy>strong:before{content:"SMA "}.identity-copy br{display:none}.identity-location{margin-top:6px;font-size:8px}.portal-stage{padding-top:15px;min-height:calc(100svh - 120px)}.stage-header{min-height:44px}.welcome-heading{margin:20px 0 25px}.welcome-heading h1{font-size:36px}.portal-card.is-active{min-height:124px}.stage-footer{padding-block:22px 0}}@media (max-width: 680px){.portal-shell{padding:12px}.school-identity{padding:13px 14px;border-radius:17px}.identity-copy>strong{font-size:21px}.portal-stage{padding:12px 5px 2px}.stage-header{gap:9px}.portal-wordmark{font-size:9px;letter-spacing:.07em;gap:7px}.portal-wordmark>span{font-size:19px}.utility-panel{padding:7px 8px;gap:5px}.utility-panel>#landingDate,.utility-divider{display:none}.welcome-heading{margin:22px 0 27px}.welcome-heading h1{font-size:31px}.welcome-heading h1 strong{display:block;margin-top:3px;font-size:40px}.welcome-description{max-width:310px;font-size:12px}.section-heading{margin-bottom:13px}.section-heading h2{font-size:16px}.availability{font-size:9px}.portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.portal-card.is-active{flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:172px;padding:16px;border-radius:17px;gap:13px}.is-active .portal-icon{width:40px;height:42px;border-radius:12px}.portal-copy{width:100%;gap:7px}.portal-copy strong{font-size:15px}.portal-copy>span{font-size:11px}.portal-arrow{position:absolute;top:20px;right:14px;width:24px;height:24px}.portal-arrow svg{width:14px;height:14px}.upcoming-section{margin-top:26px}.upcoming-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.portal-card.is-pending{min-height:44px;padding:9px}.is-pending strong{font-size:10px}.manager-access{display:block;padding:17px 14px;margin-top:24px}.access-actions{margin-top:17px}.access-button{flex:1;min-height:44px;padding-inline:12px;gap:8px}.stage-footer{flex-direction:column;align-items:flex-start;gap:9px;padding-block:19px 7px}}@media (max-width: 360px){.portal-shell{padding:10px}.portal-stage{padding-inline:3px}.identity-copy>strong{font-size:18px}.identity-top{gap:9px}.welcome-heading h1{font-size:28px}.portal-grid{gap:10px}.portal-card.is-active{padding:13px}.portal-copy strong{font-size:14px}.access-button{font-size:10px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.portal-modal{display:none;position:fixed;z-index:80;top:0;right:0;bottom:0;left:0;place-items:center;padding:20px}.portal-modal.show{display:grid}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;background:#040e1bc9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-dialog{position:relative;width:min(520px,100%);max-height:calc(100svh - 40px);padding:28px;border:1px solid #d9bb7c55;border-radius:12px;background:#102337;box-shadow:0 28px 100px #0006;overflow-y:auto}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line)}.modal-header span{color:var(--gold);font-size:10px;letter-spacing:.16em;text-transform:uppercase}.modal-header h2{margin:8px 0 0;font:700 26px/1.2 Segoe UI,Arial,sans-serif}.modal-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#dce3e9;font-size:25px;cursor:pointer}.modal-close:hover{background:#ffffff0c}.modal-links{display:grid;gap:8px;padding-top:18px}.modal-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px;border:1px solid var(--line);border-radius:6px;text-decoration:none;transition:border-color .2s,background .2s}.modal-links a:hover{border-color:#d9bb7c77;background:#d9bb7c08}.modal-links strong,.modal-links small{display:block}.modal-links strong{font-size:13px;font-weight:600}.modal-links small{margin-top:5px;font-size:11px;color:var(--muted)}.modal-links b{color:var(--gold);font-size:19px;font-weight:400}body.modal-open{overflow:hidden}