/* ===== Vars ===== */
:root {
  --max: 1200px;
  --gap: clamp(16px, 3vw, 28px);
  --ink: #eaf3ff;
  --muted: #7aa6e6;
  --brand: #008efa;
  --bg1: #061a3a;
  --bg2: #0a2a55;

  /* نسبت ستون‌ها (دسکتاپ) */
  --copy: 50%;
  /* متن (راست) */
  --media: 50%;
  /* تصویر (چپ) */

  /* اندازه یکنواخت تصویر */
  --img-w: clamp(320px, 30vw, 520px);
  --img-ar: 3/4;

  /* ارتفاع هیرو */
  --h: clamp(420px, 62vh, 660px);
}

/* ===== Section & Container ===== */
.hero {
  color: var(--ink);
}

.hero__container {
  width: min(var(--max), 100%);
  margin-inline: auto;
}

.hero .swiper {
  width: 100%;
}

/* ===== Slide layout (فقط Flex) ===== */
.hero__slide {
  display: flex;
  /* ← فقط Flex؛ Grid ممنوع */
  flex-direction: row;
  /* با dir=rtl: اولین بچه سمت راست می‌ایستد */
  align-items: center;
  gap: var(--gap);
  min-height: var(--h);
  padding: 0 100px;
}

/* متن (راست) — 65% ستون */
.hero__copy {
  flex: 0 0 var(--copy);
  /* ستون ثابت */
  min-width: 0;
  /* جلوگیری از بادکردن */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
}

/* تصویر (چپ) — 35% ستون */
.hero__media {
  flex: 0 0 var(--media);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* فریم ثابت برای یکسانی کامل تصویر */
.hero__frame {
  width: 100%;
  max-width: var(--img-w);
  aspect-ratio: var(--img-ar);
  position: relative;
}

.barsavosh.hero__frame {
  min-height: 422.4px;
}

.barsavosh.hero__frame img {
  width: 95%;
  margin-right: 70px;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 75%;
  height: 100%;
  margin-right: 110px;
  object-fit: contain;
  display: block;
  border-radius: 18px;
}


/* تایپو و CTA */
.hero__title {
  font-size: clamp(25px, 4.2vw, 40px);
  margin: 0 0 .4rem;
  font-weight: 800;
}

.hero__subtitle {
  color: #fff;
  margin: .25rem 0 1.1rem;
}

.hero__cta {
  display: inline-block;
  padding: .6rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0aa2ff, #1a66ff);
  color: #fff;
  text-decoration: none;
  min-width: 150px;
  text-align: center;
}

/* Controls */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  line-height: 50px;
}

.hero__nav.prev {
  inset-inline-start: 8px;
}

.hero__nav.next {
  inset-inline-end: 8px;
}

.hero__pagination {
  position: relative;
  margin-top: 12px;
  text-align: center;
}

.swiper-pagination-bullet {
  background: #fff;
  opacity: .5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width:900px) {
  .hero__slide {
    flex-direction: column;
    /* زیر هم */
  }

  .hero__copy,
  .hero__media {
    flex: 0 0 auto;
    width: 100%;
    /* ستون‌ها تمام‌عرض */
  }

  .hero__copy {
    align-items: center;
    text-align: center;
  }

  .hero__frame {
    max-width: clamp(220px, 60vw, 360px);
  }
}

/* 1) موبایل (تا 599px) */
@media (max-width: 599.98px) {

  /* استایل‌های موبایل */
  .swiper-slide {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  .hero__slide {
    padding: 0;
    flex-direction: column-reverse;
    margin-top: -50px;
  }

  .hero__frame {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 0px;
  }

  .hero__img {
    margin: 0;
    position: unset;
    margin-top: 80px;
    width: 90%;
  }

  .barsavosh.hero__frame {
    min-height: 422.4px;
  }

  .barsavosh.hero__frame img {
    width: 120%;
    margin-right: -25px;
  }

  .hero__pagination {
    display: none;
  }
}

/* 2) تبلت (600 تا 899px) */
@media (min-width: 600px) and (max-width: 899.98px) {
  /* استایل‌های تبلت */
}

/* 3) لپ‌تاپ (900 تا 1279px) */
@media (min-width: 900px) and (max-width: 1279.98px) {
  /* استایل‌های لپ‌تاپ */
}

/* 4) دسکتاپ (1280px به بالا) */
@media (min-width: 1280px) {
  /* استایل‌های دسکتاپ */
}