/**
 * Icon Fixes CSS - Neizlesem Theme
 * FontAwesome ve diğer ikon sorunlarını düzeltir
 */

/* ===================================
   FONTAWESOME İKON DÜZELTİLERİ
   =================================== */

/* FontAwesome CDN yüklenemezse fallback */
.fas, .far, .fab, .fa {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands', sans-serif !important;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* FontAwesome Free Solid */
.fas {
    font-weight: 900 !important;
}

/* FontAwesome Free Regular */
.far {
    font-weight: 400 !important;
}

/* FontAwesome Brands */
.fab {
    font-weight: 400 !important;
}

/* ===================================
   ÖZEL İKON DÜZELTİLERİ
   =================================== */

/* Mood ikonları */
.mood-icon .fas,
.mood-icon .far,
.mood-icon .fab {
    font-size: 2.5rem !important;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Sosyal medya ikonları */
.social-media-icons .fab,
.social-media-icons .fas {
    font-size: 1.5rem !important;
    color: var(--text-primary, #333) !important;
    transition: all 0.3s ease;
}

.social-media-icons .fab:hover,
.social-media-icons .fas:hover {
    color: var(--primary-color, #007bff) !important;
    transform: scale(1.1);
}

/* Mobil uygulama ikonları */
.mobile-apps .fab,
.mobile-apps .fas {
    font-size: 1.2rem !important;
    color: var(--text-primary, #333) !important;
    margin-right: 0.5rem;
}

/* Header menü ikonları */
.navbar-nav .fas,
.navbar-nav .far {
    font-size: 1rem !important;
    margin-right: 0.5rem;
}

/* Footer ikonları */
.footer-content .fas,
.footer-content .far,
.footer-content .fab {
    font-size: 1rem !important;
    margin-right: 0.5rem;
}

/* ===================================
   İKON FALLBACK'LERİ
   =================================== */

/* FontAwesome yüklenemezse Unicode karakterler */
.mood-icon[data-icon="heart"]::before {
    content: "❤️" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.mood-icon[data-icon="smile"]::before {
    content: "😊" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.mood-icon[data-icon="star"]::before {
    content: "⭐" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.mood-icon[data-icon="fire"]::before {
    content: "🔥" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.mood-icon[data-icon="music"]::before {
    content: "🎵" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.mood-icon[data-icon="movie"]::before {
    content: "🎬" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

/* ===================================
   İKON BOYUT DÜZELTİLERİ
   =================================== */

/* Küçük ikonlar */
.icon-sm {
    font-size: 0.875rem !important;
}

/* Orta ikonlar */
.icon-md {
    font-size: 1rem !important;
}

/* Büyük ikonlar */
.icon-lg {
    font-size: 1.25rem !important;
}

/* Çok büyük ikonlar */
.icon-xl {
    font-size: 1.5rem !important;
}

/* Dev ikonlar */
.icon-2xl {
    font-size: 2rem !important;
}

.icon-3xl {
    font-size: 3rem !important;
}

.icon-4xl {
    font-size: 4rem !important;
}

/* ===================================
   İKON HİZALAMA DÜZELTİLERİ
   =================================== */

/* İkonları ortala */
.icon-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* İkonları dikey hizala */
.icon-middle {
    vertical-align: middle !important;
}

/* İkonları üst hizala */
.icon-top {
    vertical-align: top !important;
}

/* İkonları alt hizala */
.icon-bottom {
    vertical-align: bottom !important;
}

/* ===================================
   RESPONSIVE İKON DÜZELTİLERİ
   =================================== */

@media (max-width: 768px) {
    .mood-icon .fas,
    .mood-icon .far,
    .mood-icon .fab {
        font-size: 2rem !important;
    }
    
    .social-media-icons .fab,
    .social-media-icons .fas {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 480px) {
    .mood-icon .fas,
    .mood-icon .far,
    .mood-icon .fab {
        font-size: 1.5rem !important;
    }
    
    .social-media-icons .fab,
    .social-media-icons .fas {
        font-size: 1rem !important;
    }
}