/* =========================================================
   TURWELTBAND — ОСНОВНОЙ СТИЛЬ
   ========================================================= */


/* =========================================================
   ОСНОВНЫЕ НАСТРОЙКИ
   ========================================================= */

* {

    box-sizing: border-box;

}


html {

    min-height: 100%;

}


body {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            #211927 0%,
            #121117 45%,
            #09090d 100%
        );

    color: #f2edf4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    position: relative;

    overflow-x: hidden;

}


/* =========================================================
   CRT — СКАНЛАЙНЫ
   ========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 9999;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 0.35;

}


/* =========================================================
   CRT — ВИНЬЕТКА
   ========================================================= */

body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 9998;

    background:
        radial-gradient(
            ellipse at center,
            transparent 55%,
            rgba(0,0,0,0.35) 100%
        );

}


/* =========================================================
   CRT — ЛЁГКОЕ СВЕЧЕНИЕ ЭКРАНА
   ========================================================= */

body {

    text-shadow:
        0 0 0.5px rgba(255,255,255,0.18);

}


/* =========================================================
   ССЫЛКИ
   ========================================================= */

a {

    color: #f2edf4;

    text-decoration: none;

}


a:hover {

    color: #d59ae0;

}


/* =========================================================
   ОСНОВНОЙ КОНТЕНТ
   ========================================================= */

main {

    position: relative;

    z-index: 1;

}


/* =========================================================
   TURWELTBAND TV HEADER
   ========================================================= */

header {

    min-height: 86px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 14px 40px;

    background:

        linear-gradient(
            180deg,
            #242027 0%,
            #17151b 100%
        );

    border-bottom:
        2px solid
        rgba(117,64,128,0.75);

    box-shadow:

        0 4px 0
        rgba(0,0,0,0.35),

        0 8px 25px
        rgba(0,0,0,0.35),

        inset 0 -1px 0
        rgba(255,255,255,0.04);

    position: relative;

    z-index: 10;

}


/* =========================================================
   CRT — ШУМ В ШАПКЕ
   ========================================================= */

header::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.018) 0px,
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 3px
        );

    opacity: 0.45;

}


/* =========================================================
   НИЖНЯЯ ЛИНИЯ ЭКРАНА
   ========================================================= */

header::after {

    content: "";

    position: absolute;

    left: 18px;

    right: 18px;

    bottom: -5px;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(117,64,128,0.6),
            rgba(213,154,224,0.8),
            rgba(117,64,128,0.6),
            transparent
        );

    opacity: 0.6;

}


/* =========================================================
   БРЕНД
   ========================================================= */

.tvBrand {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;

}


/* =========================================================
   ЛОГОТИП
   ========================================================= */

.logo {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 155px;

    height: 58px;

    text-decoration: none;

    flex-shrink: 0;

}


.logo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    filter:

        drop-shadow(
            0 0 5px
            rgba(117,64,128,0.6)
        )

        drop-shadow(
            0 0 12px
            rgba(117,64,128,0.25)
        );

    transition:

        filter 0.2s,

        transform 0.2s;

}


.logo:hover img {

    filter:

        drop-shadow(
            2px 0 0
            rgba(255,63,164,0.35)
        )

        drop-shadow(
            -2px 0 0
            rgba(55,247,255,0.3)
        )

        drop-shadow(
            0 0 12px
            rgba(166,91,181,0.75)
        );

    transform:
        translateY(-1px);

}


/* =========================================================
   ON AIR
   ========================================================= */

.tvStatus {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 4px 7px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 4px;

    color: #88828b;

    font-size: 9px;

    letter-spacing: 1.5px;

    white-space: nowrap;

}


.statusLight {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #ff3fa4;

    box-shadow:

        0 0 5px
        rgba(255,63,164,0.9),

        0 0 10px
        rgba(255,63,164,0.45);

    animation:
        tvStatusBlink 2.5s infinite;

}


@keyframes tvStatusBlink {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: 0.35;

    }

}


/* =========================================================
   ПЕРЕКЛЮЧАТЕЛЬ КАНАЛОВ
   ========================================================= */

.channelNav {

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 6px;

    flex: 1;

}


.channelButton {

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 42px;

    padding: 6px 12px;

    background:
        #141218;

    border:
        1px solid
        rgba(117,64,128,0.45);

    border-radius: 5px;

    color: #aaa3ad;

    text-decoration: none;

    box-shadow:

        inset 0 0 8px
        rgba(0,0,0,0.35),

        0 2px 0
        rgba(0,0,0,0.4);

    transition:

        background 0.2s,

        border-color 0.2s,

        color 0.2s,

        transform 0.15s,

        box-shadow 0.2s;

}


.channelButton:hover {

    color: #f5edf7;

    background:
        #211a25;

    border-color:
        #a65bb5;

    box-shadow:

        inset 0 0 10px
        rgba(117,64,128,0.15),

        0 0 8px
        rgba(117,64,128,0.25);

    transform:
        translateY(-1px);

}


.channelButton:active {

    transform:
        translateY(1px);

    box-shadow:

        inset 0 2px 5px
        rgba(0,0,0,0.5);

}


/* =========================================================
   НОМЕР КАНАЛА
   ========================================================= */

.channelNumber {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 23px;

    height: 21px;

    padding: 0 4px;

    background:
        #754080;

    border-radius: 3px;

    color: white;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    font-weight: bold;

    box-shadow:

        0 0 6px
        rgba(117,64,128,0.35);

}


/* =========================================================
   НАЗВАНИЕ КАНАЛА
   ========================================================= */

.channelName {

    font-size: 14px;

    white-space: nowrap;

}


