/* اسلایدر برازندگان
   رنگ‌ها از متغیرهای قالب می‌آیند؛ اگر قالب دیگری فعال باشد مقدار جایگزین
   استفاده می‌شود تا اسلایدر همه‌جا سالم دیده شود. */

.brz-slider {
	--sl-navy: var(--brz-navy, #0d2b4e);
	--sl-orange: var(--brz-orange, #e8791a);
	--sl-gold: var(--brz-gold, #c9a84c);

	position: relative;
	width: 100%;
	height: var(--brz-sl-h, 620px);
	overflow: hidden;
	background: var(--sl-navy);
	direction: rtl;
	isolation: isolate;
}

.brz-slider__track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---------- اسلاید ---------- */

.brz-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	visibility: hidden;
}

.brz-slide.is-active {
	visibility: visible;
	z-index: 2;
}

.brz-slide__media {
	position: absolute;
	inset: 0;
	display: block;
}

.brz-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* کن‌برنز: زوم بسیار آرام روی اسلاید فعال */
.brz-slider.has-kb .brz-slide.is-active .brz-slide__media img {
	animation: brz-kb 14s ease-out both;
}

@keyframes brz-kb {
	from { transform: scale(1.001); }
	to   { transform: scale(1.075); }
}

/* پوشش تیره فقط جایی که متن هست پررنگ می‌شود، بقیه تصویر باز می‌ماند.
   قبلاً یک لایه سراسری هم روی کل تصویر بود که همه‌جا را تیره می‌کرد. */
.brz-slide__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to left, rgba(4, 12, 24, var(--o, .35)) 0%, rgba(4, 12, 24, calc(var(--o, .35) * .28)) 46%, transparent 72%),
		linear-gradient(to top, rgba(4, 12, 24, .3) 0%, transparent 32%);
}

.brz-slide.is-center .brz-slide__scrim {
	background: rgba(4, 12, 24, calc(var(--o, .35) * .8));
}

.brz-slide__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 24px;
}

.brz-slide__box {
	max-width: 620px;
}

.brz-slide.is-center .brz-slide__inner { text-align: center; }
.brz-slide.is-center .brz-slide__box   { margin-inline: auto; }
.brz-slide.is-end .brz-slide__box      { margin-inline-start: auto; }

/* ---------- متن ---------- */

.brz-slide__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 18px;
	padding: 7px 15px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
}

.brz-slide__kicker::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sl-orange);
	box-shadow: 0 0 0 4px rgba(232, 121, 26, .25);
}

.brz-slide__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
	font-weight: 900;
	line-height: 1.35;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
}

.brz-slide__title em {
	font-style: normal;
	color: var(--sl-orange);
}

.brz-slide__text {
	margin: 18px 0 0;
	max-width: 52ch;
	color: rgba(255, 255, 255, .86);
	font-size: clamp(.95rem, 1.5vw, 1.08rem);
	font-weight: 300;
	line-height: 2.1;
}

.brz-slide.is-center .brz-slide__text { margin-inline: auto; }

.brz-slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.brz-slide.is-center .brz-slide__actions { justify-content: center; }
.brz-slide.is-end .brz-slide__actions    { justify-content: flex-end; }

.brz-slider .brz-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: .97rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
}

.brz-slider .brz-btn--solid {
	background: var(--sl-orange);
	color: #10202f;
}

.brz-slider .brz-btn--solid:hover {
	background: #ff9440;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(232, 121, 26, .35);
}

.brz-slider .brz-btn--ghost {
	border-color: rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	backdrop-filter: blur(6px);
}

.brz-slider .brz-btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .14);
	transform: translateY(-2px);
}

/* ---------- گذر ---------- */

.brz-slider--fade .brz-slide {
	opacity: 0;
	transition: opacity var(--brz-sl-speed, 700ms) ease, visibility 0s linear var(--brz-sl-speed, 700ms);
}

.brz-slider--fade .brz-slide.is-active {
	opacity: 1;
	transition: opacity var(--brz-sl-speed, 700ms) ease, visibility 0s;
}

