/* ========================================================
   ROOT VA TEMALAR (DARK / LIGHT)
======================================================== */
:root { 
    --neon: #1f88ff; 
    --bg-top: #050913;   /* Suratdagidek to'q ko'k nur */
    --bg-bottom: #000000; /* Pastki qora qism */
    --card: #050505b7; 
    --text: #ffffff; 
}

.light-theme { 
    --neon: #000000; 
    --bg-top: #e0f2ff;   /* Oq temada yengil ko'k nur */
    --bg-bottom: #ffffff; 
    --card: #ffffff; 
    --text: #111111; 
}

/* ========================================================
   BODY - FONNI SURATDAGIDEK QILISH
======================================================== */
body { 
    /* Gradientni o'zgaruvchilar orqali yozamiz, shunda o'zgaradi */
    background: radial-gradient(circle at 50% 10%, var(--bg-top) 0%, var(--bg-bottom) 75%) !important;
    background-color: var(--bg-bottom) !important; 
    color: var(--text); 
    font-family: 'Rajdhani', sans-serif; 
    margin: 0; 
    transition: all 0.3s ease; 
    background-attachment: fixed !important; /* Fon siljimaydi */
    min-height: 100vh;
}

/* ========================================================
   MAIN WRAPPER - RAMKALAR TEKISLIGI
======================================================== */
.main-wrapper { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 15px; 
    padding-bottom: 120px; 
    overflow-x: hidden; 
    position: relative;
    z-index: 1;
}

/* ========================================================
   TOP BAR VA QIDIRUV
======================================================== */
.top-nav-actions { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 15px; 
    margin-bottom: 25px; /* Biroz masofani oshirdik */
}

/* ========================================================
   QIDIRUV MAYDONI DIZAYNI
======================================================== */
.search-form { 
    display: flex; 
    align-items: center; 
    position: relative; 
    width: 100%;
}
.search-input { 
    width: 100%; 
    background: rgba(0, 0, 0, 0.05); 
    border: 1px solid var(--neon); 
    border-radius: 6px; 
    padding: 10px 40px 10px 15px; 
    color: var(--text); 
    font-family: 'Rajdhani', sans-serif; 
    font-size: 14px; 
    font-weight: bold;
    outline: none; 
    transition: 0.3s; 
}
.search-input:focus { 
    background: #000;
    box-shadow: 0 0 15px rgba(0, 136, 255, 0.3); 
}
.search-btn { 
    position: absolute; 
    right: 5px; 
    background: none; 
    border: none; 
    color: var(--neon); 
    cursor: pointer; 
    padding: 5px 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.3s; 
}
.search-btn:hover { 
    transform: scale(1.1); 
    text-shadow: 0 0 10px var(--neon); 
}
/* Tema Ikonkasi (Oycha) va Menu tugmasi */
.theme-icon-btn, .c-mini-btn { 
    background: rgba(0, 204, 255, 0.05); 
    border: 1px solid var(--neon); 
    color: var(--neon); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: 0.3s ease; 
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}
.theme-icon-btn { width: 38px; height: 38px; flex-shrink: 0; }
.c-mini-btn { height: 38px; padding: 0 15px; font-size: 12px; letter-spacing: 1px; }

