/* Every variant (with-banner slider, no-banner slider, grid) boxes to the
   same 1600px/16px container as the header (see __inner below) instead of
   bleeding to the viewport edge — the section itself stays edge-to-edge
   only for its background color. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider {
  width: 100%;
  padding: 0;
  background: var(--mcvfwILurb);
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__wrapper {
  display: flex;
  gap: 32px;
  align-items: stretch;
  max-width: 100%;
}

/* Left Panel - Title & CTA. Background (image or color) comes from the
   bannerImage/bannerBackgroundColor props via inline style. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__sidebar {
  flex: 0 0 376px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  background-size: cover;
  background-position: center;
  border-radius: 0;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__sidebar-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__title {
  /* Overrides the shared theme typography token this element also carries
     (still bound to Baskervville — the editor's token system only accepts
     Google Fonts, so "The Seasons" can't be set there). "The Seasons" is
     self-hosted via @font-face in MobileMenu/styles.css at only one weight (400). */
  font-family: "cc_q8ux376z_kkjk7WHLxz_The Seasons", "The Seasons", Georgia, serif;
  font-weight: 400;
  margin: 0;
  white-space: pre-line;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__description {
  margin: 0;
  color: var(--qciY0SrcMk);
}

/* Section-level heading — only rendered when the banner panel is hidden, taking
   its place as a plain full-width header above the products. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 784px;
  margin: 0 0 32px 0;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-title {
  /* Overrides the shared theme typography token this element also carries
     (still bound to Baskervville — the editor's token system only accepts
     Google Fonts, so "The Seasons" can't be set there). "The Seasons" is
     self-hosted via @font-face in MobileMenu/styles.css at only one weight (400). */
  font-family: "cc_q8ux376z_kkjk7WHLxz_The Seasons", "The Seasons", Georgia, serif;
  font-weight: 400;
  margin: 0;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-description {
  margin: 0;
}

