/* ============================================================
   اسلایدر هیرو صفحه اصلی — پس‌زمینه تصویری با کراس‌فید و افکت کن‌برنز
   تصاویر پشت الگوی اسلیمی و زیر محتوای هیرو قرار می‌گیرند
   ============================================================ */

.hero{ isolation:isolate; }

.hero-slides{ position:absolute; inset:0; z-index:-1; overflow:hidden; }

.hero-slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background-size:cover; background-position:center 30%;
  transition:opacity 1.4s ease;
  will-change:opacity, transform;
}
.hero-slide.is-on{
  opacity:1;
  animation:kgKenBurns 8s ease-out forwards;
}
@keyframes kgKenBurns{
  from{ transform:scale(1.02); }
  to{ transform:scale(1.12); }
}

/* روکش سبز تیره برای خوانایی متن روی عکس */
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,19,16,.72) 0%, rgba(11,61,46,.55) 45%, rgba(11,19,16,.82) 100%);
}

/* برچسب نام حرم — گوشه پایین */
.hero-caption{
  position:absolute; z-index:5; inset-block-end:78px; inset-inline-end:26px;
  display:flex; align-items:center; gap:9px;
  background:rgba(11,19,16,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(230,200,102,.35); border-radius:30px;
  color:#f7f2e7; font-size:13px; font-weight:700; padding:8px 18px;
  opacity:0; transform:translateY(8px); transition:.5s opacity, .5s transform;
  pointer-events:none; max-width:70vw;
}
.hero-caption.show{ opacity:1; transform:none; }
.hero-caption::before{ content:'📍'; font-size:14px; }

/* نقطه‌های ناوبری */
.hero-dots{
  position:absolute; z-index:5; inset-block-end:84px; inset-inline-start:50%;
  transform:translateX(50%); display:flex; gap:9px;
}
.hero-dots button{
  width:9px; height:9px; border-radius:20px; border:none; padding:0; cursor:pointer;
  background:rgba(247,242,231,.4); transition:.35s all;
}
.hero-dots button.on{ width:30px; background:linear-gradient(90deg,#e6c866,#c9a227); }

/* فلش‌های قبلی/بعدی */
.hero-arrow{
  position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(230,200,102,.4);
  background:rgba(11,19,16,.45); backdrop-filter:blur(4px); color:#e6c866;
  font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:.75; transition:.25s all;
}
.hero-arrow:hover{ opacity:1; background:rgba(11,61,46,.75); transform:translateY(-50%) scale(1.08); }
.hero-arrow.prev{ inset-inline-start:22px; }
.hero-arrow.next{ inset-inline-end:22px; }

@media (max-width:760px){
  .hero-arrow{ display:none; }               /* موبایل: سوایپ جایگزین فلش */
  .hero-caption{ inset-block-end:66px; inset-inline-end:14px; font-size:11.5px; padding:6px 14px; }
  .hero-dots{ inset-block-end:70px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-slide.is-on{ animation:none; }
  .hero-slide{ transition:opacity .4s ease; }
}