/**
 * RandeVip — kurumsal, göz yormayan arka plan (nötr slate + çok hafif marka vurgusu).
 * Hareket: taban kayması, yavaş orbit, ızgara/shimmer. Renk: düşük doygunluk.
 */
.bg-mesh {
    /* Kurumsal nötr palet (slate / cool gray) — marka sadece vurgu */
    --rv-mesh-brand: 244, 59, 138;
    --rv-mesh-slate-a: 15, 23, 42;
    --rv-mesh-slate-b: 30, 41, 59;
    --rv-mesh-slate-c: 51, 65, 85;
    --rv-mesh-base-a: #08090d;
    --rv-mesh-base-b: #060608;
    --rv-mesh-base-c: #030304;

    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
    /* Repaint alanını izole et + bileşik katman (jank azaltma) */
    contain: paint;
    transform: translateZ(0);

    /* Büyük yumuşak “sis” katmanları — hareket background-position ile */
    background:
        radial-gradient(
            ellipse 90% 70% at 25% 15%,
            rgba(var(--rv-mesh-slate-b), 0.22) 0%,
            transparent 58%
        ),
        radial-gradient(
            ellipse 85% 65% at 82% 88%,
            rgba(var(--rv-mesh-slate-a), 0.28) 0%,
            transparent 55%
        ),
        radial-gradient(ellipse 80% 50% at 50% 108%, rgba(0, 0, 0, 0.5) 0%, transparent 52%),
        radial-gradient(ellipse 95% 72% at 50% 45%, rgba(8, 9, 13, 0.45) 0%, transparent 75%),
        repeating-linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.006) 0px,
            rgba(255, 255, 255, 0.006) 1px,
            transparent 1px,
            transparent 7px
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.014) 0%,
            transparent 40%,
            transparent 60%,
            rgba(0, 0, 0, 0.2) 100%
        ),
        linear-gradient(
            165deg,
            var(--rv-mesh-base-a) 0%,
            var(--bg-mesh-mid, var(--bg-deep, var(--rv-bg, var(--rv-mesh-base-b)))) 42%,
            var(--rv-mesh-base-b) 76%,
            var(--rv-mesh-base-c) 100%
        );
    background-size:
        140% 140%,
        135% 135%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
    background-position:
        0% 0%,
        100% 100%,
        50% 50%,
        50% 50%,
        0 0,
        0 0,
        0 0;
    box-shadow:
        inset 0 0 200px rgba(0, 0, 0, 0.52),
        inset 0 -80px 120px rgba(var(--rv-mesh-slate-a), 0.12),
        inset 0 0 1px rgba(255, 255, 255, 0.028);
    animation: rv-bg-mesh-base-drift 52s ease-in-out infinite alternate;
}

@keyframes rv-bg-mesh-base-drift {
    0% {
        background-position:
            0% 0%,
            100% 100%,
            50% 50%,
            50% 50%,
            0 0,
            0 0,
            0 0;
    }
    50% {
        background-position:
            18% 12%,
            82% 88%,
            50% 50%,
            50% 50%,
            0 0,
            0 0,
            0 0;
    }
    100% {
        background-position:
            8% 22%,
            92% 78%,
            50% 50%,
            50% 50%,
            0 0,
            0 0,
            0 0;
    }
}

/*
 * Dönen disk: sadece slate / cool-blue ailesi — tek ince marka sıcaklığı
 */
.bg-mesh::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 160vmax;
    height: 160vmax;
    margin: -80vmax 0 0 -80vmax;
    background-image:
        radial-gradient(
            circle at 42% 46%,
            rgba(var(--rv-mesh-brand), 0.045) 0%,
            transparent 48%
        ),
        conic-gradient(
            from 12deg at 50% 50%,
            rgba(var(--rv-mesh-slate-a), 0.2) 0deg,
            rgba(var(--rv-mesh-slate-b), 0.22) 72deg,
            rgba(var(--rv-mesh-slate-c), 0.14) 144deg,
            rgba(var(--rv-mesh-slate-a), 0.18) 216deg,
            rgba(71, 85, 105, 0.16) 288deg,
            rgba(var(--rv-mesh-slate-a), 0.2) 360deg
        );
    background-blend-mode: normal, normal;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.65;
    box-shadow:
        0 0 100px rgba(var(--rv-mesh-slate-a), 0.15),
        0 0 160px rgba(0, 0, 0, 0.25);
    animation:
        rv-bg-mesh-orbit 56s linear infinite,
        rv-bg-mesh-breathe 18s ease-in-out infinite alternate;
}

