body { 
    font-family: 'Poppins', sans-serif; 
}
.hero-bg {
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1595800239649-49095006d63c?q=80&w=1770&auto=format&fit=crop');
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed;
}
.fade-in-section { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}
.fade-in-section.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* ------------------------------------------------------------
   Özel Stil Düzenlemeleri
   ------------------------------------------------------------
   lightGallery alt bilgi bölümü için düğmelerin tek satırda kalmasını sağla.
   Tailwind'in `flex-wrap` yardımcı sınıfı ışık kutusunda alt bilgiyi sarmaya
   zorlayabiliyor; bu durum kullanıcı isteği doğrultusunda istenmiyor. Aşağıdaki
   kural, alt bilgi içindeki flex kaplarına sarmayı devre dışı bırakarak
   düğmelerin tek satırda kalmasını sağlar. `!important` kullanımı Tailwind
   tanımlarını geçersiz kılar.
*/
.lg-sub-html .flex-wrap {
    flex-wrap: nowrap !important;
}

/* 404 sayfasındaki düğmeler ve galeri alt bilgi düğmeleri için renk düzeltmeleri.
   Bu özel stiller Tailwind renk paletiyle uyumlu buton görünümleri oluşturur. */
/*
 * Renk sınıflarını Tailwind'in dinamik derleyicisi tarafından üretilen stilleri geçersiz kılacak şekilde tanımla.
 * `!important` ifadesi sayesinde Tailwind tarafından tanımlanan aynı isimli sınıflar üzerine yazılır ve
 * düğmelerde arka plan renklerinin her zaman görünmesi sağlanır. Bu, kullanıcıların 404 sayfası ve galeri
 * alt bilgi düğmelerinde arka plan renklerinin kaybolması sorununu ortadan kaldırır.
 */
.bg-yellow-500 {
    background-color: #eab308 !important;
}
.hover\:bg-yellow-600:hover {
    background-color: #ca8a04 !important;
}
.bg-orange-500 {
    background-color: #f97316 !important;
}
.hover\:bg-orange-600:hover {
    background-color: #ea580c !important;
}
.bg-blue-500 {
    background-color: #3b82f6 !important;
}
.hover\:bg-blue-600:hover {
    background-color: #2563eb !important;
}

/* Bazı durumlarda WhatsApp düğmesi için kullanılan yeşil renk Tailwind tarafından tanımlanmayabilir. Bu nedenle,
 * `bg-green-500` ve `hover:bg-green-600` renklerini de burada açıkça tanımlıyoruz. Böylece tüm buton renkleri
 * tutarlı ve öngörülebilir olur. */
.bg-green-500 {
    background-color: #10b981 !important;
}
/* ------------------------------------------------------------
   Galeri alt bilgi kapsayıcısı (gallery caption) genişliğini kontrol eder.
   Mobilde tam genişlik (%95) kullanılır; orta ekranlarda %80; geniş ekranlarda %70.
   Böylece alt bilgi düğmeleri daha geniş görünür ve tek satıra sığar.  
   ------------------------------------------------------------ */
.gallery-caption {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .gallery-caption {
        max-width: 80%;
    }
}
@media (min-width: 1024px) {
    .gallery-caption {
        max-width: 70%;
    }
}
.hover\:bg-green-600:hover {
    background-color: #059669 !important;
}

/* ------------------------------------------------------------------
   Ek renk ve metin sınıfları
   ------------------------------------------------------------------
   TailwindCSS'in JIT derleyicisi bazı dinamik sınıfları üretmediğinde,
   metin ve hover renklerinin kaybolmasını önlemek için burada açıkça
   tanımlıyoruz. Açık gri metin (`text-gray-200`) header'daki yazılar için
   kullanılır. Hover sırasında biraz daha koyu gri (`text-gray-300`) uygulanır.
 */
.text-gray-200 {
    color: #e5e7eb !important;
}
.hover\:text-gray-300:hover {
    color: #d1d5db !important;
}

/* -----------------------------------------------
   Metin gölgelendirme sınıfı
   -----------------------------------------------
   Beyaz veya açık renkli yazılar, açık arka planlarda kaybolabilir.  
   Bu sınıf, yazılara gri bir gölge ekleyerek okunabilirliği artırır. 
*/
.text-shadow-gray {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.nav-scrolled { 
    background-color: white; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
}
#to-top-btn { 
    opacity: 0; 
    transition: opacity 0.3s, transform 0.3s; 
    transform: translateY(100%); 
}
#to-top-btn.visible { 
    opacity: 1; 
    transform: translateY(0); 
}