/* Imported from: ./components/ProductGallery/styles.css */
/* Imported from: ../../../../sub-components/MarlaTagBadges/styles.css */
/*
 * Köşe rozetleri — ürün kartı ve ürün detay galerisi ortak stili.
 *
 * Rozet ölçüleri canlıdan (2026-08-12, /cocuk kartı): 10px/500 lh15, beyaz
 * metin, zemin #a84e47, iç boşluk 5px, harf aralığı -0.25px, köşe 0,
 * kenarlık YOK. PDP'de standart 12px ve 75×23 kutu (mockup). Buradaki
 * değerlerin hepsi yalnızca FALLBACK — gerçek değerler proptan gelir.
 */

.cc_0gxxbhqk_product_detail .marla-tag-badges {
  /*
   * Yığın genişliği = en geniş rozetin genişliği; `align-items: stretch` ile
   * aynı köşedeki TÜM rozetler o genişliğe uzar. Böylece "HIZLI KARGO" ile
   * "ÇOK SATAN" harf sayıları farklı olsa da aynı kutuda görünür ve kenarları
   * hizalanır.
   */
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: absolute;
  top: var(--tag-badge-offset, 0.75rem);
  width: min-content;
  z-index: 2;
}

/* Tek satır modu: metin kırılmaz, yığın en uzun metne göre genişler. */
.cc_0gxxbhqk_product_detail .marla-tag-badges--one-line {
  width: max-content;
}

.cc_0gxxbhqk_product_detail .marla-tag-badges--one-line .marla-tag-badges__item {
  white-space: nowrap;
}

.cc_0gxxbhqk_product_detail .marla-tag-badges--left {
  left: var(--tag-badge-offset, 0.75rem);
}

.cc_0gxxbhqk_product_detail .marla-tag-badges--right {
  right: var(--tag-badge-offset, 0.75rem);
}

.cc_0gxxbhqk_product_detail .marla-tag-badges__item {
  align-items: center;
  background: var(--tag-badge-bg, var(--marla-primary-soft));
  /* Kenarlık varsayılanda YOK (canlıda da yok); editörden renk verilince
     kalınlık değişkeni 1px'e çıkar ve çerçeve görünür. */
  border: var(--tag-badge-border-w, 0) solid
    var(--tag-badge-border, transparent);
  border-radius: var(--tag-badge-radius, var(--kombos-radius));
  /* En az genişlik/yükseklik DIŞ kutuyu bağlasın: mockup "75×23" derken
     kenarlık ve iç boşluk dahil kutuyu kastediyor. Tema global bir
     `box-sizing` reset'i tanımlamadığı için burada açıkça veriliyor. */
  box-sizing: border-box;
  color: var(--tag-badge-color, var(--kombos-white));
  display: flex;
  font-size: var(--tag-badge-fs, 0.625rem);
  font-weight: var(--tag-badge-fw, 500);
  justify-content: center;
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
  min-height: var(--tag-badge-min-h, auto);
  min-width: var(--tag-badge-min-w, auto);
  padding: var(--tag-badge-py, 0.3125rem) var(--tag-badge-px, 0.3125rem);
  text-align: center;
  /*
   * Genişliği rozetin kendisi DEĞİL, yığın belirler (yukarı bak). Kutu yığına
   * uzar; canlıdaki gibi "Çok Satan" iki satıra kırılıp kare kutu olur, tek
   * satır seçilirse tek satırda kalır.
   *
   * `word-break: normal` ŞART: global.css'teki `* { word-break: break-word }`
   * Chrome'da min-content'i tek HARFE düşürüyor (18.9px genişlik, 131px
   * yükseklik ölçüldü). Normale çekilince kırılma kelime sınırında olur.
   */
  word-break: normal;
}

.cc_0gxxbhqk_product_detail .marla-tag-badges__item--alt {
  background: var(--tag-badge-alt-bg, var(--kombos-gray-900));
  border-color: var(--tag-badge-alt-border, transparent);
  border-width: var(--tag-badge-alt-border-w, 0);
  color: var(--tag-badge-alt-color, var(--kombos-white));
}

/* End import: ../../../../sub-components/MarlaTagBadges/styles.css */
/* Imported from: ../../../../sub-components/MarlaImageZoom/styles.css */
/*
 * Galeri büyütme penceresi — ölçüler canlıdan (bkz. index.tsx başlığı).
 * Tüm değerler editör propuyla ezilebilir; buradakiler yalnızca varsayılan.
 */
