/* ============================================================
   Nonslip Digital — Site geneli hareket katmanı (motion.css)
   style.css'ten SONRA yüklenir. Hiçbir kural JS olmadan içeriği gizlemez:
   gizli başlangıç durumları yalnızca html.mo-js (head'deki tek satırlık
   betik) varken ve hareketi azalt kapalıyken uygulanır.
   ============================================================ */

:root {
  --mo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mo-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mo-dur: 0.9s;
}

/* ---------- Sayfa geçişleri (View Transitions, destekleyen tarayıcılarda) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mo-vt-out 0.32s var(--mo-ease) both; }
::view-transition-new(root) { animation: mo-vt-in 0.55s var(--mo-ease) both; }
@keyframes mo-vt-out { to { opacity: 0; transform: translateY(-18px) scale(0.985); filter: blur(4px); } }
@keyframes mo-vt-in { from { opacity: 0; transform: translateY(26px); } }

/* ---------- Açılış animasyonları (CSS; JS'yi beklemez, LCP'yi geciktirmez) ---------- */
@keyframes mo-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mo-mask { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(40%); } to { opacity: 1; clip-path: inset(-10% -5% -20% -5%); transform: none; } }
@keyframes mo-pop { from { opacity: 0; transform: scale(0.7) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mo-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .mo-js .page-header .section-label,
  .mo-js .page-header-title { animation: mo-mask 1.1s var(--mo-ease) 0.1s both; }
  .mo-js .page-breadcrumb { animation: mo-rise 0.9s var(--mo-ease) 0.35s both; }
  .mo-js .page-header .section-desc { animation: mo-rise 0.9s var(--mo-ease) 0.45s both; }

  .mo-js .sd-breadcrumb { animation: mo-rise 0.8s var(--mo-ease) 0.05s both; }
  .mo-js .sd-eyebrow { animation: mo-pop 0.8s var(--mo-ease-back) 0.15s both; }
  .mo-js .sd-hero h1 { animation: mo-mask 1.15s var(--mo-ease) 0.25s both; }
  .mo-js .sd-hero-lead { animation: mo-rise 0.9s var(--mo-ease) 0.5s both; }
  .mo-js .sd-hero-actions { animation: mo-rise 0.9s var(--mo-ease) 0.62s both; }
  .mo-js .sd-hero-chips .sd-chip { animation: mo-pop 0.7s var(--mo-ease-back) both; }
  .mo-js .sd-hero-chips .sd-chip:nth-child(1) { animation-delay: 0.75s; }
  .mo-js .sd-hero-chips .sd-chip:nth-child(2) { animation-delay: 0.83s; }
  .mo-js .sd-hero-chips .sd-chip:nth-child(3) { animation-delay: 0.91s; }
  .mo-js .sd-hero-chips .sd-chip:nth-child(4) { animation-delay: 0.99s; }
  .mo-js .sd-hero-chips .sd-chip:nth-child(n+5) { animation-delay: 1.07s; }

  /* Blog / referans detay başlıkları */
  .mo-js article.section .page-header-title,
  .mo-js #refDetailName { animation: mo-mask 1.1s var(--mo-ease) 0.1s both; }
  .mo-js #postExcerpt, .mo-js #refDetailDesc { animation: mo-rise 0.9s var(--mo-ease) 0.35s both; }
}

/* ---------- Kelime maskesi (başlıklar) ---------- */
.mo-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  padding-right: 0.02em;
}
.mo-wi { display: inline-block; will-change: transform; transform-origin: 0 100%; }
.mo-quote .mo-w { overflow: visible; }

/* ---------- Kaydırma ilerleme çubuğu ---------- */
.mo-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10001;
  background: linear-gradient(90deg, #FF6A00, #FF8C33 60%, #FF2A00);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 106, 0, 0.55);
}

