/* style.css - Hayatı Paylaş Revizyonu */

/* Değişken Tanımlamaları (Yeni Palet ve Fontlar) */
:root {
    /* Yeni Renk Paleti */
    --ana-renk: #808000; /* Zeytin Yeşili */
    --ana-renk-koyu: #556B2F; /* Koyu Zeytin */
    --ikincil-renk: #F5F5DC; /* Bej */
    --vurgu-rengi: #FFA07A; /* Yumuşak Turuncu (şimdilik az kullanıldı) */
    --arka-plan-genel: #FFFDD0; /* Krem */
    --arka-plan-icerik: var(--ikincil-renk); /* Bej içerik arka planı */
    --metin-rengi: #333333; /* Koyu Gri/Siyah metin */
    --baslik-rengi: #000000; /* Siyah başlıklar */
    --buton-metin-rengi: #ffffff; /* Beyaz (Yeşil buton üzerine) */
    --link-rengi: var(--ana-renk-koyu); /* Linkler için Koyu Zeytin */
    --kenarlik-rengi: #D2B48C; /* Ten Rengi / Açık Kahve (Bej ile uyumlu) */
    --kenarlik-rengi-acik: #e0dcb9; /* Bej'in biraz koyusu */
    --golge-rengi-hafif: rgba(0, 0, 0, 0.05);
    --golge-rengi-orta: rgba(0, 0, 0, 0.08);
    --golge-rengi-koyu: rgba(0, 0, 0, 0.1);
    --dogru-renk: #2E8B57; /* Deniz Yeşili (Yeşil palete uygun) */
    --yanlis-renk: #CD5C5C; /* Hint Kırmızısı */
    --yer-tutucu-arka-plan: #E8E4C9; /* Bej'in biraz koyusu */
    --yer-tutucu-metin: #706e5f; /* Kahvemsi gri */

    /* Yeni Yazı Tipleri */
    --font-ana: 'Merriweather', serif; /* Gövde */
    --font-baslik: 'Montserrat', sans-serif; /* Başlık */
    --font-boyut-temel: 17px; /* Serif için biraz daha büyük temel boyut */
}

/* Genel Sayfa Ayarları */
body {
    font-family: var(--font-ana);
    margin: 0;
    padding: 0;
    background-color: var(--arka-plan-genel);
    color: var(--metin-rengi);
    line-height: 1.7; /* Serif için satır aralığını biraz artır */
    font-size: var(--font-boyut-temel);
    -webkit-font-smoothing: antialiased; /* Fontları daha pürüzsüz gösterme */
    -moz-osx-font-smoothing: grayscale;
}

/* Ana Başlık ve Altbilgi */
header, footer {
    background-color: var(--ana-renk-koyu); /* Koyu Zeytin */
    color: var(--buton-metin-rengi);
    padding: 15px 20px; /* Yanlardan da padding verelim */
    text-align: center;
}

footer {
    padding: 20px 0; /* Footer padding biraz daha fazla */
    margin-top: 40px;
    font-size: 0.9em;
}

header h1 {
    margin: 0;
    padding-bottom: 5px; /* Altına biraz boşluk, eğer p varsa */
    font-family: var(--font-baslik);
    font-weight: 700; /* Kalın başlık */
    font-size: 1.8em; /* Biraz küçülttüm, sadeleşti */
    letter-spacing: 1px; /* Harf arası boşluk */
}
header p { /* index.html'deki başlık altı slogan için */
    margin: 5px 0 0 0;
    font-size: 0.95em;
    font-family: var(--font-ana);
    font-weight: 400;
}


/* Hamburger Menü Butonu */
.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--buton-metin-rengi);
    color: var(--buton-metin-rengi);
    font-size: 1.8em;
    padding: 0px 8px;
    cursor: pointer;
    position: absolute;
    top: 50%; /* Dikeyde ortalamak için */
    transform: translateY(-50%); /* Dikeyde ortalamak için */
    right: 20px;
    border-radius: 3px;
    z-index: 1001; /* Navigasyonun üzerinde kalması için */
}

header {
    position: relative; /* Hamburger menüyü konumlandırmak için */
}

