/* ==========================================================================
   bursayapitesisat.com — MOBİL TASARIM  (<= 1023px)
   ==========================================================================
   Masaüstü teması 2018 yapımı, 960px sabit genişlikte ve yoğun mutlak
   konumlandırma kullanıyor; küçültülerek mobile uydurulamıyor. Bu dosya
   mobil için sıfırdan kurulmuş ayrı bir düzendir.

   Masaüstü tasarımının kimliği korunur:
     · marka mavisi #0090c3, whatsapp yeşili #00b16a
     · su / dalga / kabarcık motifleri
     · Poppins + Dosis yazı tipleri
     · yuvarlatılmış kartlar, yumuşak gölgeler

   Yalnızca <=1023px'te devreye girer; masaüstüne hiç dokunmaz.
   bursa.css'ten SONRA yüklenmelidir.
   ========================================================================== */

/* Çağrı çubuğu her sayfanın HTML'inde var; masaüstünde gizli kalmalı.
   Bu kural bilinçli olarak media query'nin DIŞINDA. */
.mobil-cagri-cubugu { display: none; }


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

/* mobilde görünür ol */
.mobil-cagri-cubugu { display: flex; }

/* ------------------------------------------------------------ 0. DEĞİŞKENLER
   (özel özellikler tema dosyalarını etkilemez, sadece burada kullanılır) */
:root {
    --mavi:        #0090c3;
    --mavi-koyu:   #00688c;
    --lacivert:    #003a4e;
    --yesil:       #00b16a;
    --yesil-koyu:  #009156;
    --zemin:       #eef7fb;
    --kart:        #ffffff;
    --metin:       #24444f;
    --soluk:       #6b8a96;
    --golge:       0 6px 18px rgba(0, 58, 78, .10);
    --golge-buyuk: 0 12px 30px rgba(0, 58, 78, .16);
    --yuvarlak:    14px;
}

/* --------------------------------------------------------------- 1. TEMEL */
html { overflow-x: clip; }   /* hidden kok ogede kaydirmayi bozuyordu */
body {
    overflow-x: hidden;
    background: var(--zemin) !important;
    /* Sabit çağrı çubuğu için yer AYIRMIYORUZ: body'ye alt boşluk vermek
       koyu footer'ın altında açık renkli boş bir şerit bırakıyordu.
       Boşluğu footer'ın kendi padding'i karşılıyor (bkz. 10. bölüm). */
    padding-bottom: 0;
}
img { max-width: 100%; height: auto; }

/* temanın sabit yüksekliklerini topluca serbest bırak */
.header, .header > .kapsayici,
.banner_bg, .sayfa_kapsayici, .sayfa_bg,
.home_hizmetler, .home_makaleler,
footer, footer > .kapsayici {
    height: auto !important;
    min-height: 0 !important;
}
.kapsayici {
    width: auto !important; max-width: 100%;
    padding: 0 14px; box-sizing: border-box;
}

/* saf dekoratif, mobilde yeri yok */
.kurbagacik, .damla1, .damla2, .damla3,
.menux, .menu_dalga, .slider_maske,
.makale_adam, .tum_makaleler, #makele_pager,
.makale_slider article:after,
.footer_baloncuk1, .footer_baloncuk2, .footer_baloncuk3,
.footer_baloncuk4, .footer_baloncuk5, .footer_baloncuk6,
.footer_baloncuk7, .footer_baloncuk8, .footer_baloncuk9,
.boru-dirsek, .boru-damla, .boru-anahtar,
.goTop, .nicescroll-rails, .sol-menu-boru {
    display: none !important;
}


/* -------------------------------------------------------------- 2. HEADER
   Sayfa kaydırılırken üstte kalan ince, koyu bir çubuk. */
.header {
    position: sticky; top: 0; z-index: 900;
    padding: 8px 0 10px 0;
    /* masaustundeki tugla duvar kimligi mobilde de korunsun */
    background: #102c38 url('../images/tugla-duvar.jpg') repeat center top;
    background-size: 260px auto;
    box-shadow: 0 3px 14px rgba(0,0,0,.45);
    will-change: transform;   /* yapiskan header kendi katmaninda */
}
/* navbarin altindaki su seridi (masaustundeki menu dalgasinin karsiligi) */
.header > .kapsayici { position: relative; }
.header:before {
    content: ""; position: absolute; left: 0; bottom: -6px; height: 8px;
    width: 200%;                       /* iki kat genis: transform ile kaydirilir */
    background: url('../images/menu-dalga.png') repeat-x left bottom;
    background-size: auto 26px; opacity: .85;
    animation: mobDalga 9s linear infinite;
    will-change: transform;            /* kendi katmaninda kalsin */
    pointer-events: none;
}
/* background-position yerine transform: her karede boyama yapmaz */
@keyframes mobDalga {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); }
}
.header > .kapsayici {
    display: flex; align-items: center; gap: 10px;
}

