/* NewArrivals — en son eklenen urunler, galeri videolariyla.
 *
 * Isaret rengi --color-highlight (sari). --color-accent DEGIL: o degisken
 * bu temada SIYAH, koyu zeminde rozet ve odak halkasi gorunmez olurdu.
 * Koyu zemin bilerek secildi: motorlarin stüdyo videolari siyah fonda
 * cekilmis, acik zeminde videonun kenari kutu gibi gorunuyordu.
 */

.cc_maoskxr0_8TauoxrC8c .new-arrivals {
  width: 100%;
  background-color: var(--na-bg, #0e0e0e);
  padding: var(--space-xl, 3.5rem) 0;
  color: #ffffff;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}

/* ─── Baslik ───────────────────────────────────────────── */

.cc_maoskxr0_8TauoxrC8c .new-arrivals__head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--space-lg);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: #ffffff;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__subtitle {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.66);
}

/* ─── Sahne ────────────────────────────────────────────── */

.cc_maoskxr0_8TauoxrC8c .new-arrivals__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* Video kutusunun genisligi KAYNAK VIDEOYA gore sinirli.
   Urun videolarinin 27 tanesinin 24'u 854 piksel genisliginde. Kutu kapsayici
   genisligine (1200 piksel ustu) yayilinca video 1,4 kat buyutuluyor ve
   gozle gorulur bulaniklasiyor. 40rem (640 piksel) tavanda kaynak hep
   kuculterek olceklenir, yani keskin kalir. Sahne ortalanmis duruyor. */
.cc_maoskxr0_8TauoxrC8c .new-arrivals__viewport {
  flex: 0 1 40rem;
  max-width: 40rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__track {
  display: flex;
  transform: translateX(var(--na-kaydir, 0));
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  opacity: 0.38;
  transform: scale(0.94);
  transition: opacity 420ms ease, transform 420ms ease;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ─── Gezinme ──────────────────────────────────────────── */

.cc_maoskxr0_8TauoxrC8c .new-arrivals__nav {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__nav:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__nav:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: 2px;
}

/* Ok isareti tek bir span'in iki kenarindan cizildi, ikon dosyasi
   gerektirmiyor ve currentColor ile renk aliyor. */
.cc_maoskxr0_8TauoxrC8c .new-arrivals__nav span {
  width: 9px;
  height: 9px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__nav--prev span {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__nav--next span {
  transform: rotate(45deg);
  margin-right: 3px;
}

/* ─── Aktif urun paneli ────────────────────────────────── */

.cc_maoskxr0_8TauoxrC8c .new-arrivals__panel {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__badge {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #0e0e0e;
  background: var(--color-highlight);
  border-radius: var(--radius-pill, 999px);
  padding: 0.25rem 0.625rem;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: #ffffff;
  text-decoration: none;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__name:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Dort kenari ince cerceveli kutu. Soldan serit stili KULLANILMIYOR. */
.cc_maoskxr0_8TauoxrC8c .new-arrivals__specs {
  margin: var(--space-xs) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__spec {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.5rem 0.75rem;
  min-width: 7.5rem;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__spec dt {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__spec dd {
  margin: 0.125rem 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body);
  font-weight: 500;
  color: #ffffff;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-xs);
  padding: 0 var(--space-md);
  border: 1px solid #ffffff;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__cta:hover {
  background: #ffffff;
  color: #0e0e0e;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__cta:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: 2px;
}

/* ─── Noktalar ─────────────────────────────────────────── */

.cc_maoskxr0_8TauoxrC8c .new-arrivals__dots {
  margin-top: var(--space-md);
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

/* Gorunur nokta kucuk, dokunma hedefi 44 piksel kalsin diye saydam
   dolgu ile buyutuldu. */
.cc_maoskxr0_8TauoxrC8c .new-arrivals__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  transition: background-color 160ms ease, width 160ms ease;
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__dot.is-active::after {
  background: var(--color-highlight);
  width: 22px;
  border-radius: var(--radius-pill, 999px);
}

.cc_maoskxr0_8TauoxrC8c .new-arrivals__dot:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: -8px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .cc_maoskxr0_8TauoxrC8c .new-arrivals__track, .cc_maoskxr0_8TauoxrC8c .new-arrivals__slide, .cc_maoskxr0_8TauoxrC8c .new-arrivals__dot::after {
    transition: none;
  }
}

/* ─── Mobil ────────────────────────────────────────────── */

@media (max-width: 640px) {
  .cc_maoskxr0_8TauoxrC8c .new-arrivals__nav {
    display: none;
  }
  .cc_maoskxr0_8TauoxrC8c .new-arrivals__slide {
    transform: none;
  }
  .cc_maoskxr0_8TauoxrC8c .new-arrivals__spec {
    min-width: 6.25rem;
  }
}