/* ============================================================
   RADIOTHEME - player.css
   Fixed bottom audio player bar
   ============================================================ */

/* ------------------------------------------------------------
   PLAYER BAR - Fixed Bottom
   ------------------------------------------------------------ */
.radio-player-bar {
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    /* Sabit yükseklik yerine min-height + padding — içerik esnekliği */
    min-height:       var(--player-height);
    height:           auto;
    /* iOS safe area (home indicator) için alt boşluk */
    padding:          0 var(--space-5) env(safe-area-inset-bottom, 0px);
    background-color: var(--color-player-bg);
    border-top:       1px solid var(--color-player-border);
    z-index:          var(--z-player);
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);
    box-shadow:       0 -4px 24px rgba(0,0,0,0.25);
    /* iOS scroll davranışı — tarayıcı chrome değişince zıplamasın */
    will-change:      transform;
    transform:        translateY(100%);
    transition:       transform var(--transition-slow);
    /* Genişlik taşmasını engelle */
    box-sizing:       border-box;
    width:            100%;
}

/* Player visible when station is active */
.radio-player-bar.is-active {
    transform: translateY(0);
}

/* ------------------------------------------------------------
   PLAYER: STATION INFO (left section)
   ------------------------------------------------------------ */
.player-station-info {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    flex:        1 1 0;      /* tüm boş alanı doldur */
    min-width:   0;           /* text-overflow için zorunlu */
    overflow:    hidden;
}

.player-station-logo-wrap {
    width:       48px;
    height:      48px;
    flex-shrink: 0;
    position:    relative;
}

.player-station-logo {
    width:         48px;
    height:        48px;
    border-radius: var(--radius-md);
    object-fit:    cover;
    flex-shrink:   0;
    display:       block;
    background:    var(--color-player-border);
}

.player-station-logo-fallback {
    width:            48px;
    height:           48px;
    border-radius:    var(--radius-md);
    background:       linear-gradient(135deg, #2a2a2a 0%, #444444 100%);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    font-family:      var(--font-display);
    font-size:        var(--font-size-lg);
    font-weight:      var(--font-weight-extrabold);
    color:            var(--color-accent);
    text-transform:   uppercase;
}

.player-station-text {
    flex:      1 1 0;
    min-width: 0;
    overflow:  hidden;
}

.player-station-name {
    font-family:    var(--font-display);
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-bold);
    color:          var(--color-player-text);
    letter-spacing: var(--letter-spacing-tight);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.player-station-meta {
    font-size:   var(--font-size-xs);
    color:       rgba(255, 255, 255, 0.5);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    margin-top:  2px;
}

/* Live badge */
.player-live-badge {
    display: none; /* kaldırıldı */
}

.player-live-badge::before {
    content:          '';
    display:          block;
    width:            5px;
    height:           5px;
    background-color: white;
    border-radius:    50%;
    animation:        pulse-live 2s ease-in-out infinite;
}

/* ------------------------------------------------------------
   PLAYER: CONTROLS (center section)
   ------------------------------------------------------------ */
.player-controls {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             var(--space-3);
    flex:            0 0 auto;   /* içeriği kadar yer kaplasın */
    margin-left:     auto;
}

/* Main play/pause button */
.player-btn-play {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            48px;
    height:           48px;
    border-radius:    50%;
    background-color: var(--color-accent);
    color:            white;
    border:           none;
    cursor:           pointer;
    transition:       all var(--transition-spring);
    flex-shrink:      0;
}

.player-btn-play:hover {
    background-color: var(--color-accent-light);
    transform:        scale(1.08);
    box-shadow:       var(--shadow-accent);
}

.player-btn-play:active {
    transform: scale(0.95);
}

.player-btn-play svg {
    width:  20px;
    height: 20px;
    fill:   currentColor;
}

/* Secondary control buttons */
.player-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background:       none;
    color:            rgba(255, 255, 255, 0.6);
    border:           none;
    cursor:           pointer;
    transition:       all var(--transition-fast);
}

.player-btn:hover {
    color:            white;
    background-color: rgba(255, 255, 255, 0.1);
}

