.card-area .kpi-box{
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    height: 100%;            
}
.card-area{
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 16px 0 16px -1px;
}
.card-area .col{
    width: 100%;
    height: 104px;
}
.card-area .user{
    display: flex;
    align-items: center;
    gap: 6px;
}
.card-area h4{
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 400;
}
.card-area p{
    margin: 0;
}
.user{
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-badge{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(248,249,250);
    border-radius: 50%;           
}
.user .user-badge p{
    font-size: 12px;
    font-weight: 400;
}
.user .text p{
    font-weight: 500;
    font-size: 14px;
    color: #1f2937;
}
.card-area .value{
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}
.urun-tablosu{
    margin: 0;
}
.urun-tablosu tfoot span{
    display: block;
}
.urun-tablosu table td{
    font-size: 14px;
}
.urun-tablosu table {
    margin: 0;
}
.urun-tablosu .panel-heading,
.sevkiyat-teslimat .panel-heading,
.odeme-gecmisi .panel-heading,
.xml-export .panel-heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.siparis-detay .col-md-9, .siparis-detay .col-md-3{
    padding: 0;
    
}
.siparis-detay .col-md-9{
    width: 78%;
}
.siparis-detay {
   display: flex;
   gap: 24px;
   padding: 0 16px;
}
.siparis-detay .row::after,.siparis-detay .row::before{
    display: none;
}
.urun-tablosu .panel-default,
.sevkiyat-teslimat .panel-default,
.siparis-log .panel-default{
    border-radius: 8px;
    overflow: hidden;
}
.urun-tablosu table b{
    font-weight: 500;
    color: rgb(33,37,41);
    display: block;
}
.sticky-area{
    position: sticky;
    top: 55px;
    margin: 0 0 16px;
} 
.sticky-area .input-group,.sticky-area select{
    width: 100%;
}
.sticky-area .input-group{
    display: flex;
    align-items: center;
}
.sticky-area .input-group .btn{
    border-radius: 0px 4px 4px 0px;
    height: 46px;
}

.sticky-area .input-group select{
    border-radius: 4px 0px 0px 4px;
    border-right: none;    
    line-height: 24px !important;
}

.sticky-area .btn-block{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.btn-block.right{
    flex-wrap: inherit;
}
.sticky-area .btn-block button{
    width: 100%;
    border: 1px solid #e5e7eb;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    height: 66px;
    
}
.sticky-area .btn-block button span{
    margin: 0;
    display: block;
}
.notes .btn-block{
    margin: 16px 0 0;
}
.notes .btn-block .badge{
    background: rgb(248,249,250);
    color: rgb(33,37,41);
    border: 1px solid #dee2e6;
    font-weight: 500;
    transition: 0.2s;
    cursor: pointer;
}
.notes .btn-block .badge:hover{
    background-color: #e5e7eb;
    transition: 0.2s;
}
.musteri-bilgileri .user-block{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
}
.musteri-bilgileri .user .text p{
    margin: 0;     
}
.musteri-bilgileri .user-badge{
    background: rgba(13,110,253,0.1);
    color: rgb(13,110,253);
}
.musteri-bilgileri{
    margin: 16px 0 0;
    border-radius: 8px;
    overflow: hidden;
}
.musteri-bilgileri .btn-link{
    min-width: 32px;
    width: 32px;
    height: 32px;
    border: 1px solid #dee2e6;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}    
.musteri-bilgileri .btn-link:hover{
    background: #d3d4d5;    
}
.sticky-area .panel-heading{
    font-size: 14px;
    margin: 0;
    padding: 8px 16px;
    font-weight: 600;
    background: rgba(203, 203, 203, 0.58);
}
.sticky-area .list-unstyled .list-item{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}
.siparis-durum span{
    display: block;
    font-weight: 500;
    font-size: 12px;  
    margin: 0 0 8px;
}
.sticky-area .list-unstyled{
    margin: 0;
}
.siparis-durum,.adres-teslimat,.odeme-gecmisi{
    border-radius: 6px;
    overflow: hidden; 
}
.urun-tablosu .old-price {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 14px;
    margin-right: 5px;
}

#shipmentContentModal .modal-footer button{
    background: #6c757d;
    color: #fff;
}
#shipmentContentModal .modal-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#shipmentContentModal .modal-footer::after,
#shipmentContentModal .modal-footer::before,
#createShipmentModal .modal-footer::after,
#createShipmentModal .modal-footer::before{
    display: none;
}

#shipmentContentModal .modal-body{
    padding: 0;
}
#shipmentContentModal .modal-header,
#detailModal .modal-header,
.edit-modal .modal-header,
#transferModal .modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#shipmentContentModal table th:first-child{
    padding-left: 16px;
}
#shipmentContentModal table td{
    padding: 8px 16px 8px 16px; 
}
.btn-modal-eye{
    border: 1px solid #ddd;
    transition: 0.2s;
}
.btn-modal-eye:hover{
    background: #e4e4e47d;
    transition: 0.2s;
}
.sevkiyat-teslimat table select,#addPaymentModal select{
    width: 100%;
}
.btn-etiket{
    font-size: 12px; 
    background-color: #0d6efd; 
    color: #fff;
    transition: 0.2s;
}
.btn-etiket:hover{
    background-color: #0a3c87; 
    color: #fff;
    transition: 0.2s;
}
.adres-teslimat .checbox-area{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #e5e7eb;
    gap: 12px;
}
.adres-teslimat .checbox-area [type="radio"]:checked,
.adres-teslimat .checbox-area [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.adres-teslimat .checbox-area [type="radio"]:checked + label,
.adres-teslimat .checbox-area [type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
.adres-teslimat .checbox-area [type="radio"]:checked + label:before,
.adres-teslimat .checbox-area [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
.adres-teslimat .checbox-area [type="radio"]:checked + label:after,
.adres-teslimat .checbox-area [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #0d6efd;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.adres-teslimat .checbox-area [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.adres-teslimat .checbox-area [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.adress-box-area{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
}
.adress-box-area .address-box {
    background-color: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    position: relative;
    height: 134px;
}
.adress-box-area .musteri-card{
    border: 1px solid #0d6efd;
}
.adress-box-area h6{
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.adress-box-area .musteri-card i{
    color: #0d6efd;
}

.adress-box-area .btn-edit-address {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--primary-color);
    cursor: pointer;
    background: #fff;
    border: 1px solid #e2e8f0;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.address-box.teslimat-noktasi{
    border: 1px solid #ffc107;
    background: rgba(255,193,7,0.1);
}
.address-box.teslimat-noktasi label,
#addPaymentModal label,#createShipmentModal label{
    display: block;
}
.address-box.teslimat-noktasi select{
    width: 100%;
    margin: 0 0 12px;
    height: 30px;
    padding: 0;
}
.address-box.teslimat-noktasi p{
    font-style: italic;
    margin: 0;
}
.address-box.musteri-card b{
    font-weight: 600;
    color: #000;
}
#addressSelectModal .modal-header,
#addPaymentModal .modal-header,
#createShipmentModal .modal-header,
#detailModal .modal-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#addressSelectModal .list-group-item.active h6{
    color: #fff;
}

#addressSelectModal .list-title{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

#addressSelectModal .list-title h6{
    font-size: 16px;
    margin: 0;
}

#addressSelectModal .modal-body p{
    font-size: 12px;
}
.odeme-gecmisi .panel-heading a{
    border: 1px solid #198754;
    color: #198754;
    transition: 0.2s;
}
.odeme-gecmisi .panel-heading a:hover{
    background: #198754;
    color: #fff;
    transition: 0.2s;
}
.odeme-gecmisi,.siparis-log {
    margin: 16px 0 0;
}

#addPaymentModal .modal-body .item label{
    font-weight: 600;
}

#addPaymentModal .modal-body .item,
#createShipmentModal .modal-body .item{
    margin: 0 0 18px;
}

.sevkiyat-teslimat table select{
    height: 40px;
    padding: 0 6px;
}
#createShipmentModal select{
    width: 100%;
    padding: 0;
    height: 40px;
}
#createShipmentModal .modal-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#createShipmentModal .form-check{
    display: flex;
    align-items: center;
    gap: 8px;
}

#createShipmentModal .form-check label{
    margin: 0;
    font-size: 14px;
}

#createShipmentModal .form-check input{
    margin: 0;
}

#createShipmentModal  .btn-olustur{
    background: #198754;
    color: #fff;
    border-color: #198754;
}

#createShipmentModal  .btn-iptal{
    background: #c21529;
    color: #fff;
    border-color: #c21529;
}


.siparis-detay .left-section{
    margin: 0 0 16px;
}

.kargo-liste .filtreler .row{
    display: flex;
    align-items: flex-end;
}
.kargo-liste .filter-group button{
    background: #007bff;
    color: #fff;
    width: 100%; 
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.kargo-liste .custom-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 13px; 
}
.kargo-liste .custom-table th { 
    background-color: #f1f3f5; 
    padding: 12px; 
    text-align: left; 
    border-bottom: 2px solid #dee2e6; 
    font-weight: 600; 
    color: #495057; 
}
.kargo-liste .custom-table td { 
    padding: 12px; 
    border-bottom: 1px solid #dee2e6; 
    vertical-align: middle; 
}

.kargo-liste .table-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #eee;
    padding: 2px;
    border-radius: 4px;
    background: #fff;
}

.kargo-liste .stat-badge { 
    background: #e9ecef; 
    border: 1px solid #dee2e6; 
    padding: 2px 6px;
    border-radius: 4px; 
    font-size: 11px; 
    color: #495057; 
    display: flex; 
    align-items: center; 
    gap: 5px; 
    width: max-content;
}

.kargo-liste .stat-badge strong { 
    color: #343a40; 
}

.kargo-liste .stats-container{
    display: flex;
    align-items: center;
    gap: 10px;
}

.kargo-liste .info-name{
    font-weight: 600;
    color: #007bff;
}

.kargo-liste .panel-heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kargo-liste .panel-heading h3{
    margin: 0;
}

.kargo-liste .btn-genel-ayar{
    background: #343a40;
    color: #fff;
}

.kargo-liste .btn-ayar-ekle{
    background-color: #007bff;
    color: #fff;
}

.kargo-liste .state-badge{
    white-space: nowrap;
    padding:4px 8px; 
    border-radius:4px; 
    font-size:11px;
}
.kargo-liste .state-badge.disabled{
    background:#eee; 
    color:#666; 
}
.kargo-liste .state-badge.success{
    background: #28a745;
    color: #fff;
}

#shippingSettingsModal,
#detailModal,
#notificationModal,
#script-note-modal,
#disclaimer-modal,
#log-history-modal,
#preview-modal,
#edit-modal,
#requestModal,
#transferModal,
#createRequestModal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    padding: 0 16px 0;
}

#preview-modal{
    z-index: 9999999;
}

#notificationModal {
  
    flex-direction: column;   
}
#shippingSettingsModal .modal-content,
#detailModal .modal-content,
#notificationModal .modal-content,
#requestModal .modal-content,
#createRequestModal .modal-content{
    max-width: 900px;
    width: 100%;   
}

#shippingSettingsModal .action-header,
#detailModal .action-header,
#notificationModal .action-header,
#disclaimer-modal .modal-header,
#log-history-modal .modal-header,
#script-note-modal .modal-header,
#preview-modal .modal-header,
#requestModal .modal-header,
#createRequestModal .modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#shippingSettingsModal .currency-tab {
    padding: 8px 20px;
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-weight: 600;
    color: #666;
    font-size: 13px;
    transition: 0.2s;
}

#shippingSettingsModal .currency-tab.active {
    background: #fff;
    border-color: #dee2e6;
    
    color: #000;
}

#shippingSettingsModal .currency-tabs {
    display: flex;
    gap: 5px;
    position: relative;
    z-index: 10;
    margin: 16px 0 -1px 0;
}

#shippingSettingsModal .currency-input-wrapper {
    display: none;
}

#shippingSettingsModal .currency-input-wrapper.active {
    display: block;
    animation: fadeIn 0.3s ease;
}
#shippingSettingsModal .custom-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}
#shippingSettingsModal select{
    width: 140px;
    height: 30px;
    padding: 0;
}

#shippingSettingsModal .table-input {
    width: 100%;
    padding: 6px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    text-align: right;
}

#shippingSettingsModal .custom-table th {
    padding: 6px;
}

#shippingSettingsModal .modal-header span{
    font-size:16px; 
    font-weight:bold;
}
#shippingSettingsModal .action-header button{
    background: #007bff;
    color: #fff;
}

#shippingSettingsModal .modal-content .table-responsive tbody{    
    height: 166px;
    overflow-y: auto;
    overflow-x: hidden;
}
#shippingSettingsModal .table-body-wrapper {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}
#shippingSettingsModal .table-body-wrapper::-webkit-scrollbar{
   display: none;     
}

#shippingSettingsModal .table-body-wrapper table {
    width: 100%;
}

#shippingSettingsModal .table-body-wrapper tbody {
    display: table;
    width: 100%;
}

#shippingSettingsModal .custom-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
    position: sticky;
    top: 0;
    background: #fff;
}

#shippingSettingsModal .custom-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

#shippingSettingsModal .modal-header,
#detailModal .modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between; 
    background: #343a40;
}

#shippingSettingsModal .modal-header span,
#detailModal .modal-header span{
    color: #fff;
}

#shippingSettingsModal .btn-vazgec,
#detailModal .btn-vazgec{
    background: #343a40;
    color: #fff;
}

#shippingSettingsModal .modal-footer button,
#detailModal .modal-footer button{
    height: 34px;
    padding: 0 8px;
}

.kargo-ayarlari-detay .form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.kargo-ayarlari-detay .file-upload-zone {
    border: 2px dashed #ced4da;
    border-radius: 4px;
    height: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fdfdfd;
    color: #666;
    position: relative;
   
}

.kargo-ayarlari-detay .file-upload-zone input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.kargo-ayarlari-detay .merged-row {
    background-color: #f1f8ff;
    border: 1px solid #cce5ff;
    padding: 15px;
    border-radius: 4px;
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 20px;
}
.kargo-ayarlari-detay .input-group {
    display: flex;
}
.kargo-ayarlari-detay h4{
    margin-bottom: 10px; 
    color: #343a40;
}
.kargo-ayarlari-detay .table-header{
    background:#e9ecef; 
    padding:8px; 
    border-radius:4px; 
    display:flex; 
    gap:10px; 
    align-items:center; 
    margin-bottom:5px;
}
.kargo-ayarlari-detay .table-header .btn-liste-ekle{
    background: #007bff;
    color: #fff;
}

