.login-welcome{background:radial-gradient(ellipse at 85% 0,#fff0ce,transparent 60%),linear-gradient(120deg,#fff9f3,#f9eded);padding:clamp(2rem,6vw,4rem) 0;overflow-x:clip}
.login-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;min-width:0}
.login-eyebrow{font-size:.78rem;letter-spacing:.15em;font-weight:800;color:#a22327}
.login-welcome h1{color:#782025;font-size:clamp(1.7rem,4vw,3rem);line-height:1.2;max-width:720px;margin:.8rem 0 1.1rem}
.login-welcome .lead{color:#4f535d;max-width:650px}
.login-card-stage{text-align:center;perspective:1000px;min-width:0;width:100%;padding:1rem .75rem 1.4rem;box-sizing:border-box}
.login-card-preview{max-width:min(100%,330px);width:100%;margin:auto;position:relative;padding:0;border:0;background:transparent;box-shadow:none;transform:rotate(-4deg);transform-origin:center center;animation:adi-card-float 7s ease-in-out infinite}
.login-card-preview .mc-stage{width:100%;max-width:none}
.login-card-preview .mc{cursor:default}
.login-card-stage>p{font-size:.75rem;color:#6c6258;margin-top:1.3rem}
.login-content{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:start;min-width:0}
#mulai.login-box{margin:0;max-width:none;border:1px solid #e4d9ca;border-radius:18px;padding:clamp(1.3rem,3vw,2rem);box-shadow:0 8px 24px #44220a08}
.login-box h2{margin-top:.3rem}
.login-box .row{display:flex;flex-wrap:wrap;gap:.7rem}
.login-journey h2{font-size:1.3rem}
.login-journey ol{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.login-journey li{border-left:3px solid #d5ad59;padding:.3rem 0 .3rem 1rem}
.login-journey b,.login-journey span{display:block}
.login-journey span{font-size:.9rem;color:#57606c;margin-top:.25rem}
.login-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.login-benefits article{border:1px solid #e4ddcf;padding:1.1rem;border-radius:14px;background:#fff}
.login-benefits article>span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:#fff4dc;color:#a72b28;border-radius:9px;font-size:1.25rem}
.login-benefits h3{font-size:1rem;margin:.6rem 0}
.login-benefits p{font-size:.85rem;color:#59616b;margin:0}
.login-quote{text-align:center;margin:2rem auto 0;max-width:700px;padding:1.3rem;border:0;font-size:1.2rem;color:#7e2927}
.login-quote small{display:block;font-size:.75rem;color:#6b6256;margin-top:.5rem}
@keyframes adi-card-float{50%{transform:translateY(-9px) rotate(-2deg)}}
@media(max-width:850px){.login-intro,.login-content{grid-template-columns:1fr;gap:1.5rem}.login-card-stage{max-width:min(100%,350px);margin:1rem auto;padding:.5rem .25rem 1rem}.login-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.login-welcome h1{font-size:2rem}}
@media(max-width:420px){.login-benefits{grid-template-columns:1fr}.login-card-preview{max-width:100%}.login-box .btn{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.login-card-preview{animation:none;transform:none}}