/* product.css */

/* ── ANA SAYFA KAPSAYICI ── */
.product-page-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px 96px;
  width: 100%;
  box-sizing: border-box;
}

/* ── BREADCRUMBna ── */
.pd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 0 32px;
  flex-wrap: wrap;
}
.pd-crumb {
  font-size: 0.83rem;
  color: #999;
  text-decoration: none;
  transition: color 0.15s;
}
.pd-crumb:hover { color: #1a1a1a; }
.pd-crumb-sep { font-size: 0.83rem; color: #ccc; }
.pd-crumb-current { color: #1a1a1a; font-weight: 500; }

/* ── ÜRÜN HERO ── */
.pd-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
}

/* ── GÖRSEL SÜTUN ── */
.pd-image-col { display: flex; flex-direction: column; gap: 14px; }

.pd-image-box {
  position: relative;
  border: 1.5px solid #d8d2d2;
  border-radius: 22px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  background: #fafaf8;
  overflow: hidden;
}
.pd-main-img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}

/* Stokta Yok Efekti */
.pd-image-box.is-out-of-stock .pd-main-img {
  filter: grayscale(1) opacity(0.55);
}
.pd-image-box.is-out-of-stock .pd-main-img.is-zoomed {
  transform: none;
}

/* ── GÖRSEL MERCEK ZOOM'U ── */
@media (hover: hover) and (pointer: fine) {
  .pd-image-box { cursor: zoom-in; }

  .pd-main-img.is-zoomed {
    transform: scale(2.2);
  }
}

/* ── GÖRSEL SLİDER ── */
.pd-slider-track {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pd-slider-track::-webkit-scrollbar { display: none; }

.pd-slider-img {
  scroll-snap-align: start;
  flex: 0 0 100%;
  max-height: 340px;
  object-fit: contain;
  display: block;
}

/* ── SLIDER OKLARI ── */
.pd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.32);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 1.3rem;
  opacity: 0;
  transition: opacity 0.22s, background 0.18s;
  z-index: 3;
}
.pd-image-box:hover .pd-arrow { opacity: 1; }
.pd-arrow:hover { background: rgba(0, 0, 0, 0.52); }
.pd-arrow-prev { left: 14px; }
.pd-arrow-next { right: 14px; }

/* ── BİLGİ SÜTUN ── */
.pd-info-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 18px;
}

.pd-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
}

.pd-subtitle {
  font-size: 1rem;
  color: #999;
  margin: -10px 0 0;
  font-weight: 400;
}

.pd-description {
  font-size: 0.93rem;
  color: #555;
  line-height: 1.8;
}

/* Fiyat satırı */
.pd-buy-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 4px;
}

.pd-price {
  font-size: 1.65rem;
  font-weight: 700;
  color: #1a1a1a;
}

.pd-old-price {
  font-size: 1.05rem;
  color: #b0b0a8;
  text-decoration: line-through;
}

