* {
    /* 1. تنظیم مدل جعبه (Box-sizing) روی border-box */
    /* این تضمین می‌کند که padding و border به عرض و ارتفاع عنصر اضافه نمی‌شوند */
    box-sizing: border-box;

    /* 2. محدود کردن حداکثر عرض به اندازه صفحه نمایش */
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
}

/* --- Root Variables for Colors --- */
:root {
    --primary-blue: #00ffff;
    /* آبی روشن برای Glow اصلی */
    --secondary-yellow: #ffcc00;
    /* زرد طلایی برای Glow دوم */
    --tertiary-purple: #9900ff;
    /* بنفش برای Glow سوم */
    --dark-bg: #0c0f16;
    /* پس‌زمینه تیره */
    --text-color: #e0e0e0;
    /* رنگ متن اصلی */
    --border-color: rgba(0, 255, 255, 0.3);
    /* رنگ حاشیه */
    --shadow-intensity: 0.8;
    /* شدت سایه و Glow */
    --primary-purple: #EE82EE;
    /* بنفش ویولت روشن برای نئون اصلی */
    --secondary-purple: #9932CC;
    /* بنفش تیره‌تر برای سایه‌ها */
    --accent-blue: #00FFFF;
--neon-purple: #cc00ff; /* بنفش روشن برای Glow اصلی */
    --soft-purple: #9933ff; /* بنفش کمی تیره‌تر */
    --bg-dark-purple: rgba(30, 0, 50, 0.4); /* پس‌زمینه نیمه‌شفاف بنفش تیره */
    --border-purple: rgba(204, 0, 255, 0.5);
    --shadow-purple: rgba(204, 0, 255, 0.8);
}

/* --- Base Styles --- */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden !important;
    /* جلوگیری از اسکرول افقی */
    overflow-y: auto;
    /* فعال کردن اسکرول عمودی */
    position: relative;
    /* بک‌گراند آینده‌نگر */
    background-image: url('/pics/5.png');
    /* Placeholder */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Overlay برای تاریک کردن و مات کردن بک‌گراند */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* لایه تاریک‌کننده */
    backdrop-filter: blur(3px);
    /* افکت مات برای بک‌گراند زیرین */
    z-index: 0;
    /* باید زیر همه محتوا باشه */
}

.main-container {
    position: relative;
    z-index: 1;
    /* محتوای اصلی بالای overlay قرار می‌گیرد */
    max-width: 1400px;
    /* حداکثر عرض سایت */
    margin: 0 auto;
    /* وسط چین کردن سایت */
    padding: 20px;
}

/* --- Header Styles --- */
.header {
    /* حذف padding: 15px 30px; از اینجا و انتقال آن به داخل (اگر نیاز بود) */
    direction: ltr;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    background-color: rgba(153, 0, 255, 0.1);
    border-radius: 10px;
    padding: 15px 30px;
    /* این پدینگ برای دسکتاپ مناسب است */
    margin-bottom: 40px;

    /* مهم: در حالت دسکتاپ، `flex-wrap: wrap;` را حذف کنید تا لوگو و منو در یک خط باقی بمانند */
    flex-wrap: nowrap;
}

.logo-area {
    background-color: var(--tertiary-purple);
    /* بنفش برای لوگو */
    padding: 8px 20px;
    border-radius: 5px;
    box-shadow: 0 0 20px var(--tertiary-purple);
    /* Glow بنفش */
    position: relative;
    z-index: 10;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%);
    /* شکل خاص لوگو */
}

.logo-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8em;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 0 8px #fff, 0 0 15px var(--tertiary-purple);
}

