/* Erk efekt katmani. Yalnizca html.fx varken devreye girer (hareket tercihi/dusuk donanimda JS sinifi eklemez).
   Kural: sadece transform/opacity animasyonu; LCP ogesi (hero) opacity:0 ile baslamaz. */
/* Sayfa gecisleri (destekleyen tarayicilarda): icerik yumusakca degisir; header, mobil bar ve WhatsApp dugmesi yerinde kalir */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:fx-vt-out .16s ease both}
  ::view-transition-new(root){animation:fx-vt-in .3s var(--es-ease) both}
  ::view-transition-group(es-header),::view-transition-group(es-mbar),::view-transition-group(es-wa){animation-duration:0s}
}
@keyframes fx-vt-out{to{opacity:0}}
@keyframes fx-vt-in{from{opacity:0;transform:translateY(8px)}}
.es-header{view-transition-name:es-header}
.es-mbar{view-transition-name:es-mbar}
.es-wa{view-transition-name:es-wa}

/* Okuma ilerleme cubugu */
.fx-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:1100;transform-origin:left center;transform:scaleX(0);background:var(--es-grad);pointer-events:none}

/* Header: asagi kaydirinca gizlenir, yukari kaydirinca gelir */
html.fx .es-header{transition:transform .35s var(--es-ease),background .2s,border-color .2s}
html.fx .es-header.fx-away:not(.is-open){transform:translateY(-102%)}

/* Kaydirinca beliren ogeler. JS yuklenmezse 2.6 sn sonra gorunur (guvenlik agi). */
html.fx .fx-in{opacity:0;transform:translateY(24px);transition:opacity .7s var(--es-ease),transform .8s var(--es-ease);transition-delay:calc(var(--d,0)*70ms);animation:fx-safe 0s 2.6s forwards}
html.fx .fx-in.is-in{opacity:1;transform:none;animation:none}
@keyframes fx-safe{to{opacity:1;transform:none}}

/* Hero: yavas yakinlasma, satir satir giris, parallax */
html.fx .es-hero-media .es-hero-img{animation:fx-kb 26s ease-out both;transform-origin:68% 42%}
@keyframes fx-kb{from{transform:scale(1)}to{transform:scale(1.09)}}
html.fx .es-hero-media{will-change:transform}
html.fx .fx-line{overflow:hidden;padding-block:.08em;margin-block:-.08em}
html.fx .fx-line>span{display:block;transform:translateY(108%);animation:fx-up .95s var(--es-ease) forwards;animation-delay:calc(.12s + var(--i,0)*.14s)}
@keyframes fx-up{to{transform:none}}
html.fx .es-hero .es-eyebrow,html.fx .es-hero p,html.fx .es-hero .es-cta-row{animation:fx-rise .9s var(--es-ease) both;animation-delay:.45s}
html.fx .es-hero .es-cta-row{animation-delay:.6s}
@keyframes fx-rise{from{transform:translateY(18px)}to{transform:none}}
html.fx .es-stats{animation:fx-rise 1s var(--es-ease) both;animation-delay:.7s}

/* Dugme isik gecisi */
.es-btn-primary{position:relative;overflow:hidden}
.es-btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%)}
.es-btn-primary:hover::after{transform:translateX(120%);transition:transform .7s var(--es-ease)}

/* Ilce seridi: akan satir (yalnizca fx) */
html.fx .es-marq-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:fx-marq 42s linear infinite}
html.fx .es-marq:hover .es-marq-track{animation-play-state:paused}
@keyframes fx-marq{to{transform:translateX(-50%)}}

/* Kartlar ve sekme gecisi */
html.fx .es-c2{transition:transform .25s var(--es-ease),box-shadow .25s,border-color .2s}
html.fx .es-c2:hover{transform:translateY(-5px);box-shadow:var(--es-sh2);border-color:#b9cfee}
html.fx .es-c2.fx-pop{animation:fx-pop .45s var(--es-ease) both}
@keyframes fx-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* SSS: yumusak acilis (destekleyen tarayicilarda) */
@supports (interpolate-size:allow-keywords){
  .es-faq{interpolate-size:allow-keywords}
  .es-faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--es-ease),content-visibility .3s allow-discrete}
  .es-faq details[open]::details-content{block-size:auto}
}

/* Mobil alt cubuk: asagi kaydirinca gizlenir */
html.fx .es-mbar{transition:transform .3s var(--es-ease)}
html.fx .es-mbar.fx-away{transform:translateY(105%)}

@media (prefers-reduced-motion:reduce){
  .fx-in,.fx-line>span,.es-hero-img{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}
@media (min-width:1024px){html.fx .es-hero-media{top:-200px}}