/* Temel ayarlar */
/*html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    
    margin: 0;
    padding: 0;
    overflow-x: hidden;*/ /* Sağ boşluğu ortadan kaldırır */
/*}*/

/* Menü düğmesi stili */
/*.navbar-nav .nav-item .dropdown-menu {
    display: none;*/ /* Başlangıçta görünmez */
    /*position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}*/

/* Ana menü üzerine gelindiğinde açılır menü stil */
/*.navbar-nav .nav-item:hover .dropdown-menu {
    display: block;*/ /* Üzerine gelindiğinde görünür */
/*}*/

/* Alt menü açılır menü için stil */
/*.navbar-nav .nav-item .dropdown-menu .dropdown-menu {
    display: none;*/ /* Başlangıçta görünmez */
    /*position: absolute;
    left: 100%;*/ /* Sağda açılır */
    /*top: 0;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;*/ /* Üst menüden daha üstte görünür */
/*}*/

/* Müşteri Temsilci Karneleri üzerine gelindiğinde alt menüyü gösterir */
/*.navbar-nav .nav-item .dropdown-menu .nav-item:hover .dropdown-menu {
    display: block;*/ /* Üzerine gelindiğinde görünür */
/*}*/

/* Menü öğeleri */
/*.dropdown-menu .dropdown-item {
    color: black;
    padding: 8px 12px;
    margin-bottom:5px;
    text-decoration: none;
    display: block;
}*/

    /* Menü öğeleri üzerine gelindiğinde stil */
    /*.dropdown-menu .dropdown-item:hover {
        background-color: #f1f1f1;
    }

.special-item {
    display: block;*/ /* Başlangıçta görünmez */
    /*position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
    z-index: 0;*/ /* Üst menüden daha üstte görünür */
    /*text-align:center;
}*/







/*MÜŞTERİ TEMSİLCİ KARNE*/
/*body {
    background-color: white;*/ /* Sayfanın genel arka plan rengi */
    /*margin: 0;*/ /* Varsayılan margini sıfırlar */
    /*font-family: Arial, sans-serif;*/ /* Varsayılan yazı tipi */
/*}*/

/* Ana Konteyner */
/*.main-container {
    padding: 50px;*/ /* Ana konteyner içi boşluk */
    /*background-color: white;*/ /* Ana konteynerin arka plan rengi */
    /*max-width: 100%;*/ /* Genişlik limitini %100 yaparak taşmayı engeller */
    /*box-sizing: border-box;*/ /* Padding ve border genişliği içerir */
/*}*/

/* Veri Konteyneri */
/*.data_container {
    width: 90%;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;*/ /* Padding ve border genişliği içerir */
/*}

h1 {
    text-align: center;
    color: #333;
}

.temsilci-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    .temsilci-table th,
    .temsilci-table td {
        border: 1px solid #ddd;
        padding: 6px;*/ /* Paddingi azaltır */
        /*font-size: 12px;*/ /* Orta yazı boyutu */
        /*text-align: right;*/ /* Sayıları sağa hizalar */
    /*}

    .temsilci-table th {
        background-color: grey;
        color: #ffffff;
    }

    .temsilci-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .temsilci-table tr:hover {
        background-color: #f1f1f1;
    }

@media (max-width: 768px) {*/
    /* Ana Konteynerin Paddingini Küçültür */
    /*.main-container {
        padding: 20px;*/ /* Kenar boşluklarını azaltır */
    /*}*/

    /* Veri Konteynerinin Genişliğini Ayarlar */
    /*.data_container {
        width: 100%;*/ /* Tam genişlik */
        /*padding: 10px;*/ /* Paddingi azaltır */
    /*}*/

    /* Tablo Yazı Boyutunu Küçültür ve Tabloyu Kaydırılabilir Yapar */
    /*.temsilci-table {
        font-size: 12px;*/ /* Orta yazı boyutu */
        /*overflow-x: auto;*/ /* Yatay kaydırma ekler */
        /*display: block;*/ /* Tabloyu blok yapar, kaydırmayı etkinleştirir */
    /*}

        .temsilci-table th,
        .temsilci-table td {
            padding: 4px;*/ /* Paddingi azaltır */
        /*}
}*/





/*SİPARİŞ RAPORLARI*/
/* Genel Sayfa Ayarları */
/*body {
    background-color: #f4f4f4;*/ /* Sayfanın genel arka plan rengi */
    /*margin: 0;*/ /* Varsayılan margini sıfırlar */
    /*font-family: Arial, sans-serif;*/ /* Varsayılan yazı tipi */
/*}*/

