/* -- تعریف متغیرهای رنگی -- */
        :root {
          --primary-purple: #9C3AAC; /* بنفش اصلی */
          --primary-blue: #3779EA;   /* آبی اصلی */
          --dark-background: #060606; /* پس‌زمینه تیره */
          --banner-bg-color: rgba(255, 255, 255, 0.03); /* رنگ پس‌زمینه بنر (قابل تغییر) */
          --text-color-banner: rgba(255, 255, 255, 0.9); /* رنگ متن روشن برای بنر */
          --line-color-banner: rgba(255, 255, 255, 0.1); /* خطوط نازک برای بنر */
          --glass-light-banner: rgba(255, 255, 255, 0.04); /* شفافیت کم برای شیشه بنر */
          --glass-medium-banner: rgba(255, 255, 255, 0.12); /* شفافیت متوسط برای شیشه بنر */
          --shadow-strong-banner: 0 10px 30px rgba(0,0,0,0.4); /* سایه قوی برای بنر */
          --shadow-medium-banner: 0 5px 15px rgba(0,0,0,0.3); /* سایه متوسط برای بنر */
        }

        body {
            margin: 0;
            font-family: 'Tahoma', sans-serif;
            background-color: var(--dark-background);
            color: var(--text-color-banner);
            overflow-x: hidden;
        }

        /* -- هدر نمونه -- */
        header {
            background-color: var(--dark-background);
            color: white;
            padding: 15px 40px;
            text-align: center;
            border-bottom: 1px solid var(--line-color-banner);
            position: relative;
            z-index: 10;
        }

        /* -- بنر تبلیغاتی باریک و شیشه‌ای -- */
        .thin-glass-banner {
            position: relative;
            width: 100%;
            height: 90px; /* ارتفاع ثابت */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 40px; /* پدینگ افقی */
            background: var(--banner-bg-color); /* استفاده از متغیر رنگ پس‌زمینه */
            border-bottom: 1px solid var(--line-color-banner);
            box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.06), var(--shadow-medium-banner);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            overflow: hidden;
            z-index: 5;
        }

        /* افکت‌های پس‌زمینه برای بنر باریک */
        .thin-glass-banner::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            right: -20%;
            bottom: -20%;
            background: radial-gradient(circle at center, rgba(55, 121, 234, 0.2) 10%, rgba(156, 58, 170, 0.2) 40%, var(--dark-background) 70%);
            z-index: 0;
        }

        .thin-glass-banner .banner-content {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between; /* آیتم‌ها را پخش می‌کند */
            width: 100%;
            height: 100%;
            gap: 20px; /* فاصله بین آیتم‌ها */
        }

        /* چیدمان آیتم‌ها در دسکتاپ */
        .thin-glass-banner .banner-image-container {
            order: 1; /* عکس اول (سمت چپ) */
            display: flex;
            align-items: center;
        }

        .thin-glass-banner .banner-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--glass-medium-banner);
            box-shadow: var(--shadow-medium-banner);
        }

        .thin-glass-banner .banner-text-container {
            order: 2; /* متن وسط */
            flex-grow: 1; /* متن فضا را پر کند */
            display: flex;
            align-items: center;
            justify-content: center; /* وسط‌چین متن */
            text-align: center;
            height: 100%;
        }

        .thin-glass-banner .banner-text {
            font-size: 1.1rem; /* بزرگتر کردن سایز فونت */
            font-weight: 600; /* پررنگ تر کردن */
            line-height: 1.5;
             /* گرادیان روی متن */
             background: linear-gradient(90deg, var(--primary-purple), var(--primary-blue));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             color: transparent;
             padding: 5px 10px; /* کمی padding دور متن */
             text-shadow: 0 0 10px rgba(156, 58, 170, 0.5); /* سایه متن */
        }

        .thin-glass-banner .banner-cta-button {
            order: 3; /* دکمه آخر (سمت راست) */
            margin-right: 20px; /* فاصله از متن */
        }

        /* -- استایل برای موبایل (یا صفحات کوچک) -- */
        @media (max-width: 768px) {
            .thin-glass-banner {
                height: auto;
                padding: 15px 20px;
                flex-direction: column; /* چیدمان عمودی */
                gap: 15px;
            }

            .thin-glass-banner .banner-content {
                flex-direction: column; /* محتوا هم عمودی */
                justify-content: center;
                gap: 15px; /* فاصله بین آیتم‌ها در حالت عمودی */
            }

            /* تغییر order در موبایل */
            .thin-glass-banner .banner-image-container {
                order: 1; /* عکس اول */
            }

            .thin-glass-banner .banner-text-container {
                order: 2; /* متن وسط */
            }

            .thin-glass-banner .banner-text {
                font-size: 0.95rem; /* در موبایل سایز متن کمی کوچکتر */
                padding: 3px 5px;
                text-shadow: none; /* حذف سایه متن در موبایل */
            }

            .thin-glass-banner .banner-cta-button {
                order: 3; /* دکمه آخر */
                margin-right: 0; /* حذف فاصله راست */
            }

            .thin-glass-banner .banner-cta-button {
                padding: 10px 25px;
                font-size: 0.9rem;
            }
        }