/* ===== Sinematik görsel hareketi: hero Ken Burns + site geneli canlı görseller ===== */

/* --- Hero slider --- */
.hero-slide.cine-hero{overflow:hidden;background-image:none!important}
.cine-hero-bg{position:absolute;inset:-2%;z-index:0;background-size:cover;background-position:center;will-change:transform;transform-origin:var(--kb-origin,50% 50%)}
.carousel-item.active .cine-hero-bg{animation:cineKb var(--kb-dur,11s) cubic-bezier(.25,.1,.25,1) both}
.cine-hero-bg.kb-1{--kb-origin:70% 40%;--kb-from:scale(1.02) translate(0,0);--kb-to:scale(1.16) translate(-2%,-1%)}
.cine-hero-bg.kb-2{--kb-origin:30% 50%;--kb-from:scale(1.18) translate(2%,1%);--kb-to:scale(1.04) translate(0,0)}
.cine-hero-bg.kb-3{--kb-origin:50% 30%;--kb-from:scale(1.06) translate(0,2%);--kb-to:scale(1.17) translate(0,-2%)}
.cine-hero-bg.kb-4{--kb-origin:40% 60%;--kb-from:scale(1.15) translate(-2%,0);--kb-to:scale(1.03) translate(2%,0)}
@keyframes cineKb{from{transform:var(--kb-from)}to{transform:var(--kb-to)}}

.cine-hero-bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,rgba(255,255,255,.05) 52%,transparent 62%);
  background-size:250% 100%;background-position:150% 0;mix-blend-mode:screen}
.carousel-item.active .cine-hero-bg::after{animation:cineHeroSweep 7s ease-in-out 1.2s infinite}
@keyframes cineHeroSweep{0%{background-position:150% 0}55%,100%{background-position:-60% 0}}

.cine-hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:radial-gradient(circle at var(--gx,20%) var(--gy,30%),rgba(255,255,255,.12),transparent 38%)}
.carousel-item.active .cine-hero-glow{animation:cineGlow 9s ease-in-out infinite alternate}
@keyframes cineGlow{from{--gx:18%;--gy:28%;opacity:.35}to{--gx:72%;--gy:62%;opacity:.7}}
@property --gx{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --gy{syntax:'<percentage>';inherits:false;initial-value:30%}

/* --- Site geneli görseller --- */
.cine-wrap{overflow:hidden}
.cine-wrap.cine-rel{position:relative}
img.cine-img{animation:cineDrift var(--cd-dur,16s) ease-in-out var(--cd-delay,0s) infinite alternate;animation-play-state:paused;transform-origin:var(--cd-origin,50% 50%);backface-visibility:hidden}
.cine-on>img.cine-img,img.cine-img.cine-on{animation-play-state:running}
@keyframes cineDrift{
  0%{scale:1.02;translate:0 0}
  50%{scale:1.08;translate:var(--cd-x,-1.2%) var(--cd-y,-.8%)}
  100%{scale:1.12;translate:calc(var(--cd-x,-1.2%) * -0.6) calc(var(--cd-y,-.8%) * 1.2)}
}

.cine-shine{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 47%,rgba(255,255,255,.08) 53%,transparent 66%);
  background-size:260% 100%;background-position:160% 0;mix-blend-mode:soft-light;
  animation:cineShine var(--cs-dur,8s) ease-in-out var(--cs-delay,0s) infinite;animation-play-state:paused}
.cine-on>.cine-shine{animation-play-state:running}
.cine-wrap:hover>.cine-shine{animation-duration:2.4s}
@keyframes cineShine{0%,62%{background-position:160% 0}88%,100%{background-position:-70% 0}}

img.cine-pre{opacity:0;filter:blur(10px) saturate(.6)}
img.cine-show{opacity:1;filter:none;transition:opacity 1s ease,filter 1.2s ease}

@media (prefers-reduced-motion:reduce){
  .carousel-item.active .cine-hero-bg,.carousel-item.active .cine-hero-bg::after,.carousel-item.active .cine-hero-glow,
  img.cine-img,.cine-shine{animation:none!important}
  img.cine-pre{opacity:1;filter:none}
}