/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;
}


body {
    overflow: hidden;

    font-family:
        "Inter",
        sans-serif;

    background: #efe3d1;

    color: #302218;
}


/* =========================================================
   ANA SAYFA
========================================================= */

.radio-page {
    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    display: flex;

    justify-content: center;
}


/* =========================================================
   ARKA PLAN
========================================================= */

.radio-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    /*
        KENDİ ARKA PLAN GÖRSELİNİN
        DOSYA ADINI BURADA KULLAN
    */

    background-image:
        url("images/radyo-arka-plan.png");

    background-size: cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}


/* =========================================================
   ARKA PLAN OVERLAY
========================================================= */

.radio-background-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(
                247,
                237,
                220,
                0.22
            ),

            rgba(
                247,
                237,
                220,
                0.08
            ) 45%,

            rgba(
                247,
                237,
                220,
                0.03
            ) 70%,

            rgba(
                247,
                237,
                220,
                0.06
            )
        );
}


/* =========================================================
   ANA İÇERİK
========================================================= */

.radio-page-content {
    position: relative;

    z-index: 5;

    width:
        min(
            1450px,
            94%
        );

    height: 100vh;

    padding:
        18px
        0
        14px;

    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    overflow: hidden;
}


/* =========================================================
   BAŞLIK
========================================================= */

.radio-heading {
    width: 100%;

    text-align: center;
}


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

.radio-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 6px;

    padding:
        6px
        14px;

    border-radius: 30px;

    background:
        rgba(
            231,
            202,
            166,
            0.78
        );

    border:
        1px solid
        rgba(
            143,
            76,
            31,
            0.10
        );

    color: #8f4b22;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;
}


.radio-badge i {
    font-size: 13px;
}


/* =========================================================
   ANA BAŞLIK
========================================================= */

.radio-heading h1 {
    margin:
        0
        0
        2px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            27px,
            2.5vw,
            41px
        );

    font-weight: 500;

    line-height: 1.05;

    color: #342318;
}


/* =========================================================
   ALT BAŞLIK
========================================================= */

.radio-heading p {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            12px,
            1.1vw,
            16px
        );

    color: #665548;
}


/* =========================================================
   BAŞLIK ÇİZGİSİ
========================================================= */

.heading-line {
    width: 52px;
    height: 2px;

    margin:
        8px
        auto
        0;

    border-radius: 20px;

    background: #a95424;
}


/* =========================================================
   RADYO ALANI
========================================================= */

.radio-machine-wrapper {
    width: 100%;
    height: 100%;

    min-height: 0;

    padding:
        7px
        0;

    display: flex;

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

    overflow: hidden;
}


/* =========================================================
   RADYO KASASI
========================================================= */

.retro-radio {
    position: relative;

    width:
        min(
            820px,
            68vw
        );

    max-height: 100%;

    aspect-ratio: 1.62 / 1;

    padding:
        4.5%
        4.5%
        3.5%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        4px
        solid
        #31271d;

    border-radius:
        9% / 13%;

    background:
        linear-gradient(
            135deg,

            #f2d89e 0%,

            #c8944e 17%,

            #efd39b 48%,

            #c18a43 76%,

            #efd5a0 100%
        );

    box-shadow:
        inset
        0
        0
        0
        5px
        rgba(
            255,
            255,
            255,
            0.28
        ),

        inset
        0
        0
        18px
        rgba(
            65,
            38,
            15,
            0.35
        ),

        0
        22px
        30px
        rgba(
            60,
            35,
            15,
            0.24
        );
}


/* =========================================================
   RADYO İÇ PANEL
========================================================= */

.retro-radio::before {
    content: "";

    position: absolute;

    inset:
        5%
        4.5%;

    z-index: 0;

    border-radius:
        7% / 10%;

    border:
        5px
        solid
        #29251f;

    background:
        linear-gradient(
            145deg,

            #d4cdc1,

            #a89f91 48%,

            #d7d0c5
        );

    box-shadow:
        inset
        0
        0
        0
        4px
        #655d52,

        inset
        0
        0
        20px
        rgba(
            0,
            0,
            0,
            0.22
        );
}


/* =========================================================
   HOPARLÖR
========================================================= */

.speaker-area {
    position: relative;

    z-index: 2;

    flex: 1;

    min-height: 0;

    margin:
        3%
        4%
        0;
}


.speaker-lines {
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content:
        space-evenly;

}


.speaker-lines span {
    display: block;

    width: 100%;

    height: 6px;

    border:
        1px
        solid
        #080808;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,

            #171717,

            #292929
        );

    box-shadow:
        0
        1px
        1px
        rgba(
            255,
            255,
            255,
            0.35
        );
}


/* =========================================================
   ALT KONTROL PANELİ
========================================================= */

.radio-control-panel {
    position: relative;

    z-index: 3;

    height: 36%;

    margin:
        1%
        4%
        1.5%;

    display: grid;

    grid-template-columns:
        21%
        1fr
        21%;

    gap: 2%;

    align-items: center;
}


/* =========================================================
   VOLUME / TUNING ALANI
========================================================= */

.control-side {
    height: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

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


/* =========================================================
   VOLUME / TUNING BAŞLIKLARI
========================================================= */

.control-title {
    margin-bottom: 3px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            10px,
            1vw,
            16px
        );

    font-weight: 800;

    color: #171512;
}


/* =========================================================
   DÜĞME WRAPPER
========================================================= */

.knob-wrapper {
    position: relative;

    width: 70%;

    aspect-ratio: 1;
}


/* =========================================================
   BÜYÜK METAL DÜĞMELER
========================================================= */

.radio-knob {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    border-radius: 50%;

    border:
        4px
        solid
        #171512;

    cursor: grab;

    touch-action: none;

    background:
        conic-gradient(
            from 10deg,

            #f7f2e7,

            #b6aa98,

            #fffaf0,

            #a59a89,

            #eee6d8,

            #c1b7a7,

            #fffaf0
        );

    box-shadow:
        0
        0
        0
        6px
        #b89156,

        0
        0
        0
        9px
        #29231d,

        inset
        0
        0
        12px
        rgba(
            0,
            0,
            0,
            0.20
        ),

        0
        4px
        8px
        rgba(
            0,
            0,
            0,
            0.30
        );

    transition:
        box-shadow
        0.2s
        ease;
}


.radio-knob:active {
    cursor: grabbing;

    box-shadow:
        0
        0
        0
        6px
        #b89156,

        0
        0
        0
        9px
        #29231d,

        inset
        0
        0
        17px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


/* =========================================================
   DÜĞME İŞARETİ
========================================================= */

.knob-indicator {
    position: absolute;

    top: 9%;
    left: 50%;

    width: 5px;
    height: 20%;

    border-radius: 10px;

    background: #15130f;

    transform:
        translateX(-50%);
}


/* =========================================================
   + / -
========================================================= */

.knob-scale {
    width: 92%;

    margin-top: 7px;

    display: flex;

    justify-content:
        space-between;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            12px,
            1.3vw,
            19px
        );

    font-weight: 800;
}


/* =========================================================
   VOLUME ALT YAZILARI
========================================================= */

.volume-labels {
    width: 105%;

    margin-top: 1px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            7px,
            0.75vw,
            11px
        );

    font-weight: 800;
}


.volume-dots {
    letter-spacing: 1px;
}


/* =========================================================
   ORTA PANEL
========================================================= */

.radio-center {
    height: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* =========================================================
   FREKANS GÖSTERGESİ
========================================================= */

.frequency-display {
    position: relative;

    width: 100%;
    height: 48%;

    overflow: hidden;

    padding:
        4%
        4%;

    border-radius: 8px;

    border:
        4px
        solid
        #554e45;

    background:
        linear-gradient(
            180deg,

            #1b1b1b,

            #292929 52%,

            #141414
        );

    box-shadow:
        inset
        0
        0
        10px
        #000,

        0
        0
        0
        2px
        #bbb2a5;
}


/* =========================================================
   FREKANS SATIRLARI
========================================================= */

.frequency-row {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        8%
        1fr
        10%;

    align-items: center;

    color: #f8f5ee;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            7px,
            0.8vw,
            12px
        );
}


.frequency-numbers {
    display: flex;

    justify-content:
        space-between;
}


.band-name,
.frequency-unit {
    font-weight: 700;
}


.frequency-unit {
    text-align: right;
}


/* =========================================================
   KIRMIZI FM BANDI
========================================================= */

.fm-track {
    position: relative;

    z-index: 2;

    height: 27%;

    margin:
        3px
        7%;

    background:
        linear-gradient(
            180deg,

            #8d0000,

            #e00000,

            #750000
        );

    box-shadow:
        0
        0
        9px
        rgba(
            255,
            0,
            0,
            0.32
        );
}


/* =========================================================
   FREKANS ÇİZGİLERİ
========================================================= */

.fm-ticks {
    position: absolute;

    inset: 0;

    display: flex;

    justify-content:
        space-around;
}


.fm-ticks span {
    width: 2px;
    height: 48%;

    margin-top: auto;

    background: #eeeeee;
}


/* =========================================================
   AM SATIRI
========================================================= */

.am-row {
    position: absolute;

    left: 4%;
    right: 4%;
    bottom: 4%;
}


/* =========================================================
   KIRMIZI FREKANS İBRESİ
========================================================= */

.frequency-needle {
    position: absolute;

    z-index: 10;

    top: 10%;
    bottom: 9%;

    left: 60.98%;

    width: 4px;

    border-radius: 3px;

    background: #ff2a21;

    box-shadow:
        0
        0
        5px
        #ff3b30,

        0
        0
        10px
        rgba(
            255,
            40,
            30,
            0.75
        );

    transform:
        translateX(-50%);

    transition:
        left
        0.12s
        linear;
}


.frequency-needle::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -2px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ff352c;

    transform:
        translateX(-50%);
}


/* =========================================================
   ALT KONTROLLER
========================================================= */

.radio-bottom-controls {
    flex: 1;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        )
        1.7fr;

    align-items: center;

    gap: 2%;

    padding-top: 3%;
}


/* =========================================================
   KÜÇÜK BUTONLAR
========================================================= */

.radio-small-control {
    min-width: 0;

    border: 0;

    background: transparent;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    cursor: pointer;
}


.small-metal-button {
    display: block;

    width:
        clamp(
            20px,
            2.7vw,
            36px
        );

    aspect-ratio: 1;

    border-radius: 50%;

    border:
        3px
        solid
        #181511;

    background:
        conic-gradient(
            #f8f3e9,

            #a69c8c,

            #fffaf0,

            #9c9180,

            #eee5d7
        );

    box-shadow:
        0
        3px
        4px
        rgba(
            0,
            0,
            0,
            0.25
        );

    transition:
        transform
        0.1s
        ease;
}


.radio-small-control:active
.small-metal-button {
    transform:
        translateY(2px)
        scale(0.95);
}


/* =========================================================
   KONTROL İKONLARI
========================================================= */

.control-icon {
    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            9px,
            1vw,
            15px
        );

    font-weight: 900;

    color: #111111;
}


.refresh-icon {
    font-size:
        clamp(
            12px,
            1.4vw,
            20px
        );
}


/* =========================================================
   BAND SELECTOR
========================================================= */

.band-selector {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;
}


/* =========================================================
   BAND SWITCH
========================================================= */

