/* urun-detay.css - TAM VE GÜNCELLENMİŞ STİLLER */

/* ==========================================================================
   1. TEMEL AYARLAR VE DEĞİŞKENLER
   ========================================================================== */
   :root {
    /* Tipografi */
    --font-heading-detail: 'Poppins', sans-serif;
    --font-body-detail: 'Open Sans', sans-serif;

    /* Renkler */
    --color-primary-detail: #B8860B;      /* Ana Renk (Koyu Altın) */
    --color-primary-dark-detail: #8B6914; /* Ana Rengin Koyusu */
    --color-primary-detail-rgb: 184, 134, 11; /* Ana Rengin RGB'si (opacity için) */
    --color-secondary-detail: #4A4A4A;   /* İkincil Renk (Koyu Gri) */
    --color-accent-detail: #D4AF37;      /* Vurgu Rengi (Açık Altın) */
    --color-text-primary-detail: #222222; /* Ana Metin Rengi */
    --color-text-secondary-detail: #555555; /* İkincil Metin Rengi */
    --color-text-light-detail: #FFFFFF;  /* Açık Zemin Üzeri Metin */
    --color-background-detail: #FFFFFF;  /* Ana Arka Plan */
    --color-surface-detail: #F7F7F7;     /* Hafif Gri Arka Planlar */
    --color-border-detail: #DDDDDD;      /* Kenarlık Rengi */
    --color-success-detail: #28a745;     /* Başarı/Stokta Var Rengi */
    --color-disabled-detail: #BDBDBD;    /* Pasif Eleman Rengi */

    /* Kenarlık Yarıçapları */
    --border-radius-sm-detail: 4px;
    --border-radius-md-detail: 8px;
    --border-radius-lg-detail: 12px;

    /* Gölgeler */
    --shadow-sm-detail: 0 2px 5px rgba(0,0,0,0.07);
    --shadow-md-detail: 0 5px 15px rgba(0,0,0,0.1);
    --shadow-lg-1-detail: 0 8px 24px rgba(0,0,0,0.12); /* Farklılaşan gölge ismi */
    --shadow-inset-soft: inset 0 2px 8px rgba(0,0,0,0.06); /* Ana görsel için iç gölge */

    /* Boşluklar */
    --spacing-xs-detail: 5px;
    --spacing-sm-detail: 10px;
    --spacing-md-detail: 15px;
    --spacing-lg-detail: 25px;
    --spacing-xl-detail: 35px;
    --spacing-xxl-detail: 50px;
}

/* ==========================================================================
   2. GENEL SAYFA VE YAPI STİLLERİ
   ========================================================================== */
.product-detail-content-section {
    padding: var(--spacing-lg-detail) 0 var(--spacing-xxl-detail); /* Üst paddingi biraz azalttık veya sabit bıraktık */
    font-family: var(--font-body-detail);
    color: var(--color-text-primary-detail);
    line-height: 1.7;
}

/* Sayfa Başlığı (Sadece Breadcrumb İçin) */
.page-header.breadcrumb-only-header {
    background-color: transparent;
    padding: var(--spacing-md-detail) 0;
    text-align: left;
    margin-bottom: var(--spacing-lg-detail); /* Breadcrumb'ın kendi margin'i var, burası gereksiz olabilir */
    border-bottom: 1px solid var(--color-border-detail); /* Breadcrumb'ın kendi border'ı var, burası gereksiz olabilir */
}
/* Breadcrumb Navigasyon Wrapper */
.breadcrumb-nav {
    background-color: #f8f9fa;
    padding: 15px 0; /* Yukarıdan aşağıdan padding */
    border-bottom: 1px solid #eaeaea; /* Alt çizgi */
    margin-bottom: 0; /* Geri dön linki araya gireceği için margin sıfırlandı */
    font-size: 0.85rem;
    color: var(--color-text-secondary-detail);
}
.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 var(--spacing-sm-detail); /* Önce 10px idi */
    color: var(--color-border-detail); /* Color text-secondary yerine border rengi daha uygun */
}
.breadcrumb a {
    color: var(--color-text-secondary-detail);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}