/* Ana Konteyner */
/*.main-container {
    padding: 20px;*/ /* Ana konteyner içi boşluk */
    /*background-color: white;*/ /* Ana konteynerin arka plan rengi */
    /*max-width: 100%;*/ /* Genişliği tam ekran genişliğine ayarlar */
    /*margin: 0;*/ /* Margin yok */
    /*box-sizing: border-box;*/ /* Padding ve border genişliği içerir */
/*}*/

/* Temsilci Seçim Formu */
/*#temsilci-selection {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

    #temsilci-selection h2 {
        margin: 0 0 15px 0;
        color: #333;
    }*/

/* Eski Seçim Kutusu ve Buton Stili */
/*#SelectedTemsilciKodu {
    width: 200px;*/ /* Seçim kutusunun genişliği */
    /*padding: 8px;*/ /* Paddingi azalt */
    /*border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;*/ /* Yazı boyutunu küçült */
    /*box-sizing: border-box;*/ /* Padding ve border genişliği içerir */
/*}

button {
    padding: 8px 16px;*/ /* Butonun iç boşluklarını azalt */
    /*border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;*/ /* Yazı boyutunu küçült */
    /*background-color: #007bff;
    color: white;
    cursor: pointer;
    margin-top: 10px;*/ /* Buton ile diğer öğeler arasındaki boşluk */
    /*box-sizing: border-box;*/ /* Padding ve border genişliği içerir */
/*}

    button:hover {
        background-color: gray;
    }*/

/* Tablo Konteyneri */
/*.table-wrapper {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    max-width: 90%;*/ /* veya istediğiniz başka bir değer */
    /*margin: auto;*/ /* Merkeze yerleştirmek için */
/*}*/

/* Tablo Stili */
/*.data-table {
    width: auto;*/ /* Tablo genişliği içeriğe göre otomatik ayarlanır */
    /*max-width: 100%;*/ /* Tablo genişliği kapsayıcının maksimum genişliğini geçmez */
    /*border-collapse: collapse;
    border-spacing: 0;
    background-color: #ffffff;
    
}*/

    /* Başlık Stili */
    /*.data-table thead th {
        position: sticky;
        top: 0;*/ /* Ekranın üst kısmında sabit kalmasını sağlar */
        /*background-color: grey;*/ /* Başlık arka plan rengi */
        /*color: #ffffff;*/ /* Başlık yazı rengi */
        /*z-index: 10;*/ /* Başlıkların diğer içeriklerin üzerinde görünmesini sağlar */
        /*padding: 8px;*/ /* Paddingi azalt */
    /*}*/

    /* Hücre Stili */
    /*.data-table th,
    .data-table td {
        border: 1px solid #ddd;
        padding: 8px;*/ /* Paddingi azalt */
        /*font-size: 12px;*/ /* Yazı boyutunu küçült */
        /*text-align: right;
    }*/

    /* Satır Stili */
    /*.data-table tr:nth-child(even) {
        background-color: #f9f9f9;*/ /* Her ikinci satırın arka plan rengi */
    /*}

    .data-table tr:hover {
        background-color: #e9ecef;*/ /* Satır üzerine gelindiğinde arka plan rengi */
    /*}*/

/* Form ve Seçim Kutusu */
/*select, button {
    padding: 8px;*/ /* Paddingi azalt */
    /*border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;*/ /* Yazı boyutunu küçült */
    /*margin-right: 10px;*/ /* Sağ boşluk */
/*}

button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

    button:hover {
        background-color: gray;
    }*/

/* Mobil Uyumluluk */
/*@media (max-width: 768px) {*/
    /* Ana Konteynerin Paddingini Küçültür */
    /*.main-container {
        padding: 10px;*/ /* Kenar boşluklarını azaltır */
    /*}*/

    /* Tablo Yazı Boyutunu Küçültür ve Tabloyu Kaydırılabilir Yapar */
    /*.table-wrapper {
        font-size: 12px;*/ /* Daha küçük yazı boyutu */
    /*}

    .data-table th,
    .data-table td {
        padding: 6px;*/ /* Paddingi azalt */
    /*}*/

    /* Form ve Seçim Kutuları */
    /*select, button {
        font-size: 12px;
        padding: 6px;*/ /* Paddingi azalt */
    /*}
}*/









/* ŞUBE VE MÜŞTERİ DETAYLARI */


/* Tablo Konteyneri */
/*.sube-musteri-data-container {
    width: 100%;
    overflow-x: auto;*/ /* Yatay kaydırmayı açar */
    /*overflow-y: auto;*/ /* Dikey kaydırmayı açar */
    /*max-height: 600px;*/ /* Bu yüksekliği ihtiyaca göre ayarlayın */
    /*box-sizing: border-box;*/ /* Padding ve border genişliği içerir */
/*}*/

