.s_title{
    width: 100%;
    line-height: 1.4;
    float: left;
    position: relative;
    letter-spacing:1px;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0px;
}

html#sag .s_title{text-align: right; }

.s_text{
    width: 100%;
    line-height: 1.6;
    float: left;
    position: relative;
    letter-spacing:1.2px;
    font-size: 15px;
}

.s_text h2, .s_text h3, .s_text h4, .s_text h5{
    width: 100%;
    line-height: 1.6;
    float: left;
    position: relative;
    letter-spacing:1.2px;
    font-size: 25px;
}












content{
    min-height: auto;
    margin-top:150px;
}

.form_col{
    width: calc(40% - 80px);
    float: right;
    right: 0px;
    position: absolute;
    background-color: #fff;
    padding: 40px;
    z-index: 3;
    box-shadow: 0 5px 6px 0 rgb(0 0 0 / 20%), 0 3px 10px 0 rgb(0 0 0 / 19%);
}

.form_col .form_title{
    width: calc(100% - 0px);
    line-height: 1.4;
    float: left;
    position: relative;
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: bold;
}

.form_input{
    width: calc(100% - 20px);
    height: 20px;
    float: left;
    position: relative;
    background-color: transparent;
    outline: none;
    border:2px solid #ccc;
    margin:10px 0px;
    padding: 15px 10px;
}

.form_textarea{
    width: calc(100% - 20px);
    height: 100px;
    float: left;
    position: relative;
    background-color: transparent;
    outline: none;
    border:2px solid #ccc;
    margin:5px 0px;
    padding: 10px;
    resize: none;
}

