/* efekt1 class'ı ile çağırın ve aktif olsun. Sola -20px kaydırır ve yerine geri sonsuz döner. */

@keyframes solaKaydirVeGeriDon {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}

.efekt1 {
  animation: solaKaydirVeGeriDon 2s infinite ease-in-out;
}


/* efekt2 class'ı ile çağırın ve aktif olsun. 360 derece görseli sonsuz döndürür. */

@keyframes dondur360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.efekt2 {
	animation: dondur360 5s linear infinite;
	position: relative;
	overflow: hidden;
}


/* efekt3 class'ı ile çağırın ve aktif olsun. Yukarı -20px kaydırır ve yerine geri sonsuz döner. */

@keyframes yukariAsagiVeGeriDon {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.efekt3 {
  animation: yukariAsagiVeGeriDon 2s infinite ease-in-out;
}


/* Fade varyasyonları */

/* Yukarı doğru şeffaflığı azalarak belirir. */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp .5s ease-out forwards;
}

/* Başlık efektleri */

/* .baslik-efekti-1 Başlığın altında, soldan sağa doğru bir çizgi çıkar. Genişlik %80'dir */

.baslik-efekti-1:before {
    content: '';
    height: 2px;
    width: 0;
    background: transparent;
    position: absolute;
    bottom: -7px;
    transition: all .7s;
    border-radius: 10px;
    left: 0;
}

.baslik-efekti-1:hover:before {
    height: 2px;
    width: 80%;
    background: #3e3e3e;
}

.baslik-efekti-1
{
    position: relative;
}

/* Paket listesinde .paket-efekti class'ına sahip olan konteynerlerin sol tarafında bir efekt belirtir. */

.paket-efekti:before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    background: var( --e-global-color-7667bd6 ) !important;
    width: 8px !important;
    height: 15% !important;
    top: calc(50% - 5%) !important; 
    transition: all .5s !important;
    border-radius: 0 10px 10px 0 !important;
}

.paket-efekti:hover:before {
    height: 80% !important;
    top: calc(50% - 40%) !important; 
}