/* Navigasyon Menüsü */
nav {
    background-color: var(--ana-renk); /* Ana Zeytin Yeşili */
    padding: 12px 0; /* Biraz daha ince */
    text-align: center;
    position: relative; /* Mobil menü için */
    z-index: 1000;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline-block;
    margin: 0 18px; /* Linkler arası boşluk */
}

nav ul li a {
    color: var(--buton-metin-rengi);
    text-decoration: none;
    font-size: 1em; /* Biraz küçülttüm */
    padding: 8px 0; /* Dikey padding */
    font-family: var(--font-baslik);
    font-weight: 500; /* Orta kalınlık */
    text-transform: uppercase; /* Büyük harf */
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

nav ul li a:hover,
nav ul li a:focus { /* Hover ve Focus durumları */
    color: rgba(255, 255, 255, 0.8);
}

/* Ana İçerik Alanı */
main {
    max-width: 980px; /* Biraz genişlettim */
    margin: 30px auto; /* Boşlukları artırdım */
    padding: 30px; /* İç boşluğu artırdım */
    background-color: var(--arka-plan-icerik);
    border-radius: 5px; /* Daha az yuvarlak köşe */
    box-shadow: 0 3px 10px var(--golge-rengi-orta);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-baslik);
    color: var(--baslik-rengi);
    margin-top: 1.8em; /* Başlıklar arası dikey boşluk */
    margin-bottom: 0.8em;
    line-height: 1.4; /* Başlık satır aralığı */
    font-weight: 700; /* Kalın başlıklar */
}
/* İlk başlığın üst boşluğunu kaldır */
main > h2:first-of-type,
main > section:first-of-type > h2:first-of-type,
main > section:first-of-type > h3:first-of-type,
main > article:first-of-type > h2:first-of-type, /* article içindeki ilk başlık için de */
main > article:first-of-type > h3:first-of-type {
    margin-top: 0;
}


h2 { font-size: 1.9em; }
h3 { font-size: 1.6em; margin-top: 2.2em; }
h4 { font-size: 1.3em; font-weight: 500; } /* H4 daha ince */

a { /* Genel link stili (metin içindekiler) */
    color: var(--link-rengi);
    text-decoration: underline; /* Altı çizili olsun */
    font-weight: normal; /* Gövde metniyle aynı kalınlık */
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: var(--baslik-rengi); /* Hover'da siyah */
    text-decoration: none; /* Hover'da alt çizgiyi kaldır */
}

/* Butonlar (Genel - .cta-button sınıfı) */
.cta-button {
    display: inline-block; /* Yan yana */
    background-color: var(--ana-renk);
    color: var(--buton-metin-rengi);
    padding: 12px 28px;
    border-radius: 30px; /* Tam yuvarlak köşeler */
    text-decoration: none;
    font-weight: 700; /* Kalın */
    font-size: 1em;
    margin: 5px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: 2px solid var(--ana-renk); /* Kenarlık ekle */
    font-family: var(--font-baslik);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.cta-button:hover, .cta-button:focus {
    background-color: var(--ana-renk-koyu);
    border-color: var(--ana-renk-koyu);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--buton-metin-rengi);
}
/* İkincil Buton Stili */
.cta-secondary {
    background-color: transparent;
    color: var(--ana-renk);
    border-color: var(--ana-renk);
}
.cta-secondary:hover, .cta-secondary:focus {
    background-color: var(--ana-renk);
    color: var(--buton-metin-rengi);
    border-color: var(--ana-renk);
}
/* Küçük Buton Varyasyonu */
.cta-button.cta-small {
    padding: 10px 22px;
    font-size: 0.9em;
}


