/* ==========================================================================
   NTA — Akıcılık ve animasyon katmanı  ·  assets/nta-motion.css
   --------------------------------------------------------------------------
   Bu dosya tüm sayfalarda EN SON yüklenir, dış bağımlılığı yoktur.
   Kurallar:
     · Yalnızca transform / translate / opacity / filter animasyonları kullanılır
       (layout ve paint tetikleyen özellikler animasyonlanmaz).
     · Hareket tercihi "azalt" olan kullanıcılarda her şey otomatik kapanır.
     · Marka kuralı: üstte NTA, aşağı inince proje adı. Ana sayfada logo hep NTA.
   ========================================================================== */

:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --m-ease-in-out: cubic-bezier(.6, 0, .3, 1);
  --m-dur-fast: .22s;
  --m-dur: .42s;
  --m-dur-slow: .68s;
}

/* 0) Akıcı kaydırma (yalnızca hareket tercihi uygun olanlarda) ------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 74px;
  }
}

/* 1) Sayfa giriş / çıkış akışı -------------------------------------------- */
main {
  transition: opacity .2s ease;
}
body.is-leaving main {
  opacity: 0;
}
body.motion-inactive * {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: no-preference) {
  main {
    animation: m-page-in .42s var(--m-ease);
  }
  @keyframes m-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* 2) Header: yumuşak durum geçişleri ------------------------------------- */
header.nta-glass-header,
header.nta-glass-header.is-scrolled {
  transition:
    transform .42s var(--m-ease),
    background-color .35s ease,
    border-color .35s ease,
    box-shadow .4s ease !important;
  will-change: transform;
}
header.nta-glass-header.is-scrolled {
  background-color: #010101 !important;
  border-bottom-color: #262626 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
/* İsteğe bağlı: aşağı inerken header'ı gizle (nta-motion.js · autoHideHeader) */
header.nta-glass-header.is-hidden {
  transform: translateY(-101%);
}

/* 3) Marka: sakin "yerleşme" hareketi ------------------------------------ */
header.nta-glass-header .brand {
  transition: transform .5s var(--m-ease), opacity .3s ease;
}
header.nta-glass-header.is-scrolled .brand {
  transform: scale(.955);
  transform-origin: left center;
}
@media (hover: hover) and (pointer: fine) {
  header.nta-glass-header .brand:hover {
    transform: scale(1.025);
  }
}

/* 4) Proje morfu (NTA → PROJE) daha akıcı -------------------------------- */
body.project-brand-page header a.brand {
  transition: width var(--m-dur-slow) var(--m-ease) !important;
}
body.project-brand-page header .project-brand-lockup > svg.project-brand-nta {
  transition: opacity .2s ease .2s, transform .32s var(--m-ease) .2s !important;
}
body.project-brand-page header .project-brand-lockup > svg.project-brand-name {
  transition: opacity .26s ease, transform .44s var(--m-ease) !important;
}
body.project-brand-page header.is-scrolled .project-brand-lockup > svg.project-brand-nta {
  transition: opacity .18s ease, transform .28s var(--m-ease) !important;
}
body.project-brand-page header.is-scrolled .project-brand-lockup > svg.project-brand-name {
  transition: opacity .34s ease .2s, transform .5s var(--m-ease) .18s !important;
}
/* NTASPACE: SPACE eklentisi soldan yumuşak açılır */
body.ntaspace-page .space-header-lockup {
  transition: width var(--m-dur-slow) var(--m-ease) !important;
}
body.ntaspace-page .space-header-logo .space-extension {
  transition: opacity .3s ease .12s, transform .55s var(--m-ease), clip-path .55s var(--m-ease) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.project-brand-page header a.brand,
  body.project-brand-page header .project-brand-lockup > svg,
  body.ntaspace-page .space-header-lockup,
  body.ntaspace-page .space-header-logo .space-extension {
    transition: none !important;
  }
}

/* 5) Üst menü bağlantıları: alttan büyüyen ince çizgi -------------------- */
header.nta-glass-header .navlinks > a,
header.nta-glass-header .project-menu summary {
  position: relative;
  transition: color .25s ease;
}
header.nta-glass-header .navlinks > a::after,
header.nta-glass-header .project-menu summary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: currentColor;
  opacity: .85;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--m-ease);
  pointer-events: none;
}
header.nta-glass-header .navlinks > a:hover::after,
header.nta-glass-header .navlinks > a[aria-current="page"]::after,
header.nta-glass-header .project-menu summary:hover::after {
  transform: scaleX(1);
}
header.nta-glass-header .project-menu[open] summary::after {
  transform: scaleX(1);
}

/* 6) Butonlar: manyetik alan + yumuşak basış ----------------------------- */
.pill,
.launch-pill,
.menu,
header.nta-glass-header .nav-actions .pill {
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .35s ease,
    translate .35s var(--m-ease) !important;
}
.m-magnet {
  will-change: translate;
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover,
  .launch-pill:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  }
}
.pill:active,
.launch-pill:active {
  translate: 0 1px;
}