.cc_0gxxbhqk_product_detail .marla-zoom {
  position: fixed;
  inset: 0;
  /* Yapışkan sepet çubuğu ve açılır sepet dahil her şeyin üstünde. */
  z-index: calc(var(--kombos-z-overlay) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zoom-pad-mobile, 1rem);
}

/* Perde ayrı katmanda: renk ve saydamlık bağımsız ayarlanabilsin diye. */
.cc_0gxxbhqk_product_detail .marla-zoom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--zoom-overlay-color, #000000);
  opacity: var(--zoom-overlay-opacity, 0.7);
}

.cc_0gxxbhqk_product_detail .marla-zoom--backdrop-close {
  cursor: pointer;
}

.cc_0gxxbhqk_product_detail .marla-zoom__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.cc_0gxxbhqk_product_detail .marla-zoom__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cc_0gxxbhqk_product_detail .marla-zoom__track::-webkit-scrollbar {
  display: none;
}

.cc_0gxxbhqk_product_detail .marla-zoom__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.cc_0gxxbhqk_product_detail .marla-zoom__media {
  display: block;
  width: 100%;
  height: 100%;
  /* Canlıda `contain` — büyütmede görselin hiçbir yeri kırpılmaz. */
  object-fit: contain;
  cursor: default;
}

