.uyelik-container { /* Üyelik formunu kapsayan ana kutu */
    max-width: 500px; /* Genişliği en fazla 500 piksel ile sınırla */
    margin: 60px auto; /* Üstten/alttan 60px boşluk bırak, yatayda ortala */
    padding: 40px; /* İçeriğe her yönden 40px boşluk ver */
    background-color: var(--white-color); 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Kutuya yumuşak bir gölge ekle */
    border-radius: 10px; /* Köşeleri 10px yuvarlat */
    border-top: 5px solid var(--primary-color); /* Üst kısma kalın, ana renkte (kırmızı) çizgi çek */
}

.uyelik-form h2 { /* Form başlığı */
    text-align: center;
    color: var(--secondary-color); 
    font-size: 2rem; 
    margin-bottom: 10px; /* Altına 10px boşluk bırak */
}

.uyelik-form p { /* Başlık altındaki açıklama metni */
    text-align: center; 
    margin-bottom: 30px; /* Altına 30px boşluk bırak */
    font-size: 1.1rem; 
    color: #666; 
}

.form-grup { /* Her bir giriş alanını (input) saran kutu */
    margin-bottom: 20px; /* Gruplar arasına 20px boşluk koy */
}

.form-grup label { /* Giriş alanının etiketi (E-posta, Şifre vb.) */
    display: block; /* Etiketi kendi satırına al */
    margin-bottom: 8px; /* Altına 8px boşluk bırak */
    font-weight: bold; /* Yazıyı kalınlaştır */
    color: var(--secondary-color); 
}

.form-grup input[type="text"], /* Metin girişleri */
.form-grup input[type="telefon"], /* Telefon girişleri */
.form-grup input[type="email"], /* E-posta girişleri */
.form-grup input[type="password"] { /* Şifre girişleri */
    width: 100%; /* Genişliği %100 yap */
    padding: 12px; /* İçeriğe 12px boşluk ver */
    font-size: 1rem; /* Yazı boyutunu ayarla */
    border: 1px solid #ccc; /* Gri renkte ince kenarlık ekle */
    border-radius: 5px; /* Köşeleri 5px yuvarlat */
    transition: border-color 0.3s, box-shadow 0.3s; /* Kenarlık ve gölge değişimine geçiş efekti ver */
}

.form-grup input:focus { /* Giriş alanına tıklandığında (odaklanma) */
    outline: none; /* Varsayılan tarayıcı çerçevesini kaldır */
    border-color: var(--primary-color); /* Kenarlık rengini ana renk yap */
    box-shadow: 0 0 5px rgba(217, 4, 41, 0.3); /* Etrafa hafif kırmızı parlama ekle */
}

.form-secenekler { /* Beni hatırla ve Şifremi unuttum alanı */
    display: flex; /* Esnek kutu düzenini aç */
    justify-content: space-between; /* İçerikleri iki uca yasla */
    align-items: center; /* Dikey eksende ortala */
    margin-bottom: 25px; /* Altına 25px boşluk bırak */
    font-size: 0.9rem; /* Yazı boyutunu biraz küçült */
}

.form-secenekler label { /* Checkbox etiketi kapsayıcısı */
    display: flex; /* Hizalama için flex kullan */
    align-items: center; /* Dikey ortala */
    cursor: pointer; /* Üzerine gelince el imleci göster */
}

.form-secenekler input[type="checkbox"] { /* Onay kutusu */
    margin-right: 8px; /* Sağ tarafa 8px boşluk ver */
}

.form-secenekler a { /* Linkler (Şifremi unuttum) */
    color: var(--primary-color); 
    text-decoration: none; /* Alt çizgiyi kaldır */
}

.form-secenekler a:hover { /* Linkin üzerine gelindiğinde */
    text-decoration: underline; /* Altını çiz */
}

.uyelik-form .btn { /* Giriş yap / Kayıt ol butonu */
    width: 100%; /* Genişliği tam yap */
    padding: 14px; /* İç dolguyu artır */
    font-size: 1.1rem; /* Yazı boyutunu büyüt */
    text-transform: uppercase; /* Harflerin hepsini büyük yap */
}

.form-yonlendirme { /* Alt kısımdaki yönlendirme alanı (Hesabın yok mu?) */
    text-align: center; /* Metni ortala */
    margin-top: 30px; /* Üstten 30px boşluk bırak */
    padding-top: 20px; /* Üstten 20px iç boşluk ver */
    border-top: 1px solid var(--light-gray); /* Üste ince gri çizgi çek */
}

.form-yonlendirme p { /* Yönlendirme metni */
    margin: 0; /* Varsayılan boşlukları sıfırla */
    font-size: 1rem; /* Yazı boyutunu ayarla */
}

.form-yonlendirme a { /* Yönlendirme linki (Kayıt Ol) */
    color: var(--primary-color); 
    font-weight: bold; /* Yazıyı kalınlaştır */
    text-decoration: none; /* Alt çizgiyi kaldır */
}

.form-yonlendirme a:hover { /* Linkin üzerine gelindiğinde */
    text-decoration: underline; /* Altını çiz */
}