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

.hero{ isolation:isolate; }

.hero-slides{ position:absolute; inset:0; z-index:-1; overflow:hidden;
  /* متغیرها از پنل اسلایدر تنظیم می‌شوند (main.js) — این‌ها فقط پیش‌فرض‌اند */
  --kg-hero-speed:1400ms; --kg-hero-ov:0.60;
}

.hero-slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background-size:cover; background-position:center 30%;
  transition:opacity var(--kg-hero-speed) ease, transform var(--kg-hero-speed) ease;
  will-change:opacity, transform;
}
.hero-slide.is-on{ opacity:1; }

/* روکش تیره برای خوانایی متن روی عکس — تیرگی از پنل کنترل می‌شود (--kg-hero-ov) */
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(11,19,16,calc(var(--kg-hero-ov) + .12)) 0%,
      rgba(11,61,46,calc(var(--kg-hero-ov) - .05)) 45%,
      rgba(11,19,16,calc(var(--kg-hero-ov) + .22)) 100%);
}

/* ═══ افکتِ گذار: محو (پیش‌فرض) ═══ */
/* fx-fade فقط از opacity استفاده می‌کند (همان رفتارِ بالا). */

/* ═══ افکتِ گذار: کشویی (slide) ═══ */
.hero-slides.fx-slide .hero-slide{ transform:translateX(6%); }
.hero-slides.fx-slide .hero-slide.is-on{ transform:translateX(0); }
.hero-slides.fx-slide .hero-slide.was-on{ transform:translateX(-6%); opacity:0; }

/* ═══ افکتِ گذار: زوم/کن‌برنز (zoom) — عکس آرام بزرگ می‌شود ═══ */
.hero-slides.fx-zoom .hero-slide.is-on{ animation:kgKenBurns 12s ease-out forwards; }
@keyframes kgKenBurns{
  from{ transform:scale(1); }
  to{ transform:scale(1.12); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slides.fx-zoom .hero-slide.is-on{ animation:none; }
}

/* اسلایدِ لینک‌دار (تگ <a>) — پس‌زمینه است، ولی کلیک از طریق main.js مدیریت می‌شود */
a.hero-slide{ display:block; text-decoration:none; }
.hero:has(.hero-slide[data-link]) , .hero:has(a.hero-slide[href]){ cursor:pointer; }

/* برچسب نام حرم — گوشه پایین */
.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; }
}