@font-face {
    font-family: Gotham;
    src: url('UI/font/Gotham-Light.otf') format('otf');
    font-weight: 300;
}

@font-face {
    font-family: Gotham;
    src: url('UI/font/Gotham-Medium.otf') format('otf');
    font-weight: 500;
}

@font-face {
    font-family: Gotham;
    src: url('UI/font/Gotham-Ultra.otf') format('otf');
    font-weight: 700;
}


body, html{
    font-size:16px;
    font-family: Gotham,Helvetica;
    font-weight: 300;
    font-style: normal;
    height: 100%;            /* Yükseklik tanımlı olmalı */     /* Yatay taşkını gizler */
}

#body-wrapper{
    position: relative;
    overflow-x: hidden;
}

.detail-btn{
    text-transform: uppercase;
    padding-right:45px;
    padding-left:45px;
    font-family: Gotham,Helvetica;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    border-radius: 12px;
    letter-spacing: 1px;
    color:#090A45;
}
.page-btn{
    width:230px;
    text-align: center;
}

.section-img{
    width: 100%;
}

h2{
    font-family: Gotham,Helvetica;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 30px;
}

h3{
    font-family: Gotham,Helvetica;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 30px;
    font-size: 20px;
}
b{
    font-weight: 600;
}
p{
    margin-bottom: 30px;
}
section{
    position: relative;
    overflow-x: visible;
}

.ara-ucgen {
    position: absolute;
    width: 100%;
    bottom:100%;
    z-index: 9999;
}
.ara-ucgen img{
    width: 100%;
}


.btn-dark.detail-btn{
    color:white;
    background: #090a45;
    border-color:#090a45;
    transition: background-color ease-out 300ms;
}

.btn-dark.detail-btn:hover{
    background: black;
}

.btn-success.detail-btn {
    color: #090a45;
    background-color: #b6e94e;
    border-color: #b6e94e;
    transition: background-color
    ease-out 300ms;
}

.btn-success.detail-btn:hover {
    background-color: #8db63d;
}

span.blog-tag{
    display: inline-block;
    padding:4px 16px;
    background:white;
    border: 1px solid #090a45;
    border-radius: 12px;
    margin-right: 16px;
}



/********************* HEADER **********************/
header{
    position: relative;
    z-index: 2;
}
header #header{
    padding:30px 30px 30px 30px  !important;
    /*background-color: #141948;*/
    position: absolute;
    left:0;
    width:100%;
}
header#header2 #header{
    padding:30px 30px 30px 30px  !important;
    position: relative;
    background: #090a45;
}

header #header .header-logo{
    max-width: 210px;
    float:left;
}

header #header .header-logo img{
    width: 100%;
}

header #header .lang-selector{
    float:right;
    height:46px;
    padding:10px 0 0 10px;
    position:relative;
    z-index:2;
}
header #header .lang-selector a{
    text-decoration:none;
    color:white;
}

header #header .lang-selector a.bold{
    font-weight: 600;
}
header #header .lang-selector a:first-child{
    margin-right:6px;
}
header #header .menu{
    float:right;
    width:160px;
    height:46px;
}
header #header .menu-holder{
    height:100%;
    position: relative;
    float: right;
}

header #header .ucgen{
    float:left;
    position: relative;
    height:100%;

}

header #header .triangle-holder{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}

header #header .triangle {
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 5px 0 5px 8.7px;
   border-color: transparent transparent transparent #FFFFFF;
   transform: rotate(180deg);
   transition: transform ease-out 300ms;
   
}
header #header .menu.acik .triangle{
    transform:rotate(0deg);
}


header #header .menu .text{
    color:#FFFFFF;
    padding:0 16px;
    float:left;
    position: relative;
    top:50%;
    transform: translateY(-57%);
    cursor: pointer;

}
header #header .menu .circles{
    float:left;
    padding-top:2px;
    position: relative;
    z-index: 2;
}
header #header .menu .yuvarlak{
    width: 12px;
    height:12px;
    background: #FFFFFF;
    border-radius: 12px;
    margin-bottom:3px;

}

