/* =================================================================
   STICKY ELEMENT ÇAKIŞMA DÜZELTMESİ (STICKY CONFLICT FIX)
   ================================================================= */

/* Temanın ana içerik kaydırma alanı, bizim sticky bar'ımızın
   doğru çalışmasını engelliyor olabilir. Bu kural, temanın bu
   davranışını sıfırlayarak sticky özelliğinin tarayıcı penceresine
   göre çalışmasını sağlar. */
body, .body_scroll, .main-content, .page-wrapper {
    overflow: visible !important;
}

/* Ayrıca header ve breadcrumb bar'ın z-index değerlerini
   netleştirelim. Header en üstte (daha yüksek z-index),
   breadcrumb bar hemen altında (biraz daha düşük z-index) olmalı. */
#global-header-placeholder {
    z-index: 1020 !important;
}


/* =================================================================
   TEMA ÇAKIŞMASI DÜZELTMESİ (THEME CONFLICT FIX)
================================================================= */
/* Temanın ana içerik kaydırma alanı, bizim carouselimizin taşma (overflow)
   özelliğini bozuyor. Bu kural, temanın bu davranışını sıfırlayarak
   kontrolü bizim CSS'imize bırakır. */
section.content .body_scroll {
    overflow: visible !important;
}


/* =================================================================
   ÜRÜN DETAY SAYFASI ANA YAPI STİLLERİ
================================================================= */


#urun-detay-alani {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 1px -1px 15px 11px rgba(0, 0, 0, 0.05); /*0 4px 15px rgba(0, 0, 0, 0.05);*/
    overflow: hidden;
}

#ana-detay-row {
    display: flex;
    flex-wrap: wrap;
}

.info-column {
    display: flex;
    flex-direction: column;
    max-height: 600px;
}

    .info-column .product-description-wrapper {
        overflow-y: auto;
        flex-grow: 1;
        padding-right: 15px;
    }

.fiyat-ve-buton-alani {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.fiyat-alani h3 {
    margin-bottom: 0;
}

.buton-alani {
    display: flex;
    gap: 10px;
}

/*.image-column {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 600px;
}

.product-detail-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}*/

/* =================================================================
   BENZER ÜRÜNLER CAROUSEL STİLLERİ
================================================================= */

#benzer-urunler-row {
    /*margin-top: 3rem;
    padding-top: 2rem;*/
    border-top: 1px solid #eee;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.carousel-wrapper {
    position: relative;
}

.benzer-urunler-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
    text-align: left;
    width: 100%;
    margin:0;
}

.product-carousel-container {
    position: relative;
    width: 100%;
}

#product-carousel {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    /* YATAY KAYDIRMAYI AKTİF ET */
    overflow-x: auto;
    /* Yumuşak kaydırma efekti */
    scroll-behavior: smooth;
    /* Scrollbar'ı gizle */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE ve Edge */
}

    #product-carousel::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.carousel-item-card {
    width: 150px;
    flex-shrink: 0;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    cursor: pointer;
}

    .carousel-item-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transform: translateY(-5px);
    }

    .carousel-item-card a {
        text-decoration: none;
        color: #333;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

.carousel-item-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.carousel-item-title {
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 500;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

    .carousel-btn:hover {
        background-color: #fff;
        color: #000;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .carousel-btn.prev {
        left: 10px;
    }

    .carousel-btn.next {
        right: 10px;
    }

/* =================================================================
   KULLANICI TİPİNE GÖRE RENK TEMALARI
================================================================= */

/* --- TURUNCU TEMA (B2C ve Misafir) --- */

/* Turuncu Buton Stili */
.btn-warning#detay-sepete-ekle-btn {
    background-color: #ff9800; /* Canlı bir turuncu */
    border-color: #ff9800;
    color: #fff;
    font-weight: 600;
}

    .btn-warning#detay-sepete-ekle-btn:hover {
        background-color: #e68900; /* Hover için biraz daha koyu */
        border-color: #e68900;
    }

/* Turuncu Fiyat Metni Stili */
h3.text-warning {
    color: #ff9800 !important; /* !important, diğer stilleri ezmesini garantiler */
    font-weight: 700;
}


/* --- YEŞİL TEMA (B2B) --- */

/* Yeşil Buton Stili */
.btn-success#detay-sepete-ekle-btn {
    background-color: #28a745; /* Canlı bir yeşil */
    border-color: #28a745;
    font-weight: 600;
}

    .btn-success#detay-sepete-ekle-btn:hover {
        background-color: #218838; /* Hover için biraz daha koyu */
        border-color: #218838;
    }

/* Yeşil Fiyat Metni Stili */
h3.text-success,
h3.text-success.b2b-fiyat-detay {
    color: #28a745 !important;
    font-weight: 700;
}


