.slider{
    width: 100%;
    height: calc(90vh - 100px);
    float: left;
    position: relative;
    overflow: hidden;
    margin-top:80px;
}

.slider img{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    object-fit: cover;
    z-index: 3;
}

.slider:after{
    content: '';
    width: 400px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 10%;
    z-index: 5;
    background-color: #009ee3;
    opacity: 0.9;
    animation: bantanim 300ms linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes bantanim { from { top: -120%; }  }

.slider:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 10%;
    z-index: 4;
    background-color: rgba(0,0,0,0.4);
    top: 0px;
    left: 0px;
}

.slider .text{
    line-height: 1.4;
    color: #fff;
    font-size: 70px;
    font-weight: 900;
    letter-spacing: 1.4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(10% + 150px);
    z-index: 9;
    text-shadow: 3px 3px 8px #3d3d3d;
    animation: textanim 400ms linear;
    animation-delay: 300ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes textanim { from { opacity: 0; left: 0%; } }

.slide_box{
    width: 250px;
    height: 250px;
    right: 240px;
    bottom: 200px;
    position: absolute;
    z-index: 10;
}


.slide_box .iletisim{
    width: 270px;
    position: absolute;
    left: -25%;
    top: 50%;
    transform: translateY(-50%);
    animation: iletisimanim 300ms linear;
    animation-delay: 700ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes iletisimanim { from { opacity: 0; left: -50%; } }

.slide_box .iletisim .str{
    position: relative;
    float: left;
    line-height: 1.4;
    letter-spacing: 1.2px;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    padding-left: 35px;
    margin: 10px 0px;
}

.slide_box .iletisim .str.adres{
    position: relative;
    float: left;
    line-height: 1.4;
    letter-spacing: 1.2px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.slide_box .iletisim .str:before{ content:''; width: 20px; height: 20px; left: 0px; top: 5px; position: absolute; background-color: #fff; }

.tel_icon:before{ mask: url(../images/phone.svg) no-repeat center / contain; -webkit-mask: url(../images/phone.svg) no-repeat center / contain; }
.home_icon:before{ mask: url(../images/home.svg) no-repeat center / contain; -webkit-mask: url(../images/home.svg) no-repeat center / contain; }


.slide_box span{
    width: 5px;
    height: 100%;
    position: absolute;
    background-color: #fff;
}

.slide_box span:nth-child(1){
    height: 20%;
    bottom: 80%;
    animation: border1 200ms linear;
    animation-delay: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide_box span:nth-child(2){
    left: 0px;
    transform: rotate(-90deg);
    transform-origin: 0px 0;
    animation: border1 200ms linear;
    animation-delay: 1200ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide_box span:nth-child(3){
    right: 0px;
    animation: border1 200ms linear;
    animation-delay: 1400ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide_box span:nth-child(4){
    right: 0px;
    top: 100%;
    transform: rotate(90deg);
    transform-origin: 5px 0px;
    animation: border1 200ms linear;
    animation-delay: 1600ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide_box span:nth-child(5){
    height: 20%;
    bottom: 0px;
    animation: border1 200ms linear;
    animation-delay: 1800ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes border1 { from { height: 0%; } }







.container{
    width: 100%;
    float: left;
    position: relative;
    margin: 100px 0px;
}

.container content{ margin:0px!important; }

.container_title{
    width: calc(100% - 20px);
    line-height: 1.4;
    float: left;
    position: relative;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 1.4px;
    text-align: center;
    margin: 10px;
    margin-bottom: 30px;
    color: #1d1d1d;
    text-transform: uppercase;
}

.kurumsal_side{
    width: calc(50% - 0px);
    float: left;
    position: relative;
    margin-left: 50px;
}

.kurumsal_side .ks_content{
    width: calc(100% - 0px);
    float: left;
    position: relative;
    padding-top: 100%;
}

.kurumsal_side .ks_content img{
    width: 100%;
    height: 100%;
    float: left;
    position: absolute;
    object-fit: cover;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.kurumsal_side .ks_content .bant{
    width: 150px;
    float: left;
    position: absolute;
    left: -50px;
    bottom: -50px;
    background-color: var(--color);
    z-index: 5;
    padding:40px 20px;
}

.kurumsal_side .ks_content b{
    width: 100px;
    line-height: 0.8;
    float: left;
    position: relative;
    font-size: 90px;
    letter-spacing: 1.2px;
    color: #fff;
    font-weight: 900;
    z-index: 20;
}

.kurumsal_side .ks_content p{
    width: 100px;
    line-height: 1;
    float: left;
    position: relative;
    letter-spacing: 1.2px;
    color: #fff;
    z-index: 20;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 15px;
}

.kurumsal_side .ks_content .p1{ font-size: 25px; letter-spacing: 6px; }
.kurumsal_side .ks_content .p2{ font-size: 20px; letter-spacing: 2.5px; }

.kurumsal_side .bant:before{
    content: '';
    width: calc(100% - 80px);
    height: calc(100% - 90px);
    float: left;
    position: absolute;
    top: 45px;
    right: 20px;
    border:2px solid #fff;
    z-index: 5;
}

.kurumsal_side .bant:after{
    content: '';
    width: 145px;
    height: calc(100% - 0px);
    float: left;
    position: absolute;
    left: 0pc;
    top: 0px;
    background-color: var(--color);
    z-index: 8;
}


.kurumsal_text{
    width: calc(50% - 100px);
    float: left;
    position: relative;
    margin-left: 50px;
}

.kurumsal_text .title_min{
    width: calc(100% - 0px);
    line-height: 1.2;
    float: left;
    position: relative;
    font-size: 14px;
    font-weight: bold;
    color: var(--color);
    letter-spacing: 1.2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.kurumsal_text .title{
    width: calc(100% - 0px);
    line-height: 1.6;
    float: left;
    position: relative;
    font-size: 25px;
    font-weight: bold;
    color: var(--color_bs);
    letter-spacing: 1.2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.kurumsal_text p{
    width: calc(100% - 0px);
    line-height: 1.5;
    float: left;
    position: relative;
    font-size: 14px;
    color: var(--color_p);
    letter-spacing: 1.4px;
}

.kurumsal_text .des{
    width: calc(100% - 0px);
    line-height: 1.5;
    float: left;
    position: relative;
    font-size: 14px;
    color: var(--color_p);
    letter-spacing: 1.4px;
}

.kurumsal_text .buton{
    line-height: 1;
    float: left;
    position: relative;
    font-size: 14px;
    color: var(--color);
    letter-spacing: 1.4px;
    padding: 15px 20px;
    border:2px solid var(--color);
    margin-top: 30px;
    cursor: pointer;
    z-index: 5;
    transition: all 200ms;
    user-select: none;
}


.kurumsal_text .buton:before{
    content: '';
    width: 0;
    height: 100%;
    background-color: var(--color);
    position: absolute;
    left: 0px;
    top: 0px;
    transition: all 200ms;
    z-index: -1;
}


.kurumsal_text .buton:hover{ color: #fff; }
.kurumsal_text .buton:active{ transform: scale(1.05); }
.kurumsal_text .buton:hover:before{ width: 100%; }







.hizmet_container{
    display: flex;
    justify-content:space-between;
}

.hizmet_50{
    width: calc(50% - 50px);
    float: left;
    position: relative;
}

.hizmet_50 .title_min{
    width: calc(100% - 0px);
    line-height: 1.2;
    float: left;
    position: relative;
    font-size: 14px;
    font-weight: bold;
    color: var(--color);
    letter-spacing: 1.2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.hizmet_50 .title{
    width: calc(100% - 0px);
    line-height: 1.6;
    float: left;
    position: relative;
    font-size: 25px;
    font-weight: bold;
    color: var(--color_bs);
    letter-spacing: 1.2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.hizmet_50 .des{
    width: calc(100% - 0px);
    line-height: 1.5;
    float: left;
    position: relative;
    font-size: 14px;
    color: var(--color_p);
    letter-spacing: 1.4px;
    margin-bottom: 20px;
}

.hizmet_50.fotolar{
    display: flex;
    justify-content: space-between;
}

.hizmet_50 .img1{
    width: calc(50% - 20px);
    float: left;
    position: relative;
}

.hizmet_50 .img2{
    width: calc(50% - 20px);
    float: left;
    position: relative;
    margin-top: 20px;
}

.hizmet_50 .img_cnt{
    width: calc(100% - 0px);
    float: left;
    position: relative;
    padding-top: 200%;
}

.hizmet_50 .img_cnt img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
}

.hizmet_50 .buton {
    line-height: 1;
    float: left;
    position: relative;
    font-size: 14px;
    color: var(--color);
    letter-spacing: 1.4px;
    padding: 15px 20px;
    border: 2px solid var(--color);
    margin-top: 30px;
    cursor: pointer;
    z-index: 5;
    transition: all 200ms;
    user-select: none;
}

.hizmet_50 .buton:before{
    content: '';
    width: 0;
    height: 100%;
    background-color: var(--color);
    position: absolute;
    left: 0px;
    top: 0px;
    transition: all 200ms;
    z-index: -1;
}


.hizmet_50 .buton:hover{ color: #fff; }
.hizmet_50 .buton:active{ transform: scale(1.05); }
.hizmet_50 .buton:hover:before{ width: 100%; }


.bakim_container{ background-color: #2d2d2d; padding: 100px 0px;}
.bakim_container content{ display: flex; justify-content:space-between; flex-wrap: wrap; -ms-flex-wrap:wrap; }
.bakim_container .container_title{ color: #ddd; }

.bakim_col{
    width: calc(33.33% - 90px);
    float: left;
    position: relative;
    margin: 20px 0px;
    background-color: #1d1d1d;
    overflow: hidden;
    padding: 30px 30px 85px 30px;
    border-radius: 5px;
}

.bakim_col span{
    line-height: 1;
    position: absolute;
    color: #3d3d3d;
    right: 10px;
    top: -30px;
    font-size: 90px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.bakim_col .bakim_title{
    width: calc(100% - 100px);
    line-height: 1.6;
    position: relative;
    float: left;
    color: #ddd;
    font-size: 23px;
    font-weight: 900;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.bakim_col p{
    width: calc(100% - 0px);
    line-height: 1.6;
    position: relative;
    float: left;
    color: #ddd;
    font-size: 14px;
    letter-spacing: 1.6px;
    margin: 5px 0px;
}

.bakim_col .buton{
    line-height: 1;
    position: absolute;
    color: #1d1d1d;
    font-size: 14px;
    letter-spacing: 1.2px;
    background-color: var(--color);
    padding: 10px 40px 10px 20px;
    cursor: pointer;
    transition: all 200ms;
    user-select: none;
    bottom: 30px;
    left: 30px;
    font-weight: bold;
}

.bakim_col .buton:before{
    content: '';
    width: 12px;
    height: 12px;
    background-color: #1d1d1d;
    position: absolute;
    top: calc(50% - 6px);
    right: 8px;
    mask: url(../images/o8.svg) no-repeat center / contain; -webkit-mask: url(../images/o8.svg) no-repeat center / contain;
}


.bakim_col:hover span{ color: var(--color); }
.bakim_col .buton:hover{ transform: scale(1.05); box-shadow: 0px 0px 5px 0px var(--color), 0px 0px 15px 4px rgba(0,158,227,0.4); }
.bakim_col .buton:active{ transform: scale(1); }














.markalar{
    width: 100%;
    height: 140px;
    float: left;
    position: relative;
    background-color: var(--body);
    overflow: hidden;
}

.markalar .marka{
    width: 110px;
    height: 95px;
    float: left;
    position: absolute;
    top: 20px;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 400ms linear;
    z-index: 1;
    cursor: pointer;
    padding:0px 40px;
    margin:0px 20px;
    z-index: -2;
}

.markalar .marka img{
    width: calc(100% - 2px);
    height: 100%;
    float: left;
    position: relative;
    object-fit: contain;
    transition: all 300ms;
    z-index: 2;
}

.markalar .marka:hover img{ transform: scale(1.1) rotate(2deg); }
.markalar .marka.aktif_sld { left: 0px!important; z-index: 3;}
.markalar .marka.true_sld { z-index: 3;}







@media screen and (max-width: 1650px), screen and (max-device-width: 1650px) { 

        
    .slide_box{
        right: 50px;
        bottom: 50px;
    }

}
  



@media screen and (max-width: 1366px), screen and (max-device-width: 1366px) { 

    .slider:after{ width: 300px; left: 5%; }
    .slider .text{ font-size: 50px; left: calc(5% + 60px); }

    .slide_box{ width: 230px; height: 230px; }

}
  





@media screen and (max-width: 1280px), screen and (max-device-width: 1280px) { 

    .markalar .marka{
        width: 90px;
        height: 80px;
        padding:0px 30px;
        margin:0px 10px;
    }

}
  



@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) {

    .slider{ margin-top: 55px; height: calc(100vh - 95px);}

    .slide_box span{ width: 3px; }
    .slide_box span:nth-child(4){ transform-origin: 3px 0px; }

    .markalar .marka{
        width: 80px;
        height: 70px;
        padding:0px 20px;
    }


    .bakim_col{
        width: calc(50% - 90px);
        margin: 30px 0px;
    }
    


    .kurumsal_text { width: calc(50% - 60px); margin-left: 30px; }
    .kurumsal_text .title_min{ margin-bottom: 10px; }
    .kurumsal_text .title{ line-height: 1.4; font-size: 22px; margin-bottom: 10px; }
    .kurumsal_text p{ line-height: 1.4; letter-spacing: 1.2px; }
    .kurumsal_text .buton{ margin-top: 20px; }
    .kurumsal_side { margin-left: 30px; }
    .kurumsal_side .ks_content .bant { left: -30px; bottom: -80px; }

    .hizmet_50{ width: calc(50% - 25px);}
    .hizmet_50 .title_min{ margin-bottom: 10px; }
    .hizmet_50 .title{ line-height: 1.4; font-size: 22px; margin-bottom: 10px; }
    .hizmet_50 p{ line-height: 1.4; letter-spacing: 1.2px; }
    
    .hizmet_50.fotolar{ width: calc(50% - 5px); justify-content:flex-start; flex-direction: column; }
    .hizmet_50 .img1{ width: calc(100% - 20px); }
    .hizmet_50 .img2{ width: calc(100% - 20px); margin-top: 40px; margin-left: 20px; }
    .hizmet_50 .img_cnt{ padding-top: 50%; }



    @media (orientation: landscape) {
        .slider:after{ width: 250px; left: 5%; }
        .slider .text{ font-size: 38px; left: calc(5% + 40px); }

        .slide_box{ width: 200px; height: 200px; right: 40px; bottom: auto; top: 50%; transform: translateY(-50%); }

        .slide_box .iletisim{ width: 220px; }
        .slide_box .iletisim .str{ font-size: 20px; padding-left: 25px; margin: 5px 0px;}
        .slide_box .iletisim .str.adres{ font-size: 15px; }
        .slide_box .iletisim .str:before{ width: 14px; height: 14px; top: 8px; }
    }


    @media (orientation: portrait) {
        
    }

}
  




@media screen and (max-width: 900px), screen and (max-device-width: 900px) { 

     

}
  



@media screen and (max-width: 800px), screen and (max-device-width: 800px) { 
    .container_title { font-size: 30px; }

    .bakim_col{
        width: calc(50% - 60px);
        margin: 20px 0px;
        padding: 20px 20px 75px 20px;
    }

    .bakim_col .buton {
        bottom: 20px;
        left: 20px;
    }


    .kurumsal_side { width: calc(45% - 0px);}
    .kurumsal_side .ks_content { padding-top: 120%; }
    .kurumsal_side .ks_content .bant { left: -30px; bottom: -80px; }
    .kurumsal_text{ width: calc(55% - 60px); }

    .kurumsal_side .ks_content .bant{ width: 120px; padding:30px 15px; }
    .kurumsal_side .ks_content b{ width: 90px; font-size: 80px; }
    .kurumsal_side .ks_content p{ width: 90px; margin-top: 10px; }
    .kurumsal_side .ks_content .p1{ font-size: 21px; }
    .kurumsal_side .ks_content .p2{ font-size: 17px; }
    .kurumsal_side .bant:after { width: 120px; }
    .kurumsal_side .bant:before { height: calc(100% - 80px); top: 40px; right: 15px; }
    
    
    .hizmet_50 .img_cnt{ padding-top: 60%; }

    @media (orientation: landscape) {
        .slider:after{ width: 240px; }
        .slider .text{ font-size: 30px; }

        .slide_box{ width: 180px; height: 180px; right: 30px; }

        .slide_box .iletisim{ width: 200px; }
        .slide_box .iletisim .str.adres{ font-size: 14px; }
    }


    @media (orientation: portrait) {
        
        .slider .text{ font-size: 45px; top: 100px; transform: translateY(0px); }
    }


}
  




@media screen and (max-width: 736px), screen and (max-device-width: 736px) { 
    .bakim_col{
        width: calc(50% - 50px);
        margin: 10px 0px;
    }

    .bakim_col span {
        right: 5px;
        top: -20px;
        font-size: 75px;
    }

    .bakim_col .bakim_title {
        width: calc(100% - 70px);
        line-height: 1.4;
        font-size: 20px;
        letter-spacing: 1.3px;
        margin-bottom: 10px;
    }

    .kurumsal_side{ width: calc(100% - 30px); }
    .kurumsal_side .ks_content { padding-top: 70%; }
    .kurumsal_side .ks_content .bant { left: -20px; bottom: -20px; }
    .kurumsal_text { width: calc(100% - 0px); margin-left: 0px; margin-top: 50px; }

    .hizmet_50 { width: calc(100% - 0px); }
    .hizmet_container { flex-direction: column; }
    .hizmet_50.fotolar { flex-direction: row; justify-content: space-between; width: calc(100% - 0px); }
    .hizmet_50 .img1 { width: calc(50% - 20px); }
    .hizmet_50 .img2 { width: calc(50% - 20px); margin-left: 0px; }
    .hizmet_50 .img_cnt { padding-top: 150%; }
}
  



@media screen and (max-width: 640px), screen and (max-device-width: 640px) { 
    .container { margin: 50px 0px; }

    .bakim_col{
        width: calc(100% - 160px);
        margin: 30px 60px;
    }

    @media (orientation: landscape) {
    }


    @media (orientation: portrait) {
        .slider .text{ font-size: 40px; top: 60px; }

    }


}
  



@media screen and (max-width: 533px), screen and (max-device-width: 533px) { 


        .slider:after{ width: 200px; left: 5%; }

        .slide_box{ width: 200px; height: 200px; bottom: 60px; }

        .slide_box .iletisim{ width: 230px; }
        .slide_box .iletisim .str{ font-size: 20px; padding-left: 25px; margin: 5px 0px;}
        .slide_box .iletisim .str.adres{ font-size: 15px; }
        .slide_box .iletisim .str:before{ width: 14px; height: 14px; top: 8px; }

        .markalar .marka{
            width: 60px;
            height: 50px;
            padding:0px 10px;
            margin: 0px 5px;
        }
}
  



@media screen and (max-width: 460px), screen and (max-device-width: 460px) { 

    .bakim_col{
        width: calc(100% - 100px);
        margin: 30px 30px;
    }

    .hizmet_50 .img1 { width: calc(50% - 10px); }
    .hizmet_50 .img2 { width: calc(50% - 10px); }
}
  



@media screen and (max-width: 420px), screen and (max-device-width: 420px) { 

  
    .slider .text{ font-size: 35px; top: 40px;  }
    .slide_box{ width: 190px; height: 190px; bottom: 40px; }
    
}
  
  



@media screen and (max-width: 360px), screen and (max-device-width: 360px) { 


    .slider .text{ font-size: 30px; top: 40px; left: calc(5% + 30px); }

    .bakim_col{
        width: calc(100% - 70px);
        margin: 30px 15px;
    }

}
  



@media screen and (max-width: 320px), screen and (max-device-width: 320px) { 

   

}