.band-switch {
    position: relative;

    width: 75%;
    height: 27px;

    border-radius: 5px;

    background: #171512;

    border:
        2px
        solid
        #332d27;

    box-shadow:
        inset
        0
        2px
        4px
        rgba(
            0,
            0,
            0,
            0.7
        );
}


/* =========================================================
   BAND SÜRGÜSÜ
========================================================= */

.band-slider {
    position: absolute;

    top: 3px;
    left: 4%;

    width: 29%;

    height:
        calc(
            100% - 6px
        );

    border-radius: 5px;

    border:
        2px
        solid
        #7a6d59;

    background:
        repeating-linear-gradient(
            90deg,

            #d9d0c1 0,

            #d9d0c1 3px,

            #857b6d 4px,

            #857b6d 6px
        );

    cursor: pointer;

    transition:
        left
        0.25s
        ease;
}


/* =========================================================
   FM AM SW YAZILARI
========================================================= */

.band-labels {
    width: 100%;

    display: flex;

    justify-content:
        space-around;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            7px,
            0.75vw,
            11px
        );

    font-weight: 800;
}


/* =========================================================
   ANLIK FREKANS
========================================================= */

.current-frequency {
    min-height: 13px;

    margin-top: 4px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            7px,
            0.7vw,
            10px
        );

    font-weight: 700;

    color: #33291f;
}


/* =========================================================
   DURUM BİLGİSİ
========================================================= */

.radio-status {
    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: 1%;

    transform:
        translateX(-50%);

    padding:
        4px
        10px;

    border-radius: 15px;

    background:
        rgba(
            35,
            27,
            20,
            0.78
        );

    color: #f7ead4;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity
        0.2s
        ease;
}


.retro-radio:hover
.radio-status {
    opacity: 1;
}


/* =========================================================
   GİZLİ RANGE
========================================================= */

.hidden-range {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space: nowrap;
}


/* =========================================================
   KLAVYE FOCUS
========================================================= */

.radio-knob:focus-visible,
.radio-small-control:focus-visible,
.band-slider:focus-visible {
    outline:
        3px
        solid
        #a95424;

    outline-offset: 4px;
}


/* =========================================================
   İSTASYON PANELİ
========================================================= */

.station-container {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            1fr
        );

    gap: 9px;

    margin: 0;

    padding: 8px;

    border-radius: 20px;

    background:
        rgba(
            255,
            250,
            242,
            0.86
        );

    border:
        1px
        solid
        rgba(
            125,
            84,
            48,
            0.10
        );

    backdrop-filter:
        blur(15px);

    box-shadow:
        0
        10px
        30px
        rgba(
            75,
            45,
            22,
            0.10
        );
}


/* =========================================================
   İSTASYON KARTI
========================================================= */

.station-card {
    min-width: 0;

    height: 67px;

    padding:
        8px
        10px;

    display: flex;

    align-items: center;

    gap: 9px;

    border:
        1px
        solid
        rgba(
            125,
            84,
            48,
            0.10
        );

    border-radius: 15px;

    background:
        rgba(
            255,
            250,
            242,
            0.80
        );

    color: #35251b;

    cursor: pointer;

    text-align: left;

    transition:
        transform
        0.25s
        ease,

        background
        0.25s
        ease,

        box-shadow
        0.25s
        ease;
}


.station-card:hover {
    transform:
        translateY(-2px);

    background:
        rgba(
            255,
            252,
            246,
            0.96
        );

    box-shadow:
        0
        8px
        18px
        rgba(
            75,
            45,
            22,
            0.10
        );
}


/* =========================================================
   AKTİF İSTASYON
========================================================= */

.station-card.active {
    color: #ffffff;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,

            #9f431b,

            #c86225
        );

    box-shadow:
        0
        9px
        22px
        rgba(
            161,
            73,
            28,
            0.25
        );
}


/* =========================================================
   İSTASYON LOGOLARI
========================================================= */

.station-logo {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: #a24920;

    font-size: 9px;

    font-weight: 700;

    box-shadow:
        0
        3px
        10px
        rgba(
            55,
            34,
            19,
            0.08
        );
}


.trt-logo {
    background: #e11622;

    color: #ffffff;

    font-size: 13px;

    border:
        3px
        solid
        #ffffff;
}


.dark-logo {
    background: #1f1c19;

    color: #ffffff;
}


/* =========================================================
   İSTASYON BİLGİSİ
========================================================= */

.station-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.station-info strong {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 12px;

    font-weight: 600;
}


.station-info span {
    font-size: 10px;

    opacity: 0.68;
}





/* =========================================================
   1366x768 / KISA MASAÜSTÜ EKRANLAR
========================================================= */

@media
(max-height: 800px)
and
(min-width: 901px) {

    .radio-page-content {
        padding:
            10px
            0;
    }


    .radio-badge {
        padding:
            4px
            11px;

        margin-bottom: 3px;

        font-size: 9px;
    }


    .radio-heading h1 {
        font-size: 27px;
    }


    .radio-heading p {
        font-size: 11px;
    }


    .heading-line {
        margin-top: 5px;
    }


    .retro-radio {
        width:
            min(
                650px,
                58vw
            );
    }


    .station-container {
        padding: 6px;

        gap: 7px;
    }


    .station-card {
        height: 57px;

        padding:
            6px
            8px;
    }


    .station-logo {
        width: 36px;
        height: 36px;
    }


    .station-info strong {
        font-size: 11px;
    }


    .station-info span {
        font-size: 9px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 900px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }


    .radio-page {
        height: auto;

        min-height: 100vh;
    }


    .radio-page-content {
        height: auto;

        min-height: 100vh;

        display: flex;

        flex-direction: column;

        padding:
            25px
            0;
    }


    .radio-machine-wrapper {
        margin:
            15px
            0;
    }


    .retro-radio {
        width:
            min(
                800px,
                94vw
            );
    }


    .station-container {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

}


/* =========================================================
   TELEFON
========================================================= */

@media
(max-width: 600px) {

    .radio-page-content {
        width: 95%;
    }


    .radio-heading h1 {
        font-size: 27px;
    }


    .radio-heading p {
        font-size: 12px;
    }


    .retro-radio {
        width: 98vw;

        border-width: 3px;
    }


    .retro-radio::before {
        border-width: 3px;
    }


    .speaker-lines span {
        height: 4px;
    }


    .frequency-display {
        border-width: 2px;
    }


    .radio-knob {
        border-width: 2px;

        box-shadow:
            0
            0
            0
            4px
            #b89156,

            0
            0
            0
            6px
            #29231d,

            inset
            0
            0
            8px
            rgba(
                0,
                0,
                0,
                0.20
            );
    }


    .small-metal-button {
        border-width: 2px;
    }


    .station-container {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .station-card {
        height: 62px;
    }

}

/* =========================================================
   RADYO GÖRSEL REVİZE
   Mevcut CSS'in EN ALTINA ekle
========================================================= */


/* =========================================================
   RADYO ALANI
========================================================= */

.radio-machine-wrapper {
    width: 100%;
    height: 100%;
    min-height: 0;

    padding: 5px 0;

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

    overflow: hidden;
}


/* =========================================================
   RADYO DIŞ KASA
   Daha yatay ve referans görsele yakın oran
========================================================= */

.retro-radio {
    position: relative;

    width: min(900px, 72vw);

    /* Önceki 1.62 oranı radyoyu fazla kare gösteriyordu */
    aspect-ratio: 1.95 / 1;

    max-height: 100%;

    padding:
        3.4%
        3.7%
        2.6%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 4px solid #31271d;

    border-radius: 7% / 13%;

    background:
        linear-gradient(
            135deg,
            #f4dda8 0%,
            #d19d55 17%,
            #f1d7a1 48%,
            #c58d45 76%,
            #f1d9a7 100%
        );

    box-shadow:
        inset 0 0 0 5px rgba(255,255,255,0.28),
        inset 0 0 18px rgba(65,38,15,0.35),
        0 20px 32px rgba(60,35,15,0.24);
}


/* =========================================================
   RADYO İÇ PANEL
========================================================= */

.retro-radio::before {
    content: "";

    position: absolute;

    inset:
        4.3%
        3.7%;

    z-index: 0;

    border-radius: 6% / 11%;

    border: 5px solid #29251f;

    background:
        linear-gradient(
            145deg,
            #d8d1c5,
            #aaa194 48%,
            #dad3c8
        );

    box-shadow:
        inset 0 0 0 4px #655d52,
        inset 0 0 20px rgba(0,0,0,0.22);
}


/* =========================================================
   HOPARLÖR
   Eski tasarımda çok fazla dikey alan kaplıyordu
========================================================= */

.speaker-area {
    position: relative;

    z-index: 2;

    flex: 1;

    min-height: 0;

    margin:
        2.3%
        4%
        0;
}


.speaker-lines {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: space-evenly;
}


.speaker-lines span {
    display: block;

    width: 100%;
    height: 7px;

    flex-shrink: 0;

    border: 1px solid #080808;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #262626,
            #0c0c0c
        );

    box-shadow:
        0 1px 1px rgba(255,255,255,0.30);
}


/* =========================================================
   ALT KONTROL PANELİ
========================================================= */

.radio-control-panel {
    position: relative;

    z-index: 3;

    /* Eski %36 yerine kontrol paneline daha fazla alan */
    height: 41%;

    margin:
        0.7%
        4%
        1%;

    display: grid;

    grid-template-columns:
        20%
        minmax(0, 1fr)
        20%;

    gap: 3%;

    align-items: center;
}


/* =========================================================
   VOLUME / TUNING
========================================================= */

.control-side {
    height: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

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


.control-title {
    margin-bottom: 4px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            11px,
            1vw,
            16px
        );

    line-height: 1;

    font-weight: 800;

    color: #171512;
}


/* =========================================================
   BÜYÜK DÜĞME
========================================================= */

.knob-wrapper {
    position: relative;

    /*
       Eski %70 değeri düğmeleri biraz fazla büyütüyordu.
    */
    width: 62%;

    aspect-ratio: 1;
}


.radio-knob {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    border-radius: 50%;

    border: 4px solid #171512;

    cursor: grab;

    touch-action: none;

    background:
        conic-gradient(
            from 10deg,
            #fffaf0,
            #b5aa99,
            #f9f3e7,
            #a39989,
            #eee6d8,
            #c1b7a7,
            #fffaf0
        );

    box-shadow:
        0 0 0 5px #b89156,
        0 0 0 8px #29231d,
        inset 0 0 12px rgba(0,0,0,0.20),
        0 4px 8px rgba(0,0,0,0.30);

    transition:
        box-shadow 0.2s ease;
}


.radio-knob:active {
    cursor: grabbing;

    box-shadow:
        0 0 0 5px #b89156,
        0 0 0 8px #29231d,
        inset 0 0 17px rgba(0,0,0,0.32);
}


/* =========================================================
   DÜĞME İŞARETİ
========================================================= */

.knob-indicator {
    position: absolute;

    top: 8%;
    left: 50%;

    width: 4px;
    height: 20%;

    border-radius: 10px;

    background: #15130f;

    transform:
        translateX(-50%);
}


/* =========================================================
   + / -
========================================================= */

.knob-scale {
    width: 88%;

    margin-top: 5px;

    display: flex;

    justify-content: space-between;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            12px,
            1.2vw,
            18px
        );

    line-height: 1;

    font-weight: 800;
}


