/* Tarhestan — Slider. Colors and width follow the header variables (--th-primary, --th-accent, --th-max). */

.ts{
	--ts-primary:var(--th-primary,#0e7c66);
	--ts-accent:var(--th-accent,#f2b84b);
	--ts-shade:8 30 25;
	--ts-ratio:21 / 9;
	--ts-ratio-m:4 / 5;
	--ts-speed:700ms;
	--ts-overlay:.4;
	/* Brand colors of the site (buttons, arrow hover, active dot). */
	--ts-brand:rgba(130,21,29,.81);
	--ts-brand-hi:rgb(191,30,46);
	--ts-brand-grad:linear-gradient(to right,rgba(130,21,29,.81) 0%,rgb(191,30,46) 50%,rgba(130,21,29,.81) 100%);
	position:relative;isolation:isolate;overflow:hidden;
	direction:rtl;text-align:right;color:#fff;
	background:rgb(var(--ts-shade));
	border-radius:24px;margin:0 auto 2.5rem;max-width:var(--th-max,1320px);
	font-family:inherit;line-height:1.8;
	box-shadow:0 30px 60px -30px rgba(8,30,25,.5);
}
.ts--home{border-radius:0;margin:0;max-width:none;box-shadow:none}
.ts *,.ts *::before,.ts *::after{box-sizing:border-box}
.ts :is(h1,h2,h3,p){margin:0;padding:0;letter-spacing:normal;text-transform:none}
.ts a{color:inherit;text-decoration:none}
.ts .th-i{display:block;flex:none}
.ts :focus-visible{outline:2px solid var(--ts-accent);outline-offset:3px}
.ts [hidden]{display:none!important}

/* ---------- Stage: height comes from the aspect ratio, so the page never jumps ---------- */
.ts__viewport{position:relative;aspect-ratio:var(--ts-ratio-m);overflow:hidden}
@media (min-width:768px){.ts__viewport{aspect-ratio:var(--ts-ratio)}}

.ts__slide{
	position:absolute;inset:0;opacity:0;visibility:hidden;
	transition:opacity var(--ts-speed) ease,visibility 0s linear var(--ts-speed);
}
.ts__slide.is-active{opacity:1;visibility:visible;transition:opacity var(--ts-speed) ease,visibility 0s}
.ts__slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}

.ts__media{position:absolute;inset:0;margin:0}
.ts__img{display:block;width:100%;height:100%;}
.ts__link{position:absolute;inset:0;z-index:1;display:block;cursor:pointer}
.ts__link:focus-visible{outline:2px solid var(--ts-accent);outline-offset:-4px}

/* Dark overlay that supports the text side (follows the chosen alignment). */
.ts--align-right .ts__slide::after{background:linear-gradient(to left,rgb(var(--ts-shade) / var(--ts-overlay)) 0%,rgb(var(--ts-shade) / calc(var(--ts-overlay) * .35)) 55%,transparent 82%)}
.ts--align-left .ts__slide::after{background:linear-gradient(to right,rgb(var(--ts-shade) / var(--ts-overlay)) 0%,rgb(var(--ts-shade) / calc(var(--ts-overlay) * .35)) 55%,transparent 82%)}
.ts--align-center .ts__slide::after{background:rgb(var(--ts-shade) / var(--ts-overlay))}

/* ---------- Text ---------- */
.ts__content{
	position:absolute;inset:0;z-index:2;
	display:flex;flex-direction:column;justify-content:center;
	width:min(100%,44rem);padding:clamp(1.5rem,5vw,5rem);
}
.ts--align-right .ts__content{right:0;left:auto;align-items:flex-start;text-align:right}
.ts--align-left .ts__content{left:0;right:auto;align-items:flex-start;text-align:left}
.ts--align-center .ts__content{left:50%;right:auto;transform:translateX(-50%);align-items:center;text-align:center;width:min(100%,50rem)}

.ts__kicker{
	display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.9rem;padding:.35rem 1rem;
	border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
	-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
	font-size:.9rem;font-weight:700;color:var(--ts-accent);
}
.ts__title{
	font-size:clamp(1.6rem,3.8vw,3.4rem);line-height:1.35;font-weight:900;
	text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.25);
}
.ts__text{margin-top:.75rem;max-width:36rem;font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.95;opacity:.92}
.ts__btn{
	display:inline-flex;align-items:center;gap:.55rem;margin-top:1.5rem;min-height:52px;padding:0 1.75rem;
	border-radius:14px;background:var(--ts-brand-hi);color:#fff;font-weight:800;font-size:1rem;
	box-shadow:0 14px 30px -12px var(--ts-brand-hi);
	transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
/* Hover: the same main color, only a little lighter. */
.ts__btn:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--ts-brand-hi) 88%,#fff);box-shadow:0 18px 36px -12px var(--ts-brand-hi)}

