/* ===== BODY ===== */

body{
margin:0;
padding-top:80px;
background:#f2f2f2;
font-family:Arial,sans-serif;
}

body2{
background:#f2f2f2;
font-family:Arial,sans-serif;
margin:0;
}

body4{
background:#f2f2f2;
font-family:Arial,sans-serif;
margin:0;
}

/* ===== HEADER OLD VERSION ===== */

.header3{
background:#2196f3;
color:#fff;
padding:10px;
font-size:20px;
font-weight:bold;
text-align:left;
}

.header3 a{
color:#fff;
text-decoration:none;
}

.header3 a:hover{
color:#fff;
text-decoration:none;
}

/* ===== HEADER MAIN ===== */

.header{
background:#2196f3;
color:#fff;
padding:10px;
font-size:20px;
font-weight:bold;
text-align:left;
}

.header a{
color:#fff;
text-decoration:none;
}

.header a:hover{
color:#fff;
text-decoration:none;
}

/* ===== HEADER BAR ===== */

.header-bar{
display:flex;
align-items:center;
justify-content:space-between;
background:#2196f3;
padding:10px;
color:#fff;

position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;

box-sizing:border-box;
flex-wrap:wrap; /* kerak bo‘lsa pastga tushadi */
}

.header-bar2{
display:flex;
align-items:center;
justify-content:space-between;
background:#2196f3;
padding:10px;
color:#fff;
}

/* ===== LOGO ===== */

.logo img{
height:40px;
width:140px;
}

/* ===== SEARCH ===== */

.search-box{
display:flex;
align-items:center;
position:relative;
}

.search-form{
width:0;
overflow:hidden;
transition:0.4s;
}

.search-form input{
width:180px;
padding:6px 10px;
border:none;
border-radius:20px;
margin-left:10px;
}

.search-box.active .search-form{
width:200px;
}

.search-btn{
padding:8px 15px;
border-radius:20px;
border:none;
background:#ff007a;
color:#fff;
font-weight:bold;
cursor:pointer;
}

/* ===== MENU BUTTON ===== */

.menu-btn{
padding:8px 15px;
border-radius:20px;
border:none;
background:#ff007a;
color:#fff;
font-weight:bold;
cursor:pointer;
}

.menu-btn span{
display:inline-block;
transform:scale(1.8);
}
.close-btn{
    position:absolute;
    top:15px;
    left:15px; /* endi o'ng tomonda emas, ichki chapga */
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

/* ===== SIDEBAR ===== */

.sidebar{
position:fixed;
top:0;
right:-300px;
width:280px;
height:100%;
background:#ff007a;
padding-top:60px;
transition:0.3s;
z-index:1000;
box-shadow:-4px 0 10px rgba(0,0,0,0.5);
}

.sidebar ul{
list-style:none;
padding:0;
margin:0;
}

.sidebar ul li{
padding:0;
}

/* ===== CATEGORY CARD ===== */

.cat-card{
background:#fff;
margin:6px 12px;
padding:12px;
border-radius:8px;
display:block;
transition:0.2s;
}

.cat-card a{
color:#4facfe;
text-decoration:none;
font-size:16px;
display:block;
}

.cat-card:hover{
background:#2a2a2a;
cursor:pointer;
}

/* ===== CONTAINER ===== */

.container {
    max-width: 100%; /* kengroq container */
overflow:hidden;
    margin: 10px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2 ustun bo‘lishi, kichik ekranlarda 1 ustun */
    gap: 5px;
}

/* ===== CATEGORY BLOCK ===== */

.category-block{
background:#fff;
padding:15px;
border-radius:15px;
box-shadow:0 2px 12px rgba(0,0,0,0.1);
}

.category-block h2{
margin-bottom:15px;
font-size:20px;
color:#4facfe;
border-bottom:2px solid #4facfe;
padding-bottom:5px;
text-align:center;
font-weight:bold;
}

/* ===== CARD ===== */

.card{
background:#fff;
margin-bottom:5px;
padding:5px;
border-radius:15px;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
transition:0.3s;
position:relative;
overflow:hidden;
}

.card:hover{
transform:translateY(-2px);
}

/* ===== SONG INFO ===== */

.song-info{
display:flex;
align-items:center;
gap:10px;
min-height:60px;
}

.text-info{
display:flex;
flex-direction:column;
justify-content:center;
line-height:1.2;
}

.text-info h3{
margin:0;
font-size:16px;
color:#ff007a;
font-weight:bold;
}

.text-info p{
margin:2px 0 0 0;
color:#363636;
font-weight:500;
font-size:14px;
}

/* ===== COVER ===== */

.cover{
width:60px;
height:60px;
position:relative;
flex-shrink:0;
}

.cover-img{
width:50%;
height:50%;
object-fit:cover;
border-radius:20px;
}

.cover2{
width:60px;
height:40px;
position:relative;
flex-shrink:0;
}

.cover-img2{
width:150px;
height:150px;

border-radius:10px;
}

/* ===== PLAY ICON ===== */

.play-icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:26px;
height:26px;
opacity:0.5;
}

