/* =======================================================
           MENYEMBUNYIKAN SCROLLBAR GLOBAL UNTUK TAMPILAN BERSIH
        ======================================================== */
        html, body {
           -ms-overflow-style: none;  /* IE and Edge */
           scrollbar-width: none;  /* Firefox */
           margin: 0;
           padding: 0;
           height: 100%;
        }
        html::-webkit-scrollbar, body::-webkit-scrollbar {
           display: none; /* Chrome, Safari and Opera */
        }
        * {
           -ms-overflow-style: none;
           scrollbar-width: none;
        }
        *::-webkit-scrollbar {
           display: none;
        }
        /* ======================================================= */

        body {
            background: url('/assets/img/sign.jpg') no-repeat center center fixed;
            background-size: cover;
            font-family: 'Plus Jakarta Sans', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        html[data-tema-user="terang"] .bg-overlay { background: rgba(255, 255, 255, 0.42); }
        html[data-tema-user="terang"] .glass-card {
            background: rgba(255, 255, 255, 0.68);
            border-color: rgba(15, 23, 42, 0.1);
            backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
            box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.25);
        }
        html[data-tema-user="terang"] .card-header-glass, html[data-tema-user="terang"] .form-control, html[data-tema-user="terang"] .form-select { color: #0f172a; }
        html[data-tema-user="terang"] .card-subtitle, html[data-tema-user="terang"] .form-label { color: #475569; }
        html[data-tema-user="terang"] .input-group-text { color: #475569; }
        html[data-tema-user="terang"] .form-control, html[data-tema-user="terang"] .form-select, html[data-tema-user="terang"] .input-group-text {
            background: rgba(255, 255, 255, 0.78); border-color: rgba(15, 23, 42, 0.1);
        }
        html[data-tema-user="terang"] .form-control::placeholder { color: #475569; }
        html[data-tema-user="terang"] .btn-primary-glass { background: #1d4ed8; }
        html[data-tema-user="terang"] .btn-primary-glass:hover { background: #1e40af; }
        html[data-tema-user="terang"] .back-link { color: #475569; }
        html[data-tema-user="terang"] .back-link:hover { color: #1d4ed8; }
        /* Bar atas lupa: logo kiri + tombol mode kanan */
        .auth-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; min-height: 48px; }
        .brand-logo-auth { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: .35rem .8rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.5); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
        .brand-logo-auth:hover { transform: translateY(-1px); border-color: rgba(59, 130, 246, .45); box-shadow: 0 12px 26px -12px rgba(59, 130, 246, .45); }
        html[data-tema-user="terang"] .brand-logo-auth { background: rgba(255, 255, 255, 0.68); border-color: rgba(15, 23, 42, 0.1); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 22px -14px rgba(15, 23, 42, 0.25); }
        .brand-logo-auth img { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
        .brand-logo-auth .logo-terang, .brand-logo-auth .logo-satu { display: none; }
        .brand-logo-auth .logo-gelap { display: inline-block; }
        .brand-logo-auth.hanya-satu .logo-satu { display: inline-block; }
        .brand-logo-auth.hanya-satu .logo-terang, .brand-logo-auth.hanya-satu .logo-gelap { display: none; }
        html[data-tema-user="terang"] .brand-logo-auth .logo-terang { display: inline-block; }
        html[data-tema-user="terang"] .brand-logo-auth .logo-gelap { display: none; }
        .mode-icon-btn {
            flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.08); color: #ffffff; font-size: 1rem;
            cursor: pointer; transition: all .2s ease;
        }
        .mode-icon-btn:hover { border-color: #3b82f6; color: #60a5fa; transform: scale(1.06); }
        .mode-icon-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
        html[data-tema-user="terang"] .mode-icon-btn { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.12); color: #0f172a; }
        html[data-tema-user="terang"] .mode-icon-btn:hover { border-color: #1d4ed8; color: #1d4ed8; }

        .bg-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(12px);
            z-index: -1;
        }

        .auth-container {
            width: 100%;
            max-width: 450px;
            padding: 20px;
            z-index: 10;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .card-header-glass {
            padding: 2.5rem 2rem 1.5rem;
            text-align: center;
            color: #fff;
        }

        .icon-circle {
            width: 70px;
            height: 70px;
            background: rgba(59, 130, 246, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: #60a5fa;
            margin: 0 auto 1rem;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        /* text info/sukses/gagal ikut tema agar jelas di dua mode */
        .text-info { color: #60a5fa !important; }
        html[data-tema-user="terang"] .text-info { color: #0369a1 !important; }
        html[data-tema-user="terang"] .text-danger { color: #b91c1c !important; }
        html[data-tema-user="terang"] .text-success { color: #166534 !important; }

        .card-title {
            font-weight: 800;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            letter-spacing: -0.5px;
        }

        .card-subtitle {
            color: #cbd5e1;
            font-size: 0.9rem;
            margin: 0;
        }

        .card-body {
            padding: 0 2rem 2.5rem;
        }

        .form-label {
            font-weight: 600;
            color: #cbd5e1;
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
        }

        .form-control, .form-select {
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 12px;
            padding: 0.8rem 1rem;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .form-control:focus, .form-select:focus {
            background: rgba(15, 23, 42, 0.8);
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
            color: #fff;
            outline: none;
        }

        .form-select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 16px 12px;
        }
        
        .form-select option {
            background: #1e293b;
            color: #fff;
        }

        .form-control::placeholder {
            color: #94a3b8;
        }

        .input-group-text {
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            border-right: none;
        }

        .form-control.with-icon {
            border-left: none;
        }

        .btn-primary-glass {
            background: #2563eb;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            padding: 0.9rem;
            font-size: 1rem;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
            transition: all 0.3s ease;
            width: 100%;
        }

        .btn-primary-glass:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
        }
        
        .btn-primary-glass:active {
            transform: translateY(0);
        }

        .alert-glass {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 12px;
            font-size: 0.9rem;
        }
        .alert-success-glass { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.1); }
        .alert-danger-glass { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.1); }

        .back-link {
            color: #cbd5e1;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            transition: color 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .back-link:hover {
            color: #fff;
        }
        html[data-tema-user="terang"] .back-link { color: #475569; }
        html[data-tema-user="terang"] .back-link:hover { color: #1d4ed8; }

    @media (max-width: 576px) {
        .auth-container { padding: 12px; }
        .brand-logo-auth img { height: 32px; max-width: 120px; }
        .auth-top { gap: .5rem; }
        .mode-icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: .9rem; }
        .glass-card { border-radius: 20px; }
        .card-header-glass { padding: 1.5rem 1.25rem .75rem; }
        .card-body { padding: 0 1.25rem 1.5rem; }
        .icon-circle { width: 52px; height: 52px; font-size: 1.25rem; }
        .card-title { font-size: 1.25rem; }
        .form-control, .form-select, .input-group-text { min-height: 44px; font-size: 16px; }
        .btn-primary-glass { min-height: 48px; }
        .back-link { min-height: 44px; }
    }

/* Transisi tema mulus (rev20): saat <html> berclass .tema-anim SEMUA elemen
   beranimasi 0,25 dtk — latar, teks, bingkai, bayangan memudar, bukan jepret.
   Class hanya menempel ±300ms tiap ganti mode (dipasang JS toggle). */
html { color-scheme: dark; }
html[data-tema-user="terang"] { color-scheme: light; }
html.tema-anim, html.tema-anim *, html.tema-anim *::before, html.tema-anim *::after {
   transition: background-color .25s ease, color .25s ease, border-color .25s ease,
      box-shadow .25s ease, fill .25s ease, stroke .25s ease !important;
}