/* ==========================================================================
   1. GENEL AYARLAR & ERİŞİLEBİLİRLİK (RESET & ACCESSIBILITY)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-shadow: none;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
    color: #222222;
    line-height: 1.6;
    font-size: 18px; /* Görme kaybı olanlar için ideal okunabilirlik başlangıcı */
    transition: background-color 0.3s, color 0.3s;
}

/* Doğrudan Ana İçeriğe Atla Linki (Ekran okuyucular ve klavye kullananlar için) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background: #e65c00;
    color: white;
    padding: 12px 20px;
    z-index: 9999;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 10px;
}

/* ==========================================================================
   2. ÜST BİLGİ ALANI (HEADER & LOGO BAR)
   ========================================================================== */
.site-header {
    background-color: #ffffff;
    border-bottom: 4px solid #e65c00; /* Dernek kurumsal turuncusu */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.ust-bar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

@media (min-width: 992px) {
    .ust-bar {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Logo ve Kurumsal Yazı Alanı */
.logo-alani {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dernek-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.logo-yazi .ana-baslik {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a365d; /* Kurumsal lacivert */
    letter-spacing: 0.5px;
    text-align: center;
}

@media (min-width: 992px) {
    .logo-yazi .ana-baslik {
        text-align: left;
    }
}

/* Üst Navigasyon Menüsü */
.ust-linkler {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.ust-linkler a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: #f0f4f8;
    transition: all 0.2s ease;
}

.ust-linkler a:hover,
.ust-linkler a:focus {
    background-color: #e65c00;
    color: #ffffff;
    outline: 3px solid #1a365d;
}

.ust-linkler a.aktif-link {
    background-color: #1a365d;
    color: #ffffff;
}

/* Erişilebilirlik Paneli (Punto ve Kontrast Değiştirme) */
.erisilebilirlik-paneli {
    background-color: #1a365d;
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.erisilebilirlik-paneli button {
    background-color: #ffffff;
    color: #1a365d;
    border: 2px solid #ffffff;
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.erisilebilirlik-paneli button:hover,
.erisilebilirlik-paneli button:focus {
    background-color: #e65c00;
    color: #ffffff;
    border-color: #e65c00;
    outline: 2px solid #ffffff;
}

/* ==========================================================================
   3. HIZLI ERİŞİM MENÜSÜ (QUICK MENU)
   ========================================================================== */
.hizli-menu-alani {
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 20px;
}

.hizli-menu-baslik {
    font-size: 1.3rem;
    color: #1a365d;
    margin-bottom: 10px;
    border-left: 5px solid #e65c00;
    padding-left: 10px;
}

.hizli-menu-listesi {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

@media (min-width: 768px) {
    .hizli-menu-listesi {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .hizli-menu-listesi {
        grid-template-columns: repeat(3, 1fr);
    }
}

.hizli-menu-listesi a {
    color: #2b6cb0;
    text-decoration: none;
    font-weight: 500;
    display: block;
    padding: 6px 10px;
    border-radius: 4px;
}

.hizli-menu-listesi a:hover,
.hizli-menu-listesi a:focus {
    background-color: #ebf8ff;
    color: #2c5282;
    text-decoration: underline;
    outline: 2px solid #e65c00;
}

/* ==========================================================================
   4. ANA İKİ SÜTUNLU ŞABLON DÜZENİ (MAIN GRID)
   ========================================================================== */
.ana-sablon-kapsayici {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

/* Ekran genişlediğinde muhteşem 2 sütunlu simetrik düzene geçiş */
@media (min-width: 992px) {
    .ana-sablon-kapsayici {
        grid-template-columns: 2.2fr 1fr; /* Sol ana sütun daha geniş, sağ sütun yan panel */
    }
}

/* İçerik Kartları (Tüm bölümlerin ortak kutu tasarımı) */
.icerik-kart {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}

.bolum-basligi {
    font-size: 1.5rem;
    color: #1a365d;
    margin-bottom: 20px;
    border-bottom: 3px solid #f0f4f8;
    padding-bottom: 10px;
    position: relative;
}

.bolum-basligi::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #e65c00;
}

/* ==========================================================================
   5. SOL SÜTUN BÖLÜM ÖZELLEŞTİRMELERİ
   ========================================================================== */

/* Yönetim Kurulu Listesi */
.yk-grafik-liste {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 15px;
}

@media (min-width: 600px) {
    .yk-grafik-liste {
        grid-template-columns: repeat(2, 1fr);
    }
}

.yk-uye-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #edf2f7;
    transition: transform 0.2s, box-shadow 0.2s;
}

.yk-uye-link:hover,
.yk-uye-link:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    outline: 2px solid #e65c00;
}

.uye-kucuk-resim {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Faaliyet Alanları & Güncel Projeler Izgara Sistemi (Görsel Kartlar) */
.faaliyet-izgara-sistemi {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 15px;
}

@media (min-width: 600px) {
    .faaliyet-izgara-sistemi {
        grid-template-columns: repeat(2, 1fr);
    }
}

.faaliyet-kart-oge {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.faaliyet-grafik-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.faaliyet-resim {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.faaliyet-kart-oge:hover .faaliyet-resim,
.faaliyet-grafik-link:focus .faaliyet-resim {
    transform: scale(1.04);
}

.faaliyet-kart-yazi {
    display: block;
    padding: 15px;
    font-weight: bold;
    color: #1a365d;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.faaliyet-grafik-link:hover .faaliyet-kart-yazi,
.faaliyet-grafik-link:focus .faaliyet-kart-yazi {
    background-color: #e65c00;
    color: #ffffff;
}

.faaliyet-grafik-link:focus {
    outline: 3px solid #1a365d;
}

/* Sadeleştirilmiş Linkler (Tüzük, Makale, Mevzuat Link Stilleri) */
.tuzuk-linki, .metin-link, .detay-link-sss {
    display: inline-block;
    color: #ffffff;
    background-color: #1a365d;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.2s;
    margin-top: 10px;
}

.tuzuk-linki:hover, .tuzuk-linki:focus,
.metin-link:hover, .metin-link:focus,
.detay-link-sss:hover, .detay-link-sss:focus {
    background-color: #e65c00;
    color: #ffffff;
    outline: 2px solid #1a365d;
}

/* Form Tasarımı (Üyelik Modülü) */
.form-uyari-bandi {
    background-color: #fffaf0;
    border-left: 4px solid #dd6b20;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.95rem;
}

.balgor-form-sistemi {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-grup {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-grup label {
    font-weight: 600;
    color: #2d3748;
}

.form-grup input[type="text"],
.form-grup input[type="tel"],
.form-grup select,
.form-grup textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #cbd5e0;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
}

.form-grup input:focus,
.form-grup select:focus,
.form-grup textarea:focus {
    border-color: #e65c00;
    outline: 3px solid #fffaf0;
}

.alan-aciklamasi {
    font-size: 0.85rem;
    color: #718096;
}

.btn-form-gonder {
    background-color: #e65c00;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-form-gonder:hover,
.btn-form-gonder:focus {
    background-color: #1a365d;
    outline: 3px solid #e65c00;
}

/* Haberler Alanı */
.haber-kart {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}

.haber-gorsel-alani img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.haber-detay {
    padding: 15px;
}

.haber-tarih {
    font-size: 0.85rem;
    color: #718096;
}

.haber-kart-baslik {
    font-size: 1.15rem;
    color: #1a365d;
    margin: 5px 0 10px 0;
}

/* ==========================================================================
   6. SAĞ SÜTUN BÖLÜM ÖZELLEŞTİRMELERİ (YAN PANEL)
   ========================================================================== */
.hak-listesi {
    margin: 15px 0;
    padding-left: 20px;
}

.hak-listesi li {
    margin-bottom: 8px;
}

/* Galeri ve Video Alanı */
.galeri-medya-izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 15px 0;
}

.galeri-oge {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.galeri-oge img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.video-oge {
    cursor: pointer;
}

.play-ikonu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(230, 92, 0, 0.9);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.ekran-okuyucu-metin {
    position: absolute;
    width: 1fr;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.youtube-yonlendirme {
    margin-top: 15px;
}

.youtube-kanal-butonu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #cc0000; /* YouTube Kırmızısı */
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
}

.youtube-kanal-butonu:hover,
.youtube-kanal-butonu:focus {
    background-color: #990000;
    outline: 3px solid #1a365d;
}

/* Bağış Kartı (Özel Dikkat Çekici Renk Şeması) */
.bagis-kart {
    background: linear-gradient(135deg, #fffff0 0%, #fff5f5 100%);
    border: 2px dashed #ff8080;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
}

.bagis-icerik-grubu {
    margin-bottom: 20px;
}

.bagis-kalp-ikonu {
    font-size: 2.5rem;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
}

.btn-bagis-link {
    display: block;
    background-color: #e53e3e;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.2s;
}

.btn-bagis-link:hover,
.btn-bagis-link:focus {
    background-color: #c53030;
    outline: 3px solid #1a365d;
}

/* ==========================================================================
   7. ALT BİLGİ ALANI (FOOTER)
   ========================================================================== */
.site-footer {
    background-color: #1a365d;
    color: #ffffff;
    margin-top: 50px;
    border-top: 6px solid #e65c00;
}

.footer-izgara-sistem {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 768px) {
    .footer-izgara-sistem {
        grid-template-columns: repeat(2, 1fr);
    }
}

.footer-blok-oge h3 {
    color: #e65c00;
    font-size: 1.3rem;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}

.adres-detay p {
    margin-bottom: 10px;
}

.footer-sosyal-list {
    list-style: none;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-sosyal-list a {
    color: #ffffff;
    text-decoration: none;
    background: rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
}

.footer-sosyal-list a:hover,
.footer-sosyal-list a:focus {
    background: #e65c00;
    outline: 2px solid #ffffff;
}

.footer-alt-telif {
    background: #122542;
    text-align: center;
    padding: 20px;
    font-size: 0.95rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ==========================================================================
   8. YÜKSEK KONTRAST MODU AYARLARI (HIGH CONTRAST MODE)
   ========================================================================== */
body.yuksek-kontrast {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.yuksek-kontrast .site-header,
body.yuksek-kontrast .icerik-kart,
body.yuksek-kontrast .bagis-kart,
body.yuksek-kontrast .hizli-menu-listesi,
body.yuksek-kontrast .faaliyet-kart-yazi,
body.yuksek-kontrast .yk-uye-link {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

body.yuksek-kontrast a,
body.yuksek-kontrast button {
    color: #ffff00 !important; /* Az görenler için en yüksek kontrastlı sarı renk */
    background-color: #000000 !important;
    border: 2px solid #ffff00 !important;
}

body.yuksek-kontrast a:hover,
body.yuksek-kontrast a:focus,
body.yuksek-kontrast button:hover,
body.yuksek-kontrast button:focus {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

/* Kalp atışı animasyonu */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
/* ==========================================================================
   FORM ALANI GÖRSEL ZENGİNLEŞTİRME (YENİ EKKLENEN SÜSLEMELER)
   ========================================================================== */
.form-uyari-bandi {
    background-color: #fffaf0;
    border-left: 4px solid #dd6b20;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
    font-size: 0.95rem;
    position: relative;
    padding-left: 45px;
}

/* KVKK alanına kalkan ve kilit görsel efekti */
.form-uyari-bandi::before {
    content: "\f3ed"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 15px;
    font-size: 1.3rem;
    color: #dd6b20;
}

.balgor-form-sistemi {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-aciklama {
    margin-bottom: 15px;
}

.form-grup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.form-grup label {
    font-weight: 600;
    color: #2d3748;
}

/* Girdi alanlarının soluna ikon boşluğu açma */
.form-grup input, .form-grup select, .form-grup textarea {
    width: 100%;
    padding: 12px 12px 12px 40px !important; 
    border: 2px solid #cbd5e0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: #f8fafc;
}

/* CSS pseudo-elementleri ile form kutularının içine şık SVG ikonların gömülmesi */
#ad-soyad { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%231a365d" class="bi bi-person-fill" viewBox="0 0 16 16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/></svg>'); background-repeat: no-repeat; background-position: 12px center; }
#tc-no { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%231a365d" class="bi bi-card-id" viewBox="0 0 16 16"><path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/><path d="M2 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m7-4a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0"/></svg>'); background-repeat: no-repeat; background-position: 12px center; }
#telefon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%231a365d" class="bi bi-telephone-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.451 2.451a.68.68 0 0 0 .643.178l2.191-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.61l-1.934 1.934c-.756.756-1.872.918-2.774.453C5.232 14.16 2.001 10.94.511 6.166c-.464-.902-.302-2.018.454-2.774z"/></svg>'); background-repeat: no-repeat; background-position: 12px center; }
#engel-durumu { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%231a365d" class="bi bi-person-wheelchair" viewBox="0 0 16 16"><path d="M12 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m-.663 2.146a.5.5 0 0 0-.47-.315H8.316a1.5 1.5 0 0 0-1.478 1.244l-.405 2.025-1.062-.607a.5.5 0 0 0-.693.169l-.75 1.3a.5.5 0 0 0 .169.693l1.524.871a.5.5 0 0 0 .633-.11l1.03-1.373.286 1.428-1.01 2.02a.5.5 0 0 0 .895.447l1.077-2.154a.5.5 0 0 0 .04-.336L7.614 7.316l1.243-.207a.5.5 0 0 0 .41-.532l-.143-1.43 1.137.65a.5.5 0 0 0 .686-.182zM4.321 11.084l.432-.75a4.5 4.5 0 1 1 4.545 4.5 4.5 4.5 0 0 1-4.522-4.225l-.75.433a5.5 5.5 0 1 0 5.272-5.029l-.271-1.357a6.5 6.5 0 1 1-5.18 5.928z"/></svg>'); background-repeat: no-repeat; background-position: 12px center; }
#adres { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%231a365d" class="bi bi-geo-alt-fill" viewBox="0 0 16 16"><path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/></svg>'); background-repeat: no-repeat; background-position: 12px 15px; }

.form-grup input:focus,
.form-grup select:focus,
.form-grup textarea:focus {
    border-color: #e65c00;
    background-color: #ffffff;
    outline: 3px solid #fffaf0;
}

.btn-form-gonder {
    background-color: #e65c00;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 4px 6px rgba(230, 92, 0, 0.2);
}

.btn-form-gonder:hover,
.btn-form-gonder:focus {
    background-color: #1a365d;
    outline: 3px solid #e65c00;
}

/* Yüksek kontrast modunda form içi görsellerin temizlenip standart matrise uyması */
body.yuksek-kontrast .form-grup input,
body.yuksek-kontrast .form-grup select,
body.yuksek-kontrast .form-grup textarea {
    background-image: none !important;
    padding-left: 12px !important;
}
/* ==========================================================================
   BALGÖR DERNEĞİ - SIKÇA SORULAN SORULAR (SSS) SAYFA STİLLERİ
   ========================================================================== */

/* SSS Sayfası Genel Kapsayıcı */
.sss-ozel-kapsayici {
    background-color: #f9f9f9; /* Temiz ve hafif gri arka plan */
    padding: 50px 15px;
}

.tek-sutun-icerik {
    max-width: 960px; /* Okuma kolaylığı için ideal genişlik */
    margin: 0 auto;
    display: block;
}

/* Sayfa Üst Banner Alanı - Koyu Lacivert Gradyan */
.sayfa-ust-banner {
    background: linear-gradient(135deg, #1a252f 0%, #2c3e50 100%);
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
}

/* Üst banner arka planına hafif modern doku */
.sayfa-ust-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTAgMGg0MHY0MEgwVjB6bTIwIDIwaDIwdjIwSDIWMjB6TTAgMjBoMjB2MjBIMFYyMHoyMCAwaDIwdjIwSDIwVjB6Ii8+PC9nPjwvZz48L3N2Zz4=');
    opacity: 0.4;
}

.sayfa-ust-banner h1 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative; 
    z-index: 1;
}

.sayfa-ust-banner p {
    font-size: 18px;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.95;
    line-height: 1.6;
    position: relative; 
    z-index: 1;
}

/* SSS Kategori Bölümleri */
.sss-kategori-bloku {
    margin-bottom: 50px;
}

.sss-kategori-basligi {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center; /* Başlıkları ortalayarak şıklaştırıyoruz */
}

/* Başlığın soluna ve sağına dernek turuncusu çizgiler */
.sss-kategori-basligi::before,
.sss-kategori-basligi::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: #ff7f00; /* BalGÖR Turuncusu */
    border-radius: 2px;
}

.sss-kategori-basligi::before { margin-right: 15px; }
.sss-kategori-basligi::after { margin-left: 15px; }

.sss-kategori-basligi i {
    color: #ff7f00; /* İkonlar turuncu */
    margin: 0 10px;
    font-size: 26px;
}

/* Modern SSS Kart Tasarımı */
.sss-kart {
    background: #fff;
    border: 1px solid #eef2f5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 12px; /* Yumuşak yuvarlak köşeler */
    transition: all 0.3s ease; /* Yumuşak geçiş efekti */
    position: relative;
}

/* Kartın üzerine gelindiğinde (Hover) canlanma efekti */
.sss-kart:hover {
    transform: translateY(-4px); /* Kart hafifçe yukarı esner */
    box-shadow: 0 8px 25px rgba(0,0,0,0.09); /* Gölgesi derinleşir */
    border-color: rgba(255,127,0,0.25); /* Kenarlara hafif turuncu tonu gelir */
}

/* Sorular (H3) */
.sss-kart h3 {
    margin-top: 0;
    color: #1a252f;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
}

/* Soru Metninin Başına Şık Soru İşareti İkonu */
.sss-kart h3::before {
    content: '?';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #eef2f5;
    color: #ff7f00;
    border-radius: 50%;
    margin-right: 15px;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Cevap Alanları */
.sss-cevap {
    color: #525f7f;
    line-height: 1.8; /* Okumayı kolaylaştıran satır yüksekliği */
    margin-top: 12px;
    padding-left: 43px; /* Soru işaretiyle hizalama */
    font-size: 16px;
}

.sss-cevap p {
    margin: 0 0 10px 0;
}

.sss-cevap strong {
    color: #1a252f;
    font-weight: 600;
}

/* Geri Dönüş Butonu (Sayfa Sonu) */
.sss-geri-don {
    text-align: center;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eef2f5;
}

.sss-geri-don .tuzuk-linki {
    background-color: #2c3e50;
    color: #fff;
    padding: 12px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(44,62,80,0.2);
}

.sss-geri-don .tuzuk-linki:hover {
    background-color: #ff7f00; /* Üzerine gelince turuncu olur */
    color: #fff;
    text-decoration: none;
}

.sss-geri-don .tuzuk-linki i {
    margin-right: 10px;
}

/* ==========================================================================
   ERİŞİLEBİLİRLİK PANELİ - YÜKSEK KONTRAST MODU UYUMLULUĞU
   ========================================================================== */
body.yuksek-kontrast .sayfa-ust-banner {
    background: #000 !important;
    border-bottom: 2px solid #fff;
}

body.yuksek-kontrast .sayfa-ust-banner::before {
    display: none;
}

body.yuksek-kontrast .sss-ozel-kapsayici {
    background-color: #000 !important;
}

body.yuksek-kontrast .sss-kart {
    background: #000 !important;
    border: 2px solid #fff !important;
    box-shadow: none !important;
    transform: none !important; /* Yüksek kontrastta hareketi kapatıyoruz */
}

body.yuksek-kontrast .sss-kart h3 {
    color: #fff !important;
}

body.yuksek-kontrast .sss-kart h3::before {
    background-color: #fff !important;
    color: #000 !important;
}

body.yuksek-kontrast .sss-cevap {
    color: #fff !important;
}

body.yuksek-kontrast .sss-kategori-basligi {
    color: #fff !important;
}

body.yuksek-kontrast .sss-kategori-basligi::after,
body.yuksek-kontrast .sss-kategori-basligi::before {
    background-color: #fff !important;
}

body.yuksek-kontrast .sss-kategori-basligi i {
    color: #fff !important;
}

body.yuksek-kontrast .sss-geri-don .tuzuk-linki {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #000;
}

body.yuksek-kontrast .sss-geri-don .tuzuk-linki:hover {
    background-color: #ff7f00 !important;
    color: #000 !important;
}
/* ==========================================================================
   BOL RESİMLİ VE GRAFİKLİ SSS EK CSS STİLLERİ
   ========================================================================== */

/* Resim Kapsayıcı Kart Alanı */
.sss-gorsel {
    margin-top: 20px;
    width: 100%;
    max-height: 280px; /* Resimlerin çok devasa olup sayfayı boğmasını engeller */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eef2f5;
}

/* Canlı Resimlerin Kendisi */
.sss-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi ezmeden kutuya tam sığdırır */
    object-position: center;
    transition: transform 0.5s ease; /* Fareyle üzerine gelince şık büyüme efekti */
}

/* Karta hover olunduğunda resmin hafifçe büyümesi (Dinamik Efekt) */
.sss-kart:hover .sss-gorsel img {
    transform: scale(1.04);
}

/* Görme engelli kullanıcılar için resimlerin Yüksek Kontrast Modunda gizlenmesi veya sadeleşmesi */
body.yuksek-kontrast .sss-gorsel {
    border: 2px solid #fff;
    max-height: none;
}
body.yuksek-kontrast .sss-gorsel img {
    filter: grayscale(1) contrast(2); /* Siyah beyaz ve yüksek kontrastlı grafik yap */
}