/* =========================================================
   GoWay motion layer
   mediaclick.work/goway/html/html2 animasyonlarından uyarlandı.
   - Mevcut transform'ları ezmemek için bağımsız translate/scale/rotate
     özellikleri kullanılır.
   - Sınıfların hepsi motion.js tarafından eklenir (mx- öneki).
   - Hareket azaltma tercihi (prefers-reduced-motion) açıksa html'e
     .mx-js eklenmez ve bu dosyadaki hiçbir efekt devreye girmez.
   ========================================================= */
:root {
  --mx-ease: cubic-bezier(.2, .7, .2, 1);
  --mx-spring: cubic-bezier(.3, 1.6, .5, 1);
  --mx-teal: #31bec3;
  --mx-teal-dark: #1e9ea3;
}
.mx-js body { overflow-x: clip; }

/* ---------- Keyframes ---------- */
@keyframes mxUp     { from { opacity: 0; translate: 0 40px } to { opacity: 1; translate: 0 0 } }
@keyframes mxLeft   { from { opacity: 0; translate: -60px 0 } to { opacity: 1; translate: 0 0 } }
@keyframes mxRight  { from { opacity: 0; translate: 60px 0 } to { opacity: 1; translate: 0 0 } }
@keyframes mxZoom   { from { opacity: 0; scale: .92 } to { opacity: 1; scale: 1 } }
@keyframes mxFade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes mxHeroIn { from { opacity: 0; translate: 80px 40px; scale: .96 } to { opacity: 1; translate: 0 0; scale: 1 } }
@keyframes mxWordUp { from { opacity: 0; translate: 0 110% } to { opacity: 1; translate: 0 0 } }
@keyframes mxStrip  { from { scale: 1 0 } to { scale: 1 1 } }
@keyframes mxFloatHero { 0%, 100% { translate: 0 0 } 50% { translate: 0 -18px } }
@keyframes mxFloat  { 0%, 100% { translate: 0 0 } 50% { translate: 0 -10px } }
@keyframes mxSwap   { from { opacity: 0; translate: 0 10px } to { opacity: 1; translate: 0 0 } }
@keyframes mxFlip   { from { opacity: 0; translate: 0 -.45em } to { opacity: 1; translate: 0 0 } }
@keyframes mxPop    { from { opacity: 0; scale: 0 } to { opacity: 1; scale: 1 } }
@keyframes mxRing  { 0% { box-shadow: 0 0 0 0 rgba(49, 190, 195, .55) } 100% { box-shadow: 0 0 0 14px rgba(49, 190, 195, 0) } }

/* ---------- Scroll reveal ---------- */
.mx-reveal:not(.mx-in) { opacity: 0; }
.mx-in { animation: mxUp .9s var(--mx-ease) var(--mx-d, 0ms) both; }
.mx-in.mx-left  { animation-name: mxLeft; }
.mx-in.mx-right { animation-name: mxRight; }
.mx-in.mx-zoom  { animation-name: mxZoom; }

/* ---------- Hero (sayfa yüklenince) ---------- */
/* Soldaki turkuaz şerit yukarıdan aşağı uzar */
.mx-js .pageFirst .hero-bg::before { transform-origin: top; animation: mxStrip 1.2s var(--mx-ease) .2s both; }
/* Dalga çizgileri (hero-fx.js) yavaşça belirir */
.mx-js .pageFirst .hero-fx { animation: mxFade 1.6s ease .1s both; }
/* Görsel sağ-alttan gelir, ardından sürekli hafifçe süzülür */
.mx-js .pageFirst picture img { animation: mxHeroIn 1.4s var(--mx-ease) .3s both; }
.mx-js .pageFirst picture { animation: mxFloatHero 6s ease-in-out 1.7s infinite; }
/* JS kelimeleri bölemezse başlık yine de görünür */
.mx-js .pageFirst .name1:not(.mx-split) { animation: mxFade .6s ease 1.2s both; }
.mx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.mx-w > span { display: inline-block; animation: mxWordUp .9s var(--mx-ease) var(--mx-d, 0ms) both; }
.mx-js .pageFirst .name2 { animation: mxUp .9s var(--mx-ease) .75s both; }
.mx-js .pageFirst .caption .light { animation: mxUp .9s var(--mx-ease) .95s both; }

/* ---------- Butonlar ---------- */
.mx-btn { overflow: hidden; isolation: isolate; }
.mx-btn:hover { translate: 0 -2px; box-shadow: 0 12px 30px -10px rgba(49, 190, 195, .7); }
.mx-shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(49, 190, 195, .45) 50%, transparent 70%);
  translate: -120% 0; transition: translate .7s ease;
}
.mx-btn:hover .mx-shine { translate: 120% 0; }