/* Tablo Stili */
/*.sube-musteri-table {
    width: 100%;*/ /* Tablo genişliği kapsayıcının maksimum genişliğini geçmez */
    /*border-collapse: collapse;
    border-spacing: 0;
    background-color: #ffffff;
}*/

    /* Başlık Stili */
    /*.sube-musteri-table thead th {
        position: sticky;
        top: 0;*/ /* Ekranın üst kısmında sabit kalmasını sağlar */
        /*background-color: grey;*/ /* Başlık arka plan rengi */
        /*color: #ffffff;*/ /* Başlık yazı rengi */
        /*z-index: 10;*/ /* Başlıkların diğer içeriklerin üzerinde görünmesini sağlar */
        /*padding: 8px;*/ /* Paddingi azalt */
    /*}*/

    /* Hücre Stili */
    /*.sube-musteri-table th,
    .sube-musteri-table td {
        border: 1px solid #ddd;
        padding: 8px;*/ /* Paddingi azalt */
        /*font-size: 12px;*/ /* Yazı boyutunu küçült */
        /*text-align: right;*/ /* Sayıların sağa hizalanmasını sağlar */
    /*}*/

    /* Satır Stili */
    /*.sube-musteri-table tr:nth-child(even) {
        background-color: #f9f9f9;*/ /* Her ikinci satırın arka plan rengi */
    /*}

    .sube-musteri-table tr:hover {
        background-color: #e9ecef;*/ /* Satır üzerine gelindiğinde arka plan rengi */
    /*}*/


/* Satış Merkezleri Konteyneri */
/*.satis-merkezleri-container {
    display: flex;
    flex-wrap: wrap;*/ /* Satış merkezlerinin birden fazla satıra yayılmasını sağlar */
    /*gap: 20px;*/ /* Satış merkezleri arasındaki boşluk */
    /*margin-bottom: 20px;*/ /* Formun diğer öğelerinden boşluk */
/*}*/

/* Satış Merkezi Öğeleri */
/*.satis-merkezi-item {
    display: flex;
    align-items: center;
}*/

    /* Satış Merkezi Etiketi */
    /*.satis-merkezi-item label {
        margin-left: 5px;*/ /* Checkbox ve etiketi arasındaki boşluk */
    /*}*/

/* Responsive Tasarım */
/*@media (max-width: 768px) {*/
    /* Ana Konteynerin Paddingini Küçültür */
    /*.sube-musteri-container {
        padding: 20px;*/ /* Kenar boşluklarını azaltır */
    /*}*/

    /* Veri Konteynerinin Genişliğini Ayarlar */
    /*.sube-musteri-data-container {
        width: 100%;*/ /* Tam genişlik */
        /*padding: 10px;*/ /* Paddingi azaltır */
    /*}*/

    /* Tablo Yazı Boyutunu Küçültür ve Tabloyu Kaydırılabilir Yapar */
    /*.sube-musteri-table {
        font-size: 12px;*/ /* Daha küçük yazı boyutu */
        /*display: block;*/ /* Tabloyu blok yapar, kaydırmayı etkinleştirir */
        /*overflow-x: auto;*/ /* Yatay kaydırma ekler */
        /*max-width: 100%;*/ /* Maksimum genişlik %100 */
    /*}

        .sube-musteri-table th,
        .sube-musteri-table td {
            padding: 8px;*/ /* Paddingi azaltır */
            /*display: table-cell;*/ /* Hücrelerin görünümünü korur */
        /*}

        .sube-musteri-table thead th {
            position: sticky;*/ /* Başlığı sabit tutmak için */
            /*top: 0;*/ /* Ekranın üst kısmında sabit kalmasını sağlar */
        /*}
}*/




/* Genel Toplamlar Tablosu */
/*.genel-toplam-container {
    margin-top: 20px;
}

.genel-toplam-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    .genel-toplam-table th,
    .genel-toplam-table td {
        border: 1px solid #ddd;
        padding: 10px;
        font-size: 14px;*/ /* Normal yazı boyutu */
        /*text-align: right;
    }

    .genel-toplam-table th {
        background-color: grey;
        color: #ffffff;
        z-index: 2;
        position: sticky;*/ /* Başlığı sabitler */
        /*top: 0;
    }

    .genel-toplam-table tr:nth-child(even) {
        background-color: #f9f9f9;*/ /* Çift satır arka plan rengi */
    /*}

    .genel-toplam-table tr:hover {
        background-color: #e9ecef;*/ /* Hover efekti */
    /*}*/

/* Genel Toplamlar Tablosu - Responsive */
/*@media (max-width: 768px) {
    .genel-toplam-table {
        font-size: 12px;*/ /* Küçük ekranlar için yazı boyutu */
        /*overflow-x: auto;*/ /* Yatay kaydırma ekler */
        /*display: block;*/ /* Kaydırmayı etkinleştirir */
    /*}

        .genel-toplam-table th,
        .genel-toplam-table td {
            padding: 8px;*/ /* Paddingi azaltır */
        /*}
}*/









