/* ====================================================
   FANTAZI — ÜRÜN DETAY sayfası
   Galeri (8 kolon) + bilgi paneli (4 kolon, sticky)
   + yorumlar + benzer ürünler.
   ==================================================== */
.urun { padding: 0 0 var(--space-64); }   /* header'a bitişik */

/* --- Üst düzen: 12 kolon --- */
.urun__top { align-items: start; }
.urun__gallery { grid-column: 1 / 9; }     /* 8 kolon */
.urun__info    { grid-column: 9 / 13; }    /* 4 kolon */

/* Breadcrumb bilgi panelinin en üstünde (marka yazısının üstü), sola yaslı.
   Global .breadcrumb ortalı/order'lı; burada onu sıfırlıyoruz. */
.uinfo__breadcrumb {
  order: 0; justify-content: flex-start; margin: var(--space-16) 0 var(--space-16);
  font-size: var(--fs-13); line-height: 1.4;
  /* Tek satır + taşanı sürükle-kaydır (hesabım tabbar'ı gibi, scrollbar gizli) */
  flex-wrap: nowrap; gap: var(--space-10);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  cursor: grab; user-select: none;
}
.uinfo__breadcrumb::-webkit-scrollbar { display: none; }
.uinfo__breadcrumb.is-dragging { cursor: grabbing; }
/* Ana sayfa + ara kategoriler biraz daha belirgin (kalın) */
.uinfo__breadcrumb a { flex-shrink: 0; font-weight: var(--fw-medium); color: var(--renk-metin); white-space: nowrap; }
.uinfo__breadcrumb a:hover { color: var(--renk-marka); }
.uinfo__breadcrumb .breadcrumb__sep { flex-shrink: 0; }
/* Ürün adı: soft, tam görünür (kısalmaz) */
.uinfo__breadcrumb b { flex-shrink: 0; white-space: nowrap; font-weight: var(--fw-normal); color: var(--renk-metin-soft); }
/* Sticky panel breadcrumb dahil header'a hizalansın (galeri üstüyle aynı çizgi) */

/* ====================================================
   GALERİ — 1 tam / 2 yan yana / 1 tam / 2 yan yana...
   ==================================================== */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.gallery__item { border-radius: var(--radius); overflow: hidden; background: var(--renk-soft); aspect-ratio: 3 / 4; }
.gallery__item--full { grid-column: 1 / -1; aspect-ratio: 4 / 5; }   /* tam genişlik daha yüksek */
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gallery__item:hover img { transform: scale(1.04); }

/* Mobil segment göstergesi — masaüstünde gizli */
.gallery__seg { display: none; }

/* ====================================================
   BİLGİ PANELİ (sağ, sticky)
   ==================================================== */
.urun__info { position: sticky; top: var(--sticky-top); }
.uinfo__brand { font-size: var(--fs-13); font-weight: var(--fw-semibold); letter-spacing: .5px; text-transform: uppercase; color: var(--renk-marka); margin-bottom: var(--space-8); }
.uinfo__title { font-size: var(--fs-28); line-height: 1.2; margin-bottom: var(--space-12); }

/* Puan + satış */
.uinfo__rating { display: flex; align-items: center; gap: var(--space-10); font-size: var(--fs-13); color: var(--renk-metin-soft); margin-bottom: var(--space-18); }
.stars { display: inline-flex; gap: 2px; color: var(--renk-marka); }
.stars .icon { width: 15px; height: 15px; }
.uinfo__rating a { color: var(--renk-marka); }

/* Fiyat */
.uinfo__price { display: flex; align-items: baseline; gap: var(--space-12); margin-bottom: var(--space-8); }
.uinfo__now { font-size: var(--fs-30); font-weight: var(--fw-bold); color: var(--renk-koyu); font-family: var(--font-baslik); }
.uinfo__old { font-size: var(--fs-18); color: var(--renk-metin-soft); text-decoration: line-through; }
.uinfo__badge { font-size: var(--fs-12); font-weight: var(--fw-bold); background: var(--renk-koyu); color: var(--renk-beyaz); padding: 3px var(--space-10); border-radius: var(--radius-pill); }
.uinfo__tax { font-size: var(--fs-12); color: var(--renk-metin-soft); margin-bottom: var(--space-24); }

/* Varyant (renk / beden) */
.uvar { margin-bottom: var(--space-24); }
.uvar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-12); }
.uvar__label { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.uvar__label span { color: var(--renk-metin-soft); font-weight: var(--fw-normal); }
.uvar__guide { font-size: var(--fs-13); color: var(--renk-marka); font-weight: var(--fw-semibold); background: none; border: none; cursor: pointer; }
.uvar__guide:hover { color: var(--renk-koyu); }

/* Renk seçenekleri (yuvarlak) */
.color-opts { display: flex; gap: var(--space-10); }
.color-opt {
  width: 36px; height: 36px; border-radius: var(--radius-full); cursor: pointer;
  border: 2px solid var(--renk-cizgi); padding: 2px; background-clip: content-box;
  transition: var(--transition); position: relative;
}
.color-opt.is-active { border-color: var(--renk-koyu); }
.color-opt.is-active::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--renk-koyu); border-radius: 50%; }