/* 7) Kartlar: hafif 3B eğim, imleci takip eden ışık, görsel yakınlaşması - */
.m-tilt {
  position: relative;
  transform-style: preserve-3d;
}
.m-tilt .m-glow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 62%);
  transition: opacity .4s ease;
  will-change: transform;
}
.m-tilt:hover .m-glow {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  /* Ana sayfa kartları konum değiştirmez; yalnızca ince bir eğim alır. */
  .compact-projects > .tile.m-tilt {
    --m-lift: 0px;
  }
  .compact-projects > .tile.m-tilt:hover,
  .process-card.m-tilt:hover,
  .showcase-card.m-tilt:hover {
    transform:
      perspective(1100px)
      rotateX(var(--m-rx, 0deg))
      rotateY(var(--m-ry, 0deg))
      translateY(var(--m-lift, -4px));
    transition: transform .4s var(--m-ease), border-color .3s ease;
  }
  .showcase-card.m-tilt:hover {
    --m-lift: -5px;
  }
}
/* Kart içindeki görsel, imleçle birlikte çok hafif yakınlaşır */
.home-v3 .compact-projects > .tile .compact-art svg,
.home-v3 .compact-projects > .tile .compact-art img,
.tile .compact-art svg,
.tile .compact-art img {
  transition: transform .9s var(--m-ease), opacity .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .home-v3 .compact-projects > .tile:hover .compact-art svg,
  .home-v3 .compact-projects > .tile:hover .compact-art img,
  .tile:hover .compact-art svg,
  .tile:hover .compact-art img {
    transform: scale(1.045);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-tilt .m-glow { display: none; }
  .compact-projects > .tile:hover,
  .process-card:hover,
  .showcase-card:hover {
    transform: none;
  }
}

/* 8) Görünürlük animasyonları (nta-motion.js ile) ------------------------ */
.m-reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .6s var(--m-ease-soft), translate .72s var(--m-ease);
  transition-delay: var(--m-d, 0ms);
}
.m-reveal.is-in {
  opacity: 1;
  translate: 0 0;
}
.m-reveal.m-fade {
  translate: 0 0;
}
.m-reveal.m-right {
  translate: 16px 0;
}
@supports not (translate: 0 1px) {
  .m-reveal { transform: translateY(22px); }
  .m-reveal.is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .m-reveal {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 9) Okuma çubuğu: yalnızca sayfa kaydırılırken görünür ------------------ */
#page-progress {
  transition: opacity .35s ease;
}
#page-progress span {
  transition: transform .12s linear;
}
#page-progress.is-scrolling {
  opacity: 1 !important;
}
#page-progress.is-complete:not(.is-scrolling) {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  #page-progress span { transition: none; }
}

/* 10) Açılış ekranı: daha yumuşak çıkış ---------------------------------- */
.nta-opening {
  transition: opacity .34s ease, visibility .34s ease !important;
}
.nta-opening.is-leaving .nta-opening__content {
  translate: 0 -6px;
  transition: translate .34s var(--m-ease);
}
@media (prefers-reduced-motion: reduce) {
  .nta-opening.is-leaving .nta-opening__content { translate: none; }
}

/* 11) Footer ve liste bağlantılarında mikro hareket ---------------------- */
.mega-footer .footer-column a,
.mega-footer .footer-contacts a {
  transition: color .25s ease, translate .3s var(--m-ease), opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mega-footer .footer-column a:hover,
  .mega-footer .footer-contacts a:hover {
    translate: 3px 0;
  }
}

/* 12) Proje açılır menüsü ------------------------------------------------ */
header.nta-glass-header .project-dropdown {
  transition: opacity .25s ease, translate .3s var(--m-ease);
}

/* 13) Miyro sayfası: sabit header'ın akıcı geçişleri -------------------- */
body.miyro-landing-host header.nta-glass-header,
body.miyro-landing-host header.nta-glass-header.is-scrolled {
  transition:
    transform .42s var(--m-ease),
    border-color .35s ease,
    background-color .35s ease !important;
}
body.miyro-landing-host header.nta-glass-header.is-scrolled {
  border-bottom-color: #262626 !important;
}
body.miyro-landing-host header.nta-glass-header .brand {
  transition: transform .5s var(--m-ease), width var(--m-dur-slow) var(--m-ease) !important;
}

/* 14) Basılı tutulan cihazlarda gereksiz hareketleri kapat -------------- */
@media (hover: none), (pointer: coarse) {
  .m-tilt .m-glow { display: none; }
  .compact-projects > .tile.m-tilt:hover,
  .process-card.m-tilt:hover,
  .showcase-card.m-tilt:hover {
    transform: none;
  }
}

/* 15) Genel güvenlik ağı: hareket tercihi azaltıldığında ----------------- */
@media (prefers-reduced-motion: reduce) {
  header.nta-glass-header,
  header.nta-glass-header.is-scrolled,
  header.nta-glass-header .brand,
  .pill,
  .launch-pill,
  .mega-footer .footer-column a {
    transition: none !important;
  }
  header.nta-glass-header.is-hidden { transform: none; }
}