/*
 * Arka plan efektleri — tüm temalarda ortak (resources/themes/_base/partials/background_effects).
 * Açma/kapama: theme.php "effects" ya da yönetim paneli › Tasarım Ayarları.
 * Kaynak: sonremo\Panel13 (2026). Sınıflar "rpfx-" önekiyle ayrıldı; temaların kendi
 * CSS'iyle çakışmaz.
 */

/* ---- Video ---- */
.rpfx-video {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -9999; opacity: .2; pointer-events: none;
}

/* ---- Kıvılcımlar: tüm sayfada, ekranın altında ---- */
.rpfx-sparks.rpfx-sparks-global {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    transform: none; pointer-events: none; z-index: 1; overflow: visible;
}

/* "Hareketi azalt" tercihine uyulacaksa (yönetim ayarı) kıvılcımlar durur */
@media (prefers-reduced-motion: reduce) {
    .rpfx-respect-motion .rpfx-sparks { display: none; }
}

.rpfx-sparks {
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: min(1200px, 100%);
    height: 420px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 20;
}

.rpfx-sparks > div {
    position: absolute;
    opacity: .9;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    will-change: transform, opacity;
}

/* ===== RIGHT SIDE ===== */

.rpfx-sparks .rpfx-spark_1 {
    width: 764px;
    height: 313px;
    right: 0;
    bottom: -320px;
    background-image: url('spark/spark_1.png');
    animation: rpfx-spark-right-1 3.5s linear infinite 1s;
}

.rpfx-sparks .rpfx-spark_2 {
    width: 179px;
    height: 335px;
    right: 230px;
    bottom: -320px;
    background-image: url('spark/spark_2.png');
    animation: rpfx-spark-right-1 3.5s linear infinite 2s;
}

.rpfx-sparks .rpfx-spark_3 {
    width: 128px;
    height: 165px;
    right: 280px;
    bottom: -140px;
    background-image: url('spark/spark_3.png');
    animation: rpfx-spark-right-3 3s linear infinite 1.5s;
}

.rpfx-sparks .rpfx-spark-big {
    width: 794px;
    height: 176px;
    right: 0;
    bottom: -180px;
    background-image: url('spark/spark_4.png');
    animation: rpfx-spark-right-5 3.5s linear infinite;
}

.rpfx-sparks .rpfx-spark_4.rpfx-spark-big {
    animation-delay: 0s;
}

.rpfx-sparks .rpfx-spark_5.rpfx-spark-big {
    right: 40px;
    animation-delay: 2s;
}

/* ===== LEFT SIDE ===== */

.rpfx-sparks .rpfx-sparkL_1 {
    width: 764px;
    height: 313px;
    left: 0;
    bottom: -320px;
    background-image: url('spark/spark_1.png');
    animation: rpfx-spark-left-1 3.5s linear infinite .5s;
}

.rpfx-sparks .rpfx-sparkL_2 {
    width: 179px;
    height: 335px;
    left: 230px;
    bottom: -320px;
    background-image: url('spark/spark_2.png');
    animation: rpfx-spark-left-1 3.5s linear infinite 1.5s;
}

.rpfx-sparks .rpfx-sparkL_3 {
    width: 128px;
    height: 165px;
    left: 280px;
    bottom: -140px;
    background-image: url('spark/spark_3.png');
    animation: rpfx-spark-left-3 3s linear infinite 1s;
}

.rpfx-sparks .rpfx-sparkL_4.rpfx-spark-big {
    left: 0;
    bottom: -180px;
    background-image: url('spark/spark_4.png');
    animation: rpfx-spark-left-5 3.5s linear infinite 1s;
}

.rpfx-sparks .rpfx-sparkL_5.rpfx-spark-big {
    left: 40px;
    bottom: -180px;
    background-image: url('spark/spark_4.png');
    animation: rpfx-spark-left-5 3.5s linear infinite 2.5s;
}

/* ===== RIGHT SIDE ===== */

.rpfx-sparks .rpfx-sparkR_1 {
    width: 764px;
    height: 313px;
    right: 0;
    bottom: -320px;
    background-image: url('spark/spark_1.png');
    animation: rpfx-spark-right-1 3.5s linear infinite .5s;
}

.rpfx-sparks .rpfx-sparkR_2 {
    width: 179px;
    height: 335px;
    right: 230px;
    bottom: -320px;
    background-image: url('spark/spark_2.png');
    animation: rpfx-spark-right-1 3.5s linear infinite 1.5s;
}