/* =========================================================
   VOLUME ALT YAZILARI
========================================================= */

.volume-labels {
    width: 96%;

    margin-top: 2px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            7px,
            0.65vw,
            10px
        );

    line-height: 1;

    font-weight: 800;
}


.volume-dots {
    letter-spacing: 0;
}


/* =========================================================
   ORTA PANEL
========================================================= */

.radio-center {
    height: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* =========================================================
   FREKANS GÖSTERGESİ
========================================================= */

.frequency-display {
    position: relative;

    width: 100%;

    /*
        Biraz daha büyük ekran.
    */
    height: 52%;

    overflow: hidden;

    padding:
        3%
        3%;

    border-radius: 7px;

    border: 4px solid #554e45;

    background:
        linear-gradient(
            180deg,
            #111111,
            #292929 52%,
            #121212
        );

    box-shadow:
        inset 0 0 10px #000,
        0 0 0 2px #bbb2a5;
}


/* =========================================================
   FREKANS YAZILARI
========================================================= */

.frequency-row {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        8%
        1fr
        10%;

    align-items: center;

    color: #f8f5ee;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            7px,
            0.75vw,
            11px
        );

    line-height: 1;
}


.frequency-numbers {
    display: flex;

    justify-content: space-between;
}


.band-name,
.frequency-unit {
    font-weight: 700;
}


.frequency-unit {
    text-align: right;
}


/* =========================================================
   KIRMIZI FM BANDI
========================================================= */

.fm-track {
    position: relative;

    z-index: 2;

    height: 26%;

    margin:
        3px
        7%;

    background:
        linear-gradient(
            180deg,
            #8d0000,
            #ef1010,
            #750000
        );

    box-shadow:
        0 0 9px rgba(255,0,0,0.32);
}


/* =========================================================
   FM ÇENTİKLERİ
========================================================= */

.fm-ticks {
    position: absolute;

    inset: 0;

    display: flex;

    justify-content: space-around;
}


.fm-ticks span {
    width: 2px;
    height: 48%;

    margin-top: auto;

    background: #eeeeee;
}


/* =========================================================
   AM SATIRI
========================================================= */

.am-row {
    position: absolute;

    left: 4%;
    right: 4%;
    bottom: 5%;
}


/* =========================================================
   KIRMIZI FREKANS İBRESİ
========================================================= */

.frequency-needle {
    position: absolute;

    z-index: 10;

    top: 8%;
    bottom: 8%;

    left: 60.98%;

    width: 3px;

    border-radius: 3px;

    background: #ff2a21;

    box-shadow:
        0 0 5px #ff3b30,
        0 0 10px rgba(255,40,30,0.75);

    transform:
        translateX(-50%);

    transition:
        left 0.12s linear;
}


.frequency-needle::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -2px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff352c;

    transform:
        translateX(-50%);
}


/* =========================================================
   ALT KONTROLLER
========================================================= */

.radio-bottom-controls {
    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr)
        1.7fr;

    align-items: center;

    gap: 2%;

    /*
       Önceki %3 fazla boşluk oluşturuyordu
    */
    padding-top: 2%;
}


/* =========================================================
   KÜÇÜK BUTONLAR
========================================================= */

.radio-small-control {
    min-width: 0;

    border: 0;

    padding: 0;

    background: transparent;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    cursor: pointer;
}


.small-metal-button {
    display: block;

    width:
        clamp(
            22px,
            2.4vw,
            34px
        );

    aspect-ratio: 1;

    border-radius: 50%;

    border: 3px solid #181511;

    background:
        conic-gradient(
            #f8f3e9,
            #a69c8c,
            #fffaf0,
            #9c9180,
            #eee5d7
        );

    box-shadow:
        0 3px 4px rgba(0,0,0,0.25);

    transition:
        transform 0.1s ease;
}


/* =========================================================
   KONTROL İKONLARI
========================================================= */

.control-icon {
    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            9px,
            0.9vw,
            14px
        );

    line-height: 1;

    font-weight: 900;

    color: #111111;
}


.refresh-icon {
    font-size:
        clamp(
            12px,
            1.2vw,
            18px
        );
}


/* =========================================================
   BAND SELECTOR
========================================================= */

.band-selector {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;
}


.band-switch {
    position: relative;

    width: 75%;
    height: 25px;

    border-radius: 5px;

    background: #171512;

    border: 2px solid #332d27;

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.7);
}


/* =========================================================
   BAND SÜRGÜSÜ
========================================================= */

.band-slider {
    position: absolute;

    top: 3px;
    left: 4%;

    width: 29%;

    height:
        calc(
            100% - 6px
        );

    border-radius: 4px;

    border: 2px solid #7a6d59;

    background:
        repeating-linear-gradient(
            90deg,
            #d9d0c1 0,
            #d9d0c1 3px,
            #857b6d 4px,
            #857b6d 6px
        );

    cursor: pointer;

    transition:
        left 0.25s ease;
}


/* =========================================================
   FM / AM / SW
========================================================= */

.band-labels {
    width: 100%;

    display: flex;

    justify-content: space-around;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            7px,
            0.7vw,
            10px
        );

    line-height: 1;

    font-weight: 800;
}


/* =========================================================
   ANLIK FREKANS

   Frekans zaten ana göstergede görüldüğü için
   kontrol panelinin altından kaldırıyoruz.
========================================================= */

.current-frequency {
    display: none;
}


/* =========================================================
   DURUM BİLGİSİ
========================================================= */

.radio-status {
    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: 1.5%;

    transform:
        translateX(-50%);

    padding:
        3px
        9px;

    border-radius: 15px;

    background:
        rgba(
            35,
            27,
            20,
            0.78
        );

    color: #f7ead4;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease;
}


/* =========================================================
   1366x768 VE KISA MASAÜSTÜ EKRANLAR

   Sayfanın tek ekrana sığmasını koruyor.
========================================================= */

@media
(max-height: 800px)
and
(min-width: 901px) {

    .radio-page-content {
        padding:
            8px
            0;
    }


    .radio-badge {
        padding:
            4px
            11px;

        margin-bottom: 3px;

        font-size: 9px;
    }


    .radio-heading h1 {
        font-size: 27px;
    }


    .radio-heading p {
        font-size: 11px;
    }


    .heading-line {
        margin-top: 5px;
    }


    .retro-radio {
        width:
            min(
                760px,
                64vw
            );

        aspect-ratio: 1.95 / 1;
    }


    .speaker-lines span {
        height: 5px;
    }


    .station-container {
        padding: 6px;

        gap: 7px;
    }


    .station-card {
        height: 57px;

        padding:
            6px
            8px;
    }


    .station-logo {
        width: 36px;
        height: 36px;
    }


    .station-info strong {
        font-size: 11px;
    }


    .station-info span {
        font-size: 9px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 900px) {

    .retro-radio {
        width:
            min(
                800px,
                94vw
            );

        aspect-ratio: 1.95 / 1;
    }


    .radio-control-panel {
        grid-template-columns:
            20%
            minmax(0, 1fr)
            20%;
    }


    .knob-wrapper {
        width: 65%;
    }
}


/* =========================================================
   TELEFON
========================================================= */

@media
(max-width: 600px) {

    .retro-radio {
        width: 98vw;

        aspect-ratio: 1.85 / 1;

        border-width: 3px;
    }


    .retro-radio::before {
        border-width: 3px;
    }


    .radio-control-panel {
        height: 43%;

        grid-template-columns:
            20%
            minmax(0, 1fr)
            20%;

        gap: 2%;
    }


    .speaker-lines span {
        height: 4px;
    }


    .frequency-display {
        border-width: 2px;
    }


    .radio-knob {
        border-width: 2px;

        box-shadow:
            0 0 0 4px #b89156,
            0 0 0 6px #29231d,
            inset 0 0 8px rgba(0,0,0,0.20);
    }


    .small-metal-button {
        border-width: 2px;
    }
}

/* =========================================================
   JS DURUM MESAJI
========================================================= */

.radio-status.visible {
    opacity: 1;
}


/* Knob dönüşünü daha doğal göster */
.radio-knob {
    transform-origin: center center;
}


/* Band sürgüsünün konum değişimi */
.band-slider {
    transition:
        left 0.25s ease,
        transform 0.12s ease;
}


.band-slider:active {
    transform: scale(0.94);
}

/* =========================================================
   RADYO - SON GÖRSEL DÜZENLEME
   Mevcut CSS dosyasının EN ALTINA ekle
========================================================= */


/* =========================================================
   RADYO BOYUTU / KASA
========================================================= */

.retro-radio {
    width: min(900px, 72vw);

    /*
        Daha doğal retro radyo oranı.
        Fazla uzun görünmesini engeller.
    */
    aspect-ratio: 1.88 / 1;

    padding:
        3.2%
        3.6%
        2.8%;

    border: 4px solid #2b241c;

    border-radius:
        7.5% / 14%;

    background:
        linear-gradient(
            145deg,
            #f7e3b1 0%,
            #d5a45d 18%,
            #f2d8a0 48%,
            #c58c45 77%,
            #f3dca8 100%
        );

    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,.30),
        inset 0 -10px 22px rgba(85,50,18,.18),
        inset 0 8px 18px rgba(255,255,255,.15),
        0 18px 30px rgba(57,34,16,.23);
}


/* Hafif üst ışık */

.retro-radio::after {
    content: "";

    position: absolute;

    top: 7px;
    left: 9%;
    right: 9%;

    height: 2px;

    border-radius: 50%;

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

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   İÇ PANEL
========================================================= */

.retro-radio::before {

    inset:
        4.2%
        3.6%;

    border:
        5px solid
        #29251f;

    border-radius:
        6.5% / 12%;

    background:
        linear-gradient(
            145deg,
            #d8d2c7 0%,
            #b8b0a4 45%,
            #aaa194 65%,
            #d9d3c8 100%
        );

    box-shadow:
        inset 0 0 0 3px #686055,
        inset 0 3px 8px rgba(255,255,255,.20),
        inset 0 -5px 14px rgba(0,0,0,.17);
}


/* =========================================================
   HOPARLÖR ALANI
========================================================= */

.speaker-area {

    /*
        Hoparlörü biraz küçültüyoruz.
        Alt kontrol paneline daha fazla alan kalıyor.
    */

    flex: 0 0 48%;

    min-height: 0;

    margin:
        2.6%
        4.8%
        0;
}


.speaker-lines {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content:
        space-evenly;

    padding:
        1%
        0;
}


.speaker-lines span {

    width: 100%;

    /*
        Önceki çizgiler biraz kalındı.
    */

    height: 5px;

    flex-shrink: 0;

    border:
        1px solid
        #0a0a0a;

    border-radius: 50px;

    background:
        linear-gradient(
            180deg,
            #292929 0%,
            #101010 48%,
            #050505 100%
        );

    box-shadow:
        0 1px 0 rgba(255,255,255,.28),
        inset 0 1px 2px rgba(255,255,255,.08),
        inset 0 -1px 2px rgba(0,0,0,.65);
}


/* =========================================================
   ALT KONTROL PANELİ
========================================================= */

.radio-control-panel {

    /*
        Alt kontroller artık daha rahat.
    */

    height: 43%;

    margin:
        0
        4.4%
        1.5%;

    grid-template-columns:
        19%
        minmax(0, 1fr)
        19%;

    gap: 3.5%;

    align-items: center;
}


/* =========================================================
   VOLUME / TUNING
========================================================= */

.control-side {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;
}


.control-title {

    margin-bottom: 7px;

    font-size:
        clamp(
            11px,
            1vw,
            15px
        );

    line-height: 1;

    letter-spacing:
        .25px;

    font-weight: 800;
}


/* =========================================================
   BÜYÜK KNOB
========================================================= */

.knob-wrapper {

    /*
        Volume ve tuning aynı büyüklükte.
    */

    width: 67%;

    max-width: 105px;

    aspect-ratio: 1;
}


.radio-knob {

    border:
        4px solid
        #191612;

    background:
        conic-gradient(
            from 10deg,

            #fffdf7 0deg,
            #c3b9a9 38deg,
            #f7f1e6 75deg,
            #a99f90 115deg,
            #f8f2e6 160deg,
            #aaa092 205deg,
            #f6eee1 250deg,
            #bbb1a2 300deg,
            #fffdf5 360deg
        );

    box-shadow:
        0 0 0 5px #b98d4d,
        0 0 0 8px #29231d,
        inset 3px 3px 7px rgba(255,255,255,.55),
        inset -3px -3px 8px rgba(0,0,0,.22),
        0 5px 8px rgba(0,0,0,.28);

    transform-origin:
        center center;
}


/* Düğme merkezine hafif metal ışık */

.radio-knob::after {

    content: "";

    position: absolute;

    width: 55%;
    height: 55%;

    top: 10%;
    left: 13%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.28),
            rgba(255,255,255,0) 68%
        );

    pointer-events: none;
}


