/* =========================================================
   VAYBE LIVE — FLOATING WATERPARK LOGO V2
   SADECE SOL PANELDEKİ LOGO SAHNESİ

   ÜST PANEL / ANA LAYOUT / MENÜLER ETKİLENMEZ
   ========================================================= */

.vaybe-sidebar .vaybe-logo-stage {
    position: relative !important;
    width: 100% !important;
    height: 178px !important;
    min-height: 178px !important;
    overflow: hidden !important;
    isolation: isolate;
    perspective: 800px;
}


/* =========================================================
   ARKA PLAN — GECE HAVUZ / OYUN PARKI
   ========================================================= */

.vaybe-sidebar .vaybe-logo-environment {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 105%,
            rgba(0, 205, 255, .18) 0%,
            rgba(0, 112, 160, .08) 38%,
            transparent 65%
        ),
        radial-gradient(
            circle at 12% 32%,
            rgba(37, 244, 238, .09),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 30%,
            rgba(254, 44, 85, .07),
            transparent 28%
        );
}


/* su tabanı */

.vaybe-sidebar .vaybe-logo-environment::before {
    content: "";

    position: absolute;

    left: -20%;
    width: 140%;
    height: 66px;

    bottom: -27px;

    border-radius: 50%;

    background:
        repeating-radial-gradient(
            ellipse at center,
            rgba(99, 238, 255, .13) 0px,
            rgba(99, 238, 255, .13) 1px,
            transparent 2px,
            transparent 10px
        ),
        radial-gradient(
            ellipse at center,
            rgba(37, 244, 238, .14),
            rgba(0, 86, 118, .08) 50%,
            transparent 72%
        );

    transform:
        rotateX(66deg);

    animation:
        vaybeWaterFloor 4.2s ease-in-out infinite alternate;
}


/* oyun parkı uzak ışıkları */

