.cc_q8ux376z_855qYkyWG5 .cc-feature-highlights {
  width: 100%;
}

.cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 65px;
  /* REV7: bolum gecis bosluklari 120/80/80 -> 96/64/48 */
  padding: 96px 16px;
}

.cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__heading {
  margin: 0;
  max-width: 920px;
  color: var(--wUp6NoOHuO);
  word-break: break-word;
  /* The shared "_MvtEeWjhGH" theme typography token this heading also carries
     is still bound to Baskervville — the editor's token system only accepts
     Google Fonts names, so "The Seasons" can't be set there directly. "The
     Seasons" is self-hosted via @font-face in MobileMenu/styles.css, at only
     one weight (400) — override both here so the heading actually renders in
     it instead of the token's Baskervville/500. */
  font-family: "cc_q8ux376z_kkjk7WHLxz_The Seasons", "The Seasons", Georgia, serif;
  font-weight: 400;
}

.cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__grid {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  flex-wrap: wrap;
  /* Each rendered FeatureHighlightItem reads its flex-basis off this custom
     property (see its own styles.css) — custom properties inherit straight
     through IkasComponentRenderer's `display:contents` wrapper divs, unlike
     structural `> *` selectors which can't reliably reach past them. */
  --cc-feature-item-basis: 0;
}

@media (max-width: 1224px) {
  .cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__grid {
    row-gap: 40px;
    --cc-feature-item-basis: calc(50% - 16px);
  }
}

@media (max-width: 1024px) {
  .cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__inner {
    gap: 48px;
    padding: 64px 16px;
  }

  .cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__heading {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__inner {
    gap: 48px;
    padding: 48px 16px;
  }

  .cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__heading {
    font-size: 28px;
  }

  /* Figma's mobile "Infos" frame keeps a 2-up grid (not a single stacked
     column) — switches to an explicit CSS grid here instead of the
     desktop flex-wrap/basis-variable trick, since a 2-column layout is
     simpler to express directly than via flex-basis percentages. */
  .cc_q8ux376z_855qYkyWG5 .cc-feature-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 32px;
  }
}