/**
 * AJAX Filtreleme Loading Stilleri
 * Spinner kartların ortasında - modern tasarım
 */

/* AJAX İçerik Alanı */
#ajax-content-area {
    position: relative;
    min-height: 400px;
}

/* Loading Durumu - içerik soluk */
#ajax-content-area.ajax-loading > * {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Spinner Overlay - kartların üzerinde, ortada */
#ajax-global-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
}

/* Dönen Spinner - modern */
.ajax-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajax-spinner i {
    font-size: 55px;
    color: #316aff;
    animation: spin 0.7s linear infinite;
    filter: drop-shadow(0 0 20px rgba(49, 106, 255, 0.7));
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Sayfa geçiş animasyonu */
#ajax-content-area .row {
    animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Film/Dizi kartları hover - sadece AJAX filtreleme alanındaki kartlar */
#ajax-content-area .movie-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ajax-content-area .movie-item:hover {
    transform: translateY(-4px);
}

/* Pagination aktif state */
.pagination-area .page-link {
    transition: all 0.2s ease;
}

.pagination-area .page-item.active .page-link,
.pagination-area .page-link:hover {
    background: #316aff;
    border-color: #316aff;
    color: #fff;
}

/* Kategori linkleri */
.filter-option {
    transition: all 0.2s ease;
}

.filter-option:hover,
.filter-option.active {
    background: rgba(49, 106, 255, 0.15);
    border-color: #316aff;
    color: #316aff;
}

/* Responsive */
@media (max-width: 768px) {
    .ajax-spinner i {
        font-size: 45px;
    }
}