@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
        :root { --malam: #151214; --panel: #211b1d; --garis: #493b3c; --teks: #fff9f0; --muted: #c4b7b2; --aksen: #e8c982; --oranye: #9b3342; }
        * { box-sizing: border-box; }
        body { min-height: 100vh; display: grid; place-items: center; margin: 0; background: var(--malam); color: var(--teks); font-family: 'Manrope', sans-serif; }
        body::before { content: ''; position: fixed; z-index: -1; inset: 0 0 auto auto; width: 45vw; height: 520px; background: linear-gradient(135deg, #8d283b, #d09b56); clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 58%); opacity: .7; }
        .login-box { width: min(420px, calc(100% - 32px)); padding: 32px; border: 1px solid var(--garis); background: var(--panel); box-shadow: 14px 14px 0 rgba(0, 0, 0, .18); }
        .logo { display: inline-block; margin-bottom: 42px; color: var(--aksen); font-size: 21px; font-weight: 800; letter-spacing: 3px; text-decoration: none; }
        .eyebrow { margin: 0 0 12px; color: var(--aksen); font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; }
        h1 { margin: 0 0 10px; font-size: 38px; line-height: 1; }
        .intro { margin: 0 0 28px; color: var(--muted); line-height: 1.6; }
        label { display: block; margin: 16px 0 7px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
        input, button { width: 100%; padding: 13px; font: inherit; font-size: 15px; }
        input { border: 1px solid var(--garis); background: rgba(0, 0, 0, .2); color: var(--teks); }
        button { margin-top: 22px; border: 0; background: var(--aksen); color: var(--malam); font-weight: 800; cursor: pointer; }
        .ubah-password { display: block; margin-top: 18px; color: var(--muted); font-size: 13px; text-align: center; }
        .ubah-password:hover { color: var(--aksen); }
        .error { margin: 18px 0 0; color: #f18b96; font-size: 13px; }