.theme-icon-btn:hover, .c-mini-btn:hover { background: var(--neon); color: #000; box-shadow: 0 0 15px var(--neon); }
.mob-only { display: none; } 

/* ========================================================
   LOGO VA NAVIGATSIYA (MENYU)
======================================================== */
.main-header { text-align: center; margin-bottom: 25px; }
.site-logo { width: 155px; filter: drop-shadow(0 0 15px var(--neon)); transition: 0.3s; }
.site-logo:hover { filter: drop-shadow(0 0 25px var(--neon)); transform: scale(1.02); }

.nav-container { display: flex; align-items: center; margin-bottom: 35px; }
.nav-container::before, .nav-container::after { content: ''; flex-grow: 1; height: 1px; background: var(--neon); }
.cyber-nav { display: block; width: 100%; }
.cyber-nav ul { display: flex; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 0 20px; }
.cyber-nav a { display: block; text-decoration: none; color: var(--text); border: 2px solid var(--neon); padding: 8px 25px; font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; background: rgba(0,204,255,0.05); transition: 0.3s; border-radius: 4px; }
.cyber-nav a.active { background: var(--neon); color: #000; box-shadow: 0 0 15px var(--neon); } 
.cyber-nav a:hover:not(.active) { background: rgba(0,204,255,0.2); }

/* ========================================================
   ASOSIY SEKSIYALAR VA SARLAVHALAR
======================================================== */
.cyber-section { border: 1px solid var(--neon); border-top: none; margin-bottom: 40px; position: relative; margin-top: 15px; border-radius: 0 0 8px 8px; }
.sec-header { display: flex; align-items: flex-end; width: 100%; position: absolute; top: 0; left: 0; transform: translateY(-100%); z-index: 10; } 
.header-line { flex-grow: 1; height: 1px; background: var(--neon); position: relative; right: -1px; }
.c-badge { background: var(--neon); color: #000; padding: 6px 20px 6px 15px; font-weight: 900; font-family: 'Orbitron', sans-serif; clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%); font-size: 14px; letter-spacing: 1px; }
.c-see-all { color: var(--text); font-size: 11px; font-weight: 700; text-decoration: none; padding: 0 15px; margin-bottom: 5px; opacity: 0.8; font-family: 'Rajdhani', sans-serif; }

/* ========================================================
   ARTISTLAR BLOKI
======================================================== */
.artists-grid { display: flex; gap: 20px; overflow-x: auto; padding: 30px 20px; background: rgba(0,0,0,0.2); border-radius: 0 0 8px 8px; }
.artists-grid-page { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; padding: 40px 20px; }
.artist-unit, .artist-card-pro { text-align: center; min-width: 120px; width: 160px; cursor: pointer; transition: 0.3s; position: relative; }
.artist-unit:hover, .artist-card-pro:hover { transform: translateY(-8px); }

.ring-neon, .artist-ring { width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--neon); padding: 0; box-shadow: 0 0 10px rgba(0,204,255,0.3); margin: 0 auto 12px; transition: 0.3s; background: var(--card); }
.artist-unit:hover .ring-neon, .artist-card-pro:hover .artist-ring { transform: scale(1.05); box-shadow: 0 0 25px var(--neon); border-color: #fff; }
.ring-neon img, .artist-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.a-name, .artist-name-pro { display: block; margin-top: 10px; font-weight: 800; font-size: 16px; letter-spacing: 1px; color: var(--text); font-family: 'Rajdhani', sans-serif; text-transform: uppercase; transition: 0.3s; }
.artist-unit:hover .a-name, .artist-card-pro:hover .artist-name-pro { color: var(--neon); text-shadow: 0 0 10px var(--neon); }

.artist-tracks-count { display: block; font-size: 12px; color: var(--neon); opacity: 0.8; font-family: 'Orbitron', sans-serif; margin-top: 5px; font-weight: 700; }

/* ========================================================
   MUSIQA LISTI (TREKLAR) - XATOLAR TO'LIQ TUZATILDI
======================================================== */
.music-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 15px 30px; padding: 25px 20px; background: rgba(0,0,0,0.2); border-radius: 0 0 8px 8px; }
.track-card { background: var(--card); border: 1px solid var(--neon); border-bottom: 2px solid var(--neon); transform: skewX(-15deg); cursor: pointer; transition: 0.3s; border-radius: 4px; }
.track-card:hover { transform: skewX(-15deg) translateX(8px); box-shadow: 0 0 15px rgba(0,204,255,0.4); border-color: #fff; }

.track-inner { transform: skewX(15deg); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }

/* 1. Play tugmasining oddiy holati */
.play-ring { 
    width: 32px; 
    height: 32px; 
    border: 2px solid var(--neon); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    color: var(--neon); 
    flex-shrink: 0; 
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    background: transparent !important; /* Ichini har doim shaffof qilamiz */
}

/* 2. Sichqoncha musiqa blogiga (track-card) borgandagi holat */
.track-card:hover .play-ring { 
    background: rgba(0, 204, 255, 0.1) !important; /* Mayin ko'k tuman (yopilib qolmaydi) */
    color: #fff; /* Ikonka oq bo'ladi */
    border-color: #fff; /* Aylanasi oq bo'lib yonadi */
    box-shadow: 0 0 15px var(--neon), inset 0 0 8px var(--neon); /* Tashqi va ichki neon nur */
    transform: scale(1.1); /* Mitti kattalashish effekti */
}
/* Matn qismi qisilib qolmasligi uchun muhim kodlar */
.t-details { flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-family: 'Rajdhani', sans-serif; display: flex; align-items: center; }
.t-details b { color: var(--text); font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-details small { font-weight: 600; font-size: 15px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-sep { color: var(--neon); margin: 0 8px; font-weight: bold; flex-shrink: 0; }

/* Vaqt va Bulutcha qismi siqilmaydi (flex-shrink: 0) */
.t-meta { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.meta-box { border: 1px solid var(--neon); color: var(--neon); padding: 3px 10px; font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; border-radius: 4px; }
.dl-cloud-svg { color: var(--neon); display: flex; align-items: center; transition: 0.3s; }
.dl-cloud-svg:hover { transform: scale(1.2); filter: drop-shadow(0 0 8px var(--neon)); }

.artist-click-link { color: inherit; text-decoration: none; transition: 0.3s; position: relative; z-index: 10; }
.artist-click-link:hover { color: var(--neon) !important; text-shadow: 0 0 10px var(--neon); }

/* ========================================================
   VIDEO MATRIX (KLIPLAR VA KONSERTLAR)
======================================================== */
.video-matrix, .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 20px; padding: 30px 20px; }
.v-card { position: relative; cursor: pointer; transition: transform 0.3s ease; }
.v-thumb-box { position: relative; height: 170px; background: var(--card); border: 1px solid rgba(0, 204, 255, 0.3); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.5); transition: 0.3s; }
.v-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: 0.5s; }
.v-card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 15px 15px 15px; background: linear-gradient(to top, rgba(0,0,0,1) 40%, transparent); z-index: 5; }

.v-meta-info { display: flex; align-items: center; gap: 10px; }
.v-artist-tag { color: var(--neon); font-family: 'Rajdhani', sans-serif !important; font-weight: 800; font-size: 15px; text-transform: uppercase; white-space: nowrap; }
.v-neon-separator { flex-grow: 1; height: 2px; background: linear-gradient(90deg, var(--neon), transparent); box-shadow: 0 0 8px var(--neon); }
.v-track-name { color: #fff; font-family: 'Rajdhani', sans-serif !important; font-weight: 700; font-size: 14px; margin-top: 5px; opacity: 0.9; }

.v-play-badge { position: absolute; top: 12px; left: 12px; width: 35px; height: 35px; background: var(--neon); color: #000; display: flex; align-items: center; justify-content: center; border-radius: 8px; z-index: 6; box-shadow: 0 0 15px rgba(0,204,255,0.6); transition: 0.3s; }
.v-card:hover { transform: translateY(-8px); }
.v-card:hover .v-thumb-box { border-color: var(--neon); box-shadow: 0 0 30px rgba(0, 204, 255, 0.5); }
.v-card:hover .v-img { opacity: 1; transform: scale(1.08); }
.v-card:hover .v-play-badge { background: #fff; transform: scale(1.1); }

/* ========================================================
   DETAIL SAHIFALAR (CLIP, MUSIC, CONCERT DETAIL)
======================================================== */
.main-container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.video-outer-frame { border: 1px solid var(--neon); padding: 10px; background: var(--card); margin-bottom: 10px; border-radius: 8px; }
.video-responsive { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 4px; overflow: hidden; }
.video-responsive iframe { position: absolute; top:0; left:0; width:100%; height:100%; }

.cyber-status-bar { border: 1px solid var(--neon); background: rgba(0, 204, 255, 0.03); padding: 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; border-radius: 8px; }
.main-title-text { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); }
.neon-artist-link { color: var(--neon) !important; text-decoration: none; font-weight: bold; transition: 0.3s; }
.neon-artist-link:hover { text-shadow: 0 0 10px var(--neon); color: var(--text) !important; }

.action-group { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stat-box { border: 1px solid #444; padding: 10px 15px; font-size: 11px; font-weight: 700; color: #888; border-radius: 4px; }
.stat-box span { color: var(--neon); font-weight: 800; }
.btn-cyan-fill { background: var(--neon); color: #000; padding: 12px 22px; font-weight: 800; text-decoration: none; font-size: 12px; font-family: 'Orbitron', sans-serif; border-radius: 4px; }
.btn-cyan-outline { border: 1px solid var(--neon); color: var(--text); padding: 11px 22px; text-decoration: none; font-weight: 700; font-size: 12px; font-family: 'Orbitron', sans-serif; transition: 0.3s; border-radius: 4px; }
.btn-cyan-outline:hover { background: rgba(0, 204, 255, 0.1); box-shadow: 0 0 15px var(--neon); }

.cyber-card { border: 1px solid var(--neon); margin-top: 25px; padding: 25px; background: var(--card); border-radius: 8px; }
.card-label { background: var(--neon); color: #000; padding: 6px 18px; font-weight: 800; font-size: 12px; display: inline-block; margin-bottom: 25px; transform: skewX(-15deg); }
.grid-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.detail-row { border-bottom: 1px solid rgba(100,100,100,0.2); padding-bottom: 10px; font-size: 15px; color: var(--text); opacity: 0.9; display: flex; align-items: center; }
.detail-row span { color: var(--neon); font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; width: 120px; flex-shrink: 0; display: inline-block; }
.white-text { color: var(--text); font-weight: 700; }

.matrix-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mini-v-card { text-decoration: none; transition: 0.3s; display: block; }
.img-wrap { position: relative; width: 100%; height: 120px; border: 1px solid #222; overflow: hidden; border-radius: 6px; }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.mini-title { color: var(--text); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; text-align: center; padding: 10px 0; }

/* ========================================================
   ARTIST PROFILE HEADER
======================================================== */
.artist-profile-header { border-top: 1px solid var(--neon) !important; padding: 40px !important; margin-bottom: 40px; background: rgba(0, 204, 255, 0.03); border-radius: 8px; }
.profile-wrap { display: flex; align-items: center; gap: 40px; }
.profile-avatar { width: 160px; height: 160px; border-radius: 50%; border: 4px solid var(--neon); overflow: hidden; flex-shrink: 0; box-shadow: 0 0 20px rgba(0,204,255,0.3); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artist-main-name { font-family: 'Orbitron', sans-serif; font-size: 42px; font-weight: 900; color: var(--neon); margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px rgba(0,204,255,0.3); }
.cyber-txt { opacity: 0.9; font-size: 16px; font-weight: 600; margin-bottom: 25px; color: var(--text); font-family: 'Rajdhani', sans-serif; }
.artist-stats { display: flex; gap: 15px; flex-wrap: wrap; }
.stat-unit { background: rgba(0,0,0,0.5); border: 1px solid var(--neon); padding: 8px 20px; font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; color: var(--text); border-radius: 6px; }
.stat-unit span { color: var(--neon); font-size: 18px; font-weight: 900; margin-right: 6px; }

.empty-msg { color: var(--neon); width: 100%; text-align: center; padding: 30px; font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 1px; }

/* ========================================================
   PLAYER VA PAGINATION
======================================================== */
.player-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.95); border-top: 2px solid var(--neon); padding: 15px 0; display: none; z-index: 1000; box-shadow: 0 -5px 20px rgba(0,0,0,0.8); }
.player-bar.visible { display: block; }

.cyber-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 40px 0; }
.cyber-pagination a { text-decoration: none; color: var(--neon); border: 1px solid var(--neon); padding: 8px 18px; font-family: 'Orbitron', sans-serif; font-weight: 700; transform: skewX(-15deg); transition: 0.3s; border-radius: 4px; }
.cyber-pagination a.active, .cyber-pagination a:hover { background: var(--neon); color: #000; box-shadow: 0 0 15px var(--neon); transform: skewX(-15deg) scale(1.05); }

/* ========================================================
   MOBIL ADAPTATSIYA (HAMMASI BIRTTA JOYDA, TAKRORIYSIZ)
======================================================== */
@media (max-width: 992px) { 
    .video-matrix, .video-grid { grid-template-columns: repeat(3, 1fr); } 
}

@media (max-width: 850px) {
    .cyber-status-bar { flex-direction: column; text-align: center; }
    .grid-details { grid-template-columns: 1fr; }
    .matrix-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* 1. TOP BAR TARTIBI: [Ikonka] [Qidiruv] [Menu] */
    .top-nav-actions { flex-wrap: nowrap; gap: 8px; justify-content: space-between; }
    .theme-icon-btn { order: 1; flex-shrink: 0; }
    .search-box { order: 2; flex-grow: 1; max-width: 100%; margin: 0; }
    .mob-only { display: flex; order: 3; flex-shrink: 0; align-items: center; white-space: nowrap; height: 38px; }
    .search-input { padding: 9px 30px 9px 10px; font-size: 13px; }

    /* 2. MENYU DROPDOWN */
    .nav-container { display: block; border: none; margin-bottom: 20px; position: relative;}
    .nav-container::before, .nav-container::after { display: none; }
    .cyber-nav { display: none; background: #080808; border: 1px solid var(--neon); padding: 10px; margin-top: 10px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 204, 255, 0.2); position: absolute; z-index: 50; }
    .cyber-nav.active { display: block; animation: slideDownMenu 0.3s ease forwards; }
  
    @keyframes slideDownMenu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    .cyber-nav ul { flex-direction: column; gap: 8px; margin: 0; }
    .cyber-nav a { display: block; text-align: center; padding: 12px; font-size: 14px; }

    /* 3. MUSIQA RO'YXATI (MOBILDA QISILMASLIGI UCHUN FIX) */
    .music-matrix { grid-template-columns: 1fr; padding: 15px 10px; gap: 12px; }
    .track-card { transform: skewX(-5deg); }
    .track-card:hover { transform: skewX(-5deg) translateX(5px); }
    .track-inner { transform: skewX(5deg); padding: 10px 10px; gap: 8px; }
    
    .play-ring { width: 28px; height: 28px; font-size: 10px; }
    .t-details { font-size: 14px; gap: 5px; }
    .t-details b { font-size: 14px; }
    .t-details small { font-size: 12px; }
    .n-sep { margin: 0 2px; }
    
    .t-meta { gap: 8px; }
    .meta-box { padding: 3px 6px; font-size: 9px; }
    .dl-cloud-svg svg { width: 18px; height: 18px; }

    /* 4. VIDEO MATRIX VA PROFIL */
    .video-matrix, .video-grid { grid-template-columns: 1fr 1fr; gap: 15px 10px; padding: 20px 10px; }
    .v-thumb-box { height: 110px; }
    .v-artist-tag { font-size: 11px; }
    .v-track-name { font-size: 11px; }
    .v-play-badge { width: 28px; height: 28px; top: 8px; left: 8px; }

    .profile-wrap { flex-direction: column; text-align: center; gap: 15px; }
    .profile-avatar { width: 120px; height: 120px; }
    .artist-main-name { font-size: 28px; }
    .artist-stats { justify-content: center; }
}
/* ========================================================
   CYBER PLAYER FULL STYLE
======================================================== */
.player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(5, 5, 5, 0.98);
    border-top: 1px solid var(--neon);
    z-index: 9999;
    transform: translateY(100%);
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.9);
}
.player-bar.visible { transform: translateY(0); }

/* Progress Bar */
.player-progress-container {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
    position: relative;
}
.player-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--neon);
    box-shadow: 0 0 15px var(--neon);
    transition: width 0.1s linear;
}

.p-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    gap: 20px;
}

/* Info Qismi */
.p-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
}
.p-play-ico {
    width: 40px;
    height: 40px;
    background: rgba(0,204,255,0.1);
    border: 1px solid var(--neon);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}
.p-text-scroll {
    overflow: hidden;
    white-space: nowrap;
}
#now-p-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    color: var(--neon);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Controls */
.p-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}
.p-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    color: #888;
    font-weight: bold;
}
.p-main-btn {
    background: var(--neon);
    color: #000;
    border: none;
    padding: 8px 25px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 11px;
    cursor: pointer;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    transition: 0.3s;
}
.p-main-btn.playing {
    background: #fff;
    box-shadow: 0 0 15px #fff;
}

/* MOBILDA PLEERNI TO'G'IRLASH */
@media (max-width: 768px) {
    .p-wrap { padding: 10px; }
    .p-play-ico { display: none; }
    .p-time { display: none; }
    #now-p-title { font-size: 11px; }
    .p-main-btn { padding: 6px 15px; font-size: 10px; }
}


/* ========================================================
   OQ THEMANI (LIGHT MODE) TO'LIQ TUZATISH
======================================================== */

/* 1. Oq fonni va matn rangini silliq qilish */
.light-theme {
    --bg: #ffffff;
    --card: #f9f9f9;
    --text: #1a1a1a;
    --neon: #0077cc; /* Oq fonda to'qroq ko'k yaxshi o'qiladi */
}

.light-theme body {
    background: radial-gradient(circle at 50% 20%, #e0f2ff 0%, #ffffff 85%) !important;
    color: #1a1a1a !important;
}

/* 2. Oq fonda ramkalarni pichoqdek qilish */
.light-theme .cyber-section {
    background: #ffffff !important;
    border-color: #ddd !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.light-theme .c-badge {
    background: #0077cc !important;
    color: #ffffff !important;
}

/* 3. Musiqa listi oq fonda tiniq chiqishi uchun */
.light-theme .track-card {
    background: #fdfdfd !important;
    border: 1px solid #eee !important;
    border-bottom: 2px solid #0077cc !important;
}

.light-theme .track-card:hover {
    background: #f0faff !important;
    box-shadow: 0 5px 15px rgba(0, 119, 204, 0.1) !important;
}

.light-theme .t-details b {
    color: #111 !important;
}

.light-theme .t-details small {
    color: #555 !important;
}

.light-theme .play-ring {
    border-color: #0077cc !important;
    color: #0077cc !important;
}

/* 4. Player bar oq fonda xira bo'lmasligi uchun */
.light-theme .player-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 2px solid #0077cc !important;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}

.light-theme #now-p-title {
    color: #0077cc !important;
}

.light-theme .p-main-btn {
    background: #0077cc !important;
    color: #fff !important;
}

/* 5. Navigatsiya menyusi oq fonda */
.light-theme .cyber-nav a {
    color: #333 !important;
    border-color: #ddd !important;
    background: #f5f5f5 !important;
}

.light-theme .cyber-nav a.active {
    background: #0077cc !important;
    color: #fff !important;
    border-color: #0077cc !important;
}

/* ========================================================
   LIGHT MODE: ASOSIY BACKGROUND VA SEKSIYALAR FIX
======================================================== */

/* 1. Body backgroundni oq temada tozalash */
.light-theme body, 
.light-theme.cyber-dark {
    background: #ffffff !important; /* Gradientni o'chirib, sof oq qilamiz */
    background-image: radial-gradient(circle at 50% 20%, #f0f8ff 0%, #ffffff 80%) !important;
    color: #1a1a1a !important;
}

/* 2. Seksiyalardagi o'sha xunuk kulrang fonni oq qilish */
.light-theme .cyber-section, 
.light-theme .artists-grid, 
.light-theme .music-matrix {
    background: #ffffff !important; /* Bazadagi rgba(0,0,0,0.2) ni o'chiradi */
    border: 1px solid #e0eef5 !important;
    border-top: none !important;
    box-shadow: 0 10px 30px rgba(0, 119, 204, 0.05) !important;
}

/* 3. Headerdagi chiziqlarni oq temaga moslash */
.light-theme .nav-container::before, 
.light-theme .nav-container::after,
.light-theme .header-line {
    background: #0077cc !important;
    opacity: 0.3;
}

/* 4. Qidiruv inputini oq fonda tiniq qilish */
.light-theme .search-input {
    background: #f9f9f9 !important;
    border: 1px solid #0077cc !important;
    color: #000 !important;
}

.light-theme .search-input::placeholder {
    color: #0077cc !important;
    opacity: 0.5;
}

/* 5. Artist rasmlari ostidagi oq fonni to'g'rilash */
.light-theme .artist-ring, 
.light-theme .ring-neon {
    background: #ffffff !important;
    border-color: #0077cc !important;
    box-shadow: 0 5px 15px rgba(0, 119, 204, 0.1) !important;
}

/* 6. Musiqa listidagi hover effektini oq temaga moslash */
.light-theme .track-card:hover {
    background: #f0faff !important;
    box-shadow: 0 5px 20px rgba(0, 119, 204, 0.15) !important;
    border-color: #0077cc !important;
}

/* ========================================================
   MENYU VA BADGE TEKISLIGINI TUZATISH (CHIZIQLAR BILAN)
======================================================== */

/* 1. Menyu o'rovchisini (nav-container) pichoqdek tekislaymiz */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* Probelni yo'qotamiz */
    margin-bottom: 45px;
    position: relative;
    padding: 0 15px;
}

/* 2. Menyuning ikki yonidagi neon chiziqlar (Liniyalar) */
.nav-container::before, 
.nav-container::after {
    content: '';
    flex-grow: 1; /* Bo'sh joyni to'liq egallaydi */
    height: 1px;
    background: var(--neon);
    opacity: 0.5; /* Juda yaltirab ko'zni charchatmasligi uchun */
    box-shadow: 0 0 10px var(--neon);
}

/* 3. Menyu badgelarini (tugmalarini) ramkalarga moslash */
.cyber-nav ul {
    display: flex;
    gap: 10px;
    margin: 0 20px !important; /* Chiziqlar va menyu orasidagi masofa */
    padding: 0;
}

.cyber-nav a {
    border: 1px solid var(--neon) !important;
    background: var(--glass) !important;
    color: var(--text) !important;
    padding: 10px 25px !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); /* Seksiyalardagidek qiyshiqroq (skew) uslub */
    transition: 0.3s ease-in-out;
}