/*giriş butonu*/
#user-actions {
    /* Bootstrap'in arka plan, kenarlık ve gölge stillerini eziyoruz */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important; /* Odaklanma gölgesini kaldırır */
    /* İstediğimiz yazı ve ikon rengini veriyoruz */
    color: #333 !important;
    font-weight: 500;
    padding: 8px 12px; /* İç boşlukları istediğimiz gibi ayarlıyoruz */
    /* Geçiş efektini pürüzsüz yapar */
    transition: background-color 0.2s ease, color 0.2s ease;
}

#breadcrumb-bar {
    position: sticky;
    
    top: 0;
    margin-left:-50px;
    z-index: 1019; /* Header'ın z-index'inden biraz daha düşük olmalı, gerekirse ayarlayın */
   
}



/* =================================================================
   BREADCRUMB NİHAİ VERSİYON (SON ELEMAN DA OK ŞEKLİNDE)
   ================================================================= */

/* Ana yapı (Renklerden bağımsız) */
.breadcrumb-arrow {
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
}

    .breadcrumb-arrow li {
        float: left;
    }

        .breadcrumb-arrow li a {
            color: white;
            text-decoration: none;
            padding: 10px 10px 10px 55px;
            position: relative;
            display: block;
            float: left;
            height: 40px;
            box-sizing: border-box;
            font-weight: bold;
        }

            .breadcrumb-arrow li a::after {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left-width: 30px;
                border-left-style: solid;
                position: absolute;
                top: 50%;
                margin-top: -50px;
                left: 100%;
                z-index: 2;
            }

            .breadcrumb-arrow li a::before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 30px solid white;
                position: absolute;
                top: 50%;
                margin-top: -50px;
                margin-left: 1px;
                left: 100%;
                z-index: 1;
            }

        /* --- B2C / Misafir (Turuncu Tema) - VARSAYILAN --- */
        /* Bu kurallar her zaman geçerlidir, B2B kuralları gerekirse bunları ezer. */

        .breadcrumb-arrow li:nth-child(1) a {
            background: #a15802;
        }

            .breadcrumb-arrow li:nth-child(1) a::after {
                border-left-color: #a15802;
            }

        .breadcrumb-arrow li:nth-child(2) a {
            background: #d37602;
        }

            .breadcrumb-arrow li:nth-child(2) a::after {
                border-left-color: #d37602;
            }

        .breadcrumb-arrow li:nth-child(3) a {
            background: #f59e0b;
        }

            .breadcrumb-arrow li:nth-child(3) a::after {
                border-left-color: #f59e0b;
            }

        .breadcrumb-arrow li:nth-child(4) a,
        .breadcrumb-arrow li.active a {
            background: #fcd34d;
            color: #4b5563;
        }

            .breadcrumb-arrow li:nth-child(4) a::after,
            .breadcrumb-arrow li.active a::after {
                border-left-color: #fcd34d;
            }


/* --- B2B / Kurumsal (Yeşil Tema) --- */
/* DİKKAT: Artık tüm kurallar .theme-b2b-bar seçicisi ile başlıyor. */

#breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li:nth-child(1) a {
    background: #1E6B34;
}

    #breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li:nth-child(1) a::after {
        border-left-color: #1E6B34;
    }

#breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li:nth-child(2) a {
    background: #28a745;
}

    #breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li:nth-child(2) a::after {
        border-left-color: #28a745;
    }

#breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li:nth-child(3) a {
    background: #33c254;
}

    #breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li:nth-child(3) a::after {
        border-left-color: #33c254;
    }

#breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li:nth-child(4) a,
#breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li.active a {
    background: #59d375;
    color: #fff;
}

    #breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li:nth-child(4) a::after,
    #breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li.active a::after {
        border-left-color: #59d375;
    }


/* --- GENEL KURALLAR --- */

.breadcrumb-arrow li:first-child a {
    padding-left: 15px;
    border-radius: 4px 0 0 4px;
}

.breadcrumb-arrow li:last-child a,
.breadcrumb-arrow li.active a {
    pointer-events: none;
    cursor: default;
}

/* DÜZELTME: Son elemanın ok ucunu kaldıran kural SİLİNDİ. */
/* Artık son eleman da diğerleri gibi görünecek. */

/* Hover efekti (B2C için koyu turuncu) */
.breadcrumb-arrow li a:hover {
    background: #694002;
}

    .breadcrumb-arrow li a:hover::after {
        border-left-color: #694002 !important;
    }

/* Hover efekti (B2C için koyu turuncu) */
.breadcrumb-arrow li a:hover {
    background: #694002;
   
}

    .breadcrumb-arrow li a:hover::after {
        border-left-color: #694002 !important;
    }

/* DÜZELTME: Hover efekti (B2B için koyu yeşil) */
#breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li a:hover {
    background: #144a24;
}

    #breadcrumb-bar.theme-b2b-bar .breadcrumb-arrow li a:hover::after {
        border-left-color: #144a24 !important;
    }


/* =================================================================
   MOBİL İÇİN BREADCRUMB'I DROPDOWN'A DÖNÜŞTÜRME
   ================================================================= */

