/* ══════════════════════════════════════════════════════════════
   ÜRÜN DETAY (.tpd) — ana sayfa / Ürünler sayfası diliyle:
   sıcak gri sahnede makine + arkada silik ürün kodu, sağda bilgi,
   yapışkan bölüm sekmeleri, antrasit teknik bilgi bölümü, ürün kartları.
   Yalnızca ürün detay sayfasında yüklenir.
══════════════════════════════════════════════════════════════ */
.tpd, .tpd-sec, .tpd-tech, .tpd-related { --tpd-line: rgba(29, 29, 27, .12); --tpd-ease: cubic-bezier(.22, 1, .36, 1); font-family: var(--nk-font); color: var(--tk-ink, #1d1d1b); }

.tpd-eyebrow { display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--nk-accent-ink); text-decoration: none; }
.tpd-eyebrow i { display: block; flex: none; width: 34px; height: 2px; background: currentColor; transition: width .3s var(--tpd-ease); }
a.tpd-eyebrow:hover i { width: 48px; }
.tpd-eyebrow--light { color: var(--nk-orange); }

/* ── Üst blok ── */
.tpd {
  position: relative;
  isolation: isolate;
  padding: clamp(2.2rem, 6vh, 3.5rem) var(--nk-pad) clamp(3rem, 8vh, 4.5rem);
  background: #fbfaf7;
}
.tpd::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('img/site/barbed-grid-dark.svg') right -1px top -1px / 160px 160px repeat;
  -webkit-mask-image: radial-gradient(ellipse 38% 60% at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 38% 60% at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  pointer-events: none;
}
.tpd-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }

/* Görsel sahnesi */
.tpd-gallery { min-width: 0; }
.tpd-stage {
  position: relative;
  margin: 0;
  aspect-ratio: 1.3;
  background: #efece7;
  overflow: hidden;
  isolation: isolate;
}
.tpd-stage::after {
  content: '';
  position: absolute;
  left: 14%; right: 14%; bottom: 13%;
  height: 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(29, 29, 27, .24) 0%, rgba(29, 29, 27, 0) 70%);
  filter: blur(5px);
}
.tpd-stage__code {
  position: absolute;
  left: 50%; top: 44%;
  z-index: -2;
  transform: translate(-50%, -50%);
  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: rgba(29, 29, 27, .055);
  pointer-events: none;
  user-select: none;
}
.tpd-stage__frame { position: absolute; inset: 14px; pointer-events: none; }
.tpd-stage__frame i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--nk-orange); }
.tpd-stage__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.tpd-stage__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.tpd-stage__frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.tpd-stage__frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.tpd-stage__zoom { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.tpd-stage__zoom img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--tpd-ease), opacity .25s; }
.tpd-stage__zoom:hover img { transform: scale(1.04); }
.tpd-stage__ico { position: absolute; top: 1.6rem; right: 1.6rem; display: grid; place-items: center; width: 42px; height: 42px; background: #fff; color: var(--tk-ink); pointer-events: none; opacity: .9; }
.tpd-stage__ctrl { position: absolute; left: 1.6rem; bottom: 1.6rem; display: flex; align-items: center; background: var(--tk-ink); color: #fff; }
.tpd-nav { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.tpd-nav:hover { background: var(--nk-orange); color: var(--tk-ink); }
.tpd-counter { padding: 0 .6rem; font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
.tpd-counter b { color: var(--nk-orange); }

.tpd-thumbs { display: flex; gap: .6rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; }
.tpd-thumbs::-webkit-scrollbar { display: none; }
.tpd-thumb { position: relative; flex: none; width: 104px; aspect-ratio: 1.3; padding: 0; border: 0; background: #efece7; cursor: pointer; opacity: .62; transition: opacity .25s; }
.tpd-thumb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--nk-orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--tpd-ease); }
.tpd-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tpd-thumb:hover { opacity: 1; }
.tpd-thumb.is-active { opacity: 1; }
.tpd-thumb.is-active::after { transform: none; }

/* Bilgi */
.tpd-info { position: sticky; top: calc(var(--nk-nav, 76px) + 1.5rem); padding-top: .4rem; }
.tpd-title { margin: 0 0 1.3rem; font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.tpd-codes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.tpd-code { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .8rem; background: var(--tk-ink); color: #fff; }
.tpd-code small { font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.tpd-code b { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--nk-orange); }
.tpd-lead { margin: 0 0 1.6rem; padding-left: 1.1rem; border-left: 3px solid var(--nk-orange); font-size: clamp(.98rem, 1.15vw, 1.08rem); font-weight: 500; line-height: 1.7; }
.tpd-specs { margin: 0 0 1.6rem; border-top: 1px solid var(--tpd-line); }
.tpd-specs div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--tpd-line); font-size: .86rem; }
.tpd-specs dt { font-weight: 500; color: rgba(29, 29, 27, .6); }
.tpd-specs dd { margin: 0; font-weight: 600; text-align: end; }
.tpd-quote { margin: 0 0 1.4rem; font-size: .84rem; line-height: 1.6; color: rgba(29, 29, 27, .62); }

.tpd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1.8rem; }
.tpd-btn { display: inline-flex; align-items: center; gap: .65rem; padding: .95rem 1.4rem; background: var(--nk-orange); color: var(--tk-ink); font-size: .82rem; font-weight: 700; text-decoration: none; transition: background .25s var(--tpd-ease), color .25s, gap .25s var(--tpd-ease); }
.tpd-btn:hover { background: var(--tk-ink); color: #fff; gap: .9rem; }
.tpd-btn--ghost { background: none; border: 1px solid var(--tpd-line); color: var(--tk-ink); font-weight: 600; }
.tpd-btn--ghost:hover { background: var(--tk-ink); border-color: var(--tk-ink); }

.tpd-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tpd-line); }
.tpd-perks li { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1rem 0 0; font-size: .78rem; font-weight: 500; line-height: 1.5; color: rgba(29, 29, 27, .72); }
.tpd-perks li + li { padding-left: 1rem; border-left: 1px solid var(--tpd-line); }
.tpd-perks svg { color: var(--nk-accent-ink); }

/* Sekmeler (Ürünler sayfasındaki .tpl-tabs ile aynı) — beyaz zemin üstünde */
.tpd-tabs { background: rgba(255, 255, 255, .94); }

/* ── Bölümler ── */
.tpd-sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(2rem, 4vw, 4rem); padding: clamp(3.5rem, 9vh, 5.5rem) var(--nk-pad); background: #fff; }
.tpd-sec__head { align-self: start; position: sticky; top: calc(var(--nk-nav, 76px) + 5rem); }
.tpd-sec__title { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.tpd-desc { min-width: 0; }
.tpd-desc .pdx-title { font-weight: 600; }

/* Teknik bilgiler: antrasit zemin */
.tpd-tech { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(2rem, 4vw, 4rem); padding: clamp(3.5rem, 9vh, 5.5rem) var(--nk-pad); background: #0b0b0a; color: #fff; }
.tpd-tech .tpd-sec__title { color: #f4f4f1; }
.tpd-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0; }
.tpd-table div { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tpd-table dt { font-size: .8rem; font-weight: 500; color: rgba(255, 255, 255, .6); }
.tpd-table dd { margin: 0; font-size: .9rem; font-weight: 600; text-align: end; color: #fff; }

/* Benzer ürünler */
.tpd-related { padding: clamp(3.5rem, 9vh, 5.5rem) var(--nk-pad); background: #fbfaf7; border-top: 1px solid var(--tpd-line); }
.tpd-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.8rem, 4vh, 2.6rem); }
.tpd-all { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--tk-ink); text-decoration: none; border-bottom: 1px solid var(--nk-orange); padding-bottom: .25rem; transition: gap .25s var(--tpd-ease); }
.tpd-all:hover { gap: .9rem; color: var(--tk-ink); }
.tpd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tpd-grid .tpc__title { font-size: clamp(1rem, 1.2vw, 1.15rem); }

/* Sağdan sola */
[dir=rtl] .tpd::before { background-position: left -1px top -1px; -webkit-mask-image: radial-gradient(ellipse 38% 60% at 0% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); mask-image: radial-gradient(ellipse 38% 60% at 0% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); }
[dir=rtl] .tpd-stage__ico { right: auto; left: 1.6rem; }
[dir=rtl] .tpd-stage__ctrl { left: auto; right: 1.6rem; }
[dir=rtl] .tpd-nav svg, [dir=rtl] .tpd-btn svg, [dir=rtl] .tpd-all svg { transform: scaleX(-1); }
[dir=rtl] .tpd-lead { padding: 0 1.1rem 0 0; border-left: 0; border-right: 3px solid var(--nk-orange); }
[dir=rtl] .tpd-perks li { padding: 1.1rem 0 0 1rem; }
[dir=rtl] .tpd-perks li + li { padding-right: 1rem; border-left: 0; border-right: 1px solid var(--tpd-line); }
[dir=rtl] .tpd-thumb::after { transform-origin: right; }

@media (max-width: 1100px) {
  .tpd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .tpd-top, .tpd-sec, .tpd-tech { grid-template-columns: 1fr; }
  .tpd-info, .tpd-sec__head { position: static; }
  .tpd-table { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tpd-grid { grid-template-columns: 1fr; }
  .tpd-stage { aspect-ratio: 1.1; }
  .tpd-stage__ctrl { left: .9rem; bottom: .9rem; }
  .tpd-stage__ico { top: 1rem; right: 1rem; }
  .tpd-related__head { flex-direction: column; align-items: flex-start; }
  .tpd-perks { grid-template-columns: 1fr; }
  .tpd-perks li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--tpd-line); padding-bottom: .4rem; }
}

/* Silik ürün kodu sahneye sığsın: sahne genişliğine göre boyutlanır */
.tpd-stage { container-type: inline-size; }
.tpd-stage__code { font-size: min(13cqw, 10rem); }

/* Açıklamadaki teknik tablolar: koyu başlık satırı, sarı model başlıkları, açık satırlar */
.tpd-desc .pdx-table { overflow-x: auto; margin-top: 1.4rem; }
.tpd-desc .pdx-table table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tpd-desc .pdx-table th, .tpd-desc .pdx-table td { padding: .85rem 1rem; border: 0; border-bottom: 1px solid var(--tpd-line); text-align: start; vertical-align: top; }
.tpd-desc .pdx-table tbody tr > *:first-child { font-weight: 600; color: var(--tk-ink); background: #fbfaf7; white-space: nowrap; }
.tpd-desc .pdx-table tbody tr:hover > * { background: #fff8d6; }
/* Başlık satırı: thead varsa onun satırı, yoksa tablonun ilk satırı */
.tpd-desc .pdx-table thead tr > *,
.tpd-desc .pdx-table table > tbody:first-child > tr:first-child > *,
.tpd-desc .pdx-table table > tr:first-child > * { background: var(--tk-ink); color: var(--nk-orange); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 0; white-space: normal; }
.tpd-desc .pdx-table thead tr > *:first-child,
.tpd-desc .pdx-table table > tbody:first-child > tr:first-child > *:first-child { color: rgba(255, 255, 255, .7); }
.tpd-desc .pdx-no { color: var(--nk-accent-ink); }