header #header .menu .list-holder{
    position: absolute;
    left:0;
    transform: translateX(-110%);
    width: max-content;
    font-size: 14px;
    font-weight: 700;
    top: 12px;
    overflow: hidden;
    margin-top:-4px;
}
header #header .menu .list-holder ul{
    list-style: none;               /* Noktaları kaldır */
    margin: 0;                      /* Varsayılan dış boşlukları sıfırla */
    padding: 0; 
    transform: translateX(100%);
    transition: transform ease-out 300ms;
}
header #header .menu.acik .list-holder ul{
    transform: translateX(0);
}
header #header .menu .list-holder li{
    display: inline-block;
    color:white;
    margin-right: 26px;
    transition: opacity ease-out 300ms;
    padding-top:5px;
}

header #header .menu .list-holder li .proxio-logo img{
    max-width: 64px;
    margin-top:-5px;
    z-index:99999;
}

header #header .menu .list-holder li:hover{
    opacity: 0.7;
}

header #header .menu .list-holder li a{
    cursor: pointer;
    text-decoration: none;
    color:inherit;
}

/********* SLİDER ******/
#slider{
    position: relative;
}

#slider > .holder{
}

#slider .slide{
    position: relative;
}

#slider .slide  img{
    width: 100%;
}

#slider .slide .slide-content{
    position: absolute;
    top:300px;
    left:auto;
    right: 110px;
    color:white;
    text-align: right;
    
}

#slider .slide .slide-content .logo{
    width: 325px;
    float:right;    
}
#slider .slide .slide-content p{

    text-align: right;
    margin-bottom:30px;
    font-size:26px;
    font-weight:300;
}

#slider .slick-counter{
    color:white;
    display: inline-block;
    transform: rotate(-90deg);
    width: auto;
    position: absolute;
    top:209px;
    left:30px;
    font-size: 20px;
}

#slider .slick-dots{
    transform: rotate(-90deg);
    display: inline-block;
    width: auto;
    position: absolute;
    top:370px;
    bottom:auto;
    left:-78px;
}

#slider .slick-dots .slick-active button{
    border:1px solid white;
}

#slider .slick-dots button{
    background: #a4eb19;
    border-radius: 20px;
}

#slider .slick-dots button::before{
    display: none;
}

#slider .slick-dots li{
    margin-left:16px;
}

#slider .slick-dots li:nth-child(1) { opacity: 0.1667; } /* 1/6 */
 
#slider .slick-dots li:nth-child(2) { opacity: 0.3333; } /* 2/6 */
#slider .slick-dots  li:nth-child(3) { opacity: 0.5000; } /* 3/6 */
#slider .slick-dots  li:nth-child(4) { opacity: 0.6667; } /* 4/6 */
#slider .slick-dots  li:nth-child(5) { opacity: 0.8333; } /* 5/6 */
#slider .slick-dots  li:nth-child(6) { opacity: 1.0000; } /* 6/6 */

.slick-dotted.slick-slider{
    margin-bottom:0 !important;
}

#slider .social{
    position: absolute;
        top: 520px;
    left: 33px;

}

#slider .social a{
    display: block;
    width: 30px;
    margin-bottom:16px;
}

#slider .social a img{
    width: 100%;
}

/********* Video SLİDER ******/
#video_slider{
    position: relative;
}

#video_slider > .holder{
    background: #141948;
}

#video_slider .slide{
    position: relative;
    background: #141948;
    background: linear-gradient(180deg, rgba(20, 25, 72, 0.63) 0%, rgba(20, 25, 72, 0.63) 50%, rgba(20, 25, 72, 1) 86%);
}

#video_slider .slide  img{
    width: 100%;
    position: relative;
    z-index: -1;
}

#video_slider .video {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top:70px;
    left:0;
    z-index: -2;
    max-height: 800px;
    -webkit-box-shadow: inset 0px 0px 34px 22px #141948;
    box-shadow: inset 0px 0px 34px 22px #141948;
}
#video_slider .video .inner-shadow{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    z-index:1;
}