/* Kart Stilleri (Ders/Test Listeleme - .ders-karti) */
.ders-karti {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    border: 1px solid var(--kenarlik-rengi-acik); /* Daha açık kenarlık */
    margin-bottom: 25px;
    padding: 20px;
    background-color: var(--arka-plan-icerik);
    border-radius: 5px;
    box-shadow: none; /* Başlangıçta gölge yok */
    transition: background-color 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.ders-karti:hover {
    background-color: #fff; /* Beyaz */
    box-shadow: 0 5px 15px var(--golge-rengi-orta);
    /* transform: translateY(-3px); /* Hafif yukarı kalkma efekti */
}

.ders-karti img,
.ders-karti iframe,
.ders-karti .media-placeholder {
    margin-right: 25px; /* Boşluk */
    flex-shrink: 0;
    width: 120px; /* Sabit genişlik */
    height: 80px; /* Boyutu ayarladım */
    object-fit: cover; /* Resmin orantısını koruyarak sığdır */
    border-radius: 3px;
}
.ders-karti .media-placeholder { /* Bu stil testler.html ve braille-egitimi.html'deki yer tutucular için */
    border: 1px dashed var(--kenarlik-rengi);
    display: flex; /* İçindeki metni ortalamak için */
    align-items: center;
    justify-content: center;
    background-color: var(--yer-tutucu-arka-plan);
    color: var(--yer-tutucu-metin);
    font-size: 0.8em;
    text-align: center;
    padding: 5px; /* İçeriğin kenarlara yapışmaması için */
}

.ders-karti div { /* Metin alanı */
    flex-grow: 1;
    text-align: left; /* İçerik sola hizalı */
}

.ders-karti h4 { /* Kart Başlığı */
    margin-top: 0;
    margin-bottom: 8px; /* Açıklamaya yaklaştır */
    color: var(--baslik-rengi);
    font-size: 1.2em;
    font-weight: 700;
}

.ders-karti p { /* Kart Açıklaması */
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--metin-rengi);
    font-size: 0.95em;
    line-height: 1.6;
}

.ders-karti a { /* "Derse Git" butonu/linki */
    display: inline; /* Metin akışında kalsın */
    background-color: transparent;
    color: var(--link-rengi);
    padding: 0;
    border-radius: 0;
    margin-top: 0;
    text-decoration: underline; /* Altı çizili */
    font-weight: bold;
    font-family: var(--font-ana);
    transition: color 0.2s ease;
    text-transform: none; /* Büyük harf olmasın */
    letter-spacing: normal;
    box-shadow: none;
}

.ders-karti a:hover, .ders-karti a:focus {
    background-color: transparent;
    color: var(--baslik-rengi);
    text-decoration: none; /* Hover'da çizgi kalksın */
    transform: none;
}


/* Ders Detay Sayfası Stilleri */
.ders-icerik .media-placeholder, /* Braille derslerindeki yer tutucular için */
.ders-icerik img,
.ders-icerik iframe {
    max-width: 100%; /* Kapsayıcıya sığdır */
    height: auto; /* Orantıyı koru */
    display: block; /* altındaki boşluğu kaldırmak için */
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    margin-bottom: 30px; /* İçerikle arasını aç */
    border: 1px solid var(--kenarlik-rengi-acik);
}
.ders-icerik .media-placeholder { /* Braille dersleri ve benzeri yer tutucular */
     min-height: 180px; /* Biraz artırdım */
     display: flex; /* İçeriği ortalamak için */
     align-items: center;
     justify-content: center;
     background-color: var(--yer-tutucu-arka-plan);
     color: var(--yer-tutucu-metin);
     border: 1px dashed var(--kenarlik-rengi);
     text-align: center;
     padding: 15px;
}
/* Ders sayfalarındaki video linkleri için özel stil */
.ders-icerik > div[style*="text-align: center"] {
    padding: 15px;
    background-color: var(--arka-plan-genel);
    border: 1px solid var(--kenarlik-rengi-acik);
    border-radius: 8px;
    margin-bottom: 20px;
}
.ders-icerik > div[style*="text-align: center"] p {
    margin: 0;
}
.ders-icerik > div[style*="text-align: center"] a {
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
}
.ders-icerik > div[style*="text-align: center"] a:hover {
    text-decoration: underline;
}


.ders-aciklama h4 {
    margin-top: 1.8em;
    color: var(--baslik-rengi);
    font-weight: 700; /* H4'ü de kalın yapalım */
}

.ders-aciklama ul, .ders-alistirma ul, .ders-alistirma ol {
     margin-left: 0; /* Sol boşluğu sıfırla */
     padding-left: 30px; /* İçeriği padding ile it */
}
.ders-aciklama ul li::marker,
.ders-alistirma ul li::marker,
.ders-alistirma ol li::marker {
    color: var(--ana-renk); /* Madde işareti rengi */
}


