/*
 * DijiDepo — Yeni vitrin ürün sayfası (frontend/vitrin/urun.php). Kök: .vtp
 * Renk/yazı/köşe admin "Tasarım" değişkenlerinden (--c-*, --vt-*, --radius-base). Pazar yeri ölçeği:
 * başlık 20px, fiyat 26px, düğme 44px, kutular 1px kenar + 8px köşe, gölge yok (admin 999px seçerse düğme hap).
 * product-gallery.css'in .pdp-* sınıfları burada yalnız .vtp altında yeniden düzenlenir (JS aynı).
 */
.vtp, .vtp-bar {
    /* vitrin.css köşe ölçeği (admin theme_border_radius; en az 8px) */
    --vtp-r-card: var(--vt-r-md);
    --vtp-r-box: var(--vt-r-md);
    --vtp-r-btn: var(--vt-r-btn);
    --vtp-r-in: var(--vt-r-sm);
    --vtp-r-sm: var(--vt-r-xs);
    --vtp-gap: 16px;
}
.vtp { padding-bottom: 8px; }
/* calcPrice / dosya JS'i Tailwind "hidden" sınıfıyla aç/kapa yapar: bileşen display kuralları onu ezmesin */
.vtp .hidden, .vtp [hidden] { display: none !important; }

/* ───────── Kırıntı ───────── */
.vtp-crumbs { padding-top: 12px; padding-bottom: 4px; }
.vtp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--vt-fs-xs); color: var(--vt-muted); }
.vtp-crumbs li { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vtp-crumbs li:last-child { flex-shrink: 1; min-width: 0; }
.vtp-crumbs a:hover { color: var(--vt-ink); }
.vtp-crumbs .vt-ic { color: var(--vt-faint); }
.vtp-crumbs [aria-current] { color: var(--vt-ink-2); font-weight: 500; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────── Üst düzen ───────── */
.vtp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 8px; }
@media (min-width: 768px) {
    .vtp-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
    .vtp-media { position: sticky; top: calc(var(--vt-hdr-h) + 16px); }
}
@media (min-width: 1100px) { .vtp-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; } }

