/* ==========================================
   UYKU SESLERİ - Responsive v2.0
   ========================================== */

@media (max-width: 768px) {
    .sleep-page {
        padding: 0 16px 170px;
    }

    .sleep-grid {
        gap: 12px;
    }

    .sleep-sound-card {
        max-width: 90px;
    }

    .sound-card-icon {
        font-size: 1.8rem;
    }

    .sound-card-name {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .sleep-page {
        padding: 0 10px 160px;
    }

    .sleep-header {
        padding: 10px 0 4px;
    }

    .sleep-title {
        font-size: 1.2rem;
    }

    .sleep-subtitle {
        font-size: 0.68rem;
    }

    .sleep-back-btn {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

    .sleep-header-moon {
        font-size: 1.4rem;
    }

    .sleep-grid {
        gap: 10px;
        padding: 8px 0 4px;
    }

    .sleep-sound-card {
        max-width: 85px;
        padding: 8px;
        gap: 3px;
    }

    .sound-card-icon {
        font-size: 1.6rem;
        margin-bottom: 1px;
    }

    .sound-card-name {
        font-size: 0.55rem;
    }

    .sound-card-badge {
        font-size: 0.5rem;
        top: -2px;
        right: 1px;
    }

    .sleep-safety-tip {
        margin: 4px 0 2px;
    }

    .safety-tip-header {
        padding: 6px 10px;
        gap: 6px;
    }

    .safety-tip-title {
        font-size: 0.6rem;
    }

    .safety-tip-list li {
        font-size: 0.56rem;
    }

    .safety-tip-source {
        font-size: 0.48rem;
    }

    .sleep-now-playing {
        padding: 5px 10px;
        margin: 2px 0 4px;
    }

    .now-playing-text {
        font-size: 0.6rem;
    }

    /* Player bar kompakt */
    .player-content {
        padding: 12px 14px;
        border-radius: 16px;
    }

    .player-emoji {
        font-size: 1.2rem;
    }

    .player-name {
        font-size: 0.82rem;
    }

    .player-play-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .player-stop-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .player-volume {
        margin-bottom: 10px;
    }

    .sort-chip {
        padding: 5px 11px;
        font-size: 0.58rem;
    }

    .timer-chip {
        padding: 4px 10px;
        font-size: 0.65rem;
    }

    .timer-display {
        font-size: 0.72rem;
        padding: 3px 8px;
    }
}

@media (max-width: 360px) {
    .sleep-page {
        padding: 0 8px 150px;
    }

    .sleep-title {
        font-size: 1.05rem;
    }

    .sleep-subtitle {
        font-size: 0.62rem;
    }

    .sleep-header-moon {
        font-size: 1.2rem;
    }

    .sleep-grid {
        gap: 8px;
        padding: 6px 0 4px;
    }

    .sleep-sound-card {
        max-width: 78px;
        padding: 6px;
        gap: 2px;
    }

    .sound-card-icon {
        font-size: 1.4rem;
        margin-bottom: 0;
    }

    .sound-card-name {
        font-size: 0.48rem;
    }

    .sound-card-badge {
        font-size: 0.45rem;
        top: -2px;
        right: 0;
    }

    .sound-card-wave {
        height: 8px;
    }

    .wave-bar {
        width: 2px;
    }

    .safety-tip-header {
        padding: 5px 8px;
    }

    .safety-tip-title {
        font-size: 0.55rem;
    }

    .safety-tip-list li {
        font-size: 0.5rem;
    }

    .sleep-now-playing {
        padding: 4px 8px;
        margin: 2px 0 4px;
    }

    .now-playing-dot {
        width: 6px;
        height: 6px;
    }

    .now-playing-text {
        font-size: 0.55rem;
    }

    /* Player bar daha kompakt */
    .player-content {
        padding: 10px 12px;
        border-radius: 14px;
    }

    .player-top {
        margin-bottom: 8px;
    }

    .player-emoji {
        font-size: 1rem;
    }

    .player-name {
        font-size: 0.75rem;
    }

    .player-play-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .player-stop-btn {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
        border-radius: 8px;
    }

    .player-volume {
        margin-bottom: 8px;
        gap: 6px;
    }

    .sort-chip {
        padding: 5px 9px;
        font-size: 0.52rem;
    }

    .timer-chips {
        gap: 4px;
    }

    .timer-chip {
        padding: 3px 8px;
        font-size: 0.6rem;
        border-radius: 10px;
    }

    .timer-display {
        font-size: 0.65rem;
        padding: 3px 7px;
    }

    .sleep-player-bar {
        padding: 0 10px 14px;
    }

}