.breadcrumb a:hover { color: var(--color-primary-dark-detail); text-decoration: underline; }
.breadcrumb a.active {
    background: none;
    border: none;
    color: #e6a100;
    font-weight: 600;
    padding: 0;
    box-shadow: none;
}
.breadcrumb li:last-child a {
    background: none !important;
    border: none !important;
    color: #e6a100 !important;
    font-weight: 600;
    padding: 0 !important;
    box-shadow: none !important;
}
.category-link {
    font-weight: 500;
    display: flex;
    align-items: center;
    color: var(--color-text-secondary-detail) !important;
}
.category-link:hover {
    color: var(--color-primary-detail) !important;
}
.tag-label {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 0.95em;
    padding: 2px 10px;
    border-radius: 8px;
    margin-right: 4px;
    margin-bottom: 2px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Breadcrumb Ürün Adı */
#breadcrumb-product-title {
    color: var(--color-text-primary-detail);
    font-weight: 600;
    position: relative;
    padding: 2px 8px;
    border-radius: var(--border-radius-sm-detail);
    background-color: var(--color-surface-detail);
    box-shadow: var(--shadow-sm-detail);
    border: 1px solid var(--color-border-detail);
}
#breadcrumb-product-title:hover {
    background-color: var(--color-primary-detail);
    color: var(--color-text-light-detail);
    border-color: var(--color-primary-detail);
}
.breadcrumb-separator { margin: 0 var(--spacing-sm-detail); color: var(--color-border-detail); } /* Zaten tanımlıydı, güncellendi */

/* Geri Dön Linki Stilleri - DÜZELTİLDİ */
.back-link-container {
    /* Breadcrumb'dan sonra, ürün detayından önce boşluk vermek için margin kullanılır */
    margin-top: var(--spacing-md-detail); /* Breadcrumb ile Geri Dön arası boşluk */
    margin-bottom: var(--spacing-lg-detail); /* Geri Dön ile Ürün Layout arası boşluk */
    text-align: left; /* Linkin sola hizalı olmasını sağlar */
    /* Artık main-layout'un içindeki container'da değil, kendi container'ı içinde */
    /* Breadcrumb'ın kendi border-bottom'ı var, o yüzden buraya bir border gerekmiyor. */
    /* padding-top kaldırıldı */
}

.back-link {
    display: inline-flex; /* İkon ve metni yan yana hizala */
    align-items: center;
    font-size: 0.95rem; /* Boyut ayarı */
    color: var(--color-text-secondary-detail); /* İkincil metin rengi */
    text-decoration: none; /* Alt çizgiyi kaldır */
    transition: color 0.2s ease, text-decoration 0.2s ease;
    gap: var(--spacing-xs-detail); /* İkon ile metin arasına boşluk */
    font-weight: 600; /* Biraz daha belirgin yap */
}

.back-link:hover {
    color: var(--color-primary-dark-detail); /* Hover rengi */
    text-decoration: underline; /* Hoverda alt çizgi ekle */
}

.back-link i {
    font-size: 1rem; /* FontAwesome ikon boyutu */
}


@media (max-width: 768px) {
    .breadcrumb {
        font-size: 13px;
    }

    .breadcrumb li:not(:last-child)::after {
        margin: 0 5px;
    }

    /* Mobil uyumluluk için geri dön linki */
     .back-link-container {
        margin-top: var(--spacing-sm-detail);
        margin-bottom: var(--spacing-md-detail);
    }
    .back-link {
        font-size: 0.9rem;
    }
}

/* Ana Ürün Yerleşimi (Galeri + Bilgi) */
.product-main-layout {
    display: grid;
    grid-template-columns: 1fr; /* Mobil */
    gap: var(--spacing-xl-detail, 40px);
    margin-bottom: var(--spacing-xl-detail);
    /* Artık back-link-container'dan sonra geldiği için
       product-detail-content-section'ın üst padding'i veya
       product-main-layout'un üst margin'i back-link-container'dan
       sonraki boşluğu ayarlayacaktır. */
}
@media (min-width: 992px) { /* Büyük ekranlar */
    .product-main-layout { grid-template-columns: 55fr 45fr; gap: var(--spacing-xxl-detail, 50px); }
}