.logo {
    position: relative !important; float: none !important;
    width: auto !important; max-width: 172px; height: auto !important;
    margin: 0 auto 0 0 !important; left: auto !important; top: auto !important;
    flex: 1 1 auto;
}
.logo a, .logo .peShiner { width: 100% !important; height: auto !important; }
.logo img {
    width: 100% !important; height: auto !important; max-height: 46px !important;
    object-fit: contain; object-position: left center; display: block;
}

/* header'daki whatsapp bloğu mobilde alttaki sabit çubuğa taşındı */
.header_whatsapp { display: none !important; }

/* --- hamburger --- */
.mobil-menu-btn {
    display: flex !important; align-items: center; justify-content: center;
    order: 3; flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0; margin: 0;
    background: rgba(255,255,255,.10);
    border: solid 1px rgba(255,255,255,.18); border-radius: 10px;
    color: #fff; font-size: 0; cursor: pointer;
    transition: background .2s ease;
}
.mobil-menu-btn:before {
    content: "☰"; font-size: 20px; line-height: 1; margin: 0;
}
.mobil-menu-btn[aria-expanded="true"] { background: var(--mavi); }
.mobil-menu-btn[aria-expanded="true"]:before { content: "✕"; font-size: 24px; }


/* ---------------------------------------------------------------- 3. MENÜ */
.menu {
    position: absolute !important; left: 0 !important; right: 0;
    top: 100% !important; width: 100% !important; height: auto !important;
    margin: 0; padding: 6px 12px 12px 12px; box-sizing: border-box;
    background: #102c38; border-radius: 0 0 16px 16px;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    display: none; z-index: 950;
}
.menu.menu-acik { display: block; animation: mobMenuAc .22s ease-out both; }
@keyframes mobMenuAc {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.menu > ul { display: block; }
.menu > ul > li {
    float: none; display: block; margin: 0; padding: 0; background: none;
    border-bottom: solid 1px rgba(255,255,255,.10);
}
.menu > ul > li:last-child { border-bottom: none; }
.menu > ul > li > a {
    display: block; padding: 13px 8px; color: #fff;
    font-family: "Poppins", Arial, sans-serif; font-size: .95em; font-weight: 500;
    text-decoration: none;
}
.menu > ul > li > a:active { color: #7fd4ee; }
/* alt menüler mobilde hep açık ve girintili */
.menu > ul > li ul {
    position: static !important; display: block !important;
    width: 100%; background: rgba(0,0,0,.22); border-radius: 10px;
    box-shadow: none; opacity: 1 !important; visibility: visible !important;
    left: auto !important; top: auto !important; margin: 0 0 8px 0; padding: 4px 0;
}
.menu > ul > li ul li { float: none; width: 100%; border: none; }
.menu > ul > li ul li a {
    display: block; padding: 10px 8px 10px 24px; color: #bfe6f5;
    font-size: .88em; text-decoration: none;
}
.menu > ul > li ul li a:before { content: "› "; opacity: .7; }


/* ------------------------------------------------------------ 4. HERO
   Ana sayfadaki slider: görselin üstüne koyu degrade + başlık + butonlar. */
.slider_kapsayici {
    position: relative !important; width: 100% !important;
    height: 230px !important; overflow: hidden;
    border-radius: 0 0 20px 20px; box-shadow: var(--golge-buyuk);
}
.slider_resimler { width: 100% !important; height: 230px !important; }
/* cycle.js kendi sarmalayıcı div'ine sabit px genişlik yazıyor */
.slider_kapsayici > div,
.slider_resimler > div, .slider_resimler .nailthumb-container {
    width: 100% !important; height: 230px !important;
    left: 0 !important; top: 0 !important;
}
.slider_resimler img, .sliderKes {
    width: 100% !important; height: 230px !important;
    object-fit: cover !important; margin: 0 !important;
}
/* okunabilirlik için karartma */
.slider_kapsayici:after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(4,26,36,.15) 0%, rgba(4,26,36,.72) 100%);
    border-radius: 0 0 20px 20px;
}

/* slider'ın hemen altındaki başlık */
.site_baslik {
    position: relative; z-index: 2;
    margin: -58px 14px 0 14px !important; padding: 0 0 14px 0 !important;
    color: #fff !important; text-align: center;
    font-family: "Dosis", Arial, sans-serif !important;
    font-size: 1.18em !important; font-weight: 700; line-height: 132% !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
    animation: mobYukari .5s ease-out both;
}

