/* 🎨 Menü İkonları - Anaokulu Teması
 * Sevimli emoji ikonları için stil
 */

/* Desktop Menü İkonları */
.main-nav .menu-icon {
    display: inline-block;
    font-size: 16px; /* İkon boyutu küçültüldü */
    margin-right: 3px; /* Margin azaltıldı */
    vertical-align: middle;
    animation: iconFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover efekti - İkon büyür */
.main-nav a:hover .menu-icon {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 4px 8px rgba(255, 107, 157, 0.3));
    animation: iconBounce 0.6s ease;
}

/* Aktif menü item */
.main-nav li.active .menu-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(255, 107, 157, 0.4));
}

/* Dropdown menü ikonları biraz küçük */
.main-nav .dropdown .menu-icon {
    font-size: 16px;
    margin-right: 8px;
}

/* Mobil Menü İkonları */
.mobile-menu-list .menu-icon {
    display: inline-block;
    font-size: 22px;
    margin-right: 12px;
    vertical-align: middle;
    animation: iconFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.mobile-menu-list a:active .menu-icon {
    transform: scale(1.15) rotate(-5deg);
}

/* Alt menü ikonları */
.mobile-submenu .menu-icon {
    font-size: 18px;
    margin-right: 10px;
}

/* Menü Text */
.menu-text {
    display: inline-block;
    vertical-align: middle;
}

/* Animasyonlar */
@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1.2) rotate(10deg) translateY(0);
    }
    25% {
        transform: scale(1.3) rotate(12deg) translateY(-5px);
    }
    50% {
        transform: scale(1.25) rotate(8deg) translateY(-2px);
    }
    75% {
        transform: scale(1.3) rotate(12deg) translateY(-4px);
    }
}

/* Pulse animasyonu - Özel menü itemleri için */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Ana sayfa ikonu özel animasyon */
.main-nav a[href*="index.php"] .menu-icon,
.main-nav a[href="/"] .menu-icon,
.main-nav a[href=""] .menu-icon {
    animation: iconPulse 2s ease-in-out infinite;
}

/* İletişim ikonu özel efekt */
.main-nav a:hover .menu-icon:contains("📞") {
    animation: iconRing 0.5s ease;
}

@keyframes iconRing {
    0%, 100% {
        transform: rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: rotate(-10deg);
    }
    20%, 40%, 60%, 80% {
        transform: rotate(10deg);
    }
}

/* Responsive */
@media (max-width: 991px) {
    /* Mobil menüde biraz daha büyük ikonlar */
    .mobile-menu-list .menu-icon {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    /* Küçük ekranlarda ikonlar biraz küçük */
    .mobile-menu-list .menu-icon {
        font-size: 20px;
        margin-right: 10px;
    }
    
    .mobile-submenu .menu-icon {
        font-size: 16px;
    }
}

/* Dark mode support (gelecek için) */
@media (prefers-color-scheme: dark) {
    .menu-icon {
        filter: drop-shadow(0 2px 6px rgba(255,255,255,0.2));
    }
}

/* Özel ikon renkleri ve efektleri */
.main-nav a:hover .menu-icon {
    /* Her ikon hover'da renkli glow efekti */
    text-shadow: 
        0 0 10px rgba(255, 107, 157, 0.6),
        0 0 20px rgba(116, 185, 255, 0.4),
        0 0 30px rgba(136, 216, 163, 0.3);
}

/* Gradient text efekti (modern tarayıcılar için) */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .main-nav a:hover .menu-text {
        background: linear-gradient(135deg, #FF6B9D, #4FC3F7, #6BCF7F);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientShift 3s ease infinite;
        background-size: 200% 200%;
    }
    
    @keyframes gradientShift {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
}

/* Loading state animation (sayfa geçişleri için) */
.menu-loading .menu-icon {
    animation: iconSpin 1s linear infinite;
}

@keyframes iconSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Accessibility - Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .menu-icon,
    .menu-text {
        animation: none !important;
        transition: none !important;
    }
}