/* Performance, Refined — Figma homepage `.section-12` (1440 ref: y1898 h904).
   Nesting chain walked for the head + card1/card2:
     .section-12(0,0) > .section-13(+41,+97) > .text-wrapper-29(0)   => y41  x98
     .section-12(0,0) > .section-13(+41,+97) > .g-n-boyu-konfor-ve(92) => y133 x98
     .section-12(0,0) > .section-13(+41,+97) > .frame-25(168,0)      => y209 x97
     .section-12(0,0) > .section-13(+41,+97) > .frame-24(509,427)    => y550 x524
   The other two cards are direct children of .section-12 (no offset):
     .nefes-ALAB-l-r-wrapper  y209 x524 416x315
     .element-y-nl-ESNEME-wrapper y209 x972 384x656
   True section-relative 4-card geometry (all four bottom out at y865):
     LEFT  tall  x97..481   384x656  "24 SAAT PERFORMANS"
     MID   top   x524..940  416x315  "NEFES ALABİLİR"
     MID   btm   x524..940  416x315  "HIZLI KURUMA"   (row gap 550-524 = 26)
     RIGHT tall  x972..1356 384x656  "4 YÖNLÜ ESNEME"
   → 3 columns 384 / 416 / 384 with UNEQUAL column gaps (43 then 32),
     total span 1259 (x97..x1356). Middle column 315+26+315 = 656 = side height.
   (.text-wrapper-30 in the export is a stray duplicate parked at top:-1585px —
   off-canvas, not rendered.)
   All 1440 measurements scale fluidly. */

.cc_loq3bro3_FvPeNHcqqM .perfref {
  width: 100%;
  /* Figma: heading top 41px, grid bottom 865px in a 904px frame → ~40px each side. */
  padding: clamp(32px, 4.219vw, 81px) 0 clamp(20px, 1.302vw, 25px);
}

.cc_loq3bro3_FvPeNHcqqM .perfref__inner {
  /* Figma's own frame is asymmetric (left 97px, right 84.13px). Centering the
     raw 1259px span would put the left edge at 90.5px — 6.5px tighter than the
     design and 14px off CategoryGrid. Capping at 1246px instead lands the left
     inset on the design's exact 97px, keeps the ~7px stagger against the
     104px-inset siblings that the design itself draws, and costs the cards
     ~1% width. Below 1440 the ramp is the same clamp(16px, 4.2vw, 104px) that
     CategoryGrid uses, so those two sections' edges track each other exactly.
     (CollectionStories / ShopTheLook also land on ~104px at 1440 but ramp on
     their own curves below it — that pre-existing spread is not touched here.) */
  width: min(1748px, calc(100% - 2 * clamp(16px, 4.479vw, 86px))); /* 86..1834 @1920 */
  margin-inline: auto;
}

/* ─── Heading block (top-left) ───────────────────────────── */

.cc_loq3bro3_FvPeNHcqqM .perfref__head {
  /* Section-relative: subtitle box y133..174 (41px tall) → grid top y209 = 35px. */
  margin-bottom: clamp(24px, 2.431vw, 35px);
}

.cc_loq3bro3_FvPeNHcqqM .perfref__heading {
  /* .text-wrapper-29 — Manrope Regular 60px, +2px tracking, black,
     line-height:normal. The export's sibling 60px headings carry height:82px,
     so "normal" resolves to 82/60 = 1.367 for Manrope. */
  font-family: var(--font-display, sans-serif);
  font-size: var(--text-d60, clamp(32px, 4.17vw, 60px));
  font-weight: 400;
  line-height: 1.367;
  letter-spacing: 0.0333em; /* 2px @60px */
  color: var(--color-black, #000000);
  margin: 0;
}

.cc_loq3bro3_FvPeNHcqqM .perfref__sub {
  /* .g-n-boyu-konfor-ve — Manrope Medium 30px, +2px tracking, black.
     "normal" = 41/30 = 1.367 (sibling 30px subtitles export height:41px).
     NOTE: this node's text sits in three `.text-wrapper-11` spans that override
     tracking to 0.6px (= 2%), so the export literally renders 0.6px here. That
     is leftover run-level formatting on edited text: the <p> node itself declares
     2px, and every other 30px subtitle on the page (.ya-am-ritmine-uyum,
     .mza-koleksiyonlar, .text-wrapper-31, .stilini-tamamlayan-2, .g-nl-k-stilin-zamans)
     declares 2px with no spans. Keeping 2px so this subtitle matches its siblings —
     including CategoryGrid's, which is unambiguous. */
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-d30, clamp(20px, 2.08vw, 30px));
  font-weight: 500;
  line-height: 1.367;
  letter-spacing: 0.0667em; /* 2px @30px */
  color: var(--color-black, #000000);
  margin: clamp(8px, 0.694vw, 10px) 0 0;
}

/* ─── Card grid ──────────────────────────────────────────── */

/* Mobile-first: cards stack vertically full-width, 16px gaps. */
.cc_loq3bro3_FvPeNHcqqM .perfref__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm, 16px);
}