/* hero altına hızlı eylem butonları (mevcut DOM'dan üretilemeyeceği için
   başlığın altına dekoratif bir dalga şeridi koyuyoruz) */
.site_baslik:after {
    content: ""; display: block; width: 64px; height: 3px;
    margin: 12px auto 0 auto; border-radius: 3px;
    background: linear-gradient(90deg, transparent, #7fd4ee, transparent);
}


/* ------------------------------------------------- 5. BÖLÜM BAŞLIK DÜZENİ */
/* --------------------------------- 5. BOLUM ZEMINLERI (masaustu kimligi) */
.home_hizmetler {
    background: #0b2f3d url('../images/hizmetler-bg.jpg') no-repeat center top !important;
    background-size: cover !important;
    padding: 26px 0 14px 0 !important; margin: 0 0 4px 0 !important;
    position: relative;
}
/* bolumun ustunde su seridi */
.home_hizmetler:before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 14px;
    background: url('../images/menu-dalga.png') repeat-x center top;
    background-size: auto 30px; opacity: .5; pointer-events: none;
}
.home_makaleler {
    background: url('../images/dalga.jpg') no-repeat center top !important;
    background-size: cover !important;
    padding: 26px 0 20px 0 !important; margin: 0 !important;
}


/* ------------------------------------------------------- 6. HİZMET KARTLARI */
.home_hizmetler > .kapsayici > div {
    width: 100% !important; height: auto !important; float: none !important;
    position: relative; margin: 0 0 14px 0; padding: 20px 18px 18px 18px;
    box-sizing: border-box;
    background: rgba(255,255,255,.96) !important; border-radius: var(--yuvarlak);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    border-left: solid 4px var(--mavi);
    animation: mobYukari .5s ease-out both;
}
.home_hizmetler > .kapsayici > div:nth-child(1) { animation-delay: .05s; }
.home_hizmetler > .kapsayici > div:nth-child(2) { animation-delay: .13s; }
.home_hizmetler > .kapsayici > div:nth-child(3) { animation-delay: .21s; }
.home_hizmetler > .kapsayici > div:hover { background: var(--kart) !important; }

.home_hizmetler > .kapsayici > div h1,
.home_hizmetler > .kapsayici > div h2,
.home_hizmetler > .kapsayici > div h3 {
    width: auto !important; height: auto !important; text-align: left !important;
    margin: 0 0 8px 0 !important; padding: 0 !important;
}
.home_hizmetler > .kapsayici > div h1 a,
.home_hizmetler > .kapsayici > div h2 a,
.home_hizmetler > .kapsayici > div h3 a {
    width: auto !important; height: auto !important; display: block !important;
    margin: 0 !important; line-height: 128% !important; text-align: left !important;
    color: var(--lacivert) !important;
    font-family: "Dosis", Arial, sans-serif !important;
    font-size: 1.32em !important; font-weight: 700 !important;
    text-shadow: none !important; text-decoration: none;
}
.home_hizmetler > .kapsayici > div h1 a span,
.home_hizmetler > .kapsayici > div h2 a span,
.home_hizmetler > .kapsayici > div h3 a span {
    height: auto !important; display: block !important; line-height: 128% !important;
    vertical-align: baseline !important;
}
.home_hizmetler > .kapsayici > div p {
    color: var(--metin) !important; font-size: .86em !important;
    line-height: 168% !important; text-align: left !important;
    padding: 0 !important; margin: 0 0 14px 0 !important;
}
/* "Devamını Oku" -> hap buton */
.home_hizmetler > .kapsayici > div > a {
    display: inline-block !important; width: auto !important;
    margin: 0 !important; padding: 9px 18px !important;
    background: var(--mavi) !important; color: #fff !important;
    border-radius: 999px; font-size: .80em !important; font-weight: 600;
    text-decoration: none; box-shadow: 0 4px 12px rgba(0,144,195,.32);
}
.home_hizmetler > .kapsayici > div:hover > a { background: var(--mavi-koyu) !important; }


