.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 369px;
  padding: var(--space-xl) 0;
  background-color: var(--color-cream);
  color: var(--color-text-primary);
  /* Safari <16 twin: `clip` is ignored there and the box bleeds sideways.
     `hidden` is safe on this element — it has no sticky descendant. */
  overflow: hidden;
  overflow: clip;
  container-type: inline-size;
  /* See Header/styles.css: WebKit measures `cqw` against the ZOOMED size
     under the fixed canvas, Chromium against the layout size. The canvas
     publishes an absolute px length, so prefer it when it exists. */
  --nl-canvas-vw: var(--sumone-design-vw, 1vw);
}

/* Safari 15 has no container queries. A `var(--x, 1vw)` fallback CANNOT save
   this: custom properties accept any token, so `--x: 1cqw` parses fine there
   and shadows the fallback, leaving every downstream calc() invalid — the
   section then collapses. The value must therefore be SWITCHED by @supports.
   1vw is the right stand-in: under the fixed canvas the body is `base`px wide
   and visually scaled by viewport/base, so 1vw lands on the same painted size. */
@supports (container-type: inline-size) {
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section {
    --nl-canvas-vw: var(--sumone-design-vw, 1cqw);
  }
}

/* Content inset: x124 at 1440 => padding-inline 124px so the right column
   (1fr | 1fr, gap 0) starts at exactly x720 (50%), matching Figma. */
.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.479vw, 86px); /* col 86..1834 @1920 */
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__inner {
  width: 100%;
}
.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__intro {
  margin-bottom: var(--space-lg);
  min-width: 0;
}
.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Two-column (50/50) only at >=1024; mobile & tablet stack */
@media (min-width: 1024px) {
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--nl-column-gap, 80px);
    align-items: stretch;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__intro {
    margin-bottom: 0;
  }
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__eyebrow {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--nl-accent, var(--color-gray-neutral));
}

/* TRACKING (applies to every rule in this file): the export writes
   `letter-spacing: 2px` at the text-NODE level, but that is Figma's PERCENT
   value (2) serialised with a px suffix — the same exporter artefact that puts
   `font-weight: 400` on "Manrope-Bold" parents. The per-run child spans carry
   the computed truth and they are all exactly 2% of their own font-size:
     .text-wrapper-5 = 0.32px @16  (this section's description)
     .text-wrapper-6 = 0.28px @14  (this section's input placeholder)
     .text-wrapper-8/9 = 0.24px @12 (this section's KVKK note)
   and two standalone nodes state both numbers outright: .text-wrapper-13
   (60px → 1.2px) and .stilini-tamamlayan (30px → 0.6px). So 0.02em everywhere. */
