/* ═══════════════════════════════════════════════════════════════════════
   Uyan Parça — Ürün Sayfası (OPB_URUN_V1 · Eki 2026). Yalnız product.html.
   İmza: "parça etiketi" — üretici, parça no, uyum ve birim kutu etiketi gibi.
   Satın alma akışına (sepet, hemen al, PayTR) dokunmaz; yalnız görünüm.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --p-gece: #003330; --p-lacivert: #00483f; --p-lacivert-2: #0b6157;
  --p-turuncu: #ec6a0a; --p-turuncu-2: #f5862f; --p-turuncu-acik: #fde6d3;
  --p-zemin: #f3f8f7; --p-cizgi: #dbe7e4; --p-metin: #10302c; --p-soluk: #586b68;
  --p-kenar: clamp(16px, 2.4vw, 48px);
}
body.opb-urun { background: var(--p-zemin); }
body.opb-urun .container { max-width: none !important; width: 100% !important; box-sizing: border-box; padding-left: var(--p-kenar) !important; padding-right: var(--p-kenar) !important; }
body.opb-urun #wzProduct { padding-top: 22px; }

/* ── Üç sütun ─────────────────────────────────────────────────────── */
body.opb-urun .wz-pdx {
  display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 380px; gap: clamp(20px, 2.2vw, 36px) !important;
  align-items: start; background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
}