.kargo-ayarlari-detay .merged-item {
    flex: 1;
}
.kargo-ayarlari-detay .input-group select {
    border-radius: 0 4px 4px 0;
    border-left: 0;
    background: #f8f9fa;
    width: auto;
    min-width: 50px;
    padding: 0;
    height: 40px;
}
.kargo-ayarlari-detay textarea{
    height: 90px;
}
.kargo-ayarlari-detay .file-upload-zone:hover {
    background: #f1f8ff;
    border-color: #007bff;
}
.kargo-ayarlari-detay .btn-dark {
    background-color: #343a40;
    color: #fff;
}
.kargo-ayarlari-detay .btn-duzenle{
    background: #007bff;
    color: #fff;    
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
}
.kargo-ayarlari-detay .btn-kopyala{
    background: #ffc107;
    color: #000;
}
.kargo-ayarlari-detay .btn-sil{
    background: #dc3545;
    color: #fff;
}
.kargo-ayarlari-detay .btn-kopyala,.kargo-ayarlari-detay .btn-sil{
    min-width: 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kargo-ayarlari-detay .buttons-area{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.kargo-ayarlari-detay .badge {
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    margin-right: 3px;
    display: inline-block;
}
.kargo-ayarlari-detay .badge.success{
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}


#detailModal .tab-btn {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    color: #666;
    font-size: 12px;
}

#detailModal .modal-tabs {
    display: flex;
    background: #f1f3f5;
    border-bottom: 1px solid #ddd;
    padding: 0 10px;
    flex-shrink: 0;
}
#detailModal .tab-btn.active {
    border-bottom-color: #007bff;
    color: #007bff;
    background: #fff;
}
#detailModal .limit-config-bar {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 8px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #856404;
}
#detailModal .tab-content {
    padding: 15px;
    display: none;
    flex-grow: 1;
    flex-direction: column;
}
#detailModal .tab-content.active {
    display: flex;
}
#detailModal .tab-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
#detailModal .compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
#detailModal .compact-table th {
    padding: 6px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    text-align: left;
}
#detailModal .compact-table td {
    padding: 4px;
    border: 1px solid #dee2e6;
}
#detailModal .compact-table input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
}
#detailModal .limit-config-bar .input-group{
    display:flex; 
    gap:10px; 
    align-items:center;
}
#detailModal .limit-config-bar label{
    font-weight:600; 
    margin-left:10px;
    margin: 0;
    font-size: 12px;
}
#detailModal .limit-config-bar input{
    width:60px; 
    border:1px solid #ddd; 
    padding:3px; 
    border-radius:3px;
    color: #000;
}
#detailModal .btn-ekle{
    background: #007bff;
    color: #fff;
}
#notificationModal .user-info{
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
}
#notificationModal .modal-close-btn,
#preview-modal .modal-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;   
}
#notificationModal .action-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}
#notificationModal .channel-selector {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
#notificationModal .channel-selector::-webkit-scrollbar{
    display: none;
}

#notificationModal .channel-button {
    flex: 1;
    padding: 8px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
#notificationModal .channel-button.active {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
}
#notificationModal .channel-form.active {
    display: block;
    animation: fadeIn 0.3s ease;
}
#notificationModal .recipient-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: #f9fafb;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    margin-bottom: 20px;
    font-size: 14px;
}
#notificationModal .form-group input[type="text"], 
#notificationModal .form-group input[type="datetime-local"], 
#notificationModal .form-group select, 
#notificationModal .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
 
}
#notificationModal .channel-form {
    display: none;
}
#notificationModal .btn-onizle{
    background-color: #ffffff;
    color: #111827;
    border-color: #d1d5db;
}
#notificationModal h4{
    font-weight: 600;
}
#notificationModal label{
    font-weight: 500;
}
#notificationModal h2{
    margin: 0;
    font-weight: 700;
}
#notificationModal .modal-content{
    border-radius: 8px;
    max-height: 920px; 
    overflow-x: hidden;
}

.ozellikler-v2 .head-block .input-group {
    position: relative;
    display: flex;
    align-items: center;
    border-collapse: separate;
    max-width: 300px;
    width: 100%;
}
.ozellikler-v2 .head-block{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 0 0 16px;
    margin: 0 10px;
    gap: 12px;
}
.ozellikler-v2 .head-block .input-group-text {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    background-color: #fff;   
    color: #adb5bd;
    text-align: center;
    white-space: nowrap;   
    border: 2px solid #ddd ;
    border-radius: 6px;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


.ozellikler-v2 .head-block h2{
    margin: 0;
    font-size: 20px;
    width: 100%;
    
}

.ozellikler-v2 .feature-item:hover {
    background-color: #fff;
    border-color: #e2e6ea;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ozellikler-v2 .row{
    margin: 16px 0 0;
    row-gap: 8px;
}

.feature-item {
    transition: all 0.2s;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.feature-item .input-group {
    position: relative;
    display: flex;    
    align-items: stretch;
    width: 100%;
}
.feature-item .order-input {
    max-width: 70px;
    text-align: center;
    background-color: #f8f9fa;
}
.feature-item select{
    width: 100%;
    height: 40px;
    border-right: none;
    padding: 0 16px;
}

.ozellikler-v2 .row .col-md-4{
    padding: 0;
}

.panel-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-block{
    display: flex;
    align-items: center;
    flex-wrap: wrap;    
    gap: 10px; 
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 1);
    padding: 6px;
    border-radius: 8px;
    max-width: 394px;
    width: 100%;
}

.calendar-block button{
    padding: 0 6px;
    background: #fff;
    border-radius: 8px;
    transition: 0.2s;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    height: 32px;
}
.calendar-block button.active,.calendar-block button.active:hover{
    background-color: rgba(29, 78, 216, 1); 
    color: #fff;    
    transition: 0.2s;
}

.calendar-block button.disable,.calendar-block button.default{
    background: #fff;
}

.calendar-block .btn:active{
    box-shadow: none;
}

.calendar-block .btn:hover{
    background-color: rgb(243,244, 246, 1);
}

.panel-header .breadcrumb ol{
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.panel-header .breadcrumb{
    padding: 0;
    background: transparent;
}

.panel-header h1{
    margin: 0;
    font-weight: 600;
}

.panel-header .breadcrumb ol a,.panel-header .breadcrumb ol span{
    font-size: 14px;
    color: #4b5354;
    font-weight: 500;
   
}

.panel-header .breadcrumb ol a:hover{
    color: #000;
    
}

.panel-area{
    margin: 40px 0 0; 
}

.panel-area li a{
    color: #6b7280;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
}

.panel-area .nav-tabs{
    border-bottom: 1px solid #ddd;
    margin: 0 0 24px;
    overflow-x: auto;
    max-width: 100%;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
}

.panel-area .nav-tabs::before,.panel-area .nav-tabs::after{
    display: none;
}

.panel-area .nav-tabs::-webkit-scrollbar{
    display: none;     
}

.panel-area .nav>li>a{
    border: none;
}

.panel-area .nav>li>a:focus, .panel-area .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}

.panel-area .nav>li>a:hover{
    border-color: transparent;   
    color: #2563ff;
    background: transparent;
}

.panel-area .nav-tabs>li.active>a, 
.panel-area .nav-tabs>li.active>a:focus, 
.panel-area .nav-tabs>li.active>a:hover{
    border: transparent;
    color: #2563ff;
    background: transparent;
}

.panel-area .nav-tabs li{
    position: relative;
}

.panel-area .nav-tabs li::after{
    content: "";
    display: none;
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #2563ff;
}

.panel-area .nav-tabs li.active::after,
.panel-area .nav-tabs li:hover::after{
    display: block;
}


.panel-area .urun-hareketleri .top-area .col-md-3{
    width: 20%;
}
.panel-area .grid-table-area{
    display: grid;
    grid-template-columns: 63.3% 36%;
    grid-template-rows: 1fr;
    gap: 16px;
}

.grid-table-area .static-table .table-head,
.grid-table-area .pie-table .table-head{
    display: flex;
    align-items: center;
    justify-content: space-between;   
    border-radius: 8px;      
    margin: 0 0 24px;
}

.grid-table-area .static-table .table-head h3,
.grid-table-area .pie-table .table-head h3,
.panel-area .table-area .table-header h3{
    font-size: 18px;
    line-height: 25px;
    margin: 0;
    font-weight: 500;
}

.grid-table-area .static-table .table-head a,
.grid-table-area .pie-table .table-head a,
.panel-area .table-area .table-header a{
   color: #9ca3af;
}

.grid-table-area .pie-table, 
.grid-table-area .static-table,
.grid-table-area .line-chart,
.panel-area .table-area{
    padding: 24px;    
}

.grid-table-area .pie-table, 
.grid-table-area .static-table,
.panel-area .table-area{
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    background: #fff; 
    border-radius: 12px;  
}
.panel-area .stat-card{
    height: 214px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
}

.panel-area .stat-card .stat-title,
.panel-area .stat-card i,
.panel-area .stat-card .stat-info,
.panel-area .stat-card .stat-alt-info{
    color: #292929;   
}

.panel-area .stat-card .stat-info,
.panel-area .stat-card .stat-title{
    font-weight: 500;
    text-transform: inherit;
}

.panel-area .stat-card .stat-average{
    font-weight: 600;
}

.panel-area .stat-card .stat-title{
   color: #575a5f;
   font-weight: 500;
}
.panel-area .table-area{
    margin: 24px 0;
}

.panel-area .table-area .table-header{
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-area .table-area .table-header i{
    cursor: pointer;
}
.panel-area .table-area .badge-success{
    color: rgba(22, 101, 52, 1);
    background: rgba(220,252, 231, 1);
}

.panel-area .table-area .badge-warning{
    color: rgba(154, 52, 18, 1);
    background-color: rgba(255,237, 213, 1);
}

.table-top{
    display: flex;
    align-items: center;
    justify-content: space-between;    
    margin: 30px 0 10px;
}

.table-area .dataTables_length label{
    display: flex;
    align-items: center;
}

.table-area .dataTables_length label select{
    width: 68px;
    margin: 0 8px 0;
}

.table-area .dataTable>tbody>tr>td{
    text-align: left;
}

.table-area .dataTable>tbody>tr>td p{
    margin: 0;
}

.table-area .table-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 0;
}

.table-area .table-buttons{
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.table-area .dt-search input{
    border: 2px solid #ddd;
    height: 34px;
    font-size: 14px;
    color: #676a6c;   
    padding: 8px;
}

.table-area .dt-buttons button{
    background: #fff;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    height: 34px;
}

.table-area .dt-buttons button a{
    color: #676a6c;
}

.table-area .dt-button-collection{    
    position: absolute;
    top: 0;
    left: auto !important;
    right: 2% !important;
    width: 200px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: white;    
    z-index: 2002;
    border-radius: 5px;
    box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.3);  
    height: 211px;
    overflow-x: hidden;
    overflow-y: auto;
}

.table-area .dt-button-collection button{
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.table-area .dt-button-collection .dt-button-active:after {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 1em;
    display: inline-block;
    content: "✓";
    color: #676a6c;
}


.table-area .dt-button-collection::-webkit-scrollbar{
    width: 5px;
} 

.table-area  .table-top select.dt-input{
    padding: 0;
    height: 32px;
}

.table-area  .table-top label{
    font-size: 14px;
}

.table-area .btn-ekle,
.table-area .btn-olustur{   
    margin: 0;
    min-width: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
}

.table-area .btn-ekle i,
.table-area .btn-olustur i{
    display: flex;
}

.table-area .btn-ekle:hover i{
    color: #007bff;
}

.table-area .btn-ekle:hover{
    background: #e2e8f0;
}

.badge-gray{
    color: #1f2937;
    background-color: #e7e7e7;
}

.badge-blue{
    color: #2168cb;
    background-color: #dbeafe;
}

.table-area table.dataTable thead>tr>th.dt-orderable-asc:hover, 
.table-area table.dataTable thead>tr>th.dt-orderable-desc:hover, 
.table-area table.dataTable thead>tr>td.dt-orderable-asc:hover, 
.table-area table.dataTable thead>tr>td.dt-orderable-desc:hover{
    outline: none; 
}

.table-area table.dataTable th.dt-type-numeric, 
.table-area table.dataTable th.dt-type-date, 
.table-area table.dataTable td.dt-type-numeric, 
.table-area table.dataTable td.dt-type-date{
    text-align: left;
}

.order-disabled .dt-column-order::before,
.order-disabled .dt-column-order::after{
    display: none !important; 
}

.table-area .btn-block{
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-area div.dt-container .dt-paging .dt-paging-button.first,
.table-area div.dt-container .dt-paging .dt-paging-button.last{
    display: none;
}

.table-area .dt-container .dt-paging .dt-paging-button{
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 16px;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.table-area .dt-paging{
    border: 1px solid #ddd;    
    border-radius: 4px;
}
.dt-paging.paging_full_numbers{
    border: none;
}

.table-area div.dt-container .dt-paging .dt-paging-button.current,
.table-area div.dt-container .dt-paging .dt-paging-button.current:hover{
    background: #337ab7;
    color: #fff !important;
}

#bildirim-tipi-filter{
    padding: 0;
}

.panel-area .badge{
    font-weight: 400;
}

.script-liste .panel-heading,
.script-liste .table-header,
.script-liste .button-area{
    display: flex;
    align-items: center;
    justify-content: space-between; 
}

.script-liste .badge-cloud{
    display: flex;
    align-items: center;
    gap: 6px;
}
.script-liste .badge-cloud .badge{
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

.script-name-cell span{
    display: block;
    color: #6c757d;
    font-size: 13px; 
}

.script-name-cell span:first-child{
    font-weight: 600;
    color: #333;
    font-size: 16px;
}
.badge.badge-js{
    background-color: #fff9e0;
    color: #c8b11a;
}
.badge.badge-html{
    background-color: #fff0e9;
    color: #e44d26;
}
.badge.badge-css{
    background-color: #e9edff;
    color: #264de4;
}

.badge.badge-page,
.badge.badge-lang{
    background-color: #eef2ff;
    color: #4338ca;
}

.icon-btn.btn-note{
    background: #fd7e14;
}

.icon-btn.btn-note:hover{
    background: #d36000;
}

.icon-btn.btn-log{
   background: #6c757d;
}

.icon-btn.btn-log:hover{
    background: #44494d;
}

.icon-btn.btn-edit{
    background: #5066e0;
}

.icon-btn.btn-edit:hover{
    background: #2e3a7e;     
}

.icon-btn.btn-clone{
    background: #28a745;
}

.icon-btn.btn-clone:hover{
    background: #175e27;
}

.icon-btn.btn-delete{
    background: #dc3545;
}

.icon-btn.delete:hover{
    background: #681921;
}

.icon-btn.btn-note i,
.icon-btn.btn-log i,
.icon-btn.btn-edit i,
.icon-btn.btn-clone i,
.icon-btn.btn-delete i{
    color: #fff;
}

.icon-btn.btn-note,
.icon-btn.btn-log,
.icon-btn.btn-edit,
.icon-btn.btn-clone,
.icon-btn.btn-delete{
    display: flex;
    align-items: center;
    justify-content: center;  
    min-width: 32px;
    width: 32px;
    height: 32px;
}



#script-note-modal .modal-title,
#log-history-modal .modal-title,
#disclaimer-modal .modal-title{
    font-size: 20px;
    line-height: 25px;
}

#script-note-modal .modal-container,
#log-history-modal .modal-container,
#disclaimer-modal  .modal-container,
#preview-modal  .modal-container{
    background: #fff;
    max-width: 600px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden; 
}

#script-note-modal .modal-body,
#disclaimer-modal  .modal-body{
    padding: 24px;
}

#log-history-modal .modal-body{
    padding: 16px;
}

#script-note-modal .modal-body p,
#log-history-modal .modal-body p,
#disclaimer-modal  .modal-body p{
    font-size: 18px;
}

#script-note-modal .modal-footer .modal-close-btn,
#log-history-modal .modal-footer .modal-close-btn,
#disclaimer-modal .modal-footer .modal-close-btn{
    background: #dc3545;
    color: #fff;
}