/* "Ani Button" pattern (see SliderItem's button — the standard for this theme's
   bordered arrow+label CTAs): a solid fill sweeps in from the left on hover and
   the content inverts color over it, instead of animating the icon itself. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  height: 48px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--cc-product-slider-cta-color, var(--asbcXylAmk));
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta-fill {
  position: absolute;
  /* Bleeds 1px past the padding edge (matching the border width) and re-rounds
     its own corners, so the growing scaleX edge never leaves a hairline seam
     against the border while animating — a border-radius + overflow:hidden +
     animated-transform-child rendering quirk. */
  inset: -1px;
  border-radius: inherit;
  background-color: var(--cc-product-slider-cta-color, var(--asbcXylAmk));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  pointer-events: none;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta:hover .cc-product-slider__cta-fill {
  transform: scaleX(1);
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cc-product-slider-cta-color, var(--asbcXylAmk));
  transition: filter 0.35s ease;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta:hover .cc-product-slider__cta-content {
  filter: invert(1);
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta-icons {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Figma's own interaction spec for this icon: "While hovering" → "Change to"
   the next state, Smart Animate, Ease out. Entering (hover in) slides left→right;
   leaving (hover out) reverses to right→left automatically since it's the same
   transition playing backwards. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 500ms ease-out;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta-icon svg {
  width: 24px;
  height: 24px;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta-icon--second {
  transform: translateX(-150%);
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta:hover .cc-product-slider__cta-icon--first {
  transform: translateX(150%);
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__cta:hover .cc-product-slider__cta-icon--second {
  transform: translateX(0);
}

/* Right Panel - Carousel */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__carousel-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__carousel {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex: 1;
  padding: 0;
  width: 100%;
  cursor: grab;
  user-select: none;
  scroll-snap-type: x mandatory;
}

/* Mouse-drag scrolling in progress (see index.tsx) — scroll-behavior:smooth
   would fight the per-frame scrollLeft writes during a drag, so it's turned
   off only while cc-dragging is set. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__carousel.cc-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__carousel::-webkit-scrollbar {
  display: none;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__card-wrapper {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Navigation Arrows */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 12px;
  background: color-mix(in srgb, var(--wUp6NoOHuO) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--wUp6NoOHuO) 20%, transparent);
  border-radius: 24px;
  color: var(--wUp6NoOHuO);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 5;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wUp6NoOHuO) 20%, transparent);
  border-color: color-mix(in srgb, var(--wUp6NoOHuO) 40%, transparent);
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav:disabled, .cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav--disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav svg {
  width: 24px;
  height: 24px;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav--left {
  left: 0;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav--right {
  right: 0;
}

/* Dot pagination — hidden by default, swapped in for the arrow nav on mobile. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50px;
  background: var(--wUp6NoOHuO);
  opacity: 0.3;
  cursor: pointer;
  transition: width 0.2s ease, opacity 0.2s ease;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__dot--active {
  width: 48px;
  opacity: 1;
}

/* Grid layout — fixed multi-column grid, no scroll/arrows. The sidebar sits
   as an ordinary grid item alongside the cards instead of a fixed-width panel. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 80px 16px;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Bannered grid (sidebar + cards, e.g. "Çok Satan Ürünlerimiz") uses 3
   columns total (sidebar + 2 cards per row), not the plain grid's 4 —
   scoped to this modifier so the no-sidebar grid usage is unaffected. */
.cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid--with-sidebar {
  grid-template-columns: repeat(3, 1fr);
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__sidebar--grid {
  flex: none;
  aspect-ratio: 1;
  min-width: 0;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__card-wrapper--grid {
  width: 100%;
  min-width: 0;
  /* Every grid cell (sidebar + cards) must stay the exact same square shape
     no matter what's inside a given product's card — CSS Grid rows
     auto-size to their TALLEST item, so any one card that ends up taller
     (a longer name/price wrapping to an extra line, a placeholder image
     with an unusual intrinsic size, missing variant data, etc.) stretches
     the WHOLE row taller than the uniform Figma grid calls for. Tried
     forcing height:100% down through the card into its image-wrap
     earlier, but that chains percentage heights through several nested
     boxes — fragile, and it was still producing oversized cells for a
     couple of real products. Locking the aspect-ratio on this outer
     wrapper AND clipping overflow is airtight regardless of cause: the
     card inside can render at whatever height it wants, it just can't
     ever expand the grid cell past this fixed square. */
  aspect-ratio: 1;
  overflow: hidden;
}

.cc_q8ux376z_WYZb0A8smD .cc-product-slider__card-wrapper--grid .cc-product-card {
  width: 100%;
}

/* The bannered grid's sidebar is now a proportional grid column (1/3 of the
   row) instead of the carousel layout's fixed ~350-376px panel, so it (and
   the card names next to it) shrink noticeably faster as the viewport
   narrows. The existing breakpoints below were tuned for that old fixed
   width and left both the title and the overlay card name/price too large
   relative to the now-narrower column between ~768-1200px. Scoped to
   (min-width: 769px) — at 768 and below the grid stacks to a single
   full-width column (see the 768 breakpoint further down) where the old
   sizing is already appropriate again. */
@media (max-width: 1200px) and (min-width: 769px) {
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid--with-sidebar .cc-product-slider__title {
    font-size: 26px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid--with-sidebar .cc-product-slider__sidebar {
    padding: 24px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid--with-sidebar .cc-product-slider__description {
    font-size: 14px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid--with-sidebar .cc-product-slider__cta-content {
    font-size: 14px;
  }

  /* Restores the same proportional (container-query) sizing the default
     card variant already uses, scoped to the grid so the fixed-width
     carousel/mobile overlay cards (tuned separately) are unaffected. */
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__card-wrapper--grid .cc-product-card--overlay .cc-product-card__name, .cc_q8ux376z_WYZb0A8smD .cc-product-slider__card-wrapper--grid .cc-product-card--overlay .cc-product-card__price {
    font-size: clamp(14px, 4.5cqw, 21px);
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid--with-sidebar .cc-product-slider__title {
    font-size: 22px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid--with-sidebar .cc-product-slider__description {
    font-size: 13px;
  }
}

/* Responsive */
@media (max-width: 1440px) {
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider {
    /* REV7: dikey bosluk hem burada hem __inner'da veriliyordu (64+64=128).
       Dikey deger tek kaynaga (__inner) birakildi; soldaki 16px korunuyor. */
    padding: 0 0 0 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__inner {
    padding: 64px 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__sidebar {
    flex: 0 0 350px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__title {
    font-size: 34px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-title {
    font-size: 34px;
  }
}

@media (max-width: 1024px) {
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider {
    padding: 0 0 0 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__inner {
    padding: 48px 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__wrapper {
    flex-direction: column;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__sidebar {
    flex: 1;
    padding: 32px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__sidebar--grid {
    aspect-ratio: auto;
  }

  /* Scoped to the carousel's own sidebar (inside .__wrapper, as opposed to
     the bannered grid's sidebar--grid) — once the wrapper stacks to a
     column at this width the sidebar becomes a full-width bar, so the
     title/CTA need to be explicitly centered instead of hugging the
     top-left corner with no space between them. */
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__wrapper .cc-product-slider__sidebar {
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__wrapper .cc-product-slider__sidebar-text {
    align-items: center;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__title {
    font-size: 28px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__wrapper .cc-product-slider__title {
    font-size: 22px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-title {
    font-size: 28px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__carousel-container {
    width: 100%;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__carousel {
    gap: 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider {
    padding: 0 0 0 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__inner {
    padding: 32px 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__wrapper {
    gap: 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__sidebar {
    padding: 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__title {
    font-size: 22px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-title {
    font-size: 22px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-header {
    margin-bottom: 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav {
    width: 40px;
    height: 40px;
    padding: 8px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav svg {
    width: 20px;
    height: 20px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid {
    gap: 8px;
  }
}

/* True phone width (see the "New Products" Figma mobile reference) — one
   full-width card per view with dot pagination instead of arrows. Same
   768px condition as the tablet block above on purpose — the editor's
   real "Mobile" device preview is 768px, not 640, so this now merges into
   that breakpoint instead of needing its own narrower one. */
@media (max-width: 768px) {
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__inner {
    padding: 48px 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-title {
    font-size: 28px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__section-description {
    font-size: 14px;
    font-weight: 400;
    /* Figma's mobile default is a different grey (var(--qciY0SrcMk)) than desktop
       (var(--02XyDHrfpw)) for this same text. The color is normally set via inline
       style from the sectionDescriptionColor prop, which beats any plain
       class rule — !important is required to win here. */
    color: var(--qciY0SrcMk) !important;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__carousel {
    scroll-snap-type: x mandatory;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__card-wrapper {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__card-wrapper .cc-product-card {
    width: 100%;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__nav {
    display: none;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__dots {
    display: flex;
  }

  /* Bannered grid (sidebar + cards, e.g. "Çok Satan Ürünlerimiz") stacks to a
     single column on phone — sidebar as its own full-width block, then one
     card per row (see the "Popular" Figma mobile reference). */
  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__sidebar {
    padding: 16px;
    /* justify-content:space-between (the desktop rule) only distributes
       LEFTOVER space in the container — with no forced height on mobile the
       content hugs tight and that leftover is zero, so the description and
       button end up touching instead of the 48px Figma calls for. */
    justify-content: flex-start;
    gap: 48px;
  }

  .cc_q8ux376z_WYZb0A8smD .cc-product-slider__description {
    font-size: 14px;
    font-weight: 400;
  }
}