/* ═══════════════════════════════════════════════════════════════
   Brand Benefits — "Neden LAB VERDE?" — static Process Rail.
   Header (eyebrow/heading/supporting) sits above a process rail
   connected by a single hairline + short ticks — pure typography and
   line-work, deliberately no cards/icons/badges/shadows/imagery.
   01/02/03(/04/05/...) are CSS-generated via a counter() on the rail
   (counter-reset on .brand-benefits__rail, counter-increment on each
   .brand-benefits__number), not a Studio prop and not capped at a
   fixed count — items is an open-ended COMPONENT_LIST, so the rail
   numbers itself correctly whatever number of BrandBenefitItem
   children are placed. brandMark/brandMarkWidth stay in the prop
   schema for backward compatibility but are not rendered in this
   layout.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits {
  padding: var(--space-lg) 0; /* 40px — mobile, matches prior value */
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 64px on mobile, widened to --space-2xl at desktop below */
}

/* ─── Header — eyebrow / heading / supporting copy ───────────────
   Left-aligned at every breakpoint (matches MixedProductReviews /
   ImageWithText, which never centered on mobile either) — no forced
   2-line heading break, no brand-mark image in this layout. */

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__header {
  max-width: 640px;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

/* Locally overridden weight/size/line-height — intentionally NOT the
   shared --font-weight-section-display / --text-section-heading tokens
   (those stay untouched, so MultiTabProductSlider/ImageWithText/
   MixedProductReviews/BlogSlider are unaffected). This heading alone
   needed a stronger visual weight, especially on mobile where the
   shared 28px/300 combination read too weak. Desktop size overridden
   further down inside the existing @media (min-width: 1024px) block. */
.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__heading {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.08;
  color: var(--bb-heading-color, var(--color-text-primary));
  text-align: left;
  text-wrap: balance;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__supporting {
  margin: 0;
  max-width: 520px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ─── Rail — mobile-first: vertical line, stacked stations ───────
   A single continuous line runs the full height of the rail; each
   station gets a short tick bridging the line to its own number. */

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 64px between stations */
  padding-left: 24px;
  /* Scoped to this rail, not global — counter-reset establishes a fresh
     counter() scope on this element regardless of how many
     .brand-benefits__number children it has. */
  counter-reset: brand-benefits-station;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--color-border);
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item {
  position: relative;
  max-width: 28rem; /* keeps a single station readable if the rail is ever narrower than 3 columns */
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item::after {
  content: "";
  position: absolute;
  top: 8px;
  left: -24px;
  width: 12px;
  height: 1px;
  background: var(--color-border);
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__number {
  display: block;
  /* Was three fixed .brand-benefits__item:nth-child(1/2/3) rules, so a
     4th/5th card (an open-ended COMPONENT_LIST, not capped at 3) got no
     "04"/"05" at all — counter-increment here makes the numbering track
     however many cards actually exist. */
  counter-increment: brand-benefits-station;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__number::before {
  display: block;
  content: counter(brand-benefits-station, decimal-leading-zero);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* ─── Reveal — left-to-right clip-path "write-in", deliberate sequence ──
 * clip-path: inset(0 100% 0 0) (nothing visible, clipped from the right
 * edge inward) animating to inset(0 0 0 0) (fully visible), eased so the
 * clip boundary sweeps left to right. The text itself never moves — only
 * the clip boundary does — and inset() clips relative to the element's
 * OWN border-box, which already encloses every wrapped line, so multiline
 * text reveals correctly (all lines uncover their left portion together)
 * at any width without measuring text or a pixel overlay. A fast opacity
 * 0→1 rides along as polish; the clip sweep stays the dominant read since
 * its own transition is longer and the opacity settles first.
 *
 * Each principle's number, heading, description (and proof-stat, when a
 * station has one) are each their OWN separate clip-path target with
 * their OWN delay — NOT one combined block. An earlier version clipped
 * each station via its direct children only (the number span, and the
 * single wrapper IkasComponentRenderer renders for the child item), which
 * meant the heading and description — true siblings one level deeper,
 * inside that wrapper — swept together as one tall rectangle sharing one
 * timing. At that size/duration a reveal reads as a generic block fade,
 * not as "writing" — confirmed via computed-style + screenshot testing,
 * not assumed — hence this rewrite targeting .brand-benefit-item__title
 * and .brand-benefit-item__description (BrandBenefitItem's own classes,
 * untouched source) directly, each with its own stagger. Scoped via
 * ".brand-benefits__item .brand-benefit-item__title" etc. — these rules
 * only ever match inside THIS component's own compiled CSS scope, so
 * BrandBenefitItem's other placements (standalone, or via
 * BrandCredentials) are completely unaffected.
 *
 * .brand-benefits__item itself (and its connector "tick" pseudo-elements,
 * positioned with a negative offset outside the item's own border-box,
 * bridging to the rail line) is never clipped — clip-path's reference box
 * is the border-box, so clipping the item directly would clip the tick
 * out permanently, including at the fully-revealed end state — caught
 * before it shipped, not assumed.
 *
 * Intro/rail timeline (data-revealed="true", driven by index.tsx's
 * repeatable dual-IntersectionObserver reveal/reset — see there).
 * Nothing here waits for a previous element to finish, each just
 * starts a little after the one before it — the 60/120/180ms stagger
 * between header elements is unchanged across every pass, only each
 * element's own transition length has grown again for a slower, more
 * premium open (600->750ms):
 *   eyebrow           0ms   (750ms)  -> done  750ms
 *   heading          60ms   (750ms)  -> done  810ms
 *   supporting      120ms   (750ms)  -> done  870ms
 *   rail draw       180ms   (750ms)  -> done  930ms
 *
 * Each card's own number/title/description/stat cascade is identical
 * and RELATIVE to that card's own start (not an absolute ms-from-
 * section-reveal figure) — keyed off data-item-revealed="true" on that
 * one .brand-benefits__item, set by index.tsx's per-card staging effect
 * once BOTH a scripted floor (card 0 at 0ms after the section reveals —
 * starts the instant it's visible, no imposed wait; each next card
 * 350ms after that, a flat stagger, not chained off the previous
 * card's own completion) and that card's actual scroll visibility are
 * satisfied — whichever is later. On desktop, where every card is
 * already visible together, visibility is satisfied immediately and
 * this reduces to exactly the scripted floor timing. On a tall mobile
 * stack, where a later card can start off-screen, this holds that
 * card's start until the user can actually see it, rather than letting
 * it finish its write-in unseen. CARD_START_FLOOR_MS/CARD_STAGGER_MS
 * live in index.tsx, not here — this table is their effect:
 *   number            0ms  (1100ms)  -> done 1100ms
 *   title            30ms  (1100ms)  -> done 1130ms
 *   description      60ms  (1100ms)  -> done 1160ms
 *   stat             90ms  (1100ms)  -> done 1190ms  (only if present)
 * Card transitions are a uniform 1100ms clip-path / 900ms opacity (the
 * internal 0/30/60/90ms stagger between a card's own number/title/
 * description/stat is unchanged — a light, deliberate cascade WITHIN
 * one card so they "belirsin" one after another rather than all at
 * once, distinct from the 350ms stagger BETWEEN cards above) and
 * header transitions a uniform 750ms clip-path / 600ms opacity — the
 * slowest, most premium-reading pass yet, while every card still only
 * ever waits on its own stagger floor and its own visibility, never on
 * another card finishing, so nothing can land off-screen unrevealed.
 * cubic-bezier(0.22, 1, 0.36, 1) throughout — the same restrained,
 * no-overshoot curve BrandCredentials' own entrance uses.
 *
 * Reset is intentionally NOT animated: the transition only lives on the
 * [data-revealed="true"] / [data-item-revealed="true"] rules below, so
 * when those attributes flip back the base (hidden) rules here — which
 * carry no transition — take over immediately, so every re-entry starts
 * from a genuinely instantly-reset, fully-clipped state rather than a
 * lingering reverse-wipe. */
.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__eyebrow, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__heading, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__supporting, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__number, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item .brand-benefit-item__title, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item .brand-benefit-item__description, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item .brand-benefit-item__stat {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__rail::before {
  clip-path: inset(0 100% 0 0);
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits[data-revealed="true"] .brand-benefits__eyebrow {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 750ms cubic-bezier(0.22, 1, 0.36, 1) 0ms, opacity 600ms ease-out 0ms;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits[data-revealed="true"] .brand-benefits__heading {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 750ms cubic-bezier(0.22, 1, 0.36, 1) 60ms, opacity 600ms ease-out 60ms;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits[data-revealed="true"] .brand-benefits__supporting {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 750ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, opacity 600ms ease-out 120ms;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits[data-revealed="true"] .brand-benefits__rail::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path 750ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item[data-item-revealed="true"] .brand-benefits__number {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 1100ms cubic-bezier(0.22, 1, 0.36, 1) 0ms, opacity 900ms ease-out 0ms;
}
.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item[data-item-revealed="true"] .brand-benefit-item__title {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 1100ms cubic-bezier(0.22, 1, 0.36, 1) 30ms, opacity 900ms ease-out 30ms;
}
.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item[data-item-revealed="true"] .brand-benefit-item__description {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 1100ms cubic-bezier(0.22, 1, 0.36, 1) 60ms, opacity 900ms ease-out 60ms;
}
.cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item[data-item-revealed="true"] .brand-benefit-item__stat {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 1100ms cubic-bezier(0.22, 1, 0.36, 1) 90ms, opacity 900ms ease-out 90ms;
}

/* Explicitly overrides BOTH the pre-reveal (base) and revealed
   ([data-revealed="true"] / [data-item-revealed="true"]) rules above
   with matching/greater selector specificity, so this wins regardless
   of either attribute's current value or of exactly when the
   IntersectionObservers fire relative to paint — same guarantee
   BrandCredentials' own reduced-motion override relies on. */
@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__eyebrow, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__heading, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__supporting, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__number, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item .brand-benefit-item__title, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item .brand-benefit-item__description, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item .brand-benefit-item__stat, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__rail::before, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits[data-revealed="true"] .brand-benefits__eyebrow, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits[data-revealed="true"] .brand-benefits__heading, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits[data-revealed="true"] .brand-benefits__supporting, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item[data-item-revealed="true"] .brand-benefits__number, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item[data-item-revealed="true"] .brand-benefit-item__title, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item[data-item-revealed="true"] .brand-benefit-item__description, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item[data-item-revealed="true"] .brand-benefit-item__stat, .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits[data-revealed="true"] .brand-benefits__rail::before {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transition: none;
  }
}

/* ─── Mobile/tablet (<1024px) typography & rhythm pass ───────────
   Matches this file's own existing breakpoint vocabulary (the only
   other breakpoint here is the ≥1024px rail switch below), so "mobile"
   for these overrides means everything below that, same as the rest
   of the file. Desktop (≥1024px) keeps every base rule above
   untouched. Item title/description are scoped through
   ".brand-benefits__item" — the same parent-scoping idiom this file's
   own reveal-animation rules already use — so only BrandBenefitItem
   instances rendered inside THIS rail are affected; BrandCredentials'
   separate usage of the same shared component is completely
   unaffected. */
@media (max-width: 1023px) {
  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__heading {
    font-size: 24px;
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__supporting {
    font-size: 14px;
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__rail {
    gap: var(--space-lg); /* 40px, down from 64px */
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item .brand-benefit-item__title {
    font-size: 17px;
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item .brand-benefit-item__description {
    line-height: 1.5; /* ~21px at the existing 14px (--text-small) */
  }
}

/* ─── Tablet/Desktop (≥1024px) — horizontal rail, 3 columns ────── */

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits {
    padding: var(--space-2xl) 0; /* 96px — restored from the mobile-only 40px above */
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__container {
    gap: var(--space-2xl); /* 96px between header and rail */
  }

  /* Site-wide typography pass: "marka bölümü başlığı" masaüstü hedefi
     28px — was clamp(38px,4vw,44px), well above target. */
  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__heading {
    font-size: 28px;
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl); /* 64px between stations */
    align-items: start; /* no forced equal height — station 02's proof-stat is allowed to run taller */
    padding-left: 0;
    padding-top: 12px; /* room for the tick to bridge up to the line */
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__rail::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item {
    max-width: none;
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item::after {
    content: none; /* mobile tick off */
  }

  .cc_zRr7AL87AP_QFTIHz5mdP .brand-benefits__item::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    width: 1px;
    height: 12px;
    background: var(--color-border);
  }
}