/* İletişim Sayfası ve Form Stilleri */
.iletisim-bolumu {
    display: flex; /* Form ve bilgileri yan yana getirmek için */
    flex-wrap: wrap; /* Dar ekranlarda alta kaydır */
    gap: 40px; /* Aralığı biraz açalım */
}
.iletisim-bilgileri, .iletisim-formu {
    flex: 1; /* Eşit genişlikte paylaştır */
    min-width: 300px; /* Minimum genişlik */
}

.form-grup label {
    display: block; /* Etiketi tam satıra yay */
    margin-bottom: 5px; /* Alanla arasında boşluk */
    color: var(--baslik-rengi); /* Etiketler daha belirgin */
    font-family: var(--font-baslik);
    font-weight: 500;
    font-size: 0.95em;
}
.form-grup input[type="text"],
.form-grup input[type="email"],
.form-grup textarea {
    width: 100%; /* Tam genişlik */
    padding: 10px;
    border: 1px solid var(--kenarlik-rengi);
    border-radius: 3px; /* Daha az yuvarlak */
    font-family: var(--font-ana);
    background-color: #fff; /* Beyaz yapalım */
    box-sizing: border-box; /* Padding ve border genişliği etkilemesin */
    margin-bottom: 15px; /* Gruplar arası boşluk */
}
.form-grup input[type="text"]:focus,
.form-grup input[type="email"]:focus,
.form-grup textarea:focus {
    border-color: var(--ana-renk);
    box-shadow: 0 0 0 3px rgba(128, 128, 0, 0.15); /* Zeytin yeşili glow */
    outline: none;
}
.form-grup button[type="submit"] {
    /* .cta-button stilini kullanır, cta-small ile biraz daha küçük */
}


/* Test Sayfası Stilleri (Quiz) */
#quiz-container {
    padding: 30px;
    background-color: var(--arka-plan-icerik); /* İçerik arka planı */
    border: 1px solid var(--kenarlik-rengi-acik);
    border-radius: 5px;
}
#soru-gorsel { /* test-isaret-alfabe.html için */
    display: block; /* Merkezlemek ve margin auto için */
    margin: 0 auto 20px auto; /* Üst, sol-sağ auto, alt */
    max-width: 180px; /* Biraz daha büyük olabilir */
    height: auto;
    border: 1px solid var(--kenarlik-rengi);
    padding: 5px;
    background-color: white; /* Görselin arka planı */
    border-radius: 3px;
}
#soru-metin { /* Braille testleri için */
    font-size: 1.5em;
    font-weight: bold;
    color: var(--baslik-rengi);
    min-height: 50px;
    padding: 15px;
    background-color: var(--arka-plan-genel); /* Krem arka plan */
    border-radius: 3px;
    border: 1px solid var(--kenarlik-rengi-acik);
    text-align: center; /* Soruyu ortala */
    margin-bottom: 25px;
}
#secenekler {
    display: grid; /* Butonları ızgara yapıda gösterelim */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Esnek ızgara */
    gap: 12px;
    margin-bottom: 20px;
}
.secenek-btn {
    padding: 15px 10px;
    font-size: 1.05em;
    cursor: pointer;
    border: 1px solid var(--kenarlik-rengi);
    border-radius: 3px;
    background-color: #fff; /* Beyaz butonlar */
    color: var(--metin-rengi);
    font-family: var(--font-ana);
    font-weight: normal;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.secenek-btn:hover:not(:disabled) {
    background-color: var(--arka-plan-genel); /* Krem hover */
    border-color: var(--kenarlik-rengi);
}
.secenek-btn.dogru {
    background-color: var(--dogru-renk) !important; /* !important gerekebilir */
    color: var(--buton-metin-rengi);
    border-color: var(--dogru-renk) !important;
}
.secenek-btn.yanlis {
    background-color: var(--yanlis-renk) !important;
    color: var(--buton-metin-rengi);
    border-color: var(--yanlis-renk) !important;
}
.secenek-btn:disabled { /* Cevap seçildikten sonra */
     cursor: not-allowed;
     opacity: 0.8; /* Biraz soluklaştır */
}
#sonuc {
    font-size: 1.1em;
    font-weight: bold;
    min-height: 1.5em; /* Sonuç mesajı için yer ayıralım */
    margin-bottom: 25px; /* Butonla arasını aç */
    text-align: center;
}
#sonraki-btn, #tekrar-btn {
   /* .cta-button stilini devralır, gerekirse özelleştir */
   /* index.html'deki .cta-button stilini alması için class eklenebilir ya da burada tanımlanabilir. */
    display: inline-block;
    background-color: var(--ana-renk);
    color: var(--buton-metin-rengi);
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1em;
    margin: 5px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: 2px solid var(--ana-renk);
    font-family: var(--font-baslik);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}
