/* ==========================================================================
   TextStatement — About export `.div` ("Made to Matter", 1440×828)

   A full-bleed photograph with the whole copy stack laid over its left side.
   Every number below is lifted from hakkımızda/style-css:

     .div                  1440 × 828, background-size: cover
     .section-title        top 199  left 63  w 963   60px / 55px, +2px
       .text-wrapper-5       (title line)              +1.2px  → 0.02em
       .text-wrapper-6       (subtitle line)  30px/500 +0.6px  → 0.02em
     .p                    top 391  left 63  w 776   25px
       .text-wrapper-7       brand word   700  #ffffff
       .text-wrapper-8       remainder    500  #ffffffbf
     .section-description-2 top 490  left 63  w 776   25px / 500 #ffffffbf

   Every text node carries `text-shadow: 0 4px 4px #00000040` — that shadow is
   what keeps the copy legible over the photo, so it is not optional styling.

   The current 1920×1080 Figma node uses three vertically centred text boxes.
   Desktop reproduces those boxes below; tablet/mobile use the flow margins as
   a resilient fallback for longer merchant-authored content.
   ========================================================================== */

.cc_loq3bro3_mCaCXIsMgU .text-statement {
  position: relative;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
  color: var(--ts-text, var(--kombos-white));
  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_mCaCXIsMgU .text-statement, .cc_loq3bro3_mCaCXIsMgU .text-statement * {
  font-family: var(--font-body, "cc_loq3bro3_Manrope", "cc_loq3bro3_Manrope Fallback", "cc_loq3bro3_DM Sans", system-ui, sans-serif);
}

/* Only the photographic variant reserves the design's canvas; a plain colour
   block sizes to its copy. */
.cc_loq3bro3_mCaCXIsMgU .text-statement[data-has-image="true"] {
  min-height: var(--sumone-section-height, min(1080px, 56.25vw));
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -2;
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, var(--ts-overlay, 0));
  pointer-events: none;
}

/* The vertical start is 325/1080 from Figma section4. It must resolve from the
   shared section HEIGHT, not from percentage padding (which CSS resolves from
   width).
   YATAY: metin, header'daki SUMONE logosunun sol kenarıyla aynı hizada başlar
   (84px @1920 = %4.375 — Header'ın kendi padding formülünün aynısı). Figma'nın
   156px'i bu sayfada Performance Fabrics ile uyumluydu; artık ikisi birden
   sayfanın kendi kenar boşluğuna hizalanıyor. */
.cc_loq3bro3_mCaCXIsMgU .text-statement__inner {
  position: relative;
  box-sizing: border-box;
  min-height: var(--sumone-section-height, min(1080px, 56.25vw));
  padding: calc(var(--sumone-section-height, min(1080px, 56.25vw)) * 0.3009)
    clamp(20px, calc(var(--sumone-design-vw, 1vw) * 4.375), 84px)
    clamp(48px, 8vw, 116px);
  max-width: 1920px;
  margin-inline: auto;
}

/* ── Title ───────────────────────────────────────────────────────
   963px measure. 60/55 is a TIGHT lead (0.9167) — the design deliberately
   crowds the two lines. The 30px subtitle span sits on the same 55px line box,
   hence its 1.833 override. */