.vaybe-sidebar .vaybe-logo-environment::after {
    content: "";

    position: absolute;

    left: 5%;
    right: 5%;
    top: 13px;

    height: 50px;

    opacity: .42;

    background:
        radial-gradient(circle at 5% 65%, #25f4ee 0 1px, transparent 2px),
        radial-gradient(circle at 17% 35%, #ffba62 0 1px, transparent 2px),
        radial-gradient(circle at 31% 60%, #25f4ee 0 1px, transparent 2px),
        radial-gradient(circle at 47% 27%, #fe2c55 0 1px, transparent 2px),
        radial-gradient(circle at 61% 57%, #ffad42 0 1px, transparent 2px),
        radial-gradient(circle at 75% 33%, #25f4ee 0 1px, transparent 2px),
        radial-gradient(circle at 91% 64%, #fe2c55 0 1px, transparent 2px);

    filter: blur(.3px);

    animation:
        vaybeParkTwinkle 3.8s ease-in-out infinite alternate;
}


/* =========================================================
   RENKLİ HAVUZ IŞIKLARI
   ========================================================= */

.vaybe-sidebar .pool-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(24px);
    pointer-events: none;
}


.vaybe-sidebar .pool-glow-cyan {
    width: 110px;
    height: 85px;

    left: -34px;
    bottom: -4px;

    background: rgba(37,244,238,.22);

    animation:
        cyanPoolMove 6s ease-in-out infinite alternate;
}


.vaybe-sidebar .pool-glow-pink {
    width: 105px;
    height: 80px;

    right: -38px;
    bottom: 4px;

    background: rgba(254,44,85,.17);

    animation:
        pinkPoolMove 7s ease-in-out infinite alternate;
}


/* =========================================================
   SU YANSIMALARI
   ========================================================= */

.vaybe-sidebar .water-reflection {
    position: absolute;

    height: 2px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(150, 250, 255, .75),
            transparent
        );

    filter: blur(.25px);

    opacity: .35;
}


.vaybe-sidebar .reflection-1 {
    width: 80px;
    left: 5px;
    bottom: 24px;

    animation:
        waterLine1 3s ease-in-out infinite;
}


.vaybe-sidebar .reflection-2 {
    width: 105px;
    right: -4px;
    bottom: 15px;

    animation:
        waterLine2 3.7s ease-in-out infinite;
}


.vaybe-sidebar .reflection-3 {
    width: 62px;
    left: 85px;
    bottom: 8px;

    opacity: .20;

    animation:
        waterLine3 4.2s ease-in-out infinite;
}


/* =========================================================
   SİS
   ========================================================= */

.vaybe-sidebar .vaybe-mist {
    position: absolute;

    height: 24px;

    border-radius: 50%;

    filter: blur(11px);

    pointer-events: none;

    z-index: 4;
}


.vaybe-sidebar .mist-1 {
    width: 100px;

    left: -40px;
    bottom: 35px;

    background: rgba(104,231,255,.08);

    animation:
        mistOne 8s ease-in-out infinite;
}


.vaybe-sidebar .mist-2 {
    width: 110px;

    right: -50px;
    bottom: 44px;

    background: rgba(255,255,255,.045);

    animation:
        mistTwo 10s ease-in-out infinite;
}


/* =========================================================
   VAYBE — ANA HARF GRUBU

   ÖNEMLİ:
   HARFLER BİRBİRİNDEN AYRI.
   ========================================================= */

.vaybe-sidebar .vaybe-floating-logo {
    position: absolute !important;

    left: 50% !important;
    top: 42% !important;

    width: auto !important;

    transform:
        translate(-50%, -50%) !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    white-space: nowrap;

    z-index: 20 !important;

    perspective: 700px;

    pointer-events: none;
}


/* =========================================================
   HER HARF AYRI 3D NESNE
   ========================================================= */

.vaybe-sidebar .vaybe-letter {
    position: relative !important;

    display: flex !important;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto !important;

    width: 27px !important;
    height: 59px !important;

    transform-origin: center center;

    transform-style: preserve-3d;

    opacity: 1 !important;

    visibility: visible !important;

    filter:
        drop-shadow(0 8px 5px rgba(0,0,0,.60))
        drop-shadow(0 0 5px rgba(71,231,255,.08));

    will-change: transform;
}


.vaybe-sidebar .letter-v {
    width: 38px !important;

    animation:
        floatV 5.8s ease-in-out infinite;
}


.vaybe-sidebar .letter-a {
    animation:
        floatA 6.5s ease-in-out infinite;
}


.vaybe-sidebar .letter-y {
    animation:
        floatY 5.3s ease-in-out infinite;
}


.vaybe-sidebar .letter-b {
    animation:
        floatB 6.9s ease-in-out infinite;
}


.vaybe-sidebar .letter-e {
    animation:
        floatE 5.9s ease-in-out infinite;
}


/* =========================================================
   ŞİŞKİN METAL / BALON HARF GÖVDESİ
   ========================================================= */

.vaybe-sidebar .vaybe-letter .letter-body {
    position: relative !important;

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    overflow: visible !important;

    font-family:
        "Arial Black",
        "Segoe UI Black",
        Impact,
        sans-serif !important;

    font-size: 49px !important;

    font-weight: 950 !important;

    line-height: 1 !important;

    letter-spacing: -3px !important;

    color: #eefcff !important;

    background:
        linear-gradient(
            105deg,
            #65747c 0%,
            #b8c8ce 10%,
            #ffffff 22%,
            #7c8d94 35%,
            #eaf8fb 46%,
            #ffffff 53%,
            #87989f 67%,
            #d9e8ec 80%,
            #ffffff 92%,
            #77858c 100%
        ) !important;

    background-size:
        250% 100% !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    -webkit-text-fill-color:
        transparent !important;

    text-shadow: none !important;

    transform-origin:
        center center;

    will-change:
        transform,
        background-position;

    filter:
        drop-shadow(0 1px 0 rgba(255,255,255,.38))
        drop-shadow(0 2px 0 rgba(133,148,154,.85))
        drop-shadow(0 3px 0 rgba(91,105,111,.78))
        drop-shadow(0 5px 2px rgba(25,33,38,.80))
        drop-shadow(0 8px 5px rgba(0,0,0,.48));
}


/* =========================================================
   BALON SIKIŞMASI

   Her harf farklı zamanda tepki verir.
   ========================================================= */

.vaybe-sidebar .letter-v .letter-body {
    animation:
        chromeFlow 5s linear infinite,
        squeezeV 7.5s ease-in-out infinite;
}


.vaybe-sidebar .letter-a .letter-body {
    animation:
        chromeFlow 5.7s linear infinite,
        squeezeA 8.1s ease-in-out infinite;
}


.vaybe-sidebar .letter-y .letter-body {
    animation:
        chromeFlow 5.2s linear infinite,
        squeezeY 7.2s ease-in-out infinite;
}


.vaybe-sidebar .letter-b .letter-body {
    animation:
        chromeFlow 6s linear infinite,
        squeezeB 8.5s ease-in-out infinite;
}


.vaybe-sidebar .letter-e .letter-body {
    animation:
        chromeFlow 5.5s linear infinite,
        squeezeE 7.8s ease-in-out infinite;
}


/* =========================================================
   HARFLERDEN GEÇEN BEYAZ PARLAMA
   ========================================================= */

.vaybe-sidebar .letter-light {
    position: absolute;

    display: block !important;

    top: 5px;
    left: -10px;

    width: 10px;
    height: 45px;

    border-radius: 50%;

    opacity: 0;

    background:
        rgba(255,255,255,.62);

    filter: blur(4px);

    mix-blend-mode: screen;

    transform:
        rotate(12deg);

    animation:
        letterSweep 5.2s ease-in-out infinite;
}


.vaybe-sidebar .letter-a .letter-light {
    animation-delay: -1s;
}

.vaybe-sidebar .letter-y .letter-light {
    animation-delay: -2s;
}

.vaybe-sidebar .letter-b .letter-light {
    animation-delay: -3s;
}

.vaybe-sidebar .letter-e .letter-light {
    animation-delay: -4s;
}


/* =========================================================
   SICAK ŞÖMİNE YANSIMASI
   ========================================================= */

.vaybe-sidebar .vaybe-floating-logo::after {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;

    bottom: -9px;

    height: 28px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,163,57,.24),
            rgba(255,75,16,.09) 48%,
            transparent 72%
        );

    filter: blur(8px);

    mix-blend-mode: screen;

    animation:
        warmReflection 1.15s ease-in-out infinite alternate;

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   LIVE BADGE
   ========================================================= */

.vaybe-sidebar .vaybe-live-mini {
    position: absolute !important;

    left: 50% !important;
    top: 68% !important;

    transform:
        translateX(-50%) !important;

    z-index: 24 !important;

    display: flex !important;

    align-items: center;

    gap: 4px;

    padding:
        3px
        7px;

    border-radius: 20px;

    color:
        rgba(223,253,255,.85);

    background:
        rgba(2,13,20,.70);

    border:
        1px solid rgba(74,224,240,.13);

    box-shadow:
        0 0 10px rgba(37,244,238,.04);

    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1px;

    white-space: nowrap;
}


.vaybe-sidebar .live-mini-dot {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        #fe2c55;

    box-shadow:
        0 0 6px rgba(254,44,85,.85);

    animation:
        livePulse 1.4s ease-in-out infinite;
}


/* =========================================================
   BALONCUKLAR
   ========================================================= */

.vaybe-sidebar .vaybe-bubbles {
    position: absolute;
    inset: 0;

    display: block !important;

    overflow: hidden;

    pointer-events: none;

    z-index: 18;
}


.vaybe-sidebar .vaybe-bubbles .bubble {
    position: absolute !important;

    display: block !important;

    bottom: -15px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    opacity: 0;

    border:
        1px solid rgba(197,249,255,.42);

    background:
        radial-gradient(
            circle at 28% 23%,
            rgba(255,255,255,.72) 0 6%,
            rgba(170,246,255,.18) 13%,
            rgba(56,190,222,.06) 55%,
            transparent 70%
        );

    box-shadow:
        inset -2px -2px 3px rgba(0,89,130,.10),
        0 0 4px rgba(98,229,255,.10);

    animation:
        riseBubble 6.5s linear infinite;
}


.vaybe-sidebar .bubble-1 {
    left: 4%;
    width: 5px;
    height: 5px;
    animation-delay: -1s;
}

.vaybe-sidebar .bubble-2 {
    left: 11%;
    width: 9px;
    height: 9px;
    animation-delay: -4.4s;
    animation-duration: 8s;
}

.vaybe-sidebar .bubble-3 {
    left: 19%;
    width: 4px;
    height: 4px;
    animation-delay: -2.3s;
    animation-duration: 5.5s;
}

.vaybe-sidebar .bubble-4 {
    left: 28%;
    width: 11px;
    height: 11px;
    animation-delay: -6.4s;
    animation-duration: 9s;
}

.vaybe-sidebar .bubble-5 {
    left: 37%;
    width: 6px;
    height: 6px;
    animation-delay: -3.1s;
}

.vaybe-sidebar .bubble-6 {
    left: 45%;
    width: 4px;
    height: 4px;
    animation-delay: -5.2s;
    animation-duration: 5.8s;
}

.vaybe-sidebar .bubble-7 {
    left: 53%;
    width: 8px;
    height: 8px;
    animation-delay: -1.7s;
    animation-duration: 7.4s;
}

.vaybe-sidebar .bubble-8 {
    left: 61%;
    width: 5px;
    height: 5px;
    animation-delay: -4.7s;
}

.vaybe-sidebar .bubble-9 {
    left: 69%;
    width: 10px;
    height: 10px;
    animation-delay: -7s;
    animation-duration: 8.8s;
}

.vaybe-sidebar .bubble-10 {
    left: 77%;
    width: 5px;
    height: 5px;
    animation-delay: -2.6s;
    animation-duration: 5.7s;
}

.vaybe-sidebar .bubble-11 {
    left: 84%;
    width: 8px;
    height: 8px;
    animation-delay: -5.5s;
    animation-duration: 7.7s;
}

.vaybe-sidebar .bubble-12 {
    left: 92%;
    width: 4px;
    height: 4px;
    animation-delay: -3.5s;
    animation-duration: 5.3s;
}

.vaybe-sidebar .bubble-13 {
    left: 32%;
    width: 5px;
    height: 5px;
    animation-delay: -7.5s;
    animation-duration: 9.2s;
}

.vaybe-sidebar .bubble-14 {
    left: 72%;
    width: 6px;
    height: 6px;
    animation-delay: -6.1s;
    animation-duration: 8.2s;
}


/* =========================================================
   KÖPÜK
   ========================================================= */

.vaybe-sidebar .foam-zone {
    position: absolute !important;

    display: block !important;

    bottom: 5px;

    width: 50px;
    height: 27px;

    z-index: 17;

    pointer-events: none;
}


.vaybe-sidebar .foam-left {
    left: -7px;
}


.vaybe-sidebar .foam-right {
    right: -7px;
}


.vaybe-sidebar .foam-zone span {
    position: absolute;

    display: block !important;

    border-radius: 50%;

    border:
        1px solid rgba(218,253,255,.30);

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.36),
            rgba(117,228,244,.09) 48%,
            transparent 70%
        );

    animation:
        foamMotion 3.2s ease-in-out infinite;
}


.vaybe-sidebar .foam-zone span:nth-child(1) {
    width: 15px;
    height: 15px;
    left: 0;
    bottom: 0;
}

.vaybe-sidebar .foam-zone span:nth-child(2) {
    width: 9px;
    height: 9px;
    left: 11px;
    bottom: 7px;
    animation-delay: -.7s;
}

.vaybe-sidebar .foam-zone span:nth-child(3) {
    width: 13px;
    height: 13px;
    left: 19px;
    bottom: 1px;
    animation-delay: -1.3s;
}

.vaybe-sidebar .foam-zone span:nth-child(4) {
    width: 8px;
    height: 8px;
    left: 30px;
    bottom: 8px;
    animation-delay: -2s;
}

.vaybe-sidebar .foam-zone span:nth-child(5) {
    width: 12px;
    height: 12px;
    left: 37px;
    bottom: 1px;
    animation-delay: -.4s;
}

.vaybe-sidebar .foam-zone span:nth-child(6) {
    width: 6px;
    height: 6px;
    left: 23px;
    bottom: 15px;
    animation-delay: -1.6s;
}


/* =========================================================
   ŞÖMİNE
   ========================================================= */

.vaybe-sidebar .vaybe-fireplace {
    position: absolute !important;

    display: block !important;

    left: 50%;
    bottom: 2px;

    width: 78px;
    height: 37px;

    transform:
        translateX(-50%);

    z-index: 10;

    pointer-events: none;
}


.vaybe-sidebar .fire-glow {
    position: absolute;

    left: 50%;
    bottom: -2px;

    width: 80px;
    height: 33px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,151,41,.32),
            rgba(255,71,16,.12) 44%,
            transparent 73%
        );

    filter: blur(8px);

    animation:
        fireGlow 1.1s ease-in-out infinite alternate;
}