.player-btn svg {
    width:  18px;
    height: 18px;
    fill:   none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------
   PLAYER: PROGRESS (stream indicator)
   ------------------------------------------------------------ */
.player-progress-wrap {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    flex:            0 0 200px;
}

/* For live streams: animated bar */
.player-live-indicator {
    flex:         1;
    height:       3px;
    background:   rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    overflow:      hidden;
    position:      relative;
}

.player-live-indicator::after {
    content:          '';
    position:         absolute;
    left:             -50%;
    top:              0;
    width:            50%;
    height:           100%;
    background:       linear-gradient(
        90deg,
        transparent 0%,
        var(--color-accent) 50%,
        transparent 100%
    );
    animation:        stream-pulse 2s linear infinite;
}

@keyframes stream-pulse {
    0%   { left: -50%; }
    100% { left: 150%; }
}

/* Buffering state */
.player-buffering .player-live-indicator::after {
    animation-duration: 0.8s;
}

/* ------------------------------------------------------------
   PLAYER: VOLUME (right section)
   ------------------------------------------------------------ */
.player-volume {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex:        0 0 160px;
    justify-content: flex-end;
}

.player-volume-btn {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       32px;
    height:      32px;
    background:  none;
    border:      none;
    color:       rgba(255, 255, 255, 0.6);
    cursor:      pointer;
    transition:  color var(--transition-fast);
    flex-shrink: 0;
}

.player-volume-btn:hover {
    color: white;
}

.player-volume-btn svg {
    width:  18px;
    height: 18px;
    fill:   currentColor;
}

/* Volume slider */
.player-volume-slider {
    -webkit-appearance: none;
    appearance:         none;
    width:              100px;
    height:             3px;
    background:         rgba(255, 255, 255, 0.2);
    border-radius:      var(--radius-full);
    outline:            none;
    cursor:             pointer;
}

.player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              14px;
    height:             14px;
    border-radius:      50%;
    background:         white;
    cursor:             pointer;
    transition:         transform var(--transition-fast);
}

.player-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: var(--color-accent);
}

.player-volume-slider::-moz-range-thumb {
    width:        14px;
    height:       14px;
    border-radius: 50%;
    background:   white;
    cursor:       pointer;
    border:       none;
}

/* ------------------------------------------------------------
   PLAYER: EXTRA ACTIONS (right end)
   ------------------------------------------------------------ */
.player-actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex-shrink: 0;
}

/* Share button */
.player-btn-share {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            32px;
    height:           32px;
    background:       none;
    border:           none;
    color:            rgba(255, 255, 255, 0.5);
    cursor:           pointer;
    border-radius:    var(--radius-md);
    transition:       all var(--transition-fast);
}

.player-btn-share:hover {
    color:            white;
    background-color: rgba(255, 255, 255, 0.1);
}