/* --- Navigation Styles --- */
.main-nav ul {
    direction: ltr;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-nav li {
    position: relative;
    margin-left: 30px;
}

.main-nav a.nav-item {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: 0.95em;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    /* برای افکت های هاور */
    z-index: 1;
}

.main-nav a.nav-item::before {
    /* content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent); 
    transition: all 0.7s;*/
    display: none;
}

.main-nav a.nav-item:hover {
    color: var(--primary-blue);
    text-shadow: 0 0 5px var(--primary-blue);
}

.main-nav a.nav-item:hover::before {
    left: 100%;
}

.main-nav a.nav-item.active {
    /* این خطوط را حذف کنید یا کامنت کنید */
    /* color: var(--primary-blue);
    text-shadow: 0 0 8px var(--primary-blue);
    border: 1px solid var(--primary-blue);
    box-shadow: 0 0 15px var(--primary-blue);
    background-color: rgba(0, 255, 255, 0.15); */
    border: none !important;
    /* تضمین می‌کنیم که کادر اصلی نمایش داده نشود */
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Dropdown Styles */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(28, 28, 48, 0.9);
    /* پس‌زمینه تیره برای دراپ‌داون */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.6);
    z-index: 10;
    border-radius: 5px;
    border: 1px solid rgba(153, 0, 255, 0.5);
    /* حاشیه بنفش */
    top: 100%;
    /* زیر آیتم اصلی قرار بگیرد */
    left: 0;
    padding: 10px 0;
    direction: ltr;
    text-align: left;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: all 0.3s ease;
}

.dropdown-content a:hover {
    background-color: rgba(153, 0, 255, 0.3);
    /* هاور بنفش */
    color: var(--tertiary-purple);
    padding-left: 20px;
}

.dropdown:hover .dropdown-content {
    display: block;
    /* نمایش دراپ‌داون هنگام هاور */
}

/* --- تعریف کادر متحرک (Moving Glow Box) --- */
.main-nav ul {
    position: relative;
    /* مطمئن می‌شویم که کادر نسبت به ul حرکت می‌کند */
}

.moving-box {
    position: absolute;
    top: 50%;
    /* وسط قرار گرفتن در ارتفاع */
    transform: translateY(-50%);

    /* استایل‌های بصری کادر Glow */
    border: 1px solid var(--primary-blue);
    border-radius: 5px;
    box-shadow: 0 0 10px var(--primary-blue), 0 0 20px rgba(0, 255, 255, 0.5);
    /* Glow نئونی */
    background-color: rgba(0, 255, 255, 0.1);
    /* پس‌زمینه کم‌رنگ */

    /* انیمیشن نرم برای جابجایی */
    transition: left 0.3s ease, width 0.3s ease;

    z-index: 1;
    pointer-events: none;
    /* مهم: برای اینکه کلیک روی لینک‌های زیرین را مسدود نکند */
}

/* لینک‌ها باید بالای کادر باشند تا قابل کلیک باشند */
.main-nav a.nav-item {
    z-index: 2;
    position: relative;
    /* برای اطمینان از قرارگیری بالای کادر */
}

/* --- Hero Section Styles (آبی نئونی) --- */
.hero-section {
    padding: 80px 0;
    text-align: center;
    border-bottom: 2px dashed rgba(0, 255, 255, 0.2);
    margin-bottom: 40px;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5em;
    font-weight: 700;
    color: var(--primary-blue);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4),
        0 0 10px rgba(0, 255, 255, 0.6);
    margin-bottom: 20px;
    letter-spacing: 2px;
    animation: neon-flicker 10s infinite;
}

.hero-subtitle {
    font-size: 1.2em;
    color: var(--text-color);
    margin-bottom: 30px;
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.hero-description {
    font-size: 1em;
    margin-bottom: 40px;
    color: #a0a0a0;
}

/* هایلایت رنگی برای توضیحات */
.highlight-blue {
    color: var(--primary-blue);
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    margin: 0 5px;
}

.highlight-yellow {
    color: var(--secondary-yellow);
    font-weight: 700;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
    margin: 0 5px;
}

.highlight-purple {
    color: var(--tertiary-purple);
    font-weight: 700;
    text-shadow: 0 0 5px rgba(153, 0, 255, 0.5);
    margin: 0 5px;
}

/* دکمه اصلی (Primary Button) */
.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    border-radius: 5px;
    box-shadow: 0 0 10px var(--primary-blue);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--primary-blue);
    color: var(--dark-bg);
    box-shadow: 0 0 20px var(--primary-blue);
    transform: translateY(-2px);
}

/* --- Glow رنگی برای حروف BHM (تضمین می‌کند که این رنگ‌ها بالاتر باشند) --- */

/* رنگ بنفش */
.purple-neon {
    color: var(--tertiary-purple);
    text-shadow: 0 0 7px var(--tertiary-purple), 0 0 15px var(--tertiary-purple);
    font-weight: 700;
}

/* رنگ زرد */
.yellow-neon {
    color: var(--secondary-yellow);
    text-shadow: 0 0 7px var(--secondary-yellow), 0 0 15px var(--secondary-yellow);
    font-weight: 700;
}

