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

:root {
    --color-primary: #6366F1;
    --color-secondary: #5BB3A0;
    --color-light-cream: #EEF2FF;
    --color-white: #FFFFFF;
    --color-text-dark: #1E293B;
    --color-text-muted: #64748B;
    --shadow-soft-md: 0 8px 28px rgba(99, 102, 241, 0.12);
    --shadow-soft-lg: 0 12px 45px rgba(99, 102, 241, 0.18);
    --transition-ease: all 0.3s ease-in-out;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'DM Sans', sans-serif; }
h1, h2, h3, h4, .form-header { font-family: 'Outfit', sans-serif; font-weight: 700; }

body { 
    width: 100%; min-height: 100vh; 
    background: linear-gradient(135deg, var(--color-light-cream) 0%, #E0E7FF 100%);
    color: var(--color-text-dark); overflow-x: hidden; position: relative; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 15px;
}

body::before {
    content: ''; position: fixed; width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
    border-radius: 45% 55% 52% 48% / 48% 45% 55% 52%; top: -10%; right: -10%; z-index: 0;
}

.main-wrapper { position: relative; z-index: 2; width: 100%; max-width: 440px; animation: fadeInUp 0.8s ease forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.header-content { text-align: center; margin-bottom: 20px; }
.logo-circle { 
    width: 70px; height: 70px; background: var(--color-white); border-radius: 20px; 
    display: flex; justify-content: center; align-items: center; margin: 0 auto 12px auto; 
    box-shadow: var(--shadow-soft-md); border: 1px solid rgba(99, 102, 241, 0.15);
}
.logo-circle i { font-size: 32px; color: var(--color-primary); }
.header-content h1 { font-size: 24px; color: var(--color-text-dark); letter-spacing: -0.02em; margin-bottom: 4px; }
.header-content h1 span { background: linear-gradient(135deg, var(--color-primary), #4F46E5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.header-content p.subtitle { font-size: 13.5px; color: var(--color-text-muted); font-weight: 500; }

.card-container { 
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    width: 100%; border-radius: 24px; padding: 30px 25px 20px 25px; 
    box-shadow: var(--shadow-soft-lg); border: 1px solid rgba(255, 255, 255, 1);
    text-align: center; margin-bottom: 15px; position: relative; 
}

.notif-error, .notif-sukses { 
    padding: 12px 16px; border-radius: 14px; font-size: 13px; margin-bottom: 20px; 
    font-weight: 600; text-align: left; display: flex; align-items: center; gap: 10px;
}
.notif-error { background: #FEE2E2; color: #991B1B; border-left: 4px solid #DC2626; }
.notif-sukses { background: #D1FAE5; color: #065F46; border-left: 4px solid #10B981; }

.form-header { margin-bottom: 20px; font-size: 16px; color: var(--color-primary); padding-bottom: 12px; border-bottom: 1px solid rgba(99, 102, 241, 0.15); display: flex; align-items: center; justify-content: center; gap: 8px; }
.input-group { position: relative; margin-bottom: 15px; text-align: left; }
.input-group input { 
    width: 100%; padding: 14px 40px 14px 16px; border: 1px solid rgba(99, 102, 241, 0.2); 
    border-radius: 14px; font-size: 14px; background-color: #FAFBFF; outline: none; 
    transition: var(--transition-ease); color: var(--color-text-dark); 
}
.input-group input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); background-color: var(--color-white); }
.input-group i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 16px; }
.input-group input:focus + i { color: var(--color-primary); }

.show-pass-area { display: flex; align-items: center; margin-bottom: 20px; font-size: 12.5px; color: var(--color-text-muted); font-weight: 500; }
.show-pass-area input { margin-right: 8px; cursor: pointer; accent-color: var(--color-primary); width: 15px; height: 15px; }

.btn-login { 
    width: 100%; padding: 15px; color: var(--color-white); border: none; border-radius: 50px; 
    font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--transition-ease); 
    display: flex; justify-content: center; align-items: center; gap: 10px; 
    background: linear-gradient(135deg, var(--color-primary) 0%, #4F46E5 100%); 
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}
.btn-login:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4); }

.back-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--color-text-muted); font-size: 13.5px; font-weight: 600; margin-top: 15px; transition: var(--transition-ease); }
.back-link:hover { color: var(--color-primary); transform: translateX(-4px); }