:root{
    --first: #114759;
    --second: #EC744A;
    --first_tranparent: rgb(8, 45, 56, 0.8);
    --third: #47A779;
    --black: #000;
    --light: #FCF8F4;
    --white: #fff;
    --red: #ff0000;
    --gray: #f6f7fa;
    --darkgray: #cdd9e1;
    --lightgray: #f6f7fa;
    --darkblack: #1f2732;
    --radius: 100px;
    --radius30: 30px;
    --radius6: 6px;
    --radiusCircle: 50%;
    --imgbg: linear-gradient(0deg, var(--third) 0%, rgba(0, 0, 0, 0) 55%);
    --imgbgSecond: linear-gradient(0deg, var(--second) 0%, rgba(0, 0, 0, 0) 55%);
    --whatsapp: #74CB6B;

}

h1,h2,h3,h4,h5,h6{line-height: 1.2em}
body{font-family: 'Manrope', sans-serif; font-size: 16px;}
a,svg,.neden div,li,.button_second{transition-duration: 0.4s;}
ul{list-style: none;margin: 0;padding: 0}
button{border: none;}
.padding508{padding: 50px 8px}
.little_title{margin: 0;padding: 0;font-size: 18px}
.main_title{margin: 0;padding: 0;font-size: 48px}
.sub_little_title{margin: 0;padding: 0;font-size: 14px;font-weight: 100}
.sub_main_title{margin: 0;padding: 0;font-size: 40px}
.displayFlex{display: flex;align-items: center}
.mbottom20{margin-bottom: 20px}
.hover_first:hover{background-color: var(--first)}

/* Header */
.header{margin: 10px 0}
.header .logo{width: 200px;}
.header .menu{width: calc(100% - 400px);display: ruby;text-align: center}
.header .login{width: 200px;text-align: center;display: ruby}
.header .login a{background-color: var(--second);color:var(--white);padding: 12px 24px;width: fit-content;border-radius: var(--radius6);font-weight: bold}
.header .login a:hover{background-color: var(--first)}
.header .menu li{float: left;margin-left: 40px;font-weight: bold;}
.header .menu li:hover a{color:var(--second);text-decoration: underline}