/* Stok durumu */
.pd-stock {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
}
.pd-stock.instock  { background: rgba(97,255,158,0.18); color: #1a7a45; }
.pd-stock.outstock { background: rgba(255,80,80,0.12);  color: #b03030; }

/* ── VARYANT PİLLLERİ ── */
.pd-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.pd-variant-pill {
  padding: 9px 22px;
  border: 2px solid #d8d8d2;
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  background: transparent;
  color: #555;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  outline: none;
}
.pd-variant-pill:hover  { border-color: #61ff9e; color: #1a1a1a; }
.pd-variant-pill.active { border-color: #61ff9e; background: rgba(97,255,158,0.18); color: #1a1a1a; font-weight: 600; }

/* ── SEPETE EKLE BUTONU ── */
.pd-actions { display: flex; justify-content: flex-end; }

.pd-btn-cart {
  padding: 14px 36px;
  background: #61ff9e;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.96rem;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: opacity 0.18s, transform 0.16s;
}
.pd-btn-cart:hover  { opacity: 0.85; }
.pd-btn-cart:active { transform: scale(0.97); }

/* ── BÖLÜM GENEL ── */
.pd-section { padding: 48px 0 0; }

.pd-section-title {
  font-size: 1.22rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 14px;
  letter-spacing: -0.2px;
}

.pd-hr {
  border: none;
  border-top: 1.5px solid #e4e4e0;
  margin: 0 0 30px;
}

/* ── ÖZELLİKLER LİSTESİ ── */
.pd-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  text-align: center;
}

.pd-features-list li {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 9px;
}

.pd-features-list li::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: #61ff9e;
  border-radius: 50%;
  display: inline-block;
}

/* ── HR ORTALAMA ── */
.pd-hr-center {
  max-width: 300px;
  margin: 0 auto 30px;
}

/* ── ÖZELLİK CHIPLERİ ── */
.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding-top: 4px;
}

/* Bağımsız Chipler */
.pd-chips-standalone {
  padding-top: 32px;
}

.pd-chip {
  padding: 10px 24px;
  border: 1.5px solid #d8d8d2;
  border-radius: 100px;
  font-size: 0.87rem;
  color: #555;
  display: inline-block;
}

/* ── YORUMLAR ── */
.pd-no-comments {
  text-align: center;
  color: #b8b8b8;
  font-size: 0.94rem;
  padding: 22px 0 24px;
  margin: 0;
}

/* Yorum Yap Butonu */
.pd-review-write-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0 auto 34px;
  padding: 11px 26px;
  background: transparent;
  border: 2px solid #61ff9e;
  border-radius: 100px;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s, transform 0.16s;
}
.pd-review-write-btn:hover  { background: rgba(97,255,158,0.18); }
.pd-review-write-btn:active { transform: scale(0.97); }

/* ── YORUM CAROUSEL ── */
.pd-review-carousel {
  --pd-review-card-min: 220px;
  --pd-review-gap: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-review-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: #1a1a1a;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s;
}
.pd-review-arrow:hover { background: rgba(0,0,0,0.12); }
.pd-review-arrow.is-disabled { opacity: 0.3; cursor: default; pointer-events: none; }
/* Ok Gizleme */
.pd-review-carousel:not(.is-scrollable) .pd-review-arrow { visibility: hidden; }