/* Knob üzerindeki siyah işaret */

.knob-indicator {

    top: 8%;

    width: 5px;

    height: 18%;

    border-radius: 10px;

    background:
        #17130f;

    box-shadow:
        0 1px 1px
        rgba(255,255,255,.25);
}


/* =========================================================
   - / + ÖLÇEĞİ
========================================================= */

.knob-scale {

    width: 88%;

    margin-top: 9px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    font-size:
        clamp(
            12px,
            1.2vw,
            17px
        );

    line-height: 1;

    font-weight: 800;

    color:
        #211b16;
}


/* =========================================================
   OFF / MIN / MAX
========================================================= */

.volume-labels {

    width: 91%;

    margin-top: 5px;

    display: grid;

    grid-template-columns:
        auto
        auto
        1fr
        auto;

    align-items: center;

    gap: 6px;

    font-size:
        clamp(
            7px,
            .63vw,
            9px
        );

    letter-spacing:
        .15px;

    line-height: 1;

    font-weight: 800;

    color:
        #292019;
}


.volume-dots {

    text-align: center;

    letter-spacing: 2px;

    opacity: .75;
}


/* =========================================================
   ORTA KONTROL ALANI
========================================================= */

.radio-center {

    height: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 6px;
}


/* =========================================================
   FREKANS EKRANI
========================================================= */

.frequency-display {

    width: 100%;

    /*
        Öncekinden biraz daha yüksek.
    */

    height: 54%;

    min-height: 82px;

    padding:
        3.5%
        3.2%;

    border:
        4px solid
        #4d463e;

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #090909 0%,
            #1d1d1d 45%,
            #090909 100%
        );

    box-shadow:
        inset 0 0 12px #000,
        inset 0 2px 2px rgba(255,255,255,.07),
        0 0 0 2px #aaa195,
        0 3px 5px rgba(0,0,0,.16);
}


/* =========================================================
   FREKANS YAZILARI
========================================================= */

.frequency-row {

    font-size:
        clamp(
            8px,
            .76vw,
            11px
        );

    line-height: 1.05;

    font-weight: 500;
}


.band-name {

    font-weight: 800;
}


.frequency-unit {

    font-size: .9em;

    font-weight: 700;
}


/* =========================================================
   FM KIRMIZI BANDI
========================================================= */

.fm-track {

    height: 27%;

    margin:
        4px
        7%;

    border-top:
        1px solid
        rgba(255,255,255,.13);

    border-bottom:
        1px solid
        rgba(0,0,0,.5);

    background:
        linear-gradient(
            180deg,
            #9d0000,
            #f01818 46%,
            #930000
        );

    box-shadow:
        0 0 8px
        rgba(255,25,15,.40);
}


.fm-ticks span {

    width: 2px;

    height: 52%;

    background:
        #f7f4ee;
}


/* =========================================================
   FREKANS İBRESİ
========================================================= */

.frequency-needle {

    top: 7%;

    bottom: 7%;

    width: 3px;

    background:
        #ff342b;

    box-shadow:
        0 0 4px #ff3b30,
        0 0 9px rgba(255,40,30,.72);
}


.frequency-needle::after {

    width: 7px;

    height: 7px;

    background:
        #ff3a30;

    box-shadow:
        0 0 5px
        rgba(255,50,40,.6);
}


/* =========================================================
   ALT BUTON GRUBU
========================================================= */

.radio-bottom-controls {

    flex: 1;

    min-height: 0;

    display: grid;

    /*
        4 buton + band seçici
    */

    grid-template-columns:
        repeat(4, 1fr)
        1.55fr;

    align-items: start;

    gap: 3%;

    padding:
        4px
        1%
        0;
}


/* =========================================================
   KÜÇÜK BUTONLAR
========================================================= */

.radio-small-control {

    padding: 0;

    gap: 5px;

    justify-content: flex-start;
}


.small-metal-button {

    width:
        clamp(
            25px,
            2.55vw,
            37px
        );

    border:
        3px solid
        #181511;

    background:
        conic-gradient(
            from 10deg,
            #fffaf0,
            #aaa092,
            #f7f0e4,
            #999080,
            #fff9ee
        );

    box-shadow:
        inset 2px 2px 3px rgba(255,255,255,.4),
        inset -2px -2px 3px rgba(0,0,0,.16),
        0 3px 4px rgba(0,0,0,.24);
}


.radio-small-control:hover
.small-metal-button {

    filter:
        brightness(1.07);
}


.radio-small-control:active
.small-metal-button {

    transform:
        translateY(2px)
        scale(.96);
}


/* =========================================================
   BUTON İKONLARI
========================================================= */

.control-icon {

    min-height: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size:
        clamp(
            10px,
            .9vw,
            14px
        );

    line-height: 1;

    color:
        #15120f;
}


.refresh-icon {

    font-size:
        clamp(
            14px,
            1.2vw,
            18px
        );
}


/* =========================================================
   BAND SEÇİCİ
========================================================= */

.band-selector {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 5px;
}


.band-switch {

    width: 80%;

    height: 30px;

    border-radius: 6px;

    border:
        2px solid
        #332d27;

    background:
        linear-gradient(
            180deg,
            #0d0c0b,
            #25211d
        );

    box-shadow:
        inset 0 2px 5px
        rgba(0,0,0,.8),
        0 1px 1px
        rgba(255,255,255,.18);
}


.band-slider {

    top: 3px;

    width: 29%;

    height:
        calc(
            100% - 6px
        );

    border-radius: 4px;

    border:
        1px solid
        #887b67;

    background:
        repeating-linear-gradient(
            90deg,

            #e1d8c8 0,
            #e1d8c8 3px,

            #8c8171 4px,
            #8c8171 6px
        );

    box-shadow:
        0 1px 3px
        rgba(0,0,0,.4);

    transition:
        left .25s ease,
        transform .12s ease;
}


.band-slider:active {

    transform:
        scale(.94);
}


.band-labels {

    width: 92%;

    font-size:
        clamp(
            8px,
            .68vw,
            10px
        );

    line-height: 1;

    font-weight: 800;

    color:
        #211b16;
}


/* =========================================================
   ANLIK FREKANS
========================================================= */

.current-frequency {

    min-height: 12px;

    margin-top: 5px;

    padding:
        2px
        7px;

    border-radius: 8px;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            7px,
            .65vw,
            9px
        );

    font-weight: 700;

    line-height: 1;

    color:
        #493427;

    background:
        rgba(255,255,255,.14);
}


/* =========================================================
   DURUM MESAJI
========================================================= */

.radio-status {

    /*
        Artık kasanın en alt kenarına yapışmıyor.
    */

    left: 50%;

    bottom: 2.2%;

    min-width: 190px;

    max-width: 55%;

    padding:
        5px
        12px;

    border:
        1px solid
        rgba(75,54,37,.20);

    border-radius: 5px;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    background:
        rgba(72,52,34,.86);

    color:
        #f6e4c6;

    font-size: 9px;

    letter-spacing: .15px;

    box-shadow:
        0 2px 5px
        rgba(0,0,0,.16);

    opacity: 0;

    transition:
        opacity .2s ease;
}


.radio-status.visible {

    opacity: 1;
}


/*
    Önceki CSS'te hover yapınca mesaj
    sürekli görünüyordu. Onu kapatıyoruz.
*/

.retro-radio:hover
.radio-status {

    opacity: 0;
}


.retro-radio:hover
.radio-status.visible {

    opacity: 1;
}


/* =========================================================
   1366x768 / KISA MASAÜSTÜ
========================================================= */

@media
(max-height: 800px)
and
(min-width: 901px) {

    .retro-radio {

        width:
            min(
                690px,
                61vw
            );

        aspect-ratio:
            1.88 / 1;
    }


    .speaker-lines span {

        height: 4px;
    }


    .radio-control-panel {

        height: 44%;
    }


    .frequency-display {

        min-height: 65px;
    }


    .knob-wrapper {

        width: 63%;
    }


    .small-metal-button {

        width:
            clamp(
                21px,
                2.2vw,
                31px
            );
    }

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 900px) {

    .retro-radio {

        width:
            min(
                820px,
                94vw
            );

        aspect-ratio:
            1.88 / 1;
    }

}


/* =========================================================
   TELEFON
========================================================= */

@media
(max-width: 600px) {

    .retro-radio {

        width: 96vw;

        /*
            Mobilde minimum genişlik kullanarak
            kontrollerin ezilmesini önlüyoruz.
        */

        min-width: 560px;
    }


    .radio-machine-wrapper {

        justify-content:
            flex-start;

        overflow-x: auto;

        padding-left: 10px;

        padding-right: 10px;
    }

}

/* =========================================================
   VOLUME ÖLÇEĞİ - GÖRSEL DÜZENLEME
========================================================= */

/* - ve + satırı */
.knob-scale {
    width: 92%;
    margin-top: 10px;

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

    font-family: Arial, sans-serif;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;

    color: #211a14;
}


/* OFF - MIN - ••• - MAX */
.volume-labels {
    width: 100%;

    margin-top: 6px;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.4fr
        1fr;

    align-items: center;

    font-family: Arial, sans-serif;

    font-size: 9px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.35px;

    color: #2c231b;

    white-space: nowrap;
}


/* Her yazıyı düzgün hizala */

.volume-labels span {
    display: block;

    text-align: center;
}


/* OFF biraz sola */

.volume-labels span:first-child {
    text-align: left;
}


/* MAX biraz sağa */

.volume-labels span:last-child {
    text-align: right;
}


/* Ortadaki noktalar */