#sonraki-btn:hover, #tekrar-btn:hover {
    background-color: var(--ana-renk-koyu);
    border-color: var(--ana-renk-koyu);
    transform: translateY(-2px);
}
#skor-alani {
    padding: 30px;
    text-align: center;
    border: 1px solid var(--kenarlik-rengi-acik);
    border-radius: 5px;
    background-color: var(--arka-plan-genel);
}
#skor-alani h2 {
    margin-top: 0;
}


/* Genel Odak Stili (Erişilebilirlik için) */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--ana-renk); /* Odak rengi ana renk olsun */
    outline-offset: 2px;
    /* box-shadow: 0 0 0 3px rgba(128, 128, 0, 0.25); /* Alternatif odak stili */
}
.menu-toggle:focus {
   outline-color: var(--buton-metin-rengi);
}
/* Form elemanlarının kendi focus stili varsa onu eziyor, bu yüzden yukarıda inputlar için ayrıca tanımlandı */
.form-grup input[type="text"]:focus,
.form-grup input[type="email"]:focus,
.form-grup textarea:focus {
     outline: none; /* Genel outline'ı kaldırıp kendi border/shadow'unu kullansın */
     border-color: var(--ana-renk);
     box-shadow: 0 0 0 3px rgba(128, 128, 0, 0.15);
}

/* === ANA SAYFA ÖZEL STİLLERİ === */
.hero-section.index-hero {
    background-color: var(--ana-renk-koyu); /* Koyu zeytin arka plan */
    color: var(--buton-metin-rengi); /* Beyaz metin */
    padding: 60px 20px; /* İç boşluk */
    text-align: center;
    border-radius: 5px; /* Main içindeki diğer elemanlarla uyumlu */
    margin-bottom: 30px; /* Altındaki bölümle boşluk */
}
.index-hero .hero-content h2 {
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--buton-metin-rengi); /* Başlık rengi */
}
.index-hero .hero-content p {
    font-size: 1.15em;
    margin-bottom: 25px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9); /* Biraz daha soluk beyaz */
}
.hero-buttons .cta-button { margin: 10px;}
.hero-buttons .cta-button.cta-secondary { /* Ana sayfadaki ikincil buton için */
    background-color: transparent;
    color: var(--buton-metin-rengi); /* Beyaz metin */
    border-color: var(--buton-metin-rengi); /* Beyaz kenarlık */
}
.hero-buttons .cta-button.cta-secondary:hover {
    background-color: var(--buton-metin-rengi); /* Beyaz arka plan */
    color: var(--ana-renk-koyu); /* Koyu zeytin metin */
}

.featured-sections-simplified {
    display: flex; /* Kartları yan yana sıralamak için */
    flex-wrap: wrap; /* Ekran daraldığında kartların alta kaymasını sağlar */
    gap: 25px; /* Kartlar arasında boşluk */
    justify-content: center; /* Kartları ortala (eğer tek satırda tam sığmıyorsa) */
    padding: 20px 0; /* Bölümün üst ve alt boşluğu */
    margin-bottom: 30px;
}