/* ==========================================================================
   3. ÜRÜN GALERİSİ
   ========================================================================== */
.product-gallery-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md-detail);
    position: sticky; /* Kaydırırken sabit kalması için (opsiyonel) */
    top: calc(var(--spacing-lg-detail) + 60px); /* Header yüksekliği + boşluk kadar aşağıda başla */
    align-self: flex-start;
    /* Gallery'nin flex-start olması, yapışkan olmasını sağlar */
}
@media (min-width: 768px) {
    .product-gallery-container { flex-direction: row; align-items: flex-start; }
    .product-thumbnails-wrapper { order: 1; }
    .main-product-image-wrapper { order: 2; flex-grow: 1; }
}

/* Ana Görsel */
.main-product-image-wrapper {
    border-radius: var(--border-radius-lg-detail);
    overflow: hidden;
    box-shadow: var(--shadow-md-detail), var(--shadow-inset-soft);
    background-color: var(--color-surface-detail);
    position: relative;
    border: 1px solid var(--color-border-detail);
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 100%;  /* Değiştirildi: container genişliğine uyum için */
    aspect-ratio: 1/1; /* Kare format korundu */
    max-width: 550px; /* Maksimum genişlik sınırı */
    margin: 0 auto; /* Merkezde olması için */
}
#main-image-link { display: block; line-height: 0; cursor: zoom-in; }
#main-product-image {
    width: 100%; height: auto; max-height: 550px; /* Max yükseklik belirledik */
    object-fit: cover; display: block; aspect-ratio: 1/1; /* Kare oran */
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#main-image-link:hover #main-product-image { transform: scale(1.03); }

/* Thumbnails - Yeniden düzenlendi */
.product-thumbnails-wrapper {
    display: flex;
    gap: var(--spacing-sm-detail);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-detail) transparent;
    position: relative;
}

/* Mobil görünüm */
@media (max-width: 767px) {
    .product-thumbnails-wrapper {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: var(--spacing-xs-detail);
        -webkit-overflow-scrolling: touch; /* iOS için smooth scroll */
        scroll-snap-type: x mandatory;
        width: 100%;
    }
    
    .product-thumbnails-wrapper .thumb-item {
        scroll-snap-align: start;
    }
}

/* Tablet ve desktop görünüm */
@media (min-width: 768px) {
    .product-gallery-container {
        flex-direction: row;
        gap: var(--spacing-lg-detail);
    }
    
    .product-thumbnails-wrapper {
        flex-direction: column;
        width: 90px;
        height: auto;
        max-height: 550px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: var(--spacing-xs-detail);
        margin-right: var(--spacing-md-detail);
    }
    
    .product-thumbnails-wrapper::-webkit-scrollbar {
        width: 6px;
        height: auto;
    }
    
    .product-thumbnails-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .product-thumbnails-wrapper::-webkit-scrollbar-thumb {
        background-color: var(--color-border-detail);
        border-radius: 10px;
    }
}

/* Thumbnail stilleri */
.product-thumbnails-wrapper .thumb-item {
    width: 75px;
    height: 75px;
    flex: 0 0 auto;
    border-radius: var(--border-radius-md-detail);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.25s ease;
    display: block;
    position: relative;
    box-shadow: var(--shadow-sm-detail);
    background-color: var(--color-surface-detail);
}

.product-thumbnails-wrapper .thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none; /* Resmin kendisine tıklamayı engelle */
}

.product-thumbnails-wrapper .thumb-item:hover {
    border-color: var(--color-secondary-detail);
}

.product-thumbnails-wrapper .thumb-item.active {
    border-color: var(--color-primary-detail);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-detail-rgb), 0.3);
}

@media (min-width: 768px) {
    .product-thumbnails-wrapper .thumb-item {
        width: 100%;
        margin-bottom: var(--spacing-xs-detail);
    }
    
    .product-thumbnails-wrapper .thumb-item:hover {
        transform: translateX(-2px);
    }
}
.product-thumbnails-wrapper {
    display: flex; gap: var(--spacing-sm-detail);
    overflow-x: auto; padding-bottom: var(--spacing-xs-detail);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-detail) transparent;
}
.product-thumbnails-wrapper::-webkit-scrollbar { height: 6px; }
.product-thumbnails-wrapper::-webkit-scrollbar-track { background: transparent; }
.product-thumbnails-wrapper::-webkit-scrollbar-thumb { background-color: var(--color-border-detail); border-radius: 10px;}

