/* Kritik CSS Notu: En iyi performans için, aşağıda "@critical" olarak işaretlenmiş kuralları kopyalayıp her HTML dosyasının etiketi içine etiketleri arasına yapıştırın. Bu, sayfanın ilk açılışta anında stil almasını sağlar. */ /* @critical: Temel Gövde ve Font Stilleri */ body { font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* @critical: Header'ın ilk yüklenme anındaki görünümü */ #header-placeholder { transition: all 0.3s ease-in-out; } /* Header Scroll Efekti */ header.scrolled #header-inner { height: 64px; } header.scrolled #logo { height: 75%; } header.scrolled { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); } /* Navigasyon Linkleri */ .nav-link { @apply px-4 py-2 text-gray-600 font-semibold hover:text-blue-600 transition-colors duration-300 rounded-md; } .nav-link.active { @apply bg-blue-100 text-blue-700; } .mobile-nav-link { @apply text-lg text-gray-700 font-semibold p-3 rounded-md hover:bg-gray-100 transition-colors flex items-center; } .mobile-nav-link.active { @apply bg-blue-100 text-blue-700; } /* Dropdown Menü */ .dropdown:hover .dropdown-menu { display: block; } .dropdown-item { @apply block px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white transition-colors; } .mobile-dropdown-item { @apply block py-2 px-4 text-gray-600 hover:bg-gray-200 rounded-md; } /* Mobil Menü Animasyonu */ #mobile-menu.open > div { transform: translateX(0); } /* Slider Animasyonları */ @keyframes fade-in-down { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fade-in-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-in-down { animation: fade-in-down 1s ease-out forwards; } .animate-fade-in-up { animation: fade-in-up 1s ease-out 0.5s forwards; } /* Swiper Ayarları */ .swiper-button-next, .swiper-button-prev { color: #fff !important; background-color: rgba(0,0,0,0.3); width: 50px !important; height: 50px !important; border-radius: 50%; } .swiper-pagination-bullet-active { background: #fff !important; } /* YENİ EKLENEN GALERİ STİLLERİ */ .gallery-item { @apply relative overflow-hidden rounded-lg shadow-lg cursor-pointer; } .gallery-item img { @apply w-full h-full object-cover aspect-square transition-transform duration-300; } .gallery-item:hover img { @apply transform scale-110; } .gallery-item .overlay { @apply absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-50 flex items-center justify-center transition-all duration-300; } .gallery-item .overlay i { @apply text-white text-4xl opacity-0 transform scale-50 transition-all duration-300; } .gallery-item:hover .overlay i { @apply opacity-100 scale-100; } /* YENİ EKLENEN LIGHTBOX STİLLERİ */ #lightbox-prev, #lightbox-next { @apply p-4 hover:bg-white/20 rounded-full transition-colors; }