/* =====================================================================
   HamanTech Pro Slider v2.2 — Pure CSS, zero external dependency
   ===================================================================*/
.htps-wrapper { position: relative; width: 100%; box-sizing: border-box; }
.htps-wrapper *, .htps-wrapper *::before, .htps-wrapper *::after { box-sizing: border-box; }

.htps-slider {
  position: relative;
  width: 100%;
  height: 520px;          /* Elementor selectors این را بازنویسی می‌کنند */
  overflow: hidden;
  background: #1b1b2f;
}

/* =====================================================================
   اسلاید — همه absolute، بدون flex track
   ===================================================================*/
.htps-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 0;
  will-change: transform, opacity;
}

/* =====================================================================
   بک‌گراند — ۱۰۰٪ واقعی؛ scale در keyframe کافیست
   ===================================================================*/
.htps-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform-origin: center center;
  will-change: transform, filter;
}
.htps-slide-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.htps-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.htps-slide-inner {
    max-width: 1140px;
    margin: auto;
}
/* =====================================================================
   چیدمان داخلی
   =====================================================================
   DOM ترتیب: .htps-col-img (اول) → .htps-col-content (دوم)

   باگ ۲ fix: dir="rtl" از slider element حذف شد.
   حالا flex-start = همیشه LEFT (مستقل از RTL بودن سایت)
   ===================================================================*/
.htps-slide-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 30px;
  gap: 28px;
}