/* ===== BADGES ===== */

.badge-premyera{
position:absolute;
top:50%;
right:10px;
transform:translateY(-50%);
background:linear-gradient(45deg,#4facfe,#00f2fe);
color:#fff;
font-size:12px;
font-weight:bold;
padding:4px 10px;
border-radius:10px;
}

.badge-hit{
position:absolute;
top:10px;
right:-35px;
background:#ff007a;
color:#fff;
font-size:15px;
font-weight:bold;
padding:6px 40px;
transform:rotate(45deg);
box-shadow:0 5px 6px rgba(0,0,0,0.3);
}

.badge-mp4{
position:absolute;
top:50%;
right:10px;
transform:translateY(-50%);
background:linear-gradient(45deg,#4facfe,#00f2fe);
color:#fff;
font-size:12px;
font-weight:bold;
padding:4px 10px;
border-radius:10px;
}

.badge-mp3{
position:absolute;
top:50%;
right:10px;
transform:translateY(-50%);
background:linear-gradient(45deg,#ff0000,#ff007a);
color:#fff;
font-size:12px;
font-weight:bold;
padding:4px 10px;
border-radius:10px;
}

/* ===== RIBBON ===== */

.ribbon{
position:absolute;
top:10px;
right:-30px;
transform:rotate(45deg);
color:#fff;
font-size:12px;
font-weight:bold;
padding:5px 35px;
text-align:center;
z-index:2;
}

.ribbon.hit{
background:#ff2d2d;
}

.ribbon.premyera{
background:#2b7cff;
}

/* ===== PAGINATION ===== */

.pagination{
text-align:center;
margin-top:20px;
}

.pagination a{
display:inline-block;
padding:10px 25px;
background:linear-gradient(45deg,#4a00ff,#8e2de2);
color:#fff;
text-decoration:none;
border-radius:25px;
font-weight:bold;
}

/* ===== DOWNLOAD BUTTONS ===== */

.download-container{
display:flex;
gap:10px;
}

.download-btn,
.download-btn2{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px;
border-radius:8px;
font-weight:bold;
font-size:16px;
color:#fff;
text-decoration:none;
transition:0.3s;
}

.download-btn{
background:#ff5a5f;
}

.download-btn2{
background:#2196f3;
}

.download-btn:hover,
.download-btn2:hover{
background:#2196f3;
}

/* ===== META INFO ===== */

.meta-info{
font-size:16px;
margin-top:15px;
}

.meta-row{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px dotted #aaa;
padding:6px 0;
font-weight: bold;
}

.meta-row span:first-child{
color:#333;
font-weight:bold;
}

.meta-row span:last-child{
color:#2196f3;
}

.meta-row2{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px dotted #aaa;
padding:6px 0;
font-weight:bold;
}

.meta-row2 span:first-child{
color:#333;
}

.meta-row2 span:last-child{
color:#000;
}

.meta-info2 {margin-top:15px; font-size:18px;}
.meta-info a {color:#2196f3; text-decoration:none;}
.meta-info a:hover {text-decoration:underline;}

/* ===== RATING ===== */

.rating-box{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin:15px 0;
font-size:18px;
}

.like-btn{
background:#4CAF50;
color:white;
padding:8px 15px;
border:none;
border-radius:8px;
cursor:pointer;
}

.dislike-btn{
background:#f44336;
color:white;
padding:8px 15px;
border:none;
border-radius:8px;
cursor:pointer;
}

.view-count{
background:#2196f3;
color:#fff;
padding:8px 15px;
border-radius:8px;
}

/* ===== COMMENT ===== */

.comment-box{
margin-top:30px;
}

.comment-box textarea{
width:100%;
border-radius:8px;
border:1px solid #ccc;
resize:none;
}

.comment-box button{
margin-top:10px;
padding:10px 20px;
background:#2196f3;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
}

.comment{
color:#ff5a5f;
border-bottom:1px solid #ccc;
padding:10px 0;
}

.comment .username{
color:#2196f3;
font-weight:bold;
}

/* ===== LOGIN ===== */

.login-register{
margin-top:20px;
}

.login-register input{
display:block;
width:95%;
padding:8px;
margin-bottom:10px;
border-radius:6px;
border:1px solid #ccc;
}

.login-register button{
padding:10px 20px;
background:#ff007a;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
}

/* ===== FOOTER ===== */

.footer{
background:#3D5068;
color:#fff;
text-align:center;
padding:15px;
margin-top:30px;
font-size:14px;
}

.footer a{
color:#fff;
font-size:15px;
font-weight:bold;
text-decoration:none;
}

.footers{
background:#000;
color:#fff;
text-align:left;
padding:15px;
margin-top:30px;
font-size:14px;
}

/* ===== BOTTOM PLAYER ===== */

#bottomPlayer{
position:fixed;
bottom:-120px;
left:10px;
right:10px;
background:#222;
color:#fff;
padding:10px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.5);
z-index:2000;

display:flex;
align-items:center;
justify-content:space-between;
gap:10px;

transition:bottom 0.4s ease;
}

#bottomPlayer.show{
bottom:10px;
}

#bottomPlayer button,
#bottomPlayer span,
#bottomPlayer input[type=range]{
flex:0 0 auto;
}

#bpProgress{
flex:1 1 auto;
min-width:50px;
}