/* Text animates in when its slide becomes active. The image itself never animates. */
.ts__slide.is-active .ts__kicker,
.ts__slide.is-active .ts__title,
.ts__slide.is-active .ts__text,
.ts__slide.is-active .ts__btn{animation:ts-in .9s cubic-bezier(.3,.7,.2,1) both}
.ts__slide.is-active .ts__title{animation-delay:.08s}
.ts__slide.is-active .ts__text{animation-delay:.16s}
.ts__slide.is-active .ts__btn{animation-delay:.24s}
@keyframes ts-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Controls (hidden until the script runs) ---------- */
.ts__arrow{
	position:absolute;top:50%;z-index:3;display:grid;place-items:center;
	width:52px;height:52px;margin:0;padding:0;border:0;border-radius:50%;
	background-color:var(--ts-brand);background-image:var(--ts-brand-grad);color:#fff;
	box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transform:translateY(-50%);
	transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease;
}
.ts__arrow:hover{background-color:var(--ts-brand);background-image:var(--ts-brand-grad);color:#fff}
.ts__arrow:active{transform:translateY(-50%) scale(.95)}
.ts__arrow:disabled{opacity:.35;cursor:default;pointer-events:none}
.ts__arrow .th-i{width:22px;height:22px}
.ts__arrow--next{left:clamp(.75rem,2vw,1.5rem)}
.ts__arrow--prev{right:clamp(.75rem,2vw,1.5rem)}
.ts__arrow--prev .th-i{transform:scaleX(-1)}

.ts__dots{position:absolute;bottom:clamp(.9rem,2.5vw,1.5rem);left:50%;z-index:3;display:flex;gap:.45rem;transform:translateX(-50%)}
.ts__dot{position:relative;width:10px;height:10px;margin:0;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.55);cursor:pointer;transition:width .35s ease,background .35s ease}
.ts__dot::before{content:"";position:absolute;inset:-10px -6px} /* larger touch target */
.ts__dot[aria-current="true"]{width:30px;background:var(--ts-brand-hi)}

.ts:not(.is-ready) .ts__arrow,
.ts:not(.is-ready) .ts__dots{display:none}

/* ---------- Mobile ---------- */
@media (max-width:767px){
	.ts{border-radius:18px}
	.ts--home{border-radius:0}
	/* ".ts ." prefix gives these the same weight as the alignment rules above, so they win on mobile. */
	.ts .ts__content{width:100%;padding:1.25rem 1.25rem 3.75rem;justify-content:flex-end;transform:none;left:0;right:0}
	.ts.ts--align-center .ts__content{align-items:center;text-align:center}
	.ts.ts--align-left .ts__content{align-items:flex-start;text-align:left}
	.ts.ts--align-right .ts__content{align-items:flex-start;text-align:right}
	.ts__title{font-size:clamp(1.35rem,6vw,1.9rem)}
	.ts__text{font-size:.95rem;line-height:1.8}
	.ts__btn{min-height:46px;padding:0 1.25rem;margin-top:1rem}
	.ts .ts__slide::after{background:linear-gradient(to top,rgb(var(--ts-shade) / .9) 0%,rgb(var(--ts-shade) / calc(var(--ts-overlay) * 1.2)) 50%,transparent 85%)}
	/* On phones the slide is swiped; the arrows are hidden (dots and swipe stay). */
	.ts__arrow{display:none}
}

@media (prefers-reduced-motion:reduce){
	.ts__slide,.ts__slide.is-active{transition:none}
	.ts__slide.is-active *{animation:none!important}
	.ts__btn,.ts__arrow{transition:none}
}