/* Seluruh tampilan memakai font sistem; tidak memerlukan koneksi ke CDN. */
:root{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#203047;font-synthesis:none;--purple:#6252d7;--text:#202a45}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;background:#f4f8ff;display:flex;align-items:center;justify-content:center;padding:34px 20px;overflow-x:hidden}
.ambient{position:fixed;border-radius:50%;pointer-events:none;filter:blur(1px);z-index:0}.ambient-1{width:480px;height:480px;top:-250px;left:-170px;background:radial-gradient(circle,#d1fff1bb,transparent 70%)}.ambient-2{width:570px;height:570px;bottom:-340px;right:-160px;background:radial-gradient(circle,#dad5ff88,transparent 70%)}
.login-shell{width:min(1100px,100%);min-height:650px;display:grid;grid-template-columns:1.02fr 0.98fr;background:white;border-radius:31px;box-shadow:0 35px 100px rgba(50,72,127,.12),0 2px 5px #b5c9ed19;overflow:hidden;position:relative;z-index:1;border:1px solid #e7edf8}
.showcase{background:linear-gradient(151deg,#443ba4 1%,#6454d9 54%,#7463e8 100%);color:white;padding:37px 44px 27px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.showcase::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#fff4 1.1px,transparent 1.1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,transparent,#000 60%);opacity:.16;pointer-events:none}.showcase::after{content:'';position:absolute;left:-130px;right:-130px;bottom:-245px;height:460px;border:1px solid #ffffff1e;border-radius:50%;pointer-events:none}
.brand{position:relative;z-index:2;display:flex;gap:11px;align-items:center}.brand-logo{height:43px;width:43px;border:1px solid #ffffff58;background:#ffffff29;border-radius:14px;display:grid;place-items:center;font-size:24px;box-shadow:inset 0 1px #fff7}.brand strong,.brand small{display:block}.brand strong{font-family:Outfit,system-ui;font-size:22px;letter-spacing:-.5px;line-height:1.08}.brand small{font-size:11px;color:#ebdcff;margin-top:3px;font-weight:700;letter-spacing:2px}
.showcase-copy{position:relative;z-index:2;margin-top:51px}.eyebrow{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#d9e4ff}.sparkle{color:#79f0d5;font-size:15px}.showcase-copy h1{font-family:Outfit,system-ui;font-size:clamp(32px,3.1vw,43px);font-weight:800;line-height:1.12;letter-spacing:-1.5px;max-width:410px;margin:17px 0}.showcase-copy h1 em{font-style:normal;color:#9cf4d9}.showcase-copy p{font-size:13px;line-height:1.85;color:#e1e4ff;max-width:350px;margin:0}
.game-art{height:280px;position:relative;flex:1;min-height:245px;margin-top:3px}.orbit{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-19deg);border:1px dashed #e2daff5c;border-radius:50%}.orbit-one{width:280px;height:170px}.orbit-two{width:370px;height:250px;transform:translate(-50%,-50%) rotate(13deg);border-color:#e2daff24}
.coin{position:absolute;display:grid;place-items:center;border-radius:50%;font-family:Outfit,system-ui;box-shadow:0 22px 35px #251c7b6b,inset 0 5px 8px #ffffff95,inset 0 -10px 12px #ae690854;border:6px solid #f7cc57;background:radial-gradient(circle at 25% 20%,#ffefac,#ffc54f 55%,#ee9923 100%);color:#995c10}.coin-front{width:126px;height:126px;left:calc(50% - 58px);top:30%;transform:rotate(-17deg);font-size:42px;font-weight:900;animation:floaty 5s ease-in-out infinite}.coin-front::before{content:'';position:absolute;inset:9px;border-radius:50%;border:2px dashed #a969184d}.coin-front span{position:relative}.coin-back{width:75px;height:75px;left:18%;top:17%;transform:rotate(25deg);font-size:38px;opacity:.87;animation:floaty 6s ease-in-out infinite reverse}
.spark{position:absolute;color:#c4fff1;animation:blink 4s ease-in-out infinite}.star-1{font-size:44px;right:12%;top:12%}.star-2{font-size:18px;left:9%;bottom:15%}.star-3{font-size:29px;right:12%;bottom:15%}.float-card{position:absolute;display:flex;align-items:center;gap:9px;background:#ffffffeb;border:1px solid #fff;border-radius:15px;padding:11px 13px;box-shadow:0 18px 34px #1c146b55;color:#182443}.float-card small,.float-card strong{display:block;white-space:nowrap}.float-card small{font-size:10px;color:#667995}.float-card strong{font-size:11px;font-weight:800;margin-top:3px}.savings-card{top:8%;right:-6px;transform:rotate(5deg)}.glass-icon{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:#d8fae8;color:#0b9f7a;font-weight:900;font-size:17px}.level-card{bottom:3%;left:0;transform:rotate(-5deg);display:grid;grid-template-columns:32px auto;column-gap:8px}.trophy{font-size:24px;color:#ffb83c;grid-row:span 2}.micro-progress{grid-column:2;height:5px;background:#e5eafb;border-radius:10px;width:110px;margin-top:7px;overflow:hidden}.micro-progress i{display:block;height:100%;width:70%;border-radius:10px;background:linear-gradient(90deg,#52d2ae,#8b7bff)}
.bottom-highlights{position:relative;z-index:2;display:flex;justify-content:space-between;gap:9px;flex-wrap:wrap;border-top:1px solid #ffffff38;padding-top:20px;font-size:10px;font-weight:800;color:#edf1ff}
.login-panel{position:relative;padding:71px 59px 30px;display:flex;flex-direction:column;justify-content:center}.mobile-brand{display:none}.welcome-pill{display:inline-flex;align-self:start;align-items:center;gap:8px;border:1px solid #ddf4ee;background:#ecfcf7;color:#099676;font-size:10px;font-weight:800;letter-spacing:1px;padding:9px 12px;border-radius:30px}.online-dot{width:7px;height:7px;border-radius:50%;background:#14b997;box-shadow:0 0 0 3px #14b9971e}
.login-panel h2{font-family:Outfit,system-ui;font-weight:800;letter-spacing:-1.4px;font-size:40px;line-height:1.12;margin:22px 0 13px}.login-panel h2 span:first-child{color:#6453d8}.intro{color:#8290a4;font-size:13px;line-height:1.9;margin:0 0 30px;max-width:340px}.login-form{display:grid;gap:21px}.form-field label{display:block;font-size:12px;font-weight:800;margin:0 0 9px;color:#3d4962}.input-wrap{height:52px;display:flex;align-items:center;background:#f7f9fd;border:1.5px solid #e3e8f2;border-radius:13px;padding:0 15px;gap:12px;transition:box-shadow .2s,border-color .2s}.input-wrap:focus-within{border-color:#8e81ec;box-shadow:0 0 0 4px #7162e115;background:white}.input-icon{width:17px;text-align:center;font-size:23px;color:#9395ac;line-height:1}.key-icon{font-size:19px}.input-wrap input{min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:13px;color:#293a55;width:100%;height:100%}.input-wrap input::placeholder{color:#a0abc1}.reveal{border:0;background:transparent;color:#8996ac;cursor:pointer;border-radius:8px;min-width:30px;height:32px;display:grid;place-items:center}.reveal:hover,.reveal:focus-visible{color:#6555da;background:#efeefe}
.submit-button{margin-top:1px;display:flex;align-items:center;justify-content:center;gap:15px;width:100%;height:53px;background:linear-gradient(120deg,#6755dc,#5948c8);border:0;border-radius:13px;color:white;box-shadow:0 10px 22px #6455db38;font:inherit;font-weight:800;font-size:13px;cursor:pointer;transition:transform .2s,box-shadow .2s}.submit-button:hover{transform:translateY(-2px);box-shadow:0 13px 29px #6455db55}.submit-button:focus-visible{outline:3px solid #68dfbb;outline-offset:3px}.button-arrow{font-size:20px;line-height:1}
.admin-note{background:#f7f9fe;border:1px solid #e9eef8;border-radius:13px;display:flex;gap:10px;align-items:flex-start;padding:15px;margin-top:24px;font-size:11px;line-height:1.7;color:#7786a0}.admin-note>span:first-child{font-size:15px}.login-foot{display:flex;justify-content:space-between;gap:8px;margin-top:25px;color:#9da9bd;font-size:10px}.login-foot b{color:#7768df}.message{font-size:12px;line-height:1.6;border-radius:12px;padding:12px 14px;margin:0 0 17px}.message.error{background:#fff0ee;color:#ac4b47}.message.good{background:#e9fbf0;color:#0d805b}.message.info{background:#edf5ff;color:#40669b}.message a{color:#5141cc;font-weight:800}
@keyframes floaty{50%{transform:translateY(-11px) rotate(-13deg)}}@keyframes blink{50%{opacity:.25;transform:scale(.65)}}
@media(max-width:980px){.login-shell{grid-template-columns:.94fr 1.06fr}.showcase{padding:30px}.login-panel{padding:65px 39px 58px}.login-foot{margin-top:24px}.showcase-copy h1{font-size:33px}.bottom-highlights{font-size:9px}.savings-card{right:-13px}}
@media(max-width:730px){body{padding:15px}.login-shell{display:block;max-width:490px;min-height:auto;border-radius:24px}.showcase{display:none}.login-panel{padding:32px 30px 73px;min-height:610px}.mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:31px;font-family:Outfit,system-ui;font-weight:800;font-size:20px;letter-spacing:-.5px}.mobile-brand small{display:block;font-family:'DM Sans',system-ui;color:#6554d9;font-size:10px;letter-spacing:2px}.mobile-logo{width:40px;height:40px;background:linear-gradient(120deg,#6653dc,#1dcba2);border-radius:12px;color:white;display:grid;place-items:center;font-size:23px}.login-panel h2{font-size:37px;margin-top:19px}.login-foot{margin-top:28px}.intro{margin-bottom:25px}}
@media(max-width:400px){.login-panel{padding:27px 22px 80px}.login-foot{display:block;line-height:2}.login-panel h2{font-size:35px}.admin-note{margin-top:19px}}
@media(prefers-reduced-motion:reduce){.coin,.spark{animation:none}.submit-button{transition:none}}