/* style-kanan-unik.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    /* Background Utama di Body */
    background-image: linear-gradient(to left, rgba(60, 100, 150, 0.6), rgba(20, 40, 80, 0.8)), url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1920'); /* GANTI URL GAMBAR */
    background-size: cover;
    background-position: center center;
    min-height: 100vh;
    overflow-x: hidden; /* Cegah scroll horizontal */
    /*transform: scale(0.95);
    transform-origin: top left;
    width: 111.11%;*/
}

.login-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Sisi Kiri */
.left-side {
    flex: 1; /* Ambil setengah bagian kiri */
    display: flex;
    justify-content: center; /* Pusatkan konten teks */
    align-items: center;
    padding: 40px;
    position: relative; /* Untuk context z-index jika diperlukan */
    color: white;
}

.background-text {
    text-align: center; /* Atau left jika preferensi */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    max-width: 450px; /* Batasi lebar teks */
}

    .background-text h1 {
        font-size: clamp(2.2em, 5vw, 3.8em);
        font-weight: 600;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .background-text a {
        color: #fff;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 8px 15px;
        border-radius: 6px;
        font-size: clamp(0.8em, 2vw, 1em);
        transition: background-color 0.3s ease;
        display: inline-block;
    }

        .background-text a:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

/* Sisi Kanan */
.right-side {
    flex: 1; /* Ambil setengah bagian kanan */
    display: flex;
    justify-content: center; /* Pusatkan wrapper form */
    align-items: center;
    padding: 40px; /* Padding di area kanan */
    position: relative;
}

.login-wrapper {
    width: 100%;
    max-width: 430px; /* Lebar maksimum form */
}

/* Form Login dengan Gaya Unik */
.login-form {
    background-color: rgba(30, 30, 30, 0.85);
    padding: 40px 35px;
    /* Bentuk unik (sama seperti contoh sebelumnya) */
    border-radius: 50px 15px 50px 15px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
    color: #f0f0f0;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%; /* Penuhi .login-wrapper */
    /* Animasi */
    opacity: 0;
    transform: translateX(30px); /* Muncul dari kanan */
    animation: slideInFade 0.6s ease-out forwards 0.2s;
}

.login-form .text-danger {
    color: #dc3545 !important; /* Merah Bootstrap */
}

@keyframes slideInFade {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Styling elemen dalam form (logo, input, tombol, dll) --- */
/* (Sama persis seperti contoh style-unik.css sebelumnya) */

.login-form .logo {
    max-width: 250px;
    margin-bottom: 20px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.login-form h2 {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.9em;
    color: #fff;
}

.login-form p {
    margin-bottom: 30px;
    color: #c0c0c0;
    font-size: 1em;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
    position: relative;
}

    .input-group label {
        display: block;
        margin-bottom: 7px;
        font-weight: 500;
        font-size: 0.9em;
        color: #d0d0d0;
    }

.login-form input[type="text"], .login-form input[type="password"], .login-form input[type="email"], .login-form input[type="tel"], .login-form input[type="date"] {
    padding: 13px 18px;
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f0f0f0;
    font-size: 1em;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-form input[type="text"]:not(.otp-input),
.login-form input[type="password"],
.login-form input[type="email"],
.login-form input[type="tel"],
.login-form input[type="date"] {
    width: 100%;
}


.login-form input::placeholder {
    color: #aaa;
}

.login-form input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(0, 123, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.captcha-group {
    margin-bottom: 20px;
}

.captcha-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.captcha-img {
    border-radius: 6px;
    margin-right: 10px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    filter: contrast(110%);
}

.refresh-captcha {
    background: none;
    border: none;
    color: #b0b0b0;
    font-size: 1.7em;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: color 0.3s ease;
}

    .refresh-captcha:hover {
        color: #00aaff;
    }

.captcha-group input[type="text"] {
    width: 100%;
}

.btn-signin {
    width: 90%;
    padding: 13px 15px;
    background-image: linear-gradient(to right, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.btn-not-signin {
    width: 90%;
    padding: 13px 15px;
    background-image: linear-gradient(to right, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 300;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.btn-signin:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.btn-not-signin:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.footer-logo {
    margin-top: 30px;
}

.auth-badge {
    max-height: 28px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

    .auth-badge:hover {
        opacity: 1;
    }

/* Responsiveness */
@media (max-width: 850px) { /* Ubah breakpoint agar tidak terlalu cepat berubah */
    .login-container {
        flex-direction: column; /* Tumpuk kolom */
    }

    .left-side {
        flex: none; /* Hapus fleksibilitas */
        width: 100%;
        min-height: 200px; /* Tinggi minimum untuk area teks */
        padding: 30px;
        justify-content: center;
        align-items: center; /* Pusatkan teks saat menumpuk */
    }

    .background-text h1 {
        font-size: clamp(1.8em, 6vw, 2.8em);
        margin-bottom: 10px;
    }

    .background-text a {
        font-size: clamp(0.7em, 1.8vw, 0.9em);
        padding: 6px 12px;
    }

    .right-side {
        flex: none; /* Hapus fleksibilitas */
        width: 100%;
        padding: 30px 20px 50px 20px; /* Padding bawah lebih besar */
        justify-content: center;
    }

    .login-wrapper {
        max-width: 400px; /* Sesuaikan max-width jika perlu */
    }

    .login-form {
        /* Sedikit kurangi padding & radius di layar kecil jika perlu */
        padding: 35px 30px;
        /* border-radius: 40px 10px 40px 10px; */ /* Bisa disesuaikan */
        /* Animasi mungkin diubah/dihapus untuk performa */
        animation: fadeInSlide 0.5s ease-out forwards; /* Ganti ke fade in sederhana */
    }

    @keyframes fadeInSlide { /* Sesuaikan animasi untuk mobile */
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (max-width: 480px) {
    .left-side {
        min-height: 150px;
    }

    .login-form {
        padding: 30px 25px;
    }
}

.password-wrapper {
    position: relative;
}

    .password-wrapper input {
        padding-right: 40px; 
    }

/*.toggle-password {
    position: absolute;
    right: 35px;
    top: calc(50% + 0.9rem);
    transform: translateY(-50%);
    height: 1em;
    line-height: 1;
    font-size: 1.2em;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
}*/

.toggle-password {
    position: absolute;
    right: 15px; 
    top: 3.25rem;
    transform: translateY(-50%);
    z-index: 10;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .toggle-password:hover {
        color: #007bff;
    }

.company-info {
    margin-top: 40px;
    text-align: left;
    /* --- Efek Kaca Buram (Glassmorphism) --- */
    /* Latar belakang sangat transparan, biarkan blur yang bekerja */
    background: rgba(255, 255, 255, 0.1);
    /* Efek blur pada background di belakang elemen ini */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Border tipis untuk menonjolkan efek kaca */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px; /* Sudut lebih tumpul khas desain modern */
    /* Bayangan halus untuk memberikan kedalaman */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    /* --- Tata Letak Internal --- */
    display: flex;
    padding: 25px;
    gap: 25px;
}

.info-column {
    flex: 1;
}

    /* Garis pemisah vertikal yang elegan */
    .info-column:first-child {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        padding-right: 25px;
    }

.info-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

    .info-header i {
        font-size: 1.2em;
        color: #ffffff;
        /* Memberi sedikit bayangan pada ikon agar 'menyala' */
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        margin-right: 12px;
        width: 20px; /* Lebar tetap agar teks sejajar */
    }

.company-info strong {
    font-size: 1.1em;
    font-weight: 600;
    color: #ffffff;
    display: block;
}

.company-info p {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.6;
    color: #e0e0e0;
}

    .company-info p strong {
        display: inline; /* Khusus untuk 'Phone', 'Fax', dll. */
        font-weight: 500;
        color: #d0d0d0;
    }

/* Penyesuaian untuk layar kecil */
@media (max-width: 768px) {
    .company-info {
        flex-direction: column;
        text-align: center;
    }

    .info-column:first-child {
        border-right: none; /* Hilangkan garis pemisah */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Ganti jadi pemisah horizontal */
        padding-right: 0;
        padding-bottom: 20px;
    }

    .info-header {
        justify-content: center; /* Pusatkan ikon dan judul */
    }
}