@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* Nilai default var(--navy)/var(--gold) di bawah cuma fallback kalau
   halaman ini dibuka tanpa blok <style> tema dari SiteSetting (lihat
   login.blade.php). Normalnya nilai asli datang dari sana, jadi ganti
   tema di admin ("Ganti Tema") otomatis kebawa ke halaman login juga. */
:root{
    --navy:#192C4D;
    --gold:#C89C3D;
}

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

/* ==== Background halaman: gradasi putih -> biru -> emas yang halus.
   Warna brand (navy var(--navy) & gold var(--gold)) tetap dipakai, cuma dibikin
   sangat pudar (di-mix ke arah putih) supaya jadi backdrop, bukan warna
   dominan -- kartu login-nya yang tetap jadi pusat perhatian. ==== */
body{
    min-height:100vh;
    background:
        radial-gradient(60% 55% at 12% 15%, color-mix(in srgb, var(--navy) 7%, transparent) 0%, transparent 60%),
        radial-gradient(55% 55% at 92% 90%, color-mix(in srgb, var(--gold) 10%, transparent) 0%, transparent 60%),
        linear-gradient(160deg, #ffffff 0%, #f6f8fc 55%, #fdf9f0 100%);
    color:var(--navy);
}

.icon{
    width:18px;
    height:18px;
    stroke:var(--navy);
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
}

/* ================= WRAPPER + BACK LINK ================= */

.back-link{
    position:absolute;
    top:28px;
    left:28px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:var(--navy);
    text-decoration:none;
    padding:8px 16px 8px 12px;
    border-radius:999px;
    border:1.5px solid #e2e5e9;
    background:#fff;
    box-shadow:0 4px 14px color-mix(in srgb, var(--navy) 6%, transparent);
    transition:.2s;
}

.back-link svg{
    width:14px;
    height:14px;
    stroke:var(--navy);
    fill:none;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:.2s;
}

.back-link:hover{
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
}

.back-link:hover svg{
    stroke:#fff;
    transform:translateX(-2px);
}

/* ================= LAYOUT: flat full-bleed 2 kolom (bukan kartu
   mengambang lagi) ================= */

.auth-page{
    display:flex;
    min-height:100vh;
    position:relative;
}

.auth-left{
    flex:1 1 50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:60px 80px;
    position:relative;
    background:transparent;
}

.auth-right{
    flex:1 1 50%;
    padding:0;
    display:flex;
}

.auth-right-panel{
    position:relative;
    width:100%;
    overflow:hidden;
    background:
        radial-gradient(60% 55% at 85% 10%, color-mix(in srgb, var(--gold) 16%, transparent) 0%, transparent 65%),
        linear-gradient(165deg, #eef2fb 0%, #fbf6e8 100%);
}

.auth-right-panel img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ================= LOGO ================= */

.logo{
    margin-bottom:36px;
}

.logo img{
    height:38px;
}

/* ================= FORM ================= */

.form-wrapper{
    width:100%;
    max-width:400px;
    animation: gc-form-in .6s cubic-bezier(0.22,1,0.36,1);
}

@keyframes gc-form-in{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
    .form-wrapper{ animation:none; }
}

.form-wrapper h1{
    font-size:30px;
    font-weight:800;
    letter-spacing:-0.01em;
    margin-bottom:8px;
}

.form-wrapper > p{
    color:#7d8797;
    font-size:14px;
    margin-bottom:30px;
}

.field{
    margin-bottom:18px;
}

.field label{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:8px;
}

/* Field email/password sekarang lebih kelihatan: border solid abu-jelas
   (bukan transparan lagi) + latar putih + shadow tipis, jadi kotaknya
   kebaca sebagai area yang bisa diklik, bukan cuma garis bawah pudar. */
.field-input{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1.5px solid #d7dbe3;
    border-radius:12px;
    padding:4px 14px;
    box-shadow:0 1px 2px color-mix(in srgb, var(--navy) 4%, transparent);
    transition:.2s;
}

.field-input:hover{
    border-color:#b7bdc9;
}

.field-input:focus-within{
    border-color:var(--gold);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
}

.field-input.error{
    border-color:#d9534f;
}

.field-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:9px;
    background:#f5f6fa;
    flex-shrink:0;
}

.field-input:focus-within .field-icon{
    background:#fbf3e2;
}

.field-icon .icon{
    width:16px;
    height:16px;
    stroke:#7d8797;
}

.field-input:focus-within .field-icon .icon{
    stroke:var(--gold);
}

.field-input input{
    border:none;
    outline:none;
    width:100%;
    font-size:14.5px;
    font-family:'Poppins',sans-serif;
    color:var(--navy);
    background:transparent;
    padding:12px 0;
}

.field-input input::placeholder{
    color:#a8adb5;
}

.toggle-password{
    background:none;
    border:none;
    padding:6px;
    margin-right:-6px;
    cursor:pointer;
    flex-shrink:0;
    display:flex;
    align-items:center;
    border-radius:8px;
    transition:background .2s ease;
}

.toggle-password:hover{
    background:#f5f6fa;
}

.toggle-password .icon{
    width:17px;
    height:17px;
    stroke:#a8adb5;
    transition:stroke .2s ease;
}

.toggle-password:hover .icon{
    stroke:var(--navy);
}

.error-text{
    display:none;
    color:#d9534f;
    font-size:12px;
    margin-top:6px;
}

.error-text.show{
    display:block;
}

.field-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
}

/* BARU: checkbox "Ingat saya" -- menggantikan link "Forgot Password?"
   (fitur reset password lewat email belum ada, jadi diganti remember me). */
.remember-link{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--navy);
    cursor:pointer;
    user-select:none;
}

.remember-link input[type="checkbox"]{
    width:15px;
    height:15px;
    accent-color:var(--gold);
    cursor:pointer;
}

.btn-primary{
    width:100%;
    background:var(--gold);
    color:#fff;
    border:none;
    padding:15px 20px;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 22px color-mix(in srgb, var(--gold) 28%, transparent);
    transition:.2s;
}

.btn-primary:hover{
    background:color-mix(in srgb, var(--gold) 82%, black);
    transform:translateY(-2px);
    box-shadow:0 14px 26px color-mix(in srgb, var(--gold) 36%, transparent);
}

.btn-primary:active{
    transform:translateY(0);
}

.error-box{
    background:#fdeceb;
    border:1px solid #f3c6c3;
    color:#c0392b;
    border-radius:10px;
    padding:12px 14px;
    font-size:13px;
    margin-bottom:18px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){

.auth-right{
    display:none;
}

.auth-left{
    padding:44px 40px;
}

.back-link{
    position:static;
    display:inline-flex;
    margin-bottom:24px;
}
}

@media(max-width:480px){

.auth-left{
    padding:30px 22px;
}

.form-wrapper h1{
    font-size:24px;
}
}