html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
}

body
{ 
cursor: default;
  font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-style: normal;margin-bottom:30px;
min-height: 100%;
}
a{text-decoration:none;}
:root{
--renk1:#dd1515;
--renk2:#323232;
}

body{}


header{position:fixed;top:0;left:0;width:100%;z-index:999;}
header:before{background:linear-gradient(180deg, #000000ab 25%, transparent 85%);position:absolute;content:"";top:0;left:0;right:0;height:100%;z-index:-1;}
header .top{position:relative;  padding:12px 0;}
header .top a{color:#fff;font-size:14px;}



header .cont{display: flex;align-items: center;width: 100%;height: 100%;justify-content: flex-end;transition-duration: .5s;}
header .logo{display: inline-block;margin:10px 0; }
header .logo img{height:70px;}
header .cont ul{display:flex;margin:0 35px 0 0;padding:0;}
header .cont ul>li{list-style-type:none;padding: 0px 12px;height:55px;} 
header .cont ul>li>a{color: #fff;font-size: 18px;font-weight: 700;position:relative;height: 100%;display: flex;align-items: center;}
header .cont ul>li>a:before{background-color: #fff;position: absolute;opacity:0;content: "";height: 25px;right: -5px;z-index: -1;left: -5px;transition-duration: .5s;border-radius: 3px;}
 






header .social{padding: 7px;border-radius: 5px;margin-right:15px;margin-left:15px;}
header .social a{color: #fff;font-weight: 500;}
header .social .dil{}
header .social .dil i{color:var(--renk1);}

header.scrolled {background: white;box-shadow: 0 4px 12px rgba(0,0,0,0.1);transform: translateY(-100%);animation: slideDown 1s forwards;}
header.scrolled:before{display:none;}
header.scrolled .top{background-color:var(--renk1);padding:4px 0;}
header.scrolled .logo img{height:50px;width:auto;}
header.scrolled ul>li>a{color: #222;}
header.scrolled .social a{color: #000;}


header .cont ul>li>a.active,
header .cont ul>li>a:hover{  color: var(--renk1);}

header .cont ul>li>a.active:before,
header .cont ul>li>a:hover:before{opacity: 1;}
header .cont ul>li>a.active i{transform: rotate(180deg);}



header .submenu{  display: none; position: fixed;left: 0;  right: 0;z-index:9;top: 140px;}
header.scrolled .submenu{top:116px;}
header .submenu .content{padding: 50px 30px;border-radius: 8px;border: 2px solid var(--renk1);background-color:#fff;}
header .submenu .hdSubTitle{font-weight: 600;font-size: 33px;}
header .submenu .hdSubTitle + p{font-size:13px;text-align:justify;}

header .submenu .hdgrup{ display: flex;text-align: center;width: 100%;border: 2px solid transparent;height: 230px;min-width:180px;border-radius: 25px;background-position: bottom right;background-size: contain;align-items: end;justify-content: center;} 
header .submenu .hdgrup span{ color: #000; font-weight: bold;background-color:#fff  ;border-radius: 25px;padding: 3px 14px;font-size: 13px;margin-bottom:8px;}
header .submenu .hdgrup:hover{border-color:var(--renk1);}


header .submenu.corporate a{color: #000;
font-size: 18px;
padding: 5px 12px;
position: relative;
font-weight: 500;}
header .submenu.corporate a:before
{
 content: "";
position: absolute;
left: 0;
top: 44%;
transform: translateY(-27%) rotate(270deg);
border: solid transparent;
border-width: 5px;
border-top-color: var(--renk1);
transition-duration: .2s;
}

header .submenu.corporate a:hover{color:var(--renk1);}
header .submenu.corporate a:hover:before{border-top-color:#000;}




 

 
header .ara{background-color: var(--renk1);
color: #fff;
width: 40px;
border-radius: 50%;

height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;}
header .katalog{background-color:var(--renk1);color:#fff;padding: 10px 15px;border-radius: 45px;}
header .ara:hover,
header .katalog:hover{background-color:#222;}


header .cont form{position: absolute;
background-color: #dd1515;
padding: 5px 15px;
bottom: -25px;
border-radius: 35px;}
header .cont form input::placeholder{color: #ccc;}
header .cont form input:focus-visible{outline:none;}
header .cont form input{border: none;color:#fff;
background-color: #b61e1b;
border-radius: 8px;
padding: 3px 12px;}



#home_slider_wrap{position:relative;}
#home_slider_wrap .slogan span{color:var(--renk1);letter-spacing: 6px;font-weight:900;font-size:39px;text-shadow:
  1px 0 #e6e6e6,
 -1px 0 #e6e6e6,
  0 1px #e6e6e6,
  0 -1px #e6e6e6;}
#home_slider_wrap .sloganLink a{background-color:var(--renk1);font-weight:500;font-size:16px;padding:8px 15px;border-radius:45px;color:#fff;}
#home_slider_wrap .sloganLink a:hover{background-color:#222;}

#homeGroups .homeGroupsTitle{text-align: center;font-size: 34px;width: 660px;margin: 25px auto;font-weight: 800;position:relative;display:block;max-width:100%;}
#homeGroups .homeGroupsTitle svg{position: absolute;bottom: 40px;left: 115px;}
#homeGroups .homeGroupsTitle svg path{stroke:var(--renk1);}

#homeGroups .groupContainer{display: flex;gap: 20px;padding:0 60px;}

#homeGroups .groupContainer .group{  transition: transform 2s linear;   padding: 10px; border-radius: 10px;}
#homeGroups .groupContainer .group img{border-radius: 8px;margin-bottom:20px;transition: transform .5s linear;}
#homeGroups .groupContainer .group h2{font-size: 19px;color: #2e2e2e;margin:0;text-align: center;padding:0;}

#homeGroups .groupContainer .group:hover{box-shadow: 0px 0px 6px 2px #e6e6e6;}
#homeGroups .groupContainer .group:hover img{transform: scale(1.05);}
#homeGroups .groupContainer .group:hover h2{color:#000;}








#homeProjects{display:flex;}
#homeProjects .titlePart{min-width: 300px;padding:0 30px;}
#homeProjects .projectContainer{display:flex;overflow-x: auto;overflow-y: hidden;}
#homeProjects .projectContainer::-webkit-scrollbar{display:none;}
#homeProjects .projectContainer{-ms-overflow-style:none;scrollbar-width:none;}
#homeProjects .projectContainer .project{height:550px;width:300px;background-size: cover;position:relative;flex-shrink: 0;}
#homeProjects .projectContainer .project a{position: absolute;bottom: 50px;left: 25px;font-weight: 900;pointer-events:none;font-size: 31px;z-index:3;color: #fff;text-shadow: 0 0 2px black;}
#homeProjects .projectContainer .project .desc{position: absolute;bottom: 0;left: 0;z-index: 2;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);opacity: 0;transition: opacity 0.3s ease-out;color: #fff;font-size: 14px;padding: 20px;}
#homeProjects .projectContainer .project a:after{z-index: 3;content: "";opacity:0;position: absolute;width: 21px;height: 28px;right: -30px;top:13px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);background-image: url(/images/arrow-button-white.png);background-repeat: no-repeat;background-position: center;background-size: 100% auto, 100%;-webkit-transition: 0.3s ease;transition: 0.3s ease;pointer-events: none;}

#homeProjects .projectContainer .project:hover .desc {opacity: 1;}
#homeProjects .projectContainer .project:hover a {pointer-events:all;}
#homeProjects .projectContainer .project:hover a:after {opacity:1;}

#homeProjects .projectContainer .project a:hover:after {-webkit-transform: rotate(0);transform: rotate(0);}









#pageProject .btn-group{float:right;}
#pageProject .btn-group>button{border-radius: 45px;}
#pageProject .project{display: flex;
align-items: center;
flex-direction: column;
color: #000;
font-weight: 700;
font-size: 21px;}
#pageProject .project:hover{opacity:.8;}
#pageProject .project span{}



/*#pageProjectDetail ul{display:flex;gap:10px;justify-content: right;margin-top:44px;}
#pageProjectDetail ul li{list-style-type: none;}
#pageProjectDetail ul li span{background-color: var(--renk2) ;color: #fff;border-radius: 4px;padding: 4px 7px;}
#pageProjectDetail ul li:hover span,
#pageProjectDetail ul li.active span{background-color:var(--renk1);cursor:pointer;}
*/


#pageProjectDetail .productRelations{background-color: #f4f4f4;padding: 85px 0;margin: 85px 0;}




#homeCatalog{background-color: var(--renk1);color:#fff;padding: 40px 0;position: relative;}
#homeCatalog img{position: absolute; bottom: -125px;}
#homeCatalog h2{font-size:28px;font-weight:bold;}







#homeAbout .desc{display: flex;flex-direction: column;height: 100%;justify-content: end;}




#homeOzellikler{background: linear-gradient(172.78deg, #F2F2F2 5.52%, #FFFFFF 94.28%);padding-top:95px;padding-bottom:50px;}

#homeOzellikler .title3{font-weight: bold;font-size: 40px;width: 575px;max-width: 100%;}
#homeOzellikler .links{display: flex;gap:10px;margin: 65px 0;}
#homeOzellikler .links a{font-size: 19px;color: #000;width: 100%; border: 1px solid transparent;text-align: center;transition-duration: .2s;font-weight: 500;line-height: 50px;border-radius: 3px;}

#homeOzellikler .links:not(:hover) a:first-child,
#homeOzellikler .links a:hover
{border-color:var(--renk1);background-color: #fff;}
#homeOzellikler h3{font-size: 31px;}
#homeOzellikler ul{font-size: 18px;font-weight: 400;width: 400px;max-width: 100%;}






.listGroup{position: relative;display: inline-block;border-radius: 20px;border:1px solid var(--renk2);overflow: hidden;}

.listGroup img{transition: transform 0.6s ease-out;width:auto;}
.listGroup:hover img{transform: scale(1.075);}
.listGroup span{display: block; color: #000;font-weight: 600;padding: 10px 20px; text-align:center; }  

.listGroup:hover{border-color:var(--renk1);}
.listGroup:hover span{background-color:var(--renk1);color:#fff; } 






#pageProductDetail{}
#pageProductDetail .mainImage{position:relative;}
#pageProductDetail .mainImage .threeDView{position: absolute;display: flex;align-items: center;justify-content: center;flex-direction: column;top: 10px;left: 10px;padding: 10px;border-radius: 5px;transition-duration:.5s;color: #000;}
#pageProductDetail .mainImage .threeDView:hover{ background-color:#000;   color:#fff;}
#pageProductDetail .mainImage .threeDView img{height:65px;width:auto;}

#pageProductDetail .nav-tabs{justify-content: end;padding: 20px 45px;background-color: var(--renk1);border-radius: 65px;}
#pageProductDetail .nav-tabs .nav-link{color: #fff;padding: 3px 7px;background-color: transparent;border:0;border-radius: 0;}
#pageProductDetail .tab-content{border:none !important;}

#pageProductDetail .productName{position: absolute;top: 56px;margin-left:30px;color: #fff;}
#pageProductDetail .productName span[itemprop="name"]{font-size:27px;font-weight:700;}
#pageProductDetail .productName span.sku{display: block;font-size: 14px;color:#fff;transform: translateY(-10px);font-weight: 500;}



#teklifal .tf-section-title {font-size: 12px;font-weight: 600;color: #888;text-transform: uppercase;letter-spacing: 0.06em;margin: 1.5rem 0 0.75rem;border-bottom: 1px solid #e5e5e5;padding-bottom: 8px;}
#teklifal .tf-section-title:first-child { margin-top: 0; }
#teklifal .tf-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 16px;}
@media (max-width: 576px) {#teklifal .tf-grid { grid-template-columns: 1fr; }}
#teklifal .tf-group {display: flex;flex-direction: column;gap: 5px;}
#teklifal .tf-group.full { grid-column: 1 / -1; }
#teklifal .tf-group label {font-size: 13px;font-weight: 500;color: #555;}
#teklifal .tf-group input,
#teklifal .tf-group select,
#teklifal .tf-group textarea {width: 100%;box-sizing: border-box;padding: 9px 12px;border: 1px solid #ddd;border-radius: 8px;font-size: 14px;color: #222;background: #fff;outline: none;transition: border-color 0.15s;}
#teklifal .tf-group input:focus,
#teklifal .tf-group select:focus,
#teklifal .tf-group textarea:focus {border-color: #7F77DD;box-shadow: 0 0 0 3px rgba(127,119,221,0.12);}
#teklifal .tf-group textarea {resize: vertical;min-height: 90px;}

/* Ürün kartları */
#teklifal .tf-product-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));gap: 10px;margin-top: 4px;}
#teklifal .tf-product-card {border: 1px solid #ddd;border-radius: 8px;padding: 12px 10px;cursor: pointer;transition: border-color 0.15s, background 0.15s;display: flex;flex-direction: column;gap: 5px;position: relative;user-select: none;}
#teklifal .tf-product-card:hover {border-color: #aaa;background: #f9f9f9;}
#teklifal .tf-product-card.selected {border: 2px solid #7F77DD;background: #f0effd;}
#teklifal .tf-product-card .pc-icon {font-size: 22px;color: #888;}
#teklifal .tf-product-card.selected .pc-icon { color: #534AB7; }
#teklifal .tf-product-card .pc-name {font-size: 13px;font-weight: 600;color: #222;}
#teklifal .tf-product-card.selected .pc-name { color: #3C3489; }
#teklifal .tf-product-card .pc-desc {font-size: 11px;color: #999;}
#teklifal .tf-product-card.selected .pc-desc { color: #534AB7; }
#teklifal .tf-check-badge {display: none;position: absolute;top: 8px; right: 8px;width: 16px; height: 16px;background: #7F77DD;border-radius: 50%;align-items: center;justify-content: center;font-size: 10px;color: #fff;}
#teklifal .tf-product-card.selected .tf-check-badge { display: flex; }

/* Submit butonu */
#teklifal .tf-submit-row {margin-top: 1.5rem;display: flex;justify-content: flex-end;align-items: flex-end;flex-direction: column;}
#teklifal .tf-submit-btn {background: var(--renk1);color: #fff;border: none;border-radius: 45px;padding: 11px 28px;font-size: 14px;font-weight: 500;cursor: pointer;transition: background 0.15s;}
#teklifal .tf-submit-btn:hover { background: #222; }

 
#pageProductDetail .productRelations{background-color: #f4f4f4;padding: 85px 0;}



#pageKatalog{}
#pageKatalog a{position:relative;display:inline-block;}
#pageKatalog a span{text-shadow: 1px 1px 0 var(--renk1), -1px 1px 0 var(--renk1), 1px -1px 0 var(--renk1), -1px -1px 0 var(--renk1);position: absolute;bottom: 7px;left: 15px;z-index: 2;transition: all 0.2s ease-out;font-size: 26px;font-weight: 900;letter-spacing: 2px;color: #fff;}
#pageKatalog a img{width:100%;height:auto;border-radius: 6px;}
#pageKatalog a:hover span{font-size:28px;}


#pageMedia{padding: 75px 0;}
#pageMedia h1{font-weight: 400;font-size: 37px;}
#pageMedia h2{font-weight: 500;font-size: 24px;}
#pageMedia p{min-height:85px;margin:0;}




footer{}
footer .ftContent{background-color:#fff;padding:50px 30px;border-radius: 8px;color:#222;border:1px solid #efefef;}

footer .logo{width:190px;}
footer .social{display: flex;margin: 15px 0;justify-content: space-between;}
footer .social a{background-color: var(--renk1);color: #fff;font-size: 17px;display: flex;align-items: center;justify-content: center;width: 35px;height: 35px;border-radius: 45px;}
footer .social a:hover{color: #000;}

footer .copy{font-size:10px;}
footer .copy a{color:var(--renk1);}

footer .links{display: flex; justify-content: flex-end;gap:40px;}
footer .links .link{display: flex;max-width:250px;flex-direction: column;}
footer .links .link span{font-size: 17px;font-weight: bold;margin-bottom: 8px;border-bottom: 1px solid #5e5e5e;}
footer .links .link a{color: #000;font-size: 13px;margin-bottom:15px;}
footer .links .link a:hover{color:var(--renk1);}

footer .cert{margin: 40px 0;padding: 0;display: flex;gap: 25px;justify-content: center;}

footer .slinks ul{margin: 0;padding: 0;display: flex;gap: 25px;justify-content: center;}
footer .slinks ul li{list-style-type: disc;margin:0;padding:0;}
footer .slinks ul li::marker {color: #ff5733;}
footer .slinks ul li a{color:#000;font-size:13px;}
footer .slinks ul li a:hover{color:#ff5733 ;}




.altMenu{border: 2px solid #f0f0f0;border-radius: 10px;padding: 12px;background-color: #fefefe;position: sticky;top: 150px;}
.altMenu ul{margin:0;padding:0;}
.altMenu ul li{margin:0;padding:0;list-style-type:none;}
.altMenu ul ul{display:none;padding:18px;}



.altMenu>ul>li>.tpLink{font-weight: 500;display: inline-block;background-color:#f0f0f0;width: 100%;padding: 8px 12px;position:relative;border-radius: 4px;color: #000;}
.altMenu>ul>li{margin-bottom: 12px;}
.altMenu > ul > li > span.tpLink:after{  content: "";position: absolute;right: 10px;top: 60%;transform: translateY(-50%) rotate(45deg);border: solid transparent;border-width: 7px;border-top-color: #8e8e8e;transition-duration: .2s;}
.altMenu > ul > li.active > .tpLink:after{transform: translateY(-50%) rotate(0deg);}

.altMenu > ul > li > .tpLink:hover,
.altMenu > ul > li > .tpLink.active{background-color:var(--renk1);color: #fff;}
.altMenu > ul > li > .tpLink:hover:after{border-top-color: #fff;}
.altMenu > ul > li > .tpLink.active:after{border-top-color: #fff;transform: translateY(-62%) rotate(270deg);}

.altMenu > ul > li ul a{ display: block;padding: 5px 0;color: #000;font-size: 16px;font-weight: 600;}
.altMenu > ul >li ul li a:hover,
.altMenu > ul >li ul li.active a{color:var(--renk1);}

#pageContact #map
{
height: 60vh;
border-radius: 10px;
width: 100%;
}

#pageContact #personList{display:flex;flex-wrap:wrap;gap:30px;justify-content: center;}
#pageContact #personList>ul{border:1px solid #e6e6e6; border-radius: 10px; padding: 15px;}
#pageContact #personList>ul>li{list-style-type:none;}
#pageContact #personList>ul>li>div>div>strong:first-child{font-weight: 500;font-size: 13px;color: #555555;transform: translateY(15px);}
#pageContact #personList strong{font-size: 17px;margin-bottom: 13px;display: inline-block;color: var(--renk1);}
#pageContact #personList a{color:#000;}
#pageContact #personList a:hover{color:var(--renk1);}