/* CONTACT css */
/*.background-image {
    position: absolute;
    top: 50px;*/ /* Konteynırın üstten uzaklığı */
    /*left: 20px;*/ /* Konteynırın soldan uzaklığı */
    /*width: 200px;*/ /* Konteynırın genişliği */
    /*height: 200px;*/ /* Konteynırın yüksekliği */
    /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
    /*background-color: white;*/ /* Arka plan rengini beyaz yapar */
/*}

    .background-image img {
        width: 100%;*/ /* Fotoğrafın genişliği konteynırın genişliğine uyum sağlar */
        /*height: 100%;*/ /* Fotoğrafın yüksekliği konteynırın yüksekliğine uyum sağlar */
        /*object-fit: cover;*/ /* Fotoğrafın orantısını korur */
        /*border-radius: 10px;*/ /* Köşeleri yuvarlatır */
    /*}

.extra-photo {
    position: absolute;
    bottom: 10px;*/ /* Alt kenara uzaklık */
    /*right: 20px;*/ /* Sağ kenara uzaklık */
    /*width: 300px;*/ /* Fotoğrafın genişliği */
    /*height: auto;*/ /* Yükseklik orantıyı korur */
    /*z-index: 0;*/ /* Arka planın altına yerleştirir */
/*}

.contact-container {
    position: relative;
    padding: 20px;
    background-color: #ffffff;*/ /* Arka planı beyaz yapar */
    /*border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    width: 80%;*/ /* Genişlik ayarı */
    /*max-width: 1200px;*/ /* Maksimum genişlik */
    /*box-sizing: border-box;*/ /* Padding ve border genişliği içerir */
/*}

.contact-content {
    display: flex;
    flex-direction: row;*/ /* Yan yana hizala */
    /*gap: 20px;*/ /* Alanlar arasındaki boşluk */
/*}

.contact-info,
.contact-form {
    flex: 1;*/ /* Her iki bölümün de eşit genişlikte olmasını sağlar */
    /*background-color: #f8f8f8;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

    .contact-info h2,
    .contact-form h2 {
        margin-top: 0;
    }

    .contact-form label {
        display: block;
        margin-top: 10px;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .contact-form button {
        margin-top: 10px;
        padding: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

        .contact-form button:hover {
            background-color: #0056b3;
        }

@media (max-width: 768px) {
    .background-image {
        position: absolute;*/ /* Pozisyonu kesin yapar */
        /*top: 50px;*/ /* Üstten uzaklığı azaltır */
        /*left: 10px;*/ /* Soldan uzaklığı azaltır */
        /*width: 100px;*/ /* Küçültülmüş genişlik */
        /*height: 100px;*/ /* Küçültülmüş yükseklik */
        /*background-color: transparent;*/ /* Arka plan rengini kaldırır */
    /*}

    .extra-photo {
        position: absolute;*/ /* Pozisyonu kesin yapar */
        /*bottom: 10px;*/ /* Alt kenardan uzaklığı azaltır */
        /*right: 10px;*/ /* Sağ kenardan uzaklığı azaltır */
        /*width: 200px;*/ /* Küçültülmüş genişlik */
        /*height: auto;*/ /* Yükseklik otomatik */
    /*}

    .contact-content {
        flex-direction: column;*/ /* Dikey hizala */
    /*}

    .contact-info,
    .contact-form {
        width: 100%;*/ /* Tam genişlik */
        /*margin-bottom: 20px;*/ /* Alt boşluk */
    /*}

        .contact-form textarea {
            min-height: 150px;*/ /* Minimum yükseklik ayarı */
        /*}
}*/




/* ANASAYFA */
/* Genel Resim Stili */
/*img {
    background-color: transparent;*/ /* Arka plan rengini kaldırır */
/*}*/


/* draw3-container Stili */
/*.draw3-container {
    position: absolute;
    top: 600px;*/ /* Konteynırın üstten uzaklığı */
    /*left: 170px;*/ /* Konteynırın soldan uzaklığı */
    /*width: 100vw;*/ /* Ekran genişliği kadar genişlik */
    /*height: 100vh;*/ /* Ekran yüksekliği kadar yükseklik */
    /*overflow: hidden;*/ /* Taşmaları gizler */
    /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
/*}*/

    /* draw3-container içindeki img */
    /*.draw3-container img {
        position: absolute;*/ /* Pozisyonu kesin yapar */
        /*top: 50px;*/ /* Üstten uzaklığı */
        /*left: 10px;*/ /* Soldan uzaklığı */
        /*width: 400px;*/ /* Genel genişlik */
        /*height: 400px;*/ /* Genel yükseklik */
        /*background-color: transparent;*/ /* Arka plan rengini kaldırır */
    /*}*/

