/* ========================================================= RESPONSIVE - XL / XXL / 2K / 4K (FLUID) ---------------------------------------------------------- Yüksek çözünürlüklü ekranlarda (1200px üstü) tüm container'ları viewport'a ORANLI (clamp tabanlı) şekilde akışkan büyütür. Breakpoint sıçraması yoktur; ekran ne kadar büyürse içerik o kadar genişler, ancak tasarımı bozmamak için bir tavan değere kadar. ---------------------------------------------------------- STRATEJİ: * Sayfa CSS'lerindeki sabit max-width değerlerini (1800px / 1200px / 900px) yenmek için !important kullanılır. Bu dosya en sonda yüklendiğinden tek gerçek kaynak haline gelir. * clamp(min, vw, max): - viewport min altı → min değer (mevcut responsive davranış korunur) - viewport orta → vw oranı (akışkan büyüme) - viewport çok geniş → max değer (4K+ ekranlarda içerik gereksiz genişlemez) * < 1200px viewport için bu dosya devreye girmez; mevcut tüm mobil/tablet kuralları aynen çalışır. ---------------------------------------------------------- NOT: _LayoutCssComponentPartial içinde, sayfa CSS'lerinden ve responsive-headers / responsive-global'den SONRA include edilmelidir. ========================================================= */ /* ============================================================ YÜKLEME DOĞRULAMA İŞARETİ Bu dosya yüklendiyse elementinde efektif "outline yok" durumu kalır. DevTools Console'dan şununla teyit edilebilir: getComputedStyle(document.documentElement) .getPropertyValue('--xl-loaded') "1" dönüyorsa dosya başarıyla cache yerine SUNUCUDAN yüklendi demektir. ============================================================ */ :root { --xl-loaded: 1; } /* ============================================================ FLUID CONTAINER KURALLARI (≥ 1200px) ============================================================ */ @media (min-width: 1200px) { /* -------- 1) ANA SAYFA KABUĞU (header / slider / home) -------- */ /* clamp(1200, 92vw, 2800) → her ekranda viewport'un %92'si */ .container-wrapper, .corp-slider-shell, .home-container { max-width: clamp(1200px, 92vw, 2800px) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Home container'ın yan padding'i ekrana orantılı artsın */ .home-container { padding-left: clamp(24px, 2vw, 48px) !important; padding-right: clamp(24px, 2vw, 48px) !important; } /* -------- 2) İÇ SAYFA CONTAINER'LARI -------- */ /* Salon / Mehter / Şehit / İletişim / Duyuru / Sayfa / Tur / Event-Detail clamp(1100, 88vw, 2500) → shell'den ~%4 dar (görsel hiyerarşi) */ .salon-page .salon-container, .mehter-page .mehter-container, .martyr-page .martyr-container, .contact-page .contact-container, .announcements-page .announcements-container, .custom-page .custom-container, .tour-page .tour-container, .event-detail-page > .container { max-width: clamp(1100px, 88vw, 2500px) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(16px, 1.4vw, 36px) !important; padding-right: clamp(16px, 1.4vw, 36px) !important; } /* -------- 3) FOOTER İÇERİĞİ -------- */ /* Eski 900px sabit footer, yüksek çözünürlükte minicik kalıyordu. Artık ekranın %70'ine kadar açılır. */ .footer-content-bordo { max-width: clamp(900px, 70vw, 2000px) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } /* ============================================================ GRID YOĞUNLUĞU (kart sayısı ekranla artar) ============================================================ */ /* ≥ 1920px: Salon obje grid 3 → 4 kolon, kart minimum genişliği büyür */ @media (min-width: 1920px) { .object-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 22px !important; } .salon-page .events-container, .mehter-page .events-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important; gap: 22px !important; } .tour-grid { gap: 32px !important; } .tour-card-media { height: 260px !important; } } /* ≥ 2560px (2K): Obje grid 5 kolon, etkinlik kartı 420px */ @media (min-width: 2560px) { .object-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 26px !important; } .salon-page .events-container, .mehter-page .events-container { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important; gap: 24px !important; } } /* ≥ 3840px (4K): Obje grid 6 kolon */ @media (min-width: 3840px) { .object-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 30px !important; } } /* ============================================================ TİPOGRAFİ ÖLÇEĞİ html font-size'ı artırarak rem tabanlı tüm padding / font / gap değerleri ORANLI büyür. Zoom hissi vermez. ============================================================ */ @media (min-width: 2200px) { html { font-size: 17px; } } @media (min-width: 2560px) { html { font-size: 18px; } } @media (min-width: 3200px) { html { font-size: 19px; } } @media (min-width: 3840px) { html { font-size: 20px; } } /* ============================================================ SAYFA BAŞLIKLARI (h1) - büyük ekranlarda daha belirgin ============================================================ */ @media (min-width: 1600px) { .contact-page .contact-header h1, .tour-page .tour-header h1, .mehter-page .mehter-header h1, .martyr-page .martyr-header h1, .salon-page .salon-header h1, .custom-page .custom-header h1, .announcements-page .announcements-header h1, .page-header h1 { font-size: clamp(1.6rem, 1.2vw + 1rem, 2.4rem) !important; } .section-title { font-size: clamp(1.5rem, 0.8vw + 1.1rem, 1.85rem) !important; } }