.anlamtv-banner-slider {
    position: relative;
    isolation: isolate; /* گارانتی می‌کند این عنصر یک stacking context مستقل بسازد
                            تا z-index داخلی هرگز با CSS پوسته یا افزونه‌های دیگر تداخل نکند */
    width: 100%;
    height: var(--anlamtv-slider-height, 480px);
    overflow: hidden;
    border-radius: 8px;
    margin: 24px 0;
    background: #111;
    touch-action: pan-y; /* اسکرول عمودی صفحه را دست‌نخورده می‌گذارد ولی افقی را برای درگ آزاد می‌کند */
    -webkit-user-select: none;
    user-select: none;
}

/* جهت متن فقط وقتی راست‌چین اعمال می‌شود که صفحه‌ی فعلی واقعاً راست‌چین باشد
   (کلاس rtl. که وردپرس خودش بر اساس زبان فعلی—از جمله زبان تعیین‌شده توسط
   Bogo—به‌طور خودکار به body اضافه می‌کند). روی صفحات چپ‌چین، این بلوک با
   جهت طبیعی چپ‌به‌راست نمایش داده می‌شود. */
body.rtl .anlamtv-banner-slider {
    direction: rtl;
}

.anlamtv-banner-slider__track {
    position: relative;
    display: flex;
    direction: ltr; /* چیدمان داخلی همیشه چپ‌به‌راست محاسبه می‌شود تا منطق درگ/دکمه‌ها
                        مستقل از جهت کلی صفحه و ساده بماند */
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.5s ease;
}

.anlamtv-banner-slider.is-dragging .anlamtv-banner-slider__track {
    transition: none !important;
}

.anlamtv-banner-slider__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.anlamtv-banner-slider__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #333;
    pointer-events: none;
}

.anlamtv-banner-slider__skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        #2b2b2b 30%,
        #3d3d3d 45%,
        #3d3d3d 55%,
        #2b2b2b 70%
    );
    background-size: 250% 100%;
    animation: anlamtv-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes anlamtv-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.anlamtv-banner-slider__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.anlamtv-banner-slider__img.is-loaded {
    opacity: 1;
}

.anlamtv-banner-slider__image.is-loaded .anlamtv-banner-slider__skeleton {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.anlamtv-banner-slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
    pointer-events: none;
}

.anlamtv-banner-slider__content {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    padding: 32px 40px;
    color: #fff;
    max-width: 780px;
}

body.rtl .anlamtv-banner-slider__content {
    direction: rtl;
}

.anlamtv-banner-slider__category {
    display: inline-block;
    background: #d32f2f;
    color: #fff;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.anlamtv-banner-slider__category a {
    color: #fff;
    text-decoration: none;
}

.anlamtv-banner-slider__title {
    font-size: 28px;
    line-height: 1.4;
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
}

.anlamtv-banner-slider__title a {
    color: #fff;
    text-decoration: none;
}

.anlamtv-banner-slider__excerpt {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 10px;
    max-width: 620px;
}

.anlamtv-banner-slider__meta {
    font-size: 13px;
    opacity: 0.8;
    display: flex;
    gap: 16px;
}

/* --- دکمه‌های قبلی/بعدی و نقطه‌ها: همیشه بالاترین لایه --- */
.anlamtv-banner-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    pointer-events: auto;
}

.anlamtv-banner-slider__nav:hover {
    background: rgba(0, 0, 0, 0.75);
}

.anlamtv-banner-slider__nav--prev {
    inset-inline-start: 16px;
}

.anlamtv-banner-slider__nav--next {
    inset-inline-end: 16px;
}

.anlamtv-banner-slider__dots {
    position: absolute;
    bottom: 14px;
    inset-inline-end: 40px;
    z-index: 20;
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.anlamtv-banner-slider__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
}

.anlamtv-banner-slider__dot.is-active {
    background: #fff;
}

@media (max-width: 600px) {
    .anlamtv-banner-slider {
        height: 320px;
    }
    .anlamtv-banner-slider__content {
        padding: 20px;
    }
    .anlamtv-banner-slider__title {
        font-size: 20px;
    }
    .anlamtv-banner-slider__dots {
        inset-inline-end: 20px;
    }
}