@media (min-width: 768px) {
    .product-thumbnails-wrapper {
        flex-direction: column; width: 90px; flex-shrink: 0;
        max-height: 550px; /* Ana görsel ile aynı yükseklik */
        overflow-y: auto; overflow-x: hidden;
        padding-right: var(--spacing-xs-detail); padding-bottom: 0;
        gap: var(--spacing-md-detail);
        scrollbar-width: thin;
        scrollbar-color: var(--color-border-detail) transparent;
    }
     .product-thumbnails-wrapper::-webkit-scrollbar { width: 6px; height: auto; }
}
.product-thumbnails-wrapper .thumb-item { /* JS'deki <a> etiketi */
    width: 75px; height: 75px; flex-shrink: 0; /* Mobil için sabit boyut */
    border-radius: var(--border-radius-md-detail);
    overflow: hidden; cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.25s ease;
    display: block; position: relative;
    box-shadow: var(--shadow-sm-detail);
}
@media (min-width: 768px) {
    .product-thumbnails-wrapper .thumb-item { width: 100%; height: auto; aspect-ratio: 1/1; } /* Tablet/Desktop'ta genişlik %100, oran 1/1 */
}
.product-thumbnails-wrapper .thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumbnails-wrapper .thumb-item:hover {
    border-color: var(--color-secondary-detail);
    transform: scale(1.05);
    box-shadow: var(--shadow-md-detail);
}
.product-thumbnails-wrapper .thumb-item.active {
    border-color: var(--color-primary-detail);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-detail-rgb, 184, 134, 11), 0.6); /* Daha belirgin aktiflik gölgesi */
}

/* ==========================================================================
   4. ÜRÜN BİLGİLERİ (SAĞ SÜTUN)
   ========================================================================== */
.product-information-container { display: flex; flex-direction: column; }

.product-category-label {
    font-size: 0.8rem; color: var(--color-secondary-detail);
    text-transform: uppercase; letter-spacing: 1px;
    font-weight: 600; margin-bottom: var(--spacing-sm-detail);
}
.product-main-name {
    font-family: var(--font-heading-detail);
    font-size: clamp(2rem, 5vw, 2.6rem); /* Responsive font boyutu */
    font-weight: 700; color: var(--color-text-primary-detail);
    line-height: 1.25; margin-bottom: var(--spacing-md-detail);
}

.product-meta-details {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--spacing-md-detail) var(--spacing-lg-detail);
    font-size: 0.9rem; color: var(--color-text-secondary-detail);
    margin-bottom: var(--spacing-lg-detail);
}
.product-sku-info { font-weight: 500; }

.product-availability-info {
    /* Temel etiket görünümü için padding ve border-radius */
    padding: 4px 10px;
    border-radius: var(--border-radius-sm-detail, 4px);
    
    /* Yazı ve ikon rengi */
    color: var(--color-success-detail, #28a745);
    
    /* Arka plan rengi (başarı renginin çok açık tonu) */
    background-color: rgba(40, 167, 69, 0.1);

    /* Yazıyı daha okunaklı yapmak için */
    font-weight: 600;
    font-size: 0.85rem;

    /* İkon ve metni dikey olarak hizalamak için */
    display: inline-flex;
    align-items: center;
    gap: 6px; /* İkon ile metin arasına boşluk */
}

.product-shipping-info {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm-detail);
    font-size: 0.85rem;
}

.shipping-disclaimer {
    font-size: 1.0rem;
    color: #777;
    font-style: italic;
    margin-top: var(--spacing-xs-detail);
    padding-left: 5px;
}


/* Teslimat Bilgisi Stili */
.product-shipping-info {
    color: #3498db; /* Mavi */
    background-color: rgba(52, 152, 219, 0.1);
}.product-availability-info i { margin-right: var(--spacing-xs-detail); }


/* YENİ EKLENEN STİLLER BAŞLANGIÇ */
/* urun-detay.css dosyanıza ekleyin */



