/* =========================================================
   VAYBE LIVE — SIDEBAR
   PREMIUM CONTROL CENTER
   SADECE SOL PANEL
   ========================================================= */


/* =========================================================
   SIDEBAR ANA GÖVDE
   ========================================================= */

.vaybe-sidebar {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 8px 7px 8px;

    overflow: hidden;

    color: #eefcff;

    background:
        radial-gradient(
            circle at 20% 8%,
            rgba(37, 244, 238, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 84%,
            rgba(254, 44, 85, .07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #07131c 0%,
            #07111a 32%,
            #060d15 66%,
            #080b14 100%
        );

    border-right:
        1px solid rgba(113, 224, 255, .11);

    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.025),
        10px 0 40px rgba(0,0,0,.22);

    isolation: isolate;
}


/* ince iç çerçeve */

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

    position: absolute;
    inset: 5px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,.035);

    pointer-events: none;

    z-index: 50;
}


/* çok hafif tarama dokusu */

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

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .11;

    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 4px
        );

    mix-blend-mode: overlay;

    z-index: 45;
}


/* =========================================================
   LOGO ALANI
   Gerçek logo animasyonu sidebar-logo.css'te olacak
   ========================================================= */

.vaybe-logo-stage {
    position: relative;

    width: 100%;
    height: 178px;
    min-height: 178px;
    flex: 0 0 178px;

    margin-bottom: 6px;

    overflow: hidden;

    border-radius: 11px;

    background:
        radial-gradient(
            ellipse at 50% 82%,
            rgba(0, 200, 255, .13),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 15% 30%,
            rgba(37,244,238,.08),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 86% 28%,
            rgba(254,44,85,.075),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(8,25,35,.92),
            rgba(5,15,23,.96)
        );

    border:
        1px solid rgba(117,225,255,.08);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -25px 50px rgba(0,0,0,.20),
        0 8px 20px rgba(0,0,0,.15);

    contain: layout paint;
}


/* =========================================================
   CONTROL CENTER BAŞLIK
   ========================================================= */

.sidebar-control-title {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    min-height: 29px;

    padding: 2px 7px 6px;

    z-index: 10;
}


