@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@400;600;700&display=swap');


:root {
  --gri: #717171;
}

.mobileheader { display:none; }
.mobillogo { display:none; }
.wrapper{position: relative; min-height:100%; z-index: 1; overflow: hidden;}
.wrapper:before{ content:""; position: absolute; z-index: 1; left:80px; top:0; bottom:0; width: 1px; background: #707070; opacity: 0;}
.wrapper:after{ content:""; position: absolute; z-index: 1; right:80px; top:0; bottom:0; width: 1px; background: #707070; opacity: 0;}
.mobil_menu_close { position: absolute; right: 0px; top: 0px; font-size: 22px; cursor:pointer; z-index:22222; width:100px; height:100px; text-align:right; }
.mobil_menu_close i { color:#000; position:relative; top:10px; right:20px; }

.txtHk h2 { text-align:center; margin: 20px auto; font-family: 'Playfair Display', serif; font-weight: 700; text-align: center; font-size: 50px; }
.brand_list ul { list-style:none; margin:0px; padding:0px; }
.brand_list ul li { display:inline-block; display: inline-block; vertical-align: middle; font-weight: normal; font-size: 17px; padding: 0 10px; line-height: 45px; letter-spacing: 0px; position: relative; color:var(--bs-heading-color); border-bottom:1px solid #eee; }
.brand_list .ayrac { padding-left:20px; }
.brand_list li:nth-last-child(1) .ayrac { display:none; }

.slide_containerBorder:before{display: none; content:""; position: absolute; z-index: 2; left:80px; top:-97px; bottom:0; width: 1px; background: #707070; opacity: 0.5;}
.slide_containerBorder:after{display: none; content:""; position: absolute; z-index: 2; right:80px; top:-97px; bottom:0; width: 1px; background: #707070; opacity: 0.5;}

html, body { height: 100%; width: 100%; color: #505050; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; font-size:16px; }
body{ min-height: 100%;}
a{text-decoration: none!important; outline: 0!important;}
.gri{color:var(--gri);}
.txtBlack{color:#000!important;}
.content_main{padding-bottom:30px;}
header{padding:20px 0; text-align: center;  border-bottom:1px solid #000; overflow: hidden; z-index: 1; background: #fff;}
.logo{display: inline-block; vertical-align: middle; width: 70px;}
.logo img{display: block; width: 100%;}
.nav_menu{position: relative; z-index: 1; }
nav .menu{display: inline-block; vertical-align: middle; margin:0 30px; line-height: 56px; color:var(--gri); position: relative; text-shadow: 0 0 1px rgba(111,134,134,0.3);}
nav .menu:before{ color: #000; content: attr(data-hover); position: absolute; opacity: 0; text-shadow: 0 0 1px rgba(255,255,255,0.3); -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; }
nav .menu:hover:before, nav .menu:focus::before{-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); opacity: 1;}
nav .menu:after{content:""; position:absolute; left:0; bottom:-40px; opacity: 0; right:0; margin:auto; width: 18.4px; height: 15px; background: url("../img/hover_icon.png"); background-size:18.4px 15px; transition: all ease 300ms; -webkit-transition: all ease 300ms;}
nav .menu:hover:after{ bottom:-20px; opacity: 1;}

.menuAktif{color:#000!important; position: relative!important;}
.menuAktif:after{  content:""; position:absolute; left:0; bottom:-20px!important; opacity: 1!important; right:0; margin:auto; width: 18.4px; height: 15px; background: url("../img/hover_icon.png"); background-size:18.4px 15px; }

header .container{position: relative;}
.diller{position: absolute; right:80px; top:50%;-webkit-transform:translateY(-50%);transform: translateY(-50%); }
.diller:before{ content: ""; position: absolute; left:-25px; top:0; bottom:0; width: 1px; background: #ccc;}
.diller .dil{ display: inline-block; vertical-align: middle; border:1px solid #000; margin-left:5px; font-size: 14px; line-height:30px; border-radius: 3px; width: 32px; height: 32px; text-align: center; color:#000;}
.dilAktif{background: #000; color:#fff!important;}

input, select{line-height: 40px!important; border:1px solid #000!important; border-radius: 0!important;}
textarea{border:1px solid #000!important; border-radius: 0!important;}
button{border:none!important;}
.slide_container{height: 750px; position: relative;}
.slide_container:before{ content:""; position: absolute; left:0; bottom:60px; right:0; z-index: 1; height: 1px; background: #707070; opacity: 0.5;}
.slogan_container{position: absolute; left:50%; top:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);z-index: 1; font-family: 'Playfair Display', serif;  color:#000; text-align: center; letter-spacing: 5px;}
.slogan_container .slogan1{font-size: 30px; animation-name: fade; animation-duration: 4s; animation-direction: normal; }
.slogan_container .slogan2{font-size: 40px; animation-name: fade2; animation-duration: 8s; animation-direction: normal; }
.slogan_container .slogan3{font-size: 50px; font-weight: 700; animation-name: fade3; animation-duration:12s; animation-direction: normal; }

@keyframes fade{ 0%,45% { opacity: 0; }
    100%{opacity: 1;}
}
@keyframes fade2{ 0%,45% { opacity: 0; }
    100%{opacity: 1;}
}
@keyframes fade3{ 0%,45% { opacity: 0; }
    100%{opacity: 1;}
}
.particle{position: absolute; inset:0; z-index: 3; mix-blend-mode: multiply;}
.carousel-item{height: 750px;} 
a.smedia{position: absolute; left:20px; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 3;} 
.smedia i{display: block; color:#000; font-size:20px; margin:auto auto 10px auto; text-align: center;}
.smedia span.linkedinText{ writing-mode:vertical-lr; transform: rotate(180deg); color:#000;}
.carousel-indicators{bottom:34px; z-index:5!important;}
.carousel-indicators button{ width: 24px!important; height: 24px!important; opacity: 1!important; border-radius: 3px;}
.carousel-indicators .active{background: #000!important;}
.carousel-indicators [data-bs-target]{box-sizing: inherit!important; background-clip: inherit!important; margin:0 10px!important;}


.p50{padding:50px 0;}
.mainTitle{display: inline-block; font-weight: 700; font-size: 24px; letter-spacing: 1px;}
.titleBorder{border:1px solid #000; padding:5px 20px; border-radius: 3px;}
.titleSecond{ font-size:50px; margin:20px auto; font-family: 'Playfair Display', serif; font-weight: 700; text-align: center;}
.font2{font-family: 'Playfair Display', serif; letter-spacing:0.5px;}
.txtHk{line-height:40px; font-size: 20px; }
.siyah{color:#000;}
.atasoz{font-size: 30px; font-weight: 700; margin-left:10px;}
.flex_container{display: flex; justify-content: center;}
.quotes img{display: block; height: 80px; margin:auto;}
span.afrika{display: block; margin-top:20px; font-family: 'Poppins', sans-serif; font-size: 20px; color:#C4C4C4; letter-spacing:5px; }

.bg_fixed{display: block; height: 450px; background: url("../img/bg_fixed.jpg") no-repeat top; background-attachment: fixed; background-size: cover;}


.container_markalar{padding-right:50px;}
figure.resim{display: block; width: 100%; margin:auto; position: relative;}
figure.resim img{display: block; width: 100%;}

figcaption.icerik{position: absolute; inset:10px; background: #fff; padding:20px; opacity: 0; -webkit-transition: all ease 500ms; transition: all ease 500ms;}

.marka_box{display: flex;}
.marka_box:hover .icerik{opacity: 1;}
.markaBasliklar{writing-mode:vertical-lr; transform: rotate(180deg); margin-right: 10px;}
.markaBasliklar .baslik{font-size: 20px; font-weight: 700; margin:0; padding:0; }

span.logo{display: block; width: 200px; margin-bottom:20px;}
span.logo img{display: block; width: 100%;}

.butonGenel{background: #000; color:#fff; text-align: center; margin:10px auto; padding:10px 15px; font-size: 14px;}

.hizmetBox{display: block; color:#000; }
.hizmet_container .row >:nth-child(2n+2){padding-left:70px; border-bottom:1px solid #f1f1f1; }
.hizmet_container .row >:nth-child(2n+1){padding-right:70px; border-bottom:1px solid #f1f1f1; border-right:1px solid #f1f1f1;}
.hizmet_container .row >:nth-child(2n+7){border-bottom:none;}
.hizmet_container .row >:nth-child(2n+8){border-bottom:none;}
.hizmetBox_container{ padding:50px 0;}


.hizmetlerMain .hizmet_container .row > div{padding-left:0; padding-right:0; border:none; border-bottom:1px solid #f1f1f1;}
.hizmetlerMain .hizmet_container .row >:last-child{border-bottom:none;}

.hizmetBox .flex_container{justify-content: flex-start; align-items: center;}
span.icon{width:48px; margin-right:10px;}
span.icon img{display: block; width: 100%;}
h3.baslik{font-size:20px; margin:0; padding:0; font-weight: 700;}
span.icerik{display: block; margin:20px auto;}
span.incele{font-size:14px; font-weight: 700;}
span.incele i{ font-size: 12px; padding-left:5px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent;}

.hizmetBox:hover i, span.incele i:focus, span.incele i:active:before{ -webkit-animation-name: aGeri; animation-name: aGeri; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}


@-webkit-keyframes aGeri {
    16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); }
    33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); }
    49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); }
    66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); }
    83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); }
    100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes aGeri {
    16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); }
    33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); }
    49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); }
    66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); }
    83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); }
    100% { -webkit-transform: translateX(0); transform: translateX(0); }
}


.banner{height: 370px; width:100%;  }
.banner_hk{background: url("../img/hakkimizda_banner.jpg") no-repeat center ; background-size:cover; background-attachment: fixed; }
.banner_hz{background: url("../img/hizmetler_banner.jpg") no-repeat center ; background-size:cover; background-attachment: fixed; }
.banner_ik{background: url("../img/ik_banner.jpg") no-repeat center ; background-size:cover; background-attachment: fixed; }
.banner_iletisim{background: url("../img/iletisim_banner.jpg") no-repeat bottom ; background-size:cover; background-attachment: fixed;}
.cizgi{display: block; width: 1px; height: 60px; margin:20px auto; background: #707070; opacity: 0.5; }
.griBg1{background: #E3E3E3;}
.griBg2{background: #CBCBCB;}
.griBg3{background: #B1B1B1;}
.griBg4{background: #8D8D8D;}
.griBg5{background: #555555;}
.infoBox{width:20%!important; text-align:center;}
.infoBox .cizgi{height: 30px;}
.infoBox p{ text-align: left; font-size: 14px; width:180px; margin: auto;}
.tarihBox{width:180px; height: 60px; margin:auto; border-radius: 5px; color:#fff; font-weight: 700; line-height: 60px;}
.h4Ref{display: inline-block; vertical-align: middle; font-weight: normal; font-size: 16px; margin:0 10px; line-height:45px; letter-spacing:1.5px; position: relative;}
.satir{border-bottom:1px solid rgba(112,112,112,0.20);}
.satir:last-child{border:none;}

.markalarMain .markaCol .resim{width: 100%; height:180px; margin:auto auto auto 0; position: relative; overflow: hidden;}
.markalarMain .markaCol .resim img{display: block; width: 100%; position: absolute; left:50%; top:50%; webkit-transform:translate(-50%,-50%); transform: translate(-50%,-50%);}
.rowMarka{border-bottom:1px solid #f1f1f1; padding:40px 0;}
.rowMarka:last-child{border-bottom:none;}
.markaCol .logo{margin-bottom:10px;}
.markaCol .altBaslik{font-weight: 700; margin-bottom:10px;}
.markaCol .flex_container > div{width:50%; align-items: center;}
.butonAlani{text-align: right;}
.butonAlani a{margin:0!important; position: relative; top:6px;}
.kodaBg{background: #92b823;}
.ikonaBg{background: #FFC300;}
.kenobiBg{background: #333;}

.cvYukle{line-height: normal!important;}
.btnFileUpload{ background:none; border:1px solid #000!important; line-height: 36px; font-size: 14px; padding:0 0 0 10px!important; margin:0!important;}
.btnFileUpload i{background: #333; color:#fff; width:40px; height:40px; margin:auto 0 auto 10px; font-size:20px; line-height:36px; }
.right{text-align:right;}

.iletisimBilgi{background: #f1f1f1; padding:40px;}
.harita iframe{width:100%; height: 100%;}
.iletisim .info{color:#000; }
.iletisim .info .phone a{ display: block; color:#000;}

footer{position: relative; left:0; right:0; bottom:0;}
.footerUst{background:#000; padding:40px 0;}
.footerLogo{display: block; width:133px;}
.footerLogo img{display: block; width: 70%; margin: 10px auto; }
.footerAlt p{line-height: 32px; margin:0;}
.footerMenu{display: block; color:#fff; line-height: 30px;}
.footerBox .info, .iletisim .info{display: flex; color:#fff; align-items: center; align-content: center;}
.footerBox .linkedin i, .iletisim .linkedin i{ margin-left:5px;}
.footerBox .info i,.iletisim .info i {font-size: 18px; position: relative; top:0; margin-right:5px; height: 32px; line-height: 32px;}
.footerBox .info .phone a, .iletisim .info .phone a{ display: block; color:#fff;}

@media only screen and (max-width: 1440px) {
 .wrapper:before, .wrapper:after {display: none; }
 .slide_containerBorder:before, .slide_containerBorder:after{display: block;}
 .slide_container, .carousel-item{height:600px;}
 .slogan_container .slogan1{font-size:20px;}
 .slogan_container .slogan2{font-size:24px;}
 .slogan_container .slogan3{font-size:26px;}
 .titleSecond{font-size:40px;}
 .txtHk{font-size: 18px;}

}
@media only screen and (max-width:1366px){
   nav .menu{margin:0 15px; }
   figcaption.icerik{ padding:16px; font-size:14px; }
   .h4Ref{letter-spacing:0px;}
   .markalarMain .markaCol .resim{height: 100%;}
}

@media only screen and (max-width: 991px) {
    .mobileheader { display:block; }
    .mobile_menu_open { right: 8px; position: absolute; top: 17px; font-size: 22px; }
    .mobileheader img { height:70px; }
    .infoBox { width:50%!important; margin-bottom:30px; }
    .hizmetlerMain .hizmet_container .row > div { padding-left:15px; padding-right:15px; }
    .markalarMain .markaCol .resim { height:500px; margin-bottom:15px; }
    .harita iframe { height:300px; }
    .hizmet_container .row >:nth-child(2n+2) { padding-left:15px; padding-right:15px; }
    .nav_menu { position:fixed; top:0px; min-width:300px; height:100%; left:-300px; display:block; float:initial; background:#fff; z-index:888; transition:.3s; }
    nav .menu { float:initial; display:block; text-align:left; }
    nav .logo { display:none; }
    nav .menu:before { display:none; }
    nav .menu:after { display:none; }
    .mobillogo { display:block; }
    .open_menu_bg.active { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.4); z-index:222; }
    .mobillogo { text-align:left; border-bottom:1px solid #eee; padding: 20px; }
    .mobillogo img { width:100px; }
    .footerBox { margin-bottom:15px; }
}

@media only screen and (max-width: 767px) {
    .markalarMain .markaCol .resim { height:350px; }
}

@media only screen and (max-width: 550px) {
    .tarihBox { width:100%; }
    .infoBox p { width:100%; }
    .infoBox { width:100%!important; }
}


@media only screen and (max-width: 480px) {
    .markalarMain .markaCol .resim { height:250px; }

    .no-mobile {display: none !important};
    .footerBox img{ width: 48% !important; }
    .footerUst{ padding: 22px 0 !important; }
}

.nav_menu.active { left:0px; }