/* =====================================================
   RADYO32 SLIDER ALTI PLAYER V48
   ===================================================== */

.r48-player{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    background:
        radial-gradient(circle at 50% -50%,rgba(100,54,210,.17),transparent 48%),
        linear-gradient(90deg,#091321,#0a1424 52%,#091321) !important;

    border-top:1px solid rgba(255,255,255,.06) !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;

    color:#fff !important;
}

.r48-player .wrap{
    width:min(1420px,calc(100% - 40px)) !important;
    max-width:1420px !important;
    margin:0 auto !important;
}


/* ANA YAPI */

.r48-player-inner{
    min-height:88px !important;

    display:grid !important;

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

    align-items:center !important;

    gap:30px !important;

    padding:10px 0 !important;
}


/* =====================================================
   SOL TARAF
   ===================================================== */

.r48-now{
    min-width:0 !important;

    display:flex !important;

    align-items:center !important;

    gap:13px !important;
}

.r48-cover{
    width:55px !important;
    height:55px !important;

    min-width:55px !important;

    flex:0 0 55px !important;

    display:grid !important;
    place-items:center !important;

    overflow:hidden !important;

    border-radius:12px !important;

    background:#182338 !important;

    box-shadow:0 8px 24px rgba(0,0,0,.28) !important;
}

.r48-cover img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}

.r48-cover span{
    color:#fff !important;

    font-size:22px !important;
}


/* ŞARKI BİLGİSİ */

.r48-song-info{
    min-width:0 !important;
}

.r48-song-info>small{
    display:block !important;

    margin-bottom:4px !important;

    color:#98a5b8 !important;

    font-size:7px !important;
    line-height:1 !important;

    font-weight:900 !important;

    letter-spacing:1px !important;
}

.r48-song-title{
    width:100% !important;

    max-width:390px !important;

    overflow:hidden !important;

    white-space:nowrap !important;
}

.r48-song-title #nowPlayingTitleTrack{
    display:block !important;

    width:auto !important;

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

    transform:none !important;
}

.r48-song-title strong{
    display:block !important;

    overflow:hidden !important;

    color:#fff !important;

    font-size:13px !important;
    line-height:18px !important;

    font-weight:800 !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;
}

.r48-song-bottom{
    display:flex !important;

    align-items:center !important;

    gap:15px !important;

    margin-top:4px !important;
}

.r48-song-bottom>span{
    display:block !important;

    max-width:210px !important;

    overflow:hidden !important;

    color:#7f8ca1 !important;

    font-size:8px !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;
}


/* DALGA */

.r48-wave{
    height:15px !important;

    display:flex !important;

    align-items:center !important;

    gap:2px !important;
}