/* Aktiv tugma (ko'k yonib turadigan) */
.cyber-nav a.active {
    background: var(--neon) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--neon) !important;
}

/* Tugma ustiga borganda */
.cyber-nav a:hover:not(.active) {
    background: rgba(0, 204, 255, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.3);
}

/* 4. Oq temada chiziqlarni to'g'irlash */
.light-theme .nav-container::before, 
.light-theme .nav-container::after {
    background: #0077cc !important;
    opacity: 0.3;
    box-shadow: none;
}

/* 5. Mobilda chiziqlarni yashirish (sig'may qolmasligi uchun) */
@media (max-width: 768px) {
    .nav-container::before, 
    .nav-container::after {
        display: none !important;
    }
}

/* ========================================================
   MENYU FULL ALIGNMENT FIX (RAMKA BILAN BIR XIL)
======================================================== */
.nav-container {
    max-width: 1100px; /* Pastdagi ramkalar bilan bir xil */
    margin: 0 auto 50px auto; /* Markazga olish */
    padding: 0 15px; /* Chetdan main-wrapper bilan bir xil padding */
    width: 100%;
    box-sizing: border-box;
}

.cyber-nav {
    width: 100%;
}

.cyber-nav ul {
    display: flex;
    /* TUGMALARNI CHEKKALARGA TAQASH VA ORASINI OCHISH */
    justify-content: space-between; 
    align-items: center;
    gap: 10px; /* Mobilga yaqinlashganda minimal masofa */
    margin: 0;
    padding: 0;
    list-style: none;
}

