.topCol_{background-position: center center;background-size: cover;background-repeat: no-repeat;height: 400px;position: relative;}
.topCol_::after{content:'';position: absolute;left:0px;top:0px;width: 100%;height: 100%;background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%)}

.containerCol_{margin-block: 0px;}

.pageRightContent .pageRightContentInner{padding: 30px 30px;}

video.bannerVideo{width: 100%;max-height: 450px;object-fit: cover;object-position: center;}


h1.name{margin-bottom: 30px;}
h2.caption{font: normal normal normal 20px/24px gothic;color: var(--black);margin-bottom: 15px;}
.metin{font: normal normal normal 14px/20px gothic;}

.nameParent{display: flex;align-items: center;justify-content: space-between;gap:12px;transition: 300ms;}
.nameParent img{max-width: 150px;}

.arkakapak{position: absolute;top: 0;left:0;z-index: 1;opacity: 0;transition: 300ms;transition-timing-function: ease-out;}
.urunlerLists li a:hover .arkakapak{opacity: 1;}


.fixedImageList iframe{width: 100%!important;height: 400px!important;}

.urunlerLists{margin-bottom: 60px;position: relative;}
.urunlerLists ul{display: grid;grid-template-columns: repeat(4,1fr);gap:15px;}
.urunlerLists ul li{position: relative;}
.urunlerLists ul > li:hover::after{background: transparent linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(227, 112, 112,0.5) 130%)}
.urunlerLists ul a{position: relative;display: block;}
.urunlerLists ul > li::after{content:'';position: absolute;left:0;top:0;width:100%;height: 100%;background: transparent linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
pointer-events: none;transition: 300ms;}
.urunlerLists ul a h2{font: normal normal normal 18px/22px gothic;color: var(--white);position: absolute;bottom:10px;left: 50%;transform: translateX(-50%);z-index: 1;width: 100%;text-align: center;}
.urunlerLists ul a h2::before{content:'';position: absolute;bottom:-5px;left:50%;transform: translateX(-50%);height:1px;width: 50px;background-color: var(--white);transition: 300ms;}
.urunlerLists ul a:hover h2::before{width: calc(100% - 30px);}


.urunIcons{display: grid;grid-template-columns: repeat(5,1fr);margin-top: 30px;gap:15px}
.urunIcons li.dokumanYok{opacity: 0.2;}
.urunIcons a{display: flex;flex-direction: column;gap:8px;align-items: center;justify-content: center;}
.urunIcons a img{height: 55px;position: relative;min-width: 55px;max-height: 55px;max-width: 55px;object-fit: contain;}
.urunIcons a h3{font: normal normal normal 12px/14px gothic;text-align: center;color: var(--black);}

