/* ==========================================================================
   CtaStatement — About export `.section` (1440×907, #f7f5f2)

   Unlike the rest of the page this block is a real FLEX COLUMN in the export,
   so its numbers are already flow spacing — margins, not absolute tops:

     .image-container   margin-top 119  margin-left 418  603×290  (centred)
     .section-description margin-top 57   60px, centred, +2px, #000
     .section-subtitle    margin-top 32   30px / 500, centred, +2px
     .call-to-action      margin-top 57   16px / 700, centred, +2px, UNDERLINED

   Bottom padding falls out of the section height:
     907 − (119 + 290 + 57 + 164 + 32 + 41 + 57 + 28) = 119

   The CTA is a text link with an underline — not a filled button — so it is
   deliberately NOT routed through the shared Button sub-component.
   ========================================================================== */

.cc_loq3bro3_Gn7f17QbAn .cta-statement {
  width: 100%;
  background-color: #f7f5f2;
  color: var(--cta-text, var(--color-black));
  font-family: var(--font-body);
}

/* Marka fontu her ELEMENTE tek tek yazılır. Storefront sayfaya global bir
   `font-family: Inter, sans-serif` reset'i enjekte ediyor; o kural her çocuğu
   doğrudan hedeflediği için köke font vermek yetmiyor — miras eziliyor ve metin
   Manrope yerine Inter'e düşüyordu. Display fontu isteyen başlık kuralları bu
   bloktan SONRA geldiği için (aynı özgüllük) onlar kazanmaya devam eder. */
.cc_loq3bro3_Gn7f17QbAn .cta-statement, .cc_loq3bro3_Gn7f17QbAn .cta-statement * {
  font-family: var(--font-body, "cc_loq3bro3_Manrope", "cc_loq3bro3_Manrope Fallback", "cc_loq3bro3_DM Sans", system-ui, sans-serif);
}