#video_slider .video video {
    width: 100%;
    height: auto;
    display: block;
    z-index: -1;
}

#video_slider .video .video-img {
    width: 100%;
    height: auto;
    display: block;
    z-index: -1;
}

#video_slider .slide .slide-content{
    position: absolute;
    top:325px;
    left:auto;
    right: 125px;
    color:white;
    text-align: right;
    z-index: 3;

}

#video_slider .slide .slide-content .logo{
    width: 100%;
    text-align: right;
    position: relative;
    right:0;
}
#video_slider .slide .slide-content .logo img{
    max-width: 325px;
    width: 100%;
    float: right;
}
#video_slider .slide .slide-content p{

    text-align: right;
    margin-bottom:30px;
    font-size:40px;
    font-weight:500;
}

#video_slider .slide .slide-content p img{
    max-width: 200px;
    float:right;
}

#video_slider .slick-counter{
    color:white;
    display: inline-block;
    transform: rotate(-90deg);
    width: auto;
    position: absolute;
    top:170px;
    left:24px;
    font-size: 20px;
}

#video_slider .slick-dots{
    transform: rotate(-90deg);
    display: inline-block;
    width: auto;
    position: absolute;
    top:410px;
    bottom:auto;
    left:-159px;
}

#video_slider .slick-dots .slick-active button{
    border:1px solid white;
}

#video_slider .slick-dots button{
    background: #a4eb19;
    border-radius: 20px;
}

#video_slider .slick-dots button::before{
    display: none;
}

#video_slider .slick-dots li{
    margin-left:16px;
}

#video_slider .slick-dots li:nth-child(1) { opacity: 0.1667; } /* 1/6 */

#video_slider .slick-dots li:nth-child(2) { opacity: 0.3333; } /* 2/6 */
#video_slider .slick-dots  li:nth-child(3) { opacity: 0.5000; } /* 3/6 */
#video_slider .slick-dots  li:nth-child(4) { opacity: 0.6667; } /* 4/6 */
#video_slider .slick-dots  li:nth-child(5) { opacity: 0.8333; } /* 5/6 */
#video_slider .slick-dots  li:nth-child(6) { opacity: 1.0000; } /* 6/6 */

.slick-dotted.slick-slider{
    margin-bottom:0 !important;
}

#video_slider .social{
    position: absolute;
    top: 629px;
    left: 33px;

}

#video_slider .social a{
    display: block;
    width: 30px;
    margin-bottom:16px;
}

#video_slider .social a img{
    width: 100%;
}


/*************** SECTİON TEKNOLOJİ *****************/
#teknoloji{
    background: #141948;
    color:white;
    padding-bottom: 193px;
    font-size:26px;
}
#teknoloji .section-img{
    margin-top:-172px;
    z-index: 2;
    position: relative;
}


/*************** SECTİON ABOUT US *****************/

#about-us{
    background: white;
    color:#0a0b42;
    text-align: right;
    padding-top:30px;
    padding-bottom: 193px;
    font-size:26px;
}

#about-us .section-img{
    margin-top:15px;
    z-index: 99999999999999999999;
    position: relative;
}

#about-us .referanslar{
    position: relative;
    margin-top:50px;
    text-align: center;
    display: none;
}

#about-us .referanslar .referans{
    display: inline-block;
}
#about-us .referanslar .referans img{
    max-height: 105px;
}

#about-us .referanslar .slick-prev:before {
    content: '<';
}

#about-us .slick-prev, 
#about-us .slick-next{
    top:41%;
}

#about-us .referanslar .slick-next:before {
    content: '>';
}

