/* ============================================================
   ZDT · FlatPower — HAREKET KATMANI (motion.css v1)
   Mevcut style.css'e DOKUNMAZ; sadece üzerine ek katman.
   Kural: prefers-reduced-motion açıksa hiçbir şey animasyon yapmaz,
   içerik zaten görünür (JS yüklenemezse de metinler kaybolmaz).
   ============================================================ */

html.has-mo body{--mo-ease:cubic-bezier(.22,.68,.24,1)}
html.has-mo .mo-fade{opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--mo-ease),transform .75s var(--mo-ease);
  will-change:opacity,transform}
html.has-mo .mo-fade.on,html.has-mo .mo-hero-l.on{opacity:1;transform:none}
html.has-mo .mo-pop{opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .6s var(--mo-ease) var(--mo-d,0s),transform .6s var(--mo-ease) var(--mo-d,0s)}
html.has-mo .mo-pop.on{opacity:1;transform:none}

/* hero açılışı: kademeli yükselme */
html.has-mo .hero .mo-hero-l{opacity:0;transform:translateY(24px);
  animation:moRise .95s var(--mo-ease) var(--mo-d,0s) forwards}
@keyframes moRise{to{opacity:1;transform:none}}

/* hero arka planında yavaş aurora (content: none olduğu için erişilebilirliği bozmaz) */
html.has-mo .hero-bg{position:relative;overflow:hidden}
html.has-mo .hero-bg::after{
  content:"";position:absolute;inset:-25%;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(38% 30% at 30% 28%,rgba(253,189,26,.5),transparent 62%),
             radial-gradient(32% 26% at 72% 62%,rgba(255,214,90,.34),transparent 60%);
  filter:blur(58px);animation:moAurora 26s ease-in-out infinite alternate}
@keyframes moAurora{
  0%{transform:translate3d(-3%,-2%,0) scale(1)}
  50%{transform:translate3d(4%,3%,0) scale(1.1)}
  100%{transform:translate3d(-2%,4%,0) scale(1.04)}}

/* bölge başlıkları: satır maskesiyle açılır */
html.has-mo h2.mo-mask{clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--mo-ease)}
html.has-mo h2.mo-mask.on{clip-path:inset(0 0 0 0)}

/* kartlarda yumuşak yükseklik + parlama; hover'da hafif 3B eğim */
html.has-mo .person,html.has-mo .info,html.has-mo .tech-card,html.has-mo .stat,html.has-mo .bro-card,html.has-mo .brosur-shot{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);
  transition:transform .35s var(--mo-ease),box-shadow .4s var(--mo-ease),border-color .3s;
  position:relative}
@media (hover:hover) and (min-width:901px){
  html.has-mo .person:hover,html.has-mo .info:hover,html.has-mo .tech-card:hover,html.has-mo .brosur-shot:hover{
    box-shadow:0 20px 44px -18px rgba(0,0,0,.75),0 0 0 1px rgba(253,189,26,.28)}
  html.has-mo .stat:hover{transform:perspective(900px) translateY(-5px) scale(1.02)}
}
/* parlama katmanı (yalnız JS --gx/--gy verdiğinde görünür) */
html.has-mo .mo-tilt::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .35s;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(253,189,26,.16),transparent 68%)}
html.has-mo .mo-tilt:hover::before{opacity:1}

/* butonlar: mikro mıknatıs + altın iz */
html.has-mo .btn{transform:translate(var(--mx,0px),var(--my,0px))}
@media (hover:hover){
  html.has-mo .btn:hover{box-shadow:0 10px 30px -12px rgba(253,189,26,.5)}
  html.has-mo .btn:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.965)}
}

/* menü altı çizgisi kayarak dolar */
html.has-mo .nav a{position:relative}
html.has-mo .nav a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.3rem;height:1.5px;
  background:linear-gradient(90deg,var(--brand),rgba(253,189,26,0));transform:scaleX(0);
  transform-origin:left;transition:transform .45s var(--mo-ease)}
html.has-mo .nav a:hover::after,html.has-mo .nav a.active::after{transform:scaleX(1)}

/* istatistikler: sayı yukarı sayar, kutu parlar */
html.has-mo .stat.on b{animation:moPop .75s var(--mo-ease)}
@keyframes moPop{0%{transform:translateY(10px) scale(.9);opacity:.4}60%{transform:scale(1.06)}100%{transform:none}}

/* harita: nokta halkası + kontur çizimi */
html.has-mo .map-box::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(32% 28% at 60% 70%,rgba(253,189,26,.22),transparent 66%);
  animation:moMapPulse 5.5s ease-in-out infinite}
@keyframes moMapPulse{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
html.has-mo .map-wrap .mo-path{stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);
  transition:stroke-dashoffset 2.4s ease}
html.has-mo .map-wrap .mo-path.on{stroke-dashoffset:0}

/* görseller: çok yavaş ken burns */
html.has-mo .tech-hero img,html.has-mo .tech-img img,html.has-mo .bro-img,html.has-mo .brosur-page img,html.has-mo .tech-media img{
  animation:moKB 22s ease-in-out infinite alternate}
@keyframes moKB{0%{transform:scale(1.005)}100%{transform:scale(1.065) translate(-1%,-1%)}}

/* kaydırma ipucu (hero altında) */
html.has-mo .mo-hint{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:3;
  width:22px;height:34px;border:1.5px solid rgba(253,189,26,.5);border-radius:12px;pointer-events:none}
html.has-mo .mo-hint i{position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;
  background:var(--brand);animation:moWheel 1.9s ease-in-out infinite}
@keyframes moWheel{0%{opacity:0;transform:translateY(0)}25%{opacity:1}75%{opacity:1;transform:translateY(13px)}100%{opacity:0;transform:translateY(15px)}}

/* hareket hassasiyeti: hepsi kapalı, içerik görünür */
@media (prefers-reduced-motion:reduce){
  html.has-mo .mo-fade,html.has-mo .mo-pop,html.has-mo .mo-hero-l,html.has-mo h2.mo-mask{
    opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
  html.has-mo .hero-bg::after,html.has-mo .map-box::after,html.has-mo .stat.on b,
  html.has-mo .mo-hint i,html.has-mo .tech-hero img,html.has-mo .tech-img img,html.has-mo .bro-img,html.has-mo .brosur-page img,html.has-mo .tech-media img{
    animation:none!important}
  html.has-mo .mo-tilt,html.has-mo .btn{--rx:0deg;--ry:0deg;--mx:0px;--my:0px}
  html.has-mo .map-wrap .mo-path{stroke-dashoffset:0!important;transition:none}
}
/* dokunmatik/küçük ekran: tilt ve parallax yok (pil + jank koruması) */
@media (max-width:900px),(hover:none){
  html.has-mo .person,html.has-mo .info,html.has-mo .tech-card,html.has-mo .stat{
    --rx:0deg;--ry:0deg;transition:opacity .6s var(--mo-ease),transform .6s var(--mo-ease)}
  html.has-mo .btn{--mx:0px;--my:0px}
}