.volume-dots {
    text-align: center !important;

    font-size: 8px;

    letter-spacing: 3px;

    opacity: 0.65;
}

/* =========================================================
   RETRO RADYO - GERÇEKÇİ GÖRSEL İYİLEŞTİRME
   Mevcut CSS dosyasının EN ALTINA ekle.
========================================================= */


/* =========================================================
   1. RADYO KASASI
========================================================= */

.retro-radio {
    position: relative;

    /*
        Metal / eski plastik karışımı gövde hissi.
    */
    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,.20) 0%,
            transparent 11%,
            transparent 72%,
            rgba(76,43,15,.10) 100%
        ),
        linear-gradient(
            135deg,
            #f7e3b1 0%,
            #d4a45f 17%,
            #f0d59d 39%,
            #d09a51 67%,
            #f1d8a3 100%
        );

    border:
        4px solid
        #2c241c;

    box-shadow:
        /* üst ışık */
        inset 0 2px 1px rgba(255,255,255,.75),

        /* gövde iç derinliği */
        inset 0 0 0 5px rgba(255,244,210,.30),

        inset 0 -8px 16px rgba(92,55,20,.18),

        /* dış gölge */
        0 3px 0 rgba(73,46,24,.30),

        0 18px 25px rgba(54,32,16,.20),

        0 28px 50px rgba(54,32,16,.12);
}


/*
    Gövdenin üst kısmındaki ince üretim çizgisi.
*/
.retro-radio::after {
    content: "";

    position: absolute;

    top: 2.3%;
    left: 10%;
    right: 10%;

    height: 2px;

    border-radius: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55) 20%,
            rgba(255,255,255,.35) 80%,
            transparent
        );

    box-shadow:
        0 1px 0 rgba(91,55,24,.12);

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   2. İÇ METAL PANEL
========================================================= */

.retro-radio::before {
    background:
        /*
            Çok hafif metal yüzey dokusu
        */
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.012) 0px,
            rgba(255,255,255,.012) 1px,
            rgba(0,0,0,.012) 2px,
            rgba(0,0,0,.012) 3px
        ),

        linear-gradient(
            145deg,
            #d7d1c6 0%,
            #beb7ac 28%,
            #aaa297 52%,
            #c4bdb2 78%,
            #dad4ca 100%
        );

    border:
        5px solid
        #28241e;

    box-shadow:
        /* panel kenarı */
        inset 0 0 0 3px #696158,

        /* üst ışık */
        inset 0 2px 3px rgba(255,255,255,.45),

        /* panel derinliği */
        inset 0 -6px 14px rgba(48,42,34,.17),

        /* dış gölge */
        0 2px 2px rgba(255,255,255,.22);
}


/* =========================================================
   3. HOPARLÖR ALANI
========================================================= */

.speaker-area {
    position: relative;

    padding:
        2px
        0;

    /*
        Izgaraların arkasında çok hafif koyu hoparlör
        gölgesi oluşturuyor.
    */
    background:
        radial-gradient(
            ellipse at center,
            rgba(25,22,19,.07) 0%,
            rgba(25,22,19,.035) 45%,
            transparent 72%
        );
}


/*
    Hoparlör alanının üstüne çok hafif ışık.
*/
.speaker-area::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.09),
            transparent 20%,
            transparent 80%,
            rgba(0,0,0,.025)
        );

    z-index: 2;
}


/* =========================================================
   4. GERÇEKÇİ HOPARLÖR IZGARALARI
========================================================= */

.speaker-lines {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    padding:
        2px
        0;
}


/*
    Buradaki ana değişiklik:
    artık siyah düz çizgi değil,
    panelin içine açılmış yarık görünümü.
*/
.speaker-lines span {
    position: relative;

    display: block;

    width: 100%;

    height: 6px;

    flex-shrink: 0;

    border: 0;

    border-radius:
        999px;

    /*
        Üst kısmı koyu,
        merkez neredeyse siyah,
        alt kısmı biraz daha açık.

        Bu sayede yarık derinliği oluşuyor.
    */
    background:
        linear-gradient(
            180deg,

            #090806 0%,

            #151310 18%,

            #050504 48%,

            #080706 72%,

            #28241f 100%
        );

    box-shadow:
        /*
            Üst kenar gölgesi:
            panel içine girdiği hissi
        */
        inset 0 2px 2px rgba(0,0,0,.95),

        /*
            Alt kenardaki metal yansıması
        */
        inset 0 -1px 1px rgba(255,255,255,.09),

        /*
            Yarığın üstündeki hafif gölge
        */
        0 -1px 1px rgba(37,30,23,.50),

        /*
            Yarığın altındaki ışık
        */
        0 1px 0 rgba(255,255,255,.38);

    opacity: .97;
}


/*
    Izgaranın içinde hafif gölge / delik derinliği.
*/
.speaker-lines span::before {
    content: "";

    position: absolute;

    left: 7px;
    right: 7px;

    top: 1px;

    height: 2px;

    border-radius: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.75) 7%,
            rgba(0,0,0,.9) 50%,
            rgba(0,0,0,.75) 93%,
            transparent
        );
}


/*
    Her çizginin aynı dijital görünmemesi için
    çok hafif farklılık.
*/
.speaker-lines span:nth-child(2n) {
    opacity: .94;
}

.speaker-lines span:nth-child(3n) {
    opacity: .98;
}


/* =========================================================
   5. RADYO ÜZERİNDEKİ ANA YAZILAR
   VOLUME / TUNING
========================================================= */

.control-title {
    margin-bottom: 5px;

    /*
        Eski cihaz üzerindeki baskıya daha yakın.
    */
    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size:
        clamp(
            11px,
            .95vw,
            15px
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing:
        -0.35px;

    color:
        #181511;

    /*
        Yazı panel üzerine basılmış gibi.
    */
    text-shadow:
        0 1px 0 rgba(255,255,255,.28);

    transform:
        scaleX(.94);

    transform-origin:
        center;
}


/* =========================================================
   6. BÜYÜK METAL DÜĞMELER
========================================================= */

.radio-knob {
    border:
        3px solid
        #1d1915;

    /*
        Tornalanmış metal görünümü.
    */
    background:
        radial-gradient(
            circle at 38% 32%,
            rgba(255,255,255,.90) 0%,
            rgba(255,255,255,.18) 16%,
            transparent 31%
        ),

        conic-gradient(
            from 4deg,

            #a49b8e 0deg,
            #f8f4eb 28deg,
            #aaa194 60deg,
            #f5efe4 95deg,
            #91887b 135deg,
            #eee8dd 180deg,
            #9c9386 220deg,
            #faf5eb 270deg,
            #aaa194 315deg,
            #e7e0d5 360deg
        );

    box-shadow:
        /* altın/bronz halka */
        0 0 0 5px #b78a4d,

        /* dış siyah halka */
        0 0 0 8px #28221c,

        /* metal iç ışığı */
        inset 3px 3px 5px rgba(255,255,255,.50),

        /* metal iç gölgesi */
        inset -4px -5px 8px rgba(55,45,35,.27),

        /* düğmenin panel gölgesi */
        0 5px 7px rgba(37,27,18,.32);

    transition:
        box-shadow .18s ease,
        filter .18s ease;
}


/*
    Metal düğmenin merkezine hafif bombelik.
*/
.radio-knob::before {
    content: "";

    position: absolute;

    inset: 9%;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 36% 29%,
            rgba(255,255,255,.35),
            transparent 27%
        );

    box-shadow:
        inset 0 0 8px rgba(255,255,255,.08);
}


.radio-knob:hover {
    filter:
        brightness(1.035);
}


.radio-knob:active {
    box-shadow:
        0 0 0 5px #b78a4d,
        0 0 0 8px #28221c,

        inset 3px 3px 6px rgba(0,0,0,.12),

        inset -2px -2px 5px rgba(255,255,255,.25),

        0 2px 4px rgba(37,27,18,.28);
}


/* =========================================================
   7. DÜĞME İŞARETİ
========================================================= */

.knob-indicator {
    top: 9%;

    width: 4px;

    height: 17%;

    border-radius:
        5px;

    background:
        linear-gradient(
            90deg,
            #090806,
            #312b24,
            #080706
        );

    box-shadow:
        1px 1px 1px rgba(255,255,255,.20),
        inset 0 1px 1px rgba(0,0,0,.65);
}


/* =========================================================
   8. +/- YAZILARI
========================================================= */

.knob-scale {
    width: 91%;

    margin-top: 9px;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(
            12px,
            1.1vw,
            17px
        );

    font-weight: 900;

    color:
        #191511;

    text-shadow:
        0 1px 0 rgba(255,255,255,.30);
}


/* =========================================================
   9. OFF / MIN / MAX YAZILARI
========================================================= */

.volume-labels {
    width: 100%;

    margin-top: 5px;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.35fr
        1fr;

    align-items: center;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(
            7px,
            .61vw,
            9px
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing:
        .55px;

    color:
        #201b16;

    text-shadow:
        0 1px 0 rgba(255,255,255,.30);

    white-space: nowrap;
}


.volume-labels span {
    text-align: center;
}


.volume-labels span:first-child {
    text-align: left;
}


.volume-labels span:last-child {
    text-align: right;
}


.volume-dots {
    text-align:
        center !important;

    font-size: 7px;

    letter-spacing:
        3px;

    opacity: .52;
}


/* =========================================================
   10. FREKANS EKRANI - CAM ÇERÇEVE
========================================================= */

.frequency-display {
    position: relative;

    overflow: hidden;

    border:
        3px solid
        #413b34;

    border-radius:
        7px;

    /*
        Eski siyah radyo camı.
    */
    background:
        linear-gradient(
            180deg,

            #090908 0%,

            #171716 24%,

            #222220 52%,

            #111110 79%,

            #070707 100%
        );

    box-shadow:
        /* iç karanlık */
        inset 0 3px 7px rgba(0,0,0,.95),

        inset 0 -2px 5px rgba(255,255,255,.045),

        /* metal çerçeve */
        0 0 0 2px #9d9589,

        0 0 0 3px rgba(46,40,34,.45),

        /* panel gölgesi */
        0 3px 5px rgba(35,28,22,.22);
}


/*
    Eski camın üstündeki yansıma.
*/
.frequency-display::before {
    content: "";

    position: absolute;

    z-index: 4;

    pointer-events: none;

    top: 0;
    left: 0;
    right: 0;

    height: 45%;

    background:
        linear-gradient(
            165deg,

            rgba(255,255,255,.12) 0%,

            rgba(255,255,255,.035) 38%,

            transparent 62%
        );
}


/*
    Çok hafif eski cam / analog yüzey dokusu.
*/
.frequency-display::after {
    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    opacity: .22;

    background:
        repeating-linear-gradient(
            0deg,

            transparent 0,

            transparent 2px,

            rgba(255,255,255,.025) 3px
        );
}


/* =========================================================
   11. FREKANS YAZILARI
========================================================= */

.frequency-row {
    position: relative;

    z-index: 5;

    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size:
        clamp(
            8px,
            .72vw,
            11px
        );

    font-weight: 600;

    line-height: 1;

    color:
        #f0eee8;

    letter-spacing:
        -.15px;

    /*
        Camın arkasında basılı yazı hissi.
    */
    text-shadow:
        0 0 2px rgba(255,255,255,.18),
        0 1px 1px rgba(0,0,0,.9);
}


.frequency-numbers {
    display: flex;

    justify-content:
        space-between;

    align-items: center;
}


.frequency-numbers span {
    min-width: 16px;

    text-align: center;
}


.band-name {
    font-weight: 900;

    letter-spacing:
        -.4px;
}


.frequency-unit {
    font-size:
        .85em;

    font-weight: 800;

    letter-spacing:
        -.2px;

    text-align: right;
}


/* =========================================================
   12. FM KIRMIZI SKALA
========================================================= */

.fm-track {
    position: relative;

    z-index: 2;

    height: 25%;

    margin:
        4px
        7%;

    border-top:
        1px solid
        rgba(255,255,255,.14);

    border-bottom:
        1px solid
        rgba(42,0,0,.85);

    background:
        linear-gradient(
            180deg,

            #690000 0%,

            #c80000 22%,

            #f01818 49%,

            #c40707 73%,

            #690000 100%
        );

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.14),

        inset 0 -2px 3px rgba(62,0,0,.70),

        0 0 5px rgba(255,20,15,.32);
}


