* {
    box-sizing:border-box;
}


body {

    margin:0;

    background:#090909;

    color:#e8d6b0;

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

}



header {

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 70px;

}



.logo {

    font-size:28px;

    letter-spacing:5px;

    color:#d4a35a;

}


.logo span {

    color:#ffffff;

    font-weight:300;

}




.live {

    font-size:12px;

    letter-spacing:4px;

    color:#d4a35a;

    display:flex;

    align-items:center;

}



.live span {

    width:8px;

    height:8px;

    background:#d45a5a;

    border-radius:50%;

    margin-right:10px;

    animation:onairPulse 1.8s infinite;

}



@keyframes onairPulse {

0%{
opacity:.4;
transform:scale(.8);
}

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

100%{
opacity:.4;
transform:scale(.8);
}

}





main {

    padding:30px 70px;

}




.radio-layout {

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:80px;

    align-items:center;

}




.artwork {

    width:420px;

    height:420px;

    background:
    linear-gradient(145deg,#1b1b1b,#050505);

    border:1px solid #2b2b2b;

    display:flex;

    justify-content:center;

    align-items:center;

}



.art-inner {

    text-align:center;

    font-size:80px;

    letter-spacing:15px;

    color:#d4a35a;

}



.art-inner small {

    display:block;

    margin-top:20px;

    font-size:12px;

    letter-spacing:6px;

    color:#777;

}




.eyebrow {

    font-size:11px;

    letter-spacing:6px;

    color:#777;

    margin-bottom:40px;

}




.label {

    font-size:10px;

    letter-spacing:4px;

    color:#777;

    margin-top:20px;

}




h1 {

    font-size:42px;

    font-weight:300;

    margin:10px 0;

    color:#fff;

}



h2 {

    font-size:22px;

    font-weight:400;

    color:#d4a35a;

}




.play-button {

    margin-top:35px;

    width:160px;

    height:48px;

    border-radius:30px;

    border:1px solid #d4a35a;

    background:none;

    color:#d4a35a;

    letter-spacing:4px;

}



.play-button:hover {

    background:#d4a35a;

    color:#111;

}




.vu-meter {

    margin-top:35px;

    height:55px;

    display:flex;

    gap:5px;

    align-items:flex-end;

}



.vu-wrapper {

    height:55px;

    display:flex;

    align-items:flex-end;

    position:relative;

}



.vu-bar {

    width:4px;

    height:15px;

    background:#d4a35a;

}



.vu-peak {

    display:none;

}




.stream-info {

    margin-top:35px;

    display:flex;

    gap:30px;

    font-size:11px;

    letter-spacing:3px;

    color:#888;

}




.queue-section {

    max-width:1100px;

    margin:70px auto;

}



.queue-title {

    font-size:12px;

    letter-spacing:5px;

    color:#777;

}



#queue p {

    border-bottom:1px solid #222;

    padding:15px 0;

    color:#aaa;

}




@media(max-width:900px){


.radio-layout {

    grid-template-columns:1fr;

}


.artwork {

    width:100%;

}


header {

padding:30px;

}


main {

padding:30px;

}


}



/* RIST PREMIUM CARD */

.radio-layout {

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.01)
    );

    border:1px solid rgba(212,163,90,0.15);

    border-radius:24px;

    padding:55px;

    box-shadow:
    0 40px 80px rgba(0,0,0,.5);

}



/* ARTWORK */

.artwork {

    border-radius:20px;

    overflow:hidden;

    position:relative;

    background:
    radial-gradient(
        circle at center,
        #3a2b18,
        #080808 65%
    );

}


.artwork:after {

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle,
        rgba(212,163,90,.18),
        transparent 55%
    );

}



.art-inner {

    position:relative;

    z-index:2;

    text-shadow:
    0 0 40px rgba(212,163,90,.35);

}



/* PLAYER */

.radio-panel {

    padding-left:20px;

}



.eyebrow {

    color:#d4a35a;

}



h1 {

    letter-spacing:1px;

}



h2 {

    margin-bottom:30px;

}



/* PLAY BUTTON */

.play-button {

    height:56px;

    width:180px;

    background:
    rgba(212,163,90,.05);

    transition:.3s;

}



.play-button:hover {

    transform:translateY(-2px);

    box-shadow:
    0 10px 30px rgba(212,163,90,.25);

}



/* STREAM INFO */

.stream-info span:first-child {

    color:#d4a35a;

}



/* QUEUE */

.queue-section {

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

    padding:35px;

    border-radius:20px;

}


#queue p {

    transition:.3s;

}


#queue p:hover {

    color:#d4a35a;

    padding-left:10px;

}




.vu-peak {

    display:block;

    position:absolute;

    width:4px;

    height:4px;

    background:#fff0c2;

    border-radius:50%;

    opacity:0;

    box-shadow:
    0 0 8px #d4a35a;

}


.vu-peak.show {

    opacity:1;

}



.play-button {

    width:190px;

    height:60px;

    font-size:13px;

}



.vu-peak {

    width:3px;
    height:3px;

    background:#fff6dc;

    box-shadow:
    0 0 10px rgba(212,163,90,.9);

    transition:
    opacity .4s,
    bottom .2s;

}


.vu-meter {

    margin-top:45px;

    gap:7px;

}


.vu-bar {

    width:5px;

}



.cover-image {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



.artwork {

    overflow:hidden;

}


.cover-image {

    transition:transform 20s ease;

    animation:slowZoom 25s infinite alternate;

}



@keyframes slowZoom {

from {

    transform:scale(1);

}


to {

    transform:scale(1.06);

}

}



.artwork:before {

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at center,
    transparent 40%,
    rgba(0,0,0,.45)
    );

    z-index:2;

    pointer-events:none;

}