.vaybe-sidebar .fire-base {
    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 49px;
    height: 5px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e64a19,
            #ffb13b,
            #fff0a4,
            #ff8d2d,
            transparent
        );

    box-shadow:
        0 0 7px rgba(255,97,24,.38);
}


/* =========================================================
   ALEVLERE GARANTİLİ GÖRÜNÜRLÜK
   ========================================================= */

.vaybe-sidebar .flames {
    position: absolute;
    inset: 0;

    display: block !important;
}


.vaybe-sidebar .flame {
    position: absolute !important;

    display: block !important;

    bottom: 7px;

    opacity: .85;

    transform-origin:
        50% 100%;

    border-radius:
        70% 25% 70% 35%;

    background:
        linear-gradient(
            180deg,
            #fff1a3 0%,
            #ffc14f 25%,
            #ff7b25 57%,
            rgba(255,50,12,.50) 82%,
            transparent 100%
        );

    filter:
        drop-shadow(0 0 3px rgba(255,103,24,.45));
}


.vaybe-sidebar .flame-1 {
    left: 18px;
    width: 8px;
    height: 20px;

    animation:
        flameA .75s ease-in-out infinite alternate;
}


.vaybe-sidebar .flame-2 {
    left: 27px;
    width: 11px;
    height: 29px;

    animation:
        flameB .62s ease-in-out infinite alternate;
}


