/* ============================================================
   CHIEF HUB — Zapier-style bağlantı merkezi animasyonu
   chief-hub.html + chief-hub.css  →  hero veya entegrasyon bölümüne ekle
   ============================================================ */

/* ============================================================ WRAPPER */
.chief-hub-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* Sayfa yüklenince tüm SVG soluktan beliriyor */
  animation: hubFadeIn 0.6s ease both;
}

.chief-hub {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible; /* drop-shadow filter node'ları kesmemeli */
}

/* ============================================================ ÇIZGI ANIMASYONU
   Her <line> elementi stroke-dasharray tekniğiyle çiziliyor.
   Uzunluk: E-posta ~132px, diğerleri ~145-185px. Hepsine güvenli 300px veriyoruz.
   CSS animation-delay ile sıralı açılış. */
.hub-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: lineAppear 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

#l0 { animation-delay: 0.05s; }
#l1 { animation-delay: 0.15s; }
#l2 { animation-delay: 0.25s; }
#l3 { animation-delay: 0.35s; }
#l4 { animation-delay: 0.45s; }
#l5 { animation-delay: 0.55s; }
#l6 { animation-delay: 0.65s; }
#l7 { animation-delay: 0.75s; }
#l8 { animation-delay: 0.85s; }

@keyframes lineAppear {
  to { stroke-dashoffset: 0; }
}

/* ============================================================ NODE ANIMASYONU
   Her entegrasyon node'u scale 0 → 1 geliyor, sonra sürekli pulse loop */
/* SVG <g> elementlerde CSS transform inline translate'i eziyor — sadece opacity kullan */
.hub-node {
  animation: nodeAppear 0.5s ease both;
}

@keyframes nodeAppear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================ MERKEZ BREATHING */
.hub-center-ring {
  transform-origin: 300px 300px;
  animation: hubPulse 3.6s ease-in-out infinite;
}

.hub-center-halo {
  transform-origin: 300px 300px;
  animation: haloPulse 3.6s ease-in-out infinite;
}

@keyframes hubPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.92; }
}

@keyframes haloPulse {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%       { transform: scale(1.18); opacity: 0.4; }
}

/* ============================================================ MERKEZ ETIKET */
.hub-center-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: #847C6E;
}

/* ============================================================ NODE IKON + ETIKET */
.node-icon {
  font-size: 32px;
  dominant-baseline: middle;
  /* emoji rendering */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.node-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: #4A453E;
  letter-spacing: 0.02em;
}

/* ============================================================ TÜME FADING */
@keyframes hubFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ============================================================ ARKA PLAN HALESİ
   Sürekli dönen, soluk breathing ring */
.hub-glow-ring {
  animation: glowRingPulse 4s ease-in-out infinite;
  transform-origin: 300px 300px;
}

@keyframes glowRingPulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%       { transform: scale(1.04); opacity: 1;   }
}

/* ============================================================ RESPONSIVE */

/* 1200px+ → tam boyut, max-width zaten 600px */

/* 768-1199px → 480px */
@media (max-width: 1199px) {
  .chief-hub-wrap {
    max-width: 480px;
  }
}

/* <768px → 340px + etiketleri gizle */
@media (max-width: 767px) {
  .chief-hub-wrap {
    max-width: 340px;
  }
  /* SVG içindeki .hide-xs text elementleri için visibility:hidden kullanılır
     (SVG'de display:none bazı tarayıcılarda animasyonu kesiyor) */
  .chief-hub .hide-xs {
    visibility: hidden;
  }
}

/* ============================================================ HERO KULLANIMI
   cc-stage yerine hub kullanıldığında sağ kolonu düzenle */
.hero-grid .chief-hub-wrap {
  max-width: 520px;
  justify-self: end;
}

@media (max-width: 1024px) {
  .hero-grid .chief-hub-wrap {
    max-width: 420px;
    margin: 2rem auto 0;
  }
}

@media (max-width: 767px) {
  .hero-grid .chief-hub-wrap {
    max-width: 360px;
  }
}

/* ============================================================ ENTEGRASYON BÖLÜMÜ KULLANIMI
   Kart grid üstünde büyük vizüel olarak */
.integrations-hub-header {
  display: flex;
  justify-content: center;
  padding: 3rem 0 2rem;
}

.integrations-hub-header .chief-hub-wrap {
  max-width: 560px;
}

/* ============================================================ MINI HUB (entegrasyon bölümü üstü) */
.hub-mini-wrap {
  display: flex;
  justify-content: center;
  padding: 2.5rem 0 1.5rem;
}

.hub-mini-wrap .chief-hub-wrap {
  max-width: 400px;
}

@media (max-width: 767px) {
  .hub-mini-wrap .chief-hub-wrap {
    max-width: 280px;
  }
}