.artwork {
    position:relative;
}


.cover-image {
    position:relative;
    z-index:1;
}


.artwork:before {
    z-index:2;
    pointer-events:none;
}



.artwork {
    position:relative;
    overflow:hidden;
}


.artwork .cover-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    z-index:1;
}


.artwork:before {
    z-index:2;
    pointer-events:none;
}



.artwork {
    position:relative;
    overflow:hidden;
}


.artwork .cover-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    z-index:1;
}


.artwork:before {
    z-index:2;
    pointer-events:none;
}



/* RIST PROGRAMS */

.programs-section {

    margin-top:80px;

    padding:40px;

    background:#111;

    border-radius:20px;

}



.programs-title {

    color:#d4a35a;

    letter-spacing:5px;

    font-size:13px;

    margin-bottom:35px;

}



.program-grid {

    display:grid;

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

    gap:20px;

}



.program-card {

    border:1px solid rgba(212,163,90,.25);

    padding:25px;

    min-height:160px;

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

    transition:.3s ease;

}



.program-card:hover {

    border-color:#d4a35a;

    transform:translateY(-5px);

}



.program-card h3 {

    color:#fff0c2;

    font-size:18px;

    font-weight:400;

    margin-top:0;

}



.program-card p {

    color:#999;

    font-size:14px;

    line-height:1.6;

}



footer {

    margin-top:80px;

    text-align:center;

    color:#777;

    letter-spacing:5px;

    padding-bottom:50px;

}



@media(max-width:900px){

.program-grid {

    grid-template-columns:1fr;

}

}




/* RIST IDENTITY */


.rist-identity {

    margin-top:90px;

    text-align:center;

    padding:60px 20px;

}



.rist-name {

    color:#d4a35a;

    font-size:18px;

    letter-spacing:8px;

    margin-bottom:25px;

}



.rist-identity h2 {

    color:#fff0c2;

    font-size:34px;

    font-weight:300;

    letter-spacing:3px;

    margin:0 0 20px;

}



.rist-identity p {

    color:#888;

    font-size:16px;

    line-height:2;

    letter-spacing:2px;

}




/* FINAL RIST RADIO LAYOUT */

body {
    background:#0b0b0b;
}


.radio-layout {
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    justify-content:center;
    gap:45px;
    max-width:1100px;
    margin:40px auto;
    padding:0 30px;
}


.artwork {
    width:400px;
    height:400px;
    flex-shrink:0;
}


.cover-image {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:4px;
}


.radio-panel {
    max-width:400px;
    padding-top:25px;
}


.queue-section {
    max-width:800px;
    margin:60px auto;
    text-align:center;
}


.programs-section {
    max-width:1000px;
    margin:80px auto;
}


.program-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}


.rist-identity {
    margin-top:100px;
    text-align:center;
}


@media(max-width:900px){

.radio-layout {
    flex-direction:column !important;
}


.artwork {
    width:90vw;
    height:90vw;
}


.program-grid {
    grid-template-columns:1fr;
}

}



/* ONLINE STATUS */

.stream-info {
    margin-top:25px;
    display:flex;
    align-items:center;
}


.online-status {
    display:flex;
    align-items:center;
    gap:10px;
    color:#d4a35a;
    font-size:12px;
    letter-spacing:5px;
}


.online-dot {
    width:8px;
    height:8px;
    background:#20d760;
    border-radius:50%;
    display:inline-block;
    box-shadow:0 0 10px #20d760;
}




/* FINAL POLISH - ONLINE STATUS */

.stream-info {
    display:none;
}


.stream-info span:first-child {
    display:flex;
}


/* ONLINE green dot */

.stream-info span:first-child::first-letter {
    color:#00ff66;
}


/* move online slightly up */

.stream-info {
    margin-top:-10px;
}


/* RIST logo stronger */

.logo {
    font-weight:300;
}

.logo:first-letter {
    font-weight:800;
}


.logo span {
    font-weight:300;
}




/* FINAL POLISH - ONLINE STATUS */

.stream-info {
    display:none;
}


.stream-info span:first-child {
    display:flex;
}


/* ONLINE green dot */

.stream-info span:first-child::first-letter {
    color:#00ff66;
}


/* move online slightly up */

.stream-info {
    margin-top:-10px;
}


/* RIST logo stronger */

.logo {
    font-weight:300;
}

.logo:first-letter {
    font-weight:800;
}


.logo span {
    font-weight:300;
}




/* FINAL POLISH */

.stream-info {
    display:flex;
    gap:0;
    margin-top:-12px;
    border-top:none;
}


.stream-info span:not(:first-child) {
    display:none;
}


/* green online dot */

.stream-info span:first-child {
    color:#d4a35a;
}


.stream-info span:first-child::first-letter {
    color:#00ff66;
}


/* RIST RADIO logo */

.logo {
    font-weight:300;
}


.logo::first-line {
    letter-spacing:6px;
}


.logo {
    color:#ffffff;
}


.logo {
    font-weight:300;
}




/* ONLINE FINAL POSITION */

.stream-info {
    position:relative;
    margin-top:20px;
    transform:translateY(0);
}


.stream-info span:first-child {
    color:#d4a35a;
}


.stream-info span:first-child::before {
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    background:#00ff66;
    border-radius:50%;
    margin-right:10px;
    box-shadow:0 0 8px #00ff66;
}