.urunIcons a:hover .iconParent,.urunIcons a.active .iconParent{background: transparent linear-gradient(44deg, #3C3C3C 0%, #7E7E7E 100%)}
.urunIcons a.derece360Goruntule:hover .iconParent{background: transparent linear-gradient(71deg, #FD3F3F 0%, #811212 100%)}
.urunIcons a:hover img,
.urunIcons a.active img{filter: brightness(0) invert(100%);}

.urunIcons i{color: #000000;font-size: 56px;}

.iconParent{border-radius: 100%;border:1px solid rgba(0,0,0,0.2);display: block;padding: 20px;}


.ekAciklama{padding: 0px;margin-top: 30px;font-size: 11px;}
.ekAciklama table{width:100%}
.ekAciklama table td{font-size: 10px;padding: 6px;border: 1px solid #CBCBCB;text-align: center;}
.ekAciklama table th{font-size: 10px;padding: 6px;border: 1px solid #CBCBCB;text-align: center;background: #666;color: var(--white);}



.urunFilters{margin-top: 30px;}
.urunFilters ul{display: grid;grid-template-columns: repeat(5,1fr);gap:15px}
.urunFilters ul select{border-radius: 0;font: normal normal bold 12px/16px gothic;color: var(--black);height: 50px;}
.urunFilters ul button.btn{height: 50px;border-radius: 0;background-color: var(--black);color: var(--white);}



.ozellikler{display: flex;margin-top: 30px;gap:15px;background-color: #eee;padding: 15px;}
.ozellikler img{height: 55px;position: relative;min-width: 55px;max-height: 55px;max-width: 55px;object-fit: contain;}
.ozellikler h3{font: normal normal normal 12px/14px gothic;text-align: center;color: var(--black);}


.ozellikler a:hover img{filter: brightness(0) invert(100%);}
.ozellikler li{display: flex;align-items: center;justify-content: center;flex-direction: column;}
.ozellikler li{display: flex;align-items: center;justify-content: center;flex-direction: column;}
.ozellikler .iconParent{border-radius: 100%;border:1px solid rgba(0,0,0,0.2);display: block;padding: 10px;display: inline-block;margin-bottom: 8px;}



.fixedBottomMenu{position: fixed;bottom:30px;right:30px;z-index: 10;background: transparent linear-gradient(148deg, #FF0000 0%, #7E7E7E 100%);padding: 30px 20px;width:100px;height: 130px;
display: flex;align-items: flex-end;clip-path: polygon(0% 30%,100% 0%,100% 100%,0% 100%);transition: 300ms;}
.fixedBottomMenu.active{clip-path: inherit;height: 450px;width: 350px;padding: 30px 20px 60px 20px;transition: 300ms;align-items: flex-start;background: transparent linear-gradient(-45deg, #FF0000 0%, #7E7E7E 100%)!important;}
.fixedBottomMenuLines {position: absolute;padding: 20px 0px 0px 0px;cursor: pointer;bottom:15px;right: 20px}
.fixedBottomMenuLines span{position: absolute;background-color: var(--white);width: calc(100% - 20px);height: 2px;left: 50%;top:0;transform: translateX(-50%);transform-origin: center;transition: 200ms;}
.fixedBottomMenuLines span:nth-child(2){top:10px}
.fixedBottomMenuLines h5{font: normal normal normal 12px/14px gothic;color: var(--white);}
.fixedBottomMenu:not(.active):hover{height: 150px;}

.fixedBottomMenu.active .fixedBottomMenuLines span{left: 12px;}
.fixedBottomMenu.active .fixedBottomMenuLines span:nth-child(1){transform: rotate(45deg);}
.fixedBottomMenu.active .fixedBottomMenuLines span:nth-child(2){transform: rotate(-45deg);top: 0;}

.fixedBottomMenuList{opacity: 0;visibility: hidden;transition: 300ms;}
.fixedBottomMenu.active .fixedBottomMenuList{opacity: 1;visibility: visible;height: auto;width: 100%;}
.fixedBottomMenu.active .fixedBottomMenuLines{right: 20px}

.fixedBottomMenuList a{color: var(--white);font: normal normal normal 12px/16px Avenir;display: flex;padding: 8px;align-items: center;gap:12px;}
.fixedBottomMenuList a img{height: 15px;}
.fixedBottomMenuList a div{border-bottom:1px solid var(--white);width: 100%;display: block;}



#btuForm{display: none;}
#btuForm.active{display: block;}

.hesaplamaCol_ .col-sm-7{padding: 0;}
.hesaplamaCol_ .col-sm-7 label{font: normal normal normal 12px/16px gothic;color: var(--black);}

.hesaplamaColEkAyriktilar .col-sm-12{padding: 0px;}

.hesaplamaCol_{margin-top: 30px;}
.hesaplamaCol_ h3 span{background: transparent linear-gradient(75deg, #FD3F3F 0%, #811212 100%);font: normal normal bold 10px/14px gothic;color:var(--white);padding: 8px 25px;display: inline-block;z-index: 1;position: relative;}
.hesaplamaCol_ h3{position: relative;display: block;margin-bottom: 15px;}
.hesaplamaCol_ h3::after{content:'';position: absolute;left:0px;bottom:0px;width: 100%;height: 2px;background: transparent linear-gradient(90deg, #FD3F3F 0%, #811212 100%);z-index: 0;}




.btuSonuc{background: transparent linear-gradient(62deg, #FD3F3F 0%, #811212 100%)}
.btuSonuc h4{font: normal normal bold 10px/14px gothic;color: var(--white);background: transparent linear-gradient(290deg, #FD3F3F 0%, #811212 100%);display: inline-block;padding: 8px 15px;margin-bottom: 15px;}


.btuSonucParent{padding: 0px 0px 0px 15px}
.btuSonucParent p{text-align: center;margin-top: 8px;font-size: 10px;}
.btuSonuc{padding: 15px}
.btuSonuc ul{display: flex;align-items: center;gap:8px}
.btuSonuc ul li{padding: 0px 15px;margin-left: -15px;}
.btuSonuc ul li:first-child {border-right:1px solid var(--white);}
.btuSonuc ul li:last-child {padding: 0px 20px;}
.btuSonuc ul li p{margin: 0;font: normal normal normal 12px/16px gothic;color: var(--white);}
.btuSonuc ul li h2{margin: 0;font: normal normal bold 20px/28px gothic;color: var(--white);}
button.btn{background-color: var(--black);border-radius: 5px;font: normal normal normal 12px/16px gothic;color: var(--white)!important;padding: 8px 25px;}


#btu-sonucu.active{background-color: var(--white);box-shadow: 0px 0px 10px rgba(0,0,0,0.1);border-radius: 4px;padding: 15px;}
#btu-sonucu th{font-size: 14px;font-weight: 600;text-align: center;}
#btu-sonucu td{font-size: 12px;font-weight: 400;text-align: center;}


.urunMiktariDegistirWrap{display: flex;align-items: flex-end;gap:15px}



.urunOlcuSonucuBottom{display: flex;align-items: center;justify-content: space-between;}
.urunOlcuSonucuBottom li:nth-child(2){display: flex;align-items: center;gap:8px}
.urunOlcuSonucuBottom li:nth-child(2) a{background: transparent linear-gradient(71deg, #FD3F3F 0%, #811212 100%);color: var(--white);padding: 4px 8px;}






 .viewerWrap{background-color: #f1f0ea;height: calc(100vh - 60px);width: 100%;position:relative;overflow-x: hidden;}
model-viewer{height:100%;width:100%;}

    
.progress-bar {display: block;width: 33%;height: 10%;max-height: 2%;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);border-radius: 25px;box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.9);background-color: rgba(0, 0, 0, 0.5);}

.progress-bar.hide {visibility: hidden;transition: visibility 0.3s;}

.update-bar {background-color: rgba(255, 255, 255, 0.9);width: 0%;height: 100%;border-radius: 25px;float: left;transition: width 0.3s;}

#ar-button {background-image: url(ar_icon.png);background-repeat: no-repeat;background-size: 20px 20px;background-position: 12px 50%;background-color: #fff;position: absolute;left: 50%;transform: translateX(-50%);white-space: nowrap;bottom: 16px;
padding: 0px 16px 0px 40px;font-family: Roboto Regular, Helvetica Neue, sans-serif;font-size: 14px;color:#4285f4;height: 36px;line-height: 36px;border-radius: 18px;border: 1px solid #DADCE0;}

#ar-button:active {
  background-color: #E8EAED;
}

#ar-button:focus {
  outline: none;
}

#ar-button:focus-visible {
  outline: 1px solid #4285f4;
}

@keyframes circle {
  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes elongate {
  from { transform: translateX(100px); }
  to   { transform: translateX(-100px); }
}

model-viewer > #ar-prompt {position: absolute;left: 50%;bottom: 60px;animation: elongate 2s infinite ease-in-out alternate;display: none;}

model-viewer[ar-status="session-started"] > #ar-prompt {display: block;}

model-viewer > #ar-prompt > img {
  animation: circle 4s linear infinite;
}

.alert{background-color: #CCB511;color:#ffffff;padding:8px 15px;font-family: tahoma;}

.loader360{position: absolute;right:0px;top:0px;left:0px;bottom:0px;width:100%;height:100%;z-index: 99;background-color: #fff;display: flex;align-items: center;justify-content: center;}
.qrWrap{position:absolute;left:0px;top:0px;z-index:100;box-shadow:0px 0px 10px #d2d2d2;padding:8px;border-radius:10px;display: flex;align-items: center;justify-content: center;gap:8px}
.qrWrap span{display:block;width:180px;margin-bottom:8px;font-weight:600;font-size:13px;font-family:arial}

@media(max-width:768px){
  .qrWrap{display: none;}
}


@media(max-width:768px){
    .containerCol_{margin-block: 15px;}
    .pageRightContent .pageRightContentInner{padding: 0px;}
    .urunFilters ul{grid-template-columns: repeat(2,1fr);}
    .urunFilters ul select{font: normal normal 600 11px/15px gothic;}
    .urunFilters ul button.btn{font-size: 11px;}
    .urunlerLists ul{grid-template-columns: repeat(2,1fr);}

    .urunlerLists ul a h3{font: normal normal normal 11px/13px gothic;}

    .urunlerLists ul a h3{bottom:15px}
    .urunlerLists ul a h3::before{bottom:-5px}

    .urunlerLists ul a h2{font: normal normal normal 11px/13px gothic;bottom:20px}

    .nameParent{flex-direction: column-reverse;gap:15px}

    .urunIcons{grid-template-columns: repeat(3,1fr);gap:10px}
    .urunIcons i{color: #000000;font-size: 36px;}

    .urunIcons a img{max-width: 35px;max-height: 35px;min-height: 35px;min-width: 35px;}
    .urunIcons a h4{font: normal normal normal 9px/11px gothic;}
}