/* =============================================================================
   Hero Slider Premium — Phase YZ-HERO-PREMIUM (2026-06-05)
   - Parallax + Ken Burns + Progress bar + smooth fade
   - Brand: yeşil tonlar (--green, --green-dark, --gold)
   - Mevcut class isimleri korunur: .hero-slider, .hero-slide, .hero-nav, .hero-dot
   - Bu dosya style.css'in ÜZERİNE cascade — daha yüksek özgüllükle override eder.
   ========================================================================== */

/* --- Slider container — overflow disiplini + reduced-motion guard --- */
.hero-slider{
  position:relative;
  overflow:hidden;
  isolation:isolate; /* z-index bağlamı temiz */
}

/* --- Slide stack: hepsi mutlak konumlu, opacity geçişi --- */
.hero-slide{
  display:flex !important;          /* eski "display:none" → fade için flex'te kal */
  position:absolute;
  inset:0;
  align-items:center;
  min-height:560px;
  opacity:0;
  visibility:hidden;
  transition:opacity .9s ease, visibility 0s linear .9s;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  will-change:opacity, transform;
}
.hero-slide.active{
  opacity:1;
  visibility:visible;
  transition:opacity .9s ease, visibility 0s linear 0s;
  z-index:2;
  animation:heroKenBurns 9s ease-out forwards; /* Ken Burns: slow zoom */
}
/* Slider container: aktif slide yüksekliğini koruyabilmek için minimum yükseklik */
.hero-slider{ min-height:560px; }

/* --- Ken Burns slow zoom (subtle, premium) --- */
@keyframes heroKenBurns{
  0%   { transform:scale(1.00) translate3d(0,0,0); }
  100% { transform:scale(1.08) translate3d(-1.2%, -.6%, 0); }
}

/* --- Overlay: brand gradient (light/dark adaptive) --- */
/* Per-slide override için --hero-overlay (0-1) CSS değişkeni. Yoksa default kullan. */
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255, var(--hero-overlay, .10));
  z-index:1;
  pointer-events:none;
}
.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(31,77,34,.18) 0%, rgba(31,77,34,0) 55%),
    linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 78%);
  z-index:1;
  pointer-events:none;
}
/* Dark text variant (default — açık görsellerde koyu yazı) */
.hero-slide[data-text="dark"] .hero-text h1,
.hero-slide[data-text="dark"] .hero-text h2{ color:var(--green-dark); }
.hero-slide[data-text="dark"] .hero-text p{ color:var(--ink); }

/* Light text variant (koyu görsellerde açık yazı) */
.hero-slide[data-text="light"]::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 50%, rgba(0,0,0,0) 85%);
}
.hero-slide[data-text="light"] .hero-text h1,
.hero-slide[data-text="light"] .hero-text h2,
.hero-slide[data-text="light"] .hero-text p,
.hero-slide[data-text="light"] .hero-rating{ color:#fff !important; }
.hero-slide[data-text="light"] .hero-text p{ text-shadow:0 1px 2px rgba(0,0,0,.3); }

/* --- Hero inner grid + content stagger animations --- */
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  align-items:center;
  min-height:540px;
  padding:40px 0;
}

/* Active slide text stagger — random origin (CSS var driven) */
.hero-slide.active .hero-text > *{
  animation:heroEntryRandom .85s cubic-bezier(.2,.7,.2,1) both;
}
.hero-slide.active .hero-text > *:nth-child(1){ animation-delay:.10s; }
.hero-slide.active .hero-text > *:nth-child(2){ animation-delay:.25s; }
.hero-slide.active .hero-text > *:nth-child(3){ animation-delay:.40s; }
.hero-slide.active .hero-text > *:nth-child(4){ animation-delay:.55s; }
.hero-slide.active .hero-media{
  animation:heroMediaIn 1s cubic-bezier(.2,.7,.2,1) .35s both;
}

