/* ==========================================================================
   Pro Brake Caliper - Urun detay sayfasi
   site.css degiskenlerini kullanir; yalnizca /urunler/{kod} sayfasinda yuklenir.
   ========================================================================== */

.crumbs {
    background: var(--c-ink-50);
    border-bottom: 1px solid var(--c-ink-200);
}

.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    min-height: 52px;
    padding-block: 12px;
    font-size: 13px;
    color: var(--c-ink-500);
}

.crumbs__list li + li::before {
    content: "/";
    margin-inline: 10px;
    color: var(--c-ink-300);
}

.crumbs__list a:hover {
    color: var(--c-ink-950);
}

.crumbs__list [aria-current] {
    font-weight: 600;
    color: var(--c-ink-900);
}

/* Icerik solda, kategori kenar cubugu sagda (HTML'de kenar cubugu once gelir; sira CSS ile verilir). */
.pd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 40px;
    padding-block: 40px 72px;
}

/* --------------------------------------------------------------------------
   Kategori kenar cubugu
   -------------------------------------------------------------------------- */

.pd__sidebar {
    order: 2;
    display: grid;
    align-content: start;
    gap: 32px;
}

/* --------------------------------------------------------------------------
   Ust bolum: galeri ve urun bilgisi
   -------------------------------------------------------------------------- */

.pd__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
}

/* Galeri: urun kartlariyla ayni gri zemin, yuvarlak buyutme dugmesi */

.gallery {
    position: sticky;
    top: calc(var(--header-h) + 64px);
}

.gallery__stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--c-ink-50);
    cursor: zoom-in;
}

.gallery__image {
    width: 100%;
    height: 100%;
    padding: 28px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.2s var(--ease);
}

.gallery__stage.is-zooming .gallery__image {
    transform: scale(2);
}

.gallery__zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: var(--shadow-1);
    color: var(--c-ink-900);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.gallery__zoom .icon {
    width: 18px;
    height: 18px;
}

.gallery__zoom:hover {
    background: var(--c-accent);
    color: var(--c-white);
}

.gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.gallery__thumb {
    position: relative;
    width: 76px;
    height: 76px;
    background: var(--c-ink-50);
    opacity: 0.65;
    transition: opacity 0.15s var(--ease);
}

.gallery__thumb::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: var(--c-accent);
    transform: scaleX(0);
    transition: transform 0.2s var(--ease);
}

.gallery__thumb:hover,
.gallery__thumb.is-active {
    opacity: 1;
}

.gallery__thumb.is-active::after {
    transform: none;
}

.gallery__thumb img {
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Urun bilgisi */

.pd-info__title {
    font-family: var(--font-head);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink-950);
}

.pd-info__lead {
    margin-top: 10px;
    font-size: 15px;
    color: var(--c-ink-600);
}

.pd-info__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-500);
}

/* Stok kodu: ince cerceveli tek satir; etiket, kod ve kopyala dugmesi */

.pd-info__code {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 6px 6px 6px 14px;
    border: 1px solid var(--c-ink-200);
}

.pd-info__code-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.pd-info__code-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-500);
}

.pd-info__code-value {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--c-ink-950);
}

.pd-info__copy {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--c-ink-500);
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.pd-info__copy .icon {
    width: 15px;
    height: 15px;
}

.pd-info__copy:hover {
    background: var(--c-ink-50);
    color: var(--c-ink-950);
}

.is-copied,
.is-copied .icon {
    color: var(--c-accent-ink) !important;
}

/* Teknik ozellikler: gri kutucuklar */

.spec-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.spec-inline > div {
    padding: 14px 16px;
    background: var(--c-ink-50);
}

.spec-inline dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-500);
}

.spec-inline dd {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--c-ink-950);
}

/* Marka / Modeller: yuvarlak etiketler */

.fitment {
    margin-top: 24px;
}

.fitment .pd-info__label {
    margin-bottom: 10px;
}

.fitment__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fitment__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    border: 1px solid var(--c-ink-200);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-ink-900);
    transition: border-color 0.15s var(--ease);
}

.fitment__item > span {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--c-ink-900);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-white);
}

a.fitment__item:hover {
    border-color: var(--c-ink-700);
}

/* Detayli aciklama: panelde metin editoruyle girilen HTML (bkz. RichText) */
.pd-desc {
    margin-bottom: 24px;
    max-width: 100%;
    overflow-x: auto;
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-ink-700);
}