.modal-overlay .log-action.deactivated {
    color: #dc3545;
}

.modal-overlay .log-action.activated {
    color: #28a745;
}

.modal-overlay .log-action.edited {
    color: #5066e0;
}

#log-history-modal .log-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#log-history-modal .log-list-item {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #e8ebf0;
    
}

#script-note-modal h5,
#log-history-modal h5,
#disclaimer-modal h5{
    display: flex;
    align-items: center;
    gap: 8px;
}

#script-note-modal .modal-header button,
#log-history-modal .modal-header button,
#disclaimer-modal .modal-header button{
    font-size: 24px;    
}

#log-history-modal .log-list-item .log-action{
    font-weight: 600;
}

#log-history-modal .log-list-item span{
    font-weight: 500;
    font-size: 16px;
}

#log-history-modal .log-list-item:last-child{
    border-bottom: none;
}

.kargo-liste .btn-area{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

#middle .kargo-liste .panel-heading{
    height: 100% !important;
}

.script-liste .table-header .form-group.select{
    display: flex;
    align-items: center; 
    gap: 8px;
}

.script-liste .table-header .right-area{
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-liste .table-header .right-area select{
    padding: 0 8px;
    height: 34px;
}

.script-liste .table-header .right-area label{
    margin: 0;
}

.table-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 0;
}

.script-liste .header-actions .btn-light{
    border: 1px solid #ddd;    
}

.script-ekle .search-box {
    position: relative;
}



.script-ekle .search-box input {
    padding: 6px 10px 6px 34px;
    border-radius: 6px;
    border: 2px solid #ddd;
    width: 250px;
    font-size: 14px;
    background-color: #fff;
    height: 40px;
}

.script-ekle .search-box .fa-magnifying-glass {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

#middle .script-ekle .panel-heading,
#middle .script-ekle-detay .panel-heading,
#middle .modul-kutuphanesi .panel-heading,
#middle .destek-talepleri .panel-heading,
#middle .destek-talep-detay .panel-heading,
#middle .destek-talep-musteri .panel-heading,
#middle .destek-talep-musteri-detay .panel-heading{
    height: 100% !important;
}

.script-ekle .panel-heading h4{
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-library-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0 0;
}

.modul-area .custom-script-card {
    grid-column: 1 / -1;    
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    gap: 2rem;
    background: linear-gradient(135deg, #5066e0, #7c8eee);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
    
}


.modul-area .custom-script-card .btn {
    margin: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
    width: 100%;
    transition: 0.2s;
    font-size: 16px;
}

.modul-area .custom-script-card .btn:hover {
    background-color: white;
    color: #5066e0;
    transition: 0.2s;
}

.modul-area .custom-script-card .card-title{
    color: #fff;
    font-size: 18px;
    line-height: 26px;
}

.modul-area .custom-script-card .card-icon {
    font-size: 56px;
    color: #fff;
    opacity: 0.8;
    height: auto;
    margin-bottom: 0;
}

.modul-area .custom-script-card .btn i{
    font-size: 16px;
}

.modul-area .custom-script-card .card-body p{
    font-weight: 500;
}

.modul-area .card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.modul-area .card-status {
    position: absolute;
    top: 16px;
    right: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
}

.modul-area .card-icon {
    font-size: 40px;
    margin-bottom: 16px;
    color: #5066e0;
    height: 50px;
}

.modul-area .card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.modul-area .card .card-title {
    margin: 0 0 5px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.modul-area .card .card-text{
    margin: 0;
    font-size: 16px;
    color: #656565;
    flex-grow: 1;
    text-align: center;
}

.modul-area .card .btn {
    margin-top: 24px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.modul-area .card .btn-soft-primary {
    border: 1px solid #5066e0;
    background-color: rgba(80, 102, 224, 0.1);
    color: #5066e0;
}

.modul-area .card .btn-soft-success {
    border: 1px solid #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.modul-area .card .status-date {
    color: #6c757d;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.modul-area .card .badge-soft-success {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.modul-area .card .badge-soft-secondary {
    color: #6c757d;
    background-color: rgba(108, 117, 125, 0.1);
}

.modul-area .card .badge{
    border-radius: 6px;
    padding: 4px 7px;
}

.modul-area{
    margin: 0 0 40px;
}

.script-ekle .header-actions{
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.switch-group { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.switch-group label { 
    margin-bottom: 0; 
}
    
.switch { 
    position: relative; 
    display: inline-block;
    width: 50px; 
    height: 26px; 
}

.switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; 
    transition: .4s; 
    border-radius: 26px; 
}

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 20px; 
    width: 20px; 
    left: 3px; 
    bottom: 3px; 
    background-color: white; 
    transition: .4s; 
    border-radius: 50%; 
}

input:checked + .slider { 
    background-color: #28a745; 
}

input:checked + .slider:before { 
    transform: translateX(24px); 
}

.switch-group { 
    display: flex; 
    align-items: center; 
    gap: 6px;
}
.switch-group label { 
    margin-bottom: 0; 
}

.script-ekle-detay .builder-area {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 16px;
    align-items: flex-end;
    background-color: #f3f6f8;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
}

.script-ekle-detay .tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    flex-wrap: nowrap;
    gap: 12px;    
}

.script-ekle-detay .btn-light {
    background-color: #ffffff;
    color: #333;
    border-color: #dbe1e8;
}

.script-ekle-detay .tab-btn.active,
.script-ekle-detay .inner-tab-button.active {
    color: #fff;
    cursor: default;    
    border: 1px solid;
    border-color: transparent transparent #e66454 transparent;
    color: #e66454;
}

.script-ekle-detay .tab-btn,
.script-ekle-detay .inner-tab-button {
    background: none;
    border: none;
    padding: 17px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #6c757d;
}

.script-ekle-detay .form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}


.script-ekle-detay .form-group{
    margin: 0;
}

.script-ekle-detay .rules-table th{
    color: #333;
}

.script-ekle-detay .rules-table thead{
    background: #e2e6ea;
}

.script-ekle-detay .left-block input{
    max-width: 483px;
}

.script-ekle-detay .left-block{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

.script-ekle-detay .left-block h4{
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px; 
}

.script-ekle-detay .tab-content .form-group{
    margin: 0 0 16px;
}

.parameter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background-color: #f3f6f8;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 240px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
    border-radius: 6px;
    padding: 5px 0;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
}

.btn-group .dropdown-toggle {
    background-color: white;
    border: 1px solid #ccc;
    color: #333;
}

.script-ekle-detay #editor .btn-group:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    color: #333;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.script-ekle-detay .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.script-ekle-detay .form-group .parameter-text{
    margin: 16px 0 16px;
    font-weight: 500;    
}

.script-ekle-detay .header-actions{
    margin: 0 0 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.script-ekle-detay .builder-area .form-group{
    margin: 0;
}


.script-ekle-detay .panel-heading .header-actions{
    margin: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}


#middle .script-ekle-detay .panel-heading{
    gap: 16px;
}

.script-ekle-detay .tab-header .tab-nav{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    width: 70%;
}

.script-ekle-detay .tab-header .tab-nav::-webkit-scrollbar{
    display: none;
}
#preview-modal .modal-title{
    font-size: 18px;
}

#preview-modal .preview-bar {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    color: #fff;
    border-radius: 6px;
    background: linear-gradient(90deg, rgb(80, 102, 224), rgb(129, 140, 248));
}

#preview-modal .preview-title {
    font-size: 18px;
    font-weight: 600;
}

#preview-modal .preview-timer {
    display: flex;
    gap: 8px;
}

#preview-modal .preview-button {
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background-color: rgb(255, 255, 255);
    color: rgb(80, 102, 224);
}

#preview-modal .preview-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 4px;
    min-width: 50px;
    background-color: rgb(64, 85, 200);
    color: rgb(255, 255, 255);
}

#preview-modal .preview-timer-box .time{    
    font-size: 18px;
    font-weight: 700;
}

#preview-modal .preview-timer-box .label{    
    font-size: 12px;
    text-transform: uppercase;
}

#preview-modal #countdown-preview-wrapper {
    background-color: #f3f6f8;
    padding: 2rem;
    overflow: hidden;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preview-modal  .modal-container{
    max-width: 900px;
}

.script-ekle-detay.geri-sayim .builder-area,
.script-ekle-detay.wp-button .builder-area{
    grid-template-columns: 200px 1fr 1fr auto;
}

.script-ekle-detay.geri-sayim #timing{
    margin: 24px 0 0;
}

.open>.dropdown-toggle.btn-default:focus,
.bootstrap-select .dropdown-toggle:focus{
    outline: none !important;
}


.bootstrap-select.btn-group.open .dropdown-toggle .caret{
    transform: rotate(-180deg);
    transition: 0.2s;
}

.bootstrap-select.btn-group .dropdown-toggle .caret{
    transition: 0.2s;
    border-top: 5px dashed;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.bootstrap-select.btn-group .dropdown-toggle{
    border: 2px solid #ddd;
}

.script-ekle-detay .radio-group-boxed {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    gap: 24px;
}


.script-ekle-detay .accordion-header {
    background-color: #fafbfb;
    padding: 16px 24px;
    cursor: pointer;
}

.script-ekle-detay .accordion-header h5 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
}

.script-ekle-detay .label-with-tooltip {
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-ekle-detay .accordion-content {
    display: none;
    padding: 24px;
    border-top: 1px solid #ddd;
}

.script-ekle-detay .settings-accordion {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.script-ekle-detay .accordion-wraper{
    margin: 16px 0 0;
}

.script-ekle-detay .design-input.color{
    height: 40px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #ddd;
}

.script-ekle-detay .inner-tabs{
    border-bottom: 1px solid #ddd;
    margin: 0 0 16px;
}

.script-ekle-detay .inner-tab-button{
    padding: 8px 10px;
}

.script-ekle-detay .inner-tab-pane.active {
    display: block;
}

.script-ekle-detay .inner-tab-pane {
    display: none;
}

.script-ekle-detay .form-row-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: flex-end;
    gap: 24px;
}


.tooltip-icon {
    color: #6c757d;
    cursor: help;
    position: relative;
}

.script-ekle-detay .tooltip-icon .tooltip-text {
    visibility: hidden;
    width: 240px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1001;
    bottom: 125%;
    left: 50%;
    margin-left: -120px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 16px;
    font-weight: normal;
}

.script-ekle-detay .tooltip-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s;
}

.script-ekle-detay .settings-accordion .accordion-header h5 .fa-solid {    
    transition: 0.2s;
}

.script-ekle-detay .settings-accordion .accordion-header.active h5 .fa-solid {
    transform: rotate(90deg);
    transition: 0.2s;
}

.script-ekle-detay .code-area{
    margin: 16px 0 0;
}

.script-ekle-detay .code-area label{
    font-weight: 500;
}

.script-ekle-detay #design h5{
    font-weight: 600;
}

.script-ekle-detay.wp-button .tab-btn.active,
.script-ekle-detay.wp-button .inner-tab-button.active{
    border-color: transparent transparent #075e54 transparent;
    color: #075e54;
}
.script-ekle-detay.sosyal-medya-bari .tab-btn.active,
.script-ekle-detay.sosyal-medya-bari .inner-tab-button.active{
    border-color: transparent transparent #4f46e5 transparent;
    color: #4f46e5;    
}



.script-ekle-detay.wp-button .btn-kaydet{
    background: #075e54;
    color: #fff;
}

#preview-wrapper {
    background-color: #e5ddd5;
    padding: 16px;
    min-height: 300px;
    position: relative;
    overflow: hidden;
    background-image: url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png);
}

.wp-preview  #whatsapp-preview-button {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    background-color: rgb(37, 211, 102);
    color: rgb(255, 255, 255);
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
}

.wp-preview  #whatsapp-preview-tooltip {
    position: absolute;
    background-color: white;
    color: black;
    padding: 6px 16px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 12px;
    white-space: nowrap;
    transform-origin: center;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    background-color: rgb(255, 255, 255);
    color: rgb(52, 58, 64);
    bottom: calc(100% + 10px);
    right: 0px;
}

.wp-preview #whatsapp-preview-button i {
    font-size: 24px;
}

.wp-preview #whatsapp-preview-button:hover #whatsapp-preview-tooltip {
    opacity: 1;
    visibility: visible;
}

.script-ekle-detay.wp-button #tab-content{
    margin: 16px 0 0;
}

.script-ekle-detay.sosyal-medya-bari .inner-tab-pane .builder-area{
    grid-template-columns: repeat(2, 1fr) auto;
}

.script-ekle-detay.sosyal-medya-bari #accounts .inner-tabs{
    margin: 16px 0 0;
}

.modal-overlay.sosyal-medya #preview-wrapper,
.modal-overlay.resim-label-modal #preview-wrapper{
    background-image: none;
    background-color: #ddd;
}

.script-ekle-detay.yagdirma-efekti .tab-btn.active,
.script-ekle-detay.yagdirma-efekti .inner-tab-button.active{
    border-color: transparent transparent #0ea5e9 transparent;
    color: #0ea5e9;    
}

.script-ekle-detay .tab-wrapper{
    margin: 16px 0 0;
}

.script-ekle-detay.yagdirma-efekti .builder-area{
    grid-template-columns: repeat(2, 1fr) auto;
}

.modal-overlay.yagdirma-modal #preview-wrapper{
    background-image: linear-gradient(to bottom, #1e3a8a, #4f46e5);
    padding: 0;
}

.script-ekle-detay.genel-banner .tab-btn.active,
.script-ekle-detay.genel-banner .inner-tab-button.active{
    border-color: transparent transparent #8b5cf6 transparent;
    color: #8b5cf6;      
}

.script-ekle-detay.kampanya-cani .tab-btn.active,
.script-ekle-detay.kampanya-cani .inner-tab-button.active{
    border-color: transparent transparent #e66454 transparent;
    color: #e66454;      
}

.modal-overlay.genel-banner #preview-wrapper{
    background-image: linear-gradient(to bottom, #1e3a8a, #4f46e5);
    padding: 0;
}

.script-ekle-detay.kampanya-cani .inner-tab-pane .form-group,
.script-ekle-detay.carkifelek .inner-tab-pane .form-group,
.script-ekle-detay.carkifelek .form-group.indirim-kodu{
      margin: 16px 0 0;  
}

.script-ekle-detay.kampanya-cani .form-row-split{
    margin: 16px 0 0;
}

#kc-preview-bell {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-size: 28px;
    background-color: rgb(239, 68, 68);
    color: rgb(255, 255, 255);
    bottom: 20px;
    right: 20px;

}

#kc-preview-popup {
    display: none;
    position: absolute;
    width: 350px;
    max-height: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    flex-direction: column;
}

.shake {
    animation: shake-animation 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
}

@keyframes shake-animation {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.modal-overlay.kampanya-modal #preview-wrapper{
    background-image: none;
    background: #ddd;
}

#kc-preview-popup .header {
    padding: 1rem;
    font-weight: 600;
    position: relative;
}

#kc-preview-popup .popup-close-btn {
    position: absolute;
    top: 2px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
}

.script-ekle-detay.carkifelek .tab-btn.active,
.script-ekle-detay.carkifelek .inner-tab-button.active{
    border-color: transparent transparent #86198f transparent;
    color: #86198f;      
}

.script-ekle-detay.carkifelek .builder-area,
.script-ekle-detay.ucretsiz-kargo .builder-area,
.script-ekle-detay.kayan-yazi .builder-area{
    grid-template-columns: repeat(3, 1fr) auto;
}