/* =========================================================
   СИСТЕМНЫЕ ДЕЙСТВИЯ
   ========================================================= */

.headerActions {

    display: flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;

}


.favoritesLink,
.cartButton {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 42px;

    padding: 6px 10px;

    background:
        #141218;

    border:
        1px solid
        rgba(117,64,128,0.45);

    border-radius: 5px;

    color: #cfc7d2;

    text-decoration: none;

    box-shadow:

        inset 0 0 8px
        rgba(0,0,0,0.3),

        0 2px 0
        rgba(0,0,0,0.35);

    transition:

        color 0.2s,

        border-color 0.2s,

        background 0.2s,

        box-shadow 0.2s,

        transform 0.15s;

}


.favoritesLink:hover {

    color: #ff7cbc;

    background:
        #21161e;

    border-color:
        rgba(255,63,164,0.55);

    box-shadow:

        0 0 8px
        rgba(255,63,164,0.15);

    transform:
        translateY(-1px);

}


.cartButton:hover {

    color: white;

    background:
        #211a25;

    border-color:
        #a65bb5;

    box-shadow:

        0 0 8px
        rgba(166,91,181,0.25);

    transform:
        translateY(-1px);

}


.favoritesLink:active,
.cartButton:active {

    transform:
        translateY(1px);

}


/* =========================================================
   ИКОНКИ
   ========================================================= */

.headerIcon {

    font-size: 17px;

    line-height: 1;

}


/* =========================================================
   СЧЁТЧИКИ
   ========================================================= */

.headerCounter {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 19px;

    height: 19px;

    padding: 0 5px;

    border-radius: 4px;

    background:
        #754080;

    color: white;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    font-weight: bold;

    box-shadow:

        0 0 6px
        rgba(117,64,128,0.35);

}


.cartCounter {

    background:
        #ff3fa4;

    box-shadow:

        0 0 7px
        rgba(255,63,164,0.4);

}


/* =========================================================
   ЛЁГКИЙ GLITCH ПРИ НАВЕДЕНИИ
   ========================================================= */

/*
    Не делаем полноценный RGB-glitch постоянно.
    Он появляется только на интерактивных элементах,
    чтобы сайт оставался удобным для чтения.
*/

.channelButton:hover .channelNumber,
.logo:hover img {

    animation:
        tvGlitch 0.18s steps(2, end);

}


@keyframes tvGlitch {

    0% {

        transform:
            translate(0, 0);

    }

    35% {

        transform:
            translate(-1px, 1px);

    }

    70% {

        transform:
            translate(1px, -1px);

    }

    100% {

        transform:
            translate(0, 0);

    }

}


/* =========================================================
   CRT — РЕДКИЙ СКАЧОК СИГНАЛА
   ========================================================= */

@keyframes tvSignal {

    0%,
    96%,
    100% {

        filter:
            brightness(1);

    }

    97% {

        filter:
            brightness(1.08);

    }

    98% {

        filter:
            brightness(0.96);

    }

}


header,
main,
footer {

    animation:
        tvSignal 9s infinite;

}


/* =========================================================
   CRT — ФОСФОРНОЕ СВЕЧЕНИЕ
   ========================================================= */

.tvBrand,
.channelNav,
.headerActions {

    filter:
        drop-shadow(
            0 0 0.5px
            rgba(255,63,164,0.18)
        );

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

    margin-top: 50px;

    padding: 30px;

    text-align: center;

    color: #77727a;

    border-top:
        1px solid
        rgba(117,64,128,0.2);

    position: relative;

    z-index: 1;

}


footer::before {

    content: "";

    position: absolute;

    left: 15%;

    right: 15%;

    top: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,63,164,0.35),
            rgba(55,247,255,0.35),
            rgba(255,63,164,0.35),
            transparent
        );

    opacity: 0.7;

}


/* =========================================================
   КНОПКИ
   ========================================================= */

button {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 800px) {

    header {

        min-height: 80px;

        padding: 10px 15px;

        flex-wrap: wrap;

        gap: 10px;

    }


    .tvBrand {

        gap: 8px;

    }


    .logo {

        width: 125px;

        height: 48px;

    }


    .tvStatus {

        display: none;

    }


    .channelNav {

        order: 3;

        width: 100%;

        flex: none;

        justify-content: flex-start;

        overflow-x: auto;

        padding-bottom: 2px;

        scrollbar-width: none;

    }


    .channelNav::-webkit-scrollbar {

        display: none;

    }


    .channelButton {

        flex-shrink: 0;

        min-height: 38px;

        padding: 5px 9px;

    }


    .channelName {

        font-size: 13px;

    }


    .channelNumber {

        min-width: 21px;

        height: 19px;

        font-size: 9px;

    }


    .headerActions {

        margin-left: auto;

        gap: 5px;

    }


    .headerActionText {

        display: none;

    }


    .favoritesLink,
    .cartButton {

        min-width: 39px;

        min-height: 38px;

        justify-content: center;

        padding: 5px 7px;

    }


    .headerIcon {

        font-size: 16px;

    }

}


/* =========================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 480px) {

    header {

        padding: 9px 10px;

    }


    .logo {

        width: 110px;

        height: 43px;

    }


    .headerActions {

        gap: 4px;

    }


    .favoritesLink,
    .cartButton {

        min-width: 36px;

        min-height: 36px;

        padding: 5px;

    }


    .channelButton {

        padding: 5px 8px;

    }


    .channelName {

        font-size: 12px;

    }


    .channelNumber {

        min-width: 20px;

        height: 18px;

        font-size: 9px;

    }

}


/* =========================================================
   ДОСТУПНОСТЬ
   ========================================================= */

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

    *,

    *::before,

    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}