.brz-slider--slide .brz-slide {
	transform: translateX(-100%);
	transition: transform var(--brz-sl-speed, 700ms) cubic-bezier(.5, .05, .2, 1), visibility 0s linear var(--brz-sl-speed, 700ms);
}

.brz-slider--slide .brz-slide.is-active {
	transform: translateX(0);
	transition: transform var(--brz-sl-speed, 700ms) cubic-bezier(.5, .05, .2, 1), visibility 0s;
}

.brz-slider--slide .brz-slide.is-leaving {
	visibility: visible;
	z-index: 1;
	transform: translateX(100%);
}

.brz-slider--slide.is-back .brz-slide         { transform: translateX(100%); }
.brz-slider--slide.is-back .brz-slide.is-active { transform: translateX(0); }
.brz-slider--slide.is-back .brz-slide.is-leaving { transform: translateX(-100%); }

/* محتوای اسلاید فعال با تأخیر کوتاه بالا می‌آید */
.brz-slide.is-active .brz-slide__kicker,
.brz-slide.is-active .brz-slide__title,
.brz-slide.is-active .brz-slide__text,
.brz-slide.is-active .brz-slide__actions {
	animation: brz-sl-up .75s cubic-bezier(.2, .7, .2, 1) both;
}

.brz-slide.is-active .brz-slide__title    { animation-delay: .08s; }
.brz-slide.is-active .brz-slide__text     { animation-delay: .16s; }
.brz-slide.is-active .brz-slide__actions  { animation-delay: .24s; }

@keyframes brz-sl-up {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- کنترل‌ها ---------- */

.brz-slider__nav {
	position: absolute;
	z-index: 5;
	inset-inline-start: 26px;
	bottom: 26px;
	display: flex;
	gap: 8px;
}

.brz-slider__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(10, 20, 32, .42);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background .22s, border-color .22s, transform .22s;
}

.brz-slider__arrow:hover {
	background: var(--sl-orange);
	border-color: var(--sl-orange);
	color: #10202f;
	transform: translateY(-2px);
}

.brz-slider__dots {
	position: absolute;
	z-index: 5;
	inset-inline-end: 26px;
	bottom: 34px;
	display: flex;
	gap: 9px;
}

.brz-slider__dot {
	width: 30px;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .3);
	cursor: pointer;
	transition: background .25s, width .25s;
}

.brz-slider__dot.is-active {
	width: 46px;
	background: var(--sl-orange);
}

.brz-slider__progress {
	position: absolute;
	z-index: 5;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .13);
}

.brz-slider__progress span {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(to left, var(--sl-orange), var(--sl-gold));
}

.brz-slider :focus-visible {
	outline: 3px solid var(--sl-orange);
	outline-offset: 3px;
}

/* ---------- موبایل ---------- */

@media (max-width: 767px) {

	.brz-slider { height: var(--brz-sl-hm, 460px); }

	.brz-slide__inner  { padding: 0 18px; }
	.brz-slide__box    { max-width: 100%; }
	.brz-slide__text   { font-size: .92rem; line-height: 1.95; }
	.brz-slide__scrim  { background: linear-gradient(to top, rgba(4, 12, 24, .68) 6%, rgba(4, 12, 24, calc(var(--o, .35) * .75)) 62%); }

	.brz-slider__nav   { inset-inline-start: 14px; bottom: 16px; }
	.brz-slider__arrow { width: 40px; height: 40px; }
	.brz-slider__dots  { inset-inline-end: 14px; bottom: 24px; }
	.brz-slider__dot   { width: 22px; }
	.brz-slider__dot.is-active { width: 34px; }

	.brz-slider .brz-btn { padding: 12px 22px; font-size: .9rem; }
}

/* ---------- کاهش حرکت ---------- */

@media (prefers-reduced-motion: reduce) {

	.brz-slider.has-kb .brz-slide.is-active .brz-slide__media img,
	.brz-slide.is-active .brz-slide__kicker,
	.brz-slide.is-active .brz-slide__title,
	.brz-slide.is-active .brz-slide__text,
	.brz-slide.is-active .brz-slide__actions {
		animation: none;
	}

	.brz-slider--fade .brz-slide,
	.brz-slider--slide .brz-slide {
		transition-duration: 1ms;
	}
}