/* ==========================================================================
   Ürün detay — kategorinin rengini alır
   ========================================================================== */

.pd { padding-block: 26px 40px; }
.pd__in { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: start; }

.pd__gallery { position: sticky; top: calc(var(--hd-h) + 16px); display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.pd__stage { position: relative; grid-column: 2; aspect-ratio: 4/5; overflow: hidden; background: var(--card-bg); cursor: zoom-in; }
.pd__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.pd__slide.is-on { opacity: 1; }
.pd__img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .5s var(--ease); }
.pd__stage.is-zoom .pd__slide.is-on .pd__img { transform: scale(1.9); }
.pd__stage.is-zoom { cursor: zoom-out; }
.pd__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--fg); transform: translateY(-50%); opacity: 0; transition: opacity .3s; }
.pd__stage:hover .pd__nav, .pd__nav:focus-visible { opacity: 1; }
.pd__nav--prev { left: 14px; }
.pd__nav--next { right: 14px; }
.pd__thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.pd__thumbs button { aspect-ratio: 4/5; overflow: hidden; opacity: .55; outline-offset: 2px; transition: opacity .3s; }
.pd__thumbs [aria-selected="true"] { opacity: 1; outline: 1px solid var(--accent); }
.pd__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd__gallery:not(:has(.pd__thumbs)) { grid-template-columns: 1fr; }
.pd__gallery:not(:has(.pd__thumbs)) .pd__stage { grid-column: 1; }

.pd__info { padding-top: 10px; }
.pd__name { margin: 14px 0 10px; font-size: clamp(2.4rem, 1.4rem + 3vw, 4.4rem); }
.pd__sub { font: italic 500 1.35rem/1.3 var(--font-d); color: var(--fg-2); }
.pd__price { display: flex; align-items: baseline; gap: 14px; margin: 28px 0; padding-block: 20px; border-block: 1px solid var(--line); font: 600 1.6rem var(--font-t); }
.pd__price s { font-size: 1.05rem; font-weight: 400; color: var(--muted); }
.pd__ask { font: 500 1rem var(--font-t); color: var(--muted); }
.pd__colors { border: 0; padding: 0; margin: 0 0 26px; }
.pd__colors legend { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.pd__colors legend b { color: var(--fg); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .95rem; }
.pd__colors div { display: flex; gap: 10px; }
.pd__colors .swatch i { width: 34px; height: 34px; }
.pd__tone { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; color: var(--fg-2); }
.pd__tone i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line); }
.pd__cta { display: grid; gap: 10px; }
.pd__cta .btn--wa { --h: 58px; font-size: .82rem; }
.pd__cta-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.pd__cta-row .btn { padding: 0 16px; }
.pd__facts { display: grid; gap: 16px; margin: 30px 0; padding: 22px; background: var(--bg-2); }
.pd__facts li { display: flex; gap: 14px; align-items: flex-start; }
.pd__facts .i { color: var(--accent); width: 22px; height: 22px; margin-top: 2px; }
.pd__facts b { display: block; font-size: .9rem; }
.pd__facts small { display: block; font-size: .8rem; color: var(--muted); }
.pd__acc details { border-bottom: 1px solid var(--line); }
.pd__acc summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; list-style: none; cursor: pointer; font: 500 1.35rem var(--font-d); }
.pd__acc summary::-webkit-details-marker { display: none; }
.pd__acc summary .i { color: var(--accent); width: 20px; transition: transform .4s var(--ease); }
.pd__acc details[open] summary .i { transform: rotate(45deg); }
.pd__acc .prose { padding-bottom: 22px; color: var(--fg-2); font-size: .95rem; }
.pd__dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 20px; padding-bottom: 22px; font-size: .92rem; }
.pd__dl dt { color: var(--muted); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.pd__dl dd { margin: 0; }

.pd-more { border-top: 1px solid var(--line); }

.pd-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .5s var(--ease-out);
}
.pd-bar.is-on { transform: none; }
.pd-bar b { display: block; font: 500 1.05rem/1.2 var(--font-d); }
.pd-bar span { font-size: .8rem; color: var(--muted); }

@media (max-width: 900px) {
  .pd__in { grid-template-columns: 1fr; }
  .pd__gallery { position: static; grid-template-columns: 1fr; }
  .pd__stage { grid-column: 1; margin-inline: calc(var(--gut) * -1); }
  .pd__thumbs { grid-row: auto; flex-direction: row; overflow-x: auto; }
  .pd__thumbs button { flex: 0 0 64px; }
  .pd__nav { opacity: 1; }
  .pd-bar { display: flex; }
  .wa-float { display: none; }
}

/* Videolu ürün: dikey video, yakınlaştırma yok */
.pd__stage:has(.pd__video) { aspect-ratio: 9 / 16; max-height: 82vh; cursor: default; margin-inline: auto; width: 100%; max-width: calc(82vh * 9 / 16); }
.pd__video { object-fit: cover; background: #111; }
.pd__stage.is-zoom .pd__slide.is-on .pd__video { transform: none; }