.cc_q8ux376z_63oyECF6pw .cc-our-story {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 160px 16px;
  font-family: "Lexend", sans-serif;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__decor {
  position: absolute;
  top: 50%;
  /* Centered on mobile regardless of decorativeImageOffsetX — the desktop
     offset (below, at the bp breakpoint) is the only place that prop applies. */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1162px;
  max-width: none;
  height: 634px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__decor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__inner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__heading {
  margin: 0;
  max-width: 1056px;
  /* "The Seasons" is self-hosted via @font-face in MobileMenu/styles.css,
     registered at only one weight (400). Requesting any other weight here
     triggers browser font synthesis (fake bold), which renders inconsistently
     with the rest of the site's "The Seasons" usage — so this stays at 400. */
  font-family: "cc_q8ux376z_kkjk7WHLxz_The Seasons", "The Seasons", serif;
  font-weight: 400;
  font-size: var(--cc-our-story-heading-size-mobile, var(--cc-our-story-heading-size, 72px));
  line-height: 1.4;
  white-space: pre-line;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__description {
  margin: 0;
  max-width: 1056px;
  font-weight: 400;
  font-size: var(--cc-our-story-desc-size-mobile, var(--cc-our-story-desc-size, 21px));
  line-height: 1.4;
  white-space: pre-line;
}

/* "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_63oyECF6pw .cc-our-story__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  height: 48px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--cc-our-story-button-color, var(--wUp6NoOHuO));
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button-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-our-story-button-color, var(--wUp6NoOHuO));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  pointer-events: none;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button:hover .cc-our-story__button-fill {
  transform: scaleX(1);
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cc-our-story-button-color, var(--wUp6NoOHuO));
  font-weight: 400;
  line-height: 1.4;
  transition: filter 0.35s ease;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button:hover .cc-our-story__button-content {
  filter: invert(1);
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button-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_63oyECF6pw .cc-our-story__button-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 500ms ease-out;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button-icon svg {
  width: 24px;
  height: 24px;
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button-icon--second {
  transform: translateX(-150%);
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button:hover .cc-our-story__button-icon--first {
  transform: translateX(150%);
}

.cc_q8ux376z_63oyECF6pw .cc-our-story__button:hover .cc-our-story__button-icon--second {
  transform: translateX(0);
}

/*
 * Responsive: use the theme's breakpoints in CSS. CSS media queries can't use
 * var(), so write the min-width/max-width yourself and use `bp(<breakpointId>)`
 * for the value — it resolves to the breakpoint's `<width>px` at render time
 * against the store's live width.
 */
/* REV7: bolumun dikey boslugu her genislikte 160px'ti; anasayfada komsu
   bolumlerle (32-80px) uyumsuz duruyordu. Masaustu 160px olarak kaliyor. */
@media (max-width: 1024px) {
  .cc_q8ux376z_63oyECF6pw .cc-our-story {
    padding: 96px 16px;
  }
}

@media (max-width: 768px) {
  .cc_q8ux376z_63oyECF6pw .cc-our-story {
    padding: 56px 16px;
  }
}

@media (min-width: 1024px) {
  .cc_q8ux376z_63oyECF6pw .cc-our-story__decor {
    left: var(--cc-our-story-decor-left, 50%);
  }

  .cc_q8ux376z_63oyECF6pw .cc-our-story__inner {
    gap: 120px;
  }

  .cc_q8ux376z_63oyECF6pw .cc-our-story__heading {
    /* The base rule reads the mobile var first (mobile-first CSS) — it
       always has a value (headingFontSizeMobile defaults to 30), so without
       this override desktop would keep using the mobile size forever. */
    font-size: var(--cc-our-story-heading-size, 72px);
    line-height: 1.1;
  }

  .cc_q8ux376z_63oyECF6pw .cc-our-story__content {
    padding: 0 272px;
  }

  .cc_q8ux376z_63oyECF6pw .cc-our-story__description {
    font-size: var(--cc-our-story-desc-size, 21px);
    line-height: 1.5;
  }
}