/* Elle eklenen ek stiller (Tailwind derlemesinin dışında) buraya yazılabilir. */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero: hub visual */
.hub-orbit {
  animation: hub-spin 24s linear infinite;
}
.hub-orbit > div {
  animation: hub-spin-reverse 24s linear infinite;
}
@keyframes hub-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes hub-spin-reverse {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Hero: code visual */
.code-line {
  width: 0;
  animation: code-line-grow 0.5s ease forwards;
}
@keyframes code-line-grow {
  to { width: var(--w); }
}

/* Hero: chart visual */
.chart-bar {
  height: 0;
  animation: chart-bar-grow 0.8s ease-out forwards;
}
@keyframes chart-bar-grow {
  to { height: var(--h); }
}

/* Hero: radar visual */
.radar-ping {
  width: 60px;
  height: 60px;
  animation: radar-ping 3s ease-out infinite;
}
@keyframes radar-ping {
  0% { width: 60px; height: 60px; opacity: 0.6; }
  100% { width: 320px; height: 320px; opacity: 0; }
}

/* Proje/blog detay galeri slider crossfade */
[data-media-slide],
[data-slide] {
  transition: opacity 0.4s ease;
}


/* Hero slider: slayt geçişlerinde dikey hareketi engelle */
#heroSlider {
  width: 100%;
  align-items: center;
}

#heroSlider > [data-slide] {
  width: 100%;
}

#heroSlider > [data-fixed-hero-visual] {
  align-self: center;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  #heroSlider {
    min-height: 36rem;
  }

  #heroSlider > [data-slide]:not(.hidden) {
    display: flex;
    min-height: 36rem;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 3.5rem;
  }

  #heroSlider > [data-slide] h1 {
    min-height: 5em;
  }

  #heroSlider > [data-slide] p {
    min-height: 3.5rem;
  }
}

@media (max-width: 1023px) {
  #heroSlider > [data-slide]:not(.hidden) {
    display: flex;
    min-height: 30rem;
    flex-direction: column;
    justify-content: center;
  }
}


/* Hero alanını header'a yaklaştır ve ekrana sığdır */
@media (min-width: 1024px) {
  #heroSection {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  #heroSlider {
    min-height: 32rem;
  }

  #heroSlider > [data-slide]:not(.hidden) {
    min-height: 32rem;
    padding-top: 0;
  }
}