/* =========================================================
   13. FREKANS ÇENTİKLERİ
========================================================= */

.fm-ticks {
    position: absolute;

    inset: 0;

    display: flex;

    justify-content:
        space-around;

    align-items:
        flex-end;
}


.fm-ticks span {
    width: 1px;

    height: 48%;

    margin: 0;

    background:
        rgba(255,249,236,.93);

    box-shadow:
        1px 0 0 rgba(0,0,0,.18);
}


/*
    Bazı çentikleri uzun yaparak
    gerçek radyo skalası hissi.
*/
.fm-ticks span:nth-child(2n) {
    height: 67%;
}


.fm-ticks span:nth-child(4n) {
    height: 82%;
}


/* =========================================================
   14. KIRMIZI FREKANS İBRESİ
========================================================= */

.frequency-needle {
    z-index: 8;

    top: 6%;
    bottom: 7%;

    width: 2px;

    border-radius:
        1px;

    background:
        #ff3329;

    box-shadow:
        0 0 2px #ff3329,
        0 0 5px rgba(255,45,30,.65);

    /*
        left değerini JS belirlemeye devam edecek.
    */
    transform:
        translateX(-50%);

    transition:
        left .10s linear;
}


.frequency-needle::before {
    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 5px;
    height: 3px;

    transform:
        translateX(-50%);

    border-radius:
        1px;

    background:
        #d82720;
}


.frequency-needle::after {
    width: 6px;
    height: 6px;

    bottom: -1px;

    background:
        #ff392f;

    box-shadow:
        0 0 4px rgba(255,45,30,.65);
}


/* =========================================================
   15. AM SATIRI
========================================================= */

.am-row {
    z-index: 5;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    color:
        #eeeae1;

    text-shadow:
        0 1px 1px #000;
}


/* =========================================================
   16. KÜÇÜK METAL BUTONLAR
========================================================= */

.small-metal-button {
    position: relative;

    border:
        2px solid
        #1d1915;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255,255,255,.75),
            transparent 28%
        ),

        conic-gradient(
            from 20deg,

            #e8e2d8,
            #91887c,
            #faf5eb,
            #a69d90,
            #eee8dd,
            #8f867a,
            #f8f2e8
        );

    box-shadow:
        0 0 0 1px rgba(112,90,65,.65),

        inset 2px 2px 3px rgba(255,255,255,.42),

        inset -2px -2px 4px rgba(42,35,29,.23),

        0 3px 4px rgba(32,25,19,.30);

    transition:
        transform .10s ease,
        filter .15s ease,
        box-shadow .10s ease;
}


.radio-small-control:hover
.small-metal-button {
    filter:
        brightness(1.08);
}


.radio-small-control:active
.small-metal-button {
    transform:
        translateY(2px)
        scale(.96);

    box-shadow:
        0 0 0 1px rgba(112,90,65,.65),

        inset 2px 3px 5px rgba(0,0,0,.22),

        0 1px 2px rgba(32,25,19,.25);
}


/* =========================================================
   17. ALT BUTON İKONLARI
========================================================= */

.control-icon {
    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-weight: 900;

    color:
        #181511;

    text-shadow:
        0 1px 0 rgba(255,255,255,.28);
}


/* =========================================================
   18. BAND SWITCH
========================================================= */

.band-switch {
    border:
        2px solid
        #29231e;

    border-radius:
        5px;

    background:
        linear-gradient(
            180deg,

            #080706,

            #171411 35%,

            #24201b 100%
        );

    box-shadow:
        inset 0 3px 5px rgba(0,0,0,.92),

        inset 0 -1px 1px rgba(255,255,255,.06),

        0 1px 0 rgba(255,255,255,.20);
}


.band-slider {
    border:
        1px solid
        #756a5b;

    background:
        repeating-linear-gradient(
            90deg,

            #ded6c8 0px,

            #ded6c8 2px,

            #9a9081 3px,

            #9a9081 4px,

            #eee6d9 5px,

            #eee6d9 6px
        );

    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.42),

        inset -1px -1px 2px rgba(0,0,0,.30),

        0 1px 3px rgba(0,0,0,.55);
}


/* =========================================================
   19. FM / AM / SW YAZILARI
========================================================= */

.band-labels {
    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(
            8px,
            .67vw,
            10px
        );

    font-weight: 900;

    letter-spacing:
        -.25px;

    color:
        #201b16;

    text-shadow:
        0 1px 0 rgba(255,255,255,.30);
}


/* =========================================================
   20. ANLIK FREKANS
========================================================= */

.current-frequency {
    font-family:
        "Courier New",
        monospace;

    color:
        #3c2c20;

    background:
        rgba(255,248,229,.16);

    border:
        1px solid
        rgba(81,59,41,.08);

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

    letter-spacing:
        .15px;
}


/* =========================================================
   21. RADYONUN MASAYA TEMAS GÖLGESİ
========================================================= */

.radio-machine-wrapper::after {
    content: "";

    position: absolute;

    width:
        min(
            720px,
            58vw
        );

    height: 28px;

    left: 50%;

    bottom: 4%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse at center,

            rgba(52,31,17,.27),

            rgba(52,31,17,.10) 50%,

            transparent 73%
        );

    filter:
        blur(7px);

    pointer-events: none;

    z-index: 0;
}


.radio-machine-wrapper {
    position: relative;
}


.retro-radio {
    z-index: 1;
}


/* =========================================================
   22. İSTASYON PANELİ
========================================================= */

.station-container {
    border:
        1px solid
        rgba(100,70,43,.13);

    background:
        linear-gradient(
            180deg,
            rgba(255,252,245,.91),
            rgba(246,237,224,.87)
        );

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

        0 8px 24px rgba(67,42,23,.12);

    backdrop-filter:
        blur(13px);
}


/* =========================================================
   23. İSTASYON KARTLARI
========================================================= */

.station-card {
    border:
        1px solid
        rgba(112,81,55,.12);

    background:
        linear-gradient(
            180deg,
            rgba(255,253,248,.91),
            rgba(248,241,231,.84)
        );

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

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


.station-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(153,82,36,.20);

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

        0 6px 13px rgba(64,40,22,.10);
}


/* =========================================================
   24. AKTİF İSTASYON
========================================================= */

.station-card.active {
    color:
        #fff9ef;

    border-color:
        #9d451d;

    background:
        linear-gradient(
            135deg,

            #a7461c 0%,

            #c65b23 55%,

            #a9431c 100%
        );

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

        inset 0 -3px 7px rgba(94,29,6,.16),

        0 6px 15px rgba(120,51,18,.22);
}


/* =========================================================
   25. İSTASYON YAZILARI
========================================================= */

.station-info strong {
    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-weight:
        600;

    letter-spacing:
        -.15px;
}


.station-info span {
    font-family:
        Georgia,
        serif;

    opacity:
        .66;
}


/* =========================================================
   26. İSTASYON LOGOLARI
========================================================= */

.station-logo {
    border:
        1px solid
        rgba(87,62,42,.08);

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

        0 2px 5px rgba(50,33,20,.12);
}


.station-card.active
.station-logo {
    box-shadow:
        0 2px 5px rgba(66,24,8,.18);
}


/* =========================================================
   27. RADYO DURUM MESAJI
========================================================= */

.radio-status {
    border:
        1px solid
        rgba(29,22,17,.35);

    background:
        linear-gradient(
            180deg,

            rgba(64,49,37,.94),

            rgba(39,30,23,.94)
        );

    color:
        #f4e6cf;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    letter-spacing:
        .25px;

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

        0 2px 5px rgba(0,0,0,.18);
}


/* =========================================================
   28. KISA MASAÜSTÜ EKRANLAR
========================================================= */

@media
(max-height: 800px)
and
(min-width: 901px) {

    .speaker-lines span {
        height: 5px;
    }


    .control-title {
        font-size:
            11px;
    }


    .volume-labels {
        font-size:
            7px;
    }


    .knob-scale {
        margin-top:
            6px;

        font-size:
            13px;
    }

}


/* =========================================================
   29. TELEFON
========================================================= */

@media
(max-width: 600px) {

    .speaker-lines span {
        height:
            4px;
    }


    .speaker-lines span::before {
        left:
            4px;

        right:
            4px;
    }


    .frequency-needle {
        width:
            2px;
    }


    .control-title {
        letter-spacing:
            -.25px;
    }

}

/* =========================================================
   VOLUME / TUNING BAŞLIKLARINI YUKARI AL
========================================================= */

.control-title {
    position: relative;
    top: -8px;
    margin-bottom: -2px;
}


/* =========================================================
   OFF YAZISINI KALDIR
========================================================= */

.volume-labels span:first-child {
    visibility: hidden;
}

/* =========================================================
   RADYO – SON GÖRSEL / RESPONSIVE DÜZELTMELER
   CSS DOSYASININ EN ALTINA EKLE
========================================================= */


/* =========================================================
   1. SAYFADA YATAY TAŞMAYI ENGELLE
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}


/* =========================================================
   2. RADYO WRAPPER
========================================================= */

.radio-machine-wrapper {
    position: relative;

    width: 100%;
    min-width: 0 !important;
    max-width: 100%;

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

    overflow: visible !important;
}


/* =========================================================
   3. RADYONUN ANA BOYUTU
========================================================= */

.retro-radio {
    /*
        900px sınırı korunuyor fakat küçük ekranlarda
        viewport'a göre küçülüyor.
    */
    width: min(900px, 72vw);

    max-width: 100%;

    min-width: 0 !important;

    aspect-ratio: 1.88 / 1;

    flex-shrink: 0;

    transform-origin: center center;
}


/* =========================================================
   4. İÇ PANELİN TAŞMASINI ENGELLE
========================================================= */

.retro-radio::before {
    overflow: hidden;
}


/* =========================================================
   5. HOPARLÖR IZGARASI
========================================================= */

.speaker-area {
    overflow: hidden;
}

.speaker-lines {
    width: 100%;
    max-width: 100%;

    padding-left: 1px;
    padding-right: 1px;
}