#volumeContainer{
display:flex;
align-items:center;
gap:5px;
flex:0 0 auto;
}

#bpVolume{
width:80px;
min-width:60px;
}

#bpMute{
background:none;
border:none;
color:#fff;
font-size:18px;
cursor:pointer;
}

@media (max-width:480px){
#bpProgress{flex:1 1 100px;}
#bpVolume{width:60px;}
}

/* ===== CUSTOM PLAYER ===== */

.custom-player{
position:relative;
overflow:hidden;

width:100%;
height:170px;
background:url('https://kino.nurfm.uz/chatbot/uploads/69abc183e99f1_file_1772863875.jpg') no-repeat center center;
background-size:cover;

padding:20px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
color:#fff;
font-family:Arial,sans-serif;
box-sizing:border-box;
text-shadow:2px 2px 4px rgba(0,0,0,0.7);
}

/* ===== PLAYER INFO ===== */

.player-info{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
font-weight:bold;
overflow:hidden;
background:rgba(255,0,0,0.2);
}

.track-marquee-wrapper{
flex:1;
margin-top:1px;
margin-right:1px;
white-space:nowrap;
overflow:hidden;
}

.track-marquee-wrapper marquee{
font-size:18px;
margin-top:5px;
display:inline-block;
padding-right:20px;
background:rgba(255,0,0,0.2);
}

.track-count{
white-space:nowrap;
font-weight:bold;
flex-shrink:0;
}

/* ===== CONTROLS ===== */

.controls{
text-align:center;
margin-bottom:10px;
}

.controls button{
background:rgba(255,255,255,0.2);
border:none;
color:#fff;
font-size:22px;
padding:10px 15px;
margin:0 5px;
border-radius:50%;
cursor:pointer;
transition:background 0.3s;
}

.controls button:hover{
background:rgba(255,255,255,0.4);
}

/* ===== PROGRESS ===== */

.progress-container{
width:100%;
height:12px;
background:rgba(0,0,255,0.2);
border-radius:6px;
cursor:pointer;
position:relative;
}

#progress{
height:100%;
width:0%;
background:#ff007a;
border-radius:5px;
}

/* ===== TIME DISPLAY ===== */

.time-display{
display:flex;
justify-content:space-between;
font-weight:bold;
font-size:12px;
color:#fff;
margin-top:4px;
z-index:5;
background:rgba(255,0,0,0.2);
padding:2px 6px;
border-radius:5px;
}

