/* =========================================================
   Haliç Çevre – animations.css  (v5 Premium)
   Kontrollü, akıcı, premium animasyon sistemi.
   ========================================================= */

/* ══════════════════════════════════════════════════════════
   GENEL SCROLL ANİMASYONLARI
   ══════════════════════════════════════════════════════════ */

/* Fade-up — tüm section'larda genel */
.animate-fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s var(--ease-enter), transform .65s var(--ease-enter);
}
.animate-fade-up.is-visible { opacity: 1; transform: none; }

/* Zoom-in — kaynak kartları gibi */
.animate-zoom-in {
  opacity: 0; transform: scale(.93);
  transition: opacity .52s ease, transform .52s var(--ease-spring);
}
.animate-zoom-in.is-visible { opacity: 1; transform: scale(1); }

/* ══════════════════════════════════════════════════════════
   HERO — Güçlü Sinematik Giriş Sekansı (v6)
   ══════════════════════════════════════════════════════════ */

/* Temel giriş keyframes */
@keyframes hero-from-left {
  from { opacity: 0; transform: translateX(-60px) skewX(2deg); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes hero-from-right {
  from { opacity: 0; transform: translateX(60px) skewX(-2deg); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes hero-from-bottom {
  from { opacity: 0; transform: translateY(32px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes hero-reveal-mask {
  from { opacity: 0; transform: translateY(20px) scale(.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes badge-pop {
  from { opacity: 0; transform: scale(.5) translateY(10px) rotate(-5deg); }
  60%  { transform: scale(1.12) rotate(1deg); }
  to   { opacity: 1; transform: none; }
}

/* Hero arka plan aurora efekti */
@keyframes hero-aurora-1 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .18; }
  33%     { transform: translate(40px,-30px) scale(1.15); opacity: .28; }
  66%     { transform: translate(-20px,20px) scale(.92); opacity: .12; }
}
@keyframes hero-aurora-2 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .12; }
  50%     { transform: translate(-50px,40px) scale(1.22); opacity: .22; }
}

/* Giriş timing — staggered reveal */
.hero__badges  { animation: hero-from-bottom .55s var(--ease-enter) .05s both; }
.hero__title   { animation: hero-from-left  .9s var(--ease-enter) .15s both; }
.hero__subtitle{ animation: hero-from-bottom .65s var(--ease-enter) .38s both; }
.hero__actions { animation: hero-from-bottom .6s var(--ease-enter) .55s both; }
.hero__stats   { animation: hero-from-bottom .6s var(--ease-enter) .72s both; }
.hero__visual  { animation: hero-from-right  1s var(--ease-enter) .12s both; }

.hero__badge:nth-child(1) { animation: badge-pop .5s var(--ease-spring) .32s both; }
.hero__badge:nth-child(2) { animation: badge-pop .5s var(--ease-spring) .48s both; }
.hero__badge:nth-child(3) { animation: badge-pop .5s var(--ease-spring) .64s both; }

/* Floating kartlar güçlü giriş */
.hero__fc--1 { animation: hero-reveal-mask .7s var(--ease-spring) .9s both; }
.hero__fc--2 { animation: hero-reveal-mask .7s var(--ease-spring) 1.15s both; }
.hero__fc--3 { animation: hero-reveal-mask .7s var(--ease-spring) 1.35s both; }

/* Hero arka plan shape aurora */
.hero__shape--1 { animation: hero-aurora-1 14s ease-in-out infinite; }
.hero__shape--2 { animation: hero-aurora-2 11s ease-in-out 2s infinite; }

/* Parçacık float — daha dramatik */
@keyframes particle-float {
  0%,100% { transform: translateY(0) rotate(0deg); opacity: .45; }
  25%     { transform: translateY(-28px) rotate(90deg); opacity: .85; }
  75%     { transform: translateY(-12px) rotate(270deg); opacity: .6; }
}
@keyframes particle-spin {
  0%   { transform: translateY(0) scale(1); opacity: .5; }
  50%  { transform: translateY(-22px) scale(1.3); opacity: .9; }
  100% { transform: translateY(0) scale(1); opacity: .5; }
}
.hero__particle:nth-child(1) { animation: particle-float 7s ease-in-out infinite; }
.hero__particle:nth-child(2) { animation: particle-spin 9s ease-in-out 1.2s infinite; }
.hero__particle:nth-child(3) { animation: particle-float 6s ease-in-out 2.5s infinite reverse; }
.hero__particle:nth-child(4) { animation: particle-spin 10s ease-in-out .6s infinite reverse; }

/* Çizgi drift — daha belirgin */
@keyframes line-drift {
  0%,100% { opacity: .35; transform: translateY(0) scaleX(1); }
  50%     { opacity: .75; transform: translateY(-20px) scaleX(1.08); }
}
.hero__line--1 { animation: line-drift 7s ease-in-out infinite; }
.hero__line--2 { animation: line-drift 9s ease-in-out 1.5s infinite reverse; }
.hero__line--3 { animation: line-drift 11s ease-in-out 3s infinite; }

/* Orbit track döner */
@keyframes orbit-rotate {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.hero__orbit-track { animation: orbit-rotate 20s linear infinite; }

/* Halka nefes alma efekti */
@keyframes ring-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .4; }
  50%     { transform: translate(-50%,-50%) scale(1.06); opacity: .65; }
}
@keyframes ring-breathe-slow {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .25; }
  50%     { transform: translate(-50%,-50%) scale(1.04); opacity: .45; }
}
.hero__ring--1 { animation: ring-breathe 4s ease-in-out infinite; }
.hero__ring--2 { animation: ring-breathe 6s ease-in-out 1s infinite; }
.hero__ring--3 { animation: ring-breathe-slow 8s ease-in-out 2s infinite; }

/* Merkez ikon pulse */
@keyframes center-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(12,77,162,.4), 0 0 0 0 rgba(15,174,106,.2); }
  50%     { box-shadow: 0 0 0 16px rgba(12,77,162,.0), 0 0 0 32px rgba(15,174,106,.0); }
}
.hero__center { animation: center-pulse 3s ease-in-out infinite; }

/* İstatistik sayı — güçlü giriş */
@keyframes num-reveal {
  from { opacity: 0; transform: translateY(16px) scale(.75) skewY(3deg); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero__stat:nth-child(1) .hero__stat-num { animation: num-reveal .5s var(--ease-spring) .8s both; }
.hero__stat:nth-child(2) .hero__stat-num { animation: num-reveal .5s var(--ease-spring) .95s both; }
.hero__stat:nth-child(3) .hero__stat-num { animation: num-reveal .5s var(--ease-spring) 1.1s both; }

/* İstatistik ayraç giriş */
@keyframes stat-divider-grow {
  from { height: 0; opacity: 0; }
  to   { height: 36px; opacity: 1; }
}
.hero__stat-divider { animation: stat-divider-grow .4s ease .88s both; }

/* Gradient text sweep */
@keyframes title-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.hero__title .gradient-text {
  background-size: 300% auto;
  animation: title-shimmer 5s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   HIZLI AKSİYONLAR — Yukarıdan stagger
   ══════════════════════════════════════════════════════════ */
.animate-qa {
  opacity: 0; transform: translateY(-22px);
  transition: opacity .42s var(--ease-enter), transform .45s var(--ease-enter);
}
.animate-qa.is-visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   KISAYOLLAR — Scale pop
   ══════════════════════════════════════════════════════════ */
.animate-sc {
  opacity: 0; transform: scale(.88) translateY(12px);
  transition: opacity .4s ease, transform .45s var(--ease-spring);
}
.animate-sc.is-visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   SPLIT HEADER — Karşılıklı giriş
   ══════════════════════════════════════════════════════════ */
.animate-split-header .section-header__left {
  opacity: 0; transform: translateX(-28px);
  transition: opacity .65s var(--ease-enter) .08s, transform .65s var(--ease-enter) .08s;
}
.animate-split-header .section-header__right {
  opacity: 0; transform: translateX(28px);
  transition: opacity .65s var(--ease-enter) .18s, transform .65s var(--ease-enter) .18s;
}
.animate-split-header .section-header__left {
  display: flex; flex-direction: column; align-items: flex-start; gap: .625rem;
}
.animate-split-header.is-visible .section-header__left,
.animate-split-header.is-visible .section-header__right { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   ÇEVRE HİZMET KARTLARI — GPU hızlandırmalı, jank yok
   ══════════════════════════════════════════════════════════ */
/* Başlangıç durumu: transform ve opacity GPU katmanında */
.service-card--anim-from-left,
.service-card--anim-from-right,
.service-card--anim-from-bottom {
  opacity: 0;
  will-change: transform, opacity;
}
.service-card--anim-from-left   { transform: translate3d(-40px,0,0); }
.service-card--anim-from-right  { transform: translate3d(40px,0,0); }
.service-card--anim-from-bottom { transform: translate3d(0,40px,0); }

/* Görünür olunca transition ile değil animation ile — daha güvenilir */
.service-card--anim-from-left.is-visible,
.service-card--anim-from-right.is-visible,
.service-card--anim-from-bottom.is-visible {
  opacity: 1; transform: translate3d(0,0,0);
  transition: opacity .5s var(--ease-enter) var(--delay, 0s),
              transform .55s var(--ease-enter) var(--delay, 0s);
  will-change: auto;
}

/* ══════════════════════════════════════════════════════════
   İŞ HİJYENİ KARTLARI — 3D flip (GPU hızlandırmalı)
   ══════════════════════════════════════════════════════════ */
.service-card--rotate-in {
  opacity: 0;
  transform: perspective(800px) rotateX(18deg) translate3d(0,20px,0) scale(.96);
  will-change: transform, opacity;
}
.service-card--rotate-in.is-visible {
  opacity: 1;
  transform: perspective(800px) rotateX(0) translate3d(0,0,0) scale(1);
  transition: opacity .55s ease var(--delay, 0s),
              transform .6s var(--ease-enter) var(--delay, 0s);
  will-change: auto;
}

/* ══════════════════════════════════════════════════════════
   MARUZIYET CHIPLERİ — Diagonal cascade
   ══════════════════════════════════════════════════════════ */
.exposure-chip {
  opacity: 0; transform: scale(.72) translateY(14px);
  transition: opacity .38s ease, transform .42s var(--ease-spring);
}
.exposure-chip.chip-visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   KAYNAK KARTLARI — Çift/tek varyasyon
   ══════════════════════════════════════════════════════════ */
.resource-card {
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s ease, transform .58s var(--ease-enter);
}
.resource-card.is-visible { opacity: 1; transform: none; }
/* Tek index — zoom varyantı */
.resource-card[style*="--stagger: 1"],
.resource-card[style*="--stagger: 3"] {
  transform: scale(.9);
  transition: opacity .5s ease, transform .5s var(--ease-spring);
}
.resource-card[style*="--stagger: 1"].is-visible,
.resource-card[style*="--stagger: 3"].is-visible { transform: scale(1); }

/* ══════════════════════════════════════════════════════════
   FOOTER SÜTUNLARI
   ══════════════════════════════════════════════════════════ */
.footer__col {
  opacity: 0; transform: translateY(18px);
  transition: opacity .52s ease, transform .55s var(--ease-enter);
}
.footer__col.is-visible { opacity: 1; transform: none; }
.footer__col:nth-child(1) { transition-delay: .0s; }
.footer__col:nth-child(2) { transition-delay: .09s; }
.footer__col:nth-child(3) { transition-delay: .18s; }
.footer__col:nth-child(4) { transition-delay: .27s; }

/* ══════════════════════════════════════════════════════════
   STATS BANNER
   ══════════════════════════════════════════════════════════ */
.animate-stats {
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .48s ease, transform .52s var(--ease-spring);
}
.animate-stats.is-visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   AKREDİTASYON BAND
   ══════════════════════════════════════════════════════════ */
.animate-accred {
  opacity: 0; transform: translateX(-22px);
  transition: opacity .48s ease, transform .52s var(--ease-enter);
}
.animate-accred.is-visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   HOVER MICRO-INTERACTIONS
   ══════════════════════════════════════════════════════════ */

/* Servis kart ikon bounce */
@keyframes icon-bounce {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(1.22) rotate(-10deg); }
  65%  { transform: scale(1.12) rotate(5deg); }
  100% { transform: scale(1.1) rotate(-3deg); }
}
.service-card:hover .service-card__icon { animation: icon-bounce .42s var(--ease-spring) forwards; }
.shortcut-tile:hover .shortcut-tile__icon { animation: icon-bounce .4s var(--ease-spring) forwards; }
.quick-action-card:hover .quick-action-card__icon { animation: icon-bounce .4s var(--ease-spring) forwards; }

/* ══════════════════════════════════════════════════════════
   BUTON RİPPLE + 3D TILT (JS ile desteklenir)
   ══════════════════════════════════════════════════════════ */
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transform: scale(0); animation: ripple-anim .65s ease-out;
  pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ══════════════════════════════════════════════════════════
   NAV UNDERLINE
   ══════════════════════════════════════════════════════════ */
/* Zaten layout.css'de tanımlı — buradan kaldırıldı çakışma önlenir */

/* ══════════════════════════════════════════════════════════
   CTA BAND — Animasyonlu arka plan
   ══════════════════════════════════════════════════════════ */
@keyframes cta-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cta-band {
  background: linear-gradient(-50deg, #070e1d, #0a1929, #0d2a4e, #0b3573, rgba(23,166,91,.08), #0a1929);
  background-size: 400% 400%;
  animation: cta-bg-shift 14s ease infinite;
}
@keyframes cta-shape-1 {
  0%,100% { transform: scale(1) rotate(0); }
  50%     { transform: scale(1.18) rotate(12deg); }
}
@keyframes cta-shape-2 {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.25) translateY(-20px); }
}
.cta-band__shape--1 { animation: cta-shape-1 14s ease-in-out infinite; }
.cta-band__shape--2 { animation: cta-shape-2 11s ease-in-out 2s infinite; }

/* ══════════════════════════════════════════════════════════
   GRADIENT TEXT
   ══════════════════════════════════════════════════════════ */
@keyframes gradient-sweep {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: gradient-sweep 6s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   SAYFA GİRİŞ
   ══════════════════════════════════════════════════════════ */
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-enter .35s ease; }

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-fade-up, .animate-zoom-in, .animate-qa, .animate-sc, .animate-stats,
  .animate-accred, .service-card--anim-from-left, .service-card--anim-from-right,
  .service-card--anim-from-bottom, .service-card--rotate-in,
  .resource-card, .exposure-chip, .footer__col,
  .animate-split-header .section-header__left,
  .animate-split-header .section-header__right {
    opacity: 1 !important; transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SECTION'A ÖZGÜ ANİMASYONLAR — Her bölüm farklı giriş
   ══════════════════════════════════════════════════════════ */

/* ── HIZLI AKSİYONLAR: Yukarıdan cascade ── */
@keyframes qa-drop {
  from { opacity: 0; transform: translateY(-30px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.animate-qa.is-visible {
  animation: qa-drop .5s var(--ease-spring) var(--delay, 0s) both;
}
/* Override base */
.animate-qa { opacity: 0; transform: translateY(-30px) scale(.9); transition: none; }

/* ── KISAYOLLAR: Scale + rotate giriş ── */
@keyframes sc-pop {
  from { opacity: 0; transform: scale(.72) rotate(-6deg); }
  60%  { transform: scale(1.06) rotate(1deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.animate-sc.is-visible {
  animation: sc-pop .55s var(--ease-spring) var(--delay, 0s) both;
}
.animate-sc { opacity: 0; transform: scale(.72) rotate(-6deg); transition: none; }

/* ── ÇEVRE HİZMETLERİ: Kayma animasyonları — pages.css'deki GPU transition ile yönetilir ── */
/* Svc keyframe'ler footer animasyonu için burada kalıyor */
@keyframes svc-from-bottom {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ── İŞ HİJYENİ: 3D perspektif — pages.css'deki GPU transition ile yönetilir ── */

/* ── MARUZIYET: Diagonal cascade ── */
@keyframes chip-diagonal {
  from { opacity: 0; transform: translate(-12px, 12px) scale(.8); }
  to   { opacity: 1; transform: none; }
}
.exposure-chip.chip-visible {
  animation: chip-diagonal .4s var(--ease-spring) var(--delay, 0s) both;
}
.exposure-chip { opacity: 0; transition: none; }

/* ── KAYNAKLAR: Aşağıdan zoom ── */
@keyframes res-zoom-up {
  from { opacity: 0; transform: translateY(30px) scale(.88); }
  to   { opacity: 1; transform: none; }
}
.resource-card.is-visible {
  animation: res-zoom-up .55s var(--ease-spring) var(--delay, 0s) both;
}
.resource-card { opacity: 0; transition: none; }

/* ── STATS: Sağdan soldan gelme çiftleri ── */
@keyframes stat-alt-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: none; }
}
@keyframes stat-alt-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: none; }
}
.animate-stats:nth-child(odd).is-visible  { animation: stat-alt-left  .52s var(--ease-enter) var(--delay, 0s) both; }
.animate-stats:nth-child(even).is-visible { animation: stat-alt-right .52s var(--ease-enter) var(--delay, 0s) both; }
.animate-stats { opacity: 0; transition: none; }

/* ── FOOTER: Aşağıdan stagger ── */
.footer__col.is-visible { animation: svc-from-bottom .55s var(--ease-enter) var(--delay, 0s) both; }
.footer__col { opacity: 0; transition: none; }

/* ── SECTION HEADER SPLIT: Daha güçlü ── */
@keyframes sh-left {
  from { opacity: 0; transform: translateX(-36px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes sh-right {
  from { opacity: 0; transform: translateX(36px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.animate-split-header.is-visible .section-header__left {
  animation: sh-left .65s var(--ease-enter) .05s both;
}
.animate-split-header.is-visible .section-header__right {
  animation: sh-right .65s var(--ease-enter) .18s both;
}
.animate-split-header .section-header__left,
.animate-split-header .section-header__right { opacity: 0; transition: none; }