.feature-card-simplified {
    display: flex; /* İkon ve metni yan yana getirmek için */
    align-items: center; /* İkon ve metni dikeyde ortalamak için */
    background-color: var(--arka-plan-genel); /* Arka planı genel arka plandan farklılaştıralım */
    border: 1px solid var(--kenarlik-rengi-acik);
    border-radius: 5px;
    padding: 25px;
    flex: 1 1 320px; /* Kartların esnek büyümesi, küçülmesi. Temel genişlik 320px */
    max-width: 460px; /* Kartların çok fazla büyümesini engelle */
    box-shadow: 0 2px 8px var(--golge-rengi-orta);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.feature-card-simplified:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 15px var(--golge-rengi-koyu);
}

.feature-icon-container {
    flex-shrink: 0; /* İkon konteynerinin küçülmesini engeller */
    margin-right: 25px; /* İkon ile metin arasına sağdan boşluk */
}

.feature-icon {
    display: block;
    max-width: 60px; /* İkonun maksimum genişliği */
    height: auto;   /* Genişliğe göre yüksekliği otomatik ayarlar */
}

.feature-content {
    flex-grow: 1; /* Metin içeriğinin kalan alanı doldurmasını sağlar */
    text-align: left; /* Metni sola hizala */
}

.feature-content h3 {
    margin-top: 0;
    font-size: 1.4em;
    color: var(--baslik-rengi);
    margin-bottom: 10px;
}

.feature-content p {
    margin-bottom: 15px;
    font-size: 0.95em; /* Biraz küçülttüm */
    line-height: 1.6;
}

.feature-content .feature-link {
    font-weight: bold;
    color: var(--link-rengi);
    text-decoration: none; /* Alt çizgiyi kaldıralım, hover'da ekleyebiliriz */
    font-size: 0.9em;
}
.feature-content .feature-link:hover {
    color: var(--baslik-rengi);
    text-decoration: underline;
}

.tests-promo {
    background-color: var(--ana-renk-koyu);
    color: var(--buton-metin-rengi);
    padding: 40px 20px;
    text-align: center;
    border-radius: 5px;
}
.tests-promo h3 {
    margin-top: 0;
    font-size: 1.7em;
    color: var(--buton-metin-rengi);
}
.tests-promo p {
    font-size: 1.1em;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
}
.tests-promo .cta-button { /* Test promosundaki buton */
    background-color: var(--ana-renk); /* Ana renk */
    color: var(--buton-metin-rengi);
    border-color: var(--ana-renk);
}
.tests-promo .cta-button:hover {
    background-color: #6B8E23; /* Zeytin yeşilinin biraz açığı */
    border-color: #6B8E23;
}


/* Yatay Çizgi Stili */
hr {
    border: 0;
    height: 1px;
    background-color: var(--kenarlik-rengi-acik);
    margin: 30px 0;
}


/* ============================ */
/* Mobil Uyumluluk (Responsive) */
/* ============================ */

