#spotify{

width:95%;
max-width:1400px;

margin:auto;

margin-top:80px;

}
h1,h2{
    
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    color: #d0d0d0;
    text-shadow: #0d0d0d 3px 3px;
    margin: 0 0 0.3em;
    transition: 0.3s ease;


   
}
h1:hover, h2:hover{
   
    color: #ffffff;
    transform: translateY(-3px); 
    text-shadow:
        0 0 8px rgba(0, 140, 255, 0.7),
        0 0 15px rgba(0, 140, 255, 0.5),
        0 0 25px rgba(0, 140, 255, 0.3);
}

.latest-release{

margin-bottom:80px;

}

.spotify-feature{

display:flex;

gap:40px;

align-items:center;

background:linear-gradient(145deg,#1a1a1a,#0d0d0d);

border-radius:20px;

padding:25px;

border:2px solid rgba(120,120,120,.3);

box-shadow:
0 20px 45px rgba(0,0,0,.8),
0 0 35px rgba(0,140,255,.4);

transition:.4s;

}

.spotify-feature:hover{

transform:translateY(-6px);

box-shadow:
0 30px 55px rgba(0,0,0,.9),
0 0 55px rgba(0,140,255,.7);

}

.spotify-feature img{

width:320px;

border-radius:18px;

}

.spotify-info{

flex:1;

}

.spotify-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:35px;

}

.spotify-card{

padding:20px;

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

border-radius:18px;

border:2px solid rgba(120,120,120,.25);

box-shadow:
0 15px 30px rgba(0,0,0,.8),
0 0 20px rgba(0,140,255,.25);

transition:.35s;

}

.spotify-card:hover{

transform:translateY(-8px);

box-shadow:
0 25px 45px rgba(0,0,0,.9),
0 0 40px rgba(0,140,255,.6);

}

.spotify-card img{

width:100%;

border-radius:15px;

margin-bottom:18px;

}

.spotify-card h3{

text-align:center;

color:#ddd;

margin-bottom:10px;

font-size:22px;

text-shadow:
0 0 8px rgba(0,140,255,.4);

}

.spotify-card p{

margin-bottom:15px;

}
.spotify-hidden{

display:none;

}

.spotify-pagination{

display:flex;

align-items:center;

justify-content:center;

gap:20px;

margin-top:40px;

}

.spotify-page-btn{

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

color:#ddd;

border:2px solid rgba(120,120,120,.3);

border-radius:50px;

padding:12px 28px;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.3s;

box-shadow:
0 10px 25px rgba(0,0,0,.7),
0 0 20px rgba(0,140,255,.2);

}

.spotify-page-btn:disabled{

opacity:.35;

cursor:not-allowed;

transform:none !important;

box-shadow:none;

}

.spotify-page-btn:not(:disabled):hover{

transform:translateY(-3px);

border-color:rgba(0,140,255,.6);

box-shadow:
0 18px 35px rgba(0,0,0,.8),
0 0 35px rgba(0,140,255,.6);

}

.spotify-page-info{

font-size:15px;

color:#aaa;

min-width:60px;

text-align:center;

letter-spacing:.5px;

}
#spotify-next{
    color: white;
}
.spotify-info h3 {
    color: #ffffff;
}

.spotify-info p {
    color: #aaa;
}

/* ============================================
   MOBIL FINOMÍTÁS (<=760px)
   A kép+szöveg vízszintes elrendezés helyett a kép kerül
   fölülre, minden középre igazítva, hogy ne préselődjön össze.
   ============================================ */
@media (max-width: 760px) {
    #spotify {
        margin-top: 50px;
    }

    .spotify-feature {
        flex-direction: column;
        text-align: center;
        padding: 18px;
        gap: 18px;
    }

    .spotify-feature img {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .spotify-info {
        width: 100%;
    }

    .spotify-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .spotify-pagination {
        gap: 12px;
    }

    .spotify-page-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .spotify-feature img {
        max-width: 220px;
    }
}