/* Beden seçenekleri (kutu) */
.size-opts { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.size-opt {
  min-width: 48px; padding: var(--space-10) var(--space-14);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--renk-metin);
  cursor: pointer; text-align: center; transition: var(--transition);
}
.size-opt:hover { border-color: var(--renk-nude); }
.size-opt.is-active { background: var(--renk-koyu); border-color: var(--renk-koyu); color: var(--renk-beyaz); }
.size-opt.is-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* Adet + sepete ekle */
.uinfo__actions { display: flex; gap: var(--space-12); margin-bottom: var(--space-20); }
.uqty { display: inline-flex; align-items: center; border: 1px solid var(--renk-cizgi); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.uqty button { width: 44px; height: 52px; background: var(--renk-soft); border: none; cursor: pointer; color: var(--renk-koyu); font-size: var(--fs-18); line-height: 1; }
.uqty span { width: 44px; text-align: center; font-size: var(--fs-15); font-weight: var(--fw-semibold); }
.uinfo__add { flex: 1; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); font-size: var(--fs-15); }
.uinfo__add .icon { width: 18px; height: 18px; }
.uinfo__fav {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  color: var(--renk-koyu); cursor: pointer; transition: var(--transition);
}
.uinfo__fav:hover, .uinfo__fav.is-active { background: var(--renk-koyu); color: var(--renk-beyaz); border-color: var(--renk-koyu); }

/* Güven rozetleri */
.utrust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); padding: var(--space-18) 0; border-top: 1px solid var(--renk-cizgi); border-bottom: 1px solid var(--renk-cizgi); margin-bottom: var(--space-20); }
.utrust__item { display: flex; align-items: center; gap: var(--space-10); font-size: var(--fs-13); color: var(--renk-metin); }
.utrust__item .icon { width: 20px; height: 20px; color: var(--renk-marka); flex-shrink: 0; }

/* Kısa açıklama */
.uinfo__desc { font-size: var(--fs-14); color: var(--renk-metin); line-height: 1.7; }
.uinfo__desc strong { font-weight: var(--fw-semibold); }

/* ====================================================
   ALT BÖLÜMLER (yorumlar)
   ==================================================== */
.usection { margin-top: var(--space-64); }
.usection__title { font-size: var(--fs-24); margin-bottom: var(--space-24); }

/* Yorum özeti + liste — 12 kolon grid: özet 3, liste 9 */
.reviews { align-items: start; }
.reviews > .rev-summary { grid-column: 1 / 4; position: sticky; top: var(--sticky-top); }
.reviews > .rev-body { grid-column: 4 / 13; }
.rev-summary { background: var(--renk-soft); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); padding: var(--space-24); text-align: center; }
.rev-summary__score { font-size: 48px; font-family: var(--font-baslik); font-weight: var(--fw-bold); color: var(--renk-koyu); line-height: 1; }
.rev-summary__stars { display: inline-flex; gap: 2px; color: var(--renk-marka); margin: var(--space-10) 0; }
.rev-summary__stars .icon { width: 18px; height: 18px; }
.rev-summary__count { font-size: var(--fs-13); color: var(--renk-metin-soft); }
.rev-bars { margin-top: var(--space-18); text-align: left; }
.rev-bar { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-12); color: var(--renk-metin-soft); margin-bottom: 6px; }
.rev-bar__track { flex: 1; height: 6px; background: var(--renk-cizgi); border-radius: 3px; overflow: hidden; }
.rev-bar__fill { display: block; height: 100%; background: var(--renk-marka); border-radius: 3px; }

.rev-list { display: flex; flex-direction: column; gap: var(--space-16); }
.rev { border: 1px solid var(--renk-cizgi); border-radius: var(--radius); padding: var(--space-20); }
.rev__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-10); }
.rev__user { display: flex; align-items: center; gap: var(--space-10); }
.rev__avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--renk-koyu); color: var(--renk-beyaz); display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: var(--fw-bold); }
.rev__name { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.rev__date { font-size: var(--fs-12); color: var(--renk-metin-soft); }
.rev__stars { display: inline-flex; gap: 1px; color: var(--renk-marka); }
.rev__stars .icon { width: 14px; height: 14px; }
.rev__text { font-size: var(--fs-14); color: var(--renk-metin); line-height: 1.7; }
.rev__meta { font-size: var(--fs-12); color: var(--renk-metin-soft); margin-top: var(--space-8); }

/* Daha fazla göster butonu */
.rev-more {
  width: 100%; margin-top: var(--space-16);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: var(--space-14);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  font-family: var(--font); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--renk-koyu);
  cursor: pointer; transition: var(--transition);
}
.rev-more:hover { background: var(--renk-beyaz); border-color: var(--renk-nude); color: var(--renk-marka); }
.rev-more .icon { transition: transform var(--transition); }

