*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
font-family:Arial,Helvetica,sans-serif;color:#f8fbff;
background:radial-gradient(circle at 15% 5%,rgba(30,117,214,.24),transparent 30%),
radial-gradient(circle at 88% 92%,rgba(245,197,66,.12),transparent 27%),
linear-gradient(155deg,#02050a 0%,#061426 38%,#082d59 68%,#03070d 100%)}
.container{width:calc(100% - 28px);max-width:430px;min-height:100vh;margin:0 auto;padding:28px 16px 24px;display:flex;flex-direction:column;justify-content:center}
.site-header{width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:16px}
.logo{width:250px;max-width:78%;margin:0 auto 15px;padding:8px 12px;border-radius:18px;background:linear-gradient(145deg,#0a0a0a,#023977);border:2px solid #e7bd42;box-shadow:0 0 0 3px rgba(9,59,116,.72),0 12px 30px rgba(0,0,0,.34),0 0 22px rgba(231,189,66,.10)}
.logo a{display:block}
.btn-under-logo{margin-top:0;color:#07101c;background:linear-gradient(180deg,#f8dc79,#d8a92d);border:1px solid #ffea9c;box-shadow:0 9px 22px rgba(0,0,0,.30)}
.welcome{width:100%;margin:4px auto 16px;overflow:hidden;border-radius:14px;background:linear-gradient(135deg,#06101e,#0a3569);border:1px solid #d7aa32;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 9px 25px rgba(0,0,0,.28)}
.running-text{width:100%;overflow:hidden;white-space:nowrap;padding:10px 0;position:relative}
.running-text::before,.running-text::after{content:"";position:absolute;top:0;bottom:0;width:28px;z-index:2;pointer-events:none}
.running-text::before{left:0;background:linear-gradient(90deg,#06101e,transparent)}
.running-text::after{right:0;background:linear-gradient(270deg,#0a3569,transparent)}
.running-text span{display:inline-block;padding-left:100%;color:#ffe790;font-size:13px;font-weight:800;letter-spacing:.008em;text-shadow:0 1px 8px rgba(0,0,0,.55);animation:premiumMarquee 25s linear infinite}
@keyframes premiumMarquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.banner{border-radius:20px;overflow:hidden;background:#06101e;border:2px solid #d7aa32;box-shadow:0 0 0 3px rgba(11,78,150,.42),0 18px 42px rgba(0,0,0,.42)}
.btn-login,.btn-daftar{display:block;width:100%;padding:14px 18px;margin-top:13px;border-radius:13px;font-size:17px;font-weight:900;letter-spacing:.035em;text-decoration:none;text-align:center;position:relative;overflow:hidden}
.btn-login{color:#fff;background:linear-gradient(135deg,#071a32 0%,#0b4f9c 55%,#126fc8 100%);border:1px solid #e4b93e;box-shadow:0 5px 0 #020810,0 11px 24px rgba(0,0,0,.32)}
.btn-daftar{color:#0a111b;background:linear-gradient(180deg,#ffe99b 0%,#efc84f 48%,#d49c18 100%);border:1px solid #fff0ae;box-shadow:0 5px 0 #765200,0 11px 24px rgba(0,0,0,.30),0 0 0 0 rgba(239,200,79,0);animation:daftarPulse 1.9s ease-in-out infinite}
@keyframes daftarPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.015);filter:brightness(1.06);box-shadow:0 5px 0 #765200,0 13px 27px rgba(0,0,0,.34),0 0 0 6px rgba(239,200,79,.10)}}
.glow-on-hover{outline:none;cursor:pointer}
.glow-on-hover::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.03) 37%,rgba(255,239,174,.34) 50%,rgba(255,255,255,.03) 63%,transparent 100%);transform:translateX(-145%);animation:softShine 5.5s ease-in-out infinite;pointer-events:none}
@keyframes softShine{0%,68%{transform:translateX(-145%)}100%{transform:translateX(145%)}}
.copyright{margin:18px 0 0;text-align:center;font-size:12px;color:#d5deea}
.kepusingan{position:fixed;z-index:1;inset:0;margin:auto}
@media(max-width:480px){.container{width:calc(100% - 20px);padding-left:12px;padding-right:12px}.logo{max-width:76%;padding:7px 10px}.running-text span{font-size:11px;animation-duration:25s}.btn-login,.btn-daftar{font-size:16px;padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.running-text span,.btn-daftar,.glow-on-hover::before{animation:none}}
/* Image sizing for standard HTML */
.logo img{display:block;width:100%;height:auto}
.banner{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}