@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Poppins:wght@400;500;700&display=swap');
:root {
   --mainColor: #FF3A00;
  --mainColorBg: #FF3A00;
}
.mobileButton{display: none !important;}
html, body { height: 100%;}
html, #coatronics-body{color:#fff; font-size:16px; line-height: 1.7; padding:0; margin:0; font-family: "Poppins", sans-serif;}
#coatronics-body{height: 100%; min-height: 100%;}
#coatronics-body a{text-decoration: none; border: none; }
.wrapper{position: relative; min-height: 100%; overflow: hidden;}
.mainContent{background: #444444;  background: linear-gradient(160deg,rgba(68, 68, 68, 1) 0%, rgba(54, 54, 54, 1) 32%, rgba(255, 57, 1, 1) 100%);}
.carousel-item img{mix-blend-mode: lighten;}
.pdlr50{padding:0 50px;}
.pdbt50{padding:50px 0;}
.pd50{padding:50px;}
.t40{top:40px;}
header{position: absolute; left:50px; top:0; right:50px; padding:30px 0px; z-index: 5; border-bottom:1px solid rgba(255, 255, 255, 0.3);}
.logo{display: block; width:447px;}
.title{font-size:35px; font-weight: 700;}
.title20{font-size:20px;}
.title24{font-size:24px;}
.title45{font-size:45px;}
.subProductInfo h5, .subProductInfo h3{ font-size: 20px; display: block; }
.pageIntroCode p{ max-width: 1150px; margin: 5px auto; }
.pageIntroCodeAffter p{ max-width: 700px; margin: 5px auto; }
.subProductInfo h5 strong, .subProductInfo h3 strong{ font-size: 24px; display: block; width: 100%;}
.subProductInfo ul{ list-style: none; padding: 0; }
.subProductInfo ul li { position: relative; padding-left: 24px; margin-top: 1.5rem !important; margin-bottom: 1rem !important;}
.subProductInfo ul li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 19px; background-image: url("../img/chevron-right.svg"); background-repeat: no-repeat; background-size: contain; }