#cf-color-palette input[type="color"] {   
    appearance: none;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    border-style: hidden;
}

.script-ekle-detay.carkifelek .settings-accordion{
    overflow: visible;
}

.script-ekle-detay.musteri-hizmetleri .tab-btn.active,
.script-ekle-detay.musteri-hizmetleri .inner-tab-button.active{
    border-color: transparent transparent #3b82f6 transparent;
    color: #3b82f6;      
}

.script-ekle-detay.musteri-hizmetleri #tab-content .form-row-split,
.script-ekle-detay.musteri-hizmetleri #tab-content .form-group{
    margin: 16px 0 0;    
}

.script-ekle-detay.resim-ustu-label .tab-btn.active,
.script-ekle-detay.resim-ustu-label .inner-tab-button.active{
    border-color: transparent transparent #16a34a transparent;
    color: #16a34a;      
}

.modal-overlay.resim-label-modal .ru-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}


.modal-overlay.resim-label-modal  #ru-label-preview {
    position: absolute;
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    z-index: 10;
}

.modal-overlay.resim-label-modal .ru-image-container {
    position: relative;
    width: 300px;
    height: 300px;
}

.modal-overlay.resim-label-modal #preview-wrapper {
    background-color: var(--bs-body-bg);
    padding: 2rem;
    min-height: 400px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mh-preview-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.mh-agent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 6px;
}

.mh-agent-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mh-agent-status.online{
    background-color: #22c55e;
}

.mh-agent-info .name {
    font-weight: 600;
    font-size: 14px;
}

.mh-agent-info .title {
    font-size: 12px;
    color: #6c757d;
}

.mh-agent-contacts {
    display: flex;
    gap: 12px;
    position: absolute;
    background-color: #fff;
    padding: 6px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.mh-agent-item:hover .mh-agent-contacts {
    opacity: 1;
    visibility: visible;
}

.script-ekle-detay.ucretsiz-kargo .tab-btn.active,
.script-ekle-detay.ucretsiz-kargo .inner-tab-button.active{
    border-color: transparent transparent #0ea5e9 transparent;
    color: #0ea5e9;      
}

#preview-wrapper { 
    background-color: #fff; 
    padding: 24px; 
    min-height: 300px; 
    border-radius: 8px; 
}

#uk-bar-preview { 
    padding: 16px; 
    border-radius: 8px; 
    text-align: center; 
    font-weight: 500; 
    margin-bottom: 24px; 
}

#uk-progress-bar-container { 
    width: 100%; 
    background-color: #fff; 
    border-radius: 99px; 
    overflow: hidden; 
    height: 12px; 
    margin-top: 6px; 
}

#uk-progress-bar-fill { 
    height: 100%; 
    width: 0%; 
    border-radius: 99px; 
    transition: width 0.5s ease; 
}


.modal-overlay.kargo-bar .preview-controls { 
    padding: 16px; 
    background-color: #fff; 
    border-radius: 8px; 
}


.modal-overlay.kargo-bar #preview-wrapper{
    background-image: none;
    background: #f3f6f8; 
}

.modal-overlay.kargo-bar .form-control:focus,
.modal-overlay.kargo-bar .form-control:focus-visible {
    border-color: transparent;
    box-shadow: none;
}


#ei-popup-preview-overlay { 
    display: none;
    align-items: center; 
    justify-content: center; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0,0,0,0.6); 
    z-index: 10; 
    animation: ei-fade-in 0.3s ease; 
}

@keyframes ei-fade-in { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}


.ei-popup-container .ei-popup-close-btn { 
    position: absolute; 
    top: 8px; 
    right: 12px; 
    background: none; 
    border: none; 
    font-size: 16px; 
    cursor: pointer; 
    line-height: 1; 
    color: #fff; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); 
}
.ei-popup-content { 
    padding: 32px; 
    text-align: center; 
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)); 
    border-radius: 16px;
}
.ei-popup-content h2 { 
    font-size: 30px; 
    margin-top: 0; 
    margin-bottom: 12px; 
    font-weight: 600;
}
.ei-popup-content p { 
    font-size: 16px; 
    margin-bottom: 24px; 
    opacity: 0.9; 
}
.ei-code-wrapper { 
    margin: 24px 0; 
}
.ei-code-box { 
    display: inline-flex; 
    align-items: center; 
    border: 2px dashed; 
    padding: 8px 16px; 
    border-radius: 8px; 
    font-size: 20px; 
    font-weight: 700; 
}
.ei-code-box button { 
    background: none; 
    border: none; 
    cursor: pointer; 
    font-size: 19px; 
    margin-left: 12px; 
}
.ei-action-btn { 
    font-size: 16px; 
    font-weight: 600; 
    padding: 12px 32px; 
    border-radius: 8px; 
    text-decoration: none; 
    display: inline-block; 
}

.modal-overlay.dur-gitme #preview-wrapper{
    background-image: none;
    background: #a78bfa;
}

.ei-popup-container .ei-popup-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ei-popup-container{
    border-radius: 16px;
    position: relative;
}

.modal-overlay.dur-gitme #preview-wrapper{
    min-height: 570px;
    height: 100%;
}

.script-ekle-detay.dur-gitme .tab-btn.active,
.script-ekle-detay.dur-gitme .inner-tab-button.active{
    border-color: transparent transparent #6d28d9 transparent;
    color: #6d28d9;      
}

#preview-wrapper { 
    background-color: #ffffff; 
    padding: 32px; 
    min-height: 300px; 
    border-radius: 8px; 
}

.sekme-modal .sa-preview-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
    background-color: #ffffff;
    border: 1px solid #e8ebf0;
    border-bottom: none;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.sekme-modal .sa-preview-tab.inactive { 
    background-color: #e8ebf0; 
}

#sa-preview-favicon { 
    width: 16px; 
    height: 16px; 
}

#sa-preview-title { 
    font-size: 14px; 
    font-weight: 500; 
    max-width: 200px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.sekme-modal .preview-controls { 
    margin-top: 32px; 
    padding: 24px; 
    background-color: #fff; 
    border-radius: 8px; 
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
}

.sekme-modal  #preview-wrapper {
    background-color: #f3f6f8;
    padding: 32px;
    background-image: none;
}

.sekme-modal .btn-light {
    background-color: #fff;
    color: #000;
    border-color: #dbe1e8;
}

.script-ekle-detay.kayan-yazi .tab-btn.active, 
.script-ekle-detay.kayan-yazi .inner-tab-button.active{
    border-color: transparent transparent #ca8a04 transparent;
    color: #ca8a04;
}

.script-ekle-detay.kayan-yazi #tab-content .inner-tab-pane .form-group{
    margin: 16px 0 0;
}

.kayan-yazi-modal #preview-wrapper { 
    background-color: #f3f6f8; 
    padding: 80px 0; 
    min-height: 200px; 
    border-radius: 8px; 
    position: relative; 
    background-image: none;
}

#ky-bar-preview {
    width: 100%;
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

#ky-bar-preview a, 
#ky-bar-preview span { 
    text-decoration: none; 
    color: inherit; 
}

#ky-content-preview {
    display: inline-block;
    padding-left: 100%;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.kayan-yazi-modal .ky-sequential-item { 
    animation: ky-fade-in-out 4s infinite; 
}


#cf-color-palette input[type="color"] {
    appearance: none;
    width: 44px; 
    height: 44px; 
    background-color: transparent;
    border: none; 
    cursor: pointer; 
    padding: 0; 
    border-radius: 6px;
}

#cf-color-palette input[type="color"]::-webkit-color-swatch { 
    border-radius: 6px; 
    border: 1px solid #e8ebf0; 
}

#cf-color-palette input[type="color"]::-moz-color-swatch { 
    border-radius: 6px; 
    border: 1px solid #e8ebf0; 
}


.modal-overlay.carkifelek  #preview-wrapper { 
    background-color: #f3f6f8; 
    padding: 32px; 
    min-height: 700px; 
    border-radius: 8px; 
    background-image: none;
}
#cf-trigger-preview { 
    position: absolute; 
    width: 70px; 
    height: 70px;
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
    transition: all 0.3s ease; 
    font-size: 32px; 
    z-index: 1001;
}
#cf-popup-preview { 
    position: absolute; 
    display: none; 
    width: 100%; 
    height: 100%; 
    top:0; 
    left:0; 
    background-color: rgba(0,0,0,0.6); 
    align-items: center; 
    justify-content: center; 
    z-index: 1002; 
    padding: 0 16px;
}
.cf-popup-content { 
    background: white; 
    border-radius: 12px; 
    padding: 32px; 
    text-align: center; 
    max-width: 450px; 
    width: 100%;
    position: relative; 
}
.cf-popup-content .popup-close-btn { 
    position: absolute; 
    top: 6px; 
    right: 8px; 
    background: none; 
    border: none; 
    font-size: 18px; 
    color: #6c757d; 
    cursor: pointer; 
}
#cf-wheel-container { 
    max-width: 300px;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 40px auto 16px;
}
#cf-wheel-canvas { 
    width: 100%; 
    height: 100%; 
}
#cf-wheel-pointer { 
    position: absolute; 
    top: -20px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 0; 
    height: 0;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 30px solid #e11d48; 
}
#cf-spin-button { 
    margin-top: 16px; 
    background-color: #86198f; 
    color: white; 
    font-weight: bold; 
    padding: 8px 24px; 
    border-radius: 8px; 
    cursor: pointer; 
}
#cf-result-display { 
    margin-top: 24px; 
}
#cf-result-display h3 { 
    color: #86198f; 
}
#cf-result-display p { 
    font-size: 16px; 
}
#cf-copy-code { 
    background: #f1f5f9; 
    border: 1px solid #e8ebf0; 
    padding: 6px 16px; 
    border-radius: 6px; 
    font-weight: 600; 
    cursor: pointer; 
    margin: 12px 0 0;
}

.cf-popup-content p{
    text-align: center;
    margin: 0;
}

.toplu-guncelleme .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    transition: background 0.2s;
}

.toplu-guncelleme .accordion-item {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    overflow: visible;
}

.toplu-guncelleme .accordion-content {
    display: none;
    padding: 16px;
    border-top: 1px solid #e2e8f0;
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
}

.toplu-guncelleme .accordion-item.active .accordion-content {
    display: block;
}

.toplu-guncelleme .circle {    
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    background-color: rgb(37 99 235 / 1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    width: 32px;
    height: 32px;
    color: #fff;
    border-radius: 50%;
}

.toplu-guncelleme  .accordion-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toplu-guncelleme .accordion-content .row,
.toplu-guncelleme .accordion-content .row-split,
.toplu-guncelleme .accordion-content .row-four,
.toplu-guncelleme .accordion-content .inner-row{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0 0;
}

.toplu-guncelleme .accordion-content .row::after,
.toplu-guncelleme .accordion-content .row::before{
    display: none;
}

.toplu-guncelleme .searchable-multiselect, .toplu-guncelleme .searchable-singleselect {
    position: relative;
    height: 40px;
}

.toplu-guncelleme .multiselect-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background-color: white;
    cursor: pointer;
    height: 40px;
}

.toplu-guncelleme .multiselect-button i{
    font-size: 14px;
}

.toplu-guncelleme .multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 256px;
    overflow-y: auto;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 50;
    margin-top: 4px;
}

.toplu-guncelleme .accordion-content .inner-row {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 16px;
    border-radius: 8px;
}

.toplu-guncelleme .border-line{
    border-bottom: 1px solid #ddd;
    margin: 20px 16px;
}

.toplu-guncelleme .select-area{
    max-width: 324px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toplu-guncelleme .btn {   
    color: #334155;
    padding: 0 16px;
    height: 42px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #e2e8f0;
}

.toplu-guncelleme .btn-add:hover,
.toplu-guncelleme .btn-filter:hover{
    background-color: #e2e8f0;  
}

.toplu-guncelleme .btn-filter{
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    margin: 0 0 0 auto;
}

.toplu-guncelleme .btn-area{
    text-align: right;
}

.toplu-guncelleme .btn-accept{
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
    height: 36px;
}

.toplu-guncelleme .btn-accept:hover{
    background-color: #1d4ed8;
}

.toplu-guncelleme .info-area{
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 16px;
    border-radius: 8px;
    margin: 24px 0 0;
}

.toplu-guncelleme .info-area .row{
    margin: 0;
    justify-content: space-between;
}

.toplu-guncelleme .info-area .info-text{
    margin: 0;
    color: #1e40af;
    font-size: 16px;
}

.toplu-guncelleme .info-area .info-text span{
    font-size: 18px;
    font-weight: 700;
}

.toplu-guncelleme .mode-btn {
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.toplu-guncelleme .action-button-area{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}

.toplu-guncelleme .mode-btn.active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.toplu-guncelleme .action-tab-manual .tab-list {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    gap: 8px;    
    padding: 8px 12px;
    border-right: 1px solid #e2e8f0;
}

.toplu-guncelleme .action-tab-manual .tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 40px 8px 16px;
    border-radius: 6px;
    color: #64748b;
    font-weight: 500;
    transition: all 0.2s;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.toplu-guncelleme .action-tab-manual .tab-btn.active,
.toplu-guncelleme .action-tab-manual .tab-btn.active:hover {
    background-color: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

.toplu-guncelleme .action-tab-manual .tab-btn:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.toplu-guncelleme .action-tab-manual .tab-content-area{
    width: 100%;
}

.toplu-guncelleme .action-tab-manual .tabs-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

.toplu-guncelleme .action-tab-manual .table-responsive{
    border-radius: 8px;    
    border: 1px solid #ddd;
}

.toplu-guncelleme .action-tab-manual .table-responsive input[type=checkbox]{
    width: 16px;
    height: 16px;
}

.toplu-guncelleme .action-tab-manual .table{
    margin: 0;
}

.toplu-guncelleme .action-tab-manual .table td,
.toplu-guncelleme .action-tab-manual .table th{
    padding: 12px;
}

.toplu-guncelleme .action-tab-manual .table thead{
    background: #f9fafb;
}

.toplu-guncelleme .action-tab-manual .table th{
    color: #6b7280;    
}

.toplu-guncelleme .action-tab-manual .table select,
.toplu-guncelleme .action-tab-manual .table input{
    height: 32px;
   
}

.toplu-guncelleme .action-tab-manual .table select{
 padding: 0;
}

.toplu-guncelleme .action-tab-manual .table td b{
    font-weight: 600;
}

.stok-update{
    background: #fff7ed;
    border: 1px solid #ffedd5; 
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0 0;
}
 
.stok-update label{ 
    color: #9a3412;
    font-weight: 600;
}   

.stok-update .row .col-md-6{    
    padding: 0;
}


.toplu-guncelleme .action-tab-manual .btn-add-list{
    background-color: #2563eb;
    color: #fff;
}

.toplu-guncelleme .action-tab-manual .btn-add-list:hover{
    background-color: #1d4ed8;
}

.toplu-guncelleme .action-tab-manual .btn-area{
    margin: 16px 0 0;
}

.toplu-guncelleme .form-group{
    margin: 0;
}

.toplu-guncelleme .action-tab-manual .tab-pane.active {
    display: block;
}

.toplu-guncelleme .action-tab-manual .tab-pane {
    display: none;
    animation: fadeIn 0.2s ease-in-out;
    width: 100%;
}

.toplu-guncelleme .accordion-content #tab-cat .row,
.toplu-guncelleme .accordion-content #tab-brand .row,
.toplu-guncelleme .accordion-content #tab-attr .row{
    align-items: flex-end;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 24px;
    margin: 0 0 16px;
    border-radius: 8px;
}

.toplu-guncelleme .accordion-content #tab-cat .row .col-md-6,
.toplu-guncelleme .accordion-content #tab-cat .row .col-md-5,
.toplu-guncelleme .accordion-content #tab-cat .row .col-md-7,
.toplu-guncelleme .accordion-content #tab-brand .row .col-md-6,
.toplu-guncelleme .accordion-content #tab-brand .row .col-md-5,
.toplu-guncelleme .accordion-content #tab-brand .row .col-md-7{
    padding: 0;
}






.toplu-guncelleme .bootstrap-select.btn-group .dropdown-toggle,
.toplu-guncelleme #tab-cat textarea{
    height: 40px;
    
}

.toplu-guncelleme .form-control,
.toplu-guncelleme .bootstrap-select.btn-group .dropdown-toggle{   
    border-radius: 6px;
}

.toplu-guncelleme .tag-injector {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    margin-right: 4px;
    margin-top: 4px;
}

.toplu-guncelleme #tab-cat .row.last .col-md-4 .form-group,
.toplu-guncelleme .row.seo-tags .col-md-4 .form-group{
    margin: 0 0 38px;
}


.toplu-guncelleme .bootstrap-select.btn-group .dropdown-toggle .filter-option{
    font-weight: 400;
}

.title-group{
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 0;
}

.toplu-guncelleme #tab-attr .head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
}

.toplu-guncelleme #tab-attr .col-md-5,.toplu-guncelleme #tab-attr .col-md-2{
    padding: 0;
}

.toplu-guncelleme #tab-attr .btn-delete{
    width: 46px;
}
.toplu-guncelleme #accordion-summary .card-item{
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
}
.toplu-guncelleme #accordion-summary .card-area{
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.toplu-guncelleme #accordion-summary .card-item h3{
    border-bottom: 1px solid #e2e8f0;
    padding: 0 0 16px;
    font-size: 18px;
    color: #000;
    font-weight: 600;
    margin: 0;
    height: 100%;
}


.toplu-guncelleme #accordion-summary .selected-area ul,
.toplu-guncelleme #accordion-summary .selected-list-area ul{
    list-style: none;
    padding: 0;    
    margin: 8px 0 0;
}

.toplu-guncelleme #accordion-summary .selected-list-area ul{
    padding: 0 0 0 18px;
    list-style: disc;
}


.toplu-guncelleme #accordion-summary .selected-area ul li{
    margin: 0 0 8px;
}

.toplu-guncelleme #accordion-summary .selected-area ul li b{
    margin: 0 8px 0 0;
}

.toplu-guncelleme #accordion-summary .selected-list-area .list-item span{
    color: #1d4ed8;
    font-weight: 600;
}

.toplu-guncelleme #accordion-summary .selected-list-area .list-item{
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    margin: 0 0 16px;
}

.toplu-guncelleme #accordion-summary .selected-list-area{
    margin: 16px 0 0;
}

.toplu-guncelleme #accordion-summary .selected-list-area li,
.toplu-guncelleme #accordion-summary .selected-area li{
    font-size: 12px;
}


.toplu-guncelleme #accordion-summary .list-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toplu-guncelleme #accordion-summary .list-head .btn-delete{
    color: #f87171;
    font-size: 14px;
    font-weight: 600;
    border: none;
    padding: 0;
    height: auto;
}

.toplu-guncelleme .excel-group-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s;
}

.toplu-guncelleme .excel-group-area{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.toplu-guncelleme .excel-group-header {
    background: #f8fafc;
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    color: #334155;
}

.toplu-guncelleme .excel-group-header input{
    margin: 0;
}

.toplu-guncelleme .excel-group-body {
    padding: 12px;
    flex-grow: 1;
    max-height: 368px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.toplu-guncelleme .excel-group-body label{
    display: block;
}

.toplu-guncelleme .excel-group-card.last .excel-group-header{
    background: #eef2ff;
    color: #4338ca;
}

.toplu-guncelleme .excel-sablon-area{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: 8px;
    margin: 16px 0 0;
    padding: 16px;
}

.toplu-guncelleme .btn-excel-ekle{
    background: #16a34a;
    color: #fff;
    font-weight: 600;
}

.toplu-guncelleme .excel-sablon-area h3{
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #166534;
}

.toplu-guncelleme .excel-sablon-area p{
    font-size: 12px;
    color: #166534;
    margin: 8px 0 0;
}



/* .toplu-guncelleme .upload-file-area .success-message,
.toplu-guncelleme .upload-file-area .info-message{
    display: none;
} */

.toplu-guncelleme .upload-file-area .file-area{
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    margin: 16px 0 0;
    border-radius: 8px;
    height: 136px;
    cursor: pointer;
}

.toplu-guncelleme .upload-file-area i{
    font-size: 36px;
}


.toplu-guncelleme .upload-file-area .info-message i,
.toplu-guncelleme .upload-file-area .info-message p{
    color: #3b82f6;
}

.toplu-guncelleme .upload-file-area .success-message  i,
.toplu-guncelleme .upload-file-area .success-message  p{
    color: #15803d;
    text-align: center;
}

.toplu-guncelleme .upload-file-area.success{
    background: #f0fdf4;
}

.ozellik-modal,
.güncelle-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.ozellik-modal .modal-content,.guncelle-modal .modal-content {
    background: white;
    padding: 24px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    width: 100%;
    min-width: inherit;
}

.ozellik-modal .btn-add-filter{
    background-color: #2563eb;
    color: #fff;
}

.ozellik-modal .btn-delete{
    background-color: #f1f5f9;
    color: #334155;
}

.ozellik-modal .btn-delete:hover{
    background-color: #e2e8f0;
}

.ozellik-modal .btn-add-filter:hover{
    background-color: #1d4ed8;
}

#accordion-summary .btn-guncelle{
    margin: 0 0 0 auto;
    background: #16a34a;
    color: #fff;
}


.ozellik-modal .btn-area{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

#accordion-filter .filter-tag-area{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
    margin: 8px 0 0 16px;
}

#accordion-filter .filter-tag-area span{
    background-color: #e0e7ff;
    color: #3730a3;
    height: 30px;
    border-radius: 99px;
    padding: 4px 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

#accordion-filter .filter-tag-area span i{
    cursor: pointer;
    display: flex;
}


.tasarim-yonetimi .panel-heading .select-area,
.tasarim-yonetimi .panel-heading .btn-area{
    display: flex;
    align-items: flex-end;
}

.tasarim-yonetimi .panel-heading .select-area{
    gap: 16px;
}

.tasarim-yonetimi .panel-heading .select-item select{
    height: 36px;
    padding: 0 10px;
}

.tasarim-yonetimi .form-group{
    margin: 0;
}

.tasarim-yonetimi .panel-heading .btn-sm{
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasarim-yonetimi .accordion-item{
    border: 1px solid #e5e7eb; 
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;    
}

.tasarim-yonetimi .accordion-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer;
    user-select: none; 
}

.tasarim-yonetimi .accordion-header i{
    transform: rotate(-90deg);
    transition: 0.2s;
}

.tasarim-yonetimi .accordion-item.active .accordion-content{
    display: block;
}

.tasarim-yonetimi .accordion-content{
    display: none;
}

.tasarim-yonetimi .nav-tabs{
    padding: 24px 0 0;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.tasarim-yonetimi .accordion-item.active .accordion-header i{
    transform: rotate(0);
    transition: 0.2s;
}

.tasarim-yonetimi .accordion-title p{
    font-weight: 600;
    font-size: 18px;
    color: #333;
    margin: 0;
}


.tasarim-yonetimi .nav-tabs::-webkit-scrollbar{
    display: none;
}

.tasarim-yonetimi .nav-tabs li a{
    font-weight: 500;
    color: #000;
}

.tasarim-yonetimi .nav-tabs li a:hover,.tasarim-yonetimi .nav-tabs li.active a{
    background: transparent;
    color: #2563EB; 
    border-color: transparent;
}

.tasarim-yonetimi .new-module-item-btn{    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    color: #374151;
    padding: 8px 16px;
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 14px;
    cursor: move;
}

.tasarim-yonetimi .tab-pane-content{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.tasarim-yonetimi .sortable-block{   
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 0 0 16px;
    cursor: move;

}
.tasarim-yonetimi .sortable-block,
.tasarim-yonetimi .sortable-block .sortable-item{
    display: flex;
    align-items: center;
}

.tasarim-yonetimi .sortable-block .sortable-item{
    width: 100%;
    align-items: flex-start;
    gap: 12px;
}

.tasarim-yonetimi .sortable-block{
    gap: 16px;
   
}

.tasarim-yonetimi .first-col{
    width: 50%;
}

.tasarim-yonetimi .second-col{
    width: 50%;
}

.tasarim-yonetimi .third-col .btn-area{
    display: flex;
}


.sortable-wrapper{
    margin: 16px 0 0;
}

.tasarim-yonetimi .first-col .text-block{
    display: flex;
    align-items: center;
    gap: 12px;
}

.sortable-block.disabled{
    opacity: 0.5;
}

.sortable-block .switch{
    margin: 0;
}

.tasarim-yonetimi .first-col span{
    display: block;
}

.tasarim-yonetimi .first-col .desc,
.tasarim-yonetimi .sortable-block .text-block p{
    font-size: 12px;
    margin: 0;
}

.modal-overlay.preview-modal img{
   width: 100%; 
}

.modal-overlay.preview-modal .modal-header h2{
    margin: 0;
}

.modal-overlay.preview-modal .model-content{
    max-width: 800px;
    width: 100%; 
    padding: 0; 
    min-width: inherit;
}

.tasarim-yonetimi .sortable-block .icon{
    font-size: 20px;
    display: flex;
    align-items: center;
    margin: auto;
}

.tasarim-yonetimi .sortable-block .icon i{
    color: #000;
}

.tasarim-yonetimi .sortable-block .text-block p span{
    font-weight: 600;
}

.tasarim-yonetimi .sortable-block .btn-area{    
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
} 

.toplu-guncelle .filter-tag-area{
    display: flex;
    align-items: center;
}

.modal-overlay.edit-modal .modal-content{
    max-width: 800px;
    width: 100%;
    min-width: inherit;
}

.modal-overlay.edit-modal h2{
    margin: 0;
}

.modal-overlay.edit-modal .form-checkbox-label{
    margin: 16px 0 0;
}

.modal-overlay.edit-modal .modal-footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
}

.modal-overlay.edit-modal .btn-vazgec,
#requestModal .btn-vazgec{
    border: 1px solid #0000000d;
    background: #f9fafb;
}

.modal-overlay.edit-modal .btn-taslak{
    border: 1px solid #0000000d;
    background: #dbeafe;
    color: #1d4ed8;
}

.modal-overlay.edit-modal .btn-uygula{
    border: 1px solid #5cb85c;
    background: #5cb85c;
    color: #fff;
}

.modal-overlay.edit-modal .modal-header .btn-area i {
    font-size: 20px;
}

.modal-overlay.edit-modal .modal-header .btn-area{
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-overlay.edit-modal .file-drop-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    overflow: hidden;
}

.modal-overlay.edit-modal .file-drop-preview {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.modal-overlay.edit-modal .file-drop-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 200px;
    max-height: 200px;    
    border: 2px dashed #D1D5DB;
    border-radius: 8px;
    background-color: #F9FAFB;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    overflow: hidden;
}

.modal-overlay.edit-modal .form-split-area{
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-overlay.edit-modal .file-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 9999px;
    width: 18px;
    height: 18px;
    font-size: 16px;
    font-weight: bold;
    line-height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.modal-overlay.edit-modal  .form-group.image{
    width: 40%;
}

.modal-overlay.edit-modal .inner-row::after,.modal-overlay.edit-modal .inner-row::before,
.modal-overlay.edit-modal #tab-2-tr .row::after,.modal-overlay.edit-modal #tab-2-tr .row::before{
    display: none;
}

.modal-overlay.edit-modal #tab-2-tr .inner-row{
    display: flex;
    align-items: center;    
    gap: 8px;
    width: 100%;
}

.modal-overlay.edit-modal #tab-2-tr .right-block{
    width: 100%;
}

.modal-overlay.edit-modal #tab-2-tr .right-block .col{
    padding: 0;
    width: 100%;
}

.modal-overlay.edit-modal #tab-2-tr .file-drop-text{
    padding: 0 16px 16px 16px;
    
}

.modal-overlay.edit-modal #tab-2-tr .file-drop-text p{
    text-align: center;
}

.modal-overlay.edit-modal .form-section-title{
    font-size: 16px;
    font-weight: 600;
    margin: 18px 0;
}

.tasarim-yonetimi .sortable-block .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
}

.tasarim-yonetimi .sortable-item .title{
    font-weight: 600;
}


#tab-durum .top-area{
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: #fff;
}

#tab-durum .top-area .btn{
    padding: 16px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
}

#tab-durum .top-area .left{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

#tab-durum .top-area .btn-cache-clean{
    border-color: #fed7aa;
    background: #fff7ed;
    color: #ea580c;
}

#tab-durum .top-area .btn-cache-clean:hover{   
    background: #ffedd5;
}

#tab-durum .top-area .btn-service-restart{
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

#tab-durum .top-area .btn-service-restart:hover{
    background: #dbeafe;
}

#tab-durum .top-area .btn-bug-clean{
    border-color: #e5e7eb;
    background: #f9fafb;
    color: #4b5563;
}

#tab-durum .top-area .btn-bug-clean:hover{
    background: #f3f4f6;
}

#tab-durum .top-area .btn-repair-mod{
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

#tab-durum .top-area .btn-repair-mod:hover{
    background: #fee2e2;
}


#tab-durum .table-block{
    margin: 16px 0 24px;
    display: grid;
    grid-template-columns: repeat(2, 49.5%);
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
}

#tab-durum .table-item{
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 100%;
    height: 100%;
    background: #fff;
}


#tab-durum .table-block::after,#tab-durum .table-block::before{
    display: none;
} 


#tab-durum h3{
    font-size: 16px;
    font-weight: 600;
    margin: 16px;
}

#tab-durum .card-header{
    border-bottom: 1px solid #ddd;
    padding: 0;
}

#tab-durum .table-block .table-item{
    padding: 0;
    background: #fff;
}

#tab-durum .table-block .table-item td{
    text-align: left;
}

#tab-durum .progress-bar{
    background: #e5e7eb;
    border-radius: 9999px;
    width: 100%;
    height: 10px;
    overflow: hidden;
    box-shadow: none;
}

#tableServices_wrapper select{
    height: 36px;
}

#tab-durum .table-top{
    padding: 0 16px 0;
}

.dashboard-v2 .table-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}


#tab-durum .table tbody tr:last-child td{
    border-bottom: none;
}

#tab-yeni-uyeler .select-area   {
    display: flex;
    align-items: center;
    gap: 12px;
}

#tab-yeni-uyeler .select-area select{
    height: 32px;
    font-size: 14px;
    padding: 0 12px;
}

#tab-urun-hareketleri .top-area .col-md-4{
    width: 25%;
}

.form-group.govde-metni .ck-content{
    height: 200px;
}

#whatsapp-preview-content {
    background: #f5f5f5;               
    border-left: 4px solid #25D366;    
    padding: 14px 18px;              
    border-radius: 10px;           
    margin-top: 12px;
    font-size: 14px;
    color: #222;
    position: relative;
}

/* Konuşma balonu kuyruğu */
#whatsapp-preview-content::after {
   content: "";
    position: absolute;
    left: 16px;                         
    bottom: -8px;                        
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f5f5f5;    
}

#notificationModal .form-group select{
    padding: 8px 16px;
}

.modul-kutuphanesi .panel-heading .select-area{
    display: flex;
    align-items: center;
    gap: 12px;
}

.modul-kutuphanesi .panel-heading .select-area label{
    line-height: 20px;
}

.modul-kutuphanesi .card {
    background-color: #ffffff;
    border: 1px solid #e8ebf0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.modul-kutuphanesi .module-block{
    margin: 0 0 24px;
}

.modul-kutuphanesi .module-block h3{
    margin: 0;
    font-size: 20px;
}

#requestModal .info-box {
    background-color: rgba(80, 102, 224, 0.1);
    border: 1px solid rgba(80, 102, 224, 0.2);
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #5066e0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

#requestModal form .row{
    margin: 0 0 0;
}
#requestModal form .row::after,
#requestModal form .row::before{
    display: none;
}

#requestModal .modal-form-group{
    margin: 0 0 16px;
}

#requestModal .modal-content{
    max-width: 700px;
    min-width: inherit;
    max-height: 76%;
}

#requestModal .modal-body{
    padding: 24px;
}


.destek-talepleri .panel-heading span{
    display: block;
}

.destek-talepleri .panel-heading .btn-excel{
    border: 1px solid #ddd;
    border-radius: 6px; 
    background: #fff;
}

.destek-talepleri .panel-heading .btn-excel:hover{
    background: #e1e1e1;
}

.destek-talepleri .panel-heading .btn-talep-olustur,
.destek-talep-musteri .panel-heading .btn-talep-olustur{
    border: 1px solid #0d6efd;
    border-radius: 6px; 
    background: #0d6efd;
    color: #fff;
}

.destek-talepleri .panel-heading .btn-talep-olustur:hover,
.destek-talep-musteri .panel-heading .btn-talep-olustur:hover{
    background: #0755c7;
}

.destek-talepleri .panel-heading .right{
    display: flex;
    align-items: center;
    gap: 12px;
}

.destek-talepleri .stat-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s;
    background: #fff;
}

.destek-talepleri .card-area{
    width: 100%;
    
}

.destek-talepleri .card-area::after,
.destek-talepleri .card-area::before{
    display: none;
}

.destek-talepleri .card-area .col-md-3{
    padding: 0;
}

.destek-talepleri .stat-card .card-body{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.destek-talepleri .stat-card h6{
    font-weight: 700;
    color: #212529bf; 
    font-size: 12px;
    margin: 0;
}

.destek-talepleri .stat-card h4{
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.destek-talepleri .stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.destek-talepleri .filter-area{
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 16px; 
    background: #fff;
}

.destek-talepleri .filter-area .form-group{
    width: 100%;
    margin: 0;
}

.destek-talepleri .filter-area .form-group.second,
.destek-talepleri .filter-area .form-group.third{
    width: 50%;
}

.destek-talepleri .filter-area .input-group{
    display: flex;
    align-items:center;
    gap: 8px;
}

.destek-talepleri .filter-area  .btn-area{
    width: 40%;
}

.destek-talepleri .filter-area  .btn-area .btn{
    width: 100%;
}

.destek-talepleri .table .musteri{
    display: flex;
    align-items: center;
}

.destek-talepleri .avatar-circle {
    min-width: 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;    
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    margin-right: 10px;
}

.destek-talepleri .table  th,
.destek-talepleri .table  td{
    text-align: center;
}

.destek-talepleri .table-card{
    background: #fff;
}

.destek-talepleri .card-footer{
    padding: 0 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between; 
}


.destek-talepleri .avatar-circle.small {
    min-width: 20px;
    width: 20px;
    height: 20px;
}

.destek-talepleri .departman{
    display: flex;
    align-items: center;
    justify-content: center;
}

.destek-talepleri .table .badge{
    font-size: 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #000;
    border-radius: 6px;
}

.destek-talepleri .table .btn-area{
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
}

.destek-talepleri .table .btn-area{
    display: flex;
    align-items: center;
}
.destek-talepleri .dropdown-divider{
    margin-top: 8px;
    margin-bottom: 8px;
}

.destek-talepleri .table-card{
    border: 1px solid #ddd;
    border-radius: 8px;    
    overflow: hidden;
    margin: 16px 0 0;
}

.destek-talepleri .table-bordered{
    margin: 0;
}

.destek-talepleri .badge{
    cursor: pointer;
}

.destek-talep-detay .ticket-header,
.destek-talep-detay .ticket-tags,
.destek-talep-musteri-detay .ticket-header,
.destek-talep-musteri-detay .ticket-tags{
    display: flex;
    align-items: center;
    gap: 12px;
}

.destek-talep-detay .ticket-header,
.destek-talep-musteri-detay .ticket-header{
    padding: 16px;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .075);
}

.destek-talep-detay .ticket-title,
.destek-talep-musteri-detay .ticket-title{
    font-weight: 600;
    margin: 16px 0 0;
}

.destek-talep-detay .msg-header,
.destek-talep-musteri-detay .msg-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    color: #6c757d;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
}

.destek-talep-detay .msg-content,
.destek-talep-musteri-detay .msg-content{
    margin-left: 75px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

.destek-talep-detay .msg-avatar,
.destek-talep-musteri-detay .msg-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 0;
    border: 4px solid #f0f2f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.destek-talep-detay .avatar-customer,
.destek-talep-musteri-detay .avatar-customer {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.destek-talep-detay .avatar-system {
    background: #e9ecef;
    color: #6c757d;
    font-size: 14px;
}

.destek-talep-detay .ticket-message,
.destek-talep-musteri-detay .ticket-message {
    position: relative;
    margin-bottom: 30px;
    z-index: 1;
}

.destek-talep-detay .message-stream,
.destek-talep-musteri-detay .message-stream {
    position: relative;
    
    padding-left: 20px;
}

.destek-talep-detay .message-stream::before,
.destek-talep-musteri-detay .message-stream::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 54px;
    width: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.destek-talep-detay .msg-type-customer .msg-content{
    border-left: 5px solid #6c757d;
}

.destek-talep-detay .attachment-chip,
.destek-talep-musteri-detay .attachment-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    margin-top: 10px;
    transition: all 0.2s;
}

.destek-talep-detay .msg-type-internal .msg-content,
.destek-talep-musteri-detay .msg-type-internal .msg-content {
    background-color: #fffdf0;
    border: 1px dashed #ffc107;
    border-left: 5px solid #ffc107;
}

.destek-talep-detay .avatar-internal,
.destek-talep-musteri-detay .avatar-internal {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #fff;
}

.destek-talep-detay .avatar-agent,
.destek-talep-musteri-detay .avatar-agent {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
}

.destek-talep-detay .msg-type-system .msg-content,
.destek-talep-musteri-detay .msg-type-system .msg-content{
    padding: 8px 20px;
    background: #f8f9fa;
    border: none;
    box-shadow: none;
}

.destek-talep-detay .msg-content::after {
    content: '';
    position: absolute;
    left: -9px;
    top: 11px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
}

.destek-talep-detay .info-card,
.destek-talep-detay .info-table-card,
.destek-talep-musteri-detay .info-card,
.destek-talep-musteri-detay .info-table-card{
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
}

.destek-talep-detay .info-table-card .card-header,
.destek-talep-detay .info-card .card-header,
.destek-talep-detay .info-card-customer .card-customer-header,
.destek-talep-musteri-detay .info-table-card .card-header,
.destek-talep-musteri-detay .info-card .card-header,
.destek-talep-musteri-detay .info-card-customer .card-customer-header{
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 700;
    color: #444;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.destek-talep-detay .panel-body,
.destek-talep-musteri-detay .panel-body{
    background: #f0f2f5;
}

.destek-talep-detay .card-info-header,
.destek-talep-detay .card.shadow .card-header,
.destek-talep-musteri-detay .card-info-header,
.destek-talep-musteri-detay .card.shadow .card-header{
    display: flex;
    align-items: center; 
    justify-content: space-between;
}

.destek-talep-detay .card-info-header h5,
.destek-talep-musteri-detay .card-info-header h5{
    font-size: 20px;
    color: #000;
    font-weight: 600;
}

.destek-talep-detay .info-card .card-body,
.destek-talep-detay .info-card-customer .card-body,
.destek-talep-musteri-detay .info-card .card-body,
.destek-talep-musteri-detay .info-card-customer .card-body {
    padding: 20px;
}

.destek-talep-detay .info-table-card .card-body,
.destek-talep-musteri-detay .info-table-card .card-body {
    padding: 0;
}

.rounded-circle {
    border-radius: 50%;
}

.destek-talep-detay .info-card .card-header,
.destek-talep-musteri-detay .info-card .card-header{
    padding: 16px;
}

.destek-talep-detay .order-highlight,
.destek-talep-musteri-detay .order-highlight {
    background-color: #f3f0ff;
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid #6f42c1;
    margin: 15px 0;
    font-size: 14px;
}

.destek-talep-detay .info-card-footer,
.destek-talep-musteri-detay .info-card-footer{
    display: flex;
    align-items: center;
    justify-content: space-between; 
}

.destek-talep-detay .card-info-header .badge,
.destek-talep-musteri-detay .card-info-header .badge{
    border-radius: 6px;
}

.destek-talep-detay .info-card-customer .card-body,
.destek-talep-musteri-detay .info-card-customer .card-body{
    background: #fff;
}

.destek-talep-detay .mail-area .text,
.destek-talep-detay .rep-box-header,
.destek-talep-detay .rep-box-body{
    display: flex;
    align-items: center;
    gap: 8px;
}   

.destek-talep-detay .mail-area small,
.destek-talep-detay .phone-area small{
    display: block;
}   

.destek-talep-detay .contact-area{
    text-align: left;    
}

.destek-talep-detay .contact-area button{
    color: #333;
}

.destek-talep-detay .rep-box {
    background-color: rgba(13, 110, 253, 0.08);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(13, 110, 253, 0.2);
    margin: 16px 0;
}

.destek-talep-detay .btn-message{
    margin: 0 0 0 auto;
}

.destek-talep-detay .rep-box-body{
    margin: 16px 0 0;
}

.destek-talep-detay .card-btn-area{
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom:1px solid #dee2e6;
    padding: 0 0 16px;
} 

.destek-talep-detay .card-btn-area a{
    width: 100%;
    border-color: #000;
    color: #000;
    background: #fff;
}

.destek-talep-detay .card-btn-area a:hover{
    border-color: #000;
    color: #fff;
    background: #000;
}

.destek-talep-detay .info-card-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 0;
}

.destek-talep-detay .info-card-bottom .left-area,
.destek-talep-detay .info-card-bottom .right-area{
    width: 100%;
    text-align: center;
}

.destek-talep-detay .info-card-bottom .left-area{
    border-right: 1px solid #dee2e6;
}

.destek-talep-detay .info-card-customer{
    border-radius: 8px;
    overflow: hidden;
}

.destek-talep-detay .info-table-card .table{
    margin: 0;
}

.destek-talep-detay .btn-message{
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
}

.destek-talep-detay .rounded-circle.circle-success{
    display: block;
    width: 10px;
    min-width: 10px;
    height: 10px;
    background: #198754;
    margin: -8px 0 8px auto;
}

.destek-talep-detay .customer-info-area .customer{
    position: relative;
    text-align: center;
    width: max-content;
    margin: 0 auto;
}

.destek-talep-detay .customer-info-area .customer-info-bottom{
    text-align: center;
}

.destek-talep-detay .panel-body{
    padding: 20px 0;
}

.destek-talep-detay .card.shadow .card-header,
.destek-talep-musteri-detay .card.shadow .card-header{
    background: #fff;
}

.destek-talep-detay .card.shadow,
.destek-talep-musteri-detay .card.shadow{
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    background: #fff;
    margin: 32px 0 0;
    overflow: hidden;
}
.destek-talep-detay .card.shadow .card-header,
.destek-talep-musteri-detay .card.shadow .card-header{
    padding: 16px;
    justify-content: flex-start;
    border-bottom: 1px solid #ddd;
}

.destek-talep-detay .card.shadow .card-header h6,
.destek-talep-musteri-detay .card.shadow .card-header h6{
    font-size: 16px;
    margin: 0;
}

.destek-talep-detay .card.shadow .card-header i,
.destek-talep-musteri-detay .card.shadow .card-header i{
    display: flex;
}

.destek-talep-musteri-detay .card.shadow{
    border: 1px solid #0d6efd;    
}

.destek-talep-musteri-detay .card.shadow .card-header{
    background: #0d6efd;
    color: #fff; 
}

.destek-talep-detay .ticket-card-footer,
.destek-talep-musteri-detay .ticket-card-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.destek-talep-detay .ticket-reply-section .tab-content{
    padding: 16px;
}

.destek-talep-musteri-detay .ticket-reply-section{
    padding: 16px;
}

.destek-talep-detay .internal-note-warning{
    padding: 10px;
    margin: 0 0 16px;
    border-radius: 8px;
    border: 1px solid #ffe69c;
}

.destek-talep-detay  .ticket-reply-section .tab-pane{
    padding: 16px;
}

.destek-talep-detay .ticket-card-footer input[type="file"][hidden],
#createRequestModal input[type="file"][hidden],
.destek-talep-musteri-detay .ticket-card-footer input[type="file"][hidden]
{
    display: none;
} 

.destek-talep-detay .file-upload-section .file-upload-button,
.destek-talep-musteri-detay .file-upload-section .file-upload-button{
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 8px;
    margin: 0;
}

.destek-talep-detay .ticket-card-footer,
.destek-talep-musteri-detay .ticket-card-footer{
    padding: 16px;
    border-top: 1px solid #ddd;
}

.destek-talep-detay .ticket-reply-section .nav-item{
    width: 100%;
}

.destek-talep-detay .ticket-reply-section .nav-tabs{
    display: flex;
    align-items: center;
    justify-content: center;   
}
.destek-talep-detay .ticket-reply-section .nav-tabs a{
    text-align: center;
    border-top: none;
    border-left: none;
    border-right: none;
    margin: 0;
}

.destek-talep-detay .ticket-reply-section .nav-tabs>li.active>a{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ddd;
    background: #ddd;
}

.destek-talep-detay .ticket-reply-section .nav-tabs a:hover{
    background-color: #ddd;
}

.destek-talep-detay .ticket-reply-section .nav-tabs>li.active .bg-warning{
    background-color: #ffd25d;
}

.destek-talep-detay .ticket-card-footer .action-buttons,
.destek-talep-musteri-detay .ticket-card-footer .action-buttons{
    display: flex;
    align-items: center;
    gap: 14px; 
}


.destek-talep-detay .sticky-area,
.destek-talep-musteri-detay .sticky-area{
    position: sticky;
    top: 72px;
}

.destek-talep-detay .info-card-customer .card-customer-header .badge,
.destek-talep-musteri-detay .info-card-customer .card-customer-header .badge{
    font-size: 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #000;
    border-radius: 6px;
    font-weight: 400;
}

#createRequestModal .upload-area {
    border: 2px dashed #ced4da;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    background-color: #fdfdfd;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
    
#createRequestModal .upload-icon {
    font-size: 40px;
    color: #6c757d;
    margin-bottom: 10px;
}

#createRequestModal .input-group{
    width: 100%;
}

#createRequestModal .modal-content{
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 85%;
    
}
#createRequestModal .modal-body{
    padding: 16px;
}

#createRequestModal .btn-area button{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#createRequestModal .input-group-text {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    text-align: center;
    white-space: nowrap;
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 6px 0 0 6px;
}

#createRequestModal .input-group{
    display: flex;
    align-items: center;
}

#createRequestModal .form-text{
    font-size: 12px;
}
#createRequestModal .modal-header{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

.destek-talep-musteri .customer-area,
.destek-talep-musteri-detay .customer-area{    
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

.destek-talep-musteri .panel-heading strong{
    font-size: 20px;
}

.destek-talep-musteri .panel-heading p{
    margin: 0;
    font-size: 13px;
    line-height: 20px;
}

.destek-talep-musteri .customer-area .left-area ul{
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 14px; 
    margin: 0;
}

.destek-talep-musteri .customer-area .left-area ul li a{
    color: #b9b9b9;
    display: block;
    padding: 0;
} 

.destek-talep-musteri .customer-area .left-area ul li a.active{
    color: #fff;
}


.destek-talep-musteri .customer-area .right-area span{
    color: #fff;
}

.destek-talep-musteri .panel-heading .left span{
    display: block;
}

.destek-talep-musteri .nav-tabs{
    display:  flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0 0 16px;
    border: none;
}

.destek-talep-musteri .nav-tabs::before,
.destek-talep-musteri .nav-tabs::after{
    display: none;
}

.destek-talep-musteri .nav-tabs button{
    border: 1px solid #ddd;
    border-radius: 800px;
    padding: 10px;
}

.destek-talep-musteri .nav-tabs button.active{
    background: #0d6efd;
    color: #fff;
}

.destek-talep-musteri .message-info{
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,.075);
    border-radius: 8px; 
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.destek-talep-musteri .message-info .icon{
    width: 52px;
    min-width: 52px;
    height: 52px;
    background: #1987541a;
    color: #198754;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.destek-talep-musteri .message-info h5{
    font-weight: 700;
    font-size: 20px;
}

.destek-talep-musteri .info-area{
    padding: 16px;
    height: 86px;
    background-color: #0dcaf01a;
    color: #055160;
    border: 1px solid #0dcaf0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;  
}

.destek-talep-musteri .table th,
.destek-talep-musteri .table td{
    text-align: left;
}

.destek-talep-musteri .table th{
    border: none;
}

.destek-talep-musteri .table{
    margin: 0;
}

.destek-talep-musteri .table-responsive{
    box-shadow: 0 0 0 1px #ddd;
    border-radius: 8px;
}

.destek-talep-musteri .info-card-area{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.destek-talep-musteri-detay .msg-header{
    border-bottom: none;
}

.destek-talep-musteri-detay .attachment-chip{
    border-radius: 8px;
}

.destek-talep-musteri-detay .attachment-chip:hover{
    background: #d3d4d5;
}

.destek-talep-musteri-detay .supporter-info-area{
    border: 1px solid #007bff;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    background: #f8f9fa;
}

.destek-talep-musteri-detay .supporter-info-area .msg-avatar{
    position: static;
    background: #007bff;
    color: #fff;
    box-shadow: none;
    border: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.destek-talep-musteri-detay .supporter-info-area p{
    font-size: 12px;
    margin: 0;
}

.destek-talep-musteri-detay .supporter-info-area h5{
    font-weight: 700;
    font-size: 16px;
}

.destek-talep-musteri-detay .supporter-info-area .info-body{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 0;
}

.destek-talep-musteri-detay .supporter-info-area .info-body .right{
    text-align: left;
}

.destek-talep-musteri-detay .supporter-info-area .info-header span{
    font-size: 14px;
}

.destek-talep-musteri-detay .order-highlight{
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px;
}

.destek-talep-musteri-detay .customer-area span{
    color: #fff;
}

.destek-talep-musteri-detay .right .badge{
    height: 32px;
    font-size: 16px;
    line-height: 20px;   
    padding: 0 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.destek-talep-musteri-detay .right .badge i{
    margin: 0 6px 0 0;
}

.destek-talep-musteri-detay .panel-heading h3{
    margin: 0;
    font-size: 20px;
}

.destek-talep-musteri-detay .card-info-header{
    justify-content: flex-start;
    gap: 8px;
}
.destek-talep-musteri-detay .card-info-header .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 6px;
}

.destek-talep-musteri-detay .ticket-success-btn{
    text-align: center;
}

.destek-talep-musteri-detay .ticket-success-btn button{
    text-decoration: none;    
    margin: 16px 0 0;
    transition: 0.2s;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
}

.destek-talep-musteri-detay .ticket-success-btn button:hover{
    background-color: #d3d4d5;
    border-color: #00000000;
    transition: 0.2s;
}

.destek-talep-musteri-detay .panel-heading a,
.destek-talep-musteri-detay .panel-heading span{
    color: #5f5f5f;
}

.destek-talep-musteri-detay .panel-heading a:hover{
    color: #000;
}

.destek-talep-musteri-detay .ticket-success-btn{
    display: block;
}

.destek-talep-musteri-detay .ticket-success-btn.mobile{
    display: none;
}

.destek-talep-musteri-detay .takip-no{
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    color: #000;
}

.destek-talep-musteri .table tbody tr,
.destek-talepleri .table tbody tr{
    cursor: pointer;
}

#addProduct .liste-urun-adet{
    background: #5cb85c;
    border-color: #5cb85c;
    border-radius: 6px;
    max-width: 120px;
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#addProduct .liste-urun-adet span{
    color: #fff;
    display: block;
    font-size: 12px;
    text-align: center;
}

#addProduct .liste-urun-adet span b{
    display: block;
}

.modul-kutuphanesi .card.others{
    align-items: center;
    justify-content: center;    
    max-width: 200px;
    margin: 16px 0 0;
    padding: 0;
}
.modul-kutuphanesi .card.others .btn{
    margin: 0;
    width: 100%;
}

.cikti-formati .format-area{
    display: flex; 
    gap: 24px; 
    align-items: center; 
    height: 100%; 
    border: 2px solid #ddd; 
    border-radius: 6px; 
    padding: 8px 16px; 
    background: #fff;   
}
.cikti-formati .format-area label{
    display: flex; 
    align-items: center; 
    gap: 6px; 
    cursor: pointer; 
    color: #555;
    margin: 0;
}
.cikti-formati .format-area input{
    margin: 0;
}

.cikti-formati .format-area .border{
    width: 1px; 
    height: 20px; 
    background: #ddd; 
    margin: 0 6px;
}

.selection-wrapper{
    padding: 0 6px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.selection-wrapper button{
    width: 100%;
    font-weight: 600;
    border: 1px solid #ddd;
    background: #fff;
    white-space: normal;
    height: auto;
}

.selection-wrapper button:hover{
    background: #e5e5e5;
}

.selection-wrapper .item{
    border: 1px solid  #ddd;
    background: #f8fafc;    
    padding: 16px;   
    border-radius: 10px;
    margin-bottom: 16px;
    width: 100%;
}

.selection-wrapper .selection-area{
    flex-direction: column;
}

.xml-detail-area .selection-area .selected-items-container{
    white-space: nowrap;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 6px;
    background: #fff;
}

.xml-detail-area .checkbox-group{
    border-radius: 6px;
}

.xml-detail-area .panel-heading .panel-title a{
    justify-content: space-between;
}

#middle .xml-detail-area div.panel-heading{
    height: 58px !important;
}

.selection-wrapper .card-header{
    padding: 0 0 12px;
}

.xml-detail-area .selected-tag{
    font-weight: 600;
}

.xml-detail-area .pricing-table {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}

.xml-detail-area .p-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.xml-detail-area .p-head div{
    text-align: left;
    width: 100%;
    padding: 8px 0 0;     
}

.xml-detail-area  .p-row{
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 34px;
    padding: 6px 16px;
    gap: 8px;
}

.xml-detail-area  .p-row .col-md-3{
    padding: 0;
}

.xml-detail-area  .p-row select,
.xml-detail-area  .p-row input{
    height: 35px;
    padding: 0 12px;
    width: 100%;
}

.xml-detail-area #priceCollapse button{
    border: 1px solid #ddd;   
    background: #fff; 
    transition: 0.2s;
}
.xml-detail-area #priceCollapse button:hover{
    background: #ebebeb;
    transition: 0.2s;
}

.xml-detail-area #pricing-rows{
    padding: 0 0 16px;
    width: 100%;
}

/* .xml-detail-area #pricing-rows select,
.xml-detail-area #pricing-rows input{
    min-width: 150px;
} */

.xml-detail-area #pricing-rows a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
}

.xml-detail-area .summary-container{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
    
.xml-detail-area .summary-box{
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;
    width: 100%;
}

.xml-detail-area .summary-header{
    font-weight: 700;
    color: #555;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.75rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.xml-detail-area .summary-box ul{
    padding: 0;
    list-style: none;
    margin: 0;
}

.xml-detail-area .summary-box i{
    color: #e66454;
}

.xml-detail-area .summary-header{
    font-size: 18px;
}

.xml-detail-area .summary-list li{
    padding: 4px 0;
}

.xml-detail-area .result-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;    
    margin-top: 24px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 16px 24px;
    border-radius: 8px;
}
.xml-detail-area .result-bar .title{
    font-size: 14px;
    font-weight: 600;
    color: #166534;
    margin-bottom: 4px;
}

.xml-detail-area .result-bar .stat-item,
.xml-detail-area .result-bar .stat-item span{
    display: block;    
    
}

.xml-detail-area .result-bar .stat-item span{
    text-align: center;
    color: #166534;
    font-weight: 600;
}

.xml-detail-area .result-bar .result-stats{
    display: flex;
    align-items: center;
    gap: 32px;
}

.xml-detail-area .result-bar .stat-val{
    font-weight: 700;
    font-size: 24px;
}

.xml-detail-area .result-bar button{
    padding: 8px 24px; 
    font-size: 16px;
}

.xml-detail-area .checkbox-group label{
    user-select: none;
}

#middle div.xml-export .panel-heading{
    background: #fff;
    margin: 0 0 16px;
    height: auto !important;
}

.xml-export .panel-heading small{
    display: block;
    white-space: normal;
    font-size: 12px;
    color: #555;
    font-weight: 400;
    line-height: 16px;
}

.xml-export .profile-icon{
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f11a;
    color: #6366f1;
}

.xml-export  .badge-success{
    color: rgba(22, 101, 52, 1);
    background: rgba(220,252, 231, 1);
}

.xml-export  .badge-danger{
    background: #fee2e2;
    color: #991b1b;
}

.xml-export .profile-info{
    display: flex;
    align-items: center;
    gap: 8px;
}

.xml-export .flt-content button{
    height: 34px;
    max-width: 150px;
    background: #f1f5f9; color: #475569;
    transition: 0.2s;
}

.xml-export table .actions{
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    gap: 8px;
}

.xml-export table .btn-icon{
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}

.xml-export table .btn-icon:hover {
    background: #dfdfdf;
}

.xml-export .table-footer,
.xml-export .pagination{
    margin: 0;
}

.xml-export .flt-content button:hover{    
    background: #c8e3fd;
    transition: 0.2s;
}

.xml-export .profile-name{
    font-weight: 600;
    display: block;
    color: #333;
}
.xml-export .profile-desc{
    font-size: 12px;
}

.xml-export .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    margin: 0 0 16px;
}

.xml-export .stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.xml-export .stat-info span {
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

.xml-export .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.xml-export .stat-card .stat-info h4{
    margin: 0;
}

.xml-export .stat-card .stat-info{
    line-height: 14px;
}

.xml-export .table-footer .left,
.xml-export .table-footer .right{
    padding: 0;
}

.xml-import .status-cell span,
.xml-import .status-cell p{
    text-align: center;
}

.xml-import .status-cell span,
.xml-import table .badge{
    margin: 0 auto;
}

#example_wrapper .dt-top{
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
}

#example_length {
    display: block;
    width: auto;
    position: static;
}
#example_filter{
    display: block;
    width: auto;
}

#example_length label{
    float: none;
}
#example_length select{
    margin-right: 0 !important;
}

.toplu-butonlar-ajaxsiz{
    margin: 0 0 12px 0;
}

.dt-top,.dt-bottom{
        display: flex;
align-items: center;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes ky-fade-in-out {
    0%, 100% { opacity: 0; }
    25%, 75% { opacity: 1; }
}
.toplu-butonlar-ajaxsiz {
    margin: 0 15px 12px 0;
}
.istatistik-sayaclari .owl-carousel .item{
    padding-bottom: 0;
    min-height: 98px;
}
.istatistik-sayaclari .owl-carousel .item .text{
    margin: 0;
}

.dashboard-v2 .table-area{
    border-radius: 0;
}

.dashboard-v2 .panel-area .stat-card .stat-title,
.panel-area .stat-card .stat-info,.panel-area .stat-card i,
.panel-area .stat-card .stat-alt-info{
    color: #fff;    
}

.dashboard-v2 .panel-area .stat-card.stat-basket{
    background: #47715f !important;
} 

.dashboard-v2 .panel-area .nav-tabs>li.active>a,
.dashboard-v2 .panel-area .nav-tabs>li:hover>a{    
    color: #e66454;    
}

.dashboard-v2 .panel-area .nav-tabs li::after,
.dashboard-v2 .panel-area .nav-tabs li:hover::after{
    background: #e66454;
}

.dashboard-v2 .panel-area li a{
    font-weight: 500;
}

.dt-top,.dt-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media screen and (max-width: 1441px){
    .panel-area .urun-hareketleri .top-area .col-md-3{
        width: 33%;
    }
    .script-library-grid{
        grid-template-columns: repeat(3, 1fr);
    }
    .toplu-guncelleme .action-tab-manual .tab-list{
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
    }
    .toplu-guncelleme .action-tab-manual .tab-list::-webkit-scrollbar{
        display: none;
    }
     .toplu-guncelleme .action-tab-manual .tabs-container{
        flex-direction: column; 
    }
  
    #tab-musteri-hareketleri .top-area .col-md-3,
    #tab-siparisler .top-area .col-md-3,
    #tab-siparisler .top-area .col-md-3,
    #tab-yeni-uyeler .top-area .col-md-3{
        padding-right: 9px;
    }
}


@media screen and (max-width: 1300px){
    .top-area .col-md-3{
        width: 50%;
    }

    .panel-area .urun-hareketleri .top-area .col-md-3{
        width: 50%;
    }

    .panel-area .grid-table-area{
       display: flex;
       flex-direction: column;
    }
    #tab-urun-hareketleri .top-area .col-md-4{
        width: 50%;
    }
    .xml-export .stats-grid {    
        grid-template-columns: 1fr 1fr;         
    }
}