/* رنگ آبی (برای اینکه حرف M هم Glow قوی‌تری داشته باشد) */
.blue-neon {
    color: var(--primary-blue);
    text-shadow: 0 0 7px var(--primary-blue), 0 0 15px var(--primary-blue);
    font-weight: 700;
}


/* --- انیمیشن چشمک‌زن (Flicker) --- */
@keyframes neon-flicker {

    /* ۰ تا ۹۰ درصد زمان: ثابت روشن */
    0%,
    90% {
        opacity: 1;
        /* Glow سراسری آبی در حالت روشن (می‌توانید اینجا Glow را قوی‌تر کنید) */
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.6);
    }

    /* ۹۱ تا ۹۷ درصد زمان: شروع چشمک زدن */
    92% {
        opacity: 0.1;
        /* خاموش شدن ناگهانی */
        text-shadow: none;
        /* خاموش کردن Glow در لحظه خاموشی */
    }

    94% {
        opacity: 0.2;
        text-shadow: none;
    }

    96% {
        opacity: 0.05;
        text-shadow: none;
    }

    97%,
    100% {
        opacity: 1;
        /* تثبیت حالت روشن */
    }
}

/* --- Hero Footer Styles (اصلاح شده) --- */
.hero-footer {
    /* تغییرات اصلی برای وسط‌چین کردن و خط جداکننده */
    display: flex;
    flex-direction: column;
    /* چیدمان عمودی: لوگو بالا، تگ‌لاین پایین */
    align-items: center;
    /* وسط‌چین کردن افقی */
    justify-content: center;

    max-width: 600px;
    margin: 40px auto 0 auto;

    /* حذف padding-top و border-top از اینجا */
    padding-top: 0;
    border-top: none;
}

/* --- خط جداکننده را به کانتینر Hero Section اضافه می‌کنیم --- */
.hero-section {
    padding: 80px 0;
    text-align: center;
    /* این خط جداکننده قبلی شما بود. مطمئن شوید وجود دارد. */
    border-bottom: 2px dashed rgba(0, 255, 255, 0.2);
    margin-bottom: 40px;
}

/* --- استایل لوگو --- */
.footer-logo-area {
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
    position: relative;
    /* فاصله لوگو تا محتوای بالای Hero */
    margin-top: 20px;
    margin-bottom: 10px;
    /* فاصله از تگ‌لاین */
}

/* --- استایل تگ‌لاین --- */
.footer-tagline {
    font-size: 0.85em;
    color: #8a8a8a;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    /* فاصله از پایین سکشن */
}

/* --- لوگوی تصویری --- */
.bhm-logo-img {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 0 5px var(--primary-blue)) drop-shadow(0 0 15px rgba(0, 255, 255, 0.6));
}

@media (max-width: 900px) {

    /* --- ۱. فیکس Header و پدینگ --- */
    .header {
        flex-wrap: wrap;
        /* ناوبری به خط بعد منتقل شود */
        padding: 15px 20px;
        /* پدینگ کمتر برای موبایل */
        align-items: flex-start;
    }

    /* --- ۲. فیکس ناوبری (منو) برای چیدمان عمودی و تمام عرضی --- */
    .main-nav {
        width: 100%;
        /* منو تمام عرض موجود را بگیرد */
        /* ... سایر استایل‌های باز و بسته شدن منو ... */
    }

    .main-nav ul {
        flex-direction: column;
        /* آیتم‌ها را زیر هم قرار دهد (مهم‌ترین فیکس) */
        align-items: flex-start;
        width: 100%;
    }

    .main-nav li {
        width: 100%;
        margin-left: 0;
        /* حذف فاصله‌گذاری افقی بیرون‌زده */
        margin-top: 5px;
        /* اضافه کردن فاصله عمودی */
        margin-bottom: 5px;
        padding-bottom: 5px;
        border-bottom: 1px dotted rgba(0, 255, 255, 0.1);
    }

    .main-nav a.nav-item {
        width: 100%;
        display: block;
        /* برای اینکه تمام عرض li را بگیرد */
    }

    /* --- ۳. مخفی کردن کادر متحرک در موبایل --- */
    .moving-box {
        display: none !important;
    }

    .dropdown-content {
        /* مطمئن می‌شویم که متن و چیدمان دراپ‌داون از چپ به راست باشد */
        text-align: left;
    }
}