/* draw-container Stili */
/*.draw-container {
    position: absolute;
    top: 1400px;*/ /* Konteynırın üstten uzaklığı */
    /*left: 40px;*/ /* Konteynırın soldan uzaklığı */
    /*width: 30%;*/ /* Ekran genişliği kadar genişlik */
    /*height: 30%;*/ /* Ekran yüksekliği kadar yükseklik */
    /*overflow: hidden;*/ /* Taşmaları gizler */
    /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
/*}*/

    /* draw-container içindeki img */
    /*.draw-container img {
        max-width: 70%;*/ /* Fotoğrafın büyüyüp küçülmesi buradan */
        /*max-height: 70%;
        object-fit: cover;*/ /* Fotoğrafın orantısını korur ve ekranda en büyük boyutta görünmesini sağlar */
    /*}*/

/* blue-container Stili */
/*.blue-container {
    position: absolute;
    top: 1390px;*/ /* Konteynırın üstten uzaklığı */
    /*left: 750px;*/ /* Konteynırın soldan uzaklığı */
    /*width: 50%;*/ /* Ekran genişliği kadar genişlik */
    /*height: 50%;*/ /* Ekran yüksekliği kadar yükseklik */
    /*overflow: hidden;*/ /* Taşmaları gizler */
    /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
/*}*/

    /* blue-container içindeki img */
    /*.blue-container img {
        max-width: 60%;*/ /* Fotoğrafın büyüyüp küçülmesi buradan */
        /*max-height: 60%;
        object-fit: cover;*/ /* Fotoğrafın orantısını korur ve ekranda en büyük boyutta görünmesini sağlar */
    /*}*/

/* photo-container Stili */
/*.photo-container {
    position: absolute;
    top: 0px;*/ /* Konteynırın üstten uzaklığı */
    /*left: 0px;*/ /* Konteynırın soldan uzaklığı */
    /*width: 100vw;*/ /* Konteynırın genişliği */
    /*height: 70vh;*/ /* Konteynırın yüksekliği */
    /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
/*}*/

    /* photo-container içindeki img */
    /*.photo-container img {
        width: 100%;*/ /* Fotoğrafın genişliği konteynırın genişliğine uyum sağlar */
        /*height: 100%;*/ /* Fotoğrafın yüksekliği konteynırın yüksekliğine uyum sağlar */
        /*object-fit: cover;*/ /* Fotoğrafın orantısını korur */
    /*}*/

    /* photo-container içindeki caption */
    /*.photo-container .caption {
        position: absolute;
        top: 400px;*/ /* Konumlandırma */
        /*left: 380px;*/ /* Konumlandırma */
        /*color: black;
        padding: 50px;
        font-family: "Roboto Slab", serif;
        text-align: center;*/ /* Yazıyı ortalama */
        /*font-size: 30px;
    }*/

/* explain-container Stili */
/*.explain-container {
    position: absolute;
    top: 700px;*/ /* Konteynırın üstten uzaklığı */
    /*left: 400px;*/ /* Konteynırın soldan uzaklığı */
    /*width: 50vw;*/ /* Ekran genişliği kadar genişlik */
    /*height: 60vh;*/ /* Ekran yüksekliği kadar yükseklik */
    /*font-size: 21px;
    text-align: center;
}*/

/* second-container Stili */
/*.second-container {
    position: absolute;
    top: 1000px;*/ /* Konteynırın üstten uzaklığı */
    /*left: 100px;*/ /* Konteynırın soldan uzaklığı */
    /*width: 100vw;*/ /* Ekran genişliği kadar genişlik */
    /*height: 100vh;*/ /* Ekran yüksekliği kadar yükseklik */
    /*overflow: hidden;*/ /* Taşmaları gizler */
    /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
/*}*/

    /* second-container içindeki img */
    /*.second-container img {
        max-width: 80%;*/ /* Fotoğrafın büyüyüp küçülmesi buradan */
        /*max-height: 80%;
        object-fit: contain;*/ /* Fotoğrafın orantısını korur ve ekranda en büyük boyutta görünmesini sağlar */
    /*}*/

    /* second-container içindeki caption1 */
    /*.second-container .caption1 {
        position: absolute;
        top: 40px;*/ /* Konumlandırma */
        /*left: 40px;*/ /* Konumlandırma */
        /*color: black;
        padding: 15px;
        font-family: "Quicksand", sans-serif;
        text-align: center;*/ /* Yazıyı ortalama */
        /*font-size: 15px;
    }*/

    /* second-container içindeki caption2 */
    /*.second-container .caption2 {
        position: absolute;
        top: 30px;*/ /* Konumlandırma */
        /*left: 490px;*/ /* Konumlandırma */
        /*color: black;
        padding: 15px;
        font-family: "Quicksand", sans-serif;
        text-align: center;*/ /* Yazıyı ortalama */
        /*font-size: 15px;
    }*/

    /* second-container içindeki caption3 */
    /*.second-container .caption3 {
        position: absolute;
        top: 35px;*/ /* Konumlandırma */
        /*left: 930px;*/ /* Konumlandırma */
        /*color: black;
        padding: 15px;
        font-family: "Quicksand", sans-serif;
        text-align: center;*/ /* Yazıyı ortalama */
        /*font-size: 15px;
    }*/

