/* Genel Stil ve Resetleme */
:root {
    --primary-color: #5e72e4; --secondary-color: #f7fafc; --text-color: #32325d;
    --success-color: #2dce89; --danger-color: #f5365c; --warning-color: #fb6340; --light-gray: #e9ecef;
}
body { font-family: 'Poppins', sans-serif; background-color: var(--secondary-color); color: var(--text-color); margin: 0; line-height: 1.6; }
main { padding: 20px 15px; max-width: 1200px; margin: 0 auto; min-height: calc(100vh - 140px); }
/* Header ve Navigasyon */
header { background: #fff; padding: 10px 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }
nav .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
nav ul li a { text-decoration: none; color: var(--text-color); padding: 10px 15px; font-weight: 600; transition: color 0.3s ease; }
nav ul li a:hover { color: var(--primary-color); }
/* Butonlar */
.buton, .buyuk-buton { display: inline-block; padding: 10px 20px; background-color: var(--primary-color); color: #fff; text-decoration: none; border-radius: 5px; font-weight: 600; transition: background-color 0.3s ease; border: none; cursor: pointer; }
.buyuk-buton { padding: 15px 30px; font-size: 1.1rem; }
.buton:hover, .buyuk-buton:hover { background-color: #4355b2; }
.buton.ikincil { background-color: #f4f5f7; color: var(--text-color); }
.buton.ikincil:hover { background-color: #dcdfe6; }
/* Formlar */
.form-konteyeri { max-width: 500px; margin: 40px auto; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.form-konteyeri h2 { margin-top: 0; }
.form-grubu { margin-bottom: 20px; }
.form-grubu label { display: block; margin-bottom: 5px; font-weight: 600; }
.form-grubu input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
.hata { background: #f8d7da; color: #721c24; padding: 10px; border-radius: 5px; margin-bottom: 20px; }
.basari { background: #d4edda; color: #155724; padding: 10px; border-radius: 5px; margin-bottom: 20px; }
/* Hikaye Kartları */
.hikaye-listesi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.hikaye-karti { background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 20px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.zorluk-etiketi { position: absolute; top: 15px; right: -30px; background: var(--warning-color); color: #fff; padding: 5px 30px; font-size: 0.8rem; transform: rotate(45deg); }
.seviye-1 .zorluk-etiketi { background-color: var(--success-color); }
.seviye-3 .zorluk-etiketi { background-color: var(--danger-color); }
.mod-secim-butonlari { margin-top: 20px; display: flex; gap: 10px; justify-content: center; }
/* Sonuç ve Profil Ekranı */
.sonuc-paneli, .profil-istatistikler { display: flex; justify-content: space-around; gap: 20px; margin: 30px 0; }
.sonuc-karti, .stat-karti { background: #fff; padding: 20px; text-align: center; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); flex-grow: 1; }
.sonuc-karti .deger, .stat-karti .deger { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); }
/* Klasik Okuma Modu */
.okuma-sahnesi-konteyeri { max-width: 800px; margin: 20px auto; padding: 30px; background: #fff; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); text-align: center; }
#metin-penceresi { min-height: 250px; padding: 20px; margin: 20px 0; border: 1px solid var(--light-gray); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1.8; }
.ilerleme-bari-dis { background-color: var(--light-gray); border-radius: 20px; height: 20px; width: 100%; overflow: hidden; margin-top: 10px; }
#ilerleme-bari-ic { height: 100%; background-color: var(--success-color); border-radius: 20px; transition: width 0.5s ease; }
#ilerleme-yuzdesi { display: block; margin-top: 5px; font-size: 0.9rem; color: #8898aa; font-weight: 600; }
#kontrol-butonlari {
    margin-top: 30px;
    /* YENİ EKLENDİ: Butonları yan yana ve aralıklı hizalamak için */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Butonlar arasına boşluk koyar */
}
/* Kaydırak Okuma Modu */
.kaydirak-sahnesi-konteyeri { max-width: 800px; margin: 20px auto; padding: 30px; background: #fff; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); text-align: center; }
#kaydirak-penceresi { height: 400px; border: 1px solid var(--light-gray); border-radius: 8px; overflow-y: hidden; text-align: left; padding: 20px; font-size: 1.5rem; line-height: 1.9; position: relative; }
.kaydirak-kontroller { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 15px; }
#hiz-gostergesi { font-weight: 700; font-size: 1.2rem; color: var(--primary-color); min-width: 100px; }
#hiz-artir-btn, #hiz-azalt-btn { font-size: 1.5rem; padding: 5px 15px; }
/* Diğer */
.sayfa-konteyeri { background: #fff; padding: 30px; border-radius: 8px; }
.text-center { text-align: center; }
footer { text-align: center; padding: 20px; color: #8898aa; }
/* --- AŞAMA 7: OYUN MODÜLÜ STİLLERİ --- */
.oyun-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.oyun-karti {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.oyun-ikonu {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 15px;
}
.oyun-karti h2 {
    margin-top: 0;
    color: var(--primary-color);
}
.oyun-karti p {
    color: #525f7f;
    flex-grow: 1;
}
.oyun-karti .buton {
    margin-top: 20px;
}

/* Hikaye ve oyun şablonları: büyük ekranda 3 kart */
.sayfa-konteyeri .hikaye-listesi,
.sayfa-konteyeri .oyun-listesi {
    width: 100%;
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 900px) {
    .sayfa-konteyeri .hikaye-listesi,
    .sayfa-konteyeri .oyun-listesi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .sayfa-konteyeri .hikaye-listesi,
    .sayfa-konteyeri .oyun-listesi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* --- PROFİL SAYFASI YENİ ROZET GALERİSİ STİLLERİ --- */

.rozet-galerisi {
    background: #f7fafd; /* Biraz daha sıcak bir arka plan */
    padding: 30px;
    margin: 40px auto;
    border-radius: 12px;
    border: 1px solid var(--light-gray);
    max-width: 900px;
}
.rozet-galerisi h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 1.8rem;
    color: var(--text-color);
}
.rozetler-konteyeri {
    display: grid;
    /* Cihaz boyutuna göre esnek sütun yapısı */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

/* Yeni Rozet Kartı Ana Stili */
.rozet-karti-yeni {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: help; /* İpucu olduğunu belirtmek için */
}
.rozet-karti-yeni:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 10px 25px rgba(94, 114, 228, 0.2);
}

/* Rozet Emojisinin Parlak Çerçevesi */
.rozet-karti-cerceve {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fceb9a, #ffc107); /* Altın rengi gradient */
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
}
.rozet-karti-emoji {
    font-size: 2.8rem;
    line-height: 1;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

/* Rozet Başlığı ve Açıklaması */
.rozet-karti-govde {
    text-align: left;
}
.rozet-karti-isim {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}
.rozet-karti-aciklama {
    margin: 0;
    font-size: 0.85rem;
    color: #8898aa;
    line-height: 1.4;
}

/* Farklı rozet türleri için farklı çerçeve renkleri (Bonus!) */
.rozet-karti-yeni[title*="Hız"],
.rozet-karti-yeni[title*="hızlı"] {
    .rozet-karti-cerceve {
        background: linear-gradient(135deg, #a4cff9, #64a6e2); /* Mavi gradient */
        box-shadow: 0 0 15px rgba(100, 166, 226, 0.5);
    }
}
.rozet-karti-yeni[title*="Anlam"],
.rozet-karti-yeni[title*="Bilgesi"] {
    .rozet-karti-cerceve {
        background: linear-gradient(135deg, #b0a4f9, #8a64e2); /* Mor gradient */
        box-shadow: 0 0 15px rgba(138, 100, 226, 0.5);
    }
}
/* --- OYUN SONU EKRANI STİLLERİ --- */
.oyun-sonu-ekrani {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInScale 0.5s ease-out;
}

.oyun-sonu-ikon {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 15px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.15));
}

.oyun-sonu-baslik {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 10px 0;
}

.oyun-sonu-skor {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 30px;
}

.oyun-sonu-skor strong {
    font-size: 2rem;
    color: var(--success-color);
}

.oyun-sonu-butonlar {
    display: flex;
    gap: 15px;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* --- MODERN SONUÇ EKRANI STİLLERİ --- */

.sonuc-konteyeri.yeni-tasarim {
    max-width: 850px;
    margin: 30px auto;
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.sonuc-ust-bolum .sonuc-ikon {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 15px;
}

.sonuc-ust-bolum h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.sonuc-ust-bolum .motivasyon-mesaji {
    font-size: 1.1rem;
    color: #525f7f;
    margin-bottom: 30px;
}

.sonuc-paneli-yeni {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.sonuc-paneli-yeni.tekli-kart {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.sonuc-karti-yeni {
    background: #f7fafd;
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    padding: 25px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sonuc-karti-yeni:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.07);
}

.sonuc-karti-yeni h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #8898aa;
    font-weight: 500;
}

.sonuc-karti-yeni .deger {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.sonuc-karti-yeni .birim {
    font-size: 0.9rem;
    color: #525f7f;
}

/* Kazanılanlar Bölümü */
.odul-konteyeri-yeni {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.odul-baslik {
    font-size: 1.5rem;
    margin: 0 0 20px 0;
    font-weight: 600;
}

.kazanimlar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.kazanim-karti-yeni {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px 25px;
    text-align: center;
}

.kazanim-karti-yeni h4, .kazanim-karti-yeni .emoji {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}
.kazanim-karti-yeni p {
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.ebeveyn-paneli-konteyeri {
    max-width: 1100px;
    margin: 20px auto;
}

.panel-baslik {
    padding: 20px;
    background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(94, 114, 228, 0.3);
}
.panel-baslik h1 { margin: 0; font-size: 2rem; }
.panel-baslik p { margin: 5px 0 0; opacity: 0.8; }

.genel-bakis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.bakis-karti {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
}
.bakis-karti .ikon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    margin-right: 20px;
}
.bakis-karti .ikon.hiz { background: #5e72e4; }
.bakis-karti .ikon.anlama { background: #2dce89; }
.bakis-karti .ikon.hikaye { background: #11cdef; }
.bakis-karti .ikon.oyun { background: #fb6340; }

.bakis-karti .veri { display: flex; flex-direction: column; }
.bakis-karti .deger { font-size: 1.5rem; font-weight: 700; color: var(--text-color); }
.bakis-karti .etiket { font-size: 0.9rem; color: #8898aa; }

.grafik-konteyeri-yeni, .aktivite-gecmisi {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
}
.grafik-konteyeri-yeni h3, .aktivite-gecmisi h3 { margin-top: 0; }

.tablo-konteyeri { max-height: 400px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--light-gray); }
th { background-color: #f6f9fc; font-weight: 600; }
tbody tr:hover { background-color: #f6f9fc; }

.aktivite-etiketi {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}
.aktivite-etiketi.hikaye { background-color: #11cdef; }
.aktivite-etiketi.oyun { background-color: #fb6340; }
/* --- PERFORMANS DETAYLARI STİLLERİ --- */
.performans-detaylari {
    background: #f7fafd;
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    padding: 25px;
    margin-top: -20px; /* Üstteki kartla birleşmesi için */
    margin-bottom: 30px;
}
.detay-baslik {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--primary-color);
}
.detay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.detay-karti {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    color: white;
}
.detay-karti .deger {
    display: block;
    font-size: 2rem;
    font-weight: 700;
}
.detay-karti .etiket {
    font-size: 0.9rem;
    opacity: 0.9;
}
.detay-karti.dogru { background: var(--success-color); }
.detay-karti.yanlis { background: var(--danger-color); }
.detay-karti.kacan { background: var(--warning-color); }
.seviye-detay {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #8898aa;
}
/* --- HİKAYE FİLTRELEME SİSTEMİ STİLLERİ (YENİ TASARIM) --- */

.filtre-konteyeri {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px; /* Kartlarla arasını açalım */
    background-color: #fff;
    padding: 10px;
    border-radius: 50px; /* Tam yuvarlak kenarlar */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 500px; /* Genişliği sabitleyelim */
    margin-left: auto;
    margin-right: auto;
}

.filtre-buton {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    background-color: transparent;
    color: var(--text-color);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filtre-buton:hover {
    background-color: #f0f3ff; /* Hafif bir hover efekti */
}

/* Aktif butonun stili */
.filtre-buton.aktif {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 15px rgba(94, 114, 228, 0.4);
    transform: scale(1.05);
}
/* --- OKUNAN HİKAYELERİ İŞARETLEME STİLLERİ --- */

.hikaye-karti.okunmus {
    /* Okunmuş kartları biraz soluklaştırarak okunmamışlardan ayıralım */
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.hikaye-karti.okunmus:hover {
    /* Üzerine gelince tekrar netleşsin */
    opacity: 1;
}

.okundu-ikareti {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    height: 35px;
    background-color: var(--success-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 5; /* Zorluk etiketinin önünde dursun */
}
/* --- GÖREV PANELİ YENİ TASARIM STİLLERİ --- */

.gorev-paneli-konteyeri.yeni-tasarim {
    max-width: 900px;
    margin: 30px auto;
}

.panel-karsilama {
    text-align: center;
    margin-bottom: 40px;
}
.panel-karsilama h1 {
    font-size: 2.5rem;
    font-weight: 700;
}
.panel-karsilama p {
    font-size: 1.2rem;
    color: #525f7f;
}

.gorev-listesi-yeni {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Kartlar arası boşluk */
}

.gorev-karti-yeni {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gorev-karti-yeni:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.gorev-sira {
    position: absolute;
    top: -15px;
    left: 20px;
    background: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 4px solid #fff;
}

.gorev-ikonu-yeni {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    flex-shrink: 0;
    margin-left: 50px; /* Sıra numarası için boşluk */
    margin-right: 20px;
}
.gorev-ikonu-yeni.isinma { background: linear-gradient(135deg, #fb6340, #fbb140); }
.gorev-ikonu-yeni.hikaye { background: linear-gradient(135deg, #11cdef, #1171ef); }
.gorev-ikonu-yeni.oyun { background: linear-gradient(135deg, #5e72e4, #825ee4); }

.gorev-detay-yeni { flex-grow: 1; text-align: left; }
.gorev-detay-yeni h3 { margin: 0 0 5px; font-size: 1.3rem; }
.gorev-detay-yeni p { margin: 0; color: #8898aa; }

.gorev-buton-yeni { margin-left: auto; padding-left: 20px; }
.gorev-karti-yeni.tamamlandi {
    background: #f6fdf9;
    border-left: 6px solid var(--success-color);
}
.gorev-karti-yeni.tamamlandi .gorev-sira { background: var(--success-color); }
.gorev-karti-yeni.kilitli {
    opacity: 0.6;
    background: #f6f9fc;
    pointer-events: none; /* Kilitli karta tıklamayı engelle */
}
.gorev-karti-yeni.kilitli .gorev-buton-yeni a { display: none; } /* Kilitliyken butonu gizle */
.kilit-ikareti { font-size: 2.5rem; color: #8898aa; cursor: help; }
.tamamlandi-isareti { font-weight: 700; color: var(--success-color); font-size: 1.2rem; }
.profil-istatistikler {
    display: flex;
    justify-content: center;
    gap: 20px; /* gap 30'dan 20'ye düşürüldü */
    text-align: center;
    flex-wrap: wrap; /* YENİ EKLENDİ - küçük ekranlarda kartların alta kaymasını sağlar */
}
.stat-karti {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    min-width: 150px; /* Kartların çok küçülmesini engelle */
}
/* --- ANİMASYONLU KONTROL PANELİ İSTATİSTİKLERİ (DÜZELTİLMİŞ) --- */
.hizli-istatistikler { display: flex; gap: 20px; }
.istatistik-karti-yeni { display: flex; align-items: center; background: #fff; padding: 15px 25px; border-radius: 12px; border: 1px solid #e9ecef; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.istatistik-karti-yeni i { font-size: 2rem; margin-right: 15px; padding: 12px; border-radius: 50%; color: white; }
.istatistik-karti-yeni.puan i { background: linear-gradient(135deg, #fceb9a, #ffc107); }
.istatistik-karti-yeni.seri i { background: linear-gradient(135deg, #f5365c, #f56036); }
.sayac-konteyeri { text-align: left; }
.sayac-etiket { font-size: 0.9rem; color: #8898aa; font-weight: 500; }

.sayac-deger {
    display: flex;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

/* Her bir rakamın görüneceği pencere */
.rakam-kutusu {
    height: 38px; /* Her rakamın yüksekliğini sabitliyoruz */
    overflow: hidden; /* Dışarı taşan rakamları gizliyoruz */
    display: inline-block;
}

/* 0'dan 9'a tüm rakamları içeren dikey şerit */
.rakam-seridi {
    display: flex;
    flex-direction: column; /* Rakamları alt alta diz */
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1); /* Yumuşak animasyon */
}

/* Şeridin içindeki her bir rakam */
.rakam-seridi span {
    height: 38px; /* Yüksekliği pencereyle aynı yap */
    display: flex;
    align-items: center;
    justify-content: center;
}/* --- ANİMASYONLU KONTROL PANELİ İSTATİSTİKLERİ (DÜZELTİLMİŞ) --- */
.hizli-istatistikler { display: flex; gap: 20px; }
.istatistik-karti-yeni { display: flex; align-items: center; background: #fff; padding: 15px 25px; border-radius: 12px; border: 1px solid #e9ecef; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.istatistik-karti-yeni i { font-size: 2rem; margin-right: 15px; padding: 12px; border-radius: 50%; color: white; }
.istatistik-karti-yeni.puan i { background: linear-gradient(135deg, #fceb9a, #ffc107); }
.istatistik-karti-yeni.seri i { background: linear-gradient(135deg, #f5365c, #f56036); }
.sayac-konteyeri { text-align: left; }
.sayac-etiket { font-size: 0.9rem; color: #8898aa; font-weight: 500; }

.sayac-deger {
    display: flex;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

/* Her bir rakamın görüneceği pencere */
.rakam-kutusu {
    height: 38px; /* Her rakamın yüksekliğini sabitliyoruz */
    overflow: hidden; /* Dışarı taşan rakamları gizliyoruz */
    display: inline-block;
}

/* 0'dan 9'a tüm rakamları içeren dikey şerit */
.rakam-seridi {
    display: flex;
    flex-direction: column; /* Rakamları alt alta diz */
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1); /* Yumuşak animasyon */
}

/* Şeridin içindeki her bir rakam */
.rakam-seridi span {
    height: 38px; /* Yüksekliği pencereyle aynı yap */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ==========================================================================
   3. KONTROL PANELİ (ANA SAYFA)
   ========================================================================== */
.kontrol-paneli-konteyeri { 
    max-width: 1000px; 
    margin: 30px auto; 
}

.panel-ust-bolum { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: #fff; 
    padding: 30px; 
    border-radius: 16px; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.05); 
    margin-bottom: 30px; 
}
.karsilama-metni h1 { 
    margin: 0 0 5px; 
    font-size: 2.2rem; 
}
.karsilama-metni p { 
    margin: 0; 
    font-size: 1.1rem; 
    color: #8898aa; 
}

/* --- Animasyonlu Sayaç Stilleri --- */
.hizli-istatistikler { 
    display: flex; 
    gap: 15px; 
}
.istatistik-karti-yeni { 
    display: flex; 
    align-items: center; 
    padding: 10px 20px; 
    border-radius: 50px; 
    font-weight: 600; 
    font-size: 1rem; 
}
.istatistik-karti-yeni i { 
    font-size: 1.3rem; 
    margin-right: 10px; 
}
.istatistik-karti-yeni.puan { 
    background: #fff8e1; 
    color: #ffc107; 
}
.istatistik-karti-yeni.seri { 
    background: #fff0f1; 
    color: #f5365c; 
}
.sayac-konteyeri { 
    text-align: left; 
}
.sayac-deger { 
    font-size: 1.5rem; 
    font-weight: 700; 
    color: var(--text-color); 
}
.sayac-etiket { 
    font-size: 0.9rem; 
    color: #8898aa; 
    font-weight: 500; 
}

/* --- Görev Kartları Stilleri --- */
.panel-kart-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 25px; 
}
.panel-kart { 
    background: #fff; 
    border-radius: 16px; 
    padding: 25px; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.08); 
    transition: all 0.3s ease; 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
    color: var(--text-color); 
}
.panel-kart:hover { 
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 12px 35px rgba(0,0,0,0.1); 
}
.panel-kart.oncelikli { 
    grid-column: 1 / -1; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
}
.panel-kart.oncelikli p { 
    color: rgba(255,255,255,0.8); 
}
.kart-ikon { 
    width: 60px; 
    height: 60px; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 2rem; 
    color: #fff; 
    flex-shrink: 0; 
    margin-right: 20px; 
}
.panel-kart.oncelikli .kart-ikon { 
    background: rgba(255,255,255,0.2); 
}
.panel-kart.modül .kart-ikon.hikaye { 
    background: #11cdef; 
}
.panel-kart.modül .kart-ikon.oyun { 
    background: var(--warning-color); 
}
.panel-kart.modül .kart-ikon.profil { 
    background: #2dce89; 
}
.kart-detay { 
    text-align: left; 
}
.kart-detay h3 { 
    margin: 0 0 5px; 
    font-size: 1.3rem; 
}
.kart-detay p { 
    margin: 0; 
    color: #8898aa; 
}
.kart-buton { 
    margin-left: auto; 
    padding-left: 20px; 
}
.kart-buton .tamamlandi-isareti { 
    font-weight: 700; 
    color: #fff; 
    background: rgba(255,255,255,0.3); 
    padding: 8px 15px; 
    border-radius: 30px; 
}
.panel-kart.kilitli { 
    opacity: 0.5; 
    pointer-events: none; 
    position: relative; 
}
.kilit-ikareti-yeni { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 3rem; 
    color: rgba(0,0,0,0.3); 
}/* ... (diğer tüm panel stilleri aynı kalıyor) ... */

/* Kilitli kartların genel stilini güncelleyelim */
.panel-kart.modül.kilitli {
    pointer-events: none; /* Üzerindeki linklerin tıklanmasını engelle */
    position: relative; /* Kilit katmanını konumlandırmak için */
}

/* YENİ: Kilit Katmanı Stili */
.kilit-katmani {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(246, 249, 252, 0.8); /* Yarı saydam beyaz arka plan */
    backdrop-filter: blur(4px); /* Arka planı hafifçe bulanıklaştır (modern tarayıcılar için) */
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px; /* Ana kart ile aynı yuvarlaklık */
    z-index: 2; /* Diğer içeriğin üzerinde dursun */
}

/* Kilit İkonunun stilini güncelleyelim */
.kilit-ikareti-yeni {
    font-size: 3rem;
    color: var(--text-color);
    opacity: 0.5;
    cursor: not-allowed; /* "Tıklanamaz" imleci göster */
}/* --- SERİ DONDURMA UYARI PANELİ STİLLERİ --- */
.seri-dondurma-uyari {
    background: linear-gradient(135deg, #f5365c, #f56036);
    color: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(245, 54, 92, 0.4);
}
.uyari-ikon { font-size: 3rem; margin-right: 25px; }
.uyari-metin h4 { margin: 0 0 5px; font-size: 1.4rem; }
.uyari-metin p { margin: 0; opacity: 0.9; }
.uyari-buton { margin-left: auto; text-align: center; }
.uyari-buton button { background-color: #fff; color: var(--danger-color); font-weight: 700; }
.uyari-buton button:disabled { background-color: #ccc; color: #666; cursor: not-allowed; }
.uyari-buton small { display: block; margin-top: 5px; color: rgba(255,255,255,0.8); }
/* --- AŞAMA 10: KİŞİSELLEŞTİRİLMİŞ ÖNERİ SİSTEMİ STİLLERİ --- */

.oneri-bolumu {
    margin-top: 40px;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
}
.oneri-bolumu h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 0;
}
.oneri-bolumu p {
    font-size: 1.1rem;
    color: #525f7f;
    max-width: 600px;
    margin: 10px auto 30px;
}
.oneri-kart-listesi {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}
.oneri-karti {
    background-color: var(--secondary-color);
    border-radius: 12px;
    padding: 20px;
    width: 200px;
    text-decoration: none;
    color: var(--text-color);
    border: 1px solid var(--light-gray);
    transition: all 0.3s ease;
}
.oneri-karti:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}
.oneri-ikon {
    font-size: 3rem;
    line-height: 1;
}
.oneri-isim {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 15px;
}
/* --- YENİ EBEVEYN PANELİ STİLLERİ --- */
.ebeveyn-paneli-konteyeri { max-width: 1200px; margin: 20px auto; }

.panel-baslik {
    padding: 20px;
    background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(94, 114, 228, 0.3);
}
.panel-baslik h1 { margin: 0; font-size: 2rem; }
.panel-baslik p { margin: 5px 0 0; opacity: 0.8; }

.kart { background: #fff; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.07); margin-bottom: 30px; }
.kart-baslik { padding: 15px 25px; border-bottom: 1px solid #e3e6f0; }
.kart-baslik h3 { margin: 0; font-size: 1.2rem; color: var(--primary-color); }
.kart-govde { padding: 25px; }
.panel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.buyuk-kart .karne-govde { display: flex; gap: 30px; }
.karne-sutun { flex: 1; }
.karne-sutun h4 { margin-top: 0; border-bottom: 2px solid var(--light-gray); padding-bottom: 10px; margin-bottom: 15px; }
.karne-veri { display: flex; justify-content: space-between; padding: 8px 0; font-size: 1rem; }
.karne-veri strong { font-weight: 700; }
.karne-veri strong.hiz { color: #5e72e4; }
.karne-veri strong.anlama { color: #2dce89; }
.yorum-alani { background: #f6f9fc; padding: 20px; border-radius: 8px; }
.yorum-alani i { font-size: 1.5rem; color: #e3e6f0; float: left; margin-right: 10px; }
.yorum-alani p { margin: 0; font-style: italic; color: #525f7f; }
.tablo-konteyeri { max-height: 400px; overflow-y: auto; }
table { width: 100%;  }
/* ==========================================================================
   MOBİL UYUMLULUK STİLLERİ (768px ve altı)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- Genel Düzenlemeler --- */
    main {
        padding: 15px; /* Kenar boşluklarını azalt */
    }

    body {
        font-size: 15px; /* Mobil için okunabilirliği artır */
    }

    h1 {
        font-size: 1.8rem; /* Başlıkları küçült */
    }

    /* --- Header ve Navigasyon --- */
    nav {
        flex-direction: column; /* Logo ve menüyü alt alta getir */
        align-items: flex-start; /* Sola hizala */
        gap: 10px;
    }

    nav ul {
        flex-direction: column; /* Menü maddelerini alt alta diz */
        width: 100%; /* Menüyü tam genişliğe yay */
        gap: 5px;
    }

    nav ul li a {
        padding: 10px 5px; /* İç boşlukları ayarla */
        width: 100%;
        display: block; /* Tıklama alanını genişlet */
        box-sizing: border-box;
    }

    /* --- Grid ve Kart Yapıları --- */
    .hikaye-listesi,
    .oyun-listesi,
    .panel-kart-grid,
    .rozetler-konteyeri {
        grid-template-columns: 1fr; /* Tüm gridleri tek sütuna düşür */
        gap: 20px;
    }

    /* --- Flex Yapıları --- */
    .profil-istatistikler,
    .panel-ust-bolum {
        flex-direction: column; /* İstatistik kartlarını alt alta getir */
        gap: 15px;
        align-items: stretch; /* Öğeleri tam genişliğe yay */
    }
    
    .karsilama-metni {
        text-align: center;
    }
    
    .hizli-istatistikler {
        justify-content: center;
    }

    /* --- Ebeveyn Paneli --- */
    .panel-grid {
        grid-template-columns: 1fr; /* Paneli tek sütuna düşür */
    }
    .buyuk-kart .karne-govde {
        flex-direction: column; /* Karne sütunlarını alt alta getir */
    }
    
    /* --- Oyun Sahnesi --- */
    #oyun-alani {
        min-height: 350px;
    }
    .eslestirme-konteyneri {
        flex-direction: column; /* Eşleştirme sütunlarını alt alta getir */
        gap: 15px;
    }
    .eslestirme-sutun {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Sonuç Ekranı --- */
    .sonuc-paneli-yeni {
        grid-template-columns: 1fr; /* Sonuç kartlarını tek sütun yap */
    }

}
/* ==========================================================================
   MOBİL UYUMLULUK VE HAMBURGER MENÜ STİLLERİ
   ========================================================================== */

/* Hamburger Menü Butonu (Masaüstünde Gizli) */
#mobil-menu-buton {
    display: none; /* Masaüstünde butonu gizle */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Diğer her şeyin üzerinde kalsın */
}

#mobil-menu-buton span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* Mobil ve Tablet Görünümü (768px ve altı) */
@media (max-width: 768px) {
    /* Masaüstü menüyü gizle */
    nav ul#ana-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px; /* Header yüksekliği kadar aşağıdan başla */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* Menü açıldığında görünecek hali (JS ile eklenecek class) */
    nav ul#ana-menu.mobil-menu-acik {
        display: flex;
    }

    /* Mobil menüdeki linkler */
    nav ul#ana-menu li {
        width: 100%;
        text-align: center;
    }

    nav ul#ana-menu li a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid var(--light-gray);
    }
    
    /* Hamburger butonunu göster */
    #mobil-menu-buton {
        display: block;
    }

    /* Animasyonlu X ikonu için */
    #mobil-menu-buton.aktif span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #mobil-menu-buton.aktif span:nth-child(2) {
        opacity: 0;
    }
    #mobil-menu-buton.aktif span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}
/* ==========================================================================
   RESPONSIVE (MOBİL UYUMLU) YAZI BOYUTLARI
   ========================================================================== */

/* Bu kod bloğu, ekran 768 pikselden (tipik tablet genişliği) daha dar olduğunda devreye girer. */
@media (max-width: 768px) {
    /*
     * TEMEL YAKLAŞIM: Ana HTML etiketinin yazı boyutunu küçültüyoruz.
     * Bu, 'rem' birimiyle tanımlanmış tüm yazı boyutlarını orantılı olarak küçülten
     * çok etkili bir yöntemdir. (Normalde 16px'dir)
    */
    html {
        font-size: 15px;
    }

    /* Genel Başlıklar */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }

    /* Ana Sayfa Kahraman Bölümü */
    .kahraman-bolumu h1 { font-size: 2.2rem; }
    .kahraman-bolumu p { font-size: 1.1rem; }

    /* Hikaye Okuma Sahnesi */
    .okuma-sahnesi-konteyeri h1 { font-size: 1.8rem; }
    #metin-penceresi {
        font-size: 1.2rem; /* Hikaye metni */
        line-height: 1.7;
        min-height: 200px;
    }

    /* Oyun Sahnesi ve Oyun İçerikleri */
    .oyun-sahnesi-baslik h1 { font-size: 1.8rem; }
    #oyun-alani { min-height: 350px; }
    .geri-sayim { font-size: 6rem; }
    
    .kelime-avcisi-hedef { font-size: 2rem; }
    .anlam-bulutu-secenek { font-size: 1.2rem; padding: 12px 20px; }
    .cumle-govdesi { font-size: 1.5rem; }
    .kelime-secenek { font-size: 1.2rem; padding: 12px 25px; }
    .metin-gosterim-alani { font-size: 1.5rem; min-height: 120px; }
    .soru-alani { font-size: 1.2rem; }
    #piramit-alani, #piramit-alani-egzersiz { font-size: 1.5rem; }
    #satir-takip-alani { font-size: 1.4rem; line-height: 2.2; }

    /* Sonuç Ekranı */
    .sonuc-karti-yeni .deger { font-size: 2.4rem; }
    .sonuc-paneli-yeni { grid-template-columns: 1fr; gap: 15px; } /* Kartları alt alta diz */
}


/* Bu kod bloğu, ekran 480 pikselden (tipik telefon genişliği) daha dar olduğunda devreye girer. */
@media (max-width: 480px) {
    html {
        font-size: 14px; /* Yazıları biraz daha küçültelim */
    }

    /* Başlıkları ve butonları küçük ekran için tekrar ayarla */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    .buyuk-buton { padding: 12px 24px; font-size: 1rem; }
    .buton { padding: 8px 16px; font-size: 0.9rem; }
    
    main { padding: 15px 10px; }
    .form-konteyeri { padding: 20px; }

    /* Hikaye Okuma Sahnesi */
    #metin-penceresi {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    /* Oyun Sahnesi ve Oyun İçerikleri */
    .kelime-avcisi-hedef { font-size: 1.5rem; padding: 8px 15px; }
    .cumle-govdesi { font-size: 1.2rem; }
    #piramit-alani, #piramit-alani-egzersiz { font-size: 1.2rem; }
    #satir-takip-alani { font-size: 1.2rem; }
    .resim-secenek { width: 120px; height: 120px; } /* Hafıza kartı resimleri */

    /* Panel Kartları */
    .panel-ust-bolum { flex-direction: column; gap: 20px; }
    .panel-kart-grid { grid-template-columns: 1fr; }

    /* Ebeveyn Paneli */
    .panel-grid { grid-template-columns: 1fr; }
    .buyuk-kart .karne-govde { flex-direction: column; }
}
/* ... (Mevcut CSS kodlarınız burada) ... */

/* ==========================================================================
   YENİ EKLENDİ: MOBİL UYUMLULUK (RESPONSIVE) STİLLERİ
   ========================================================================== */
.menu-toggle {
    display: none; /* Varsayılan olarak gizli */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}
.menu-toggle span {
    width: 30px;
    height: 3px;
    background: var(--text-color);
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* 992px'den küçük ekranlar için */
@media (max-width: 992px) {
    /* Genel Panel Düzenlemeleri */
    .panel-grid {
        grid-template-columns: 1fr; /* Becerileri ve karneyi alt alta sırala */
    }
    .buyuk-kart .karne-govde {
        flex-direction: column;
    }
}


/* 768px'den küçük ekranlar için (Tabletler ve Telefonlar) */
@media (max-width: 768px) {
    /* Hamburger menüyü göster */
    .menu-toggle {
        display: flex;
    }

    /* Navigasyon menüsünü gizle ve mobil için hazırla */
    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    nav ul.aktif {
        display: flex;
    }
    nav ul li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--light-gray);
    }

    /* Genel Sayfa ve Kart Düzenlemeleri */
    .hikaye-listesi,
    .oyun-listesi,
    .panel-kart-grid {
        grid-template-columns: 1fr; /* Tüm kartları tek sütun yap */
    }

    .sonuc-paneli, .profil-istatistikler, .sonuc-paneli-yeni {
        flex-direction: column;
        grid-template-columns: 1fr; /* Sonuç kartlarını alt alta sırala */
    }

    .panel-ust-bolum, .seri-dondurma-uyari {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .uyari-buton { margin-left: 0; }

    /* Font boyutlarını küçült */
    h1, .panel-karsilama h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    .deger, .sayac-deger { font-size: 2rem; }
    #metin-penceresi { font-size: 1.1rem; }
    
    /* Formları düzenle */
    .form-konteyeri {
        padding: 20px;
    }
}
/* ==========================================================================
   YENİ EKLENDİ: AI KOÇU YORUM KUTUSU STİLLERİ
   ========================================================================== */
.ai-yorum-kutusu {
    background: #f6f9fc;
    border: 2px solid var(--light-gray);
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.1rem;
    color: #525f7f;
}
.ai-yorum-kutusu p {
    margin: 0;
}
.ai-yorum-kutusu strong {
    color: var(--primary-color);
    font-weight: 700;
}
/* ==========================================================================
   TAM EKRAN OKUMA SAHNESİ STİLLERİ
   ========================================================================== */

/* Okuma sahnesi tam ekran moduna girdiğinde uygulanacak stiller */
.okuma-sahnesi-konteyeri:fullscreen {
    background-color: #ffffff; /* Arka planı tamamen beyaz yap */
    padding: 3vw; /* Ekran boyutuna göre orantılı boşluk bırak */
    display: flex; /* İçerikleri esnek bir şekilde ortalamak için */
    flex-direction: column;
    justify-content: center;
}

/* Tam ekranda başlık daha küçük olsun */
.okuma-sahnesi-konteyeri:fullscreen .okuma-sahnesi-baslik h1 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Tam ekranda metin penceresi daha fazla yer kaplasın ve yazı büyüsün */
.okuma-sahnesi-konteyeri:fullscreen #metin-penceresi {
    flex-grow: 1; /* Mevcut alanı dolduracak şekilde esnesin */
    font-size: 2rem; /* Daha büyük ve okunaklı yazı */
    line-height: 1.8;
}

/* Tam ekranda kontrol butonları daha büyük olsun */
.okuma-sahnesi-konteyeri:fullscreen .buyuk-buton,
.okuma-sahnesi-konteyeri:fullscreen .buton.ikincil {
    padding: 20px 40px;
    font-size: 1.5rem;
}
/* ==========================================================================
   TAM EKRAN OYUN SAHNESİ STİLLERİ
   ========================================================================== */

.oyun-sahnesi-konteyeri:fullscreen {
    background-color: #ffffff;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.oyun-sahnesi-konteyeri:fullscreen .oyun-sahnesi-baslik h1 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.oyun-sahnesi-konteyeri:fullscreen #oyun-alani {
    flex-grow: 1; /* Oyun alanının mevcut boşluğu doldurmasını sağlar */
    width: 100%;
    border: none; /* Tam ekranda kenarlığa gerek yok */
    box-shadow: none; /* Tam ekranda gölgeye gerek yok */
}


/* ==========================================================================
   YENİ SONUÇ SAYFASI TASARIMI - GÜNCEL
   ========================================================================== */

.sonuc-konteyeri-yeni {
    max-width: 900px;
    margin: 30px auto;
    background: #fff;
    border-radius: 24px;
    padding: 30px 40px;
    text-align: center;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.sonuc-ust-bolum {
    margin-bottom: 25px;
}

.sonuc-ust-bolum .sonuc-ikon {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 15px;
    display: inline-block;
}

.sonuc-ust-bolum h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
}

.ai-yorum-kutusu {
    background: #f6f9fc;
    border-radius: 12px;
    padding: 20px 25px;
    margin-top: 20px;
    font-size: 1.1rem;
    color: #525f7f;
    border: 1px solid #e9ecef;
}

.ai-yorum-kutusu p { margin: 0; }
.ai-yorum-kutusu strong { color: var(--primary-color); font-weight: 700; }

.sonuc-paneli-yeni {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.sonuc-karti-yeni {
    background: #f7fafd;
    border-radius: 16px;
    padding: 25px 20px;
    border: 1px solid var(--light-gray);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sonuc-karti-yeni:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.07);
}

.sonuc-karti-yeni h3 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #8898aa;
    text-transform: uppercase;
}

.sonuc-karti-yeni .deger {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
}

.sonuc-karti-yeni .birim {
    font-size: 1rem;
    color: #525f7f;
}

.sonuc-aksiyonlari {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--light-gray);
}/* ==========================================================================
   GİRİŞ SAYFASI (LANDING PAGE) ÖZEL STİLLERİ
   ========================================================================== */

/* Ana Kapsayıcı */
.pazarlama-sayfasi {
    width: 100%;
    overflow-x: hidden;
}

/* 1. Hero (Kahraman) Bölümü */
.hero-yeni {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f4f7f6 100%);
    margin-bottom: 40px;
}

.hero-icerik {
    max-width: 800px;
    margin: 0 auto;
}

.hero-icerik h1 {
    font-size: 3rem;
    line-height: 1.2;
    color: var(--text-color);
    margin-bottom: 20px;
}

.hero-aciklama {
    font-size: 1.2rem;
    color: #525f7f;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* 2. Özellikler Bölümü (Grid Yapısı) */
.ozellikler-bolumu-yeni {
    display: grid;
    /* Kartların ekran boyutuna göre otomatik yan yana dizilmesini sağlar */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.ozellik-karti-yeni {
    background: #fff;
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--light-gray);
}

.ozellik-karti-yeni:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* İkon Çerçeveleri */
.ikon-cerceve {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    color: white;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(94, 114, 228, 0.3);
}

.ozellik-karti-yeni h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--text-color);
}

.ozellik-karti-yeni p {
    color: #8898aa;
    font-size: 1rem;
    line-height: 1.5;
}

/* 3. Nasıl Çalışır (Adımlar) Bölümü */
.nasil-calisir-bolumu {
    background-color: #fff;
    padding: 80px 20px;
    text-align: center;
    margin-bottom: 60px;
}

.nasil-calisir-bolumu h2 {
    font-size: 2.2rem;
    margin-bottom: 50px;
    color: var(--primary-color);
}

.adimlar-konteyeri {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.adim-karti {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    position: relative;
}

.adim-numara {
    width: 60px;
    height: 60px;
    background: var(--text-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 20px auto;
    border: 4px solid #f4f5f7;
}

/* 4. Kapanış Çağrısı (CTA) */
.kapanis-cagri-bolumu {
    background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
    color: white;
    text-align: center;
    padding: 80px 20px;
    border-radius: 20px;
    max-width: 1000px;
    margin: 0 auto 60px auto;
    box-shadow: 0 10px 30px rgba(94, 114, 228, 0.4);
}

.kapanis-cagri-bolumu h2 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.kapanis-cagri-bolumu p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.kapanis-cagri-bolumu .buyuk-buton {
    background: white;
    color: var(--primary-color);
    font-size: 1.2rem;
    padding: 15px 40px;
}

.kapanis-cagri-bolumu .buyuk-buton:hover {
    background: #f4f5f7;
    transform: scale(1.05);
}

/* Mobil Uyumluluk Düzeltmeleri */
@media (max-width: 768px) {
    .hero-icerik h1 { font-size: 2.2rem; }
    .ozellikler-bolumu-yeni { grid-template-columns: 1fr; } /* Mobilde tek sütun */
    .adimlar-konteyeri { flex-direction: column; align-items: center; }
    .kapanis-cagri-bolumu h2 { font-size: 1.8rem; }
}

/* ==========================================================================
   1. TEMEL AYARLAR VE DEĞİŞKENLER (RENK PALETİ)
   ========================================================================== */
:root {
    /* -- Ana Gradyanlar (Çocukların Sevdiği Renkler) -- */
    --grad-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Mor-Mavi (Macera) */
    --grad-success: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); /* Yeşil-Mavi (Başarı) */
    --grad-warning: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%); /* Turuncu-Pembe (Dikkat/Oyun) */
    --grad-danger: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); /* Kırmızı-Pembe (Hata/Zor) */
    --grad-gold: linear-gradient(120deg, #f6d365 0%, #fda085 100%); /* Altın (Puan/Ödül) */
    --grad-bg: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); /* Sayfa Arka Planı */

    /* -- Düz Renkler -- */
    --text-dark: #2d3748;
    --text-light: #718096;
    --white: #ffffff;
    --border-radius: 20px; /* Yuvarlak köşeler */
    
    /* -- Font -- */
    --font-family: 'Poppins', sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-image: var(--grad-bg);
    background-attachment: fixed; /* Arka plan sabit kalsın */
    color: var(--text-dark);
    margin: 0;
    line-height: 1.6;
    min-height: 100vh;
}

main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    /* Mobilde alttan boşluk bırak ki footer sıkışmasın */
    padding-bottom: 80px; 
}

/* ==========================================================================
   2. HEADER VE NAVİGASYON (YÜZEN MENÜ)
   ========================================================================== */
header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px); /* Buzlu cam efekti */
    padding: 15px 20px;
    border-radius: 0 0 25px 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 1.6rem;
    font-weight: 800;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    letter-spacing: -1px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

nav ul li a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

nav ul li a:hover, nav ul li a.aktif {
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
    transform: translateY(-2px);
}

/* ==========================================================================
   3. BUTONLAR (ŞEKER GİBİ)
   ========================================================================== */
.buton, .buyuk-buton {
    display: inline-block;
    background: var(--grad-primary);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
}

.buyuk-buton {
    padding: 18px 40px;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

.buton:hover, .buyuk-buton:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.buton:active, .buyuk-buton:active {
    transform: scale(0.95);
}

.buton.ikincil {
    background: white;
    color: var(--text-dark);
    border: 2px solid #e2e8f0;
}

.buton.ikincil:hover {
    border-color: #764ba2;
    color: #764ba2;
}

/* ==========================================================================
   4. KARTLAR VE PANELLER (SÜSLÜ VE YUVARLAK)
   ========================================================================== */
.sayfa-konteyeri, .kontrol-paneli-konteyeri {
    max-width: 1000px;
    margin: 30px auto;
}

/* Genel Kart Yapısı */
.kart, .hikaye-karti, .oyun-karti, .sonuc-karti-yeni, .panel-kart {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Yumuşak gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
}

.kart:hover, .hikaye-karti:hover, .oyun-karti:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* Panel Üst Bölüm (Merhaba, Puan) */
.panel-ust-bolum {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 20px rgba(94, 114, 228, 0.1);
    margin-bottom: 40px;
}

.karsilama-metni h1 {
    margin: 0;
    font-size: 2rem;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* İstatistik Baloncukları (Puan, Seri) */
.hizli-istatistikler {
    display: flex;
    gap: 15px;
}

.istatistik-karti-yeni {
    background: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 2px solid #f0f2f5;
}

.istatistik-karti-yeni.puan i { color: #ffc107; font-size: 1.5rem; margin-right: 10px; }
.istatistik-karti-yeni.seri i { color: #f5365c; font-size: 1.5rem; margin-right: 10px; }
.sayac-deger { font-weight: 800; font-size: 1.4rem; color: var(--text-dark); }
.sayac-etiket { font-size: 0.8rem; color: var(--text-light); margin-left: 5px; }

/* ==========================================================================
   5. GÖREV KARTI (GRADYANLI VE HAVALI)
   ========================================================================== */
.panel-kart.oncelikli {
    background: var(--grad-primary);
    color: white;
    display: flex;
    align-items: center;
    padding: 30px;
    margin-bottom: 40px;
}

.panel-kart.oncelikli h3 { font-size: 1.8rem; margin: 0 0 10px 0; }
.panel-kart.oncelikli p { font-size: 1.1rem; opacity: 0.9; margin: 0; }

.kart-ikon.isinma {
    font-size: 3rem;
    margin-right: 20px;
    background: rgba(255,255,255,0.2);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   6. HİKAYE VE OYUN LİSTELERİ
   ========================================================================== */
.hikaye-grubu h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    border-bottom: 3px solid #e3eeff;
    padding-bottom: 10px;
    display: inline-block;
}

.hikaye-listesi, .oyun-listesi, .panel-kart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.hikaye-karti h3, .oyun-karti h2 {
    font-size: 1.4rem;
    margin: 15px 0;
    color: var(--text-dark);
}

/* Zorluk Etiketleri (Renkli Rozetler) */
.zorluk-etiketi {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 15px;
    border-radius: 20px;
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Senin istediğin seviye renkleri (Gradient'e çevirdim daha şık olsun diye) */
.zorluk-etiketi.seviye-1, .zorluk-etiketi.seviye-2 { background: linear-gradient(45deg, #2dce89, #2dcecc); }
.zorluk-etiketi.seviye-3, .zorluk-etiketi.seviye-4 { background: linear-gradient(45deg, #11cdef, #1171ef); }
.zorluk-etiketi.seviye-5, .zorluk-etiketi.seviye-6 { background: linear-gradient(45deg, #5e72e4, #825ee4); }
.zorluk-etiketi.seviye-7, .zorluk-etiketi.seviye-8 { background: linear-gradient(45deg, #fb6340, #fbb140); }
.zorluk-etiketi.seviye-9, .zorluk-etiketi.seviye-10 { background: linear-gradient(45deg, #f5365c, #f56036); }

/* ==========================================================================
   7. SONUÇ EKRANI VE ÖDÜLLER
   ========================================================================== */
.sonuc-konteyeri.yeni-tasarim {
    background: white;
    padding: 40px;
    border-radius: 30px;
    text-align: center;
    border: 5px solid #f0f3ff;
    max-width: 800px;
    margin: 20px auto;
}

.sonuc-ikon { font-size: 5rem; margin-bottom: 20px; animation: bounce 2s infinite; }
.motivasyon-mesaji { font-size: 1.5rem; color: var(--text-light); }

.ai-yorum-kutusu {
    background: #f8f9fe;
    padding: 20px;
    border-radius: 15px;
    border-left: 5px solid #5e72e4;
    text-align: left;
    margin: 20px 0;
    color: #4a5568;
}

.sonuc-paneli-yeni {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.sonuc-karti-yeni {
    background: linear-gradient(to bottom right, #ffffff, #f3f4f6);
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 20px;
}

.sonuc-karti-yeni .deger {
    font-size: 2.5rem;
    font-weight: 800;
    color: #5e72e4;
}

/* Rozetler */
.rozetler-konteyeri {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.rozet-karti-yeni {
    background: white;
    border: 2px solid #f0f2f5;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 300px;
    transition: transform 0.2s;
}

.rozet-karti-yeni:hover { transform: scale(1.05); border-color: #ffc107; }
.rozet-karti-emoji { font-size: 2.5rem; margin-right: 15px; }

/* ==========================================================================
   8. OYUN ALANI VE OKUMA EKRANI
   ========================================================================== */
#okuma-sahnesi, #oyun-alani {
    background: white;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    text-align: center;
}

#metin-penceresi {
    font-size: 1.8rem;
    line-height: 1.8;
    color: #2d3748;
    padding: 20px;
    background: #fafafa;
    border-radius: 20px;
    margin: 20px 0;
    width: 100%;
}

/* İlerleme Barı */
.ilerleme-bari-dis {
    background: #e9ecef;
    border-radius: 50px;
    height: 25px;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}
#ilerleme-bari-ic {
    background: var(--grad-success);
    height: 100%;
    border-radius: 50px;
    transition: width 0.5s;
}

/* ==========================================================================
   9. MOBİL UYUM (RESPONSIVE) - EN ÖNEMLİ KISIM
   ========================================================================== */
/* Hamburger Menü Butonu */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}
.menu-toggle span {
    width: 30px;
    height: 3px;
    background: var(--text-dark);
    border-radius: 3px;
    transition: 0.3s;
}

@media (max-width: 768px) {
    /* --- Header ve Menü --- */
    .menu-toggle { display: flex; } /* Mobilde butonu göster */
    
    nav ul {
        display: none; /* Varsayılan gizli */
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: white;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-radius: 0 0 20px 20px;
    }
    
    nav ul.aktif { display: flex; } /* JS ile açılınca göster */

    /* --- Genel Düzen --- */
    main { padding: 15px; }
    
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }

    /* --- Panel Kartları Tek Sütun --- */
    .panel-kart-grid, .hikaye-listesi, .oyun-listesi, .sonuc-paneli-yeni {
        grid-template-columns: 1fr; /* Tek sütun */
    }

    .panel-ust-bolum {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .panel-kart.oncelikli {
        flex-direction: column;
        text-align: center;
    }
    
    .kart-ikon.isinma { margin: 0 0 15px 0; }
    .kart-buton { margin-top: 15px; width: 100%; }
    .kart-buton .buton { width: 100%; }

    /* --- Oyun ve Okuma --- */
    #metin-penceresi { font-size: 1.4rem; }
    .buyuk-buton { width: 100%; padding: 15px; font-size: 1.1rem; }

    /* --- İstatistikler --- */
    .hizli-istatistikler {
        width: 100%;
        justify-content: center;
    }
}

/* Animasyonlar */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}
/* --- PROFİL SAYFASI AVATAR DÜZENLEMESİ --- */

.profil-karsilama {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    position: relative;
}

/* Avatar Resminin Kendisi */
.profil-karsilama .avatar {
    width: 180px;          /* Sabit Genişlik */
    height: 180px;         /* Sabit Yükseklik */
    border-radius: 50%;    /* Tam Yuvarlak */
    border: 6px solid #fff; /* Beyaz Kalın Çerçeve */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Gölge */
    background-color: #eef2ff; /* SVG arkasına hafif renk */
    object-fit: cover;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Üzerine gelince efekt */
.profil-karsilama .avatar:hover {
    transform: scale(1.05) rotate(3deg); /* Hafif büyüme ve dönme */
    border-color: #5e72e4; /* Çerçeve rengi değişsin */
    box-shadow: 0 15px 40px rgba(94, 114, 228, 0.3);
}

/* "Avatarını Değiştir" Linki */
.avatar-link {
    display: inline-block;
    position: relative;
}

/* İsteğe bağlı: Resmin üzerine gelince "Değiştir" ikonu çıkartmak için */
.avatar-link::after {
    content: '✏️';
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-size: 1.2rem;
    border: 2px solid #e9ecef;
}
/* ==========================================================================
   LİDERLİK WIDGET STİLLERİ (ANASAYFA İÇİN)
   ========================================================================== */
.liderlik-widget {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
}
.widget-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f2f5;
    padding-bottom: 10px;
}
.widget-baslik h3 { margin: 0; font-size: 1.2rem; color: var(--text-dark); }
.tumu-link { text-decoration: none; color: var(--primary-color); font-weight: 700; font-size: 0.9rem; }

.lider-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: #f8f9fa;
    transition: transform 0.2s;
}
.lider-satir.benim {
    background: linear-gradient(90deg, #e3f2fd, #ffffff);
    border: 1px solid #bbdefb;
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.lider-sol { display: flex; align-items: center; gap: 10px; }
.sira-no { font-size: 1.2rem; font-weight: bold; width: 25px; text-align: center; }
.lider-avatar { width: 35px; height: 35px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.lider-isim { font-weight: 600; color: var(--text-dark); font-size: 0.95rem; }
.lider-puan { font-weight: 800; color: #f1c40f; font-size: 0.9rem; }

/* ==========================================================================
   MOBİL UYGULAMA MODU (APP MODE) - KESİN DÜZELTME
   ========================================================================== */

/* 1. VARSAYILAN OLARAK HER YERDE GİZLE (MASAÜSTÜ DAHİL) */
.bottom-nav, 
.nav-item-orta-wrapper { 
    display: none !important; 
}

@media (max-width: 768px) {
    #ana-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 9998;
        padding: 20px;
    }

    #ana-menu.aktif {
        display: flex;
    }
}
    /* Sayfa Yapısını Uygulama Gibi Yap */
    body {
        background: #f4f6f9;
        padding-bottom: 90px; /* Alt menü için boşluk */
        overscroll-behavior-y: none;
    }
    
    main {
        padding: 15px;
        padding-top: 20px;
        max-width: 100%;
    }
    
    /* Alt Navigasyon Barını GÖRÜNÜR Yap */
    .bottom-nav {
        display: grid !important; /* Grid sistemini zorla aç */
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 75px;
        background: #ffffff;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.08);
        align-items: center;
        z-index: 9999;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        padding-bottom: 5px;
    }

    .nav-item-orta-wrapper {
        display: flex !important; /* Orta butonu zorla aç */
        justify-content: center;
        align-items: flex-start;
        height: 100%;
        position: relative;
    }

    /* İkon ve Yazı Stilleri */
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #a0aec0;
        font-size: 0.7rem;
        font-weight: 600;
        transition: all 0.3s ease;
        height: 100%;
    }

    .nav-item i {
        font-size: 1.6rem;
        margin-bottom: 4px;
        transition: all 0.3s ease;
    }

    .nav-item.aktif {
        color: var(--primary-color);
    }
    
    .nav-item.aktif i {
        transform: translateY(-5px);
        filter: drop-shadow(0 5px 10px rgba(94, 114, 228, 0.3));
    }

    /* Orta Yuvarlak Buton */
    .nav-item-orta {
        position: absolute;
        top: -25px;
        width: 65px;
        height: 65px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: 0 8px 25px rgba(118, 75, 162, 0.4);
        border: 5px solid #f4f6f9;
        transition: transform 0.2s;
        text-decoration: none;
    }
    
    .nav-item-orta i {
        font-size: 2rem;
        color: white;
    }
    
    .nav-item-orta:active {
        transform: scale(0.90);
    }
}
    /* 5. Kartları ve Listeleri Mobilde Rahatlat */
    .lider-satir { padding: 12px; }
    .sira-no { font-size: 1.3rem; }
    .lider-isim { font-size: 1rem; }
    
    /* Panel Üst Bölümü Sıkışmasın */
    .panel-ust-bolum {
        padding: 20px;
        border-radius: 0 0 25px 25px; /* Sadece altları yuvarla */
        margin: -20px -15px 25px -15px; /* Ekranın en tepesine yapıştır */
        background: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
}/* ==========================================================================
   MOBİL OYUN ALANI TAŞMA KORUMASI (OVERFLOW FIX)
   ========================================================================== */

/* 1. Oyun Alanını Sınırla */
#oyun-alani {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Dışarı taşan her şeyi gizle/kes */
    position: relative; /* İçindeki hareketli öğeler buna göre konumlanacak */
    box-sizing: border-box;
}

/* 2. Metinleri Kır (Satıra Sığdır) */
#oyun-alani p, 
#oyun-alani div, 
#oyun-alani span,
#metin-penceresi,
.cumle-govdesi,
.soru-alani {
    overflow-wrap: break-word; /* Uzun kelimeleri böl */
    word-wrap: break-word;     /* Eski tarayıcılar için */
    word-break: break-word;    /* Kelime sığmazsa aşağı at */
    hyphens: auto;             /* Tireleme yap */
    max-width: 100%;           /* Genişlik asla %100'ü geçmesin */
}

/* 3. Kelime Avcısı / Sayı Avcısı (Uçan Nesneler) */
.kelime-avcisi-hedef {
    max-width: 90vw; /* Ekran genişliğinin %90'ını geçemesin */
    white-space: normal; /* Gerekirse alt satıra geçsin */
    font-size: clamp(1rem, 5vw, 2.5rem) !important; /* Yazı boyutunu ekrana göre otomatik küçült */
    padding: 8px 12px !important;
    box-sizing: border-box;
}

/* 4. Anlam Bulutu / Quiz Seçenekleri (Kutu Kutu Olanlar) */
.anlam-bulutu-secenek, 
.kelime-secenek, 
.quiz-secenek {
    width: 100%;           /* Mobilde tam genişlik */
    max-width: 100%;       /* Taşmayı önle */
    white-space: normal;   /* İçindeki yazı alt satıra geçebilsin */
    margin: 5px 0 !important; /* Dikey boşluk */
    font-size: 1.1rem !important; /* Mobilde fontu biraz dengele */
    box-sizing: border-box;
}

/* 5. Resimler (Hafıza Kartı vb.) */
#oyun-alani img {
    max-width: 100%;
    height: auto;
}

/* MOBİL ÖZEL AYARLAR (768px Altı) */
@media (max-width: 768px) {
    #oyun-alani {
        padding: 10px; /* Kenar boşluklarını azalt */
        min-height: 60vh; /* Yüksekliği ekranla orantıla */
    }

    /* Eşleştirme Oyunu (Match Up) Mobilde Sığdırma */
    .eslestirme-konteyneri {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .eslestirme-oge {
        font-size: 0.9rem;
        padding: 8px;
        word-break: break-all; /* Çok uzun kelime varsa kır */
    }

    /* Font Boyutlarını Küçült */
    .cumle-govdesi { font-size: 1.2rem !important; }
    .metin-gosterim-alani { font-size: 1.3rem !important; }
}/* ==========================================================================
   PİRAMİT OYUNU MOBİL TAŞMA DÜZELTMESİ (KESİN ÇÖZÜM)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. Piramit Alanını Esnek Yap */
    #piramit-alani, 
    #piramit-alani-egzersiz {
        white-space: normal !important; /* "Satırı kırma" kuralını iptal et */
        font-size: 1.2rem !important;   /* Yazı boyutunu mobilde küçült (2rem çok büyük) */
        line-height: 1.6 !important;    /* Satır aralarını düzelt */
        width: 100% !important;         /* Genişlik ekranı geçmesin */
        max-width: 100% !important;
        padding: 0 10px;                /* Kenarlardan boşluk bırak */
        
        /* İçeriği ortala */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* 2. Satırları Düzenle */
    .piramit-satiri {
        width: 100%;
        text-align: center;       /* Yazıyı ortala */
        word-wrap: break-word;    /* Uzun kelimeler taşarsa böl */
        overflow-wrap: break-word;
    }

    /* 3. Odaklanılan Harfi (Kırmızı Harf) Belirginleştir */
    .piramit-odak {
        font-weight: 800;
        font-size: 1.4rem; /* Mobilde odak harfi biraz daha büyük olsun */
    }
}
/* ==========================================================================
   MOBİL PROFİL TASARIMI (2x2 Grid Sistemi)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Profil Başlığı */
    .profil-karsilama {
        margin-top: 10px;
        margin-bottom: 15px;
        padding: 15px;
        background: white;
        border-radius: 0 0 25px 25px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }
    .profil-karsilama .avatar {
        width: 100px;
        height: 100px;
        border: 3px solid #fff;
        box-shadow: 0 5px 15px rgba(94, 114, 228, 0.2);
    }
    .profil-karsilama h1 { font-size: 1.6rem; margin-top: 10px; margin-bottom: 0; }
    .profil-karsilama p { font-size: 0.9rem; margin-top: 0; }

    /* 2. İstatistikler: 2 Sütunlu Izgara (2x2) */
    .profil-istatistikler {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 Eşit Sütun */
        gap: 15px;
        padding: 0 20px 20px 20px;
        overflow: visible; /* Kaydırmayı kapat */
    }

    .stat-karti {
        min-width: auto; /* Genişlik serbest */
        padding: 15px;
        border-radius: 18px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        background: #fff;
        border: 1px solid #f0f2f5;
        text-align: center;
    }
    
    .stat-karti h3 { font-size: 0.85rem; color: #8898aa; margin: 0; font-weight: 600; }
    .stat-karti .deger { font-size: 1.6rem; margin: 5px 0; }
    .stat-karti .birim { font-size: 0.75rem; color: #adb5bd; }

    /* 3. Son Maceran Kartı */
    .kart {
        margin: 0 20px 20px 20px;
        border-radius: 20px;
        padding: 0;
    }
    .kart-baslik { padding: 15px; font-size: 1rem; }
    .kart-govde { padding: 15px; font-size: 0.95rem; }

    /* 4. Rozet Galerisi: 2 Sütunlu (2x2) */
    .rozet-galerisi {
        padding: 0 20px 20px 20px;
        background: transparent;
        border: none;
    }
    .rozet-galerisi h2 { 
        text-align: left; 
        font-size: 1.2rem; 
        margin: 0 0 15px 0; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
    }
    
    .rozetler-konteyeri {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 Yan yana */
        gap: 15px;
    }

    .rozet-karti-yeni {
        flex-direction: column;
        text-align: center;
        padding: 15px 10px;
        border-radius: 18px;
        width: 100%;
        max-width: 100%;
    }
    
    .rozet-karti-cerceve { margin: 0 auto 8px auto; width: 50px; height: 50px; }
    .rozet-karti-emoji { font-size: 1.8rem; }
    .rozet-karti-isim { font-size: 0.85rem; margin-bottom: 0; line-height: 1.2; height: 2.4em; overflow: hidden; }
    .rozet-karti-aciklama { display: none; }

    /* 5. Aksiyon Butonları */
    .profil-aksiyonlari {
        flex-direction: column;
        padding: 0 20px 30px 20px;
        gap: 10px;
    }
    
    .profil-aksiyonlari .buton, 
    .profil-aksiyonlari .buyuk-buton {
        width: 100%;
        padding: 12px;
        border-radius: 12px;
        font-size: 1rem;
    }
}
/* Seri Kurtarma Kartı */
.seri-kurtarma-karti {
    background: linear-gradient(135deg, #36b9cc 0%, #258391 100%); /* Buz Mavisi */
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    box-shadow: 0 10px 20px rgba(54, 185, 204, 0.3);
    border: 2px solid #fff;
}

.seri-sol { display: flex; align-items: center; gap: 15px; }
.buz-ikonu { font-size: 3rem; animation: shake 3s infinite; }
.seri-metin h3 { margin: 0 0 5px 0; font-size: 1.3rem; }
.seri-metin p { margin: 0; font-size: 0.95rem; opacity: 0.9; }

.buton-kurtar {
    background: #ff6b6b;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.buton-kurtar:hover { transform: scale(1.05); background: #ff5252; }
.bedel-etiket { font-size: 0.8rem; font-weight: 400; opacity: 0.9; margin-top: 2px; }

@media (max-width: 768px) {
    .seri-kurtarma-karti { flex-direction: column; text-align: center; gap: 20px; }
    .seri-sol { flex-direction: column; }
    .seri-sag { width: 100%; }
    .buton-kurtar { width: 100%; }
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}
/* ==========================================================================
   MOBİL MENÜ DÜZELTMESİ (KESİN ÇÖZÜM)
   ========================================================================== */

/* 1. Hamburger Menü Butonunu Varsayılan Olarak Gizle (Masaüstü İçin) */
.menu-toggle {
    display: none;
}

/* 2. Sadece Mobil ve Tablette (768px Altı) Çalışacak Kurallar */
@media (max-width: 768px) {
    
    /* Header'ı Sabitle ve Görünür Yap */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        padding: 0;
        background: #ffffff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* Navigasyon Çubuğu */
    nav {
        display: flex;
        justify-content: space-between; /* Logo solda, buton sağda */
        align-items: center;
        padding: 15px 20px;
        position: relative;
    }

    /* Logo */
    .logo {
        z-index: 10001; /* Menü açılsa bile logo tıklanabilsin */
    }

    /* Hamburger Menü Butonunu GÖRÜNÜR Yap */
    .menu-toggle {
        display: flex !important; /* Önceki 'none'u ezmek için !important */
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10001; /* Menünün üzerinde kalsın */
        padding: 0;
    }

    /* Çizgilerin Stili */
    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #333; /* Siyah renk */
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* Menü Listesi (Başlangıçta GİZLİ) */
    nav ul#ana-menu {
        display: none; /* Gizli */
        flex-direction: column;
        position: fixed;
        top: 60px; /* Header yüksekliği kadar aşağıdan başla */
        left: 0;
        width: 100%;
        height: auto;
        background-color: #ffffff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        padding: 20px;
        border-top: 1px solid #f0f0f0;
        z-index: 10000;
    }

    /* Menü 'aktif' sınıfı aldığında GÖRÜNÜR olsun */
    nav ul#ana-menu.aktif {
        display: flex !important;
    }

    /* Linklerin Düzeni */
    nav ul#ana-menu li {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        list-style: none;
    }

    nav ul#ana-menu li a {
        display: block;
        padding: 10px;
        width: 100%;
    }
    
    /* Butonları Genişlet */
    .nav-btn-student, .nav-btn-teacher {
        width: 100% !important;
        justify-content: center;
        margin: 5px 0 !important;
        padding: 12px !important;
        font-size: 1rem;
    }
    .nav-btn-teacher { margin-left: 0 !important; }
}/* OkiPo Modern Form Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #5e72e4;
    --primary-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary: #fb6340;
    --secondary-grad: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --success: #2dce89;
    --text-main: #2d3748;
    --text-muted: #718096;
    --bg-light: #f7fafc;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.form-body {
    background-color: var(--bg-light);
    font-family: 'Poppins', sans-serif;
}

.okipo-form-card {
    background: var(--white);
    max-width: 600px;
    margin: 40px auto;
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.form-header {
    text-align: center;
    margin-bottom: 35px;
}

.form-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
}

.form-header p {
    color: var(--text-muted);
}

.form-section {
    background: #f8f9fe;
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 25px;
    border: 1px solid #edf2f7;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #eef2f7;
    padding-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-main);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(94, 114, 228, 0.15);
}

.row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.okipo-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-primary-grad { background: var(--primary-grad); }
.btn-secondary-grad { background: var(--secondary-grad); color: #856404; }

.okipo-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    filter: brightness(1.1);
}

.school-toggle-btn {
    background: #fff5f2;
    color: var(--secondary);
    border: 1px dashed var(--secondary);
    padding: 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
}

.password-error {
    color: #f5365c;
    font-size: 0.8rem;
    margin-top: 5px;
    display: none;
}

@media (max-width: 768px) {
    .okipo-form-card { margin: 20px; padding: 25px; }
    .row-grid { grid-template-columns: 1fr; }
    .form-header h2 { font-size: 1.5rem; }
}