/*slider styles:*/
/* --- متغیرهای تم طلایی (اگر قبلاً اضافه نشده‌اند) --- */
:root {
    --secondary-yellow: #ffcc00;
    --yellow-glow-color: rgba(255, 204, 0, 0.8);
    --yellow-border-color: rgba(255, 204, 0, 0.5);
}

/* --- استایل عنوان بخش (عمومی) --- */
.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.8em;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.yellow-glow {
    color: var(--secondary-yellow);
    text-shadow: 0 0 10px var(--secondary-yellow), 0 0 20px var(--yellow-glow-color);
}

/* --- بخش گالری --- */
.gallery-section {
    padding: 60px 20px;
    text-align: center;
    border-bottom: 2px dashed var(--yellow-border-color);
    position: relative;
    background: transparent;
}

/* --- دکمه "More Images" (تم طلایی) --- */
.btn-secondary {
    display: inline-block;
    padding: 10px 25px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1em;
    background: transparent;
    color: var(--secondary-yellow);
    border: 2px solid var(--secondary-yellow);
    border-radius: 5px;
    box-shadow: 0 0 10px var(--yellow-glow-color);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    /* فاصله دکمه تا اسلایدر */
}

.btn-secondary:hover {
    background: var(--secondary-yellow);
    color: var(--dark-bg);
    box-shadow: 0 0 20px var(--yellow-glow-color);
    transform: translateY(-2px);
}

/* --- کانتینر اسلایدر --- */
.slider-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    height: 400px;
    padding: 0;
}

.slider-track {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide {
    flex-shrink: 0;
    width: 250px;
    height: 250px;
    opacity: 0.6;
    transform: scale(0.85);
    transition: all 0.5s ease-in-out;
    border-radius: 5px;
    overflow: hidden;
    transform-origin: center center;
    border: 2px solid rgba(255, 204, 0, 0.2);
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.1);
    z-index: 1;
}


.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide.active {
    width: 400px;
    /* بزرگ‌تر برای اسلاید مرکزی */
    height: 400px;
    opacity: 1;
    transform: scale(1);
    border-color: var(--secondary-yellow);
    box-shadow: 0 0 20px var(--yellow-glow-color);
    margin: 0 -75px;
    z-index: 2;
}

/* --- دکمه‌های کنترل اسلایدر (Prev/Next) --- */
.slider-nav {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 16px;
    color: var(--secondary-yellow);
    font-weight: bold;
    font-size: 24px;
    transition: 0.3s ease;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--yellow-border-color);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
    z-index: 10;
}

.slider-nav.prev {
    left: 20px;
    /* فاصله از لبه چپ */
}

.slider-nav.next {
    right: 20px;
    /* فاصله از لبه راست */
}

.slider-nav:hover {
    background-color: var(--secondary-yellow);
    color: var(--dark-bg);
    box-shadow: 0 0 20px var(--yellow-glow-color);
}

.slider-track img {
    /* جلوگیری از راست کلیک */
    pointer-events: none;
    /* جلوگیری از انتخاب متن (برخی مرورگرها آدرس عکس را انتخاب می‌کنند) */
    user-select: none;
    -webkit-user-select: none;
    /* برای مرورگرهای Webkit */
    -moz-user-select: none;
    /* برای مرورگرهای Mozilla */
    -ms-user-select: none;
    /* برای مرورگرهای Microsoft */
}

