/* ==========================================================================
   Temizlik Express — Anasayfa Motion Katmanı  (home-v3-motion.css)
   --------------------------------------------------------------------------
   home-v3.css'in ÜSTÜNE additive. Sadece hareket + atmosfer ekler; layout,
   renk, tipografi DEĞİŞMEZ. Tüm renkler mevcut :root token'larından gelir.
   Bütün dinamik efektler `html.te-motion` altında → reduced-motion'da veya JS
   hata verirse sınıf hiç eklenmez, sayfa birebir eski (statik + içerik görünür).
   Geri almak için: bu <link>'i + head gate script'i + body-sonu motion script'i sil.
   ========================================================================== */

/* 1) STAGGERED KART REVEAL — grid çocukları blok yerine sırayla süzülür.
   Tek kaynak: grid wrapper'ları blade HTML'de `.te-stagger` ile işaretli (JS de aynı
   sınıfı gözler). Gate `html.te-motion` head'de ilk boyamadan önce eklenir → flash yok. */
html.te-motion .te-stagger > *{
  opacity:0;
  transform:translateY(26px) scale(.985);
  transition:opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 68ms);
}
html.te-motion .te-in > *{opacity:1;transform:none}

/* 2) HERO ATMOSFER — yumuşak yüzen gradient orb'lar (derinlik/canlılık).
   .te-orbs JS ile hero'ya eklenir, içerik z-index:2 önde kalır. */
.te-orbs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.te-orbs span{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;will-change:transform}
.te-orbs span:nth-child(1){width:360px;height:360px;top:-70px;right:6%;
  background:radial-gradient(circle at 30% 30%, rgba(56,189,248,.55), transparent 70%);
  animation:teFloatA 17s ease-in-out infinite}
.te-orbs span:nth-child(2){width:300px;height:300px;bottom:-50px;left:0%;
  background:radial-gradient(circle at 40% 40%, rgba(6,182,212,.40), transparent 70%);
  animation:teFloatB 21s ease-in-out infinite}
@keyframes teFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-34px,36px) scale(1.08)}}
@keyframes teFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-32px) scale(1.12)}}

/* 3) SCROLL İLERLEME ÇUBUĞU — üstte ince gradient (sayfanın "canlı" olduğunu gösterir) */
.te-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,var(--sky),var(--cyan),var(--sky-light));
  box-shadow:0 1px 8px rgba(2,132,199,.45)}

/* 4) BİRİNCİL CTA PARILTISI — hover'da diyagonal shine sweep */
html.te-motion .btn-list,
html.te-motion .rg-all,
html.te-motion .nav-btn.solid{position:relative;overflow:hidden}
html.te-motion .btn-list::after,
html.te-motion .rg-all::after,
html.te-motion .nav-btn.solid::after{
  content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg)}
html.te-motion .btn-list:hover::after,
html.te-motion .rg-all:hover::after,
html.te-motion .nav-btn.solid:hover::after{animation:teSheen .75s ease}
@keyframes teSheen{to{left:150%}}

/* 5) SECTION KICKER — reveal'de soldan çizilen alt-çizgi (editorial vurgu) */
html.te-motion .sec-head .kicker{position:relative;display:inline-block;padding-bottom:8px}
html.te-motion .sec-head .kicker::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:34px;
  border-radius:2px;background:linear-gradient(90deg,var(--sky),var(--cyan));
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.7,.2,1) .18s}
html.te-motion .section.in .sec-head .kicker::after{transform:scaleX(1)}

/* 6) PARTNER (İŞ ORTAĞI) BÖLÜMÜ — yavaş kayan gradient, dikkat çeker */
html.te-motion .partner{background-size:180% 180%;animation:teGradient 15s ease infinite}
@keyframes teGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* 7) ÖNE ÇIKAN ROZET — yumuşak nabız halesi */
html.te-motion .scard.feat .badge-feat{animation:teGlow 2.8s ease-in-out infinite}
@keyframes teGlow{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}50%{box-shadow:0 0 0 6px rgba(56,189,248,.22)}}

/* 8) HERO BAŞLIK VURGUSU — "çok kolay!" altı yüklenişte çizilir */
html.te-motion .hero-title .hl::after{transform:scaleX(0);transform-origin:left;
  animation:teDrawUnderline .75s cubic-bezier(.2,.7,.2,1) .55s forwards}
@keyframes teDrawUnderline{to{transform:scaleX(1)}}

/* NOT: reduced-motion guard'ı GATE'in kendisi. Head script `html.te-motion`'ı yalnızca
   reduced-motion KAPALIYKEN ekler; tüm efektler bu sınıfa bağlı → reduced-motion'da hiçbiri
   uygulanmaz, orb/progress JS de kurulmaz. Ayrı bir @media(reduce) bloğu gereksizdi. */