/* explain2-container Stili */
/*.explain2-container {
    position: absolute;
    top: 1390px;*/ /* Konteynırın üstten uzaklığı */
    /*left: 160px;*/ /* Konteynırın soldan uzaklığı */
    /*width: 80vw;*/ /* Ekran genişliği kadar genişlik */
    /*height: 60vh;*/ /* Ekran yüksekliği kadar yükseklik */
    /*font-size: 18px;
    text-align: center;
    z-index: 2;*/ /* Yazının fotoğrafın üstünde görünmesini sağlar */
/*}*/

/* ANASAYFA MOBİL */
/*@media (max-width: 768px) {*/
    /* photo-container Stili */
    /*.photo-container {
        position: absolute;
        top: 0px;*/ /* Üstten uzaklığı azaltır */
        /*left: 0px;*/ /* Soldan uzaklığı azaltır */
        /*width: 100%;*/ /* Ekran genişliğinin %100'ü kadar genişlik */
        /*height: 100%;*/ /* Yükseklik otomatik olarak ayarlanır */
        /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
    /*}*/

        /* photo-container içindeki img */
        /*.photo-container img {
            width: 100%;*/ /* Fotoğrafın genişliği konteynırın genişliğine uyum sağlar */
            /*height: 70%;*/ /* Yükseklik otomatik olarak ayarlanır */
            /*object-fit: cover;*/ /* Fotoğrafın orantısını korur */
        /*}*/

        /* photo-container içindeki caption */
        /*.photo-container .caption {
            position: absolute;
            bottom: 10px;*/ /* Alt taraftan uzaklığı */
            /*left: 50%;*/ /* Soldan ortalama */
            /*transform: translateX(-50%);*/ /* Tam ortalama */
            /*color: black;
            padding: 20px;*/ /* Padding miktarını azaltır */
            /*font-family: "Roboto Slab", serif;
            text-align: center;*/ /* Yazıyı ortalama */
            /*font-size: 16px;*/ /* Yazı boyutunu küçültür */
        /*}*/

    /* explain-container Stili */
    /*.explain-container {
        position: absolute;
        top: 520px;*/ /* Üstten uzaklığı azaltır */
        /*left: 10px;*/ /* Soldan uzaklığı azaltır */
        /*width: 90vw;*/ /* Ekran genişliğinin %90'ı kadar genişlik */
        /*height: auto;*/ /* Yükseklik otomatik olarak ayarlanır */
        /*font-size: 16px;*/ /* Yazı boyutunu küçültür */
        /*text-align: center;
    }*/

    /* second-container Stili */
    /*.second-container {
        position: absolute;
        top: 760px;*/ /* Üstten uzaklığı azaltır */
        /*left: 10px;*/ /* Soldan uzaklığı azaltır */
        /*width: 100vw;*/ /* Ekran genişliği kadar genişlik */
        /*height: auto;*/ /* Yükseklik otomatik olarak ayarlanır */
        /*overflow: visible;*/ /* Taşmalar görünür olabilir */
        /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
    /*}*/

        /* second-container içindeki img */
        /*.second-container img {
            display: none;*/ /* Fotoğrafı gizler */
        /*}*/

        /* second-container içindeki caption1, caption2, caption3 */
        /*.second-container .caption1,
        .second-container .caption2,
        .second-container .caption3 {
            position: static;*/ /* Konumlandırmayı kaldırır */
            /*display: block;*/ /* Her bir caption'ı blok olarak gösterir */
            /*width: 100%;*/ /* Her bir caption'ın genişliği %100 olur */
            /*text-align: center;*/ /* Yazıyı ortalar */
            /*font-size: 14px;*/ /* Yazı boyutunu küçültür */
            /*margin-bottom: 10px;*/ /* Caption'lar arasına boşluk ekler */
        /*}*/

    /* explain2-container Stili */
    /*.explain2-container {
        position: absolute;
        top: 1300px;*/ /* Konteynırın üstten uzaklığı */
        /*left: 10px;*/ /* Konteynırın soldan uzaklığı */
        /*width: 90vw;*/ /* Ekran genişliği kadar genişlik */
        /*height: auto;*/ /* Ekran yüksekliği kadar yükseklik */
        /*font-size: 16px;
        text-align: center;
    }*/

    /* draw-container Stili */
    /*.draw-container {
        position: absolute;
        top: 70px;*/ /* Konteynırın üstten uzaklığı */
        /*left: 10px;*/ /* Konteynırın soldan uzaklığı */
        /*width: 30vw;*/ /* Ekran genişliği kadar genişlik */
        /*height: 30vh;*/ /* Ekran yüksekliği kadar yükseklik */
        /*overflow: hidden;*/ /* Taşmaları gizler */
        /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
    /*}*/

        /* draw-container içindeki img */
        /*.draw-container img {
            display: none;*/ /* Fotoğrafı gizler */
        /*}*/

    /* blue-container Stili */
    /*.blue-container {
        position: absolute;
        top: 1200px;*/ /* Konteynırın üstten uzaklığı */
        /*left: 50px;*/ /* Konteynırın soldan uzaklığı */
        /*width: 50vw;*/ /* Ekran genişliği kadar genişlik */
        /*height: 50vh;*/ /* Ekran yüksekliği kadar yükseklik */
        /*overflow: hidden;*/ /* Taşmaları gizler */
        /*z-index: 0;*/ /* İçeriğin altında görünmesi için */
    /*}*/

        /* blue-container içindeki img */
        /*.blue-container img {
            width: 100%;*/ /* Fotoğrafın genişliği konteynırın genişliğine uyum sağlar */
            /*height: 100%;*/ /* Yükseklik otomatik olarak ayarlanır */
            /*object-fit: cover;*/ /* Fotoğrafın orantısını korur */
        /*}
}*/




