@font-face{font-family:'Indosat';src:url('./Indosat.ttf') format('truetype');font-display:swap}
:root{--ink:#0a0910;--muted:#76727a;--canvas:#f7f7f7;--blush:#fde8f1;--cream:#fff7e5;--teal:#2bb9b1;--pink:#f5008f;--red:#d84e58;--line:#e6e2e5}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;background:radial-gradient(circle at 10% 0%,#fff 0 24%,transparent 48%),var(--canvas);color:var(--ink);font-family:'Indosat',Arial,"Helvetica Neue",sans-serif}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(100%,430px);padding:42px 42px 32px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 18px 50px rgba(31,20,28,.1)}
.brand-mark{position:relative;width:48px;height:48px;margin-bottom:27px;border-radius:14px;background:#fff5f1;overflow:hidden}
.brand-mark i{position:absolute;display:block;border-radius:50%}
.brand-mark i:nth-child(1){width:30px;height:30px;left:0;bottom:-1px;background:var(--teal)}
.brand-mark i:nth-child(2){width:30px;height:30px;right:-2px;top:-3px;background:var(--pink)}
.brand-mark i:nth-child(3){width:22px;height:22px;right:-1px;bottom:0;background:#ffc400}
.eyebrow{margin:0 0 11px;font-size:.64rem;font-weight:900;letter-spacing:.14em}
h1{margin:0;font-size:clamp(2rem,8vw,3rem);line-height:1;letter-spacing:-.05em}
.intro{margin:13px 0 28px;color:var(--muted);font-size:.88rem;line-height:1.5}
.login-form{display:grid;gap:8px}
.login-form label{margin-top:9px;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.login-form input{width:100%;padding:13px 14px;border:1px solid #dcd8dc;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:.9rem;outline:none;transition:border-color .18s,box-shadow .18s}
.login-form input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,185,177,.16)}
.login-form button{margin-top:19px;padding:13px 15px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:inherit;font-size:.67rem;font-weight:900;letter-spacing:.09em;cursor:pointer;transition:transform .18s,background .18s}
.login-form button:hover{background:#29252d;transform:translateY(-1px)}
.login-form button span{margin-left:6px;color:#ffc400;font-size:1rem;line-height:0}
.login-error{margin:0 0 15px;padding:11px 12px;border:1px solid #f3c7d0;border-radius:9px;background:#fff1f4;color:var(--red);font-size:.75rem;line-height:1.4}
.auth-note{margin:29px 0 0;color:var(--muted);font-size:.67rem;text-align:center}
.auth-footer{margin:16px 0 0;color:var(--muted);font-size:.62rem;letter-spacing:.05em;text-align:center}
@media(max-width:520px){.auth-shell{padding:16px}.auth-card{padding:32px 24px 26px;border-radius:22px}}