/* style.css */
	html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }
        body {
            background: #0f0f1a;
            color: #e0e0ff;
            font-family: 'Segoe UI', sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        main { flex: 1; }

        header {
            text-align: center;
            padding: 30px 15px 20px;
            background: linear-gradient(to bottom, #1a0033, #000);
        }
        h1 { font-size: 1.8rem; color: #00ff9d; margin-bottom: 8px; }
        header p { font-size: 1.1rem; opacity: 0.85; margin: 0; }

        .logo-slider-section {
            width: 100%;
            max-width: 520px;
            margin: 25px auto 35px;
            padding: 15px 0;
        }
        .logo-slider { width: 100% !important; }
        .logo-slide { text-align: center; outline: none; }
        .logo-slide img {
            width: 240px;
            height: 240px;
            object-fit: contain;
            border-radius: 50%;
            border: 6px solid #39ff9d;
            box-shadow: 0 15px 50px rgba(233,30,99,0.5);
            background: #000;
            display: block;
            margin: 0 auto;
        }

        .slick-list {
            margin: 0 auto !important;
            padding: 0 !important;
            overflow: visible !important;
            height: auto !important;
        }
        .slick-track {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            height: auto !important;
        }
        .slick-slide {
            float: none !important;
            display: flex !important;
            justify-content: center !important;
            height: auto !important;
            margin: 0 !important;
        }

        .slick-current img { transform: scale(1.04); border-color: #00ff9d; }
        .slick-slide:not(.slick-current) img { opacity: 0.45; transform: scale(0.82); }

        .player-section {
            text-align: center;
            margin: 20px auto 40px;
            max-width: 480px;
            padding: 30px 25px;
            background: rgba(20,20,40,0.75);
            border-radius: 24px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.7);
        }
        #playBtn {
            width: 140px;
            height: 140px;
            font-size: 70px;
            background: linear-gradient(145deg, #ff3366, #e91e63);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 15px 40px rgba(233,30,99,0.5);
            transition: all 0.3s;
            margin: 25px 0;
        }
        #playBtn:hover { transform: scale(1.06); }
        #vol {
            width: 85%;
            height: 10px;
            margin: 20px auto 15px;
            background: #333;
            border-radius: 5px;
        }
        #vol::-webkit-slider-thumb {
            width: 26px;
            height: 26px;
            background: #39ff9d;
            border-radius: 50%;
            cursor: pointer;
        }
        #status {
            font-size: 1.3rem;
            margin-top: 15px;
            color: #bbb;
        }
        .active-status { color: #ffccdd !important; }

        .stations-list {
            max-width: 600px;
            margin: 0 auto 40px;
            padding: 0 20px;
        }
        .station-item {
            padding: 14px 18px;
            background: rgba(30,30,56,0.6);
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            font-size: 1.05rem;
        }
        .station-item:hover { background: rgba(50,50,80,0.8); }
        .station-item.active {
            background: rgba(233,30,99,0.25);
            border-left: 5px solid #39ff9d;
        }

        @media (max-width: 600px) {
            .logo-slide img { width: 200px; height: 200px; }
            #playBtn { width: 120px; height: 120px; font-size: 60px; }
            .logo-slider-section { margin: 20px auto 30px; padding: 10px 0; }

/* ==================== FOOTER ==================== */
footer {
    background: #0a0a12;
    color: #bbbbbb;
    text-align: center;
    padding: 30px 15px 25px;
    margin-top: auto;           /* Muhim - pastga yopishtiradi */
    border-top: 1px solid #1f1f2e;
    width: 100%;
}

.footer-container {
    max-width: 600px;
    margin: 0 auto;
}

.footer-container p {
    margin: 6px 0;
    line-height: 1.4;
}

.footer-desc {
    font-size: 0.92rem;
    opacity: 0.75;
}

/* Mobil uchun */
@media (max-width: 600px) {
    footer {
        padding: 25px 12px 20px;
    }
    
    .footer-container p {
        font-size: 0.9rem;
    }
}
/* ==================== MOBILE OPTIMIZATION ==================== */
@media (max-width: 600px) {
    h1 { font-size: 1.35rem; line-height: 1.3; }
    header p { font-size: 0.95rem; }
    header { padding: 20px 12px 15px; }
}