.vaybe-sidebar .flame-3 {
    left: 38px;
    width: 9px;
    height: 24px;

    animation:
        flameC .72s ease-in-out infinite alternate;
}


.vaybe-sidebar .flame-4 {
    left: 11px;
    width: 7px;
    height: 14px;

    opacity: .62;

    animation:
        flameB .9s ease-in-out infinite alternate-reverse;
}


.vaybe-sidebar .flame-5 {
    left: 48px;
    width: 7px;
    height: 16px;

    opacity: .65;

    animation:
        flameA .84s ease-in-out infinite alternate-reverse;
}


/* =========================================================
   KÖZLER
   ========================================================= */

.vaybe-sidebar .ember {
    position: absolute;

    display: block !important;

    bottom: 2px;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: #ffd36b;

    box-shadow:
        0 0 5px #ff7729;

    animation:
        emberRise 2.1s ease-out infinite;
}


.vaybe-sidebar .ember-1 {
    left: 8px;
    animation-delay: -.3s;
}

.vaybe-sidebar .ember-2 {
    left: 18px;
    animation-delay: -1.2s;
}

.vaybe-sidebar .ember-3 {
    right: 13px;
    animation-delay: -.7s;
}

.vaybe-sidebar .ember-4 {
    right: 4px;
    animation-delay: -1.7s;
}


