.loader {width: 20px;height: 20px;border-radius: 50%;display:inline-block;box-shadow: 0 0 10px 2px rgba(0,0,0,0.1) inset;
        &:after {content: '';display: block;width: 100%;height: 100%;border-radius: 50%;box-shadow: 0 1px 0 #000 inset;animation: spin 0.5s linear infinite;}
        &.white{
            &:after {box-shadow: 0 1px 0 #fff inset;animation: spin 0.5s linear infinite;}
        }
        &.w16{width: 16px; height: 16px;}
        &.w25{width: 25px; height: 25px;}
        &.w30{width: 30px; height: 30px;}
        &.w50{width: 50px; height: 50px;}
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .checkbox1{display:flex;align-items:center;position:relative}
    .checkbox1 input[type=checkbox]{position:absolute;width:0;height:0;overflow:hidden;font-size:0px;opacity:0}
    .checkbox1 a{text-decoration:none}
    .checkbox1 input[type=checkbox]+.a{width:20px;border-radius:3px;min-width:20px;height:20px;position:relative;display:inline-block;border:1px solid #000;margin-right:10px}
    .checkbox1 input[type=checkbox]:checked+.a:before{content:"\02713";font-size:30px;position:absolute;top:-6px;min-width:15px;left:0;padding:0;margin:0;line-height:18px;color:red}
    
    
    .scrollHide{overflow: hidden;}
    #sepetBox{position: fixed; top: 0; padding: 15px 15px 0 15px; right: -40%; width: 40%; background: #fff; height: 100%; z-index: 99; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; }
    #sepetBox.setFlex{display: flex; justify-content: center; align-items: center; flex-direction: column;}
    #sepetBox .sepetClose{ padding-left: 5px; position: absolute; z-index: 99;  background:#eaeaea; right: 10px; top:5px; cursor: pointer; font-size: 20px; display: flex; align-items: center}
    #sepetBox .sepetClose span{font-size:12px;}
    #sepetBox .sepetUl{margin: 0; padding: 0; width:100%}
    #sepetBox #sepetSend{display: flex; flex-direction: column; padding:0; margin:0;position: relative; height: 100%;}
    #sepetBox .overFlowx{overflow-y: auto; padding-bottom: 100px}
    
    /* ul formatı */
    #sepetBox .sepetUl .ulli{display: flex; justify-content: space-between; width: 100%; margin: 0; padding: 0; padding: 5px; border-bottom: 1px dashed #eaeaea}
    #sepetBox .sepetUl .ulli li{list-style: none; font-size: 13px; padding:10px 5px; width: 100%;}
    #sepetBox .sepetUl .ulli li.sepetResim{width: 80px}
    #sepetBox .sepetUl .ulli li.sepetResim img{width: 100%}
    #sepetBox .sepetUl .ulli li:last-child{text-align: center; width: 50px}
    #sepetBox .sepetUl .ulli li.sepetUrunAdi{display:inline-flex; flex-direction: column; justify-content: center;}
    #sepetBox .sepetUl .ulli li.sepetUrunAdi h2{ margin: 0; padding: 0 0 5px 0; font-size: 15px; font-weight:400; line-height: 16px; }
    #sepetBox .sepetUl .ulli li.sepetAction i{display: inline-block; padding: 10px 10px 0 10px; cursor: pointer;}

    
    /* table formatı */
    #sepetBox .sepetUl tr th{font-size: 13px; padding:0 5px;}
    #sepetBox .sepetUl tr td{padding: 5px; border-bottom: 1px dashed #eaeaea}
    #sepetBox .sepetUl tr th{text-align: left}
    #sepetBox .sepetUl tr td.sepetResim{width: 80px}
    #sepetBox .sepetUl tr td img{display: block; width:100%;}
    #sepetBox .sepetUl tr td .fiyat{font-weight: bold; font-size: 13px;}
    #sepetBox .sepetUl tr .sepetUrunAdi h2{ margin: 0; padding: 0; font-size: 14px; line-height: 16px; }
    #sepetBox .sepetUl tr .sepetUrunAdi span{font-size: 13px;}
    #sepetBox .sepetUl tr i{display: inline-block; padding: 10px 0; cursor: pointer;}
    
    
    /* table formatı */
    .loading {  position: fixed;  top: 0;  right: 0;  background: rgba(0, 0, 0, 0.88);  display: none;  width: 40%;  height: 100%;  z-index: 9999;}
    .loading span {  position: absolute;  left: 50%;  top: 50%;  margin: -25px 0 0 -25px;}
    .sepetGenelBilgi{ position: absolute; display: flex; bottom: 0; justify-content: space-between; align-items: center; background: #f1f1f1; width:100%; margin:0 0 0 -15px;}
    .sepetGenelBilgi .qw1{ padding:5px 0 5px 15px}
    .sepetGenelBilgi .qw2{ padding: 0 25px; text-align: right;}
    .sepetGenelBilgi .q0{border-bottom:1px dashed #ccc; padding:6px 0}
    .sepetGenelBilgi .q0:last-child{border: 0}
    .sepetGenelBilgi .q0 .q1{display: inline-block; width: 100px; font-size: 14px;}
    .sepetGenelBilgi .q0 .q2{display: inline-block; font-size: 14px; font-weight: 600; padding-left: 10px}
    .sepetGenelBilgi .q0 .q2 small{font-size: 10px}
    .sepetGenelBilgi .indirimkodu{border: 1px solid #222; width: 100%; background: none; border-bottom: 0; display:inline-block; padding: 3px 10px; cursor: pointer; font-size: 13px; margin: 0; color: #000}
    .sepetBtn{display: block; margin: 0; background: #000; color:#fff; width: 100%; border:0; padding:15px 10px; font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; gap:5px}
    .sepetInf{font-size: 11px;}
    
    
    
    .popupBox {  height: 100%;  padding: 10px 15px; left:0;   display: flex; align-items: center;  position: fixed;  z-index: 999;  top: 0; width: 100%;  background: rgba(0, 0, 0, 0.79);}
    
    .popupBox .popupBoxDiv {  display: flex;  flex-direction: column;  padding: 15px;  width: 100%;  max-height: 100%;  background: #fff;  border-radius: 3px;  -webkit-box-shadow: 0px 0px 49px 8px rgba(0, 0, 0, 0.75);  position: relative;   -moz-box-shadow: 0px 0px 49px 8px rgba(0, 0, 0, 0.75);  box-shadow: 0px 0px 49px 8px rgba(0, 0, 0, 0.75);}
    
    .popupBox.indirim{width:40%;  right: 0 ; left: inherit; align-items: flex-end; }
    .popupBox.login{width:100%;  right: inherit; left:0} 
    .popupBox.login .popupBoxDiv{width:400px; left:calc(50% - 200px)} 
    
    
    .popupBox .popupBoxDiv .popupBoxClosed {  position: absolute;  right: 7px;  top:6px; transform: scale(1.5); cursor: pointer;}
    .popupBox .popupBoxDiv .popupBoxContent {  overflow: auto;}
    .popupBox .popupBoxDiv .popupBoxContent label,.popupBox .popupBoxDiv .popupBoxContent .inputDiv {  display: block;  width: 100%;  margin-bottom: 12px;  position: relative;}
    .popupBox .popupBoxDiv .popupBoxContent label input,.popupBox .popupBoxDiv .popupBoxContent .inputDiv input { background: #eaeaea;  width: 100%;  border: 0;  border-radius: 3px;  padding: 12px 15px;  font-size: 16px;  box-shadow: none;  -webkit-appearance: none;}
    .popupBox .popupBoxDiv .popupBoxContent label i,.popupBox .popupBoxDiv .popupBoxContent .inputDiv i {  position: absolute;  right: 6px;  top: 6px;  color: red;  display: block;  height: 28px;}
    .popupBox .popupBoxDiv .popupBoxContent textarea {  width: 100%;  font-family: Open Sans;  border: 0;  border-radius: 3px;  padding: 10px 15px;  font-size: 15px;  box-shadow: none;  -webkit-appearance: none;  font-size: 13px;}
    
    
    #teslimatBilgileri{position: absolute; top: 0; right:-100%; width: 100%; z-index: 9999; background: #f1f1f1; padding: 15px 15px 0 15px; height: 100%;}
    #teslimatBilgileri #teslimatKapat{position: absolute; top: 0; left: 0; background: #ccc; padding: 4px 8px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap:2px}
    #teslimatBilgileri .odemetitle{text-align: center;}
    #teslimatBilgileri #odemeSend {background: none !important; padding: 0;margin: 0;}
    #teslimatBilgileri #odemeSend label.input1{display: block; width: 100%; margin-bottom:10px; position: relativ; }
    #teslimatBilgileri input:focus, #teslimatBilgileri textarea:focus{outline: none; box-shadow: none;}
    #teslimatBilgileri #odemeSend .input1 input, #teslimatBilgileri #odemeSend .input1 select{display: block; width: 100%; font-size: 15px; border-radius: 3px; background: #fff; border: 0; -webkit-appearance:none; box-shadow: none; padding:11px 15px;}
    #teslimatBilgileri #odemeSend .input1 textarea{display:block;width:100%;font-size:15px;border-radius:3px;background:#fff;border:0;-webkit-appearance:none;box-shadow:none;padding:11px 15px;resize:vertical;min-height:40px;font-family:inherit;line-height:1.4}
    #teslimatBilgileri #odemeSend input.hata,
    #teslimatBilgileri #odemeSend select.hata,
    #teslimatBilgileri #odemeSend textarea.hata{box-shadow:0 0 0 1px red inset !important;background:#fff5f5 !important}
    #teslimatBilgileri #odemeSend .nice-select.hata{box-shadow:0 0 0 1px red inset !important}
    .swal2-container{z-index:99999 !important}
    #swal2-content{color:#000}
    label[for="sozlesme_onay"]{display: flex; font-size: 11px;}
    
    
    .nice-select{position: inherit;}
    .nice-select .list{height: 100%; background: rgba(0,0,0,0.57); width:100%;overflow: auto; top: 0; padding: 40px; margin: 0}
    .nice-select .list li{ background: #fff; border-radius: 4px; padding:3px 10px !important; margin-bottom: 1px; display: flex; align-items: center}
    .nice-select .list li i, .nice-select .list li svg{ margin-right: 5px; font-size:20px}
    .nice-select .list:hover .option:not(:hover){background: #fff !important;}
    .nice-select span{position: relative; display: flex; align-items: center;}
    .nice-select span i, .nice-select span svg{ margin-right:5px}
    .nice-select:after{display: none}
    .nice-select span:after {border-bottom: 2px solid #999;border-right: 2px solid #999;content: '';display: block;height: 5px;margin-top: -4px;pointer-events: none;position: absolute;right: -16px;top: 50%;-webkit-transform-origin: 66% 66%;-ms-transform-origin: 66% 66%;transform-origin: 66% 66%;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all .15s ease-in-out;transition: all .15s ease-in-out;width: 5px}
    .nice-select.open span:after {-webkit-transform: rotate(-135deg);-ms-transform: rotate(-135deg);transform: rotate(-135deg)}
    .nice-select.small{height: auto; line-height: inherit; padding:4px 25px 4px 10px}
    
    @media screen and (max-width: 970px) {
        #sepetBox{right: -100%; width: 100%; padding: 15px 5px 0 5px; z-index: 99999999999; }
        .popupBox{align-items: flex-end}
        .popupBox.indirim{width:100%;  right: 0; }
        .loading { width: 100%;}
        #sepetBox .sepetUl tr td img{display: block; max-height:50px} 
        #sepetBox .sepetUl tr .sepetUrunAdi h2{margin: 0; padding: 0; font-size: 13px; font-weight: 300 }
        #sepetBox .sepetUl tr td .fiyat{ font-size: 13px; white-space: nowrap;}
        #sepetBox .sepetUl tr td .fiyat small{  font-style: italic; font-size:9px}
        #sepetBox .overFlowx{padding-bottom: 150px;}
        .sepetGenelBilgi{ margin:0 0 0 -5px; display: block;}
        .sepetGenelBilgi .q0{padding:3px 0}
        .sepetGenelBilgi .q0 .q1{font-size: 12px;}
        .sepetGenelBilgi .q0 .q2{font-size: 12px; }
        .sepetGenelBilgi .qw1{ padding:5px 0 5px 15px;}
        .sepetGenelBilgi .qw2{padding:0; text-align: right; }
        .sepetGenelBilgi .indirimkodu{ width: inherit}
        #promosyonDiv .poro1{ width:95%; left: 2.5%; }
        .popupBox.login .popupBoxDiv{width:100%; left:0} 
        .popupBox.login .popupBoxDiv img{width:50%;} 
        .sepetGenelBilgi .sepetBtn{font-size: 15px}

    }
    
   
    /* Ödeme yöntemi (Kredi Kartı / Havale) */
    .odemeYontem{display:flex;gap:10px;margin:0 0 15px}
    .odemeYontemItem{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:1px solid #ddd;border-radius:8px;padding:10px 12px;cursor:pointer;background:#fff;transition:.2s;margin:0}
    .odemeYontemItem.active{border-color:red;box-shadow:0 0 0 2px rgba(255,0,0,.08)}
    .odemeYontemItem input{position:absolute;opacity:0;width:0;height:0}
    .odemeYontemIcon{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f4f4f4;color:red}
    .odemeYontemItem.active .odemeYontemIcon{background:red;color:#fff}
    .odemeYontemText{display:flex;flex-direction:column;line-height:1.25;min-width:0}
    .odemeYontemText strong{font-size:14px;font-weight:600}
    .odemeYontemText small{font-size:11px;color:#777}
    #havaleBilgileri{background:#fafafa;border:1px dashed #ccc;border-radius:8px;padding:12px 15px;margin:0 0 15px}
    #havaleBilgileri .havaleSatir{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #e3e3e3;padding:6px 0;font-size:13px}
    #havaleBilgileri .havaleSatir:last-of-type{border-bottom:0}
    #havaleBilgileri .havaleIban{font-family:monospace;letter-spacing:.4px;word-break:break-all}
    #havaleBilgileri .havaleNot{font-size:12px;color:#666;margin-top:8px;line-height:1.5}
    @media (max-width:500px){
        .odemeYontem{gap:6px}
        .odemeYontemItem{padding:7px 6px;gap:6px}
        .odemeYontemIcon{width:30px;height:30px;flex:0 0 30px}
        .odemeYontemIcon svg{width:17px;height:17px}
        .odemeYontemText strong{font-size:12px}
        .odemeYontemText small{font-size:9px;line-height:1.15}
    }