/* motion.css — SAF SU Hareket & Etkileşim Katmanı
   - Motion token'ları (süre / eğri)
   - Scroll ilerleme çubuğu, header scroll durumları, yukarı çık butonu
   - Hero scroll ipucu, kelime maskeleri, kart ışık efekti
   - Erişilebilirlik: focus-visible, prefers-reduced-motion
   Not: Gizli başlangıç durumları sadece JS (GSAP) yüklendiğinde uygulanır (progressive enhancement).
*/

:root {
  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-slow: 600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--color-primary-500, #3D93E0);
}

/* ---------- FOUC Koruması (Hero girişi) ---------- */
html.motion-pending .hero-content-panel,
html.motion-pending .hero-scroll-cue {
  opacity: 0;
}

/* ---------- Erişilebilir Odak Halkası ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.form-field:focus-within .form-label {
  color: var(--color-primary-600, #1C7ED6);
  transition: color var(--motion-fast) ease;
}

/* ---------- Scroll İlerleme Çubuğu ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}

.scroll-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-primary-500, #3D93E0) 0%, var(--color-secondary-400, #5AD3C7) 100%);
  box-shadow: 0 0 12px rgba(27, 120, 204, 0.55);
}

/* ---------- Header Scroll Durumları ---------- */
site-header .site-header {
  transition: transform 0.5s var(--ease-out-expo), background 0.3s ease, box-shadow 0.3s ease, margin 0.3s ease;
  will-change: transform;
}

site-header .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 40px -10px rgba(10, 42, 67, 0.28);
}

site-header .site-header.is-hidden {
  transform: translateY(calc(-100% - 24px));
}

/* Aktif bölüm göstergesi (scroll-spy) */
site-header .nav-link.is-current {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary-600, #1C7ED6) 0%, var(--color-primary-700, #1668B3) 100%);
  box-shadow: 0 4px 14px -2px rgba(28, 126, 214, 0.3);
}

site-header .mobile-nav-drawer.is-open .mobile-nav-link {
  animation: navItemIn 0.4s var(--ease-out-expo) both;
}

site-header .mobile-nav-drawer.is-open .mobile-nav-link:nth-child(2) { animation-delay: 40ms; }
site-header .mobile-nav-drawer.is-open .mobile-nav-link:nth-child(3) { animation-delay: 80ms; }
site-header .mobile-nav-drawer.is-open .mobile-nav-link:nth-child(4) { animation-delay: 120ms; }
site-header .mobile-nav-drawer.is-open .mobile-nav-link:nth-child(5) { animation-delay: 160ms; }
site-header .mobile-nav-drawer.is-open .mobile-nav-link:nth-child(6) { animation-delay: 200ms; }

@keyframes navItemIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Hero: Kelime Maskeleri ---------- */
.hero-title .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.hero-title .hw-i {
  display: inline-block;
  will-change: transform;
}

/* ---------- Hero: Scroll İpucu ---------- */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(230, 241, 250, 0.85);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color var(--motion-fast) ease;
}

.hero-scroll-cue:hover {
  color: #FFFFFF;
}

.hero-scroll-cue.is-gone {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity var(--motion-base) ease;
}

/* Sabit header altında kalmaması için çapa ofseti */
section[id],
footer[id] {
  scroll-margin-top: 88px;
}

/* Teklif başarı kutusu girişi */
#inlineWizardSuccessBox:not([hidden]) {
  animation: toastIn 0.55s var(--ease-out-expo) both;
}

.hero-scroll-cue__mouse {
  width: 24px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 14px;
  position: relative;
}

.hero-scroll-cue__mouse::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--color-secondary-400, #5AD3C7);
  animation: scrollWheel 1.8s var(--ease-in-out-soft) infinite;
}