/* ───────── Galeri ───────── */
.vtp .pdp-slider-wrap {
    border-radius: var(--vtp-r-card); border: 1px solid var(--vt-line); background: var(--vt-bg-2);
}
.vtp .pdp-slide img { mix-blend-mode: multiply; }
.vtp .pdp-arrow { width: 36px; height: 36px; color: var(--vt-ink); box-shadow: var(--vt-shadow-sm); }
.vtp .pdp-arrow .vt-ic { width: 20px; height: 20px; }
.vtp .pdp-zoom-hint { border-radius: var(--vtp-r-sm); }
.vtp .pdp-dot.active { background: var(--c-primary); }
.vtp .pdp-thumb { border-radius: var(--vtp-r-sm); border: 2px solid transparent; background: var(--vt-bg-2); outline: 1px solid var(--vt-line); outline-offset: -1px; }
.vtp .pdp-thumb.active, .vtp .pdp-thumb:hover { border-color: var(--c-primary); outline-color: transparent; box-shadow: none; transform: none; }
.vtp .pdp-zoom-result { border-radius: var(--vtp-r-card); border-color: var(--vt-line); box-shadow: var(--vt-shadow-lg); }
.vtp-noimg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--vt-faint); font-size: var(--vt-fs-sm); }
.vtp-noimg .vt-ic { width: 56px; height: 56px; }
.vtp-media__badges { position: absolute; top: 10px; left: 10px; z-index: 12; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.vtp-media__badges .vt-badge { font-size: 11px; padding: 3px 7px; border-radius: var(--vtp-r-sm); }

@media (min-width: 1024px) {
    .vtp .pdp-gallery.has-thumbs { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
    .vtp .pdp-gallery.has-thumbs .pdp-slider-wrap { grid-column: 2; grid-row: 1; }
    .vtp .pdp-gallery.has-thumbs .pdp-thumbs {
        grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; margin: 0;
        height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: none;
    }
    .vtp .pdp-gallery.has-thumbs .pdp-thumbs::-webkit-scrollbar { display: none; }
    .vtp .pdp-gallery.has-thumbs .pdp-thumb { flex: 0 0 auto; width: 100%; }
    .vtp .pdp-gallery.has-thumbs .pdp-dots { display: none; }
    .vtp .pdp-gallery.has-thumbs .pdp-zoom-result { width: calc(100% - 90px); left: calc(100% + 28px); }
    .vtp .pdp-zoom-result { left: calc(100% + 28px); }
}
@media (max-width: 1023px) {
    .vtp .pdp-thumbs { grid-template-columns: repeat(6, 1fr); gap: 8px; }
}
@media (max-width: 767px) {
    /* Telefon: tam genişlik, kaydırmalı, nokta göstergeli */
    .vtp-media { margin-inline: calc(-1 * var(--vt-gutter)); }
    .vtp .pdp-slider-wrap { border-radius: 0; border: 0; border-bottom: 1px solid var(--vt-line); }
    .vtp .pdp-thumbs, .vtp .pdp-arrow, .vtp .pdp-zoom-hint { display: none !important; }
    .vtp .pdp-dots { bottom: 14px; background: rgba(255, 255, 255, .82); padding: 5px 9px; border-radius: 999px; }
    .vtp-media__badges { top: 12px; left: 12px; }
    .vtp-crumbs ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
    .vtp-crumbs ol::-webkit-scrollbar { display: none; }
}

/* ───────── Başlık bloğu ───────── */
.vtp-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vtp-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; font-size: var(--vt-fs-sm); }
.vtp-brand { font-weight: 600; color: var(--vt-ink); }
.vtp-cat { color: var(--vt-primary-ink); font-weight: 500; }
.vtp-brand + .vtp-cat::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--vt-faint); margin-right: 10px; vertical-align: middle; }
.vtp-cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.vtp .vtp-title {
    margin: 0; font-size: clamp(18px, calc(var(--font-size-heading) * .62), 21px); line-height: 1.35;
    font-weight: 600; letter-spacing: 0; color: var(--vt-ink);
}
.vtp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: var(--vt-fs-xs); color: var(--vt-muted); }
.vtp-sku b { font-weight: 600; color: var(--vt-ink-2); font-variant-numeric: tabular-nums; }
.vtp-stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--vt-success-ink); }
.vtp-stock i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); }
.vtp-stock.is-low { color: var(--vt-danger-ink); }
.vtp-stock.is-low i { background: var(--c-danger); }
.vtp-stock.is-out { color: var(--vt-muted); }
.vtp-stock.is-out i { background: var(--vt-faint); box-shadow: none; }

/* ───────── Fiyat ───────── */
/* Fiyat: kutusuz, başlığın altında; üstte ve altta ince çizgi */
.vtp-price {
    padding: 12px 0; border-radius: 0; background: none;
    border: 0; border-block: 1px solid var(--vt-line-2);
    font-variant-numeric: tabular-nums;
}
.vtp-price__was { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.vtp-price__old { color: var(--vt-faint); text-decoration: line-through; font-size: var(--vt-fs-sm); }
.vtp-price__pct { display: inline-block; line-height: 20px; padding: 0 6px; white-space: nowrap; border-radius: var(--vtp-r-sm); background: var(--c-danger); color: var(--vt-on-danger); font-size: 11px; font-weight: 600; }
.vtp-price__main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.vtp-price__now { font-size: clamp(22px, 2vw, 26px); font-weight: 700; letter-spacing: 0; line-height: 1.15; color: var(--vt-ink); }
.vtp-price__now--ask { font-size: var(--vt-fs-lg); font-weight: 600; }
.vtp-price__per { font-size: var(--vt-fs-sm); color: var(--vt-muted); font-weight: 500; }
.vtp-vat { align-self: center; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 500; color: var(--vt-success-ink); }
.vtp-vat.is-plus { color: var(--vt-muted); }
.vtp-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--vt-line);
    font-size: var(--vt-fs-sm); color: var(--vt-ink-2);
}
.vtp-total strong { font-size: var(--vt-fs-md); font-weight: 700; color: var(--vt-ink); letter-spacing: 0; }
.vtp-price__hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--vt-fs-xs); color: var(--vt-muted); }
.vtp-price__hint .vt-ic { color: var(--vt-muted); }

