/*
 * İkinci El — Soft Ton Katmanı
 * Kural: Tema geometrisine (border-radius, buton stili, font, padding) dokunma.
 * Sadece zemin + çok hafif ton farkı + küçük etiket = sayfayı diğerlerinden ayırt et.
 */

/* ---------- Zemin — tema lacivertinin (#11294F) %5 karşılığı ---------- */
body.m304-ikinci-el {
    background-color: #F3F4F7;
}

body.m304-ikinci-el .site-content,
body.m304-ikinci-el .content-area,
body.m304-ikinci-el #primary,
body.m304-ikinci-el main,
body.m304-ikinci-el .woocommerce {
    background-color: transparent;
}

/* ---------- Üst Bilgi Barı ---------- */
.m304-ikinci-el-infobar {
    background: #fff;
    color: #11294F;
    padding: 14px 20px;
    text-align: left;
    border: 1px solid #E8E5DB;
    border-left: 3px solid #11294F;
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.6;
}
.m304-ikinci-el-infobar__title {
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #8A7B5C;
    margin-right: 10px;
}
.m304-ikinci-el-infobar__text {
    display: inline;
    color: #4A4A4A;
}
.m304-ikinci-el-infobar__bullets {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}
.m304-ikinci-el-infobar__bullets span::before {
    content: "·";
    display: inline-block;
    margin-right: 8px;
    color: #8A7B5C;
    font-weight: 700;
}
.m304-ikinci-el-infobar__bullets span:first-child::before {
    display: none;
}

/* ---------- Rozet — sadece ikinci el kategorisindeki ürün kartlarına/tekil üründe basılır ---------- */
/* product_cat-ikinci-el-endustriyel-mutfak-ekipmanlari class'ı Woo tarafından her ürün kartına
   ve tekil ürün <div.product>'a eklenir. Bu sayede "Son Görüntülenenler" gibi widget'larda
   sadece gerçekten ikinci el olan ürünlerde rozet çıkar, diğerlerinde çıkmaz. */

/* DEFANSİF RESET: Önceki versiyonların tarayıcı/LiteSpeed cache'inde kalmış olabilecek
   geniş selector'larını nötrle. :not() ile ikinci el ürünleri hariç tutuyoruz ki
   aşağıdaki spesifik kuralla çakışmasın. */
.product:not(.product_cat-ikinci-el-endustriyel-mutfak-ekipmanlari) .product-thumbnail::before,
.product:not(.product_cat-ikinci-el-endustriyel-mutfak-ekipmanlari) .product-thumbnail::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.product.product_cat-ikinci-el-endustriyel-mutfak-ekipmanlari .product-thumbnail {
    position: relative;
}

.product.product_cat-ikinci-el-endustriyel-mutfak-ekipmanlari .product-thumbnail::before,
body.single-product.m304-ikinci-el .woocommerce-product-gallery::before {
    content: "İKİNCİ EL";
    position: absolute;
    top: 16px;
    left: -6px;
    z-index: 5;
    display: inline-block;
    padding: 8px 20px 8px 14px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    background: linear-gradient(135deg, #B8953F 0%, #D4AF63 45%, #9C7A2A 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - 10px) 50%,
        100% 100%,
        0 100%
    );
    box-shadow: 0 3px 10px rgba(17, 41, 79, 0.22);
    pointer-events: none;
    animation: m304-ribbon-shimmer 3.2s ease-in-out infinite;
}

/* Sol alt 3D kıvrım — kartlarda */
.product.product_cat-ikinci-el-endustriyel-mutfak-ekipmanlari .product-thumbnail::after {
    content: "";
    position: absolute;
    top: calc(16px + 25px);
    left: -6px;
    width: 0;
    height: 0;
    z-index: 4;
    border-style: solid;
    border-width: 0 6px 6px 0;
    border-color: transparent #5C4410 transparent transparent;
    pointer-events: none;
}

/* Tekil üründe galeri position-relative garantisi.
   ÖNEMLİ: Tema `top: 50px` veriyor (sticky pozisyon için). position: relative aktifken
   bu değer galeriyi aşağı iterdi — o yüzden top'u açıkça nötrlüyoruz. */
body.single-product.m304-ikinci-el .woocommerce-product-gallery {
    position: relative;
    top: 0 !important;
}

/* Tekil ürün rozetini biraz daha büyüt — hero'da daha belirgin olsun */
body.single-product.m304-ikinci-el .woocommerce-product-gallery::before {
    top: 18px;
    font-size: 13.5px;
    padding: 9px 22px 9px 16px;
    letter-spacing: 1.6px;
}

@keyframes m304-ribbon-shimmer {
    0% {
        background-position: 0% 0%;
        box-shadow: 0 3px 10px rgba(17, 41, 79, 0.22);
    }
    50% {
        background-position: 100% 0%;
        box-shadow: 0 4px 14px rgba(184, 149, 63, 0.38);
    }
    100% {
        background-position: 0% 0%;
        box-shadow: 0 3px 10px rgba(17, 41, 79, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product.product_cat-ikinci-el-endustriyel-mutfak-ekipmanlari .product-thumbnail::before,
    body.single-product.m304-ikinci-el .woocommerce-product-gallery::before {
        animation: none;
    }
}

/* KDV/Nakliye notu */
body.m304-ikinci-el .m304-ikinci-el-note {
    display: inline-block;
    background: transparent;
    color: #6B6050 !important;
    padding: 2px 0;
    font-size: 11.5px;
    font-weight: 500;
    border-left: none;
    font-style: italic;
}
body.m304-ikinci-el .m304-ikinci-el-note::before {
    content: "* ";
    color: #8A7B5C;
    font-weight: 700;
    font-style: normal;
}

/* ---------- Tekil Ürün Sayfası — tema geometrisine dokunma ---------- */
body.m304-ikinci-el.single-product div.product {
    background: transparent;
}

/* ---------- Menü — İkinci El öğesi için altın nokta (gerçek DOM span) ---------- */
/* PHP tarafında <span class="m304-ikinci-el-menu-dot"> enjekte ediliyor; tema hover efekti
   (::after underline) bu elementi ezmez. Her sayfada çalışır. */
.m304-ikinci-el-menu-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #B8953F;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(184, 149, 63, 0.55);
    animation: m304-menu-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes m304-menu-dot-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(184, 149, 63, 0.55);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(184, 149, 63, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .m304-ikinci-el-menu-dot {
        animation: none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .m304-ikinci-el-infobar {
        padding: 12px 14px;
        font-size: 12px;
    }
    .m304-ikinci-el-infobar__bullets {
        gap: 10px;
        font-size: 11px;
    }
}