/* ===== EQUALIZER ===== */

.equalizer{
position:absolute;
top:-35px;
left:0;
width:100%;
height:35px;
display:flex;
justify-content:space-between;
align-items:flex-end;
pointer-events:none;
}

.equalizer span{
width:3px;
height:13px;
background:#fff;
border-radius:2px;
animation:eqMove 0.8s infinite ease-in-out;
}

.equalizer span:nth-child(1){animation-delay:0s;}
.equalizer span:nth-child(2){animation-delay:0.1s;}
.equalizer span:nth-child(3){animation-delay:0.2s;}
.equalizer span:nth-child(4){animation-delay:0.3s;}
.equalizer span:nth-child(5){animation-delay:0.4s;}
.equalizer span:nth-child(6){animation-delay:0.5s;}
.equalizer span:nth-child(7){animation-delay:0.6s;}
.equalizer span:nth-child(8){animation-delay:0.7s;}
.equalizer span:nth-child(9){animation-delay:0.8s;}
.equalizer span:nth-child(10){animation-delay:0.9s;}

@keyframes eqMove{
0%{height:5px;}
50%{height:12px;}
100%{height:5px;}
}

/* ===== PLAYER PARTICLES ===== */

.custom-player2{
position:relative;
overflow:hidden;
}

.particles{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
pointer-events:none;
}

.particles span{
position:absolute;
width:6px;
height:6px;
background:rgba(255,255,255,0.7);
border-radius:50%;
animation:floatParticles 8s linear infinite;
}

.particles span:nth-child(1){left:10%;animation-delay:0s;}
.particles span:nth-child(2){left:20%;animation-delay:2s;}
.particles span:nth-child(3){left:30%;animation-delay:4s;}
.particles span:nth-child(4){left:40%;animation-delay:1s;}
.particles span:nth-child(5){left:60%;animation-delay:3s;}
.particles span:nth-child(6){left:70%;animation-delay:5s;}
.particles span:nth-child(7){left:80%;animation-delay:6s;}
.particles span:nth-child(8){left:90%;animation-delay:7s;}

@keyframes floatParticles{
0%{
transform:translateY(100%);
opacity:0;
}
10%{
opacity:1;
}
90%{
opacity:1;
}
100%{
transform:translateY(-120%);
opacity:0;
}
}

/* ===== LATEST SONG ===== */

.latest-song{
padding:8px 0;
border-bottom:1px solid #eee;
}

.latest-song a{
text-decoration:none;
color:#333;
font-size:16px;
}

.latest-song a:hover{
color:#ff007a;
}

/* ===== FIKR BLOK ===== */

.fikr{
background:#fff;
padding:30px;
box-shadow:0 4px 5px rgba(0,0,0,0.1);
margin-bottom:0;
}

/* ===== TITLES ===== */

.titles{
background:#fff;
color:#fff;
text-align:center;
padding:15px;
margin-top:30px;
font-size:14px;
}

.top5{
background:#2196f3;
color:#fff;
text-align:center;
padding:15px;
margin-top:30px;
font-weight:bold;
font-size:16px;
}

/* ===== RIBBONS ANIMATION ===== */

.custom-player{
position:relative;
overflow:hidden;
}

.ribbons{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
pointer-events:none;
}

.ribbons span{
position:absolute;
width:3px;
height:14px;
border-radius:2px;
opacity:0.8;
animation:ribbonMove 6s linear infinite;
}

