/* ============================================================ DÜZELTME 1 — ana sayfa, sektörler, iletişim, bursa-web-tasarim (tasarım denetimi, 18 Eylül 2026) style.css ve main.js paylaşımlı olduğu için onlara dokunulmadı; bu dosya style.css'ten SONRA yüklenir ve yalnız yukarıdaki dört sayfaya bağlanır. Her blok neyi neden düzelttiğini yazıyor. ============================================================ */ /* ── 1) ZOOM SAHNESİ SABİTLENİRKEN ARKASI GÖRÜNÜYORDU ─────── .zoom-scene'in arka planı yoktu. GSAP sahneyi pin'lediği anda (anticipatePin) tarayıcı çerçeveleri, hâlâ ekranda olan "05 UI/UX Tasarım — 06 SEO & Bakım" hizmet satırlarının üstüne biniyor, iki katman iç içe okunuyordu. */ .zoom-scene{background:var(--bg)} /* ── 2) "CANLI DEMOYU AÇ" ROZETİ TELEFONDA İKİ SATIRA BÖLÜNÜYORDU Çerçeve 390 px'te ~180 px yüksekliğe düşüyor, rozet iki satıra kırılıp görselin yarısını kapatıyordu. */ @media (max-width:640px){ .zf-cta{ white-space:nowrap; font-size:.6rem;letter-spacing:.08em; padding:.5rem .9rem;bottom:.7rem; } } /* ── 3) 19 SİSTEM IZGARASI BOŞ HÜCREYLE BİTİYORDU ─────────── auto-fill 7 kolon üretiyordu: 19 kutudan sonra son satırda iki kutuluk gri boşluk kalıyordu. 20. kutu (Tüm sistemler) eklendi ve kolon sayısı her kırılımda 20'yi tam bölüyor. */ .sis-grid{grid-template-columns:repeat(5,1fr)} @media (max-width:1180px){.sis-grid{grid-template-columns:repeat(4,1fr)}} @media (max-width:860px){.sis-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:420px){.sis-grid{grid-template-columns:1fr}} .sis-grid li.sis-tumu a{background:rgba(216,255,62,.06)} .sis-grid li.sis-tumu .sis-ad{color:var(--acid)} /* ── 4) TARAYICI ÇUBUĞUNDAKİ KİLİT ─────────────────────────── Emoji yerine inline SVG kullanıldı; yazıyla aynı hizada dursun. */ .zf-url{display:inline-flex;align-items:center;gap:.4rem} .zf-kilit{flex:none;opacity:.75} /* ── 5) İLETİŞİM: ONAY KUTUSU DOKUNMA HEDEFİ ──────────────── Kutu 17×17 px'ti, satırın tamamı 44 px'in altındaydı. */ .onay-satir{padding-block:.6rem;min-height:44px} .onay-satir input[type=checkbox]{width:1.3rem;height:1.3rem;margin-top:.05rem} /* ── 6) HARİTA: DÜĞME GOOGLE'IN KENDİ KUTUSUNA BİNİYORDU ──── "Haritalarda açın" sol altta duruyordu; orada Google'ın künye satırı ("Map data ©…", "Terms") var ve sol üstteki "Open in Maps" balonuyla da çakışıyordu. Sağ üste alındı, harita künyesi görünür kaldı. */ .map-wrap .map-tag{left:auto;right:1rem;bottom:auto;top:1rem} @media (max-width:560px){ .map-wrap .map-tag{right:.7rem;top:.7rem;font-size:.62rem;padding:.5rem .8rem} } /* ── 7) SSS: GENİŞ EKRANDA SAĞ YARI TAMAMEN BOŞTU ─────────── .faq 860 px'te sabitti, 1440'ta sağda 320 px ölü alan kalıyordu. Artık soru listesi solda, "soru listede yoksa" kutusu sağda. */ .sss-duzen{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(1.6rem,3vw,3rem);align-items:start} .sss-duzen .faq{max-width:none} @media (max-width:980px){.sss-duzen{grid-template-columns:1fr}} .sss-yan{ border:1px solid var(--line-2); padding:1.6rem 1.5rem; display:flex;flex-direction:column;gap:.9rem; position:sticky;top:110px; } @media (max-width:980px){.sss-yan{position:static}} .sss-yan b{ font-family:var(--font-head);font-weight:800;font-size:1.15rem; letter-spacing:-.015em;color:var(--ink);line-height:1.2; } .sss-yan p{color:var(--muted);font-size:.92rem;line-height:1.65;margin:0} .sss-yan .btn{align-self:flex-start} /* ── 8) İLETİŞİM: SOL KOLON FORMDAN 300 PX KISAYDI ────────── Altta kapanmayan bir boşluk kalıyordu; oraya doğrudan arama kutusu kondu. */ .iletisim-kisa{ margin-top:1.6rem;border:1px solid var(--acid); background:rgba(216,255,62,.05); padding:1.4rem 1.4rem 1.5rem; display:flex;flex-direction:column;gap:.8rem; } .iletisim-kisa b{ font-family:var(--font-head);font-weight:800;font-size:1.1rem; letter-spacing:-.015em;color:var(--ink); } .iletisim-kisa p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6} .iletisim-kisa .btn{align-self:flex-start} /* ── 9) SEKTÖRLER: KARTLAR BAĞLANTI OLDUĞUNU BELLİ ETMİYORDU 35 kutu da düz metin gibi duruyordu; başlığa küçük bir ok eklendi, üzerine gelince asit lime kayıyor. */ .sk-kutu > b{display:flex;align-items:center;gap:.5rem} .sk-kutu > b::after{ content:"→"; font-family:var(--font-mono);font-weight:400;font-size:.95em; color:var(--muted); transition:transform .25s ease, color .25s ease; } .sk-kutu:hover > b::after, .sk-kutu:focus-visible > b::after{color:var(--acid);transform:translateX(4px)} @media (prefers-reduced-motion: reduce){ .sk-kutu > b::after{transition:none} .sk-kutu:hover > b::after{transform:none} } /* ── 10) ANA SAYFADA 35 SEKTÖR ETİKETİ TELEFONDA 1000 PX AKIYORDU Telefonda ilk 15 etiket kalıyor, gerisi için zaten altta "Sektör sayfalarının hepsi" düğmesi var. */ @media (max-width:640px){ #sektorler .sk-ilgili a:nth-of-type(n+16){display:none} } /* ── 11) KÖK KURALLAR: YATAY TAŞMA VE ÇAPA HİZASI ─────────── style.css'te yatay taşma body{overflow-x:hidden} ile kesiliyordu; bu, body'nin overflow-y'sini "auto"ya çevirip body'yi bir kaydırma kutusuna dönüştürüyor — sticky ve çapa hesapları bu yüzden kırılgan. overflow-x:clip aynı işi kaydırma kutusu üretmeden yapar. scroll-margin-top da #sss, #sektorler, /hizmetler#seo gibi çapa atlamalarının sabit başlığın altına düşmesini engeller. */ html{overflow-x:clip} body{overflow-x:clip;overflow-y:visible} [id]{scroll-margin-top:96px} /* ── 12) "KANIT" KARTLARININ DÜĞMELERİ AYNI HİZADA DEĞİLDİ ─── Sol kartın metni üç, sağdakinin iki satır; kartlar eşit yükseklikte ama "Nasıl işlediğini görün" düğmeleri 24 px kaymış duruyordu. */ .cv-izgara .cv-kart p{flex:1 1 auto} .cv-izgara .cv-kart .btn{margin-top:auto} /* ── 13) İLETİŞİM: SATIRLARDAKİ BAĞLANTILAR 17 PX YÜKSEKTİ ─── "+90 541 466 99 86", e-posta ve "Hemen yazın" satır içi metin olduğu için dokunma hedefi 17 px kalıyordu. Negatif margin ile yükseklik 44 px'e çıkarıldı, düzen bozulmadı. */ .contact-line a{ display:inline-block; padding-block:.8rem;margin-block:-.8rem; } /* ── 14) TELEFONDA KAHRAMAN ŞERİDİ ÜÇÜNCÜ SATIRA TAŞIYORDU ─── Üç etiket 390 px'te sığmayınca "Kaydır ↓" tek başına alt satıra düşüyor, kahramanla sonraki bölüm arasına boş bir satır giriyordu. Kaydırma zaten parmakla yapılıyor; o ipucu telefonda gizlendi. */ @media (max-width:640px){ .hero-strip{gap:.45rem;letter-spacing:.14em} .hero-strip > span:last-child{display:none} } /* ── 15) ALTLIKTA "·" AYIRACI SATIR SONUNDA SARKIYORDU ────── Telefonda "© 2026 Bursa Yazılım Ajansı ·" satır sonunda kalıp "Gizlilik (KVKK)" alt satıra tek başına iniyordu; ayıraç boşlukta asılı kalıyordu. Ayıraç artık bağlantıyla aynı satırda kalıyor. */ .alt-ayirac{white-space:nowrap} /* ── 16) SEKTÖR IZGARASI BOŞ HÜCREYLE BİTİYORDU ────────────── 35 kutu 3 kolona bölünmüyor; son satırda bir kutuluk delik vardı. 36. kutu artık çağrı kartı. */ .sk-kutu.sk-ek{border-color:var(--acid);background:rgba(216,255,62,.05)} .sk-kutu.sk-ek b{color:var(--acid)} .sk-kutu.sk-ek em{color:var(--muted)} /* ── 17) İLETİŞİM: HARİTA YÜKLENENE KADAR SİYAH DELİK ──────── iframe'in arkası boştu; ağ yavaşken ya da harita engelliyken 380 px'lik kara kutu kalıyordu. */ .map-wrap{background:var(--bg-2,#141410)} .map-wrap iframe{display:block;width:100%;border:0} /* ── 18) SÜREÇ KARTINDA NUMARA İLE BAŞLIK ARASI 51 PX BOŞLUKTU .step::before'un margin-bottom'u 3.2rem. Geniş ekranda dengeli ama telefonda kart daralıp uzayınca numara ile başlık arasında kopuk bir delik oluşuyordu. */ @media (max-width:640px){ .step::before{margin-bottom:1.5rem} } /* ── 19) DOKUNMA HEDEFİ 44 PX ALTINDA KALAN DÜĞMELER ──────── "Haritalarda açın" 36 px, .btn-sm düğmeleri 38–39 px yüksekti. Telefon/tablet genişliğinde hepsi 44 px'e çıkarıldı; masaüstü başlığındaki küçük "Teklif Alın" pili olduğu gibi bırakıldı ki üst çubuk büyümesin. */ .map-wrap .map-tag{min-height:44px;display:inline-flex;align-items:center} @media (max-width:1024px){ .btn-sm{min-height:44px} .crumb a{display:inline-block;padding-block:.55rem;margin-block:-.55rem} }