/* Random origin entrance — JS sets --ad-origin-x / --ad-origin-y inline */
@keyframes heroEntryRandom{
  from{
    opacity:0;
    transform:translate3d(var(--ad-origin-x, 0), var(--ad-origin-y, 22px), 0) scale(.96);
    filter:blur(4px);
  }
  to  {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes heroMediaIn{
  from{ opacity:0; transform:translateY(20px) scale(.96); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}

/* =============================================================================
   Random Slide Transitions — data-transition attr driven (Phase YZ-HERO-RANDOM)
   JS picks one of: fade | zoom-in | zoom-out | from-left | from-right | from-bottom | blur
   ========================================================================== */

/* fade (default) — already handled by base .hero-slide opacity rule */

/* zoom-in: incoming starts small */
.hero-slide.active[data-transition="zoom-in"]{
  animation:heroKenBurns 9s ease-out forwards, heroTxZoomIn 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroTxZoomIn{
  from{ transform:scale(.9); opacity:0; }
  to  { transform:scale(1);  opacity:1; }
}

/* zoom-out: incoming starts larger */
.hero-slide.active[data-transition="zoom-out"]{
  animation:heroKenBurns 9s ease-out forwards, heroTxZoomOut 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroTxZoomOut{
  from{ transform:scale(1.12); opacity:0; }
  to  { transform:scale(1);    opacity:1; }
}

/* from-left */
.hero-slide.active[data-transition="from-left"]{
  animation:heroKenBurns 9s ease-out forwards, heroTxFromLeft 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroTxFromLeft{
  from{ transform:translate3d(-100%,0,0); opacity:.2; }
  to  { transform:translate3d(0,0,0);     opacity:1; }
}

/* from-right */
.hero-slide.active[data-transition="from-right"]{
  animation:heroKenBurns 9s ease-out forwards, heroTxFromRight 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroTxFromRight{
  from{ transform:translate3d(100%,0,0); opacity:.2; }
  to  { transform:translate3d(0,0,0);    opacity:1; }
}

/* from-bottom */
.hero-slide.active[data-transition="from-bottom"]{
  animation:heroKenBurns 9s ease-out forwards, heroTxFromBottom 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroTxFromBottom{
  from{ transform:translate3d(0,60%,0); opacity:0; }
  to  { transform:translate3d(0,0,0);   opacity:1; }
}

/* blur */
.hero-slide.active[data-transition="blur"]{
  animation:heroKenBurns 9s ease-out forwards, heroTxBlur 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroTxBlur{
  from{ filter:blur(20px); opacity:0; transform:scale(1.04); }
  to  { filter:blur(0);    opacity:1; transform:scale(1); }
}

/* --- Premium nav buttons (replace mevcut .hero-nav stilini override) --- */
.hero-slider .hero-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  width:52px; height:52px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  font-size:20px;
  color:var(--green-dark);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.4) inset;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  display:grid;
  place-items:center;
  line-height:1;
}
.hero-slider .hero-nav.prev{ left:22px; }
.hero-slider .hero-nav.next{ right:22px; }
.hero-slider .hero-nav:hover{
  background:#fff;
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 12px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(63,142,63,.25) inset;
}
.hero-slider .hero-nav:focus-visible{ outline:3px solid var(--green); outline-offset:3px; }

/* --- Premium dots --- */
.hero-slider .hero-dots{
  position:absolute;
  bottom:30px;
  left:0; right:0;
  z-index:6;
  display:flex;
  gap:10px;
  justify-content:center;
}
.hero-slider .hero-dot{
  width:11px; height:11px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:width .35s ease, background .25s ease, border-radius .35s ease;
}
.hero-slider .hero-dot:hover{ background:rgba(255,255,255,.85); }
.hero-slider .hero-dot.active{
  background:var(--green);
  width:30px;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(63,142,63,.4);
}
.hero-slider .hero-dot:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* --- Progress bar (slide süresi kalan göstergesi) --- */
.hero-progress{
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:rgba(255,255,255,.18);
  z-index:5;
  overflow:hidden;
}
.hero-progress__bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--green), var(--gold));
  transition:width .15s linear;
  box-shadow:0 0 8px rgba(199,154,58,.5);
}
.hero-slider.is-paused .hero-progress__bar{ background:rgba(255,255,255,.45); }

/* --- Media: hover ile subtle glow --- */
.hero-media{
  position:relative;
  justify-self:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero-media img{
  border-radius:22px;
  box-shadow:0 32px 64px -24px rgba(0,0,0,.5);
  transition:transform .5s ease;
}
.hero-media:hover img{ transform:translateY(-4px); }
.hero-badge{
  position:absolute;
  top:14px; right:-8px;
  background:var(--gold);
  color:#3a2a06;
  font-weight:800;
  font-size:13px;
  padding:8px 14px;
  border-radius:30px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  transform:rotate(6deg);
  z-index:3;
}

/* --- Reduced motion: animasyonları durdur --- */
@media (prefers-reduced-motion: reduce){
  .hero-slide,
  .hero-slide.active,
  .hero-slide.active[data-transition],
  .hero-slide.active .hero-text > *,
  .hero-slide.active .hero-media{
    animation:none !important;
    transition:opacity .3s ease !important;
    filter:none !important;
    transform:none !important;
  }
  .hero-progress{ display:none; }
}

/* --- Mobile tuning --- */
@media (max-width: 760px){
  .hero-slider, .hero-slide{ min-height:auto; }
  .hero-slide{ padding:18px 0; position:relative; opacity:1; visibility:visible; display:none !important; }
  .hero-slide.active{ display:flex !important; animation:none; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; min-height:auto; padding:26px 0; gap:22px; }
  .hero-slide::after{ background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); }
  .hero-slide[data-text="light"]::after{ background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6)); }
  .hero-text p{ margin-left:auto; margin-right:auto; }
  .hero-media{ margin-top:20px; max-width:420px; width:100%; }
  .hero-slider .hero-nav{ display:none; }
  .hero-btns,.hero-rating{ justify-content:center; }
  .hero-slider .hero-dots{ bottom:14px; }
  .hero-progress{ height:2px; }
}

/* --- Ürün slider cila (Phase YZ-PROD-SLIDER) — premium prev/next hover --- */
.yp-prod-slider{ position:relative; }
.yp-prod-slider__nav{
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.yp-prod-slider__nav:hover:not([disabled]){
  background:var(--green) !important;
  color:#fff !important;
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 8px 22px rgba(63,142,63,.35);
}
.yp-prod-slider__nav[disabled]{ opacity:.35; cursor:default; }
/* Edge fade mask — slider sağ/sol kenarda görsel "bitmeden" doğal sönüm */
.yp-prod-slider::before,
.yp-prod-slider::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:60px;
  z-index:2;
  pointer-events:none;
}
.yp-prod-slider::before{ left:0; background:linear-gradient(90deg, var(--soft) 0%, transparent 100%); }
.yp-prod-slider::after { right:0; background:linear-gradient(270deg, var(--soft) 0%, transparent 100%); }

/* --- Review slider cila — subtle stars sparkle --- */
.rev-slider .rev-stars{
  background:linear-gradient(90deg, var(--gold), #f3c870, var(--gold));
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:revStarShimmer 4s ease-in-out infinite;
}
@keyframes revStarShimmer{
  0%,100%{ background-position:0% 50%; }
  50%   { background-position:100% 50%; }
}

/* --- Galeri lightbox --- */
.yp-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(8,16,12,.94);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.yp-lightbox.open{ display:flex; animation:lbFade .25s ease; }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }
.yp-lightbox__img{
  max-width:92vw;
  max-height:88vh;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:lbZoom .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes lbZoom{ from{transform:scale(.92);opacity:.4} to{transform:scale(1);opacity:1} }
.yp-lightbox__btn{
  position:absolute;
  background:rgba(255,255,255,.12);
  border:0;
  color:#fff;
  width:48px; height:48px;
  border-radius:50%;
  font-size:22px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s ease, transform .2s ease;
  backdrop-filter:blur(8px);
}
.yp-lightbox__btn:hover{ background:rgba(255,255,255,.22); transform:scale(1.08); }
.yp-lightbox__close{ top:24px; right:24px; }
.yp-lightbox__prev{ left:24px; top:50%; transform:translateY(-50%); }
.yp-lightbox__next{ right:24px; top:50%; transform:translateY(-50%); }
.yp-lightbox__prev:hover,
.yp-lightbox__next:hover{ transform:translateY(-50%) scale(1.08); }
.yp-lightbox__cap{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:15px;
  background:rgba(0,0,0,.4);
  padding:8px 16px;
  border-radius:20px;
  max-width:80vw;
  text-align:center;
}
.gal-item{ cursor:zoom-in; }