/* =========================================================
   SU HALKALARI
   ========================================================= */

.vaybe-sidebar .logo-water-floor {
    position: absolute;

    display: block !important;

    left: 50%;
    bottom: -1px;

    width: 155px;
    height: 30px;

    transform:
        translateX(-50%);

    z-index: 8;

    pointer-events: none;
}


.vaybe-sidebar .water-ring {
    position: absolute;

    display: block !important;

    left: 50%;
    top: 50%;

    width: 18px;
    height: 5px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(90,235,255,.32);

    border-radius: 50%;

    opacity: 0;

    animation:
        poolRing 3.8s ease-out infinite;
}


.vaybe-sidebar .ring-2 {
    animation-delay: -1.25s;
}

.vaybe-sidebar .ring-3 {
    animation-delay: -2.5s;
}


/* =========================================================
   FLOATING HARFLER
   ========================================================= */

@keyframes floatV {
    0%,100% {
        transform:
            translate3d(0,1px,8px)
            rotateZ(-3deg)
            rotateY(-6deg);
    }

    28% {
        transform:
            translate3d(-3px,-6px,16px)
            rotateZ(1deg)
            rotateY(5deg);
    }

    58% {
        transform:
            translate3d(2px,-1px,4px)
            rotateZ(-1deg)
            rotateY(-3deg);
    }

    80% {
        transform:
            translate3d(-1px,4px,11px)
            rotateZ(2deg)
            rotateY(4deg);
    }
}