.cc_loq3bro3_FvPeNHcqqM .perfref__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 16px);
  min-width: 0;
}

.cc_loq3bro3_FvPeNHcqqM .perfref__card {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  background: var(--color-surface-alt, #dcdbdc);
}

/* Side columns (card1/card4): 383.87x656; middle-column cards: 415.69x315. */
.cc_loq3bro3_FvPeNHcqqM .perfref__card--tall {
  aspect-ratio: 500 / 754;
}
.cc_loq3bro3_FvPeNHcqqM .perfref__card--wide {
  aspect-ratio: 611 / 362;
}

.cc_loq3bro3_FvPeNHcqqM .perfref__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc_loq3bro3_FvPeNHcqqM .perfref__media--ph {
  background: var(--color-surface-alt, #dcdbdc);
}

/* Feature label — bold uppercase, centred in a band at the card bottom.
   Figma bands (flex-centred text, full card width, no horizontal inset):
     wide cards  .text-wrapper-28        margin-top 257 / h58 in a 315 card
     right tall  .element-y-nl-ESNEME    margin-top 579 / h77 in a 656 card
     left  tall  .element-saat-PERFORMANS y783 h77 over a card spanning y209..865
   Band centre → card bottom: 29px (wide), 38.5px / 43.5px (tall). Taking off
   half of the 34px line box (25px x 1.367) puts the bottom of the line at 12px
   for the wide cards and ~21..27px (→ 24px) for the tall ones — so the two card
   shapes do NOT share one offset.
   White text over a soft bottom scrim so it stays legible on any image; the
   scrim is sized to the Figma band (58/77px) rather than a percentage, which on
   a 656px tall card would have darkened 275px of image. */
.cc_loq3bro3_FvPeNHcqqM .perfref__label-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(96px, 9.72vw, 140px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.cc_loq3bro3_FvPeNHcqqM .perfref__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(8px, 0.833vw, 12px); /* 12px @1440 — 58px band, 315px card */
  /* Figma gives the band the card's full width (margin-left 0.1px / -0.2px, i.e.
     zero inset). Keep the guard flat and small — a viewport-scaled inset would
     take 32px off the line box at 1440, and "24 SAAT PERFORMANS" at 25px only
     has ~35px of slack inside the 380px tall card before it wraps. */
  padding-inline: 8px;
  text-align: center;
  color: var(--color-white, #ffffff);
  font-family: var(--font-label, sans-serif);
  font-size: var(--text-d25, clamp(18px, 1.74vw, 25px));
  font-weight: 700;
  line-height: 1.367; /* "normal" → 34px @25px */
  text-transform: uppercase;
  letter-spacing: 0.08em; /* 2px @25px */
}

/* Tall cards carry the taller 77px band → the label sits higher off the edge. */
.cc_loq3bro3_FvPeNHcqqM .perfref__card--tall .perfref__label {
  bottom: clamp(14px, 1.667vw, 24px); /* 24px @1440 */
}

/* Linked cards: gentle media zoom on hover. */
.cc_loq3bro3_FvPeNHcqqM a.perfref__card .perfref__media {
  transition: transform 0.7s ease;
}
.cc_loq3bro3_FvPeNHcqqM a.perfref__card:hover .perfref__media {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .cc_loq3bro3_FvPeNHcqqM a.perfref__card .perfref__media {
    transition: none;
  }
  .cc_loq3bro3_FvPeNHcqqM a.perfref__card:hover .perfref__media {
    transform: none;
  }
}

/* ─── Desktop (>=1024): Figma 1440 editorial grid ────────── */

@media (min-width: 1024px) {
  .cc_loq3bro3_FvPeNHcqqM .perfref:not(.perfref--editorial-grid) .perfref__grid {
    /* Figma @1440: [tall 383.87] 43 [stack 415.69 — ~8% wider] 32 [tall 383.87].
       The two column gaps DIFFER, so they are encoded as their own fr tracks
       and the three cards are placed on tracks 1 / 3 / 5. The middle column
       carries the two stacked cards (NEFES ALABİLİR / HIZLI KURUMA) between
       the two tall cards (24 SAAT PERFORMANS | 4 YÖNLÜ ESNEME). */
    grid-template-columns: 500fr 69fr 611fr 69fr 500fr; /* 500|69|611|69|500 @1920 */
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
  }
  .cc_loq3bro3_FvPeNHcqqM .perfref:not(.perfref--editorial-grid) .perfref__grid > :nth-child(1) {
    grid-column: 1;
  }
  .cc_loq3bro3_FvPeNHcqqM .perfref:not(.perfref--editorial-grid) .perfref__grid > :nth-child(2) {
    grid-column: 3;
  }
  .cc_loq3bro3_FvPeNHcqqM .perfref:not(.perfref--editorial-grid) .perfref__grid > :nth-child(3) {
    grid-column: 5;
  }

  /* The two tall cards share one ratio so both side columns get the exact
     same rendered height and the row lines up pixel-perfect. */
  .cc_loq3bro3_FvPeNHcqqM .perfref__card--tall {
    aspect-ratio: 500 / 754; /* 383.87x656 @1440 */
  }

  /* Middle column: the stack stretches to the row height set by the tall
     cards; each card takes half (minus the 26px gap) — no fixed heights,
     so 315px @1440 falls out of the proportions automatically
     (315 + 26 + 315 = 656). */
  .cc_loq3bro3_FvPeNHcqqM .perfref__stack {
    gap: clamp(16px, 1.806vw, 26px); /* 26px @1440 */
    height: 100%;
  }
  .cc_loq3bro3_FvPeNHcqqM .perfref__stack .perfref__card--wide {
    aspect-ratio: auto;
    flex: 1 1 0;
    min-height: 0;
  }

  /* A merchant-selected ratio must win for every card. Stop the legacy
     right-column height split and prevent grid stretch from distorting the
     two tall cards when a fixed ratio is selected. */
  .cc_loq3bro3_FvPeNHcqqM .perfref--custom-ratio:not(.perfref--editorial-grid) .perfref__grid {
    align-items: start;
  }

  .cc_loq3bro3_FvPeNHcqqM .perfref--custom-ratio:not(.perfref--editorial-grid) .perfref__stack {
    height: auto;
  }

  .cc_loq3bro3_FvPeNHcqqM .perfref--custom-ratio:not(.perfref--editorial-grid)
    .perfref__stack
    .perfref__card--wide {
    flex: 0 0 auto;
    min-height: auto;
  }
}

/* Mango/Zara-inspired motion wall. The original editorial-column layout stays
   untouched; this modifier is used only by the dedicated homepage placement. */
.cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__inner {
  width: min(1600px, 100%);
  margin-inline: auto;
}

.cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__head {
  /* Same heading inset as the default layout. */
  width: min(1749px, 100% - 2 * clamp(16px, 4.453vw, 85.5px)); /* 86..1835 @1920 */
  margin-inline: auto;
}

.cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__grid {
  gap: 2px;
}

.cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__stack {
  display: contents;
}

.cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__card--tall, .cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__card--wide, .cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__stack .perfref__card--wide {
  aspect-ratio: 4 / 5;
  min-height: 0;
}

/* Every editorial card is the same 4/5 box, so the two Figma label bands
   (58px on wide, 77px on tall) don't apply here — the tall/wide split would
   just print two different offsets in one uniform grid. Normalise on the
   taller offset for the whole variant. */
.cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__label, .cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__card--tall .perfref__label {
  bottom: clamp(14px, 1.667vw, 24px);
}

@media (min-width: 768px) {
  .cc_loq3bro3_FvPeNHcqqM .perfref--editorial-grid .perfref__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v-fontsize-props: heading/subtitle/cardLabel size controls */

/* Fixed desktop canvas — Figma 504:318, 1920×1080. */
@media (min-width: 1024px) {
  .cc_loq3bro3_FvPeNHcqqM .perfref:not(.perfref--editorial-grid) {
    box-sizing: border-box;
    height: var(--sumone-section-height, 56.25vw);
    padding: clamp(32px, 4.219vw, 81px) 0 clamp(20px, 1.302vw, 25px);
  }
  .cc_loq3bro3_FvPeNHcqqM .perfref:not(.perfref--editorial-grid) .perfref__inner {
    width: min(1748px, calc(100% - 2 * clamp(16px, 4.479vw, 86px)));
  }
  .cc_loq3bro3_FvPeNHcqqM .perfref:not(.perfref--editorial-grid) .perfref__head {
    margin-bottom: clamp(35px, 4.531vw, 87px);
  }
  .cc_loq3bro3_FvPeNHcqqM .perfref:not(.perfref--editorial-grid) .perfref__stack {
    gap: clamp(16px, 2.239vw, 43px);
  }
}

/* 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_loq3bro3_FvPeNHcqqM .perfref {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}