/**
 * Radio Player Footer CSS
 * Temizlenmiş ve optimize edilmiş versiyon
 */

/* Radio Player Container - Küçültülmüş */
.radio-player-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 25%, #ff8c42 50%, #ffa726 75%, #ffb74d 100%);
    padding: 4px 0; /* 8px'den 4px'e düşürüldü */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); /* Gölge küçültüldü */
    z-index: 1000;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.radio-player-footer.hidden {
    transform: translateY(100%);
}

.radio-player-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* 20px'den 15px'e düşürüldü */
    display: flex;
    align-items: center;
    justify-content: center; /* space-between'den center'a değiştirildi - play tuşu ortaya çekildi */
    gap: 20px; /* 30px'den 20px'e düşürüldü */
    width: 100%;
    max-width: 100%;
}

/* Sol Taraf - Radyo Bilgileri - Küçültülmüş */
.radio-info {
    display: flex;
    align-items: center;
    gap: 15px; /* 20px'den 15px'e düşürüldü */
    flex: 0 1 auto; /* flex: 1'den değiştirildi - daha az yer kaplar */
    order: 1; /* Sola çekmek için order eklendi */
}

.radio-logo {
    width: 35px; /* 45px'den 35px'e düşürüldü */
    height: 35px; /* 45px'den 35px'e düşürüldü */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px; /* 8px'den 6px'e düşürüldü */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3); /* 2px'den 1px'e düşürüldü */
}

.radio-logo i {
    font-size: 16px; /* 20px'den 16px'e düşürüldü */
    color: white;
}

.radio-details {
    color: white;
}

.radio-name {
    font-size: 14px; /* 18px'den 14px'e düşürüldü */
    font-weight: 700;
    margin: 0 0 2px 0; /* 3px'den 2px'e düşürüldü */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.radio-status {
    font-size: 11px; /* 14px'den 11px'e düşürüldü */
    margin: 0 0 4px 0; /* 8px'den 4px'e düşürüldü */
    opacity: 0.9;
    font-weight: 500;
}

.dj-info, .song-info {
    font-size: 10px; /* 12px'den 10px'e düşürüldü */
    margin: 0 0 2px 0; /* 3px'den 2px'e düşürüldü */
    opacity: 0.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.dj-info span, .song-info span {
    font-weight: 600;
    color: #ffd700;
}

/* Orta - Play Butonu - Ortaya Çekildi */
.radio-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2; /* Ortaya çekmek için order eklendi */
}

.big-play-btn {
    width: 50px; /* 60px'den 50px'e düşürüldü */
    height: 50px; /* 60px'den 50px'e düşürüldü */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.big-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.big-play-btn.playing {
    background: rgba(0, 212, 255, 0.95);
    animation: pulse 2s infinite;
}

.play-icon {
    font-size: 20px; /* 24px'den 20px'e düşürüldü */
    color: #ff6b35;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.big-play-btn.playing .play-icon {
    color: white;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Sağ - Kontroller - Küçültülmüş */
.radio-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* 15px'den 10px'e düşürüldü */
    flex-shrink: 0;
    order: 3; /* Sağa çekmek için order eklendi */
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 8px; /* 10px'den 8px'e düşürüldü */
}

.volume-btn {
    width: 32px; /* 40px'den 32px'e düşürüldü */
    height: 32px; /* 40px'den 32px'e düşürüldü */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.volume-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.volume-slider {
    display: block; /* none'dan block'a değiştirildi - ses kontrolü görünür yapıldı */
}

.volume-slider input[type="range"] {
    width: 60px; /* 80px'den 60px'e düşürüldü */
    height: 3px; /* 4px'den 3px'e düşürüldü */
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
}

.volume-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

.volume-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.request-song-btn {
    display: flex;
    align-items: center;
    gap: 6px; /* 8px'den 6px'e düşürüldü */
    padding: 6px 12px; /* 8px 15px'den 6px 12px'e düşürüldü */
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px; /* 20px'den 15px'e düşürüldü */
    color: white;
    text-decoration: none;
    font-size: 10px; /* 12px'den 10px'e düşürüldü */
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.request-song-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.request-song-btn i {
    font-size: 14px;
}

.toggle-player-btn {
    width: 32px; /* 40px'den 32px'e düşürüldü */
    height: 32px; /* 40px'den 32px'e düşürüldü */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.toggle-player-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.radio-player-footer.hidden .toggle-player-btn i {
    transform: rotate(180deg);
}

/* Show Player Button - Düzeltildi */
.show-player-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
    z-index: 99999; /* z-index daha da artırıldı */
    display: none; /* Normal durumda gizli */
    align-items: center;
    justify-content: center;
    opacity: 0; /* Normal durumda şeffaf */
    visibility: hidden; /* Normal durumda gizli */
    transform: scale(0.8); /* Normal durumda küçük */
    pointer-events: none; /* Normal durumda tıklanamaz */
}

.show-player-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.show-player-btn.visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    pointer-events: auto !important; /* Görünür olduğunda tıklanabilir */
    background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .radio-player-container {
        padding: 0 15px;
        gap: 15px;
    }
    
    .radio-info {
        gap: 15px;
    }
    
    .radio-logo {
        width: 40px;
        height: 40px;
    }
    
    .radio-logo i {
        font-size: 18px;
    }
    
    .radio-name {
        font-size: 16px;
    }
    
    .big-play-btn {
        width: 50px;
        height: 50px;
    }
    
    .play-icon {
        font-size: 20px;
    }
    
    .radio-actions {
        gap: 10px;
    }
    
    .volume-control {
        display: none;
    }
    
    .volume-slider {
        display: none;
    }
    
    .request-song-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .toggle-player-btn {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .radio-player-footer {
        padding: 6px 0;
    }
    
    .radio-player-container {
        padding: 0 10px;
        gap: 10px;
    }
    
    .radio-name {
        font-size: 14px;
    }
    
    .radio-status, .dj-info, .song-info {
        font-size: 11px;
    }
    
    .big-play-btn {
        width: 45px;
        height: 45px;
    }
    
    .play-icon {
        font-size: 18px;
    }
    
    .volume-slider {
        display: none;
    }
    
    .request-song-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* Body Padding - Küçültülmüş */
body {
    padding-bottom: 60px; /* 80px'den 60px'e düşürüldü */
}

.radio-player-footer.hidden {
    transform: translateY(100%);
}

@media (max-width: 768px) {
    body {
        padding-bottom: 50px; /* 70px'den 50px'e düşürüldü */
    }
}

@media (max-width: 480px) {
    body {
        padding-bottom: 45px; /* 60px'den 45px'e düşürüldü */
    }
}