.detailContent h3{ font-weight: 700; color: #FF3A00; font-size: 20px; margin-bottom: .5rem!important; }


.section-content h3 { color: #ff4d26; font-size: 1.1rem; margin: 0 0 0.5rem; }
.section-content p { margin: 0 0 1.2rem; font-size: 0.95rem; line-height: 1.5; }
.section-content p::before { content: "❯"; color: #ff4d26; font-weight: bold; margin-right: 0.4rem; }
.section-content .bottom-text { grid-column: 1 / -1; margin-top: 1rem; font-size: 0.9rem; color: #ddd; text-align: justify; }

.feature-list ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; list-style: none !important; padding: 2rem; margin: 0; font-family: Arial, sans-serif; }
.feature-list ul li { position: relative; padding-left: 1.5rem; color: #fff; font-size: 1rem; line-height: 1.5; margin: 20px; }
.feature-list ul li::before { content: "❯"; position: absolute; left: 0; color: #ff4d26; font-weight: bold; }

.carousel-caption{ position: static !important; right: auto !important; bottom: auto !important; left: 0 !important; text-align: left !important; }

.bgWhite{background: #fff!important;}
.colorMain{color:#FF3A00;}
.colorMaiBg{background:#FF3A00;}
.certItem{ min-width: 70px; margin-bottom: 20px;}
.aMenu{display: inline-block; color:#fff; font-weight: 700; transition: all ease 300ms;}
.aMenu.active{color:var(--mainColor)!important;}
.aMenu:hover{color:var(--mainColor);}
nav .iconMenu{display: inline-block; width:6px; margin:auto 20px;}
nav .iconMenu img{display:block; width:100%;}
.langCon button{background:var(--mainColorBg); border:none;}
.btn-check:checked+.btn, .btn.active,.btn:hover, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{background: var(--mainColor)!important;}
.langCon .dropdown-menu{min-width:58px;}
.langCon .dropdown-menu .dropdown-item:hover{background: var(--mainColor); color:#fff;}

.sloganContainer{position: absolute; left:10%; top:50%; width:100%; max-width:800px; transform: translateY(-50%);}
.slogan1{font-family: "Jost", sans-serif; font-size: 100px; font-weight: 300;}
.slogan2{font-family: "Jost", sans-serif;font-size: 100px; font-weight: 700; color:var(--mainColor);}
.slogan3{font-size:20px;}
/* Başlangıç pozisyonları ve animasyon */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.loader { width: 48px; height: 48px; border: 5px solid #FFF; border-bottom-color: #FF3D00; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.slogan1, .slogan2, .slogan3, .btnSlogan { opacity: 0; animation: slideInLeft 1s ease forwards;}
.slogan1 { animation-delay: 0.2s;}
.slogan2 { animation-delay: 0.5s;}
.slogan3 {animation-delay: 0.8s;}
.btnSlogan {animation-delay: 1s;}
#coatronics-body .btn-primary{background:var(--mainColorBg) ; line-height: 40px; padding:0 12px;}
#coatronics-body .btn-secondary{background: #fff; border:1px solid #FF3A00; line-height: 40px; padding:0 12px; color:#FF3A00;}
#coatronics-body .btn-secondary:hover{ color:#fff; border:1px solid #fff;}
#coatronics-body .btn-third{background: #282A2E; border:1px solid #FF3A00; color:#fff; text-align: center; line-height: 40px; padding:0 20px;}
#coatronics-body .carousel-control-prev-icon,
#coatronics-body .carousel-control-next-icon { background-image: none; width:48px; height:76px;  display: inline-block; background-size: contain; background-repeat: no-repeat;}
#coatronics-body .carousel-control-prev-icon { background-image: url('../img/sol.svg');}
#coatronics-body .carousel-control-next-icon { background-image: url('../img/sag.svg'); }
#coatronics-body .carousel-control-prev,#coatronics-body .carousel-control-next{width:200px;}

.sayac{position: absolute; right:80px; bottom:200px; width: 35px;}
.sayac .lineVertical{ height: 100px; width: 1px; margin:auto; background: var(--mainColorBg);}
#slideCounter{margin:30px auto; font-size:20px;}

.secButtons{padding: 50px;}
.buttonGroup{ border:1px solid #FF3A00;}
.grpBtn{color:#fff; font-size:15px; width: 100%; line-height:32px; padding: 10px 0; text-align:center; display: block; border-right: 1px solid var(--mainColor)!important; transition: all ease 300ms;}
.grpBtn:last-child{border-right: none;}
.grpBtn:hover{background: var(--mainColorBg);}

section.aboutUs{margin-top:150px;}
section.aboutUs .txtContainer{position: relative; left:-35%;}
.vLine{width: 1px; height: 100px; background: var(--mainColorBg); margin:20px auto;}
.title-line{width: 80px; height: 1px; background: #FF3A00; margin:20px 0;}
.readMore {display: block; text-align: right;}
.category {padding:20px;}
.category .readMore img{position: relative; left: 0; transition: all ease 300ms; -webkit-transition: all ease 300ms;}
.category:hover .readMore img{left: 10px;}
.category figure {  height:350px; overflow: hidden;}
.category figure img {width: 100%; height: 100%; object-fit: contain;}
.categories{padding-bottom:200px;}

.bgTop{position: absolute; left:0; bottom:0; right:0; z-index: 1;}

.secProducts{position:relative; background: #282A2E; background: linear-gradient(180deg,rgba(40, 42, 46, 1) 30%, rgba(255, 57, 1, 1) 200%);}
.vline1{position:absolute; left:0; top:-80px; right:0; margin:auto; z-index: 2;}
.secProducts .titleContainer{padding-top:40px; background: url(../img/triangle.png) no-repeat center center; background-size:contain ;}
.vLine2{height: 40px;}
.absoluteBgSplash{display: block; width: 100%; max-width:1600px; right:0; bottom:0; position: absolute; z-index:1;}
.product{position: relative; z-index: 2; background: #3A3A3A; background: linear-gradient(180deg,rgba(58, 58, 58, 0.5) 0%, rgba(120, 55, 36, 0.5) 100%); margin-bottom:20px;}
.btnDetails{display:block; width: 100px; line-height: 40px; border-radius: 5px; background: var(--mainColorBg); color:#fff; text-align: center; margin:auto 0 auto auto;}
.btnDetails img{width: 9px !important; position: relative; left:0; transition: all ease 300ms; transition: all ease 300ms; -webkit-transition: all ease 300ms;}
a.product:hover .btnDetails img,.aBlog:hover .btnDetails img{left:10px;}
section.blog{background: #444444; background: linear-gradient(0deg,rgba(68, 68, 68, 1) 0%, rgba(178, 51, 15, 1) 100%);}
.blog .vLine1{position: relative; top:-30px; margin:0;}

.aBlog h3.title20{ height:50px; overflow: hidden; position: relative;}
.aspect-ratio-4-3 {  position: relative; width: 100%; padding-top: 75%; overflow: hidden; border-radius: 0.5rem; }
.aspect-ratio-4-3 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.aspect-ratio-666-374 {position: relative; width: 100%; padding-top: 56.1%; overflow: hidden; border-radius: 0.5rem;}
.aspect-ratio-666-374 img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.secSeperator{padding:100px 0; z-index: 1; text-align: center; background: url(../img/seperator.jpg) no-repeat top 230px center; background-size:cover ; background-attachment: fixed; position: relative;}
.secSeperator:before{content:""; position: absolute; inset:0; opacity: 0.9; background: #4C2316; mix-blend-mode: multiply; z-index: -1;}
.secSeperator .btn-primary{border:1px solid #fff!important; margin-top:30px;}

footer{background: #444444; position: relative;}
 .footerBg{background: url(../img/footerBottomBg.png) no-repeat center center; background-size:cover; padding:50px 0;}
.menuFooter{display: block; color:#fff; line-height:32px;}
.footerBoxContainer{display: flex; }
.footerBoxContainer > div{width: 20%;}
.box2{padding-left:5%;}
.sMedia a.smBox{display: inline-block; margin:0 5px; border:1px solid #FF3A00!important; color:#fff; line-height:74px; text-align:center; border-radius: 5px; width: 64px; height: 64px;}
.sMedia a.smBox:hover{background: #FF3A00; border:1px solid #FF3A00!important;}
.sMedia a.smBox svg{ font-size:30px; margin:auto;}
.footerBottom{background: var(--mainColorBg); line-height: 40px;}

.sMediaContact a.smBox{width:48px; height: 48px; line-height:52px;}
.sMediaContact a.smBox svg{ font-size:24px; margin:auto;}

.banner{height: 600px; position: relative;}
.banner_about{background: url(../img/banner-about.png) no-repeat center center; background-size: cover; }
.banner_products{background: url(../img/banner-products.png) no-repeat center center; background-size: cover;}
.banner_contact{background: url(../img/contactBanner.png) no-repeat center center; background-size: cover;}
.banner_blog{background: url(../img/bannerBlog.png) no-repeat center center; background-size: cover;}
.bannerTitle{font-family: "Jost", sans-serif; position: absolute; left:50%; top:60%; transform: translate(-50%,-60%);}
.secAboutUs{padding:100px 0;}
.iconAbout{width: 64px; height: 64px;}
.iconAbout img{display: block; width:100%;}
.aboutImgBg{position: relative;}
.aboutImgBg:before{content:""; position: absolute; right:0; bottom:0; height: 300px; width: 400px; background: url(../img/icons/aboutImgBg.png) no-repeat center; background-size: contain;z-index: 1;}
.hLine{display: block; height: 1px; width: 100%; background: #FF3A00; margin:50px auto;}
.icontxtContainer{padding-left:50px;}
.secWhy{position: relative; padding:80px 0; background: #282A2E; background: linear-gradient(-180deg, rgba(40, 42, 46, 1) 65%, rgba(255, 57, 1, 1) 125%);}
.secWhy .vLine1{ top:-60px; position: absolute; left:0; height:100px; right:0;}

.nav-pills .nav-link.active{background-color: var(--mainColor)!important; border-radius: 0!important; }
.nav-pills .nav-link{border:1px solid #FF3A00!important; border-radius: 0!important; color:#fff;}
.nav-link:focus, .nav-link:hover{color:#fff!important;}
.imgLogoBrands{display: block; width:300px; margin:auto; transition: all ease 300ms; height: 250px!important;}
a.category:hover .imgLogoBrands{transform:scale(1.1);}
.dropdown-menu{background-color:#FF3A00!important; border-radius: 0!important;}
.dropdown-menu .dropdown-item{color:#fff!important;}
.dropdown-menu .dropdown-item:hover{background: #444444!important;}
.dropdown-item.active, .dropdown-item:active{background-color: #444444!important;}
.figureEndDetail{position: relative;z-index: 2;}
.productInfo{background: #444444; border-radius: 10px; padding:5% 5% 5% 20%; position: relative; z-index: 1;}
.productInfo:before{content:""; position: absolute; left:-210px; top:0; bottom:0; background: #444444; width: 230px; z-index:-1;}
.figConImgBg{position: relative; height: 100%;}
.figConInfo{position:absolute; left:0; bottom:0px; right:0; background: rgba(0, 0, 0, 0.6); padding:20px; border-bottom-left-radius:10px; border-bottom-right-radius: 10px;}
.figConImgBg img{height: 100%;}
.contactForm{background: rgba(40, 19, 13, 0.6); padding:70px 30px; border-radius: 20px; height: 100%;}
.contactForm input,.contactForm textarea{border:1px solid #FF3A00;}
.contactForm input{line-height: 45px;}
.contactForm .form-control:focus{border-color: rgba(255, 60, 0, 1); box-shadow: 0 0 0 .25rem rgba(255, 60, 0, .25);}
.newsDate{font-size:20px; color:#FF3A00; font-weight: 700;}
.btnMenuOpen{display: none!important;}
#offcanvasRight{background: #FF3A00;}
.offCanvasNav .aMenu{display: block; font-size:24px;  border-bottom:1px solid #444444!important; padding:10px 0;}
.offCanvasNav .aMenu:hover{color:#444444;}
.langMobile{display: block; width: 90px; text-align: center; background: #444444; border-radius: 5px; margin:auto 0 auto auto;}
.langMobile .aLang{color:#fff; display: inline-block; font-size:20px;}
.langMobile .aLang.active{font-weight: 700;}
#offcanvasRight .sMedia .smBox{background: #444444;}
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.tab-pane:focus {
    outline: none !important;
    box-shadow: none !important;
}

a.koda-icon-link p { white-space: pre; color: transparent!important; text-align: center; font-weight: 500; margin: 0; } 
a.koda-icon-link, a.koda-icon-link p { transition: .5s all ease; } 
.koda-icon-links { width: 5.75rem; position: relative; display: inline-flex; flex-direction: row; justify-content: start; align-items: center; top: -6px; } 
a.koda-icon-link:hover { position: absolute; left: 0; width: 5.75rem; margin-left: 0; padding-left: .45rem; padding-right: .45rem; z-index: 999; } 
.koda-icon-link.ikona { background-color: #ffce03; } 
.koda-icon-link.kenobi { background-color: #2cb5bf; } 
.koda-icon-link.karanlik_oda { background-color: #8ab93f; } 
a.koda-icon-link { text-decoration: none; position: absolute; left: 0; transform: translateX(0); overflow: hidden; height: 1.75rem; width: 1.75rem; border-radius: .875rem; padding-right: 0; padding-left: 0; z-index: 3; display: inline-flex; align-items: center; justify-content: center; } 
a.koda-icon-link:nth-child(2) { left: 2rem; z-index: 2; } 
a.koda-icon-link:nth-child(3) { left: 4rem; z-index: 3; } 
a.koda-icon-link:hover { position: absolute; left: 0; width: 5.75rem; margin-left: 0; padding-left: .45rem; padding-right: .45rem; z-index: 999; } 
a.koda-icon-link:hover p { color: #fff!important; padding-top: 0px; } 

.logo-tabs {
    margin-top: 20px; /* üstten boşluk */
}

.brand-tab {
    width:260px;
    height:160px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
}

.brand-tab .brand-logo {
    max-height:90px;
    object-fit: contain;
}


@media only screen and (max-width: 1920px) {
  #coatronics-body .carousel-control-prev,#coatronics-body .carousel-control-next{width:100px;} 
  .sayac{right:35px; bottom:50px;}
  .slogan1,.slogan2{font-size: 80px; }
  .productInfo::before {left:-222px;}
}
@media only screen and (max-width:1600px){
.sayac .lineVertical{height: 60px;}
#slideCounter{margin:20px auto;}
 .slogan1,.slogan2{font-size:60px; }
 .slogan3{font-size:16px;}
 .sloganContainer{width:36%; top:60%;}

}
@media only screen and (max-width:1560px){
.secSeperator{ background: url(../img/seperator.jpg) no-repeat top -30px center; background-size:cover ; background-attachment: fixed; position: relative;}
}

@media only screen and (max-width:1366px){
.sMedia a.smBox {width:50px;height:50px;}
.sMedia a.smBox{line-height:60px;}
.logo{width:360px;}
 .footerBg{ background-size:100% 100%;}
.productInfo{padding:10px;}
.secSeperator{ background: url(../img/seperator.jpg) no-repeat top 0 center; background-size:cover ; background-attachment: fixed; position: relative;}
}

@media only screen and (max-width:1200px){
header nav{display: none;}
header .btnMenuOpen{display: block!important;}
.langCon.ms-5{margin-left:1rem!important;}
#coatronics-body .btnMenuOpen{ line-height: 35px!important;}

.buttonGroup{ border:none; flex-wrap: wrap; justify-content: center;}
header{left:20px; right:20px;}
.langCon{display: none;}
#coatronics-body .carousel-control-prev-icon,
#coatronics-body .carousel-control-next-icon {  width:32px; height:51px; }

.sloganContainer{position: absolute; left:10%; top:50%; max-width:600px;  width: 100%;}
.slogan1,.slogan2{font-size:35px;}
.slogan3{font-size:16px;}
section.aboutUs{margin:0;}

    .carousel-item { height: 100vh; }
    .carousel-item img { height: 100%; width: 100%; object-fit: cover; object-position: center center; }
    .slideContainer, #carouselCoatronics, .carousel-inner {height: 100vh;}
section.aboutUs .txtContainer{position: relative; left:-0;}
.secSeperator .title, .secSeperator .title45{font-size:25px;}
.footerBoxContainer{flex-direction: column;}
.footerBoxContainer > div{width:100%;}
.footerBox{margin-bottom:20px;}
.box2{padding:0;}
.productInfo{padding:20px;}
.productInfo::before{display: none;}
.readMore{text-align:center;}
.logo{width:230px;}
.aboutUs .txtContainer{text-align: center; margin-top:20px;}

.grpBtn{border: 1px solid var(--mainColor)!important; margin:5px auto; }
.grpBtn:last-child{border-right: none;}
}

@media only screen and (max-width:768px){
#coatronics-body .carousel-control-prev,#coatronics-body .carousel-control-next{display: none;}
.footerBg{background: none;}
.sloganContainer{left:20px; width: 90%;}
.grpBtn{width:100%;}
.title45{font-size:35px;}
.tabMenuContainer .nav-item{margin-bottom:20px;}
#pills-tabContent{text-align: center;}
.secAboutUs .icontxtContainer{padding:0;}
#pills-tab{flex-direction: column;}
#pills-tab .nav-item{display: block; width: 100%; margin-bottom:10px;}
#pills-tab .nav-item button{display: block; width: 100%;}
.title-line{margin:20px auto;}
.btnDetails{margin:auto;}
.category{text-align: center;}
.bannerTitle{width: 100%;}
.register{line-height: normal; padding:10px;}
.brandsConFlex{flex-direction: column;}
}
@media only screen and (max-width:480px){
  .title,.title45{font-size:26px;}
.title24{font-size:20px;}
.title20{font-size:18px;}
.figConImgBg{min-height: 450px;}
.figConImgBg img{object-fit: cover;}
.mobileButton{display: block !important;}
}