@charset "UTF-8";

/* ============================================================
   GALERI MOZAIK (MASONRY) DUZENI
   ------------------------------------------------------------
   Kullanildigi yerler : Default.aspx (ana sayfa galeri seridi)
                         Galeri.aspx  (galeri sayfasi)

   NEDEN CSS SUTUNLARI, NEDEN ISOTOPE DEGIL:
     Sitede isotope.min.js yuklu ama pakette imagesLoaded yok.
     JS ile masonry kurulsaydi gorseller yuklenmeden yukseklikler
     0 okunup yerlesim bozulurdu. Ayrica Galeri.aspx'teki kategori
     secimi AutoPostBack yaptigi icin her postback sonrasi yeniden
     kurulum gerekirdi. CSS sutunlari bu sorunlarin hicbirine girmez.

   BU DOSYA YALNIZCA YAPIYI TANIMLAR.
   Sutun sayisi, sutun araligi ve dikey bosluk her sayfanin kendi
   <style> blogunda verilir; iki sayfada farkli olduklari icin
   bilerek buraya konmadi. Ornek:

       .galeriMasonry            { column-count: 3; column-gap: 20px; }
       .galeriMasonry .isotopeSelector { margin-bottom: 20px; }

   DIKKAT: dikey boslugu margin-bottom ile verin. Asagidaki
   font-size/line-height sifirlamalari kaldirilirsa inline-block
   ogelerin satir tabani boslugu (~5px) dikey araliga eklenir ve
   dikey ile yatay bosluk esit olmaz.
   ============================================================ */

.galeriMasonry {
    /* inline-block ogeler satir tabanina oturdugu icin aralarindaki
       bosluk karakterleri fazladan dikey bosluk birakiyor; sifirlaniyor. */
    font-size: 0;
    line-height: 0;
}

.galeriMasonry .isotopeSelector {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding: 0;
    font-size: 0;
    line-height: 0;
    /* Oge bir sutundan digerine bolunmesin */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.galeriMasonry .isotopeSelector article {
    margin: 0;
    font-size: 0;
    line-height: 0;
}

/* app.css'teki ".isotopeSelector figure" 30px alt bosluk veriyor;
   dikey aralik artik ogenin margin-bottom degerinden geldigi icin
   sifirlaniyor. Kose yuvarlamasi temanin kendi degerinde (4px) birakildi.
   overflow:hidden, uzerine gelince uygulanan scale(1.2) buyutmesinin
   komsu gorsellerin ustune tasmasini engelliyor. */
.galeriMasonry .isotopeSelector figure {
    margin: 0;
    overflow: hidden;
}

.galeriMasonry .isotopeSelector img {
    display: block;
    width: 100%;
}