/**
 * Skeleton Loading Component CSS.
 * 3 animasyon tipi: pulse, wave, shimmer.
 * K2 cascade uyumlu.
 *
 * @package Necox
 * @since   2.67.0
 */

/* ── Temel Ogeler ── */
.necox-skeleton__line {
    height: 10px;
    background: var(--necox-skel-bg, var(--necox-border));
    border-radius: var(--necox-skel-radius, 4px);
    width: 100%;
}

.necox-skeleton__block {
    background: var(--necox-skel-bg, var(--necox-border));
    border-radius: var(--necox-skel-radius, 4px);
}

.necox-skeleton__circle {
    background: var(--necox-skel-bg, var(--necox-border));
    border-radius: 50%;
}

/* ── Animasyon Tipleri ── */

/* Shimmer */
.necox-skeleton--shimmer .necox-skeleton__line,
.necox-skeleton--shimmer .necox-skeleton__block,
.necox-skeleton--shimmer .necox-skeleton__circle {
    background: linear-gradient(
        90deg,
        var(--necox-skel-bg, var(--necox-border)) 25%,
        var(--necox-skel-shine, var(--necox-bg)) 50%,
        var(--necox-skel-bg, var(--necox-border)) 75%
    );
    background-size: 200% 100%;
    animation: necoxSkelShimmer var(--necox-skel-duration, 1.5s) infinite;
}

@keyframes necoxSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pulse */
.necox-skeleton--pulse .necox-skeleton__line,
.necox-skeleton--pulse .necox-skeleton__block,
.necox-skeleton--pulse .necox-skeleton__circle {
    animation: necoxSkelPulse var(--necox-skel-duration, 1.5s) ease-in-out infinite;
}

@keyframes necoxSkelPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* Wave */
.necox-skeleton--wave .necox-skeleton__line,
.necox-skeleton--wave .necox-skeleton__block,
.necox-skeleton--wave .necox-skeleton__circle {
    position: relative;
    overflow: hidden;
}

.necox-skeleton--wave .necox-skeleton__line::after,
.necox-skeleton--wave .necox-skeleton__block::after,
.necox-skeleton--wave .necox-skeleton__circle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--necox-skel-shine, rgba(255,255,255,0.4)),
        transparent
    );
    animation: necoxSkelWave var(--necox-skel-duration, 1.5s) infinite;
}

@keyframes necoxSkelWave {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Hiz ── */
.necox-skeleton--slow  { --necox-skel-duration: 2s; }
.necox-skeleton--fast  { --necox-skel-duration: 1s; }

/* ── Kart Skeleton ── */
.necox-skeleton-grid {
    display: grid;
    gap: 16px;
}

.necox-skeleton-card {
    background: var(--necox-white);
    border-radius: 8px;
    border: 1px solid var(--necox-border);
    overflow: hidden;
}

.necox-skeleton-card__image {
    height: 120px;
    border-radius: 0;
}

.necox-skeleton-card__body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.necox-skeleton-card__price {
    height: 14px;
    margin-top: 4px;
}

/* ── Satir Skeleton ── */
.necox-skeleton-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.necox-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--necox-white);
    border-radius: 6px;
    border: 1px solid var(--necox-border);
}

.necox-skeleton-row__thumb {
    width: 48px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 4px;
}

.necox-skeleton-row__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── Profil Skeleton ── */
.necox-skeleton-profile {
    text-align: center;
    padding: 16px;
    background: var(--necox-white);
    border-radius: 10px;
    border: 1px solid var(--necox-border);
}

.necox-skeleton-profile__avatar {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
}

.necox-skeleton-profile__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
}

.necox-skeleton-profile__actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── Fallback Spinner ── */
.necox-skeleton-spinner {
    text-align: center;
    padding: 24px;
}

.necox-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--necox-border);
    border-top-color: var(--necox-primary);
    border-radius: 50%;
    animation: necoxSpin 0.6s linear infinite;
}

@keyframes necoxSpin {
    to { transform: rotate(360deg); }
}