.logo .rist-word {
    font-weight:800;
    letter-spacing:4px;
}

.logo span:last-child {
    font-weight:300;
}




/* remove duplicate online dot */
.stream-info span:first-child {
    color:#d4a35a;
}

.stream-info span:first-child::before {
    display:none;
}

.stream-info span:first-child::after {
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    background:#00ff66;
    border-radius:50%;
    margin-right:10px;
    box-shadow:0 0 8px #00ff66;
}




.stream-info span:first-child {
    color:#d4a35a;
    display:flex;
    align-items:center;
    gap:10px;
}

.stream-info span:first-child::before {
    content:"";
    width:7px;
    height:7px;
    background:#00ff66;
    border-radius:50%;
    box-shadow:0 0 8px #00ff66;
}




/* ONLINE DOT CLEAN FIX */

.stream-info span:first-child::before,
.stream-info span:first-child::after {
    content:none !important;
}

.stream-info span:first-child {
    display:flex;
    align-items:center;
    gap:10px;
    color:#d4a35a;
}

.stream-info span:first-child {
    font-size:12px;
    letter-spacing:4px;
}

.stream-info span:first-child {
    position:relative;
}

.stream-info span:first-child:before {
    content:"";
    display:block;
    width:7px;
    height:7px;
    background:#00ff66;
    border-radius:50%;
    box-shadow:0 0 8px #00ff66;
}




/* RIST LOGO FINAL */

.logo .rist-word {
    font-weight:900 !important;
    color:#ffffff;
    letter-spacing:5px;
}

.logo span:not(.rist-word) {
    font-weight:300 !important;
}




/* FORCE RIST LOGO WEIGHT */

header .logo .rist-word {
    font-family: inherit !important;
    font-weight:900 !important;
    font-size:28px !important;
    color:#ffffff !important;
    letter-spacing:5px !important;
}


header .logo span:not(.rist-word) {
    font-weight:300 !important;
    font-size:28px !important;
}




/* FINAL LOGO OVERRIDE */

header .logo .rist-word {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight:900 !important;
    color:#ffffff !important;
    letter-spacing:5px !important;
}


header .logo span:last-child {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight:300 !important;
    color:#ffffff !important;
}




.logo .rist-word {
    font-family:Arial, Helvetica, sans-serif !important;
    font-weight:900 !important;
    color:#ffffff !important;
}


.logo span:last-child {
    font-weight:300 !important;
}



.logo .rist-word {
    color:red !important;
    font-size:50px !important;
    font-weight:900 !important;
}



/* ===== RIST LOGO CLEAN FINAL ===== */

header .logo {
    font-size:28px;
    letter-spacing:5px;
    color:#ffffff;
    font-weight:300;
}


header .logo .rist-word {
    font-family:Arial, Helvetica, sans-serif;
    font-size:28px;
    font-weight:900;
    color:#ffffff;
}


header .logo span:last-child {
    font-family:Arial, Helvetica, sans-serif;
    font-size:28px;
    font-weight:300;
    color:#ffffff;
}




/* FINAL LOGO WEIGHT */

.logo .rist-word {
    font-weight:900 !important;
    color:#ffffff !important;
}


.logo span:not(.rist-word) {
    font-weight:300 !important;
}


/* FINAL ONLINE DOT */

.stream-info span:first-child::before {
    display:none !important;
}


.online-status::before {
    content:"";
    width:8px;
    height:8px;
    background:#20d760;
    border-radius:50%;
    display:inline-block;
    box-shadow:0 0 10px #20d760;
}




/* CLEAN ONLINE STATUS FINAL */

.stream-info span:first-child::before,
.stream-info span:first-child::after,
.stream-info span:first-child:before,
.stream-info span:first-child:after {
    content:none !important;
    display:none !important;
}


.online-status::before,
.online-status::after {
    content:none !important;
}


.online-status {
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}


.online-status .online-dot {
    display:inline-block !important;
    width:8px !important;
    height:8px !important;
    background:#20d760 !important;
    border-radius:50% !important;
    box-shadow:0 0 10px #20d760 !important;
}



/* FINAL ONLINE POSITION FIX */

.stream-info {
    position: relative !important;
    margin-top: 8px !important;
    transform: translateY(-8px) !important;
}


.online-status {
    align-items: center;
    line-height: 1;
}




/* ONLINE FINAL OVERRIDE */

.stream-info {
    position: relative !important;
    top: -12px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}


.online-status {
    position: relative !important;
    top: 0 !important;
    line-height: 12px !important;
}




/* FINAL STREAM INFO POSITION */

.stream-info {
    position: relative !important;
    margin-top: 12px !important;
    transform: translateY(-18px) !important;
    height: 16px !important;
}




/* FINAL ONLINE SPACING */

.stream-info {
    position: relative !important;
    transform: none !important;
    margin-top: 18px !important;
    height: auto !important;
}



.program-name {

    font-size:22px;
    font-weight:500;
    margin:8px 0 5px;
    color:#e8d6b0;

}


.category-badge {

    display:inline-block;
    margin-top:5px;

    padding:5px 14px;

    border:1px solid rgba(212,163,90,.35);
    border-radius:20px;

    font-size:10px;
    letter-spacing:3px;

    color:#d4a35a;

}



.program-card.active {

    border:1px solid #d4a35a !important;

    box-shadow:
    0 0 35px rgba(212,163,90,.35);

    background:
    rgba(212,163,90,.08);

    transform:translateY(-3px);

}



.program-card.active {

    border:1px solid #d4a35a !important;

    box-shadow:
    0 0 35px rgba(212,163,90,.35);

    background:
    rgba(212,163,90,.08);

}