.slider{height: 550px;background-size: cover;background-position: center;background-repeat: no-repeat;position: relative}
.slider:before{background-color:#082D38;--background-overlay:'' }
.slider .slider_opacity{background: var(--first_tranparent);width: 100%;height: 100%;overflow: hidden;position: absolute;top:0;left: 0;z-index: 1}
.slider .w3-third{position: relative;z-index: 3}
.slider .slider_content{color: var(--white);z-index: 3;position: relative}
.slider .slider_content h1{font-size: 54px}
.slider .slider_content h2{font-weight: 100;font-size: 24px}

.neden_biz p{font-size: 18px;margin-bottom: 30px}
.neden_biz .margin30{margin-bottom: 30px}
.neden_biz .icon .w3-col{width: 50px;background-color: var(--first);padding: 7px;margin-right: 15px}
.neden_biz .icon .w3-col{color: var(--white)}
.neden_biz .neden_img{border:7px solid var(--white)}
.nasil_calisiyoruz,.hizmetler{background-color: var(--first);color:var(--white)}
.nasil_calisiyoruz .icon svg{border-radius: var(--radiusCircle);fill: var(--white);background-color: var(--second);padding: 50px}
.nasil_calisiyoruz .icon{margin-bottom: 30px}
.nasil_calisiyoruz b{font-size: 18px}
.nasil_calisiyoruz b span{color: var(--second)}
.nasil_calisiyoruz .content b{font-size: 20px !important;}

.hizmetler .content_left{height: 245px;background: url("../images/lojistic_bg.jpg");background-repeat: no-repeat;color:var(--white);padding-top: 30px;padding-left: 20px;background-position-x:left;margin-right: 5px}
.hizmetler .content_left svg{margin-left: 7px;transform:rotateY(180deg);fill:var(--white)}
.hizmetler .content_left b,.hizmetler .content_right b{font-size: 35px}
.hizmetler .content_left p,.hizmetler .content_right p{width: 50%}
.hizmetler .content_right{height: 245px;background: url("../images/kargo_bg.jpg");background-repeat: no-repeat;padding-top: 30px;padding-left: 20px;background-position-x:left;margin-left: 5px;color:var(--black)}
.hizmetler .content_right svg{margin-left: 7px;fill:var(--black)}

.fiyatForm label{margin-bottom: .5rem;display: block}
.fiyatForm .selectpicker{border: 1px solid var(--darkgray);padding: .75rem 1.25rem;border-radius: var(--radius6);width: 100%;}
.fiyatForm .form_control{display: block;width: 100%;height: calc(1.5em + 1.25rem + 2px);padding: .375rem 1.25rem;background-color: var(--white);border: 1px solid var(--darkgray);border-radius: var(--radius6);}
.fiyatForm .bgdark{background-color: var(--darkgray)}
.fiyatForm .button{background-color: var(--second);color:var(--white);border:none;font-weight: bold}
.fiyatForm .button:hover{background-color: var(--first)}
.fiyatlama .content_right .btitle{font-size: 24px}
.fiyatlama .uyari{font-size: 14px;color:var(--iti-arrow-color)}

.footer{padding: 30px 0;color:var(--iti-arrow-color);text-align: center;background-color:var(--iti-hover-color)}

.hakkimizda_title{font-size: 36px;background-color: var(--first);color:var(--white);font-weight: bold}
.hakkimizda_title a{font-size: 14px;font-weight: 100}
.hakkimizda_title li{display: inline-block;margin-right: 5px}
.hakkimizda_title svg{margin-left: 15px}
.hakkimizda_top .sub_main_title{color:var(--second)}
.hakkimizda_bottom{background-color: var(--first);color:var(--white)}

.iletisim .content_left{background-color: var(--first);color:var(--white);padding: 50px;margin-right: 20px}
.iletisim .content_right{background-color: var(--first);color:var(--white);padding: 50px;margin-left: 20px}
.iletisim .icon svg{fill:var(--white)}
.iletisim .icon{float: left;width: 30px}
.iletisim .content_left b,.iletisim .content_right b{font-size: 30px;margin-bottom: 20px;display: block}

.uye_girisi .giris_content{float: none;margin: 0 auto}
.uye_girisi .message{padding: 10px}

.title svg{fill:var(--second);margin: 10px 0}
.form-control {display: block;width: 100%;height: calc(1.5em + 1.25rem + 2px);padding: .375rem 1.25rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: var(--white);background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
label {display: block;margin-bottom: .5rem;font-size: 13px;color: #acb0c3;letter-spacing: 1px;}
.btn{background-color: var(--second);color:var(--white);font-weight: bold;padding: 10px 20px}
.btn:disabled{background-color: var(--lightgray);color:var(--black)}
.selectpicker,textarea{border: 1px solid #bfc9d4;color: #3b3f5c !important;padding: .75rem 1.25rem;border-radius: 6px;width: 100%;}

.siparis .siparis_btn:hover{background-color: var(--first)}
.siparisler h1,.urunler h1{margin-bottom: 30px}
.siparisler div.dataTables_wrapper div.dataTables_length label,.siparisler div.dataTables_wrapper div.dataTables_filter label,.urunler div.dataTables_wrapper div.dataTables_length label,.urunler div.dataTables_wrapper div.dataTables_filter label{width: 50%;float: left;margin-bottom: 20px}
.siparisler #default-ordering_wrapper .row:nth-child(3),.urunler #default-ordering_wrapper .row:nth-child(3){margin: 20px 0;display: flex}
.mobilmenuContent,.mobil_menu{display: none}
/* TABLET - IPAD YATAY */
@media only screen and (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) {
    img {width:100%;height: auto}
    .mobil_menu{display: block}
}

/* TABLET - IPAD DİK */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait)  {
    img {width:100%;height: auto}
    .mobil_menu{display: block}
}

/* MOBIL CSS YATAY */
@media only screen and (max-width: 999px) and (orientation: landscape) {
    body{background-color: #212121;z-index: 9999;}
    body::after{background: url('../images/phone_device.jpg');background-position:  top; background-repeat:  no-repeat; background-size: cover; content:'';display: block;height: 500px}
    body div{display: none}
}

/* MOBIL CSS */
@media only screen and (max-width: 559px) {
    body {line-height: 1.5;overflow: hidden;position: relative}
    img {width:100%;height: auto}
    .mobil_menu{display: block}
    .header .menu,.login_menu{display: none !important;}
    .padding508{padding: 30px 8px}
    .slider{height: 250px}
    .slider .slider_content h1{font-size: 30px}
    .slider .slider_content h2{font-size: 14px}
    .slider .slider_img{display: none}
    .slider .slider_content{padding-top: 25px}
    .sub_main_title{font-size: 30px}
    .neden_biz .icon{margin-bottom: 10px}
    .neden_biz .margin30 .margin30{margin-bottom: 0}
    .main_title{font-size: 30px}
    .nasil_calisiyoruz .content .w3-third{margin-bottom: 15px}
    .fiyatForm .w3-half{margin-bottom: 5px}
    .hizmetler .content_left b, .hizmetler .content_right b{font-size: 20px}
    .hizmetler .content_left p, .hizmetler .content_right p{font-size: 13px;width: 70%}
    .hizmetler .content_right{margin-top: 20px;margin-left: 0}
    .mobilmenuContent{display:block;background-color: #f6f7fa;width: 100% !important;height: 100%;transition: 0.4s;top: 99px;position: absolute;overflow-y: auto;left: 105%;overflow-x: hidden;bottom: 50px;z-index: 99;padding-bottom: 60px;}
    .mobilmenuContent .login{display: block !important;width: 100%}
    .mobilmenuContent .login a{margin: auto;margin-top: 20px}
    .mobilmenuContent ul{margin: 20px;font-size: 20px}
    .mobilmenuContent ul li{margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid var(--darkgray)}
    .app-hamburger{appearance: none;background-color: transparent !important;border: 0;margin: 0;padding: 10px;float: right}
    .inner{display: block;height: 12px;position: relative;width: 22px;}
    .inner:before, .inner:after{;background: var(--black);content: "";display: block;height: 4px;left: 0;position: absolute;right: 0;top: 50%;transform-origin: center;transition: .15s;}
    .deactive .inner:before{transform:translateY(-150%) rotate(0)}
    .deactive .inner:after{transform:translateY(50%) rotate(0)}
    .active .inner:before{transform: translateY(-50%) rotate(-45deg)}
    .active .inner:after{transform: translateY(-50%) rotate(45deg)}
    .sr-only{clip: rect(0,0,0,0);border: 0;height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;}
    .iletisim .content_right{margin-left: 0}
    .iletisim .content_left,.iletisim .content_right{padding: 10px}
    .giris_content .w3-half{width: 50%}
    .hakkimizda_title{font-size: 24px}
}