/* MÜŞTERİ BAZINDA SİPARİŞ */
/* Responsive Styles for Sube Musteri Container */
/*@media (max-width: 768px) {*/
    /* Ana Konteynerin Paddingini Küçültür */
    /*.sube-musteri-container {
        padding: 20px;*/ /* Kenar boşluklarını azaltır */
    /*}*/

    /* Veri Konteynerinin Genişliğini Ayarlar */
    /*.sube-musteri-data-container {
        width: 100%;*/ /* Tam genişlik */
        /*padding: 10px;*/ /* Paddingi azaltır */
    /*}*/

    /* Tablo Yazı Boyutunu Küçültür ve Tabloyu Kaydırılabilir Yapar */
    /*.sube-musteri-table {
        font-size: 10px;*/ /* Daha küçük yazı boyutu */
        /*overflow-x: auto;*/ /* Yatay kaydırma ekler */
        /*display: block;*/ /* Tabloyu blok yapar, kaydırmayı etkinleştirir */
    /*}

        .sube-musteri-table th,
        .sube-musteri-table td {
            padding: 6px;*/ /* Paddingi azaltır */
        /*}
}*/

/* Genel Toplamlar Tablosu */
/*.genel-toplam-container {
    margin-top: 20px;
}

.genel-toplam-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    .genel-toplam-table th,
    .genel-toplam-table td {
        border: 1px solid #ddd;
        padding: 10px;
        font-size: 12px;*/ /* Normal yazı boyutu, burayı da güncelleyebilirsiniz */
        /*text-align: right;
    }

    .genel-toplam-table th {
        background-color: grey;
        color: #ffffff;
        z-index: 2;
        position: sticky;*/ /* Başlığı sabitler */
        /*top: 0;
    }

    .genel-toplam-table tr:nth-child(even) {
        background-color: #f9f9f9;*/ /* Çift satır arka plan rengi */
    /*}

    .genel-toplam-table tr:hover {
        background-color: #e9ecef;*/ /* Hover efekti */
    /*}*/

/* Genel Toplamlar Tablosu - Responsive */
/*@media (max-width: 768px) {
    .genel-toplam-table {
        font-size: 10px;*/ /* Küçük ekranlar için yazı boyutu */
        /*overflow-x: auto;*/ /* Yatay kaydırma ekler */
        /*display: block;*/ /* Kaydırmayı etkinleştirir */
    /*}

        .genel-toplam-table th,
        .genel-toplam-table td {
            padding: 8px;*/ /* Paddingi azaltır */
        /*}
}*/


/* BUTON -LİSTELE -EXCEL VE PDF */
/*.button-container {
    display: flex;
    gap: 10px;*/ /* Butonlar arasındaki boşluk */
    /*margin: 20px 0;*/ /* Üst ve alt için 20px boşluk */