.program-card.active::after {

    content:"ON AIR";

    display:block;

    margin-top:15px;

    font-size:10px;

    letter-spacing:4px;

    color:#d4a35a;

}


/* RIST RADIO VOLUME CONTROL */

.player-control-row {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-top:18px;
}

.volume-control {
    display:flex;
    align-items:center;
    gap:9px;
}

.volume-button {
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(212,163,90,.45);
    background:rgba(212,163,90,.08);
    color:#d4a35a;
    font-size:16px;
    cursor:pointer;
}

.volume-button:hover {
    background:rgba(212,163,90,.17);
}

#volumeSlider {
    width:115px;
    margin:0;
    padding:0;
    cursor:pointer;
    accent-color:#d4a35a;
}

#volumePercent {
    min-width:38px;
    color:#d4a35a;
    font-size:11px;
    letter-spacing:1px;
}

@media (max-width:700px) {
    .player-control-row {
        flex-direction:column;
        align-items:flex-start;
    }
}

/* RIST RADIO TRACK PROGRESS */

.track-progress {
    width:100%;
    max-width:560px;
    margin:28px 0 16px;
}

.track-progress-times {
    display:flex;
    justify-content:space-between;
    color:#d4a35a;
    font-size:12px;
    letter-spacing:1px;
    margin-bottom:8px;
}

.track-progress-bar {
    position:relative;
    width:100%;
    height:5px;
    background:rgba(255,255,255,.15);
    border-radius:10px;
}

#trackProgressFill {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0%;
    background:#d4a35a;
    border-radius:10px;
}

#trackProgressKnob {
    position:absolute;
    top:50%;
    left:0%;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#d4a35a;
    transform:translate(-50%,-50%);
    box-shadow:0 0 12px rgba(212,163,90,.35);
}

@media (max-width:700px) {
    .track-progress {
        max-width:100%;
    }
}

/* =========================================================
   RIST RADIO PREMIUM PLAYER CONTROLS
   ========================================================= */

.track-progress-bar {
    height:6px !important;
    cursor:default;
}

#trackProgressFill {
    box-shadow:0 0 12px rgba(212,163,90,.28);
}

#trackProgressKnob {
    width:11px !important;
    height:11px !important;
    opacity:.35;
    transition:
        opacity .2s ease,
        transform .2s ease;
}

.track-progress:hover #trackProgressKnob {
    opacity:1;
    transform:translate(-50%,-50%) scale(1.2);
}

.player-control-row {
    width:100%;
    max-width:560px;
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
    margin-top:24px;
}

.control-spacer {
    min-width:1px;
}

.premium-play-button {
    width:70px !important;
    height:70px !important;
    min-width:70px;
    padding:0 !important;
    border-radius:50% !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:23px !important;
    letter-spacing:0 !important;
    line-height:1;
}

.volume-control {
    justify-self:end;
    display:flex;
    align-items:center;
    gap:9px;
}

.volume-button {
    flex-shrink:0;
}

.cover-image {
    transition:
        opacity .32s ease,
        transform .38s ease;
}

.cover-image.cover-changing {
    opacity:.15;
    transform:scale(1.025);
}

.up-next-line {
    width:100%;
    max-width:560px;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    gap:12px;
    overflow:hidden;
}

.up-next-label {
    color:#777;
    font-size:10px;
    letter-spacing:3px;
    flex-shrink:0;
}

#upNextTitle {
    color:#d4a35a;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media (max-width:700px) {
    .player-control-row {
        display:flex !important;
        flex-direction:column;
        align-items:center !important;
    }

    .control-spacer {
        display:none;
    }

    .volume-control {
        justify-self:auto;
    }

    .up-next-line {
        justify-content:center;
    }
}

/* Volume aligned with track progress */

.progress-volume-row {
    width:100%;
    max-width:650px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:end;
    gap:22px;
    margin:28px 0 16px;
}

.progress-volume-row .track-progress {
    width:100%;
    max-width:none;
    margin:0;
}

.progress-volume-control {
    align-self:end;
    margin-bottom:-6px;
}

.progress-volume-control #volumeSlider {
    width:125px;
}

.player-control-row {
    grid-template-columns:1fr auto 1fr !important;
    max-width:650px !important;
    margin-top:22px !important;
}

.player-control-row .control-spacer:last-child {
    display:block;
}

@media (max-width:850px) {
    .progress-volume-row {
        grid-template-columns:1fr;
        align-items:stretch;
        gap:16px;
    }

    .progress-volume-control {
        justify-self:end;
        margin-bottom:0;
    }
}

@media (max-width:700px) {
    .progress-volume-control {
        justify-self:center;
    }
}


/* =========================================================
   RIST RADIO — PREMIUM PLAYER LAYOUT
   ========================================================= */

/* Cover alanı */

.artwork {
    position:relative;
    isolation:isolate;
    overflow:visible;
}

.cover-blur {
    position:absolute;
    z-index:-1;
    left:-20%;
    top:-20%;
    width:140%;
    height:140%;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    filter:blur(55px) saturate(1.25);
    opacity:.34;
    transform:scale(1.08);

    border-radius:28%;
    pointer-events:none;

    transition:
        background-image .45s ease,
        opacity .45s ease;
}

.cover-blur::after {
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at center,
            rgba(0,0,0,.04) 0%,
            rgba(0,0,0,.48) 75%,
            rgba(0,0,0,.78) 100%
        );
}

