Şablon:Alfabetik Dizin/styles.css

/* Şablon:Alfabetik Dizin/styles.css */

/* Kırmızı Başlık ve Alfabe Alanı */
.dizin-kirmizi-bant {
    background: #b32b2b !important;
    padding: 25px 15px !important;
    text-align: center !important;
    border-radius: 4px;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

/* "ALFABETİK DİZİN" Başlığı */
.dizin-baslik {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    letter-spacing: 1px !important;
    font-family: sans-serif !important;
}

/* Harf Kutularının Satır Düzeni */
.harf-secimi {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Harf Kutularının Ortak Link Düzeni */
.harf-secimi a {
    text-decoration: none !important;
    border: none !important;
}

/* Kare Beyaz Harf Kutuları */
.harf-kutu {
    background: #ffffff !important;
    color: #111111 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    display: inline-block !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    text-align: center !important;
    border-radius: 2px !important;
    transition: background 0.2s, transform 0.1s;
    font-family: sans-serif !important;
}
.harf-kutu:hover {
    background: #e0e0e0 !important;
    transform: scale(1.05);
}

/* Özel Butonlar İçin Genişlik Ayarı */
.harf-ozel {
    width: auto !important;
    padding: 0 15px !important;
}

/* Tetikleyici Hedefler (Görünmez) */
.harf-hedef {
    display: none !important;
    position: absolute;
}

/* --- MADDELER ALANI --- */
.maddeler-konteyner {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
}

/* Harf Grupları */
.harf-grubu {
    display: block; /* İlk açılışta hepsi gösterilir */
    width: 100% !important;
    margin-bottom: 30px;
}

/* Maddelerin Başındaki Harf Başlığı */
.harf-grubu h3 {
    font-size: 26px !important;
    color: #ffffff !important;
    border-bottom: 2px solid #b32b2b !important;
    padding-bottom: 5px !important;
    margin: 30px 0 15px 0 !important;
    font-family: sans-serif !important;
}

/* PrefixIndex Tablo yapısını 4 sütunlu grid yapma */
.harf-grubu table, .harf-grubu table tbody, .harf-grubu table tr {
    display: block !important;
    width: 100% !important;
}
.harf-grubu table td {
    display: inline-block !important;
    width: 24% !important;
    min-width: 180px !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;
    vertical-align: top !important;
}
.harf-grubu table td a {
    color: #3782df !important;
    font-size: 15px !important;
    text-decoration: none !important;
}
.harf-grubu table td a:hover {
    text-decoration: underline !important;
}

/* Mobil Sütun Ayarları */
@media (max-width: 768px) {
    .harf-grubu table td {
        width: 48% !important;
    }
    .harf-kutu {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 13px !important;
    }
}
@media (max-width: 480px) {
    .harf-grubu table td {
        width: 100% !important;
        padding: 5px 0 !important;
    }
}

/* --- SAF CSS SÜZME MANTIĞI (Harfe Tıklayınca Süzme) --- */
#harf-A:target ~ .maddeler-konteyner .harf-grubu,
#harf-B:target ~ .maddeler-konteyner .harf-grubu,
#harf-C:target ~ .maddeler-konteyner .harf-grubu,
#harf-Ç:target ~ .maddeler-konteyner .harf-grubu,
#harf-D:target ~ .maddeler-konteyner .harf-grubu,
#harf-E:target ~ .maddeler-konteyner .harf-grubu,
#harf-F:target ~ .maddeler-konteyner .harf-grubu,
#harf-G:target ~ .maddeler-konteyner .harf-grubu,
#harf-H:target ~ .maddeler-konteyner .harf-grubu,
#harf-I:target ~ .maddeler-konteyner .harf-grubu,
#harf-İ:target ~ .maddeler-konteyner .harf-grubu,
#harf-J:target ~ .maddeler-konteyner .harf-grubu,
#harf-K:target ~ .maddeler-konteyner .harf-grubu,
#harf-L:target ~ .maddeler-konteyner .harf-grubu,
#harf-M:target ~ .maddeler-konteyner .harf-grubu,
#harf-N:target ~ .maddeler-konteyner .harf-grubu,
#harf-O:target ~ .maddeler-konteyner .harf-grubu,
#harf-Ö:target ~ .maddeler-konteyner .harf-grubu,
#harf-P:target ~ .maddeler-konteyner .harf-grubu,
#harf-R:target ~ .maddeler-konteyner .harf-grubu,
#harf-S:target ~ .maddeler-konteyner .harf-grubu,
#harf-Ş:target ~ .maddeler-konteyner .harf-grubu,
#harf-T:target ~ .maddeler-konteyner .harf-grubu,
#harf-U:target ~ .maddeler-konteyner .harf-grubu,
#harf-Ü:target ~ .maddeler-konteyner .harf-grubu,
#harf-V:target ~ .maddeler-konteyner .harf-grubu,
#harf-Y:target ~ .maddeler-konteyner .harf-grubu,
#harf-Z:target ~ .maddeler-konteyner .harf-grubu,
#harf-DIGER:target ~ .maddeler-konteyner .harf-grubu {
    display: none !important;
}

#harf-A:target ~ .maddeler-konteyner .harf-grubu-A,
#harf-B:target ~ .maddeler-konteyner .harf-grubu-B,
#harf-C:target ~ .maddeler-konteyner .harf-grubu-C,
#harf-Ç:target ~ .maddeler-konteyner .harf-grubu-Ç,
#harf-D:target ~ .maddeler-konteyner .harf-grubu-D,
#harf-E:target ~ .maddeler-konteyner .harf-grubu-E,
#harf-F:target ~ .maddeler-konteyner .harf-grubu-F,
#harf-G:target ~ .maddeler-konteyner .harf-grubu-G,
#harf-H:target ~ .maddeler-konteyner .harf-grubu-H,
#harf-I:target ~ .maddeler-konteyner .harf-grubu-I,
#harf-İ:target ~ .maddeler-konteyner .harf-grubu-İ,
#harf-J:target ~ .maddeler-konteyner .harf-grubu-J,
#harf-K:target ~ .maddeler-konteyner .harf-grubu-K,
#harf-L:target ~ .maddeler-konteyner .harf-grubu-L,
#harf-M:target ~ .maddeler-konteyner .harf-grubu-M,
#harf-N:target ~ .maddeler-konteyner .harf-grubu-N,
#harf-O:target ~ .maddeler-konteyner .harf-grubu-O,
#harf-Ö:target ~ .maddeler-konteyner .harf-grubu-Ö,
#harf-P:target ~ .maddeler-konteyner .harf-grubu-P,
#harf-R:target ~ .maddeler-konteyner .harf-grubu-R,
#harf-S:target ~ .maddeler-konteyner .harf-grubu-S,
#harf-Ş:target ~ .maddeler-konteyner .harf-grubu-Ş,
#harf-T:target ~ .maddeler-konteyner .harf-grubu-T,
#harf-U:target ~ .maddeler-konteyner .harf-grubu-U,
#harf-Ü:target ~ .maddeler-konteyner .harf-grubu-Ü,
#harf-V:target ~ .maddeler-konteyner .harf-grubu-V,
#harf-Y:target ~ .maddeler-konteyner .harf-grubu-Y,
#harf-Z:target ~ .maddeler-konteyner .harf-grubu-Z,
#harf-DIGER:target ~ .maddeler-konteyner .harf-grubu-DIGER {
    display: block !important;
}