/* Yorum yazma formu */
.rev-form { border: 1px solid var(--renk-cizgi); border-radius: var(--radius); padding: var(--space-20); margin-bottom: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.rev-form__stars { display: inline-flex; gap: var(--space-8); }
.rev-form__stars button { background: none; border: none; padding: 0; cursor: pointer; color: var(--renk-cizgi); }
.rev-form__stars button.is-active { color: var(--renk-marka); }
.rev-form__stars .icon { width: 22px; height: 22px; }
.rev-form textarea { width: 100%; min-height: 90px; padding: var(--space-12); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); font-family: var(--font); font-size: var(--fs-14); resize: vertical; }
.rev-form__misafir { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.rev-form__misafir input { padding: var(--space-12); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); font-family: var(--font); font-size: var(--fs-14); }
.rev-form__msg { font-size: var(--fs-13); color: var(--renk-metin-soft); }
@media (max-width: 640px) {
  .rev-form__misafir { grid-template-columns: 1fr; }
}

/* ====================================================
   BENZER ÜRÜNLER (yatay karusel)
   ==================================================== */
/* pcard stilleri components.css'te (koleksiyon ile ortak). Burada sadece grid. */
.similar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 989px) {
  .urun__gallery, .urun__info { grid-column: 1 / -1; }

  /* Galeri: yatay kaydırmalı tek görsel (carousel) */
  .gallery {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery__item, .gallery__item--full {
    grid-column: auto;
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
    border-radius: 0;
    cursor: default;
  }

  /* Segment göstergesi: tam genişlik, eş parçalar, gap 0 */
  .gallery__seg {
    display: flex;
    gap: 0;
    margin-top: var(--space-8);
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
  }
  .gallery__seg-item {
    flex: 1;
    background: var(--renk-cizgi);
    transition: background .25s ease;
  }
  .gallery__seg-item.is-active { background: var(--renk-koyu); }
  .urun__info { position: static; margin-top: var(--space-24); }
  .reviews > .rev-summary,
  .reviews > .rev-body { grid-column: 1 / -1; }
  .reviews > .rev-summary { position: static; }
  .similar { grid-template-columns: repeat(2, 1fr); }
  .uinfo__title { font-size: var(--fs-24); }
}

/* ====================================================
   GÖRSEL LIGHTBOX (tam ekran) — masaüstü
   ==================================================== */
.gallery__item { border: none; padding: 0; cursor: zoom-in; display: block; width: 100%; }

.lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(255, 255, 255, .98);
  display: flex; align-items: stretch;
}
.lightbox[hidden] { display: none; }

/* Sol dikey thumbnail şeridi */
.lightbox__thumbs {
  width: 96px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--space-10);
  padding: var(--space-20) var(--space-14);
  overflow-y: auto; scrollbar-width: none;
}
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumb {
  width: 64px; height: 82px; flex-shrink: 0;
  border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: var(--renk-soft); cursor: pointer; padding: 0; opacity: .6; transition: var(--transition);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: 1; }
.lightbox__thumb.is-active { border-color: var(--renk-koyu); opacity: 1; }

/* Kapat */
.lightbox__close {
  position: absolute; top: var(--space-20); right: var(--space-24); z-index: 2;
  width: 46px; height: 46px; border-radius: var(--radius-full);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
  color: var(--renk-koyu); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.lightbox__close:hover { background: var(--renk-koyu); color: var(--renk-beyaz); border-color: var(--renk-koyu); }

/* Ana görsel alanı */
.lightbox__stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--space-24); overflow: hidden; position: relative;
  touch-action: none;   /* sürükleme için */
}
.lightbox__img {
  max-width: 100%; max-height: calc(100vh - 2 * var(--space-24));
  object-fit: contain; border-radius: var(--radius);
  user-select: none; -webkit-user-drag: none;
  will-change: transform, opacity;
}
.lightbox__stage.is-grabbing { cursor: grabbing; }
.lightbox__stage:not(.is-grabbing) { cursor: grab; }

/* Sayaç */
.lightbox__count {
  position: absolute; bottom: var(--space-20); left: 50%; transform: translateX(-50%);
  font-size: var(--fs-13); color: var(--renk-metin-soft);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
  padding: 6px var(--space-14); border-radius: var(--radius-pill);
}

/* --- Lightbox çizgi göstergeler (mobil) — masaüstünde gizli --- */
.lightbox__dots { display: none; }

