/* ==========================================================================
   MOBİL UYUM (RESPONSIVE) STİLLERİ
   Bu dosya SADECE 768px ve altı ekranlarda devreye girer.
   style.css'teki tek bir satıra bile dokunulmadı — masaüstü görünümü
   birebir aynı kalır. Bu dosya sadece küçük ekranda mevcut tasarımı
   okunabilir/kullanılabilir hale getirir.
   ========================================================================== */

@media only screen and (max-width: 768px) {

    body { background-size: cover; }

    #BuyukDiv { width: 100%; padding: 0 10px; box-sizing: border-box; }

    /* Dekoratif yan grafikler küçük ekranda yer kaplamasın */
    #AsiliAdam, #BinaSiluet { display: none; }

    #UstMenu { width: 100%; float: none; text-align: center; }
    #Logo { float: none; margin: 0 auto; }

    ul#menu { float: none; width: 100%; margin-top: 10px; }
    ul#menu li { float: none; width: 100%; box-sizing: border-box; border-left: none; border-right: none; }
    ul#menu li a { float: none; width: 100%; box-sizing: border-box; text-align: center; padding: 0; }
    ul#menu li ul { position: static; margin-top: 0; display: none; }
    ul#menu li:hover ul,
    ul#menu li:focus-within ul { display: block; }
    ul#menu ul li a { padding: 0; }

    #IcerikDiv { width: 100%; float: none; }

    /* Banner */
    #BannerDiv { position: relative; height: auto; }
    ul#Banner li { position: relative; float: none; width: 100% !important; height: auto !important; }
    ul#Banner li img { width: 100%; height: auto; display: block; }
    ul#Banner li #BannerUstYazi,
    ul#Banner li #BannerAltYazi { position: static; width: 100%; margin: 0; box-sizing: border-box; }
    #ButonDiv { float: none; text-align: center; }
    ul#BannerButon { margin-top: 10px; }
    ul#BannerButon li { float: none; display: inline-block; }

    /* Hızlı erişim kutuları */
    #KutuAlani { width: 100%; float: none; margin: 15px 0; }
    ul#Kutu { width: 100%; padding: 0; }
    ul#Kutu li, ul#Kutu li a { width: 47%; margin: 1.5%; box-sizing: border-box; }

    /* İçerik sayfası */
    #IcerikSayfaDiv { width: 100%; float: none; box-sizing: border-box; padding: 15px; margin-top: 0; }
    #IcerikSayfaDiv #ResimAlani { width: 100%; }
    #IcerikSayfaDiv #ResimAlani #BuyukResim { width: 100%; float: none; }
    #IcerikSayfaDiv #ResimAlani #BuyukResim img { width: 100%; box-sizing: border-box; }
    #IcerikSayfaDiv #ResimAlani #KucukResim { width: 100%; float: none; }
    #IcerikSayfaDiv #ResimAlani #KucukResim img { width: 30%; margin-right: 2%; box-sizing: border-box; }

    /* İletişim sayfası tablosu tek sütuna insin */
    #Adres, #Adres tbody, #Adres tr, #Adres td { display: block; width: 100% !important; text-align: left !important; }
    #Adres .AdresBaslik, #Adres .AdresIcerik { text-align: left; }
    #AdresForm, #AdresForm tbody, #AdresForm tr, #AdresForm td { display: block; width: 100% !important; }
    #AdresForm input, #AdresForm textarea { width: 100%; box-sizing: border-box; }
    #AdresForm .gonder { float: none; width: 100%; margin-top: 12px; }
}