.footer-logo-area img {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* --- (اختیاری) می‌توانید این استایل‌ها را به کل اسلاید یا کانتینر هم بدهید --- */
.slider-container,
.slider-track {
    -webkit-touch-callout: none;
    /* جلوگیری از نمایش منوی لمسی در موبایل */
    -webkit-user-select: none;
    /* جلوگیری از انتخاب در مرورگرهای Webkit */
    -moz-user-select: none;
    /* جلوگیری از انتخاب در مرورگرهای Mozilla */
    -ms-user-select: none;
    /* جلوگیری از انتخاب در مرورگرهای Microsoft */
    user-select: none;
    /* جلوگیری از انتخاب متن */
}

/* --- Media Query برای دستگاه‌های موبایل و تبلت کوچک --- */
@media (max-width: 768px) {

    /* --- کانتینر اصلی اسلایدر --- */
    .slider-container {
        max-width: 100%;
        /* اسلایدر کل عرض موجود را بگیرد (با پدینگ) */
        height: 250px;
        /* ارتفاع کلی کانتینر در موبایل کوچک‌تر شود */
        margin: 0 10px;
        /* برای جلوگیری از چسبیدن به لبه‌ها */
        /* padding: 0 50px; */
    }

    /* --- Track اسلایدر --- */
    .slider-track {
        gap: 10px;
        /* فاصله بین اسلایدها در موبایل کمتر شود */
    }

    /* --- استایل اسلاید هر تصویر (عادی) --- */
    .slide {
        width: 120px;
        /* عرض اسلایدهای کناری در موبایل کوچک‌تر شود */
        height: 120px;
        opacity: 0.5;
        /* کمی تاریک‌تر */
        transform: scale(0.8);
        /* کمی کوچک‌تر */
        position: relative;
        /* برای اینکه z-index کار کند، باید position داشته باشد */
        z-index: 1;
    }

    /* --- استایل اسلاید مرکزی (فعال) --- */
    .slide.active {
        width: 200px;
        /* عرض اسلاید مرکزی در موبایل کوچک‌تر شود */
        height: 200px;
        /* محاسبه margin منفی جدید برای موبایل: (200 - 120) / 2 = 40px */
        margin: 0 -40px;
        z-index: 2;
    }

    /* --- دکمه‌های کنترل اسلایدر (Prev/Next) --- */
    .slider-nav {
        top: 50%;
        transform: translateY(-50%);
        padding: 8px 12px;
        font-size: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slider-nav.prev {
        left: 0;
    }

    .slider-nav.next {
        right: 0;
    }

    /* عنوان بخش در موبایل */
    .section-title {
        font-size: 2em;
        /* اندازه عنوان کمی کوچکتر شود */
    }

    /* دکمه More Images در موبایل */
    .btn-secondary {
        padding: 8px 20px;
        font-size: 0.9em;
    }
}

/*slider styles end.*/
/*line*/
.section-separator {
    padding: 90px 0;
    text-align: center;
    border-bottom: 2px dashed rgba(255, 204, 0, 0.4);
    margin-bottom: 40px;
}
/*music hub s*/
.music-hub-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 550px; /* افزایش حداقل ارتفاع بخش */
    padding: 30px 0;
}

/* --- Music Player Container --- */
.music-player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    
    /* 💥 FIX: تنظیم عرض بر اساس فاصله 50px از طرفین */
    max-width: none; /* حذف محدودیت‌های عرض قبلی */
    width: calc(90% - 100px); /* 50px فاصله از چپ و 50px از راست */
    
    height: 550px; /* ارتفاع کلی کانتینر پلیر */
    
    /* 💥 FIX: تنظیم مارجین افقی برای اعمال فاصله 50px */
    margin: 80px 50px;
    
    padding: 20px;
    
    /* استایل‌های نئون/شیشه بنفش */
    background: var(--bg-dark-purple);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-purple); 
    box-shadow: 0 0 20px var(--shadow-purple),
                0 0 40px rgba(204, 0, 255, 0.3);
}

.music-player-container .section-title {
    color: var(--neon-purple); 
    text-shadow: 0 0 10px var(--neon-purple),
                 0 0 20px rgba(204, 0, 255, 0.6);
    margin-bottom: 25px;
    font-size: 2.5em; 
}

/* --- Music Slider Viewport (قاب نمایش آهنگ‌ها) --- */
.music-slider-viewport {
    height: 400px; /* افزایش ارتفاع برای نمایش راحت‌تر 3 اسلاید بزرگ */
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 15px 0; 
    flex-grow: 1; 
    display: flex; 
    align-items: center; 
}

/* --- Music Slider Track (کانتینر متحرک اسلایدها) --- */
.music-slider-track {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%;
    will-change: transform; 
}

/* --- Music Slide (هر آهنگ در اسلایدر) --- */
.music-slide {
    width: 90%; 
    height: 80px; /* ارتفاع پیش‌فرض بزرگتر */
    margin: 8px 0; /* فاصله بیشتر بین اسلایدها */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08); /* پس‌زمینه کمی روشن‌تر */
    color: #f0f0f0;
    font-size: 1.1em; /* اندازه متن بزرگتر */
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
    opacity: 0.6; /* شفافیت آهنگ‌های غیرفعال */
    border: 1px solid transparent; 
    text-align: left;
    direction: ltr;
}