/* Lightbox mobil düzeni */
@media (max-width: 989px) {
  .lightbox__thumbs { display: none; }          /* mobilde thumbnail yok */
  .lightbox__count { display: none; }           /* sayaç yerine dots */
  .lightbox__stage { padding: 0; }
  .lightbox__img { max-height: 100vh; border-radius: 0; }

  .lightbox__dots {
    display: flex; gap: 6px;
    position: absolute; left: 50%; bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0));
    transform: translateX(-50%);
    z-index: 2;
  }
  .lightbox__dot {
    width: 24px; height: 3px; border-radius: 2px;
    background: var(--renk-cizgi); border: none; padding: 0; cursor: pointer;
    transition: background .25s ease, width .25s ease;
  }
  .lightbox__dot.is-active { background: var(--renk-koyu); width: 34px; }

  .lightbox__close {
    top: calc(var(--space-16) + env(safe-area-inset-top, 0));
    right: var(--space-16); width: 40px; height: 40px;
  }
}

/* ====================================================
   BEDEN REHBERİ MODAL
   ==================================================== */
.sgmodal { position: fixed; inset: 0; z-index: 1300; visibility: hidden; display: flex; align-items: center; justify-content: center; padding: var(--space-20); }
.sgmodal::before { content: ""; position: absolute; inset: 0; background: rgba(36,31,32,.5); opacity: 0; transition: opacity .25s ease; }
.sgmodal.is-open { visibility: visible; }
.sgmodal.is-open::before { opacity: 1; }
.sgmodal__panel {
  position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  background: var(--renk-beyaz); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(36,31,32,.28);
  transform: translateY(16px) scale(.98); opacity: 0;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.sgmodal__panel--wide { max-width: 900px; }
.sgmodal.is-open .sgmodal__panel { transform: translateY(0) scale(1); opacity: 1; }
.sgmodal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-20) var(--space-24); border-bottom: 1px solid var(--renk-cizgi); position: sticky; top: 0; background: var(--renk-beyaz); z-index: 2; }
.sgmodal__head h3 { font-size: var(--fs-18); font-family: var(--font-baslik); }
.sgmodal__close { width: 38px; height: 38px; border-radius: var(--radius-full); border: 1px solid var(--renk-cizgi); background: var(--renk-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--renk-metin); transition: var(--transition); }
.sgmodal__close:hover { background: var(--renk-koyu); color: var(--renk-beyaz); border-color: var(--renk-koyu); }
.sgmodal__close .icon { width: 16px; height: 16px; }
.sgmodal__body { padding: var(--space-24); }
.sgmodal__intro { color: var(--renk-metin-soft); margin-bottom: var(--space-20); line-height: 1.6; }
.sgmodal__tablewrap { overflow-x: auto; }
.sgmodal__table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.sgmodal__table th, .sgmodal__table td { padding: var(--space-12) var(--space-14); border: 1px solid var(--renk-cizgi); text-align: center; }
.sgmodal__table thead th { background: var(--renk-koyu); color: var(--renk-beyaz); font-weight: var(--fw-semibold); border-color: var(--renk-koyu); }
.sgmodal__table tbody tr:nth-child(even) { background: var(--renk-soft); }
.sgmodal__table td strong { color: var(--renk-koyu); }
.sgmodal__note { margin-top: var(--space-20); font-size: var(--fs-13); color: var(--renk-metin-soft); line-height: 1.6; }

/* Sekmeli beden rehberi (panelden yönetilen "Beden Rehberi" içerik modülü) */
.sgmodal__tabs { display: flex; gap: var(--space-4); overflow-x: auto; padding: var(--space-16) var(--space-24) 0; border-bottom: 1px solid var(--renk-cizgi); }
.sgmodal__tab { flex: 0 0 auto; padding: var(--space-10) var(--space-16); border: none; background: none; border-bottom: 2px solid transparent; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--renk-metin-soft); cursor: pointer; white-space: nowrap; transition: var(--transition); }
.sgmodal__tab:hover { color: var(--renk-koyu); }
.sgmodal__tab.is-active { color: var(--renk-koyu); border-bottom-color: var(--renk-koyu); }
.sgmodal__tab-panel { display: none; }
.sgmodal__tab-panel.is-active { display: block; }
.sgmodal__tab-panel table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); margin-bottom: var(--space-20); }
.sgmodal__tab-panel table th, .sgmodal__tab-panel table td { padding: var(--space-12) var(--space-14); border: 1px solid var(--renk-cizgi); text-align: center; }
.sgmodal__tab-panel table th { background: var(--renk-koyu); color: var(--renk-beyaz); font-weight: var(--fw-semibold); border-color: var(--renk-koyu); }
.sgmodal__tab-panel table tbody tr:nth-child(even) { background: var(--renk-soft); }