@keyframes badge-pop {
    0% { transform: scale(0.8); opacity: 0; }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}



.product-short-summary {
    font-size: 1rem; color: var(--color-text-secondary-detail);
    line-height: 1.8; margin-bottom: var(--spacing-xl-detail);
}

/* Seçenekler (Renk, Miktar) */
.product-options-area {
    border-top: 1px solid var(--color-border-detail);
    border-bottom: 1px solid var(--color-border-detail);
    padding: var(--spacing-lg-detail) 0;
    margin-bottom: var(--spacing-xl-detail);
}
.option-set { margin-bottom: var(--spacing-lg-detail); }
.option-set:last-child { margin-bottom: 0; }
.option-set-label {
    display: block; font-weight: 700;
    margin-bottom: var(--spacing-md-detail);
    color: var(--color-text-primary-detail);
    font-size: 1rem;
}
#selected-color-text { font-weight: 600; color: var(--color-primary-detail); margin-left: var(--spacing-xs-detail); }
.color-swatch-list { display: flex; flex-wrap: wrap; gap: var(--spacing-md-detail); }
.color-swatch-item {
    width: 38px; height: 38px;
    border: 2px solid var(--color-border-detail); border-radius: 50%;
    cursor: pointer; background-size: cover; background-position: center;
    transition: all 0.2s ease-out; padding: 0;
    background-color: transparent;
}
.color-swatch-item:hover { transform: scale(1.15); border-color: var(--color-secondary-detail); }
.color-swatch-item.active {
    border-color: var(--color-primary-detail);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-detail-rgb, 184, 134, 11), 0.6);
    transform: scale(1.1);
}
.quantity-control {
    display: flex; align-items: center;
    border: 1px solid var(--color-border-detail);
    border-radius: var(--border-radius-md-detail);
    width: fit-content; overflow: hidden;
}
.quantity-button {
    width: 42px; height: 42px;
    background: var(--color-surface-detail); border: none;
    font-size: 1.2rem; font-weight: 600;
    color: var(--color-text-secondary-detail); cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.quantity-button:hover { background-color: #e5e5e5; color: var(--color-primary-dark-detail); } /* Hover rengi primary-dark yapıldı */
#product-quantity-input {
    width: 60px; height: 42px;
    border: none; border-left: 1px solid var(--color-border-detail); border-right: 1px solid var(--color-border-detail);
    text-align: center; font-size: 1rem; font-weight: 700;
    color: var(--color-text-primary-detail); appearance: textfield; -moz-appearance: textfield; /* Tüm tarayıcılar için */
}
#product-quantity-input::-webkit-outer-spin-button,
#product-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; /* Chrome, Safari, Edge */ }

/* Aksiyon Butonları */
.product-action-buttons {
    display: flex; flex-direction: column;
    gap: var(--spacing-md-detail);
    margin-top: var(--spacing-lg-detail);
    margin-bottom: var(--spacing-lg-detail);
}
/* Temel Buton Stili (Genel .btn class'ı varsayıldı) */
.product-action-buttons .btn {
    width: 100%; padding: 16px var(--spacing-lg-detail);
    font-family: var(--font-heading-detail);
    font-size: 1rem; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    border-radius: var(--border-radius-sm-detail);
    transition: all 0.25s ease; cursor: pointer;
    border: 2px solid transparent; display: inline-flex;
    align-items: center; justify-content: center;
    gap: var(--spacing-sm-detail); line-height: 1.2;
    text-decoration: none;
}

.product-action-buttons .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Buton Hiyerarşisi */
.product-action-buttons .btn-buy-now { /* Ana Eylem */
    background-color: var(--color-primary-detail); color: var(--color-text-light-detail);
    box-shadow: var(--shadow-md-detail); order: 1;
}
.product-action-buttons .btn-buy-now:hover:not(:disabled) {
    background-color: var(--color-primary-dark-detail);
    box-shadow: var(--shadow-lg-1-detail); /* Daha büyük gölge */
    transform: translateY(-3px);
}
.product-action-buttons .btn-buy-now i { font-size: 1.15em; }

.product-action-buttons .btn-secondary-action { /* İkincil Eylem */
    background-color: transparent; color: var(--color-primary-detail);
    border: 2px solid var(--color-primary-detail); order: 2; box-shadow: none;
}
.product-action-buttons .btn-secondary-action:hover:not(:disabled) {
    background-color: rgba(var(--color-primary-detail-rgb, 184, 134, 11), 0.05);
    border-color: var(--color-primary-dark-detail);
    color: var(--color-primary-dark-detail); transform: none; box-shadow: none;
}

/* Sosyal Paylaşım */
.product-social-share {
    display: flex; align-items: center; gap: var(--spacing-sm-detail);
    margin-top: var(--spacing-lg-detail); padding-top: var(--spacing-md-detail);
    border-top: 1px solid var(--color-border-detail);
}
.share-label { font-weight: 600; color: var(--color-text-secondary-detail); font-size: 0.85rem; margin-right: var(--spacing-xs-detail);}
.social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background-color: var(--color-surface-detail); color: var(--color-text-secondary-detail);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    font-size: 0.9rem; text-decoration: none;
}
.social-link:hover {
    background-color: var(--color-primary-detail); color: var(--color-text-light-detail);
    transform: scale(1.1);
}

