/* ==========================================================================
   product.css — Ürün detay sayfası (Faz 5): galeri, varyant seçimi, stok
   göstergesi, teknik özellik tablosu, paylaşım ve benzer ürünler.
   Tasarımın token setini (--brand, --r-500, --container) kullanır; iş
   mantığı renk değerlerine dokunmaz (clinerules md.2).
   ========================================================================== */

.pdp { padding: 1.25rem 0 4rem; }

/* --- Üst başlık --- */
.pdp__head { margin-bottom: 1.5rem; }
.pdp__title { font-size: var(--fs-30); font-weight: 600; letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
.pdp__sku { margin-top: .4rem; font-size: var(--fs-12); color: var(--text-3); letter-spacing: var(--ls-wide); }
.pdp__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* --- İki kolonlu düzen --- */
.pdp__layout { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 1024px) {
  .pdp__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
}

/* --- GALERİ ---------------------------------------------------------------- */
.gallery { display: grid; gap: .75rem; }

/* Büyük görsel masaüstünde SAĞ (geniş) sütunda, küçük görseller SOL sütunda
   durur. Mobilde tek kolon olduğu için büyük görsel `order: -1` ile üste alınır;
   ancak `order` grid'de auto-placement sırasını da değiştirdiğinden masaüstünde
   yerleşim açıkça (grid-column/grid-row) verilir — aksi hâlde stage 5rem'lik
   sütuna, küçük görseller 1fr'lik sütuna düşer ve büyük görsel 80px kalır. */
@media (min-width: 768px) {
  .gallery { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .gallery__stage { grid-column: 2; grid-row: 1; }
  .gallery__thumbs { grid-column: 1; grid-row: 1; }

  /* Tek görsel varsa küçük görsel listesi basılmaz; boş sütun kalmasın. */
  .gallery:not(:has(.gallery__thumbs)) { grid-template-columns: minmax(0, 1fr); }
  .gallery:not(:has(.gallery__thumbs)) .gallery__stage { grid-column: 1; }
}

.gallery__stage {
  position: relative;
  order: -1;                         /* mobilde büyük görsel üstte */
  aspect-ratio: 1/1;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
  overflow: hidden;
  display: grid; place-items: center;
}
.gallery__stage img { width: 100%; height: 100%; object-fit: contain; }
.gallery__mono { font-size: var(--fs-24); font-weight: 600; color: var(--text-3); text-align: center; padding: 1rem; }

.gallery__stageTag {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--n-900);
}

.gallery__thumbs {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .gallery__thumbs { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: 26rem; }
}
.gallery__thumb {
  flex: none; width: 4.5rem; height: 4.5rem; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-soft); overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { border-color: var(--border-2); }
.gallery__thumb.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.gallery__thumb--out { opacity: .35; }

/* --- SAĞ SÜTUN ----------------------------------------------------------- */
.pdp__panel { display: flex; flex-direction: column; gap: 1.25rem; }

.pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; }
.pdp__priceNow { font-size: var(--fs-30); font-weight: 700; letter-spacing: var(--ls-tight); color: var(--text); }
.pdp__priceWas { font-size: var(--fs-16); color: var(--text-3); }

.pdp__desc { color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-loose); }

/* Varyant seçenekleri */
.variant { display: flex; flex-direction: column; gap: .5rem; }
.variant__label {
  font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-3);
}
.variant__label b { color: var(--text); font-weight: 600; text-transform: none; letter-spacing: var(--ls-normal); }
.variant__options { display: flex; flex-wrap: wrap; gap: .5rem; }

.vopt {
  display: inline-flex; align-items: center; gap: .4rem;
  min-width: 3rem; height: 2.5rem; padding-inline: .9rem;
  justify-content: center;
  border: 1.5px solid var(--border-2); border-radius: var(--radius-sm);
  font-size: var(--fs-14); color: var(--text-2);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast), color var(--t-fast);
}
.vopt:hover:not(:disabled) { border-color: var(--brand); color: var(--text); }
.vopt.is-active { border-color: var(--brand); background: var(--brand); color: var(--primary-fg); font-weight: 600; }
.vopt:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* Faz 6 Ek: hızlı sepete ekleme lightbox'ında seçenekler etiket + fiyat olarak
   alt alta gösterilir (liste sayfasında seçenek adı ve fiyatı birlikte görünür). */
.vopt--stacked { flex-direction: column; gap: .1rem; height: auto; padding: .5rem .9rem; }
.vopt__meta { font-size: var(--fs-11); font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums; }