/* ---------- Menü göstergesi ---------- */
.mo-nav { position: relative; isolation: isolate; }
.mo-nav-ind {
  position: absolute;
  left: 0; top: 50%;
  height: 36px;
  margin-top: -18px;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 106, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.mo-nav .nav-link { position: relative; z-index: 1; }

/* ---------- Butonlar: manyetik + basma geri bildirimi ---------- */
.mo-mag { translate: var(--mo-mx, 0px) var(--mo-my, 0px); }
.mo-on .mo-mag { transition: transform 0.35s var(--mo-ease), box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease, translate 0.45s var(--mo-ease), scale 0.15s ease; }
.btn-primary:active, .btn-secondary:active, .btn-cta-giant:active, .sd-btn:active,
.filter-btn:active, .partners-nav-btn:active, .social-link:active, .form-submit:active { scale: 0.96; }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .sd-btn:focus-visible, .btn-cta-giant:focus-visible,
.filter-btn:focus-visible, .partners-nav-btn:focus-visible { outline: 3px solid #FF6A00; outline-offset: 4px; }
.sd-btn svg, .btn-primary svg, .sd-other svg { transition: transform 0.35s var(--mo-ease); }
.sd-btn:hover svg, .btn-primary:hover svg, .sd-other:hover svg { transform: translateX(4px); }
.form-submit[disabled], .form-submit.loading { cursor: progress; opacity: 0.8; }

/* ---------- Kart ışığı (imleci izler) ---------- */
.mo-spot-host { isolation: isolate; }
.mo-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 106, 0, 0.13), transparent 45%);
}
.mo-spot-host:hover > .mo-spot { opacity: 1; }
.sd-band .mo-spot, .footer .mo-spot { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 140, 51, 0.18), transparent 45%); }

/* İkonlar: hover'da küçük, anlamlı hareket */
.service-card .service-icon, .sd-feature-icon, .contact-item-icon { transition: transform 0.5s var(--mo-ease-back); }
.service-card:hover .service-icon, .sd-feature:hover .sd-feature-icon, .contact-item:hover .contact-item-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.service-arrow { transition: transform 0.4s var(--mo-ease); display: inline-block; }
.service-card:hover .service-arrow { transform: translateX(6px); }

/* ---------- Parallax katmanları (CSS değişkenleri; mevcut animasyonlarla çakışmaz) ---------- */
.mo-on .hero-glow { translate: var(--mo-tx, 0px) calc(var(--mo-ty, 0px) + var(--mo-px, 0px)); }
.mo-on .sd-hero::before { translate: 0 var(--mo-ty, 0px); }