.form_input:focus,.form_textarea:focus{ border:2px solid #3d3d3d; }


.form_button{
    height: 50px;
    line-height: 50px;
    text-align: center;
    float: left;
    position: relative;
    background-color: #3d3d3d;
    border-radius: 8px;
    margin:10px 0px;
    padding: 0px 40px;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    transition: all 200ms;
}


.form_button:hover{ transform: scale(1.04); }
.form_button:active{ transform: scale(1); }






.iletisim_col{
    width: calc(40% - 0px);
    float: left;
    position: relative;
}

.iletisim_col .iletisim_title{
    width: calc(100% - 0px);
    line-height: 1.4;
    float: left;
    position: relative;
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: bold;
}

.iletisim_col .iletisim_text{
    width: calc(100% - 0px);
    line-height: 1.5;
    font-size:14px;
    float: left;
    position: relative;
    margin-bottom: 50px;
    letter-spacing: 0.5px;
}

.iletisim_col .iletisim_alan{
    width: calc(100% - 0px);
    float: left;
    position: relative;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.iletisim_col .iletisim_alan .iletisim_icon{
    width: 25px;
    min-height: 30px;
    float: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iletisim_col .iletisim_alan .iletisim_icon:before{
    content: '';
    float: left;
    position: relative;
    background-color:#3d3d3d;
}

.iletisim_col .iletisim_alan .iletisim_tel_icon:before{  width:20px; height:20px; mask: url(../images/phone.svg) no-repeat center / contain; -webkit-mask: url(../images/phone.svg) no-repeat center / contain; }
.iletisim_col .iletisim_alan .iletisim_tel_mbl_icon:before{  width:20px; height:20px; mask: url(../images/phone_mbl.svg) no-repeat center / contain; -webkit-mask: url(../images/phone_mbl.svg) no-repeat center / contain; }
.iletisim_col .iletisim_alan .iletisim_mail_icon:before{  width:22px; height:22px; mask: url(../images/mail.svg) no-repeat center / contain; -webkit-mask: url(../images/mail.svg) no-repeat center / contain; }
.iletisim_col .iletisim_alan .iletisim_adres_icon:before{  width:22px; height:22px; mask: url(../images/location.svg) no-repeat center / contain; -webkit-mask: url(../images/location.svg) no-repeat center / contain; }


.iletisim_col .iletisim_alan .iletisim_bilgiler{
    width: calc(100% - 50px);
    float: left;
    position: relative;
    margin-left: 25px;
}


.iletisim_col .iletisim_alan .iletisim_bilgiler .iletisim_bilgi{
    width: calc(100% - 0px);
    line-height: 1.3;
    float: left;
    position: relative;
    margin-bottom: 5px;
    font-size: 15px;
    color:#3d3d3d;
}


.iletisim_col .iletisim_alan .iletisim_buton{
    width: auto;
    line-height: 1.3;
    float: left;
    position: relative;
    text-align: center;
    padding: 10px 25px;
    margin-top: 5px;
    font-size: 15px;
    color:#3d3d3d;
    border:2px solid #aaa;
    cursor: pointer;
}

.iletisim_col .iletisim_alan .iletisim_buton:hover{ border:2px solid #3d3d3d; }




.harita{
    width: 100%;
    height: 450px;
    float: left;
    position: relative;
    border:none;
    outline: none;
    z-index: 1;
}



html#sag .form_col{ float: left; left: 0px; }
html#sag .iletisim_col{ float: right; }

html#sag .iletisim_col .iletisim_alan .iletisim_bilgiler{ margin-left: 0px; margin-right: 25px; }
html#sag .iletisim_col .iletisim_alan{ flex-direction: row-reverse;}

html#sag .iletisim_col .iletisim_alan .iletisim_bilgiler .iletisim_bilgi{ text-align: right;}
html#sag .iletisim_col .iletisim_title{ text-align: right;}
html#sag .form_col .form_title{ text-align: right;}
html#sag .form_button{ float: right;}






.hizmetler_cn{
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: space-between;
}

.hizmet_title{
    width: 100%;
    line-height: 1.4;
    float: left;
    position: relative;
    letter-spacing: 1.6px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: var(--color);
    margin-bottom: 30px;
}

.hizmet_text{
    width: 100%;
    line-height: 1.8;
    float: left;
    position: relative;
    letter-spacing: 1.8px;
    font-size: 14px;
    color: #1d1d1d;
    margin-bottom: 30px;
}


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

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

.bakim_col .bakim_title{
    width: calc(100% - 80px);
    line-height: 1.6;
    position: relative;
    float: left;
    color: #4d4d4d;
    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: #4d4d4d;
    font-size: 14px;
    letter-spacing: 1.6px;
    margin: 5px 0px;
}

.bakim_col .buton{
    line-height: 1;
    position: absolute;
    color: #fff;
    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: #fff;
    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); }


.hizmet_content{ margin:50px 0px; }

.hizmet_banner{
    width: 100%;
    float: left;
    position: relative;
    padding-top: 50%;
    margin-top: 55px;
}

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


.icerik_title{
    width: 700px;
    line-height: 1.4;
    position: absolute;
    font-size: 80px;
    left: 40px;
    letter-spacing: 1.4px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: 900;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 20px rgba(0,0,0,0.25), 0px 0px 30px rgba(0,0,0,0.15);
}







.rez_content{
    width: calc(500px - 0px);
    float: left;
    position: relative;
    left:calc(50% - 250px);
    margin-top: 60px;
}


.rez_h1{
    width:100%;
    line-height: 1.4;
    float: left;
    position: relative;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    margin-bottom: 50px;
}

.rez_input{
    width: 100%;
    float: left;
    position: relative;
    margin-bottom: 30px;
}

.rez_input .ri_title{
    width: 100%;
    line-height: 1.2;
    font-size: 14px;
    color: #1d1d1d;
    float: left;
    position: relative;
    margin-bottom: 3px;
    letter-spacing: 0.8px;
    text-transform: capitalize;
}

.rez_input input{
    width: 100%;
    height: 44px;
    color: #1d1d1d;
    float: left;
    position: relative;
    padding: 0px 10px;
    box-sizing:border-box;
    border:1px solid #bbb;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
}

.rez_input textarea{
    min-width: 100%;
    max-width: 100%;
    min-height: 80px;
    height: 80px;
    color: #1d1d1d;
    float: left;
    position: relative;
    padding: 10px;
    box-sizing:border-box;
    border:1px solid #bbb;
    border-radius: 5px;
    outline: none;
    background-color: transparent;
}

.rez_but{
    width: 100%;
    line-height: 1.2;
    color: #fff;
    float: left;
    position: relative;
    padding: 10px 0px;
    outline: none;
    border:none;
    border-radius: 5px;
    background-color: var(--color);
    cursor: pointer;
    letter-spacing: 1px;
    text-align: center;
}


.ri_50_l{ width: calc(50% - 15px); margin-right: 15px; }
.ri_50_r{ width: calc(50% - 15px); margin-left: 15px; }

html#sag .rez_input .ri_title{text-align: right;}

.rez_input:focus-within input, .rez_input:focus-within textarea{ border-color:var(--color); }
.rez_input:focus-within .ri_title{ color:var(--color); }




@media screen and (max-width: 1280px), screen and (max-device-width: 1280px) {
        
    .icerik_title{
        width: 600px;
        font-size: 70px;
    }

}




@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) { 
        
    .form_col{ width: calc(44% - 80px); }
    .iletisim_col{ width: calc(44% - 0px); }
    
    .icerik_title{
        width: 400px;
        font-size: 60px;
    }

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

}





@media screen and (max-width: 800px), screen and (max-device-width: 800px) { 
        
    .form_col{
        width: calc(44% - 70px);
        padding: 35px;
        right: 0px;
    }


    .iletisim_col{
        width: calc(44% - 0px);
    }

    .icerik_title{
        width: 400px;
        font-size: 50px;
        left: 20px;
    }

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

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

}




@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;
    }

}