.pd-review-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  outline: none;
  /* YENİ: Pointer Events ile yapılan yatay sürüklemeyi tarayıcının kendi
     dokunmatik kaydırma/yakınlaştırma jestiyle yarışmaktan çıkarır — dikey
     sayfa kaydırması (pan-y) serbest kalır, yatay hareketi JS (pointermove)
     yönetir. Bu olmadan touch'ta bazı tarayıcılar ilk yatay hareketi
     sayfa kaydırması sanıp pointer oturumunu "pointercancel" ile erken
     sonlandırabiliyordu. */
  touch-action: pan-y;
}
.pd-review-track {
  display: flex;
  gap: var(--pd-review-gap);
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: grab;
}
/* Sürükleme Seçim Engeli */
.pd-review-carousel.is-dragging .pd-review-track {
  transition: none;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.pd-review-card {
  flex: 0 0 var(--pd-review-item-w, 100%);
  width: var(--pd-review-item-w, 100%);
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid #e4e4e0;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-review-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pd-review-name { font-size: 0.95rem; font-weight: 700; color: #1a1a1a; }
.pd-review-stars { flex-shrink: 0; white-space: nowrap; }
.pd-review-stars i { font-size: 0.82rem; color: #ffc107; }
.pd-review-stars i.pd-star-empty { color: #e4e4e0; }
.pd-review-date { font-size: 0.78rem; color: #999; margin: 0; }
.pd-review-edited { font-style: italic; color: #bbb; }
.pd-review-text { font-size: 0.88rem; color: #444; line-height: 1.6; margin: 0; flex: 1; overflow-wrap: break-word; }
.pd-review-own-actions { display: flex; gap: 14px; margin-top: 2px; }
.pd-review-own-actions button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: #999;
  transition: color 0.15s;
}
.pd-review-own-actions button:hover  { color: #1a1a1a; }
.pd-review-delete-btn:hover           { color: #d0392f !important; }

/* ── YORUM MODALI ── */
.pd-review-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(20, 20, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
  padding: 20px;
  box-sizing: border-box;
}
.pd-review-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}
.pd-review-modal {
  position: relative;
  width: min(440px, 100%);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 32px 28px 28px;
  box-sizing: border-box;
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.pd-review-modal-overlay.open .pd-review-modal { transform: scale(1); }
.pd-review-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f2f2ee;
  font-size: 18px;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-review-modal-close:hover { background: #e8e8e2; }
.pd-review-modal-title { font-size: 1.15rem; font-weight: 700; color: #1a1a1a; margin: 0 0 20px; text-align: center; }

.pd-review-star-input { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.pd-star-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  color: #e4e4e0;
  transition: color 0.15s, transform 0.1s;
}
.pd-star-btn.is-active { color: #ffc107; }
.pd-star-btn:hover { transform: scale(1.12); }

.pd-review-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #d8d8d2;
  border-radius: 14px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  color: #333;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.18s;
}
.pd-review-textarea:focus { outline: none; border-color: #61ff9e; }

.pd-review-modal-error { color: #d0392f; font-size: 0.82rem; margin: 10px 0 0; }

.pd-review-modal-actions { display: flex; gap: 12px; margin-top: 22px; }
.pd-review-modal-cancel,
.pd-review-modal-submit {
  flex: 1;
  padding: 12px 0;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: opacity 0.18s, background 0.18s;
}
.pd-review-modal-cancel { background: #f2f2ee; color: #555; }
.pd-review-modal-cancel:hover { background: #e8e8e2; }
.pd-review-modal-submit { background: #61ff9e; color: #1a1a1a; }
.pd-review-modal-submit:hover { opacity: 0.85; }
.pd-review-modal-submit:disabled { opacity: 0.5; cursor: default; }

/* ── ÜRÜN BULUNAMADI ── */
.pd-not-found {
  text-align: center;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.pd-not-found i     { font-size: 3.2rem; color: #d4d4d0; }
.pd-not-found h2    { font-size: 1.4rem; color: #1a1a1a; margin: 0; }
.pd-not-found p     { color: #999; margin: 0; }
.pd-btn-back {
  padding: 13px 30px;
  background: #61ff9e;
  color: #1a1a1a;
  font-weight: 700;
  border-radius: 100px;
  text-decoration: none;
  font-size: 0.93rem;
  display: inline-block;
  transition: opacity 0.18s;
}
.pd-btn-back:hover { opacity: 0.85; }

/* ── ÜRÜNLER.HTML KART BAĞLANTISI ── */
.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.product-card-link:hover .product-card-name { color: #1a7a45; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .product-page-main { padding: 0 32px 72px; }
  .pd-hero { grid-template-columns: 1fr; gap: 32px; }
  .pd-info-col { align-items: flex-start; text-align: left; }
  .pd-buy-row  { justify-content: flex-start; }
  .pd-variants { justify-content: flex-start; }
  .pd-actions  { justify-content: flex-start; }
  .pd-title    { font-size: 1.55rem; }
  .pd-image-box { min-height: 260px; }
}

@media (max-width: 480px) {
  .product-page-main { padding: 0 18px 56px; }
  .pd-title  { font-size: 1.3rem; }
  .pd-price  { font-size: 1.4rem; }
  .pd-btn-cart { width: 100%; justify-content: center; }
  .pd-image-box { padding: 20px; }

  /* Mobil Ok/Modal Boyutu */
  .pd-review-arrow { width: 32px; height: 32px; font-size: 1rem; }
  .pd-review-write-btn { width: 100%; justify-content: center; }
  .pd-review-modal { padding: 26px 20px 22px; }
}

/* ── DARK MODE ── */
[data-theme="dark"] .pd-image-box      { background: #1a1a1a!important; border-color: #2a2a2a!important; }
[data-theme="dark"] .pd-title          { color: #e0e0dc!important; }
[data-theme="dark"] .pd-subtitle       { color: #555!important; }
[data-theme="dark"] .pd-description    { color: #aaa!important; }
[data-theme="dark"] .pd-price          { color: #e0e0dc!important; }
[data-theme="dark"] .pd-old-price      { color: #444!important; }
[data-theme="dark"] .pd-crumb          { color: #555!important; }
[data-theme="dark"] .pd-crumb:hover    { color: #ddd!important; }
[data-theme="dark"] .pd-crumb-current  { color: #ccc!important; }
[data-theme="dark"] .pd-crumb-sep      { color: #333!important; }
[data-theme="dark"] .pd-section-title  { color: #e0e0dc!important; }
[data-theme="dark"] .pd-hr             { border-color: #2a2a2a!important; }
[data-theme="dark"] .pd-features-list li { color: #aaa!important; }
[data-theme="dark"] .pd-chip           { border-color: #2a2a2a!important; color: #888!important; }
[data-theme="dark"] .pd-variant-pill   { border-color: #2a2a2a!important; color: #888!important; background: transparent!important; }
[data-theme="dark"] .pd-variant-pill:hover { border-color: #61ff9e!important; color: #ddd!important; }
[data-theme="dark"] .pd-variant-pill.active { background: rgba(97,255,158,0.1)!important; border-color: #61ff9e!important; color: #ddd!important; }
[data-theme="dark"] .pd-no-comments    { color: #61ff9e!important; }
[data-theme="dark"] .pd-not-found h2   { color: #ddd!important; }
[data-theme="dark"] .pd-not-found p    { color: #666!important; }
[data-theme="dark"] .pd-not-found i    { color: #333!important; }
[data-theme="dark"] .pd-arrow          { background: rgba(255,255,255,0.18)!important; }
[data-theme="dark"] .pd-arrow:hover    { background: rgba(255,255,255,0.32)!important; }

[data-theme="dark"] .pd-review-write-btn    { color: #ddd!important; }
[data-theme="dark"] .pd-review-card         { background: #1a1a1a!important; border-color: #2a2a2a!important; }
[data-theme="dark"] .pd-review-name         { color: #e0e0dc!important; }
[data-theme="dark"] .pd-review-date         { color: #666!important; }
[data-theme="dark"] .pd-review-edited       { color: #555!important; }
[data-theme="dark"] .pd-review-text         { color: #aaa!important; }
[data-theme="dark"] .pd-review-stars i.pd-star-empty { color: #333!important; }
[data-theme="dark"] .pd-review-own-actions button { color: #666!important; }
[data-theme="dark"] .pd-review-arrow        { background: rgba(255,255,255,0.1)!important; color: #ddd!important; }
[data-theme="dark"] .pd-review-arrow:hover  { background: rgba(255,255,255,0.18)!important; }
[data-theme="dark"] .pd-review-modal        { background: #1e1e1e!important; }
[data-theme="dark"] .pd-review-modal-title  { color: #e0e0dc!important; }
[data-theme="dark"] .pd-review-modal-close  { background: #2a2a2a!important; color: #ccc!important; }
[data-theme="dark"] .pd-review-modal-cancel { background: #2a2a2a!important; color: #ccc!important; }
[data-theme="dark"] .pd-review-textarea     { background: #2a2a2a!important; border-color: #333!important; color: #ddd!important; }
[data-theme="dark"] .pd-star-btn            { color: #333!important; }
[data-theme="dark"] .pd-star-btn.is-active  { color: #ffc107!important; }