/* ───────── Kargo / üretim maddeleri ───────── */
.vtp-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--vt-line); border-radius: var(--vtp-r-box); overflow: hidden; }
.vtp-facts li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--vt-surface); }
.vtp-facts li + li { border-top: 1px solid var(--vt-line-2); }
.vtp-facts li > .vt-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--vt-ink-2); }
.vtp-facts li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vtp-facts b { font-size: var(--vt-fs-sm); font-weight: 600; color: var(--vt-ink); }
.vtp-facts span { font-size: var(--vt-fs-xs); color: var(--vt-muted); line-height: 1.45; }
.vtp-ship.is-free > .vt-ic, .vtp-ship.is-free b { color: var(--vt-success-ink); }

.vtp-ship__bar { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--vt-line-2); overflow: hidden; }
.vtp-ship__bar i { display: block; height: 100%; border-radius: inherit; background: var(--c-success); transition: width .3s var(--vt-ease); }

/* ───────── Kısa açıklama ───────── */
.vtp-summary { font-size: var(--vt-fs-sm); color: var(--vt-ink-2); line-height: 1.6; }
.vtp-summary__txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vtp-summary__txt p { margin: 0; }
.vtp-summary__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 500; color: var(--vt-primary-ink); font-size: var(--vt-fs-xs); }

/* ───────── Kutular (varyant, m², ek uygulama, dosya, yazı) ───────── */
.vtp-box { padding: 14px; border: 1px solid var(--vt-line); border-radius: var(--vtp-r-box); background: var(--vt-surface); }
.vtp-box__head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--vt-fs-sm); font-weight: 600; color: var(--vt-ink); cursor: default; }
.vtp-box__head .vt-ic { color: var(--vt-ink-2); width: 18px; height: 18px; }
.vtp-box__head small { margin-left: auto; font-weight: 500; color: var(--vt-faint); font-size: var(--vt-fs-xs); }
.vtp-req { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 500; color: var(--vt-danger-ink); }
.vtp-label { font-size: var(--vt-fs-sm); font-weight: 600; margin-bottom: 8px; color: var(--vt-ink); }
.vtp-variants { display: flex; flex-direction: column; gap: 14px; }
.vtp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vtp .vtp-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px;
    border: 1px solid var(--vt-line-strong); border-radius: var(--vtp-r-in); background: var(--vt-surface);
    font-size: var(--vt-fs-sm); font-weight: 500; color: var(--vt-ink-2); cursor: pointer;
    transition: border-color var(--vt-dur), background var(--vt-dur), box-shadow var(--vt-dur);
}
.vtp .vtp-chip img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.vtp .vtp-chip:hover:not([disabled]) { border-color: color-mix(in srgb, var(--c-primary) 55%, var(--vt-line)); }
/* selectVariant() seçili düğmeye border-blue-500 / bg-blue-50 / text-blue-700 ekler */
.vtp .variant-btn.vtp-chip.border-blue-500 {
    border-color: var(--c-primary) !important; background: var(--vt-primary-50) !important; color: var(--vt-ink) !important;
    box-shadow: inset 0 0 0 1px var(--c-primary);
}
.vtp .vtp-chip.is-out, .vtp .vtp-chip[disabled] { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.vtp-chip__price { font-size: var(--vt-fs-xs); font-weight: 600; color: var(--vt-primary-ink); }
.vtp-chip__price.is-diff { color: var(--vt-muted); font-weight: 600; }
.vtp .variant-required-msg { border-radius: var(--vtp-r-sm); margin-top: 0; }
.vtp .variant-required-msg .vt-ic { width: 16px; height: 16px; }

/* Girdi */
.vtp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vtp-field > span { font-size: var(--vt-fs-xs); font-weight: 500; color: var(--vt-ink-2); }
.vtp-field small { font-size: 11.5px; color: var(--vt-faint); }
.vtp-field input, .vtp-textarea {
    width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px;
    border: 1px solid var(--vt-line-strong); border-radius: var(--vtp-r-in); background: var(--vt-surface);
    font: inherit; font-size: var(--vt-fs); color: var(--vt-ink); font-variant-numeric: tabular-nums;
    transition: border-color var(--vt-dur), box-shadow var(--vt-dur);
}
.vtp-field input:focus, .vtp-textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--vt-ring); }
.vtp-textarea { resize: vertical; min-height: 92px; font-size: var(--vt-fs-sm); line-height: 1.5; }