/* Kapat + oklar: canlıda üçü de aynı kutu (20px ikon + 4px boşluk + 1px kenarlık). */
.cc_0gxxbhqk_product_detail .marla-zoom__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zoom-btn-pad, 0.25rem);
  background: var(--zoom-btn-bg, #ffffff);
  border: 1px solid var(--zoom-btn-border, #000000);
  border-radius: var(--zoom-btn-radius, 4px);
  color: var(--zoom-btn-color, #000000);
  font-size: var(--zoom-btn-icon, 1.25rem);
  line-height: 0;
  cursor: pointer;
}

/* Canlıdaki ok/çarpı çizgi kalınlığı 1.5 — ikon dosyası 1 ile tanımlı. */
.cc_0gxxbhqk_product_detail .marla-zoom__btn svg [stroke] {
  stroke-width: 1.5;
}

.cc_0gxxbhqk_product_detail .marla-zoom__close {
  top: 0;
  right: 0;
  z-index: 2;
}

.cc_0gxxbhqk_product_detail .marla-zoom__arrow {
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.cc_0gxxbhqk_product_detail .marla-zoom__arrow--prev {
  left: 0;
}

.cc_0gxxbhqk_product_detail .marla-zoom__arrow--next {
  right: 0;
}

/* ===== Masaüstü (>=1024px) — canlıda perde 48px, düğmeler kenardan 40px ===== */
@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_detail .marla-zoom {
    padding: var(--zoom-pad, 3rem);
  }

  .cc_0gxxbhqk_product_detail .marla-zoom__close, .cc_0gxxbhqk_product_detail .marla-zoom__arrow--next {
    right: var(--zoom-btn-offset, 2.5rem);
  }

  .cc_0gxxbhqk_product_detail .marla-zoom__arrow--prev {
    left: var(--zoom-btn-offset, 2.5rem);
  }
}

/* End import: ../../../../sub-components/MarlaImageZoom/styles.css */

/* ---- Gallery ---- */
.cc_0gxxbhqk_product_detail .kombos-pd__gallery {
  display: flex;
  flex-direction: column;
}

/*
 * Mobil (canlıdan ölçüldü, 390px):
 *   ana görsel TAM GENİŞLİK (390×390, sayfa yan boşluğunun dışına taşar)
 *   küçük görseller ana görselin ALTINDA yatay şerit — 70×70, aralık 8px
 * DOM'da küçük görseller önce geldiği için sıralama `order` ile çevriliyor.
 */
.cc_0gxxbhqk_product_detail .kombos-pd__thumbs {
  display: flex;
  gap: 0.5rem;
  order: 2;
  overflow-x: auto;
  scrollbar-width: none;
}

.cc_0gxxbhqk_product_detail .kombos-pd__thumbs::-webkit-scrollbar {
  display: none;
}

.cc_0gxxbhqk_product_detail .kombos-pd__thumb {
  background: var(--kombos-white);
  border: 1px solid var(--kombos-gray-300);
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
  width: var(--pd-thumb-size, 4.375rem);
}

.cc_0gxxbhqk_product_detail .kombos-pd__thumb--active {
  border-color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_detail .kombos-pd__thumb-img {
  display: block;
  height: 100%;
  width: 100%;
}

.cc_0gxxbhqk_product_detail .kombos-pd__main-col {
  flex: 1;
  margin-inline: calc(50% - 50vw);
  min-width: 0;
  order: 1;
  width: 100vw;
}

.cc_0gxxbhqk_product_detail .kombos-pd__main-image-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cc_0gxxbhqk_product_detail .kombos-pd__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}

.cc_0gxxbhqk_product_detail .kombos-pd__track::-webkit-scrollbar {
  display: none;
}

/* Canlıda ana görselin imleci `zoom-in` — tıklayınca büyütme penceresi açılır. */
.cc_0gxxbhqk_product_detail .kombos-pd__track--zoomable {
  cursor: zoom-in;
}

.cc_0gxxbhqk_product_detail .kombos-pd__slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.cc_0gxxbhqk_product_detail .kombos-pd__main-image {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.cc_0gxxbhqk_product_detail .kombos-pd__main-video {
  pointer-events: auto;
  cursor: default;
}

.cc_0gxxbhqk_product_detail .kombos-pd__thumb-video {
  position: relative;
  width: 100%;
  height: 100%;
}

.cc_0gxxbhqk_product_detail .kombos-pd__thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--kombos-white);
  font-size: 0.75rem;
}

.cc_0gxxbhqk_product_detail .kombos-pd__main-image--placeholder {
  border: 1px solid var(--kombos-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--kombos-gray-300);
  font-size: 5rem;
}

/* Arrow buttons */
.cc_0gxxbhqk_product_detail .kombos-pd__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.cc_0gxxbhqk_product_detail .kombos-pd__arrow--prev {
  left: 1.25rem;
}

.cc_0gxxbhqk_product_detail .kombos-pd__arrow--next {
  right: 1.25rem;
}

/* Dots */
.cc_0gxxbhqk_product_detail .kombos-pd__dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.cc_0gxxbhqk_product_detail .kombos-pd__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.cc_0gxxbhqk_product_detail .kombos-pd__dot::after {
  content: "";
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  /* Slider noktası kasıtlı olarak yuvarlak — marka genelindeki
     "köşe yok" kuralının istisnası. */
  border-radius: 999px;
  border: 1px solid var(--kombos-gray-100);
  background: var(--kombos-white);
  transition: all 0.15s;
}

.cc_0gxxbhqk_product_detail .kombos-pd__dot--active::after {
  width: 2rem;
  background: var(--kombos-gray-900);
  border-color: var(--kombos-gray-200);
}

/* ===== Tablet (>=768px) ===== */
@media (min-width: 768px) {
  /*
   * Canlıdan ölçüldü: küçük görsel 70×70 (1px #D2D2D2 kenarlık dahil),
   * dikey aralık 8px, küçük görsel sütunu ile ana görsel arası 16px.
   */
  .cc_0gxxbhqk_product_detail .kombos-pd__gallery {
    flex-direction: row;
    gap: 1rem;
    flex: 1;
    min-width: 0;
  }

  /* Masaüstünde şerit sola dikey olarak döner. */
  .cc_0gxxbhqk_product_detail .kombos-pd__thumbs {
    flex-direction: column;
    flex-shrink: 0;
    order: 0;
    overflow-x: visible;
    overflow-y: auto;
    width: var(--pd-thumb-size, 4.375rem);
  }

  /* Masaüstünde tam genişlik taşması iptal. */
  .cc_0gxxbhqk_product_detail .kombos-pd__main-col {
    align-self: flex-start;
    margin-inline: 0;
    order: 0;
    width: auto;
  }

  .cc_0gxxbhqk_product_detail .kombos-pd__main-image-wrap {
    border-radius: var(--kombos-radius);
    overflow: hidden;
  }

  .cc_0gxxbhqk_product_detail .kombos-pd__main-image {
    max-height: 45.75rem;
    border-radius: var(--kombos-radius);
  }

}

/*
 * Galeri görseli üstündeki etiket. Standart 75×23px, yazı 12px; ölçüler ve
 * renkler ProductDetail'den CSS değişkeniyle gelir.
 */
/* Görsel üstü rozetler ortak bileşende: sub-components/MarlaTagBadges. */

/* End import: ./components/ProductGallery/styles.css */
/* Sub-component stilleri. ikas build'i bunlari SADECE @import ile
   dahil ediyor; import yoksa CSS hic yayinlanmiyor. */
/* Imported from: ../../sub-components/Breadcrumb/styles.css */
/* ===== Breadcrumb Sub-Component ===== */
.cc_0gxxbhqk_product_detail .kombos-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.cc_0gxxbhqk_product_detail .kombos-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cc_0gxxbhqk_product_detail .kombos-breadcrumb__link {
  color: var(--kombos-gray-500);
  text-decoration: none;
}

.cc_0gxxbhqk_product_detail .kombos-breadcrumb__link:hover {
  text-decoration: underline;
}

.cc_0gxxbhqk_product_detail .kombos-breadcrumb__link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.cc_0gxxbhqk_product_detail .kombos-breadcrumb__link--active {
  color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_detail .kombos-breadcrumb__current {
  color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_detail .kombos-breadcrumb__sep {
  font-size: 0.75rem;
  color: var(--kombos-gray-400);
  display: inline-flex;
  align-items: center;
}

.cc_0gxxbhqk_product_detail .kombos-breadcrumb__sep--xs {
  font-size: 0.625rem;
  color: var(--kombos-gray-300);
}

/* End import: ../../sub-components/Breadcrumb/styles.css */
/* Imported from: ../../sub-components/SliderArrow/styles.css */
/* ===== Slider Arrow =====
 * marla.com hero slider'ından ölçüldü: 40×40 tam daire, DOLU beyaz zemin,
 * kenarlık yok, ikon 24px, hafif gölge. (Yarıçap kuralının kasıtlı istisnası —
 * daire olması gereken elemanlardan biri.)
 */
.cc_0gxxbhqk_product_detail .kombos-slider-arrow {
  align-items: center;
  background: var(--kombos-white);
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--kombos-gray-900);
  cursor: pointer;
  display: flex;
  font-size: 1.5rem;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
  width: 2.5rem;
}

.cc_0gxxbhqk_product_detail .kombos-slider-arrow:hover:not(:disabled) {
  background: var(--kombos-gray-50);
}

.cc_0gxxbhqk_product_detail .kombos-slider-arrow:disabled {
  cursor: default;
  color: var(--kombos-gray-400);
}

/* End import: ../../sub-components/SliderArrow/styles.css */

/* ===== Product Detail Section ===== */

.cc_0gxxbhqk_product_detail .kombos-pd {
  width: 100%;
}

/* ---- Breadcrumb (mobile only, hidden on desktop) ---- */
.cc_0gxxbhqk_product_detail .kombos-pd__breadcrumb {
  padding-top: 1rem;
}

/* ---- Layout ---- */
.cc_0gxxbhqk_product_detail .kombos-pd__layout {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}

/* ---- Product Info ---- */
.cc_0gxxbhqk_product_detail .kombos-pd__info {
  display: flex;
  flex-direction: column;
  gap: var(--pd-info-gap, 0.5rem);
  padding-top: var(--pd-info-py-mobile, 1.75rem);
  padding-bottom: var(--pd-info-py-mobile, 1.75rem);
}

/* ===== Desktop (>=1024px) ===== */
@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_detail .kombos-pd__container {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .cc_0gxxbhqk_product_detail .kombos-pd__breadcrumb {
    padding-top: 0;
    padding-bottom: 1.5rem;
  }

  /*
   * Canlıdan ölçüldü (1440px, içerik 1312px):
   *   galeri bloğu 721px · aradaki boşluk 40px · bilgi sütunu 550px
   * Oranlar birebir bu ölçüden geliyor.
   */
  .cc_0gxxbhqk_product_detail .kombos-pd__layout {
    display: grid;
    grid-template-columns: minmax(0, 721fr) minmax(0, 550fr);
    gap: 2.5rem;
    padding-top: 0;
  }

  /*
   * Galeri masaüstünde YAPIŞKAN — canlıda `top: calc(nav-height + 24px)`
   * ölçüldü (1440'ta 248.64px). Bizde header varsayılan olarak yapışkan
   * olmadığı için 24px; header sabitlenirse prop'tan büyütülür.
   */
  .cc_0gxxbhqk_product_detail .kombos-pd__gallery {
    position: sticky;
    top: var(--pd-sticky-top, 1.5rem);
    align-self: start;
  }

  /* Info — right side */
  .cc_0gxxbhqk_product_detail .kombos-pd__info {
    min-width: 0;
    padding-top: var(--pd-info-py, 2.25rem);
    padding-bottom: var(--pd-info-py, 2.25rem);
  }
}