Şablon:Alfabetik Dizin

       <a href="#" class="harf-linki">HEPSİ</a>
       <a href="#harf-A" class="harf-linki">A</a>
       <a href="#harf-B" class="harf-linki">B</a>
       <a href="#harf-C" class="harf-linki">C</a>
       <a href="#harf-C_tr" class="harf-linki">Ç</a>
       <a href="#harf-D" class="harf-linki">D</a>
       <a href="#harf-E" class="harf-linki">E</a>
       <a href="#harf-F" class="harf-linki">F</a>
       <a href="#harf-G" class="harf-linki">G</a>
       <a href="#harf-H" class="harf-linki">H</a>
       <a href="#harf-I" class="harf-linki">I</a>
       <a href="#harf-I_tr" class="harf-linki">İ</a>
       <a href="#harf-J" class="harf-linki">J</a>
       <a href="#harf-K" class="harf-linki">K</a>
       <a href="#harf-L" class="harf-linki">L</a>
       <a href="#harf-M" class="harf-linki">M</a>
       <a href="#harf-N" class="harf-linki">N</a>
       <a href="#harf-O" class="harf-linki">O</a>
       <a href="#harf-O_tr" class="harf-linki">Ö</a>
       <a href="#harf-P" class="harf-linki">P</a>
       <a href="#harf-R" class="harf-linki">R</a>
       <a href="#harf-S" class="harf-linki">S</a>
       <a href="#harf-S_tr" class="harf-linki">Ş</a>
       <a href="#harf-T" class="harf-linki">T</a>
       <a href="#harf-U" class="harf-linki">U</a>
       <a href="#harf-U_tr" class="harf-linki">Ü</a>
       <a href="#harf-V" class="harf-linki">V</a>
       <a href="#harf-Y" class="harf-linki">Y</a>
       <a href="#harf-Z" class="harf-linki">Z</a>

<style> .dizin-alani {

   margin: 20px 0;
   font-family: sans-serif;

} .harf-secimi {

   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 15px;

} .harf-linki {

   background: #1f1f1f !important;
   color: #e0e0e0 !important;
   border: 1px solid #3d3d3d;
   padding: 6px 12px;
   border-radius: 4px;
   font-weight: bold;
   font-size: 13px;
   text-decoration: none !important;
   display: inline-block;

} .harf-linki:hover {

   background: #333333 !important;
   color: #ffffff !important;

} .cizgi {

   border-bottom: 1px solid #3d3d3d;
   margin: 18px 0;

} .maddeler-konteyner {

   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 15px;

} .harf-grubu {

   display: block;

} .harf-grubu ul {

   list-style: none !important;
   padding: 0 !important;
   margin: 0 !important;

} .harf-grubu li {

   margin-bottom: 8px;

} .harf-grubu li a {

   color: #3782df;
   font-size: 15px;
   text-decoration: none;

} .harf-grubu li a:hover {

   text-decoration: underline;

}

/* CSS target ile tıklanan harfe göre süzme yapma */ .maddeler-konteyner:has(.harf-grubu:target) .harf-grubu {

   display: none;

} .maddeler-konteyner .harf-grubu:target {

   display: block !important;

} </style>