/* Theme Name: TG Responsive Theme Theme URI: https://example.com Author: Bilişimci GENÇ Yazılım Bilişim Description: Responsive, temiz ve modern WordPress teması. Version: 1.0.0 Text Domain: tg-resp-theme */ :root{ --tg-bg:#0b1220; --tg-card:#ffffff; --tg-text:#0f172a; --tg-muted:rgba(15,23,42,.65); --tg-border:rgba(15,23,42,.12); --tg-shadow:0 12px 30px rgba(0,0,0,.08); --tg-radius:18px; } *{box-sizing:border-box} html, body { height: 100%; } body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--tg-text); background:#f6f7fb; /* Footer her zaman en altta kalsın */ min-height: 100vh; display: flex; flex-direction: column; } a{color:inherit} .tg-container{ max-width:1200px; margin:0 auto; padding:0 16px; } /* HEADER */ .tg-header{ position:sticky; top:0; z-index:999; /* Arka plan zaten %92 opaktı; tam opak yapılıp backdrop-filter kaldırıldı. Görünüm aynı kalır, sticky header'ın her karede blur hesaplaması ortadan kalkar. */ background:#fff; border-bottom:1px solid var(--tg-border); } .tg-header__inner{ display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:14px; } /* BRAND */ .tg-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; max-width: 520px; overflow:hidden; } .tg-logo{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; letter-spacing:.5px; background:linear-gradient(135deg,#111827,#4b5563); flex: 0 0 auto; } .tg-brand__text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; } .tg-brand__title{ font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; } .tg-brand__subtitle{ font-size:12px; color:var(--tg-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; } /* LOGO IMAGES (tek kaynak) */ .tg-logo-img{ display:block; width:auto; height:auto; max-height:44px; /* desktop */ max-width:180px; object-fit:contain; } /* Görünürlük kuralı (tek kaynak) */ .tg-logo--mobile{ display:none; } .tg-logo--desktop{ display:block; } @media (max-width: 900px){ .tg-logo--desktop{ display:none; } .tg-logo--mobile{ display:block; max-height:50px; /* max 50px */ max-width:160px; } /* mobil logo yoksa: desktop logo mobilde de görünsün */ .tg-logo--desktop.tg-logo--fallback{ display:block; } } /* MENU */ .tg-nav__list{ list-style:none; margin:0; padding:0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .tg-nav__list a{ text-decoration:none; font-weight:700; font-size:13px; padding:10px 12px; border-radius:12px; border:1px solid var(--tg-border); background:#fff; } .tg-nav__list a:hover{ box-shadow:0 10px 22px rgba(0,0,0,.07); } .tg-burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--tg-border); background:#fff; cursor:pointer; align-items:center; justify-content:center; gap:4px; flex-direction:column; } .tg-burger span{ display:block; width:18px; height:2px; background:#111827; border-radius:2px; } /* MAIN */ .tg-main{ flex: 1; padding:20px 0; } .tg-post{ background:var(--tg-card); border:1px solid var(--tg-border); border-radius:var(--tg-radius); padding:16px; box-shadow:var(--tg-shadow); margin:0 0 14px; } .tg-post__title{ margin:0 0 8px; font-size:18px; } .tg-post__title a{ text-decoration:none; } .tg-post__content{ color:var(--tg-muted); } .tg-pagination{ margin-top:12px; } /* FOOTER */ .tg-footer{ border-top:1px solid var(--tg-border); background:#fff; margin-top:auto; /* kritik */ } .tg-footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; flex-wrap:wrap; } .tg-footer__meta{ font-size:12px; color:var(--tg-muted); margin-top:4px; } .tg-footer__list{ list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap; } .tg-footer__list a{ text-decoration:none; font-weight:700; font-size:13px; padding:10px 12px; border-radius:12px; border:1px solid var(--tg-border); background:#fff; } /* RESPONSIVE MENU */ @media (max-width: 900px){ /* header içi yerleşim */ .tg-header__inner{ position:relative; } .tg-burger{display:inline-flex} /* Menü kapalıyken gizli */ .tg-nav{display:none} /* Açılınca header altına panel olarak çıksın */ .tg-nav.is-open{ display:block; position:absolute; left:0; right:0; top:calc(100% + 10px); background:#fff; border:1px solid var(--tg-border); border-radius:14px; padding:10px; box-shadow:0 14px 30px rgba(0,0,0,.12); z-index:99999; } /* Menü listesi */ .tg-nav__list{ flex-direction:column; align-items:stretch; gap:8px; } .tg-nav__list a{ width:100%; display:flex; justify-content:space-between; padding:12px 12px; border-radius:12px; } /* Mobilde alt menü (sub-menu) normal akışta olsun */ .tg-nav__list .menu-item-has-children{position:static} .tg-nav__list .sub-menu{ position:static; display:block; margin:6px 0 0 0; padding:8px; border:1px dashed var(--tg-border); border-radius:12px; background:#fbfbfd; box-shadow:none; } .tg-nav__list .sub-menu a{ border:1px solid var(--tg-border); background:#fff; box-shadow:none; } } /* ===== HEADER MENU (PRO) ===== */ /* Desktop dropdown */ .tg-nav__list .menu-item-has-children{position:relative} .tg-nav__list .sub-menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:220px; margin:0; padding:8px; list-style:none; border-radius:14px; border:1px solid var(--tg-border); background:#fff; box-shadow:0 14px 30px rgba(0,0,0,.10); display:none; z-index:9999; } .tg-nav__list .sub-menu a{ display:block; padding:10px 10px; border-radius:10px; border:none; background:transparent; } .tg-nav__list .sub-menu a:hover{ background:#f6f7fb; box-shadow:none; } .tg-nav__list .menu-item-has-children:hover > .sub-menu{ display:block; } /* Mobilde dropdownları normal akışta göster */ @media (max-width: 900px){ .tg-nav__list .menu-item-has-children{position:static} .tg-nav__list .sub-menu{ position:static; display:block; box-shadow:none; border:1px dashed var(--tg-border); margin:8px 0 0; padding:8px; } } /* ========================================================== PERFORMANS: ekran disindaki bolumleri bosuna boyama Gorsel degisiklik yok. Bolum ekranin disindayken tarayici onu boyamaz ve icindeki animasyonlari calistirmaz; gorunur alana girince normal sekilde devreye girer. contain-intrinsic-size'daki "auto" son bilinen yuksekligi hatirlar, bu sayede kaydirma cubugu ziplamaz. ========================================================== */ .bgp-menu103, .bgp-menu105, .bgp-menu104, .bgp-menu93, .bgp-menu94{ /* content-visibility: auto; <-- 11.08.2026 KALDIRILDI: hizli kaydirmada beyaz parlama yapiyordu. Yerine asagidaki 5. bolum (animasyon duraklatma) geldi. */ } /* Dar ekran (mobil) icin olculmus gercek yukseklikler */ .bgp-menu103{ contain-intrinsic-size: auto 1762px; } /* 11.08.2026 olculdu (eski: 1580) */ .bgp-menu104{ contain-intrinsic-size: auto 1048px; } /* 11.08.2026 olculdu (eski: 940) */ .bgp-menu105{ contain-intrinsic-size: auto 469px; } /* 11.08.2026 olculdu (eski: 485) */ .bgp-menu93 { contain-intrinsic-size: auto 450px; } /* 11.08.2026 olculdu (eski: 410) */ .bgp-menu94 { contain-intrinsic-size: auto 346px; } /* 11.08.2026 olculdu (eski: 270) */ /* Genis ekran (masaustu) icin olculmus gercek yukseklikler */ @media (min-width: 901px){ .bgp-menu103{ contain-intrinsic-size: auto 943px; } /* 11.08.2026 olculdu (eski: 1440) */ .bgp-menu104{ contain-intrinsic-size: auto 450px; } /* 11.08.2026 olculdu (eski: 580) */ .bgp-menu105{ contain-intrinsic-size: auto 657px; } /* 11.08.2026 olculdu (eski: 1130) */ .bgp-menu93 { contain-intrinsic-size: auto 414px; } /* 11.08.2026 olculdu (eski: 415) */ .bgp-menu94 { contain-intrinsic-size: auto 132px; } /* 11.08.2026 olculdu (eski: 215) */ } /* ========================================================== PERFORMANS (SADECE MOBIL): cam (blur) efektlerini kapat backdrop-filter, mobil GPU'nun en cok zorlandigi islemdir ve her kaydirma karesinde yeniden hesaplanir. Bu sayfada blur'lu kartlarin arkasinda bulaniklastirilacak desen yok (duz zemin), bu yuzden gorsel karsiligi yok; olcumde acik/kapali goruntuler birebir ayni cikti. MASAUSTUNDE (901px ve uzeri) cam efekti AYNEN KORUNUR. ========================================================== */ @media (max-width: 900px){ *{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Istisna: Google yorumlari penceresinin arka plani bulanik kalsin, arkadaki icerik okunakliligi bozmasin. */ .bgp-menu93__modalBack{ backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } } /* ========================================================== PERFORMANS (SADECE MOBIL): PAINT-PAHALI ANIMASYONLAR Sayfadaki 50 sonsuz animasyonun 43'u transform/opacity ile calisir; bunlar GPU'da ucuzdur ve AYNEN BIRAKILDI (karakter animasyonu, yuzen kartlar, ikon nabzi vb). Asagidaki 7 oge ise box-shadow / background-position / filter animasyonu yapiyor; bunlar her karede yeniden cizim (paint) tetikler ve mobilde kasmanin ana sebebidir. Durdurulduklarinda ogeler yerinde ve gorunur kalir, yalnizca hareket durur. Masaustunde aynen devam eder. ========================================================== */ @media (max-width: 900px){ .bgp-btn__cloud-core, /* filter + background-position */ .bgp-btn__dream, /* background-position */ .bgp-menu103__btnGlow, /* background-position */ .bgp-menu103__titleGradient, /* background-position */ .bgp-menu103__kicker, /* box-shadow */ .bgp-menu104__kicker{ /* box-shadow */ animation: none !important; } } /* ========================================================== MOBIL PERFORMANS + RESPONSIVE SAGLAMLASTIRMA Eklenme: 11.08.2026 Geri alma: bu blogun tamamini silin ya da style-yedek-20260811-1815.css.bak dosyasini style.css olarak geri yukleyin. ONEMLI: Bu blok hicbir RENK, YAZI TIPI, BOYUT, BOSLUK veya DUZEN degeri degistirmez. Yalnizca (1) tarayicinin ekran disindaki bolumleri bosuna cizmesini engeller ve (2) tasma ihtimallerine karsi guvenlik agi kurar. ========================================================== */ /* ---------------------------------------------------------- 1) RESPONSIVE GUVENLIK AGI Su anki icerikte tasma YOK (360/600/768/820/1024 px'de olculdu, hicbir sayfada yatay kaydirma cikmadi). Asagidaki kurallar ileride panelden eklenecek genis icerikler (buyuk gorsel, gomulu video, tablo, uzun link) sayfayi yatay kaydirmaya zorlamasin diye vardir. Mevcut gorunume etkisi yoktur. ---------------------------------------------------------- */ img, video, canvas, svg, iframe, embed, object{ max-width: 100%; } img, video{ height: auto; } /* Uzun kelime/URL tasmasi (ornegin baslikta bosluksuz uzun metin) */ .site-main h1, .site-main h2, .site-main h3, .site-main h4, .site-main p, .site-main li, .tg-post__title, .tg-post__content{ overflow-wrap: break-word; } /* Kod bloklari ve tablolar kendi icinde kaysin, sayfayi kaydirmasin */ .site-main pre, .site-main code{ max-width: 100%; overflow-x: auto; } .site-main table{ display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------------------------------------------------------- 2) EKRAN DISINDAKI BOLUMLERI BOSUNA CIZME Mevcut style.css'te bu teknik zaten 5 bolume uygulanmisti (menu93, 94, 103, 104, 105). Asagida ayni yontem, olculmus gercek yuksekliklerle kalan 9 bolume genisletiliyor. Neden onemli: bolum ekran disindayken tarayici onu cizmez ve ICINDEKI SONSUZ ANIMASYONLARI CALISTIRMAZ. Bu sayfada 43 sonsuz animasyon var; buyuk kismi artik yalnizca gorunur alandayken calisacak. Yukseklikler 360 px (mobil) ve 1280 px (masaustu) genislikte tek tek olculdu; bu yuzden kaydirma cubugu ziplamaz. Bilerek DISARIDA birakilanlar: - .bgp-menu112 : position:fixed, her zaman ekranda - .bgp-menu1010: anasayfa hero'su, ilk ekranda (LCP) - .bgp-menu113 : hizmetler sayfasi hero'su, ilk ekranda ---------------------------------------------------------- */ .bgp-menu91-cta, .bgp-menu92, .bgp-menu96, .bgp-menu101, .bgp-menu106, .bgp-menu107, .bgp-menu114, .bgp-menu115, .bgp-menu117{ /* content-visibility: auto; <-- 11.08.2026 KALDIRILDI: hizli kaydirmada beyaz parlama yapiyordu. Yerine asagidaki 5. bolum (animasyon duraklatma) geldi. */ } /* Dar ekran (mobil) icin olculmus gercek yukseklikler */ .bgp-menu91-cta{ contain-intrinsic-size: auto 341px; } .bgp-menu92 { contain-intrinsic-size: auto 136px; } .bgp-menu96 { contain-intrinsic-size: auto 1086px; } .bgp-menu101 { contain-intrinsic-size: auto 533px; } .bgp-menu106 { contain-intrinsic-size: auto 1686px; } .bgp-menu107 { contain-intrinsic-size: auto 2326px; } .bgp-menu114 { contain-intrinsic-size: auto 500px; } .bgp-menu115 { contain-intrinsic-size: auto 2005px; } .bgp-menu117 { contain-intrinsic-size: auto 1190px; } /* Genis ekran (masaustu) icin olculmus gercek yukseklikler */ @media (min-width: 901px){ .bgp-menu91-cta{ contain-intrinsic-size: auto 146px; } .bgp-menu92 { contain-intrinsic-size: auto 136px; } .bgp-menu96 { contain-intrinsic-size: auto 635px; } .bgp-menu101 { contain-intrinsic-size: auto 633px; } .bgp-menu106 { contain-intrinsic-size: auto 728px; } .bgp-menu107 { contain-intrinsic-size: auto 986px; } .bgp-menu114 { contain-intrinsic-size: auto 335px; } .bgp-menu115 { contain-intrinsic-size: auto 1101px; } .bgp-menu117 { contain-intrinsic-size: auto 611px; } } /* ---------------------------------------------------------- 3) "HAREKETI AZALT" SISTEM TERCIHI Yalnizca kullanici telefonunda/bilgisayarinda bu ayari ACIKCA actiysa devreye girer. Varsayilan gorunum ve animasyonlar hicbir sekilde degismez. ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------- 4) DAR EKRAN BASLIK|MENU DUGMESI DUZELTMESI (900 px ve alti) Tespit: 320 px genislikte sayfa 6 px yatay kayiyordu ve menu (hamburger) dugmesi 44x44 yerine 32x44'e eziliyordu. Sebep: site basligi .bgp-force-site-title kurali ile "min-width:max-content; flex-shrink:0" yapilmis; bu yuzden baslik daralamiyor ve dugmeyi ekran disina itiyor. Cozum: hamburger menunun gorundugu tum aralikta (900 px ve alti) baslik daralabilsin (tasarimin orijinal niyeti olan "..." ile kisalma) ve dugme tam 44x44 dokunma alanini korusun. ONEMLI: flex-shrink yalnizca YER YETMEDIGINDE devreye girer. Icerik sigdigi her genislikte (375, 414, 600, 768, 820 px) gorunum bire bir aynidir - olculerek dogrulandi. 901 px ve uzeri bu blogun tamamen disindadir; orada zaten sorun yoktu (olculdu: 360/375/414/600/768/820/1024/1280). ---------------------------------------------------------- */ @media (max-width: 900px){ /* NOT: bgp-force-site-title sinifi marka baglantisinin KENDISINE de uygulaniyor ve ona flex-shrink:0 veriyor. Daralmayi engelleyen asil sebep buydu; asagida yalnizca dar ekranda geri aciliyor. */ .tg-header .tg-header__inner .tg-brand{ min-width: 0 !important; flex-shrink: 1 !important; } /* Logo kucultulmesin, daralmayi baslik ustlensin */ .tg-header .tg-header__inner .tg-brand .tg-logo-img{ flex-shrink: 0 !important; } .tg-header .tg-header__inner .tg-brand .tg-brand__text{ min-width: 0 !important; } .tg-header .tg-header__inner .tg-brand .tg-brand__text .tg-brand__title, .tg-header .tg-header__inner .tg-brand .tg-brand__text .bgp-force-site-title, .tg-header .tg-header__inner .tg-brand .bgp-force-site-title{ min-width: 0 !important; max-width: 100% !important; flex-shrink: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Dokunma alani ezilmesin */ .tg-header .tg-header__inner .tg-burger{ flex: 0 0 44px !important; width: 44px !important; } } /* ---------------------------------------------------------- 6) FOOTER'DA BEYAZ PARLAMA DUZELTMESI (11.08.2026) BELIRTI Mobilde hizli asagi kaydirip footer'a gelince (veya sonuna gecince) bir an acik/beyaz bir alan gorunup kayboluyordu. Yavas kaydirmada gorunmuyordu. SEBEP Footer'in gorunen zemini .bgp-footer-pro uzerindeki mavi gradyan: 375x880 = ~330.000 piksel, sayfadaki EN BUYUK tek boyama yuzeyi. Ama o gradyani tasiyan