.pd-desc > * + * {
    margin-top: 12px;
}

.pd-desc h2,
.pd-desc h3,
.pd-desc h4,
.pd-desc h5 {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink-900);
}

.pd-desc ul,
.pd-desc ol {
    padding-left: 22px;
}

.pd-desc ul {
    list-style: disc;
}

.pd-desc ol {
    list-style: decimal;
}

.pd-desc a {
    color: var(--c-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-desc table {
    width: auto;
    min-width: min(100%, 420px);
    border-collapse: collapse;
    font-size: 14px;
}

.pd-desc th,
.pd-desc td {
    padding: 8px 14px;
    border: 1px solid var(--c-ink-200);
    text-align: left;
    vertical-align: top;
}

/* Eski sitedeki tablolarda baslik satiri td ile yazilmistir; ilk satir baslik gibi gosterilir. */
.pd-desc th,
.pd-desc table > :first-child > tr:first-child > td {
    background: var(--c-ink-50);
    font-weight: 700;
    color: var(--c-ink-900);
}

.pd-desc tbody tr:nth-child(even) td {
    background: var(--c-ink-50);
}

/* OEM referanslari: cizgilerle ayrilan satirlar, kopyalanabilir yuvarlak etiketler */

.oem-box {
    margin-top: 28px;
}

.oem-box__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-ink-900);
}

.oem-box__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-ink-500);
}

.oem-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.oem-table tbody th,
.oem-table tbody td {
    padding: 12px 0;
    text-align: left;
    vertical-align: middle;
}

/* Ayirici cizgi yalnizca satir aralarinda; son satirin altinda cizgi olmaz
   (alttaki satin alma bolumunun ust cizgisiyle cift gorunmesin). */
.oem-table tbody tr + tr > * {
    border-top: 1px solid var(--c-ink-100);
}

.oem-table tbody th {
    width: 34%;
    padding-right: 16px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-800);
}

.oem-table tbody th.is-muted {
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    color: var(--c-ink-400);
}

.oem-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.oem-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--c-ink-50);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-ink-900);
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.oem-chip .icon {
    width: 13px;
    height: 13px;
    color: var(--c-ink-400);
    transition: color 0.15s var(--ease);
}

.oem-chip:hover {
    background: var(--c-ink-900);
    color: var(--c-white);
}

.oem-chip:hover .icon {
    color: var(--c-accent-bright);
}

.oem-box__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent-ink);
    cursor: pointer;
}

.oem-box__more:hover {
    color: var(--c-ink-950);
}

.oem-box__more .icon {
    width: 14px;
    height: 14px;
    transition: transform 0.2s var(--ease);
}

.oem-box__more[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

/* Satin alma: adet, sepete ekle, teklif iste */

.buy-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--c-ink-200);
}

.buy-box__cart {
    flex: 1 1 200px;
}

/* 4'lu hizli islem bari: Paylas, QR Kod, Teknik Kart, Teklif Iste */

/* Ustte uc ikincil islem birlesik serit halinde, altta tam genislikte Teklif Iste */
.pd-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
    border: 1px solid var(--c-ink-200);
    background: var(--c-white);
}

.pd-action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    background: var(--c-ink-50);
    color: var(--c-ink-900);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pd-action + .pd-action:not(.pd-action--accent) {
    border-inline-start: 1px solid var(--c-ink-200);
}

/* Hover'da ustten kirmizi cizgi */
.pd-action::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--c-accent);
    transform: scaleX(0);
    transition: transform 0.25s var(--ease);
}

.pd-action:hover:not(:disabled) {
    background: var(--c-ink-900);
    color: var(--c-white);
}

.pd-action:hover:not(:disabled)::before,
.pd-action.is-loading::before {
    transform: scaleX(1);
}

.pd-action:disabled {
    cursor: wait;
    opacity: 0.85;
}

.pd-action__icon {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--c-accent);
}

