:root{color-scheme:dark;--red:#ff003e;--pink:#ff7395;--dark:#100004}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% 0,#47000f 0,#150004 40%,#030003 80%);font-family:Arial,Helvetica,sans-serif;color:#fff}.page{width:min(100%,780px);margin:auto;padding:18px 18px 0}.frame{position:relative;border:3px solid var(--red);background:linear-gradient(135deg,#47000e,#120004 24%,#080003 70%,#34000b);box-shadow:0 0 22px #ed003d48,inset 0 0 28px #b8002630;clip-path:polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%)}.header{display:flex;align-items:center;justify-content:space-between;padding:32px 22px;min-height:198px;gap:12px}.brand{display:block;text-decoration:none;text-align:center;border:2px solid #fff;border-radius:70px 0 70px 0;padding:13px 45px;background:linear-gradient(100deg,#820007,#e60014,#780007);box-shadow:0 0 26px #ff004877,inset 0 0 18px #ff626322;color:#fff;position:relative}.brand:before{content:"";position:absolute;inset:-9px;border-top:2px solid #fff;border-bottom:2px solid #fff;border-radius:80px 0 80px 0;pointer-events:none}.brand>span{display:block;font-size:clamp(44px,9vw,79px);font-weight:900;letter-spacing:-3px;font-style:italic;text-shadow:0 0 10px #ffb4c355}.number{font-weight:400}.brand small{display:block;letter-spacing:3px;font-size:clamp(9px,2vw,15px);font-weight:700}.orb{flex:none;width:21px;height:21px;border:2px solid #000;border-radius:50%;background:radial-gradient(circle at 36% 28%,#fff,#ff4984 28%,#9c0028 65%,#200008);box-shadow:0 0 20px #ff005b99}.ticker{margin:28px 0 24px;overflow:hidden;border-block:3px solid var(--red);background:linear-gradient(#30000a,#090002,#36000b);padding:23px 0;box-shadow:0 0 20px #ff003522}.ticker-track{display:flex;width:max-content;animation:travel 24s linear infinite}.ticker span{padding:0 30px;font-size:clamp(16px,3.1vw,26px);font-weight:800;letter-spacing:2px;white-space:nowrap}.feature{padding:30px 29px 28px}.feature:before,.feature:after{content:"";position:absolute;top:40px;bottom:40px;width:2px;background:linear-gradient(transparent,#ff648899,transparent)}.feature:before{left:14px}.feature:after{right:14px}.rail{height:17px;margin:-18px 0 12px;border-block:1px solid #fe68817a;background:linear-gradient(110deg,#580019 0,#f19aac 48%,#faf3f5 49%,#270006 50%,#090003 100%)}.banner{display:block;width:100%;height:auto;border:3px solid var(--red);border-radius:16px;box-shadow:0 0 24px #f000393f;object-fit:contain}.actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}.button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:95px;border:2px solid #ed7694;border-radius:16px;text-decoration:none;color:#fff;font-size:clamp(13px,2.7vw,24px);font-weight:900;letter-spacing:1px;text-align:center;text-shadow:1px 2px 3px #000;box-shadow:0 9px 0 #650017,0 12px 22px #0009,inset 0 5px 6px #fff2;overflow:hidden;transition:transform .2s,filter .2s}.register{background:linear-gradient(#51001b,#100004 55%,#2b000a)}.login{background:linear-gradient(#ff97b4 0,#ff0048 15%,#b2002b 58%,#210005 100%);animation:glow 3s ease-in-out infinite}.button:after{content:"";position:absolute;inset:0;transform:translateX(-140%) skewX(-20deg);background:linear-gradient(90deg,transparent,#fff3,transparent);animation:shine 5s ease-in-out infinite}.button:hover{transform:translateY(-3px);filter:brightness(1.15)}.button:active{transform:translateY(2px)}a:focus-visible{outline:3px solid #fff;outline-offset:5px}.button>span{font-size:1.4em}.welcome{margin-top:44px;padding:28px 12px 24px;text-align:center;border-top:2px solid #ff2453;background:radial-gradient(ellipse,#65002a55,transparent 70%)}h1{font-size:clamp(17px,3vw,28px);letter-spacing:3px;text-shadow:0 0 14px #ff669e;margin:0 0 10px}h1 span{color:#ff91be}h2{margin:0;color:#ff789c;letter-spacing:5px;font-size:24px}.welcome p{font-size:14px;color:#ddbac4;line-height:1.7}.home{display:inline-block;color:#ffc5d5;font-size:13px;font-weight:bold;letter-spacing:2px;padding:13px 22px;border:1px solid #b40030;border-radius:8px;text-decoration:none;background:#240009}footer{padding:18px;text-align:center;font-size:11px;letter-spacing:3px;color:#bd8b99;border-top:1px solid #560015}@keyframes travel{to{transform:translateX(-50%)}}@keyframes shine{0%,60%{transform:translateX(-140%) skewX(-20deg)}90%,100%{transform:translateX(140%) skewX(-20deg)}}@keyframes glow{50%{box-shadow:0 9px 0 #650017,0 0 26px #ff005566,inset 0 5px 6px #fff3}}@media(max-width:480px){.page{padding:12px 10px 0}.header{min-height:126px;padding:25px 13px}.brand{padding:10px 25px}.orb{width:15px;height:15px}.ticker{margin:20px 0;padding:16px 0}.feature{padding:24px 15px}.feature:before{left:7px}.feature:after{right:7px}.rail{margin:-14px 0 9px;height:13px}.banner{border-radius:11px;border-width:2px}.actions{gap:12px;margin-top:22px}.button{min-height:67px;border-radius:12px;font-size:clamp(11px,3.1vw,15px);letter-spacing:.6px}.welcome{margin-top:30px;padding-top:23px}h1{letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}.ticker-track{width:100%;justify-content:center}.ticker span:not(:first-child){display:none}.ticker span{font-size:14px;padding:0}}

/* Cahaya menyapu bingkai dan tombol, serta aksen petir pada tepi banner. */
.frame{isolation:isolate}.frame>*{position:relative;z-index:1}.frame:after{content:"";position:absolute;inset:-30%;width:auto;height:auto;background:linear-gradient(115deg,transparent 42%,#ffffff08 46%,#ffffff45 49%,#ffb4d045 50%,transparent 54%);transform:translateX(-100%);animation:frame-sweep 7s ease-in-out infinite;pointer-events:none;z-index:2}.feature:after{right:-30%;bottom:-30%;top:-30%;width:auto}.header:after{animation-delay:1.4s}.rail{overflow:hidden}.rail:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,#fff9,transparent);transform:translateX(-100%);animation:frame-sweep 5s ease-in-out infinite}.ticker-track{animation-duration:19s}.feature .lightning{position:absolute;top:38px;height:calc(100% - 155px);width:32px;z-index:3;pointer-events:none;fill:none;stroke:#ffd5e3;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px #ff2e69) drop-shadow(0 0 7px #ff0040);opacity:0;animation:bolt 8s ease-in-out infinite}.feature .lightning-left{left:1px}.feature .lightning-right{right:1px;transform:scaleX(-1);animation-delay:3.8s}.lightning .branch{stroke-width:.8}.button:after{animation-duration:4.5s}.login:after{animation-delay:.5s}.brand{animation:brand-light 5s ease-in-out infinite}.orb{animation:orb-light 4s ease-in-out infinite}@keyframes frame-sweep{0%,48%{transform:translateX(-100%)}77%,100%{transform:translateX(100%)}}@keyframes bolt{0%,30%,47%,100%{opacity:0}35%{opacity:.8}40%{opacity:.16}44%{opacity:.55}}@keyframes brand-light{50%{box-shadow:0 0 36px #ff004888,inset 0 0 18px #ff626333}}@keyframes orb-light{50%{box-shadow:0 0 25px #ff005bdd;filter:brightness(1.3)}}@media(max-width:480px){.feature .lightning{width:23px;top:29px;height:calc(100% - 125px)}}@media(prefers-reduced-motion:reduce){.feature .lightning,.frame:after,.rail:after,.button:after{display:none}.ticker-track{animation:none}}