/* ---------- Header / menü ---------- */
.mx-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }
.mx-navlink {
  background-image: linear-gradient(var(--mx-teal), var(--mx-teal));
  background-repeat: no-repeat; background-position: right bottom; background-size: 0 2px;
}
.mx-navlink:hover { background-position: left bottom; background-size: 100% 2px; }

/* ---------- Kartlar ---------- */
.mx-feat:hover .icon { translate: 0 -8px; rotate: 4deg; }
.mx-lift:hover { translate: 0 -10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45), 0 0 0 6px rgba(49, 190, 195, .18); }
.mx-lift:hover .icon { scale: 1.08; rotate: -3deg; }
.mx-float { animation: mxFloat 6s ease-in-out var(--mx-d, 0ms) infinite; }

/* ---------- Why Choose GoWay Tools ---------- */
.mx-tool:hover { translate: 6px 0; }
.mx-swap { animation: mxSwap .45s var(--mx-ease) both; }

.tools-cont .mx-tg::before { box-shadow: 0 .625rem 1.5625rem -.75rem rgba(0, 0, 0, .25); }

/* ---------- Why Choose: sol taraf (yay + ikon daireleri + adam) ----------
   Referanstaki 857x738'lik kompozisyon; tüm konumlar bu kutuya göre %.
   Yerleşim .mx-js dışında da çalışır, yalnızca animasyonlar .mx-js'e bağlı. */
.why-stage { position: relative; width: 100%; aspect-ratio: 857 / 738; }
.why-arc { position: absolute; left: 21.82%; top: 3.93%; width: 57.49%; height: 56.48%; overflow: visible; }
.why-man { position: absolute; left: 0; bottom: 0; width: 100%; height: 79%; object-fit: cover; }
.why-orb {
  position: absolute; z-index: 1; width: 10.27%; aspect-ratio: 1; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: scale .4s var(--mx-spring), background-color .3s ease;
}
.why-orb img { width: 45.45%; height: 45.45%; transition: filter .3s ease; }
.why-orb:hover { scale: 1.1; }
.why-orb.active { scale: 1.18; animation: mxRing 1.6s ease-out infinite; }
.why-orb.active img { filter: invert(56%) sepia(64%) saturate(470%) hue-rotate(134deg) brightness(92%); }

@media (prefers-reduced-motion: reduce) {
  .why-orb, .why-orb img { transition: none; }
  .why-orb.active { animation: none; }
}

.mx-js .why-arc { clip-path: circle(0% at 0% 100%); transition: clip-path 2s cubic-bezier(.4, 0, .2, 1) .2s; }
.mx-js .why-stage.mx-seen .why-arc { clip-path: circle(150% at 0% 100%); }
.mx-js .why-orb { opacity: 0; }
.mx-js .why-stage.mx-seen .why-orb { animation: mxPop .7s var(--mx-spring) var(--d, 0ms) both; }
/* Açılış bitince animasyon kaldırılır ki hover / aktif ölçekleri çalışsın */
.mx-js .why-stage.mx-done .why-orb { opacity: 1; animation: none; }
/* Aktif daire: açılış animasyonu yerine halka animasyonu */
.mx-js .why-stage.mx-seen .why-orb.active { opacity: 1; animation: mxRing 1.6s ease-out infinite; }

/* ---------- Kayan sekme göstergesi (tools listesi + fiyat sekmeleri) ---------- */
.mx-tg { isolation: isolate; }
.mx-tg::before {
  content: ''; position: absolute; z-index: -1; left: 0; top: 0; pointer-events: none;
  width: var(--mx-w, 0); height: var(--mx-h, 0);
  translate: var(--mx-x, 0) var(--mx-y, 0);
  background: var(--mx-bg); border-radius: var(--mx-r, 0);
}
.mx-tg.mx-ready::before {
  transition: translate .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1), height .45s cubic-bezier(.3, 1.3, .5, 1);
}
.mx-tg.mx-tg-li > li,
.mx-tg.mx-tg-a > li > a { background-color: transparent !important; }

/* ---------- Fiyatlar ---------- */
.mx-num { display: inline-block; }
.mx-flip { animation: mxFlip .4s var(--mx-ease) both; }

/* ---------- Müşteri yorumları ---------- */
.mx-stars { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--mx-ease) .3s; }
.mx-seen .mx-stars { clip-path: inset(0 0 0 0); }
.mx-avatar { filter: grayscale(1); transition: scale .4s var(--mx-spring), filter .4s ease; }
.mx-tcard:hover .mx-avatar { scale: 1.1; filter: grayscale(0); }

/* ---------- SSS ---------- */
.mx-faq-q:hover { color: var(--mx-teal-dark); translate: 8px 0; }

/* ---------- Footer ---------- */
.mx-flink:hover { color: var(--mx-teal-dark); translate: 4px 0; }