.page-header { overflow: hidden; isolation: isolate; }
.page-header > .container { position: relative; z-index: 2; }
.mo-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mo-deco span {
  position: absolute;
  border-radius: 50%;
  translate: var(--mo-tx, 0px) calc(var(--mo-ty, 0px) + var(--mo-px, 0px));
}
.mo-deco-a { width: 520px; height: 520px; right: -140px; top: -260px; background: radial-gradient(circle, rgba(255, 106, 0, 0.14), transparent 68%); }
.mo-deco-b { width: 180px; height: 180px; right: 32%; bottom: -120px; border: 1.5px solid rgba(255, 106, 0, 0.22); }
.mo-deco-c { width: 14px; height: 14px; left: 4%; top: 74%; background: #FF6A00; box-shadow: 0 0 0 8px rgba(255, 106, 0, 0.12); }
@media (prefers-reduced-motion: no-preference) {
  .mo-deco-c { animation: mo-float 6s ease-in-out infinite; }
  .mo-deco-b { animation: mo-spin 40s linear infinite; }
}
@keyframes mo-float { 50% { transform: translateY(-14px); } }
@keyframes mo-spin { to { transform: rotate(360deg); } }

/* ---------- 3D sahne katmanı ---------- */
.mo-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.mo-scene canvas { display: block; width: 100%; height: 100%; }
.hero .hero-wrapper { position: relative; z-index: 2; }
.sd-hero .container { position: relative; z-index: 1; }
/* 3D sahne panelin arkasında kaldığında metin okunurluğu için cam paneli koyulaştır */
.mo-has-scene .sd-hero-panel { background: linear-gradient(160deg, rgba(15, 23, 42, 0.8), rgba(11, 17, 32, 0.66)); }
.page-header .mo-scene { z-index: 1; }
@media (max-width: 768px) {
  /* Mobilde 3D nesne başlığın altındaki kendi alanında durur (metnin üstüne binmez) */
  .mo-js .page-header[data-scene] { padding-bottom: 215px; }
  .mo-deco-c { display: none; }
}

/* ---------- Bölüm geçişleri: kayan ışık ---------- */
.mo-on .mo-lit.section-secondary,
.mo-on .mo-lit.sd-section-alt,
.mo-on .mo-lit.clients-section {
  background-image: radial-gradient(55% 60% at calc(8% + var(--mo-p, 0.5) * 84%) 0%, rgba(255, 106, 0, 0.075), transparent 70%);
}
.mo-on .mo-lit.sd-band,
.mo-on .mo-lit.footer {
  background-image: radial-gradient(45% 70% at calc(90% - var(--mo-p, 0.5) * 80%) 100%, rgba(255, 106, 0, 0.13), transparent 70%);
}
.mo-on .cta-banner-card::before { translate: calc(var(--mo-p, 1) * -260px) calc(var(--mo-p, 1) * 120px); }
.mo-on .cta-banner-card::after { translate: calc(var(--mo-p, 1) * 220px) calc(var(--mo-p, 1) * -90px); }
.mo-on .cta-banner-card, .mo-on .sd-cta { will-change: transform; transform-origin: 50% 100%; }

/* ---------- İstatistik çubukları ---------- */
.mo-statbar { position: relative; }
.mo-statbar::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -10px;
  width: 44px; height: 3px;
  margin-left: -22px;
  border-radius: 3px;
  background: linear-gradient(90deg, #FF6A00, #FF8C33);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--mo-ease);
}
.stats-banner.mo-in .mo-statbar::before { transform: scaleX(1); }
.stats-banner.mo-in .mo-statbar:nth-child(2)::before { transition-delay: 0.15s; }
.stats-banner.mo-in .mo-statbar:nth-child(3)::before { transition-delay: 0.3s; }
.stats-banner.mo-in .mo-statbar:nth-child(4)::before { transition-delay: 0.45s; }

/* ---------- Süreç zaman çizelgesi (hizmet sayfaları) ---------- */
.mo-process { position: relative; }
.mo-timeline {
  position: absolute;
  left: 2%; right: 2%;
  top: 3.15rem;
  height: 3px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.08);
  z-index: 0;
  pointer-events: none;
}
.mo-timeline span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #FF6A00, #FF8C33);
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.6);
}
.mo-process .sd-step { z-index: 1; transition: border-color 0.5s ease, box-shadow 0.5s ease; }
.mo-process .sd-step.is-on { border-color: rgba(255, 106, 0, 0.55); box-shadow: 0 22px 48px -18px rgba(255, 106, 0, 0.35); }
.mo-process .sd-step .sd-step-num { transition: transform 0.6s var(--mo-ease-back); transform-origin: 0 100%; }
.mo-process .sd-step.is-on .sd-step-num { transform: scale(1.12); }
@media (max-width: 1024px) {
  .mo-timeline { left: 0.4rem; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .mo-timeline span { transform: scaleY(0); transform-origin: 50% 0; }
  .mo-process { padding-left: 1.6rem; }
}

/* ---------- Footer çizgisi ---------- */
.mo-line { position: relative; }
.mo-line::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #FF6A00 30%, #FF8C33 70%, transparent);
  transform: scaleX(0);
  transition: transform 1.6s var(--mo-ease);
}
.mo-line.mo-in::before { transform: scaleX(1); }

/* ---------- Form mikro etkileşimleri ---------- */
.contact-form input, .contact-form textarea, .contact-form select {
  transition: border-color 0.3s ease, box-shadow 0.35s var(--mo-ease), transform 0.35s var(--mo-ease);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.14), 0 10px 26px -14px rgba(255, 106, 0, 0.45);
  transform: translateY(-1px);
}
.form-group label { transition: color 0.3s ease; }
.form-group:focus-within label { color: #C2410C; }

/* SSS (details) */
.sd-faq details summary { transition: color 0.3s ease; }
.sd-faq details summary:hover { color: #FF6A00; }
.sd-faq details > :not(summary) { overflow: hidden; }

/* Filtre butonları */
.filter-btn { transition: transform 0.3s var(--mo-ease), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.filter-btn:hover { transform: translateY(-2px); }

/* ---------- Hareketi azalt / düzenleyici modu ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-progress, .mo-deco { display: none; }
  .mo-mag { translate: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.mo-off .mo-progress, .mo-off .mo-deco { display: none; }

/* JS kapalıysa eski .reveal öğeleri de görünür kalsın (içerik asla gizli kalmaz) */
html:not(.mo-js) .reveal, html:not(.mo-js) .reveal-left, html:not(.mo-js) .reveal-right, html:not(.mo-js) .reveal-scale { opacity: 1; transform: none; }