.control-title-left {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.control-title-left strong {
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 7px;
    line-height: 1.15;

    font-weight: 900;

    letter-spacing: 1.55px;

    color: rgba(226,248,255,.92);
}


.control-title-left span {
    margin-top: 2px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 5px;

    font-weight: 700;

    letter-spacing: 1.1px;

    color: rgba(103,151,169,.72);
}


.control-online-dot {
    position: relative;

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #38ffc8;

    box-shadow:
        0 0 5px rgba(56,255,200,.85),
        0 0 11px rgba(56,255,200,.38);
}


.control-online-dot::after {
    content: "";

    position: absolute;
    inset: -4px;

    border-radius: 50%;

    border:
        1px solid rgba(56,255,200,.18);

    animation:
        vaybeOnlinePulse 2.1s ease-out infinite;
}


/* =========================================================
   MENÜ
   ========================================================= */

.vaybe-menu {
    position: relative;

    width: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;

    flex: 1 1 auto;

    z-index: 12;
}


/* =========================================================
   MENÜ KARTI
   ========================================================= */

.vaybe-menu-item {
    position: relative;

    width: 100%;
    min-width: 0;

    height: 47px;
    min-height: 47px;

    display: grid;

    grid-template-columns:
        35px
        minmax(0, 1fr)
        16px;

    align-items: center;

    gap: 7px;

    padding:
        0
        8px
        0
        6px;

    overflow: hidden;

    appearance: none;

    border:
        1px solid rgba(126,198,220,.065);

    border-radius: 8px;

    outline: none;

    cursor: pointer;

    color: rgba(221,243,250,.78);

    background:
        linear-gradient(
            100deg,
            rgba(13,30,42,.78),
            rgba(8,18,28,.70)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 4px 10px rgba(0,0,0,.10);

    transition:
        transform .24s ease,
        border-color .24s ease,
        background .24s ease,
        box-shadow .24s ease,
        color .24s ease;
}


/* ışık süpürmesi */

.vaybe-menu-item::before {
    content: "";

    position: absolute;

    top: -50%;
    left: -55%;

    width: 45%;
    height: 200%;

    opacity: 0;

    transform:
        rotate(17deg)
        translateX(-160%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transition:
        transform .6s ease,
        opacity .25s ease;

    pointer-events: none;
}


/* aktif sol neon çizgi */

.vaybe-menu-item::after {
    content: "";

    position: absolute;

    left: 0;
    top: 9px;
    bottom: 9px;

    width: 2px;

    border-radius:
        0
        4px
        4px
        0;

    opacity: 0;

    transform:
        scaleY(.35);

    background:
        linear-gradient(
            180deg,
            #25f4ee,
            #63d8ff
        );

    box-shadow:
        0 0 8px rgba(37,244,238,.8),
        0 0 16px rgba(37,244,238,.32);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.vaybe-menu-item:hover {
    color: #f3fdff;

    transform:
        translateX(2px);

    border-color:
        rgba(74,223,255,.18);

    background:
        linear-gradient(
            100deg,
            rgba(13,42,55,.88),
            rgba(8,23,34,.82)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 5px 15px rgba(0,0,0,.15),
        0 0 14px rgba(37,244,238,.025);
}


.vaybe-menu-item:hover::before {
    opacity: 1;

    transform:
        rotate(17deg)
        translateX(470%);
}


.vaybe-menu-item.active {
    color: #f4feff;

    border-color:
        rgba(57,229,255,.22);

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(37,244,238,.12),
            transparent 45%
        ),
        linear-gradient(
            100deg,
            rgba(10,44,57,.94),
            rgba(8,24,35,.86)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 10px 0 25px rgba(37,244,238,.035),
        0 5px 16px rgba(0,0,0,.16);
}


.vaybe-menu-item.active::after {
    opacity: 1;

    transform:
        scaleY(1);
}


/* =========================================================
   MENÜ İKONLARI
   ========================================================= */

.menu-icon {
    position: relative;

    width: 29px;
    height: 29px;

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

    border-radius: 7px;

    color: rgba(173,211,222,.76);

    background:
        linear-gradient(
            145deg,
            rgba(18,41,54,.88),
            rgba(7,18,27,.92)
        );

    border:
        1px solid rgba(131,211,232,.075);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.menu-icon svg {
    width: 12px;
    height: 12px;

    display: block;

    fill: currentColor;
}


.vaybe-menu-item:hover .menu-icon,
.vaybe-menu-item.active .menu-icon {
    color: #dfffff;

    border-color:
        rgba(37,244,238,.20);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 10px rgba(37,244,238,.075);
}


.vaybe-menu-item:hover .menu-icon {
    transform:
        translateY(-1px)
        scale(1.035);
}


/* =========================================================
   MENÜ YAZILARI
   ========================================================= */

.menu-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    text-align: left;
}


.menu-copy strong {
    max-width: 100%;

    overflow: hidden;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 7.4px;

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: .82px;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: inherit;
}


.menu-copy small {
    max-width: 100%;

    margin-top: 2px;

    overflow: hidden;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 5.2px;

    line-height: 1.2;

    font-weight: 650;

    letter-spacing: .75px;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: rgba(92,140,156,.66);
}


.vaybe-menu-item.active .menu-copy small {
    color:
        rgba(80,205,220,.72);
}


/* =========================================================
   SAĞ OK / DURUM
   ========================================================= */

.menu-arrow {
    justify-self: end;

    font-size: 13px;

    line-height: 1;

    color: rgba(109,151,165,.46);

    transition:
        transform .25s ease,
        color .25s ease;
}


.vaybe-menu-item:hover .menu-arrow {
    transform:
        translateX(2px);

    color:
        rgba(87,234,247,.82);
}


.menu-status {
    position: relative;

    justify-self: end;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #25f4ee;

    box-shadow:
        0 0 6px rgba(37,244,238,.9),
        0 0 12px rgba(37,244,238,.32);
}


/* =========================================================
   ENGINE STATUS
   ========================================================= */

.vaybe-engine-status {
    position: relative;

    width: 100%;

    flex: 0 0 auto;

    margin-top: 7px;

    padding:
        8px
        8px
        7px;

    overflow: hidden;

    border-radius: 9px;

    background:
        radial-gradient(
            circle at 7% 20%,
            rgba(37,244,238,.08),
            transparent 40%
        ),
        linear-gradient(
            120deg,
            rgba(7,27,37,.96),
            rgba(6,17,26,.96)
        );

    border:
        1px solid rgba(91,210,232,.10);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 6px 15px rgba(0,0,0,.15);

    z-index: 12;
}


.vaybe-engine-status::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    left: -45px;
    top: -52px;

    border-radius: 50%;

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

    filter:
        blur(30px);

    pointer-events: none;
}


.engine-status-head {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 5px;

    z-index: 2;
}


.engine-status-head > div {
    display: flex;
    flex-direction: column;
}


.engine-status-head strong {
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 6.6px;

    font-weight: 900;

    letter-spacing: 1.05px;

    color: rgba(211,249,249,.92);
}


.engine-status-head span {
    margin-top: 2px;

    font-size: 4.8px;

    font-weight: 800;

    letter-spacing: .85px;

    color: rgba(56,255,200,.68);
}


.engine-percent {
    font-size: 7px !important;

    letter-spacing: .3px !important;

    color: #cffff5 !important;

    text-shadow:
        0 0 8px rgba(56,255,200,.20);
}


/* =========================================================
   ENGINE ANIMASYON ÇUBUKLARI
   ========================================================= */

.engine-bars {
    position: relative;

    height: 16px;

    margin:
        7px
        0
        5px;

    display: flex;
    align-items: flex-end;

    gap: 2px;

    z-index: 2;
}


.engine-bars span {
    display: block;

    width: 3px;
    height: 35%;

    border-radius:
        2px
        2px
        1px
        1px;

    background:
        linear-gradient(
            180deg,
            #6ffff0,
            #1faea9
        );

    box-shadow:
        0 0 4px rgba(37,244,238,.18);

    transform-origin:
        center bottom;

    animation:
        vaybeEngineBar 1.35s ease-in-out infinite;
}


.engine-bars span:nth-child(2) {
    animation-delay: -.12s;
}

.engine-bars span:nth-child(3) {
    animation-delay: -.45s;
}

.engine-bars span:nth-child(4) {
    animation-delay: -.26s;
}

.engine-bars span:nth-child(5) {
    animation-delay: -.68s;
}

.engine-bars span:nth-child(6) {
    animation-delay: -.34s;
}

.engine-bars span:nth-child(7) {
    animation-delay: -.82s;
}

.engine-bars span:nth-child(8) {
    animation-delay: -.18s;
}

.engine-bars span:nth-child(9) {
    animation-delay: -.55s;
}

.engine-bars span:nth-child(10) {
    animation-delay: -.75s;
}

.engine-bars span:nth-child(11) {
    animation-delay: -.29s;
}

.engine-bars span:nth-child(12) {
    animation-delay: -.61s;
}


/* =========================================================
   READY
   ========================================================= */

.engine-ready {
    position: relative;

    display: flex;
    align-items: center;

    gap: 5px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 4.9px;

    font-weight: 850;

    letter-spacing: .82px;

    color: rgba(115,158,170,.66);

    z-index: 2;
}


.engine-ready > span {
    width: 4px;
    height: 4px;

    flex: 0 0 4px;

    border-radius: 50%;

    background: #38ffc8;

    box-shadow:
        0 0 5px rgba(56,255,200,.8);
}


/* =========================================================
   SIDEBAR AMBIENT
   ========================================================= */

.sidebar-ambient {
    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(42px);

    opacity: .13;

    z-index: 0;
}


.sidebar-ambient-cyan {
    width: 120px;
    height: 160px;

    left: -85px;
    top: 32%;

    background: #25f4ee;

    animation:
        vaybeAmbientCyan 9s ease-in-out infinite alternate;
}


.sidebar-ambient-pink {
    width: 120px;
    height: 180px;

    right: -95px;
    bottom: 10%;

    background: #fe2c55;

    animation:
        vaybeAmbientPink 11s ease-in-out infinite alternate;
}


/* =========================================================
   ANIMASYONLAR
   ========================================================= */

@keyframes vaybeOnlinePulse {

    0% {
        transform: scale(.65);
        opacity: .7;
    }

    70% {
        transform: scale(1.55);
        opacity: 0;
    }

    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}


@keyframes vaybeEngineBar {

    0%,
    100% {
        height: 24%;
        opacity: .50;
    }

    25% {
        height: 78%;
        opacity: .90;
    }

    50% {
        height: 44%;
        opacity: .70;
    }

    75% {
        height: 100%;
        opacity: 1;
    }
}


@keyframes vaybeAmbientCyan {

    from {
        transform:
            translateY(-12px)
            scale(.9);
    }

    to {
        transform:
            translateY(30px)
            scale(1.12);
    }
}


@keyframes vaybeAmbientPink {

    from {
        transform:
            translateY(15px)
            scale(.95);
    }

    to {
        transform:
            translateY(-35px)
            scale(1.15);
    }
}


/* =========================================================
   1080P'DEN DAHA KISA EKRANLAR
   Menü taşmasın.
   ========================================================= */

@media (max-height: 900px) {

    .vaybe-logo-stage {
        height: 150px;
        min-height: 150px;
        flex-basis: 150px;
    }

    .vaybe-menu {
        gap: 4px;
    }

    .vaybe-menu-item {
        height: 42px;
        min-height: 42px;
    }

    .vaybe-engine-status {
        margin-top: 5px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

}


/* =========================================================
   ÇOK KISA EKRAN
   ========================================================= */

@media (max-height: 760px) {

    .vaybe-logo-stage {
        height: 125px;
        min-height: 125px;
        flex-basis: 125px;
    }

    .sidebar-control-title {
        min-height: 24px;
        padding-bottom: 4px;
    }

    .vaybe-menu-item {
        height: 36px;
        min-height: 36px;
    }

    .menu-icon {
        width: 25px;
        height: 25px;
    }

    .vaybe-engine-status {
        padding:
            5px
            7px;
    }

    .engine-bars {
        height: 10px;
        margin:
            4px
            0;
    }

}


/* =========================================================
   ERİŞİLEBİLİRLİK
   ========================================================= */

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

    .vaybe-menu-item,
    .menu-icon,
    .menu-arrow,
    .control-online-dot::after,
    .engine-bars span,
    .sidebar-ambient {
        animation: none !important;
        transition: none !important;
    }

}