/* Dönüş + yumuşak merkez kayması — kurumsal, öngörülebilir tempo */
@keyframes rv-bg-mesh-orbit {
    0% {
        transform: translate(-0.9%, -0.55%) rotate(0deg) scale(1.01);
    }
    25% {
        transform: translate(0.65%, 0.45%) rotate(90deg) scale(1.01);
    }
    50% {
        transform: translate(0.3%, -0.38%) rotate(180deg) scale(1.01);
    }
    75% {
        transform: translate(-0.45%, 0.28%) rotate(270deg) scale(1.01);
    }
    100% {
        transform: translate(-0.9%, -0.55%) rotate(360deg) scale(1.01);
    }
}

@keyframes rv-bg-mesh-breathe {
    from {
        opacity: 0.58;
    }
    to {
        opacity: 0.78;
    }
}

/* Shimmer + akan ızgara — daha hareketli, renk nötr */
.bg-mesh::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(255, 255, 255, 0.02) 42%,
            rgba(255, 255, 255, 0.032) 50%,
            rgba(255, 255, 255, 0.018) 58%,
            transparent 100%
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 44px,
            rgba(255, 255, 255, 0.008) 44px,
            rgba(255, 255, 255, 0.008) 45px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 52px,
            rgba(255, 255, 255, 0.006) 52px,
            rgba(255, 255, 255, 0.006) 53px
        ),
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.016'%3E%3Ccircle cx='8' cy='10' r='1'/%3E%3Ccircle cx='60' cy='32' r='0.7'/%3E%3Ccircle cx='92' cy='78' r='0.9'/%3E%3Ccircle cx='34' cy='88' r='0.65'/%3E%3Ccircle cx='102' cy='18' r='0.75'/%3E%3Ccircle cx='50' cy='100' r='0.55'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2394a3b8' fill-opacity='0.012'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3Ccircle cx='38' cy='22' r='0.75'/%3E%3Ccircle cx='22' cy='50' r='0.75'/%3E%3Ccircle cx='58' cy='58' r='1'/%3E%3C/g%3E%3C/svg%3E");
    background-size:
        220% 220%,
        100% 45px,
        52px 100%,
        120px 120px,
        72px 72px;
    background-position:
        -20% -10%,
        0 0,
        0 0,
        0 0,
        28px 20px;
    opacity: 0.32;
}


@media (prefers-reduced-motion: reduce) {
    .bg-mesh {
        animation: none;
        background-position:
            8% 10%,
            90% 85%,
            50% 50%,
            50% 50%,
            0 0,
            0 0,
            0 0;
    }

    .bg-mesh::before {
        animation: none;
        opacity: 0.68;
        transform: translate(-0.45%, -0.3%) rotate(10deg) scale(1.01);
        filter: blur(70px);
    }

    .bg-mesh::after {
        animation: none;
        opacity: 0.4;
        background-position:
            10% 20%,
            0 0,
            0 0,
            0 0,
            28px 20px;
    }
}

/* Telefon / tablet: arka plan sürekli repaint yapmasın */
@media (max-width: 1199.98px), (pointer: coarse) {
    .bg-mesh {
        animation: none;
        background-position:
            6% 12%,
            92% 86%,
            50% 50%,
            50% 50%,
            0 0,
            0 0,
            0 0;
    }

    .bg-mesh::before {
        animation: none;
        opacity: 0.55;
        transform: translate(-0.5%, -0.35%) rotate(24deg) scale(1.02);
        filter: blur(40px);
    }

    .bg-mesh::after {
        animation: none;
        opacity: 0.35;
        background-position:
            12% 18%,
            0 0,
            0 0,
            0 0,
            28px 20px;
    }
}