/* ===================================================================== MOBİL UYUMLULUK DÜZELTMELERİ --------------------------------------------------------------------- Yerel ortamda 375px genişlikte yapılan ölçümlerde tespit edilen sorunlara yönelik düzeltmeler. header.php içinden, diğer tüm CSS dosyalarından SONRA yüklenir ki ezme gücü olsun. Buradaki kuralların çoğu yalnızca mobil genişlikte devreye girer; masaüstü görünüm bilinçli olarak değiştirilmemiştir. ===================================================================== */ /* --------------------------------------------------------------------- 1) YATAY KAYMA KORUMASI Sitede AOS (Animate On Scroll) kütüphanesi fade-left / fade-right animasyonları kullanıyor. Bu animasyonlar elemanı ekranın dışından içeri kaydırdığı için, animasyon sürerken sayfa yatay olarak kaydırılabilir hale geliyor (ölçüm: sss.php'de 62px taşma). Mobilde bu, sayfanın "oynak" durmasına yol açıyor. Not: overflow-x sadece üzerinde tanımlı; serbest bırakıldı ki position:sticky kullanan alanlar (ürün detayındaki alt bar gibi) çalışmaya devam etsin. --------------------------------------------------------------------- */ @media (max-width: 991.98px) { body { overflow-x: hidden; max-width: 100%; } } /* --------------------------------------------------------------------- 2) GÖRSEL VE MEDYA TAŞMASI Sabit genişlikli görsel/iframe/video kapsayıcısını aşmasın. --------------------------------------------------------------------- */ @media (max-width: 767.98px) { img, svg, video, canvas, iframe { max-width: 100%; } img:not([width]) { height: auto; } } /* --------------------------------------------------------------------- 3) TABLOLAR Mobilde geniş tabloları kapsayıcısı içinde yatay kaydırılabilir yap; sayfanın tamamını kaydırmak yerine tablo kendi içinde kaysın. (Ölçüm: profil.php'de kaydırma sarmalayıcısı olmayan tablo var.) --------------------------------------------------------------------- */ @media (max-width: 767.98px) { .table-responsive-auto, .order-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { max-width: 100%; } } /* --------------------------------------------------------------------- 4) DOKUNMA HEDEFLERİ Ölçümde her sayfada 12-23 arası bağlantı/buton 36px'in altındaydı (çoğu footer bağlantıları ve sosyal medya ikonları). Parmakla isabet ettirmek zor. Yükseklik tabanı veriyoruz. Sadece gezinme/footer alanlarına uygulanıyor; metin içi bağlantıların satır yüksekliğini bozmamak için genel bir kural konmadı. --------------------------------------------------------------------- */ @media (max-width: 767.98px) { footer a, .footer a, .mobile-nav a, .mobile-menu a, .menu-box a, .menu-outer a, .navigation a, .mobile-cats a, .drawer-body a, .bottom-nav a, .social-links a, .social a { display: inline-flex; align-items: center; min-height: 40px; padding-top: 2px; padding-bottom: 2px; } /* Sosyal medya ikonları: kare ve rahat tıklanır */ .social-links a, .social a { min-width: 40px; justify-content: center; } /* * Form kontrolleri ve butonlar için rahat yükseklik. * * Yuvarlak ikon butonları HARİÇ — min-height onları ovale çeviriyor: * .action-btn ürün kartındaki beğeni/hızlı görünüm (40x40) * .inv-kaldir davetiye editöründe alan kaldırma çarpısı (18x18) * İkisinin de dokunma alanı görünmez bir halkayla ayrıca genişletiliyor, * yani parmakla basmak zorlaşmıyor. */ .btn, button:not(.accordion-button):not(.action-btn):not(.inv-kaldir), input[type="submit"], input[type="button"] { min-height: 44px; } /* Bootstrap accordion başlıkları da parmakla açılıyor */ .accordion-button { min-height: 48px; } } /* --------------------------------------------------------------------- 5) OKUNABİLİRLİK TABANI Ana sayfada 12px'in altında yazı tipi kullanan 50 metin öğesi ölçüldü. Mobilde 11px altı metin okunmuyor. Rozet/etiket gibi bilinçli küçük öğeler hariç tutuldu. --------------------------------------------------------------------- */ @media (max-width: 767.98px) { body, p, li, td, label, .card-text, .product-category { font-size: max(1em, 12px); } small, .small, .text-muted { font-size: 12px; } /* Rozetler bilinçli olarak küçük kalabilir */ .badge, .badge-text, .mobile-discount-badge .badge-text { font-size: inherit; } } /* --------------------------------------------------------------------- 6) UZUN METİN VE BAĞLANTILARIN TAŞMASI E-posta adresleri, uzun URL'ler ve boşluksuz uzun kelimeler mobilde kapsayıcıyı yatay olarak taşırabiliyor. --------------------------------------------------------------------- */ @media (max-width: 767.98px) { p, li, td, dd, .card-title, .card-text, .breadcrumb-item { overflow-wrap: break-word; word-break: break-word; } } /* --------------------------------------------------------------------- 7) SABİT ALT BAR ÇAKIŞMASI template_preview.php sayfasında `.mobile-fixed-bottom` adında 67px yüksekliğinde `position: fixed` bir satın alma barı var, ama body'nin alt boşluğu 0'dı. Bu yüzden sayfanın son ~67px'i (ürün başlığının bir kısmı ve footer'ın alt satırı) barın altında kalıp okunamıyordu. Bar yüksekliği + güvenli alan kadar boşluk bırakıyoruz. --------------------------------------------------------------------- */ @media (max-width: 767.98px) { body:has(.mobile-fixed-bottom) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } /* iPhone çentik/ana ekran çubuğu alanına taşmasın */ .mobile-fixed-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* :has() desteklemeyen tarayıcılar için yedek — sayfa kendi sınıfını verir */ @media (max-width: 767.98px) { .has-fixed-bottom-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } /* --------------------------------------------------------------------- 8) ÜRÜN KARTLARI Mobilde 2 kolonlu grid'de başlıklar tek satıra sıkışıp kesiliyordu. İki satıra izin verip yüksekliği eşitliyoruz ki kartlar hizalı dursun. --------------------------------------------------------------------- */ @media (max-width: 575.98px) { .product-card .card-title { font-size: 0.95rem; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card .price-current { font-size: 1.05rem; } } /* ============================================================================= ÜRÜN KARTI — GÖRSEL VE BAŞLIK BAĞLANTILARI Eskiden ürüne yalnızca "İncele ve Seç" düğmesinden gidilebiliyordu. Kart üç ayrı sayfada (index.php, kategori.php, ara.php) ayrı ayrı yazıldığı için ortak stil burada: header.php her sayfada bu dosyayı yüklüyor. Bağlantılar kartın görünümünü değiştirmesin diye renk/çizgi devralınıyor. ========================================================================== */ /* Kartın GÖRÜNÜMÜ değişmemeli: bağlantılar tarayıcının varsayılan mavi/altı çizili biçimini almasın, çevresindeki metinle birebir aynı görünsün. Hover'da da renk değişmiyor — canlı sitedeki kart neyse o. */ .product-image-link, .product-title-link, .product-image-link:hover, .product-title-link:hover, .product-image-link:focus, .product-title-link:focus, .product-image-link:visited, .product-title-link:visited { color: inherit; text-decoration: none; } .product-image-link { display: block; }