Şablon:Alfabetik Dizin/styles.css

/* Şablon:Alfabetik Dizin/styles.css */
.dizin-alani {
    margin: 20px 0;
    font-family: sans-serif;
}
.harf-hedef {
    display: none;
}
.harf-secimi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
}
.harf-secimi a {
    text-decoration: none !important;
}
.harf-linki {
    background: #1f1f1f !important;
    color: #e0e0e0 !important;
    border: 1px solid #3d3d3d;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    display: inline-block;
    transition: background 0.2s ease, color 0.2s ease;
}
.harf-linki:hover {
    background: #333333 !important;
    color: #ffffff !important;
    border-color: #555555;
}
.cizgi {
    border-bottom: 1px solid #3d3d3d;
    margin: 18px 0;
}

/* Otomatik Gelen Listelerin Tasarımı */
.maddeler-konteyner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}
.harf-grubu {
    display: block; /* Sayfa ilk açıldığında tüm harfler yan yana listelenir */
}
.harf-grubu table, .harf-grubu ul {
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.harf-grubu td, .harf-grubu li {
    padding: 4px 0;
}
.harf-grubu a {
    color: #3782df !important;
    font-size: 15px;
    text-decoration: none;
}
.harf-grubu a:hover {
    text-decoration: underline !important;
}

/* SAF CSS FİLTRELEME MANTIĞI (Doğrulama hatası vermez) */
/* Herhangi bir harf butonu tıklandığında önce tüm grupları gizle */
#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 {
    display: none;
}

/* Sadece aktif olan (tıklanan) harf grubunu göster */
#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 {
    display: block !important;
}