/* =========================================================================
   MG Teknoloji — hareket katmanı
   Geçişler tek bir yavaşlama eğrisiyle yürür; sayfa boyunca aynı ritim
   hissedilsin diye süreler de üç kademeye sabitlenmiştir.
   Ayrı dosyada tutulur ki tema renkleriyle uğraşırken hareket bozulmasın.
   ========================================================================= */

:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.22s;
  --t:.42s;
  --t-slow:.85s;
}

/* --- Üstte kaydırma ilerleme çubuğu --- */
.scroll-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--brand-grad);z-index:300;pointer-events:none;
}

/* --- Görünüme girince canlanma: yön seçenekleri --- */
.reveal{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity var(--t-slow) var(--ease-out),
             transform var(--t-slow) var(--ease-out),
             filter var(--t-slow) var(--ease-out);
  transition-delay:calc(var(--d,0) * 85ms);
}
.reveal[data-anim="left"]{transform:translate3d(-34px,0,0)}
.reveal[data-anim="right"]{transform:translate3d(34px,0,0)}
.reveal[data-anim="zoom"]{transform:scale(.94)}
.reveal[data-anim="blur"]{filter:blur(10px);transform:translate3d(0,18px,0)}
.reveal.in{opacity:1;transform:none;filter:none}

/* --- Görsel maskeleme: figürler perde gibi açılır --- */
.clip-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-out)}
.clip-reveal.in{clip-path:inset(0 0 0 0)}

/* --- HERO: aktif slaytın içeriği sırayla girer --- */
.hero-slide .hs-kicker,
.hero-slide .hs-title,
.hero-slide .hs-sub,
.hero-slide .hs-actions{
  opacity:0;transform:translate3d(0,30px,0);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.hero-slide.active .hs-kicker { opacity:1;transform:none;transition-delay:.18s }
.hero-slide.active .hs-title  { opacity:1;transform:none;transition-delay:.30s }
.hero-slide.active .hs-sub    { opacity:1;transform:none;transition-delay:.44s }
.hero-slide.active .hs-actions{ opacity:1;transform:none;transition-delay:.58s }
/* Yavaş yakınlaşma (Ken Burns) yalnızca aktif slaytta çalışır */
.hs-bg{transition:transform 9s linear,opacity .9s var(--ease)}

/* --- Bölüm başlığı altı mavi çizgi çizilerek gelir --- */
.sec-head .sec-title{position:relative;padding-bottom:16px}
.sec-head .sec-title::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:64px;border-radius:3px;
  background:var(--brand-grad);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) .25s;
}
.sec-head.center .sec-title::after{left:50%;margin-left:-32px}
.sec-head.in .sec-title::after{transform:scaleX(1)}

/* --- Kart etkileşimleri: yumuşak ve tutarlı --- */
.svc-card,.feat-card,.post-card,.proj-card,.sector-card,.mini-card,.quick-card,.cc{
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.svc-card:hover,.feat-card:hover,.post-card:hover,.proj-card:hover{transform:translate3d(0,-7px,0)}
.pc-img img,.pj-img img,.sc-img img,.tv-shape img{transition:transform 1.1s var(--ease-out)}
.post-card:hover .pc-img img,.proj-card:hover .pj-img img,.svc-card:hover .sc-img img{transform:scale(1.08)}

/* İkon kutuları hafif yaylanır */
.sc-ic,.ft-ic,.qc-ic,.cc-ic,.cat-ic{transition:transform .45s var(--ease-out),background .35s var(--ease),color .35s var(--ease)}
.svc-card:hover .sc-ic{transform:translateY(-3px) rotate(-7deg) scale(1.06)}
.feat-card:hover .ft-ic{transform:translateY(-3px) scale(1.08)}
.cc:hover .cc-ic{transform:scale(1.1)}

/* --- Butonlarda parlama geçişi --- */
.btn-primary::after{
  content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .75s var(--ease-out);pointer-events:none;
}
.btn-primary:hover::after{left:160%}

/* --- Menü: alt menü öğeleri sırayla belirir --- */
.sub-list li,.mega-col{opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.has-sub:hover .sub-list li,.has-sub:focus-within .sub-list li,
.has-mega:hover .mega-col,.has-mega:focus-within .mega-col{opacity:1;transform:none}
.sub-list li:nth-child(1),.mega-col:nth-child(1){transition-delay:.04s}
.sub-list li:nth-child(2),.mega-col:nth-child(2){transition-delay:.08s}
.sub-list li:nth-child(3),.mega-col:nth-child(3){transition-delay:.12s}
.sub-list li:nth-child(4),.mega-col:nth-child(4){transition-delay:.16s}
.sub-list li:nth-child(5),.mega-col:nth-child(5){transition-delay:.20s}
.sub-list li:nth-child(6),.mega-col:nth-child(6){transition-delay:.24s}

/* --- Mobil menü: açılırken satırlar sırayla iner --- */
.mobile-nav{transition:transform .46s var(--ease-out)}
.mobile-nav .mnav-list>li{opacity:0;transform:translateX(22px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.mobile-nav.open .mnav-list>li{opacity:1;transform:none}
.mobile-nav.open .mnav-list>li:nth-child(1){transition-delay:.10s}
.mobile-nav.open .mnav-list>li:nth-child(2){transition-delay:.15s}
.mobile-nav.open .mnav-list>li:nth-child(3){transition-delay:.20s}
.mobile-nav.open .mnav-list>li:nth-child(4){transition-delay:.25s}
.mobile-nav.open .mnav-list>li:nth-child(5){transition-delay:.30s}
.mobile-nav.open .mnav-list>li:nth-child(6){transition-delay:.35s}
.mobile-nav.open .mnav-list>li:nth-child(7){transition-delay:.40s}

/* --- Sekme paneli geçişi --- */
.tab-pane.active{animation:paneIn .55s var(--ease-out) both}
@keyframes paneIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.cs-item:active{transform:scale(.985)}

/* --- SSS açılışı --- */
.faq-item[open] .fq-body{animation:faqIn .4s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- Sayaçlar: rakamlar hafif yukarı süzülür --- */
.counter.in .cnt-num,.counter.in .cnt-suffix{animation:countIn .7s var(--ease-out) both}
@keyframes countIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- Sayfa ilk açılışında üst bölüm yumuşak girer --- */
.site-header{animation:headerIn .6s var(--ease-out) both}
@keyframes headerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* --- Metin içi bağlantılarda alt çizgi animasyonu --- */
.prose a{
  background-image:linear-gradient(var(--brand),var(--brand));background-size:0 2px;background-repeat:no-repeat;
  background-position:0 100%;transition:background-size .35s var(--ease-out);text-decoration:none;padding-bottom:1px;
}
.prose a:hover{background-size:100% 2px}

/* --- Hareket azaltma tercihi --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal,.clip-reveal,
  .hero-slide .hs-kicker,.hero-slide .hs-title,.hero-slide .hs-sub,.hero-slide .hs-actions{
    opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;
  }
  .scroll-progress{display:none}
  .marquee-track{animation:none}
  /* Marka şeridi akmasın; sarmalanıp ortalansın ki tüm markalar görünsün */
  .bm-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .bm-set:last-child{display:none}
  .bm-set{flex-wrap:wrap;justify-content:center}
}