.player-btn-share svg {
    width:  16px;
    height: 16px;
    fill:   none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Close/dismiss player */
.player-btn-close {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            28px;
    height:           28px;
    background:       rgba(255, 255, 255, 0.08);
    border:           none;
    border-radius:    var(--radius-md);
    color:            rgba(255, 255, 255, 0.5);
    cursor:           pointer;
    transition:       all var(--transition-fast);
}

.player-btn-close:hover {
    color:      white;
    background: rgba(255, 255, 255, 0.15);
}

.player-btn-close svg {
    width:  14px;
    height: 14px;
    fill:   none;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* ------------------------------------------------------------
   PLAYER: ERROR STATE
   ------------------------------------------------------------ */
.player-error-msg {
    font-size:   var(--font-size-xs);
    color:       var(--color-error);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   PLAYER: LOADING STATE
   ------------------------------------------------------------ */
.player-loading .player-btn-play {
    pointer-events: none;
}

.player-loading .player-btn-play svg {
    animation: spin 0.8s linear infinite;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .radio-player-bar {
        padding:  0 var(--space-4) env(safe-area-inset-bottom, 0px);
        gap:      var(--space-3);
        /* iOS: tarayıcı address bar kayarken fixed element kaymasın */
        bottom:   0;
        /* dvb = dynamic viewport bottom — modern iOS/Android desteği */
    }

    .player-station-info {
        flex:      1 1 0;
        max-width: none;
    }

    .player-progress-wrap {
        flex: 0 0 80px;
    }

    .player-volume {
        display: none;
    }

    .player-actions {
        gap: var(--space-1);
    }
}

@media (max-width: 480px) {
    .radio-player-bar {
        padding: 0 var(--space-3) env(safe-area-inset-bottom, 0px);
        gap:     var(--space-2);
    }

    .player-station-info {
        flex:      1 1 0;
        max-width: none;
    }

    .player-progress-wrap {
        display: none;
    }

    .player-btn-share {
        display: none;
    }

    .player-station-meta {
        display: none;
    }
}

/* ------------------------------------------------------------
   LIVE INDICATOR ANIMATION
   ------------------------------------------------------------ */
.player-live-indicator {
    width:            12px;
    height:           12px;
    background-color: transparent;
    border-radius:    50%;
    position:         relative;
}

.player-live-indicator.is-live {
    background-color: var(--color-error);
}

.player-live-indicator.is-live::before {
    content:          '';
    position:         absolute;
    top:              50%;
    left:             50%;
    transform:        translate(-50%, -50%);
    width:            100%;
    height:           100%;
    background-color: var(--color-error);
    border-radius:    50%;
    animation:        live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity:   0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(2);
        opacity:   0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity:   0.8;
    }
}

/* Player loading state */
#player-icon-loading {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error message styling */
.player-error-msg {
    position:         fixed;
    top:              100px;
    right:            var(--space-6);
    background-color: var(--color-error);
    color:            white;
    padding:          var(--space-3) var(--space-5);
    border-radius:    var(--radius-md);
    box-shadow:       var(--shadow-lg);
    z-index:          var(--z-toast);
    animation:        slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity:   0;
    }
    to {
        transform: translateX(0);
        opacity:   1;
    }
}

/* ============================================================
   NOW PLAYING — Song adı (radyo adının altında)
   ============================================================ */
.player-now-playing {
    font-size:     11px;
    font-weight:   500;
    color:         var(--color-accent, #6c63ff);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-top:    3px;
    max-width:     100%;
    min-height:    14px;
    transition:    opacity 0.3s ease;
    display:       flex;
    align-items:   center;
    justify-content: flex-start;
    gap:           4px;
}

/* Şarkı adı varken overflow geri dönsün */
.player-now-playing.has-title {
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       flex;
    justify-content: flex-start;
}

/* Şarkı adı yokken equalizer alanını koru */
.player-now-playing:empty {
    min-height: 14px;
}

/* ============================================================
   PLAYER-LIVE-DOTS — Equalizer animasyonu
   ============================================================ */

/* Varsayılan: gizli */
.player-live-dots {
    display:     none;
    align-items: flex-end;
    gap:         2px;
    height:      12px;
    flex-shrink: 0;
}

.player-live-dots span {
    display:          inline-block;
    width:            3px;
    height:           3px;
    border-radius:    2px 2px 0 0;
    background-color: var(--color-accent, #6c63ff);
    animation:        none;
}

/* Player aktif → equalizer her zaman görünür (durdurulmuş = çubuklar dipte) */
.radio-player-bar.is-active .player-live-dots {
    display: inline-flex;
}

/* Çalarken animasyon — is-playing class'ı gerekli */
.radio-player-bar.is-active.is-playing .player-live-dots.is-playing span {
    animation: rt-eq-bar 2.2s ease-in-out infinite;
}
.radio-player-bar.is-active.is-playing .player-live-dots.is-playing span:nth-child(1) { animation-delay: 0.0s; }
.radio-player-bar.is-active.is-playing .player-live-dots.is-playing span:nth-child(2) { animation-delay: 0.4s; }
.radio-player-bar.is-active.is-playing .player-live-dots.is-playing span:nth-child(3) { animation-delay: 0.8s; }
.radio-player-bar.is-active.is-playing .player-live-dots.is-playing span:nth-child(4) { animation-delay: 0.2s; }
.radio-player-bar.is-active.is-playing .player-live-dots.is-playing span:nth-child(5) { animation-delay: 0.6s; }

@keyframes rt-eq-bar {
    0%, 100% { height: 3px;  }
    25%      { height: 11px; }
    50%      { height: 5px;  }
    75%      { height: 12px; }
}

/* Şarkı adı varken equalizer'ı gizle */
.player-now-playing.has-title .player-live-dots {
    display: none !important;
}

/* Now Playing etiketi — varsayılan GİZLİ */
.player-np-label {
    display:        none;
    font-size:      10px;
    font-weight:    500;
    color:          rgba(255,255,255,0.45);
    white-space:    nowrap;
    flex-shrink:    0;
    letter-spacing: 0.02em;
}
/* Sadece çalarken VE şarkı adı yokken göster */
.radio-player-bar.is-active.is-playing .player-np-label {
    display: inline;
}
/* Şarkı adı gelince her koşulda gizle */
.player-now-playing.has-title .player-np-label {
    display: none !important;
}

/* ============================================================
   PLAYER AD BANNER
   Player aktifken (.radio-player-bar.is-active) player'ın
   hemen üstünde çıkan sticky reklam alanı.
   Desktop: 728×90 | Mobile: 320×50
   ============================================================ */

.player-ad-banner {
    position:        fixed;
    bottom:          0;           /* player ile birlikte taşır */
    left:            0;
    right:           0;
    z-index:         calc(var(--z-player, 500) - 1);
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--color-player-bg, #141414);
    border-top:      1px solid rgba(255,255,255,0.08);
    padding:         6px 12px;
    box-sizing:      border-box;

    /* Başlangıçta gizli — player aktifleşince yukarı itilir */
    transform:       translateY(100%);
    opacity:         0;
    pointer-events:  none;
    transition:      transform 0.35s cubic-bezier(0.4,0,0.2,1),
                     opacity   0.35s ease;
    will-change:     transform;
}

/* Player aktif → banner görünür, player'ın üstüne kayar */
.radio-player-bar.is-active ~ .player-ad-banner,
body.player-active .player-ad-banner {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
    bottom:         var(--player-height, 72px);
}

/* Closeıldığında */
.player-ad-banner.is-closed {
    transform:      translateY(100%) !important;
    opacity:        0 !important;
    pointer-events: none !important;
}

/* İç reklam container */
.player-ad-banner ins,
.player-ad-banner > div:not(.player-ad-close):not(.player-ad-placeholder) {
    display:    block;
    max-width:  728px;
    width:      100%;
    margin:     0 auto;
    line-height: 0;
}

/* Placeholder (reklam kodu yokken) */
.player-ad-placeholder {
    width:           728px;
    max-width:       100%;
    height:          90px;
    background:      rgba(255,255,255,0.04);
    border:          1px dashed rgba(255,255,255,0.12);
    border-radius:   4px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255,255,255,0.25);
    font-size:       11px;
    letter-spacing:  0.05em;
}

/* Closema butonu */
.player-ad-close {
    position:         absolute;
    top:              4px;
    right:            8px;
    width:            20px;
    height:           20px;
    background:       rgba(255,255,255,0.1);
    border:           none;
    border-radius:    50%;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          0;
    color:            rgba(255,255,255,0.5);
    transition:       background 0.2s, color 0.2s;
    flex-shrink:      0;
}
.player-ad-close:hover { background: rgba(255,255,255,0.18); color: #fff; }
.player-ad-close svg   { width: 10px; height: 10px; display: block; }

/* ── Mobile (≤600px): 320×50 boyutuna geç ── */
@media (max-width: 600px) {
    .player-ad-placeholder {
        width:  320px;
        height: 50px;
    }
    .player-ad-banner {
        padding: 4px 8px;
    }
    body.player-active .player-ad-banner,
    .radio-player-bar.is-active ~ .player-ad-banner {
        bottom: var(--player-height, 72px);
    }
}

/* ── Body padding: player + banner yüksekliği kadar boşluk ── */
/* bu kuralı JS yönetir (banner açıksa ekstra padding) */
body.player-active.banner-visible {
    padding-bottom: calc(
        var(--player-height, 72px) +
        90px +                       /* desktop banner yüksekliği */
        12px +
        env(safe-area-inset-bottom, 0px)
    );
}
@media (max-width: 600px) {
    body.player-active.banner-visible {
        padding-bottom: calc(
            var(--player-height, 72px) +
            50px +
            8px +
            env(safe-area-inset-bottom, 0px)
        );
    }
}

/* ============================================================
   PLAYER HATA MESAJI + RETRY BUTONU
   ============================================================ */

.player-error-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        1 1 auto;
    min-width:   0;
    padding:     0 8px;
}

.player-error-text {
    font-size:     12px;
    color:         #ff6b6b;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    flex:          1 1 auto;
}

.player-retry-btn {
    display:          flex;
    align-items:      center;
    gap:              4px;
    padding:          5px 10px;
    background:       rgba(255,255,255,0.1);
    border:           1px solid rgba(255,255,255,0.2);
    border-radius:    20px;
    color:            #fff;
    font-size:        11px;
    font-weight:      600;
    cursor:           pointer;
    white-space:      nowrap;
    flex-shrink:      0;
    transition:       background 0.2s;
}
.player-retry-btn:hover { background: rgba(255,255,255,0.18); }
.player-retry-btn svg   { width: 13px; height: 13px; flex-shrink: 0; }