.cyber-nav li {
    flex-grow: 1; /* Har bir tugma bir xil joy egallaydi */
    display: flex;
}

.cyber-nav a {
    text-decoration: none;
    width: 100%; /* Har bir tugma o'z blokini to'ldiradi */
    text-align: center;
    color: var(--text) !important;
    border: 1px solid var(--neon) !important;
    background: rgba(0, 81, 255, 0.05) !important;
    padding: 12px 0; /* Ichki bo'shliq */
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Kibersport uslubidagi qiyalik (skew) */
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

/* Aktiv sahifa (Hozir turgan joying) */
.cyber-nav a.active {
    background: var(--neon) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--neon);
    transform: translateY(-3px); /* Ozgina tepaga chiqadi */
}

/* Tugma ustiga borganda */
.cyber-nav a:hover:not(.active) {
    background: rgba(0, 204, 255, 0.15);
    box-shadow: 0 0 15px var(--neon);
    transform: translateY(-2px);
}

.light-theme .cyber-nav a {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #444 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}

/* Oqdagi AKTIV Tugma (Premium Royal Blue Gradient) */
.light-theme .cyber-nav a.active {
    background: linear-gradient(135deg, #0077cc 0%, #0055aa 100%) !important;
    color: #ffffff !important;
    border-color: #0055aa !important;
    box-shadow: 0 8px 20px rgba(0, 95, 204, 0.3) !important;
}

/* Hover effekti (Oq temada) */
.light-theme .cyber-nav a:hover:not(.active) {
    background: #f0f7ff !important;
    border-color: #0077cc !important;
    color: #0077cc !important;
}

/* ========================================================
   MOBIL ADAPTATSIYA (BURGER MENU BILAN)
======================================================== */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 10px;
        margin-bottom: 30px;
    }
    
    .cyber-nav ul {
        flex-direction: column; /* Telefonda ustma-ust tushadi */
        gap: 8px;
    }
    
    .cyber-nav a {
        clip-path: none; /* Mobilda tekis kvadrat bo'lgani ma'qul */
        border-radius: 4px;
        padding: 14px 0;
    }
}