/*}

.styled-button {
    background-color: #e0e0e0;*/ /* Açık gri arka plan rengi */
    /*color: #333;*/ /* Koyu gri yazı rengi */
    /*border: none;*/ /* Kenarlık yok */
    /*border-radius: 5px;*/ /* Kenarların yuvarlatılması */
    /*padding: 10px 15px;*/ /* İçerik için boşluk */
    /*font-size: 14px;*/ /* Yazı boyutu */
    /*width: 120px;*/ /* Buton genişliği */
    /*height: 40px;*/ /* Buton yüksekliği */
    /*cursor: pointer;*/ /* Fareyle üzerine gelindiğinde işaretçi */
    /*transition: background-color 0.3s, transform 0.3s;*/ /* Geçiş efektleri */
/*}

    .styled-button:hover {
        background-color: #d0d0d0;*/ /* Fareyle üzerine gelindiğinde arka plan rengi */
        /*transform: scale(1.05);*/ /* Butonu biraz büyüt */
    /*}

@media (max-width: 600px) {
    .styled-button {
        width: 100px;*/ /* Mobilde buton genişliği */
        /*height: 35px;*/ /* Mobilde buton yüksekliği */
        /*font-size: 12px;*/ /* Mobilde yazı boyutu */
        /*padding: 8px 12px;*/ /* Mobilde içerik için boşluk */
    /*}
}*/


/*FİYAT GÖR MOBİL KISIM
*/
@media (max-width: 768px) {
     /*Ekran genişliği 768px'den küçükse (tablet ve mobil cihazlar) */
    .product-details {
        flex-direction: column;  /*Flexbox yönünü dikey yap */
        align-items: center; /* Öğeleri ortala */
        text-align: center;  /*Metni ortala */
    }

    .product-info {
        max-width: 100%;  /*Bilgileri ekranın tamamını kapsayacak şekilde ayarla */
        padding: 0 15px;  /*Sağ ve sol boşluk bırak */
    }

    .product-image {
        margin-left: 0;  /*Görüntü ile metin arasındaki boşluğu kaldır */
        margin-top: 20px;/*  Görüntüye biraz üstten boşluk ver */
        width: 100%;  /*Resmi ekran genişliğine göre uyumlu hale getir */
        height: auto;  /*Yüksekliği orantılı şekilde ayarla */
    }

    .product-info p {
        font-size: 16px; /* Metin boyutunu büyüt */
    }

        .product-info p strong {
            font-size: 18px;  /*Başlıkların font boyutunu biraz büyüt */
        }
}

/* Küçük ekranlar için (Mobil) 
*/@media (max-width: 480px) {
    /* Ekran genişliği 480px'den küçükse (mobil cihazlar) */
    .product-info p {
        font-size: 14px; /* Metin boyutunu biraz küçült */
    }

        .product-info p strong {
            font-size: 16px;  /*Başlıkların font boyutunu küçült */
        }

    .product-image img {
        width: 90%;  /*Görüntü boyutunu küçült */
        height: auto;  /*Yüksekliği otomatik yap */
    }
}

/* Geri butonunun tasarımı */
.btn-back {
    background-color: gray; /* Gri tonlarında bir arka plan */
    color: #fff;  /*Beyaz yazı rengi */
    font-size: 16px;  /*Yazı boyutu */
    padding: 10px 20px;  /*İç boşluk */
    border-radius: 25px;  /*Yuvarlatılmış köşeler */
    text-decoration: none;  /*Link altı çizgiyi kaldırır */
    display: inline-flex; /* Flexbox kullanarak simgeyi ve metni hizalar */
    align-items: center;  /*Simge ve yazıyı dikeyde hizalar */
    transition: background-color 0.3s ease, transform 0.2s ease;  /*Renk ve efekt geçişi */
}

     /*Butona hover (üzerine gelindiğinde) etkisi */
    .btn-back:hover {
        background-color: #5a6268;  /*Hover durumunda biraz koyulaşan gri */
        transform: translateY(-2px);  /*Butona basılı hissi veren hafif bir hareket */
    }

     /*Butonun üzerine geldiğinde simgenin biraz büyümesi */
    .btn-back i {
        margin-right: 8px;  /*Simge ile yazı arasında boşluk */
        font-size: 18px;  /*Simge boyutunu büyütüyoruz */
    }

   /*  Butona tıklanırken (active) küçük bir "basma" efekti */
    .btn-back:active {
        transform: translateY(2px);  /*Butonun "basıldığında" biraz daha aşağıya inmesini sağlıyoruz */
    }




.scan-line {
    position: absolute;
    top: 80%; 
    left: 0;
    width: 100%;
    height: 2px;
    background: red;
    z-index: 9999;
    box-shadow: 0 0 60px red, 0 0 60px red, 0 0 60px red; 
    animation: scan 3s linear infinite;
}

@keyframes scan {
    0% {
        top: 80%;
    }
    /* alt */
    50% {
        top: 45%;
    }
    /* yukarıya hareket */
    100% {
        top: 80%;
    }
    /* tekrar alt */
}