/* Galeri: kare, beyaz kart */
body.opb-urun .wz-pdx-gallery { width: auto !important; max-width: none !important; display: flex; gap: 14px; position: sticky; top: 16px; }
body.opb-urun .wz-pdx-thumbs-col { height: auto !important; max-height: none !important; gap: 10px; }
body.opb-urun .wz-pdx-thumb { width: 72px !important; height: 72px !important; border-radius: 14px !important; border: 1.5px solid var(--p-cizgi) !important; background: #fff !important; overflow: hidden; }
body.opb-urun .wz-pdx-thumb.active { border-color: var(--p-turuncu) !important; box-shadow: 0 0 0 3px rgba(236, 106, 10, .15); }
body.opb-urun .wz-pdx-thumb img { object-fit: contain !important; mix-blend-mode: multiply; }
body.opb-urun .wz-pdx-main-wrap {
  flex: 1; aspect-ratio: 1 / 1 !important; height: auto !important; border-radius: 24px !important; border: 1px solid var(--p-cizgi) !important;
  background: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #f6f8fb 70%, #eef2f7 100%) !important; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 51, 48,.04), 0 18px 40px rgba(0, 51, 48,.07);
}
body.opb-urun .wz-pdx-main { height: 100% !important; border: 0 !important; background: transparent !important; }
body.opb-urun .wz-pdx-main img { object-fit: contain !important; mix-blend-mode: multiply; padding: 7%; box-sizing: border-box; }
body.opb-urun .wz-pdx-arrow { width: 42px !important; height: 42px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid var(--p-cizgi) !important; color: var(--p-lacivert) !important; box-shadow: 0 6px 16px rgba(0, 51, 48,.12) !important; font-size: 22px !important; }
body.opb-urun .wz-pdx-arrow:hover { background: var(--p-turuncu) !important; color: #fff !important; border-color: transparent !important; }
body.opb-urun .wz-pdx-ai-toolbar { border-radius: 999px !important; box-shadow: 0 6px 16px rgba(0, 51, 48,.12) !important; }

/* ── Bilgi sütunu ─────────────────────────────────────────────────── */
body.opb-urun .wz-pdx-info { width: auto !important; max-width: none !important; padding-top: 4px; }
body.opb-urun .wz-pdx-cat-row { display: none !important; }
.u-ust-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.u-cip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.u-cip svg { width: 14px; height: 14px; }
.u-cip-uyum { background: var(--p-turuncu-acik); color: #b5510a; }
.u-cip-uyum:hover { background: #ffe2d3; }
.u-cip-stok { background: #ecfdf3; color: #15803d; }
.u-cip-stok.az { background: #fff7ed; color: #b5510a; }
.u-cip-stok i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.opb-urun h1.wz-pdx-title {
  font-family: OpbSora, Inter, sans-serif !important; font-weight: 700 !important; font-size: clamp(22px, 1.9vw, 30px) !important;
  line-height: 1.25 !important; letter-spacing: -.015em; color: var(--p-lacivert) !important; margin: 0 0 18px !important;
}
body.opb-urun .wz-pdx-rating-row.u-bos { display: none !important; }

/* İmza: parça etiketi */
.u-etiket {
  position: relative; border-radius: 18px; overflow: hidden; margin: 0 0 18px;
  background: linear-gradient(135deg, var(--p-gece) 0%, var(--p-lacivert) 70%, var(--p-lacivert-2) 100%); color: #fff;
  box-shadow: 0 14px 34px rgba(0, 51, 48, .22);
}
.u-etiket::before { /* etiketin delik kenarı */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(180deg, var(--p-turuncu) 0 10px, transparent 10px 16px);
}
.u-etiket-ust { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 10px 24px; border-bottom: 1px dashed rgba(157, 176, 196, .35); }
.u-etiket-ust small { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: #9db0c4; text-transform: uppercase; }
.u-etiket-ust b { font-family: OpbSora, Inter, sans-serif; font-size: 15px; letter-spacing: .06em; color: #fff; text-transform: uppercase; }
.u-etiket-izgara { display: grid; grid-template-columns: 1fr 1fr; }
.u-etiket-oge { padding: 12px 20px 14px 24px; min-width: 0; }
.u-etiket-oge + .u-etiket-oge { border-left: 1px solid rgba(157, 176, 196, .18); }
.u-etiket-oge:nth-child(n+3) { border-top: 1px solid rgba(157, 176, 196, .18); }
.u-etiket-oge:nth-child(3) { border-left: 0; }
.u-etiket-oge small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #9db0c4; text-transform: uppercase; margin-bottom: 4px; }
.u-etiket-oge span { display: block; font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-kod { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: .04em; }
.u-kopyala { margin-left: 8px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; border-radius: 7px; height: 24px; padding: 0 8px; font-size: 11px; font-weight: 700; cursor: pointer; vertical-align: 2px; }
.u-kopyala:hover { background: var(--p-turuncu); border-color: transparent; }
body.opb-urun .wz-pdx-specs-table { display: none !important; }

/* Uyum kutusu */
.u-uyum { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--p-cizgi); margin-bottom: 16px; }
.u-uyum-ikon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--p-turuncu), var(--p-turuncu-2)); box-shadow: 0 8px 18px rgba(236, 106, 10,.25); }
.u-uyum-ikon svg { width: 24px; height: 24px; }
.u-uyum strong { display: block; font-size: 15px; color: var(--p-lacivert); }
.u-uyum p { margin: 2px 0 0; font-size: 13px; color: var(--p-soluk); line-height: 1.45; }
.u-uyum-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.u-uyum-dugmeler button, .u-uyum-dugmeler a { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.u-uyum-dugmeler .ana { background: var(--p-lacivert); color: #fff; border: 0; }
.u-uyum-dugmeler .ana:hover { background: var(--p-turuncu); }
.u-uyum-dugmeler .ikincil { background: #fff; color: var(--p-lacivert); border: 1px solid var(--p-cizgi); }
.u-uyum-dugmeler .ikincil:hover { border-color: var(--p-turuncu); color: var(--p-turuncu); }

/* Paylaş / favori / fiyat alarmı satırı */
body.opb-urun .custom-pdx-btn { color: var(--p-lacivert) !important; font-weight: 600 !important; }
body.opb-urun .custom-pdx-btn .circle-ico { background: #fff !important; border: 1px solid var(--p-cizgi) !important; color: var(--p-lacivert) !important; }
body.opb-urun .custom-pdx-btn:hover .circle-ico { border-color: var(--p-turuncu) !important; color: var(--p-turuncu) !important; }
body.opb-urun .u-kargo-not { background: #fff !important; border: 1px solid var(--p-cizgi) !important; border-radius: 14px !important; padding: 12px 16px !important; color: var(--p-lacivert) !important; }
body.opb-urun .u-kargo-not > span:first-child { font-size: 0 !important; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--p-turuncu-acik); color: var(--p-turuncu); flex: 0 0 auto; }
body.opb-urun .u-kargo-not > span:first-child svg { width: 18px; height: 18px; }

/* ── Satın alma kutusu ────────────────────────────────────────────── */
body.opb-urun .wz-pdx-aside { width: auto !important; position: sticky; top: 16px; }
body.opb-urun .wz-pdx-aside > div {
  position: static !important; border-radius: 22px !important; border: 1px solid var(--p-cizgi) !important; padding: 0 !important; gap: 0 !important; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 51, 48,.04), 0 22px 48px rgba(0, 51, 48,.10) !important;
}
body.opb-urun .wz-pdx-aside .u-marka { display: none !important; }
body.opb-urun .wz-pdx-aside .u-fiyat { padding: 22px 24px 16px !important; background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); }
body.opb-urun #pdxPriceVal { font-family: OpbSora, Inter, sans-serif !important; font-size: 38px !important; font-weight: 700 !important; color: var(--p-lacivert) !important; letter-spacing: -.025em !important; }
.u-fiyat-alt { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--p-soluk); }
.u-fiyat-alt div { display: flex; align-items: center; gap: 8px; }
.u-fiyat-alt svg { width: 16px; height: 16px; color: var(--p-turuncu); flex: 0 0 auto; }
.u-fiyat-alt b { color: var(--p-lacivert); }
body.opb-urun .wz-pdx-aside .u-adet { padding: 0 24px 14px !important; }
body.opb-urun .wz-pdx-aside .u-adet > span { font-size: 11.5px !important; letter-spacing: .12em !important; color: var(--p-soluk) !important; }
body.opb-urun .wz-pdx-aside .u-adet > div { border-radius: 12px !important; border-color: var(--p-cizgi) !important; height: 46px !important; }
body.opb-urun .wz-pdx-aside .u-dugmeler { padding: 0 24px 22px !important; gap: 10px !important; }
body.opb-urun #pdxCartBtn {
  height: 54px !important; border-radius: 14px !important; border: 0 !important; text-transform: none !important; font-size: 16px !important; font-weight: 800 !important;
  background: linear-gradient(135deg, var(--p-turuncu) 0%, var(--p-turuncu-2) 100%) !important; color: #fff !important;
  box-shadow: 0 10px 24px rgba(236, 106, 10, .32) !important; gap: 8px;
}
body.opb-urun #pdxCartBtn:hover { filter: brightness(1.05); transform: translateY(-1px); }
body.opb-urun #pdxBuyBtn { height: 50px !important; border-radius: 14px !important; text-transform: none !important; font-size: 15px !important; background: var(--p-lacivert) !important; }
body.opb-urun #pdxBuyBtn:hover { background: var(--p-gece) !important; }
body.opb-urun .u-wa { height: 46px !important; border-radius: 14px !important; text-transform: none !important; background: #fff !important; color: #128c4a !important; border: 1.5px solid #bfe8d0 !important; box-shadow: none !important; font-weight: 700 !important; }
body.opb-urun .u-wa:hover { background: #effbf4 !important; }
.u-guvence { list-style: none; margin: 0; padding: 16px 24px 18px; border-top: 1px solid var(--p-cizgi); background: var(--p-zemin); display: grid; gap: 10px; }
.u-guvence li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--p-lacivert); font-weight: 600; }
.u-guvence svg { width: 18px; height: 18px; color: var(--p-turuncu); flex: 0 0 auto; }

/* ── Sekmeler ─────────────────────────────────────────────────────── */
body.opb-urun .wz-pdx-tabs { margin-top: 36px !important; border-radius: 22px !important; border: 1px solid var(--p-cizgi) !important; background: #fff !important; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 51, 48,.04) !important; }
body.opb-urun .wz-pdx-tab-nav { background: #fff !important; border-bottom: 1px solid var(--p-cizgi) !important; padding: 0 12px !important; overflow-x: auto; scrollbar-width: none; }
body.opb-urun .wz-pdx-tab-nav button { font-size: 14px !important; font-weight: 700 !important; color: var(--p-soluk) !important; padding: 0 16px !important; height: 56px; border-bottom: 2px solid transparent !important; white-space: nowrap; background: transparent !important; }
body.opb-urun .wz-pdx-tab-nav button.active { color: var(--p-lacivert) !important; border-bottom-color: var(--p-turuncu) !important; }
body.opb-urun .wz-pdx-tab-body { padding: 26px 28px !important; color: var(--p-metin); }
body.opb-urun .wz-pdx-tab-body h3 { font-family: OpbSora, Inter, sans-serif; font-size: 18px !important; color: var(--p-lacivert) !important; }

/* ── Benzer ürünler kartları ──────────────────────────────────────── */
body.opb-urun #wzRelatedSec { margin-top: 40px !important; }
body.opb-urun #wzRelatedSec .wz-section-head h2 { font-family: OpbSora, Inter, sans-serif; font-size: 24px !important; color: var(--p-lacivert) !important; }
body.opb-urun #wzRelated { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 18px !important; }
body.opb-urun .ty-card { background: #fff !important; border: 1px solid var(--p-cizgi) !important; border-radius: 18px !important; box-shadow: none !important; overflow: hidden; display: flex !important; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s !important; }
body.opb-urun .ty-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(0, 51, 48,.12) !important; border-color: rgba(236, 106, 10,.35) !important; }
body.opb-urun .ty-card-img { aspect-ratio: 1 / 1; height: auto !important; background: radial-gradient(120% 90% at 50% 35%, #fff 0%, #f3f5f9 70%, #e9edf3 100%) !important; }
body.opb-urun .ty-card-img img { object-fit: contain !important; padding: 9%; box-sizing: border-box; mix-blend-mode: multiply; }
body.opb-urun .ty-card-body { padding: 14px 16px 16px !important; display: flex; flex-direction: column; flex: 1; gap: 6px; }
body.opb-urun .ty-card-name { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px !important; font-weight: 600 !important; color: var(--p-metin) !important; line-height: 1.4 !important; }
body.opb-urun .ty-card-brand { display: block !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .08em; color: var(--p-turuncu) !important; text-transform: uppercase; }
body.opb-urun .ty-verified, body.opb-urun .ty-card-status, body.opb-urun .ty-card-variants:empty { display: none !important; }
body.opb-urun .ty-card-price-block { margin-top: auto !important; }
body.opb-urun .ty-price-now { font-size: 21px !important; font-weight: 800 !important; color: var(--p-lacivert) !important; }
body.opb-urun .ty-card-add-btn { height: 42px !important; border-radius: 12px !important; border: 0 !important; background: var(--p-lacivert) !important; color: #fff !important; font-weight: 700 !important; }
body.opb-urun .ty-card:hover .ty-card-add-btn { background: var(--p-turuncu) !important; }

/* ── Mobil ────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  body.opb-urun .wz-pdx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.opb-urun .wz-pdx-aside { grid-column: 1 / -1; position: static; }
}
@media (max-width: 768px) {
  body.opb-urun #wzProduct { padding-top: 10px; }
  body.opb-urun .wz-pdx { grid-template-columns: 1fr; gap: 18px !important; }
  body.opb-urun .wz-pdx-gallery { position: static; flex-direction: column-reverse; }
  body.opb-urun .wz-pdx-thumbs-col { flex-direction: row !important; overflow-x: auto; }
  body.opb-urun .wz-pdx-thumb { width: 60px !important; height: 60px !important; flex: 0 0 auto; }
  body.opb-urun .wz-pdx-main-wrap { border-radius: 18px !important; }
  body.opb-urun h1.wz-pdx-title { font-size: 21px !important; }
  .u-etiket-oge { padding: 10px 14px 12px 18px; }
  .u-etiket-oge span { font-size: 14px; }
  .u-uyum { align-items: flex-start; }
  body.opb-urun #pdxPriceVal { font-size: 32px !important; }
  body.opb-urun .wz-pdx-tab-body { padding: 18px !important; }
  body.opb-urun #wzRelated { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}
@media (prefers-reduced-motion: reduce) { body.opb-urun .ty-card, body.opb-urun #pdxCartBtn { transition: none !important; } }

/* Sekmeler v2: hap çubuğu, ikonlu */
body.opb-urun .wz-pdx-tab-nav { display: flex !important; gap: 6px; padding: 10px !important; margin: 14px 14px 0 !important; border: 0 !important; border-radius: 16px !important; background: var(--p-zemin) !important; }
body.opb-urun .wz-pdx-tab-nav button { display: inline-flex !important; align-items: center; gap: 8px; height: 44px !important; padding: 0 16px !important; border-radius: 12px !important; border: 0 !important; color: var(--p-soluk) !important; transition: background .2s, color .2s, box-shadow .2s; }
body.opb-urun .wz-pdx-tab-nav button svg { width: 17px; height: 17px; flex: 0 0 auto; }
body.opb-urun .wz-pdx-tab-nav button:hover { color: var(--p-lacivert) !important; background: rgba(255,255,255,.7) !important; }
body.opb-urun .wz-pdx-tab-nav button.active { background: #fff !important; color: var(--p-lacivert) !important; box-shadow: 0 4px 14px rgba(0, 51, 48, .1) !important; }
body.opb-urun .wz-pdx-tab-nav button.active svg { color: var(--p-turuncu); }
body.opb-urun .wz-pdx-tab-nav button::after { display: none !important; }
@media (max-width: 768px) { body.opb-urun .wz-pdx-tab-nav { margin: 10px 10px 0 !important; padding: 6px !important; } body.opb-urun .wz-pdx-tab-nav button { height: 40px !important; padding: 0 12px !important; font-size: 13px !important; } }

/* Özellikler tablosu: premium */
body.opb-urun .wz-pdx-tab-body h3 { padding-bottom: 14px; border-bottom: 1px solid var(--p-cizgi); margin-bottom: 18px !important; }
body.opb-urun table.u-ozellik { width: 100%; max-width: 860px; border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--p-cizgi) !important; border-radius: 16px; overflow: hidden; }
body.opb-urun table.u-ozellik tr > * { border: 0 !important; border-bottom: 1px solid var(--p-cizgi) !important; padding: 15px 20px !important; background: #fff !important; font-size: 14.5px; }
body.opb-urun table.u-ozellik tr:last-child > * { border-bottom: 0 !important; }
body.opb-urun table.u-ozellik tr > :first-child { width: 34%; background: var(--p-zemin) !important; color: var(--p-soluk) !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .1em; text-transform: uppercase; border-right: 1px solid var(--p-cizgi) !important; }
body.opb-urun table.u-ozellik tr > :last-child { color: var(--p-lacivert) !important; font-weight: 700; }
body.opb-urun table.u-ozellik tr:hover > :last-child { background: #fffaf7 !important; }
body.opb-urun table.u-ozellik .u-kod { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .03em; }
.u-kopyala-k { margin-left: 12px; height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--p-cizgi); background: #fff; color: var(--p-lacivert); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.u-kopyala-k:hover { border-color: var(--p-turuncu); color: var(--p-turuncu); }
@media (max-width: 768px) { body.opb-urun table.u-ozellik tr > * { padding: 12px 14px !important; } body.opb-urun table.u-ozellik tr > :first-child { width: 40%; } }