/* ============================================================
   Park Expert — Ana sayfa HERO SLIDER
   Masaüstünde slayt ekrana sığar (header hariç görünür alan),
   mobilde tam genişlik + doğal yükseklik.
   Yalnızca ana sayfada yüklenir; core.css ve v2.css'ten SONRA gelir.
   ============================================================ */

.pe-hero{
  position:relative;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--border);
  --pe-h:calc(100vh - var(--header-h));
  --pe-h:calc(100svh - var(--header-h));
}

.pe-hero__slider{position:relative;width:100%}
.pe-hero__viewport{position:relative;width:100%;overflow:hidden}
.pe-hero__track{
  display:flex;align-items:stretch;
  transform:translate3d(calc(var(--i,0) * -100%),0,0);
  transition:transform .62s cubic-bezier(.4,.02,.16,1);
}
.pe-hero__slide{
  position:relative;flex:0 0 100%;overflow:hidden;
  display:grid;place-items:center;
  background:#fff;   /* geniş ekranlarda yanlarda kalan alan beyaz kalır */
}

/* görsel çerçevesi — tıklama alanları bu kutuya göre konumlanır */
.pe-hero__frame{position:relative;width:100%;aspect-ratio:941 / 1560}
.pe-hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------- görsele gömülü butonların tıklanabilir alanları ---------- */
.pe-hero__hit{
  position:absolute;z-index:2;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  border-radius:calc(var(--h) / 2.6);
  display:block;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .18s ease, background-color .18s ease;
}
.pe-hero__hit:hover{background:color-mix(in srgb, var(--primary) 10%, transparent)}
.pe-hero__hit:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--background), 0 0 0 6px var(--ring);
}

/* ---------- oklar ---------- */
.pe-hero__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--background) 86%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--foreground);cursor:pointer;
  box-shadow:0 6px 20px -10px rgba(15,23,42,.4);
  transition:background .16s ease, color .16s ease;
}
.pe-hero__nav svg{width:20px;height:20px}
.pe-hero__nav:hover{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.pe-hero__nav:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.pe-hero__nav--prev{left:14px}
.pe-hero__nav--next{right:14px}

/* ---------- göstergeler ---------- */
.pe-hero__dots{
  position:absolute;left:50%;translate:-50% 0;bottom:14px;z-index:4;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  padding:7px 12px;border-radius:99px;
  background:color-mix(in srgb, var(--background) 72%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pe-hero__dot{
  position:relative;overflow:hidden;
  height:6px;width:30px;padding:0;border:0;border-radius:99px;
  background:color-mix(in srgb, var(--primary) 22%, transparent);
  cursor:pointer;transition:width .3s ease, background .2s ease;
}
.pe-hero__dot:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.pe-hero__dot[aria-current="true"]{width:58px;background:color-mix(in srgb, var(--primary) 28%, transparent)}
.pe-hero__dot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--primary);transform-origin:left center;transform:scaleX(0);
}
.pe-hero__dot[aria-current="true"]::after{transform:scaleX(1);transition:transform .25s ease}
.pe-hero.is-playing .pe-hero__dot[aria-current="true"]::after{
  animation:pe-dot-run var(--pe-hero-delay,7000ms) linear forwards;
}
.pe-hero.is-paused .pe-hero__dot[aria-current="true"]::after{animation-play-state:paused}
@keyframes pe-dot-run{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- masaüstü: slayt ekrana sığar ---------- */
@media (min-width:768px){
  .pe-hero__viewport{height:var(--pe-h)}
  .pe-hero__slide{height:100%}
  .pe-hero__frame{
    width:min(100%, calc(var(--pe-h) * 1672 / 941));
    aspect-ratio:1672 / 941;
  }
  .pe-hero__hit{--x:var(--xd);--y:var(--yd);--w:var(--wd);--h:var(--hd)}
}
@media (max-width:767.98px){
  .pe-hero__hit{--x:var(--xm);--y:var(--ym);--w:var(--wm);--h:var(--hm)}
  /* mobilde oklar görselin üstünü kapatmasın: kaydırma + noktalar yeterli */
  .pe-hero__nav{display:none}
}

/* ---------- hareket tercihi ---------- */
@media (prefers-reduced-motion:reduce){
  .pe-hero__track{transition:none}
  .pe-hero.is-playing .pe-hero__dot[aria-current="true"]::after{animation:none;transform:scaleX(1)}
}