/* ------------------------------------------------------- 7. BÖLGE KARTLARI */
.makale_slider_kapsayici, .makale_slider {
    width: 100% !important; height: auto !important;
}
.makale_slider article {
    box-shadow: 0 10px 26px rgba(0,0,0,.24) !important;
    width: 100% !important; height: auto !important;
    position: relative !important; left: auto !important; top: auto !important;
    margin: 0 0 16px 0; background: var(--kart); border-radius: var(--yuvarlak);
    overflow: hidden; box-shadow: var(--golge);
    animation: mobYukari .5s ease-out both;
}
.makale_resim {
    width: 100% !important; height: auto !important; position: relative !important;
    background: none !important; outline: none !important; box-shadow: none !important;
    overflow: hidden;
}
.makale_resim .nailthumb-container,
.makale_resim .nailthumb-container img,
.makale_resim img {
    width: 100% !important; height: 172px !important;
    object-fit: cover !important;
    position: relative !important; left: 0 !important; top: 0 !important;
}
/* tema bu kutuyu right:-120px ile dışarı taşırıyordu */
.makale_text {
    width: 100% !important; height: auto !important;
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important;
    padding: 16px !important; box-sizing: border-box;
    background: var(--kart) !important; box-shadow: none !important;
}
.makale_text h4 {
    color: var(--lacivert) !important; text-align: left !important;
    font-family: "Dosis", Arial, sans-serif !important;
    font-size: 1.22em !important; font-weight: 700 !important;
    background: none !important; padding: 0 0 10px 0 !important; margin: 0 0 8px 0 !important;
    border-bottom: solid 1px #e2eef4;
}
.makale_text p {
    color: var(--metin) !important; text-align: left !important;
    font-size: .85em !important; font-weight: 400 !important; line-height: 168% !important;
    margin: 0 0 14px 0;
}
.makale_text a {
    display: inline-block !important; width: auto !important; height: auto !important;
    background: var(--mavi) !important; color: #fff !important;
    padding: 9px 18px !important; border-radius: 999px; line-height: normal !important;
    font-size: .80em !important; font-weight: 600; text-decoration: none;
    margin: 0 !important; box-shadow: 0 4px 12px rgba(0,144,195,.32);
}


/* --------------------------------------------------- 8. İLETİŞİM PANELİ */
#home_iletisim {
    width: auto !important; margin: 4px 14px 10px 14px !important;
    padding: 22px 18px !important; box-sizing: border-box;
    background: linear-gradient(160deg, var(--mavi) 0%, var(--mavi-koyu) 100%) !important;
    border-radius: 18px; box-shadow: var(--golge-buyuk);
    animation: mobYukari .5s ease-out both;
}
#home_iletisim h3 {
    font-family: "Dosis", Arial, sans-serif !important;
    font-size: 1.42em !important; margin-bottom: 6px !important;
}
#home_iletisim p.alt { font-size: .84em !important; margin-bottom: 18px !important; }
#home_iletisim ul { display: block !important; margin: 0 0 16px 0 !important; }
#home_iletisim li {
    width: 100% !important; float: none !important; margin: 0 0 9px 0 !important;
    min-height: 0 !important; background: rgba(255,255,255,.13) !important;
    border-left: solid 4px rgba(255,255,255,.55) !important; border-radius: 10px;
    padding: 11px 14px !important; font-size: .84em !important;
}
#home_iletisim .butonlar a {
    display: block !important; margin: 0 0 10px 0 !important;
    padding: 14px 18px !important; border-radius: 12px;
    font-size: .95em !important; font-weight: 600;
}
#home_iletisim .ara { background: var(--yesil) !important; }
#home_iletisim .wp  { background: rgba(255,255,255,.18) !important; border: solid 1px rgba(255,255,255,.35); }