.cover-image {
    position:relative;
    z-index:2;

    border-radius:18px !important;

    box-shadow:
        0 28px 70px rgba(0,0,0,.5),
        0 0 70px rgba(212,163,90,.1);

    transition:
        opacity .34s ease,
        transform .42s cubic-bezier(.2,.8,.2,1),
        box-shadow .34s ease;
}


/* Program altın badge */

.program-name {
    display:inline-flex;
    align-items:center;
    gap:11px;

    width:auto;
    max-width:100%;

    margin-top:8px;
    margin-bottom:24px;

    padding:10px 18px;

    border:1px solid rgba(212,163,90,.68);
    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            rgba(212,163,90,.1),
            rgba(212,163,90,.025)
        );

    color:#e2b15e !important;

    font-size:13px !important;
    font-weight:600;
    letter-spacing:2.6px;
    text-transform:uppercase;

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

    box-shadow:
        inset 0 0 18px rgba(212,163,90,.03);
}

.program-name::before {
    content:"";
    width:11px;
    height:11px;
    flex:0 0 11px;

    border-radius:50%;
    background:#dca64d;

    box-shadow:
        0 0 9px rgba(220,166,77,.72);
}


/* Progress ayrı üst satır */

.premium-track-progress {
    width:100% !important;
    max-width:650px !important;

    margin:28px 0 22px !important;
}

.premium-track-progress .track-progress-times {
    margin-bottom:10px;
}

.premium-track-progress .track-progress-bar {
    height:7px !important;

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

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.35);
}

.premium-track-progress #trackProgressFill {
    background:
        linear-gradient(
            90deg,
            #c58c36,
            #ebb65e
        );

    box-shadow:
        0 0 14px rgba(212,163,90,.28);
}


/* Alt satır: Play/Pause + Volume */

.premium-controls-row {
    width:100%;
    max-width:650px;

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:28px;

    margin:0 0 20px;
}

.premium-play-button {
    width:74px !important;
    height:74px !important;
    min-width:74px !important;

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

    padding:0 !important;

    border:1px solid rgba(212,163,90,.9) !important;
    border-radius:50% !important;

    background:
        rgba(212,163,90,.08) !important;

    color:#e0a94f !important;

    font-size:25px !important;
    line-height:1 !important;
    letter-spacing:0 !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.24);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.premium-play-button:hover {
    transform:scale(1.055);

    background:
        rgba(212,163,90,.17) !important;

    box-shadow:
        0 14px 34px rgba(0,0,0,.3),
        0 0 24px rgba(212,163,90,.12);
}

.controls-divider {
    width:1px;
    height:58px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.13),
            transparent
        );
}

.premium-volume-control {
    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:12px;
    min-width:0;
}

.premium-volume-control .volume-button {
    width:42px;
    height:42px;
    flex:0 0 42px;

    border-color:
        rgba(212,163,90,.4);

    background:
        rgba(212,163,90,.06);
}

.premium-volume-control #volumeSlider {
    width:190px;
    max-width:24vw;
}

.premium-volume-control #volumePercent {
    min-width:42px;

    color:#dca64d;
    font-size:12px;
    letter-spacing:1px;
}


/* Up Next */

.up-next-line {
    max-width:650px !important;
    margin-top:4px !important;
    padding-top:18px !important;
}


/* Mobil */

@media (max-width:850px) {
    .premium-track-progress,
    .premium-controls-row,
    .up-next-line {
        max-width:100% !important;
    }

    .premium-volume-control #volumeSlider {
        width:150px;
        max-width:none;
    }
}

@media (max-width:600px) {
    .premium-controls-row {
        gap:16px;
    }

    .controls-divider {
        height:48px;
    }

    .premium-play-button {
        width:62px !important;
        height:62px !important;
        min-width:62px !important;
    }

    .premium-volume-control {
        gap:8px;
        flex:1;
    }

    .premium-volume-control #volumeSlider {
        width:100%;
        min-width:80px;
    }

    .cover-blur {
        opacity:.24;
        filter:blur(42px) saturate(1.2);
    }

    .program-name {
        font-size:11px !important;
        letter-spacing:1.8px;
        padding:9px 14px;
    }
}


/* =========================================================
   RIST RADIO — COVER CHANGE ROTATION
   ========================================================= */

.cover-image {
    transform-origin:center center;
    backface-visibility:hidden;
    will-change:transform, opacity;
}

.cover-image.cover-rotate-out {
    opacity:0;
    transform:
        perspective(900px)
        rotateY(82deg)
        scale(.94);
}

.cover-image.cover-rotate-in {
    animation:
        ristCoverRotateIn .48s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes ristCoverRotateIn {
    0% {
        opacity:0;
        transform:
            perspective(900px)
            rotateY(-82deg)
            scale(.94);
    }

    65% {
        opacity:1;
        transform:
            perspective(900px)
            rotateY(6deg)
            scale(1.015);
    }

    100% {
        opacity:1;
        transform:
            perspective(900px)
            rotateY(0deg)
            scale(1);
    }
}

.cover-blur {
    transition:
        background-image .45s ease,
        opacity .32s ease,
        transform .48s ease;
}

.cover-blur.blur-changing {
    opacity:.08 !important;
    transform:scale(1.16);
}

@media (prefers-reduced-motion: reduce) {
    .cover-image.cover-rotate-out,
    .cover-image.cover-rotate-in {
        animation:none !important;
        transform:none !important;
    }
}


/* =========================================================
   RIST RADIO — RECENTLY PLAYED
   ========================================================= */

.recently-played-section {
    width:min(1100px, calc(100% - 40px));
    margin:38px auto 70px;
    padding:30px;

    border:1px solid rgba(212,163,90,.2);
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 24px 60px rgba(0,0,0,.28);
}

.recently-played-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;

    margin-bottom:22px;
}