/* ==== فقط متن ==== */
.htps-layout-txt-c {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.htps-layout-txt-l {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.htps-layout-txt-r {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}
/* در حالت text-only، ستون عکس مخفی */
.htps-layout-txt-c .htps-col-img,
.htps-layout-txt-l .htps-col-img,
.htps-layout-txt-r .htps-col-img { display: none; }

/* ==== ستونی: متن بالا + عکس پایین ====
   DOM: col-img اول → col-content دوم
   column-reverse → content (متن) بالا، img پایین */
.htps-layout-ti-col-c {
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.htps-layout-ti-col-l {
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
}
.htps-layout-ti-col-r {
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

/* ==== ستونی: عکس بالا + متن پایین ====
   column → col-img بالا، col-content پایین */
.htps-layout-it-col-c {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.htps-layout-it-col-l {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.htps-layout-it-col-r {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

/* ==== ردیفی: عکس چپ + متن راست ====
   row → col-img (اول=چپ), col-content (دوم=راست) */
.htps-layout-il-tr {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* ==== ردیفی: متن چپ + عکس راست ====
   row-reverse → col-img (اول→راست), col-content (دوم→چپ) */
.htps-layout-tl-ir {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}

/* ==== فقط عکس ==== */
.htps-layout-img-only {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.htps-layout-img-only .htps-col-content { display: none; }

/* text-align برای ستون‌های راست‌چین */
.htps-layout-txt-r    .htps-slide-content,
.htps-layout-ti-col-r .htps-slide-content,
.htps-layout-it-col-r .htps-slide-content { text-align: right; }

/* در ستونی: هر دو ستون عرض ۱۰۰٪ می‌گیرند تا به درستی fill شوند */
.htps-layout-ti-col-c .htps-col-img,
.htps-layout-ti-col-l .htps-col-img,
.htps-layout-ti-col-r .htps-col-img,
.htps-layout-it-col-c .htps-col-img,
.htps-layout-it-col-l .htps-col-img,
.htps-layout-it-col-r .htps-col-img { width: 100%; justify-content: center; }

.htps-layout-ti-col-c .htps-col-content,
.htps-layout-ti-col-l .htps-col-content,
.htps-layout-ti-col-r .htps-col-content,
.htps-layout-it-col-c .htps-col-content,
.htps-layout-it-col-l .htps-col-content,
.htps-layout-it-col-r .htps-col-content,
.htps-layout-txt-c    .htps-col-content,
.htps-layout-txt-l    .htps-col-content,
.htps-layout-txt-r    .htps-col-content { width: 100%; }

/* =====================================================================
   ستون‌های ردیفی
   ===================================================================*/
.htps-col-img {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.htps-col-content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}
.htps-col-img-full { width: 100%; height: 100%; }
.htps-col-img-full .htps-slide-image {
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  object-fit: cover;
}

/* =====================================================================
   محتوا
   ===================================================================*/
.htps-slide-content { width: 100%; }
.htps-slide-image   { max-width: 220px; height: auto; display: block; }
.htps-slide-subtitle {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f5c451;
  margin-bottom: 10px;
  line-height: 1.4;
}
.htps-slide-title {
  color: #fff;
  margin: 0 0 14px 0;
  line-height: 1.2;
  font-size: clamp(26px, 4.5vw, 48px);
  font-weight: 700;
}
.htps-slide-text   { color: #e7e7e7; margin-bottom: 24px; line-height: 1.7; }
.htps-slide-text p { margin: 0 0 10px; }
.htps-slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  padding: 13px 30px;
  border-radius: 50px;
  background-color: #f5c451;
  color: #1b1b2f;
  transition: background-color .3s, color .3s, transform .2s;
}
.htps-slide-btn:hover { transform: translateY(-2px); }

/* =====================================================================
   اروکی‌ها — با class به جای dir attribute
   ===================================================================*/
.htps-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background-color: rgba(255,255,255,0.9);
  color: #1b1b2f;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: background-color .25s, transform .25s, opacity .25s;
  padding: 0;
}
.htps-nav-btn:hover    { transform: translateY(-50%) scale(1.08); }
.htps-nav-btn:disabled { opacity: .3; pointer-events: none; }
.htps-nav-btn svg { display: block; width: 20px; height: 20px; }

/* LTR: prev=چپ، next=راست */
.htps-nav-btn.htps-prev { left: 16px; }
.htps-nav-btn.htps-next { right: 16px; }

/* RTL via class (نه dir attribute — تا flex layout نشکند) */
.htps-slider.htps-rtl .htps-nav-btn.htps-prev { left: auto; right: 16px; }
.htps-slider.htps-rtl .htps-nav-btn.htps-next { right: auto; left: 16px; }
.htps-slider.htps-rtl .htps-nav-btn.htps-prev svg { transform: scaleX(-1); }
.htps-slider.htps-rtl .htps-nav-btn.htps-next svg { transform: scaleX(-1); }

/* =====================================================================
   بولت‌ها
   ===================================================================*/
.htps-pagination {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.htps-dot {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: background-color .3s, width .3s, border-radius .3s;
}
.htps-dot.htps-dot-active {
  background-color: #f5c451;
  width: 26px;
  border-radius: 6px;
}

/* =====================================================================
   انیمیشن‌های بک‌گراند — ۱۰۰٪ واقعی + scale در keyframe
   ===================================================================*/
@keyframes htps-kenburns-in  { from { transform: scale(1.0); }  to { transform: scale(1.14); } }
@keyframes htps-kenburns-out { from { transform: scale(1.14); } to { transform: scale(1.0); } }

/* Pan: scale(1.08) برای پوشش لبه هنگام translate */
@keyframes htps-pan-left  { from { transform: scale(1.08) translateX(0);    } to { transform: scale(1.08) translateX(-6%); } }
@keyframes htps-pan-right { from { transform: scale(1.08) translateX(-6%);  } to { transform: scale(1.08) translateX(0);   } }
@keyframes htps-pan-up    { from { transform: scale(1.08) translateY(0);    } to { transform: scale(1.08) translateY(-6%); } }
@keyframes htps-pan-down  { from { transform: scale(1.08) translateY(-6%);  } to { transform: scale(1.08) translateY(0);   } }

/* اعوجام — Distortion */
@keyframes htps-distort {
  0%   { transform: scale(1.0)  skewX(0deg)    skewY(0deg);    filter: brightness(1.00) blur(0px);   }
  12%  { transform: scale(1.04) skewX(2.2deg)  skewY(0.4deg);  filter: brightness(1.06) blur(0.4px); }
  25%  { transform: scale(1.07) skewX(-1.4deg) skewY(1.6deg);  filter: brightness(0.95) blur(0px);   }
  38%  { transform: scale(1.05) skewX(1.8deg)  skewY(-0.6deg); filter: brightness(1.03) blur(0.6px); }
  50%  { transform: scale(1.08) skewX(-0.8deg) skewY(1.2deg);  filter: brightness(1.07) blur(0px);   }
  63%  { transform: scale(1.05) skewX(1.5deg)  skewY(0.3deg);  filter: brightness(0.97) blur(0.3px); }
  75%  { transform: scale(1.06) skewX(-1.2deg) skewY(-1.0deg); filter: brightness(1.04) blur(0px);   }
  88%  { transform: scale(1.03) skewX(0.7deg)  skewY(0.8deg);  filter: brightness(1.01) blur(0.2px); }
  100% { transform: scale(1.0)  skewX(0deg)    skewY(0deg);    filter: brightness(1.00) blur(0px);   }
}

.htps-bg-kenburns-in  { animation: htps-kenburns-in   9s ease-in-out both; }
.htps-bg-kenburns-out { animation: htps-kenburns-out  9s ease-in-out both; }
.htps-bg-pan-left     { animation: htps-pan-left       9s ease-in-out both; }
.htps-bg-pan-right    { animation: htps-pan-right      9s ease-in-out both; }
.htps-bg-pan-up       { animation: htps-pan-up         9s ease-in-out both; }
.htps-bg-pan-down     { animation: htps-pan-down       9s ease-in-out both; }
.htps-bg-distort      { animation: htps-distort       12s ease-in-out infinite; }

/* =====================================================================
   انیمیشن‌های عناصر محتوا
   ===================================================================*/
@keyframes htps-fade-in    { from { opacity:0 }                                     to { opacity:1 } }
@keyframes htps-fade-up    { from { opacity:0; transform:translateY(38px) }          to { opacity:1; transform:translateY(0) } }
@keyframes htps-fade-down  { from { opacity:0; transform:translateY(-38px) }         to { opacity:1; transform:translateY(0) } }
@keyframes htps-fade-left  { from { opacity:0; transform:translateX(-38px) }         to { opacity:1; transform:translateX(0) } }
@keyframes htps-fade-right { from { opacity:0; transform:translateX(38px) }          to { opacity:1; transform:translateX(0) } }
@keyframes htps-zoom-in    { from { opacity:0; transform:scale(0.65) }               to { opacity:1; transform:scale(1) } }
@keyframes htps-zoom-out   { from { opacity:0; transform:scale(1.35) }               to { opacity:1; transform:scale(1) } }
@keyframes htps-flip-x     { from { opacity:0; transform:perspective(600px) rotateX(72deg) } to { opacity:1; transform:perspective(600px) rotateX(0deg) } }
@keyframes htps-bounce     { 0%{opacity:0;transform:scale(.3)} 50%{opacity:1;transform:scale(1.1)} 70%{transform:scale(.93)} 100%{transform:scale(1)} }
@keyframes htps-slide-up   { from { transform:translateY(110%) }                     to { transform:translateY(0) } }

.htps-anim-fade-in    { animation-name: htps-fade-in;    animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-fade-up    { animation-name: htps-fade-up;    animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-fade-down  { animation-name: htps-fade-down;  animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-fade-left  { animation-name: htps-fade-left;  animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-fade-right { animation-name: htps-fade-right; animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-zoom-in    { animation-name: htps-zoom-in;    animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-zoom-out   { animation-name: htps-zoom-out;   animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-flip-x     { animation-name: htps-flip-x;     animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-bounce     { animation-name: htps-bounce;     animation-fill-mode: both; animation-timing-function: ease; }
.htps-anim-slide-up   { animation-name: htps-slide-up;   animation-fill-mode: both; animation-timing-function: cubic-bezier(0.4,0,0.2,1); overflow:hidden; }

/* =====================================================================
   ریسپانسیو
   ===================================================================*/
@media (max-width: 1024px) {
  .htps-slide-inner { padding: 24px; gap: 20px; }
}
@media (max-width: 767px) {
  .htps-slide-inner { padding: 18px; gap: 14px; }
  .htps-layout-il-tr { flex-direction: column; }          /* ردیف → ستون */
  .htps-layout-tl-ir { flex-direction: column-reverse; }  /* ردیف → ستون */
  .htps-slide-content { max-width: 100% !important; }
  .htps-nav-btn { display: none; }   /* موبایل: سوایپ کافیست */
  .htps-col-img { width: 100%; justify-content: center; }
}