.music-slide .slide-content {
    display: flex;
    align-items: center;
    gap: 15px; /* فاصله بیشتر */
    justify-content: flex-start;
    text-align: left;
}

.music-slide .music-title {
    white-space: normal; 
    overflow: visible;
    text-overflow: clip; 
    max-width: none; /* عرض بیشتر برای عنوان */
    width: 100%;
    /* word-break: break-all; */
}

/* --- آیکون‌های پخش/توقف در حالت عادی --- */
.music-slide .slide-content .fas {
    /* اطمینان از رنگ پایه و ترنزیشن */
    color: #e0e0e0; 
    transition: all 0.2s ease;
    cursor: pointer;
}

/* --- هاور افکت برای آیکون‌های پخش/توقف --- */
.music-slide .slide-content .fas:hover {
     color: var(--neon-purple); 
    transform: scale(1.1); /* کمی بزرگتر شدن */
    text-shadow: 0 0 10px var(--neon-purple), 0 0 15px rgba(204, 0, 255, 0.5);
}

/* --- رنگ آیکون‌ها در اسلاید فعال (اختیاری) --- */
.music-slide.active .slide-content .fas {
    /* رنگ آیکون در اسلاید فعال، حتی بدون هاور */
    /* color: var(--neon-purple);  */
    text-shadow: 0 0 8px var(--neon-purple);
}

/* --- هاور در اسلاید فعال --- */
.music-slide.active .slide-content .fas:hover {
    color: #fff; /* رنگ سفیدتر هنگام هاور در اسلاید فعال */
    text-shadow: 0 0 15px var(--neon-purple);
}

.music-slide .fas { 
    font-size: 1.4em; 
    color: #e0e0e0;
}

.download-link {
    color: var(--soft-purple); /* رنگ بنفش */
    font-size: 1.3em;
    text-decoration: none; /* حذف خط زیر لینک */
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* 💥 FIX: قرارگیری آیکون در سمت راست */
    margin-left: auto; /* این مطمئن می‌شود که آیکون به سمت راست شیفت پیدا کند */
    
    /* جلوه درخشش نئونی */
    text-shadow: 0 0 5px var(--soft-purple);
}

.download-link:hover {
    color: var(--neon-purple); /* تغییر رنگ هنگام هاور */
    transform: scale(1.1);
    text-shadow: 0 0 10px var(--neon-purple), 0 0 15px rgba(204, 0, 255, 0.5);
    z-index: 10;
}

/* --- Music Slide Active (آهنگ فعال در وسط) --- */
.music-slide.active {
    width: 100%; 
    height: 110px; 
    opacity: 1; 
    font-size: 1.3em; 
    background: linear-gradient(90deg, var(--soft-purple) 0%, rgba(204, 0, 255, 0.2) 100%);
    border-color: var(--neon-purple); 
    box-shadow: 0 0 15px var(--shadow-purple);
    color: #fff;
}


/* --- Music Navigation Buttons (دکمه‌های بالا و پایین) --- */
.music-nav-btn {
    position: absolute; 
    width: 55px; 
    height: 55px;
    border-radius: 50%; 
    background: rgba(204, 0, 255, 0.2);
    border: 1px solid var(--border-purple);
    color: var(--neon-purple); 
    font-size: 1.8em; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10; 
    box-shadow: 0 0 12px var(--shadow-purple);
}

.music-nav-btn:hover {
    background: rgba(204, 0, 255, 0.4);
    box-shadow: 0 0 20px var(--shadow-purple);
    transform: scale(1.08);
}

.music-nav-btn.music-next {
    top: 110px; 
    left: 20px; 
    right: auto; 
}

.music-nav-btn.music-prev {
    bottom: 150px; 
    left: 20px; 
    right: auto; 
}

/* --- Upload Button --- */
.upload-btn {
    background: linear-gradient(45deg, #ff00ff, #9900ff); 
    color: white;
    padding: 12px 25px; 
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 20px; 
    box-shadow: 0 5px 15px rgba(153, 0, 255, 0.5);
    transition: all 0.3s ease;
}

.upload-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 25px rgba(153, 0, 255, 0.8);
}

/* --- Player Controls Container --- */
.player-controls {
    width: 90%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; 
    align-items: center;
}

