/* BTV Site Builder — ziyaretçi tarafı. Tek dosya, JS yok. Açılır menü saf CSS (:hover / :focus-within). */ /* 🔑 Kapsayıcı genişliğinin TEK KAYNAĞI tema paneli: BTVLV Theme → General → Container Width (`gen_full_w`), `ayar-motor.php` bunu `:root body`e `--ui-container-size` olarak basar. Şablon ayarı `container=custom` ise `Render.php` inline `--btv-k` ile ezer. 1270px yalnız panel hiç kaydedilmemişse devreye giren yedek. */ .btv-t{width:100%;--btv-k:var(--ui-container-size,1270px);--btv-menu-aralik:16px} .btv-t *,.btv-t *:before,.btv-t *:after{box-sizing:border-box} /* ═══ KAPSAM RESETİ — BTV alanında tema kuralları geçerli değildir ═══ 🔑 Elementor da aynısını yapar (`.elementor img{…}`): kendi kapsamına girer girmez temanın img kurallarını KENDİ değerleriyle değiştirir. BTV'de bu katman yoktu; bu yüzden tema son sözü söylüyordu. 🔴 NEDEN GEREKLİ (ölçüldü 19.09.2026): `outgrid/style.css` `img{max-width:100%}` diyor ve bu dosya UiCore Framework kapatıldığı ANDA devreye giriyor — `outgrid-child/functions.php` parent stilini yalnız `!class_exists('\UiCore\Core')` iken yüklüyor. SVG'lerin doğal genişliği olmadığı için `max-width:100%` onları kapsayıcıya kilitliyor, kapsayıcı da genişliğini içerikten aldığı için ikisi birden 0'a düşüyor. Dil bloğunun bayrağı böyle kayboldu: `max-width` kaldırılınca 0px → 20px oldu, geri konunca tekrar 0. Yükseklik etkilenmiyordu (14px duruyordu), çünkü tema `max-height` demiyor. 🔑 Blok kuralları bu bloğun ALTINDA tanımlı olduğu için onlar kazanır. Taşmaması gereken görseller kendi sınırını zaten veriyor — `.btv-b--gorsel img`, `.btv-b--html img`, `.btv-b--one-cikan img`, `.btv-mega__yan img`, `.btv-dist-logo__gorsel img` … Burada yalnız TEMANIN dayattığı sınır kalkar, BTV'nin kendi sınırları korunur. 🔴 Bu blok değişirse `BTV_SB_VERSION` artırılmalı, yoksa tarayıcı eski dosyayı kullanır. ═══════════════════════════════════════════════════════════════════════ */ .btv-t img, .btv-a img, .btv-b img{max-width:none;height:auto;border:0;border-radius:0;box-shadow:none} /* ── alan · kapsayıcı · sütun ─────────────────────────── */ .btv-a{width:100%;display:flex;align-items:center} .btv-a.is-sticky{position:sticky;top:0;z-index:50} /* Yapisal varsayilanlar DEGISKEN: sablon inline yazinca ezebilsin. Varsayilanlar `.btv-k`nin KENDI uzerinde -> ic ice kapsayicida distakinin degeri icteye miras kalmaz. */ .btv-k{--btv-k-py:10px;--btv-k-px:var(--btv-kp,20px);--btv-k-gap:16px;--btv-k-hiza:center;display:flex;align-items:var(--btv-k-hiza);gap:var(--btv-k-gap);margin:0 auto;padding:var(--btv-k-py) var(--btv-k-px);width:100%} .btv-k--default{max-width:var(--btv-k)} /* Sayfa alanında (Elementor boxed gibi) İÇERİK 1270px; kenar boşluğu dışarıda. Flex öğesi: genişliği flex-grow verir, max-width içerik kutusunu sınırlar. */ /* 🔴 Kök `--sayfa` DEĞİL: arşiv ve tekil şablonları da aynı boxed genişliği kullanır. Ara katman da her zaman `__masa` değil — arşivde `__ortak`. Kural yalnız bu üç kökün DOĞRUDAN kapsayıcısına işler; içeri gömülü `.btv-t--block` şablonları etkilenmez (iç içe padding birikmesin). */ .btv-t--sayfa>.btv-t__masa>.btv-a>.btv-k--default, :is(.btv-t--archive,.btv-t--single)>:is(.btv-t__masa,.btv-t__ortak,.btv-t__mobil)>.btv-a>.btv-k--default:not(.btv-kart--tek){box-sizing:content-box;width:auto;flex:1 1 auto} /* 🔴 `:not(.btv-kart--tek)`: KART görünümlü kap (arka plan + kenarlık) görünür bir kutudur, dış genişliği komşularıyla (breadcrumb, footer) hizalı 1270px kalmalı. İçeriği 1270'e taşımak yalnız GÖRÜNMEZ gövde kabının işi — onun içindeki `.btv-t--block` şablonları böylece 1270 dışa oturur, hiza bozulmaz. */ .btv-k--content{max-width:960px} .btv-k--full{max-width:none} .btv-k--custom{max-width:var(--btv-k)} /* 🔴 Kap, bölümün (`.btv-a`) flex ÖĞESİ. `min-width:auto` yüzünden dar ekranda içeriğinin min-content genişliğine şişiyordu: 385px'lik telefonda 549px olup `.batuvalve-container` kutularını sağdan kesiyordu (sol kenar ve gölge duruyor, sağ kenarlık ekran dışında kalıyordu). Kap zaten `max-width` ile sınırlı; içeriğinden dar olması doğru davranış. 🔵 `.btv-c` için AYNI ŞEYİ YAPMA — yukarıdaki nota bak. */ .btv-k{min-width:0} /* 🔴 min-width:0 KULLANMA: nowrap içerik (telefon/mail) sütunu taşırıp komşu sütunun üstüne biner. Sütun içeriğinden dar olmamalı. */ .btv-c{--btv-c-hiza:center;--btv-c-gap:12px;display:flex;align-items:var(--btv-c-hiza);gap:var(--btv-c-gap);flex:1 1 auto} .btv-c:only-child{flex:1 1 100%} /* ── genel blok ────────────────────────────────────────── */ .btv-b{display:inline-flex;align-items:center;gap:6px;line-height:1.3;text-decoration:none;color:inherit} .btv-b--logo img{display:block;max-height:52px;width:auto} .btv-bos{font-weight:700;font-size:18px} .btv-ok{font-size:.9em} .btv-b--metin{display:block;width:100%} .btv-b--metin p:only-child{margin:0} .btv-b--metin.is-small{font-size:13px} .btv-b--metin.is-big{font-size:18px} .btv-b--metin.is-xbig{font-size:22px} /* ── menü ──────────────────────────────────────────────── */ .btv-b--menu{--btv-menu-renk:inherit} .btv-b--menu.is-buyuk .btv-menu>li>a{text-transform:uppercase;letter-spacing:.02em} .btv-menu,.btv-alt{list-style:none;margin:0;padding:0} /* 🔴 Aralık GAP ile değil, öğenin YATAY DOLGUSUYLA verilir (uicore de böyle): gap kullanılınca ilk öğe logoya yapışıyor — aralık yalnız öğeler ARASINDA oluşuyor, dizinin başında/sonunda oluşmuyor. */ .btv-menu{display:flex;align-items:center} .btv-menu li{position:relative} .btv-menu li>a{display:inline-flex;align-items:center;gap:4px;padding:var(--btv-menu-dikey,6px) 0;font-size:var(--btv-menu-punto,inherit);font-weight:var(--btv-menu-agirlik,inherit);text-decoration:none;color:var(--btv-menu-renk);white-space:nowrap} .btv-menu li>a:hover{opacity:.75} .btv-menu>li>a{padding-left:calc(var(--btv-menu-aralik,28px) / 2);padding-right:calc(var(--btv-menu-aralik,28px) / 2)} .btv-b--menu.has-cizgi .btv-menu>.is-aktif>a{box-shadow:inset 0 -2px 0 currentColor} .btv-b--menu.has-ok .btv-menu .has-alt>a:after,.btv-b--menu.has-ok .btv-menu .has-mega>a:after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)} /* açılır katman — saf CSS */ .btv-alt{position:absolute;top:100%;left:0;min-width:210px;padding:var(--btv-alt-p,8px) 0;background:#fff;color:var(--btv-menu-acilir,#1e2327);border:1px solid rgba(0,0,0,.08);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s,transform .14s;z-index:60} .btv-menu li:hover>.btv-alt,.btv-menu li:focus-within>.btv-alt{opacity:1;visibility:visible;transform:none} .btv-alt li>a{padding:var(--btv-alt-oy,7px) var(--btv-alt-ox,14px);color:inherit;display:block} .btv-alt .btv-alt{top:0;left:100%} .btv-b--menu.is-sag .btv-menu>li>.btv-alt{left:auto;right:0} /* ── düğme ─────────────────────────────────────────────── */ .btv-b--dugme{padding:9px 18px;border:1px solid currentColor;border-radius:6px;font-weight:600} .btv-b--dugme.is-dolu{background:currentColor;border-color:currentColor} .btv-b--dugme.is-duz{border-color:transparent;padding-left:0;padding-right:0} .btv-b--dugme.is-small{padding:6px 13px;font-size:13px} .btv-b--dugme.is-big{padding:12px 24px;font-size:16px} .btv-b--dugme.is-xbig{padding:15px 30px;font-size:18px} /* ── sosyal · ayraç · boşluk ───────────────────────────── */ .btv-b--sosyal{display:inline-flex;gap:10px} .btv-sos{display:inline-flex;align-items:center;justify-content:center;width:var(--btv-sos-cap,30px);height:var(--btv-sos-cap,30px);background:var(--btv-sos-bg,transparent);border:1px solid var(--btv-sos-kenar,currentColor);border-radius:50%;font-size:var(--btv-sos-ikon,13px);font-weight:600;text-decoration:none;color:inherit} .btv-b--sosyal.is-small{--btv-sos-cap:26px;--btv-sos-ikon:12px} .btv-b--sosyal.is-big{--btv-sos-cap:36px;--btv-sos-ikon:15px} /* Metin icindeki vurgulu parca — telif bandindaki sirket adi gibi. */ .btv-b--metin .btv-vurgu{color:var(--btv-vurgu,#2382c4);text-decoration:none} .btv-b--metin a.btv-vurgu:hover{text-decoration:underline} .btv-b--ayrac{display:inline-block;border-left-color:currentColor;opacity:.35} .btv-b--bosluk{display:inline-block} /* ── arama ─────────────────────────────────────────────── */ .btv-b--arama.is-alan input{height:36px;padding:0 12px;border:1px solid rgba(0,0,0,.15);border-radius:6px;font-size:14px;min-width:200px} .btv-ikon{flex:0 0 auto;display:inline-block;vertical-align:-2px} .btv-b--eposta,.btv-b--telefon{white-space:nowrap} /* 🔑 Telefon/e-posta ikon olcusunu artik `ikon()` iceriden veriyor (canlidaki gibi 18px, dolu). CSS'te ayrica ezilmiyor. */ /* ── dil ───────────────────────────────────────────────── */ .btv-b--dil{display:inline-flex;gap:8px;align-items:center} /* 🔑 CANLIDAKI (batusan.com) `.btvlv-lang-flag` ile BIREBIR: masaustu 20x14, mobil 24x17, 2px kose, sac teli cerceve. Onceki 16px/`height:auto` → 16x11 ciziliyordu, yani canlidakinden belirgin kucuktu (kullanici fark etti, 2026-09-08). 🔴 `object-fit:cover` SART: bayrak SVG'si 4:3 (640x480), kutu ise 10:7. Canli da `background-size:cover` ile ayni kirpmayi yapiyor; `contain` birakilirsa yanlarda bosluk kalir ve cerceve bos cizilir. */ .btv-b--dil img{width:var(--btv-dil-b,20px);height:var(--btv-dil-y,14px);display:block; object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)} .btv-t__mobil .btv-b--dil img,.btv-a--main_m .btv-b--dil img{--btv-dil-b:24px;--btv-dil-y:17px} .btv-dil__oge{text-decoration:none;color:inherit;font-size:13px} .btv-dil__oge.is-aktif{font-weight:700} .btv-b--dil.is-acilir{position:relative} .btv-b--dil.is-acilir .btv-dil__oge:not(.is-aktif){display:none} .btv-b--dil.is-acilir:hover .btv-dil__oge{display:inline} /* ── header stilleri ───────────────────────────────────── */ .btv-h--transparent{position:absolute;top:0;left:0;right:0;z-index:40;background:transparent} .btv-h--boxed .btv-t__masa{max-width:var(--btv-k);margin:12px auto;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.10)} .btv-h--boxed .btv-k{padding-left:24px;padding-right:24px} /* ── masaüstü / mobil ──────────────────────────────────── */ .btv-t__mobil{display:none} @media (max-width:1024px){ /* 🔴 Yalnız gerçekten mobil ikizi basılmış şablonda gizle. */ .btv-t.has-mobil>.btv-t__masa{display:none} .btv-t.has-mobil>.btv-t__mobil{display:block} .btv-t__mobil .btv-menu,.btv-a--main_m .btv-menu{flex-wrap:wrap} } .btv-bayrak img{display:block;border-radius:2px} /* şablon ayarlarından gelenler 🔑 Yükseklik değişkenle: alanın kendi "Minimum height" ayarı satır içi stil olduğu için bunu ezer — istisna hep alanın kendisinde kalır. */ .btv-t--header .btv-a--main{min-height:var(--btv-h-y,auto)} /* 🔴 sticky YALNIZ ebeveyn kutusu icinde yapisir; .btv-a--main'in ebeveyni .btv-t__masa = header yuksekligi kadar, yapisacak mesafe YOK. Sticky dis sarmalayiciya (.btv-t--header) verilir, onun ebeveyni tum sayfa boyunda. */ .btv-t--header.is-sticky{position:sticky;top:0;z-index:10000} .btv-t.btv-golge-s{box-shadow:0 1px 3px rgba(0,0,0,.10)} .btv-t.btv-golge-m{box-shadow:0 4px 12px rgba(0,0,0,.12)} .btv-t.btv-golge-l{box-shadow:0 10px 28px rgba(0,0,0,.16)} /* ═══ MEGA MENÜ ═════════════════════════════════════════ Panel saf CSS ile açılır (JS yok). Genişlik üç modda: container = header kapsayıcısı · full = kenardan kenara · custom = --btv-mega-g. 🔴 `has-mega` öğesi position:static olmalı; li relative kalırsa panel öğe kadar dar çıkar. */ .btv-t--header .btv-a--main{position:relative} .btv-menu__oge.has-mega{position:static} .btv-mega{position:absolute;top:100%;left:0;right:0;z-index:60;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s} .btv-menu__oge.has-mega:hover>.btv-mega,.btv-menu__oge.has-mega:focus-within>.btv-mega{opacity:1;visibility:visible;transform:none} .btv-mega>.btv-t{background:var(--btv-mega-bg,#fff);padding:var(--btv-mega-d,30px);border-radius:var(--btv-mega-r,0)} .btv-mega--container>.btv-t,.btv-mega--custom>.btv-t{max-width:var(--btv-mega-g,var(--btv-k));margin-inline:auto} .btv-mega-golge-s>.btv-t{box-shadow:0 1px 3px rgba(0,0,0,.10)} .btv-mega-golge-m>.btv-t{box-shadow:0 8px 24px rgba(0,0,0,.12)} .btv-mega-golge-l>.btv-t{box-shadow:0 14px 40px rgba(0,0,0,.18)} /* Mobil ikizde panel basılmaz — mobil menü ayrı alandır. */ .btv-t__mobil .btv-mega,.btv-a--main_m .btv-mega{display:none} /* ═══ POST LIST + IMAGE ═════════════════════════════════ */ .btv-b--liste{display:grid;grid-template-columns:repeat(var(--btv-liste-s,1),minmax(0,1fr));gap:var(--btv-liste-b,10px);width:100%} .btv-liste__oge{display:flex;align-items:center;gap:var(--btv-liste-ig,10px);padding:0;white-space:normal;text-decoration:none;color:var(--btv-liste-r,inherit);font-size:var(--btv-liste-p,inherit);font-weight:var(--btv-liste-a,inherit);line-height:var(--btv-liste-lh,1.35)} .btv-liste__oge:hover{color:var(--btv-liste-rh,var(--btv-liste-r,inherit))} .btv-liste__gorsel{display:block;height:auto;border-radius:6px;flex:0 0 auto} .btv-liste--kucuk .btv-liste__gorsel{width:44px} .btv-liste--kart .btv-liste__oge{flex-direction:column;align-items:flex-start;gap:8px} .btv-liste--kart .btv-liste__gorsel{width:100%} .btv-b--liste.is-yatay{display:flex;flex-wrap:wrap;justify-content:var(--btv-liste-j,flex-start)} .btv-b--liste.is-cerceve .btv-liste__oge{padding:var(--btv-liste-op,5px 10px);border:var(--btv-liste-ck,2px) solid var(--btv-liste-cr,rgba(127,127,127,.17));border-radius:var(--btv-liste-rd,12px);transition:border-color .2s,color .2s} .btv-b--liste.is-cerceve .btv-liste__oge:hover{border-color:var(--btv-liste-ch,var(--btv-liste-rh,currentColor))} .btv-liste__ozet{font-size:.85em;opacity:.75;font-weight:400} .btv-liste__devam{font-size:.85em;text-decoration:underline} .btv-b--gorsel{display:flex;width:100%} .btv-b--gorsel img{display:block;height:auto;max-width:100%} /* Mega panel gövdesi — liste + yan görsel */ .btv-mega__ic{display:flex;gap:24px;align-items:flex-start;width:100%} .btv-mega__ic.is-sol{flex-direction:row-reverse} .btv-mega__liste{flex:1 1 auto;min-width:0} .btv-mega__yan{flex:0 0 var(--btv-mega-yan,30%);max-width:var(--btv-mega-yan,30%)} /* 🔴 Öğe ile panel arasındaki ölü şerit — hover köprüsü. Kapalıyken yüksekliği 0: içeriğin üstünde görünmez engel bırakmaz. */ .btv-menu__oge.has-mega>a{position:relative} .btv-menu__oge.has-mega>a::before{content:"";position:absolute;top:100%;left:0;right:0;height:0} .btv-menu__oge.has-mega:hover>a::before,.btv-menu__oge.has-mega:focus-within>a::before{height:48px} /* Panelin kendisi de fareyi tutmalı: geçiş sırasında görünürlük değişmesin. */ .btv-mega{transition:opacity .16s,transform .16s,visibility 0s linear .16s} .btv-menu__oge.has-mega:hover>.btv-mega,.btv-menu__oge.has-mega:focus-within>.btv-mega{transition-delay:0s} /* Yan görsel: kutu dolgusu · görsel genişliği · panele sığdırma */ .btv-mega__yan{padding:var(--btv-mega-yanp,0)} .btv-mega__yan .btv-b--gorsel{width:100%} /* 🔴 `height:auto` ŞART: wp_get_attachment_image `height` özniteliği de basıyor, yalnız genişliği değiştirmek oranı bozardı. */ .btv-mega__yan img{width:var(--btv-mega-yani,100%);height:auto;max-width:100%} /* Sığdırma: görsel AKIŞ DIŞINDA (absolute) — yan sütunun kendi yüksekliği 0 olur, `stretch` onu listenin boyuna uzatır, görsel o kutuya oturur. 🔴 `align-items:stretch` + `height:100%` tek başına DÖNGÜSELDİR: kutu görselden yükselir, panel büyür. Görseli akıştan çıkarmak zorunlu. */ .btv-mega__ic.is-sigdir{align-items:stretch} .btv-mega__ic.is-sigdir .btv-mega__yan{position:relative} .btv-mega__ic.is-sigdir .btv-mega__yan .btv-b--gorsel{position:absolute;top:var(--btv-mega-yanp,0);right:var(--btv-mega-yanp,0);bottom:var(--btv-mega-yanp,0);left:var(--btv-mega-yanp,0);width:auto;align-items:center} .btv-mega__ic.is-sigdir .btv-mega__yan{padding:0} .btv-mega__ic.is-sigdir .btv-mega__yan img{width:var(--btv-mega-yani,100%);height:100%;object-fit:contain;object-position:center} /* "Fill": görsel sütunu tamamen kaplar, taşan kenarlar kırpılır. 🔑 Panel yüksekliği değişmeden görselin GÖRÜNEN genişliği artar — `contain`de genişlik yüksekliğe kilitliydi. */ .btv-mega__ic.is-sigdir.is-doldur .btv-mega__yan img{object-fit:cover} /* Oran modu: görsel akışta kalır, yüksekliğini kendi oranından alır. Liste kısaysa paneli görsel uzatır — kısa menüde şeride dönüşmez. */ .btv-mega__yan.has-oran .btv-b--gorsel{width:100%} .btv-mega__yan.has-oran img{width:var(--btv-mega-yani,100%);height:auto;aspect-ratio:var(--btv-mega-yano,auto);object-fit:cover;object-position:center} /* Başlık bloğu — kendi marj'ını taşır, tema h3'ünden bağımsız */ .btv-b--baslik{display:block;margin:0;line-height:1.3} /* Madde işaretli liste (footer bağlantıları) */ .btv-liste--yok.has-madde .btv-liste__oge:before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7} .has-madde .btv-liste__oge{align-items:baseline} .has-madde .btv-liste__ad{flex:1 1 auto} /* 🔑 Liste ogesinin basligi `oge_etiketi` ile GERCEK h2-h6 olabilir (Elementor list stili h3 basiyor). Tema baslik stilini devralmasin: boyut/agirlik/renk blok ayarlarindan gelsin. */ .btv-b--liste h2.btv-liste__ad,.btv-b--liste h3.btv-liste__ad,.btv-b--liste h4.btv-liste__ad, .btv-b--liste h5.btv-liste__ad,.btv-b--liste h6.btv-liste__ad{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;letter-spacing:inherit;text-transform:none} .btv-sos svg{display:block} /* Rank Math breadcrumb kendi işaretlemesini getirir; sarmalayıcı yalnız hizalama ve renk verir, iç yapıya dokunmaz. */ .btv-b--breadcrumb.is-rm{display:block;width:100%} .btv-b--breadcrumb.is-rm .rank-math-breadcrumb p{margin:0} /* 🔑 Bağlantı rengi değişkenle: Rank Math'in iç işaretlemesine dokunulmaz. Değer verilmezse bağlantı, kutunun metin rengini miras alır. */ .btv-b--breadcrumb a{color:var(--btv-bc-link,inherit);text-decoration:none} .btv-b--breadcrumb a:hover{color:var(--btv-bc-hover,var(--btv-bc-link,inherit));text-decoration:underline} /* Ayraç aralığı — Rank Math'in `.separator`ı ve kendi `.btv-ayrac`ımız aynı değişkeni kullanır; kaynak değişse de ayar tek yerden. */ .btv-b--breadcrumb .separator,.btv-b--breadcrumb .btv-ayrac{margin-inline:var(--btv-bc-ara,0)} /* ══ Yazı blokları ═══════════════════════════════════ */ .btv-b--post-baslik{margin:0} .btv-b--post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4em} .btv-meta__oge{display:inline-flex;align-items:center;gap:.35em} .btv-meta__ayrac{opacity:.5} .btv-b--post-meta a{color:var(--btv-meta-link,inherit);text-decoration:none} .btv-b--post-meta a:hover{color:var(--btv-meta-hover,inherit)} .btv-b--one-cikan .btv-one-cikan__img{max-width:var(--btv-oc-en,100%);height:auto;border-radius:var(--btv-oc-radius,0)} /* 🔴 Imagify 'i ile SARIYOR ve `btv-one-cikan__img` sinifini 'a tasiyor — ustteki kural 'e HIC DEGMIYOR. `width="768"` ozniteligiyle ve `max-width:none` ile kaliyor, 375px genisliginde ekranda 768px ciziliyor (olculdu 2026-09-08, blog yazisi). 🔑 Kural ETIKETLE de yazilir. Ozgullugu (0,1,1) dusuk oldugu icin ozel genislik ayari `--btv-oc-en` (0,2,0) hala kazanir. ⚠️ Olcum tuzagi: gorseli `parentElement` ile karsilastiran tasma denetimi bunu KACIRIR — ebeveyn ve o da ayni genislikte. En yakin DUZEN kapsayicisina (picture/a/span/figure atlanarak) bakilmali. */ .btv-b--one-cikan img{max-width:100%;height:auto} .btv-b--post-icerik>*:first-child{margin-top:0} .btv-b--post-icerik>*:last-child{margin-bottom:0} .btv-b--toc .btv-toc__baslik{margin:0 0 .5em} /* 🔴 UiCore listelerde list-style:none uyguluyor; madde imini geri getirmek için AÇIKÇA yazmak şart (canlıda disc, padding 40px). */ .btv-toc__liste{margin:0;padding-left:40px} .btv-toc--bullets .btv-toc__liste,.btv-toc--bullets .btv-toc__liste li{list-style:disc} .btv-toc--numbers .btv-toc__liste,.btv-toc--numbers .btv-toc__liste li{list-style:decimal} .btv-toc--yok .btv-toc__liste{list-style:none;padding-left:0} .btv-toc__liste li::marker{color:var(--btv-toc-madde,inherit)} .btv-toc__liste li+li{margin-top:var(--btv-toc-aralik,0)} .btv-toc__liste a{color:var(--btv-toc-link,inherit);text-decoration:none} .btv-toc__liste a:hover{color:var(--btv-toc-hover,inherit);text-decoration:underline} .btv-b--etiket .batuvalve-tag{color:var(--btv-etiket-renk,inherit)} .btv-b--etiket .batuvalve-tag:hover{color:var(--btv-etiket-hover,inherit)} /* ══ Kart birleştirme ════════════════════════════════ Üst/orta/alt alanların bitişik kenarlıkları kaldırılır, köşe yuvarlaması uçlara toplanır: art arda gelen alanlar tek kart gibi görünür. `!important` ŞART — kenarlık genişliği alanın kendi satır içi stilinden geliyor. */ .btv-kart--ust{border-bottom-width:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important} .btv-kart--orta{border-top-width:0!important;border-bottom-width:0!important;border-radius:0!important} .btv-kart--alt{border-top-width:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important} .btv-kart--ust,.btv-kart--orta{box-shadow:none!important} /* ══ AKIŞ DÜZELTMESİ ═════════════════════════════════ `.btv-b{display:inline-flex}` başlık/menü gibi tek satırlık bloklar için doğru, ama İÇİNDE akan metin olan bloklarda çocukları flex öğesine çevirip yan yana diziyor: yazı gövdesinin paragrafları sütunlara bölünmüştü. Bu bloklar blok akışında. */ .btv-b--post-icerik,.btv-b--toc,.btv-b--ilgili,.btv-b--prev-next,.btv-b--etiket{display:block} .btv-b--post-icerik{width:100%} .btv-b--toc{width:100%} /* 🔴 flex-wrap YOK: 65%+35%+boşluk 100%%'i aştığı an sütunlar alt alta kayıyor. nowrap ile flex kendi orantısında daraltır. */ [class*='btv-kart--']{align-items:stretch;flex-wrap:nowrap} [class*='btv-kart--']>.btv-c{align-items:stretch;align-self:stretch} .btv-kart--ust{padding-bottom:0} .btv-kart--orta{padding-top:0;padding-bottom:0} .btv-kart--alt{padding-top:0} /* Çizgili başlık sütunun tam genişliğini kaplar (canlıdaki gibi). */ .btv-b--baslik.has-cizgi{display:block;width:100%} /* 🔴 Kart kapsayıcıya uygulanınca alanın `margin` ayarı (örn. 20px 0 0 0) `.btv-k{margin:0 auto}` kuralını eziyor ve kart sola yapışıyor. Yatay ortalama kartlarda her zaman korunur; dikey boşluk ayardan gelir. kart-ortalama */ .btv-k[class*="btv-kart--"]{margin-inline:auto!important} /* Önceki/Sonraki ve Etiket Bulutu düzeni eklentinin kendi CSS'inden gelir (`btvlv-post-prev-next.css`, `tag-cloud.css`). Burada yalnız şablondan verilen renk geçersiz kılmaları var — eklentininki düz sınıf seçicisi olduğu için bu iki parçalı seçici kazanır. */ .btv-b--prev-next{display:block;width:100%} .btv-b--etiket.btvlv-tag-cloud-wrap,.btv-b--ilgili{width:100%} .btv-b--prev-next .btvlv-nav-label{color:var(--btv-pn-etiket,#999)} .btv-b--prev-next .btvlv-nav-post-title{color:var(--btv-pn-baslik,#1a1a1a)} /* Etiket başlığı rozeti — eklentinin `tag-cloud.css` dosyası bunu vermiyor, canlıda Elementor widget ayarından geliyordu. */ .btv-b--etiket .btvlv-tag-cloud-title{background:var(--btv-etiket-bg,transparent);padding:var(--btv-etiket-dolgu,0);gap:12px} .btv-b--etiket .btvlv-tag-title,.btv-b--etiket .btvlv-tag-title-icon{color:var(--btv-etiket-baslik-renk,inherit)} .btv-b--etiket .btvlv-tag-title{font-size:var(--btv-etiket-baslik-punto,inherit);margin:0} .btv-b--etiket .btvlv-tag-title-icon{display:inline-flex;align-items:center} /* Etiket bulutu düzeni: konum sınıfları eklentinin `batuvalve-widgets.css` dosyasında ve o dosya bu sayfada yüklü değil (yalnız `tag-cloud.css` isteniyor). Gereken üç kural buraya alındı — iki sınıflı seçici benim `.btv-b--etiket{display:block}` akış kuralımı da geçersiz kılar. */ .btv-b--etiket.btvlv-tag-cloud-wrap{display:flex} .btv-b--etiket.btvlv-title-pos-top{flex-direction:column} .btv-b--etiket.btvlv-title-pos-left{flex-direction:row;align-items:flex-start} .btv-b--etiket .btvlv-tag-cloud-title{flex-shrink:0} .btv-b--etiket .batuvalve-tag-cloud{min-width:0} /* ══ Arşiv listesi ═══════════════════════════════════ */ .btv-arsiv__sayfalama{display:flex;flex-wrap:wrap;justify-content:center;width:100%;gap:6px;margin-top:20px} .btv-arsiv__sayfalama .page-numbers{padding:6px 12px;border:1px solid currentColor;border-radius:4px;text-decoration:none;opacity:.75} .btv-arsiv__sayfalama .page-numbers.current{opacity:1;font-weight:600} /* Düzen eklentinin `batuvalve-widgets.css` dosyasından gelir; burada yalnız şablondan verilen renk geçersiz kılmaları var. */ .btv-b--arsiv .post-title a{color:var(--btv-arsiv-baslik,inherit);text-decoration:none} .btv-b--arsiv .post-title a:hover{color:var(--btv-arsiv-hover,inherit)} .btv-b--arsiv .post-meta{color:var(--btv-arsiv-meta,inherit)} .btv-b--arsiv .post-meta .meta-item:not(:last-child)::after{content:'|';margin:0 8px;opacity:.6} /* 🔴 `.btv-b{display:inline-flex}` eklentinin `.batuvalve-grid{display:grid}` kuralını eziyordu (ikisi de tek sınıf, sonra gelen kazanıyor) ve 12 öğe yan yana sıkışıyordu. Arşiv ızgara akışında kalmalı. */ .btv-b--arsiv{display:grid;width:100%} /* ══ Mobil hamburger menü — sıfır JS (checkbox + label) ══ */ .btv-mm{position:static} .btv-mm .btv-mm__t,.btv-mm .btv-sm__t{position:absolute;width:0;height:0;opacity:0;pointer-events:none} .btv-mm__ac{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:10px;margin:-10px;color:var(--btv-menu-renk,inherit)} .btv-mm__ac i{display:block;width:26px;height:2.5px;background:currentColor;border-radius:2px} .btv-mm--s .btv-mm__ac i{width:20px;height:2px} .btv-mm--l .btv-mm__ac i{width:30px;height:3px} .btv-mm__ort{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;z-index:9998;cursor:pointer} .btv-mm__panel{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);background:#fff;z-index:9999;overflow:hidden;transform:translateX(101%);border-radius:var(--btv-mm-radius,0) 0 0 var(--btv-mm-radius,0);box-shadow:-2px 3px 90px -20px rgba(0,0,0,.25)} .btv-mm--anim .btv-mm__panel,.btv-mm--anim .btv-mm__ort{transition:transform .3s ease,opacity .3s ease,visibility .3s} .btv-mm__t:checked~.btv-mm__panel{transform:none} .btv-mm__t:checked~.btv-mm__ort{opacity:1;visibility:visible} .btv-mm__kapat{position:absolute;top:14px;right:14px;width:32px;height:32px;cursor:pointer;z-index:3} .btv-mm__kapat:before,.btv-mm__kapat:after{content:"";position:absolute;top:15px;left:5px;width:22px;height:2px;background:currentColor;border-radius:2px} .btv-mm__kapat:before{transform:rotate(45deg)} .btv-mm__kapat:after{transform:rotate(-45deg)} .btv-mm__panel>.btv-menu{flex-direction:column;align-items:stretch;gap:0;padding:60px 0 20px} .btv-mm__panel .btv-menu__oge{position:static} /* 🔴 Alt menusu olan oge RELATIVE olmali: ok mutlak konumlu ve satirin sagina oturur. (Kayan katman doneminde `static` sarttiydi — katman `inset:0` ile PANELI dolduruyordu. Akordeonda tam tersi gerekiyor.) */ .btv-mm__panel .btv-menu__oge.has-alt{position:relative} .btv-mm__panel .btv-menu>li>a, .btv-mm__panel .btv-sm__ust{display:block;padding:12px 22px} label.btv-sm__ust{cursor:pointer} /* ══ alt menü: AKORDEON — altta açılır, alttakileri aşağı iter ══ Başlık gerçek bağlantı (üst sayfaya gider), ok ayrı bir label. 🔑 Başlık sağdan 56px boşluk bırakır, yoksa uzun başlık okun altına girer. */ .btv-mm__panel .btv-menu__oge.has-alt>.btv-sm__ust{padding-right:56px} .btv-mm__panel .btv-sm__ac{position:absolute;top:0;right:0;width:56px;height:48px;padding:0;cursor:pointer} .btv-mm__panel .btv-sm__ac:after{content:"";position:absolute;top:19px;right:25px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s ease} .btv-mm__panel .btv-sm__t:checked~.btv-sm__ac:after{transform:rotate(45deg)} /* 🔴 Radyo etiketle geri "secilmemis" YAPILAMAZ. Acik bolumun uzerine gelen bu saydam katman `-yok` radyosunu isaretleyip bolumu kapatir. Kapaliyken pasif; adresli ogede (is-bagli) yalniz ok alanini kaplar, yoksa "Blog" baslgina basinca sayfaya gidilemezdi. */ .btv-mm__panel .btv-sm__kapa{position:absolute;top:0;right:0;left:0;height:48px;cursor:pointer;pointer-events:none;z-index:1} .btv-mm__panel .btv-menu__oge.is-bagli>.btv-sm__kapa{left:auto;width:56px} .btv-mm__panel .btv-sm__t:checked~.btv-sm__kapa{pointer-events:auto} /* 🔴 `max-height` ile açılır: `display:none` geçişi animasyon almaz. 1200px üst sınır en uzun alt menüden (Products) fazla. */ .btv-mm__panel .btv-alt{position:static;display:block;opacity:1;visibility:visible;box-shadow:none;transform:none;min-width:0;padding:0;background:none;border:0;max-height:0;overflow:hidden} .btv-mm--anim .btv-mm__panel .btv-alt{transition:max-height .35s ease} .btv-mm__panel .btv-sm__t:checked~.btv-alt{max-height:1200px} .btv-mm__panel .btv-alt>li>a{display:block;padding:10px 22px 10px 38px} /* 🔴 Panel açıkken arka plan kaymasın: gövde kilidi JS ister, yerine panelin kendi kaydırması kullanılıyor (overflow:auto). */ /* Hamburger paneli — alt iletişim şeridi */ .btv-mm__iletisim{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 22px;margin-top:auto;border-top:1px solid rgba(0,0,0,.08);text-align:center} .btv-mm__iletisim .btv-b{justify-content:center} .btv-mm__panel{display:flex;flex-direction:column} /* 🔴 `flex-wrap:nowrap` ZORUNLU — kaydirmayi acmanin bedeli. Mobil ikiz `.btv-t__mobil .btv-menu{flex-wrap:wrap}` tasiyor (satir 96, masaustu satir menusu icin). Panelde yukseklik `flex:1 1 auto` + `min-height:0` ile SINIRLANINCA tasan ogeler kaydirilmak yerine YENI BIR SUTUNA sardi: 2026-09-08'de About Us acilinca Blog ve Contact Us panelin sag yarisina atladi. Once `flex:0 0 auto` vardi, liste icerigi kadar uzuyordu, o yuzden sarma hic tetiklenmiyordu. */ .btv-mm__panel>.btv-menu{flex:1 1 auto;min-height:0;flex-wrap:nowrap;overflow-y:auto;overscroll-behavior:contain} /* ══ Yalnız ikon + dokununca balon (sıfır JS) ══ */ .btv-mc{position:relative;display:inline-flex;align-items:center} /* \U0001f534 Dar masaustu ikizi VARSAYILAN OLARAK GIZLI. Yalnizca 1025\u20131300 bandinda aciliyor; mobil ikizde zaten `yalniz_ikon` ayari devrede, orada `is-dar` hic basilmaz. */ .btv-b--telefon.is-dar,.btv-b--eposta.is-dar{display:none} .btv-mc .btv-mc__t{position:absolute;width:0;height:0;opacity:0;pointer-events:none} .btv-mc__ac{display:inline-flex;align-items:center;justify-content:center;padding:8px 6px;border-radius:4px;color:inherit;line-height:0;cursor:pointer;transition:background-color .2s ease} /* 🔴 20px — canlidaki `.btvlv-mc-icon` ile ayni. Once 24 idi ve mobil ikon masaustundekinden belirgin buyuk goruluyordu (kullanici fark etti). */ .btv-mc__ac svg{width:20px;height:20px;display:block} .btv-mc__t:checked~.btv-mc__ac{background:rgba(127,127,127,.12)} .btv-mc__ort{position:fixed;inset:0;z-index:9998;display:none} .btv-mc__t:checked~.btv-mc__ort{display:block} .btv-mc__pop{position:absolute;top:calc(100% + 10px);right:0;z-index:9999;padding:4px;background:#fff;color:#111;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s} .btv-mc__t:checked~.btv-mc__pop{opacity:1;visibility:visible;transform:none} .btv-mc__deger{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:4px;color:inherit;text-decoration:none;font-size:14px;font-weight:500;line-height:1;white-space:nowrap} .btv-mc__deger:hover{background:rgba(127,127,127,.12)} .btv-mc__deger svg{width:16px;height:16px;opacity:.55} /* ══ Hamburger paneli: TAM EKRAN (yandan sürgü değil) ══ */ .btv-mm__panel{top:0;right:0;bottom:0;left:0;width:auto;border-radius:0;box-shadow:none;padding-top:0} .btv-mm__panel>.btv-menu{padding:76px 0 20px} /* hamburger açıkken ✕ tam hamburgerin yerinde dursun */ .btv-mm__kapat{top:22px;right:20px} /* ══ Mobil header düzeltmeleri (batusan referansı) ══ */ /* 5) ikon zemini fare üzerindeyken de değişsin */ .btv-mc__ac:hover{background:rgba(127,127,127,.12)} /* 2) ☰ açıkken yerinde ✕ olur */ .btv-mm__ac i{transition:transform .25s ease,opacity .2s ease} .btv-mm__t:checked~.btv-mm__ac i:nth-child(1){transform:translateY(7px) rotate(45deg)} .btv-mm__t:checked~.btv-mm__ac i:nth-child(2){opacity:0} .btv-mm__t:checked~.btv-mm__ac i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* panel içindeki ayrı kapatma düğmesi artık gereksiz */ .btv-mm__kapat{display:none} /* 3) panel header satırının ALTINDAN başlar; satır üstte kalır */ /* 🔑 `main_m` = mobil ikizin (`m_main`) alana çevrilmiş hali (19.09.2026). Eski `m_main` seçicileri SİLİNMEDİ: bu dosya canlı ve /test ile ortak, oralarda ikiz hâlâ duruyor. Her kural iki adı birden karşılar. */ .btv-a--m_main,.btv-a--main_m{position:relative;z-index:10000} /* 🔴 `.btv-a--m_main` z-index 10000 ile KENDİ YIĞIN BAĞLAMINI açıyor ve panel onun TORUNU. Bu yüzden "header 10000 > panel 9990" sıralaması İŞE YARAMAZ: 9990 o bağlamın İÇİNDE, header'ın kendi içeriğiyle (`z-index:auto`) yarışıyor ve pozitif z-index her zaman kazanıyor. Ölçüm (2026-09-08): panel ☰'nin üzerini kapatıyordu, `elementFromPoint` ☰ yerine paneli döndürüyordu → ortada HİÇ kapatma denetimi yoktu (`.btv-mm__kapat` de `display:none`). ✅ Sıralama bağlamın İÇİNDE yapılır: bloklar 2 > panel 1 > karartma 0. 🔴 `.btv-mm` (menü bloğu) z-index ALMAMALI — alırsa panel onun içine hapsolur ve menü bloğu logodan SONRA geldiği için yine üstte kalır. */ .btv-a--m_main .btv-c>.btv-b:not(.btv-mm),.btv-a--main_m .btv-c>.btv-b:not(.btv-mm){position:relative;z-index:2} .btv-mm__ac{position:relative;z-index:2} .btv-mm__panel{z-index:1} .btv-mm__ort{z-index:0} .btv-mm__panel>.btv-menu{padding:var(--btv-mm-ust,72px) 0 20px} /* 4) panel menü öğeleri tek renk, tek ağırlık — aktif sayfa vurgusu yok */ .btv-mm__panel .btv-menu>li>a, .btv-mm__panel .btv-sm__ust, .btv-mm__panel .btv-alt>li>a, .btv-mm__panel .btv-sm__ac{color:var(--btv-mm-renk,#7a7a7a);font-weight:var(--btv-mm-agirlik,700);box-shadow:none} .btv-mm__panel .btv-menu>li.is-aktif>a{color:var(--btv-mm-renk,#7a7a7a);box-shadow:none} .btv-mm__panel .btv-sm__ac:after{opacity:.55} /* ══ Sticky header — masaüstü / tablet / mobil ayrı ayrı ══ */ @media (min-width:1025px){ .btv-t--header.is-sticky{position:sticky;top:0;z-index:10000} } /* 🔴 DAR MASAÜSTÜ (1025–1300): menü komşu kolonun üstüne biniyordu. Sebep: header kolonları satır içi `flex:0 1 %` + `max-width:%` + `min-width:0` taşıyor. Kolon daralıyor, İÇERİĞİ daralmıyor → taşma. Ölçüm (1025px): logo 31px, menü 62px taşma. Kolon yüzdelerine DOKUNULMADI — onları gevşetmek iletişim kolonunu büyütüp menüyü daha çok eziyor (denendi: 120px taşma). Çözüm içeriği küçültüyor; 1300px üstünde hiçbir şey değişmiyor. ⚠️ `!important` şart: aralık ve logo yüksekliği SATIR İÇİ stil. */ /* 🔴 "1025–1300 + aralık 22" BANDI DA DEĞERİ DE YETERSİZDİ. Ölçüm (2026-09-08, iframe taraması, EN ve TR ayrı): • Kural 1300'de kapanınca menü yeniden büyüyüp telefonun üstüne biniyordu: EN 1301'de 92px, 1400'de 8px çakışma. İlk temiz EN genişliği 1440. • TR menüsü EN'den **29px geniş** ("Ürünlerimiz/İletişim"), bu yüzden EN temizken TR hâlâ çakışıyordu: 1025'te +3, 1301'de +13, 1440'ta +3. ✅ Her dilde ≥20px açıklık bırakan kurgu: 1025–1300 → iki metin de gizli + aralık 16 + logo 26 1301–1459 → YALNIZ e-posta metni gizli (≈159px kazanç). Aralığı ve logoyu bu bantta kısmaya gerek yok: menü doğal görünümünü koruyor. */ /* 🔴 1301–1459: menu aralik 40→32 (5 bosluk = 40px kazanc). Gozle fark edilmez ama TR menusunun 29px fazlasini karşilar. */ /* 🔴 E-POSTA METNI YALNIZ 1409'A KADAR GIZLENIR, 1459'a kadar DEGIL. Ilk surumde tavan 1459'du ve 1440px'lik ekranda e-posta boşuna ikona düşüyordu (kullanici fark etti). Olcum, aralik 32 iken TR menusuyle: 1301 → +63 (gizlemek ŞART) · 1400 → −3 · 1440 → −37 (gerek YOK). Esik 1410: o noktadan sonra metin geri geliyor. */ /* \U0001f534 DAR MASAUSTU (1025\u20131300): telefon/e-posta METINSIZ. Iletisim kolonu `justify-content:flex-end` tasiyor ve tasma SOLA gidiyor; `scrollWidth` sol tasmayi OLCMEZ, o yuzden "tasma yok" gibi gorunuyordu. Olcum (1038px): kolon 204px, icerigi 386px \u2192 menunun 207px ustune biniyordu. \u2705 Metin yerine mobildeki yalniz-ikon balonu gosteriliyor: ikonlar yan yana, dokununca deger balonda aciliyor. */ /* 🔴 GENIS MASAUSTU: telefon/e-posta/bayrak arasi 24px cok aciktı. Olcum (1440px): kolonun `gap:12px`i iki kez uygulaniyor cunku aralarinda 0 genislige EZILMIS bir `bosluk` blogu var (kolon %23 = 331px, icerik 451px istiyor -> flex bosluklari sifirliyor). Kurucuda kolon araligi ayari YOK, o yuzden kural burada. 🔵 Yan fayda: kolonun SOLA tasmasi da 5x4 = 20px azaliyor. */ @media (min-width:1301px){ .btv-t--header .btv-t__masa .btv-a--main .btv-c:has(.btv-b--dil){gap:8px} } @media (min-width:1025px) and (max-width:1300px){ /* 🔴 HER SECICI `.btv-t--header` ILE BASLAMALI. `.btv-t__masa` HER sablonun masaustu katmaninda var; header'a ozel saniip yalniz onunla yazmistim ve FOOTER'daki iki telefon blogunun da metni gizlendi — alt bilgide numarasiz iki ikon kaldi (kullanici ekran goruntusuyle bildirdi, 2026-09-08). */ .btv-t--header .btv-t__masa .btv-b--menu.has-ok{--btv-menu-aralik:22px!important} .btv-t--header .btv-t__masa .btv-b--logo img{height:26px!important} .btv-t--header .btv-t__masa .btv-b--telefon.is-tam, .btv-t--header .btv-t__masa .btv-b--eposta.is-tam{display:none} .btv-t--header .btv-t__masa .btv-b--telefon.is-dar, .btv-t--header .btv-t__masa .btv-b--eposta.is-dar{display:inline-flex} /* 🔴 Metin gidince kolon yuzdesi ARTIK YANLIS. Iletisim kolonu yalniz ikon tasiyor (olcum 1025px: 162px) ama satir ici `flex:0 1 23%;max-width:23%` ile 201px yer tutmaya devam ediyordu; menu kolonu 524px kalip 591px'lik TR menusunu 39px tasiriyordu. Kolonu icerigine indirip artan yeri menuye veriyoruz. 🔴 `!important` sart: bu degerler SATIR ICI stil. */ .btv-t--header .btv-t__masa .btv-a--main .btv-c:has(.btv-b--dil){flex:0 0 auto!important;max-width:none!important} .btv-t--header .btv-t__masa .btv-a--main .btv-c:has(.btv-b--menu){flex:1 1 auto!important;max-width:none!important} /* 🔴 Aradaki `bosluk` bloklari METINLI surum icin konmus (10/20/15px). Ikon modunda ikonlarin arasini aciyor ve sondaki blok bayragi sag kenardan uzaklastiriyordu. Olcum 1200px: ikonlar arasi 34px ve 44px, mobilde ayni yer 14px ve 20px. Mobil olcusune cekiliyor. */ .btv-t--header .btv-t__masa .btv-a--main .btv-c:has(.btv-b--dil){gap:14px} .btv-t--header .btv-t__masa .btv-a--main .btv-c:has(.btv-b--dil)>.btv-b--bosluk{display:none} /* 🔴 Ucu ayni YUKSEKLIKTE olmali. Ikonlar 18x18 iken bayrak 20x14 idi; yan yana gelince bayrak belirgin kucuk goruluyordu (kullanici fark etti). 🔑 Bu bantta ikon BALON icinde ve `.btv-mc__ac svg` kurali onu 20px yapiyor (satirdaki 18 degil) — olcup gorulmeseydi 18'e esitlenip 2px kayacakti. Yukseklik 20, 10:7 orani → 28x20. Genis masaustunde (>1300) bayrak canlidaki 20x14 olcusunde KALIYOR. */ .btv-t--header .btv-t__masa .btv-b--dil img{--btv-dil-b:28px;--btv-dil-y:20px} } @media (max-width:1024px) and (min-width:768px){ /* 🔑 Tema kullaniyor: header AKIŞTAN ÇIKAR, slider ustunde durur. */ .btv-t--header.is-sticky-t .btv-a--m_main,.btv-t--header.is-sticky-t .btv-a--main_m{position:fixed;top:0;left:0;right:0;width:auto;z-index:10000} .btv-t--header.is-sticky-t{position:sticky;top:0;z-index:10000} } @media (max-width:767px){ .btv-t--header.is-sticky-m .btv-a--m_main,.btv-t--header.is-sticky-m .btv-a--main_m{position:fixed;top:0;left:0;right:0;width:auto;z-index:10000} .btv-t--header.is-sticky-m{position:sticky;top:0;z-index:10000} } /* ══ Mobil/tablet: sayfa başlığı sabit header'ın ARKASINDA kalmasın ══ 🔴 `.btv-a--m_main` `position:fixed` olduğu için `.btv-t--header` akışta HİÇ YER TUTMUYOR — ölçüm (2026-09-08): yüksekliği 0. Header y 10→70, breadcrumb y 33→53 → breadcrumb tamamen arkada kalıyordu. 🔵 Boşluk HEADER'a değil SAYFA BAŞLIĞIna veriliyor: header'a yükseklik vermek ana sayfada hero'nun üzerine binen tasarımı bozar. */ @media (max-width:1024px){ .btv-t--page-title{margin-top:var(--btv-mobil-header-h,70px)} /* 🔴 Kart mobilde ekran kenarlarina YAPISIYORDU: `batuvalve-container` yan boslugunu yalniz `max-width`ten aliyor, dar ekranda 0 kaliyor. Header karti 10px icerideydi — ayni degerle hizalandi. 🔴 `!important` SART: BTV kart kutusu `margin`i SATIR ICI stil olarak basiyor (`style="...margin:20px 0 20px 0;..."`), normal kural asla kazanmaz. İlk denemede bu yuzden hicbir sey degismedi (olculdu). */ } /* 🔴 Kart 1310px'e KADAR kenarlara yapisiyor, yalniz mobilde degil: `batuvalve-container` yan boslugunu `max-width:1270px` ortalamasindan aliyor, ekran ondan darsa bosluk 0 oluyor. Olcum: 1025'te 0, 1300'de 8, 1440'ta 78. 1310 ustunde dogal ortalama zaten >=12px birakiyor. */ @media (max-width:1310px){ /* 🔴 Kartlar dar ekranda iki kenara YAPISIYOR: `batuvalve-container` yan boslugunu yalniz `max-width:1270px` ortalamasindan aliyor, ekran ondan darsa bosluk 0 oluyor. Olcum (390px): blog yazisinin BES konteyneri de sol=0 sag=0. Header karti 10px icerideydi, ayni deger. 🔴 `!important` SART: kutu `margin`i SATIR ICI stil olarak basiliyor. 🔵 Header ve footer HARIC: onlarin kendi duzeni var (header karti zaten 10px iceride, footer alt seridi bilerek tam genislik). */ /* 🔴 Kenar boslugu TEK BASINA yetmiyor: kart bir FLEX OGESI ve bazi alanlarda genisligi %100e sabitleniyor; margin onu daraltmiyor, disari itiyor. Olcum (390px, teknik dokuman): m_ust karti 355px (dogru) ama m_govde karti 375px -> sagdan 10px tasiyordu. 🔑 `min()` ile hem 1270px tavani hem 20px yan bosluk korunur. */ /* 🔴 `:not(.btv-t--block *)`: seçici TORUN olduğu için arşiv/tekil şablonun İÇİNE gömülü `.btv-t--block` şablonlarının kapları da yakalanıyordu ve 10px margin + `calc(100% - 20px)` İKİNCİ KEZ uygulanıyordu. Ölçüm (386px): gövde kabı 351px iken bloklar 291px, sol kenar 10 yerine 40. */ .btv-t--page-title [class*="btv-a--"]:not(.btv-t--block *) > .btv-k, .btv-t--single [class*="btv-a--"]:not(.btv-t--block *) > .btv-k, .btv-t--archive [class*="btv-a--"]:not(.btv-t--block *) > .btv-k{margin-left:10px!important;margin-right:10px!important; max-width:min(var(--btv-k,1270px), calc(100% - 20px))!important} /* 🔑 GÖRÜNMEZ gövde kabının yan boşluğu dar ekranda SIFIR: kenar boşluğunu yukarıdaki 10px margin zaten veriyor. Padding kalsaydı içerik 351 yerine 311'de kalır, içindeki bloklar breadcrumb kartıyla hizasız olurdu. */ :is(.btv-t--archive,.btv-t--single)>:is(.btv-t__masa,.btv-t__ortak,.btv-t__mobil)>[class*="btv-a--"]>.btv-k--default:not([class*="btv-kart--"]){padding-left:0!important;padding-right:0!important} } /* ══ Ürün alanı bloğu ══ */ .btv-b--urun{display:block;width:100%} /* Kicker: metin + ikon yan yana. Canlıda ikon 33px ve metnin sağında. */ .btv-b--urun.is-etiket{display:inline-flex;align-items:center;gap:10px;font-weight:600} .btv-b--urun.is-etiket .btv-urun__ikon{width:33px;height:33px;stroke-width:1.6} .btv-b--urun.is-baglanti{display:inline-flex;align-items:center;gap:.4em;text-decoration:none} .btv-b--urun.is-dugme{display:inline-flex;align-items:center;gap:.55em;padding:.72rem 1.5rem;border-radius:40px;background:var(--btv-urun-dugme,#072A6B);color:#fff!important;font-weight:600;text-decoration:none} .btv-b--urun.is-dugme:hover{background:var(--btv-urun-dugme-h,#2382C4)} .btv-b--urun.is-video{position:relative;aspect-ratio:16/9} .btv-b--urun.is-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .btv-urun__baslik{margin:0 0 .35em} .btv-urun__ikon{flex:0 0 auto} /* ── Ürün bağlantısı: kart görünümü ────────────────────────── Canlıdaki `uicore-icon-box` karşılığı: kenarlıklı kutu · tıklanabilir başlık · altında düz köşeli düğme + ikon. 🔴 Düğme `align-self:flex-start` ile daralır; kutu bir flex sütunu olduğu için varsayılanda (`stretch`) kutunun tamamına yayılırdı. */ /* Ölçüler canlıdaki (batusan.com) uicore-icon-box'tan alındı: kutu 2px kenarlık / 12px radius / 30px iç boşluk · başlık 18/18 · düğme 42px. */ .btv-b--urun.is-kart{display:flex;flex-direction:column;align-items:flex-start;gap:15px; padding:var(--btv-urun-kart-pad,30px); background:var(--btv-urun-kart-bg,#fff); border:2px solid var(--btv-urun-kart-kenar,#7f7f7f4d); border-radius:var(--btv-urun-kart-radius,12px)} .btv-urun-kart__baslik{margin:0;font-size:18px;font-weight:700;line-height:1} .btv-urun-kart__baslik a{color:var(--btv-urun-kart-baslik,#2382C4);text-decoration:none} .btv-urun-kart__baslik a:hover{color:var(--btv-urun-kart-baslik-h,#072A6B)} /* 🔴 Yükseklik `line-height`ten gelir, dolgudan değil: canlıda dolgu 5/10px ve düğme yine de 42px. Dolguyu büyütmek metni yanlış yere iter. */ .btv-urun-kart__dugme{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start; padding:5px 10px;border:1px solid var(--btv-urun-kart-dugme,#2382C4); background:var(--btv-urun-kart-dugme,#2382C4);color:#fff!important; font-size:16px;font-weight:700;line-height:1.875;text-decoration:none} .btv-urun-kart__dugme:hover{background:var(--btv-urun-kart-dugme-h,#072A6B);border-color:var(--btv-urun-kart-dugme-h,#072A6B)} /* ══ Distribütör alanları ══ Ölçüler canlıdaki (batusan.com) sayfadan alındı. */ .btv-b--dist{display:block;width:100%} /* Logo kutusu: öne çıkan görsel + "Website URL" — 2px #EEF0F4, radius 12 */ .btv-b--dist.is-logo-web{border:2px solid var(--btv-dist-kutu,#EEF0F4);border-radius:12px; padding:0 0 15px;text-align:center} .btv-dist-logo__gorsel img{display:block;max-width:100%;height:auto;margin:0 auto} .btv-dist-logo__link{display:inline-block;margin-top:10px;font-size:18px;font-weight:600; color:var(--btv-dist-link,#2382C4);text-decoration:none} .btv-dist-logo__link:hover{color:var(--btv-dist-link-h,#072A6B);text-decoration:underline} /* İletişim kartları: 3px rgba(127,127,127,.17), radius 16 🔴 `align-self:stretch` ŞART: BTV sütunu `align-items:center` kullanıyor, blok içeriği kadar daralıyordu — Email kartı Address'ten dar çıkıyordu. */ .btv-b--dist.is-kartlar{display:flex;flex-direction:column;gap:18px; align-self:stretch;width:100%} .btv-dist-kart{border:3px solid var(--btv-dist-kart,#7f7f7f2b);border-radius:16px; padding:12px 16px 16px;width:100%;box-sizing:border-box} .btv-dist-kart__ikon{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:6px;background:var(--btv-dist-ikon-bg,#8a8a8a);color:#fff} .btv-dist-kart__ikon .btv-dist__ikon{width:22px;height:22px;color:#fff;margin:0} .btv-dist-kart__baslik{margin:14px 0 10px;font-size:18px;font-weight:700;color:var(--btv-dist-kart-baslik,#072A6B)} .btv-b--dist.is-kartlar .btv-dist-kart__ic{font-size:18px;line-height:30px} .btv-dist-kart__ic>div{display:flex;gap:.35em} .btv-dist-kart__et{display:inline-block;min-width:3.4em} /* İlgili haberler: zincir ikonu + bağlantı, madde işareti YOK. */ .btv-b--dist.is-haberler{margin:0;padding:0;list-style:none} .btv-b--dist.is-haberler li{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px} .btv-b--dist.is-haberler .btv-dist__ikon{flex:0 0 auto;width:20px;height:20px; margin-top:.1em;color:var(--btv-dist-link,#2382C4)} /* Başlık altı çizgi — canlıdaki "… Address & Phone" başlığı gibi. */ .btv-dist__baslik{margin:0 0 18px;padding-bottom:8px; border-bottom:1px solid var(--btv-dist-cizgi,#1F1F1E)} .btv-b--dist.is-iletisim{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .btv-b--dist .btv-dist__satir{display:flex;align-items:flex-start;gap:10px} .btv-dist__ikon{flex:0 0 auto;margin-top:.15em;color:var(--btv-dist-ikon,#2382C4)} .btv-b--dist a{color:var(--btv-dist-link,#2382C4);text-decoration:none} .btv-b--dist a:hover{color:var(--btv-dist-link-h,#072A6B);text-decoration:underline} .btv-b--dist.is-web,.btv-b--dist.is-eposta,.btv-b--dist.is-telefon{display:flex;align-items:center;gap:10px} /* Harita — API anahtarsız gömme; ek script yok, lazy yükleniyor. */ .btv-b--harita{width:100%;overflow:hidden;border-radius:var(--btv-harita-radius,8px);min-height:320px} .btv-b--harita iframe{display:block;width:100%;height:100%;border:0} /* Sosyal ikonların kart sarmalayıcısı (ürün sayfası "Follow Us" kutusu) */ .btv-sos-kutu{display:block;width:100%;padding:var(--btv-urun-kart-pad,30px); background:var(--btv-urun-kart-bg,#fff); border:2px solid var(--btv-urun-kart-kenar,#7f7f7f4d); border-radius:var(--btv-urun-kart-radius,12px)} .btv-sos-kutu.is-center{text-align:center} .btv-sos-kutu.is-right{text-align:right} .btv-sos-kutu__baslik{margin:0 0 14px;padding-bottom:12px;font-size:18px;font-weight:700; color:var(--btv-sos-baslik,#1F1F1E); border-bottom:1px solid var(--btv-urun-kart-kenar,#7f7f7f4d)} .btv-sos-kutu .btv-b--sosyal{width:100%} /* Marka biçimi — canlıdaki Elementor sosyal ikonlarının ölçüsü: 50×50, %10 radius, 25px beyaz ikon, ağın kendi rengi. */ .btv-b--sosyal.is-marka{gap:10px} .btv-b--sosyal.is-marka .btv-sos{width:50px;height:50px;border:0;border-radius:10%;color:#fff} .btv-b--sosyal.is-marka .btv-sos svg{width:25px;height:25px} .btv-b--sosyal.is-marka .btv-sos--facebook{background:#3b5998} .btv-b--sosyal.is-marka .btv-sos--instagram{background:#262626} .btv-b--sosyal.is-marka .btv-sos--youtube{background:#cd201f} .btv-b--sosyal.is-marka .btv-sos--linkedin{background:#0077b5} .btv-b--sosyal.is-marka .btv-sos--x{background:#000} .btv-b--sosyal.is-marka .btv-sos:hover{opacity:.85} /* Yalnız ikon: kutu/kenarlık yok. */ .btv-b--sosyal.is-sade .btv-sos{width:auto;height:auto;border:0;border-radius:0} /* ═══ Alan arka plan katmanı (Background Overlay) ═══ 🔑 Katman hem RENK hem GÖRSEL taşıyabilir ve opaklık İKİSİNE BİRDEN uygulanır — canlıdaki Elementor hero'sunun kurulumu bu. 🔴 Varsayılan opaklık 1: kaynak seçilip opaklık verilmediyse görsel tam güçte çıksın, yarı saydam değil. */ .btv-ust{position:relative} .btv-ust>*{position:relative;z-index:1} .btv-ust::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit; background-color:var(--btv-ust-renk,transparent); background-image:var(--btv-ust-gorsel,none); background-size:var(--btv-ust-boyut,cover);background-position:var(--btv-ust-konum,center center);background-repeat:no-repeat; opacity:var(--btv-ust-opaklik,1)} /* Datasheet: görsel + PDF bağlantısı */ .btv-b--urun.is-datasheet{display:inline-block;margin:0;max-width:250px;text-align:center;border:1px solid rgba(0,0,0,.10);border-radius:10px;padding:16px} .btv-b--urun.is-datasheet a{display:block;text-decoration:none;font-weight:700} .btv-b--urun.is-datasheet img{display:block;margin:0 auto 12px;max-width:100%;height:auto} /* Düğme ikonu + tam genişlikli afiş */ .btv-dugme__ikon{width:1.6em;height:1.6em;flex:0 0 auto} .btv-b--dugme.is-tam{display:flex;width:100%;justify-content:flex-start;text-align:left;gap:.9em} /* Cevirisi olmayan dil — anasayfaya dusen baglanti yerine pasif rozet. */ .btv-dil__oge.is-pasif{opacity:.4;cursor:default;pointer-events:none;text-decoration:none} /* ══ Prefix bağlantıları (`prefix_baglantilari` bloğu) ══ */ .btv-b--prefix{display:block;width:100%} /* Bolum basligi — sitenin kendi deseni (sosyal medya kutusundan olculdu): 18px / 700 / #1F1F1E, altinda ince ayirici cizgi. */ .btv-prefix__baslik{ display:flex;align-items:center;gap:.55em; margin:0 0 var(--btv-prefix-baslik-alt,20px); padding:0 0 var(--btv-prefix-baslik-dolgu,12px); font-size:var(--btv-prefix-baslik-punto,22px); font-weight:700;line-height:1.35; color:var(--btv-prefix-baslik-renk,#1F1F1E); border-bottom:1px solid var(--btv-prefix-baslik-cizgi,rgba(127,127,127,.3))} /* Baslik ikonu: baslikla AYNI renk (currentColor), zemin yok. Punto ile birlikte buyusun diye olcu `em` cinsinden. */ .btv-prefix__ikon{flex:0 0 auto;width:1.15em;height:1.15em;display:block} .btv-b--prefix.is-satir .btv-prefix__liste{display:flex;flex-wrap:wrap;gap:.35em 0} .btv-b--prefix.is-satir .btv-prefix__oge+.btv-prefix__oge:before{content:"\00b7";margin:0 .55em;opacity:.5} .btv-b--prefix.is-liste .btv-prefix__liste{margin:0;padding-left:1.2em} .btv-b--prefix.is-liste .btv-prefix__oge{margin:0 0 .3em} /* Gorselli satir/liste: kucuk kare kupur, metinle dikey ortalanir. 🔴 Listede madde imi kaldirilir — gorselle birlikte hem im hem kupur yan yana durunca hizalama bozuluyor. */ .btv-b--prefix.has-gorsel:not(.is-kart) .btv-prefix__liste{padding-left:0;list-style:none} .btv-b--prefix.has-gorsel:not(.is-kart) .btv-prefix__oge{display:flex;align-items:center;gap:.6em;margin:0 0 .5em} .btv-b--prefix.has-gorsel.is-satir .btv-prefix__liste{gap:.35em 1.2em} .btv-b--prefix.has-gorsel.is-satir .btv-prefix__oge+.btv-prefix__oge:before{content:none} .btv-b--prefix.has-gorsel:not(.is-kart) .btv-prefix__gorsel{flex:0 0 auto;line-height:0} .btv-b--prefix.has-gorsel:not(.is-kart) .btv-prefix__gorsel img{display:block;width:44px;height:44px; object-fit:cover;border-radius:6px} /* Kart duzeni — DBB urun sayfasindaki "Technical Documents" kartlarindan TARAYICIDA OLCULEN degerler: kart 1px solid rgba(127,127,127,.17) / radius 24px / dolgu 10px / gap 20px gorsel 259x222, max-width:100% baslik 16px / 700 / rgb(35,130,196) / ortali / line-height 30px / margin 0 izgara 1244px icinde 4 kart (~281px) Cerceve referansta `figure`de degil, ust Elementor kapsayicisindaydi. */ .btv-b--prefix.is-kart .btv-prefix__liste{display:grid;gap:20px; grid-template-columns:repeat(var(--btv-prefix-sutun,4),minmax(0,1fr)); align-items:stretch} /* Gorsel ile baslik arasindaki bosluk (kullanici istegi: referanstaki 20px dardi). Degisken: --btv-prefix-kart-bosluk */ .btv-b--prefix.is-kart .btv-prefix__oge{display:flex;flex-direction:column; align-items:center;justify-content:flex-start; gap:var(--btv-prefix-kart-bosluk,28px);text-align:center; padding:var(--btv-prefix-kart-dolgu,20px);background:none; border:1px solid var(--btv-prefix-kart-kenar,rgba(127,127,127,.3)); border-radius:var(--btv-prefix-kart-radius,24px)} /* Hover, ayni sayfadaki mevcut kart bolumunden BIREBIR alindi (olculdu): border-color #1A1A1F40 = rgba(26,26,31,.25) — mavi DEGIL, koyu notr box-shadow rgba(26,26,31,.25) 0 0 1px 0 (Elementor'de `--e-global-color-0513cee` degiskeniyle tanimlı.) 🔴 Yalniz `border-color` gecisi veriliyor — `border` kisayoluna gecis vermek kalinligi da canlandirip karti 1px oynatiyor. */ .btv-b--prefix.is-kart .btv-prefix__oge{transition:border-color .2s ease,box-shadow .2s ease} .btv-b--prefix.is-kart .btv-prefix__oge:hover{ border-color:var(--btv-prefix-kart-kenar-h,rgba(26,26,31,.25)); box-shadow:0 0 1px 0 rgba(26,26,31,.25)} .btv-b--prefix.is-kart .btv-prefix__gorsel{display:block;width:100%;line-height:0} .btv-b--prefix.is-kart .btv-prefix__gorsel img{display:block;width:100%;max-width:100%; height:auto;margin:0 auto} .btv-b--prefix.is-kart .btv-prefix__link{font-size:var(--btv-prefix-punto,16px); font-weight:700;line-height:30px;color:var(--btv-prefix-link,#2382C4); text-decoration:none;text-align:center;margin:0;padding:0} .btv-b--prefix.is-kart .btv-prefix__link:hover{color:var(--btv-prefix-link-h,#072A6B)} @media (max-width:767px){ /* 🔑 `auto-fit`: tek kart varsa tam genisligi alir, 2+ kart yan yana gelir. Sabit `repeat(2,…)` tek kartli sayfada karti yarim birakiyordu. */ .btv-b--prefix.is-kart .btv-prefix__liste{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} /* 🔴 Gorsel sinirlanmazsa tek sutunda 273px'e kadar sisiyordu. */ .btv-b--prefix.is-kart .btv-prefix__gorsel img{max-width:var(--btv-prefix-gorsel-m,170px)} } /* Dugme: dolu mavi, beyaz buyuk harf. Kose yaricapi referansta cok kucuk. */ .btv-b--prefix .btv-prefix__dugme{display:inline-block; padding:var(--btv-prefix-dugme-dolgu,13px 26px); background:var(--btv-prefix-dugme-bg,#2382C4); color:var(--btv-prefix-dugme-renk,#fff)!important; border-radius:var(--btv-prefix-dugme-radius,3px); font-size:var(--btv-prefix-dugme-punto,16px);font-weight:500; line-height:1.2;text-decoration:none;text-transform:uppercase} .btv-b--prefix .btv-prefix__dugme:hover{background:var(--btv-prefix-dugme-bg-h,#072A6B)} /* 🔴 Burada ikinci bir `@media (max-width:767px){…grid-template-columns:1fr}` vardi ve yukaridaki 2 sutunluk kurali eziyordu: mobilde kartlar tek sutuna dusup gorsel 273px'e cikiyordu (olculdu 2026-09-14, 416px). */ /* ── Cihaz gorunurlugu ──────────────────────────────────── Kirilimlar sitede zaten kullanilanlar (Elementor kit ile ayni): mobil <=767 · tablet 768-1024 · masaustu >=1025. `!important` SART: bloklar inline `display:flex` alabiliyor. */ @media (min-width:1025px){.btv-gizle-d{display:none!important}} @media (min-width:768px) and (max-width:1024px){.btv-gizle-t{display:none!important}} @media (max-width:767px){.btv-gizle-m{display:none!important}} /* ══ Mobilde alt alta (sütun ayarı: Stack on mobile) ══════ 🔴 `align-items` !important: satır modundaki sütunun hizası `--btv-c-hiza` ya da satır içi stilden geliyor, ikisi de bunu ezerdi. Dikeye dönünce `space-between` zaten etkisiz kalır. */ @media (max-width:767px){ .btv-c--m-dikey{flex-direction:column;align-items:flex-start!important} .btv-c--m-dikey>.btv-b{max-width:100%} } /* ══ SAYFA KURUCUSU ═════════════════════════════════════ Sayfanın kendi düzeni (`.btv-t--sayfa`). Alan/sütun/blok kuralları şablonlarla ORTAK; burada yalnız sayfaya özgü olanlar var. */ /* İç satır — sütunun içinde yeni satır (Elementor iç container). */ .btv-r{--btv-r-gap:16px;--btv-r-hiza:stretch;display:flex;align-items:var(--btv-r-hiza);gap:var(--btv-r-gap);width:100%;box-sizing:border-box} .btv-r>.btv-c{min-width:0} .btv-r>.btv-c:not([style*="flex:"]){flex:1 1 0} /* Alt alta dizme — alan (`.btv-k--yigin-*`) ve iç satır (`.btv-r--yigin-*`). 🔴 Genişlik satır içi `flex:0 1 60%;max-width:60%` olarak yazılıyor; dar ekranda ikisini de ezmek şart, yoksa sütun %60'ta kalır. */ @media (max-width:1024px){ .btv-k--yigin-t,.btv-r--yigin-t{flex-direction:column;align-items:stretch} .btv-k--yigin-t>.btv-c,.btv-r--yigin-t>.btv-c{flex:1 1 auto!important;max-width:100%!important;width:100%;margin-left:0!important;margin-right:0!important} /* Alt alta inince sıra — sütunun "Order when stacked" ayarı. */ .btv-k--yigin-t>.btv-c--sira-ilk,.btv-r--yigin-t>.btv-c--sira-ilk{order:-1} .btv-k--yigin-t>.btv-c--sira-son,.btv-r--yigin-t>.btv-c--sira-son{order:99} } @media (max-width:767px){ .btv-k--yigin-m,.btv-r--yigin-m{flex-direction:column;align-items:stretch} .btv-k--yigin-m>.btv-c,.btv-r--yigin-m>.btv-c{flex:1 1 auto!important;max-width:100%!important;width:100%;margin-left:0!important;margin-right:0!important} .btv-k--yigin-m>.btv-c--sira-ilk,.btv-r--yigin-m>.btv-c--sira-ilk{order:-1} .btv-k--yigin-m>.btv-c--sira-son,.btv-r--yigin-m>.btv-c--sira-son{order:99} } /* Zengin metin / HTML bloğu — akış içeriği, satır bloğu değil. */ .btv-b--html{display:block;width:100%;line-height:inherit} .btv-b--html>:first-child{margin-top:0} .btv-b--html>:last-child{margin-bottom:0} .btv-b--html img{max-width:100%;height:auto} /* Hizalı başlık: `.btv-b` içerik boyuna büzülüyordu, `text-align` etkisiz kalıyordu. */ .btv-b--baslik[style*="text-align:center"],.btv-b--baslik[style*="text-align:right"]{display:block;align-self:stretch;width:100%} /* Görsel — "Fill the column width": sütunu kaplar, yükseklik orandan. */ .btv-b--gorsel.is-tam>a,.btv-b--gorsel.is-tam picture{display:block;width:100%} .btv-b--gorsel.is-tam img{width:100%;max-width:none;height:auto} /* Görsel yüksekliği: sabit (has-yuk) ya da sütunu doldur (is-dolu, Elementor height:100%). */ .btv-b--gorsel.has-yuk img{height:var(--btv-img-h)!important;object-fit:var(--btv-img-fit,cover)} .btv-b--gorsel.is-dolu{flex:1 1 auto;align-self:stretch;min-height:0} .btv-b--gorsel.is-dolu>a,.btv-b--gorsel.is-dolu picture{display:block;width:100%;height:100%} .btv-b--gorsel.is-dolu img{width:100%;max-width:none;height:100%!important;min-height:120px;object-fit:var(--btv-img-fit,cover)} /* Eklenti blokları (hero, yazı ızgarası, ikon kutusu) — akış bloğu. `.btv-b`nin inline-flex'i bunları içerik boyuna büzüyordu. */ .btv-b--hero,.btv-b--izgara,.btv-b--ikonkutu,.btv-b--galeri{display:block;width:100%;min-width:0;line-height:inherit} .btv-b--ikonkutu{flex:1 1 auto} /* 🔴 Slider'ın küçük resim şeridi ve ızgara, sütunun `min-width:auto`su yüzünden sütunu kendi doğal genişliğine (2581px) itiyordu. */ .btv-c:has(>.btv-b--hero),.btv-c:has(>.btv-b--izgara),.btv-c:has(>.btv-b--galeri),.btv-c:has(>.btv-b--gorsel.is-tam){min-width:0} /* Gallery bloğu "Full width": bölüm kutulu kalır, galeri sayfanın iki ucuna taşar. 🔑 Ölçü `100vw` DEĞİL bölümün (`.btv-a`) genişliği (`cqw`): Windows'ta vw kaydırma çubuğunu da sayıyor, galeri 7-8px sola kayıyordu. Konteyner yalnız böyle bir galeri olan bölümde açılır (galeri ışık kutusu body'de, etkilenmez). 🔑 `clip` (hidden değil): yatay kaydırma çıkmaz, yapışkan başlık bozulmaz. */ .btv-a:has(.btv-b--galeri.is-tam){container-type:inline-size} .btv-b--galeri.is-tam{width:100cqw;max-width:100cqw;margin-left:calc(50% - 50cqw);margin-right:calc(50% - 50cqw)} body:has(.btv-b--galeri.is-tam){overflow-x:clip} /* Gallery bloğu "Image height": her resim bu yüksekliğe kırpılır (masaüstü satır içi --btv-gal-h; tablet/mobil cihaz değişkeni). Yalnız bir değer yazılınca (has-h). */ .btv-b--galeri.has-h .btvlv-gallery-item img{width:100%;height:var(--btv-gal-h,auto)!important;object-fit:cover} .btv-b--galeri.has-h .btvlv-gallery-item picture{height:auto} @media (max-width:1024px){ .btv-rt-galh.btv-rt-galh{--btv-gal-h:var(--btv-rt-galh)!important} } @media (max-width:767px){ .btv-rm-galh.btv-rm-galh{--btv-gal-h:var(--btv-rm-galh)!important} } /* Gallery bloğu "Columns" / "Gap" — tablet & mobil. 🔑 Galeri kendi ölçülerini ID'li