@media screen and (max-width: 640px), screen and (max-device-width: 640px) { 
        
    .form_col{
        width: calc(70% - 80px);
        padding: 40px;
        right: 15%;
        position: relative;
        margin-top:80px;
        margin-bottom:-110px;
    }

    .iletisim_col{ width: calc(100% - 0px); }
    
    .iletisim_col .iletisim_title{ text-align: center; }
    .iletisim_col .iletisim_text{ text-align: center; }

        
    .iletisim_col .iletisim_alan .iletisim_icon{
        width: 100%;
        min-height: 30px;
        float: left;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .iletisim_col .iletisim_alan .iletisim_bilgiler{
        width: calc(100% - 0px);
        margin-left: 0px;
    }
    
    
    .iletisim_col .iletisim_alan .iletisim_bilgiler .iletisim_bilgi{
        text-align: center;
    }

    .icerik_title{
        width: 300px;
        font-size: 35px;
    }

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


    
    .rez_content{
        width: calc(100% - 0px);
        left: 0px;
    }


}





@media screen and (max-width: 533px), screen and (max-device-width: 533px) { 
 
    .form_col{
        width: calc(80% - 80px);
        right: 10%;
        margin-bottom:-110px;
    }


    .hizmet_banner{ padding-top: 80%; }

    .icerik_title{
        width: 200px;
        font-size: 30px;
        left: 10px;
    }

}




@media screen and (max-width: 460px), screen and (max-device-width: 460px) {
    
    .bakim_col{
        width: calc(100% - 100px);
        margin: 30px 30px;
    }

}



@media screen and (max-width: 420px), screen and (max-device-width: 420px) { 
 
    .form_col{
        width: calc(90% - 80px);
        right: 5%;
        margin-bottom:-110px;
    }

}

@media screen and (max-width: 380px), screen and (max-device-width: 380px) { 
 
    .icerik_title{
        width: 170px;
        font-size: 25px;
    }

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

}