.logo-sayac {
  display: none;
  width: 100%;
  height: auto;
}

:root[data-renk] .header-main .header-logo.sayac-hazir > img {
  display: none;
}

:root[data-renk="c"] .header-main .header-logo .logo-sayac--c {
  display: block;
}

.logo-sayac .serit {
  transform-box: view-box;
}

.logo-sayac.oynuyor .serit {
  animation: logoTambur 1.4s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--gecikme);
}

@keyframes logoTambur {
  from {
    transform: translateY(var(--bas));
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-sayac.oynuyor .serit {
    animation: none;
  }
}