/* ------------------------------------------------------- 9. İÇ SAYFA DÜZENİ */
.banner_bg { padding: 12px 0 0 0 !important; margin: 0 !important; }
.breadCrumb {
    display: flex; flex-wrap: wrap; gap: 4px 6px;
    margin: 0 0 12px 0 !important; padding: 0;
}
.breadCrumb li { list-style: none; font-size: .72em; color: var(--soluk); }
.breadCrumb li a { color: var(--soluk); text-decoration: none; }
.breadCrumb li + li:before { content: "› "; color: #b6ccd6; }

.banner { margin: 0 !important; }
.banner img, .banner .banner_kes {
    width: 100% !important; height: 168px !important; object-fit: cover !important;
    border-radius: var(--yuvarlak); box-shadow: var(--golge);
}

.sayfa_kapsayici { margin: 14px 0 24px 0 !important; }
/* HTML'de sol menü içerikten önce geliyor; mobilde içeriği öne alıyoruz */
.sayfa_bg {
    width: 100% !important; background: none !important;
    display: flex; flex-direction: column; padding: 0 !important;
    overflow: visible !important;
}
.orta_blok {
    order: 1; width: 100% !important; float: none !important;
    box-sizing: border-box; margin: 0 0 16px 0;
    padding: 20px 16px !important;
    background: var(--kart); border-radius: var(--yuvarlak); box-shadow: var(--golge);
    animation: mobYukari .45s ease-out both;
}
.sol_blok {
    order: 2; width: 100% !important; float: none !important;
    padding: 0 !important; box-sizing: border-box;
}

/* içerik tipografisi */
.orta_blok .text h1 {
    font-family: "Dosis", Arial, sans-serif !important;
    font-size: 1.42em !important; line-height: 128% !important;
    color: var(--lacivert) !important; margin: 0 0 12px 0 !important;
}
.orta_blok .text h1:after {
    content: ""; display: block; width: 54px; height: 3px; border-radius: 3px;
    margin-top: 10px; background: var(--mavi);
}
.orta_blok .text h2 {
    font-size: 1.12em !important; line-height: 138% !important;
    color: var(--mavi) !important; margin: 22px 0 8px 0 !important;
}
.orta_blok .text h3 { font-size: .98em !important; margin: 16px 0 6px 0 !important; }
.orta_blok .text p {
    font-size: .88em !important; line-height: 178% !important;
    color: var(--metin) !important; text-align: left !important;
}
.orta_blok .text p.cta {
    background: #e6f5fb !important; border-left: solid 4px var(--mavi);
    border-radius: 10px; padding: 13px 15px !important; font-size: .86em !important;
}
.orta_blok .text ul.listele { margin: 0 0 18px 16px !important; }
.orta_blok .text ul.listele li { font-size: .86em !important; line-height: 168% !important; }
/* uzun mahalle/ilçe listeleri: tek sütun, dokunması kolay satırlar */
.orta_blok .text ul.mahalle-liste,
.orta_blok .text ul.ilce-liste {
    columns: 1 !important; margin: 0 0 18px 0 !important; padding: 0;
}
.orta_blok .text ul.mahalle-liste li,
.orta_blok .text ul.ilce-liste li {
    list-style: none !important; margin: 0 !important;
    border-bottom: solid 1px #eaf3f7;
}
.orta_blok .text ul.mahalle-liste li a,
.orta_blok .text ul.ilce-liste li a {
    display: block; padding: 11px 4px; color: var(--mavi) !important;
    text-decoration: none; font-size: 1em;
}
.orta_blok .text ul.mahalle-liste li a:after,
.orta_blok .text ul.ilce-liste li a:after { content: " ›"; color: #b6ccd6; float: right; }
.orta_blok .text a.tag {
    padding: 8px 15px !important; border-radius: 999px !important; font-size: .76em !important;
}

/* sol menü: kart görünümlü liste */
.yan_menu {
    left: 0 !important; background: var(--kart) !important;
    border-radius: var(--yuvarlak); overflow: hidden; box-shadow: var(--golge);
    margin: 0;
}
.yan_menu li { border-top: none !important; border-bottom: solid 1px #eef5f8 !important; }
.yan_menu li:last-child { border-bottom: none !important; }
.yan_menu li a {
    display: block; padding: 13px 15px !important; color: var(--lacivert) !important;
    font-size: .88em !important; text-decoration: none;
}
.yan_menu li a.active { background: #e6f5fb !important; color: var(--mavi) !important; font-weight: 600; }

.yan_menu_call { margin: 14px 0 0 0 !important; }
.yan_menu_call a {
    font-size: 1.5em !important; padding: 15px 12px !important; border-radius: 12px !important;
}


/* --------------------------------------------------------------- 10. FOOTER */
footer {
    background: #102c38 !important; margin-top: 24px;
    /* alt padding, sabit çağrı çubuğunun yüksekliğini (66px) karşılar;
       böylece koyu footer sayfanın en altına kadar iner, açık şerit kalmaz */
    padding: 26px 0 84px 0 !important;
    border-radius: 22px 22px 0 0;
}
/* Tema footer sütunlarını float'luyor. Float'lar temizlenmediği için telif
   bloğu footer'ın dışına taşıyordu (footer 1364px, blok 300px altında).
   flow-root float'ları kapsar, clear ise telif satırını en alta indirir. */
footer > .kapsayici { display: flow-root; }
.reserved { clear: both; }
.footer_whatsapp {
    width: auto !important; height: auto !important;
    display: block; margin: 0 14px 22px 14px !important;
    padding: 15px 16px !important; box-sizing: border-box;
    background: var(--yesil) !important; border-radius: 14px;
    color: #fff !important; text-align: center;
    font-family: "Dosis", Arial, sans-serif !important;
    font-size: 1.45em !important; font-weight: 700;
    box-shadow: 0 8px 20px rgba(0,177,106,.35);
    text-decoration: none;
}
.footer_whatsapp span {
    display: block; font-family: "Poppins", Arial, sans-serif !important;
    font-size: .44em !important; font-weight: 400; opacity: .92; margin-bottom: 4px;
}
.footerSosyal, .footerMenu, .footer_iletisim {
    width: auto !important; float: none !important;
    position: relative !important; left: auto !important; top: auto !important;
    height: auto !important; margin: 0 14px 20px 14px !important;
}
.footerSosyal h3, .footerMenu h3, .footer_iletisim h3 {
    color: #fff !important; font-family: "Dosis", Arial, sans-serif !important;
    font-size: 1.18em !important; margin: 0 0 10px 0 !important;
    padding-bottom: 8px; border-bottom: solid 1px rgba(255,255,255,.14);
}
.footerSosyal ul, .footerMenu ul, .footer_iletisim ul { background: none !important; margin: 0; padding: 0; }
.footerSosyal li, .footerMenu li, .footer_iletisim li {
    list-style: none; font-size: .86em !important; line-height: 165%;
    color: #b9d4de !important; margin-bottom: 7px;
}
.footerMenu li a, .footer_iletisim li a { color: #b9d4de !important; text-decoration: none; }
/* Instagram: tema bu butona -webkit-mask-image uyguluyor ve 35x35'e
   sabitliyor; maske ikonu kirpiyordu. Maskeyi kaldirip temiz buton yapiyoruz. */
.footerSosyal ul li a.footer_instagram {
    -webkit-mask-image: none !important; mask-image: none !important;
    -webkit-mask: none !important; mask: none !important;
    width: 44px !important; height: 44px !important; line-height: 44px !important;
    border-radius: 12px !important; margin: 0 0 8px 0 !important;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 55%, #fcb045 100%) !important;
    display: inline-block !important; text-align: center; color: #fff !important;
}
.footerSosyal ul li a.footer_instagram i {
    width: 44px !important; height: 44px !important; line-height: 44px !important;
    font-size: 21px !important; color: #fff !important; display: block !important;
}
.footerSosyal ul li a.footer_instagram:hover { transform: none !important; opacity: .9; }
.footerSosyal ul { background: none !important; width: auto !important;
                   min-height: 0 !important; margin: 0 !important; }
/* performans: mobilde gereksiz surekli animasyon */
.footer_whatsapp:after { animation: none !important; }
.footer_iletisim li i.material-icons { color: var(--mavi) !important; margin-right: 6px; vertical-align: middle; }
/* Tema: .reserved { position:absolute; top:395px }. position'ı relative
   yapmak yetmiyordu — relative'de top hâlâ öğeyi 395px aşağı kaydırıyor ve
   telif satırı footer'ın dışına taşıyordu. Ofsetlerin hepsini sıfırlıyoruz. */
.reserved {
    position: relative !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    width: auto !important; margin: 6px 14px 0 14px; padding: 14px 0 0 0;
    box-sizing: border-box; border-top: solid 1px rgba(255,255,255,.12);
}
.reserved p { font-size: .68em !important; line-height: 168% !important; color: #8fb0bd !important; }
.reserved a { color: #b9d4de !important; }


/* ------------------------------------------- 11. SABİT ALT EYLEM ÇUBUĞU
   Tesisat gibi "hemen ara" işlerinde mobilin en dönüştürücü öğesi.
   Mevcut DOM'a dokunmadan, footer'daki whatsapp linkinin bir kopyası
   yerine ::after ile değil, gövdeye sabitlenmiş bir şerit kuruyoruz. */
/* Zemin şeridini çubuğun kendisine veriyoruz; ayrı bir body:after katmanı
   gereksizdi (ve zaten uygulanmıyordu). */
.mobil-cagri-cubugu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 941;
    display: flex; gap: 10px; padding: 10px 12px; box-sizing: border-box;
    background: #ffffff; box-shadow: 0 -4px 18px rgba(0,58,78,.16);
}
.mobil-cagri-cubugu a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    gap: 7px; height: 46px; border-radius: 12px; text-decoration: none;
    font-family: "Poppins", Arial, sans-serif; font-size: .92em; font-weight: 600;
    color: #fff;
}
.mobil-cagri-cubugu .cb-ara { position: relative; background: var(--mavi); box-shadow: 0 5px 14px rgba(0,144,195,.35); }
/* nabiz artik opacity+transform ile: sabit cubukta boyama yapmaz */
.mobil-cagri-cubugu .cb-ara:after {
    content: ""; position: absolute; inset: -3px; border-radius: 14px;
    border: solid 2px rgba(255,255,255,.8); opacity: 0;
    animation: mobNabiz 2.8s ease-in-out infinite;
    will-change: opacity, transform; pointer-events: none;
}
.mobil-cagri-cubugu .cb-wp  { background: var(--yesil); box-shadow: 0 5px 14px rgba(0,177,106,.35); }
.mobil-cagri-cubugu .cb-ara:active { background: var(--mavi-koyu); }
.mobil-cagri-cubugu .cb-wp:active  { background: var(--yesil-koyu); }
.mobil-cagri-cubugu i.material-icons { font-size: 19px; }
/* hafif nabız: dikkat çeker ama rahatsız etmez */



/* ----------------------------------------------------------- 12. ANİMASYON */
@keyframes mobYukari {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mobNabiz {
    0%, 100% { opacity: 0; transform: scale(1); }
    50%      { opacity: .55; transform: scale(1.06); }
}

/* hareket azaltma tercihini olan cihazlarda animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    .home_hizmetler > .kapsayici > div,
    .makale_slider article, #home_iletisim, .orta_blok, .site_baslik,
    .menu.menu-acik, .mobil-cagri-cubugu .cb-ara {
        animation: none !important;
    }

}


/* --------------------------------------------------- 13. ÇOK DAR TELEFONLAR */
@media screen and (max-width: 360px) {
    .logo { max-width: 148px; }
    .logo img { max-height: 40px !important; }
    .site_baslik { font-size: 1.05em !important; }
    .mobil-cagri-cubugu a { font-size: .85em; }
}



/* ==========================================================================
   14. TAM EKRAN ACILIR MENU  +  BORUDAN SARKAN ANAHTAR
   ========================================================================== */
.menu {
    position: fixed !important; left: 0 !important; right: 0;
    top: 0 !important; bottom: 0;
    width: 100% !important; height: 100% !important;
    margin: 0; padding: 84px 22px 96px 22px; box-sizing: border-box;
    /* tugla duvar zemini + okunabilirlik icin koyu katman */
    background: #0b1f28 url('../images/tugla-duvar.jpg') repeat center top;
    background-size: 340px auto;
    border-radius: 0; box-shadow: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: none; z-index: 1000;
}
.menu:before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,22,29,.62) 0%, rgba(8,22,29,.74) 100%);
    pointer-events: none;
}
.menu > ul { position: relative; z-index: 1; }
.menu.menu-acik { display: block; animation: mobMenuAc .28s ease-out both; }
@keyframes mobMenuAc { from { opacity: 0; } to { opacity: 1; } }

/* kapatma (X) dugmesi */
.mobil-menu-btn[aria-expanded="true"] {
    position: fixed; top: 14px; right: 14px; z-index: 1001;
    background: transparent; border-color: transparent;
}
.mobil-menu-btn[aria-expanded="true"]:before { content: "✕"; font-size: 24px; }

.menu > ul { display: block; max-width: 420px; margin: 0 auto; }
.menu > ul > li { border-bottom: solid 1px rgba(255,255,255,.10); }
.menu > ul > li > a {
    padding: 16px 4px !important; font-size: 1.12em !important; font-weight: 500;
    letter-spacing: .01em;
}
.menu > ul > li ul { background: transparent; margin: 0 0 6px 0; }
.menu > ul > li ul li a { padding: 11px 4px 11px 20px !important; font-size: .96em !important; }

/* --- navbardan sarkan BORU + DIRSEK + DAMLAYAN SU + ANAHTAR ---
   Masaustunde header gorselinde boru dirsek yapip su damlatiyor; mobilde
   ayni detayi CSS ile kuruyoruz (tema varligi: kurbagacik.png). */
.header:after { content: none; }
.header > .kapsayici:after { content: none; }
.header > .kapsayici:before { content: none; }
@keyframes suDamlasi {
    0%   { transform: translateY(0) scale(.5); opacity: 0; }
    18%  { transform: translateY(0) scale(1);  opacity: 1; }
    100% { transform: translateY(54px) scale(.75); opacity: 0; }
}
.mobil-anahtar {
    position: absolute; right: 8px; top: 100%; margin-top: 30px;
    width: 58px; height: 66px;
    background: url('../images/kurbagacik.png') no-repeat center / contain;
    transform-origin: 62% -22px;
    animation: anahtarSalla 3.8s ease-in-out infinite;
    z-index: 6; pointer-events: none;
    will-change: transform;
}
@keyframes anahtarSalla {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}
    50%      { transform: rotate(8deg); }

/* ===================== TEK PARCA BORU (SVG) =========================
   Onceki cozum sozde-ogelerle kuruluydu ve .kapsayici flex kapsayici
   oldugu icin dirsek bazi tarayicilarda cizilmiyordu. Boru artik tek
   bir SVG: dik iner, yuvarlak dirsekle saga doner, ucunda anahtar var. */
.tesisat-boru {
    display: block; position: absolute; right: 66px; top: 100%; margin-top: -4px;
    width: 96px; height: 104px; z-index: 6; pointer-events: none;
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%20104%22%20width%3D%2296%22%20height%3D%22104%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22m%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235c666c%22%2F%3E%3Cstop%20offset%3D%22.30%22%20stop-color%3D%22%23dbe3e8%22%2F%3E%20%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23a9b3b9%22%20%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23596369%22%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22m2%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235c666c%22%2F%3E%3Cstop%20offset%3D%22.30%22%20stop-color%3D%22%23dbe3e8%22%2F%3E%20%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23a9b3b9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23596369%22%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Cpath%20d%3D%22M18%200%20V46%22%20stroke%3D%22url%28%23m%29%22%20stroke-width%3D%2217%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M18%2044%20Q18%2062%2036%2062%20H88%22%20stroke%3D%22url%28%23m2%29%22%20stroke-width%3D%2217%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Crect%20x%3D%229%22%20y%3D%2230%22%20width%3D%2218%22%20height%3D%227%22%20rx%3D%222%22%20fill%3D%22%238f9aa1%22%2F%3E%20%3Crect%20x%3D%2270%22%20y%3D%2253%22%20width%3D%227%22%20height%3D%2218%22%20rx%3D%222%22%20fill%3D%22%238f9aa1%22%2F%3E%20%3C%2Fsvg%3E") no-repeat left top / contain;
}
/* Damla, borunun yatay ucundan duser.
   Boru kutusu: right:66px, 96x104 -> yatay uc SVG icinde x=88/96, y=62/104.
   390px ekranda uc noktasi (316,120); damla 8px genis, ortalanmis. */
.tesisat-damla {
    display: block; position: absolute; right: 70px; top: 100%; margin-top: 58px;
    width: 8px; height: 11px; z-index: 5; pointer-events: none;
    background: radial-gradient(circle at 35% 30%, #9fe8ff 0%, #29bdec 55%, #0d9ccb 100%);
    border-radius: 50% 50% 58% 58% / 62% 62% 38% 38%;
    box-shadow: 0 0 7px rgba(41,189,236,.6);
    animation: suDamlasi 2.8s cubic-bezier(.5,0,.9,.6) infinite;
}
/* Anahtarin AGZI borunun ucunu kavramali. kurbagacik.png icinde agiz
   yaklasik x=%35, y=%40 konumunda; 56x64 ogede bu (20,26) demek.
   Uc (316,120) oldugundan oge sol-ust (296,94) -> right:38px, margin-top:32px. */
.mobil-anahtar {
    display: block !important; position: absolute !important; right: 38px !important; top: 100% !important;
    margin-top: 32px !important;
    width: 56px !important; height: 64px !important;
    transform-origin: 62% -14px;
}

/* --- yuzen kabarciklar (masaustundeki damla/baloncuk motifi) --- */
.slider_kapsayici:before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        radial-gradient(circle, rgba(255,255,255,.55) 0 3px, transparent 4px) 12% 78%/120px 120px,
        radial-gradient(circle, rgba(255,255,255,.40) 0 2px, transparent 3px) 78% 62%/90px 90px,
        radial-gradient(circle, rgba(255,255,255,.30) 0 2px, transparent 3px) 45% 88%/150px 150px;
    background-repeat: no-repeat;
    animation: mobKabarcik 6s ease-in-out infinite;
}
@keyframes mobKabarcik {
    0%, 100% { transform: translateY(0);    opacity: .75; }
    50%      { transform: translateY(-14px); opacity: 1; }
}

/* ==========================================================================
   15. ILCE KART IZGARASI - mobil
   ========================================================================== */
.orta_blok .text ul.ilce-kart-izgara {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px !important; margin: 0 0 22px 0 !important;
}
.ilce-kart-resim { border-width: 2px; }
.ilce-kart-ad { font-size: .76em !important; margin-top: 8px; }

.orta_blok .text ul.anahtar-kelimeler { gap: 6px; margin-left: 0 !important; }
.orta_blok .text ul.anahtar-kelimeler li a { font-size: .70em; padding: 6px 11px; }


/* --- KAYDIRMA PERFORMANSI ---
   Mahalle sayfalari 6000px+ olabiliyor. content-visibility ile tarayici
   ekran disindaki bolumleri hic render etmez; kaydirma belirgin hizlanir.
   contain-intrinsic-size kaydirma cubugunun ziplamasini onler. */
.home_hizmetler { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.home_makaleler { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
footer          { content-visibility: auto; contain-intrinsic-size: auto 1300px; }
.sol_blok       { content-visibility: auto; contain-intrinsic-size: auto 800px; }
} /* @media <=1023px sonu */

@media screen and (max-width: 360px) {
    .orta_blok .text ul.ilce-kart-izgara { grid-template-columns: 1fr !important; }
    /* dar ekranda boru/anahtar biraz kucultulur ki tasmasin */
    .tesisat-boru   { right: 58px; width: 84px; height: 91px; }
    .tesisat-damla  { right: 62px; margin-top: 50px; }
    .mobil-anahtar  { right: 32px !important; margin-top: 27px !important;
                      width: 50px !important; height: 57px !important; }
}