.recently-played-heading h2 {
    margin:5px 0 0;

    color:#f0f0f0;
    font-size:25px;
    font-weight:500;
    letter-spacing:.5px;
}

.recently-played-eyebrow {
    color:#d4a35a;
    font-size:10px;
    letter-spacing:4px;
}

.recently-played-count {
    color:#888;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.recently-played-list {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px 18px;
}

.recently-played-item {
    min-width:0;

    display:grid;
    grid-template-columns:30px 58px minmax(0, 1fr) auto;
    align-items:center;
    gap:13px;

    padding:10px;

    border:1px solid transparent;
    border-radius:12px;

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

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.recently-played-item:hover {
    transform:translateY(-2px);

    border-color:rgba(212,163,90,.2);
    background:rgba(212,163,90,.055);
}

.recently-played-number {
    color:#666;
    font-size:11px;
    letter-spacing:1px;
    text-align:center;
}

.recently-played-cover {
    width:58px;
    height:58px;

    object-fit:cover;

    border-radius:8px;

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

.recently-played-info {
    min-width:0;
}

.recently-played-title {
    overflow:hidden;

    color:#eee;
    font-size:14px;
    font-weight:500;

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

.recently-played-artist {
    margin-top:5px;

    overflow:hidden;

    color:#a7a7a7;
    font-size:12px;

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

.recently-played-time {
    padding-right:5px;

    color:#d4a35a;
    font-size:11px;
    letter-spacing:1px;
}

@media (max-width:800px) {
    .recently-played-list {
        grid-template-columns:1fr;
    }
}

@media (max-width:520px) {
    .recently-played-section {
        width:calc(100% - 24px);
        padding:20px 13px;
    }

    .recently-played-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .recently-played-item {
        grid-template-columns:24px 50px minmax(0, 1fr) auto;
        gap:10px;
        padding:8px;
    }

    .recently-played-cover {
        width:50px;
        height:50px;
    }
}



/* =========================================================
   RIST RADIO — TRACK INFORMATION MODAL
   ========================================================= */

.recently-played-item {
    cursor:pointer;
}

.recently-played-item:focus-visible {
    outline:1px solid rgba(212,163,90,.75);
    outline-offset:2px;
}

.track-info-modal {
    position:fixed;
    z-index:9999;
    inset:0;

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

    padding:24px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

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

.track-info-modal.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.track-info-backdrop {
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.76);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.track-info-dialog {
    position:relative;
    z-index:2;

    width:min(820px, 100%);
    max-height:calc(100vh - 48px);

    display:grid;
    grid-template-columns:320px minmax(0, 1fr);
    gap:34px;

    padding:34px;

    overflow:auto;

    border:1px solid rgba(212,163,90,.3);
    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(29,29,29,.98),
            rgba(12,12,12,.98)
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,.7);

    transform:translateY(18px) scale(.98);

    transition:transform .3s cubic-bezier(.2,.8,.2,1);
}

.track-info-modal.open .track-info-dialog {
    transform:translateY(0) scale(1);
}

.track-info-close {
    position:absolute;
    z-index:5;
    top:17px;
    right:18px;

    width:38px;
    height:38px;

    padding:0;

    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;

    background:rgba(0,0,0,.38);
    color:#ddd;

    font-size:25px;
    line-height:1;
    cursor:pointer;
}

.track-info-close:hover {
    border-color:rgba(212,163,90,.55);
    color:#d4a35a;
}

.track-info-cover-wrap {
    position:relative;
    align-self:center;
    isolation:isolate;
}

.track-info-cover-blur {
    position:absolute;
    z-index:-1;
    inset:-12%;

    background-position:center;
    background-size:cover;

    filter:blur(40px) saturate(1.2);
    opacity:.32;
}

.track-info-cover {
    display:block;

    width:100%;
    aspect-ratio:1;
    object-fit:cover;

    border-radius:17px;

    box-shadow:
        0 22px 55px rgba(0,0,0,.5);
}

.track-info-content {
    align-self:center;
    min-width:0;
}

.track-info-eyebrow {
    margin-bottom:14px;

    color:#d4a35a;
    font-size:10px;
    letter-spacing:4px;
}

.track-info-content h2 {
    margin:0;

    color:#f3f3f3;
    font-size:34px;
    font-weight:400;
    line-height:1.15;
}

.track-info-artist {
    margin-top:12px;
    margin-bottom:29px;

    color:#d4a35a;
    font-size:18px;
}

.track-info-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.track-info-field {
    min-width:0;

    padding:14px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:11px;

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

.track-info-field span {
    display:block;
    margin-bottom:7px;

    color:#777;
    font-size:9px;
    letter-spacing:2.4px;
}

.track-info-field strong {
    display:block;
    overflow:hidden;

    color:#ddd;
    font-size:13px;
    font-weight:500;

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

body.track-info-open {
    overflow:hidden;
}

@media (max-width:720px) {
    .track-info-dialog {
        grid-template-columns:1fr;
        gap:24px;
        padding:26px;
    }

    .track-info-cover-wrap {
        width:min(280px, 100%);
        margin:auto;
    }

    .track-info-content h2 {
        font-size:27px;
    }
}

@media (max-width:440px) {
    .track-info-modal {
        padding:12px;
    }

    .track-info-dialog {
        padding:22px 17px;
        border-radius:18px;
    }

    .track-info-grid {
        grid-template-columns:1fr;
    }
}


/* =========================================================
   RIST RADIO — OPEN IN PLATFORMS
   ========================================================= */

.track-open-in {
    margin-top:24px;
    padding-top:20px;

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

.track-open-in-label {
    margin-bottom:12px;

    color:#777;
    font-size:9px;
    letter-spacing:3px;
}

.track-open-in-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.track-platform-button {
    display:inline-flex;
    align-items:center;
    gap:9px;

    min-height:42px;
    padding:10px 15px;

    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;

    background:rgba(255,255,255,.03);
    color:#ddd;

    text-decoration:none;
    font-size:12px;
    font-weight:600;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.track-platform-button:hover {
    transform:translateY(-2px);
}

.track-platform-button.spotify:hover {
    border-color:rgba(30,215,96,.6);
    background:rgba(30,215,96,.08);
}

.track-platform-button.apple:hover {
    border-color:rgba(255,255,255,.35);
    background:rgba(255,255,255,.07);
}

.track-platform-button.youtube:hover {
    border-color:rgba(255,0,0,.55);
    background:rgba(255,0,0,.07);
}

.track-platform-button.spotify .platform-icon {
    color:#1ed760;
}

.track-platform-button.apple .platform-icon {
    color:#f2f2f2;
}

.track-platform-button.youtube .platform-icon {
    color:#ff3b30;
}

.platform-icon {
    font-size:15px;
    line-height:1;
}

@media (max-width:520px) {
    .track-open-in-buttons {
        flex-direction:column;
    }

    .track-platform-button {
        width:100%;
        justify-content:center;
    }
}


/* =========================================================
   RIST RADIO — EXTRA PLATFORMS
   ========================================================= */

.track-platform-button.soundcloud:hover {
    border-color:rgba(255,85,0,.65);
    background:rgba(255,85,0,.08);
}

.track-platform-button.beatport:hover {
    border-color:rgba(0,255,153,.55);
    background:rgba(0,255,153,.07);
}

.track-platform-button.soundcloud .platform-icon {
    color:#ff5500;
}

.track-platform-button.beatport .platform-icon {
    color:#00e68a;
    font-weight:800;
}


/* Ana player platform satırı */

.main-platform-links {
    width:100%;
    max-width:650px;

    display:flex;
    align-items:center;
    gap:9px;

    margin:14px 0 4px;
}

.main-platform-label {
    margin-right:4px;

    color:#777;
    font-size:9px;
    letter-spacing:2.8px;
}

.main-platform-button {
    width:32px;
    height:32px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    background:rgba(255,255,255,.025);
    color:#aaa;

    text-decoration:none;
    font-size:13px;
    font-weight:700;

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

.main-platform-button:hover {
    transform:translateY(-2px);
}

.main-platform-button.spotify:hover {
    color:#1ed760;
    border-color:rgba(30,215,96,.5);
    background:rgba(30,215,96,.07);
}

.main-platform-button.apple:hover {
    color:#fff;
    border-color:rgba(255,255,255,.35);
    background:rgba(255,255,255,.06);
}

.main-platform-button.youtube:hover {
    color:#ff3b30;
    border-color:rgba(255,59,48,.5);
    background:rgba(255,59,48,.07);
}

.main-platform-button.soundcloud:hover {
    color:#ff5500;
    border-color:rgba(255,85,0,.55);
    background:rgba(255,85,0,.07);
}

.main-platform-button.beatport:hover {
    color:#00e68a;
    border-color:rgba(0,230,138,.5);
    background:rgba(0,230,138,.07);
}

@media (max-width:600px) {
    .main-platform-links {
        flex-wrap:wrap;
    }
}


/* =========================================================
   RIST RADIO — RHYTHM REACTIVE COVER BLUR
   ========================================================= */

.cover-blur {
    --blur-scale:1.08;
    --blur-opacity:.34;
    --blur-saturation:1.25;
    --blur-brightness:.92;

    opacity:var(--blur-opacity) !important;

    filter:
        blur(55px)
        saturate(var(--blur-saturation))
        brightness(var(--blur-brightness));

    transform:
        scale(var(--blur-scale));

    transition:
        opacity .22s ease,
        transform .18s ease,
        filter .18s ease,
        background-image .45s ease;

    will-change:
        transform,
        opacity,
        filter;
}

@media (prefers-reduced-motion: reduce) {
    .cover-blur {
        --blur-scale:1.08 !important;
        --blur-opacity:.28 !important;
        --blur-saturation:1.2 !important;
        --blur-brightness:.92 !important;
    }
}

/* RIST RADIO — VISIBLE RHYTHM BLUR FIX */

.cover-blur {
    transform-origin:center center !important;
    transition:
        transform .20s ease-out,
        opacity .20s ease-out,
        filter .20s ease-out,
        background-image .45s ease !important;
}

/* Sistem Reduce Motion açık olsa bile bu dekoratif hareket çalışsın */
@media (prefers-reduced-motion: reduce) {
    .cover-blur {
        transition:
            transform .28s ease-out,
            opacity .28s ease-out,
            filter .28s ease-out,
            background-image .45s ease !important;
    }
}

/* RIST RADIO — FAST RHYTHM BLUR */

.cover-blur {
    transition:
        transform .08s linear,
        opacity .08s linear,
        filter .08s linear,
        background-image .45s ease !important;
}


/* RIST RADIO — CENTERED HEARTBEAT BLUR */

.cover-blur {
    transform-origin:center center !important;

    transition:
        transform .13s cubic-bezier(.22,.8,.3,1),
        opacity .16s ease-out,
        filter .16s ease-out,
        background-image .45s ease !important;
}


/* RIST RADIO — FAST CENTER PULSE */

.cover-blur {
    --pulse-scale:1.08;
    transform:scale(var(--pulse-scale)) !important;
    transform-origin:center center !important;
    transition:
        opacity .12s ease-out,
        filter .12s ease-out,
        background-image .45s ease !important;
}

.cover-blur.pulse-hit {
    animation:ristBlurPulse .24s cubic-bezier(.18,.85,.3,1);
}

@keyframes ristBlurPulse {
    0% {
        transform:scale(1.05);
    }

    45% {
        transform:scale(1.19);
    }

    100% {
        transform:scale(var(--pulse-scale));
    }
}


/* RIST RADIO — STRONG DOUBLE HEARTBEAT */

.cover-blur {
    transform:scale(1.03) !important;
    transform-origin:center center !important;
    opacity:.30 !important;
}

.cover-blur.strong-pulse {
    animation:
        ristStrongBlurPulse .62s
        cubic-bezier(.16,.85,.25,1)
        both !important;
}

@keyframes ristStrongBlurPulse {
    0% {
        transform:scale(1.02);
        opacity:.25;
        filter:
            blur(55px)
            saturate(1.15)
            brightness(.84);
    }

    22% {
        transform:scale(1.30);
        opacity:.58;
        filter:
            blur(48px)
            saturate(1.85)
            brightness(1.22);
    }

    40% {
        transform:scale(1.08);
        opacity:.34;
        filter:
            blur(55px)
            saturate(1.30)
            brightness(.92);
    }

    55% {
        transform:scale(1.21);
        opacity:.48;
        filter:
            blur(51px)
            saturate(1.62)
            brightness(1.10);
    }

    100% {
        transform:scale(1.03);
        opacity:.30;
        filter:
            blur(55px)
            saturate(1.20)
            brightness(.88);
    }
}


/* RIST RADIO — STRONG DOUBLE HEARTBEAT */

.cover-blur {
    transform:scale(1.03) !important;
    transform-origin:center center !important;
    opacity:.30 !important;
}

.cover-blur.strong-pulse {
    animation:
        ristStrongBlurPulse .62s
        cubic-bezier(.16,.85,.25,1)
        both !important;
}

@keyframes ristStrongBlurPulse {
    0% {
        transform:scale(1.02);
        opacity:.25;
        filter:
            blur(55px)
            saturate(1.15)
            brightness(.84);
    }

    22% {
        transform:scale(1.30);
        opacity:.58;
        filter:
            blur(48px)
            saturate(1.85)
            brightness(1.22);
    }

    40% {
        transform:scale(1.08);
        opacity:.34;
        filter:
            blur(55px)
            saturate(1.30)
            brightness(.92);
    }

    55% {
        transform:scale(1.21);
        opacity:.48;
        filter:
            blur(51px)
            saturate(1.62)
            brightness(1.10);
    }

    100% {
        transform:scale(1.03);
        opacity:.30;
        filter:
            blur(55px)
            saturate(1.20)
            brightness(.88);
    }
}



/* =========================================================
   RIST RADIO — AMBIANCE CONTROL
   ========================================================= */

.cover-blur.strong-pulse {
    animation-duration:.62s !important;
}

.ambiance-button {
    min-height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 12px;

    border:1px solid rgba(212,163,90,.35);
    border-radius:999px;

    background:rgba(212,163,90,.055);
    color:#cba05d;

    font-size:9px;
    font-weight:600;
    letter-spacing:1.5px;
    white-space:nowrap;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        opacity .2s ease;
}

.ambiance-button:hover {
    border-color:rgba(212,163,90,.7);
    background:rgba(212,163,90,.11);
}

.ambiance-dot {
    width:7px;
    height:7px;
    flex:0 0 7px;

    border-radius:50%;
    background:#d4a35a;

    box-shadow:
        0 0 8px rgba(212,163,90,.7);
}

body.ambiance-off .ambiance-button {
    color:#888;
    border-color:rgba(255,255,255,.13);
    background:rgba(255,255,255,.025);
}

body.ambiance-off .ambiance-dot {
    background:#666;
    box-shadow:none;
}

/* Ambiance kapalıyken blur görünür fakat tamamen sabit kalır */

body.ambiance-off .cover-blur,
body.ambiance-off .cover-blur.strong-pulse,
body.ambiance-off .cover-blur.pulse-hit {
    animation:none !important;
    transform:scale(1.08) !important;
    opacity:.30 !important;

    filter:
        blur(55px)
        saturate(1.22)
        brightness(.90) !important;

    transition:
        background-image .45s ease !important;
}

@media (max-width:700px) {
    .premium-controls-row {
        flex-wrap:wrap;
    }

    .ambiance-button {
        min-height:34px;
        padding:0 10px;
        font-size:8px;
    }
}


/* =========================================================
   RIST RADIO — AMBIANCE BUTTON LAYOUT FIX
   ========================================================= */

.premium-controls-row {
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    column-gap:22px;
}

.premium-volume-control {
    min-width:0;
    justify-self:start;
}

.ambiance-button {
    position:static !important;
    justify-self:end;
    margin:0 !important;
    flex-shrink:0;
    min-width:132px;
}

@media (max-width:760px) {
    .premium-controls-row {
        grid-template-columns:auto minmax(0,1fr);
        row-gap:14px;
    }

    .ambiance-button {
        grid-column:1 / -1;
        justify-self:start;
        min-width:126px;
    }
}