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

/* GENEL AYARLAR */
* { box-sizing: border-box; }
body {
    margin: 0; padding: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); /* Tatlı bir gradient */
    height: 100vh;
    display: flex; align-items: center; justify-content: center;
}

/* KART YAPISI */
.login-container {
    background: #ffffff;
    width: 100%; max-width: 400px;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    text-align: center;
    position: relative;
    
    /* GÜNCELLEME: Kartın kendisinin kaymasını sağlıyoruz */
    overflow-y: auto; 
    
    max-height: 90vh; /* Mobilde taşmasın */
    display: flex; flex-direction: column;
}

/* Kart içi kaydırma çubuğu makyajı (Opsiyonel ama şık durur) */
.login-container::-webkit-scrollbar {
    width: 6px;
}
.login-container::-webkit-scrollbar-track {
    background: transparent;
}
.login-container::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}
.login-container::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* LOGO */
.brand-logo {
    font-size: 2rem; color: #333; margin: 0; font-weight: 700; letter-spacing: -1px;
}
.brand-slogan {
    font-size: 0.9rem; color: #777; margin: 5px 0 20px;
}

/* GÖRÜNÜM GEÇİŞLERİ (NAVİGASYON) */
.auth-view {
    display: none; /* Hepsi varsayılan olarak gizli */
    animation: fadeIn 0.4s ease;
    width: 100%;
}
.auth-view.active {
    display: block; /* Sadece active sınıfı olan görünür */
}

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

/* INPUTLAR */
.input-group {
    position: relative; margin-bottom: 15px; text-align: left; width: 100%;
}
.input-group i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #aaa; z-index: 10;
}
.input-group input, .input-group select {
    width: 100%; padding: 12px 15px 12px 45px;
    border: 1px solid #eee; border-radius: 10px;
    background: #f9f9f9; color: #333; font-size: 0.95rem; outline: none; transition: 0.3s;
}
/* Select için özel padding (ikon hizası) */
.input-group select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
}

.input-group input:focus, .input-group select:focus {
    background: #fff; border-color: #a6c1ee; box-shadow: 0 0 0 3px rgba(166, 193, 238, 0.2);
}

/* Yan Yana Inputlar için */
.row { display: flex; gap: 10px; }
.row .input-group { flex: 1; }
/* Yan yana olanlarda ikon yoksa paddingi düzelt */
.row .input-group input { padding-left: 15px; } 

/* BUTONLAR */
.main-btn {
    width: 100%; padding: 12px;
    background: #333; color: white;
    border: none; border-radius: 10px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: 0.2s; margin-top: 10px;
}
.main-btn:hover { background: #000; transform: translateY(-2px); }
.main-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }

.back-btn {
    background: none; border: none; font-size: 1.2rem; color: #555;
    position: absolute; left: 20px; top: 20px; cursor: pointer; z-index: 20;
}

/* LİNKLER */
.switch-link { margin-top: 20px; font-size: 0.9rem; color: #666; }
.switch-link a, .forgot-pass { color: #5c6bc0; text-decoration: none; font-weight: 600; cursor: pointer; }
.switch-link a:hover { text-decoration: underline; }
.actions { display: flex; justify-content: flex-end; margin-bottom: 15px; font-size: 0.85rem; }

/* PROFİL KURULUM KAYDIRMA ALANI */
.setup-scroll-area {
    text-align: left;
    /* GÜNCELLEME: Buradaki kısıtlamayı kaldırdık, artık ana kart (.login-container) kayıyor. */
    padding-right: 5px;
}
/* İç alan scrollbar iptal, çünkü ana kutu kayıyor */

h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.5rem; color: #333; }
/* GOOGLE BUTONU VE AYRAÇ */
.divider {
    margin: 15px 0;
    position: relative;
    text-align: center;
}
.divider::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    border-top: 1px solid #eee;
    z-index: 1;
}
.divider span {
    background: #fff;
    padding: 0 10px;
    color: #999;
    font-size: 0.8rem;
    position: relative;
    z-index: 2;
}

.google-btn {
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.google-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}
.google-btn i {
    color: #DB4437; /* Google Kırmızısı */
}