.rpfx-sparks .rpfx-sparkR_3 {
    width: 128px;
    height: 165px;
    right: 280px;
    bottom: -140px;
    background-image: url('spark/spark_3.png');
    animation: rpfx-spark-right-3 3s linear infinite 1s;
}

.rpfx-sparks .rpfx-sparkR_4.rpfx-spark-big {
    right: 0;
    bottom: -180px;
    background-image: url('spark/spark_4.png');
    animation: rpfx-spark-right-5 3.5s linear infinite 1s;
}

.rpfx-sparks .rpfx-sparkR_5.rpfx-spark-big {
    right: 40px;
    bottom: -180px;
    background-image: url('spark/spark_4.png');
    animation: rpfx-spark-right-5 3.5s linear infinite 2.5s;
}

/* ===== ANIMATIONS RIGHT ===== */

@keyframes rpfx-spark-right-1 {
    0% {
        transform: translateY(0) scale(.6);
        opacity: 1;
    }
    25% {
        transform: translateY(-80px) scale(.7);
        opacity: 1;
    }
    50% {
        transform: translateY(-160px) scale(.8);
        opacity: 1;
    }
    75% {
        transform: translateY(-240px) scale(.9);
        opacity: .5;
    }
    100% {
        transform: translateY(-320px) scale(1);
        opacity: 0;
    }
}

@keyframes rpfx-spark-right-3 {
    0% {
        transform: translateY(0) scale(.6);
        opacity: 1;
    }
    25% {
        transform: translateY(-60px) scale(.7);
        opacity: 1;
    }
    50% {
        transform: translateY(-120px) scale(.8);
        opacity: 1;
    }
    75% {
        transform: translateY(-180px) scale(.9);
        opacity: .5;
    }
    100% {
        transform: translateY(-240px) scale(1);
        opacity: 0;
    }
}

@keyframes rpfx-spark-right-5 {
    0% {
        transform: translateY(0) scale(.6);
        opacity: 1;
    }
    25% {
        transform: translateY(-60px) scale(.7);
        opacity: 1;
    }
    50% {
        transform: translateY(-120px) scale(.8);
        opacity: 1;
    }
    75% {
        transform: translateY(-180px) scale(.9);
        opacity: .5;
    }
    100% {
        transform: translateY(-240px) scale(1);
        opacity: 0;
    }
}

/* ===== ANIMATIONS LEFT ===== */

@keyframes rpfx-spark-left-1 {
    0% {
        transform: translateY(0) scale(.6) scaleX(-1);
        opacity: 1;
    }
    25% {
        transform: translateY(-80px) scale(.7) scaleX(-1);
        opacity: 1;
    }
    50% {
        transform: translateY(-160px) scale(.8) scaleX(-1);
        opacity: 1;
    }
    75% {
        transform: translateY(-240px) scale(.9) scaleX(-1);
        opacity: .5;
    }
    100% {
        transform: translateY(-320px) scale(1) scaleX(-1);
        opacity: 0;
    }
}

@keyframes rpfx-spark-left-3 {
    0% {
        transform: translateY(0) scale(.6) scaleX(-1);
        opacity: 1;
    }
    25% {
        transform: translateY(-60px) scale(.7) scaleX(-1);
        opacity: 1;
    }
    50% {
        transform: translateY(-120px) scale(.8) scaleX(-1);
        opacity: 1;
    }
    75% {
        transform: translateY(-180px) scale(.9) scaleX(-1);
        opacity: .5;
    }
    100% {
        transform: translateY(-240px) scale(1) scaleX(-1);
        opacity: 0;
    }
}

@keyframes rpfx-spark-left-5 {
    0% {
        transform: translateY(0) scale(.6) scaleX(-1);
        opacity: 1;
    }
    25% {
        transform: translateY(-60px) scale(.7) scaleX(-1);
        opacity: 1;
    }
    50% {
        transform: translateY(-120px) scale(.8) scaleX(-1);
        opacity: 1;
    }
    75% {
        transform: translateY(-180px) scale(.9) scaleX(-1);
        opacity: .5;
    }
    100% {
        transform: translateY(-240px) scale(1) scaleX(-1);
        opacity: 0;
    }
}

/* ===== OPTIONAL ===== */

.ust-menu {
    position: absolute;
    width: 100%;
    z-index: 99999;
}

@media (max-width: 991px) {
    .rpfx-sparks {
        width: 100%;
        height: 320px;
        bottom: 20px;
    }

    .rpfx-sparks > div {
        opacity: .65;
    }
}

/* Donanım hızlandırması yoksa (background_effects: .rpfx-lite) kıvılcımlar kapalı */
.rpfx-lite .rpfx-sparks { display: none !important; }