/**
 * Homepage Icon Fixes CSS - Neizlesem Theme
 * Anasayfadaki mod, platform ve içerik türü ikonlarını düzeltir
 */

/* ===================================
   MOOD İKONLARI DÜZELTİLERİ
   =================================== */

/* Mood ikonları için özel düzeltmeler */
.mood-options .mood-icon,
.mood-option .mood-icon {
    font-size: 16px !important;
    color: var(--homepage-text-light, #666666) !important;
    transition: color var(--transition-fast, 0.15s ease) !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    text-align: center !important;
    line-height: 20px !important;
    margin-right: 8px !important;
}

/* Mood seçildiğinde ikon rengi */
.mood-option input:checked + .mood-label .mood-icon {
    color: var(--option-selected, #e50914) !important;
}

/* Mood hover durumunda ikon rengi */
.mood-option:hover .mood-icon {
    color: var(--option-selected, #e50914) !important;
}

/* ===================================
   İÇERİK TÜRÜ İKONLARI DÜZELTİLERİ
   =================================== */

/* İçerik türü ikonları için özel düzeltmeler */
.content-type-options .content-type-icon,
.content-type-option .content-type-icon {
    font-size: 18px !important;
    color: var(--homepage-text-light, #666666) !important;
    transition: color var(--transition-fast, 0.15s ease) !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    text-align: center !important;
    line-height: 24px !important;
    margin-right: 10px !important;
}

/* İçerik türü seçildiğinde ikon rengi */
.content-type-option input:checked + .type-label .content-type-icon {
    color: var(--option-selected, #e50914) !important;
}

/* İçerik türü hover durumunda ikon rengi */
.content-type-option:hover .content-type-icon {
    color: var(--option-selected, #e50914) !important;
}

/* ===================================
   PLATFORM İKONLARI DÜZELTİLERİ
   =================================== */

/* Platform ikonları için özel düzeltmeler */
.platform-options .platform-icon,
.platform-option .platform-icon {
    font-size: 18px !important;
    color: white !important;
    background: #666666 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    transition: all var(--transition-fast, 0.15s ease) !important;
}

/* Platform seçildiğinde ikon stili */
.platform-option input:checked + .platform-label .platform-icon {
    background: var(--option-selected, #e50914) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.3) !important;
}

/* Platform hover durumunda ikon stili */
.platform-option:hover .platform-icon {
    background: var(--option-selected, #e50914) !important;
    transform: scale(1.05) !important;
}

/* ===================================
   ÖZEL PLATFORM İKONLARI
   =================================== */

/* Netflix ikonu */
.netflix-icon {
    background: #e50914 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    font-family: 'Arial Black', Arial, sans-serif !important;
    letter-spacing: -1px !important;
    color: white !important;
}

/* Disney Plus ikonu */
.disney-icon {
    background: linear-gradient(45deg, #113ccf, #1e5dff) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    font-family: 'Arial', sans-serif !important;
    letter-spacing: 0.5px !important;
    color: white !important;
}

/* HBO Max ikonu */
.hbo-icon {
    background: linear-gradient(45deg, #8e44ad, #9b59b6) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    font-family: 'Arial Black', Arial, sans-serif !important;
    letter-spacing: 1px !important;
    color: white !important;
    /* Taşma düzeltmeleri */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Platform option container taşma düzeltmesi */
.platform-option {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.platform-label {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Platform options container taşma düzeltmesi */
.platform-options {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Apple TV ikonu */
.apple-icon {
    background: linear-gradient(45deg, #000000, #333333) !important;
    color: white !important;
    font-size: 20px !important;
}

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

/* FontAwesome ikonları için genel düzeltmeler */
.fas, .far, .fab, .fa {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands', sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

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

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

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

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

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

.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;
}

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

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

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

@media (max-width: 768px) {
    .mood-options .mood-icon,
    .mood-option .mood-icon {
        font-size: 14px !important;
        width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
    }
    
    .content-type-options .content-type-icon,
    .content-type-option .content-type-icon {
        font-size: 16px !important;
        width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
    }
    
    .platform-options .platform-icon,
    .platform-option .platform-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .mood-options .mood-icon,
    .mood-option .mood-icon {
        font-size: 12px !important;
        width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
    }
    
    .content-type-options .content-type-icon,
    .content-type-option .content-type-icon {
        font-size: 14px !important;
        width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
    }
    
    .platform-options .platform-icon,
    .platform-option .platform-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
    }
}