/* ══════════════════════════════════════════════ LOGIN — kartu kaca + label mengambang Dipakai admin/login.php (berdiri sendiri, tidak memuat layout.css) dan includes/customer_login.php. Nilai token SAMA dgn blok GLASS di layout.css. Prasyarat di halaman: --brand, --brand-hover, --brand-rgb, --bg, --surface, --border, --text, --text-muted, --text-faint, --radius-*, --text-*. Pasang class "aq-login-glass" di . ══════════════════════════════════════════════ */ :root { --glass-bg: rgba(255,255,255,0.68); --glass-bg-strong: rgba(255,255,255,0.92); --glass-border: rgba(255,255,255,0.65); --glass-shadow: 0 14px 34px -18px rgba(20,60,45,0.22); --glass-blur: 16px; --glass-radius: 16px; --glass-field-radius: 11px; --glass-glow-blue-rgb: 96,165,250; --glass-glow-brand: 0.16; --glass-glow-blue: 0.16; --glass-field-bg: rgba(255,255,255,0.55); --glass-field-bg-focus: rgba(255,255,255,0.85); --glass-field-border: rgba(0,0,0,0.10); --glass-label-bg: rgba(255,255,255,0.92); --glass-label-color: var(--brand-hover, #006e52); --aq-label-h: 14px; /* Berdiri sendiri (tidak memuat layout.css di admin/login.php) — nilai sama dgn layout.css */ --focus-ring-color: rgba(var(--brand-rgb, 0,128,96), 0.12); --focus-ring-lg: 0 0 0 4px var(--focus-ring-color); } [data-theme="dark"] { --glass-bg: rgba(30,31,36,0.62); --glass-bg-strong: rgba(30,31,36,0.94); --glass-border: rgba(255,255,255,0.09); --glass-shadow: 0 14px 34px -18px rgba(0,0,0,0.6); --glass-glow-brand: 0.14; --glass-glow-blue: 0.10; --glass-field-bg: rgba(255,255,255,0.05); --glass-field-bg-focus: rgba(255,255,255,0.09); --glass-field-border: rgba(255,255,255,0.14); --glass-label-bg: rgba(30,31,36,0.96); --glass-label-color: var(--brand, #00b386); } /* Latar gradien lembut — supaya efek kaca terlihat */ body.aq-login-glass { background: radial-gradient(circle at 15% -8%, rgba(var(--brand-rgb,0,128,96), var(--glass-glow-brand)), transparent 52%), radial-gradient(circle at 105% 15%, rgba(var(--glass-glow-blue-rgb), var(--glass-glow-blue)), transparent 48%), radial-gradient(circle at 30% 110%, rgba(var(--glass-glow-blue-rgb), calc(var(--glass-glow-blue) * .6)), transparent 45%), var(--bg); background-attachment: fixed; } /* Kartu kaca (spesifisitas dinaikkan supaya menang atas gaya lokal halaman) */ body.aq-login-glass :is(.login-card, .aq-login-card) { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); } /* Tombol tema ikut kaca */ body.aq-login-glass :is(.theme-toggle-login, .aq-login-theme-toggle) { background: var(--glass-bg); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); } /* HP: matikan blur (berat di perangkat menengah ke bawah) */ @media (max-width: 640px) { body.aq-login-glass :is(.login-card, .aq-login-card, .theme-toggle-login, .aq-login-theme-toggle) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-bg-strong); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.aq-login-glass :is(.login-card, .aq-login-card) { background: var(--glass-bg-strong); } } @media (prefers-reduced-transparency: reduce) { body.aq-login-glass :is(.login-card, .aq-login-card, .theme-toggle-login, .aq-login-theme-toggle) { background: var(--glass-bg-strong); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ── Label mengambang: