/*****************************************/
/*      SİPARİŞ DETAY FORMU              */
/*****************************************/
/* Modal Kapsayıcı */
.order-detail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    width: 95%;
    max-width: 1450px;
    height:680px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8); /* Hafif gölge efekti */
    z-index: 1002;
    display: none; /* Başlangıçta gizli */
}

/* Başlık */
.order-detail-form-header {
    flex: 0 0 auto; /* Sabit yükseklik */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #d8d8d8;
    color:#000;
    border-radius: 8px 8px 0px 0px;
    border-bottom: 1px solid #ddd;
    cursor: grab; /* Sürükleme için */
}

.order-detail-form-header:active {
    cursor: grabbing;
}

.order-detail-form-header h3 {
    margin: 0;
    font-size: 22px;
}

.order-detail-close-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background-color: #dc3545;
    margin-right: 10px;
}

/* İçerik Alanı */
.order-detail-form-content {
    flex: 1; /* Kalan alanı kaplar */
    overflow-y: auto; /* İçerik uzun olduğunda kaydırma çubuğu */
    padding: 16px;
    background: #f9f9f9;
}


/* Firma Bilgileri */
.order-detail-info {
    display: flex;
    margin-bottom: 16px;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.order-detail-left  {
    padding:10px;
    margin:5px;
    width:28%;
}


.order-detail-left p,
.order-detail-status p {
    margin: 8px 0;
}

.order-detail-notes  {
    margin:4px;
    padding:10px;
    width:23%;
}

.order-detail-notes p {
    margin: 8px 0;
}

.order-detail-notes textarea {
    width: 100%;
    height: 78%;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: none;
    padding: 8px;
    background: #f9f9f9;
}

.order-detail-summary  {
    margin:5px;
    padding:10px;
    width:32%;
}

.order-detail-summary table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.order-detail-summary td {
    padding: 4px;
    border: 1px solid #ddd;
}

/* Sipariş Durumu ve Ödeme */
.order-detail-status {
    padding: 10px;
    margin:5px;
    width:14%;
}

.order-detail-status select {
    width: 100%;
    padding: 8px;
}

/* Tablo */
.order-detail-table-container {
    overflow-x: auto;
    overflow-y: auto;
    height:305px;
    border: 1px solid #ddd;
    border-radius: 4px;    
}

.order-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.order-detail-table th,
.order-detail-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.order-detail-table th {
    background: #f4f4f4;
    font-weight: bold;
}

/* Footer */
.order-detail-form-footer {
    flex: 0 0 auto; /* Sabit yükseklik */
    display: flex; /* Flex düzeni ile içerik sıralaması */
    justify-content: center; /* İçerikleri ortalar */
    align-items: center; /* Dikeyde ortalar */
    padding: 10px 20px; /* İç kenar boşluğu */
    border-radius: 0px 0px 8px 8px;
    background-color: #d8d8d8; /* Arka plan rengi */
    color: #000; /* Yazı rengi */
    cursor: grab; /* Sürükleme için */
}

.order-detail-form-footer:active {
    cursor: grabbing;
}


/* Butonlar */
.order-detail-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.save-btn {
    background: #0540f2;
    color: #fff;
}

.cancel-btn {
    background: #f44336;
    color: #fff;
}

.order-details-close-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background-color: #dc3545;
    margin-right: 10px;
}


/*************************************/
/*  SİPARİŞ DEĞERLENDİRME FORMU      */
/*************************************/

.order-evaluation-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98%;
    max-width: 1480px;
    height: 660px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8); /* Hafif gölge efekti */
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

/* Başlık ve kapatma butonu */
.order-evaluation-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0px 0px;
    background-color: #d8d8d8;
    color: #000;
    cursor: grab; /* Sürükleme için */
}

.order-evaluation-form-header:active {
    cursor: grabbing;
}

.order-evaluation-form-header h3 {
    margin: 10px;
}

.order-evaluation-close-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background-color: #dc3545;
    margin-right: 10px;
}

.order-evaluation-form-footer {
    display: flex;                                      /* Flex düzeni ile içerik sıralaması */
    justify-content: space-between;                     /* İçerikleri sağ ve sola yerleştirir */
    align-items: center;                                /* Dikeyde ortalar */
    padding: 10px 20px;                                 /* İç kenar boşluğu */
    border-radius: 0px 0px 8px 8px;
    background-color: #d8d8d8;                          /* Arka plan rengi */
    color: #000;                                        /* Yazı rengi */
}

/* İçerik düzeni */
.order-listing-content {
    display: flex;
    height: 549px;
}


/* Filtre alanı */
.order-evaluation-filter {
    width: 200px;
    padding: 20px;
    height:550px;
    max-height:550px;
    background-color: #f4f4f4;
}

.order-evaluation-filter h4 {
    margin-top: 0;
}

.order-evaluation-filter label {
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

.order-evaluation-filter select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
}

.unique-order-listing-filter-button {
    margin-top: 20px;
    text-align: center;
}

#filterOrderListBtn {
    width: 80%;
    padding: 8px 16px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#filterOrderListBtn {
    background-color: #5a6268;
}

/* İşlem butonları */
.unique-order-listing-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}


.unique-order-listing-actions button {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

.unique-order-listing-view-button {
    width: 90px;
    background-color: #007bff; /* Mavi renk */
}

.unique-order-listing-view-button:hover {
    background-color: #0056b3; /* Mavi buton hover */
}

/* Tablo Konteyneri */
.order-evaluation-table-container {
    flex: 1;                                            /* Kalan alanı kaplar */
    padding: 10px;                                      /* İç kenar boşluğu */
    height:550px;
    max-height:550px;
    overflow-y: auto;                                   /* Dikey kaydırma çubuğu ekle */
    overflow-x: auto;                                   /* Yatay kaydırma çubuğu ekle */
    border: 1px solid #ddd;                             /* İnce kenarlık */
    background-color: #fff;                             /* Arka plan rengi */
}

/* Tablo */
.order-evaluation-table {
    width: 100%;                                        /* Tüm genişliği kaplar */
    border-collapse: collapse;                          /* Kenarlıkları birleştirir */
}

/* Tablo Hücreleri */                               /* BURASI ÇOK ÖNEMLİ TEK SATIRDA YAZDIRIYOR İÇERİKLERİ */
.order-evaluation-table-cell {
    white-space: nowrap;                           /* Metni tek satırda tut */
    overflow: hidden;                              /* Taşan metni gizle */
    text-overflow: ellipsis;                       /* Uzun metinlerde '...' ekle */
    max-width: 250px;                              /* Firma adı hücresinin genişliği */
    padding: 8px 12px;                             /* İç boşluklar */
    border-bottom: 1px solid #ddd;                 /* Alt çizgi */
    font-size: 14px;
}

.align-right {
    text-align: right;
}

.order-evaluation-table th, .order-evaluation-table td {
    padding: 10px;                                      /* Hücre iç boşluğu */
    border: 1px solid #ddd;                             /* Hücre kenarlığı */
    text-align: left;                                   /* Sol hizalama */
}

.order-evaluation-table th {
    background-color: #f4f4f4;                          /* Başlık hücre arka plan rengi */
    font-weight: bold;                                  /* Kalın yazı tipi */
}

.unique-view-button {
    width: 90px;
    background-color: #007bff; /* Mavi renk */
}

.unique-view-button:hover {
    background-color: #0056b3; /* Mavi buton hover */
}


.order-delete-button {
    width: 60px;
    background-color: #f44336;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;    
}


/*****************************************/
/*  ALIŞVERİŞ SEPETİNE EKLEME FORMU      */
/*****************************************/
/* Ana Form */
.product-add-to-cart-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 850px;
    height: 260px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 5000;
    display: flex;
    flex-direction: column;    
}

/* Başlık ve Kapatma Butonu */
.product-add-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0px 0px;
    background-color: #d8d8d8;
    color: #000;
    padding: 10px 20px;
    cursor: grab; /* Sürükleme için */
    margin-bottom: 16px;
}

.product-add-form-header:active {
    cursor: grabbing;
}

.product-add-form-header h3 {
    margin: 10px;
}

.close-add-to-cart-btn {
    padding: 8px 16px;                 /* Buton iç kenar boşlukları */
    font-size: 14px;                   /* Buton yazı boyutu */
    border: none;                      /* Kenarsız buton */
    border-radius: 4px;                /* Kenar yuvarlama */
    cursor: pointer;                   /* İşaretçi */
    margin: 0 5px;                     /* Sağ-sol boşluk */
    color: white;                      /* Yazı rengi */
    background-color: #dc3545;         /* Kaydet butonu arka plan rengi */
}


/* Ürün Görseli */
.product-image-container {
    flex-shrink: 0;
}

.product-image {
    width: 150px;
    height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    object-fit: cover;
}


/* Ürün İçeriği */
.product-add-form-content {
    display: flex; /* Yatay düzen */
    flex-direction: row;
    align-items: flex-start; /* Sağ tarafı yukarı hizalar */
    gap: 20px; /* Resim ve bilgi alanı arasına boşluk bırakır */
    padding: 20px;
}
  

/* Ürün Detayları Konteyneri */
.product-details-container {
    display: flex;
    flex-direction: column; /* Bilgiler yatay sıralanır */
    gap: 16px; /* Bilgiler arasına yatay boşluk bırakır */
    align-items: center; /* Bilgiler resmin hizasından başlar */
    justify-content: space-between; /* Aralıklı boşluk */
    width: 100%; /* Konteyner genişliğini doldurur */
}

/* Ürün Detayları Konteyneri */
.product-inputs-container {
    display: flex;
    flex-direction: row; /* Bilgiler yatay sıralanır */
    gap: 16px; /* Bilgiler arasına yatay boşluk bırakır */
    align-items: flex-start; /* Bilgiler resmin hizasından başlar */
    justify-content: space-between; /* Aralıklı boşluk */
    width: 100%; /* Konteyner genişliğini doldurur */
}





.product-field {
    flex: 1; /* Tüm alanların eşit yer kaplamasını sağlar */
    text-align: right;
}

.product-field label {
    font-size: 14px;
    margin-bottom: 4px;
}

.product-field input {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    width: 100%; /* Input alanının genişliği %100 */
    box-sizing: border-box;
    text-align:right;
}

.product-field input[readonly] {
    background-color: #e9e9e9;
    cursor: not-allowed;
}

/* Sipariş Ver Butonu */
.product-add-form-footer {
    flex-direction: column;
    text-align: center;
}

.product-add-form-footer button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.product-add-form-footer button i {
    margin-right: 8px;
}


/********************************/
/*  ALIŞVERİŞ SEPETİ FORMU      */
/********************************/
/* Form Konteyneri */
#shoppingCartFormContainer {
    display: flex;
    flex-direction: column;  
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1500px;
    height: 660px;
    max-height: 660px; /* Tarayıcı görünüm alanının %90'ı */
    overflow-y: auto; /* Dikey kaydırma */  
    
    transform: translate3d(0, 0, 0); /* GPU hızlandırması */

    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 5000;
    overflow: hidden;
}


/* Başlık */
#shoppingCartFormHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #d8d8d8;
    color: #000;
    cursor:grab;
}

#shoppingCartFormHeader:active {
    cursor: grabbing;
}

#shoppingCartFormHeader h5 {
    margin: 0;
}

#shoppingCartFormHeader .shopping-cart-close-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background-color: #dc3545;
}

#shoppingCartFormHeader .shopping-cart-close-btn:hover {
    background-color: #c82333;
}

/* İçerik Bölümü */
.shopping-cart-content {
    display: flex;
    flex: 1;
    height: 408px;
    max-height: 408px;
    padding: 20px;
    gap: 20px; /* Aralık bırak */
}

/* İskonto Tablosu */
.shopping-cart-discount-table-container {
    width: 230px; /* Sol tarafta daha küçük */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    padding: 10px;
}

.shopping-cart-discount-table {
    width: 100%;
    border-collapse: collapse;
}

.shopping-cart-discount-table th, 
.shopping-cart-discount-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}

.shopping-cart-discount-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.shopping-cart-discount-table td {
    font-size: 14px;
}

/* Sepet Tablosu */
.shopping-cart-table-container {
    flex: 1; /* Sağ tarafta daha geniş */
    max-height: 430px;
    overflow-y: auto;
    overflow-x: auto;   
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    padding: 10px;
}

.shopping-cart-table {
    width: 100%;
    border-collapse: collapse;
}


/* Tablo Hücreleri */                               /* BURASI ÇOK ÖNEMLİ TEK SATIRDA YAZDIRIYOR İÇERİKLERİ */
.shopping-cart-table-cell {
    white-space: nowrap;                           /* Metni tek satırda tut */
    overflow: hidden;                              /* Taşan metni gizle */
    text-overflow: ellipsis;                       /* Uzun metinlerde '...' ekle */
    max-width: 250px;                              /* Firma adı hücresinin genişliği */
    padding: 8px 12px;                             /* İç boşluklar */
    border-bottom: 1px solid #ddd;                 /* Alt çizgi */
    font-size: 14px;
}

.shopping-cart-table th, 
.shopping-cart-table td {
    padding: 12px;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    border: 1px solid #ddd;
    text-align: left;
    cursor: default;
}

.shopping-cart-table th {
    background-color: #f4f4f4;
    font-weight: bold;
    cursor: default;  /* Fareyi üzerine getirdiğinde işaretçi simgesi */
}

.shopping-cart-table th:hover {
    background-color: #f1f1f1;  /* Hover efekti */
}

.shopping-cart-table img {
    width: 50px;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;  
}


.orderBasketButton-container {
    text-align: center;
    margin-top: 20px;
}

.order-payment-methods {
    max-width:250px;
    text-align: center;

}

.order-payment-methods h4 {
    margin-top: 0;
}

.order-payment-methods label {
    font-weight: bold;
    display: block;
    margin-top: 10px;
}

.order-payment-methods select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
}



/* Sepet Tablosu Sol Tarafa Alınması */
.shopping-cart-payment-container {
    flex: 1; /* Sağ tarafta daha geniş */
    max-width: 230px; /* Maksimum genişlik */
    overflow-y: auto; /* Dikey kaydırma */
    border: 1px solid #ddd; /* Tablo kenarlığı */
    background-color: #fff; /* Arka plan rengi */
    border-radius: 4px; /* Yuvarlak köşeler */
    padding: 10px; /* İçerik boşluğu */
    margin-right: 20px; /* Sağ tarafa yaslama */
    margin-left: 20px; /* Sağ tarafla arasında boşluk bırak */
}




/* Sepet Tablosu Sol Tarafa Alınması */
.shopping-cart-notes-container {
    flex: 1; /* Sağ tarafta daha geniş */
    max-width: 800px; /* Maksimum genişlik */
    overflow-y: auto; /* Dikey kaydırma */
    border: 1px solid #ddd; /* Tablo kenarlığı */
    background-color: #fff; /* Arka plan rengi */
    border-radius: 4px; /* Yuvarlak köşeler */
    padding: 10px; /* İçerik boşluğu */
    margin-right: 20px; /* Sağ tarafa yaslama */
    
}

#orderNotes {
    height: 115px; /* id ile özelleştirilmiş daha büyük bir yükseklik */
    max-height:115px;
}

/* Sipariş toplam */
.shopping-summary-content {
    display: flex;
    flex: 1;
}

/* Toplam Tablosu */

/* Sepet Tablosu Sağ Tarafa Alınması */
.shopping-cart-summary-table-container {
    flex: 1; /* Sağ tarafta daha geniş */
    max-width: 30%; /* Maksimum genişlik */
    overflow-y: auto; /* Dikey kaydırma */
    border: 1px solid #ddd; /* Tablo kenarlığı */
    background-color: #fff; /* Arka plan rengi */
    border-radius: 4px; /* Yuvarlak köşeler */
    padding: 10px; /* İçerik boşluğu */
    margin-left: auto; /* Sağ tarafa yaslama */
    margin-right: 20px; /* Sağ tarafla arasında boşluk bırak */
}


.shopping-cart-summary-table {
    width: 100%;
    border-collapse: collapse;
}

.shopping-cart-summary-table th, 
.shopping-cart-summary-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: right;
}

.shopping-cart-summary-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.shopping-cart-summary-table td {
    font-size: 14px;
}

.discount-row {
    transition: background-color 0.3s, color 0.3s;
}

.discount-row.active {
    background-color: blue;
    color: white;
}




/**********************************/
/* SİPARİŞ VERME ÜRÜN GÖRÜNTÜLEME */
/**********************************/

/* Ürün Detaylarını Göster Modalı */
.order-form-product-view-modal {
    position: fixed;                 /* Ekrana sabitler */
    top: 50%;                       /* Dikeyde ortalar */
    left: 50%;                      /* Yatayda ortalar */
    transform: translate(-50%, -50%); /* Merkeze taşır */
    width: 85%;                     /* Genişlik %85 */
    max-width: 1300px;              /* Maksimum genişlik 1300px */
    height: 89vh;                   /* Yükseklik viewport'un %89'u */
    background-color: #fff;         /* Zemin rengi beyaz */
    border: 1px solid #ccc;         /* Kenarlık rengi gri */
    border-radius: 8px;             /* Kenarları yuvarlar */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
    z-index: 4000;                  /* En üst katman */
    display: none;                  /* Varsayılan olarak gizli */
    flex-direction: column;
}

/* Başlık ve kapama butonu */
.order-form-modal-header {
    display: flex;                  /* Flex düzen kullanır */
    justify-content: space-between; /* İçerikleri yatayda yayar */
    align-items: center;            /* Dikeyde ortalar */
    background-color: #d8d8d8;      /* Zemin rengi açık gri */
    padding: 15px;                  /* İçeriklere boşluk bırakır */
    border-radius: 8px 8px 0px 0px; /* Üst kenarları yuvarlar */
    cursor: grab; /* Sürükleme için */
}

.order-form-modal-header:active {
    cursor: grabbing;
}


.order-form-modal-close-btn {
    padding: 8px 16px;              /* Buton içi boşluk */
    font-size: 16px;                /* Font büyüklüğü */
    border: none;                   /* Kenarlık yok */
    background-color: #dc3545;      /* Zemin rengi kırmızı */
    color: white;                   /* Font rengi beyaz */
    cursor: pointer;                /* Fare ikonu işaretçi */
    border-radius: 4px;             /* Kenarları yuvarlar */
}

/* İçerik düzeni */
.order-form-modal-content {
    display: flex;                  /* Flex düzen kullanır */
    height: 80%;                   /* Yüksekliği modal alanına uyar */
    padding: 20px;                  /* İçeriklere boşluk bırakır */
    overflow-y: auto;               /* Yatay kaydırmayı engeller, dikey kaydırma aktif */
    gap: 20px;                      /* Elemanlar arasında boşluk */
    
}

/* Ürün Görselleri */
.order-form-product-images {
    flex: 1;                        /* Görseller alanının esnekliği */
    display: flex;                  /* Flex düzen */
    flex-direction: column;         /* Dikey hizalama */
    gap: 15px;                      /* Görseller arası boşluk */
}

.order-form-main-image-carousel img {
    width: 100%;                    /* Görsel genişliğini alana uyarlar */
    max-height: 380px;              /* Maksimum görsel yüksekliği */
    object-fit: cover;              /* Görseli düzgün şekilde keser */
    border-radius: 8px;             /* Görsel kenarlarını yuvarlar */
}

.order-form-thumbnail-container {
    display: flex;                  /* Küçük görseller için yatay düzen */
    gap: 10px;                      /* Görseller arasında boşluk */
    margin-top: 10px;               /* Üst boşluk */
}

.order-form-thumbnail {
    width: 80px;                    /* Küçük görsel genişliği */
    height: 80px;                   /* Küçük görsel yüksekliği */
    overflow: hidden;               /* Taşan içerikleri gizler */
    border-radius: 5px;             /* Kenarları yuvarlar */
    cursor: pointer;                /* İşaretçi ikonu */
    transition: transform 0.3s;     /* Görsel büyütme geçiş süresi */
}

.order-form-thumbnail img {
    width: 100%;                    /* Görsel genişliğini kapsar */
    height: 100%;                   /* Görsel yüksekliğini kapsar */
    object-fit: cover;              /* Görsel düzgün şekilde keser */
}

.order-form-thumbnail:hover {
    transform: scale(1.1);          /* Hover durumunda görsel büyür */
}

/* Ürün Detay Bilgileri */
.order-form-product-details {
    overflow: auto; 
    flex: 3;                        /* Ürün detaylarının esnekliği */
    display: flex;                  /* Flex düzen */
    flex-direction: column;         /* Dikey hizalama */
    gap: 15px;                      /* Elemanlar arası boşluk */
    padding: 15px;                  /* İçeriklere boşluk */
    background-color: #f8f8f8;      /* Zemin rengi açık gri */
    border-radius: 8px;             /* Kenarları yuvarlar */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
}

/* Alt Kısım: Sipariş Ver Butonu */
.order-form-modal-footer {
    display: flex;                  /* Yatay hizalama */
    justify-content: center;        /* Ortaya hizalar */
    padding: 10px;                  /* İçeriklere boşluk */
    border-top: 1px solid #ddd;     /* Üst kenar çizgisi */
}

.order-form-modal-footer button {
    padding: 10px 20px;             /* Buton iç boşlukları */
    font-size: 16px;                /* Font büyüklüğü */
    background-color: #28a745;      /* Zemin rengi yeşil */
    color: white;                   /* Font rengi beyaz */
    border: none;                   /* Kenarlık yok */
    border-radius: 4px;             /* Kenarları yuvarlar */
    cursor: pointer;                /* İşaretçi ikonu */
}

.order-form-modal-footer button:hover {
    background-color: #218838;      /* Hover durumunda daha koyu yeşil */
}


/********************************/
/* SİPARİŞ GİRİŞ FORMU ANASAYFA  */
/********************************/

/* Sipariş Verme Modalı */
.unique-order-form-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 1300px;
    height: 89vh;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Başlık ve kapatma butonu */
.unique-order-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0px 0px;
    background-color: #d8d8d8;
    color: #000;
    cursor: grab; /* Sürükleme için */
}

.unique-order-form-header:active {
    cursor: grabbing;
}

.unique-order-form-header h3 {
    margin: 10px;
}

.unique-order-form-close-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background-color: #dc3545;
    margin-right: 10px;
}

/* İçerik düzeni */
.unique-order-form-content {
    display: flex;
    height: 610px;
}

/* Filtre alanı */
.unique-order-filter {
    width: 250px;
    padding: 20px;
    border-right: 1px solid #ddd;
    background-color: #f4f4f4;
    border-radius: 0px 0px 0px 8px;
}

.unique-order-filter h4 {
    margin-top: 0;
}

.unique-order-filter label {
    font-weight: bold;
    display: block;
    margin-top: 15px;
}

.unique-order-filter select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
}

.unique-order-filter-button {
    margin-top: 20px;
    text-align: center;
}

#filterOrdersBtn {
    width: 80%;
    padding: 8px 16px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#filterOrdersBtn:hover {
    background-color: #5a6268;
}

/* Ürün kartlarını listeleme alanı */
.unique-order-list-container {
    flex: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%; /* 4 sütun düzeni */
    gap: 10px;
    overflow-y: auto;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 0px 0px 8px 0px;
}

/* Ürün kartı */
.unique-order-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 220px;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 380px;
    justify-content: space-between;
    margin-bottom:15px;
}

/* Ürün resmi */
.unique-order-image-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Kare oranı */
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}

.unique-order-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

/* Ürün bilgileri */
.unique-order-info {
    text-align: center;
    margin: 10px 0;
}

.unique-order-info h4 {
    margin: 5px 0;
    font-size: 16px;
    color: #333;
}

.unique-order-info p {
    margin: 3px 0;
    color: #666;
    font-size: 12px;
}

/* İşlem butonları */
.unique-order-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}


.unique-order-actions button {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

.unique-view-button {
    width: 90px;
    background-color: #007bff; /* Mavi renk */
}

.unique-view-button:hover {
    background-color: #0056b3; /* Mavi buton hover */
}

.unique-order-button {
    width: 90px;
    background-color: #28a745; /* Yeşil renk */
}

.unique-order-button:hover {
    background-color: #218838; /* Yeşil buton hover */
}








/****************************/
/* ŞİFRE DEĞİŞTİRME FORMU   */
/****************************/

.password-change-modal {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
/*    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam arka plan */
/*    cursor: grab;   */
}

/* Modal içeriği */
.password-change-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    cursor: grab; /* İçeriğin taşınabilir olduğunu belirtir */
    z-index: 3100; /* İçeriğin arka plandan daha ön planda olmasını sağla */
}

/* Kapanış butonu */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #dc3545; /* Kırmızı Zemin */
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
}

.close-btn:hover {
    background-color: #c82333;
}


/* Başlık */
.password-change-modal-content h2 {
    font-size: 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.password-change-modal-content h2 i {
    margin-right: 10px;
}

/* Form alanları */
.password-change-form-group {
    margin-bottom: 20px;
}

.password-change-form-group label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
}

.password-change-form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* Input alanındaki padding düzenlemesi */
.input-group.mb-3 input[type="password"] {
    padding-right: 50px; /* Göz butonuna yer bırak */
}

/* Göz butonu */
.current-password-toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    outline: none; /* Focus outline'ı kaldırır */
}

.current-password-toggle-button:focus {
    outline: none; /* Focus sırasında çerçeveyi kaldırır */
}

/* Göz simgesi için hover efekti */
.current-password-toggle-button:hover i {
    color: #007bff;
}

/* Form butonları */
.password-change-form-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.password-change-cancel-btn,
.password-change-save-btn {
    width: 120px;
    padding: 8px 16px;                 /* Buton iç kenar boşlukları */
    font-size: 14px;                   /* Buton yazı boyutu */
    border: none;                      /* Kenarsız buton */
    border-radius: 4px;                /* Kenar yuvarlama */
    cursor: pointer;                   /* İşaretçi */
    margin: 0 5px;                     /* Sağ-sol boşluk */
    color: white;                      /* Yazı rengi */
}

.password-change-cancel-btn {
    background-color: #dc3545; /* Danger Zemin */
    color: white;
}

.password-change-cancel-btn:hover {
    background-color: #c82333;
}

.password-change-save-btn {
    background-color: #28a745;
    color: white;
}

.password-change-save-btn:hover {
    background-color: #218838;
}

/********************************/
/* FİRMA BİLGİLERİ GİRİŞ FORMU  */
/********************************/
.custom-company-form-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1000px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.custom-company-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
    background-color: #d8d8d8;
    color: #000;
    padding: 10px 20px;
    cursor: grab;
}

.custom-company-form-header:active {
    cursor: grabbing;
}

.custom-company-form-header h3 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

.custom-close-button {
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-close-button:hover {
    background-color: #c82333;
}

.custom-company-form-content {
    display: flex;
    padding: 20px;
}

/* Logo ve Buton İçin Yeni Container */
.custom-logo-upload-container {
    display: flex;
    flex-direction: column;
    justify-content: top;
    gap: 10px;  /* Resim ve buton arasındaki boşluk */
    margin-right: 20px; /* Ana formdan hafif bir boşluk */
    width: 200px;
}

/* Logo Önizleme Alanı */
.custom-logo-preview-container {
    width: 200px;
    height: 200px;
    border: 2px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.custom-logo-preview {
    width: 150px;
    height: 170px;
    object-fit: contain; 
}

/* Resim Yükleme Butonu */
.custom-form-group button {
    margin-top: 10px;
    margin-left:50px;
}

/* Form Alanları */
form#customCompanyForm {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.custom-form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Label ve inputların sola dayalı olması */
    width: 100%;
}

.custom-form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

.custom-form-group input,
.custom-form-group select,
.custom-form-group textarea {
    padding: 7px;
    width: 100%;  /* Genişliği tutarlı hale getirmek için */
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95em;
    color: #333;
    transition: border-color 0.3s ease;
}

.custom-form-group input:focus,
.custom-form-group select:focus,
.custom-form-group textarea:focus {
    border-color: #4CAF50;
}

.custom-form-group textarea {
    resize: vertical;
    min-height: 40px;
}

/* Alt Kısım - Kaydet ve İptal Butonları */
.custom-form-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
}

.custom-save-button,
.custom-cancel-button {
    width: 150px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-save-button {
    background-color: #28a745;
}

.custom-save-button:hover {
    background-color: #218838;
}

.custom-cancel-button {
    background-color: #dc3545;
}

.custom-cancel-button:hover {
    background-color: #c82333;
}


/*******************************************************************************************/
/* Şirket Yönetimi Modülü Stil */
/*******************************************************************************************/
/* Şirket Listeleme Modalı */
.unique-company-listing-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 1300px;
    height: 89vh;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Başlık ve kapama butonu */
.unique-company-listing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0px 0px; 
    background-color: #d8d8d8;
    color: #000;
    cursor: grab;
}


.unique-company-listing-header:active {
    cursor: grabbing;                        /* Sürükleme için el işareti */
}


.unique-company-listing-header h3 {
    margin: 10px;
}

.unique-company-listing-close-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background-color: #dc3545;
    margin-right: 10px;
}

/* "Filtrele" Butonu Konteyneri */
.unique-filter-button {
    margin-top: 20px;
    text-align: center;
}

/* "Filtrele" Butonunun Kendisi */
#filterCompaniesBtn {
    width: 80%;
    padding: 8px 16px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#filterCompaniesBtn:hover {
    background-color: #5a6268;
}

.unique-add-company {
    margin-top: 20px;
    text-align: center;
}

#uniqueAddCompanyBtn {
    width: 80%;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#uniqueAddCompanyBtn:hover {
    background-color: #45a049;
}

/* İçerik düzeni */
.unique-company-listing-content {
    display: flex;
    height: 100%;
}

/* Filtre alanı */
.unique-company-filter {
    width: 250px;
    padding: 20px;
    border-right: 1px solid #ddd;
    background-color: #f4f4f4;
    border-radius: 0px 0px 0px 8px; 
}

.unique-company-filter h4 {
    margin-top: 0;
}

.unique-company-filter label {
    font-weight: bold;
    display: block;
    margin-top: 15px;
}

.unique-company-filter select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
}

/* Şirket kartları düzeni */
.unique-company-list-container {
    flex: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    gap: 0px;
    overflow-y: auto;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 0px 0px 8px 0px; 
    padding: 20px;
    overflow-y: auto;
}

/* Her bir şirket kartı */
.unique-company-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 220px;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 380px;
    justify-content: space-between;
    margin-bottom: 15px;
}

/* Şirket resmi */
.unique-company-image-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}

.unique-company-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

/* Şirket bilgileri */
.unique-company-info {
    text-align: center;
    margin: 10px 0;
}

.unique-company-info h4 {
    margin: 5px 0;
    font-size: 16px;
    color: #333;
}

.unique-company-info p {
    margin: 3px 0;
    color: #666;
    font-size: 12px;
}

/* İşlem butonları */
.unique-company-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.unique-company-actions button {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

.unique-edit-company-button {
    width: 60px;
    background-color: #4CAF50;
}

.unique-delete-company-button {
    width: 60px;
    background-color: #f44336;
}


/*******************************/
/*  Kullanıcı Giriş Modalı     */
/*******************************/

/**************************************/
/* KULLANICI BİLGİLERİ FORMU TASARIMI */
/**************************************/
.custom-user-form-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 900px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.custom-user-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
    background-color: #d8d8d8;
    color: #000;
    padding: 10px 20px;
    cursor: grab;    
}

.custom-user-form-header:active {
    cursor: grabbing;                        /* Sürükleme için el işareti */
}

.custom-user-form-header h3 {
    margin: 0;
    font-size: 1.4em;
    color: #333;
}

.custom-user-close-button {
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-user-close-button:hover {
    background-color: #c82333;
}

.custom-user-form-content {
    display: flex;
    padding: 20px;
}

/* Profil Resmi Alanı */
.custom-user-logo-upload-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-right: 20px;
    width: 180px;
    align-items: center; /* Yatayda ortalamayı sağla */
}

.custom-user-logo-preview-container {
    width: 180px;
    height: 180px;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.custom-user-logo-preview {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

/* Resim Yükleme Butonu */
.custom-user-upload-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;
    margin-top: 20px;
}

.custom-user-upload-button:hover {
    background-color: #0056b3;
}


/* Şifre Değiştir Butonu */
.custom-password-change-button {
    background-color: #ffc107; /* Örneğin farklı bir renk */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 1em;
}

.custom-password-change-button:hover {
    background-color: #e0a800;
}




/* Form Alanları */
form#customUserForm {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.custom-user-form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.custom-user-form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

.custom-user-form-group input,
.custom-user-form-group select {
    padding: 10px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95em;
    color: #333;
    transition: border-color 0.3s ease;
}

.custom-user-form-group input:focus,
.custom-user-form-group select:focus {
    border-color: #4CAF50;
}

/* Kaydet ve İptal Butonları */
.custom-user-form-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    padding: 10px;
}

.custom-user-save-button,
.custom-user-cancel-button {
    width: 140px;
    height: 40px;
    font-size: 1em;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.password-container {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.password-container input {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.password-toggle-button {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: .8em;
    color: black;
}

.password-toggle-button:focus {
    outline: none;
}

.password-toggle-button i {
    pointer-events: none;
}



.custom-user-save-button {
    background-color: #28a745;
}

.custom-user-save-button:hover {
    background-color: #218838;
}

.custom-user-cancel-button {
    background-color: #dc3545;
}

.custom-user-cancel-button:hover {
    background-color: #c82333;
}


#passwordChangeButton {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 20px;
}

#passwordChangeButton:hover {
    background-color: #218838;
}


/******************************/
/* Kullanıcı Listeleme Modalı */
/******************************/
.unique-user-listing-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 1300px;
    height: 90vh;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Başlık ve kapama butonu */
.unique-user-listing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0px 0px;
    background-color: #d8d8d8;
    color: #000;
    cursor: grab;
}

.unique-user-listing-header:active {
    cursor: grabbing;                        /* Sürükleme için el işareti */
}

.unique-user-listing-header h3 {
    margin: 10px;
}

.unique-user-listing-close-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    background-color: #dc3545;
    margin-right: 10px;
}

/* "Filtrele" Butonu Konteyneri */
.unique-filter-button {
    margin-top: 20px;
    text-align: center;
}

/* "Filtrele" Butonunun Kendisi */
#filterUsersBtn {
    width: 80%;
    padding: 8px 16px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#filterUsersBtn:hover {
    background-color: #5a6268;
}

.unique-add-user {
    margin-top: 20px;
    text-align: center;
}

#uniqueAddUserBtn {
    width: 80%;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#uniqueAddUserBtn:hover {
    background-color: #45a049;
}

/* İçerik düzeni */
.unique-user-listing-content {
    display: flex;
    height: 610px;
}

/* Filtre alanı */
.unique-user-filter {
    width: 250px;
    padding: 20px;
    border-right: 1px solid #ddd;
    background-color: #f4f4f4;
}

.unique-user-filter h4 {
    margin-top: 0;
}

.unique-user-filter label {
    font-weight: bold;
    display: block;
    margin-top: 15px;
}

.unique-user-filter select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
}

/* Kullanıcı kartları düzeni */
.unique-user-list-container {
    flex: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    gap: 0px;
    overflow-y: auto;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 0 0 8px 0;
    padding: 20px;
    overflow-y: auto;
}

/* Her bir kullanıcı kartı */
.unique-user-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 220px;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 380px;
    justify-content: space-between;
    margin-bottom: 15px;
}

/* Kullanıcı resmi */
.unique-user-image-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}

.unique-user-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

/* Kullanıcı bilgileri */
.unique-user-info {
    text-align: center;
    margin: 10px 0;
}

.unique-user-info h4 {
    margin: 5px 0;
    font-size: 16px;
    color: #333;
}

.unique-user-info p {
    margin: 3px 0;
    color: #666;
    font-size: 12px;
}

/* İşlem butonları */
.unique-user-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.unique-user-actions button {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

.unique-edit-user-button {
    width: 60px;
    background-color: #4CAF50;
}

.unique-delete-user-button {
    width: 60px;
    background-color: #f44336;
}

/********************************/
/* ÜRÜN LİSTELEME ANA EKRANI    */
/********************************/

/* Ürün Listeleme Modalı */
.unique-product-listing-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 1300px;
    height: 89vh;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
    z-index: 1000;
    display: flex;
    flex-direction: column;
/*    padding: 20px 20px;  */
}

/* Başlık ve kapama butonu */
.unique-product-listing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0px 0px; 
/*    padding: 10px 20px; */
    background-color: #d8d8d8;
    color: #000;
    cursor: grab;                        /* Sürükleme için el işareti */
}

.unique-product-listing-header:active {
    cursor: grabbing;                        /* Sürükleme için el işareti */
}

.unique-product-listing-header h3 {
    margin: 10px;
}

.unique-product-listing-close-btn {
    padding: 8px 16px;                   /* Buton iç kenar boşlukları */
    font-size: 14px;                     /* Buton yazı boyutu */
    border: none;                        /* Kenarsız buton */
    border-radius: 4px;                  /* Köşe yuvarlatma */
    cursor: pointer;                     /* İşaretçi */
    color: white;                        /* Yazı rengi beyaz */
    background-color: #dc3545;           /* Kırmızı arka plan rengi */
    margin-right: 10px;
}



/* "Filtrele" Butonu Konteyneri */
.unique-filter-button {
    margin-top: 20px; /* Listbox ile arasında boşluk bırakır */
    text-align: center; /* Ortalamak için */
}

/* "Filtrele" Butonunun Kendisi */
#filterProductsBtn {
    width: 80%; /* Buton genişliğini yüzde 80 olarak ayarlar */
    padding: 8px 16px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}


#filterProductsBtn:hover {
    background-color: #5a6268; /* Hover durumunda daha koyu gri */
}


.unique-add-product {
    margin-top: 20px; /* Üstte boşluk bırakır */
    text-align: center; /* Ortalar */
}


#uniqueAddProductBtn {
    width: 80%; /* Buton genişliğini yüzde 80 olarak ayarlar */
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#uniqueAddProductBtn:hover {
    background-color: #45a049; /* Üzerine gelince hafif koyulaşır */
}


/* İçerik düzeni */
.unique-product-listing-content {
    display: flex;
    height: 610px;
}

/* Filtre alanı */
.unique-product-filter {
    width: 250px;
    padding: 20px;
    border-right: 1px solid #ddd;
    background-color: #f4f4f4;
    border-radius: 0px 0px 0px 8px;
}



.unique-product-filter h4 {
    margin-top: 0;
}

.unique-product-filter label {
    font-weight: bold;
    display: block;
    margin-top: 15px;
}

.unique-product-filter select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px; 
    margin-top: 5px;
}



.unique-product-list-container {
    flex: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%; /* 4 sütun düzenini yüzdelik olarak tanımlama */
    gap: 0px;
    overflow-y: auto;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 0px 0px 8px 0px; 
    padding: 20px;
    overflow-y: auto;
}

/* Her bir ürün kartı */
.unique-product-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 220px;                  /* Kart genişliği */
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 380px;                 /* Kart yüksekliği */
    justify-content: space-between;
    margin-bottom:15px;
}

/* Ürün resmi */
.unique-product-image-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%;          /* Kare oranında yer tutucu oluşturur */
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}


.unique-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;           /* Görselin sığmasını sağlar, kırpmaz */
    cursor: pointer; /* Fare el işaretine dönüşür */
}

/* Ürün bilgileri */
.unique-product-info {
    text-align: center;
    margin: 10px 0;
}

.unique-product-info h4 {
    margin: 5px 0;
    font-size: 16px;
    color: #333;
}

.unique-product-info p {
    margin: 3px 0;
    color: #666;
    font-size: 12px;
}

/* İşlem butonları */
.unique-product-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.unique-product-actions button {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

.unique-edit-button {
    width: 60px;
    background-color: #4CAF50;
}

.unique-delete-button {
    width: 60px;
    background-color: #f44336;
}






/*******************************************************************************************/
/* Ürün Detay Form Konteyneri */
#uniqueProductEntryContainer {
    position: fixed;                     /* Formu sabit bir pozisyonda tutar */
    top: 50%;                            /* Yatay olarak ortalar */
    left: 50%;                           /* Dikey olarak ortalar */
    transform: translate(-50%, -50%);    /* Gerçek ortalama işlemi */
    width: 60%;                          /* Form genişliği */
    max-width: 800px;                    /* Maksimum genişlik */
    max-height: 90vh;                    /* Ekranın %90'ını geçmemesi için max-height */
    overflow-y: auto;                    /* Dikey kaydırma çubuğu ekler */
    background-color: #fff;              /* Arka plan rengi beyaz */
    border: 1px solid #ccc;              /* Gri kenarlık */
    border-radius: 8px;                  /* Hafif yuvarlatılmış köşeler */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Gölge efekti */
    z-index: 1000;                       /* Diğer içeriklerin üstünde gösterir */
    display: none;                       /* Başlangıçta gizli */
    padding: 20px;                       /* İçerik etrafındaki boşluk */
}

/* Başlık ve Footer */
.unique-modal-header, .unique-form-actions {
    display: flex;                       /* Flex düzeni kullanır */
    justify-content: space-between;      /* İçeriği sağa ve sola yayar */
    align-items: center;                 /* Dikey olarak ortalar */
    padding: 10px 20px;                  /* İç kenar boşlukları */
    border-radius: 8px;
    background-color: #d8d8d8;           /* Bayi Müracaat Değerlendirme formundaki arka plan rengi */
    color: #000;                         /* Yazı rengi siyah */
    margin-bottom:20px;
    cursor: grab;                        /* Sürükleme için el işareti */
}

/* Başlık - Sürükleme Aktifken */
.unique-modal-header:active {
    cursor: grabbing;                    /* Sürüklerken kapanmış el işareti */
}

/* Kart Stil Yapısı */
.unique-form-content {
    display: flex;                       /* Kartları yatayda sıralamak için flex düzeni */
    gap: 20px;                           /* Kartlar arası boşluk */
}

.unique-form-card {
    background-color: #f9f9f9;           /* Kart arka plan rengi */
    padding: 15px;                       /* Kart iç kenar boşlukları */
    border-radius: 8px;                  /* Hafif yuvarlatılmış köşeler */
    border: 1px solid #ddd;              /* İnce gri kenarlık */
}

/* Sol ve Sağ Kartlar */
.unique-left-card, .unique-right-card {
    flex: 1;                             /* Kartlar genişliği eşit paylaşır */
}

/* Yan yana form grubu */
.unique-form-group-horizontal {
    display: flex;
    gap: 10px; /* Aralarındaki boşluk */
    width: 100%;
}

/* Kategori alanı %60 genişlik kaplayacak */
.unique-form-group-horizontal .category-group {
    flex: 0 0 50%;
}

/* Ürün Kodu alanı %40 genişlik kaplayacak */
.unique-form-group-horizontal .product-code-group {
    flex: 0 0 46%;
}

/* Genel form grupları için stil */
.unique-form-group {
    display: flex;
    flex-direction: column;
}

.unique-form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

.unique-form-group select,
.unique-form-group input {
    width: 100%; /* İçerik genişliğini %100 yap */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Alt Kart */
.unique-bottom-card {
    margin-top: 20px;                    /* Üst boşluk ile alt kartın ayrılması */
}

/* Kart Başlıkları */
.card-title {
    font-size: 1.2em;                    /* Kart başlık yazı boyutu */
    margin-bottom: 10px;                 /* Başlık altında boşluk */
    color: #333;                         /* Yazı rengi koyu gri */
    font-weight: bold;                   /* Kalın yazı tipi */
}

/* Kapatma Butonu */
.unique-modal-close-btn {
    padding: 8px 16px;                   /* Buton iç kenar boşlukları */
    font-size: 14px;                     /* Buton yazı boyutu */
    border: none;                        /* Kenarsız buton */
    border-radius: 4px;                  /* Köşe yuvarlatma */
    cursor: pointer;                     /* İşaretçi */
    color: white;                        /* Yazı rengi beyaz */
    background-color: #dc3545;           /* Kırmızı arka plan rengi */
}

.unique-modal-close-btn:hover {
    background-color: #c82333;           /* Üzerine gelindiğinde daha koyu kırmızı */
}

/* Form Grupları */
.unique-form-group {
    margin-bottom: 15px;                 /* Form grupları arasında boşluk */
}

.unique-form-group label {
    display: block;                      /* Label blok halinde */
    margin-bottom: 5px;                  /* Label altında boşluk */
    font-weight: bold;                   /* Kalın yazı tipi */
}

.unique-form-group input,
.unique-form-group textarea,
.unique-form-group select {
    width: 100%;                         /* Tam genişlikte */
    padding: 8px;                        /* İç kenar boşluğu */
    border: 1px solid #ddd;              /* İnce gri kenarlık */
    border-radius: 4px;                  /* Hafif yuvarlatılmış köşeler */
}


/* Text alanı kaydırma çubuğunu kaldırma */
.unique-form-group textarea {
    overflow: hidden;               /* Kaydırma çubuğunu gizler */
    resize: vertical;               /* Yalnızca dikeyde yeniden boyutlandırma */
    min-height: 50px;               /* Minimum yükseklik belirler */
    max-height: 400px;              /* Maksimum yükseklik belirler */
}


/* Açıklama alanını ve diğer text alanlarını düzenleyelim */
#uniqueProductDescription {
    width: 100%;                   /* %100 genişlik */
    padding: 8px;                  /* İç kenar boşlukları */
    border: 1px solid #ddd;        /* Kenar çizgisi */
    border-radius: 4px;            /* Kenar yuvarlama */
    font-size: 14px;               /* Yazı boyutu */
    resize: vertical;              /* Yalnızca dikeyde yeniden boyutlandırma */
    overflow-y: hidden;            /* Kaydırma çubuğunu kaldırır */
}


/* Resim Önizleme Konteyneri */
.unique-image-preview-container {
    display: flex;                       /* Resimleri yatay olarak yerleştirir */
    flex-wrap: wrap;                     /* Yeni satıra geçer */
    gap: 5px;                            /* Resimler arası boşluk */
    padding: 5px;                        /* İç kenar boşlukları */
    border: 1px solid #ddd;              /* Kenarlık */
    border-radius: 8px;                  /* Yuvarlatılmış kenar */
    max-height: 150px;                   /* Maksimum yükseklik */
    overflow-y: auto;                    /* Dikey kaydırma çubuğu */
}

/* Thumbnail Stili */
.unique-image-preview {
    position: relative;                  /* Konum ayarı */
    width: 80px;                         /* Resim genişliği */
    height: 80px;                        /* Resim yüksekliği */
    border: 1px solid #ddd;              /* Kenarlık */
    border-radius: 8px;                  /* Yuvarlatılmış kenar */
    overflow: hidden;                    /* Taşan kısmı gizler */
    cursor: move;                        /* Sürüklenebilir işareti */
}

/* İlk Resim İçin Primary Etiketi */
.primary-label {
    position: absolute;                  /* Etiketi konumlandırma */
    top: 5px;                            /* Yukarıdan boşluk */
    left: 5px;                           /* Soldan boşluk */
    background-color: blue;              /* Etiket arka plan rengi */
    color: white;                        /* Yazı rengi */
    padding: 2px 5px;                    /* İç kenar boşlukları */
    font-size: 10px;                     /* Yazı boyutu */
    border-radius: 3px;                  /* Yuvarlatılmış köşe */
    z-index: 1;                          /* Üstte gösterme */
}

.unique-image-preview img {
    width: 100%;                         /* Resim genişliği */
    height: 100%;                        /* Resim yüksekliği */
    object-fit: cover;                   /* Resmi sığdırma */
}

/* Sil ve Kırp Butonları */
.unique-image-actions {
    position: absolute;                  /* Konumlandırma */
    bottom: 5px;                         /* Alttan boşluk */
    right: 5px;                          /* Sağdan boşluk */
    display: flex;                       /* Yatayda butonları hizalar */
    gap: 5px;                            /* Butonlar arası boşluk */
}

.unique-image-actions button {
    background-color: rgba(0, 0, 0, 0.5); /* Saydam koyu arka plan */
    color: white;                        /* Yazı rengi beyaz */
    border: none;                        /* Kenarsız */
    border-radius: 50%;                  /* Yuvarlak kenarlar */
    width: 20px;                         /* Buton genişliği */
    height: 20px;                        /* Buton yüksekliği */
    cursor: pointer;                     /* İşaretçi */
    display: flex;                       /* İçerik düzeni */
    align-items: center;                 /* Dikeyde ortalar */
    justify-content: center;             /* Yatayda ortalar */
    font-size: 12px;                     /* Yazı boyutu */
}

/* Alt Kısım - Kaydet ve İptal Butonları */
.unique-form-actions {
    display: flex;                       /* Butonları yatayda hizalar */
    justify-content: center;             /* Butonları ortalar */
    padding: 10px 0;                     /* İç kenar boşlukları */
    background-color: #d8d8d8;           /* Footer arka plan rengi */
    margin-top:20px;
}

.unique-action-btn {
    padding: 8px 16px;                   /* Buton iç kenar boşlukları */
    margin-left: 10px;                   /* Butonlar arası boşluk */
    border: none;                        /* Kenarsız */
    border-radius: 4px;                  /* Yuvarlatılmış kenar */
    cursor: pointer;                     /* İşaretçi */
}

.unique-save-btn {
    background-color: #4CAF50;           /* Kaydet butonu arka plan rengi */
    color: white;                        /* Yazı rengi beyaz */
}

.unique-cancel-btn {
    background-color: #f44336;           /* İptal butonu arka plan rengi */
    color: white;                        /* Yazı rengi beyaz */
}


/* YENİ EKLENEN  STİLLER BURADA

/* Ek Bilgiler Alanı */
.unique-form-group {
    margin-bottom: 15px; /* Form grupları arasında boşluk */
}

.unique-form-group label {
    display: block; /* Label blok halinde */
    margin-bottom: 5px; /* Label altında boşluk */
    font-weight: bold; /* Kalın yazı tipi */
}

/* Eklenen Alanlar İçin Stil */
#uniqueProductStock,
#uniqueProductWeight,
#uniqueProductDiscountEligible,
#uniqueProductMaxDiscount {
    width: 100%; /* Tam genişlikte */
    padding: 8px; /* İç kenar boşluğu */
    border: 1px solid #ddd; /* İnce gri kenarlık */
    border-radius: 4px; /* Hafif yuvarlatılmış köşeler */
}

/* Çöp Kutusu Simgesi */
.unique-image-actions button.trash-icon {
    background-color: rgba(255, 0, 0, 0.5); /* Kırmızı tonlu arka plan */
    color: white; /* Beyaz yazı rengi */
    font-size: 14px; /* Simge boyutu */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.unique-image-actions button.trash-icon:hover {
    background-color: rgba(255, 0, 0, 0.7); /* Üzerine gelince daha koyu kırmızı */
}

/* Primary Etiket Stili */
.primary-label {
    background-color: blue; /* Mavi arka plan */
    color: white; /* Beyaz yazı rengi */
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 3px;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
}

/* Görsel Taşıma İçin Stil */
.unique-image-preview {
    width: 80px;
    height: 80px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ddd;
    cursor: move;
}

.unique-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#uniqueProductActive {
    margin-left: 5px;
}



/*************************************************************************************************************/

/* Form Konteyneri */
.dealer-evaluation-modal {
    display: flex;                                      /* Flex düzeni ile içerik sıralaması */
    flex-direction: column;                             /* İçerikleri dikey sırada yerleştirir */
    position: fixed;                                    /* Sayfa üzerinde sabit konumda kalır */
    top: 50%;                                           /* Sayfanın ortasına yerleştirme */
    left: 50%;                                          /* Sayfanın ortasına yerleştirme */
    transform: translate(-50%, -50%);                   /* Ortada konumlandırma için kaydırma */
    width: 1150px;                                       /* Form genişliği */
    height: 600px;                                      /* Form yüksekliği */
    background-color: #f9f9f9;                          /* Arka plan rengi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);           /* Gölge efekti */
    border-radius: 8px;                                 /* Köşe yuvarlatma */
    z-index: 1000;                                      /* Diğer içeriklerin üstünde göster */
    overflow: hidden;                                   /* Taşan içerikleri gizler */
}

/* Header ve Footer */
.dealer-modal-content, .dealer-modal-footer {
    display: flex;                                      /* Flex düzeni ile içerik sıralaması */
    justify-content: space-between;                     /* İçerikleri sağ ve sola yerleştirir */
    align-items: center;                                /* Dikeyde ortalar */
    padding: 10px 20px;                                 /* İç kenar boşluğu */
    background-color: #d8d8d8;                          /* Arka plan rengi */
    color: #000;                                        /* Yazı rengi */
    cursor: grab;                                       /* Sürüklemek için el işareti */
}

.dealer-modal-content, .dealer-modal-footer:active {
    cursor: grabbing;                        /* Sürükleme için el işareti */
}


.dealer-modal-content h5 {
    margin: 0;                                          /* Başlık için üst ve alt boşluk yok */
}

.dealer-close-btn {
    padding: 8px 16px;                 /* Buton iç kenar boşlukları */
    font-size: 14px;                   /* Buton yazı boyutu */
    border: none;                      /* Kenarsız buton */
    border-radius: 4px;                /* Kenar yuvarlama */
    cursor: pointer;                   /* İşaretçi */
    margin: 0 5px;                     /* Sağ-sol boşluk */
    color: white;                      /* Yazı rengi */
    background-color: #dc3545;         /* Kaydet butonu arka plan rengi */
}


/* Tablo Konteyneri */
.table-container {
    flex: 1;                                            /* Kalan alanı kaplar */
    padding: 10px;                                      /* İç kenar boşluğu */
    overflow-y: auto;                                   /* Dikey kaydırma çubuğu ekle */
    overflow-x: auto;                                   /* Yatay kaydırma çubuğu ekle */
    border: 1px solid #ddd;                             /* İnce kenarlık */
    background-color: #fff;                             /* Arka plan rengi */
}

/* Tablo */
.dealer-table {
    width: 100%;                                        /* Tüm genişliği kaplar */
    border-collapse: collapse;                          /* Kenarlıkları birleştirir */
}

/* Tablo Hücreleri */
.dealer-table-cell {
    white-space: nowrap;                           /* Metni tek satırda tut */
    overflow: hidden;                              /* Taşan metni gizle */
    text-overflow: ellipsis;                       /* Uzun metinlerde '...' ekle */
    max-width: 250px;                              /* Firma adı hücresinin genişliği */
    padding: 8px 12px;                             /* İç boşluklar */
    border-bottom: 1px solid #ddd;                 /* Alt çizgi */
    font-size: 14px;
    
}

.dealer-table th, .dealer-table td {
    padding: 10px;                                      /* Hücre iç boşluğu */
    border: 1px solid #ddd;                             /* Hücre kenarlığı */
    text-align: left;                                   /* Sol hizalama */
}

.dealer-table th {
    background-color: #f4f4f4;                          /* Başlık hücre arka plan rengi */
    font-weight: bold;                                  /* Kalın yazı tipi */
}

/* Göster ve Sil Butonları */
.show-details-btn, .delete-btn {
    background-color: #4CAF50;                    /* Buton arka plan rengi */
    color: white;                                 /* Yazı rengi */
    border: none;                                 /* Kenarlık yok */
    border-radius: 4px;                           /* Köşe yuvarlatma */
    padding: 5px 10px;                            /* İç kenar boşluğu */
    cursor: pointer;                              /* İmleç işareti el şeklinde */
    font-size: 14px;                              /* Yazı boyutu */
    width: 70px;                                  /* Sabit buton genişliği */
    text-align: center;                           /* Metni ortalar */
}

/* Göster Butonu Üzerine Gelindiğinde Renk Değişimi */
.show-details-btn:hover {
    background-color: #45a049;                    /* Üzerine gelindiğinde arka plan rengi */
}

/* Sil Butonu Rengi ve Hover Etkisi */
.delete-btn {
    background-color: #f44336;                    /* Kırmızı arka plan rengi */
    margin-left: 5px;                             /* Sol boşluk */
}

.delete-btn:hover {
    background-color: #e53935;                    /* Üzerine gelindiğinde arka plan rengi */
}


/*******************************************************************************************************************/
/* Dealer form header kısmında sürükleme imleci */
#dealerEvaluationFormHeader {
    cursor: grab; /* Taşıma işlemi için el imleci çıkar */
}

#dealerEvaluationFormHeader:active {
    cursor: grabbing; /* Sürükleme sırasında kapanmış el imleci */
}

/********************************************************************************************************************/

/* Form genel yapısı */
#dealerApplicationDetailsForm {
    display: none;                     /* Başlangıçta gizli */
    position: fixed;                   /* Sabit konumlandırma */
    top: 50%;                          /* Ekranın ortasında hizalama */
    left: 50%;
    transform: translate(-50%, -50%);  /* Tam ortalama */
    width: 980px;                      /* Form genişliği */
    background-color: white;           /* Arka plan rengi */
    border-radius: 8px;                /* Köşe yuvarlama */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Gölge */
    padding: 15px;                     /* İç kenar boşlukları */
    flex-direction: column;            /* Dikey hizalama */
    gap: 20px;                         /* Bölümler arası boşluk */
    font-family: Arial, sans-serif;    /* Yazı tipi */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7); /* Koyu gölge efekti */
    z-index: 1000;    
}

/* Başlık kısmı */
#dealerApplicationDetailsHeader{
    background-color: #d8d8d8;         /* Başlık arka plan rengi */
    padding: 10px;                     /* Başlık kenar boşlukları */
    display: flex;                     /* Flex düzen */
    justify-content: center;           /* Elemanları yatayda dağıtma */
    align-items: center;               /* Elemanları dikeyde ortalama */
    font-weight: bold;                 /* Kalın yazı */
    border-radius: 8px 8px 0 0;        /* Üst köşeleri yuvarlama */
    font-size: 16px;                   /* Başlık yazı boyutu */
    cursor: grab;                      /* Sürükleme için el işareti */
    align-items: center;          /* Dikeyde ortala */
    position: relative;           /* Göreli konumlandırma */
    gap: 10px;                    /* Butonlar ve metin arasında boşluk */
}

#dealerApplicationDetailsHeader:active {
    cursor: grabbing; /* Sürükleme sırasında kapanmış el imleci */
}


#currentStageHeader {
    flex: none;                   /* Otomatik genişleme yapmaz */
    text-align: center;           /* Metni ortala */
    font-weight: bold;
    color: green;
}


/* Başlık sürüklenirken el işareti */
#dealerApplicationDetailsHeader:active {
    cursor: grabbing;                  /* Sürükleme sırasında kapanmış el işareti */
}

/* Kapat butonu (Başlık içinde) */
#dealerApplicationDetailsHeader .close-btn {
    background: none;                  /* Arka plan yok */
    border: none;                      /* Kenarsız */
    font-size: 20px;                   /* Yazı boyutu */
    cursor: pointer;                   /* İşaretçi */
    color: #dc3545;                    /* Kapat butonu rengi */
}


/* İçerik düzenleyici */
.dealer-application-details-content-wrapper {
    display: flex;                     /* Flex düzen */
    gap: 20px;                         /* Elemanlar arası boşluk */
    align-items: flex-start;           /* Dikeyde hizalama */
}

/* Form alanları düzeni (3 sütun) */
.dealer-application-details-form-section {
    display: grid;                     /* Grid düzen */
    grid-template-columns: 1fr 1fr 1fr; /* 3 sütun düzen */
    gap: 10px;                         /* Alanlar arası boşluk */
    flex: 3;                           /* İçerikteki esneklik */
}

/* Etiketler */
.dealer-application-details-form-section label {
    font-weight: bold;                 /* Etiketlerde kalın yazı */
}

/* Form alanları (input, textarea, select) */
.dealer-application-details-form-section input,
.dealer-application-details-form-section textarea,
.dealer-application-details-form-section select {
    width: 100%;                       /* %100 genişlik */
    padding: 8px;                      /* İç kenar boşlukları */
    border: 1px solid #ddd;            /* Kenar çizgisi */
    border-radius: 4px;                /* Kenar yuvarlama */
    font-size: 14px;                   /* Yazı boyutu */
}

.dealer-application-details-form-section textarea {
    resize: vertical;                  /* Yalnızca dikeyde yeniden boyutlandırma */
}

/* Aşama Geçmişi bölümü */
.dealer-application-details-stage-history-section {
    flex: 1;                           /* İçerikteki esneklik */
    display: flex;                     /* Flex düzen */
    flex-direction: column;            /* Dikey hizalama */
    align-items: center;               /* Elemanları ortalama */
}

.dealer-application-details-stage-history-section h3 {
    font-weight: bold;                 /* Kalın yazı */
    margin-bottom: 10px;               /* Alt boşluk */
    font-size: 16px;                   /* Başlık yazı boyutu */
}

/* Aşama Geçmişi Tablosu */
.dealer-application-details-stage-history th,
.dealer-application-details-stage-history td {
    border: 1px solid #ddd;            /* Hücre kenar çizgisi */
    padding: 8px;                      /* Hücre kenar boşlukları */
    text-align: center;                  /* Metni ortaya hizalama */
    font-size: 14px;                   /* Yazı boyutu */
    width: 95px;
}

.truncate-text {
    white-space: nowrap;               /* Metni tek satırda tut */
    overflow: hidden;                  /* Taşan metni gizle */
    text-overflow: ellipsis;           /* Uzun metinlerde '...' ekle */
    max-width: 250px;                  /* Genişlik sınırı */
}


/* Alt bölümdeki butonlar */
.dealer-application-details-footer {
    display: flex;                     /* Flex düzen */
    justify-content: center;           /* Butonları ortalama */
    padding: 10px;                     /* Kenar boşlukları */
    background-color: #e0e0e0;         /* Arka plan rengi */
    border-top: 1px solid #ddd;        /* Üst kenar çizgisi */
    border-radius: 0 0 8px 8px;        /* Alt köşeleri yuvarlama */
    margin-top: 20px;                  /* Üstten boşluk */
}

.dealer-application-details-save-btn,
.dealer-application-details-close-btn {
    padding: 8px 16px;                 /* Buton iç kenar boşlukları */
    font-size: 14px;                   /* Buton yazı boyutu */
    border: none;                      /* Kenarsız buton */
    border-radius: 4px;                /* Kenar yuvarlama */
    cursor: pointer;                   /* İşaretçi */
    margin: 0 5px;                     /* Sağ-sol boşluk */
    color: white;                      /* Yazı rengi */
}

.dealer-application-details-save-btn {
    background-color: #28a745;         /* Kaydet butonu arka plan rengi */
}

.dealer-application-details-close-btn {
    background-color: #dc3545;         /* Kapat butonu arka plan rengi */
}

/* Aşama Geçmişin Yanındaki Sil Butonları */
.delete-stage-btn, .delete-btn {         
    background-color: #dc3545;        /* Kırmızı renk, silme işlemleri için */
    color: white;                     /* Beyaz yazı rengi */
    border: none;                     /* Kenarlık yok */
    padding: 5px 10px;                /* İç boşluklar */
    border-radius: 4px;               /* Hafif yuvarlatılmış köşeler */
    cursor: pointer;                  /* Tıklanabilir imleç */
    font-size: 14px;                  /* Yazı boyutu */
}

.delete-stage-btn:hover, .delete-btn:hover {
    background-color: #c82333;        /* Hover efekti için daha koyu kırmızı */
}


/*******************************************************************************************************************/
#orderModal {
    display: none;                                /* Modal başlangıçta gizli */
    position: fixed;                              /* Ekranın her yerinde sabit bir pozisyonda olacak */
    top: 50%;                                     /* Ekranın ortasına gelecek şekilde yukarıdan %50 */
    left: 50%;                                    /* Ekranın ortasına gelecek şekilde soldan %50 */
    transform: translate(-50%, -50%);             /* Modalı tam ortalamak için %50 konumlamalar ile birlikte kullanılır */
    width: 800px;                                 /* Modalın genişliği */
    height: auto;                                 /* İçeriğe göre otomatik yükseklik */
    background: #fff;                             /* Beyaz arka plan */
    overflow: auto;                               /* İçerik taşarsa kaydırma çubuğu eklenir */
    z-index: 1000;                                /* Diğer öğelerin üzerinde yer alır */
}

#orderModal .order-modal {
    width: 80%;                                   /* Ekranın %80'ini kaplayacak */
    max-width: 800px;                             /* Maksimum genişlik 800px */
    display: none;                                /* Başlangıçta gizli */
    position: fixed;                              /* Sabit pozisyon */
    top: 50%;                                     /* Yukarıdan %50 ile ortalanır */
    left: 50%;                                    /* Soldan %50 ile ortalanır */
    transform: translate(-50%, -50%);             /* Modalı tam ortalar */
    background-color: #f1f1f1;                    /* Farklı bir arka plan rengi */
}

#orderModal .order-modal-content {
    padding: 30px;                                /* İçerik çevresindeki boşluk */
    background-color: #f9f9f9;                    /* Arka plan rengi */
    border: 1px solid #ccc;                       /* Çerçeve */
    max-height: 90vh;                             /* Modalın maksimum yüksekliği ekranın %90'ı */
    display: flex;                                /* Flex kutu modeli */
    flex-direction: column;                       /* İçerik dikey olarak hizalanır */
    justify-content: space-between;               /* İçerikler arasında boşluk bırakılır */
    border: 1px solid #000;                       /* Koyu bir çerçeve */
    box-shadow: inset 0 0 0 5mm rgba(0, 0, 0, 0.2); /* Koyu iç gölge */
}

#orderModal .user-close-btn {
    position: absolute;                           /* Sabit bir konumda */
    top: 12px;                                    /* Üstten 12px */
    right: 7mm;                                   /* Sağdan 7mm sola kaydırılmış */
    font-size: 24px;                              /* Buton boyutu */
    cursor: pointer;                              /* İmleç üzerine geldiğinde tıklanabilir olduğunu gösterir */
}

#orderModal .form-container {
    display: flex;                                /* Flex kutu modeli ile hizalanır */
    gap: 10px;                                    /* Sütunlar arasındaki boşluk */
}

#orderModal .left-column, 
#orderModal .right-column {
    flex: 1;                                      /* Sütunlar eşit genişlik alır */
    padding: 10px;                                /* İçerik etrafında boşluk bırakılır */
}

#orderModal label {
    display: block;                               /* Label'lar blok halinde */
    font-size: 14px;                              /* Yazı boyutu */
    margin-bottom: 5px;                           /* Altına 5px boşluk */
    font-weight: bold;                            /* Kalın yazı */
}

#orderModal input, 
#orderModal textarea, 
#orderModal select, 
#orderModal button {
    width: 100%;                                  /* Genişlik %100 */
    padding: 5px;                                 /* İçerik çevresinde boşluk */
    margin-bottom: 15px;                          /* Altına 15px boşluk */
    font-size: 14px;                              /* Yazı boyutu */
    border-radius: 4px;                           /* Kenarları yuvarlak */
    border: 1px solid #ccc;                       /* Çerçeve */
}

#orderModal .listbox-container {
    position: relative;                           /* Bağıl pozisyon */
}

#orderModal .listbox-header {
    display: flex;                                /* Flex hizalama */
    justify-content: space-between;               /* İçerikleri boşlukla ayır */
    background: #f1f1f1;                          /* Arka plan rengi */
    padding: 5px;                                 /* İçerik çevresinde boşluk */
    font-weight: bold;                            /* Kalın yazı */
}

#orderModal select#orderList {
    width: 100%;                                  /* Genişlik %100 */
    height: 150px;                                /* Liste kutusunun yüksekliği 150px */
}

#orderModal .action-buttons button {
    width: 48%;                                   /* Butonlar yan yana %48 genişlikte */
    margin-right: 2%;                             /* Butonlar arasında boşluk */
    margin-bottom: 5px;                           /* Alt boşluğu azalt */
    border-radius: 4px;                           /* Kenarları yuvarlak */
}

#orderModal #sendOrderBtn {
    width: 100%;                                  /* Buton genişliği %100 */
    padding: 10px;                                /* İçerik çevresinde boşluk */
    background-color: #007bff;                    /* Mavi arka plan */
    color: #fff;                                  /* Beyaz yazı */
    border: none;                                 /* Çerçevesiz */
    border-radius: 4px;                           /* Kenarları yuvarlak */
    cursor: pointer;                              /* İmleç üzerine geldiğinde tıklanabilir */
    font-size: 16px;                              /* Yazı boyutu */
}

#orderModal #sendOrderBtn:hover {
    background-color: #0056b3;                    /* Hover sırasında arka plan rengini koyulaştır */
}

#orderModal .form-footer {
    display: flex;                                /* Flex hizalama */
    justify-content: space-between;               /* İçerikler arasında boşluk */
    margin-top: 20px;                             /* Üstte 20px boşluk */
}


/**********************************************/
/* ADMİN PANELDE KULLANICI YÖNETİMİ PENCERESİ */
/**********************************************/

#userManagementModal {                             /* Modal başlangıçta gizli */
    display: none;                                 
    position: fixed;                               /* Ekranda sabit bir konumda duracak */
    top: 50%;                                      /* Modal ekranın ortasına gelecek şekilde yukarıdan %50 */
    left: 50%;                                     /* Modal ekranın ortasına gelecek şekilde soldan %50 */
    transform: translate(-50%, -50%);              /* Modalı tam ortalamak için yukarıdaki %50 konumlama ile birlikte kullanılır */
    width: 80%;                                    /* Modalın genişliği ekranın %50'si olacak */
    max-width: 900px;                              /* Modalın maksimum genişliği 900px olacak */
    height: 90%;                                   /* Modalın yüksekliği artırıldı */
    max-height: 900px;                             /* Modalın maksimum yüksekliği artırıldı */
    background-color: #fff;                        /* Arka plan beyaz */
/*    border: 1px solid #ccc;                        /* Çevresinde hafif bir gri çerçeve */
/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);      /* Etrafında hafif bir gölge oluşturur */
/*    box-shadow: inset 0 0 0 5mm rgba(0, 0, 0, 0.2); /* Koyu iç gölge */
    z-index: 1000;                                 /* Modalın diğer tüm elementlerin üzerinde görünmesini sağlar */
}


#userManagementModal .user-modal-content {         /* Modalın içeriği */
    padding: 10px;                                 /* İçerik çevresindeki boşluk */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
    background-color: #f9f9f9;                     /* Arka plan rengi */
/*    border-radius: 8px;                            /* Köşeleri yuvarlat */
/*    border: 1px solid #ddd;                        /* Çerçeve */
    height: auto;                                  /* İçeriğe göre yükseklik */
    max-height: 90vh;                              /* Modalın maksimum yüksekliği */
    display: flex;                                 /* Flex yapısı ile düzenleme */
    flex-direction: column;                        /* İçeriği dikey hizalama */
    justify-content: space-between;                /* İçerik arasında boşluk */
}


#userManagementModal .modal-body {                   /* Modal gövdesi */
    padding: 30px;                                   /* Kenar boşlukları */
    height: calc(100% - 150px);                      /* Buton ve başlık için alan bırak */
    display: flex;                                   /* Flex yapısını aktif hale getir */
    flex-direction: column;                          /* İçerikleri dikeyde hizala */
    justify-content: space-between;                  /* İçeriği dikeyde yayarak yerleştir */
    padding-top: 10px;                       /* Başlıkla içeriği yaklaştırmak için üst boşluğu küçült */
}

/* Modal başlık alanı */
#userManagementModal .modal-header {
    padding-bottom: 5px;                     /* Alt boşluğu azaltarak başlığı yaklaştır */
}

/* Başlık altındaki boşluk */
#userManagementModal .modal-title {
    margin-bottom: 0;                        /* Başlık altındaki varsayılan boşluğu kaldır */
    font-size: 1.5em;                         /* Gerekirse başlık boyutunu ayarla */
}


#userManagementModal .user-form-container {        /* Form kutusu */
    display: flex;                                 /* Flex yapısı */
    justify-content: space-between;                /* Sütunlar arasında boşluk */
}

#userManagementModal .user-left-column,            /* Sol sütun */
#userManagementModal .user-middle-column,          /* Orta sütun */
#userManagementModal .user-right-column {          /* Sağ sütun */
    flex: 1;                                       /* Her sütun genişliği eşit */
    padding: 10px;                                 /* İçerik çevresinde boşluk */
    max-width: 30%;                                /* Her sütunun maksimum genişliği %30 olacak */
}

#userManagementModal label {                       /* Etiketler */
    display: block;                                /* Etiketler blok olarak görüntülenir */
    font-size: 14px;                               /* Yazı boyutu */
    margin-bottom: 5px;                            /* Alt boşluk */
    font-weight: bold;                             /* Kalın yazı */
}

#userManagementModal .user-address-label {
    display: block;                                /* Etiket blok olarak gösterilir */
    font-size: 14px;                               /* Yazı boyutu */
    margin-bottom: 5px;                            /* Etiket ile input alanı arasındaki boşluk */
    margin-left: 10px;                             /* Soldan başlangıç hizası (E-posta etiketi ile hizalı) */
    font-weight: bold;                             /* Kalın yazı */
}

#userManagementModal input,                        /* Giriş alanları */
#userManagementModal select {                      /* Seçim alanları */
    width: 100%;                                   /* Giriş ve select kutuları tam genişlikte */
    padding: 8px;                                  /* İçerik çevresi boşluk */
    margin-bottom: 6px;                            /* Alt boşluk */
    font-size: 14px;                               /* Yazı boyutu */
    border-radius: 4px;                            /* Köşeleri yuvarla */
    border: 1px solid #ccc;                        /* Hafif gri çerçeve */
    height: 35px;                                  /* Giriş alanlarının yüksekliği azaltıldı */
}

/* Rol alanı konteyneri */
.role-container {
    display: flex;                    /* Etiket ve select alanını yan yana hizalayın */
    flex-direction: column;           /* Gerekirse sütun düzeni */
    align-items: flex-start;          /* Başlangıç hizalaması */
    margin-bottom: 10px;              /* Alt boşluk */
}

/* Rol etiketi */
.role-label {
    font-size: 14px;                  /* Yazı boyutu */
    font-weight: bold;                /* Kalın yazı */
    margin-bottom: 5px;               /* Etiket ve select arasında boşluk */
}

/* Rol seçimi */
.role-select {
    width: 100%;                      /* Tam genişlik */
    padding: 8px;                     /* İçerik çevresi boşluk */
    border-radius: 4px;               /* Köşeleri yuvarlat */
    border: 1px solid #ccc;           /* Çerçeve */
    font-size: 14px;                  /* Yazı boyutu */
    box-sizing: border-box;           /* Çerçeve dahil tam genişlik */
}


#userManagementModal .user-close-btn {
    position: absolute;                             /* Sabit konumlandır */
    top: 12px;                                      /* Üstten boşluk */
    right: 7mm;                                     /* Sağdan 7mm boşluk */
    font-size: 24px;                                /* X işaretinin boyutu */
    cursor: pointer;                                /* İmleç üzerine geldiğinde tıklanabilir olduğunu gösterir */
}



#userManagementModal .user-btn-add {
    background-color: #28a745;                     /* Yeşil arka plan */
    color: #fff;                                   /* Beyaz yazı */
}

#userManagementModal .user-btn-edit {              /* Kullanıcı düzenleme butonu */
    background-color: #ffc107;                     /* Sarı arka plan */
    color: #fff;                                   /* Beyaz yazı */
}

#userManagementModal .user-btn-delete {            /* Kullanıcı silme butonu */
    background-color: #dc3545;                     /* Kırmızı arka plan */
    color: #fff;                                   /* Beyaz yazı */
}

#userManagementModal button {                      /* Genel buton ayarları */
    padding: 10px 15px;                            /* İçerik çevresi boşluk */
    font-size: 14px;                               /* Yazı boyutu */
    border-radius: 5px;                            /* Köşeleri yuvarla */
    border: none;                                  /* Çerçeve yok */
    cursor: pointer;                               /* Tıklanabilir */
    transition: background-color 0.3s ease;        /* Arka plan rengi geçiş animasyonu */
}

/* Butonlar için margin düzenlemesi */
#userManagementModal .action-buttons {
    display: flex;                                 /* Flex yapısı */
    justify-content: space-between;                /* Butonlar arasında eşit boşluk */
    margin-top: 0px;                              /* Üstte boşluk */
    padding: 10px;
    padding-bottom: 5px;                          /* Alt boşluk */
    
}

#userManagementModal .action-buttons button {      /* Butonlar */
    padding: 10px 15px;                            /* İçerik çevresi boşluk */
    font-size: 14px;                               /* Yazı boyutu */
    border-radius: 5px;                            /* Köşeleri yuvarla */
    border: none;                                  /* Çerçeve yok */
    cursor: pointer;                               /* Tıklanabilir */
    transition: background-color 0.3s ease;        /* Arka plan rengi geçiş animasyonu */
    flex: 1;                                       /* Butonlar eşit genişlikte */
    margin-right: 10px;                            /* Butonlar arasında boşluk */
}


/* Son Butonun Margin'ini Kaldır */
#userManagementModal .action-buttons button:last-child {
    margin-right: 0;                               /* Son butonun sağındaki boşluğu kaldır */
}

#userManagementModal .action-buttons .btn-primary {
    background-color: #007bff;                    /* Mavi buton */
    color: #fff;                                  /* Beyaz yazı */
}

#userManagementModal .action-buttons .btn-warning {
    background-color: #ffc107;                    /* Sarı buton */
    color: #fff;                                  /* Beyaz yazı */
}

#userManagementModal .action-buttons .btn-danger {
    background-color: #dc3545;                    /* Kırmızı buton */
    color: #fff;                                  /* Beyaz yazı */
}

#userManagementModal .action-buttons button:hover {
    opacity: 0.9;                                 /* Hover sırasında hafif şeffaflık */
}

#userManagementModal .user-btn-add:hover,          /* Kullanıcı ekleme buton hover */
#userManagementModal .user-btn-edit:hover,         /* Kullanıcı düzenleme buton hover */
#userManagementModal .user-btn-delete:hover {      /* Kullanıcı silme buton hover */
    opacity: 0.9;                                  /* Hafif saydamlık */
}

/* Adres Alanı */
.user-address-container {                          /* Adres kutusu tüm genişliği kapsayacak */
    margin-top: 0px;                               /* Üst boşluğu azalt */
    margin-bottom: 0px;                           /* Alt boşluğu ayarla */
    margin-right: 15px;
}


/* Adres alanını hizalama ve genişlik ayarları */
#userAddress {
    width: calc(100% - 20px);                       /* Sağdan ve soldan 10px boşluk bırakarak tam genişlik */
    margin-left: 10px;                              /* E-posta ile aynı hizada başlat */
    margin-top: 0px;                               /* Üstte biraz boşluk */
    margin-bottom: 0px;                            /* Alt boşluk */
    grid-column: 1 / -1;                            /* Üç sütunun tamamını kapsasın */
}

#userManagementModal .user-listbox {
    width: 100%;                   /* Liste kutusunun tam genişliği */
    height: 130px;                 /* Yüksekliği artırın */
    overflow-x: auto;              /* Yatay kaydırma çubuğu */
    overflow-y: auto;              /* Dikey kaydırma çubuğu */
    white-space: nowrap;           /* Tek satırda geniş içerik */
    margin-top: 0px;              /* Üst boşluk */
}

#userManagementModal .user-list.mt-3 {
    margin-top: 10px;                 /* Üst boşluğu azaltın */
    margin-bottom: 5px;               /* Alt boşluğu azaltın */
    margin-left: 10px;
    padding: 0;                       /* Gereksiz boşlukları kaldırın */
    height: auto;                     /* Kapsayıcının yüksekliğini otomatik ayarlayın */
}

/* Listbox için boyut ve pozisyon düzenlemeleri */
#userList {
    width: 100%;                                   /* Listbox genişliği */
    height: 150px;                                 /* Listbox yüksekliği artırıldı */
    white-space: nowrap;                           /* Tek satırda görüntüleme */
    overflow-x: auto;                              /* Yatay kaydırma çubuğu */
    overflow-y: auto;                              /* Dikey kaydırma çubuğu */
    margin-top: 10px;                              /* Adres alanı ile listbox arasında boşluk */
}


.user-password-container {
    position: relative;
    display: inline-block;
}

.user-input {
    padding-right: 10px; /* İkon ile mesafe */
}

.user-toggle-password {
    position: absolute;
    right: -30px; /* Çerçevenin 2-3 mm dışına yerleştirmek için */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    margin-left: 5px;
}




/**************************************************************************************/
/* Role Yönetimi Modalı Genel Ayarlar */     
.ugm-user-group-management-form {
    display: none; /* Varsayılan olarak gizli */
    height: 700px;
    width: 90%;
    max-width: 800px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: fixed; /* Ekran ortasında konumlanması için */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Ortalamak için */
    cursor: grab;
    z-index: 1000; /* Üstte görüntülenmesi için */
}

/*****************************************************************/        
.ugm-user-group-management-form {
            height: 560px;
            width: 80%;
            max-width: 950px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            position: absolute;
            cursor: grab;
        }

        .ugm-form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #d8d8d8;
            color: #000;
            cursor: grab;
        }
        
        .ugm-form-header:active {
        cursor: grabbing;
    }

        .ugm-form-header h4 {
            margin: 0;
        }

        .ugm-close-btn {
            position: absolute;                             /* Sabit konumlandır */
/*            top: 12px;                                      /* Üstten boşluk */
            right: 5mm;                                     /* Sağdan 7mm boşluk */
            font-size: 24px;                                /* X işaretinin boyutu */
            background-color: #dc3545;         /* Kapat butonu arka plan rengi */
            color: white;
            border-radius: 5px;                            /* Köşeleri yuvarla */
            border: none;                                  /* Çerçeve yok */
            cursor: pointer;                                /* İmleç üzerine geldiğinde tıklanabilir olduğunu gösterir */
        }
        
        .ugm-form-body {
            padding: 20px;
        }

        .ugm-form-row {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .ugm-form-row > div {
            flex: 1;
        }

        .ugm-label {
            font-weight: bold;
            display: block;
            text-align: left;
            margin-bottom: 5px;
        }

        .ugm-input, .ugm-select {
            width: 90%;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        .ugm-permissions-section {
            margin-top: 30px;
        }

        .ugm-tab-menu {
            display: flex;
            background-color: #fff;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .ugm-tab-button {
            flex: 1;
            padding: 10px;
            border: none;
            cursor: pointer;
            font-weight: bold;
            color: #fff;
            background-color: #333333;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .ugm-tab-button.active {
            background-color: #444444;
        }

        .ugm-tab-content {
            margin-top: 20px;
            height: 200px;
            width: 80%;
            max-width: 800px;
        }

        .ugm-tab-pane {
            display: none;
        }

        .ugm-tab-pane.active {
            display: block;
        }

        .ugm-tab-pane .ugm-label {
            display: block;
            margin-bottom: 5px;
            font-weight: normal;
        }

.ugm-form-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #d8d8d8; /* İsteğe bağlı arka plan rengi */
    border-top: 1px solid #ddd; /* İsteğe bağlı üst kenarlık */
    text-align: center; /* İçerikleri ortalamak için */
}

.ugm-form-footer .btn {
    padding: 8px 24px; /* Dikey ve yatay boşlukları ayarla */
    font-size: 16px; /* Yazı boyutunu artır */
    display: inline-flex; /* İkon ve yazıyı hizalamak için */
    align-items: center; /* Dikey hizalamayı ortala */
    justify-content: center; /* İçeriği ortala */
    min-width: 120px; /* Minimum genişlik belirle */
    border-radius: 5px; /* Köşeleri yuvarlat */
}


.ugm-form-footer .btn-primary {
    background-color: #4CAF50; /* Normal durum */
    border-color: #45a049; /* Sınır rengi */
}

.ugm-form-footer .btn-primary:hover {
    background-color: #45a049; /* Hover durumu */
    border-color: #3e8e41; /* Hover sınır rengi */
}

.ugm-form-footer .btn-primary:focus, 
.ugm-form-footer .btn-primary:active {
    background-color: #3e8e41; /* Tıklama durumu */
    border-color: #2e7d32; /* Tıklama sınır rengi */
    box-shadow: none; /* Varsayılan Bootstrap gölgesini kaldırır */
}


.ugm-form-footer .btn-danger {
    background-color: #dc3545; /* Normal durum */
    border-color: #c82333; /* Sınır rengi */
}

.ugm-form-footer .btn-danger:hover {
    background-color: #c82333; /* Hover durumu */
    border-color: #bd2130; /* Hover sınır rengi */
}

.ugm-form-footer .btn-danger:focus, 
.ugm-form-footer .btn-danger:active {
    background-color: #bd2130; /* Tıklama durumu */
    border-color: #a71d2a; /* Tıklama sınır rengi */
    box-shadow: none; /* Varsayılan gölgeyi kaldırır */
}


.ugm-form-footer .btn i {
    margin-right: 8px; /* İkon ile yazı arasına boşluk ekle */
}

.ugm-form-footer .btn-primary {
    background-color: #4CAF50;
    color: #fff;
}

.ugm-form-footer .btn-danger {
    background-color: #dc3545;
    color: #fff;
}
        
        
        
        
        
/*********************************/
/* YENİ LOGİN FORMU CSS AYARLARI */
/*********************************/
/* Login Form Konteyneri */
.login-form-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1000;
}

/* Form Başlık Bölümü */
.login-form-header {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    cursor: grab;
}

.login-close-btn {
    cursor: pointer;
    font-size: 20px;
    background: none;
    border: none;
    color: #fff;
}

/* Form Gövde Bölümü */
.login-form-body {
    padding: 20px;
}

.login-form-row {
    margin-bottom: 15px;
}

.login-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.login-input {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Form Alt Butonlar */
.login-form-footer {
    padding: 10px;
    text-align: center; /* Butonları ortalamak için */
}

.login-btn-primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.login-btn-primary:hover {
    background-color: #0056b3;
}

/* Secondary (Cancel) Buton */
.login-btn-secondary {
    background-color: #dc3545; /* Kırmızı zemin */
    color: white;
    border: none;
    width: 95px;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.login-btn-secondary:hover {
    background-color: #c82333; /* Daha koyu kırmızı */
}

   
        
/****************************************/
/* GENEL.CSS DOSYASINDAN AKTARDIKLARIM  */
/****************************************/

h2 {
    font-size: 1.5em; /* Yazı boyutunu küçültün */
    font-weight: bold; /* Yazı kalınlığını ayarlayın (örneğin normal, bold vb.) */
    color: #333; /* Renk ekleyin */
}

.small-heading {
    font-size: 1.8em; /* Küçük bir boyut seçin */
    font-weight: bold; /* Kalınlık ayarı */
    color: #333; /* Renk ekleyin */
}

.slogan {
	/* font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; */
    font-size: 1.2em; /* Küçük bir boyut seçin */
    font-weight: bold; /* Yazı kalınlığını ayarlayın (örneğin normal, bold vb.) */
    color: #333; /* Renk ekleyin */
}


.cart-icon {
  display: flex;
  justify-content: flex-end; /* Sayıyı sola yerleştir */
/*  align-items: center; */
  font-size: 34px;
}

#cart-count {
  margin-right: 10px; /* Sayı ile ikon arasındaki mesafe */
}

/* Login Formu */
.gen-login-form {                            /* Giriş formu ayarları */
    max-width: 250px;                        /* Maksimum genişlik */
    margin-right: 40px;                      /* Sağ boşluk */
    margin-top: 20px;                        /* Üst boşluk */
    float: right;                            /* Sağa hizalama */
    padding: 10px;                           /* İçerik boşluğu */
    background-color: #f9f9f9;               /* Arka plan rengi */
    border: 1px solid #ddd;                  /* Çerçeve */
    border-radius: 5px;                      /* Köşe yuvarlatma */
}

.gen-login-form-control {                    /* Giriş formundaki input alanları */
    margin-bottom: 10px;                     /* Alt boşluk */
    padding: 8px;                            /* İçerik boşluğu */
    font-size: 14px;                         /* Yazı boyutu */
    border-radius: 4px;                      /* Köşe yuvarlatma */
    border: 1px solid #ccc;                  /* Çerçeve */
    width: 100%;                             /* Tam genişlik */
}

.gen-login-btn {                             /* Giriş butonu */
    font-size: 14px;                         /* Yazı boyutu */
    padding: 8px 10px;                       /* İç boşluk */
    background-color: #007bff;               /* Arka plan rengi */
    color: #fff;                             /* Yazı rengi */
    border: none;                            /* Çerçeve yok */
    border-radius: 4px;                      /* Köşe yuvarlatma */
    width: 100%;                             /* Tam genişlik */
}


/* Daha kompakt form elemanları - sadece gen-login-form içindeki elemanları kapsar */
.gen-login-form input, 
.gen-login-form button {
    width: 100%; /* Form içindeki input ve butonlar formun genişliğine göre ayarlanacak */
    
}


/* Hoşgeldiniz mesajını ve formu sağda hizalamak için kullanılır */
.text-right {
    text-align: right;                           /* Sağ hizalamayı ayarlar */
}

#openLoginFormBtn {
    float: right;                                /* Butonu sağa hizalar */
    margin-top: 5px;
    margin-right: 40px;                          /* Sağ kenarda boşluk bırakır */
    padding: 5px 32px;                           /* İç boşluk: üst-alt 5px, sağ-sol 10px */
    font-size: 14px;                             /* Yazı boyutunu ayarlar */
    width: auto;                                 /* Otomatik genişlik */
    height: auto;                                /* Otomatik yükseklik */
    border-radius: 5px;                          /* Köşeleri yuvarlatır */
    position: relative;                          /* Konumlandırma için relative yapar */
}


/* Yalnızca giriş formundaki input ve button elemanlarını tam genişlikte ayarlar */
.gen-login-form input, 
.gen-login-form button {
    width: 100%;
}

.btn-group open {
    float: right;                                /* Butonu sağa hizalar */
    margin-top: 5px;                             
    margin-right: 40px;                          /* Sağ kenarda boşluk bırakır */
    margin-left : 20px;
    padding: 5px 20px;                           /* İç boşluk: üst-alt 5px, sağ-sol 10px */
    font-size: 14px;                             /* Yazı boyutunu ayarlar */
    width: auto;                                 /* Otomatik genişlik */
    height: auto;                                /* Otomatik yükseklik */
    border-radius: 5px;                          /* Köşeleri yuvarlatır */
    position: relative;                          /* Konumlandırma için relative yapar */
}

/* Dropdown menünün arka plan rengini beyaz yap */
.dropdown-menu {
    background-color: white !important; /* Arka plan rengi */
    color: black !important; /* Varsayılan metin rengi */
    border: 1px solid #ddd; /* Hafif bir sınır */
    padding: 10px;
}

.custom-dropdown-toggle {
    background-color: #146dcc; /* Özel renk */
    color: white;             /* Yazı rengi */
    border: none;             /* Çerçevesiz */
    font-size: 16px;          /* Yazı boyutu */
    padding: 8px 12px;        /* İç boşluk */
    border-radius: 5px;       /* Yuvarlak buton */
}
.custom-dropdown-toggle:hover {
    background-color: #0056b3; /* Hover rengi */
}

/* Dropdown menüdeki linklerin varsayılan rengi */
.dropdown-menu a {
    color: black !important; /* Metin rengi */
}

/* Linklerin üzerine gelince değişen arka plan rengi */
.dropdown-menu a:hover {
    background-color: #f0f0f0; /* Hover arka plan rengi */
    color: black !important; /* Hover metin rengi */
}

/* Divider çizgisinin rengini ayarlama */
.dropdown-menu .divider {
    background-color: #e0e0e0; /* Divider rengi */
    height: 1px; /* Divider yüksekliği */
}


.logout-link .logout-text {
    display: none;
}
.logout-link:hover .username {
    display: none;
}
.logout-link:hover .logout-text {
    display: inline;
}

/*************************************************************************************/
/* Alışveriş Sepeti Konteyneri */
.cart-container {
    position: fixed;
    top: 20px; /* Üstten mesafe */
    right: 20px; /* Sağdan mesafe */
    cursor: pointer;
	z-index: 1000; /* İkonu en üst katmanda göster */
}

/* Alışveriş İkonu */
.cart-icon {
    font-size: 24px; /* Alışveriş arabası ikon boyutu */
    position: relative;
}

/* Ürün Sayısı */
#cart-count {
    position: absolute;
    top: -10px; /* Üstten uzaklık */
    right: -10px; /* Sağdan uzaklık */
    background-color: red; /* Arkaplan rengi */
    color: white; /* Yazı rengi */
    border-radius: 50%; /* Çember şekli */
    width: 20px; /* Çember genişliği */
    height: 20px; /* Çember yüksekliği */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* Yazı boyutu */
    font-weight: bold; /* Yazı kalınlığı */
}


/* Footer genel ayarları */

/* Footer’da genişlik sınırlaması */
footer .container-fluid,
footer .footer-container {
    max-width: 1140px; /* Belirli bir genişlik belirlenebilir */
    margin: 0 auto; /* Ortalamak için */
}

footer {
    background-color: #282828 !important; /* Arka plan rengi (koyu gri) */
    color: #ffffff !important; /* Yazı rengi (beyaz) */
    padding: 20px 0 !important; /* Üst ve alt iç boşluk */
    position: relative !important; /* Diğer ögelerle pozisyon ilişkisi */
    display: flex !important; /* Flexbox yapısını etkinleştirir */
    flex-direction: column !important; /* İçeriği dikeyde hizalar */
    align-items: center !important; /* İçeriği yatayda ortalar */
    margin-top: 40px !important; /* Üstte 40px boşluk bırakır */
}

/* Footer konteyner ayarları */
.footer-container {
    display: flex !important; /* Flexbox yapısını etkinleştirir */
    justify-content: space-between !important; /* İçeriği iki yana yayar */
    width: 100% !important; /* Konteyner genişliği tam olur */
    flex-wrap: wrap !important; /* İçeriğin taşması durumunda sarar */
    margin-bottom: 20px !important; /* Altta 20px boşluk bırakır */
}

/* Footer bölümlerinin genel ayarları */
.footer-section {
    display: flex !important; /* Flexbox yapısını etkinleştirir */
    flex-direction: column !important; /* İçeriği dikeyde hizalar */
    justify-content: center !important; /* İçeriği dikeyde ortalar */
    text-align: center !important; /* Yazıyı ortalar */
    flex: 1 !important; /* Bölümlerin eşit genişlik almasını sağlar */
}

/* Logo ve sloganın bulunduğu merkez içeriği hizalama */
.center-content {
    justify-content: center !important; /* İçeriği yatayda ortalar */
    align-items: center !important; /* İçeriği dikeyde ortalar */
}

/* Footer logosu ayarları */
.footer-logo {
    max-width: 80px !important; /* Maksimum genişlik 80px */
    margin-bottom: 10px !important; /* Altta 10px boşluk bırakır */
}

/* Slogan yazısının stil ayarları */
.footer-slogan {
    font-size: 1.2em !important; /* Yazı boyutunu artırır */
    color: #7FDBFF !important; /* Açık mavi yazı rengi */
    margin-top: 10px !important; /* Üstte 10px boşluk bırakır */
}

/* Footer linklerinin bulunduğu liste ayarları */
.footer-links {
    list-style-type: none !important; /* Liste işaretlerini kaldırır */
    padding: 0 !important; /* İç boşlukları sıfırlar */
    margin: 0 !important; /* Dış boşlukları sıfırlar */
}

/* Liste ögeleri (linkler) arasındaki boşluk ayarı */
.footer-links li {
    margin-bottom: 8px !important; /* Alt boşluk bırakır */
}

/* Footer linklerinin genel ayarları */
.footer-links li a {
    color: #ffffff !important; /* Link rengi (beyaz) */
    text-decoration: none !important; /* Alt çizgi kaldırılır */
    transition: transform 0.3s !important; /* Hover animasyon süresi */
    display: inline-block !important; /* Linki satır içi blok yapar */
    padding: 5px 0 !important; /* Üst-alt boşluk ekler */
}

/* Hover durumunda linklerin stil değişikliği */
.footer-links li a:hover {
    color: #7FDBFF !important; /* Hover durumunda açık mavi */
    transform: translateX(5px) !important; /* Hover durumunda 5px sağa kayar */
}

/* Hakkımızda bölümünün stil ayarları */
.hakkimizda-wrapper {
    position: relative !important; /* Bağıl pozisyon */
    padding-top: 15px !important; /* Üstte 15px boşluk bırakır */
    width: 90% !important; /* Genişliği %90 yapar */
    text-align: center !important; /* Metni ortalar */
}

/* Hakkımızda bölümünde çizgi oluşturmak için pseudo element */
.hakkimizda-wrapper::before {
    content: "" !important; /* Pseudo öge için içerik oluşturur */
    position: absolute !important; /* Mutlak pozisyon */
    top: 0 !important; /* Üste hizalar */
    left: 1% !important; /* Soldan %1 boşluk bırakır */
    right: 1% !important; /* Sağdan %1 boşluk bırakır */
    height: 1px !important; /* Yüksekliği 1px yapar */
    background-color: #7FDBFF !important; /* Çizgi rengi (açık mavi) */
    margin-top: -15px !important; /* Çizgiyi yukarıya taşır */
}

/* Hakkımızda linklerinin düzeni */
.footer-about-links {
    list-style-type: none !important; /* Liste işaretlerini kaldırır */
    padding: 0 !important; /* İç boşlukları sıfırlar */
    display: flex !important; /* Flexbox yapısını etkinleştirir */
    justify-content: center !important; /* Linkleri ortalar */
    flex-wrap: wrap !important; /* İçeriğin taşması durumunda sarar */
    gap: 15px !important; /* Linkler arasında boşluk */
}

/* Hakkımızda linklerinin stil ayarları */
.footer-about-links li a {
    color: #ffffff !important; /* Link rengi (beyaz) */
    text-decoration: none !important; /* Alt çizgi kaldırılır */
    transition: color 0.3s !important; /* Hover animasyon süresi */
}

/* Hover durumunda hakkımızda linklerinin renk değişikliği */
.footer-about-links li a:hover {
    color: #7FDBFF !important; /* Hover durumunda açık mavi */
}

/* Copyright alanının genel stil ayarları */
.copyright {
    background-color: #1e1e1e !important; /* Arka plan rengi (daha koyu gri) */
    color: #777777 !important; /* Yazı rengi (açık gri) */
    text-align: center !important; /* Metni ortalar */
    padding: 10px 0 !important; /* Üst-alt boşluk ekler */
}

/* Copyright içindeki metinlerin ayarları */
.copyright p {
    margin: 0 !important; /* Dış boşlukları sıfırlar */
}