@keyframes floatA {
    0%,100% {
        transform:
            translate3d(0,-3px,5px)
            rotateZ(2deg)
            rotateY(4deg);
    }

    32% {
        transform:
            translate3d(3px,4px,13px)
            rotateZ(-2deg)
            rotateY(-5deg);
    }

    67% {
        transform:
            translate3d(-2px,-6px,8px)
            rotateZ(1deg)
            rotateY(5deg);
    }
}


@keyframes floatY {
    0%,100% {
        transform:
            translate3d(0,3px,10px)
            rotateZ(-1deg)
            rotateY(-4deg);
    }

    35% {
        transform:
            translate3d(-2px,-6px,3px)
            rotateZ(2deg)
            rotateY(6deg);
    }

    69% {
        transform:
            translate3d(3px,0,15px)
            rotateZ(-2deg)
            rotateY(-4deg);
    }
}


@keyframes floatB {
    0%,100% {
        transform:
            translate3d(0,-1px,13px)
            rotateZ(1deg)
            rotateY(5deg);
    }

    29% {
        transform:
            translate3d(3px,-6px,4px)
            rotateZ(-2deg)
            rotateY(-5deg);
    }

    72% {
        transform:
            translate3d(-3px,4px,10px)
            rotateZ(2deg)
            rotateY(4deg);
    }
}


@keyframes floatE {
    0%,100% {
        transform:
            translate3d(0,2px,6px)
            rotateZ(-2deg)
            rotateY(-5deg);
    }

    34% {
        transform:
            translate3d(-3px,5px,14px)
            rotateZ(2deg)
            rotateY(6deg);
    }

    68% {
        transform:
            translate3d(3px,-6px,4px)
            rotateZ(-1deg)
            rotateY(-3deg);
    }
}


/* =========================================================
   ORGANİK BALON DEFORMASYONLARI
   ========================================================= */

@keyframes squeezeV {
    0%,17%,38%,100% {
        transform:
            scaleX(1)
            scaleY(1)
            skew(0);
    }

    22% {
        transform:
            scaleX(.82)
            scaleY(1.13)
            skewX(-3deg);
    }

    27% {
        transform:
            scaleX(1.16)
            scaleY(.88)
            skewX(2deg);
    }

    32% {
        transform:
            scaleX(.96)
            scaleY(1.04);
    }

    35% {
        transform:
            scaleX(1.02)
            scaleY(.99);
    }
}


@keyframes squeezeA {
    0%,34%,57%,100% {
        transform:
            scaleX(1)
            scaleY(1);
    }

    40% {
        transform:
            scaleX(1.16)
            scaleY(.85)
            skewY(3deg);
    }

    46% {
        transform:
            scaleX(.86)
            scaleY(1.15)
            skewY(-2deg);
    }

    51% {
        transform:
            scaleX(1.05)
            scaleY(.96);
    }
}


@keyframes squeezeY {
    0%,54%,79%,100% {
        transform:
            scaleX(1)
            scaleY(1);
    }

    60% {
        transform:
            scaleX(.82)
            scaleY(1.16)
            rotate(-2deg);
    }

    66% {
        transform:
            scaleX(1.17)
            scaleY(.86)
            rotate(2deg);
    }

    72% {
        transform:
            scaleX(.96)
            scaleY(1.04);
    }
}


@keyframes squeezeB {
    0%,20%,45%,100% {
        transform:
            scaleX(1)
            scaleY(1);
    }

    26% {
        transform:
            scaleX(1.15)
            scaleY(.87)
            skewX(3deg);
    }

    32% {
        transform:
            scaleX(.85)
            scaleY(1.15)
            skewX(-2deg);
    }

    38% {
        transform:
            scaleX(1.05)
            scaleY(.96);
    }
}


