<style>
    body { overflow-x: hidden; }
    .product-layout { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 30px; position: relative; }
    .main-image-container { flex: 0 0 100%; max-width: 650px; position: relative; }
    .image-wrapper { padding: 5px; background: #fff; border: 1px solid #ddd; border-radius: 12px; display: flex; align-items: center; justify-content: center; min-height: 300px; }
    #mainImage { width: 100%; height: auto; max-height: 70vh; object-fit: contain; cursor: pointer; border-radius: 8px; }

    /* Navigasyon Okları */
    .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; font-size: 24px; z-index: 10; display: flex; align-items: center; justify-content: center; }
    .prev-arrow { left: 15px; }
    .next-arrow { right: 15px; }

    /* MOBİL: 4 Sütunlu Grid */
    .gallery-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 15px; }

    /* PC: 5 Satırlı Dikey Grid (Sonra Yana Geçer) */
    @media (min-width: 992px) {
        .product-layout { flex-direction: row; align-items: flex-start; flex-wrap: nowrap; }
        .main-image-container { flex: 0 0 650px; }
        .gallery-container { 
            display: grid; 
            grid-template-rows: repeat(5, 80px); 
            grid-auto-flow: column; 
            margin-left: 20px; 
            width: auto;
            margin-top: 0;
            gap: 10px;
        }
    }

    .thumb-box { cursor: pointer; border: 2px solid #eee; border-radius: 6px; overflow: hidden; height: 80px; }
    .thumb-box.active { border-color: #ff6666; transform: scale(1.03); }

    /* MODAL VE KAPATMA BUTONLARI */
    .custom-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 9999999; align-items: center; justify-content: center; }
    .modal-content-box { position: relative; background:#fff; padding:30px; border-radius:15px; width:95%; max-width:450px; }
    
    .lb-image-box { position: relative; max-width: 90%; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
    
    /* X Butonu Yerleşimi */
    .close-btn { position: absolute; cursor: pointer; font-weight: bold; line-height: 1; z-index: 10000005; }
    .form-close { top: 10px; right: 15px; font-size: 30px; color: #333; }
    .lb-close { top: -45px; right: 0; font-size: 50px; color: #fff; }

    /* Lightbox Oklar */
    .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 60px; color: #fff; cursor: pointer; user-select: none; z-index: 10000002; padding: 20px; }
    .lb-prev { left: -80px; }
    .lb-next { right: -80px; }

    @media (max-width: 768px) {
        .lb-prev { left: 0; font-size: 45px; background: rgba(0,0,0,0.2); }
        .lb-next { right: 0; font-size: 45px; background: rgba(0,0,0,0.2); }
    }

    .input-wrapper { position: relative; }
    .unit-label { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-weight: bold; color: #00f; pointer-events: none; }
    #fire_bilgi { display:none; background: #f0faff; border-left: 5px solid #0000ff; padding: 10px; margin-top: 15px; text-align: left; }
   
   /* Masaüstünde normal görünsün, mobilde özelleşsin */
@media (max-width: 768px) {
    .breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important; /* Alt satıra geçmeyi zorla engeller */
        overflow-x: auto !important;  /* Yana kaydırma açılır */
        white-space: nowrap !important; /* Yazıları tek satıra sabitler */
        font-size: 12px !important;    /* Okunabilirliği bozmadan küçültüyoruz */
        padding: 8px 0 !important;
        -webkit-overflow-scrolling: touch; /* iPhone ve Android'de yağ gibi kayar */
        scrollbar-width: none; /* Firefox'ta çubuğu gizler */
    }
    
    .breadcrumb::-webkit-scrollbar {
        display: none; /* Chrome/Safari'de çubuğu gizler, temiz durur */
    }

    .breadcrumb-item {
        flex-shrink: 0; /* Kelimelerin sıkışıp üst üste binmesini engeller */
    }
}
   
   /* Breadcrumb'ın alt ve üst boşluğunu daraltıyoruz */
.breadcrumb {
    margin-top: 0px !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
}

/* Başlığın (H1) üst boşluğunu azaltıyoruz */
h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


}
  </style>
  