.pd-action__icon .icon {
    width: 19px;
    height: 19px;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

.pd-action__label {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Kirmizi tam genislikte Teklif Iste butonu */
.pd-action--accent {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 14px;
    min-height: 62px;
    padding-inline: 22px;
    background: var(--c-accent);
    color: var(--c-white);
}

.pd-action--accent::before {
    display: none;
}

.pd-action--accent .pd-action__icon {
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--c-white);
}

.pd-action--accent .pd-action__label {
    font-size: 14px;
    letter-spacing: 0.1em;
}

.pd-action__arrow {
    width: 18px;
    height: 18px;
    margin-inline-start: auto;
    transition: transform 0.2s var(--ease);
}

.pd-action--accent:hover:not(:disabled) {
    background: var(--c-accent-strong);
    color: var(--c-white);
}

.pd-action--accent:hover .pd-action__arrow {
    transform: translateX(4px);
}

/* Yukleme (loading) ve tamamlanma durumlari */
.pd-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(227, 49, 43, 0.22);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: pdSpin 0.65s linear infinite;
}

.pd-action__icon .pd-spinner {
    position: absolute;
    opacity: 0;
    transform: scale(0.75);
    pointer-events: none;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

.pd-action.is-loading {
    background: rgba(227, 49, 43, 0.06);
}

.pd-action.is-loading .pd-action__icon .icon {
    opacity: 0;
    transform: scale(0.75);
}

.pd-action.is-loading .pd-action__icon .pd-spinner {
    opacity: 1;
    transform: scale(1);
}

@keyframes pdSpin {
    to {
        transform: rotate(360deg);
    }
}

.pd-actions__status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(227, 49, 43, 0.3);
    border-radius: var(--radius-sm);
    background: rgba(227, 49, 43, 0.05);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-900);
}

.pd-actions__status[hidden] {
    display: none !important;
}

/* QR Kod Modali */
.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 14, 14, 0.72);
    backdrop-filter: blur(6px);
}

.qr-modal[hidden] {
    display: none !important;
}

.qr-modal__card {
    width: min(100%, 400px);
    padding: 24px;
    border: 1px solid var(--c-ink-200);
    border-radius: var(--radius-lg);
    background: var(--c-white);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.qr-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-ink-200);
}

.qr-modal__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c-accent);
}

.qr-modal__title {
    margin-top: 2px;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 800;
    color: var(--c-ink-950);
}

.qr-modal__close {
    flex-shrink: 0;
}

.qr-modal__body {
    display: grid;
    justify-items: center;
    margin-top: 18px;
    text-align: center;
}

.qr-modal__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 224px;
    height: 224px;
    padding: 14px;
    border: 1px solid var(--c-ink-200);
    border-radius: var(--radius);
    background: var(--c-white);
}

.qr-modal__loader {
    display: grid;
    justify-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-ink-600);
}

.qr-modal__loader[hidden] {
    display: none !important;
}

.qr-modal__canvas {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.qr-modal__canvas svg {
    width: 100%;
    height: 100%;
    display: block;
}

.qr-modal__product {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-ink-950);
}

.qr-modal__hint {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-ink-500);
}

.qr-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.qr-modal__btn {
    justify-content: center;
    width: 100%;
}

/* Teknik Kart (A4 Yazdirma / PDF) baslik ve alt bilgi alanlari ekranda gizlidir */
.pd-datasheet-head,
.pd-datasheet-foot {
    display: none;
}

/* WhatsApp satiri */

.pd-info__wa {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--c-ink-200);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink-900);
    transition: border-color 0.2s var(--ease);
}

.pd-info__wa-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-ink-50);
    color: var(--c-accent-ink);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pd-info__wa-icon .icon {
    width: 18px;
    height: 18px;
}

.pd-info__wa-arrow {
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
    color: var(--c-ink-400);
    transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

.pd-info__wa:hover {
    border-color: var(--c-ink-900);
}

.pd-info__wa:hover .pd-info__wa-icon {
    background: var(--c-accent);
    color: var(--c-white);
}

.pd-info__wa:hover .pd-info__wa-arrow {
    color: var(--c-accent);
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Urun Bilesenleri ve Kullanildigi Urunler
   -------------------------------------------------------------------------- */

.pd-block {
    margin-top: 56px;
}

.pd-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--c-ink-800);
}

.pd-block__title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-950);
}

.pd-block__count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-ink-500);
}

.parts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.parts-table thead th {
    padding: 10px 12px;
    background: var(--c-ink-50);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    color: var(--c-ink-500);
}

.parts-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--c-ink-200);
    vertical-align: middle;
}

.parts-table tbody tr:hover {
    background: var(--c-ink-50);
}

.parts-table__img {
    width: 76px;
}