@keyframes squeezeE {
    0%,67%,91%,100% {
        transform:
            scaleX(1)
            scaleY(1);
    }

    73% {
        transform:
            scaleX(.85)
            scaleY(1.15)
            skewY(-3deg);
    }

    79% {
        transform:
            scaleX(1.16)
            scaleY(.87)
            skewY(2deg);
    }

    85% {
        transform:
            scaleX(.96)
            scaleY(1.04);
    }
}


/* =========================================================
   CHROME
   ========================================================= */

@keyframes chromeFlow {
    from {
        background-position:
            220% center;
    }

    to {
        background-position:
            -30% center;
    }
}


/* =========================================================
   HARF PARLAMASI
   ========================================================= */

@keyframes letterSweep {
    0%,16% {
        left: -12px;
        opacity: 0;
    }

    27% {
        opacity: .65;
    }

    52% {
        left: 82%;
        opacity: .28;
    }

    65%,100% {
        left: 110%;
        opacity: 0;
    }
}


/* =========================================================
   BALONCUKLAR
   ========================================================= */

@keyframes riseBubble {
    0% {
        transform:
            translate3d(0,0,0)
            scale(.55);

        opacity: 0;
    }

    10% {
        opacity: .52;
    }

    30% {
        transform:
            translate3d(5px,-42px,0)
            scale(.78);
    }

    55% {
        transform:
            translate3d(-5px,-83px,0)
            scale(.95);
    }

    78% {
        transform:
            translate3d(4px,-122px,0)
            scale(1.05);

        opacity: .42;
    }

    94% {
        transform:
            translate3d(-2px,-150px,0)
            scale(1.1);

        opacity: .25;
    }

    97% {
        transform:
            translate3d(-2px,-151px,0)
            scale(1.55);

        opacity: .10;
    }

    100% {
        transform:
            translate3d(-2px,-152px,0)
            scale(1.9);

        opacity: 0;
    }
}


/* =========================================================
   KÖPÜK
   ========================================================= */

@keyframes foamMotion {
    0%,100% {
        transform:
            scale(.86)
            translateY(2px);

        opacity: .28;
    }

    50% {
        transform:
            scale(1.14)
            translateY(-2px);

        opacity: .60;
    }
}


/* =========================================================
   ALEV
   ========================================================= */

@keyframes flameA {
    from {
        transform:
            scaleX(.78)
            scaleY(.83)
            rotate(-8deg);

        opacity: .55;
    }

    to {
        transform:
            scaleX(1.10)
            scaleY(1.18)
            rotate(6deg);

        opacity: .95;
    }
}


@keyframes flameB {
    from {
        transform:
            scaleX(1.10)
            scaleY(.75)
            rotate(6deg);

        opacity: .67;
    }

    to {
        transform:
            scaleX(.80)
            scaleY(1.22)
            rotate(-7deg);

        opacity: 1;
    }
}


@keyframes flameC {
    from {
        transform:
            scaleX(.78)
            scaleY(1.08)
            rotate(-6deg);
    }

    to {
        transform:
            scaleX(1.12)
            scaleY(.83)
            rotate(8deg);
    }
}


@keyframes fireGlow {
    from {
        transform:
            translateX(-50%)
            scale(.84);

        opacity: .55;
    }

    to {
        transform:
            translateX(-50%)
            scale(1.16);

        opacity: 1;
    }
}