#about-us .slick-prev:before, 
#about-us .slick-next:before
 {
    font-family: 'arial';
    font-size: 50px;
    line-height: 1;
    opacity: 1;
    color: #0a0b42;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*************************** SECTİON SECTORS ***************************/
#sectors{
    background: #b6e94e;
    color:#0a0b42;
    padding-top:30px;
    padding-bottom: 193px;
}
#sectors .col{
    text-align: center;
}
#sectors .row-cols-5{
    padding:30px 0;
}
#sectors .ust-border{
    border-top:1px solid #090a45;
    margin-top:30px;
    padding-top:30px;
}
#sectors img.sector-img{
    width: 100%;
    margin-bottom:16px;
    max-width: 140px;
}

#sectors .sector-text{
    font-weight: 500;
    font-size: 20px;
    display: block;
    text-transform: uppercase;
}
#sectors .detail-btn{
    margin-top:16px;
}
#sectors .footer-btn{
    text-align: right;
}
#sectors .col > a{
    text-decoration: none;
    color:inherit;
}

#sektor-page .accordion-body .col-md-4 img{
    width:100%;
}






/*********************** SECTİON BLOG ***************************/
#blogs{
    background: white;
    color:#0a0b42;
    padding-top:30px;
    padding-bottom: 193px;
}


#blogs .blog{
    max-width: 430px;
    margin-bottom:30px;
}
#blogs .blog .inner{
    background-color: #f8f8f8;
    color:#0a0b42;
    padding:20px;
    box-shadow: 8px 7px 11px 0px rgba(10,11,66,0.75);
    -webkit-box-shadow: 8px 7px 11px 0px rgba(10,11,66,0.75);
    -moz-box-shadow: 8px 7px 11px 0px rgba(10,11,66,0.75);
    max-width: 300px;
    margin: 0 auto;
}

#blogs .blog .inner .btn-holder{
    text-align: center;
}

#blogs .blog .detail-btn{
    color:#090a45;
    background-color: #b6e94e;
    border-color:#b6e94e;
    transition: background-color ease-out 300ms;
}

#blogs .blog .detail-btn:hover{
    background-color: #8db63d;
}

#blogs .blog h2{
    font-size: 16px;
    font-weight: 700;
    color:#0a0b42;
}

#blogs .blog p{
    color:#0a0b42;
    font-size: 13px;
    font-weight: 400;
}

#blogs .blog img{
    width: 100%;
    margin-bottom:16px;
}


#blogs .slick-prev:before {
    content: '<';
}

#blogs .slick-prev, 
#blogs .slick-next{
    top:41%;
}

#blogs .slick-next:before {
    content: '>';
}

#blogs .slick-prev:before, 
#blogs .slick-next:before
 {
    font-family: 'arial';
    font-size: 50px;
    line-height: 1;
    opacity: 1;
    color: #0a0b42;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}





/************************ SEKTÖR PAGE *********************/
#sektor-page{
    color: #0a0b42;
    padding:50px 0 100px 0  ;
    margin-bottom:60px;
}
#sektor-page h3 small{
    color: rgba(10, 11, 66, .7);
}

#sektor-page .accordion-item{
    margin-top:50px;
    margin-bottom:50px;
    border:none;
}

#sektor-page .accordion-item h2{
    border:none;
    background:#b6e94e;
    text-transform:uppercase;
    padding-left:60px;
    position:relative;
    
}
#sektor-page .accordion-item h2 button{
    background:#b6e94e;
    text-transform:uppercase;
    font-weight:700;
    color: #0a0b42;
}

#sektor-page .accordion-item h2 button:focus{
    box-shadow:none!important;
}


#sektor-page .accordion-item h2 .avatar{
    display:block;
    position:absolute;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background: #b6e94e;
    overflow: hidden;
    top:50%;
    transform:translateY(-50%);
    left:-10px;
    padding:16px;
}

#sektor-page .accordion-item h2 .avatar img{
    width:100%;
}

#sektor-page .accordion-item .accordion-body{
    padding-top:30px;
}

#sektor-page .accordion-item .accordion-body b{
    font-weight:600;
}


