/* ==========================================================================
   bursayapitesisat.com — tema düzeltmeleri + mobil tasarım
   style.css'ten SONRA yüklenir, aynı seçicilerde bu dosya kazanır.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. LOGO
   Logo dosyası yeniden kırpıldı: gerçek çizim 1504×253 (5.94:1) geniş bir
   banner. Artık 453px'lik yuvanın tam genişliğini doldurup 76px yükseliyor.
   Yüksekliği sabitlemek yerine genişliği veriyoruz, yoksa 5.94:1 oranındaki
   logo 118px yükseklikte ~700px genişleyip yuvadan taşardı. */
.logo { display: flex; align-items: center; }
.logo a { width: 100%; }
/* shiner eklentisi .peShiner'a satır içi width/height yazıyor (eklenti
   çalıştığı andaki eski logo ölçüsü: 201x122) ve logoyu oraya hapsediyor.
   Satır içi stili ancak !important geçebilir. Eklentinin canvas'ı da boş
   çiziyor (tek bir opak piksel yok), o yüzden kaldırıyoruz. */
.logo .peShiner { width: 100% !important; height: auto !important; }
.logo .peShiner canvas { display: none !important; }
.logo img, .peShiner img {
    width: 100%;
    height: auto;
    max-height: 118px;
    display: block;
    margin: 0 !important;
}
/* .logo_isik, temanın logo üstüne koyduğu ikinci ("parlama") katmanı.
   Buraya logoyu arka plan olarak vermek logoyu iki kez çizdiriyor: katman
   453px geniş ve background-size:contain ile ortalandığı için kopya,
   asıl <img>'in ~128px sağına kayık olarak beliriyordu. Katmanı kaldırıyoruz. */
.logo_isik { display: none !important; }

/* ------------------------------------------------- 2. SAYFA İÇİ BOŞLUKLAR */
.sayfa_bg  { min-height: 0; overflow: hidden; padding: 0 0 26px 0; }
.sol_blok  { min-height: 0; padding-bottom: 20px; }
.orta_blok { min-height: 0; padding: 26px 30px 30px 30px; }
.sayfa_kapsayici { margin-top: 10px; margin-bottom: 40px; }

