Yan panel

<div data-kiris="yan-panel">
  <button class="kiris-button kiris-button--ikincil" type="button" data-kiris-panel-ac>Süzgeçleri aç</button>
  <dialog class="kiris-yan-panel" aria-labelledby="yp-baslik">
    <div class="kiris-yan-panel__ust"><h2 class="kiris-yan-panel__baslik" id="yp-baslik">Süzgeçler</h2><button class="kiris-button kiris-button--ikincil kiris-button--simge" type="button" aria-label="Paneli kapat" data-kiris-kapat><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg></button></div>
    <div class="kiris-yan-panel__govde"><div class="kiris-alan"><label class="kiris-etiket" for="yp-il">İl</label><select class="kiris-secim" id="yp-il"><option>Ankara</option><option>İstanbul</option></select></div></div>
    <div class="kiris-yan-panel__alt"><button class="kiris-button" type="button" data-kiris-kapat>Uygula</button></div>
  </dialog>
</div>
<div data-kiris="yan-panel" class="kiris-u-ust-4">
  <button class="kiris-button kiris-button--ikincil" type="button" data-kiris-panel-ac>Alt sayfayı aç</button>
  <dialog class="kiris-yan-panel kiris-yan-panel--alt" aria-labelledby="as-baslik">
    <div class="kiris-yan-panel__ust"><h2 class="kiris-yan-panel__baslik" id="as-baslik">Paylaş</h2><button class="kiris-button kiris-button--ikincil kiris-button--simge" type="button" aria-label="Kapat" data-kiris-kapat><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg></button></div>
    <div class="kiris-yan-panel__govde"><ul class="kiris-liste kiris-liste--sade"><li><a class="kiris-link" href="#">Bağlantıyı kopyala</a></li><li><a class="kiris-link" href="#">E-posta ile gönder</a></li></ul></div>
  </dialog>
</div>

<div data-kiris="yan-panel">
  <button class="kiris-button kiris-button--ikincil" type="button" data-kiris-panel-ac><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-question23"/></svg> Yardım</button>
  <dialog class="kiris-yan-panel kiris-yan-panel--sol" aria-labelledby="yardim-baslik">
    <div class="kiris-yan-panel__ust"><h2 class="kiris-yan-panel__baslik" id="yardim-baslik">Bu sayfa hakkında</h2><button class="kiris-button kiris-button--ikincil kiris-button--simge" type="button" aria-label="Yardımı kapat" data-kiris-kapat><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-close"/></svg></button></div>
    <div class="kiris-yan-panel__govde"><dl class="kiris-tanim"><div class="kiris-tanim__satir"><dt>Prim günü</dt><dd>Sigortalı çalıştığınız her gün için bir prim günü işlenir.</dd></div><div class="kiris-tanim__satir"><dt>Hizmet dökümü</dt><dd>Bütün işverenleriniz ve prim günleriniz.</dd></div></dl><p class="kiris-govde">Daha fazlası için <a class="kiris-link" href="#">Alo 170</a>.</p></div>
  </dialog>
</div>