/********************* İLETİŞİM PAGE ***********************/
#iletisim-page{
    color: #0a0b42;
    padding:50px 0 100px 0  ;
    margin-bottom:60px;
}
#iletisim-page .form-area td{
    padding:16px 0;
    vertical-align:center;
    font-weight:600;
}

#iletisim-page .form-area td.vertical-top{
    vertical-align:top;
}

#iletisim-page .form-area td:first-child{
    min-width: 150px;
    max-width: 150px;
}

#iletisim-page .form-area td:nth-child(2){
    width: 100%;
}

#iletisim-page .form-area table{
    width:100%;
}

#iletisim-page .form-area td .form-control {
    border: 1px solid #090a45;
    border-radius: 12px;
}

#iletisim-page .footer-btn{
    text-align:right;
    padding:16px 0;
}

#iletisim-page .map{
    margin-top:30px;
}

#iletisim-page .map iframe{
    width:100%;
}




/************************ TEKNOLOJİ PAGE ***********************/
#teknoloji-page{
    color: #0a0b42;
    padding:50px 0 100px 0  ;
    margin-bottom:60px;
}

#teknoloji-page h3{
    border:none;
    background:#b6e94e;
    text-transform:uppercase;
    padding:14px 8px;
    position:relative;
}

#teknoloji-page .col-md-4 img{
    width: 100%;
}




/************************ HAKKIMIZDA PAGE ***********************/
#hakkimizda-page{
    color: #0a0b42;
    padding:50px 0 100px 0  ;
    margin-bottom:60px;
}

#hakkimizda-page img{
    width: 100%;
}
#hakkimizda-page h3{
    border:none;
    background:#b6e94e;
    text-transform:uppercase;
    padding:14px 8px;
    position:relative;
}


/************************ Proxio PAGE ***********************/
#proxio-page{
    color: #0a0b42;
    padding:50px 0 100px 0  ;
    margin-bottom:60px;
}

#proxio-page img{
    width: 100%;
}

ul .check-btn{
    width: 25px !important;
    height:25px;
}

#proxio-page .see-beyond{
    max-width: 200px;
}




/************** DÜZ SAYFA ****************/
.duz-sayfa-icerik .gorsel-holder{
    border-radius: 16px;
    overflow: hidden;
}
.duz-sayfa-icerik .gorsel-holder img{
    width: 100%;
}



/****************** BLOG PAGE****************/
#blog-page{
    color: #0a0b42;
    padding:50px 0 100px 0  ;
    margin-bottom:60px;
}

#blog-page h2{
    font-weight: 900;
}
    /************************* FOOTER *************************/
#footer{
    background: #090a45;
    color:white;
    padding-top:30px;
    padding-bottom: 193px;
}

#footer .ust{
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #b6e94e;
    margin-bottom: 35px;
    padding-bottom:16px
}
#footer .logo{
    max-width: 200px;
    width: 100%;
    margin-bottom: 16px;
}
#footer h2{
    margin-bottom: 4px;
    font-size: 16px;
}

#footer ul{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
#footer ul li{
    margin:0;
    padding:2px 0;
}

#footer ul li a{
    text-decoration: none;
    color:white;
}

#footer .social{
    text-align: left;
}
#footer .social a{
    display: inline-block;
    margin-right:8px;
}

#footer .social a img{
    max-width: 24px;
}
#footer .footer-logo{
    text-align: right;
}
#footer .footer-logo img{
    max-width: 120px;
    width: 100%;
}


@media (max-width: 1399.98px) {
    #teknoloji .section-img{
        margin-top:-130px;
    }

    #about-us .section-img{
        margin-top:-12px;
    }
}