/* m² */
.vtp-sqm { background: var(--vt-surface); }
.vtp-sqm__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.vtp-sqm__x { padding-top: 30px; color: var(--vt-faint); font-weight: 500; }
.vtp-sqm__area { margin-top: 12px; font-size: var(--vt-fs-xs); color: var(--vt-muted); font-variant-numeric: tabular-nums; }
.vtp-sqm__area b { color: var(--vt-ink); }
.vtp-calc { margin-top: 12px; padding: 12px; border-radius: var(--vtp-r-in); background: var(--vt-bg-2); border: 1px solid var(--vt-line); display: grid; gap: 8px; font-size: var(--vt-fs-sm); font-variant-numeric: tabular-nums; }
.vtp-calc__row, .vtp-calc__addons > div { display: flex; justify-content: space-between; gap: 12px; color: var(--vt-ink-2); }
.vtp-calc__addons { display: grid; gap: 8px; }
.vtp-calc__addons > div > span:last-child { font-weight: 600; }
.vtp-calc__row b { font-weight: 600; color: var(--vt-ink); white-space: nowrap; }
.vtp-calc__row--total { padding-top: 8px; border-top: 1px solid var(--vt-line); font-weight: 600; color: var(--vt-ink); }
.vtp-calc__row--total b { font-size: var(--vt-fs-md); font-weight: 700; color: var(--vt-ink); }
.vtp-calc__row--total small { font-weight: 600; color: var(--vt-muted); font-size: 11px; }
.vtp-calc__row--muted { font-size: var(--vt-fs-xs); color: var(--vt-muted); }

