#effective_loader{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.5);
/*    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);*/
    backdrop-filter: blur(2px) saturate(180%);
    -webkit-backdrop-filter: blur(2px) saturate(180%);
    z-index: 3;
}
#effective_loader-main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -168px;
    cursor: pointer;
    z-index: 4;
}
#outer-circle {
    -webkit-box-shadow: 0 0 50px 10px #453D9B;
    -moz-box-shadow: 0 0 50px 10px #453D9B;
    box-shadow: 0 0 50px 10px #453D9B;
    border: 10px solid #ECEBFA;
    border-top-color:#746EBB;
    margin: 20% auto;
    text-align:center;
    background: -webkit-linear-gradient(top, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
    background: -moz-linear-gradient(top, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
    background: linear-gradient(to bottom, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
    width: 220px;
    height: 220px;

    -webkit-border-radius: 220px;
    -moz-border-radius: 220px;
    border-radius: 220px;

    -webkit-animation:turning_cw 5s infinite;
    -moz-animation:turning_cw 5s infinite;
    animation:turning_cw 5s infinite;
    position:relative;
    opacity: 0.7; }

#outer-circle:hover {
    -webkit-box-shadow: 0 0 100px 15px #453D9B;
    -moz-box-shadow: 0 0 100px 15px #453D9B;
    box-shadow: 0 0 100px 15px #453D9B; }

#inner-circle {
    border: 10px solid #ECEBFA;
    border-left-color:#746EBB;
    border-right-color:#746EBB;

    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);

    position:absolute;

    background: -webkit-linear-gradient(top, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
    background: -moz-linear-gradient(top, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
    background: linear-gradient(to bottom, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);

    margin: 10px;
    width: 180px;
    height: 180px;

    -webkit-border-radius: 180px;
    -moz-border-radius: 180px;
    border-radius: 180px;

    -webkit-animation:turning_acw 3s infinite;
    -moz-animation:turning_acw 3s infinite;
    animation:turning_acw 3s infinite; }

#center-circle {
    border: 10px solid #746EBB;
    border-bottom-color:#ECEBFA;
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    transform: rotate(360deg); 
    position:absolute;

    background: -webkit-linear-gradient(top, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
    background: -moz-linear-gradient(top, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
    background: linear-gradient(to bottom, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);

    margin: 10px;
    width: 140px;
    height: 140px;

    -webkit-border-radius: 140px;
    -moz-border-radius: 140px;
    border-radius: 140px;

    -webkit-animation:turning_cw 5s infinite;
    -moz-animation:turning_cw 5s infinite;
    animation:turning_cw 5s infinite; }

#effective_loader-content {
    position:absolute;
    top: 10px;
    left: 10px;
    width: 120px;
    height: 120px;
    -webkit-border-radius: 140px;
    -moz-border-radius: 140px;
    border-radius: 140px;
    background: #2E2A69; 
    text-align:center;
    line-height: 120px;
    font-size: 30px;
    color:#746EBB;
    text-shadow: 0 2px 2px #000;
    font-weight:bold; }

@-webkit-keyframes aura {
    0%{
        text-shadow: 0 2px 2px #000; }

    50%{
        text-shadow: 0 10px 10px #000;
        line-height: 190px; }

    100%{
        text-shadow: 0 2px 10px #000; }
}

@-webkit-keyframes turning_cw {
    0%{
        -webkit-transform: rotate(0deg); }
    100%{
        -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes turning_acw {
    0%{
        -webkit-transform: rotate(360deg); }
    100%{
        -webkit-transform: rotate(0deg); }
}

@-moz-keyframes aura {
    0%{
        text-shadow: 0 2px 2px #000; }

    50%{
        text-shadow: 0 10px 10px #000;
        line-height: 190px; }

    100%{
        text-shadow: 0 2px 10px #000; }
}

@-moz-keyframes turning_cw {
    0%{
        -moz-transform: rotate(0deg); }
    100%{
        -moz-transform: rotate(360deg); }
}

@-moz-keyframes turning_acw {
    0%{
        -moz-transform: rotate(360deg); }
    100%{
        -moz-transform: rotate(0deg); }
}

@keyframes aura {
    0%{
        text-shadow: 0 2px 2px #000; }

    50%{
        text-shadow: 0 10px 10px #000;
        line-height: 190px; }

    100%{
        text-shadow: 0 2px 10px #000; }
}

@keyframes turning_cw {
    0%{
        transform: rotate(0deg); }
    100%{
        transform: rotate(360deg); }
}

@keyframes turning_acw {
    0%{
        transform: rotate(360deg); }
    100%{
        transform: rotate(0deg); }
}

/* Spinner Loader Başlangıç */
.spinner_bounce {
    margin: 100px auto 0;
    width: auto;
    text-align: center;
}

.spinner_bounce > div {
    width: 18px;
    height: 18px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner_bounce .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner_bounce .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}
/* Spinner Loader Bitiş */

/* 3lü Pulse Animasyonu Başlangıç */
/* grow and fade animation 
for .circle rings */
@-webkit-keyframes fade {
    from{
        opacity:1;
        -webkit-transform:scale(1,1)translate(-50%,-50%);
    }
    to{
        opacity:0;
        -webkit-transform:scale(2,2)translate(-50%,-50%);
    }
}
@keyframes fade {
    from{
        opacity:1;
        transform:scale(1,1)translate(-50%,-50%);
    }
    to{
        opacity:0;
        transform:scale(2,2)translate(-50%,-50%);
    }
}

/* style circle starting point */
.loading-circles > .circle{
    position:absolute;
    -webkit-transform-origin:0 0;
    transform-origin:0 0; /* radiate from center */
    -webkit-transform:scale(1,1)translate(-50%,-50%);
    transform:scale(1,1)translate(-50%,-50%);
    -webkit-animation:fade 1s linear infinite;
    animation:fade 1s linear infinite;
    display:inline-block;
    height:45px;
    width:45px;
    border-radius:50%;
    background:#FD4B46;
    opacity:1;
}
/* Turn off animation for .hold */
.circle.hold{
    -webkit-animation:none;
}
/* Iterate sequntially animation-delay */
.circle.first + .circle{
    -webkit-animation-delay:.33s;
    animation-delay:.33s;
}
.circle.first + .circle + .circle{
    -webkit-animation-delay:.66s;
    animation-delay:.66s;
}
/* 3lü Pulse Animasyonu Bitiş */

/* Pulse Alternatif Başlangıç */
.pulse-alternate-black{
    animation: pulse-black 1.5s;
    /*animation-iteration-count: 2;*/
}
@keyframes pulse-black {
    0% {
        transform: scale(0.5);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(0.5);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}
/* Pulse Alternatif Bitiş */

/* Pulse Slowly Başlangıç */

/*
Browserlarda yapılan güncelleme ile;
Pulse animasyonları için belirlenen divin yükseklik ve genişliği box-shadow dan büyükse border-radius büyüdükçe iptal oluyor ve kareye dönüyor.
*/

.coloredPulse{
    width: auto;
    height: auto;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.coloredPulse:hover {
    background: #ff3333;
    -webkit-animation: KF_pulseFastest 0.5s 0.4s ease-out infinite;
    -moz-animation: KF_pulseFastest 0.5s 0.4s ease-out infinite;
    animation: KF_pulseFastest 0.5s 0.4s ease-out infinite;
}
.torchOrange {
    -webkit-animation: KF_torchOrange 1s 0s ease-out infinite;
    -moz-animation: KF_torchOrange 1s 0s ease-out infinite;
    animation: KF_torchOrange 1s 0s ease-out infinite;
}
.torchRed {
    -webkit-animation: KF_torchRed 1s 0s ease-out infinite;
    -moz-animation: KF_torchRed 1s 0s ease-out infinite;
    animation: KF_torchRed 1s 0s ease-out infinite;
}
.torchRed_fullScreen {
    -webkit-animation: KF_torchRed_fullScreen 1s 0s ease-out infinite;
    -moz-animation: KF_torchRed_fullScreen 1s 0s ease-out infinite;
    animation: KF_torchRed_fullScreen 1s 0s ease-out infinite;
}
.brightTurquoisePulse {
    -webkit-animation: KF_brightTurquoise 1s 0s ease-out infinite;
    -moz-animation: KF_brightTurquoise 1s 0s ease-out infinite;
    animation: KF_brightTurquoise 1s 0s ease-out infinite;
}
@-webkit-keyframes KF_torchRed {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    100% {
        box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px #1affb300, 0 0 0px 80px rgba(26, 255, 179, 0);
    }
}
@-moz-keyframes KF_torchRed {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    100% {
        box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px #1affb300, 0 0 0px 80px rgba(26, 255, 179, 0);
    }
}
@keyframes KF_torchRed {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    100% {
        box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px #1affb300, 0 0 0px 80px rgba(26, 255, 179, 0);
    }
}
@-webkit-keyframes KF_torchRed_fullScreen {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    100% {
        box-shadow: 0 0 8px 2366px rgba(26, 255, 179, 0), 0 0 0px 400px #1affb300, 0 0 0px 800px rgba(26, 255, 179, 0);
    }
}
@-moz-keyframes KF_torchRed_fullScreen {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    100% {
        box-shadow: 0 0 8px 2366px rgba(26, 255, 179, 0), 0 0 0px 400px #1affb300, 0 0 0px 800px rgba(26, 255, 179, 0);
    }
}
@keyframes KF_torchRed_fullScreen {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    100% {
        box-shadow: 0 0 8px 2366px rgba(26, 255, 179, 0), 0 0 0px 400px #1affb300, 0 0 0px 800px rgba(26, 255, 179, 0);
    }
}
@-webkit-keyframes KF_brightTurquoise {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
    }
}
@-moz-keyframes KF_brightTurquoise {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
    }
}
@keyframes KF_brightTurquoise {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
    }
}
@-webkit-keyframes KF_pulseFastest {
    from {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px #1affb300, 0 0 4px 41px rgba(255, 26, 26, 0);
    }
}
@-moz-keyframes KF_pulseFastest {
    from {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px #1affb300, 0 0 4px 41px rgba(255, 26, 26, 0);
    }
}
@keyframes KF_pulseFastest {
    from {
        box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px #1affb300, 0 0 4px 41px rgba(255, 26, 26, 0);
    }
}
@-webkit-keyframes KF_torchOrange {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #f0ad4e, 0 0 12px 10px #f0ad4e, 0 0 12px 14px #EC9520;
    }
    100% {
        box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px #1affb300, 0 0 0px 80px rgba(26, 255, 179, 0);
    }
}
@-moz-keyframes KF_torchOrange {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #f0ad4e, 0 0 12px 10px #f0ad4e, 0 0 12px 14px #EC9520;
    }
    100% {
        box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px #1affb300, 0 0 0px 80px rgba(26, 255, 179, 0);
    }
}
@keyframes KF_torchOrange {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px #f0ad4e, 0 0 12px 10px #f0ad4e, 0 0 12px 14px #EC9520;
    }
    100% {
        box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px #1affb300, 0 0 0px 80px rgba(26, 255, 179, 0);
    }
}
/* Pulse Slowly Bitiş */

/* Spin Animasyonları Başlangıç */
.lds-hourglass {
    /*    display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;*/
    position: relative;
    float: left;
}
.lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
        transform: rotate(1800deg);
    }
}
/* Spin Animasyonları Bitiş */

/* Resim Geçiş Animasyonları Başlangıç */
@-webkit-keyframes imageAnimation { 
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -webkit-animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }
    22% {
        opacity: 0;
        -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
        opacity: 0;
        -webkit-transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% {
        opacity: 0;
        -moz-animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -moz-transform: scale(1.05);
        -moz-animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        -moz-transform: scale(1.1);
    }
    22% {
        opacity: 0;
        -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
        opacity: 0;
        -moz-transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% {
        opacity: 0;
        -o-animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -o-transform: scale(1.05);
        -o-animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        -o-transform: scale(1.1);
    }
    22% {
        opacity: 0;
        -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
        opacity: 0;
        -o-transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% {
        opacity: 0;
        -ms-animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -ms-transform: scale(1.05);
        -ms-animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        -ms-transform: scale(1.1);
    }
    22% {
        opacity: 0;
        -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
        opacity: 0;
        -ms-transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        transform: scale(1.1);
    }
    22% {
        opacity: 0;
        -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
        opacity: 0;
        -transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation { 
    0% {
        opacity: 0;
        -webkit-transform: translateY(-300%);
    }
    8% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
    19% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% {
        opacity: 0;
        -moz-transform: translateY(-300%);
    }
    8% {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
    17% {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
    19% {
        opacity: 0;
        -moz-transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% {
        opacity: 0;
        -o-transform: translateY(-300%);
    }
    8% {
        opacity: 1;
        -o-transform: translateY(0%);
    }
    17% {
        opacity: 1;
        -o-transform: translateY(0%);
    }
    19% {
        opacity: 0;
        -o-transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% {
        opacity: 0;
        -ms-transform: translateY(-300%);
    }
    8% {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
    17% {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
    19% {
        opacity: 0;
        -ms-transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% {
        opacity: 0;
        transform: translateY(-300%);
    }
    8% {
        opacity: 1;
        transform: translateY(0%);
    }
    17% {
        opacity: 1;
        transform: translateY(0%);
    }
    19% {
        opacity: 0;
        transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Yazı Geçiş Animasyonları Bitiş */