/* ========================================================
   ULTIMATE CYBER PLAYER - FINAL FIX
======================================================== */

/* 1. Asosiy Bar */
.player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(5, 5, 5, 0.98) !important;
    border-top: 1px solid var(--neon);
    z-index: 99999; /* Hamma narsadan tepada turishi uchun */
    transform: translateY(100%);
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
}
.player-bar.visible { transform: translateY(0); }

/* 2. Progress Bar */
#p-prog-container { 
    width: 100%; 
    height: 5px; 
    background: rgba(255, 255, 255, 0.1); 
    cursor: pointer; 
}
.player-progress-bar { 
    width: 0%; 
    height: 100%; 
    background: var(--neon); 
    box-shadow: 0 0 15px var(--neon); 
    transition: width 0.1s linear; 
}

/* 3. Pleyer Ichki Layout */
.p-wrap { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 12px 20px; 
    gap: 20px; 
}

.p-info { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    flex: 1; 
    min-width: 0; 
}

.p-play-ico { 
    width: 38px; 
    height: 38px; 
    background: rgba(0, 204, 255, 0.1); 
    border: 1px solid var(--neon); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 6px; 
    flex-shrink: 0; 
}

#now-p-title { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 13px; 
    color: var(--neon); 
    font-weight: bold; 
    text-transform: uppercase; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* 4. ASOSIY PLAY TUGMASI (MUKAMMAL MARKAZLASHGAN VA KO'RINARLI) */
.p-main-btn-circle {
    width: 54px !important;
    height: 54px !important;
    background: var(--neon) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    /* Ikonkani o'rtaga mixlash */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 20px var(--neon);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0 !important;
    margin: 0 15px !important;
    flex-shrink: 0;
}

/* Tugma ichidagi ikonka */
.p-main-btn-circle i {
    font-size: 22px !important;
    color: #000 !important; /* Qora rang ko'kda aniq ko'rinadi */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.p-main-btn-circle:hover { 
    transform: scale(1.1); 
    box-shadow: 0 0 35px var(--neon); 
}

/* 5. Boshqa Tugmalar (Step) */
.p-btns-group { display: flex; align-items: center; gap: 15px; }

.p-step-btn { 
    background: transparent; 
    border: none; 
    color: var(--neon); 
    cursor: pointer; 
    transition: 0.3s; 
    opacity: 0.8; 
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-step-btn:hover { 
    opacity: 1; 
    transform: scale(1.2); 
    filter: drop-shadow(0 0 8px var(--neon)); 
}

/* 6. Yopish Tugmasi (Qizil X) */
.p-close-btn {
    position: absolute; 
    top: -15px; 
    right: 25px; 
    background: #ff3333 !important; 
    color: #fff !important;
    border: none; 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 16px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); 
    transition: 0.3s;
    z-index: 100001;
}
.p-close-btn:hover { 
    background: #ff0000 !important; 
    transform: rotate(90deg) scale(1.1); 
}

/* 7. Listdagi Statuslar */
.track-card.is-playing .play-ring i::before { 
    content: "\f04c" !important; /* Pause kodi */
}
.track-card.active-track { 
    border-color: #fff !important; 
    background: rgba(0, 204, 255, 0.15) !important; 
    box-shadow: inset 0 0 15px rgba(0, 204, 255, 0.1);
}

/* 8. Ovoz va Vaqt */
.p-volume-box { display: flex; align-items: center; gap: 10px; margin-left: 10px; }
.v-range { 
    width: 80px; 
    accent-color: var(--neon); 
    cursor: pointer; 
    height: 4px; 
}
.p-time { 
    font-family: 'Rajdhani', sans-serif; 
    font-size: 13px; 
    color: #bbb; 
    font-weight: bold; 
    min-width: 45px; 
}

/* 9. Effektlar */
@keyframes neonPulse { 
    0%, 100% { filter: drop-shadow(0 0 2px var(--neon)); opacity: 1; } 
    50% { filter: drop-shadow(0 0 10px var(--neon)); opacity: 0.7; } 
}
.neon-pulse { animation: neonPulse 2s infinite; }

/* 10. Mobil Adaptatsiya */
@media (max-width: 768px) { 
    .p-volume-box, .p-time, .p-play-ico { display: none; } 
    .p-wrap { padding: 10px; gap: 10px; }
    .p-btns-group { gap: 10px; }
    #now-p-title { font-size: 11px; } 
    .p-main-btn-circle { width: 45px !important; height: 45px !important; }
}


/* ========================================================
   1. MUSIC DETAIL (DETAL SAHIFA) UCHUN YANGI DIZAYN
======================================================== */
.music-detail-header { padding: 40px !important; border-top: 1px solid var(--neon) !important; margin-bottom: 20px; }
.m-detail-wrap { display: flex; gap: 40px; align-items: center; }

/* Katta rasm blokining pichoqdek dizayni */
.m-cover-big { 
    position: relative; 
    width: 280px; 
    height: 280px; 
    border: 2px solid var(--neon); 
    flex-shrink: 0; 
    box-shadow: 0 0 20px rgba(0,204,255,0.2); 
    border-radius: 10px; 
}
.m-cover-big.track-card { transform: none !important; clip-path: none !important; }
.m-cover-big img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* Katta rasm ustidagi Play tugmasi */
.m-play-btn { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 65px; height: 65px; background: var(--neon); color: #000;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 25px; cursor: pointer; transition: 0.3s; box-shadow: 0 0 15px var(--neon);
    z-index: 10;
}
.m-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); background: #fff; }