/* Ek uygulamalar */
.vtp-addons { display: grid; gap: 8px; }
.vtp-addons .vtp-box__head { margin-bottom: 4px; }
.vtp-addon {
    position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--vt-line); border-radius: var(--vtp-r-in); cursor: pointer; background: var(--vt-surface);
    transition: border-color var(--vt-dur), background var(--vt-dur);
}
.vtp-addon:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, var(--vt-line)); }
.vtp-addon input { position: absolute; opacity: 0; pointer-events: none; }
.vtp-addon__check { width: 18px; height: 18px; flex-shrink: 0; border-radius: 4px; border: 1.5px solid var(--vt-line); display: inline-flex; align-items: center; justify-content: center; color: transparent; background: var(--vt-surface); }
.vtp-addon input:checked ~ .vtp-addon__check { background: var(--c-primary); border-color: var(--c-primary); color: var(--vt-on-primary); }
.vtp-addon:has(input:checked) { border-color: var(--c-primary); background: var(--vt-primary-50); }
.vtp-addon input:focus-visible ~ .vtp-addon__check { box-shadow: 0 0 0 3px var(--vt-ring); }
.vtp-addon img { width: 40px; height: 40px; border-radius: var(--vtp-r-sm); object-fit: cover; }
.vtp-addon__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vtp-addon__txt b { font-size: var(--vt-fs-sm); font-weight: 500; }
.vtp-addon__txt small { font-size: var(--vt-fs-xs); color: var(--vt-muted); }
.vtp-addon__price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-size: var(--vt-fs-sm); color: var(--vt-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vtp-addon__price small { font-size: 11px; font-weight: 500; color: var(--vt-faint); }

/* Dosya */
.vtp-file { display: grid; gap: 12px; }
.vtp-file .vtp-box__head { margin: 0; }
.vtp-alert { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--vtp-r-in); background: var(--vt-danger-50); border: 1px solid color-mix(in srgb, var(--c-danger) 25%, var(--vt-surface)); color: var(--vt-danger-ink); font-size: var(--vt-fs-sm); font-weight: 500; }
.vtp-alert svg { width: 16px; height: 16px; flex-shrink: 0; }
.vtp-drop {
    border: 1px dashed var(--vt-line-strong); border-radius: var(--vtp-r-in);
    background: var(--vt-surface); padding: 16px; text-align: center; cursor: pointer;
    transition: border-color var(--vt-dur), background var(--vt-dur);
}
.vtp-drop:hover { border-color: var(--c-primary); }
.vtp-drop__ph { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--vt-fs-sm); color: var(--vt-ink-2); }
.vtp-drop__ph u { color: var(--vt-primary-ink); text-underline-offset: 3px; }
.vtp-drop__ph small { font-size: 11.5px; color: var(--vt-faint); }
.vtp-drop__ic { display: inline-flex; align-items: center; justify-content: center; color: var(--vt-ink-2); margin-bottom: 2px; }
.vtp-drop__ic .vt-ic { transform: rotate(-90deg); width: 20px; height: 20px; }
.vtp-drop__ok { display: flex; align-items: center; gap: 12px; text-align: left; }
.vtp-drop__ok > .vt-ic { color: var(--vt-success-ink); }
.vtp-drop__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vtp-drop__name b { font-size: var(--vt-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtp-drop__name small { font-size: 11.5px; color: var(--vt-muted); }
.vtp-drop__clear { width: 34px; height: 34px; border: 0; border-radius: var(--vtp-r-in); background: var(--vt-surface); color: var(--vt-danger-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vtp-linkbtn { justify-self: start; border: 0; background: none; padding: 0; font-size: var(--vt-fs-xs); font-weight: 500; color: var(--vt-primary-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ───────── Satın alma satırı ───────── */
.vtp-buy { display: flex; align-items: stretch; gap: 8px; }
.vtp-qty { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--vt-line-strong); border-radius: var(--vtp-r-btn); background: var(--vt-surface); overflow: hidden; flex-shrink: 0; }
.vtp-qty button { width: 36px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--vt-ink-2); }
.vtp-qty button:hover { background: var(--vt-bg-2); }
.vtp-qty input { width: 44px; height: 100%; border: 0; text-align: center; font: inherit; font-weight: 600; font-size: var(--vt-fs); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; background: transparent; }
.vtp-qty input::-webkit-outer-spin-button, .vtp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vtp-qty input:focus { outline: none; background: var(--vt-primary-50); }
.vtp .vtp-buy__cta { flex: 1; min-height: 44px; border-radius: var(--vtp-r-btn); font-size: var(--vt-fs-md); font-weight: 600; box-shadow: none; }
.vtp-iconbtn { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--vt-line-strong); border-radius: var(--vtp-r-btn); background: var(--vt-surface); color: var(--vt-ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--vt-dur), color var(--vt-dur), background var(--vt-dur); }
.vtp-iconbtn:hover { border-color: color-mix(in srgb, var(--c-danger) 45%, var(--vt-line)); color: var(--c-danger); }
.vtp-iconbtn.is-fav { border-color: color-mix(in srgb, var(--c-danger) 40%, var(--vt-line)); background: var(--vt-danger-50); }
.vtp-oos { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--vtp-r-box); background: var(--vt-bg-2); font-size: var(--vt-fs-sm); color: var(--vt-muted); }
.vtp-oos b { color: var(--vt-ink); }

.vtp-alt { display: flex; flex-wrap: wrap; gap: 8px; }
.vtp-alt__btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
    border: 1px solid var(--vt-line); border-radius: var(--vtp-r-btn); background: var(--vt-surface); cursor: pointer;
    font-size: var(--vt-fs-xs); font-weight: 500; color: var(--vt-ink-2); transition: border-color var(--vt-dur), background var(--vt-dur);
}
.vtp-alt__btn:hover { border-color: color-mix(in srgb, var(--c-primary) 40%, var(--vt-line)); background: var(--vt-bg-2); }
.vtp-alt__btn--wp .vt-ic { color: #1faa53; }
.vtp-trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--vt-line-2); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--vt-fs-xs); color: var(--vt-muted); }
.vtp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.vtp-trust .vt-ic { color: var(--vt-ink-2); }
.vtp-trust a:hover { color: var(--vt-ink); }