.cc_loq3bro3_Gn7f17QbAn .cta-statement__inner {
  max-width: 1920px;
  margin-inline: auto;
  padding: clamp(56px, 8.26vw, 119px) clamp(20px, 5.625vw, 81px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Figma 603×290, centred. The width arrives as an inline max-width so the
   editor's "Görsel Genişliği" can override the design value.

   Shared by the still <img> and the logo animation <video> so both obey that one
   width. `height: auto` lets each keep its own ratio — the animation ships 960×960
   square against a 603×290 landscape slot — and `contain` is the guard for the
   moment they disagree: a landscape poster sizes the box before the square video's
   metadata lands, and a <video> letterboxes rather than crops or stretches. */
.cc_loq3bro3_Gn7f17QbAn .cta-statement__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}

/* The animation ships 960×960 square. Left on `height: auto` it would paint a
   603×603 block — more than double the 290px the export reserves — shoving the
   statement, the supporting line and the CTA down off the fold. Pinning the
   design's own 603/290 band keeps the section's vertical rhythm, and `contain`
   above then fits the square inside it whole rather than cropping the mark. */
.cc_loq3bro3_Gn7f17QbAn video.cta-statement__image {
  aspect-ratio: 603 / 290;
  height: auto;
}

/* "Nothing extra. / Everything essential." — 60px Manrope Regular, +2px. */
.cc_loq3bro3_Gn7f17QbAn .cta-statement__title {
  margin: clamp(28px, 3.96vw, 57px) 0 0;
  max-width: 1277px;
  font-family: var(--font-display);
  font-size: var(--text-d60);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: 0.0333em; /* 2px @60px */
  color: inherit;
}

/* "Daha az parça. Daha çok kombin." — 30px / 500, +2px. */
.cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle {
  margin: clamp(16px, 2.22vw, 32px) 0 0;
  max-width: 1277px;
  font-size: var(--text-d30);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: 0.0667em; /* 2px @30px */
  color: inherit;
}

/* ── Rich text (editor HTML) ─────────────────────────────────── */
/* `subtitle` is RICH_TEXT. Flow types are declared because the storefront's
   global reset renders block elements inline; no font size here so the "Alt
   Metin Boyutu" prop on the wrapper reaches the paragraphs. */
.cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle p, .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle ul, .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle ol, .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle h1, .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle h2, .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle h3, .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle h4 {
  display: block;
  /* Paragraf aralığı ALT kenardan: kardeş seçici (`> * + *`) eleman seçicili
     sıfırlamadan düşük özgüllükte kalıp eziliyor, editördeki boş satırlar
     render'da kayboluyordu. */
  margin: 0 0 1em;
  font: inherit;
  letter-spacing: inherit;
}

.cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle > :last-child {
  margin-bottom: 0;
}

.cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle li {
  display: list-item;
}

.cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle strong, .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle b {
  font-weight: 700;
}

.cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle a {
  color: inherit;
  text-decoration: underline;
}

/* "KOLEKSİYONU KEŞFET" — 16/700, +2px, underlined. The offset keeps the rule
   off the descenders, which the flat Figma underline does not show. */
.cc_loq3bro3_Gn7f17QbAn .cta-statement__cta {
  display: inline-block;
  margin-top: clamp(28px, 3.96vw, 57px);
  font-family: var(--font-display);
  font-size: 1rem; /* 16px */
  font-weight: 700;
  line-height: 1.75; /* 28px box */
  letter-spacing: 0.125em; /* 2px @16px */
  color: inherit;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: opacity 200ms ease;
}

.cc_loq3bro3_Gn7f17QbAn a.cta-statement__cta:hover {
  opacity: 0.65;
}

.cc_loq3bro3_Gn7f17QbAn a.cta-statement__cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Current Figma node 551:322 is a 1920×1080 canvas. The earlier 1440 export
   used a 907px section and left the whole stack too high in modern previews.
   These positions reproduce the current 206 / 553 / 749 / 847px boxes. */
@media (min-width: 1024px) {
  .cc_loq3bro3_Gn7f17QbAn .cta-statement, .cc_loq3bro3_Gn7f17QbAn .cta-statement__inner {
    height: var(--sumone-section-height, 56.25vw);
    min-height: var(--sumone-section-height, 56.25vw);
  }

  .cc_loq3bro3_Gn7f17QbAn .cta-statement__inner {
    position: relative;
    display: block;
    padding: 0;
  }

  .cc_loq3bro3_Gn7f17QbAn .cta-statement__image {
    position: absolute;
    top: calc(var(--sumone-section-height, 56.25vw) * 0.190741); /* 206/1080 */
    left: 50%;
    height: calc(
      var(--sumone-section-height, 56.25vw) * 0.268519
    ); /* 290/1080 */
    transform: translateX(-50%);
  }

  .cc_loq3bro3_Gn7f17QbAn .cta-statement__title {
    position: absolute;
    top: calc(var(--sumone-section-height, 56.25vw) * 0.512037); /* 553/1080 */
    left: 50%;
    width: min(1277px, 90%);
    margin: 0;
    transform: translateX(-50%);
  }

  .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle {
    position: absolute;
    top: calc(var(--sumone-section-height, 56.25vw) * 0.693519); /* 749/1080 */
    left: 50%;
    width: min(1277px, 90%);
    margin: 0;
    transform: translateX(-50%);
  }

  .cc_loq3bro3_Gn7f17QbAn .cta-statement__cta {
    position: absolute;
    top: calc(var(--sumone-section-height, 56.25vw) * 0.784259); /* 847/1080 */
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }
}

/* Existing homepages may still use this legacy counterpart of BrandStatement.
   Apply the same viewport-bound animation stage so both versions stay centred. */
@media (max-width: 767px) {
  .cc_loq3bro3_Gn7f17QbAn .cta-statement {
    overflow: hidden;
  }

  .cc_loq3bro3_Gn7f17QbAn .cta-statement__inner {
    width: 100%;
    padding: clamp(48px, 14vw, 72px) 24px;
  }

  .cc_loq3bro3_Gn7f17QbAn .cta-statement__image, .cc_loq3bro3_Gn7f17QbAn video.cta-statement__image {
    width: min(72vw, 320px);
    max-width: min(72vw, 320px) !important;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    object-fit: contain;
    object-position: center center;
  }

  .cc_loq3bro3_Gn7f17QbAn .cta-statement__title, .cc_loq3bro3_Gn7f17QbAn .cta-statement__subtitle {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }
}

/* The logo animation is not listed here because CSS cannot pause media:
   useAutoplayInView refuses to autoplay under this query and holds the video on
   its poster frame instead. */
@media (prefers-reduced-motion: reduce) {
  .cc_loq3bro3_Gn7f17QbAn .cta-statement__cta {
    transition: none;
  }
}