/*
1. Efektin yumuşak geçişi için temel özellikler
   - Bu, büyüme ve gölgenin anlık değil, belli bir sürede olmasını sağlar.
*/
.icon-hover-effect img {
    /* Görselin kendisini hedefliyoruz */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* Resmi çevreleyen elementte zaten margin/padding ayarları olduğu için */
    /* resmi izole etmek ve gölgenin taşmasını önlemek için uygun. */
}

/*
2. Hover (Fare Üzerine Geldiğinde) Efekti
   - .icon-hover-effect div'inin üzerine gelindiğinde, içindeki <img> etiketine uygulanacak stiller
*/
.icon-hover-effect:hover img {
    /* Hafifçe büyütme: %5 büyütme (1.05 katı) */
    transform: scale(1.05);

    /* Şık ve belirgin bir gölge ekleme */
    /* x y blur yayılma renk */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);

    /* Eğer mevcut border/padding varsa, daha iyi görünmesi için bunları ayarlayabiliriz */
    /* Örneğin:
    border-color: #555;
    */
}

/*
3. Ek İyileştirme (Opsiyonel)
   - Bazı tarayıcılarda resmi büyütürken bulanıklık oluşmaması için
   - Bu genellikle modern tarayıcılarda gereksizdir, ancak eklemek isteyebilirsiniz.
*/
.icon-hover-effect:hover img {
    will-change: transform; /* Tarayıcıya optimizasyon ipucu verir */
}


/* -------------------------------------------- */


/* Ana Slogan Stili */
.elegant-slogan {
    font-size: 3.5vw; /* Ekran boyutuna göre otomatik ayarlanır (Responsiveness) */
    line-height: 1.25;
    font-weight: 900; /* Çok kalın */
    text-align: center;
}

/* 🔥 ASIL GÖSTERİŞLİ EFEKT BURADA BAŞLIYOR 🔥
Metin Dolgusu (Fill) olarak Degrade (Gradient) kullanma
*/
.elegant-slogan {
    /* Webkit (Chrome, Safari) için Degrade Uygulama */
    background: linear-gradient(45deg, #FF6B6B 0%, #FFE66D 35%, #007ce5 65%, #4770FF 100%);
    /* Açıklama: Köşeden köşeye (45 derece) geçen, canlı, çok renkli degrade */

    /* Metin dolgusunu degrade ile doldurma */
    -webkit-background-clip: text;
    background-clip: text;

    /* Metnin içini şeffaf yapma (Degradenin görünmesi için zorunlu) */
    color: transparent;
}

/* ✨ PARILTI/GÖLGE EFEKTİ (Text Shadow)
Metne derinlik ve "neon" benzeri hafif bir parıltı verir.
*/
.elegant-slogan {
    text-shadow:
        /* 1. Katman: Metnin hemen arkasında hafif bir KOYU gölge (Parlak zeminlerde okunur) */
            1px 1px 3px rgba(0, 0, 0, 0.4),

                /* 2. Katman: Çevresinde daha belirgin, YUMUŞAK BEYAZ/AÇIK renkli parıltı (Koyu zeminlerde okunur) */
            0 0 15px rgba(255, 255, 255, 0.9),

                /* 3. Katman: Hafif bir dış gölge/derinlik */
            0 0 25px rgba(0, 0, 0, 0.1);
}