.r48-wave i{
    display:block !important;

    width:2px !important;

    min-width:2px !important;

    border-radius:5px !important;

    background:
        linear-gradient(to top,#ff2c72,#4c88ff) !important;

    animation:r48wave 1s ease-in-out infinite !important;
}

.r48-wave i:nth-child(1){height:4px}
.r48-wave i:nth-child(2){height:8px}
.r48-wave i:nth-child(3){height:12px}
.r48-wave i:nth-child(4){height:7px}
.r48-wave i:nth-child(5){height:14px}
.r48-wave i:nth-child(6){height:9px}
.r48-wave i:nth-child(7){height:5px}
.r48-wave i:nth-child(8){height:12px}
.r48-wave i:nth-child(9){height:8px}
.r48-wave i:nth-child(10){height:14px}
.r48-wave i:nth-child(11){height:6px}
.r48-wave i:nth-child(12){height:11px}
.r48-wave i:nth-child(13){height:7px}
.r48-wave i:nth-child(14){height:13px}
.r48-wave i:nth-child(15){height:5px}

@keyframes r48wave{
    0%,100%{
        transform:scaleY(.7);
        opacity:.7;
    }

    50%{
        transform:scaleY(1.2);
        opacity:1;
    }
}


/* =====================================================
   ORTA KONTROLLER
   ===================================================== */

.r48-controls{
    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:14px !important;
}

.r48-controls button{
    appearance:none !important;
    -webkit-appearance:none !important;

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

    cursor:pointer !important;
}

.r48-prev,
.r48-next{
    width:38px !important;
    height:38px !important;

    min-width:38px !important;

    display:grid !important;

    place-items:center !important;

    border:1px solid rgba(255,255,255,.09) !important;

    border-radius:50% !important;

    background:#152035 !important;

    color:#aeb8c8 !important;

    font-size:10px !important;
}

.r48-play{
    position:relative !important;

    width:60px !important;
    height:60px !important;

    min-width:60px !important;

    display:grid !important;

    place-items:center !important;

    padding-left:3px !important;

    border:0 !important;

    border-radius:50% !important;

    background:
        linear-gradient(
            135deg,
            #ff3272 0%,
            #d82ac1 48%,
            #7547ff 100%
        ) !important;

    color:#fff !important;

    font-size:20px !important;

    box-shadow:
        0 0 0 4px rgba(122,70,245,.14),
        0 10px 30px rgba(195,43,164,.35) !important;
}

.r48-play:after{
    content:"";

    position:absolute !important;

    inset:-5px !important;

    border:1px solid rgba(255,255,255,.12) !important;

    border-radius:50% !important;
}

.r48-play:hover{
    transform:scale(1.04) !important;
}


/* =====================================================
   SAĞ TARAF
   ===================================================== */

.r48-right{
    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    gap:12px !important;
}

.r48-mute,
.r48-expand{
    appearance:none !important;
    -webkit-appearance:none !important;

    width:34px !important;
    height:34px !important;

    min-width:34px !important;

    display:grid !important;

    place-items:center !important;

    padding:0 !important;

    border:0 !important;

    border-radius:50% !important;

    background:transparent !important;

    color:#a7b2c2 !important;

    font-size:13px !important;

    cursor:pointer !important;
}


/* SES RANGE */

.r48-volume{
    appearance:none !important;
    -webkit-appearance:none !important;

    width:205px !important;

    height:14px !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    outline:0 !important;

    background:transparent !important;

    cursor:pointer !important;
}


/* CHROME */

.r48-volume::-webkit-slider-runnable-track{
    height:4px !important;

    border-radius:999px !important;

    background:
        linear-gradient(
            90deg,
            #f42e76 0%,
            #f42e76 65%,
            #263247 65%,
            #263247 100%
        ) !important;
}

.r48-volume::-webkit-slider-thumb{
    appearance:none !important;
    -webkit-appearance:none !important;

    width:12px !important;
    height:12px !important;

    margin-top:-4px !important;

    border:0 !important;

    border-radius:50% !important;

    background:#f42e76 !important;

    box-shadow:0 0 0 3px rgba(244,46,118,.10) !important;
}


/* FIREFOX */

.r48-volume::-moz-range-track{
    height:4px !important;

    border-radius:999px !important;

    background:#263247 !important;
}

.r48-volume::-moz-range-progress{
    height:4px !important;

    border-radius:999px !important;

    background:#f42e76 !important;
}

.r48-volume::-moz-range-thumb{
    width:12px !important;
    height:12px !important;

    border:0 !important;

    border-radius:50% !important;

    background:#f42e76 !important;
}


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

@media(max-width:900px){

    .r48-player-inner{
        grid-template-columns:minmax(0,1fr) auto !important;

        gap:12px !important;
    }

    .r48-right{
        display:none !important;
    }

    .r48-song-title{
        max-width:270px !important;
    }
}


/* =====================================================
   MOBIL
   ===================================================== */

@media(max-width:600px){

    .r48-player .wrap{
        width:calc(100% - 16px) !important;
    }

    .r48-player-inner{
        min-height:76px !important;

        gap:8px !important;
    }

    .r48-cover{
        width:45px !important;
        height:45px !important;

        min-width:45px !important;

        flex-basis:45px !important;
    }

    .r48-song-title{
        max-width:170px !important;
    }

    .r48-song-title strong{
        font-size:10px !important;
    }

    .r48-song-bottom>span{
        max-width:120px !important;
    }

    .r48-wave{
        display:none !important;
    }

    .r48-controls{
        gap:6px !important;
    }

    .r48-prev,
    .r48-next{
        width:30px !important;
        height:30px !important;

        min-width:30px !important;

        font-size:8px !important;
    }

    .r48-play{
        width:47px !important;
        height:47px !important;

        min-width:47px !important;
    }
}

@media(max-width:420px){

    .r48-prev,
    .r48-next{
        display:none !important;
    }

    .r48-song-title{
        max-width:190px !important;
    }
}

/* END PLAYER V48 */

/* V48 TEK SARKI ADI FIX */
.r48-player #nowPlayingTitle,
.r48-player #nowPlayingTitleTrack,
.r48-player #nowPlayingArtist,
.r48-player #nowPlayingArtistTrack{
    display:none !important;
}

.r48-song-title #r48SingleNowPlaying{
    display:block !important;
    max-width:390px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:18px !important;
}

.r48-station-status{
    display:block !important;
    color:#7f8ca1 !important;
    font-size:8px !important;
    white-space:nowrap !important;
}

@media(max-width:600px){
    .r48-song-title #r48SingleNowPlaying{
        max-width:180px !important;
        font-size:10px !important;
    }
}