/* ==========================================================================
   Auth Royal — skin maroon + emas untuk halaman Masuk & Daftar.
   Murni CSS (tanpa CDN Tailwind) agar plug and play di aaPanel/Nginx + PHP 8.2.
   Seluruh identitas (logo, nama, tagline) dirender dinamis dari app_settings.
   ========================================================================== */

:root {
    --auth-maroon-900: #2A040A;
    --auth-maroon-800: #4A0B16;
    --auth-maroon-700: #6A1020;
    --auth-maroon-950: #1A0205;
    --auth-gold-300: #FCE08B;
    --auth-gold-400: #F4C430;
    --auth-gold-500: #D4AF37;
    --auth-gold-600: #AA8825;
    --auth-text: #ffffff;
    --auth-muted: #cfc4c6;
    --auth-radius: 18px;
}

/* Final DigiBankPro cascade lock (must remain last). */
html{background:#eef6eb!important}body.auth-royal{align-items:flex-start!important;padding:clamp(22px,6vh,64px) 16px 32px!important;background:radial-gradient(circle at 8% 0,rgba(63,180,79,.2),transparent 28%),radial-gradient(circle at 94% 8%,rgba(233,183,44,.17),transparent 25%),linear-gradient(155deg,#fafff7,#edf6e9 65%,#e7f1e4)!important;color:#153423!important;font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;overflow-y:auto!important}
.auth-shell{width:min(100%,460px)!important;animation:authEntrance .65s cubic-bezier(.2,.8,.2,1) both!important}.auth-shell:before{background:#43ad4d!important;opacity:.1!important}.auth-card{overflow:visible!important;padding:34px clamp(22px,6vw,34px) 25px!important;border:1px solid rgba(24,132,59,.13)!important;border-radius:30px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 28px 70px rgba(27,91,44,.13),inset 0 1px #fff!important}.auth-card:before{content:'DIGITAL BANKING';position:absolute;top:18px;left:24px;padding:5px 9px;border-radius:99px;background:#eaf6e7;color:#0b7335;font:700 8px/1 'Plus Jakarta Sans';letter-spacing:.16em}.auth-corner{display:none!important}
.auth-brand{margin:12px 0 28px!important}.auth-logo-ring{width:92px!important;height:92px!important;margin-bottom:12px!important;padding:10px!important;border:0!important;border-radius:24px!important;background:#f3faef!important;box-shadow:0 12px 30px rgba(14,121,53,.15)!important}.auth-logo{object-fit:contain!important;border-radius:0!important;animation:none!important}.auth-brand h1{font:800 28px Manrope,sans-serif!important;letter-spacing:-.045em!important;background:linear-gradient(100deg,#087335 10%,#159447 63%,#d5a516)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;text-shadow:none!important}.auth-brand p{color:#718177!important}.auth-divider{width:46px!important;height:4px!important;border-radius:99px!important;opacity:1!important;background:linear-gradient(90deg,#159447,#e9b72c)!important}
.auth-field>label,.auth-label{color:#315d40!important}.auth-input-wrap>svg{color:#159447!important;opacity:1!important}.auth-input{height:52px!important;padding:0 46px 0 45px!important;border:1px solid #d8e7d4!important;border-radius:16px!important;background:#f8fbf6!important;color:#153423!important;font:600 13px 'Plus Jakarta Sans'!important;box-shadow:none!important}.auth-input:focus{border-color:#159447!important;background:#fff!important;box-shadow:0 0 0 4px rgba(21,148,71,.11)!important}.auth-eye,.auth-link{color:#087335!important}.auth-captcha-box{border-color:#d8e7d4!important;border-radius:14px!important;background:#fff!important}.auth-captcha-refresh{border:0!important;border-radius:14px!important;background:#e9f5e6!important;color:#087335!important}.auth-terms{color:#718177!important;background:#f7faf5!important;border:1px solid #e1ebde!important;border-radius:14px!important}.auth-remember input,.auth-terms input{accent-color:#159447}
.auth-submit{position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;height:58px!important;margin-top:7px!important;padding:5px 66px 5px 22px!important;overflow:hidden!important;border:0!important;border-radius:99px!important;background:linear-gradient(135deg,#159447,#087335)!important;color:#fff!important;font:700 13px 'Plus Jakarta Sans'!important;box-shadow:0 14px 30px rgba(8,115,53,.24)!important}.auth-submit:before{content:'Geser untuk lanjut';position:absolute;right:67px;color:rgba(255,255,255,.6);font-size:9px;opacity:0;transition:.3s}.auth-submit svg{position:absolute!important;right:5px!important;width:48px!important;height:48px!important;padding:14px!important;border-radius:50%!important;background:#fff!important;color:#087335!important;box-shadow:0 5px 15px rgba(1,61,25,.2)!important;transition:transform .55s cubic-bezier(.2,.9,.2,1)!important}.auth-submit:hover:before{opacity:1}.auth-submit:hover svg{transform:translateX(-8px)!important}.auth-submit:active svg{transform:translateX(-235px) rotate(360deg)!important}.auth-submit:disabled svg{transform:none!important}.auth-footlinks{border-color:#e5ede2!important}.auth-footlinks span,.auth-secure{color:#718177!important}.auth-secure svg{color:#159447!important}
@media(max-width:480px){.auth-card{padding:32px 20px 22px!important;border-radius:25px!important}.auth-submit:before{display:none}}

/* True drag-to-login control */
.auth-slide-submit{--slide-x:0px;--slide-progress:0;cursor:grab!important;touch-action:none!important;justify-content:center!important;padding:5px 18px 5px 66px!important;background:linear-gradient(90deg,#0a7737,#159447)!important;isolation:isolate}.auth-slide-submit:before{content:''!important;display:block!important;position:absolute!important;inset:0!important;border-radius:inherit!important;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.04))!important;opacity:var(--slide-progress)!important;transform:none!important;transition:opacity .15s!important;z-index:-1}.auth-slide-submit:after{content:'Geser sampai ujung';position:absolute;right:20px;color:rgba(255,255,255,.58);font:600 9px 'Plus Jakarta Sans';letter-spacing:.04em;opacity:calc(1 - var(--slide-progress));pointer-events:none}.auth-slide-submit #submitLabel{position:relative;z-index:2;transition:opacity .2s,transform .2s}.auth-slide-submit svg{left:5px!important;right:auto!important;transform:translateX(var(--slide-x))!important;transition:transform .42s cubic-bezier(.2,.8,.2,1),background .2s,color .2s!important;z-index:3}.auth-slide-submit.is-dragging{cursor:grabbing!important}.auth-slide-submit.is-dragging svg{transition:none!important;box-shadow:0 7px 20px rgba(0,60,27,.28)!important}.auth-slide-submit.is-dragging #submitLabel{opacity:.25;transform:translateX(8px)}.auth-slide-submit.is-resetting svg{transition:transform .48s cubic-bezier(.3,1.4,.45,1)!important}.auth-slide-submit.is-complete{cursor:default!important;background:linear-gradient(90deg,#087335,#0c6832)!important}.auth-slide-submit.is-complete svg{background:#e9b72c!important;color:#fff!important}.auth-slide-submit.is-complete:after{display:none}.auth-slide-submit:hover svg,.auth-slide-submit:active svg{transform:translateX(var(--slide-x))!important}.auth-slide-submit:hover #submitLabel{opacity:1!important}.auth-slide-submit:focus-visible{outline:3px solid rgba(233,183,44,.55)!important;outline-offset:3px}
@media(max-width:480px){body.auth-royal{padding-top:28px!important}.auth-brand{margin-top:18px!important}.auth-slide-submit:after{display:block!important;right:18px}}

/* Marketplace Affiliate final skin — intentionally last and authoritative. */
:root{--auth-maroon-950:#f7f8fa;--auth-maroon-900:#fff;--auth-maroon-800:#f3f4f6;--auth-maroon-700:#fe2c55;--auth-gold-300:#25f4ee;--auth-gold-400:#25f4ee;--auth-gold-500:#fe2c55;--auth-gold-600:#e11d48;--auth-text:#0f0f0f;--auth-muted:#6b7280}
html{background:#f7f8fa!important}body.auth-royal{padding:clamp(24px,6vh,62px) 16px 32px!important;background:radial-gradient(circle at 5% 2%,rgba(37,244,238,.12),transparent 28%),radial-gradient(circle at 98% 5%,rgba(254,44,85,.12),transparent 30%),linear-gradient(155deg,#fff,#f7f8fa)!important;color:#0f0f0f!important}
body.auth-royal:before{background-image:linear-gradient(rgba(15,15,15,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(15,15,15,.025) 1px,transparent 1px)!important}.auth-particle{background:#fe2c55!important}.auth-card{border:1px solid #e5e7eb!important;background:rgba(255,255,255,.96)!important;box-shadow:0 28px 75px rgba(15,15,15,.11)!important}.auth-card:before{content:'AFFILIATE MARKETPLACE'!important;background:#0f0f0f!important;color:#25f4ee!important}.auth-logo-ring{background:#0f0f0f!important;box-shadow:-7px 7px 0 rgba(37,244,238,.45),7px -7px 0 rgba(254,44,85,.35)!important}.auth-brand h1{background:linear-gradient(100deg,#0f0f0f 10%,#fe2c55 70%,#0891b2)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.auth-brand p{color:#6b7280!important}.auth-divider{background:linear-gradient(90deg,#25f4ee,#fe2c55)!important}.auth-field>label,.auth-label{color:#374151!important}.auth-input-wrap>svg{color:#fe2c55!important}.auth-input{border-color:#e5e7eb!important;background:#f9fafb!important;color:#0f0f0f!important}.auth-input:focus{border-color:#fe2c55!important;box-shadow:0 0 0 4px rgba(254,44,85,.10)!important}.auth-eye,.auth-link{color:#e11d48!important}.auth-terms{color:#6b7280!important;background:#f9fafb!important;border-color:#e5e7eb!important}.auth-captcha-box{border-color:#e5e7eb!important}.auth-captcha-refresh{background:#fff1f4!important;color:#e11d48!important}.auth-submit,.auth-slide-submit{background:linear-gradient(90deg,#0f0f0f,#252525)!important;box-shadow:0 14px 30px rgba(15,15,15,.24)!important}.auth-submit svg{color:#fe2c55!important}.auth-slide-submit.is-complete{background:linear-gradient(90deg,#e11d48,#fe2c55)!important}.auth-slide-submit.is-complete svg{background:#25f4ee!important;color:#0f0f0f!important}.auth-footlinks{border-color:#e5e7eb!important}.auth-footlinks span,.auth-secure{color:#6b7280!important}.auth-secure svg{color:#fe2c55!important}

/* High-contrast validation messages */
.auth-alert{background:#fff1f1!important;border:1px solid #efaaaa!important;color:#a51f2d!important;opacity:1!important;font-weight:600!important;line-height:1.55!important;box-shadow:0 5px 16px rgba(165,31,45,.08)!important}.auth-alert span,.auth-alert p,.auth-alert strong{color:#a51f2d!important;opacity:1!important}.auth-alert svg{color:#c52d3d!important;stroke:#c52d3d!important;opacity:1!important;flex-shrink:0!important}.auth-toast.is-error{background:#fff!important;border-color:#e69aa2!important;color:#a51f2d!important}.auth-toast.is-error span,.auth-toast.is-error svg{color:#a51f2d!important;stroke:#a51f2d!important;opacity:1!important}

/* Professional slider motion and touch feedback */
.auth-slide-submit{background-size:200% 100%!important;animation:authTrackGlow 3.2s ease-in-out infinite!important}.auth-slide-submit #submitLabel:after{content:'  ››';display:inline-block;margin-left:5px;letter-spacing:-1px;opacity:.62;animation:authChevrons 1.5s ease-in-out infinite}.auth-slide-submit:not(.is-dragging):not(.is-complete) svg{animation:authKnobIdle 2.4s cubic-bezier(.45,0,.2,1) infinite}.auth-slide-submit.is-hint svg{animation:authTapHint .85s cubic-bezier(.2,.8,.2,1)!important}.auth-slide-submit.is-hint #submitLabel{animation:authLabelHint .85s ease!important}.auth-slide-submit.is-dragging{animation:none!important}.auth-slide-submit.is-dragging:after{opacity:.22!important}.auth-slide-submit.is-dragging svg{animation:none!important;background:#f8fff7!important;color:#159447!important;transform:translateX(var(--slide-x)) scale(1.06)!important}.auth-slide-submit.is-complete{animation:authSuccessTrack .55s ease both!important}.auth-slide-submit.is-complete #submitLabel:after{content:' ✓';letter-spacing:0;opacity:1;animation:none}.auth-slide-submit.is-complete svg{animation:authSuccessKnob .5s ease both!important}
@keyframes authTrackGlow{0%,100%{box-shadow:0 14px 30px rgba(8,115,53,.22)}50%{box-shadow:0 17px 38px rgba(8,115,53,.34)}}
@keyframes authKnobIdle{0%,62%,100%{transform:translateX(var(--slide-x))}74%{transform:translateX(calc(var(--slide-x) + 7px))}86%{transform:translateX(var(--slide-x))}}
@keyframes authChevrons{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(4px);opacity:.9}}
@keyframes authTapHint{0%,100%{transform:translateX(var(--slide-x))}35%{transform:translateX(calc(var(--slide-x) + 22px))}62%{transform:translateX(calc(var(--slide-x) + 8px))}}
@keyframes authLabelHint{0%,100%{opacity:1}40%{opacity:.45;transform:translateX(4px)}}
@keyframes authSuccessTrack{0%{filter:brightness(1)}50%{filter:brightness(1.16)}100%{filter:brightness(.96)}}
@keyframes authSuccessKnob{0%{transform:translateX(var(--slide-x)) scale(1)}50%{transform:translateX(var(--slide-x)) scale(1.12)}100%{transform:translateX(var(--slide-x)) scale(1)}}
@media(prefers-reduced-motion:reduce){.auth-slide-submit,.auth-slide-submit svg,.auth-slide-submit #submitLabel:after{animation:none!important}}

/* ==========================================================================
   DigiBankPro 2026 — complete auth reskin. Kept at the end to replace the
   legacy royal presentation while preserving form validation and endpoints.
   ========================================================================== */
:root{--auth-maroon-950:#edf6e9;--auth-maroon-900:#fff;--auth-maroon-800:#eaf5e7;--auth-maroon-700:#159447;--auth-gold-300:#17843b;--auth-gold-400:#159447;--auth-gold-500:#e9b72c;--auth-gold-600:#c98f0a;--auth-text:#153423;--auth-muted:#718177}
html{background:#eef6eb}
body.auth-royal{align-items:flex-start;padding:clamp(22px,6vh,64px) 16px 32px;background:radial-gradient(circle at 8% 0,rgba(63,180,79,.2),transparent 28%),radial-gradient(circle at 94% 8%,rgba(233,183,44,.17),transparent 25%),linear-gradient(155deg,#fafff7 0%,#edf6e9 65%,#e7f1e4 100%);color:#153423;font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-y:auto}
body.auth-royal:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.42;background-image:linear-gradient(rgba(9,119,53,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(9,119,53,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}
body.auth-royal ::selection{background:#b9e7b7;color:#075626}.auth-particles{opacity:.45}.auth-particle{border-radius:3px;background:#48ad4b;animation-name:authFloatUp}.auth-shell{width:min(100%,460px);animation:authEntrance .65s cubic-bezier(.2,.8,.2,1) both}.auth-shell:before{background:#43ad4d;opacity:.1;filter:blur(80px)}
@keyframes authEntrance{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.auth-card{overflow:visible;padding:34px clamp(22px,6vw,34px) 25px;border:1px solid rgba(24,132,59,.13);border-radius:30px;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);box-shadow:0 28px 70px rgba(27,91,44,.13),inset 0 1px 0 #fff}.auth-card:before{content:"DIGITAL BANKING";position:absolute;top:18px;left:24px;padding:5px 9px;border-radius:99px;background:#eaf6e7;color:#0b7335;font:700 8px/1 'Plus Jakarta Sans';letter-spacing:.16em}.auth-corner{display:none}
.auth-brand{margin:12px 0 28px}.auth-logo-ring{width:92px;height:92px;margin-bottom:12px;padding:10px;border:0;border-radius:24px;background:#f3faef;box-shadow:0 12px 30px rgba(14,121,53,.15)}.auth-logo{object-fit:contain;border-radius:0;animation:none}.auth-brand h1{font-family:Manrope,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.045em;background:linear-gradient(100deg,#087335 10%,#159447 63%,#d5a516);-webkit-background-clip:text;background-clip:text;text-shadow:none}.auth-brand p{margin-top:7px;color:#718177;font-size:9px;font-weight:700;letter-spacing:.18em}.auth-divider{width:46px;height:4px;margin-top:14px;border-radius:99px;opacity:1;background:linear-gradient(90deg,#159447,#e9b72c)}
.auth-field{margin-bottom:17px}.auth-field>label,.auth-label{margin:0 0 8px 2px;color:#315d40;font-size:10px;font-weight:700;letter-spacing:.07em}.auth-input-wrap>svg{left:15px;color:#159447;opacity:1}.auth-input{height:52px;padding:0 46px 0 45px;border:1px solid #d8e7d4;border-radius:16px;background:#f8fbf6;color:#153423;font:600 13px 'Plus Jakarta Sans';box-shadow:none}.auth-input:focus{border-color:#159447;background:#fff;box-shadow:0 0 0 4px rgba(21,148,71,.11)}.auth-input::placeholder{color:#a0ada4;font-weight:500}.auth-eye{color:#668171}.auth-meta{color:#718177}.auth-link{color:#087335!important;font-weight:700}.auth-remember input,.auth-terms input{accent-color:#159447}.auth-terms{color:#718177;background:#f7faf5;border:1px solid #e1ebde;border-radius:14px;padding:12px}
.auth-captcha-head{color:#587061}.auth-captcha-timer{color:#8a998f}.auth-captcha-row{gap:8px}.auth-captcha-box{border:1px solid #d8e7d4;border-radius:14px;background:#fff}.auth-captcha-refresh{border:0;border-radius:14px;background:#e9f5e6;color:#087335}.auth-captcha-input{margin-top:9px;padding-left:15px}.auth-alert{border-color:#f2b8b8;background:#fff1f1;color:#b83232}.auth-toast{border-color:#b8ddb4;background:rgba(255,255,255,.96);color:#153423;box-shadow:0 16px 50px rgba(25,84,40,.17)}
.auth-submit{position:relative;display:flex;align-items:center;justify-content:flex-start;width:100%;height:58px;margin-top:7px;padding:5px 66px 5px 22px;overflow:hidden;border:0;border-radius:99px;background:linear-gradient(135deg,#159447,#087335);color:#fff;font:700 13px 'Plus Jakarta Sans';letter-spacing:.01em;box-shadow:0 14px 30px rgba(8,115,53,.24);transition:transform .2s,box-shadow .2s}.auth-submit:before{content:"Geser untuk lanjut";position:absolute;right:67px;color:rgba(255,255,255,.58);font-size:9px;font-weight:600;opacity:0;transform:translateX(8px);transition:.3s}.auth-submit svg{position:absolute;right:5px;width:48px!important;height:48px!important;padding:14px;border-radius:50%;background:#fff;color:#087335;box-shadow:0 5px 15px rgba(1,61,25,.2);transition:transform .55s cubic-bezier(.2,.9,.2,1),color .2s}.auth-submit:hover{transform:translateY(-1px);box-shadow:0 17px 35px rgba(8,115,53,.3)}.auth-submit:hover span{opacity:.25}.auth-submit:hover:before{opacity:1;transform:none}.auth-submit:hover svg{transform:translateX(-8px);color:#d19c0e}.auth-submit:active svg{transform:translateX(-235px) rotate(360deg)}.auth-submit:disabled{opacity:.62;transform:none}.auth-submit:disabled svg{transform:none}.auth-footlinks{border-top:1px solid #e5ede2;color:#718177}.auth-footlinks span{color:#718177!important}.auth-secure{color:#85948a}.auth-secure svg{color:#159447}
@media(max-width:480px){body.auth-royal{padding:18px 12px 26px}.auth-card{padding:32px 20px 22px;border-radius:25px}.auth-logo-ring{width:82px;height:82px}.auth-brand h1{font-size:25px}.auth-submit:before{display:none}.auth-submit:hover span{opacity:1}}

* { box-sizing: border-box; }

/* Ikon stroke vector — tetap tajam pada layar Retina/4K. */
svg {
    flex-shrink: 0;
    shape-rendering: geometricPrecision;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

html { background: var(--auth-maroon-950); }

body.auth-royal {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 24px 16px;
    overflow-x: hidden;
    background: radial-gradient(circle at center, var(--auth-maroon-800) 0%, var(--auth-maroon-950) 100%);
    color: var(--auth-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

body.auth-royal ::selection {
    background: var(--auth-gold-500);
    color: var(--auth-maroon-900);
}

/* ── Partikel latar ─────────────────────────────────────────────────────── */
.auth-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-particle {
    position: absolute;
    border-radius: 50%;
    opacity: .6;
    background: radial-gradient(circle, var(--auth-gold-300) 0%, rgba(212, 175, 55, 0) 70%);
    animation: authFloatUp linear infinite;
}

@keyframes authFloatUp {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    20%  { opacity: .8; }
    80%  { opacity: .8; }
    100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}

/* ── Kartu ──────────────────────────────────────────────────────────────── */
.auth-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    animation: authFloat 6s ease-in-out infinite;
}

.auth-shell::before {
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: var(--auth-gold-500);
    opacity: .1;
    filter: blur(64px);
    z-index: -1;
}

@keyframes authFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell, .auth-logo, .auth-particle { animation: none !important; }
}

.auth-card {
    position: relative;
    overflow: hidden;
    padding: 30px 26px;
    border: 1px solid rgba(212, 175, 55, .3);
    border-radius: 22px;
    background: rgba(42, 4, 10, .45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), inset 0 0 15px rgba(212, 175, 55, .05);
}

/* Sudut dekoratif emas */
.auth-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: 8px;
    opacity: .5;
    pointer-events: none;
}
.auth-corner.tl { top: 0; left: 0; border-top: 2px solid var(--auth-gold-500); border-left: 2px solid var(--auth-gold-500); border-top-left-radius: 12px; }
.auth-corner.tr { top: 0; right: 0; border-top: 2px solid var(--auth-gold-500); border-right: 2px solid var(--auth-gold-500); border-top-right-radius: 12px; }
.auth-corner.bl { bottom: 0; left: 0; border-bottom: 2px solid var(--auth-gold-500); border-left: 2px solid var(--auth-gold-500); border-bottom-left-radius: 12px; }
.auth-corner.br { bottom: 0; right: 0; border-bottom: 2px solid var(--auth-gold-500); border-right: 2px solid var(--auth-gold-500); border-bottom-right-radius: 12px; }

/* ── Brand ──────────────────────────────────────────────────────────────── */
.auth-brand { text-align: center; margin-bottom: 26px; }

.auth-logo-ring {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 14px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--auth-gold-500);
    border-radius: 50%;
    background: var(--auth-maroon-900);
    box-shadow: 0 0 20px rgba(212, 175, 55, .4);
}

.auth-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.auth-brand h1 {
    margin: 0;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .06em;
    background: linear-gradient(to right, var(--auth-gold-300), var(--auth-gold-500), var(--auth-gold-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 10px rgba(212, 175, 55, .2);
}

.auth-brand p {
    margin: 6px 0 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #d3d3d3;
}

.auth-divider {
    width: 50%;
    height: 1px;
    margin: 16px auto 0;
    opacity: .5;
    background: linear-gradient(to right, transparent, var(--auth-gold-500), transparent);
}

/* ── Notifikasi ─────────────────────────────────────────────────────────── */
.auth-alert {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 1px solid rgba(248, 113, 113, .35);
    border-radius: 12px;
    background: rgba(127, 29, 29, .25);
    color: #fecaca;
    font-size: 12px;
    line-height: 1.5;
}

.auth-toast {
    position: fixed;
    top: -140px;
    left: 50%;
    z-index: 60;
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: min(92vw, 380px);
    padding: 12px 20px;
    border: 1px solid var(--auth-gold-500);
    border-radius: 999px;
    background: rgba(42, 4, 10, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
    font-size: 13px;
    transform: translateX(-50%);
    transition: top .4s cubic-bezier(.68, -.55, .265, 1.55);
}
.auth-toast.show { top: 20px; }
.auth-toast.is-error { border-color: #ef4444; color: #fecaca; }
.auth-toast svg { flex: 0 0 18px; width: 18px; height: 18px; }

/* ── Form ───────────────────────────────────────────────────────────────── */
.auth-form { display: block; }

.auth-field { margin-bottom: 16px; }

.auth-field > label,
.auth-label {
    display: block;
    margin: 0 0 6px 2px;
    color: var(--auth-gold-300);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-input-wrap { position: relative; display: block; }

.auth-input-wrap > svg {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    color: var(--auth-gold-500);
    opacity: .75;
    pointer-events: none;
}

.auth-input {
    width: 100%;
    padding: 13px 14px 13px 40px;
    border: 1px solid rgba(212, 175, 55, .4);
    border-radius: 12px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.auth-input::placeholder { color: #9b9096; }

.auth-input:focus {
    outline: none;
    border-color: var(--auth-gold-500);
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(212, 175, 55, .3);
}

.auth-input[readonly] { opacity: .8; cursor: not-allowed; }

.auth-input.has-toggle { padding-right: 44px; }

.auth-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #b9adae;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .2s ease;
}
.auth-eye:hover { color: var(--auth-gold-400); }
.auth-eye svg { width: 18px; height: 18px; }

/* Baris opsi (ingat perangkat / lupa sandi) */
.auth-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -4px 0 16px;
    font-size: 12px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--auth-muted);
    cursor: pointer;
}

.auth-remember input,
.auth-terms input {
    width: 15px;
    height: 15px;
    accent-color: var(--auth-gold-500);
    cursor: pointer;
}

.auth-link {
    color: var(--auth-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.auth-link:hover { color: var(--auth-gold-400); border-bottom-color: var(--auth-gold-400); }
.auth-link strong { color: var(--auth-gold-500); font-weight: 600; }

/* ── Captcha ────────────────────────────────────────────────────────────── */
.auth-captcha-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.auth-captcha-timer {
    color: #a89ea0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}

.auth-captcha-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(212, 175, 55, .2);
    border-radius: 14px;
    background: rgba(0, 0, 0, .2);
}

.auth-captcha-box {
    flex: 1;
    height: 52px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.auth-captcha-box canvas { display: block; width: 100%; height: 100%; }

.auth-captcha-refresh {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(212, 175, 55, .3);
    border-radius: 10px;
    background: var(--auth-maroon-800);
    color: var(--auth-gold-400);
    cursor: pointer;
    transition: background .2s ease;
}
.auth-captcha-refresh:hover { background: var(--auth-maroon-700); }
.auth-captcha-refresh svg { width: 19px; height: 19px; transition: transform .5s ease; }
.auth-captcha-refresh:hover svg { transform: rotate(180deg); }

.auth-captcha-input {
    margin-top: 8px;
    padding-left: 14px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .3em;
    text-align: center;
    text-transform: uppercase;
}
.auth-captcha-input::placeholder { font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: none; }

/* ── Tombol ─────────────────────────────────────────────────────────────── */
.auth-submit {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 18px;
    padding: 14px 18px;
    overflow: hidden;
    border: 1px solid var(--auth-gold-300);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--auth-gold-400) 0%, var(--auth-gold-500) 50%, var(--auth-gold-600) 100%);
    color: var(--auth-maroon-950);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.auth-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: left .7s ease;
}

.auth-submit:hover:not(:disabled)::after { left: 150%; }

.auth-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(212, 175, 55, .6);
}

.auth-submit:disabled { opacity: .65; cursor: not-allowed; }
.auth-submit svg { width: 15px; height: 15px; }
.auth-submit .auth-spinner { animation: authSpin .9s linear infinite; }

@keyframes authSpin { to { transform: rotate(360deg); } }

/* ── Kaki halaman ───────────────────────────────────────────────────────── */
.auth-footlinks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    font-size: 12px;
}

.auth-terms {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 4px 0 2px;
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.55;
    cursor: pointer;
}

.auth-secure {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    color: #a3969a;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.auth-secure svg { width: 13px; height: 13px; color: var(--auth-gold-500); }

.auth-regulator {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, .18);
    text-align: center;
}
.auth-regulator img {
    display: block;
    width: min(48%, 165px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

/* ── Responsif ──────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
    .auth-card { padding: 24px 18px; }
    .auth-logo-ring { width: 88px; height: 88px; }
    .auth-brand h1 { font-size: 26px; }
    .auth-captcha-refresh { flex-basis: 46px; width: 46px; height: 46px; }
    .auth-captcha-box { height: 46px; }
}

/* ── Tablet & desktop ───────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .auth-shell { width: min(100%, 480px); }
    .auth-card { padding: 36px 32px; }

    .auth-logo-ring { width: 118px; height: 118px; }
    .auth-brand h1 { font-size: 34px; }
    .auth-brand p { font-size: 11px; }

    .auth-field > label, .auth-label { font-size: 11px; }
    .auth-input { padding: 15px 16px 15px 44px; font-size: 15px; }
    .auth-input-wrap > svg { left: 15px; width: 19px; height: 19px; }
    .auth-meta { font-size: 13px; }

    .auth-captcha-box, .auth-captcha-refresh { height: 58px; }
    .auth-captcha-refresh { flex-basis: 58px; width: 58px; }
    .auth-captcha-input { font-size: 19px; }

    .auth-submit { padding: 16px 20px; font-size: 14px; }
    .auth-footlinks, .auth-terms { font-size: 13px; }
}

/* DigiBankPro final overrides */
html{background:#eef6eb!important}body.auth-royal{align-items:flex-start!important;padding:clamp(22px,6vh,64px) 16px 32px!important;background:radial-gradient(circle at 8% 0,rgba(63,180,79,.2),transparent 28%),radial-gradient(circle at 94% 8%,rgba(233,183,44,.17),transparent 25%),linear-gradient(155deg,#fafff7,#edf6e9 65%,#e7f1e4)!important;color:#153423!important;font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;overflow-y:auto!important}.auth-shell{width:min(100%,460px)!important;animation:authEntrance .65s cubic-bezier(.2,.8,.2,1) both!important}.auth-card{overflow:visible!important;padding:34px clamp(22px,6vw,34px) 25px!important;border:1px solid rgba(24,132,59,.13)!important;border-radius:30px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 28px 70px rgba(27,91,44,.13)!important}.auth-card:before{content:'DIGITAL BANKING';position:absolute;top:18px;left:24px;padding:5px 9px;border-radius:99px;background:#eaf6e7;color:#0b7335;font:700 8px/1 'Plus Jakarta Sans';letter-spacing:.16em}.auth-corner{display:none!important}.auth-brand{margin:12px 0 28px!important}.auth-logo-ring{width:92px!important;height:92px!important;padding:10px!important;border:0!important;border-radius:24px!important;background:#f3faef!important;box-shadow:0 12px 30px rgba(14,121,53,.15)!important}.auth-logo{object-fit:contain!important;border-radius:0!important;animation:none!important}.auth-brand h1{font:800 28px Manrope,sans-serif!important;letter-spacing:-.045em!important;background:linear-gradient(100deg,#087335,#159447 63%,#d5a516)!important;-webkit-background-clip:text!important;color:transparent!important;text-shadow:none!important}.auth-brand p{color:#718177!important}.auth-divider{width:46px!important;height:4px!important;border-radius:99px!important;opacity:1!important;background:linear-gradient(90deg,#159447,#e9b72c)!important}.auth-field>label,.auth-label{color:#315d40!important}.auth-input-wrap>svg{color:#159447!important}.auth-input{height:52px!important;padding:0 46px 0 45px!important;border:1px solid #d8e7d4!important;border-radius:16px!important;background:#f8fbf6!important;color:#153423!important;font:600 13px 'Plus Jakarta Sans'!important;box-shadow:none!important}.auth-input:focus{border-color:#159447!important;background:#fff!important;box-shadow:0 0 0 4px rgba(21,148,71,.11)!important}.auth-eye,.auth-link{color:#087335!important}.auth-captcha-box{border-color:#d8e7d4!important;border-radius:14px!important}.auth-captcha-refresh{border:0!important;border-radius:14px!important;background:#e9f5e6!important;color:#087335!important}.auth-terms{color:#718177!important;background:#f7faf5!important;border:1px solid #e1ebde!important;border-radius:14px!important}.auth-submit{position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;height:58px!important;padding:5px 66px 5px 22px!important;overflow:hidden!important;border:0!important;border-radius:99px!important;background:linear-gradient(135deg,#159447,#087335)!important;color:#fff!important;font:700 13px 'Plus Jakarta Sans'!important;box-shadow:0 14px 30px rgba(8,115,53,.24)!important}.auth-submit:before{content:'Geser untuk lanjut';position:absolute;right:67px;color:rgba(255,255,255,.6);font-size:9px;opacity:0;transition:.3s}.auth-submit svg{position:absolute!important;right:5px!important;width:48px!important;height:48px!important;padding:14px!important;border-radius:50%!important;background:#fff!important;color:#087335!important;box-shadow:0 5px 15px rgba(1,61,25,.2)!important;transition:transform .55s cubic-bezier(.2,.9,.2,1)!important}.auth-submit:hover:before{opacity:1}.auth-submit:hover svg{transform:translateX(-8px)!important}.auth-submit:active svg{transform:translateX(-235px) rotate(360deg)!important}.auth-submit:disabled svg{transform:none!important}.auth-footlinks{border-color:#e5ede2!important}.auth-footlinks span,.auth-secure{color:#718177!important}.auth-secure svg{color:#159447!important}@media(max-width:480px){.auth-card{padding:32px 20px 22px!important;border-radius:25px!important}.auth-submit:before{display:none}}

/* Login memenuhi viewport ponsel, termasuk dynamic viewport dan safe-area. */
@media (max-width: 767px) {
    html, body.auth-royal { min-height: 100%; min-height: 100dvh; }
    body.auth-royal { display: block!important; padding: 0!important; overscroll-behavior-y: none; }
    .auth-shell { width: 100%!important; min-height: 100vh; min-height: 100dvh; }
    .auth-card {
        display: flex;
        min-height: 100vh;
        min-height: 100dvh;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding: max(42px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left))!important;
        border: 0!important;
        border-radius: 0!important;
        box-shadow: none!important;
    }
}

/* Marketplace lock: keep this block at the absolute end of the cascade. */
html{background:#f7f8fa!important}body.auth-royal{background:radial-gradient(circle at 5% 2%,rgba(37,244,238,.12),transparent 28%),radial-gradient(circle at 98% 5%,rgba(254,44,85,.12),transparent 30%),linear-gradient(155deg,#fff,#f7f8fa)!important;color:#0f0f0f!important}.auth-particle{background:#fe2c55!important}.auth-card{border-color:#e5e7eb!important;background:rgba(255,255,255,.97)!important;box-shadow:0 28px 75px rgba(15,15,15,.11)!important}.auth-card:before{content:'AFFILIATE MARKETPLACE'!important;background:#0f0f0f!important;color:#25f4ee!important}.auth-logo-ring{background:#0f0f0f!important;box-shadow:-7px 7px 0 rgba(37,244,238,.45),7px -7px 0 rgba(254,44,85,.35)!important}.auth-brand h1{background:linear-gradient(100deg,#0f0f0f 10%,#fe2c55 70%,#0891b2)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.auth-brand p,.auth-footlinks span,.auth-secure{color:#6b7280!important}.auth-divider{background:linear-gradient(90deg,#25f4ee,#fe2c55)!important}.auth-field>label,.auth-label{color:#374151!important}.auth-input-wrap>svg{color:#fe2c55!important}.auth-input{border-color:#e5e7eb!important;background:#f9fafb!important;color:#0f0f0f!important}.auth-input:focus{border-color:#fe2c55!important;box-shadow:0 0 0 4px rgba(254,44,85,.10)!important}.auth-eye,.auth-link{color:#e11d48!important}.auth-submit,.auth-slide-submit{background:linear-gradient(90deg,#0f0f0f,#252525)!important;box-shadow:0 14px 30px rgba(15,15,15,.24)!important}.auth-submit svg{color:#fe2c55!important}.auth-slide-submit.is-complete{background:linear-gradient(90deg,#e11d48,#fe2c55)!important}.auth-slide-submit.is-complete svg{background:#25f4ee!important;color:#0f0f0f!important}.auth-secure svg{color:#fe2c55!important}