/* ═══════════════════════════════════════════════════════════════ GUMUSALL — OVAL FOOTER (tüm sayfalarda ortak) ─────────────────────────────────────────────────────────────── Footer sayfanın tamamını kaplayan düz bir blok yerine, kenardan boşluklu ve köşeleri yuvarlatılmış bir kart olarak durur. Bu dosya içinde EN SON yüklenmelidir; böylece sayfaya özel eski footer kuralarının üzerine yazar. ═══════════════════════════════════════════════════════════════ */ .main-footer, .page-footer { position: relative; width: min(1240px, calc(100% - 32px)); /* Eski sayfa CSS'lerinde !important'lı footer kuralları var; ezmek gerekiyor */ margin: 56px auto 22px !important; /* Yanlardaki geniş iç boşluk, oval kavisin içeriği sıkıştırmaması için */ padding: 38px clamp(40px, 7vw, 96px) 32px !important; border: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.14); /* Uçları tam yuvarlak — stadyum/oval form */ border-radius: 999px; background: radial-gradient(circle at 16% -10%, rgba(255, 255, 255, 0.16), transparent 42%), linear-gradient(165deg, #12293f 0%, #0a151f 62%); color: #f1f2f5; box-shadow: 0 20px 46px rgba(9, 18, 28, 0.18); overflow: hidden; } /* products.html gibi tek satırlık sade footer'lar */ .page-footer { padding: 24px clamp(40px, 7vw, 96px) !important; text-align: center; color: rgba(233, 238, 245, 0.72); font-size: 13.5px; } .page-footer p { margin: 0; } .main-footer .footer-container { /* sosyal.css bunu flex-column + gap yapıyor; boşlukları burada tek elden yönetebilmek için normal akışa döndürüyoruz */ display: block; width: min(1080px, 100%); max-width: none; margin: 0 auto; padding: 0; position: relative; } /* Marka satırı — sosyal.css'te position:absolute; statiğe çekiyoruz ki alttaki bağlantıların üzerine binmesin */ .main-footer .footer-container::before { /* anasayfa.css'te aynı seçici !important ile "GUMUSALL / TeknoProblem" yazıyor; burada da !important gerekiyor */ content: 'GUMUSALL' !important; position: static; display: block; width: 100%; text-align: center; margin-bottom: 14px; font-size: clamp(17px, 2.4vw, 23px); font-weight: 800; letter-spacing: 0.16em; background: linear-gradient(90deg, #6f9ad0 0%, #a9c0dd 48%, #f3f7ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .main-footer .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 16px; } .main-footer .footer-links a { color: rgba(241, 242, 245, 0.86); text-decoration: none; font-size: 14.5px; font-weight: 600; letter-spacing: 0.02em; transition: color 0.2s ease; } .main-footer .footer-links a:hover, .main-footer .footer-links a:focus-visible { color: #f2d2ad; } .main-footer .simple-social-bar { display: flex; justify-content: center; gap: 12px; margin: 0 0 6px; } .main-footer .simple-social-bar .s-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #f1f2f5; font-size: 15px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .main-footer .simple-social-bar .s-icon:hover, .main-footer .simple-social-bar .s-icon:focus-visible { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.34); transform: translateY(-2px); } /* Ayırıcı çizgi oval kavise dayanmasın diye kısa ve ortalı */ .main-footer .footer-bottom { width: min(620px, 100%); margin: 16px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.09); } .main-footer .footer-bottom p { margin: 0; text-align: center; font-size: 12.5px; color: rgba(226, 231, 238, 0.66); } @media (max-width: 620px) { .main-footer, .page-footer { width: calc(100% - 20px); margin: 34px auto 16px !important; /* Dar ekranda tam stadyum formu içeriği kırpardı; belirgin ama güvenli bir kavis */ border-radius: 44px; padding: 30px 26px 24px !important; } .main-footer .footer-links { gap: 8px 16px; margin-bottom: 14px; } .main-footer .footer-links a { font-size: 13.5px; } } /* ═══════════════════════════════════════════════════════════════ MOBİL ALT NAVİGASYON — OVAL YÜZEN ÇUBUK ─────────────────────────────────────────────────────────────── Ekranın dibine yapışık düz bar yerine, kenarlardan boşluklu ve uçları yuvarlak bir çubuk. Kurallar burada eksiksiz yazılı: alt nav'ı system.js her sayfaya enjekte ediyor ama stilleri yalnızca anasayfa.css'te duruyordu — o dosyayı yüklemeyen sayfalarda (Alyans.html gibi) çubuk stilsiz kalıyordu. ═══════════════════════════════════════════════════════════════ */ .mobile-bottom-nav { display: none; } @media (max-width: 520px) { .mobile-bottom-nav { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 890; height: 62px; padding: 0 6px; border: 1px solid rgba(18, 41, 63, 0.07); border-radius: 999px; background: rgba(255, 253, 248, 0.92); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 14px 32px rgba(18, 41, 63, 0.16), 0 2px 6px rgba(18, 41, 63, 0.05); } .mob-nav-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; padding: 0 2px; border: none; border-radius: 999px; background: none; color: #8a97a8; font-family: 'Manrope', 'Segoe UI', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: color 0.16s ease; -webkit-tap-highlight-color: transparent; } .mob-nav-item i { font-size: 18px; line-height: 1; } .mob-nav-item:hover, .mob-nav-item.mob-nav-item--active { color: #b57a43; } /* Aktif sekmenin altında ince bir gösterge */ .mob-nav-item.mob-nav-item--active::after { content: ''; position: absolute; bottom: 9px; width: 16px; height: 2px; border-radius: 2px; background: #b57a43; } /* Sepet ikonu üstündeki rozet */ .mob-cart-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .mobile-bottom-nav .cart-badge { position: absolute; top: -7px; right: -9px; width: 16px; height: 16px; margin-left: 0; font-size: 9px; } /* Yüzen çubuk içeriğin üstünü kapatmasın */ body:has(.mobile-bottom-nav) .main-footer, body:has(.mobile-bottom-nav) .page-footer { margin-bottom: 96px !important; } /* Toast bildirimleri çubuğun üstünde çıksın */ .toast-container { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; } }