/*
 * File: public/css/custom-auth.css
 * Deskripsi: Styling kustom untuk halaman login,
 * dengan form transparan (efek kaca) dan tanpa animasi logo.
 */

/* 1. Reset Container Utama & Wrapper */
/* Membuat semua wrapper menjadi transparan agar background terlihat */
.container-scroller,
.page-body-wrapper,
.content-wrapper {
    background: transparent !important;
}

/* 2. Styling untuk Gambar Latar Belakang */
/* Mengubah tag <img class="login-bg-image"> menjadi background */
.login-bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.6); /* Sedikit menggelapkan background agar form lebih fokus */
}

/* 3. Styling Form Login (Efek Kaca/Glassmorphism) */
.auth .auth-form-light {
    /* MENGUBAH FORM MENJADI TRANSPARAN */
    background: rgba(255, 255, 255, 0.1); /* Latar belakang transparan */
    backdrop-filter: blur(5px); /* Efek blur pada background di belakang form */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.auth .auth-form-light:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
}

/* 4. Penyesuaian Warna Teks pada Form Transparan */
/* Mengubah warna teks agar terbaca di atas background gelap */
.auth .auth-form-light h4,
.auth .auth-form-light h6 {
    color: #f8f9fa; /* Warna putih lembut */
}

.form-check-label,
.auth-link {
    color: #e9ecef !important; /* Warna putih keabuan */
}

.auth-link:hover {
    color: #ffffff !important; /* Warna putih terang saat hover */
}

/* 5. Animasi Form */
.auth-form-light {
    opacity: 0;
    transform: translateY(30px);
    animation: fade-in-up 0.8s 0.2s ease-out forwards;
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ANIMASI LOGO DIHAPUS */
.brand-logo img {
    /* Tidak ada lagi properti 'animation' di sini */
    transform: scale(1);
}

/* 6. Styling Elemen Form */
.form-control {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff; /* Warna teks input menjadi putih */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(255, 255, 255, 0.7);
    opacity: 1; /* Firefox */
}

.form-control:focus {
    border-color: #007bff;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.2);
}

.auth-form-btn {
    border-radius: 8px;
    border: none;
    background: linear-gradient(45deg, #007bff, #0056b3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.auth-form-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(0, 123, 255, 0.4);
}

.auth-form-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.4);
}