.parts-table__img img {
    width: 56px;
    height: 56px;
    border: 1px solid var(--c-ink-200);
    background: var(--c-white);
    object-fit: contain;
}

.parts-table__code a {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--c-accent-ink);
    white-space: nowrap;
}

.parts-table__name a {
    font-weight: 600;
    color: var(--c-ink-950);
}

.parts-table a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.parts-table__qty {
    font-family: var(--font-mono);
    font-weight: 700;
}

.usedin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.usedin__item {
    display: flex;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--c-ink-200);
    background: var(--c-white);
    transition: border-color 0.15s var(--ease);
}

.usedin__item:hover {
    border-color: var(--c-ink-700);
}

.usedin__img {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border: 1px solid var(--c-ink-100);
    position: relative;
}

.usedin__img img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--c-white);
    transform-origin: left center;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Gorsel kartin disina tasarak 2 kat buyur; kartin kendisi sabit kalir. */
.usedin__img:hover img {
    z-index: 5;
    transform: scale(2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.usedin__body {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.usedin__name {
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink-950);
}

.usedin__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
}

.usedin__meta div {
    display: flex;
    gap: 6px;
}

.usedin__meta dt {
    color: var(--c-ink-500);
}

.usedin__meta dd {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--c-ink-900);
}

.usedin__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent-ink);
}

.usedin__link .icon {
    width: 14px;
    height: 14px;
}

/* --------------------------------------------------------------------------
   Teknik ozellikler ve teklif talebi (acik bolumler)
   -------------------------------------------------------------------------- */

.pd-section {
    margin-top: 56px;
    scroll-margin-top: calc(var(--header-h) + 60px);
}

.pd-section__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--c-ink-900);
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-950);
}

.pd-section__title::before {
    content: "";
    width: 22px;
    height: 12px;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--c-accent) 0 9px, transparent 9px 13px, var(--c-accent-bright) 13px 22px);
    transform: skewX(-24deg);
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.spec-table th,
.spec-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-ink-200);
    text-align: left;
}

.spec-table th {
    width: 32%;
    background: var(--c-ink-50);
    font-weight: 600;
    color: var(--c-ink-600);
}