/* ================== MATNLAR DIZAYNI ================== */
.m-title-big { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 38px; /* Yirikroq va chiroyli */
    color: var(--text); 
    margin: 10px 0 5px; 
    text-transform: uppercase; 
    letter-spacing: 2px; /* Harflar orasi ochildi */
    font-weight: 900;
}
.m-artist-link { 
    font-family: 'Rajdhani', sans-serif;
    color: var(--neon); 
    cursor: pointer; 
    font-size: 22px; 
    font-weight: 700;
    margin-bottom: 30px; 
    display: inline-block; 
    transition: 0.3s; 
    letter-spacing: 1px;
}
.m-artist-link:hover { text-shadow: 0 0 15px var(--neon); color: #fff; }

.m-full-specs { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; /* Qatorlar orasi ochildi */
    margin-bottom: 35px; 
    border-left: 3px solid var(--neon); /* Chiziq qalinlashdi */
    padding-left: 20px; 
}
.spec-item { 
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px; 
    color: #ddd; 
    font-weight: 600;
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    display: flex;
    align-items: center;
}
.spec-item span { 
    color: var(--neon); 
    font-weight: 800; 
    margin-right: 10px; 
    font-family: 'Orbitron', sans-serif; 
    font-size: 12px; 
    min-width: 120px; /* Sarlavhalar tekis turishi uchun */
}

/* Skachat MP3 tugmasi */
.cyber-btn-dl { 
    display: inline-flex; justify-content: center; align-items: center;
    background: var(--neon); color: #000; padding: 14px 40px;
    font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 900; 
    text-decoration: none; transform: skewX(-15deg); letter-spacing: 1px;
    transition: 0.3s; border: 2px solid transparent;
}
.cyber-btn-dl:hover { 
    background: transparent; color: var(--neon); border-color: var(--neon); 
    box-shadow: 0 0 25px var(--neon); transform: skewX(-15deg) translateY(-3px);
}

/* Lirika (Qo'shiq matni) qismi */
.lyrics-accordion { margin-top: 20px; border: 1px solid rgba(0, 204, 255, 0.3); background: var(--card); }
.lyrics-toggle-icon { color: var(--neon); font-size: 24px; font-weight: bold; margin-left: 15px; transition: 0.4s; font-family: 'Orbitron'; }
.lyrics-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; background: rgba(0,204,255,0.03); }
.lyrics-box { padding: 40px; text-align: center; line-height: 2; color: var(--text); font-size: 17px; font-style: italic; border-top: 1px solid rgba(0, 204, 255, 0.1); }