/* ───────── Sekmeler: alt çizgili sekme şeridi, içerik kutusuz ───────── */
.vtp-tabs { margin-top: 32px; }
.vtp-tabs__bar { display: flex; gap: 4px; padding: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--vt-line); overflow-x: auto; scrollbar-width: none; width: 100%; max-width: 100%; box-sizing: border-box; }
.vtp-tabs__bar::-webkit-scrollbar { display: none; }
.vtp-tabs__btn {
    flex-shrink: 0; min-height: 42px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; background: transparent;
    font-size: var(--vt-fs); font-weight: 500; color: var(--vt-muted); cursor: pointer; white-space: nowrap;
    transition: background var(--vt-dur), color var(--vt-dur), box-shadow var(--vt-dur);
}
.vtp-tabs__btn:hover { color: var(--vt-ink); }
.vtp-tabs__btn.is-active { color: var(--vt-ink); font-weight: 600; border-bottom-color: var(--c-primary); }
.vtp-pane { margin-top: 0; padding: 18px 0 0; border: 0; border-radius: 0; background: none; }
.vtp-prose { max-width: 80ch; font-size: var(--vt-fs); line-height: 1.7; color: var(--vt-ink-2); overflow-wrap: anywhere; }
.vtp-prose > :first-child { margin-top: 0; }
.vtp-prose > :last-child { margin-bottom: 0; }
.vtp-prose h2, .vtp-prose h3, .vtp-prose h4 { color: var(--vt-ink); line-height: 1.35; margin: 1.3em 0 .4em; font-size: var(--vt-fs-md); font-weight: 600; }
.vtp-prose p { margin: 0 0 .9em; }
.vtp-prose ul, .vtp-prose ol { padding-left: 1.3em; margin: 0 0 .9em; }
.vtp-prose li { margin: .25em 0; }
.vtp-prose img { height: auto; border-radius: var(--vtp-r-in); }
.vtp-prose a { color: var(--vt-primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.vtp-prose table { border-collapse: collapse; width: 100%; font-size: var(--vt-fs-sm); }
.vtp-prose td, .vtp-prose th { border: 1px solid var(--vt-line); padding: 8px 10px; }
.vtp-specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 0 40px; }
.vtp-specs > div { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--vt-line-2); font-size: var(--vt-fs-sm); }
.vtp-specs dt { flex: 0 0 40%; color: var(--vt-muted); }
.vtp-specs dd { margin: 0; flex: 1; font-weight: 500; color: var(--vt-ink); overflow-wrap: anywhere; }
.vtp-ship-info { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.vtp-ship-info__card { padding: 14px; border-radius: var(--vtp-r-box); border: 1px solid var(--vt-line); background: none; }
.vtp-ship-info__card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--vt-fs); font-weight: 600; }
.vtp-ship-info__card h3 .vt-ic { color: var(--vt-ink-2); width: 18px; height: 18px; }
.vtp-ship-info__card ul { margin: 0; padding-left: 1.15em; display: grid; gap: 6px; font-size: var(--vt-fs-sm); color: var(--vt-ink-2); line-height: 1.5; }
.vtp-ship-info__card a { color: var(--vt-primary-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.vtp-faq { display: grid; gap: 0; max-width: 860px; border-top: 1px solid var(--vt-line); }
.vtp-faq details { border-bottom: 1px solid var(--vt-line); background: none; }
.vtp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: var(--vt-fs-sm); color: var(--vt-ink); }
.vtp-faq summary::-webkit-details-marker { display: none; }
.vtp-faq summary .vt-ic { color: var(--vt-muted); transition: transform var(--vt-dur) var(--vt-ease); }
.vtp-faq details[open] summary .vt-ic { transform: rotate(180deg); }
.vtp-faq p { margin: 0; padding: 0 0 12px; font-size: var(--vt-fs-sm); line-height: 1.6; color: var(--vt-ink-2); }

/* ───────── Şeritler + banner ───────── */
.vtp-sec { padding-top: 28px; }
.vtp-sec + .vtp-sec { padding-top: 16px; }
.vtp-banner { margin-top: 24px; }
.vtp-banner > * { border-radius: var(--vtp-r-card); overflow: hidden; }

/* ───────── Alt eylem çubuğu ───────── */
.vtp-bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 940;
    transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden;
    transition: transform .3s var(--vt-ease), opacity .2s, visibility .2s;
}
.vtp-bar.is-active { transform: none; opacity: 1; visibility: visible; }
.vtp-bar__in {
    max-width: min(980px, var(--container-width)); margin-inline: auto; box-sizing: border-box;
    display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 10px;
    background: #fff;
    border: 1px solid var(--vt-line); border-radius: var(--vtp-r-card); box-shadow: var(--vt-shadow-lg);
}
.vtp-bar__prod { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.vtp-bar__prod img { width: 40px; height: 40px; border-radius: var(--vtp-r-sm); object-fit: cover; background: var(--vt-bg-2); flex-shrink: 0; }
.vtp-bar__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vtp-bar__name { font-size: var(--vt-fs-xs); color: var(--vt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtp-bar__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-variant-numeric: tabular-nums; }
.vtp-bar__price small { font-size: 11px; font-weight: 600; color: var(--vt-muted); }
.vtp-bar__price b { font-size: var(--vt-fs-md); font-weight: 700; color: var(--vt-ink); letter-spacing: 0; }
.vtp-bar__price s { font-size: var(--vt-fs-xs); color: var(--vt-faint); }
.vtp .vtp-bar__cta, .vtp-bar .vtp-bar__cta { min-height: 42px; padding: 0 22px; border-radius: var(--vtp-r-btn); font-size: var(--vt-fs); font-weight: 600; flex-shrink: 0; }

@media (max-width: 767px) {
    /* Telefonda ürün sayfası: alt sekme çubuğunun yerini ürün eylem çubuğu alır (Trendyol düzeni) */
    :root:has(#vtpBar) { --vt-tabbar-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
    body.vt:has(#vtpBar) .vt-tabbar { display: none; }
    .vtp-bar {
        left: 0; right: 0; bottom: 0; transform: none; opacity: 1; visibility: visible;
        padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--vt-surface);
        border-top: 1px solid var(--vt-line); box-shadow: none;
    }
    .vtp-bar__in { max-width: none; height: 62px; padding: 0 var(--vt-gutter); border: 0; border-radius: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .vtp-bar__prod img, .vtp-bar__name { display: none; }
    .vtp-bar .vtp-bar__cta { min-height: 44px; padding: 0 18px; flex: 0 0 52%; }
    .vtp .vtp-buy__cta { display: none; }
    .vtp-buy { justify-content: space-between; }
    .vtp-info { gap: 12px; }
    .vtp-tabs { margin-top: 24px; }
    .vtp-tabs__btn { flex: 1 0 auto; padding: 0 12px; }
    .vtp-specs dt { flex-basis: 45%; }
}

@media (prefers-reduced-motion: reduce) {
    .vtp *, .vtp-bar { transition: none !important; animation: none !important; }
}
.vtp-total__vat { font-size: 11px; font-weight: 500; color: var(--vt-muted); }