.ribbons span:nth-child(1){left:5%;background:#ff007a;animation-delay:0s;}
.ribbons span:nth-child(2){left:15%;background:#00f2fe;animation-delay:1s;}
.ribbons span:nth-child(3){left:25%;background:#ffd700;animation-delay:2s;}
.ribbons span:nth-child(4){left:35%;background:#00ff9d;animation-delay:0.5s;}
.ribbons span:nth-child(5){left:45%;background:#ff3b30;animation-delay:1.5s;}
.ribbons span:nth-child(6){left:55%;background:#8e2de2;animation-delay:2.5s;}
.ribbons span:nth-child(7){left:65%;background:#4facfe;animation-delay:3s;}
.ribbons span:nth-child(8){left:75%;background:#ff9500;animation-delay:0.8s;}
.ribbons span:nth-child(9){left:85%;background:#ff2d55;animation-delay:1.8s;}
.ribbons span:nth-child(10){left:95%;background:#00c7ff;animation-delay:2.8s;}

@keyframes ribbonMove{

0%{
transform:translateY(100%) rotate(0deg);
opacity:0;
}

10%{
opacity:1;
}

50%{
transform:translateY(20%) rotate(180deg);
}

100%{
transform:translateY(-120%) rotate(360deg);
opacity:0;
}

}

/* ===== TELEGRAM BUTTON ANIMATION ===== */

.telegram-button{
border-radius:50%;
border:1px solid #ff0000;
animation:animate 1.5s cubic-bezier(0,0,0.96,0.73) infinite;
opacity:0.6;
pointer-events:none;

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

.telegram-button:before,
.telegram-button:after{

content:" ";
display:block;
position:absolute;
border-radius:50%;
border:1px solid #ff0000;

left:-20px;
right:-20px;
top:-20px;
bottom:-20px;

animation:animate 1.5s cubic-bezier(0,0,0.96,0.73) infinite;
opacity:0;

}

.telegram-button:after{
animation-delay:0.5s;
}

@keyframes animate{

0%{
transform:scale(0.5);
opacity:0;
}

50%{
opacity:1;
}

100%{
transform:scale(1.2);
opacity:0;
}

}

/* ===== BADGE ===== */

.badge-hikoya{
position:absolute;
top:8px;
left:8px;
background:#2196f3;
color:#fff;
font-size:11px;
padding:4px 6px;
border-radius:4px;
}

.badge-sher{
position:absolute;
top:8px;
left:8px;
background:#ff4081;
color:#fff;
font-size:11px;
padding:4px 6px;
border-radius:4px;
}

/* ===== ABOUT SECTION ===== */

.about-full{
width:100%;
margin-top:5px;
}

.about-box{
max-width:1200px;
margin:auto;
background:#1b1b1b;
color:#fff;
padding:25px;
border-radius:10px;
line-height:1.7;
font-size:16px;
}

.about-full2{
grid-column:1 / -1;
line-height:1.7;
font-size:15px;
}

/* Webda butun joyni egallaydi */

@media (min-width:900px){

.about-site{
grid-column:1 / -1;
}

}

/* ===== CATEGORY CARD 2 ===== */

.cat-card2{
background:#1b1b1b;
margin:6px 8px;
padding:10px 12px;
border-radius:8px;
}

.cat-card2 a{
color:#fff;
text-decoration:none;
display:block;
font-size:14px;
}

.cat-card2:hover{
background:#2a2a2a;
}

/* ===== INFO BOX ===== */

.info-box{

background:#f7efd9;
padding:25px 25px 25px 70px;
border-radius:12px;

color:#555;
font-size:15px;
line-height:1.6;

position:relative;

}

.info-box::before{

content:"i";
position:absolute;

left:20px;
top:25px;

width:36px;
height:36px;

background:#f5a261;
color:#fff;

font-weight:bold;
font-size:20px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

}

/* ===== TITLE BOX ===== */

.title-box{

background:#f3f4f6;
padding:18px 20px;

border-radius:12px;

font-size:18px;
font-weight:600;

color:#222;

position:relative;
margin-bottom:20px;

}

.title-box::before{

content:"";
position:absolute;

left:0;
top:0;

height:100%;
width:6px;

background:#ff007a;

border-radius:12px 0 0 12px;

}

.title-box span{

color:#ff007a;
font-weight:700;

}

/* ===== TITLE BOX 2 ===== */

.title-box2{

background:#f3f4f6;
padding:18px 20px;

border-radius:12px;

font-size:15px;
font-weight:600;

color:#222;

position:relative;
margin-bottom:20px;

}

.title-box2::before{

content:"";
position:absolute;

left:0;
top:0;

height:100%;
width:6px;

background:#ff4a00;

border-radius:12px 0 0 12px;

}

.title-box2 span{
color:#ff4a00;
font-weight:700;
}

.title-box2 a{
color:#ff4a00;
font-weight:700;
text-decoration:none;
}

/* ===== MOBILE ===== */

@media (max-width:480px){

.container{margin:15px;padding:15px;}

h1{font-size:20px;}

.download-btn{font-size:14px;padding:10px;}

audio{width:50%;}

}