/* todo font */
/*
@font-face {
    font-family: "Anafont";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Montserrat-Light.woff) format("woff");
}
*/
@font-face {
    font-family: "Anafont";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Raleway-Regular.woff) format("woff");
}

@font-face {
    font-family: "Anafont";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Montserrat-Medium.woff) format("woff");
}

@font-face {
    font-family: "Anafont";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Montserrat-SemiBold.woff) format("woff");
}

@font-face {
    font-family: "Anafont";
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Montserrat-ExtraBold.woff) format("woff");
}


@font-face {
    font-family: "Baslikfont";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Raleway-Light.woff) format("woff");
}
@font-face {
    font-family: "Baslikfont";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Raleway-Medium.woff) format("woff");
}
@font-face {
    font-family: "Baslikfont";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Raleway-Bold.woff) format("woff");
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 3s !important;
    -moz-animation-duration: 3s !important;
    -o-animation-duration: 3s !important;
    animation-duration: 3s !important;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1s !important;
    transition-timing-function: ease;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
    animation-duration: 1s !important;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;

    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    animation-duration: 1s !important;
}


@keyframes fadeInRight {

    0% {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    animation-duration: 1s !important;
}

@keyframes yukariEfekt {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.yukariEfekt {
    animation-name: yukariEfekt;
    animation-duration: 0.5s !important;
}
@keyframes sub-menu {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.sub-menu {
    animation-name: sub-menu;
    animation-duration: 0.2s !important;
}
@keyframes menuEfekt {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: none;

    }
}

.menuEfekt {
    animation-name: menuEfekt;
    animation-duration: 1s !important;
}
@keyframes sosyalikon {
    0% {

    }
    50% {
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0);}
    51% {
        transform: translate3d(0, 15px, 0);}
    to {

        transform: none;
    }
}

.sosyalikon {
    animation-name: sosyalikon;
    animation-duration: 1s;
}

@keyframes baslikalti {
    from {
        opacity: 0;
        width: 0;
        }

    to {
        opacity: 1;
        width: 4vw;
    }
}

.baslikalti {
    animation-name: baslikalti;
    animation-duration: 1s;
}
@keyframes yukariBlog {
    from {
        opacity: 0.2;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.yukariBlog {
    animation-name: yukariBlog;
    animation-duration: 0.5s;
}
@keyframes BorderAnime {
    from {
        /*border-color: rgba(171, 152, 171,0);*/
        box-shadow: 1px 1px 3px 0 #00000050;
        background-color: var(--anaRenkAcik);

    }
    50% {
        /*border-color: rgba(142, 116, 142,1);*/
        box-shadow: 1px 1px 3px 0 #00000000;
        background-color: var(--anaRenkKoyu);

    }
    to {
        /*border-color: rgba(171, 152, 171,0);*/
        box-shadow: 1px 1px 3px 0 #00000050;
        background-color: var(--anaRenkAcik);
        
    }
}

.BorderAnime {
    animation-name: BorderAnime;
    animation-duration: 0.5s;

}
@keyframes anaresim {
    from {
        transform: scale(1);
        opacity: 0;
    }

    to {
        transform: scale(1.05);
        opacity: 1;
    }
}

.anaresim {
    animation-name: anaresim;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}
@keyframes anabaslik {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}

.anabaslik {
    animation-name: anabaslik;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}
@keyframes Adondur {
    from {
        transform: none;
    }
    to {
        transform: rotate(-45deg);
    }
}

.Adondur {
    transform-origin: right top;
    animation-name: Adondur;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}
@keyframes Adondurters {
    from {
        transform: rotate(-45deg);
    }
    to {
        transform: none;
    }
}

.Adondurters {
    transform-origin: right top;
    animation-name: Adondurters;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}
@keyframes cikis {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;

    }
}

.cikis {
    -webkit-animation-name: cikis;
    animation-name: cikis;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}
@keyframes giris {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;

    }
}

.giris {
    -webkit-animation-name: giris;
    animation-name: giris;
    animation-duration: 0.5s;
}
@keyframes fliksola {
    from {
        margin-left: 150px;
    }
    to {
        margin-left: 0;
    }
}

.fliksola {
    -webkit-animation-name: fliksola;
    animation-name: fliksola;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes fliksaga {
    from {
        margin-left: 0;
    }
    to {
        margin-left: 150px;
    }
}

.fliksaga {
    -webkit-animation-name: fliksaga;
    animation-name: fliksaga;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
@keyframes oka {
    0% {
        transform: none;
    }
    50% {
        transform: translate3d(0, 10px, 0);
    }
    100% {
        transform: none;
    }
}

.oka {
    animation-name: oka;
    animation-duration: 0.5s !important;
}

@keyframes Adondurcizgi {
    from {

        transform: rotate(45deg);
    }
    to {
        transform: none;
    }
}

.Adondurcizgi {
    transform-origin: center top;
    animation-name: Adondurcizgi;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

@keyframes Adondurcizgiters {
    from {
        transform: none;
    }
    to {

        transform: rotate(45deg);
    }
}

.Adondurcizgiters {
    transform-origin: center top;
    animation-name: Adondurcizgiters;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}
@keyframes resimefekt {
    0% {
        filter: brightness(1) contrast(1);
    }
    10% {
        filter: brightness(0.7) contrast(2);
    }
    40% {
        filter: brightness(1) contrast(1);
    }

    100% {
        filter: brightness(1) contrast(1);
    }
}

.resimefekt {
    animation-name: resimefekt;
}
@keyframes yansonAnime {
    from {
        color: #000000;
        background-color: #ffffff;
    }
    40% {
        color: #ffffff;
        transform: rotate(0deg);
        background-color: #000000;
    }
    45% {
        transform: rotate(15deg);
    }
    55% {
        transform: rotate(-15deg);
    }
    60% {
        transform: rotate(0deg);
        color: #ffffff;
        background-color: #000000;
    }
    to {
        color: #000000;
        background-color: #ffffff;
    }
}

.yansonAnime {
    animation-name: yansonAnime;
    animation-duration: 0.5s;

}