.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-d60); /* 60px @1440 */
  font-weight: 400;
  line-height: 1.3333; /* .stay-in-motion declares line-height: 80px @60px */
  letter-spacing: 0.02em; /* .text-wrapper-13 = 1.2px @60 */
  color: var(--color-black);
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__heading-line {
  display: block;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__heading-accent {
  /* Figma 504:447: both "Stay" and "In Motion" use the same black heading
     colour. Keep the highlight wrapper for editor compatibility, but do not
     let it split the title into two visual colour systems. */
  color: inherit;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__description {
  /* copy top y112, 2 lines @ 16×1.37 = 43.8 → bottom y155.8; input top y172. */
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: var(--text-body); /* 16px @1440 */
  font-weight: 500;
  line-height: 1.37; /* export `line-height: normal` */
  letter-spacing: 0.02em; /* .text-wrapper-5 = 0.32px @16 */
  color: var(--color-black);
  max-width: 718px; /* copy frame w718 @1440 */
  text-wrap: pretty;
  white-space: pre-line;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  /* input bottom y215 → KVKK note top y226 = 11px */
  margin: 0 0 11px;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input {
  flex: 1 1 auto;
  width: 100%;
  height: var(--nl-control-height, 43px);
  padding: 0 19px; /* placeholder x19 inside the field @1440 */
  font-family: var(--font-body);
  font-size: var(--text-small); /* 14px @1440 */
  font-weight: 500;
  line-height: 1.3571; /* .e-posta-adresiniz h19 / 14px */
  letter-spacing: 0.02em; /* .text-wrapper-6 = 0.28px @14 */
  color: var(--color-black);
  background-color: var(--color-cream-soft);
  border: none;
  border-bottom: 1px solid var(--color-black);
  border-radius: 0;
  outline: none;
  transition: border-color 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input::placeholder {
  color: var(--color-black);
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input:focus {
  border-bottom-color: var(--color-black);
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input--error, .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input--error:focus {
  border-bottom-color: var(--color-error);
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nl-control-height, 43px);
  min-width: 99px; /* button w99 @1440 */
  padding: 0 24px; /* h-padding 24px @1440 */
  font-family: var(--font-label);
  font-size: var(--text-body); /* 16px @1440 */
  font-weight: 700;
  line-height: 1.37; /* export `line-height: normal` */
  letter-spacing: 0.02em; /* 0.32px @16 — same run value as .text-wrapper-5 */
  text-transform: uppercase;
  color: var(--color-surface);
  background-color: var(--color-black); /* .kat-l-wrapper — no border in Figma */
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 120ms cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__submit::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__submit:hover:not(:disabled) {
  background-color: var(--color-text-secondary);
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__submit:active:not(:disabled) {
  transform: scale(0.96);
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__error {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-error);
  text-wrap: pretty;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__disclaimer {
  margin: 0;
  /* .ki-isel is width-auto in Figma — cap at the right column (596px @1440)
     so it wraps like the export instead of at the input's 409px. */
  max-width: 596px;
  font-family: var(--font-body);
  font-size: var(--text-label); /* 12px @1440 */
  font-weight: 400;
  line-height: 1.37; /* export `line-height: normal` */
  letter-spacing: 0.02em; /* .text-wrapper-8/9 = 0.24px @12 */
  color: var(--color-black);
  text-wrap: pretty;
  white-space: pre-line;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__legal-link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__disclaimer--rich p {
  margin: 0;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__disclaimer--rich a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__success-icon {
  color: var(--color-success);
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__success .newsletter-section__heading {
  margin: 0;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__success .newsletter-section__description {
  margin: 0;
}

.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__form {
    flex-direction: row;
    /* Figma keeps the two boxes at their own heights (input 43, button 41)
       with tops aligned at y172/173 — stretch would force the button to 43. */
    align-items: stretch;
    justify-content: flex-start;
    gap: 35px; /* input right edge x1128 → button x1163 */
  }

  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input {
    flex: 0 1 409px; /* .e-posta-adresiniz-wrapper w409 @1440 */
    max-width: 409px;
  }

  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__submit {
    flex: none;
  }
}

/* Figma desktop (1440 ref), offsets walked
   .section > .section-2(+0,+0) > .section-3(+124,+99):
     heading  x124 y99   | copy   x720 y112 | input x719 y172 (409×43)
     button   x1163 y173 | KVKK   x720 y226 | section h369
   => 99px top padding, 50/50 split (right column x720), and min-height:369px
   supplies the extra ~11px of bottom air the design has (content ends y259). */
@media (min-width: 1024px) {
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section {
    padding: clamp(64px, 6.875vw, 99px) 0;
  }

  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__inner {
    width: min(100%, calc(var(--nl-canvas-vw, 1vw) * 78.125));
    margin-inline: auto;
    grid-template-columns:
      calc(var(--nl-canvas-vw, 1vw) * 27.34375)
      minmax(0, 1fr);
    column-gap: var(--nl-column-gap, 80px);
    align-items: center;
  }

  /* Right column sits 13px lower than the heading (copy y112 vs heading y99) */
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__body {
    padding-top: 13px;
  }

  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__intro[data-align="right"] .newsletter-section__heading {
    max-width: none;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__eyebrow, .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__heading, .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__description, .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__form, .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__error, .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__disclaimer {
    opacity: 0;
    animation: cc_LmUd6PvvAN_R6eGl6WLuY_newsletter-fade-up 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
      forwards;
  }

  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__eyebrow {
    animation-delay: 0ms;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__heading {
    animation-delay: 80ms;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__description {
    animation-delay: 160ms;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__form {
    animation-delay: 240ms;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__error {
    animation-delay: 240ms;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__disclaimer {
    animation-delay: 320ms;
  }

  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__success {
    animation: cc_LmUd6PvvAN_R6eGl6WLuY_newsletter-fade-up 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
      both;
  }
}

@keyframes cc_LmUd6PvvAN_R6eGl6WLuY_newsletter-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input, .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__submit {
    transition: none;
  }
}

/* Intro alignment (data-align) */
.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__intro[data-align="left"] {
  text-align: left;
}
.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__intro[data-align="right"] {
  text-align: right;
}

/* Fixed desktop canvas — Figma 504:440, 1920×369. */
@media (min-width: 1024px) {
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* Do not size the query container itself with cqw: on the ikas editor
       canvas that unit resolves against the outer editor container and makes
       this section much taller than its own rendered width. The aspect ratio
       is resolved from this element's actual width, so 1920×369 stays exact
       both in the editor and on the storefront. */
    height: auto;
    min-height: 0;
    aspect-ratio: 1920 / 369;
    padding: 0;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__container {
    flex: 0 0 100%;
    max-width: none;
    padding-inline: calc(var(--nl-canvas-vw, 1vw) * 4.479167);
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__inner {
    /* Keep the title + form as one centred 1500px composition.  This is the
       same rule used above; repeating it here is intentional because this
       fixed-canvas block is the final desktop override in the stylesheet. */
    width: min(100%, calc(var(--nl-canvas-vw, 1vw) * 78.125));
    margin-inline: auto;
    grid-template-columns:
      calc(var(--nl-canvas-vw, 1vw) * 27.34375)
      minmax(0, 1fr);
    column-gap: var(--nl-column-gap, 80px);
    align-items: center;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__heading {
    font-size: calc(var(--nl-canvas-vw, 1vw) * 3.125);
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__body {
    min-width: 0;
    padding-top: 0;
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__description {
    max-width: calc(var(--nl-canvas-vw, 1vw) * 46.614583);
    margin-bottom: calc(var(--nl-canvas-vw, 1vw) * 0.520833);
    font-size: calc(var(--nl-canvas-vw, 1vw) * 0.833333);
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__form {
    gap: calc(var(--nl-canvas-vw, 1vw) * 1.302083);
    margin-bottom: calc(var(--nl-canvas-vw, 1vw) * 1.40625);
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__input {
    flex-basis: calc(var(--nl-canvas-vw, 1vw) * 19.583333);
    max-width: calc(var(--nl-canvas-vw, 1vw) * 19.583333);
    height: var(--nl-control-height, calc(var(--nl-canvas-vw, 1vw) * 2.239583));
    padding-inline: calc(var(--nl-canvas-vw, 1vw) * 0.989583);
    font-size: calc(var(--nl-canvas-vw, 1vw) * 0.729167);
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__submit {
    width: calc(var(--nl-canvas-vw, 1vw) * 7.5);
    min-width: calc(var(--nl-canvas-vw, 1vw) * 7.5);
    height: var(--nl-control-height, calc(var(--nl-canvas-vw, 1vw) * 2.239583));
    padding-inline: calc(var(--nl-canvas-vw, 1vw) * 1.25);
    font-size: calc(var(--nl-canvas-vw, 1vw) * 0.833333);
  }
  .cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section__disclaimer {
    max-width: calc(var(--nl-canvas-vw, 1vw) * 30.885417);
    font-size: calc(var(--nl-canvas-vw, 1vw) * 0.625);
  }
}

/* Ekran-altı bölüm: sayfa açılışında viewport dışında olduğu için tarayıcı
   layout/paint maliyetini gerçekten görünene kadar erteleyebilir. `auto`
   anahtar sözcüğü sayesinde ilk yerleşimden sonra gerçek boyut hatırlanır —
   tahmin yalnızca ilk kaba scrollbar uzunluğunu besler, CLS üretmez. Sticky
   veya scroll-pin içeren bölümlere (ShopTheLook, CollectionStories) bilerek
   uygulanmadı. */
.cc_LmUd6PvvAN_R6eGl6WLuY .newsletter-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}