/* =====================================================================
   LOGIN / REGISTRASI — Komik x Anime x Teknologi, HITAM + KUNING saja
   Panel terminal hitam, bingkai kuning tebal, bayangan keras, halftone,
   garis kecepatan manga, grid sirkuit. Hanya visual — form tidak diubah.
   ===================================================================== */
@font-face{font-family:Bangers;src:url('/fonts/bangers.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('/fonts/comic-neue-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('/fonts/comic-neue-bold.ttf') format('truetype');font-weight:700;font-display:swap}

body#authAnime{--y:#ffd60a;--y2:#ffe45c;--k:#0a0a0a;--k2:#161616;--k3:#262626;--w:#fffbea;--muted:#c9b458;position:relative !important;min-height:100vh !important;overflow-x:hidden !important;color:var(--w) !important;font-family:'Comic Neue','Inter',system-ui,sans-serif !important;font-weight:700 !important;background-color:var(--y) !important;background-image:radial-gradient(circle at 50% 42%, #ffe45c 0, #ffd60a 55%, #f2c200 100%) !important;background-attachment:fixed !important}
/* halftone + garis kecepatan manga + grid sirkuit */
body#authAnime::before{content:"" !important;position:fixed !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;background:
    repeating-conic-gradient(from 0deg at 50% 42%, rgba(10,10,10,.20) 0deg 1.6deg, transparent 1.6deg 8deg),
    linear-gradient(rgba(10,10,10,.10) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(10,10,10,.10) 1px, transparent 1px) 0 0/40px 40px,
    radial-gradient(circle, rgba(10,10,10,.55) 2px, transparent 2.4px) 0 0/18px 18px !important;-webkit-mask-image:radial-gradient(ellipse at 50% 42%, transparent 0 16%, #000 70%) !important;mask-image:radial-gradient(ellipse at 50% 42%, transparent 0 16%, #000 70%) !important;animation:aaDrift 26s linear infinite !important}
/* sudut gelap ala panel komik */
body#authAnime::after{content:"" !important;position:fixed !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;background:radial-gradient(ellipse at center, transparent 62%, rgba(10,10,10,.55) 100%) !important}
@keyframes aaDrift{ to{ background-position:0 0, 40px 40px, 40px 40px, 18px 18px; } }
body#authAnime #cmFx{display:none !important}
body#authAnime > div.flex-1{position:relative !important;z-index:1 !important;padding-top:36px !important;padding-bottom:36px !important}

/* ---------- PANEL KARTU ---------- */
body#authAnime > div.flex-1 > div:first-child{position:relative !important;isolation:isolate !important;background-color:var(--k) !important;background-image:radial-gradient(circle, rgba(255,214,10,.16) 1.4px, transparent 1.7px) !important;background-size:14px 14px !important;border:4px solid var(--y) !important;border-radius:0 !important;padding:66px 22px 26px !important;max-width:26rem !important;box-shadow:9px 9px 0 0 #000, 0 0 0 3px #000, inset 0 0 0 3px #000 !important;transition:none !important;transform:none !important}
/* clip-path memotong bayangan → pakai outline hitam lewat drop-shadow pada pembungkus */

/* bar judul HUD */
body#authAnime > div.flex-1 > div:first-child::before{content:"◢ ACCESS TERMINAL // LOGIN" !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:42px !important;z-index:2 !important;display:flex !important;align-items:center !important;padding:0 52px 0 16px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;background:repeating-linear-gradient(-45deg, var(--y) 0 14px, var(--y2) 14px 28px) !important;color:var(--k) !important;font-family:Bangers,cursive !important;font-size:20px !important;letter-spacing:.12em !important;border-bottom:4px solid var(--k) !important}
body#authAnime[data-auth="register"] > div.flex-1 > div:first-child::before{content:"◢ NEW PLAYER // REGISTER" !important}
body#authAnime[data-auth="otp"]      > div.flex-1 > div:first-child::before{content:"◢ SECURITY CODE // VERIFY" !important}
body#authAnime[data-auth="forgot"]   > div.flex-1 > div:first-child::before{content:"◢ SYSTEM RECOVERY // RESET" !important}
/* lampu status */
body#authAnime > div.flex-1 > div:first-child::after{content:"" !important;position:absolute !important;top:13px !important;right:16px !important;width:14px !important;height:14px !important;z-index:3 !important;border-radius:50% !important;background:var(--k) !important;border:3px solid var(--k) !important;box-shadow:inset 0 0 0 3px var(--y2) !important;animation:aaBlink 1.4s steps(2,end) infinite !important}
@keyframes aaBlink{ 50%{ background:var(--y2); box-shadow:none; } }

/* logo & judul */
body#authAnime > div.flex-1 > div:first-child img{height:64px !important;width:64px !important;object-fit:cover !important;border-radius:12px !important;border:4px solid var(--y) !important;box-shadow:4px 4px 0 var(--y2) !important;background:#fff !important}
body#authAnime h2{font-family:Bangers,cursive !important;font-weight:400 !important;font-size:32px !important;letter-spacing:.09em !important;line-height:1.1 !important;color:var(--y) !important;text-shadow:3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;margin-top:8px !important}

/* ---------- TEKS ---------- */
body#authAnime label, body#authAnime .text-gray-800, body#authAnime .text-gray-700{color:var(--w) !important}
body#authAnime label.block{text-transform:uppercase !important;letter-spacing:.1em !important;font-size:12.5px !important;color:var(--y) !important}
body#authAnime label.block::before{content:"▶ " !important;color:var(--y2) !important;font-size:10px !important}
body#authAnime .text-gray-500, body#authAnime .text-gray-400, body#authAnime .text-gray-600{color:var(--muted) !important}
body#authAnime .font-normal{color:var(--muted) !important}
body#authAnime a.text-blue-500, body#authAnime a.text-blue-600, body#authAnime a.text-blue-700{color:var(--y) !important;text-decoration:underline !important;text-decoration-thickness:2px !important;text-underline-offset:3px !important}
body#authAnime a.text-blue-500:hover, body#authAnime a.text-blue-600:hover{color:var(--w) !important}
body#authAnime b, body#authAnime strong{color:var(--y) !important}
body#authAnime > div.flex-1 > div.mt-8 a, body#authAnime > div.flex-1 > div.mt-8 p{color:var(--k) !important;text-shadow:none !important}
body#authAnime > div.flex-1 > div.mt-8 a{font-family:Bangers,cursive !important;letter-spacing:.08em !important;font-size:17px !important;text-decoration:underline !important;text-decoration-thickness:3px !important}
body#authAnime > div.flex-1 > div.mt-8 a.text-blue-600{color:var(--k) !important}
body#authAnime > div.flex-1 > div.mt-8 i{color:var(--k) !important}

/* ---------- INPUT ---------- */
body#authAnime input:not([type=radio]):not([type=checkbox]), body#authAnime select, body#authAnime textarea{color:var(--w) !important;caret-color:var(--y) !important;font-weight:700 !important}
body#authAnime input::placeholder{color:#8c7a2a !important;opacity:1 !important}
body#authAnime input.rounded-2xl, body#authAnime [class*="bg-[#f9f9f9]"], body#authAnime .bg-gray-100{background:var(--k2) !important;border:3px solid var(--y) !important;border-radius:6px !important;box-shadow:4px 4px 0 var(--y2) !important;transition:transform .12s, box-shadow .12s !important}
body#authAnime input.rounded-2xl:focus, body#authAnime [class*="bg-[#f9f9f9]"]:focus-within, body#authAnime .wa-focus:focus-within{background:#000 !important;border-color:var(--w) !important;box-shadow:6px 6px 0 var(--y) !important;transform:translate(-2px,-2px) !important;outline:none !important}
body#authAnime [class*="bg-[#f9f9f9]"] input{background:transparent !important;border:0 !important;box-shadow:none !important;transform:none !important}
body#authAnime input[readonly]{opacity:.7 !important}
body#authAnime select{background:transparent !important}
body#authAnime select option{background:#0a0a0a !important;color:#fffbea !important}
body#authAnime .bg-gray-200{background:var(--y) !important}
body#authAnime button.w-9{background:transparent !important;border:0 !important;box-shadow:none !important;min-height:0 !important;color:var(--y) !important}
body#authAnime button.w-9:hover{background:rgba(255,214,10,.15) !important;box-shadow:none !important;color:var(--w) !important}
body#authAnime input:-webkit-autofill{-webkit-text-fill-color:#fffbea !important;caret-color:#ffd60a !important;-webkit-box-shadow:0 0 0 1000px #161616 inset !important;transition:background-color 9999s !important}
/* validasi realtime */
body#authAnime .valid{color:var(--y2) !important}
body#authAnime .valid::before{content:"✔ " !important}
body#authAnime .invalid{color:var(--w) !important;text-decoration:underline wavy var(--y) !important;text-underline-offset:3px !important}
body#authAnime .invalid::before{content:"✖ " !important;color:var(--y) !important}

/* ---------- TOMBOL UTAMA ---------- */
body#authAnime button[type=submit]{position:relative !important;overflow:hidden !important;background:var(--y) !important;color:var(--k) !important;border:4px solid #000 !important;border-radius:6px !important;font-family:Bangers,cursive !important;font-weight:400 !important;font-size:24px !important;letter-spacing:.14em !important;min-height:52px !important;padding-top:8px !important;padding-bottom:8px !important;text-shadow:none !important;box-shadow:0 0 0 3px var(--y), 6px 6px 0 3px var(--y2) !important;transition:transform .1s, box-shadow .1s !important}
body#authAnime button[type=submit]::after{content:"" !important;position:absolute !important;top:0 !important;bottom:0 !important;width:38% !important;left:-60% !important;background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent) !important;transform:skewX(-20deg) !important;animation:aaShine 3s ease-in-out infinite !important}
@keyframes aaShine{ 0%,55%{ left:-60%; } 100%{ left:130%; } }
body#authAnime button[type=submit]:hover{background:var(--w) !important;transform:translate(-2px,-2px) !important;box-shadow:0 0 0 3px var(--y), 9px 9px 0 3px var(--y2) !important}
body#authAnime button[type=submit]:active{transform:translate(4px,4px) !important;box-shadow:0 0 0 3px var(--y), 1px 1px 0 3px var(--y2) !important}
body#authAnime button[type=submit]:disabled{opacity:.6 !important;filter:grayscale(1) !important}
body#authAnime button[type=submit] i{color:var(--k) !important}

/* ---------- ALERT: pita bahaya kuning-hitam ---------- */
body#authAnime [class*="bg-[#fef2f2]"], body#authAnime [class*="bg-[#f0fdf4]"]{background:repeating-linear-gradient(-45deg, #0a0a0a 0 12px, #1f1a00 12px 24px) !important;border:3px solid var(--y) !important;color:var(--w) !important;border-radius:6px !important;box-shadow:4px 4px 0 var(--y2) !important;text-shadow:none !important;position:relative !important}
body#authAnime [class*="bg-[#fef2f2]"]::before{content:"⚠ ERROR! " !important;color:var(--k) !important;background:var(--y) !important;padding:0 8px !important;margin-right:6px !important;font-family:Bangers,cursive !important;letter-spacing:.1em !important;font-size:15px !important}
body#authAnime [class*="bg-[#f0fdf4]"]::before{content:"✔ OK! " !important;color:var(--k) !important;background:var(--y2) !important;padding:0 8px !important;margin-right:6px !important;font-family:Bangers,cursive !important;letter-spacing:.1em !important;font-size:15px !important}

/* ---------- PILIHAN METODE VERIFIKASI ---------- */
body#authAnime .vm-option .box{background:var(--k2) !important;border:3px solid var(--y) !important;border-radius:6px !important;box-shadow:4px 4px 0 var(--y2) !important}
body#authAnime .vm-option.vm-wa input:checked + .box,
body#authAnime .vm-option.vm-mail input:checked + .box,
body#authAnime .vm-option.vm-tg input:checked + .box{background:#000 !important;border-color:var(--w) !important;box-shadow:6px 6px 0 var(--y) !important}
body#authAnime .vm-option.disabled .box{border-style:dashed !important;box-shadow:none !important}
body#authAnime .vm-icon{border-radius:6px !important;border:3px solid var(--y) !important;box-shadow:2px 2px 0 var(--y2) !important}
body#authAnime .vm-check{border:3px solid var(--y) !important}
body#authAnime .vm-wa input:checked + .box .vm-check,
body#authAnime .vm-mail input:checked + .box .vm-check,
body#authAnime .vm-tg input:checked + .box .vm-check{background:var(--y) !important;border-color:var(--y) !important;color:var(--k) !important}
body#authAnime .vm-option .box p.text-gray-800{color:var(--w) !important}

/* ---------- OTP ---------- */
body#authAnime input[maxlength="1"], body#authAnime .otp-input, body#authAnime input[inputmode="numeric"].text-center{font-family:Bangers,cursive !important;font-size:28px !important;text-align:center !important;color:var(--y) !important}

/* kredit */
body#authAnime .cm-credit{position:relative !important;z-index:1 !important;color:var(--k) !important;background:transparent !important;border-color:var(--k) !important}
body#authAnime .cm-credit b{color:var(--k) !important;text-decoration:underline !important}

/* bracket sudut layar */
body#authAnime > div.flex-1::before, body#authAnime > div.flex-1::after{content:"" !important;position:fixed !important;width:56px !important;height:56px !important;z-index:1 !important;pointer-events:none !important}
body#authAnime > div.flex-1::before{top:12px !important;left:12px !important;border-top:6px solid var(--k) !important;border-left:6px solid var(--k) !important}
body#authAnime > div.flex-1::after{bottom:12px !important;right:12px !important;border-bottom:6px solid var(--k) !important;border-right:6px solid var(--k) !important}

body#authAnime .cf-turnstile{display:flex !important;justify-content:center !important}
body#authAnime .hidden{display:none !important}

@media (max-width:420px){
  body#authAnime > div.flex-1{padding-left:14px !important;padding-right:14px !important}
  body#authAnime > div.flex-1 > div:first-child{padding-left:16px !important;padding-right:16px !important}
  body#authAnime h2{font-size:28px !important}
}
@media (prefers-reduced-motion:reduce){
  body#authAnime::before, body#authAnime button[type=submit]::after, body#authAnime > div.flex-1 > div:first-child::after{animation:none !important}
}

/* semua label form konsisten (termasuk label Password yang ada di sebelah "Lupa Password?") */
body#authAnime form label{text-transform:uppercase !important;letter-spacing:.1em !important;font-size:12.5px !important;color:var(--y) !important}
body#authAnime form label.vm-option{text-transform:none !important;letter-spacing:0 !important;font-size:inherit !important}
body#authAnime form label:not(.block):not(.vm-option)::before{content:"▶ ";color:var(--y2);font-size:10px}
body#authAnime a.text-blue-500{font-family:'Comic Neue',sans-serif !important}

/* ikon brand → hitam/kuning saja */
body#authAnime .vm-icon-wa, body#authAnime .vm-icon-mail, body#authAnime .vm-icon-tg{background:var(--y) !important}
body#authAnime .vm-icon i{color:var(--k) !important}
body#authAnime form i.fab, body#authAnime form i.fa-whatsapp, body#authAnime form i.fa-telegram{color:var(--y) !important}

/* ikon di kotak verifikasi: hitam di atas kuning (menang atas aturan ikon form) */
body#authAnime form .vm-icon i, body#authAnime form .vm-icon i.fab, body#authAnime form .vm-icon i.fas{color:#0a0a0a !important}
body#authAnime .vm-option.disabled .vm-icon{opacity:.55 !important}