/* Stok göstergesi */
.stock { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-14); font-weight: 500; }
.stock--in { color: #15803d; }
.stock--low { color: var(--a-700); }
.stock--out { color: var(--r-600); }
[data-theme="dark"] .stock--in { color: #4ade80; }
[data-theme="dark"] .stock--low { color: var(--a-300); }
.stock__dot { width: .5rem; height: .5rem; border-radius: var(--radius-pill); background: currentColor; flex: none; }

/* Aksiyon satırı */
.pdp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
/* Sepet ve favori ayrı formlardır (iç içe form olmaz); her form satırda eşit
   genişlik alır ve içindeki düğme formu doldurur. */
.pdp__actions > form { flex: 1 1 12rem; display: flex; }
.pdp__actions .btn { flex: 1 1 12rem; }
/* Favoriler (Faz 19): ürün favoride iken düğme marka rengini alır. */
.pdp__actions .btn.is-active { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.pdp__buyNote { font-size: var(--fs-12); color: var(--text-3); }

/* --- PAYLAŞIM ------------------------------------------------------------- */
.share { padding-top: 1.25rem; border-top: 1px solid var(--border); }
.share__title { font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-3); margin-bottom: .6rem; }
.share__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.share__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 2.25rem; padding-inline: .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: var(--fs-13); color: var(--text-2);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast), background var(--t-fast);
}
.share__btn:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.share__btn.is-copied { border-color: #15803d; color: #15803d; }
[data-theme="dark"] .share__btn.is-copied { color: #4ade80; }

/* --- AÇIKLAMA / ÖZELLİKLER ------------------------------------------------ */
.pdp__tabs { margin-top: 2.5rem; }
.pdp__tablist {
  display: flex; gap: .25rem; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.pdp__tablist::-webkit-scrollbar { display: none; }
.pdp__tab {
  position: relative; flex: none;
  padding: .8rem 1.1rem; font-size: var(--fs-14); font-weight: 600;
  color: var(--text-3); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast);
}
.pdp__tab:hover { color: var(--text); }
.pdp__tab.is-active { color: var(--brand-text); border-bottom-color: var(--brand); }
.pdp__tabpanel { padding: 1.5rem 0 0; }
.pdp__tabpanel[hidden] { display: none; }
.pdp__prose { max-width: 52rem; color: var(--text-2); font-size: var(--fs-15); line-height: var(--lh-loose); }
.pdp__prose p + p { margin-top: .9rem; }

/* Teknik özellik tablosu */
.spec-table { width: 100%; max-width: 46rem; border-collapse: collapse; font-size: var(--fs-14); }
.spec-table caption { text-align: left; font-size: var(--fs-13); color: var(--text-3); margin-bottom: .6rem; }
.spec-table th, .spec-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.spec-table th { width: 40%; font-weight: 500; color: var(--text-2); background: var(--bg-soft); }
.spec-table td { color: var(--text); }
.spec-table tbody tr:hover td, .spec-table tbody tr:hover th { background: var(--surface-2); }

/* --- ÖNERİ RAYI ("Bunlar da ilginizi çekebilir") -------------------------- */
/* Aynı kategori yeterli ürün içermiyorsa liste sunucuda öne çıkan/yeni
   ürünlerle tamamlanır; blok bu yüzden her ürün detayında doludur.
   Yatay ray davranışı (oklar, sürükleme, snap) vitrin.css'teki ortak .rail
   kurallarından gelir; ürün detayında otomatik kaydırma kapalıdır (storefront.js). */
.pdp__related { margin-top: 3rem; }
.pdp__relatedHead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 1.25rem;
}
.pdp__relatedHead h2 { margin-top: .35rem; font-size: var(--fs-24); font-weight: 600; letter-spacing: var(--ls-tight); }
.pdp__relatedSub { margin-top: .4rem; max-width: 46rem; color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-loose); }
.pdp__relatedNav { display: flex; align-items: center; gap: .5rem; flex: none; }
/* Dar ekranda başlık ve oklar alt alta geçer (oklar sağa yaslı kalır). */
@media (max-width: 639px) {
  .pdp__relatedHead { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* --- ÜRÜN BULUNAMADI ------------------------------------------------------ */
.pdp-missing {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 4rem 1.5rem; text-align: center;
}
.pdp-missing__ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--text-3); }
.pdp-missing h1 { font-size: var(--fs-24); font-weight: 600; }
.pdp-missing p { max-width: 32rem; color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-loose); }