// Author FUBA IMAGE | FrameWorkV5.1
@charest "utf-8";

@import "slick";

@import "fancybox";

@import "aos";

@import "fontello";

$grid: 1170px;
$buyukgrid: 1800px;

$kirmizi: #ab8d3f;
$antrasit: #1e1d22;

*, *:after, *:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    appearance: none;
    font-style: normal;
    outline: 0;
    background-color: transparent
}

i {
    text-align: center
}

html,
body {
    overflow-x: hidden
}

a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none
}

i {
    display: inline-block
}

select, form button {
    cursor: pointer
}

%grid {
    max-width: $grid;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    @media (max-width: $grid + 20px) {
        margin-left: 10px;
        margin-right: 10px
    }
}

%buyukGrid {
    max-width: $buyukgrid;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    @media (max-width: $buyukgrid + 20px) {
        margin-left: 10px;
        margin-right: 10px
    }
}

%overpass {
    font-family: 'Overpass', sans-serif
}

%yeseva {
    font-family: 'Yeseva One', cursive
}

@mixin clear {
    &:after {
        content: "";
        display: block;
        clear: both
    }
}

%fullAbsolute {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0
}

%ortala {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

%yanOrtala {
    left: 50%;
    transform: translateX(-50%)
}

%dikOrtala {
    top: 50%;
    transform: translateY(-50%)
}

%aromaZemini {
    background-image: url(../img/aromalar-zemin.jpg);
    background-attachment: fixed;
    background-size: cover
}

@mixin baslik {
    text-transform: capitalize;
    position: relative;
    line-height: 1;
    padding-bottom: 25px;
    &:before {
        content: "";
        background: linear-gradient(to right,$kirmizi 0%,$kirmizi 74%,rgba(0,0,0,0) 74%,rgba(0,0,0,0) 87%,$kirmizi 87%);
        width: 65px;
        height: 2px;
        @extend %yanOrtala;
        bottom: 0;
        position: absolute
    }
    @media (max-width: 1150px) {
        padding-bottom: 15px;
        &:before {
            height: 1px
        }
    }
}

@mixin animate($hiz) {
    transition: all $hiz * .1s cubic-bezier(.19,1,.22,1);
    &:hover {
        transition: all $hiz * .1s cubic-bezier(.19,1,.22,1)
    }
}

@mixin icon($yan, $dik) {
    background-image: url(../img/icon.png);
    background-position: -#{$yan}px -#{$dik}px
}

@mixin placeHolder($renk, $tipi) {
    ::-webkit-input-placeholder {
        color: $renk;
        text-transform: $tipi
    }
    ::-moz-input-placeholder {
        color: $renk;
        text-transform: $tipi
    }
    :-moz-input-placeholder {
        color: $renk;
        text-transform: $tipi
    }
    :-ms-input-placeholder {
        color: $renk;
        text-transform: $tipi
    }
}

@mixin gradient($solRenk, $sagRenk) {
    background: $solRenk;
    background: linear-gradient(to right, $solRenk , $sagRenk)
}

@mixin dikGradient($ustRenk, $altRenk) {
    background: $ustRenk;
    background: linear-gradient($ustRenk , $altRenk)
}

@mixin container($sayi, $bosluk, $alt) {
    > div {
        margin: 0 $bosluk * -1;
        @include clear;
        > * {
            width: 100% / $sayi - $bosluk * 2;
            margin: 0 $bosluk $alt;
            float: left
        }
    }
}

@mixin button($zemin, $border, $yazi) {
    display: inline-block;
    padding: 15px 60px;
    background-color: $zemin;
    border-bottom: 2px solid $border;
    @extend %overpass;
    font-weight: 600;
    font-size: 15px;
    color: $yazi;
    text-transform: capitalize;
    @include animate(5);
    &:hover {
        background-color: $border;
        color: $zemin
    }
    @media (max-width: 1150px) {
        padding: 10px 30px
    }
}

@mixin col($sayi) {
    width: (100% / (12 / $sayi));
    float: left;
}