.cc_loq3bro3_mCaCXIsMgU .text-statement__title {
  margin: 0;
  max-width: 963px;
  font-family: var(--font-display);
  font-size: var(--text-d60);
  font-weight: 400;
  line-height: 0.9167; /* 55/60 */
  letter-spacing: 2px; /* Figma node 322:83 */
  color: inherit;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  white-space: pre-line;
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__title-main {
  display: block;
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__subtitle {
  display: block;
  font-size: var(--text-d30);
  font-weight: 500;
  line-height: 1.8333; /* the same 55px box at 30px */
  letter-spacing: 2px;
}

/* ── Body ────────────────────────────────────────────────────────
   776px measure on both paragraphs — narrower than the title, exactly as the
   export draws it. Base colour is the export's #ffffffbf; the brand word is
   pulled back to full white + 700 by the rich-text `strong` rule below. */
.cc_loq3bro3_mCaCXIsMgU .text-statement__lead, .cc_loq3bro3_mCaCXIsMgU .text-statement__support {
  max-width: 776px;
  font-size: var(--text-d25);
  font-weight: 500;
  line-height: 1.36; /* 34/25, the export's "normal" at Manrope */
  letter-spacing: 2px; /* Figma node 322:84 / 326:96 */
  color: color-mix(in srgb, var(--ts-text, #fff) 75%, transparent);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__lead {
  margin: 82px 0 0; /* 391 − 199 − 110 */
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__support {
  margin: 31px 0 0; /* 490 − 391 − 68 */
}

/* ── Rich text (editor HTML) ─────────────────────────────────── */
/* `lead` and `support` are RICH_TEXT: their line structure and their bold brand
   word are authored in the editor. Flow types are declared because the
   storefront's global reset renders block elements inline; no font size is set
   so the "Metin Boyutu" prop on the wrapper reaches the paragraphs. */
.cc_loq3bro3_mCaCXIsMgU .text-statement__lead p, .cc_loq3bro3_mCaCXIsMgU .text-statement__lead ul, .cc_loq3bro3_mCaCXIsMgU .text-statement__lead ol, .cc_loq3bro3_mCaCXIsMgU .text-statement__lead h1, .cc_loq3bro3_mCaCXIsMgU .text-statement__lead h2, .cc_loq3bro3_mCaCXIsMgU .text-statement__lead h3, .cc_loq3bro3_mCaCXIsMgU .text-statement__lead h4, .cc_loq3bro3_mCaCXIsMgU .text-statement__support p, .cc_loq3bro3_mCaCXIsMgU .text-statement__support ul, .cc_loq3bro3_mCaCXIsMgU .text-statement__support ol, .cc_loq3bro3_mCaCXIsMgU .text-statement__support h1, .cc_loq3bro3_mCaCXIsMgU .text-statement__support h2, .cc_loq3bro3_mCaCXIsMgU .text-statement__support h3, .cc_loq3bro3_mCaCXIsMgU .text-statement__support 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_mCaCXIsMgU .text-statement__lead > :last-child, .cc_loq3bro3_mCaCXIsMgU .text-statement__support > :last-child {
  margin-bottom: 0;
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__lead li, .cc_loq3bro3_mCaCXIsMgU .text-statement__support li {
  display: list-item;
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__lead strong, .cc_loq3bro3_mCaCXIsMgU .text-statement__lead b, .cc_loq3bro3_mCaCXIsMgU .text-statement__support strong, .cc_loq3bro3_mCaCXIsMgU .text-statement__support b {
  font-weight: 700;
  color: var(--ts-text, var(--kombos-white));
}

.cc_loq3bro3_mCaCXIsMgU .text-statement__lead a, .cc_loq3bro3_mCaCXIsMgU .text-statement__support a {
  color: inherit;
  text-decoration: underline;
}

/* Figma node 322:81 does not space these as three ordinary flow paragraphs.
   It uses three vertically-centred text boxes at y=325/517/616 on the 1080px
   canvas (heights 216/84/138). Reproducing those boxes removes the extra
   leading that appeared between the title, lead and support copy while still
   scaling with the section below 1920px. */
@media (min-width: 1024px) {
  .cc_loq3bro3_mCaCXIsMgU .text-statement__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--sumone-section-height, min(1080px, 56.25vw)) * 0.2);
  }

  .cc_loq3bro3_mCaCXIsMgU .text-statement__lead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--sumone-section-height, min(1080px, 56.25vw)) * 0.077778);
    margin-top: calc(
      var(--sumone-section-height, min(1080px, 56.25vw)) * -0.022222
    );
  }

  .cc_loq3bro3_mCaCXIsMgU .text-statement__support {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--sumone-section-height, min(1080px, 56.25vw)) * 0.127778);
    margin-top: calc(
      var(--sumone-section-height, min(1080px, 56.25vw)) * 0.013889
    );
  }
}

/* ── Alignment (editor prop) ─────────────────────────────────── */
.cc_loq3bro3_mCaCXIsMgU .text-statement[data-align="center"] .text-statement__inner {
  text-align: center;
}
.cc_loq3bro3_mCaCXIsMgU .text-statement[data-align="center"] .text-statement__title, .cc_loq3bro3_mCaCXIsMgU .text-statement[data-align="center"] .text-statement__lead, .cc_loq3bro3_mCaCXIsMgU .text-statement[data-align="center"] .text-statement__support {
  margin-inline: auto;
}
.cc_loq3bro3_mCaCXIsMgU .text-statement[data-align="right"] .text-statement__inner {
  text-align: right;
}
.cc_loq3bro3_mCaCXIsMgU .text-statement[data-align="right"] .text-statement__title, .cc_loq3bro3_mCaCXIsMgU .text-statement[data-align="right"] .text-statement__lead, .cc_loq3bro3_mCaCXIsMgU .text-statement[data-align="right"] .text-statement__support {
  margin-left: auto;
}

/* ── Below the design width ──────────────────────────────────── */
/* The 82/31px gaps are 1440-scale; shrink them with the type so the stack
   doesn't tower on a phone. */
@media (max-width: 1023px) {
  .cc_loq3bro3_mCaCXIsMgU .text-statement__inner {
    padding-top: clamp(56px, 18vw, 190px);
  }
  .cc_loq3bro3_mCaCXIsMgU .text-statement__lead {
    margin-top: clamp(28px, 5.7vw, 82px);
  }
  .cc_loq3bro3_mCaCXIsMgU .text-statement__support {
    margin-top: clamp(16px, 2.15vw, 31px);
  }
}

@media (max-width: 767px) {
  .cc_loq3bro3_mCaCXIsMgU .text-statement[data-has-image="true"] {
    min-height: 0;
  }
  .cc_loq3bro3_mCaCXIsMgU .text-statement__inner {
    min-height: 0;
    padding-inline: 20px;
  }
}