.speaker-lines span {
    width: 100%;

    /*
        Önceki ızgara biraz fazla kalın görünüyordu.
        Bir miktar inceltiyoruz.
    */
    height: clamp(4px, .42vw, 6px);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #28251f 0%,
            #090806 25%,
            #020202 52%,
            #0b0a08 75%,
            #37332c 100%
        );

    box-shadow:
        inset 0 2px 2px rgba(0, 0, 0, .95),
        inset 0 -1px 1px rgba(255, 255, 255, .09),
        0 -1px 0 rgba(40, 35, 29, .45),
        0 1px 0 rgba(255, 255, 255, .34);
}


/* =========================================================
   6. KONTROL PANELİ
========================================================= */

.radio-control-panel {
    /*
        İçerik kenarlara fazla yaklaşmasın.
    */
    padding-left: 1.5%;
    padding-right: 1.5%;

    column-gap: 1.8%;
}


/* =========================================================
   7. VOLUME / TUNING BAŞLIKLARI
========================================================= */

.control-title {
    position: relative;

    /*
        Düğmenin içine girmesini engelliyoruz.
    */
    top: -9px;

    margin-bottom: -1px;

    z-index: 5;

    font-size: clamp(10px, .85vw, 14px);

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   8. BÜYÜK KNOB'LAR
========================================================= */

.knob-wrapper {
    width: 65%;
    max-width: 102px;
    min-width: 0;
}

.radio-knob {
    width: 100%;
    max-width: 100%;

    aspect-ratio: 1;

    flex-shrink: 0;
}


/* =========================================================
   9. - / + İŞARETLERİ
========================================================= */

.knob-scale {
    width: 91%;

    margin-top: 9px;

    font-size: clamp(11px, 1vw, 16px);
}


/* =========================================================
   10. MIN ••• MAX
========================================================= */

.volume-labels {
    width: 91%;

    /*
        OFF kaldırıldığı için grid'i
        üç bölüme dönüştürüyoruz.
    */
    grid-template-columns:
        1fr
        1.3fr
        1fr;

    margin-top: 5px;

    font-size: clamp(7px, .58vw, 9px);
}


/*
    OFF span'ini artık sadece görünmez yapmak yerine
    layout'tan tamamen çıkar.
*/
.volume-labels span:first-child {
    display: none !important;
}


/*
    MIN
*/
.volume-labels span:nth-child(2) {
    text-align: left;
}


/*
    Noktalar
*/
.volume-labels span:nth-child(3) {
    text-align: center !important;
}


/*
    MAX
*/
.volume-labels span:last-child {
    text-align: right;
}


/* =========================================================
   11. FREKANS EKRANI
========================================================= */

.radio-center {
    min-width: 0;
}

.frequency-display {
    width: 100%;

    min-width: 0;

    overflow: hidden;

    /*
        Görselde ekran biraz fazla yüksek ve kalın
        görünüyordu.
    */
    border-width: 2px;

    border-radius: 6px;
}


/* =========================================================
   12. FREKANS YAZILARI
========================================================= */

.frequency-row {
    white-space: nowrap;

    font-size: clamp(7px, .67vw, 10px);
}

.frequency-numbers span {
    min-width: 0;
}


/* =========================================================
   13. FREKANS İBRESİ
========================================================= */

.frequency-needle {
    /*
        Daha ince analog ibre.
    */
    width: 2px;

    top: 5%;
    bottom: 5%;

    z-index: 10;

    background: #ff3027;

    box-shadow:
        0 0 2px rgba(255, 48, 39, .95),
        0 0 4px rgba(255, 48, 39, .50);
}


/* =========================================================
   14. ALT KONTROLLER
========================================================= */

.radio-bottom-controls {
    width: 100%;

    min-width: 0;

    column-gap: clamp(3px, .6vw, 9px);
}


/* =========================================================
   15. KÜÇÜK METAL BUTONLAR
========================================================= */

.small-metal-button {
    max-width: 100%;
    max-height: 100%;

    flex-shrink: 0;
}


/* =========================================================
   16. FM / AM / SW SWITCH
========================================================= */

.band-selector {
    min-width: 0;
}

.band-switch {
    width: 80%;
    max-width: 100%;
}

.band-labels {
    width: 100%;

    font-size: clamp(7px, .63vw, 10px);

    white-space: nowrap;
}


/* =========================================================
   17. RADYO ALT GÖLGESİ
========================================================= */

.radio-machine-wrapper::after {
    width: min(680px, 55vw);

    height: 24px;

    bottom: 1%;

    opacity: .85;

    filter: blur(8px);
}


/* =========================================================
   18. İSTASYON PANELİ
========================================================= */

.station-container {
    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;
}

.station-card {
    min-width: 0;

    overflow: hidden;
}

.station-info {
    min-width: 0;
}

.station-info strong,
.station-info span {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   TABLET
   901px VE ALTI
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        overflow-x: hidden !important;
    }


    .radio-page {
        width: 100%;

        max-width: 100vw;

        overflow-x: hidden !important;
    }


    .radio-page-content {
        width: 94%;

        max-width: 94%;

        margin-inline: auto;
    }


    /* =============================================
       RADYO
    ============================================= */

    .radio-machine-wrapper {
        width: 100%;

        min-width: 0 !important;

        max-width: 100%;

        overflow: visible !important;
    }


    .retro-radio {
        width: min(760px, 92vw);

        min-width: 0 !important;

        max-width: 100%;

        aspect-ratio: 1.88 / 1;
    }


    /* =============================================
       IZGARA
    ============================================= */

    .speaker-lines span {
        height: 4px;
    }


    /* =============================================
       BAŞLIKLAR
    ============================================= */

    .control-title {
        top: -6px;

        font-size: clamp(8px, 1.35vw, 12px);
    }


    /* =============================================
       FREKANS
    ============================================= */

    .frequency-row {
        font-size: clamp(6px, 1.05vw, 9px);
    }


    /* =============================================
       KNOB
    ============================================= */

    .knob-wrapper {
        width: 63%;
    }


    .knob-scale {
        margin-top: 5px;

        font-size: clamp(9px, 1.5vw, 13px);
    }


    .volume-labels {
        margin-top: 3px;

        font-size: clamp(6px, .95vw, 8px);
    }


    /* =============================================
       İSTASYONLAR
    ============================================= */

    .station-container {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBİL
   600px VE ALTI
========================================================= */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;

        max-width: 100vw;

        overflow-x: hidden !important;
    }


    body {
        position: relative;
    }


    .radio-page {
        width: 100%;

        min-width: 0;

        max-width: 100vw;

        overflow-x: hidden !important;
    }


    .radio-page-content {
        width: 100%;

        max-width: 100%;

        padding:
            18px
            12px
            16px;

        overflow-x: hidden;
    }


    /* =====================================================
       MOBİL BAŞLIK
    ===================================================== */

    .radio-heading {
        width: 100%;

        padding-inline: 8px;
    }


    .radio-heading h1 {
        font-size: clamp(23px, 7.5vw, 30px);

        line-height: 1.05;
    }


    .radio-heading p {
        max-width: 330px;

        margin-inline: auto;

        font-size: 11px;

        line-height: 1.4;
    }


    /* =====================================================
       MOBİL RADYO WRAPPER
    ===================================================== */

    .radio-machine-wrapper {
        /*
            Önceki CSS'teki mobil min-width değerini
            tamamen iptal ediyoruz.
        */
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        margin:
            12px
            auto;

        padding: 0;

        overflow: visible !important;
    }


    /* =====================================================
       RADYO TELEFONA TAM SIĞAR
    ===================================================== */

    .retro-radio {
        /*
            Telefon genişliğinden 8px kadar boşluk bırak.
        */
        width: calc(100vw - 24px) !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        aspect-ratio: 1.88 / 1;

        margin: 0 auto;

        border-width: 2px;

        border-radius: clamp(15px, 4vw, 25px);
    }


    /* =====================================================
       İÇ PANEL
    ===================================================== */

    .retro-radio::before {
        border-width: 3px;

        border-radius: clamp(11px, 3.5vw, 20px);
    }


    /* =====================================================
       IZGARA
    ===================================================== */

    .speaker-area {
        min-width: 0;
    }


    .speaker-lines {
        padding: 1px 0;
    }


    .speaker-lines span {
        height: clamp(2px, .75vw, 4px);

        box-shadow:
            inset 0 1px 1px rgba(0, 0, 0, .95),
            0 1px 0 rgba(255, 255, 255, .28);
    }


    .speaker-lines span::before {
        left: 3px;
        right: 3px;

        height: 1px;
    }


    /* =====================================================
       ALT KONTROL PANELİ
    ===================================================== */

    .radio-control-panel {
        grid-template-columns:
            18%
            minmax(0, 1fr)
            18%;

        column-gap: 2%;

        padding-inline: 1%;
    }


    /* =====================================================
       VOLUME / TUNING
    ===================================================== */

    .control-title {
        top: -3px;

        margin-bottom: 0;

        font-size: clamp(6px, 2vw, 9px);

        letter-spacing: -.2px;
    }


    /* =====================================================
       KNOB
    ===================================================== */

    .knob-wrapper {
        width: 70%;

        max-width: none;

        min-width: 0;
    }


    .radio-knob {
        border-width: 1px;

        box-shadow:
            0 0 0 2px #b78a4d,
            0 0 0 3px #28221c,
            inset 1px 1px 2px rgba(255, 255, 255, .50),
            inset -2px -2px 3px rgba(55, 45, 35, .27),
            0 2px 3px rgba(37, 27, 18, .25);
    }


    .knob-indicator {
        width: 2px;

        height: 17%;
    }


    /* =====================================================
       +/- 
    ===================================================== */

    .knob-scale {
        width: 92%;

        margin-top: 3px;

        font-size: clamp(7px, 2.2vw, 10px);
    }


    /* =====================================================
       MIN ... MAX
    ===================================================== */

    .volume-labels {
        width: 94%;

        margin-top: 2px;

        grid-template-columns:
            1fr
            1.2fr
            1fr;

        font-size: clamp(4.5px, 1.45vw, 7px);

        letter-spacing: .15px;
    }


    .volume-dots {
        font-size: 4px;

        letter-spacing: 1px;
    }


    /* =====================================================
       FREKANS EKRANI
    ===================================================== */

    .frequency-display {
        width: 100%;

        min-width: 0;

        min-height: 0 !important;

        border-width: 1px;

        border-radius: 3px;

        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, .95),
            0 0 0 1px #8c8479;
    }


    .frequency-row {
        font-size: clamp(4.5px, 1.5vw, 7px);

        letter-spacing: -.1px;
    }


    .frequency-numbers span {
        min-width: 0;
    }


    .fm-track {
        margin:
            2px
            7%;

        min-height: 4px;
    }


    .fm-ticks span {
        width: 1px;
    }


    .frequency-needle {
        width: 1px;

        box-shadow:
            0 0 2px rgba(255, 48, 39, .65);
    }


    /* =====================================================
       ALT DÜĞMELER
    ===================================================== */

    .radio-bottom-controls {
        width: 100%;

        min-width: 0;

        column-gap: 2px;
    }


    .radio-small-control {
        min-width: 0;
    }


    .small-metal-button {
        border-width: 1px;

        box-shadow:
            inset 1px 1px 2px rgba(255,255,255,.42),
            inset -1px -1px 2px rgba(42,35,29,.23),
            0 1px 2px rgba(32,25,19,.28);
    }


    .control-icon {
        font-size: clamp(6px, 1.8vw, 10px);
    }


    /* =====================================================
       BAND SWITCH
    ===================================================== */

    .band-switch {
        width: 84%;

        height: clamp(11px, 3.5vw, 20px);

        border-width: 1px;
    }


    .band-labels {
        margin-top: 2px;

        font-size: clamp(4.5px, 1.45vw, 7px);
    }


    /* =====================================================
       RADYO GÖLGESİ
    ===================================================== */

    .radio-machine-wrapper::after {
        width: 75%;

        height: 13px;

        bottom: -3px;

        filter: blur(5px);
    }


    /* =====================================================
       İSTASYONLAR

       Telefonda 6 kartı tek satıra zorlamıyoruz.
       2 sütun kullanıyoruz.
    ===================================================== */

    .station-container {
        width: 100%;

        max-width: 100%;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;

        padding: 7px;

        border-radius: 15px;

        overflow: hidden;
    }


    .station-card {
        width: 100%;

        min-width: 0;

        height: 59px;

        padding:
            7px
            8px;

        gap: 7px;

        border-radius: 11px;
    }


    .station-logo {
        width: 36px;
        height: 36px;

        min-width: 36px;

        font-size: 8px;
    }


    .trt-logo {
        font-size: 11px;
    }


    .station-info strong {
        font-size: 11px;
    }


    .station-info span {
        font-size: 8px;
    }


    .station-live {
        display: none;
    }

}


