/* Ayni fotograf korunur; kamera ve sis ayri katmanlarda hareket eder.
   Yalniz transform/opacity degisir, sayfa her karede yeniden dizilmez. */
.kahraman{overflow:hidden}
.kahraman .hero-landscape{inset:-4%;transform-origin:65% 45%;animation:sato-kamera 26s ease-in-out infinite alternate;will-change:transform}
.kahraman .hero-mist{inset:18% -15% -12%;opacity:.42;background:none;animation:none}
.hero-mist::before,.hero-mist::after{content:'';position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
.hero-mist::before{background:radial-gradient(ellipse at 65% 75%,#b3d9df55,transparent 46%),radial-gradient(ellipse at 95% 50%,#8cb7c536,transparent 37%);animation:sato-sis 19s ease-in-out infinite alternate}
.hero-mist::after{inset:15% -10% -10%;background:radial-gradient(ellipse at 35% 85%,#aac8d64a,transparent 43%),radial-gradient(ellipse at 80% 90%,#c7dae35e,transparent 38%);animation:sato-sis 29s -12s ease-in-out infinite alternate-reverse}
.sahne-dugme{display:inline-flex;align-items:center;margin-top:12px;min-height:36px;padding:7px 12px;background:#07101980;border:1px solid #d9bd8138;color:#c4c9ca;font:11px/1.4 system-ui,sans-serif;cursor:pointer;letter-spacing:.02em}
.sahne-dugme:hover{color:#efd59f;border-color:#d9bd8170}
.sahne-dugme:focus-visible{outline:2px solid #d9bd81;outline-offset:3px}
.sahne-durdu .hero-landscape,.sahne-durdu .hero-mist::before,.sahne-durdu .hero-mist::after{animation-play-state:paused}
@keyframes sato-kamera{from{transform:scale(1.04) translate3d(-.7%,.2%,0)}to{transform:scale(1.13) translate3d(.8%,-.8%,0)}}
@keyframes sato-sis{from{transform:translate3d(-5%,2%,0) scale(1);opacity:.5}to{transform:translate3d(6%,-3%,0) scale(1.08);opacity:.95}}
@media(max-width:760px){.kahraman .hero-landscape{animation-duration:32s}.kahraman .hero-mist{opacity:.3}}
@media(prefers-reduced-motion:reduce){.kahraman .hero-landscape{animation:none;transform:none;will-change:auto}.hero-mist::before,.hero-mist::after{animation:none;will-change:auto}.sahne-dugme{display:none}}