:root {
            /* برند: ایندیگو + تیل */
            --indigo-1: #6c63ff;
            /* اصلی */
            --indigo-2: #3f3dff;
            /* سایه */
            --indigo-3: #9aa0ff;
            /* هایلایت */
            --teal-1: #00d5c5;
            /* تیل روشن */
            --teal-2: #00a39b;
            /* تیل تیره */
            --teal-3: #66fff2;
            /* گلو */

            --ink: #0b1024;
            /* پس‌زمینه تیره */
            --surface: #101631;
            /* لایه کارت */
            --text: #eef0ff;
            /* متن روشن */
            --muted: rgba(255, 255, 255, .72);

            --glass: rgba(255, 255, 255, .08);
            --glass-2: rgba(97, 97, 255, .12);

            --radius-xl: 30px;
            --radius-lg: 24px;
            --radius-md: 20px;
            --radius-sm: 12px;

            --shadow-1: 0 10px 28px rgba(0, 0, 0, .35);
            --shadow-2: 0 18px 48px rgba(0, 0, 0, .5);
            --shadow-inset: inset 0 0 10px rgba(97, 97, 255, .12);

            --edge-fade: 70px;
            /* فید کناری اسکرول */
            --blur: 16px;
            /* بک‌دراپ */

            /* تایپو و مقیاس سیال */
            --font-system: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Vazirmatn, IRANSans, "Helvetica Neue", Arial;
            --fs-12: clamp(11px, 0.78vw, 12px);
            --fs-14: clamp(12px, 0.9vw, 14px);
            --fs-16: clamp(13px, 1vw, 16px);
            --fs-18: clamp(14px, 1.2vw, 18px);
            --fs-20: clamp(16px, 1.5vw, 20px);
            --fs-28: clamp(20px, 2.3vw, 28px);
        }

        /* متغیر زاویه برای بوردرهای چرخان */
        @property --angle {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }

        @keyframes spinBorder {
            to {
                --angle: 360deg;
            }
        }

        @keyframes rotateGlare {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes floatY {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-6px)
            }
        }

        @keyframes sheen {
            0% {
                transform: translateX(-130%) rotate(12deg);
            }

            100% {
                transform: translateX(130%) rotate(12deg);
            }
        }

        @keyframes softPulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(0, 213, 197, .22)
            }

            50% {
                box-shadow: 0 0 0 10px rgba(0, 213, 197, 0)
            }
        }

        /* ==================== ریست سبک ==================== */
        * {
            -webkit-tap-highlight-color: transparent;
        }

        img,
        video {
            display: block;
        }

        html,
        body {
            height: 100%;
        }

        body {
            overflow-x: hidden;
            direction: rtl;
            width: 100%;
            color: var(--text);
        }

        ::selection {
            color: #fff;
        }

        /* ==================== اسکرول‌ویوها (نسخه Ultra Modern + نئونی) ==================== */
        .scroll-container,
        .scroll,
        .scroll-containers,
        .banner-wrapper,
        .song-wrapper,
        .video-wrapper,
        .game-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            overflow-x: auto;
            overflow-y: hidden;
            gap: 24px;
            padding: 20px 24px;
            border-radius: var(--radius-xl);
            /* بزرگ‌تر برای حس مدرن
            background:
                linear-gradient(145deg, rgba(20, 25, 60, 0.45), rgba(30, 35, 70, 0.35)),
                radial-gradient(circle at 20% 20%, rgba(97, 97, 255, 0.08), transparent 60%); */
            box-shadow:
                var(--shadow-inset),
                0 0 40px rgba(0, 213, 197, 0.15);
            /* درخشش نئونی */
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            /* اسنپ قوی‌تر */
            cursor: grab;
            user-select: none;
            -webkit-overflow-scrolling: touch;
            -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to left, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            backdrop-filter: blur(12px) saturate(150%);
            /* شیشه‌ای پیشرفته */
            transition: box-shadow 0.4s ease, transform 0.4s ease;
            overflow: hidden;
        }

        .scroll-container:hover,
        .scroll:hover,
        .scroll-containers:hover,
        .banner-wrapper:hover,
        .song-wrapper:hover,
        .video-wrapper:hover,
        .game-wrapper:hover {
            box-shadow:
                var(--shadow-inset-hover),
                0 0 60px rgba(0, 213, 197, 0.25);
            transform: translateY(-2px);
        }

        .scroll-container:active,
        .scroll:active,
        .scroll-containers:active,
        .banner-wrapper:active,
        .song-wrapper:active,
        .video-wrapper:active,
        .game-wrapper:active {
            cursor: grabbing;
            transform: scale(0.99);
            /* حس فشرده شدن */
        }

        /* افکت ذرات معلق در اسکرول (جدید!) */
        .scroll-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="20" cy="20" r="1.5" fill="%235f7cff" opacity="0.5"><animate attributeName="r" values="1;2;1" dur="2s" repeatCount="indefinite"/></circle><circle cx="50" cy="50" r="1" fill="%2300ffd0" opacity="0.4"><animate attributeName="r" values="0.5;1.5;0.5" dur="1.8s" repeatCount="indefinite"/></circle><circle cx="80" cy="80" r="2" fill="%2300ffc8" opacity="0.3"><animate attributeName="r" values="1.5;2.5;1.5" dur="2.5s" repeatCount="indefinite"/></circle></svg>') repeat;
            background-size: 100px 100px;
            animation: driftParticles 15s linear infinite;
            opacity: 0.25;
            pointer-events: none;
            filter: blur(2px);
        }

        @keyframes driftParticles {
            0% {
                transform: translateX(0) translateY(0);
            }

            100% {
                transform: translateX(-50px) translateY(20px);
            }
        }

        /* Progress خطی با گرادیان پویا (بهبود یافته) */
        .scroll-progress {
            position: absolute;
            inset-inline: 16px;
            top: 10px;
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(97, 97, 255, 0.15), rgba(0, 255, 208, 0.15));
            overflow: hidden;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .scroll-progress::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 40%;
            background: conic-gradient(var(--indigo-1), var(--teal-1), var(--indigo-2), var(--teal-2));
            animation: floatY 2.5s ease-in-out infinite, rotateGradient 4s linear infinite;
            filter: blur(1px);
        }

        @keyframes floatY {

            0%,
            100% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(calc(100% - 40%));
            }
        }

        /* مخفی‌سازی اسکرول‌بارها (همان قبلی اما محکم‌تر) */
        .scroll-container,
        .scroll,
        .scroll-containers,
        .banner-wrapper,
        .song-wrapper,
        .video-wrapper,
        .game-wrapper {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .scroll-container::-webkit-scrollbar,
        .scroll::-webkit-scrollbar,
        .scroll-containers::-webkit-scrollbar,
        .banner-wrapper::-webkit-scrollbar,
        .song-wrapper::-webkit-scrollbar,
        .video-wrapper::-webkit-scrollbar,
        .game-wrapper::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
            display: none;
        }

        /* ==================== کارت‌ها (نسخه نئونی سه‌بعدی) ==================== */
        .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: clamp(280px, 30vw, 350px);
            margin: 18px;
            padding: 20px;
            border-radius: var(--radius-xl);
            background:
                linear-gradient(145deg, rgba(15, 20, 50, 0.85), rgba(25, 30, 65, 0.75)) padding-box,
                conic-gradient(from var(--angle), var(--indigo-1), var(--teal-1), #ffffff, var(--indigo-2), var(--teal-2), var(--indigo-1)) border-box;
            border: 2.5px solid transparent;
            box-shadow: var(--shadow-2);
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease, filter 0.6s ease;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            z-index: 1;
            will-change: transform, filter;
            perspective: 1200px;
            transform-style: preserve-3d;
        }

        .card:hover {
            transform: translateY(-12px) scale(1.04) rotateX(2deg) rotateY(-2deg);
            box-shadow: var(--shadow-3), 0 0 50px rgba(97, 97, 255, 0.3);
            animation: spinBorder 6s linear infinite;
        }

        .card::before {
            content: "";
            position: absolute;
            inset: -80%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 20%, transparent 70%);
            animation: rotateGlare 8s linear infinite;
            pointer-events: none;
            z-index: 0;
            filter: blur(5px);
        }

        .card::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.12) 40%, transparent 60%);
            transform: translateX(-150%);
            transition: transform 0.7s ease;
            backdrop-filter: blur(2px);
        }

        .card:hover::after {
            transform: translateX(150%);
        }

        /* افکت ذرات داخلی کارت (جدید!) */
        .card::backdrop {
            content: '';
            position: absolute;
            inset: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="1" fill="%235f7cff" opacity="0.6"><animate attributeName="opacity" values="0.3;0.8;0.3" dur="1.5s" repeatCount="indefinite"/></circle></svg>') repeat;
            background-size: 50px 50px;
            animation: subtleDrift 10s linear infinite;
            opacity: 0.15;
            pointer-events: none;
        }

        @keyframes subtleDrift {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(-20px, 10px);
            }
        }

        .img-fluid {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            transition: transform 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease;
            will-change: transform, filter;
        }

        .card:hover .img-fluid {
            transform: translateZ(20px) scale(1.06) rotate(1deg);
            box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4);
            filter: brightness(1.08) contrast(1.05);
        }

        .card .title,
        .card .description {
            text-align: center;
            margin-top: 12px;
            letter-spacing: 0.4px;
            color: #f8f9ff;
            text-shadow: 0 1px 4px rgba(0, 213, 197, 0.4);
            transition: transform 0.4s ease, text-shadow 0.4s ease;
        }

        .card:hover .title,
        .card:hover .description {
            transform: translateZ(10px);
            text-shadow: 0 2px 6px rgba(0, 213, 197, 0.6);
        }

        .card .title {
            font-size: var(--fs-20);
            font-weight: 900;
        }

        .card .description {
            font-size: var(--fs-15);
            font-weight: 700;
            opacity: 0.98;
        }

        .card .btn {
            margin-top: 14px;
            background: conic-gradient(var(--indigo-2), var(--teal-2), var(--indigo-1), var(--teal-1));
            color: #fff;
            border: none;
            padding: 12px 26px;
            border-radius: 999px;
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(97, 97, 255, 0.4), 0 4px 12px rgba(0, 213, 197, 0.3);
            transition: transform 0.3s ease, box-shadow 0.4s ease, filter 0.3s ease, background 0.5s ease;
            animation: btnGlow 3s ease-in-out infinite alternate;
        }

        .card .btn:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 16px 40px rgba(97, 97, 255, 0.5);
            filter: brightness(1.1);
            background: conic-gradient(var(--teal-2), var(--indigo-2), var(--teal-1), var(--indigo-1));
        }

        .card .btn:active {
            transform: translateY(-2px) scale(0.97);
            box-shadow: 0 8px 20px rgba(97, 97, 255, 0.3);
        }

        @keyframes spinBorder {
            to {
                --angle: 360deg;
            }
        }

        @keyframes rotateGlare {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes rotateGradient {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes btnGlow {
            0% {
                box-shadow: 0 10px 25px rgba(97, 97, 255, 0.4), 0 4px 12px rgba(0, 213, 197, 0.3);
            }

            100% {
                box-shadow: 0 12px 30px rgba(97, 97, 255, 0.5), 0 5px 15px rgba(0, 213, 197, 0.4);
            }
        }

        /* ==================== کاشی‌های آهنگ/ویدیو/کُل ==================== */
        .song-container,
        .video-container,
        .col {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 12px;
            cursor: pointer;
            padding: 18px;
            border-radius: var(--radius-md);
            color: #fff;
            background: linear-gradient(135deg, rgba(97, 97, 255, .16), rgba(0, 0, 40, .38));
            border: 2px solid rgba(97, 97, 255, .5);
            box-shadow: 0 8px 20px rgba(97, 97, 255, .18), 0 0 10px rgba(97, 97, 255, .12) inset;
            -webkit-backdrop-filter: blur(var(--blur));
            backdrop-filter: blur(var(--blur));
            transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
            will-change: transform;
            scroll-snap-align: start;
        }

        .song-container:hover,
        .video-container:hover,
        .col:hover {
            transform: translateY(-6px) scale(1.035);
            box-shadow: 0 14px 28px rgba(0, 0, 0, .3);
            border-color: rgba(0, 213, 197, .7);
            background: linear-gradient(135deg, rgba(0, 213, 197, .18), rgba(97, 97, 255, .24));
        }

        .song-container::before,
        .video-container::before,
        .col::before {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            pointer-events: none;
            background: conic-gradient(from var(--angle), rgba(0, 213, 197, .35), rgba(108, 99, 255, .22), rgba(0, 213, 197, .35));
            filter: blur(10px);
            opacity: .0;
            transition: opacity .35s ease;
            z-index: 0;
        }

        .song-container:hover::before,
        .video-container:hover::before,
        .col:hover::before {
            opacity: .6;
            animation: spinBorder 8s linear infinite;
        }

        .song-container::after,
        .video-container::after,
        .col::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .16) 40%, transparent 62%);
            transform: translateX(-120%);
            transition: transform .6s ease;
        }

        .song-container:hover::after,
        .video-container:hover::after,
        .col:hover::after {
            transform: translateX(120%);
        }

        .song-container img {
            width: 130px;
            height: 130px;
            border-radius: 20px;
            border: 3px solid #fff;
            box-shadow: 0 6px 18px rgba(255, 255, 255, .18), 0 0 12px rgba(97, 97, 255, .45);
            transition: transform .35s ease, box-shadow .35s ease;
        }

        .song-container img:hover {
            transform: scale(1.06);
            box-shadow: 0 10px 26px rgba(255, 255, 255, .28), 0 0 18px rgba(0, 213, 197, .65);
        }

        .song-container p {
            text-align: center;
            margin-top: 10px;
            font-size: var(--fs-16);
            font-weight: 800;
            color: #f0f0ff;
            max-width: 175px;
            white-space: normal;
            word-break: break-word;
            text-shadow: 0 1px 3px rgba(97, 97, 255, .45);
        }

        .video-container img {
            width: 250px;
            height: 220px;
            border-radius: 20px;
            border: 3px solid #fff;
            box-shadow: 0 8px 20px rgba(255, 255, 255, .15), 0 0 12px rgba(97, 97, 255, .4);
            transition: transform .35s ease, box-shadow .35s ease;
        }

        .video-container img:hover {
            transform: scale(1.045);
            box-shadow: 0 12px 30px rgba(255, 255, 255, .25), 0 0 18px rgba(0, 213, 197, .6);
        }

        .video-container p {
            text-align: center;
            margin-top: 12px;
            font-size: var(--fs-18);
            font-weight: 800;
            color: #f0f0ff;
            max-width: 260px;
            word-break: break-word;
            text-shadow: 0 1px 3px rgba(97, 97, 255, .45);
        }

        /* در هاور: کنتراست متن */
        .song-container:hover p,
        .video-container:hover p,
        .game-container:hover p {
            color: #131626;
            text-shadow: none;
            transition: color .3s ease;
        }

        /* لینک‌ها/تصاویر غیرقابل درگ/انتخاب */
        .song-container a,
        .video-container a,
        .game-container a,
        .banner-container a {
            user-select: none;
            -webkit-user-drag: none;
            cursor: default;
            text-decoration: none;
        }

        .song-container img,
        .video-container img,
        .game-container img,
        .banner-container img {
            pointer-events: none;
        }

        /* ==================== اسلایدر بنر ==================== */
        .sc {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            overflow: hidden;
            padding: 42px 0;
            background: linear-gradient(145deg, #e0f7fa, #ffffff);
        }

        .banner-wrapper {
            width: 90%;
            max-width: 1300px;
            gap: 30px;
            border-radius: var(--radius-xl);
            box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
            scrollbar-width: none;
            position: relative;
        }

        .banner-wrapper::-webkit-scrollbar {
            display: none;
        }

        .banner-container {
            display: flex;
            gap: 30px;
            transition: transform .8s cubic-bezier(.25, 1, .5, 1);
        }

        .banner-slide {
            min-width: 565px;
            height: 300px;
            border-radius: 30px;
            position: relative;
            overflow: hidden;
            transition: transform .45s ease;
            box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
            user-select: none;
            -webkit-user-drag: none;
            cursor: pointer;
            scroll-snap-align: center;
        }

        .banner-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 5px solid #fff;
            border-radius: 30px;
            transition: transform .6s ease, filter .6s ease, box-shadow .6s ease;
        }

        .banner-slide:hover {
            transform: scale(1.04);
        }

        .banner-slide:hover img {
            transform: scale(1.08) rotate(.8deg);
            filter: brightness(1.12);
            box-shadow: 0 16px 30px rgba(0, 0, 0, .3);
        }

        .banner-slide::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, .32);
            opacity: 0;
            transition: opacity .4s ease;
            border-radius: 30px;
        }

        .banner-slide:hover::before {
            opacity: 1;
        }

        .banner-caption {
            position: absolute;
            inset-inline: 0;
            bottom: 0;
            padding: 14px 16px;
            background: linear-gradient(180deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .75));
            color: #fff;
            font-weight: 800;
            font-size: var(--fs-18);
            text-align: center;
            border-end-end-radius: 30px;
            border-end-start-radius: 30px;
            transform: translateY(100%);
            opacity: 0;
            transition: all .45s ease;
        }

        .banner-slide:hover .banner-caption {
            transform: translateY(0);
            opacity: 1;
        }

        /* دکمه‌های ناوبری */
        .scroll-btn,
        .btn-scroll {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, .9);
            border: none;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            cursor: pointer;
            transition: background .3s, transform .25s, box-shadow .35s;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: #0a3cff;
            box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
            z-index: 5;
        }

        .scroll-btn:hover,
        .btn-scroll:hover {
            background: #fff;
            transform: translateY(-50%) scale(1.08);
            box-shadow: 0 14px 28px rgba(0, 128, 255, .35);
        }

        .scroll-left,
        .btn-scroll-left {
            left: -70px;
        }

        .scroll-right,
        .btn-scroll-right {
            right: -70px;
        }

        @media (max-width: 768px) {

            .scroll-left,
            .btn-scroll-left {
                left: -30px
            }

            .scroll-right,
            .btn-scroll-right {
                right: -30px
            }
        }

        /* ==================== کارت‌های بازی ==================== */
        .game-wrapper {
            gap: 25px;
        }

        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            border-radius: 20px;
            padding: 12px;
            background: linear-gradient(180deg, #ffffff, rgba(97, 97, 255, .08));
            box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
            transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
            position: relative;
        }

        .game-container:hover {
            transform: translateY(-6px) scale(1.06);
            box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
            background: linear-gradient(180deg, #ffffff, rgba(0, 213, 197, .22));
        }

        .game-container::after {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            pointer-events: none;
            background: conic-gradient(from var(--angle), rgba(0, 213, 197, .35), rgba(108, 99, 255, .22), rgba(0, 213, 197, .35));
            filter: blur(10px);
            opacity: 0;
            transition: opacity .35s;
            z-index: 0;
        }

        .game-container:hover::after {
            opacity: .6;
            animation: spinBorder 8s linear infinite;
        }

        .game-container img {
            width: 320px;
            height: 250px;
            border-radius: 20px;
            padding: 5px;
            border: 2px solid var(--indigo-1);
            transition: transform .35s ease, box-shadow .35s ease;
        }

        .game-container img:hover {
            transform: rotate(3.5deg) scale(1.035);
            box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
        }

        .game-container p {
            text-align: center;
            margin-top: 10px;
            font-size: var(--fs-18);
            font-weight: 800;
            color: #222;
            transition: color .3s ease;
        }

        .game-container:hover p {
            color: var(--teal-2);
        }

        /* ==================== خرده‌جزئیات ==================== */
        .duration {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: #fff;
            color: #000;
            padding: 6px 8px;
            border-radius: 8px;
            font-size: var(--fs-12);
            font-weight: 800;
            box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
        }

        .card-title {
            font-size: var(--fs-28);
            margin: 6px;
            color: var(--indigo-1);
            text-align: center;
            animation: fadeInDown 800ms ease both;
            text-shadow: 0 10px 12px rgba(0, 0, 0, .35);
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-14px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* بنر قبلی – نرم‌سازی اسکیل */
        .banner-container img {
            border-radius: 30px;
            border: 8px solid #fff;
            text-shadow: 0 0 2px rgba(0, 0, 0, .2);
            transition: transform .45s ease;
        }

        .banner-container img:hover {
            transform: scale(1.045);
        }

        /* ==================== Utilities (ابزارک‌های آماده) ==================== */
        .glass {
            background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
            border: 1px solid rgba(255, 255, 255, .15);
            -webkit-backdrop-filter: blur(var(--blur));
            backdrop-filter: blur(var(--blur));
            box-shadow: 0 10px 30px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .04) inset;
            border-radius: var(--radius-lg);
        }

        .glow {
            box-shadow: 0 0 0 2px rgba(0, 213, 197, .3), 0 0 28px rgba(0, 213, 197, .25), 0 14px 30px rgba(0, 0, 0, .35);
        }

        .text-gradient {
            background: linear-gradient(90deg, var(--teal-3), var(--indigo-3));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 999px;
            font-weight: 800;
            font-size: var(--fs-12);
            color: #072a2a;
            background: linear-gradient(90deg, rgba(102, 255, 242, .95), rgba(154, 160, 255, .95));
            box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
        }

        .icon-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--teal-2);
            box-shadow: 0 0 0 6px rgba(0, 213, 197, .18);
            animation: softPulse 2.4s ease-in-out infinite;
        }

        /* شاین روی هر المنت */
        .shiny {
            position: relative;
            overflow: hidden;
        }

        .shiny::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 40%;
            opacity: .65;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
            transform: translateX(-130%) rotate(12deg);
        }

        .shiny:hover::after {
            animation: sheen .9s ease forwards;
        }

        /* اسکلت لودر */
        .skeleton {
            position: relative;
            overflow: hidden;
            background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
            background-size: 200% 100%;
            animation: skeletonMove 1.4s linear infinite;
            border-radius: var(--radius-sm);
        }

        @keyframes skeletonMove {
            0% {
                background-position: 200% 0
            }

            100% {
                background-position: -200% 0
            }
        }

        /* دکمه‌های نئونی */
        .btn-neon {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 22px;
            border-radius: 999px;
            font-weight: 800;
            color: #001d1b;
            background: linear-gradient(90deg, var(--teal-1), var(--indigo-1));
            box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
            border: 0;
            cursor: pointer;
            transition: transform .25s, box-shadow .35s, filter .3s;
        }

        .btn-neon:hover {
            transform: translateY(-3px);
            filter: brightness(1.06);
            box-shadow: 0 18px 46px rgba(0, 213, 197, .35), 0 10px 24px rgba(108, 99, 255, .35);
        }

        .btn-neon:active {
            transform: translateY(-1px) scale(.98);
        }

        /* 
          نوار محتوایی شیشه‌ای (می‌تونی دور سکشن‌ها بذاری)
          <div class="glass glow">...</div>
        */

        /* ==================== ریسپانسیو ==================== */
        @media (max-width: 1200px) {
            .img-fluid {
                height: 260px;
            }
        }

        @media (max-width: 1024px) {
            .img-fluid {
                height: 240px;
            }

            .banner-slide {
                min-width: 480px;
                height: 260px;
            }
        }

        @media (max-width: 768px) {
            .song-container img {
                width: 100px;
                height: 100px;
            }

            .video-container img {
                width: 175px;
                height: 140px;
            }

            .game-container img {
                width: 260px;
                height: 190px;
            }

            .banner-slide {
                min-width: 320px;
                height: 200px;
            }

            .banner-container img {
                width: 350px;
                height: 226px;
            }

            .song-wrapper,
            .video-wrapper,
            .game-wrapper,
            .banner-wrapper {
                gap: 10px;
                padding: 10px;
            }
        }

        /* ==================== دسترسی: کاهش موشن ==================== */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important;
            }
        }

        /* ==================== سازگاری Safari برای blur ==================== */
        @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

            .glass,
            .song-container,
            .video-container,
            .col {
                background: rgba(255, 255, 255, .06);
            }
        }