body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
    padding: 0 10px 10px 10px; /* Üstte boşluk yok, diğer taraflar 10px */
}



.logo_1 {
    max-width: 15%; /* Logonun maksimum genişliği %100 */
    height: auto; /* Yüksekliği otomatik ayarlama */
    display: block; /* Blok olarak görüntüle */
    margin: 0 auto; /* Ortalamak için margin ayarı */
    border-radius: 15px; /* Köşeleri oval hale getirme */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Altına gölgelendirme ekleme */
}

/* Mobil uyumlu ayarlar */
@media screen and (max-width: 768px) {
    .logo_1 {
        max-width: 75%; /* Daha küçük ekranlarda genişliği %80 yap */
    }
}

@media screen and (max-width: 480px) {
    .logo_1 {
        max-width: 60%; /* Çok küçük ekranlarda genişliği %70 yap */
    }
}




.containerien454 {
    display: flex;
    flex-direction: row; /* Yan yana hizalama */
    justify-content: space-between; /* Boşlukları eşit dağıtma */
    align-items: stretch; /* Yükseklikleri eşitleme */
    padding: 10px;
    width: 70%; /* Genişliği yüzde olarak ayarla */
    margin: 0 auto; /* Yatayda ortalamak için margin ayarı */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Gölge efekti */
    background-color: #C13584; /* Arka plan rengi */
}


.top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px; /* Üst satır ile alt satır arasındaki boşluk */
    margin: 0 5px 5px;
}





.instagram-logo {
    font-size: 30px; /* Instagram logosunun boyutu */
    color: #fff; /* Beyaz renk */
    margin-right: 10px; /* Logo ile adres arasında boşluk */
}

.instagram-adres {
    font-weight: 600;
    font-size: 20px;
    color: #fff; /* Beyaz renk */
}

.message {
    font-size: 18px; /* Mesaj yazısının boyutu */
    color: #fff; /* Beyaz yazı rengi */
    text-align: center;
    font-family: 'Poppins', sans-serif;
    position: relative;
    opacity: 0;
    transform: translateY(50px); /* Başlangıçta biraz aşağıda olsun */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    padding: 0 10px;
    width: 100%; /* Yazıyı kapsayacak şekilde genişlik */
}

/* Mesajın görünür hale geldiği animasyon */
.visible {
    opacity: 1;
    transform: translateY(0);
    word-wrap: break-word; /* Yazının uzunluğu otomatik olarak iki satıra bölünsün */
    white-space: normal; /* Tek satırda kalmasın, kırılma yapabilsin */
}

/* Takip Et Butonu */
.responsive-button {
    background-color: #E1306C; /* Instagram kırmızımsı mor */
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: inline-block;
    width: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    /* Hover ve focus durumu */
    .responsive-button:hover,
    .responsive-button:focus {
        background-color: #C13584; /* Hover rengini değiştirme */
        transform: translateY(-3px); /* Hover animasyonu */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Gölge etkisi */
    }

/* Butonun mobil uyumlu olması için responsive ayarlar */
@media screen and (max-width: 768px) {
    .responsive-button {
        font-size: 16px; /* Mobilde font büyüklüğünü küçültme */
        padding: 12px 25px; /* Mobilde padding'i biraz küçültme */
    }
}

@media screen and (max-width: 480px) {
    .responsive-button {
        font-size: 14px; /* Çok küçük ekranlarda font büyüklüğünü daha da küçültme */
        padding: 10px 20px; /* Çok küçük ekranlarda padding küçültme */
    }
}

    .follow-button:hover {
        background-color: #C13584; /* Hover durumunda renk değişir */
    }

/* Mobil uyumlu düzenlemeler */
@media screen and (max-width: 768px) {
    .containerien454 {
        width: 90%;
    }

    .instagram-adres {
        font-size: 18px;
    }

    .instagram-logo {
        font-size: 25px;
    }

    .follow-button {
        font-size: 16px;
        padding: 10px 20px;
    }
}

@media screen and (max-width: 480px) {
    .containerien454 {
        width: 95%;
    }

    .instagram-adres {
        font-size: 16px;
    }

    .instagram-logo {
        font-size: 20px;
    }

    .follow-button {
        font-size: 14px;
        padding: 8px 15px;
    }
}
.container {
    width: 85%;
    margin: 0 auto;
    padding-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}




.footer-copyright {
     /* Koyu gri footer */
    color: #050505; /* Beyaz metin rengi */
    text-align: center;
    padding: 10px 10px;
    position: relative;
    bottom: 0;
    width: 100%;
    margin: 10px auto;
    font-size: 16px; /* Varsayılan yazı boyutu */
}

    .footer-copyright a {
        color: #ff7f00; /* Turuncu bağlantı rengi */
        text-decoration: none;
    }

        .footer-copyright a:hover {
            text-decoration: underline; /* Üzerine gelindiğinde altı çizili */
        }

@media (max-width: 600px) {
    nav a {
        display: block; /* Mobilde linkleri dikey hizala */
        margin: 5px 0;
        font-size: 8px; /* Varsayılan yazı boyutu */
    }
}







/* Ana Banner Konteyneri */
.container_banner {
    background-color: #333; /* Koyu gri footer */
    color: #fff; /* Beyaz metin rengi */
    text-align: center;
    padding: 5px 2px;
    position: relative;
    bottom: 0;
    width: 95%;
    margin: 5px auto;
}


    /* Hover Efekti */
    .container_banner:hover {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Hover sırasında daha belirgin gölge */
        transform: scale(1.03); /* Hafif büyüme efekti */
        background: linear-gradient(135deg, #feb47b, #ff7e5f); /* Hover sırasında gradyan tersine döner */
    }

    /* İçerik Elemanları */
    .container_banner .barkodu-okut,
    .container_banner .fiyat {
        margin: 10px 0; /* Elemanlar arasında dikey boşluk */
        font-size: 28px; /* Daha büyük ve çarpıcı yazı */
        font-weight: bold; /* Daha belirginlik için kalın yazı */
    }

/* Mobil Uyumluluk */
@media screen and (max-width: 768px) {
    .container_banner {
        padding: 10px; /* Mobil için daha az iç boşluk */
        font-size: 22px; /* Yazı boyutunu biraz küçült */
    }

        .container_banner .barkodu-okut,
        .container_banner .fiyat {
            font-size: 24px; /* Mobilde yazı boyutunu küçült */
        }
}

@media screen and (max-width: 480px) {
    .container_banner {
        padding: 6px; /* Küçük ekranlar için daha kompakt yapı */
        font-size: 18px; /* Yazı boyutunu daha da küçült */
    }

        .container_banner .barkodu-okut,
        .container_banner .fiyat {
            font-size: 18px; /* Yazı boyutunu optimize et */
        }
}










.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}



#singleResultContainer {
    background-color: #ffffff; /* White background for contrast */
    padding: 20px; /* Add padding for spacing */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    max-width: 400px; /* Set a max width */
    margin: 20px auto; /* Center the container */
}

    #singleResultContainer h2 {
        font-size: 16px; /* Larger font for the title */
        color: #333; /* Darker color for better visibility */
        margin: 0; /* Remove margin to make it flush with the top */
        text-align: center; /* Center the title */
    }

.product-info {
    font-size: 20px; /* Set font size for product info */
    color: #0e0303; /* Darker gray for text */
}

    .product-info p {
        margin: 10px 0; /* Space between paragraphs */
    }

    .product-info strong {
        color: #007bff; /* Blue color for labels */
    }

    .product-info .price {
        font-size: 35px; /* Make the price the same size as the heading */
        color: #333; /* Same color as the heading for consistency */
        margin-top: 10px; /* Space above the price */
        background-color: yellow;
        font-weight: bold;
    }


.search-container input {
    width: 220px;
    padding: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 15px;
    margin-right: 10px;
    transition: border-color 0.3s;
}

    .search-container input:focus {
        border-color: #780000;
        outline: none;
    }

.search-container button {
    padding: 20px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

    .search-container button:hover {
        background-color: #45a049;
    }

    .search-container button img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

.btn-container {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    text-align: center; /* Yazıyı ortalar */
   
}


    .btn-container img {
        width: 20%; /* Resmi genişliğinin %20'sine küçültür */
        height: auto; /* Yüksekliği otomatik olarak ayarlar, oranı korur */
        margin-right: 10px; /* Resim ile yazı arasına 10 piksel boşluk ekler */
    }

    .btn-container .button-text {
        font-weight: bold; /* Yazıyı kalın yapar */
    }

#startButton, #stopButton {
    background-color: #4CAF50;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    max-width: 350px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 10px;
    transition: background-color 0.3s;
    font-size: 20px; /* Yazı boyutunu artır */
    font-weight: bold; /* Yazıyı kalın yap */
}

    #startButton:hover, #stopButton:hover {
        background-color: #45a049;
    }

#stopButton {
    background-color: #e74c3c;
    display: none;
}

    #stopButton:hover {
        background-color: #c0392b;
    }

    #stopButton span {
        font-size: 18px;
    }



#newProductButton {
    background-color: #ed6b0a;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none;
    align-items: center;
    margin-right: 10px;
    transition: background-color 0.3s;
}

    #newProductButton:hover {
        background-color: #d1a619;
    }

    #newProductButton span {
        font-size: 28px;
    }

.camera-select-container {
    text-align: center;
    margin-bottom: 2px;
    background-color: #f9f9f9; /* Light background for contrast */
    padding: 2px; /* Add some padding */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.header-select {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    margin-bottom: 15px; /* Space below the header and select */
}

    .header-select h2 {
        font-size: 20px; /* Larger font for the heading */
        color: #333; /* Darker color for better visibility */
        margin-right: 15px; /* Space between heading and select */
    }

.camera-select-container select {
    padding: 5px; /* Slightly larger padding */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s; /* Smooth transition for border color */
}

    .camera-select-container select:focus {
        border-color: #007bff; /* Highlight border on focus */
        outline: none; /* Remove default outline */
    }

.camera-select-container p {
    font-size: 12px;
    color: #777;
    margin-top: 10px; /* Space above the paragraph */
}

#tableContainer {
    margin-top: 20px;
    display: none;
}

    #tableContainer table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    #tableContainer table, #tableContainer th, #tableContainer td {
        border: 1px solid #ddd;
    }

    #tableContainer th, #tableContainer td {
        padding: 8px;
        text-align: left;
    }

    #tableContainer th {
        background-color: #891616;
    }

#singleResultContainer {
    margin-top: 20px;
    display: none;
}

    #singleResultContainer h2 {
        margin-bottom: 10px;
    }

    #singleResultContainer p {
        margin: 5px 0;
    }

audio {
    display: none;
}

/* Optional: Style for discounted price */
.discount-price {
    color: #d9534f; /* Red color for discount prices */
    font-weight: bold; /* Bold text for emphasis */
}


/* Genel container ayarları */
#tableContainer {
    background-color: #ffffff; /* Beyaz arka plan */
    padding: 20px;
    border-radius: 12px; /* Daha yuvarlak köşeler */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Daha belirgin gölge */
    max-width: 100%; /* Maksimum genişlik %100 olacak şekilde */
    margin: 20px auto; /* Ortalanmış konum */
    overflow-x: auto; /* İçeriğin taşmasını engellemek için yatay kaydırma */
}

    /* Başlık stili */
    #tableContainer h2 {
        font-size: 24px; /* Başlık boyutunu biraz küçültüyoruz */
        color: #333; /* Başlık rengi */
        text-align: center; /* Ortalanmış başlık */
        margin-bottom: 20px;
        font-weight: 600; /* Başlık daha belirgin olsun */
    }

/* Tablo stili */
table {
    width: 100%; /* Tablo genişliği %100 */
    border-collapse: collapse; /* Hücreler arasındaki boşluğu kaldır */
}

/* Tablo başlık hücrelerinin stili */
th, td {
    padding: 15px; /* Hücrelere padding ekle */
    text-align: left; /* Sol hizalama */
    border-bottom: 1px solid #ddd; /* Alt sınır */
}

/* Tablo başlık renkleri */
th {
    background-color: #760707; /* Başlık arka plan rengi */
    color: white; /* Başlık yazı rengi beyaz */
    font-size: 19px; /* Başlık yazı boyutu */
    font-weight: 800; /* Başlık font ağırlığı */
    text-transform: uppercase; /* Başlık yazılarını büyük yap */
}

/* Satır hover efekti */
tr:hover {
    background-color: #ffff00a5; /* Satır üzerine gelindiğinde arka plan rengi değişsin */
}

/* Tablo verisi hücre stili */
td {
    color: #555; /* Veri rengi */
    font-size: 14px; /* Veri font boyutu */
}

/* Mobil uyumluluk için media query */
@media (max-width: 768px) {
    /* Tablet ve mobil ekranlarda tablonun boyutlarını optimize et */
    #tableContainer {
        padding: 10px; /* Küçük ekranlarda padding'i küçült */
    }

    th, td {
        padding: 10px; /* Hücre padding'ini küçült */
        font-size: 12px; /* Küçük ekranlar için font boyutunu küçült */
    }

    /* Başlık hücrelerinin font büyüklüğünü küçült */
    th {
        font-size: 14px;
    }

    /* Tablonun yatay kaydırılabilir olması */
    table {
        width: 100%;
        display: block;
        overflow-x: auto; /* Yatay kaydırma */
        white-space: nowrap; /* Satırlar taşmasın */
    }
}