:root{--navy:#071c43;--blue:#0c3986;--gold:#f3c969;--ink:#142448;--muted:#8290a9;--white:#fff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Poppins,Arial,sans-serif}body{background:#eef2f8;color:var(--ink)}.site-shell{min-height:100vh;display:flex;flex-direction:column}.site-header{height:88px;padding:0 clamp(22px,4.4vw,76px);display:flex;justify-content:space-between;align-items:center;background:white;border-bottom:1px solid #e6eaf0;z-index:2}.school-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#102657}.school-brand img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 3px #0002)}.school-brand strong{font-size:clamp(12px,1.07vw,16px);display:block;letter-spacing:.07em;font-weight:800}.school-brand small{display:block;color:#73849f;font-size:clamp(8px,.69vw,11px);font-weight:500;letter-spacing:.045em;margin-top:3px}.school-brand i{display:inline-block;width:3px;height:3px;background:#dbb85c;border-radius:50%;vertical-align:middle;margin:0 5px}.header-caption{font-size:10px;letter-spacing:.2em;font-weight:700;color:#3f5274;white-space:nowrap}.tiny-dot,.small-orb{display:inline-block;background:#d8b15a;border-radius:50%;width:7px;height:7px;margin-right:10px;box-shadow:0 0 0 4px #f3e7c8}.year{color:#b1bbcd}.hero-grid{flex:1;min-height:650px;display:grid;grid-template-columns:minmax(0,60fr) minmax(385px,40fr)}.hero-panel{position:relative;overflow:hidden;min-height:620px;background:#052554;display:flex;align-items:center}.hero-photo{position:absolute;inset:0;background:url('assets/gedung-smanpa.png') center center/cover no-repeat;transform:scale(1.015)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,20,52,.94),rgba(6,33,80,.84) 45%,rgba(10,32,65,.37) 100%),linear-gradient(0deg,rgba(4,15,34,.88),transparent 70%)}.hero-glow{position:absolute;width:540px;height:540px;border-radius:50%;background:#216bea;filter:blur(130px);opacity:.22;top:-190px;left:-170px}.hero-content{position:relative;z-index:1;margin:0 clamp(30px,6vw,116px);width:100%;color:white}.eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#c9daee;font-size:10px;font-weight:600;letter-spacing:.19em;margin-bottom:44px}.sparkle{color:var(--gold);font-size:19px}.eyebrow .line{width:22px;height:1px;background:#ddbb73}.hero-kicker{color:#e0d6ba;font-size:11px;letter-spacing:.28em;font-weight:700;margin:0 0 10px}.hero-content h1{font-size:clamp(50px,5.8vw,98px);line-height:1.04;letter-spacing:-.065em;font-weight:900;margin:0;text-shadow:0 8px 32px #0004}.hero-content h1 span{display:block}.headline-light{color:white;white-space:nowrap}.hero-content h1 em{font-style:normal;color:#f0c56f}.hero-subtitle{font-size:clamp(17px,1.7vw,27px);line-height:1.75;font-weight:400;color:#d7e4fb;margin:32px 0 32px}.hero-subtitle b{color:white;font-weight:650}.hero-divider{height:2px;width:65px;background:#f3c969;margin-bottom:28px}.features{display:flex;gap:24px;flex-wrap:wrap;font-size:11px;font-weight:500;color:#e6eefc}.features>span{display:flex;align-items:center;gap:8px}.bullet{width:6px;height:6px;border:1px solid #efc870;transform:rotate(45deg)}.image-caption{position:absolute;bottom:28px;left:clamp(30px,6vw,116px);font-size:10px;font-weight:600;letter-spacing:.17em;color:#ffffffb5}.image-caption span{color:var(--gold);margin:0 8px}.login-panel{background:radial-gradient(circle at 98% 0%,#f3f6ff,transparent 43%),#f9fbff;display:flex;flex-direction:column;justify-content:space-between;padding:34px clamp(32px,4vw,80px);min-width:0}.login-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;letter-spacing:.15em;font-weight:700;color:#9aa8bd}.welcome-label span{color:#c8a052;padding-left:4px}.login-tag{color:#456aa8;border:1px solid #d7e0f0;padding:7px 12px;border-radius:40px;white-space:nowrap}.login-box{width:100%;max-width:425px;margin:auto}.login-icon{background:#e8eefb;color:#1557ad;width:57px;height:57px;border-radius:18px;display:grid;place-items:center;margin-bottom:22px}.login-icon svg{width:27px;height:27px}.overline{color:#b79959;font-size:10px;letter-spacing:.21em;font-weight:800}.login-box h2{font-size:clamp(30px,2.5vw,43px);letter-spacing:-.05em;line-height:1.3;margin:7px 0 12px;color:#0d2452}.gold-period{color:#e5bd63}.login-description{color:#78869d;font-size:12px;line-height:1.85;max-width:390px;margin:0 0 30px}.login-box form>label,.label-row label{font-size:11px;color:#293958;font-weight:700;display:block;margin:0 0 9px}.field{height:53px;border:1px solid #e3e8f1;background:#fff;border-radius:12px;display:flex;align-items:center;padding:0 15px;margin-bottom:22px;transition:border-color .18s,box-shadow .18s}.field:focus-within{border-color:#6b97d4;box-shadow:0 0 0 3px #d7e7ff}.field-icon{display:flex;align-items:center;color:#9eabc0;margin-right:12px}.field-icon svg{width:18px;height:18px}.field input{background:transparent;border:0;outline:0;width:100%;height:100%;font:500 12px Poppins,Arial,sans-serif;color:#17305a;min-width:0}.field input::placeholder{color:#a5b0c1;font-weight:400}.password-toggle{background:none;border:0;cursor:pointer;display:grid;place-items:center;color:#8395b0;width:35px;height:36px;border-radius:8px}.password-toggle:focus-visible{outline:2px solid #2866be}.password-toggle svg{width:21px;height:21px}.is-hidden{display:none}.login-options{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#8e9bb0;font-size:9px;margin:-5px 0 23px;flex-wrap:wrap}.login-options b{color:#315ba0;font-weight:600}.secure-dot{display:inline-block;width:6px;height:6px;background:#2fbd87;border-radius:50%;margin-right:5px}.submit-btn{width:100%;border:0;background:linear-gradient(110deg,#0b367d,#1356aa);height:54px;color:white;font-family:Poppins,Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.1em;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;box-shadow:0 12px 24px #164d9740;transition:transform .2s,box-shadow .2s}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 16px 26px #164d9755}.submit-btn span{font-size:21px;font-weight:400}.form-message{font-size:11px;color:#95671f;line-height:1.7;min-height:1em;margin:12px 0 0}.login-bottom{border-top:1px solid #e8edf5;margin-top:29px;padding-top:20px;color:#9cabc0;font-size:10px;line-height:1.8}.line-symbol{color:#c8a45b;font-size:15px;margin-right:7px}.login-footer-note{text-align:right;color:#8192aa;letter-spacing:.13em;font-size:10px;font-weight:650}.separator{color:#dbbc70;padding:0 10px}.small-orb{width:5px;height:5px;margin-right:7px;box-shadow:none}.site-footer{min-height:54px;background:#061936;color:#b9c8e2;display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px clamp(22px,4.4vw,76px);font-size:10px;letter-spacing:.06em;font-weight:500}.footer-separator{color:#d6b56d;margin:0 13px}.footer-right{text-align:right}@media(max-width:1150px){.hero-grid{grid-template-columns:minmax(0,55fr) minmax(350px,45fr)}.hero-content{margin:0 35px}.hero-content h1{font-size:clamp(45px,5vw,70px)}.features{gap:11px}.login-panel{padding-left:30px;padding-right:30px}}@media(max-width:760px){.site-header{height:auto;min-height:76px;padding:10px 19px}.school-brand img{width:55px;height:55px}.school-brand strong{font-size:11px}.school-brand small{font-size:8px}.header-caption{display:none}.hero-grid{display:flex;flex-direction:column;min-height:0}.hero-panel{min-height:405px}.hero-photo{background-position:center 55%}.hero-overlay{background:linear-gradient(90deg,#061a41f2,#0829599e),linear-gradient(0deg,#031631c9,transparent)}.hero-content{margin:60px 25px 75px}.eyebrow{margin-bottom:30px;font-size:8px;gap:7px}.hero-kicker{font-size:8px}.hero-content h1{font-size:clamp(46px,11vw,78px)}.hero-subtitle{font-size:16px;margin:18px 0}.hero-divider{margin-bottom:21px}.features{font-size:9px;gap:10px}.image-caption{bottom:18px;left:25px;font-size:8px}.login-panel{padding:28px 25px 23px}.login-box{margin:35px auto}.login-footer-note{text-align:center}.site-footer{flex-direction:column;gap:5px;text-align:center;font-size:9px;padding:15px}.footer-right{text-align:center}}@media(max-width:390px){.hero-content h1{font-size:44px}.features{font-size:8px}.school-brand strong{font-size:10px}.login-panel{padding:22px 19px}.login-tag{font-size:8px;padding:7px}.login-options{font-size:8px}}