@media (max-width: 768px) {
    .m-detail-wrap { flex-direction: column; text-align: center; }
    .m-full-specs { grid-template-columns: 1fr; border-left: none; border-top: 1px solid var(--neon); padding: 15px 0; }
    .m-cover-big { width: 100%; height: auto; aspect-ratio: 1/1; }
    .spec-item span { min-width: auto; margin-right: 5px; }
}

/* ========================================================
   2. OQ TEMA (LIGHT MODE) UCHUN TO'LDIRUVCHILAR
======================================================== */

/* Pleyerning progress bar (liniyasi) */
.light-theme #p-prog-container { background: rgba(0, 0, 0, 0.15) !important; }
.light-theme .player-progress-bar { background: #0077cc !important; box-shadow: 0 0 8px rgba(0, 119, 204, 0.5) !important; }

/* Katta rasm va Play tugmasi oq temada */
.light-theme .m-cover-big { box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; border-color: #0077cc !important; }
.light-theme .m-play-btn { background: #0077cc !important; color: #fff !important; box-shadow: 0 5px 15px rgba(0, 119, 204, 0.4) !important; }
.light-theme .m-play-btn:hover { background: #0055aa !important; }

/* =============== OQ TEMADA MATNLAR ================== */
/* Asosiy Sarlavha */
.light-theme .m-title-big { color: #111 !important; text-shadow: none !important; font-weight: 900 !important; }

/* Artist Nomi */
.light-theme .m-artist-link { color: #0077cc !important; font-weight: 800 !important; }
.light-theme .m-artist-link:hover { color: #004488 !important; text-shadow: none !important; }

/* Spesifikatsiyalar (Data, Avtor, Format) */
.light-theme .m-full-specs { border-left-color: #0077cc !important; }
.light-theme .spec-item { 
    color: #444 !important; /* To'q kulrang matn (aniq ko'rinadi) */
    font-weight: 700 !important; /* Qalinroq */
}
.light-theme .spec-item span { 
    color: #0077cc !important; /* Moviy yozuv */
    font-weight: 900 !important; /* Juda qalin */
}

/* Skachat Tugmasi Oq temada */
.light-theme .cyber-btn-dl { 
    background: linear-gradient(135deg, #0077cc, #0055aa) !important; 
    color: #fff !important; 
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 119, 204, 0.3) !important; 
}
.light-theme .cyber-btn-dl:hover { 
    background: #004488 !important; 
    transform: skewX(-15deg) translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 119, 204, 0.5) !important; 
}

/* Oq temada Lirika qismi */
.light-theme .lyrics-accordion { border-color: #ddd !important; background: #fff !important; box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;}
.light-theme .lyrics-box { color: #333 !important; border-top-color: #eee !important; font-weight: 600; }
.light-theme .lyrics-toggle-icon { color: #0077cc !important; }

/* Oq temada Pleyerdagi vaqt yozuvlari */
.light-theme .p-time { color: #333 !important; font-weight: bold; }
.light-theme .p-step-btn { color: #0077cc !important; opacity: 1; }
.light-theme .v-range { accent-color: #0077cc !important; }
.light-theme .p-volume-box i { color: #0077cc !important; }