/* ===================================================================== * view2 — MOBİL DENEYİM KATMANI * * main.css'in ÜSTÜNE biner. Tasarım dili, palet ve markup aynı kalır; * burada yalnızca mobilde bozuk olan davranışlar düzeltilir. * Mevcut tokenlar (--ztc-*) kullanılır, yeni renk tanımlanmaz. * ===================================================================== */ /* --------------------------------------------------------------------- * 1. DOKUNMATİK HİJYENİ * ------------------------------------------------------------------- */ /* Özel imleç artık her cihazda kapalı — bkz. theme.css bölüm 13. */ /* iOS'ta background-attachment:fixed her scroll'da yeniden boyama yapar ve gözle görülür takılma yaratır. Dokunmatikte normal akışa alıyoruz. */ @media (hover: none), (pointer: coarse) { .body1, .body1.light-mode { background-attachment: scroll; } } /* Dokunma vurgusunun mavi kutusu */ a, button, .list-group-item { -webkit-tap-highlight-color: transparent; } /* --------------------------------------------------------------------- * 2. BÖLÜM NAVİGASYONU — mobilde alt bar * * V1'de bu ray 992px altında display:none idi ve yerine hiçbir şey * konmamıştı. Aynı elemanı (#list-example) mobilde alt bara çeviriyoruz. * * mobile.js bu elemanı altına TAŞIR. Sebep: .personal-contact-box * AOS yüzünden kalıcı transform taşıyor ve transform'lu ata eleman * position:fixed için containing block oluyor. Taşıyarak profil kartına * hiç dokunmadan sorunu çözüyoruz (kart birebir orijinal hâlinde kalır). * * Taşındığı için main.css'in `.main-hero-area7 .list-group ...` kuralları * artık eşleşmiyor; Bootstrap'ın ham .list-group-item stilleri devreye * girdiğinden onları burada eziyoruz. * ------------------------------------------------------------------- */ @media (max-width: 1399.98px) { .list-group.js-section-bar { display: flex; position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: auto; width: auto; z-index: 90; flex-direction: row; justify-content: space-between; gap: 2px; padding: 6px; border-radius: 8px; background: var(--ztc-bg-bg-1); background: color-mix(in srgb, var(--ztc-bg-bg-1) 88%, transparent); border: 1px solid var(--ztc-border-border-1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55); transition: transform 0.35s ease, opacity 0.25s ease; } /* Telefonda kenardan kenara uzanması doğru, ama 1366px laptopta 1342px'e yayılıp geriliyordu. Genişliği sınırlayıp ortalıyoruz. left/right ikisi de tanımlıyken `margin-inline: auto` sabit konumlu elemanı ortalar — transform'a dokunmaya gerek kalmaz (transform [data-hidden] gizleme animasyonunda kullanılıyor). */ @media (min-width: 40rem) { .list-group.js-section-bar { max-width: 34rem; margin-inline: auto; } } /* Aşağı kaydırırken gizlenir, yukarı kaydırınca geri gelir (mobile.js) */ .list-group.js-section-bar[data-hidden="true"] { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } /* Bootstrap varsayılanları (beyaz zemin, koyu metin, mavi aktif) */ .list-group.js-section-bar .list-group-item { color: var(--ztc-text-text-1); text-decoration: none; box-shadow: none; flex: 1 1 0; min-width: 0; height: auto; width: auto; min-height: 48px; /* dokunma hedefi */ line-height: 1; margin-bottom: 0; padding: 6px 2px 5px; border: 1px solid transparent; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; } .list-group.js-section-bar .list-group-item i { font-size: 20px; line-height: 1; opacity: 0.75; } /* Masaüstünde bu hover'da çıkan tooltip'ti; mobilde ikonun altında okunur bir etiket oluyor. */ .list-group.js-section-bar .list-group-item span { position: static; visibility: visible; opacity: 1; width: 100%; padding: 0; border: 0; background: none; top: auto; left: auto; font-size: 10px; line-height: 1.15; font-weight: var(--ztc-weight-medium); letter-spacing: 0.01em; color: var(--ztc-text-text-1); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Aktif bölüm — masaüstüyle aynı vurgu rengi */ .list-group.js-section-bar .list-group-item.active { background: var(--ztc-bg-btn-bg1); border-color: var(--ztc-bg-btn-bg1); } .list-group.js-section-bar .list-group-item.active i { opacity: 1; color: #fff; } /* Açık temada --ztc-text-text-1 koyu renk; mavi aktif zemin üzerinde okunmuyordu. Aktif etiket iki temada da beyaz. */ .list-group.js-section-bar .list-group-item.active span { color: #fff; } /* Bootstrap'ın .list-group-item-action:hover gri zemini */ .list-group.js-section-bar .list-group-item:hover, .list-group.js-section-bar .list-group-item:focus { color: var(--ztc-text-text-1); background: transparent; } .list-group.js-section-bar .list-group-item.active:hover, .list-group.js-section-bar .list-group-item.active:focus { background: var(--ztc-bg-btn-bg1); } /* Hover efektini dokunmatikte iptal et (takılı kalmasın) */ .list-group.js-section-bar .list-group-item:hover span { left: auto; } @media (hover: none) { .list-group.js-section-bar .list-group-item:hover { background: transparent; } .list-group.js-section-bar .list-group-item.active:hover { background: var(--ztc-bg-btn-bg1); } } /* Alt bar içeriği örtmesin */ body.has-section-bar .footer-area { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } /* Çapa hedefleri alt barın ve üst header'ın altında kalmasın */ html { scroll-padding-top: 90px; scroll-padding-bottom: 90px; } } /* Masaüstüne geçildiğinde JS elemanı yerine taşıyana kadar güvence */ @media (min-width: 1400px) { .list-group.js-section-bar { display: none; } } /* NOT: alt bar eşiği 992px değil 1400px. Sebep: ikon rayı .personal-contact-box'a göre `left: -100px` ile konumlanıyor ve o kadar yan boşluk ancak container 1320px olduğunda (≥1400px) kalıyor. 992-1399 arasında Bootstrap container'ı büyüdükçe yan boşluk daralıp ray ekran dışına taşıyordu (992px'te kartın solunda yalnızca 28px yer var, ray ise 80px). O aralıkta alt bar devreye giriyor. */ /* Çok dar telefonlarda (≤360px) etiketler sığmıyor — ikonlar kalsın */ @media (max-width: 22.5rem) { .list-group.js-section-bar .list-group-item span { display: none; } .list-group.js-section-bar .list-group-item { min-height: 44px; } .list-group.js-section-bar .list-group-item i { font-size: 18px; } } /* --------------------------------------------------------------------- * 2b. SCROLL İLERLEME HALKASI (.progress-wrap) * * main.css:4485 → position:fixed; right:30px; bottom:30px; z-index:10000 * Alt bar z-index:90 olduğu için halka tam üstüne biniyordu. * Halkayı barın üzerine alıyoruz; bar gizlenince halka da aşağı iniyor. * ------------------------------------------------------------------- */ @media (max-width: 1399.98px) { :root { /* bar yüksekliği: 6px padding × 2 + 48px bağlantı */ --section-bar-h: 60px; --section-bar-gap: 12px; } .progress-wrap { height: 46px; width: 46px; right: 12px; bottom: calc(var(--section-bar-gap) + env(safe-area-inset-bottom, 0px)); transition: bottom 0.35s ease, opacity 200ms linear, visibility 200ms linear, transform 200ms linear; } /* Alt barın olduğu sayfada halka barın üstüne çıkar */ body.has-section-bar .progress-wrap { bottom: calc( var(--section-bar-gap) + var(--section-bar-h) + 10px + env(safe-area-inset-bottom, 0px) ); } /* Bar aşağı kayıp gizlendiğinde halka da yerine iner (mobile.js) */ body.has-section-bar.section-bar-hidden .progress-wrap { bottom: calc(var(--section-bar-gap) + env(safe-area-inset-bottom, 0px)); } /* Ok ikonu yeni boyuta göre ortalansın — main.css'te iki pseudo element var (::after görünür, ::before hover'da devreye giriyor). */ .progress-wrap::after, .progress-wrap::before { font-size: 16px; line-height: 46px; width: 46px; height: 46px; } } /* Dokunmatikte "yapışkan hover" sorunu: bir kez dokunulduğunda :hover üzerinde kalıyor ve ::after opacity:0 olduğu için ok kayboluyordu. */ @media (hover: none), (pointer: coarse) { .progress-wrap:hover::after { opacity: 1; } .progress-wrap:hover::before { opacity: 0; } } @media (max-width: 22.5rem) { :root { /* dar ekranda bağlantı min-height 44px → bar 56px */ --section-bar-h: 56px; } .progress-wrap { height: 42px; width: 42px; } .progress-wrap::after, .progress-wrap::before { line-height: 42px; width: 42px; height: 42px; } } /* --------------------------------------------------------------------- * 3. HEADER * * NOT: "TEKLİF AL" butonu mobilde main.css'teki gibi gizli kalıyor * (main.css:4303, max-width:767px → display:none). Geri getirildiğinde * satır 375-390px ekranlara sığmıyor ve yatay taşma yaratıyor. * Mobil eylem çağrısı hamburger menüsündeki "Birlikte Çalışalım" * butonunda ve alt bardaki İletişim sekmesinde duruyor. * ------------------------------------------------------------------- */ @media (max-width: 767px) { /* Hamburger dokunma hedefi (44px) */ .header-area.homepage1 .header-elements .btn-area button.hamburger_menu { min-height: 44px; min-width: 44px; display: inline-grid; place-items: center; padding: 0; } /* Satır hiçbir koşulda taşmasın */ .header-area.homepage1 .header-elements, .header-area.homepage1 .header-elements .btn-area { min-width: 0; } .header-area.homepage1 .header-elements .site-logo { min-width: 0; flex-shrink: 1; overflow: hidden; } .header-area.homepage1 .header-elements .site-logo img { max-width: 108px; object-fit: contain; } } /* --------------------------------------------------------------------- * 4. OFF-CANVAS MENÜ * * V1'de kapatma yolları çalışmıyordu (main.js `on-side` sınıfını * ekleyip hiç kaldırmıyor, .body-overlay elementi DOM'da yok). * Element view2/header.php'ye eklendi; burası görünümünü tamamlıyor. * ------------------------------------------------------------------- */ .body-overlay { /* sidebar.css: height:950px (kısa/uzun ekranlarda yanlış) ve width:100% — %100 belge genişliğine göre büyüyüp yatay taşmayı besliyordu. */ height: 100%; height: 100dvh; left: 0; right: 0; width: auto; z-index: 98; cursor: pointer; } /* sidebar.css:220 → .slide-bar { right: -860px } Menü kapalıyken ekranın 860px sağında duruyor. position:fixed olduğu için Chrome/Firefox bunu belge genişliğine saymaz, ancak iOS Safari SAYAR ve sayfa sağa sola kayar. Klasik iOS hatası. Çözüm: elemanı right ile değil transform ile dışarı atmak — transform hiçbir motorda kaydırılabilir taşma yaratmaz ve animasyon da GPU'da çalışır. */ .header-site-icon .slide-bar.slide-bar1 { right: 0; transform: translateX(105%); height: 100%; height: 100dvh; } .header-site-icon .slide-bar.slide-bar1.show { right: 0; transform: translateX(0); } @media (max-width: 767px) { .header-site-icon .slide-bar.slide-bar1 { padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; } .header-site-icon .slide-bar.slide-bar1 .sidebar-info { display: flex; flex-direction: column; flex: 1; min-height: 0; } .header-site-icon .slide-bar.slide-bar1 .sidebar-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* Menü bağlantıları: 32px margin-top ile 18px yazı = küçük hedef */ .header-site-icon .slide-bar.slide-bar1 .sidebar-content ul li a { display: block; padding: 6px 0; min-height: 44px; line-height: 32px; margin-top: 16px; } /* Kapatma düğmesi zaten 60px — hedef tamam, sadece hizası */ .header-site-icon .slide-bar.slide-bar1 .sidebar-info .sidebar-logo { display: flex; align-items: center; justify-content: space-between; } .header-site-icon .slide-bar.slide-bar1 .btn-area .vl-btn1 { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; } } /* Menü açıkken arka plan kaymasın */ body.on-side { overflow: hidden; } /* --------------------------------------------------------------------- * 5. HERO — mobilde nefes alanı * ------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* V1: padding 160px 0 50px, mobil override yok → ekranın üçte biri boş */ .main-hero-area7 { padding: 104px 0 40px; } } @media (max-width: 767px) { .main-hero-area7 { padding: 96px 0 32px; } } /* --------------------------------------------------------------------- * 6. FORMLAR * ------------------------------------------------------------------- */ @media (max-width: 767px) { /* iOS, 16px'ten küçük yazılı input'a odaklanınca sayfayı zoomlar ve bir daha geri çıkmaz. */ .input-area input, .input-area textarea, .input-area select { font-size: 16px; } .input-area input, .input-area textarea { min-height: 48px; } .contact-boxarea button[type="submit"], .contact-boxarea .vl-btn1 { width: 100%; justify-content: center; min-height: 50px; } } /* Telefon alanı type="tel" oldu; sayı okları kalmasın diye kalan number input'ları da temizle. */ .input-area input[type="number"]::-webkit-outer-spin-button, .input-area input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* --------------------------------------------------------------------- * 7. FORM SONUCU * Sunucu ?status=1|0 döndürüyordu ama hiçbir sayfa okumuyordu. * ------------------------------------------------------------------- */ .form-status { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; margin-bottom: 20px; border-radius: 8px; font-size: var(--ztc-font-size-font-s16); line-height: 1.5; } .form-status i { flex: none; margin-top: 3px; } .form-status.is-ok { color: #3ddc9a; background: rgba(61, 220, 154, 0.1); border: 1px solid rgba(61, 220, 154, 0.35); } .form-status.is-error { color: #ff6b6b; background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.35); } .light-mode .form-status.is-ok { color: #0e7a52; } .light-mode .form-status.is-error { color: #c92a2a; } /* --------------------------------------------------------------------- * 8. GENEL MOBİL TAŞMA / OKUNABİLİRLİK * ------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* Yatay kayma güvencesi — asıl çözüm taşmayı kaynağında bitirmek, bu sadece ağ. SADECE html'e veriliyor: html non-visible olunca değer viewport'a terfi eder, body `visible` kalır ve position:sticky çalışmaya devam eder. body'ye de vermek body'yi scroll konteynerine çevirip sticky'yi bozuyor. `clip` ise html üzerinde overflow-y'yi de clip'e çevirip dikey kaydırmayı bozabiliyor — bu yüzden `hidden`. */ html { overflow-x: hidden; } } @media (max-width: 767px) { /* Portfolyo kartlarındaki alt şerit başlık dar ekranda taşıyordu */ .portfolio-title { width: calc(100% - 24px); height: auto; min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 5px 8px; line-height: 1.25; white-space: normal; } /* Bölüm başlıkları arası dikey ritim — 80px'ler mobilde çok geniş */ .space80 { height: 44px; } .space60 { height: 36px; } .space50 { height: 30px; } } /* --------------------------------------------------------------------- * 9. HAREKET AZALTMA TERCİHİ * V1'de bu tercih hiç dikkate alınmıyordu. * ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-aos] { opacity: 1 !important; transform: none !important; } }