/* --------------------------------------------------- 3. İÇERİK TİPOGRAFİSİ */
.orta_blok .text ul.listele { margin: 0 0 22px 18px; }
.orta_blok .text ul.listele li {
    list-style: disc; color: #003a4e; font-size: .90em;
    line-height: 175%; margin-bottom: 7px;
}
.orta_blok .text ul.listele li a { color: #0090c3; text-decoration: none; }
.orta_blok .text ul.listele li a:hover { text-decoration: underline; }

.orta_blok .text ul.mahalle-liste,
.orta_blok .text ul.ilce-liste { columns: 3; column-gap: 24px; margin-left: 18px; }
.orta_blok .text ul.hizmet-liste { columns: 1; }
.orta_blok .text ul.mahalle-liste li,
.orta_blok .text ul.ilce-liste li { break-inside: avoid; }

.orta_blok .text p.cta {
    background: #e3f4fa; border-left: solid 5px #0090c3; border-radius: 4px;
    padding: 14px 16px; margin-bottom: 22px; font-size: .92em;
}
.orta_blok .text p.cta a { color: #0090c3; font-weight: 600; text-decoration: none; }
.orta_blok .text p.cta a:hover { text-decoration: underline; }
.orta_blok .text a.tag {
    display: inline-block; background: #0090c3; color: #fff; border-radius: 4px;
    padding: 7px 14px; font-size: .78em; text-decoration: none; margin-bottom: 18px;
}
.orta_blok .text a.tag:hover { background: #006e95; }
.orta_blok .text h3 { font-size: 1.02em; margin-top: 18px; }

/* --------------------------------------------- 4. ANA SAYFA İLETİŞİM PANELİ */
#home_iletisim, #home_iletisim * { box-sizing: border-box; }
#home_iletisim ul { display: flex; flex-wrap: wrap; justify-content: center; }
#home_iletisim li { width: 270px; float: none; margin: 0 8px 12px 8px; min-height: 74px; }

/* -------------------------------------------------------- 5. GENEL GÜVENLİK */
img { max-width: 100%; }
/* tema html/body'ye min-width:960px veriyor: mobilde sayfanın 960px kalmasının
   ve yatay kaydırmanın asıl sebebi buydu */
html, body { min-width: 0 !important; }

/* banner görselini jquery.nailthumb kırpıp satır içi px ölçü yazıyor */
.banner .nailthumb-container { width: 100% !important; height: auto !important; max-height: 340px; }
.banner .nailthumb-container img {
    width: 100% !important; height: auto !important;
    position: relative !important; left: 0 !important; top: 0 !important; margin: 0 !important;
}
.nailthumb-title { display: none !important; }


/* ============================== 6. EKSİK TEMA GÖRSELLERİ ==================
   Aşağıdaki öğelerin arka plan görselleri arşivde yok. Tema onlara sabit
   yükseklik verdiği için boş blok olarak duruyorlardı. */

/* "Bizi Arayın": 243×418px boş blok yerine gerçek buton.
   function.js bu öğeye satır içi margin-top enjekte ediyor (~366px), !important
   ile geçersiz kılıyoruz. */
.yan_menu_call {
    width: 100%; height: auto; background: none; position: relative;
    margin-top: 18px !important; left: 0;
}
.yan_menu_call a {
    position: relative; margin: 0;
    display: block; background: #00b16a; color: #fff; text-align: center;
    padding: 14px 12px; border-radius: 5px; text-decoration: none;
    font-family: "Dosis", Arial, sans-serif; font-weight: 700; font-size: 1.45em;
    line-height: 115%; box-shadow: 0 6px 16px rgba(0,0,0,.18);
    transition: background .2s ease;
}
.yan_menu_call a:hover { background: #009156; }
.yan_menu_call a span {
    display: block; font-family: "Poppins", Arial, sans-serif;
    font-weight: 400; font-size: .42em; letter-spacing: .02em;
    text-transform: uppercase; opacity: .9; margin-bottom: 3px;
}

/* tamamen dekoratif, görselleri yok: ayrılan alanı geri al */
.sol-menu-boru, .yan_menu:after, .sayfa_bg:after,
.sayfa_alt, .sayfa_alt:after, .sayfa_golge, .kuvet,
.listele_sayfa div:after, .iletisim_kadin, .telefon_mail,
.iletisim_telefon_buyuk, .iletisim_sayfa_alt, .lavalamp-object {
    display: none !important;
}

/* banner: 480px'lik arka plan görseli yok, yüksekliği içerik belirlesin */
.banner_bg { height: auto; min-height: 0; background: none; margin: 18px 0 0 0; padding: 0 0 10px 0; }
.banner_bg .kapsayici { padding-top: 6px; }
/* tema .banner'ı position:absolute + height:380px yapıyordu; akışa alıyoruz */
.banner {
    position: relative; width: 100%; height: auto; margin-top: 0;
    background: none; box-shadow: none; overflow: visible; text-align: center;
}
.banner img, .banner .banner_kes {
    width: 100%; height: auto; max-height: 340px; object-fit: cover;
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.breadCrumb { margin-bottom: 12px; }

/* hizmet kutusu hover görseli yok: renkle vurgula */
.home_hizmetler > .kapsayici > div:nth-child(1):hover,
.home_hizmetler > .kapsayici > div:nth-child(2):hover,
.home_hizmetler > .kapsayici > div:nth-child(3):hover {
    background: rgba(255,255,255,.10) !important; border-radius: 8px;
}


/* ==========================================================================
   7. MOBİL MENÜ BUTONU  (markup her sayfada var, sadece mobilde görünür)
   ========================================================================== */
.mobil-menu-btn { display: none; }
/* mobil boru/anahtar ogeleri masaustunde gizli (masaustunun kendi borusu var) */
.tesisat-boru, .tesisat-damla, .mobil-anahtar { display: none; }


/* ==========================================================================
   TABLET  (<= 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* tema 960px'lik sabit tasarımı 1024-1163px aralığında bile taşırıyor
       (menü 941px + dekoratif kurbagacık/damla negatif margin); dikey
       kaydırma çubuğu çıkmasın diye taşan kısımları gizliyoruz. */
    html { overflow-x: clip; }   /* hidden kok ogede kaydirmayi bozuyordu */
    body { overflow-x: hidden; }
    .kapsayici { width: auto; max-width: 960px; padding: 0 15px; box-sizing: border-box; }
    .home_hizmetler { min-width: 0; }
    .sayfa_bg { width: auto; }
    .sol_blok { width: 240px; }
    .orta_blok { width: calc(100% - 260px); padding: 25px; box-sizing: border-box; }
    .makale_slider article:after { display: none; }
}


/* ==========================================================================
    MOBİL  (<= 1023px)
    Tema mutlak konumlandırma ve sabit yükseklikler üzerine kurulu. Mobilde
    bunların tamamını etkisizleştirip normal blok akışına geçiyoruz; renkler,
    yazı tipleri ve bölüm sırası korunuyor.
    ========================================================================== */

/* Mobil (<=1023px) tasarımı ayrı dosyada: css/mobil.css
   Bu dosya yalnızca masaüstü/tablet düzeltmelerini içerir. */

/* ==========================================================================
   8. İLÇE KART IZGARASI  (liste sayfaları)
   Orijinal sitedeki oval resimli ilçe kartlarının Bursa karşılığı.
   ========================================================================== */
.orta_blok .text ul.ilce-kart-izgara {
    list-style: none; margin: 0 0 26px 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 16px;
}
.ilce-kart a {
    display: block; text-decoration: none; text-align: center;
}
.ilce-kart-resim {
    display: block; width: 100%; aspect-ratio: 3 / 2;
    overflow: hidden; border-radius: 50%;          /* oval çerçeve */
    box-shadow: 0 6px 16px rgba(0,58,78,.18);
    border: solid 3px #fff; background: #dbeef7;
}
.ilce-kart-resim img {
    width: 100%; height: 100%;
    object-fit: cover;                              /* alanı tam doldursun, taşan kısım kırpılsın */
    object-position: center;
    display: block; transition: transform .35s ease;
}
.ilce-kart a:hover .ilce-kart-resim img { transform: scale(1.07); }
.ilce-kart-ad {
    display: block; margin-top: 10px; color: #0090c3;
    font-family: "Poppins", Arial, sans-serif; font-size: .82em;
    font-weight: 500; line-height: 140%;
}
.ilce-kart a:hover .ilce-kart-ad { color: #006e95; text-decoration: underline; }

/* ------------------------------------------- ANAHTAR KELİME BÖLÜMÜ --------
   Orijinal sitede bu liste text-indent:-9999px ile gizliydi (cloaking, ceza
   riski). Burada görünür bir etiket bulutu olarak sunuluyor. */
.orta_blok .text ul.anahtar-kelimeler {
    list-style: none; margin: 0 0 24px 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 7px;
}
.orta_blok .text ul.anahtar-kelimeler li { margin: 0; }
.orta_blok .text ul.anahtar-kelimeler li a {
    display: inline-block; padding: 6px 12px;
    background: #eaf5fa; color: #00688c; border: solid 1px #d3e9f3;
    border-radius: 999px; font-size: .74em; line-height: 130%;
    text-decoration: none; transition: background .18s ease, color .18s ease;
}
.orta_blok .text ul.anahtar-kelimeler li a:hover {
    background: #0090c3; color: #fff; border-color: #0090c3;
}


/* ==========================================================================
   9. NAVBARDAN INEN BORU + DIRSEK  (masaustu)
   Su seridinin sagindan dik inen boru, sonra 90 derece dirsek yapip
   ucunda anahtar sallaniyor. Mobilde ayni detay mobil.css'te kuruluyor.
   ========================================================================== */
.header { position: relative; }
.header .boru-dirsek { position: absolute; right: 60px; left: auto; top: 249px; width: 130px; height: 140px; z-index: 4; 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; filter: drop-shadow(0 4px 9px rgba(0,0,0,.45)); }


.header .boru-anahtar { position: absolute; right: 22px; left: auto; top: 299px; width: 75px; height: 83px; z-index: 5; pointer-events: none; background: url('../images/kurbagacik.png') no-repeat center / contain; transform-origin: 70% -12px; animation: boruAnahtarSalla 3.8s ease-in-out infinite; filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)); }
@keyframes boruAnahtarSalla {
    0%, 100% { transform: rotate(-7deg); }
    50%      { transform: rotate(7deg); }
}
.header .boru-damla { position: absolute; right: 67px; left: auto; top: 336px; width: 9px; height: 12px; 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 8px rgba(41,189,236,.65); animation: boruSuDamlasi 2.8s cubic-bezier(.5,0,.9,.6) infinite; z-index: 4; pointer-events: none; }
@keyframes boruSuDamlasi {
    0%   { transform: translateY(0) scale(.5); opacity: 0; }
    18%  { transform: translateY(0) scale(1);  opacity: 1; }
    100% { transform: translateY(72px) scale(.75); opacity: 0; }
}

/* ---- Instagram butonu: tema maskesi ikonu kirpiyordu ---- */
.footerSosyal ul li a.footer_instagram {
    -webkit-mask-image: none !important; mask-image: none !important;
    width: 40px !important; height: 40px !important; line-height: 40px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 55%, #fcb045 100%) !important;
    display: inline-block !important; text-align: center;
}
.footerSosyal ul li a.footer_instagram i {
    width: 40px !important; height: 40px !important; line-height: 40px !important;
    font-size: 20px !important; color: #fff !important;
}
.footerSosyal ul li a.footer_instagram:hover { transform: none !important; opacity: .88; }