@media screen and (max-width: 1200px){
    .card-area{     
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
    }
    .siparis-detay{
        display:flex;
        flex-direction:column;
    }
    .siparis-detay .left-section,
    .siparis-detay .right-section{
        width: 100%;
    }
    .siparis-detay .left-section{
        margin: 0;
    }
    .ozellikler-v2 .row{       
        display: flex;
        flex-direction: column; 
        
    }
     .ozellikler-v2 .row .col-md-4{
        width: 100%;      
        padding: 0; 
    }
    .ozellikler-v2 .feature-item{
        padding: 10px 0;
    }
    .ozellikler-v2 .head-block{
        flex-direction: column;
        align-items: flex-start;
    }
    .ozellikler-v2 .head-block .input-group{
        max-width: inherit;
    }

     .script-library-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .toplu-guncelleme .excel-group-area{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #tab-durum .table-block{        
        grid-template-columns: repeat(1, 100%);      
    }
    #tab-urun-hareketleri .top-area .col-md-4{
        width: 50%;
    }
    .destek-talepleri .card-area .col-md-3{
        width: 100%;
    }
    .destek-talepleri .card-area .stat-card{
        margin: 0;
    }
    .destek-talepleri .filter-area{
        flex-direction: column;
    }
    .destek-talepleri .filter-area .form-group.second, 
    .destek-talepleri .filter-area .form-group.third{
        width: 100%;
    }
    .destek-talepleri .filter-area .btn-area{
        width: 100%;
        margin: 20px 0 0;
    }
    .destek-talep-musteri .info-card-area{
        flex-direction: column;
        align-items: center;
    }
    .destek-talep-musteri .info-card-area .col-md-4,
    .destek-talep-musteri .info-card-area .col-md-8{
        width: 100%;
    }
    .destek-talep-detay .message-stream, .destek-talep-musteri-detay .message-stream{
        padding-left: 0;
    }
    .destek-talep-detay .message-stream::before, .destek-talep-musteri-detay .message-stream::before{
        left: 9px;
    }
    .destek-talep-musteri-detay .ticket-success-btn{
        display: none;
    }
    .destek-talep-musteri-detay .ticket-success-btn.mobile{
        display: block;
    }
    .destek-talep-musteri-detay .sticky-area{
        margin: 16px 0 0;
    }
    .destek-talep-detay .msg-content, .destek-talep-musteri-detay .msg-content{
        margin-left: 43px;
    }
    .destek-talep-detay .msg-avatar, .destek-talep-musteri-detay .msg-avatar{
        left: -13px;
    }
    .xml-export .table-footer{
        flex-direction: column;
        align-items: center;
        margin: 12px 0 0;
        gap: 12px;
    }
    .xml-export .table-footer .col-md-5{
        width: 100%;
    }
    .xml-export .table-footer .dataTables_info{
        text-align: center;
    }
    .xml-export .make-five{
        gap: 6px;
    }
}

@media screen and (max-width: 992px){
    .kargo-liste .make-five .row{
        flex-direction: column;
    }
    .kargo-liste .filter-group button{
        margin: 24px 0 0;
    }
    .kargo-liste tbody{
        gap: 8px;
    }
    .table-top{
        
        align-items: flex-end;
        gap: 16px;
    }
    .panel-header{
        flex-direction: column;
        align-items: flex-start;
    }
    .script-library-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .script-ekle-detay .panel-heading .header-actions{
        align-items: flex-end;
        flex-direction: column;
    }
    .script-ekle-detay .builder-area,
    .script-ekle-detay.kayan-yazi .builder-area{
        grid-template-columns: repeat(2, 1fr);
    }
    .script-ekle-detay .tab-header{
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .script-ekle-detay .header-actions{
        margin: 0;
    }
    .script-ekle-detay .tab-btn{
        padding: 8px 16px;
    }
    .script-ekle-detay.geri-sayim .builder-area,
    .script-ekle-detay.carkifelek .builder-area{
        grid-template-columns: 1fr 1fr;
    }
    .toplu-guncelleme .excel-group-area{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
   .stok-update .row .col-md-6{
    width: 100%;
   }
   .toplu-guncelleme .row,
   .toplu-guncelleme .row-split,
   .toplu-guncelleme .row-four,
   .toplu-guncelleme .inner-row
   {
     flex-direction: column;
   }
   .toplu-guncelleme .col-md-8, 
   .toplu-guncelleme .col-md-4,
   .toplu-guncelleme .col-md-12,
   .toplu-guncelleme .col-md-5,
   .toplu-guncelleme .col-md-2,
   .toplu-guncelleme .col-md-3,
   .toplu-guncelleme .col-md-9,
   .toplu-guncelleme .col-md-6,
   .toplu-guncelleme .col-md-10
   {
     width: 100%;
   }
    .toplu-guncelleme #accordion-filter .btn-area{
            text-align: left;   
    }
    #accordion-filter .filter-tag-area{
        margin: 16px 0 0 16px;
    }
    
    .xml-detail-area .p-head div,
    .xml-detail-area #pricing-rows select,
    .xml-detail-area #pricing-rows input{
        min-width: 200px;
        width: 100%;
    }
    .xml-detail-area .p-head div:last-child{
        min-width: 50px;
    }
    .xml-detail-area .result-bar{
        flex-direction: column;
    }
    .xml-detail-area .summary-container{
        flex-direction: column;
    }
    .xml-detail-area .result-bar .result-stats{
        justify-content: center;
    }
    .xml-export .table-footer .right{       
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width: 768px){
    .card-area{     
        display: flex;
        flex-direction: column;
    }
    #notificationModal h2{
        font-size: 24px;
    }
    #notificationModal .modal-close-btn{
        font-size: 16px;
    }
    #notificationModal label,
    #notificationModal span,
    #notificationModal .channel-button{
        font-size: 14px;
    }
    .top-area .col-md-3{
        width: 100%;
    }
    .panel-area .urun-hareketleri .top-area .col-md-3{
        width: 100%;
    }
    .panel-area {
        margin: 26px 0 0;
    }
    .panel-area li a{
        font-size: 14px;
        line-height: 20px;
    }    
    .panel-header h1{
        font-size: 24px;
    }
    .panel-header .breadcrumb ol a, 
    .panel-header .breadcrumb ol span,
    .panel-header .breadcrumb ol i{
        font-size: 12px;
    }
    .table-area .dt-buttons{
        display: flex;
        flex-wrap: wrap;        
        justify-content: flex-end;
        gap: 6px;
    }
    .table-area .dt-container .dt-search{
        margin-top: 0;
    }
    .kargo-liste .col-lg-4{
        width: 100%;
    }
    
    .kargo-liste .btn-area button{
        height: 30px;
        font-size: 12px;
    }
    
    .script-library-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    
    .script-ekle-detay .builder-area,
    .script-ekle-detay.kayan-yazi .builder-area{
        grid-template-columns: repeat(1, 1fr);
    }

    .modul-area .custom-script-card{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .modul-area .custom-script-card .card-body p{
        text-align:center;
    }
    #middle .script-ekle .panel-heading, #middle .script-ekle-detay .panel-heading{
        flex-direction: column;
        gap: 16px;
        align-items: flex-start; 
        
    }
    .script-ekle .header-actions{
        justify-content: flex-start;
    }   
    .script-ekle-detay .panel-heading .header-actions{
        flex-direction: row;
        justify-content: flex-end; 
        flex-wrap: inherit;
    }
    .script-ekle-detay .panel-heading .switch-group{
        width: 100%;
    }
    .script-ekle-detay .form-row-split{
        display: block;
        margin: 16px 0 0;
    }
    .script-ekle-detay.geri-sayim .builder-area{
        grid-template-columns: 1fr;
    }
    .script-ekle-detay .form-row-trio{
        grid-template-columns: 1fr;
    }
    .script-ekle-detay .form-row-trio .form-group{
        margin: 0;
    }
    .script-ekle-detay #timing .radio-group-boxed{
        flex-direction: column;
    }
    #preview-modal .preview-bar{
        flex-direction: column;
        gap: 16px;
    }
    #preview-modal .preview-timer,
    #preview-modal .preview-timer-box{
        width: 100%;
    }
    .script-ekle-detay.sosyal-medya-bari .inner-tab-pane .builder-area,
    .script-ekle-detay.yagdirma-efekti .builder-area,
    .script-ekle-detay.carkifelek .builder-area{
        grid-template-columns: repeat(1, 1fr);
    }
    .script-ekle-detay .tab-header .tab-nav{
        width: 100%;
    }
    .sekme-modal .btn-light{
        width: 100%;
    }
    .toplu-guncelleme .excel-group-area{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .toplu-guncelleme .excel-sablon-area{
        flex-direction: column;
        gap: 16px;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        text-align: center;
    }
    .toplu-guncelleme .excel-sablon-area p{
        text-align: center;
    }
    .toplu-guncelleme .action-tab-manual .tabs-container {
        flex-direction: column;
    }
    .modal-overlay.edit-modal h2{
        font-size: 16px;
    }
    #middle .tasarim-yonetimi .panel-heading,
    .tasarim-yonetimi .panel-heading .select-area{
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    
    .tasarim-yonetimi .panel-heading .select-area select,
    .tasarim-yonetimi .panel-heading .select-area .form-group,
    .tasarim-yonetimi .panel-heading .select-area .select-item{
        width: 100%;
    }
    .tasarim-yonetimi .sortable-block, .tasarim-yonetimi .sortable-block .sortable-item{
        flex-direction: column;
        gap: 16px;
    }
    .tasarim-yonetimi .new-module-item-btn{
        text-align: left;
        padding: 6px 12px;
        font-size: 12px;
    }
    .tasarim-yonetimi .sortable-block .btn{
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
    .tasarim-yonetimi .sortable-block .btn i{
        font-size: 10px;
    }
    .tasarim-yonetimi .nav-tabs{
        padding: 16px 0 0;
        margin: 0px 0 15px;
    }
    .tasarim-yonetimi .first-col,
    .tasarim-yonetimi .second-col,
    .tasarim-yonetimi .third-col{
        width: 100%;
    }
    .sortable-block .switch{
        width: 40px;
        height: 20px;
    }
    .sortable-block .switch .slider:before{
        height: 15px;
        width: 15px;
    }
    .sortable-block input:checked + .slider:before{
        transform: translateX(18px);
    }
    .tasarim-yonetimi .tab-pane-content{
        gap: 6px;
    }
    .tasarim-yonetimi .sortable-item .title{
        font-size: 12px;    
    }
    .modal-overlay.preview-modal .modal-header h2,
    .modal-overlay.edit-modal .modal-header h2{
        font-size: 16px;
    }
    .modal-overlay.preview-modal .modal-body p{
        text-align: center;
    }
    #tab-durum .top-area{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }


    #tab-durum .table-block{
        grid-template-columns: repeat(1, 100%);
        grid-template-rows: repeat(1, 1fr);
    }
    #tab-durum .table-item .table-top{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #tab-durum .table-item .table-top label{
        font-size: 14px;
    }
    #tab-durum .table-item .table-top select{
        height: 30px;
    }

    #tab-durum .top-area .btn,
    #tab-durum .top-area .right{
        width: 100%;
        justify-content: center;
      
    }

    #tab-durum .top-area .btn{
        gap: 8px;
    }
    #requestModal .modal-content{        
        max-height: 100%;
    }
    .modul-kutuphanesi .module-block h3{
        font-size: 16px;
    }
    #tab-yeni-uyeler .panel-area .table-area .table-header,
    #tab-bildirimler .panel-area .table-area .table-header{
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .dashboard-v2 .table-top{
        flex-direction: column;
    }
    .dashboard-v2 .table-top .search-input,
    .dashboard-v2 div.dt-container .dt-search input{
        width: 100%;
    }
    .dashboard-v2 .table-bottom{
        flex-direction: column;
        gap: 12px;
    }
    .dashboard-v2 .dt-info{
        margin: 0 auto 0 0;
    }
    .dashboard-v2 div.dt-container .dt-paging .dt-paging-button{
        padding: 4px 10px;
    }
    .dashboard-v2 .table-header .select-area,
    .dashboard-v2 .table-header .select-area select{
        width: 100%;
    }
    .dashboard-v2 .table-header .select-area select{
        margin: 16px 0 0;
    }
    #tab-durum .top-area .left{
        width: 100%;
    }
    #tab-urun-hareketleri .top-area .col-md-4{
        width: 100%;
    }
    #tab-yeni-uyeler .select-area{
        flex-direction: column;
        margin: 16px 0 0;
    }
    #tab-yeni-uyeler .select-area .form-group{
        width: 100%;
        margin: 0;
    }
    #tab-yeni-uyeler .select-area select{
        margin: 0;
    }
    #middle .destek-talepleri .panel-heading{
        flex-direction: column;
        justify-content: flex-start; 
        align-items: flex-start;
    }
    #middle .destek-talepleri .panel-heading .left{
        margin: 0 0 16px; 
    }
    #middle .destek-talepleri .panel-heading .right button{
        width: 100%;
        padding: 8px;
        font-size: 12px;
    }
    #middle .destek-talepleri .panel-heading .right{
        width: 100%;
    }

    .destek-talep-detay .ticket-header, 
    .destek-talep-detay .ticket-tags{
       flex-direction: column;
       align-items: flex-start; 
    }
    .destek-talep-musteri .nav-tabs button {       
        font-size: 12px;
        padding: 8px;
    }
   
    .destek-talep-musteri .info-area span{
        font-size: 14px;
    }

    .destek-talep-musteri .message-info h5{
        font-size: 16px;
    }

    .destek-talep-musteri .panel-heading{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
    }
    .destek-talep-musteri .panel-heading .right,
    .destek-talep-musteri .panel-heading .left{
        width: 100%;
    }
    .destek-talep-musteri .panel-heading button{
        margin: 0 auto 0 0;
    }
    #middle div.destek-talep-musteri-detay .panel-heading{
        flex-direction: column;        
        align-items: flex-start;
        gap: 12px;
    }
    .destek-talep-musteri-detay .panel-heading h3{
        font-size: 16px;
    }
    .destek-talep-musteri-detay .panel-heading .badge{
        height: 25px;
        font-size: 14px;      
        margin:0 auto 0 0;
    }
    .destek-talep-musteri-detay .msg-header {
        border-bottom: none;
        flex-direction: column;
        gap: 6px;
    }
    .destek-talep-detay .ticket-card-footer, 
    .destek-talep-musteri-detay .ticket-card-footer{
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .destek-talep-detay .ticket-card-footer .file-upload-section, 
    .destek-talep-musteri-detay .ticket-card-footer .file-upload-section,
    .destek-talep-detay .file-upload-section .file-upload-button, 
    .destek-talep-musteri-detay .file-upload-section .file-upload-button,
    .destek-talep-detay .ticket-card-footer .action-buttons, 
    .destek-talep-musteri-detay .ticket-card-footer .action-buttons,
     .destek-talep-detay .ticket-card-footer .action-buttons button, 
    .destek-talep-musteri-detay .ticket-card-footer .action-buttons button{
        width: 100%;
        text-align: center;
    }
    .xml-export .stats-grid {    
        grid-template-columns: 1fr;         
    }
    #example_wrapper .dt-top{
        margin: 14px 8px 0 0;
    }
}

@media screen and (max-width: 480px){
    .script-ekle-detay .panel-heading .header-actions{
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end; 
        flex-wrap: wrap;
    }
    .script-ekle-detay .panel-heading .switch-group,
    .script-ekle-detay .panel-heading .btn{
        width: 100%;
    }
   
}