/* ============================================================ AUTH / LOGIN — SCOPED (HANYA UNTUK login.php) Pastikan ============================================================ */ .auth-body{ --bg-0:#050B1A; --bg-1:#07142C; --bg-2:#0B2A66; --primary:#1C6AE4; --primary-2:#0B3A82; --gold:#C9A24B; --text:#EAF0FF; --muted:rgba(234,240,255,.72); --line:rgba(255,255,255,.14); --shadow: 0 30px 90px rgba(0,0,0,.45); --radius-xl:26px; --focus: 0 0 0 4px rgba(28,106,228,.30); margin:0; min-height:100vh; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg-0); color: var(--text); overflow-x:hidden; } /* box sizing login sahaja */ .auth-body *{ box-sizing:border-box; } /* Layout */ .auth-body .auth{ min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center; padding:28px 18px; } /* Background layers */ .auth-body .auth-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; } .auth-body .auth-bg__gradient{ position:absolute; inset:-30%; background: radial-gradient(900px 520px at 20% 25%, rgba(28,106,228,.45), transparent 55%), radial-gradient(760px 460px at 80% 30%, rgba(11,58,130,.55), transparent 55%), radial-gradient(900px 560px at 55% 85%, rgba(201,162,75,.22), transparent 58%), linear-gradient(135deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2) 100%); filter:saturate(1.15); animation: authGradient 12s ease-in-out infinite alternate; transform: translate3d(0,0,0); } @keyframes authGradient{ 0% { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); } 100% { transform: translate3d(2.0%, 1.5%, 0) scale(1.05); } } .auth-body .auth-bg__glow{ position:absolute; width:520px; height:520px; border-radius:999px; filter: blur(50px); opacity:.65; mix-blend-mode: screen; animation: glowFloat 10s ease-in-out infinite alternate; } .auth-body .auth-bg__glow--a{ left:-140px; top:18%; background: radial-gradient(circle at 30% 30%, rgba(28,106,228,.75), transparent 60%); } .auth-body .auth-bg__glow--b{ right:-160px; top:58%; background: radial-gradient(circle at 30% 30%, rgba(11,58,130,.85), transparent 60%); animation-duration: 12s; } @keyframes glowFloat{ 0%{ transform: translate3d(0,0,0) scale(1); } 100%{ transform: translate3d(0, -24px, 0) scale(1.06); } } .auth-body .auth-bg__noise{ position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); opacity:.12; mix-blend-mode: overlay; } /* Center wrap */ .auth-body .auth-wrap{ width:100%; max-width:420px; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; } /* Glass card */ .auth-body .auth-card{ width:100%; border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow); padding: 34px 30px 26px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position:relative; } .auth-body .auth-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 28%); mask: linear-gradient(#000, transparent 42%); opacity:.7; } /* Header */ .auth-body .auth-header{ text-align:center; margin-bottom:18px; } .auth-body .brand-mark{ width:62px; height:62px; margin:0 auto 12px; border-radius: 18px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 60px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; overflow:hidden; } .auth-body .brand-mark__img{ width:78%; height:78%; object-fit:contain; display:block; } .auth-body .auth-title{ margin:0; font-size:22px; font-weight:800; letter-spacing:-0.4px; } .auth-body .auth-subtitle{ margin:6px 0 0; font-size:12.5px; color: var(--muted); } /* Flash */ .auth-body .flash{ display:flex; gap:10px; align-items:flex-start; padding:12px 12px; border-radius:14px; margin: 10px 0 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); } .auth-body .flash-error{ border-color: rgba(255, 99, 99, .35); background: rgba(255, 99, 99, .10); } .auth-body .flash-icon{ width:22px; height:22px; border-radius:8px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.12); } .auth-body .flash-text{ font-size:13px; line-height:1.35; color: rgba(255,255,255,.92); } /* Form */ .auth-body .auth-form{ display:flex; flex-direction:column; gap:14px; } .auth-body .field{ display:flex; flex-direction:column; gap:7px; } .auth-body .label{ font-size:12px; color: rgba(255,255,255,.78); letter-spacing:.2px; } .auth-body .control{ position:relative; } .auth-body .control--icon .input{ padding-right:48px; } .auth-body .input{ width:100%; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,18,40,.35); color: rgba(255,255,255,.92); outline:none; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease; } .auth-body .input::placeholder{ color: rgba(234,240,255,.55); } .auth-body .input:focus{ border-color: rgba(28,106,228,.55); box-shadow: var(--focus); background: rgba(10,18,40,.45); } /* Eye button */ .auth-body .icon-btn{ position:absolute; right:10px; top:50%; transform: translateY(-50%); width:34px; height:34px; border-radius:12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .auth-body .icon-btn:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.03); } .auth-body .icon-btn:active{ transform: translateY(-50%) scale(.98); } /* Remember */ .auth-body .row{ display:flex; align-items:center; } .auth-body .checkbox{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .auth-body .checkbox input{ position:absolute; opacity:0; pointer-events:none; } .auth-body .checkbox__box{ width:18px; height:18px; border-radius:6px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; } .auth-body .checkbox__label{ font-size:12.5px; color: rgba(255,255,255,.78); } .auth-body .checkbox input:focus + .checkbox__box{ box-shadow: var(--focus); border-color: rgba(28,106,228,.55); } .auth-body .checkbox input:checked + .checkbox__box{ background: rgba(28,106,228,.55); border-color: rgba(28,106,228,.65); } .auth-body .checkbox input:checked + .checkbox__box::after{ content:"✓"; font-size:12px; font-weight:800; color: #fff; } /* Button */ .auth-body .btn{ border:0; cursor:pointer; border-radius: 16px; padding: 12px 14px; font-weight:700; letter-spacing:-0.2px; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease; } .auth-body .btn-primary{ width:100%; color:#fff; background: linear-gradient(135deg, rgba(28,106,228,1), rgba(11,58,130,1)); box-shadow: 0 18px 50px rgba(28,106,228,.25); } .auth-body .btn-primary:hover{ filter: brightness(1.04); transform: translateY(-1px); } .auth-body .btn-primary:active{ transform: translateY(0px); } /* Footer */ .auth-body .auth-foot{ margin-top:18px; padding-top:16px; border-top: 1px solid rgba(255,255,255,.12); text-align:center; } .auth-body .hint{ margin:0; font-size:11.5px; color: rgba(255,255,255,.70); } .auth-body .hint strong{ color: rgba(255,255,255,.92); } .auth-body .auth-meta{ margin:0; font-size:11px; color: rgba(234,240,255,.58); text-align:center; } /* Fallback blur */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .auth-body .auth-card{ background: rgba(6, 14, 35, .82); } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ .auth-body .auth-bg__gradient, .auth-body .auth-bg__glow{ animation:none !important; } .auth-body .btn, .auth-body .input, .auth-body .icon-btn{ transition:none !important; } }