:root { 
    --gold: #e7aa51; 
    --navy: #14213d; 
    --light: #f8fafc; 
    --white: #ffffff;
    --border-color: #e2e8f0;
}

/* Genel Wrapper - Daha ferah bir arka plan */
.auth-wrapper { 
    background: var(--light); 
    padding: 60px 20px; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* Kart Yapısı - Genişlik 450px'den 500px'e çıkarıldı */
.auth-card { 
    width: 100%;
    max-width: 500px; 
    background: var(--white); 
    padding: 50px; 
    border-radius: 24px; 
    box-shadow: 0 20px 40px rgba(20, 33, 61, 0.08); 
    border-top: 6px solid var(--gold); 
}

/* Header Alanı - Başlık fontları büyütüldü */
.auth-header { text-align: center; margin-bottom: 40px; }
.auth-header h2 { font-size: 32px; font-weight: 850; color: var(--navy); letter-spacing: -0.5px; }
.auth-header p { font-size: 16px; color: #64748b; margin-top: 10px; line-height: 1.5; }

/* Form Grupları - Boşluklar artırıldı */
.f-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }

/* Grid Düzeni */
.f-row { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}

/* Label - Okunabilirlik için font ve spacing artırıldı */
label { 
    font-size: 13.5px; 
    font-weight: 700; 
    color: var(--navy); 
    text-transform: uppercase; 
    letter-spacing: 0.8px;
    padding-left: 4px;
}

/* Inputlar - Daha dolgun ve modern görünüm */
input { 
    padding: 16px 20px; 
    border: 2px solid var(--border-color); 
    border-radius: 12px; 
    outline: none; 
    transition: all 0.3s ease; 
    font-size: 17px; 
    background: #fff;
    color: var(--navy);
}

input:focus { 
    border-color: var(--gold); 
    box-shadow: 0 0 0 4px rgba(231, 170, 81, 0.1);
}

input::placeholder { color: #cbd5e1; }

/* Buton - Daha büyük ve vurgulu */
.btn-auth { 
    width: 100%; 
    padding: 18px; 
    background: var(--navy); 
    color: #fff; 
    border: none; 
    border-radius: 14px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    font-size: 18px;
    margin-top: 10px;
    box-shadow: 0 10px 20px rgba(20, 33, 61, 0.15);
}

.btn-auth:hover { 
    background: var(--gold); 
    transform: translateY(-3px); 
    box-shadow: 0 15px 25px rgba(231, 170, 81, 0.2);
}

/* Alt Linkler - Font büyütüldü */
.auth-footer { 
    margin-top: 35px; 
    color: #64748b; 
    font-size: 16px; 
    font-weight: 500; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center;
    gap: 8px; 
    line-height: 1.6;
}

.auth-footer a { 
    color: var(--navy); 
    text-decoration: none; 
    font-weight: 700; 
    transition: all 0.3s ease; 
    border-bottom: 2px solid transparent;
}

.auth-footer a:hover { 
    color: var(--gold); 
    border-bottom-color: var(--gold); 
}

/* --- RESPONSIVE AYARLAR (BOYUT KORUMALI) --- */

@media (max-width: 768px) {
    .auth-wrapper { padding: 40px 15px; }
    .auth-card { padding: 40px 25px; border-radius: 20px; }
    .auth-header h2 { font-size: 28px; }
}

@media (max-width: 480px) {
    .auth-header h2 { font-size: 24px; }
    .auth-header p { font-size: 15px; }
    
    .f-row { 
        grid-template-columns: 1fr; 
        gap: 0;
    }
    
    .btn-auth { font-size: 17px; padding: 16px; }
    .auth-footer { font-size: 15px; }
}