/* =========================================================
   ÜRÜN DETAY SAYFASI
   ========================================================= */

/* üst bölüm */
.pd-hero { position: relative; background: var(--c-dark-green); color: #fff; }
.pd-hero .path-background { min-height: 100%; }
.pd-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 10rem var(--grid-margin) 6rem; width: 100%; }
.pd-hero__title { max-width: 18ch; font-size: max(2.5rem, min(4.5vw, 115px)); font-weight: 400; line-height: .95; letter-spacing: min(-.045vw, -1.2px); }

/* ürün */
.pd-main { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 4rem var(--grid-margin) 6rem; }
.pd-media { overflow: hidden; aspect-ratio: 1; border-radius: 1.5rem; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 38, 92, .08); }
.pd-media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }

.pd-info { display: flex; flex-direction: column; gap: 1.75rem; }
.pd-info__category { width: fit-content; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; color: var(--c-lime); }

.pd-desc { display: flex; flex-direction: column; gap: .9rem; max-width: 56ch; color: var(--c-dark-gray); }
.pd-desc h3 { margin-top: .5rem; font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; color: var(--c-dark-green); }
.pd-desc strong { font-weight: 500; color: var(--c-dark-green); }
.pd-desc ul, .pd-desc ol { display: flex; flex-direction: column; gap: .4rem; padding-left: 1.25rem; }
.pd-desc ul { list-style: disc; }
.pd-desc ol { list-style: decimal; }
.pd-desc li::marker { color: var(--c-lime); }
.pd-desc a { color: var(--c-dark-green); text-decoration: underline; text-underline-offset: .2em; }

.pd-specs { display: flex; flex-direction: column; border-top: 1px solid rgba(15, 38, 92, .12); }
.pd-specs__row { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(15, 38, 92, .12); }
.pd-specs__row dt { font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; color: var(--c-dark-gray); }
.pd-specs__row dd { font-size: 1.0625rem; color: var(--c-dark-green); }
.pd-specs__mono { font-family: var(--font-mono); font-size: 1rem; letter-spacing: .03em; }

.pd-oem { display: flex; flex-wrap: wrap; gap: .4rem; }
.pd-copy {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-radius: .5rem;
  background: var(--c-dirty-white); color: var(--c-dark-green); cursor: pointer; transition: background-color .2s, color .2s;
}
.pd-copy__code { font-family: var(--font-mono); font-size: .875rem; letter-spacing: .03em; }
.pd-copy svg { color: var(--c-dark-gray); transition: color .2s; }
.pd-copy:hover { background: rgba(0, 156, 180, .12); }
.pd-copy:hover svg { color: var(--c-dark-green); }
.pd-copy.is-done { background: var(--c-lime); color: var(--c-dark-green); }
.pd-copy.is-done svg { color: var(--c-dark-green); }
.pd-oem__hint { margin-top: .6rem; font-size: .8125rem; color: var(--c-dark-gray); }

.pd-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.pd-tags li { padding: .4rem .85rem; border-radius: 999px; background: var(--c-dirty-white); font-size: .9375rem; }

.pd-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1.1rem 1.5rem;
  border-radius: 999px; background: var(--c-dirty-white); color: var(--c-dark-green);
  font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; transition: background-color .25s, color .25s;
}
.pd-btn svg { width: 1.1rem; height: 1.1rem; }
.pd-btn--primary { background: var(--c-dark-green); color: #fff; }
.pd-btn:hover { background: var(--c-lime); color: var(--c-dark-green); }
.pd-note { max-width: 46ch; color: var(--c-dark-gray); }

/* benzer ürünler */
.pd-related { padding: 2rem var(--grid-margin) 8rem; }
.pd-related__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-bottom: 2.5rem; }
.pd-related__head .title-h2 { max-width: 22ch; }
.pd-related__more { display: flex; justify-content: center; margin-top: 2rem; }

@media (min-width: 768px) {
  .pd-specs__row { grid-template-columns: 11rem 1fr; align-items: baseline; }
  .pd-actions { grid-template-columns: 1fr 1fr; }
  .pd-related__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .pd-hero__inner { padding: 13rem var(--grid-margin) 8rem; }
  .pd-main { grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); align-items: start; padding-top: 6rem; }
  .pd-media { grid-column: 1 / span 6; position: sticky; top: 8rem; }
  .pd-info { grid-column: 8 / span 5; padding-top: 1rem; }
}