.spec-table td {
    font-weight: 600;
    color: var(--c-ink-950);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .pd {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 28px;
    }

    .pd__top {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery {
        position: static;
        max-width: 560px;
    }
}

@media (max-width: 1024px) {
    .pd {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 24px;
    }

    /* Kenar cubugu asagi indiginde ana alan genisler; gorsel ve bilgi yeniden yan yana durur. */
    .pd__top {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 28px;
    }

    .gallery {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .pd__top {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Tek kolonda gorsel tum genislige yayilmaz; ortalanir ve sinirlanir. */
    .gallery {
        width: 100%;
        max-width: 480px;
        margin-inline: auto;
    }
}

@media (max-width: 560px) {
    .stepper {
        flex: 1 1 100%;
    }

    .stepper__input {
        flex: 1;
    }

    .buy-box .btn {
        padding-inline: 12px;
    }

    .oem-table tbody th {
        width: 36%;
        font-size: 12px;
    }

    .quote-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .quote-form__foot .btn {
        width: 100%;
    }

    /* Bilesen tablosu kart gorunumune gecer */
    .parts-table thead {
        display: none;
    }

    .parts-table tr {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--c-ink-200);
    }

    .parts-table td {
        padding: 0;
        border: 0;
    }

    .parts-table__img {
        grid-row: span 5;
        width: auto;
    }

    .parts-table td[data-label] {
        display: flex;
        gap: 6px;
        font-size: 13px;
    }

    .parts-table td[data-label]::before {
        content: attr(data-label) ":";
        color: var(--c-ink-500);
    }

    .usedin {
        grid-template-columns: minmax(0, 1fr);
    }

    .usedin__img {
        width: 72px;
        height: 72px;
    }

    .pd-action:not(.pd-action--accent) {
        flex-direction: column;
        gap: 6px;
        min-height: 72px;
        padding-inline: 6px;
    }

    .pd-action:not(.pd-action--accent) .pd-action__label {
        font-size: 11px;
    }

    .qr-modal__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Oval kose duzeni (bkz. site.css)
   -------------------------------------------------------------------------- */
.gallery__stage,
.usedin__item {
    border-radius: var(--radius-lg);
}

.gallery__thumb,
.pd-info__code,
.spec-inline > div,
.pd-info__wa {
    border-radius: var(--radius);
    overflow: hidden;
}

.usedin__img,
.parts-table__img img {
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Teknik Kart (@media print A4 PDF Gorunumu - Sifir Sunucu Yuku)
   -------------------------------------------------------------------------- */
@media print {
    @page {
        size: A4 portrait;
        margin: 12mm 14mm;
    }

    body {
        background: #ffffff !important;
        color: #171616 !important;
        font-size: 11pt;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .site-header,
    .skip-link,
    .crumbs,
    .pd__sidebar,
    .gallery__zoom,
    .gallery__thumbs,
    .pd-info__copy,
    .oem-chip .icon,
    .oem-box__more,
    .buy-box,
    .pd-actions,
    .pd-actions__status,
    .pd-info__wa,
    #teklif,
    .pslider,
    .site-footer,
    .cookie,
    .toast,
    .lightbox,
    .qr-modal,
    .usedin__link {
        display: none !important;
    }

    .container.pd {
        display: block !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .pd__main {
        width: 100% !important;
    }

    /* A4 Ust Antet: Logo, Firma Bilgisi, Belge Basligi ve QR Kod */
    .pd-datasheet-head {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding-bottom: 14px;
        margin-bottom: 20px;
        border-bottom: 2px solid #e3312b;
    }

    .pd-datasheet-head__brand {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .pd-datasheet-head__logo {
        width: 150px;
        height: auto;
        object-fit: contain;
    }

    .pd-datasheet-head__company {
        display: grid;
        gap: 2px;
        font-size: 9pt;
        line-height: 1.35;
        color: #4a4848;
    }

    .pd-datasheet-head__company strong {
        font-size: 11pt;
        color: #171616;
    }

    .pd-datasheet-head__meta {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .pd-datasheet-head__doc {
        display: grid;
        justify-items: end;
        gap: 2px;
        text-align: right;
    }

    .pd-datasheet-head__badge {
        display: inline-block;
        padding: 2px 8px;
        background: #e3312b;
        color: #ffffff;
        font-size: 8pt;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .pd-datasheet-head__code {
        font-family: var(--font-mono);
        font-size: 14pt;
        font-weight: 800;
        color: #171616;
    }

    .pd-datasheet-head__date {
        font-size: 8.5pt;
        color: #6e6b6b;
    }

    .pd-datasheet-head__qr {
        display: grid;
        justify-items: center;
        gap: 3px;
        font-size: 7.5pt;
        font-weight: 700;
        text-transform: uppercase;
        color: #4a4848;
    }

    .pd-datasheet-head__qr-box {
        width: 68px;
        height: 68px;
        padding: 4px;
        border: 1px solid #d6d3d3;
        background: #ffffff;
    }

    .pd-datasheet-head__qr-box svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Urun gorseli ve temel bilgiler yan yana */
    .pd__top {
        display: grid !important;
        grid-template-columns: 230px minmax(0, 1fr) !important;
        gap: 24px !important;
        align-items: start !important;
    }

    .gallery {
        position: static !important;
        max-width: 230px !important;
    }

    .gallery__stage {
        border: 1px solid #d6d3d3;
        background: #f8f7f7 !important;
    }

    .gallery__image {
        padding: 14px;
    }

    .pd-info__title {
        font-size: 18pt;
    }

    .pd-info__code {
        margin-top: 10px;
        padding: 4px 12px;
    }

    /* Gizli OEM satirlari yazdirmada tamamiyla gorunur */
    .oem-table tbody tr[hidden] {
        display: table-row !important;
    }

    .oem-box,
    .pd-block,
    .pd-section {
        margin-top: 22px !important;
        break-inside: avoid-page;
    }

    .parts-table thead {
        display: table-header-group !important;
    }

    .parts-table tr {
        display: table-row !important;
        break-inside: avoid;
    }

    .parts-table td {
        display: table-cell !important;
        padding: 6px 8px !important;
        border-bottom: 1px solid #e5e3e3 !important;
    }

    .parts-table td[data-label]::before {
        content: none !important;
    }

    .usedin {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .usedin__item {
        break-inside: avoid;
        padding: 10px !important;
    }

    .pd-datasheet-foot {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 28px;
        padding-top: 10px;
        border-top: 1px solid #d6d3d3;
        font-size: 8.5pt;
        color: #6e6b6b;
    }
}