/* Kilitli Ekran Stilleri */
.overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.9);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}

.auth-card {
    background: white; padding: 40px; border-radius: 24px;
    width: 100%; max-width: 400px; text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Giriş yapılana kadar ana içeriği bulanıklaştır */
.blur-content {
    filter: blur(20px);
    pointer-events: none; /* Tıklamayı engelle */
    user-select: none;
    transition: 0.5s;
}

/* Giriş yapıldığında bulanıklığı kaldıracak class */
body.auth-true .blur-content {
    filter: blur(0);
    pointer-events: auto;
}

body.auth-true #loginOverlay {
    display: none;
}

/* Form Tasarımı */
.auth-tabs { display: flex; margin: 20px 0; border-bottom: 2px solid #f1f5f9; }
.tab-btn { flex: 1; padding: 10px; border: none; background: none; cursor: pointer; font-weight: 700; color: #94a3b8; }
.tab-btn.active { color: #3b82f6; border-bottom: 2px solid #3b82f6; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form input { width: 100%; padding: 12px; margin-bottom: 12px; border-radius: 8px; border: 1px solid #e2e8f0; }
.btn-submit { width: 100%; padding: 14px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }

/* Navbar ve Logout */
.nav-flex { display: flex; justify-content: space-between; align-items: center; }
.logout-btn { background: #ef4444; color: white; border: none; padding: 5px 15px; border-radius: 5px; cursor: pointer; margin-left: 10px; }

/* Eski Grid ve Card stillerini buraya eklemeyi unutma (önceki cevabımdaki stiller geçerli) */
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; }
.country-card { background: white; padding: 20px; border-radius: 12px; border: 1px solid #eee; }
.logo { font-size: 1.5rem; font-weight: 700; text-decoration: none; color: #0f172a; }
.logo span { color: #3b82f6; }
/* Tüm sayfa için modern font ve akıcı kaydırma */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    color: #333;
}

/* Logoya hover (üzerine gelince) efekti */
nav img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

nav img:hover {
    transform: scale(1.1); /* Hafifçe büyür */
    /* Logo animasyonu */
.logo img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.logo img:hover {
    transform: scale(1.1); /* Üzerine gelince %10 büyür */
}
}