/* --- Progress Container (نوار پیشرفت آهنگ) --- */
.progress-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.time-display {
    color: #e0e0e0;
    font-size: 0.9em;
    min-width: 35px; 
    text-align: center;
}

.progress-bar {
    -webkit-appearance: none; /* حذف استایل پیش‌فرض مرورگر */
    width: 100%;
    height: 8px; /* ارتفاع نوار */
    background: rgba(255, 255, 255, 0.2); /* پس‌زمینه نوار خاکستری شفاف */
    border-radius: 5px;
    outline: none;
    transition: background 0.2s ease-in-out;
    cursor: pointer;
}

/* استایل دایره روی نوار پیشرفت (Thumb) */
.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; /* اندازه دایره */
    height: 18px;
    border-radius: 50%;
    background: var(--neon-purple); /* رنگ بنفش نئون */
    border: 2px solid #fff;
    cursor: grab;
    box-shadow: 0 0 8px var(--neon-purple);
}

.progress-bar::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--neon-purple);
    border: 2px solid #fff;
    cursor: grab;
    box-shadow: 0 0 8px var(--neon-purple);
}

/* --- Volume Container (نوار کنترل صدا) --- */
.volume-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

#volumeIcon {
    color: var(--neon-purple);
    font-size: 1.5em;
    cursor: pointer;
    text-shadow: 0 0 5px var(--neon-purple);
}

.volume-bar {
    -webkit-appearance: none;
    width: 100px; /* عرض نوار صدا */
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    outline: none;
    transition: background 0.2s ease-in-out;
    cursor: pointer;
}

/* استایل دایره روی نوار صدا (Thumb) */
.volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--soft-purple); /* رنگ بنفش کمی تیره‌تر */
    border: 2px solid #fff;
    cursor: grab;
    box-shadow: 0 0 6px var(--soft-purple);
}

.volume-bar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--soft-purple);
    border: 2px solid #fff;
    cursor: grab;
    box-shadow: 0 0 6px var(--soft-purple);
}


/* ========================================= */
/* --- Responsive Adjustments (سایزهای موبایل بزرگتر) --- */
/* ========================================= */
@media (max-width: 768px) {
    .music-player-container {
        max-width: 95%;
        height: 480px; 
        padding: 15px;
    }

    .music-player-container .section-title {
        font-size: 2em;
        margin-bottom: 20px;
    }

    .music-slider-viewport {
        height: 350px; 
    }

    .music-slide {
        height: 70px; 
        font-size: 1em;
        padding: 0 15px;
    }

    .music-slide .music-title {
        max-width: 150px; 
    }

    .music-slide.active {
        height: 100px; 
        font-size: 1.2em;
    }

    .music-nav-btn {
        width: 35px;
        height: 35px;
        font-size: 1.0em;
    }
    .music-nav-btn.music-next {
        top: 110px; 
        left: 10px; /* فاصله کمتر در موبایل */
        right: auto;
    }
    .music-nav-btn.music-prev {
        bottom: 150px; 
        left: 10px; /* فاصله کمتر در موبایل */
        right: auto;
    }
    .player-controls {
        margin-top: 15px;
        gap: 10px;
    }
    .time-display {
        font-size: 0.8em;
    }
    .progress-bar {
        height: 6px;
    }
    .progress-bar::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }
    #volumeIcon {
        font-size: 1.3em;
    }
    .volume-bar {
        width: 80px;
        height: 5px;
    }
    .volume-bar::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .music-player-container {
        height: 450px;
        padding: 10px;
    }

    .music-slider-viewport {
        height: 320px;
    }

    .music-slide {
        height: 65px;
        font-size: 0.95em;
    }

    .music-slide.active {
        height: 90px;
        font-size: 1.1em;
    }

    .music-nav-btn {
        width: 45px;
        height: 45px;
        font-size: 1.4em;
    }
    .player-controls {
        margin-top: 10px;
        gap: 8px;
    }
    .time-display {
        font-size: 0.75em;
    }
    .progress-bar {
        height: 5px;
    }
    .progress-bar::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
    }
    #volumeIcon {
        font-size: 1.2em;
    }
    .volume-bar {
        width: 70px;
        height: 4px;
    }
    .volume-bar::-webkit-slider-thumb {
        width: 12px;
        height: 12px;
    }
}