/* ==========================================================================
   MARKA VE KALİTE VURGUSU BÖLÜMÜ
   ========================================================================== */
.brand-quality-section {
    background-color: var(--color-surface-detail, #F7F7F7);
    padding: var(--spacing-xl-detail, 35px) var(--spacing-lg-detail, 25px);
    margin: var(--spacing-xl-detail, 35px) 0; /* Üst ve alttan boşluk */
    border-top: 1px solid var(--color-border-detail, #DDDDDD);
    border-bottom: 1px solid var(--color-border-detail, #DDDDDD);
    border-radius: var(--border-radius-md-detail);
}
.brand-quality-section .section-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--spacing-lg-detail, 25px);
    text-align: center;
}
.quality-item { padding: var(--spacing-md-detail, 15px); }
.quality-icon {
    font-size: 2.2rem;
    color: var(--color-primary-detail, #B8860B);
    margin-bottom: var(--spacing-md-detail, 15px);
    display: inline-block;
}
.quality-title {
    font-family: var(--font-heading-detail, 'Poppins');
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary-detail, #222);
    margin-bottom: var(--spacing-sm-detail, 10px);
}
.quality-text {
    font-size: 0.88rem;
    color: var(--color-text-secondary-detail, #555);
    line-height: 1.6;
}

/* ==========================================================================
   TAMAMLAYICI ÜRÜNLER BÖLÜMÜ
   ========================================================================== */
.complementary-products-section {
    padding: var(--spacing-xl-detail, 35px) 0; /* Üst ve alttan padding */
    border-top: 1px solid var(--color-border-detail); /* Üst sınır çizgisi */
    margin-bottom: var(--spacing-xl-detail); /* Alttan boşluk */
}
.complementary-products-section .section-main-title {
     font-family: var(--font-heading-detail); font-size: 1.8rem;
     color: var(--color-primary-detail); text-align: center;
     margin-bottom: var(--spacing-lg-detail);
}
/* Tamamlayıcı ürünler için .related-products-grid-layout stilini kullan */
.complementary-products-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-lg-detail);
}
/* Tamamlayıcı ürün kartları için .product-card stilini kullan (JS bunu ekliyor) */


/* ==========================================================================
   5. ÜRÜN BİLGİ SEKMELERİ
   ========================================================================== */
.product-info-tabs { margin-top: var(--spacing-xxl-detail); }
.tabs-navigation {
    display: flex; border-bottom: 2px solid var(--color-border-detail);
    margin-bottom: var(--spacing-xl-detail); overflow-x: auto;
}
.tab-nav-link {
    padding: var(--spacing-md-detail) var(--spacing-lg-detail);
    font-family: var(--font-heading-detail); font-size: 1.05rem; font-weight: 600;
    color: var(--color-text-secondary-detail); background: none; border: none;
    border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap;
    transition: color 0.25s ease, border-bottom-color 0.25s ease;
    margin-right: var(--spacing-md-detail); margin-bottom: -2px; /* Border üstüne binmesi için */
}
.tab-nav-link:hover { color: var(--color-primary-detail); }
.tab-nav-link.active { color: var(--color-primary-detail); border-bottom-color: var(--color-primary-detail); }
.tabs-content-area { padding-top: var(--spacing-lg-detail); }
.tab-content-panel { display: none; animation: tabFadeIn 0.4s ease-out; }
.tab-content-panel.active { display: block; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.tab-content-title {
    font-family: var(--font-heading-detail); font-size: 1.6rem;
    color: var(--color-text-primary-detail); margin-bottom: var(--spacing-lg-detail);
}
#product-full-description p { margin-bottom: var(--spacing-lg-detail); line-height: 1.8; }

.specifications-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    border: 1px solid var(--color-border-detail);
    border-radius: var(--border-radius-md-detail);
    overflow: hidden; /* Kenarlık yarıçapının çalışması için */
}
.specifications-data-table tr:nth-child(odd) {
    background-color: var(--color-surface-detail);
}
.specifications-data-table th, 
.specifications-data-table td {
    padding: var(--spacing-md-detail);
    text-align: left;
    border-bottom: 1px solid var(--color-border-detail);
}
.specifications-data-table tr:last-child th,
.specifications-data-table tr:last-child td {
    border-bottom: none; /* Son satırın altındaki çizgiyi kaldır */
}
.specifications-data-table th {
    font-weight: 600;
    width: 35%;
    color: var(--color-text-primary-detail);
    background-color: #e9ecef; /* Başlık sütununa hafif bir arka plan */
}

.application-images-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg-detail);
}
.application-images-grid a { /* Lightbox için link */
    display: block; line-height: 0; border-radius: var(--border-radius-md-detail); overflow: hidden;
    box-shadow: var(--shadow-sm-detail); transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.application-images-grid a:hover {
    box-shadow: var(--shadow-md-detail); /* Hover gölgesi */
    transform: translateY(-3px);
}
.application-images-grid img {
    width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover;
    display: block;
}

.review-item-placeholder { color: var(--color-text-secondary-detail); font-style: italic; padding: var(--spacing-lg-detail) 0;}


/* ==========================================================================
   6. BENZER ÜRÜNLER
   ========================================================================== */
.related-products-section {
    padding: var(--spacing-xxl-detail) 0; /* Üst ve alttan padding */
    background-color: var(--color-surface-detail); /* Gri arka plan */
    margin-top: var(--spacing-xxl-detail); /* Üstten boşluk */
    border-top: 1px solid var(--color-border-detail); /* Üst sınır çizgisi */
}
.related-products-section .section-main-title { /* section-main-title class'ı ortak */
    font-family: var(--font-heading-detail); font-size: 2rem;
    color: var(--color-primary-detail); text-align: center;
    margin-bottom: var(--spacing-xl-detail);
}
.related-products-grid-layout { /* Bu class hem benzer hem tamamlayıcı için ortak */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-xl-detail);
}
.related-products-grid-layout .product-card {
    background: var(--color-background-detail); /* Beyaz arka plan */
    border-radius: var(--border-radius-md-detail);
    box-shadow: var(--shadow-sm-detail);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex; flex-direction: column;
    border: 1px solid var(--color-border-detail);
}
.related-products-grid-layout .product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md-detail); /* Hover gölgesi */
}
.related-products-grid-layout .product-image { /* Genel product-image class'ınız varsa o kullanılır */
    height: 200px; background-color: #eee; overflow: hidden;
    position: relative;
}
.related-products-grid-layout .product-image img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;
}
.related-products-grid-layout .product-card:hover .product-image img {
    transform: scale(1.05);
}
.related-products-grid-layout .product-info { /* Genel product-info class'ınız varsa o kullanılır */
    padding: var(--spacing-md-detail); flex-grow: 1; display: flex; flex-direction: column;
}
.related-products-grid-layout .product-title { /* Genel product-title class'ınız varsa o kullanılır */
    font-size: 1.1rem; font-weight: 600; margin-bottom: var(--spacing-xs-detail);
    color: var(--color-text-primary-detail); line-height: 1.4;
}
.related-products-grid-layout .product-title a {
    color: inherit; text-decoration: none;
}
.related-products-grid-layout .product-title a:hover {
     color: var(--color-primary-detail);
}