@media (max-width: 1199.98px) {
    #video_slider .slick-dots{
        transform: rotate(0deg);
        top:auto;
        bottom:70px;
        left:50%;
        transform:translateX(-50%);
    }

    #video_slider .slick-counter{
        display: none;
    }
    #video_slider .slide .slide-content .logo{
        display: none;
    }

    #video_slider .social{
        top:auto;
        bottom:15px;
        left:50%;
        transform:translateX(-50%);
    }

    #video_slider .social a{
        margin-bottom: 0;
        display: inline-block;
        margin-right:16px;
    }

    #video_slider .social a:last-child{
        margin-right:0;
    }

    #video_slider .slide .slide-content{
        top:auto;
        bottom:125px;
        left:50%;
        right:auto;
        transform: translateX(-50%);
        text-align: center;
    }
    #video_slider .slide .slide-content p{
        text-align: center;
    }
    #video_slider .video{
    }


    #teknoloji .section-img{
        margin-top:-90px;
    }

    #about-us .section-img{
        margin-top:24px;
    }

}




@media (max-width: 991.98px) { /* Bootstrap breakpoint netliği için */
    header #header .menu .list-holder{
        position: absolute;
        left:210%;
        transform: translateX(0);
        background-color: green;
        width: 320px;
        top: -10px;
        transition: left ease-out 300ms;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
        background-color: #141948;
        border:1px solid white;
    }
    header #header .menu.acik .list-holder{
        left:-145px;
    }
    header #header .menu .list-holder ul{
        padding-top:100px;
        padding-bottom:30px;
        
    }
    header #header .menu.acik .list-holder ul{
        transform: translateX(0);
        z-index: 2;
        position: relative;
    }
    header #header .menu .list-holder li{
        display: block;
        color:white;
        margin-right: 0;
        margin-bottom:14px;
        text-align: center;
        transition: opacity ease-out 300ms;
    }

    #video_slider .slide .slide-content{
        zoom:.4;
        bottom:150px;
    }

    #teknoloji .section-img{
        margin-top:-16px;
        z-index: 1;
    }

    #about-us .section-img{
        margin-top:83px;
    }
}

@media (max-width: 767.98px) {
    .order1{
        order: 1;
    }
    .order2{
        order: 2;
    }
   header #header .header-logo{
        max-width: 140px;
    } 

    #teknoloji, #about-us{
        text-align: center;
    }

    #about-us .section-img{
        margin-top:34px;
    }

    #about-us .slick-prev, 
    #about-us .slick-next{
        display: none !important
    }

    #about-us .referanslar .referans img{
        max-height: 70px;
    }

    #sectors .col-md-3{
        margin-bottom:24px;
    }


    #blogs .blog{
        max-width:760px;
        width: 100%;

    }
    #sectors .footer-btn{
        text-align: center;
    }
    #sectors .col{
        text-align: center;
        zoom:0.7;
    }

    #footer *{
        text-align: center !important;
    }
    
    #about-us .ara-ucgen{
        transform:translateY(4px);
    }

    #video_slider .video{
        width: 100%;
    }
    #video_slider .slick-dots{
        display: none !important;
    }

    #blogs .slick-arrow{
        display: none !important;
    }

    #video_slider .social{
        display: none;
    }

    #video_slider .slide img{
        height:500px;
    }
    #video_slider .video .inner-shadow{
        height:500px;
    }

    #video_slider .slide .slide-content{
        bottom:0 !important;
    }

    #video_slider .slide .slide-content .logo{
        display: block;
        max-width: 325px;
        margin:0 auto;
    }

    #video_slider .slide .slide-content .logo img{
        text-align: center;
        width: 100%;
        height: auto;
    }

    #video_slider .slide .slide-content p img{
        max-width: 200px;
        height: auto !important;
        float:none;
        margin: 0 auto;
    }

    #video_slider .slide .slide-content p{
        font-size: 16px !important;
    }
    


}


@media (max-width: 575.98px) {
    header #header .header-logo {
        max-width: 100px;
        padding-top:10px;
    }

    #video_slider .slick-dots{
        display: none !important;
    }

    #blogs .slick-arrow{
        display: none !important;
    }

    #video_slider .social{
        display: none;
    }
    #about-us .ara-ucgen{
        transform:translateY(9px);
    }
    #footer .footer-logo{
        padding-top:24px;
    }
}


@media (max-width: 450px){
    .ara-ucgen{
        transform:translateY(3px);
    }
}