/* =========================================================
   KEMENTERIAN EXECUTIVE UI v4.0
   Portal Pengumuman Kelulusan - Public + Login
   ========================================================= */
:root{
  --km-navy-950:#041326;
  --km-navy-900:#071a33;
  --km-navy-850:#0a2344;
  --km-navy-800:#0c2c55;
  --km-blue-700:#0b57a4;
  --km-blue-600:#1479d2;
  --km-blue-500:#2b8ce1;
  --km-blue-100:#e8f3fd;
  --km-gold-500:#dca717;
  --km-gold-400:#f1bf38;
  --km-gold-200:#f8df93;
  --km-green-600:#178246;
  --km-green-100:#eaf8f0;
  --km-red-600:#c93932;
  --km-red-100:#fff0ef;
  --km-ink:#11243d;
  --km-ink-2:#30465f;
  --km-muted:#6e7f93;
  --km-line:#dbe5ef;
  --km-line-soft:#eaf0f5;
  --km-surface:#ffffff;
  --km-bg:#eff4f9;
  --km-shadow-sm:0 9px 24px rgba(4,19,38,.08);
  --km-shadow-md:0 18px 45px rgba(4,19,38,.13);
  --km-shadow-lg:0 32px 90px rgba(4,19,38,.19);
  --km-radius-sm:12px;
  --km-radius-md:18px;
  --km-radius-lg:28px;
  --km-ease:cubic-bezier(.2,.82,.24,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.km-public{
  margin:0;
  color:var(--km-ink);
  background:var(--km-bg);
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
.km-page-accent{
  position:fixed;inset:0 0 auto;height:4px;z-index:10000;
  background:linear-gradient(90deg,var(--km-navy-950) 0 28%,var(--km-blue-600) 28% 73%,var(--km-gold-400) 73% 91%,#bd2f2a 91% 100%);
  box-shadow:0 2px 18px rgba(4,19,38,.16);
}

/* ===== HOME ===== */
.km-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.02fr) minmax(500px,.98fr);overflow:hidden}
.km-hero{
  min-height:100vh;position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:
    linear-gradient(130deg,rgba(4,19,38,.985),rgba(8,52,99,.94)),
    url('../img/bg-sekolah.jpg') center/cover no-repeat;
}
.km-hero::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(circle at 16% 10%,rgba(43,140,225,.28),transparent 26%),
    radial-gradient(circle at 86% 74%,rgba(241,191,56,.11),transparent 24%);
}
.km-hero-grid{
  position:absolute;inset:0;z-index:-2;opacity:.52;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(120deg,#000 0 62%,transparent 96%);
  animation:kmGridDrift 18s linear infinite;
}
.km-orbit{position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
.km-orbit-a{width:420px;height:420px;right:-170px;bottom:-120px;border:1px solid rgba(255,255,255,.13);box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018);animation:kmOrbit 20s linear infinite}
.km-orbit-b{width:180px;height:180px;left:-90px;top:12%;border:1px solid rgba(241,191,56,.17);box-shadow:0 0 0 28px rgba(241,191,56,.025);animation:kmOrbit 13s linear infinite reverse}
.km-hero-inner{position:relative;z-index:2;min-height:calc(100vh - 68px);padding:70px clamp(46px,6vw,92px) 44px;display:flex;flex-direction:column;justify-content:center;max-width:820px;animation:kmSlideIn .82s var(--km-ease) both}
.km-agency-line{display:inline-flex;align-items:center;gap:11px;width:max-content;max-width:100%;font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:1.8px;font-weight:800;color:#d7e8f8;margin-bottom:38px}
.km-agency-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--km-gold-400);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.km-brand-block{max-width:630px}
.km-logo-stage{width:114px;height:114px;display:grid;place-items:center;position:relative;margin-bottom:23px}
.km-logo-stage.small{width:102px;height:102px}
.km-logo-stage::before{content:"";position:absolute;inset:5px;border-radius:31px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.km-logo-stage img{position:relative;z-index:2;max-width:82px;max-height:82px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));animation:kmLogoFloat 5.5s ease-in-out infinite}
.km-logo-ring{position:absolute;inset:-8px;border-radius:38px;border:1px solid rgba(241,191,56,.20);animation:kmLogoRing 3.4s ease-in-out infinite}
.km-eyebrow{margin:0 0 10px;color:#8ec7f6;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px}
.km-brand-block h1,.km-login-visual h1{margin:0;color:#fff;font-size:clamp(32px,4.3vw,60px);line-height:1.04;letter-spacing:-1.7px;font-weight:800;text-wrap:balance}
.km-hero-lead,.km-login-lead{margin:17px 0 0;max-width:590px;color:#d2e4f4;font-size:14px;line-height:1.75;font-weight:450}
.km-hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:620px;margin-top:35px}
.km-fact{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:15px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(10px);transition:transform .3s var(--km-ease),background .3s ease,border-color .3s ease}
.km-fact:hover{transform:translateY(-3px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
.km-fact-icon{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--km-gold-400);background:rgba(241,191,56,.09);border:1px solid rgba(241,191,56,.12)}
.km-fact small,.km-fact strong{display:block}
.km-fact small{font-size:9px;color:#8fb5d6;text-transform:uppercase;letter-spacing:.8px;font-weight:800;margin-bottom:4px}
.km-fact strong{font-size:11px;color:#f7fbff;line-height:1.35}
.km-hero-note{display:flex;gap:10px;align-items:flex-start;max-width:620px;margin-top:19px;color:#99b9d4;font-size:10.5px;line-height:1.55}
.km-hero-note i{margin-top:2px;color:#64b3f0}
.km-hero-footer{height:68px;padding:0 clamp(46px,6vw,92px);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08);font-size:9.5px;color:#819fba;text-transform:uppercase;letter-spacing:1.15px}
.km-hero-footer span:first-child{display:flex;align-items:center;gap:7px}.km-hero-footer i{font-size:5px;color:#39b96a;box-shadow:0 0 0 4px rgba(57,185,106,.08);border-radius:50%}

.km-service{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:46px clamp(28px,5vw,80px);overflow:hidden;background:linear-gradient(145deg,#f9fbfd 0%,#eff5fa 56%,#e8f0f7 100%)}
.km-service::before{content:"";position:absolute;width:330px;height:330px;right:-165px;top:5%;border:54px solid rgba(11,87,164,.035);border-radius:50%;animation:kmFloatBg 10s ease-in-out infinite}
.km-service::after{content:"";position:absolute;width:190px;height:190px;left:-105px;bottom:4%;border-radius:50%;background:rgba(220,167,23,.045)}
.km-service-inner{width:100%;max-width:540px;position:relative;z-index:2;animation:kmCardIn .78s .08s var(--km-ease) both}
.km-service-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 5px 13px}
.km-service-badge,.km-secure-state{display:inline-flex;align-items:center;gap:7px;font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.km-service-badge{color:var(--km-blue-700)}.km-service-badge i{color:var(--km-gold-500)}
.km-secure-state{color:#728399}.km-secure-state i{color:var(--km-green-600)}
.km-card{position:relative;overflow:hidden;padding:31px 32px 28px;background:rgba(255,255,255,.965);border:1px solid rgba(17,70,115,.10);border-radius:var(--km-radius-lg);box-shadow:var(--km-shadow-lg);backdrop-filter:blur(18px)}
.km-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,rgba(255,255,255,.65),transparent 30%)}
.km-card-highlight{position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--km-navy-900),var(--km-blue-600) 74%,var(--km-gold-400))}
.km-card-head{display:flex;gap:15px;align-items:center;position:relative;z-index:1;padding-bottom:23px;border-bottom:1px solid var(--km-line-soft)}
.km-mini-logo{flex:0 0 58px;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#f7fbff,#edf4fa);border:1px solid #dfe9f3;box-shadow:0 8px 18px rgba(4,19,38,.07)}
.km-mini-logo img{max-width:41px;max-height:41px;object-fit:contain}
.km-card-kicker{display:block;margin:0 0 5px;color:var(--km-blue-700);font-size:9px;font-weight:850;letter-spacing:1.3px;text-transform:uppercase}
.km-card-head h2{margin:0;color:var(--km-ink);font-size:23px;line-height:1.15;letter-spacing:-.55px;font-weight:800}
.km-card-head p{margin:5px 0 0;color:var(--km-muted);font-size:11px;line-height:1.45}
.km-stepper{display:flex;align-items:flex-start;margin:22px 3px 20px;position:relative;z-index:1}
.km-step{flex:0 0 62px;text-align:center;color:#9aabba}.km-step span{width:26px;height:26px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#edf2f7;border:1px solid #dce6ef;font-size:10px;font-weight:800}.km-step small{display:block;margin-top:6px;font-size:8.5px;font-weight:750;letter-spacing:.3px}
.km-step.active{color:var(--km-blue-700)}.km-step.active span{color:#fff;background:linear-gradient(145deg,var(--km-navy-800),var(--km-blue-600));border-color:transparent;box-shadow:0 6px 14px rgba(11,87,164,.2)}
.km-step-line{height:1px;flex:1;background:linear-gradient(90deg,#d6e2ec,#e8eef4);margin-top:13px}
.km-countdown-panel{position:relative;z-index:1;padding:17px 17px 16px;border:1px solid #dce7f0;border-radius:18px;background:linear-gradient(145deg,#f9fcff,#f0f6fb);overflow:hidden}
.km-countdown-panel::after{content:"";position:absolute;top:-70px;right:-75px;width:160px;height:160px;border-radius:50%;background:rgba(20,121,210,.045)}
.km-panel-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;position:relative;z-index:1}.km-panel-label span{font-size:10px;color:#36526e;font-weight:800}.km-panel-label span i{color:var(--km-blue-600);margin-right:6px}.km-panel-label small{font-size:8.5px;color:#8593a4;font-weight:650}
.km-countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:relative;z-index:1}
.km-time{position:relative;overflow:hidden;padding:13px 5px 11px;text-align:center;border-radius:13px;background:linear-gradient(145deg,var(--km-navy-850),var(--km-blue-700));box-shadow:0 9px 20px rgba(7,42,79,.13);border:1px solid rgba(255,255,255,.06)}
.km-time:nth-child(3),.km-time:nth-child(4){background:linear-gradient(145deg,#0d477a,#1269ad)}
.km-time::after{content:"";position:absolute;inset:-20% auto -20% -65%;width:38%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:kmShine 5.2s ease-in-out infinite}
.km-time span{display:block;color:#fff;font-size:22px;line-height:1;font-weight:800;letter-spacing:.6px}.km-time small{display:block;color:#9fc5e4;font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:.75px;margin-top:6px}
.km-check-form{position:relative;z-index:1;animation:kmFadeUp .52s var(--km-ease) both}
.km-ready-banner{display:flex;align-items:center;gap:10px;padding:12px 13px;margin-bottom:18px;border-radius:13px;background:var(--km-green-100);border:1px solid #cdebd9}.km-ready-dot{width:9px;height:9px;border-radius:50%;background:var(--km-green-600);box-shadow:0 0 0 5px rgba(23,130,70,.09);animation:kmReadyPulse 2s ease-in-out infinite}.km-ready-banner strong,.km-ready-banner small{display:block}.km-ready-banner strong{font-size:10px;color:#17653c;margin-bottom:2px}.km-ready-banner small{font-size:8.5px;color:#5c7c6c}
.km-check-form label,.km-form-field label{display:block;margin:0 0 7px;color:#273f59;font-size:10px;font-weight:800;letter-spacing:.15px}
.km-input-wrap{height:52px;display:flex;align-items:center;position:relative;border:1px solid #d2dee9;background:#fbfdff;border-radius:13px;transition:border-color .24s ease,box-shadow .24s ease,transform .24s ease}.km-input-wrap:focus-within{border-color:#62a7de;box-shadow:0 0 0 4px rgba(20,121,210,.09);transform:translateY(-1px)}
.km-input-wrap>i{position:absolute;left:15px;color:#7890a7;font-size:13px}.km-input-wrap input{width:100%;height:100%;padding:0 15px 0 43px;border:0;outline:0;background:transparent;color:var(--km-ink);font-size:12px;font-weight:600}.km-input-wrap input::placeholder{color:#9daab7;font-weight:500}.km-input-wrap.is-error{border-color:#e0706b;box-shadow:0 0 0 4px rgba(201,57,50,.08)}
.km-input-help{display:block;margin:7px 2px 0;color:#8a98a8;font-size:8.5px;line-height:1.4}
.km-primary-btn,.km-secondary-btn,.km-open-result-btn{border:0;text-decoration:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border-radius:13px;font-weight:800;font-size:11px;letter-spacing:.15px;transition:transform .24s var(--km-ease),box-shadow .24s ease,background-position .35s ease,color .24s ease,border-color .24s ease;position:relative;overflow:hidden}
.km-primary-btn{width:100%;margin-top:17px;color:#fff;background:linear-gradient(105deg,var(--km-navy-850),var(--km-blue-700),var(--km-blue-600));background-size:180% 100%;box-shadow:0 11px 25px rgba(11,87,164,.21)}
.km-primary-btn:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 15px 31px rgba(11,87,164,.29)}.km-primary-btn:active{transform:translateY(0) scale(.99)}
.km-primary-btn.inline{width:auto;min-width:164px;margin:0;padding:0 18px}
.km-primary-btn .ui-ripple,.km-open-result-btn .ui-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.22);transform:scale(0);animation:kmRipple .58s linear;pointer-events:none}
.km-privacy{display:flex;align-items:flex-start;gap:10px;margin-top:19px;padding-top:17px;border-top:1px solid var(--km-line-soft);position:relative;z-index:1}.km-privacy i{margin-top:2px;color:var(--km-blue-700)}.km-privacy p{margin:0}.km-privacy strong,.km-privacy span{display:block}.km-privacy strong{font-size:9px;color:#435b73;margin-bottom:2px}.km-privacy span{font-size:8.5px;color:#8a97a7;line-height:1.5}
.km-footer{display:flex;justify-content:space-between;gap:12px;margin:14px 6px 0;color:#8695a5;font-size:8.5px;letter-spacing:.2px}.km-footer strong{color:#526a82}

.km-toast{position:fixed;right:22px;bottom:22px;z-index:12000;max-width:390px;padding:14px 15px;display:flex;align-items:flex-start;gap:10px;border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(4,19,38,.20);border:1px solid #f0d1cf;animation:kmToastIn .45s var(--km-ease) both}.km-toast>i{color:var(--km-red-600);margin-top:2px}.km-toast div{flex:1}.km-toast strong,.km-toast span{display:block}.km-toast strong{font-size:10px;color:#8c302c}.km-toast span{font-size:9px;color:#6f7e8d;line-height:1.5;margin-top:2px}.km-toast button{border:0;background:transparent;color:#9ba7b2;cursor:pointer;padding:2px}

/* ===== RESULT ===== */
.km-result-page{min-height:100vh;padding:42px 20px;background:linear-gradient(145deg,#eaf1f7,#f7fafc 46%,#e8f0f7);position:relative;overflow-x:hidden}
.km-result-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}.km-result-bg span{position:absolute;border-radius:50%;filter:blur(.2px)}.km-result-bg span:nth-child(1){width:480px;height:480px;right:-220px;top:-170px;border:72px solid rgba(11,87,164,.03)}.km-result-bg span:nth-child(2){width:260px;height:260px;left:-130px;bottom:4%;background:rgba(220,167,23,.035)}.km-result-bg span:nth-child(3){width:130px;height:130px;left:11%;top:8%;border:1px solid rgba(11,87,164,.08);animation:kmFloatBg 9s ease-in-out infinite}
.km-result-shell{width:min(980px,100%);margin:0 auto;background:rgba(255,255,255,.97);border:1px solid rgba(11,66,111,.10);border-radius:30px;box-shadow:var(--km-shadow-lg);overflow:hidden;position:relative;z-index:2;animation:kmCardIn .72s var(--km-ease) both}
.km-result-header{position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--km-navy-950),#083b6f 72%,#0b538f)}
.km-result-header::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 95%)}
.km-result-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--km-blue-500),var(--km-gold-400) 78%,#bd2f2a)}
.km-result-header-inner{min-height:150px;padding:28px 34px;display:flex;justify-content:space-between;align-items:center;gap:22px;position:relative;z-index:1}
.km-result-brand{display:flex;align-items:center;gap:16px}.km-result-logo{flex:0 0 74px;width:74px;height:74px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.km-result-logo img{max-width:54px;max-height:54px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.26));animation:kmLogoFloat 5.5s ease-in-out infinite}
.km-result-overline{display:inline-flex;align-items:center;gap:7px;color:#93c4ec;font-size:8.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}.km-result-overline i{color:var(--km-gold-400)}.km-result-brand h1{margin:6px 0 4px;color:#fff;font-size:25px;letter-spacing:-.5px;line-height:1.15}.km-result-brand p{margin:0;color:#c6ddf0;font-size:11px}
.km-result-year{text-align:right;padding:10px 13px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}.km-result-year small,.km-result-year strong{display:block}.km-result-year small{font-size:7.5px;color:#8eb9dd;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.km-result-year strong{font-size:11px;color:#fff}
.km-result-body{min-height:430px;padding:34px;background:linear-gradient(180deg,#fff,#fbfdff)}
.km-verification-stage,.km-envelope-stage{text-align:center;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:kmFadeUp .46s var(--km-ease) both}.km-verification-stage.compact{min-height:300px}
.km-scan-emblem{width:88px;height:88px;position:relative;display:grid;place-items:center;margin-bottom:22px;border-radius:26px;color:var(--km-blue-700);background:linear-gradient(145deg,#f5faff,#edf5fb);border:1px solid #dce8f2;box-shadow:0 14px 31px rgba(11,87,164,.10)}.km-scan-emblem.small{width:72px;height:72px;border-radius:21px}.km-scan-emblem i{font-size:31px}.km-scan-emblem.small i{font-size:25px}.km-scan-ring{position:absolute;inset:-10px;border-radius:32px;border:1px solid rgba(20,121,210,.20);animation:kmScanRing 1.8s ease-in-out infinite}.km-scan-emblem.small .km-scan-ring{border-radius:27px}
.km-stage-kicker{margin:0 0 7px;color:var(--km-blue-700);font-size:8.5px;font-weight:850;text-transform:uppercase;letter-spacing:1.4px}.km-verification-stage h2,.km-envelope-stage h2{margin:0;color:var(--km-ink);font-size:20px;letter-spacing:-.35px}.km-type-line{margin-top:14px;min-width:270px;display:flex;align-items:center;justify-content:center;gap:8px;color:#718196;font-size:10px;font-weight:600}.km-type-dot{width:6px;height:6px;border-radius:50%;background:var(--km-blue-600);box-shadow:0 0 0 4px rgba(20,121,210,.09);animation:kmReadyPulse 1.5s ease-in-out infinite}.km-progress-track{width:min(340px,72%);height:4px;margin-top:20px;border-radius:999px;background:#edf2f6;overflow:hidden}.km-progress-track span{display:block;width:44%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--km-blue-700),var(--km-blue-500),var(--km-gold-400));animation:kmProgress 2.4s ease-in-out infinite}
.km-envelope-stage{position:relative}.km-envelope-aura{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(20,121,210,.10),rgba(20,121,210,0) 68%);animation:kmAura 2.7s ease-in-out infinite}.km-envelope-btn{width:112px;height:92px;border:0;background:transparent;color:var(--km-blue-700);font-size:76px;position:relative;cursor:pointer;filter:drop-shadow(0 16px 24px rgba(11,87,164,.19));animation:kmEnvelopeFloat 2.7s ease-in-out infinite;transition:transform .25s var(--km-ease),color .25s ease}.km-envelope-btn:hover{transform:translateY(-5px) scale(1.04);color:var(--km-blue-600)}.km-envelope-seal{position:absolute;right:2px;bottom:4px;z-index:2;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#d5a01a,var(--km-gold-400));border:3px solid #fff;font-size:10px;box-shadow:0 6px 12px rgba(128,89,7,.22)}
.km-open-result-btn{margin-top:18px;min-width:220px;padding:0 18px;color:#fff;background:linear-gradient(105deg,var(--km-navy-850),var(--km-blue-600));box-shadow:0 11px 25px rgba(11,87,164,.19)}.km-open-result-btn:hover{transform:translateY(-2px);box-shadow:0 15px 31px rgba(11,87,164,.27)}.km-envelope-stage>small{margin-top:12px;color:#8d99a7;font-size:8.5px}.km-envelope-stage>small i{color:var(--km-green-600);margin-right:4px}
.km-result-content{animation:kmFadeUp .55s var(--km-ease) both}
.km-status-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:15px;padding:19px 20px;border-radius:18px;border:1px solid}.km-status-banner::after{content:"";position:absolute;width:125px;height:125px;right:-54px;top:-60px;border-radius:50%;opacity:.5}.km-status-banner.is-pass{background:linear-gradient(130deg,#f1fbf5,#eaf8f0);border-color:#cfe9da}.km-status-banner.is-pass::after{background:#ccead8}.km-status-banner.is-review{background:linear-gradient(130deg,#fff7f5,#fff0ef);border-color:#f0d5d2}.km-status-banner.is-review::after{background:#f1d6d3}.km-status-icon{flex:0 0 48px;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:17px}.km-status-banner.is-pass .km-status-icon{background:linear-gradient(145deg,#177b44,#23a15d);box-shadow:0 9px 18px rgba(23,130,70,.20)}.km-status-banner.is-review .km-status-icon{background:linear-gradient(145deg,#ad342e,#d24b44);box-shadow:0 9px 18px rgba(201,57,50,.18)}.km-status-banner small{display:block;font-size:7.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#6e897b;margin-bottom:4px}.km-status-banner h2{margin:0;font-size:18px;letter-spacing:.2px}.km-status-banner.is-pass h2{color:#185b38}.km-status-banner.is-review h2{color:#8a332e}.km-status-banner p{margin:4px 0 0;color:#678074;font-size:9.5px;line-height:1.45}.km-status-stamp{margin-left:auto;align-self:flex-start;display:inline-flex;gap:5px;align-items:center;font-size:7.5px;font-weight:850;letter-spacing:1px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(17,88,54,.10);color:#58806b;position:relative;z-index:1}
.km-data-card{margin-top:18px;padding:20px;border:1px solid var(--km-line);border-radius:18px;background:#fff;box-shadow:var(--km-shadow-sm)}.km-data-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding-bottom:15px;border-bottom:1px solid var(--km-line-soft)}.km-data-card-head h3,.km-skl-card h3,.km-message-card h3{margin:0;color:var(--km-ink);font-size:14px;letter-spacing:-.2px}.km-verified-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:#edf8f2;color:#22734a;border:1px solid #d5eddf;font-size:7.5px;font-weight:800}.km-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.km-data-grid>div{padding:14px 13px;border-bottom:1px solid var(--km-line-soft)}.km-data-grid>div:nth-child(odd){border-right:1px solid var(--km-line-soft)}.km-data-grid>div:nth-last-child(-n+2){border-bottom:0}.km-data-grid dt{margin:0 0 5px;color:#8392a3;font-size:7.5px;font-weight:800;text-transform:uppercase;letter-spacing:.75px}.km-data-grid dd{margin:0;color:#30465e;font-size:11px;font-weight:650;line-height:1.45}.km-data-grid .km-name-value{color:#152f4d;font-weight:800}
.km-message-card{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:18px;border-radius:16px}.km-message-card>i{font-size:22px;margin-top:1px}.km-message-card p{margin:6px 0 0;font-size:9.5px;line-height:1.65}.km-message-card.is-pass{background:#f3faf6;border:1px solid #d9ece1}.km-message-card.is-pass>i,.km-message-card.is-pass h3{color:#1c7044}.km-message-card.is-pass p{color:#668072}.km-message-card.is-review{background:#fff7f6;border:1px solid #f0dcda}.km-message-card.is-review>i,.km-message-card.is-review h3{color:#9c3b35}.km-message-card.is-review p{color:#806b69}
.km-skl-card{display:flex;gap:16px;margin-top:18px;padding:20px;border-radius:18px;border:1px solid #d8e4ef;background:linear-gradient(145deg,#f8fbfd,#f1f6fa);animation:kmFadeUp .45s var(--km-ease) both}.km-skl-icon{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#e9f3fb;border:1px solid #d4e7f5;color:var(--km-blue-700)}.km-skl-copy p{margin:7px 0 0;color:#64798e;font-size:9.5px;line-height:1.65}.km-skl-note{display:flex;gap:7px;margin-top:10px;padding:9px 10px;border-radius:10px;background:#fff;border:1px solid #e2e9f0;color:#718297;font-size:8.5px;line-height:1.5}.km-skl-note i{color:var(--km-blue-600);margin-top:2px}
.km-result-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}.km-secondary-btn{min-width:164px;padding:0 18px;color:#40576f;background:#fff;border:1px solid #d4e0eb}.km-secondary-btn:hover{transform:translateY(-2px);border-color:#a9c3d9;color:var(--km-blue-700);box-shadow:0 10px 22px rgba(4,19,38,.08)}
.km-result-privacy{display:flex;justify-content:center;gap:8px;align-items:flex-start;margin-top:16px;color:#8a97a6;font-size:8.5px;line-height:1.5;text-align:center}.km-result-privacy i{margin-top:2px;color:#6b88a3}
.km-result-footer{display:flex;justify-content:space-between;gap:15px;padding:14px 34px;background:#f8fafc;border-top:1px solid var(--km-line-soft);color:#8493a3;font-size:8.5px}

.km-modal{position:fixed;inset:0;z-index:13000;padding:20px;align-items:center;justify-content:center;background:rgba(4,19,38,.68);backdrop-filter:blur(9px);animation:kmFade .25s ease both}.km-modal-card{width:min(410px,100%);position:relative;text-align:center;padding:30px 28px 26px;border-radius:22px;background:#fff;box-shadow:0 32px 85px rgba(0,0,0,.30);animation:kmModalIn .38s var(--km-ease) both}.km-modal-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:22px 22px 0 0}.km-modal-card.is-pass::before{background:linear-gradient(90deg,#167943,#2daa66,var(--km-gold-400))}.km-modal-card.is-review::before{background:linear-gradient(90deg,#a7312c,#d14b43,var(--km-gold-400))}.km-modal-close{position:absolute;right:12px;top:12px;width:30px;height:30px;border:0;border-radius:9px;background:#f3f6f9;color:#7f8d9b;cursor:pointer}.km-modal-icon{width:68px;height:68px;margin:0 auto 16px;border-radius:19px;display:grid;place-items:center;font-size:27px}.km-modal-card.is-pass .km-modal-icon{color:#1b7c48;background:#edf9f2;border:1px solid #d1eddc}.km-modal-card.is-review .km-modal-icon{color:#b13c35;background:#fff2f1;border:1px solid #f1d8d6}.km-modal-card h3{margin:5px 0 0;color:var(--km-ink);font-size:19px}.km-modal-card p{margin:10px 0 0;color:#6d7d8f;font-size:10px;line-height:1.65}.km-modal-card .km-primary-btn{margin:19px auto 0}
.km-confetti{position:fixed;top:-14px;z-index:14000;width:7px;height:11px;border-radius:2px;pointer-events:none;animation:kmConfettiFall linear forwards}

/* ===== LOGIN ===== */
.km-login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(460px,1.08fr) minmax(440px,.92fr)}
.km-login-visual{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:linear-gradient(130deg,rgba(4,19,38,.985),rgba(7,53,101,.94)),url('../img/bg-sekolah.jpg') center/cover no-repeat}.km-login-visual::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 22% 14%,rgba(43,140,225,.24),transparent 27%)}.km-login-visual-inner{min-height:100vh;padding:70px clamp(48px,7vw,100px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;animation:kmSlideIn .8s var(--km-ease) both}.km-login-lead{max-width:560px}.km-admin-features{display:grid;gap:10px;max-width:560px;margin-top:31px}.km-admin-features>div{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}.km-admin-features>div>i{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;color:var(--km-gold-400);background:rgba(241,191,56,.08)}.km-admin-features strong,.km-admin-features small{display:block}.km-admin-features strong{color:#fff;font-size:10px;margin-bottom:2px}.km-admin-features small{color:#9bb9d2;font-size:8.5px;line-height:1.4}
.km-login-form-section{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:46px;background:linear-gradient(145deg,#fafcfe,#edf3f8);position:relative;overflow:hidden}.km-login-form-section::before{content:"";position:absolute;width:280px;height:280px;right:-140px;top:7%;border:45px solid rgba(11,87,164,.035);border-radius:50%}.km-login-panel{width:min(410px,100%);position:relative;z-index:2;padding:31px;background:#fff;border:1px solid rgba(17,70,115,.10);border-radius:24px;box-shadow:var(--km-shadow-md);animation:kmCardIn .75s .08s var(--km-ease) both}.km-back-home{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#74869a;font-size:9px;font-weight:750;margin-bottom:24px;transition:color .2s ease,transform .2s ease}.km-back-home:hover{color:var(--km-blue-700);transform:translateX(-2px)}.km-login-heading{text-align:center}.km-login-heading .km-mini-logo{margin:0 auto 15px}.km-login-heading h2{margin:5px 0 0;color:var(--km-ink);font-size:23px;letter-spacing:-.5px}.km-login-heading>p{margin:7px 0 0;color:#7b8999;font-size:10px}.km-login-form{margin-top:25px}.km-form-field{margin-bottom:14px}.km-input-wrap.password input{padding-right:47px}.km-password-toggle{position:absolute;right:8px;width:35px;height:35px;border:0;border-radius:9px;background:transparent;color:#8596a7;cursor:pointer;display:grid;place-items:center;transition:background .2s ease,color .2s ease}.km-password-toggle:hover{background:#eef5fb;color:var(--km-blue-700)}.km-login-security{display:flex;align-items:flex-start;gap:8px;margin-top:18px;padding:12px;border-radius:12px;background:#f5f8fb;border:1px solid #e6edf3;color:#728295;font-size:8.5px;line-height:1.45}.km-login-security i{color:var(--km-green-600);margin-top:2px}.km-login-footer{text-align:center;margin-top:18px;color:#98a4b0;font-size:8px}.km-login-footer strong{color:#667b90}

/* ===== MOTION ===== */
@keyframes kmGridDrift{0%{background-position:0 0,0 0}100%{background-position:48px 48px,48px 48px}}
@keyframes kmOrbit{to{transform:rotate(360deg)}}
@keyframes kmLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kmLogoRing{0%,100%{transform:scale(.96);opacity:.45}50%{transform:scale(1.04);opacity:1}}
@keyframes kmFloatBg{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-8px,10px,0)}}
@keyframes kmShine{0%,65%{left:-65%}100%{left:135%}}
@keyframes kmReadyPulse{0%,100%{box-shadow:0 0 0 4px rgba(23,130,70,.09)}50%{box-shadow:0 0 0 8px rgba(23,130,70,0)}}
@keyframes kmSlideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes kmCardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes kmFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kmFade{from{opacity:0}to{opacity:1}}
@keyframes kmToastIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes kmScanRing{0%{transform:scale(.92);opacity:.85}75%,100%{transform:scale(1.18);opacity:0}}
@keyframes kmProgress{0%{transform:translateX(-110%)}50%{transform:translateX(85%)}100%{transform:translateX(250%)}}
@keyframes kmAura{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.1);opacity:1}}
@keyframes kmEnvelopeFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1deg)}}
@keyframes kmRipple{to{transform:scale(4);opacity:0}}
@keyframes kmModalIn{from{opacity:0;transform:translateY(16px) scale(.965)}to{opacity:1;transform:none}}
@keyframes kmConfettiFall{to{transform:translate3d(var(--drift,0),105vh,0) rotate(720deg);opacity:.1}}

/* ===== RESPONSIVE ===== */
@media(max-width:1040px){
  .km-shell,.km-login-shell{grid-template-columns:1fr 1fr}
  .km-hero-inner,.km-login-visual-inner{padding-left:42px;padding-right:42px}
  .km-hero-footer{padding-left:42px;padding-right:42px}
  .km-brand-block h1,.km-login-visual h1{font-size:clamp(32px,4.5vw,48px)}
}
@media(max-width:840px){
  .km-shell,.km-login-shell{display:block;overflow:visible}
  .km-hero,.km-login-visual{min-height:auto}
  .km-hero-inner,.km-login-visual-inner{min-height:auto;padding:60px 28px 48px}
  .km-brand-block h1,.km-login-visual h1{font-size:38px}
  .km-hero-footer{height:54px;padding:0 28px}
  .km-service,.km-login-form-section{min-height:auto;padding:34px 20px 42px}
  .km-service-inner{max-width:590px}
  .km-login-panel{max-width:480px}
  .km-admin-features{grid-template-columns:repeat(3,minmax(0,1fr));max-width:100%}.km-admin-features>div{align-items:flex-start}.km-admin-features>div>i{flex:0 0 33px}
}
@media(max-width:620px){
  .km-hero-inner,.km-login-visual-inner{padding:54px 20px 35px}.km-hero-footer{padding:0 20px}.km-agency-line{margin-bottom:28px}.km-logo-stage{width:94px;height:94px}.km-logo-stage img{max-width:69px;max-height:69px}.km-brand-block h1,.km-login-visual h1{font-size:31px;letter-spacing:-1px}.km-hero-lead,.km-login-lead{font-size:12px}.km-hero-facts{grid-template-columns:1fr}.km-hero-footer{font-size:8px}
  .km-service{padding:25px 13px 34px}.km-service-topbar{margin-left:2px;margin-right:2px}.km-secure-state{display:none}.km-card{padding:25px 19px 22px;border-radius:22px}.km-card-head{gap:12px}.km-mini-logo{flex-basis:52px;width:52px;height:52px}.km-card-head h2{font-size:20px}.km-countdown{gap:6px}.km-time{padding:12px 3px 10px}.km-time span{font-size:20px}.km-step{flex-basis:54px}.km-footer{display:block;text-align:center}.km-footer span{display:block;margin-top:4px}
  .km-result-page{padding:22px 10px}.km-result-shell{border-radius:22px}.km-result-header-inner{padding:23px 19px;display:block}.km-result-brand{align-items:flex-start}.km-result-logo{flex-basis:60px;width:60px;height:60px;border-radius:17px}.km-result-logo img{max-width:43px;max-height:43px}.km-result-brand h1{font-size:19px}.km-result-year{display:inline-block;text-align:left;margin:15px 0 0 76px}.km-result-body{padding:24px 15px}.km-status-banner{align-items:flex-start;padding:16px}.km-status-stamp{display:none}.km-data-card{padding:15px}.km-data-card-head{display:block}.km-verified-chip{margin-top:10px}.km-data-grid{grid-template-columns:1fr}.km-data-grid>div,.km-data-grid>div:nth-child(odd),.km-data-grid>div:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--km-line-soft)}.km-data-grid>div:last-child{border-bottom:0}.km-message-card,.km-skl-card{padding:15px}.km-result-actions{flex-direction:column}.km-result-actions .km-primary-btn.inline,.km-result-actions .km-secondary-btn{width:100%}.km-result-footer{display:block;text-align:center;padding:12px 18px}.km-result-footer span{display:block;margin:4px 0}
  .km-admin-features{grid-template-columns:1fr}.km-login-form-section{padding:25px 13px 34px}.km-login-panel{padding:25px 20px;border-radius:21px}
  .km-toast{left:12px;right:12px;bottom:12px;max-width:none}
}
@media(max-width:390px){.km-time span{font-size:18px}.km-time small{font-size:7px}.km-card{padding-left:15px;padding-right:15px}.km-panel-label{display:block}.km-panel-label small{display:block;margin-top:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* flash message compatibility on login */
.km-login-panel .bg-danger{margin:16px 0 0!important;padding:11px 12px!important;border-radius:11px!important;background:#fff1f0!important;border:1px solid #f0d2cf!important;color:#9d3832!important;font-size:9px!important;font-weight:700!important;text-align:center!important}