.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages {
  width: 100%;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 80px 16px;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list {
  display: flex;
  gap: 32px;
  width: 100%;
}

/* Slider layout — horizontal scroll, fixed-width cards, nav arrows */
.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list--slider {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list--slider::-webkit-scrollbar {
  display: none;
}

/* Each rendered OfferPackageItem sizes itself off these custom properties
   (see its own styles.css). Custom properties inherit straight through
   IkasComponentRenderer's `display:contents` wrapper divs regardless of how
   many levels deep they are, so this avoids depending on that DOM depth. */
.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list--slider {
  --cc-offer-item-grow: 0;
  --cc-offer-item-shrink: 0;
  --cc-offer-item-basis: 376px;
  --cc-offer-item-width: 376px;
}

/* Grid layout — 4 columns that shrink together as the viewport narrows, only
   breaking to 2 at the tablet breakpoint and 1 at mobile (no premature wrap
   from a min-width fighting the shrink). */
.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list--grid {
  flex-wrap: wrap;
  --cc-offer-item-grow: 1;
  --cc-offer-item-shrink: 1;
  --cc-offer-item-basis: calc(25% - 24px);
  --cc-offer-item-width: auto;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__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_DgEqcGV8ky .cc-offer-packages__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_DgEqcGV8ky .cc-offer-packages__nav:disabled, .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__nav--disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__nav svg {
  width: 24px;
  height: 24px;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__nav--left {
  left: -24px;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__nav--right {
  right: -24px;
}

/* Dot pagination — hidden by default (desktop uses the arrow nav above),
   swapped in on mobile only when mobileSlider is on (see the breakpoint
   below and the "Offers" Figma mobile "Page control" reference). */
.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}

.cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__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_DgEqcGV8ky .cc-offer-packages__dot--active {
  width: 48px;
  opacity: 1;
}

@media (max-width: 1440px) {
  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__inner {
    padding: 64px 16px;
  }
}

@media (max-width: 1024px) {
  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__inner {
    padding: 48px 16px;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list--grid {
    --cc-offer-item-basis: calc(50% - 16px);
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__nav--left {
    left: -8px;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__nav--right {
    right: -8px;
  }
}

@media (max-width: 768px) {
  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__inner {
    padding: 32px 16px;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list {
    gap: 16px;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list--slider {
    --cc-offer-item-basis: 300px;
    --cc-offer-item-width: 300px;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__list--grid {
    --cc-offer-item-basis: 100%;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__nav {
    width: 40px;
    height: 40px;
    padding: 8px;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages__nav svg {
    width: 20px;
    height: 20px;
  }

  /* mobileSlider on (default) — one full-width card per view, snapped, with
     dot pagination instead of the partial-preview scroll + arrows above. */
  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages--mobile-slider .cc-offer-packages__list--slider {
    --cc-offer-item-basis: 100%;
    --cc-offer-item-width: 100%;
    scroll-snap-type: x mandatory;
  }

  /* Same mobile carousel, but for a section whose DESKTOP layoutType is
     "Sabit Izgara (Grid)" — that layout wraps into columns on desktop, so
     on mobile it needs flex-wrap turned back off and a scroll container
     turned back on, on top of the same full-width + snap treatment. */
  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages--mobile-slider .cc-offer-packages__list--grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    /* The grid variant's own base rule sets shrink:1 (so its desktop columns
       can compress together) — left as-is here, a 100% basis would just get
       squeezed back down to fit all 4 cards into one row instead of
       actually scrolling, which is exactly the bug this override exists to
       fix. Zero it out same as the slider variant already does. */
    --cc-offer-item-grow: 0;
    --cc-offer-item-shrink: 0;
    --cc-offer-item-basis: 100%;
    --cc-offer-item-width: 100%;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages--mobile-slider .cc-offer-packages__list--grid::-webkit-scrollbar {
    display: none;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages--mobile-slider .cc-offer-packages__nav {
    display: none;
  }

  .cc_q8ux376z_DgEqcGV8ky .cc-offer-packages--mobile-slider .cc-offer-packages__dots {
    display: flex;
  }
}