@keyframes scrollWheel {
  0% { opacity: 0; transform: translateY(-2px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 640px), (max-height: 680px) {
  .hero-scroll-cue {
    display: none;
  }
}

/* Hero buton ok etkileşimi */
.btn svg {
  transition: transform var(--motion-base) var(--ease-out-expo);
}

.btn:hover svg {
  transform: translateX(4px);
}

/* ---------- Ürün Kartı: İmleç Işık Efekti ---------- */
@media (hover: hover) and (pointer: fine) {
  .product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-base) ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(27, 120, 204, 0.10), transparent 45%);
    z-index: 1;
  }

  .product-card:hover::after {
    opacity: 1;
  }
}

.product-card > * {
  position: relative;
  z-index: 2;
}

/* ---------- Neler Yapıyoruz: İkonlar & İstatistik ---------- */
.value-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 4px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: var(--color-primary-600, #1C7ED6);
  background: linear-gradient(145deg, var(--color-primary-50, #F4F8FA) 0%, var(--color-primary-100, #E7F1FB) 100%);
  border: 1px solid var(--color-primary-200, #C5DEF5);
  box-shadow: 0 10px 24px -10px rgba(28, 126, 214, 0.35);
  transition: transform var(--motion-base) var(--ease-out-expo), background var(--motion-base) ease, color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.value-icon svg {
  width: 28px;
  height: 28px;
}

.value-card {
  padding: 28px 22px 26px;
  border-radius: var(--radius-lg, 20px);
  border: 1px solid transparent;
  transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-out-expo), background var(--motion-base) ease;
}

.value-card:hover {
  background: #FFFFFF;
  border-color: var(--color-neutral-200, #DCE5EB);
  box-shadow: 0 20px 40px -18px rgba(10, 42, 67, 0.22);
  transform: translateY(-4px);
}

.value-card:hover .value-icon {
  transform: translateY(-3px) rotate(-4deg);
  color: #FFFFFF;
  background: linear-gradient(145deg, var(--color-primary-500, #3D93E0) 0%, var(--color-primary-700, #1668B3) 100%);
  box-shadow: 0 14px 28px -10px rgba(28, 126, 214, 0.55);
}

.values-divider {
  transform-origin: 50% 50%;
}

.values-stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: transparent;
  box-shadow: none;
  border-top: 1px solid var(--color-neutral-200, #DCE5EB);
  border-bottom: 1px solid var(--color-neutral-200, #DCE5EB);
  position: relative;
}

.values-stat {
  position: relative;
  padding: 30px 24px;
  text-align: center;
  color: var(--color-neutral-900, #0F1B24);
}

.values-stat + .values-stat {
  border-left: 1px solid var(--color-neutral-200, #DCE5EB);
}

.values-stat__num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 2vw + 1.2rem, 2.75rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-600, #1C7ED6);
}

.values-stat__num small {
  font-size: 0.5em;
  font-weight: 800;
  color: var(--color-secondary-500, #2EC4B6);
  margin-left: 2px;
}

.values-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-neutral-600, #475569);
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .values-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .values-stat:nth-child(3) {
    border-left: none;
  }

  .values-stat:nth-child(n + 3) {
    border-top: 1px solid var(--color-neutral-200, #DCE5EB);
  }
}

@media (max-width: 480px) {
  .values-stats {
    margin-top: 40px;
  }

  .values-stat {
    padding: 22px 14px;
  }
}

/* ---------- SSS Akordeon Yumuşak Açılış ---------- */
.faq-collapse {
  overflow: hidden;
}

/* ---------- Toast Girişi ---------- */
.toast-banner:not([hidden]) {
  animation: toastIn 0.5s var(--ease-out-expo) both;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ---------- Yukarı Çık Butonu ---------- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, var(--color-primary-600, #1C7ED6) 0%, var(--color-primary-800, #12456F) 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(10, 42, 67, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-out-expo), visibility var(--motion-base);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover {
  transform: translateY(-3px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

body:has(.toast-banner:not([hidden])) .back-to-top {
  bottom: 92px;
}

/* ---------- Hareket Azaltma Tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html.motion-pending .hero-content-panel,
  html.motion-pending .hero-scroll-cue {
    opacity: 1;
  }
}