@media screen and (max-width: 768px) {

    header h1 { font-size: 1.6em; }
    header p { font-size: 0.9em; }
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.4em; }
    h4 { font-size: 1.15em; }

    .menu-toggle { display: block; } /* Hamburger menüyü göster */
    nav ul {
        display: none; /* Menüyü başlangıçta gizle */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Navigasyon barının hemen altına */
        left: 0;
        width: 100%;
        background-color: var(--ana-renk); /* Arka plan nav ile aynı */
        padding: 10px 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    nav ul.menu-acik { display: flex; } /* JavaScript ile açıldığında göster */
    nav ul li {
        display: block; /* Linkleri alt alta sırala */
        margin: 0;
        text-align: center; /* Linkleri ortala */
    }
    nav ul li a {
        display: block; /* Tam genişlikte tıklanabilir alan */
        padding: 12px 20px; /* İç boşluk */
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Linkler arasına ayraç */
        font-size: 0.95em;
    }
    nav ul li:last-child a { border-bottom: none; }


    main { padding: 20px; margin: 20px 15px; } /* Mobil için main padding ve margin */

    /* Kartlar (.ders-karti) mobil */
    .ders-karti {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }
     .ders-karti img,
     .ders-karti iframe,
     .ders-karti .media-placeholder {
        margin-right: 0;
        margin-bottom: 15px;
        max-width: 100%; /* Mobil kartta görsel daha büyük olabilir */
        width: auto; /* Genişliği otomatik ayarla, yükseklik sabit kalsın ya da tam tersi */
        /* height: 120px; /* Örnek bir yükseklik, orantıya göre ayarla */
    }
    .ders-karti div { text-align: center; } /* Kart içeriği mobilde ortalı */
    .ders-karti a { display: inline-block; margin-top: 10px;}

    /* Ana Sayfa Özel mobil stilleri */
     .hero-section.index-hero { padding: 40px 15px; }
     .index-hero .hero-content h2 { font-size: 1.8em; }
     .index-hero .hero-content p { font-size: 1.05em; }

     .featured-sections-simplified { padding: 20px 0; gap: 20px;}
     .feature-card-simplified {
        flex-direction: column; /* İkonu üste, metni alta alır */
        align-items: center; /* İçeriği ortalar */
        text-align: center; /* Metni ortalar */
        padding: 20px;
        flex-basis: 100%; /* Mobilde tam genişlik kaplasın */
    }
     .feature-icon-container {
        margin-right: 0;
        margin-bottom: 20px; /* İkon ile metin arasına alttan boşluk */
    }
     .feature-content {
        text-align: center; /* Mobil için metni ortala */
    }

     .tests-promo { padding: 30px 15px; }
     .tests-promo h3 { font-size: 1.5em; }


    /* İletişim Formu mobil */
     .iletisim-bolumu { gap: 25px; flex-direction: column; } /* Alta kaydır */
     .form-grup input[type="text"],
     .form-grup input[type="email"],
     .form-grup textarea { padding: 12px; }
     .form-grup button[type="submit"] { padding: 12px 22px; font-size: 1em; }

     /* Test alanı mobil */
      #secenekler {
          grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Daha esnek */
          gap: 10px;
      }
      .secenek-btn { padding: 12px 8px; font-size: 1em; }
      #soru-metin { font-size: 1.4em; padding: 15px;}
      #soru-gorsel { max-width: 150px; }

}

@media screen and (max-width: 480px) {

    body { font-size: 16px; }

    header { padding: 10px 15px; }
    header h1 { font-size: 1.4em; }
    header p { font-size: 0.85em; }
    .menu-toggle { font-size: 1.6em; top: 50%; /* header padding'i değiştiği için tekrar ayar */ }

    nav ul li a { font-size: 0.9em; padding: 10px 15px; }

    main { padding: 15px; margin: 15px 10px; }

    h2 { font-size: 1.5em; }
    h3 { font-size: 1.3em; }
    h4 { font-size: 1.1em; }

    .cta-button { padding: 10px 20px; font-size: 0.95em;}
    .ders-karti { padding: 15px; }
    .ders-karti a { padding: 10px 20px; font-size: 0.95em;}

    /* Ana Sayfa Özel daha küçük mobil */
    .index-hero .hero-content h2 { font-size: 1.6em; }
    .index-hero .hero-content p { font-size: 0.95em; }
    .hero-buttons .cta-button { display: block; margin: 10px auto; font-size: 0.9em; padding: 10px 18px;}

    .feature-card-simplified { padding: 15px; }
    .feature-content h3 { font-size: 1.25em; }
    .feature-content p { font-size: 0.9em; }
    .feature-icon { max-width: 50px; }


    .tests-promo { padding: 25px 15px; }
    .tests-promo h3 { font-size: 1.3em; }
    .tests-promo .cta-button {font-size: 0.9em; padding: 10px 18px; }

    /* İletişim Formu daha küçük mobil */
    .form-grup button[type="submit"] { width: 100%; font-size: 0.95em; padding: 10px; }

    /* Test alanı daha küçük mobil */
    #soru-metin { font-size: 1.2em; padding: 12px;}
    #secenekler {
        grid-template-columns: 1fr; /* Çok küçük ekranlarda tek sütun */
        gap: 8px;
    }
    .secenek-btn { padding: 15px 5px; font-size: 0.95em; } /* Tek sütunda padding daha fazla olabilir */
    #sonraki-btn, #tekrar-btn { padding: 10px 18px; font-size: 0.95em; width: 100%; margin-top: 15px;}
    #sonraki-btn { margin-bottom: 10px;}
    #soru-gorsel { max-width: 120px; }
}