* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
}

.wrap {
    width: 100%;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.content {
    display: flex;
    width: 100%;
    height: 100vh;
    background: url('../../main_images/matahari.jpg') no-repeat center center;
    background-size: cover;
}

.leftroom {
    flex: 1; /* Mengisi sisa ruang secara otomatis */
   /* background: url('../../main_images/pulau_Dodola_Halmahera.jpg') no-repeat center center;
    background-size: cover; */
}

.rightroom {
    width: 500px; /* Lebar area login dibuat tetap agar konsisten */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Jika layar di bawah 1024px (Tablet/HP), sembunyikan gambar kiri */
@media (max-width: 1024px) {
    .leftroom { display: none; }
    .rightroom { width: 100%; }
}

.box {
    width: 400px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    border: 1px solid #444;
}

.logo {
    width: 80px;
    display: block;
    margin: -80px auto 30px auto;
    border-radius: 50%;
    border: 3px solid #ebc106;
}

.inputBox {
    position: relative;
    margin-bottom: 30px;
}

/* ... (Bagian atas tetap sama) ... */

.inputBox input {
    width: 100%;
    padding: 10px 35px 10px 0; /* Tambahkan padding kanan (35px) agar teks tidak tertabrak ikon */
    font-size: 18px; /* Ukuran disesuaikan agar proporsional */
    color: #ffffff !important; /* Memastikan teks ketikan berwarna putih */
    background: transparent !important; /* Memastikan tidak ada background */
    border: none;
    border-bottom: 2px solid #fff; /* Garis bawah sedikit lebih tebal agar tegas */
    outline: none;
    transition: 0.3s;
}

/* Memastikan teks tetap putih saat autofill oleh browser */
.inputBox input:-webkit-autofill,
.inputBox input:-webkit-autofill:hover, 
.inputBox input:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

.inputBox label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #ccc; /* Warna abu terang agar terbaca di atas background gelap */
    pointer-events: none;
    transition: 0.3s;
}

/* Efek saat input aktif atau sudah terisi */
.inputBox input:focus ~ label,
.inputBox input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #ebc106;
}

/* Tambahan untuk teks bawah form */
.box span {
    display: block;
    margin-top: 20px;
    color: #bbb;
    font-size: 13px;
    text-align: center;
}
.show-pass {
    position: absolute;
    right: 5px;
    bottom: 10px; /* Menyelaraskan posisi dengan garis bawah input */
    cursor: pointer;
    z-index: 5;
    color: #ccc;
    font-size: 20px; /* Sesuaikan ukuran ikon */
    user-select: none; /* Mencegah ikon terpilih saat diklik cepat */
}

input[type="submit"] {
    width: 100%;
    padding: 12px;
    background: #ff0000;
    border: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}

input[type="submit"]:hover {
    background: #b30000;
}

.footer-links {
    text-align: center; /* Membuat teks ke tengah */
    margin-top: 20px;   /* Memberi jarak dari tombol Login */
    font-size: 14px;    /* Ukuran font yang proporsional */
    color: #bbb;        /* Warna abu-abu agar tidak terlalu mencolok */
}

.footer-links a {
    color: #ebc106;      /* Warna kuning emas sesuai tema logo */
    text-decoration: none; /* Menghilangkan garis bawah pada link */
    transition: 0.3s;
}

.footer-links a:hover {
    color: #fff;         /* Warna berubah jadi putih saat diarahkan kursor */
    text-decoration: underline; /* Garis bawah muncul saat hover */
}