/* =========================================================
   ÇOK KÜÇÜK TELEFONLAR
   380px VE ALTI
========================================================= */

@media (max-width: 380px) {

    .radio-page-content {
        padding-left: 8px;
        padding-right: 8px;
    }


    .retro-radio {
        width: calc(100vw - 16px) !important;
    }


    .radio-control-panel {
        grid-template-columns:
            17%
            minmax(0, 1fr)
            17%;

        column-gap: 1.5%;
    }


    .control-title {
        font-size: 6px;
    }


    .volume-labels {
        font-size: 4.5px;
    }


    .frequency-row {
        font-size: 4.5px;
    }


    .station-card {
        height: 55px;

        padding: 6px;
    }


    .station-logo {
        width: 32px;
        height: 32px;

        min-width: 32px;
    }

}

/* =========================================================
   FREKANS EKRANI YAZI HİZALAMA - FINAL OVERRIDE
   CSS DOSYASININ EN ALTINA EKLE
========================================================= */


/* Ana frekans satırı */

.frequency-row {
    display: grid !important;

    /* FM | FREKANSLAR | MHz */
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;

    align-items: center !important;

    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================================
   SOLDAKİ FM / AM
========================================================= */

.band-name {
    width: 100% !important;

    padding: 0 0 0 4px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    text-align: left !important;

    white-space: nowrap !important;

    font-weight: 900 !important;
}


/* =========================================================
   ORTADAKİ FREKANS SAYILARI
========================================================= */

.frequency-numbers {
    width: 100% !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

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

.frequency-numbers span {
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    flex: 0 0 auto !important;

    text-align: center !important;

    white-space: nowrap !important;
}


/* =========================================================
   SAĞDAKİ MHz / kHz
========================================================= */

.frequency-unit {
    width: 100% !important;

    padding: 0 3px 0 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    text-align: right !important;

    white-space: nowrap !important;

    font-size: .82em !important;
    font-weight: 800 !important;
}


/* =========================================================
   KIRMIZI FM ÇİZGİSİ
   FM ve MHz yazılarının arasına oturt
========================================================= */

.fm-track {
    margin-left: 44px !important;
    margin-right: 44px !important;

    width: auto !important;
}


/* =========================================================
   AM SATIRI
========================================================= */

.am-row {
    left: 12px !important;
    right: 12px !important;

    width: auto !important;

    display: grid !important;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        44px !important;

    align-items: center !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* AM yazısı */

.am-row .band-name {
    grid-column: 1 !important;

    padding-left: 4px !important;

    justify-content: flex-start !important;
}


/* AM frekansları */

.am-row .frequency-numbers {
    grid-column: 2 !important;

    width: 100% !important;

    display: flex !important;
    justify-content: space-between !important;
}


/* kHz */

.am-row .frequency-unit {
    grid-column: 3 !important;

    padding-right: 3px !important;

    justify-content: flex-end !important;
}


/* =========================================================
   MOBİLDE KOLONLARI ORANTILI KÜÇÜLT
========================================================= */

@media (max-width: 600px) {

    .frequency-row {
        grid-template-columns:
            25px
            minmax(0, 1fr)
            25px !important;
    }

    .fm-track {
        margin-left: 25px !important;
        margin-right: 25px !important;
    }

    .am-row {
        left: 5px !important;
        right: 5px !important;

        grid-template-columns:
            25px
            minmax(0, 1fr)
            25px !important;
    }

    .band-name {
        padding-left: 1px !important;
    }

    .frequency-unit {
        padding-right: 1px !important;
    }
}

/* =========================================================
   ÇALAN RADYO GÖSTERGESİ
========================================================= */

.station-live {
    margin-left: auto;

    width: 22px;
    height: 22px;

    flex-shrink: 0;

    display: none;

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

    gap: 2px;

    padding: 4px;

    border-radius: 50%;

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

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


/* Sadece aktif ve gerçekten çalan kartta göster */

.station-card.playing .station-live {
    display: flex;
}


/* Mevcut ikon/yazı varsa gizle */

.station-card.active.playing .station-live i,
.station-card.active.playing .station-live > span {
    display: none;
}


/* Equalizer çizgileri */

.station-card.active.playing .station-live::before {
    content: "";

    width: 3px;
    height: 11px;

    border-radius: 3px;

    background: #fff;

    box-shadow:
        5px 3px 0 #fff,
        10px -1px 0 #fff;

    transform-origin: bottom;

    animation:
        radioEqualizer 0.65s ease-in-out infinite alternate;
}


/* Equalizer hareketi */

@keyframes radioEqualizer {

    0% {
        height: 4px;

        box-shadow:
            5px 6px 0 #fff,
            10px 2px 0 #fff;
    }

    35% {
        height: 10px;

        box-shadow:
            5px 1px 0 #fff,
            10px 6px 0 #fff;
    }

    70% {
        height: 7px;

        box-shadow:
            5px 5px 0 #fff,
            10px 0 0 #fff;
    }

    100% {
        height: 11px;

        box-shadow:
            5px 3px 0 #fff,
            10px 7px 0 #fff;
    }
}


/* Mobil */

@media (max-width: 600px) {

    .station-card.active.playing .station-live {
        display: flex !important;
    }

    .station-live {
        width: 19px;
        height: 19px;

        padding: 3px;
    }

    .station-live::before {
        transform: scale(.8);
    }
}

/* =========================================================
   ÇALAN RADYO İSTASYONU GÖSTERGESİ
========================================================= */

/*
    JavaScript her .station-card içerisine
    otomatik olarak şu elementi ekliyor:

    <span class="station-live"></span>

    Normal durumda gizli.
*/

.station-live {
    margin-left: auto;

    width: 22px;
    height: 22px;

    flex-shrink: 0;

    display: none;

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

    position: relative;

    padding: 4px;
    

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.16);

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.15);
}


/* =========================================================
   SADECE GERÇEKTEN ÇALAN İSTASYONDA GÖSTER
========================================================= */

.station-card.active.playing .station-live {
    display: flex;
}


/* =========================================================
   EQUALIZER ÇUBUKLARI
========================================================= */

.station-live::before,
.station-live::after {
    content: "";

    position: absolute;

    bottom: 5px;

    width: 3px;

    border-radius: 3px;

    background: #ffffff;

    transform-origin: bottom;

    margin-bottom: 3px;

    animation:
        radioEqualizerLeft
        0.65s
        ease-in-out
        infinite
        alternate;
}


/*
    Sol çubuk
*/

.station-live::before {
    left: 5px;

    height: 5px;

    box-shadow:
        5px 0 0 #ffffff;
}


/*
    Sağ çubuk

    Ayrı animasyon sayesinde
    equalizer daha doğal görünür.
*/

.station-live::after {
    right: 4px;

    height: 9px;

    animation-name:
        radioEqualizerRight;

    animation-duration:
        0.52s;
}


/* =========================================================
   SOL / ORTA ÇUBUK ANİMASYONU
========================================================= */

@keyframes radioEqualizerLeft {

    0% {
        height: 4px;

        box-shadow:
            5px 5px 0 #ffffff;
    }

    25% {
        height: 10px;

        box-shadow:
            5px 2px 0 #ffffff;
    }

    50% {
        height: 6px;

        box-shadow:
            5px 7px 0 #ffffff;
    }

    75% {
        height: 11px;

        box-shadow:
            5px 4px 0 #ffffff;
    }

    100% {
        height: 7px;

        box-shadow:
            5px 9px 0 #ffffff;
    }

}


/* =========================================================
   SAĞ ÇUBUK ANİMASYONU
========================================================= */

@keyframes radioEqualizerRight {

    0% {
        height: 10px;
    }

    25% {
        height: 5px;
    }

    50% {
        height: 11px;
    }

    75% {
        height: 7px;
    }

    100% {
        height: 4px;
    }

}


/* =========================================================
   ACTIVE + PLAYING KART
========================================================= */

/*
    İstersen mevcut active tasarımın kalabilir.

    Bu kısım yalnızca gerçekten yayın çalan
    kartı biraz daha canlı gösterir.
*/

.station-card.active.playing {
    position: relative;
}


/*
    Equalizer'a çok hafif ışık efekti.
*/

.station-card.active.playing .station-live {
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.20),

        0 0 8px
        rgba(255, 255, 255, 0.10);
}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 600px) {

    .station-live {
        width: 19px;
        height: 19px;

        padding: 3px;
    }


    .station-card.active.playing .station-live {
        display: flex !important;
    }


    .station-live::before {
        left: 4px;
        bottom: 4px;

        width: 2px;

        box-shadow:
            4px 0 0 #ffffff;
    }


    .station-live::after {
        right: 3px;
        bottom: 4px;

        width: 2px;
    }


    @keyframes radioEqualizerLeft {

        0% {
            height: 3px;

            box-shadow:
                4px 4px 0 #ffffff;
        }

        25% {
            height: 8px;

            box-shadow:
                4px 2px 0 #ffffff;
        }

        50% {
            height: 5px;

            box-shadow:
                4px 6px 0 #ffffff;
        }

        75% {
            height: 9px;

            box-shadow:
                4px 3px 0 #ffffff;
        }

        100% {
            height: 6px;

            box-shadow:
                4px 7px 0 #ffffff;
        }

    }


    @keyframes radioEqualizerRight {

        0% {
            height: 8px;
        }

        25% {
            height: 4px;
        }

        50% {
            height: 9px;
        }

        75% {
            height: 6px;
        }

        100% {
            height: 3px;
        }

    }

}


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

/*
    Kullanıcı işletim sisteminde
    animasyonları azalt seçeneğini açtıysa
    equalizer hareket etmez.
*/

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

    .station-live::before,
    .station-live::after {
        animation: none;
    }


    .station-live::before {
        height: 8px;

        box-shadow:
            5px 4px 0 #ffffff;
    }


    .station-live::after {
        height: 6px;
    }

}