@media (max-width: 768px) {
    #breadcrumb-bar {
        width: 90%; /* Genişliği ekranın %90'ı ile sınırla */
        max-width: 400px; /* Çok fazla genişlemesini önlemek için */
        margin-left: auto; /* Otomatik olarak ortala */
        margin-right: auto; /* Otomatik olarak ortala */
    }
        /* --- Önceki Masaüstü Stillerini Sıfırlama --- */
        .breadcrumb-arrow, .breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li a::before, .breadcrumb-arrow li a::after {
        /* Tüm pozisyonlama, float, margin, clip-path ve border hilelerini sıfırla */
        all: unset;
        display: block; /* Tümünü blok element yap */
    }

    /* --- Yeni Dropdown Yapısını Kurma --- */

    /* Ana kapsayıcıyı pozisyonlama için referans noktası yap */
    .breadcrumb-arrow {
        position: relative;
       
        
    }

        /* Bütün liste elemanları için temel stil */
        .breadcrumb-arrow li a {
            color: #333;
            font-weight: 500;
            padding: 12px 15px;
            text-decoration: none;
            border-bottom: 1px solid #f0f0f0;
        }

        /* Dropdown menüsünü oluşturacak olan elemanlar (sonuncusu hariç) */
        .breadcrumb-arrow li:not(:last-child) {
            display: none; /* Başlangıçta gizli */
            background-color: white;
        }

            /* Açılır menüdeki linklerin hover efekti */
            .breadcrumb-arrow li:not(:last-child) a:hover {
                background-color: #f8f9fa;
            }

        /* Dropdown'ı tetikleyecek olan buton (son eleman) */
        .breadcrumb-arrow li:last-child {
            border: 1px solid #ddd;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            background-color: #f8f9fa;
        }

            .breadcrumb-arrow li:last-child a {
                color: #495057 !important; /* Tema renklerini ezmek için */
                padding-right: 40px; /* Ok ikonu için yer aç */
            }

                /* Dropdown ok ikonu */
                .breadcrumb-arrow li:last-child a::after {
                    content: '▼';
                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 12px;
                    color: #6c757d;
                    transition: transform 0.2s ease-in-out;
                }

        /* --- Açık Durum (is-open) Stilleri --- */

        /* JavaScript bu sınıfı eklediğinde menü görünür olacak */
        .breadcrumb-arrow.is-open li:not(:last-child) {
            display: block;
        }

        /* Menü açıldığında alttaki elemanları ezmemesi için pozisyonlama */
        .breadcrumb-arrow.is-open {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 10;
        }

            /* Menü açıldığında ok ikonu yukarı dönsün */
            .breadcrumb-arrow.is-open li:last-child a::after {
                transform: translateY(-50%) rotate(180deg);
            }

    #urun-detay-alani h2 {
        font-size: 1.5rem; /* Eskisi 2rem idi, mobil için küçülttük */
        line-height: 1.3; /* Uzun başlıkların alt satıra kayması durumunda satır aralığını düzenler */
    }

    .benzer-urunler-title {
        font-size: 0.9rem;
        margin-top:10px;
    }

    #urun-detay-alani {
        /* Üst ve alttaki boşluğu biraz azalt, yanlara ise 15px boşluk ver */
        padding: 1.5rem 15px;
        /* Kenar boşluklarını sıfırla */
        margin-left: 0;
        margin-right: 0;
        /* Bootstrap'in .container'ından gelen ekstra negatif margin'leri sıfırla */
        width: 100%;
        /* Köşeleri sıfırla, tam ekran hissi versin */
        border-radius: 0;
    }
}

/* =================================================================
   RESPONSIVE ÜRÜN GÖRSELİ STİLLERİ (Mobile-First Yaklaşımı)
   ================================================================= */

/* 1. Temel Stil (Tüm Ekranlar İçin Ortak) */
.image-column {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail-image {
    width: 100%; /* Resmin genişliği her zaman sütununa uysun */
    height: auto; /* Yüksekliği, en-boy oranını koruyarak otomatik ayarlansın */
    object-fit: contain;
    border-radius: 8px;
}


/* 2. Mobil Cihazlar (768px ve altı) */
/* Bootstrap'in grid yapısı bu boyutta sütunları alt alta getirecektir. */
/* Resim genellikle metnin altında yer alır. */
@media (max-width: 768px) {
    .image-column {
        /* Metin ile resim arasında boşluk bırak */
        margin-top: 2rem;
    }

    .product-detail-image {
        /* Mobilde resmin çok uzun olmasını engellemek için makul bir sınır */
        max-height: 350px;
    }
}


/* 3. Tablet ve Küçük Laptop Ekranları (769px - 1200px) */
@media (min-width: 769px) {
    .product-detail-image {
        /* Bu ekranlarda resim biraz daha büyük olabilir */
        max-height: 450px;
    }
}


/* 4. Geniş Masaüstü Ekranları (1201px ve üstü) */
@media (min-width: 1201px) {
    .product-detail-image {
        /* En geniş ekranlar için belirlediğimiz maksimum yükseklik */
        max-height: 550px;
    }
}