/*
|--------------------------------------------------------------------------
| Stylesheet Khusus Halaman Login (login.css) - V.1.4
|--------------------------------------------------------------------------
|
| - [PERBAIKAN] Ukuran logo (.icon-primary) diperbesar lagi
|   menjadi 120px agar lebih pas dengan card.
|
*/

/* ----------------------------------- */
/* 1. Variabel Global (Tema)           */
/* ----------------------------------- */
:root {
    --font-family: 'Inter', sans-serif;
    
    /* (Variabel warna Anda tetap sama) */
    --color-primary: #e60000;
    --color-primary-hover: #b30000;
    --color-primary-light: #ffcaca;
    --color-primary-text: #ffeaea;
    --color-primary-faded: rgba(230, 0, 0, 0.2);
    --color-primary-dark: #260000;
    --color-primary-shadow: rgba(230, 0, 0, 0.3);
    --color-dark: #0a0a0a;
    --color-dark-secondary: #18181b;
    --color-dark-tertiary: #27272a;
    --color-border: #3f3f46;
    --color-text: #e5e7eb;
    --color-text-secondary: #9ca3af;
    --color-text-placeholder: #6b7280;
    --color-text-white: #ffffff;
    --color-error-bg: #4d0000;
    --color-error-border: #b30000;
    --color-red-text: #fca5a5;
}

/* ----------------------------------- */
/* 1.1 Reset & Global (Ringkas)        */
/* ----------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    background-color: var(--color-dark);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h2 {
    color: var(--color-text-white);
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

p {
    margin: 0;
}


/* ----------------------------------- */
/* 2. Halaman Login (Modern)           */
/* ----------------------------------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    overflow: hidden;
    position: relative;
}

/* (Latar Belakang Animasi tidak berubah) */
.login-background-wrapper {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 1;
    background: linear-gradient(
        -45deg, 
        #0a0a0a, 
        #1a0000, 
        #0a0a0a, 
        #260000
    );
    background-size: 400% 400%;
    animation: animatedGradient 15s ease infinite;
}

@keyframes animatedGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Card Konten */
.login-container {
    width: 100%;
    max-width: 400px;
    padding: 32px;
    background-color: rgba(24, 24, 27, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 10px 10px -5px rgba(0,0,0,0.2);
    z-index: 2;
    position: relative;
    animation: fadeInFromBottom 0.7s ease-out forwards;
}

@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

/* =============================================
   PERBAIKAN PADA LOGO
   ============================================= */
.login-header .icon-primary {
    width: 168px;  /* Diperbesar dari 80px */
    height: auto; /* Diperbesar dari 80px */
    margin-bottom: 16px;
}

.login-header p {
    margin: 4px 0 0 0;
    font-size: 16px;
    color: var(--color-text-secondary);
}

/* (Jarak Form Konsisten 24px) */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* (Form Interaktif tidak berubah) */
.form-group {
    position: relative;
}

.form-group label {
    position: absolute;
    top: 14px;
    left: 44px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-placeholder);
    pointer-events: none;
    transition: all 0.2s ease-out;
}

.input-wrapper {
    position: relative;    
}

.form-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--color-text-placeholder);
    transition: color 0.2s ease-out;
}

.login-page .form-control {
    width: 100%;
    padding: 15px 16px 13px 44px; /* Padding sudah seimbang */
    font-size: 14px;
    color: var(--color-text);
    background-color: var(--color-dark-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-page .form-control::placeholder {
    color: transparent;
}

.login-page .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.login-page .form-group.is-focused .form-icon,
.login-page .form-control:not(:placeholder-shown) ~ .form-icon {
    color: var(--color-primary);
}

.login-page .form-group.is-focused label,
.login-page .form-control:not(:placeholder-shown) + label {
    top: 3px;
    left: 44px;
    font-size: 11px;
    color: var(--color-primary);
}

.form-actions {
    padding-top: 24px;
}

/* (Tombol dan Footer tidak berubah) */
.login-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.login-page .btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 6px -1px var(--color-primary-shadow), 0 2px 4px -2px var(--color-primary-shadow);
}

.login-page .btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 10px -3px var(--color-primary-shadow);
}

.login-page .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-shadow);
}

.login-page .btn .btn-icon {
    margin-right: 8px;
    font-size: 16px;
}

.login-footer {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-placeholder);
    margin-top: 24px;
}

/* (Alert tidak berubah) */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}
.alert i {
    font-size: 16px;
    margin-right: 12px;
}
.alert-error {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-red-text);
}