@keyframes emberRise {
    0% {
        transform:
            translate(0,0)
            scale(.8);

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    65% {
        transform:
            translate(4px,-18px)
            scale(.55);

        opacity: .50;
    }

    100% {
        transform:
            translate(-4px,-31px)
            scale(.1);

        opacity: 0;
    }
}


@keyframes warmReflection {
    from {
        transform: scaleX(.82);
        opacity: .35;
    }

    to {
        transform: scaleX(1.18);
        opacity: .78;
    }
}


/* =========================================================
   SU
   ========================================================= */

@keyframes poolRing {
    0% {
        width: 16px;
        height: 4px;
        opacity: 0;
    }

    17% {
        opacity: .42;
    }

    100% {
        width: 145px;
        height: 26px;
        opacity: 0;
    }
}


@keyframes vaybeWaterFloor {
    from {
        transform:
            rotateX(66deg)
            scaleX(.92);
    }

    to {
        transform:
            rotateX(66deg)
            scaleX(1.08);
    }
}


@keyframes waterLine1 {
    0%,100% {
        transform:
            translateX(-5px)
            scaleX(.65);

        opacity: .13;
    }

    50% {
        transform:
            translateX(9px)
            scaleX(1.15);

        opacity: .38;
    }
}


@keyframes waterLine2 {
    0%,100% {
        transform:
            translateX(8px)
            scaleX(.72);

        opacity: .12;
    }

    50% {
        transform:
            translateX(-9px)
            scaleX(1.17);

        opacity: .34;
    }
}


@keyframes waterLine3 {
    0%,100% {
        transform: scaleX(.5);
        opacity: .07;
    }

    50% {
        transform: scaleX(1.35);
        opacity: .24;
    }
}


/* =========================================================
   DİĞER ORTAM ANİMASYONLARI
   ========================================================= */

@keyframes cyanPoolMove {
    from {
        transform:
            translate(-8px,5px)
            scale(.86);
    }

    to {
        transform:
            translate(24px,-4px)
            scale(1.18);
    }
}


@keyframes pinkPoolMove {
    from {
        transform:
            translate(10px,-3px)
            scale(.88);
    }

    to {
        transform:
            translate(-21px,6px)
            scale(1.16);
    }
}


@keyframes vaybeParkTwinkle {
    from {
        opacity: .22;
        transform: translateY(2px);
    }

    to {
        opacity: .55;
        transform: translateY(-2px);
    }
}


@keyframes mistOne {
    0%,100% {
        transform:
            translateX(-20px)
            scaleX(.75);

        opacity: .12;
    }

    50% {
        transform:
            translateX(100px)
            scaleX(1.35);

        opacity: .32;
    }
}


@keyframes mistTwo {
    0%,100% {
        transform:
            translateX(25px)
            scaleX(.85);

        opacity: .10;
    }

    50% {
        transform:
            translateX(-90px)
            scaleX(1.3);

        opacity: .27;
    }
}


@keyframes livePulse {
    0%,100% {
        transform: scale(.72);
        opacity: .55;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}


/* =========================================================
   HOVER — SADECE LOGO SAHNESİ
   ========================================================= */

.vaybe-sidebar .vaybe-logo-stage:hover .vaybe-letter {
    filter:
        drop-shadow(0 9px 6px rgba(0,0,0,.62))
        drop-shadow(0 0 8px rgba(74,232,255,.13));
}


.vaybe-sidebar .vaybe-logo-stage:hover .vaybe-bubbles .bubble {
    animation-duration: 4.4s;
}


/* =========================================================
   KISA EKRAN
   ========================================================= */

@media (max-height: 900px) {

    .vaybe-sidebar .vaybe-logo-stage {
        height: 150px !important;
        min-height: 150px !important;
    }

    .vaybe-sidebar .vaybe-floating-logo {
        top: 41% !important;
        gap: 4px !important;
    }

    .vaybe-sidebar .vaybe-letter {
        width: 24px !important;
        height: 50px !important;
    }

    .vaybe-sidebar .letter-v {
        width: 34px !important;
    }

    .vaybe-sidebar .vaybe-letter .letter-body {
        font-size: 41px !important;
    }

    .vaybe-sidebar .vaybe-live-mini {
        top: 67% !important;
    }

    .vaybe-sidebar .vaybe-fireplace {
        transform:
            translateX(-50%)
            scale(.82);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vaybe-sidebar .vaybe-letter,
    .vaybe-sidebar .letter-body,
    .vaybe-sidebar .letter-light,
    .vaybe-sidebar .vaybe-bubbles .bubble,
    .vaybe-sidebar .foam-zone span,
    .vaybe-sidebar .flame,
    .vaybe-sidebar .ember,
    .vaybe-sidebar .fire-glow,
    .vaybe-sidebar .water-ring,
    .vaybe-sidebar .pool-glow,
    .vaybe-sidebar .vaybe-mist {
        animation: none !important;
    }
}