.related-products-grid-layout .btn-light.product-btn-detail { /* Genel .btn stilini kullanmalı */
    font-size: 0.85rem; padding: var(--spacing-xs-detail) var(--spacing-sm-detail);
    width: 100%; margin-top: auto; text-align: center;
    border: 1px solid var(--color-border-detail);
    border-radius: var(--border-radius-sm-detail); color: var(--color-secondary-detail);
    background-color: var(--color-surface-detail);
    text-decoration: none; transition: all 0.2s ease;
    font-weight: 600;
}
.related-products-grid-layout .btn-light.product-btn-detail:hover {
     background-color: #e9e9e9; border-color: var(--color-secondary-detail);
     color: var(--color-text-primary-detail);
}


/* ==========================================================================
   7. MOBİL YANIT VERİRLİK
   ========================================================================== */
@media (max-width: 991px) { /* Tablet */
    .product-main-layout { gap: var(--spacing-lg-detail); }
    .product-information-container { padding-left: 0; }
}
@media (max-width: 767px) { /* Mobil */
    .product-gallery-container {
        flex-direction: column;
        position: static; /* Mobil'de yapışkan olmasın */
        top: auto; /* Yapışkanlık kaldırılınca top da auto olsun */
    }
    .product-thumbnails-wrapper {
        order: 2; flex-direction: row; width: 100%; max-height: none; overflow-x: auto;
        padding-right: 0; padding-bottom: var(--spacing-sm-detail);
        /* Mobil yatay scroll çubuğu için padding */
    }
    .main-product-image-wrapper { 
        order: 1;
        width: 100%; /* Mobilde tam genişlik */
        height: auto; /* Yükseklik oranı korunsun */
        max-width: 400px; /* Maksimum genişlik sınırı */
        aspect-ratio: 1/1; /* Kare format korunsun */
    }
    .product-thumbnails-wrapper .thumb-item { width: 65px; height: 65px; }
    #main-product-image { max-height: 400px; }

    .product-main-name { font-size: 1.8rem; }
    .tabs-navigation { justify-content: flex-start; } /* Sekmeler mobil'de sola hizalı */
    .tab-nav-link { font-size: 0.9rem; padding: var(--spacing-sm-detail) var(--spacing-md-detail); }
    .product-action-buttons { gap: var(--spacing-sm-detail); }
     .related-products-grid-layout,
     .complementary-products-grid-layout { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
     .brand-quality-section .section-inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. PHOTOSWIPE ÖZEL STİLLERİ
   ========================================================================== */
.pswp { z-index: 9999 !important; }
.pswp__bg { background: rgba(10, 10, 10, 0.9) !important; }
.pswp__button { background-color: rgba(50, 50, 50, 0.7) !important; border-radius: 50%;}
.pswp__button:hover { background-color: rgba(70, 70, 70, 0.8) !important; }
.pswp__icn { color: white !important; fill: white !important; }

/* Ürün Banner Stili */
.products-banner {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-bottom: var(--spacing-xxl-detail); /* Breadcrumb ve geri dön linki için boşluk */
    background-color: #2d2d2d;
}

.products-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.banner-title {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end; /* Sağ hizalı */
    align-items: center;
    padding-right: 10%;
}

.banner-title h1 {
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem); /* Responsive font boyutu */
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: var(--font-heading-detail); /* Poppins kullan */
    letter-spacing: 2px;
    margin: 0; /* Varsayılan marginleri kaldır */
    .thumb-item.derz-video-thumb {
        background: #222 !important;
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 75px;
        min-height: 75px;
        border: 2px solid #b68d40 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    }
    .thumb-item.derz-video-thumb img {
        width: 48px !important;
        height: 48px !important;
        object-fit: contain;
        opacity: 0.85;
    }
    .thumb-item.derz-video-thumb .video-label {
        position: absolute;
        top: 6px;
        left: 6px;
        background: #b68d40;
        color: #fff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 6px;
        z-index: 2;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .thumb-item.derz-video-thumb .video-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: rgba(0,0,0,0.7);
        border-radius: 50%;
        padding: 12px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}