/** Shopify CDN: Minification failed

Line 2157:54 Expected identifier but found "`"
Line 2160:81 Unterminated string token
Line 2164:59 Expected ":"
Line 2168:86 Unterminated string token
Line 2169:56 Expected identifier but found "14px"

**/
/*
  aycan-sections.css
  Shared editorial design language for all aycan-* custom sections.
  Loaded per-section via {{ 'aycan-sections.css' | asset_url | stylesheet_tag }}
  (Shopify dedupes). Mirrors the hero's motifs as reusable classes.
  Reference: research/design-system.md
*/

/* ═══════════════════════════════════════════════════════════
   Section header — eyebrow + accent heading + intro
   ═══════════════════════════════════════════════════════════ */
.aycan-head { margin-bottom: clamp(2.4rem, 3.5vw, 3.4rem); }
.aycan-head--center { text-align: center; }

.aycan-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-body-family);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--color-primary);
  width: 100%
}
.aycan-head--center .aycan-kicker { justify-content: center; }
.aycan-head--center .aycan-kicker.aycan-reveal { justify-content: center; }
.aycan-kicker__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  animation: aycan-pulse 2.4s ease-in-out infinite;
}

.aycan-accent-heading {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  color: rgb(var(--color-foreground));
  text-wrap: balance;
}
.aycan-accent-heading--xl { font-size: var(--t-section-xl); }
.aycan-accent-heading--lg { font-size: var(--t-section-lg); }
.aycan-accent-heading--md { font-size: var(--t-section-md); }

/* <em> = Sacramento script accent in button rose (handmade thread story).
   Slightly larger em + lh token for x-height on blush backgrounds. */
.aycan-accent-heading em {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  color: rgb(var(--color-button));
  font-size: var(--t-accent-em);
  line-height: var(--lh-accent);
  margin: 0 0.04em;
}

.aycan-intro {
  margin: 1.2rem 0 0;
  font-family: var(--font-body-family);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: rgba(var(--color-foreground), 0.78);
}
.aycan-intro p { margin: 0; }
.aycan-intro p + p { margin-top: 0.7em; }
.aycan-head--center .aycan-intro { max-width: 54ch; margin-inline: auto; }

/* Split header — kicker full width, then title row (heading + aside).
   Matches .aycan-head kicker→heading rhythm (0.9rem). */
.aycan-section-top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.aycan-section-top > .aycan-kicker {
  margin-bottom: 0.9rem;
  width: auto;
  justify-content: flex-start;
}
.aycan-section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}
.aycan-section-title-row .aycan-head {
  margin-bottom: 0;
}
.aycan-section-title-row__main {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
}
.aycan-section-title-row__aside {
  flex: none;
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════
   Image frame + offset backdrop panel (editorial depth)
   Section sets --frame-top / --frame-bottom / --frame-ratio /
   --backdrop-offset / --backdrop-color on .aycan-frame-wrap.
   ═══════════════════════════════════════════════════════════ */
.aycan-frame-wrap { position: relative; width: 100%; }

.aycan-frame {
  position: relative;
  z-index: 2;
  aspect-ratio: var(--frame-ratio, 3 / 4);
  overflow: hidden;
  border-radius: var(--frame-top, 28px) var(--frame-top, 28px) var(--frame-bottom, 28px) var(--frame-bottom, 28px);
  background: rgba(var(--color-foreground), 0.04);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.12);
}
.aycan-frame img,
.aycan-frame svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-5) var(--ease-out);
}
.aycan-frame:hover img { transform: scale(1.04); }

/* Frame shape helpers (set the radius vars) */
.aycan-shape--arch    { --frame-top: 999px; --frame-bottom: 28px; }
.aycan-shape--rounded { --frame-top: 32px;  --frame-bottom: 32px; }
.aycan-shape--circle  { --frame-top: 50%;   --frame-bottom: 50%; --frame-ratio: 1 / 1; }
.aycan-shape--square  { --frame-top: 10px;  --frame-bottom: 10px; }

.aycan-backdrop {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform: translate(var(--backdrop-offset, 22px), var(--backdrop-offset, 22px));
  border-radius: var(--frame-top, 28px) var(--frame-top, 28px) var(--frame-bottom, 28px) var(--frame-bottom, 28px);
}
.aycan-backdrop--checker {
  background-image: repeating-conic-gradient(
    var(--backdrop-color, #E2789C) 0% 25%,
    transparent 0% 50%
  );
  background-size: 18px 18px;
  opacity: 0.9;
}
.aycan-backdrop--solid {
  background: var(--backdrop-color, #E2789C);
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   Newsletter pill form — shared (section, footer, opening soon)
   ═══════════════════════════════════════════════════════════ */
.aycan-news__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.16);
  border-radius: var(--radius-pill, 999px);
  padding-block: 0.5rem; padding-inline: 1.4rem 0.5rem;
  box-shadow: var(--shadow-card, none);
}

.aycan-news__field-icon {
  flex: none;
  color: rgba(var(--color-foreground), 0.4);
}

.aycan-news__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--font-body-family);
  font-size: 1.5rem;
  color: rgb(var(--color-foreground));
  padding: 1rem 0.4rem;
  margin: 0;
  box-shadow: none !important;
  outline: none;
  border-radius: 0;
}

.aycan-news__input:focus,
.aycan-news__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}

.aycan-news__input::placeholder {
  color: rgba(var(--color-foreground), 0.45);
}

.aycan-news__btn {
  flex: none;
  border: 0;
  cursor: pointer;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-family: var(--font-body-family);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  padding: 1.1rem 2rem;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}

.aycan-news__consent {
  margin: 1rem 0 0;
  padding-inline-start: 0.4rem;
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  line-height: 1.4;
  color: rgba(var(--color-foreground), 0.55);
}

.aycan-news__success {
  margin: 0;
  font-family: var(--font-heading-family);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-section-md);
  line-height: var(--lh-section);
  color: rgb(var(--color-foreground));
}

.aycan-news__error {
  margin: 1rem 0 0;
  padding-inline-start: 0.4rem;
  font-family: var(--font-body-family);
  font-size: 1.3rem;
  color: #b3261e;
}

@media screen and (max-width: 749px) {
  .aycan-news__field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .aycan-news__field-icon {
    display: none;
  }

  .aycan-news__input {
    width: 100%;
    min-height: 4.4rem;
    border: 1px solid rgba(var(--color-foreground), 0.16) !important;
    border-radius: var(--radius-pill, 999px) !important;
    background: rgb(var(--color-background)) !important;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
    box-sizing: border-box;
  }

  .aycan-news__input:focus,
  .aycan-news__input:focus-visible {
    border-color: rgb(var(--color-button)) !important;
    background: rgb(var(--color-background)) !important;
  }

  .aycan-news__btn {
    width: 100%;
    min-height: 4.4rem;
    padding: 1.1rem 1.4rem;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ═══════════════════════════════════════════════════════════
   Utilities — pills, buttons, sparkles
   ═══════════════════════════════════════════════════════════ */
.aycan-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.aycan-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  background: rgba(var(--color-background), 0.55);
  border: 1px solid rgba(var(--color-foreground), 0.12);
  border-radius: 999px;
  font-family: var(--font-body-family);
  font-size: 1.25rem;
  font-weight: 500;
  color: rgba(var(--color-foreground), 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.aycan-pill__icon { color: var(--color-primary); }

.aycan-btn {
  transition: background-position var(--btn-dur) var(--btn-ease),
              color var(--btn-dur) var(--btn-ease),
              border-color var(--btn-dur) var(--btn-ease);
}
/* ── One arrow button for every directional (link) CTA ──────────────
   Label + circular badge holding two static icons (→ rest, ↗ hover) that
   crossfade — never a runtime rotate(), so the arrowhead never shifts on hover.
   Badge = button text colour, arrow = button background colour; both derive from
   the .button--primary / .button--secondary variant. Markup: snippets/aycan-btn-badge. */
.aycan-btn--arrow {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding-inline-end: 0.8rem; /* badge hugs the trailing edge */
}
/* Full-width CTA (e.g. wholesale card): badge pushed to the far edge. */
.aycan-btn--arrow.aycan-btn--block {
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  padding-inline: 2.2rem 1rem;
}
.aycan-btn__badge {
  display: grid;
  place-items: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden; /* clips the sliding chevrons to the circle */
  transition: background-color var(--btn-dur-icon) var(--btn-ease), color var(--btn-dur-icon) var(--btn-ease); /* matched to the icon's own duration — the colour shift and the slide must land together, or the icon reads as a muddy in-between colour mid-hover */
}
/* Slide, not spin: two copies of the same chevron (same angle throughout) sit in the same
   grid cell. On hover the current one slides out to the right while the next one slides in
   from the left to take its place — a small conveyor. Because the glyph never rotates, there's
   no tip-shift risk (unlike a live rotate()), and the direction always reads cleanly. */
.aycan-btn__badge-icon {
  grid-area: 1 / 1;
  transition: opacity var(--btn-dur-icon) var(--btn-ease),
              transform var(--btn-dur-icon) var(--btn-ease);
}
.aycan-btn__badge-icon--current {
  opacity: 1;
  transform: translateX(var(--btn-badge-icon-nudge));
}
.aycan-btn__badge-icon--next {
  opacity: 0;
  transform: translateX(-150%); /* parked off-screen to the left */
}
.aycan-btn--arrow:hover .aycan-btn__badge-icon--current,
.aycan-btn--arrow:focus-visible .aycan-btn__badge-icon--current {
  opacity: 0;
  transform: translateX(150%); /* slides out to the right */
}
.aycan-btn--arrow:hover .aycan-btn__badge-icon--next,
.aycan-btn--arrow:focus-visible .aycan-btn__badge-icon--next {
  opacity: 1;
  transform: translateX(var(--btn-badge-icon-nudge)); /* slides in to fill the centre */
}

/* Badge colours per variant — badge = text, arrow = background. */
.button--primary.aycan-btn--arrow .aycan-btn__badge {
  background: var(--color-cta-text);
  color: var(--color-cta);
}
.button--primary.aycan-btn--arrow:hover .aycan-btn__badge,
.button--primary.aycan-btn--arrow:focus-visible .aycan-btn__badge {
  color: var(--color-cta-hover-bg);
}
.button--secondary.aycan-btn--arrow .aycan-btn__badge {
  background: rgb(var(--color-foreground));
  color: var(--color-cta-text); /* fixed white — not the ambient section background, which varies per colour scheme */
}
.button--secondary.aycan-btn--arrow:hover .aycan-btn__badge,
.button--secondary.aycan-btn--arrow:focus-visible .aycan-btn__badge {
  color: var(--color-pink-light);
}

.aycan-spark {
  position: absolute;
  color: var(--spark-color, var(--color-primary));
  pointer-events: none;
  z-index: 3;
  animation: aycan-twinkle 3.2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   Reveal — staggered load animation (set --i inline)
   ═══════════════════════════════════════════════════════════ */
.aycan-reveal {
  opacity: 0;
  animation: aycan-rise 0.7s var(--ease-entrance) forwards;
  animation-delay: calc(var(--i, 1) * 90ms);
}

/* ═══════════════════════════════════════════════════════════
   Keyframes
   ═══════════════════════════════════════════════════════════ */
@keyframes aycan-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aycan-underline {
  to { background-size: 100% 0.08em; }
}
@keyframes aycan-spin {
  to { transform: rotate(360deg); }
}
@keyframes aycan-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.55; }
}
@keyframes aycan-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50%      { transform: scale(1.25) rotate(15deg); opacity: 0.35; }
}

/* ═══════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .aycan-reveal { opacity: 1 !important; animation: none !important; }
  .aycan-spark,
  .aycan-kicker__dot { animation: none !important; }
  .aycan-frame:hover img,
  .aycan-card--hover:hover,
  .aycan-scene__bg { transform: none !important; }
  /* Both chevrons collapse to centre and swap by opacity only — no slide. */
  .aycan-btn__badge-icon { transition: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   Checker — yapısal marka imzası (ASLA ürün kartı fill'i değil)
   Parametrik: --checker-a / --checker-b / --checker-size
   ═══════════════════════════════════════════════════════════ */
.aycan-checker {
  --checker-a: var(--color-checkered-a, #E2789C);
  --checker-b: var(--checker-b-color, transparent);
  background-image: repeating-conic-gradient(
    var(--checker-a) 0% 25%,
    var(--checker-b) 0% 50%
  );
  background-size: var(--checker-size, 14px) var(--checker-size, 14px);
}
/* Yatay divider bandı */
.aycan-checker--strip {
  height: var(--checker-strip-h, 12px);
  width: 100%;
}
/* İnce section kenar kuralı (top veya bottom) */
.aycan-checker--edge { position: relative; }
.aycan-checker--edge::before,
.aycan-checker--edge::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 10px;
  background-image: repeating-conic-gradient(
    var(--color-checkered-a) 0% 25%,
    transparent 0% 50%
  );
  background-size: 10px 10px;
  opacity: 0.5;
  pointer-events: none;
}
.aycan-checker--edge.is-top::before { top: 0; }
.aycan-checker--edge.is-bottom::after { bottom: 0; }
/* Küçük köşe aksanı (kart/tile üzerinde, fill değil) */
.aycan-checker--corner {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-image: repeating-conic-gradient(
    var(--color-checkered-a) 0% 25%,
    rgba(255, 255, 255, 0.9) 0% 50%
  );
  background-size: 8px 8px;
}

/* ═══════════════════════════════════════════════════════════
   Brand card — paylaşılan yüzey (scene kartı, value-prop, promo)
   ═══════════════════════════════════════════════════════════ */
.aycan-card {
  background: rgb(var(--color-background));
  border: 1px solid var(--card-border-tint, rgba(226, 120, 156, 0.14));
  border-radius: var(--radius-card, 16px);
  box-shadow: none;
  transition: border-color var(--dur-fast, var(--dur-2)) var(--ease-brand),
              transform var(--dur-fast, var(--dur-2)) var(--ease-brand);
}
.aycan-card--glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.5);
}
.aycan-card--hover:hover {
  border-color: var(--card-border-tint-strong);
}

/* ═══════════════════════════════════════════════════════════
   Scene — framed stage (default) + split + overlay (legacy)
   ═══════════════════════════════════════════════════════════ */

/* ── Stage layout — brand frame + separate content card ── */
.aycan-scene-wrap--stage {
  overflow: hidden;
}

.aycan-scene__stage-shell {
  width: min(var(--w-site, 100%), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter, 1.5rem);
}

.aycan-scene--stage {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(2.4rem, 5.5vw, 6rem);
}

.aycan-scene--stage-image-right {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
}

.aycan-scene--stage-image-right .aycan-scene__stage-visual { order: 2; }
.aycan-scene--stage-image-right .aycan-scene__stage-copy { order: 1; }

.aycan-scene__stage-visual {
  position: relative;
  padding-block: 0 clamp(1.8rem, 3.5vw, 3rem); padding-inline: 0 clamp(0rem, 2vw, 1.2rem);
}

.aycan-scene--stage-image-right .aycan-scene__stage-visual {
  padding-block: 0 clamp(1.8rem, 3.5vw, 3rem); padding-inline: clamp(0rem, 2vw, 1.2rem) 0;
}

.aycan-scene__stage-copy {
  align-self: center;
  max-width: 44rem;
}

.aycan-scene--stage-image-left .aycan-scene__stage-copy {
  justify-self: start;
}

.aycan-scene--stage-image-right .aycan-scene__stage-copy {
  justify-self: end;
}

@media screen and (min-width: 750px) {
  .aycan-scene__stage-copy {
    transform: translateY(clamp(0.8rem, 2.5vw, 2rem));
  }
}

.aycan-scene--stage .aycan-scene__img--mobile { display: none; }

.aycan-scene--stage .aycan-scene__stage-copy .aycan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
}

@media screen and (max-width: 749px) {
  .aycan-scene--stage,
  .aycan-scene--stage-image-right {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 5vw, 2.4rem);
  }

  .aycan-scene--stage-image-right .aycan-scene__stage-visual,
  .aycan-scene--stage-image-right .aycan-scene__stage-copy {
    order: unset;
  }

  .aycan-scene__stage-visual {
    order: 1;
    padding: 0 0 clamp(1rem, 3vw, 1.4rem);
  }

  .aycan-scene__stage-copy {
    order: 2;
    transform: none;
    max-width: none;
    justify-self: stretch !important;
  }

  .aycan-scene--stage .aycan-scene__img--mobile { display: block; }
  .aycan-scene--stage .aycan-scene__img--desktop:not(.aycan-scene__img--always) { display: none; }
}

/* ── Studio story presentation (about / maker sections) ── */
.aycan-scene-wrap--studio.aycan-scene-wrap--stage {
  padding-inline: 0;
}

.aycan-scene-wrap--studio .aycan-scene__stage-shell {
  padding-inline: var(--gutter, 1.5rem);
}

.aycan-scene-wrap--studio .aycan-scene--stage {
  gap: clamp(2rem, 4.5vw, 5.2rem);
}

.aycan-scene-wrap--studio .aycan-scene__stage-copy .aycan-card {
  padding: clamp(2.4rem, 4.2vw, 3.8rem);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.aycan-scene-wrap--studio .aycan-accent-heading--xl {
  font-size: clamp(3.2rem, 4.2vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 14ch;
}

.aycan-scene-wrap--studio .aycan-scene__text {
  font-size: clamp(1.48rem, 1.55vw, 1.68rem);
  line-height: 1.62;
  max-width: 42ch;
}

.aycan-scene-wrap--studio .aycan-scene__folio {
  margin-bottom: clamp(0.6rem, 1.2vw, 1rem);
}

.aycan-scene-wrap--studio .aycan-scene__stats {
  gap: clamp(1.6rem, 2.8vw, 2.8rem);
}

.aycan-scene-wrap--studio .aycan-scene__stats + .aycan-pills {
  margin-top: clamp(0.2rem, 0.6vw, 0.4rem);
}

.aycan-scene-wrap--studio .aycan-split__stat-num {
  font-size: clamp(2.4rem, 3vw, 3rem);
}

.aycan-scene-wrap--studio .aycan-scene__ctas {
  margin-top: clamp(0.6rem, 1.2vw, 1rem);
  width: 100%;
}

@media screen and (max-width: 749px) {
  .aycan-scene-wrap--studio .aycan-accent-heading--xl {
    max-width: none;
  }

  .aycan-scene-wrap--studio .aycan-split__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .aycan-scene-wrap--studio .aycan-split__stat-num {
    font-size: clamp(2rem, 6vw, 2.4rem);
  }

  .aycan-scene-wrap--studio .aycan-split__stat-label {
    font-size: 1.1rem;
  }
}

/* ── Split layout — image + panel, zero overlap ── */
.aycan-scene-wrap--split {
  overflow: hidden;
}

.aycan-scene__split-frame {
  width: min(var(--w-site, 100%), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter, 1.5rem);
}

.aycan-scene--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: clamp(36rem, 42vw, 52rem);
  border-radius: clamp(18px, 1.6vw, 24px);
  overflow: hidden;
  background: rgb(var(--color-background-contrast, var(--color-background)));
  border: 1px solid rgba(var(--color-foreground), 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.aycan-scene--split-image-right {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.aycan-scene--split-image-right .aycan-scene__split-media { order: 2; }
.aycan-scene--split-image-right .aycan-scene__split-panel { order: 1; }

.aycan-scene__split-media {
  position: relative;
  min-height: 100%;
  background: rgba(var(--color-foreground), 0.04);
}

.aycan-scene__split-media .aycan-scene__img,
.aycan-scene__split-media svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aycan-scene__split-media .aycan-scene__img--mobile { display: none; }

.aycan-scene__split-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  padding: clamp(2.4rem, 4.5vw, 4.8rem) clamp(2rem, 4vw, 4.4rem);
  background: rgb(var(--color-background));
  border-inline-start: 1px solid rgba(var(--color-foreground), 0.06);
}

.aycan-scene--split-image-right .aycan-scene__split-panel {
  border-inline-start: none;
  border-inline-end: 1px solid rgba(var(--color-foreground), 0.06);
}

.aycan-scene__split-panel.aycan-card,
.aycan-scene__split-panel.aycan-card--glass {
  border-radius: 0;
  box-shadow: none;
}

@media screen and (max-width: 749px) {
  .aycan-scene--split,
  .aycan-scene--split-image-right {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .aycan-scene--split-image-right .aycan-scene__split-media,
  .aycan-scene--split-image-right .aycan-scene__split-panel {
    order: unset;
  }

  .aycan-scene__split-media {
    aspect-ratio: 5 / 4;
    min-height: 0;
  }

  .aycan-scene__split-media .aycan-scene__img--mobile { display: block; }
  .aycan-scene__split-media .aycan-scene__img--desktop:not(.aycan-scene__img--always) { display: none; }

  .aycan-scene__split-panel {
    border-inline-start: none;
    border-inline-end: none;
    border-top: 1px solid rgba(var(--color-foreground), 0.06);
    padding: clamp(2rem, 6vw, 2.8rem) clamp(1.6rem, 5vw, 2rem);
  }
}

/* ── Overlay layout (legacy) ── */
.aycan-scene--overlay {
  position: relative;
  display: flex;
  min-height: var(--scene-min, 70vh);
  border-radius: var(--scene-radius, 28px);
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4rem);
  background: rgba(var(--color-foreground), 0.04);
}

.aycan-scene-wrap--full .aycan-scene--overlay {
  border-radius: 0;
  padding: clamp(2rem, 5vw, 5rem);
}

.aycan-scene-wrap--full .aycan-scene--overlay .aycan-scene__card {
  max-width: min(var(--scene-card-w, 42rem), calc(100% - 3rem));
}
.aycan-scene__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.aycan-scene__bg img,
.aycan-scene__bg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aycan-scene__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.aycan-scene__scrim--dark    { background: linear-gradient(180deg, rgba(20,8,12,0) 0%, rgba(20,8,12,var(--scrim-op, 0.5)) 100%); }
.aycan-scene__scrim--blush   { background: linear-gradient(180deg, rgba(249,240,243,0) 0%, rgba(249,240,243,var(--scrim-op, 0.75)) 100%); }
.aycan-scene__scrim--gradient{ background: linear-gradient(105deg, rgba(20,8,12,var(--scrim-op, 0.55)) 0%, rgba(20,8,12,0) 60%); }
.aycan-scene__card {
  position: relative;
  z-index: 2;
  max-width: var(--scene-card-w, 42rem);
  padding: clamp(1.8rem, 3vw, 3rem);
}
.aycan-scene__card.aycan-card,
.aycan-scene__card.aycan-card--glass { border-radius: var(--radius-card, 16px); }
/* Yerleşim — flex align (cross=dikey) + justify (main=yatay) */
.aycan-scene--pos-tl     { align-items: flex-start; justify-content: flex-start; }
.aycan-scene--pos-tr     { align-items: flex-start; justify-content: flex-end; }
.aycan-scene--pos-bl     { align-items: flex-end;   justify-content: flex-start; }
.aycan-scene--pos-br     { align-items: flex-end;   justify-content: flex-end; }
.aycan-scene--pos-left   { align-items: center;     justify-content: flex-start; }
.aycan-scene--pos-right  { align-items: center;     justify-content: flex-end; }
.aycan-scene--pos-center { align-items: center;     justify-content: center; text-align: center; }

@media screen and (max-width: 749px) {
  .aycan-scene--overlay {
    min-height: clamp(30rem, 108vw, 42rem);
    max-height: min(44rem, 82vh);
    padding: clamp(1rem, 3.5vw, 1.4rem);
    align-items: flex-end !important;
    justify-content: stretch !important;
  }

  .aycan-scene-wrap--full .aycan-scene--overlay {
    min-height: clamp(30rem, 108vw, 42rem);
    max-height: min(44rem, 82vh);
    padding: clamp(1rem, 3.5vw, 1.4rem);
  }

  .aycan-scene--overlay.aycan-scene--pos-tl,
  .aycan-scene--overlay.aycan-scene--pos-tr,
  .aycan-scene--overlay.aycan-scene--pos-bl,
  .aycan-scene--overlay.aycan-scene--pos-br,
  .aycan-scene--overlay.aycan-scene--pos-left,
  .aycan-scene--overlay.aycan-scene--pos-right {
    align-items: flex-end;
    justify-content: stretch;
    text-align: start;
  }

  .aycan-scene--overlay.aycan-scene--pos-center {
    align-items: flex-end;
    justify-content: stretch;
    text-align: center;
  }

  .aycan-scene--overlay .aycan-scene__card {
    max-width: 100%;
    width: 100%;
    padding: clamp(1.2rem, 3.8vw, 1.6rem);
  }

  .aycan-scene-wrap--full .aycan-scene--overlay .aycan-scene__card {
    max-width: 100%;
  }

  .aycan-scene--overlay .aycan-scene__bg img {
    object-position: top center;
  }

  .aycan-scene--overlay .aycan-scene__scrim--gradient {
    background: linear-gradient(
      180deg,
      rgba(20, 8, 12, 0.04) 0%,
      rgba(20, 8, 12, 0.28) 42%,
      rgba(20, 8, 12, 0.58) 100%
    );
  }
}

/* ═══════════════════════════════════════════════════════════
   Editorial Split — classic grid + magazine full-bleed
   Ref: Parachute / Schoolhouse editorial about blocks
   ═══════════════════════════════════════════════════════════ */

.aycan-split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.8rem, 5vw, 6.4rem);
}

.aycan-split--image-left .aycan-split__content { order: 2; }
.aycan-split--image-left .aycan-split__visual  { order: 1; }

.aycan-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.4rem, 2vw, 2.1rem);
}

.aycan-split .aycan-kicker {
  justify-content: flex-start;
  text-align: start;
  margin-inline-start: 0;
}

.aycan-kicker--editorial {
  color: rgba(var(--color-foreground), 0.48);
  letter-spacing: 0.14em;
  font-size: clamp(1.05rem, 1.1vw, 1.15rem);
}

.aycan-kicker--editorial .aycan-kicker__dot {
  display: none;
}

.aycan-split__text {
  font-family: var(--font-body-family);
  font-size: var(--t-body);
  line-height: 1.68;
  color: rgba(var(--color-foreground), 0.62);
  max-width: 42ch;
}

.aycan-split__text p { margin: 0; }
.aycan-split__text p + p { margin-top: 0.85em; }

.aycan-split__ctas {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: clamp(0.6rem, 1.2vw, 1.2rem);
}

.aycan-split__text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body-family);
  font-size: var(--t-ui);
  font-weight: 500;
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.aycan-split__text-link-icon {
  display: inline-block;
  transition: transform var(--dur-3) var(--ease-out);
}

.aycan-split__text-link:hover .aycan-split__text-link-icon,
.aycan-split__text-link:focus-visible .aycan-split__text-link-icon {
  transform: translateX(var(--icon-slide));
}

.aycan-split__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 3vw, 3.4rem);
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 1.8rem 0 0;
  border-top: 1px solid rgba(var(--color-foreground), 0.12);
  width: 100%;
}

.aycan-split__stat-num {
  display: block;
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: var(--t-section-lg);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  color: var(--color-primary);
}

.aycan-split__stat-label {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body-family);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.6);
}

/* Classic layout — contained image card */
.aycan-split:not(.aycan-split--magazine) .aycan-split__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--split-ratio, 4 / 5);
  overflow: hidden;
  border-radius: clamp(16px, 1.4vw, 24px);
  background: rgba(var(--color-foreground), 0.04);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
}

.aycan-split:not(.aycan-split--magazine) .aycan-split__img,
.aycan-split:not(.aycan-split--magazine) .aycan-split__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-5) var(--ease-out);
}

.aycan-split:not(.aycan-split--magazine) .aycan-split__media:hover .aycan-split__img {
  transform: scale(1.03);
}

/* Magazine layout — edge-to-edge editorial */
.aycan-split--magazine {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.aycan-split__magazine {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  min-height: clamp(34rem, 48vw, 54rem);
}

.aycan-split--magazine-right .aycan-split__magazine {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
}

.aycan-split--magazine-right .aycan-split__visual { order: 2; }
.aycan-split--magazine-right .aycan-split__panel { order: 1; }

.aycan-split--magazine .aycan-split__visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.04);
}

.aycan-split--magazine-left .aycan-split__visual {
  margin-inline-start: max(calc((100vw - var(--w-site, 100%)) / -2), calc(-1 * var(--gutter, 1.5rem)));
}

.aycan-split--magazine-right .aycan-split__visual {
  margin-inline-end: max(calc((100vw - var(--w-site, 100%)) / -2), calc(-1 * var(--gutter, 1.5rem)));
}

.aycan-split--magazine .aycan-split__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aycan-split--magazine .aycan-split__img,
.aycan-split--magazine .aycan-split__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-5) var(--ease-out);
}

.aycan-split--magazine .aycan-split__visual:hover .aycan-split__img {
  transform: scale(1.02);
}

.aycan-split__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.2rem, 6vw, 7.2rem) clamp(2.4rem, 5.5vw, 6.8rem);
  background: rgb(var(--color-background));
  border-inline-start: 1px solid rgba(var(--color-foreground), 0.1);
}

.aycan-split--magazine-right .aycan-split__panel {
  border-inline-start: none;
  border-inline-end: 1px solid rgba(var(--color-foreground), 0.1);
}

.aycan-split--magazine .aycan-split__content {
  width: min(100%, 44rem);
  gap: clamp(1.6rem, 2.4vw, 2.4rem);
}

.aycan-split--magazine .aycan-accent-heading--xl {
  font-size: clamp(3.4rem, 4.6vw, 5.2rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.aycan-split--magazine .aycan-split__text {
  font-size: clamp(1.5rem, 1.55vw, 1.7rem);
  max-width: 38ch;
}

/* Magazine mobil: iki ~180px sütun yerine üstte tam-genişlik görsel banner,
   altta içerik. (Desktop grid'inin mobil override'ı yoktu — tüm magazine
   kullanıcıları 749px altında yan yana sıkışıyordu.) */
@media screen and (max-width: 749px) {
  .aycan-split__magazine,
  .aycan-split--magazine-right .aycan-split__magazine {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .aycan-split--magazine .aycan-split__visual,
  .aycan-split--magazine-right .aycan-split__visual {
    order: 1;
    min-height: clamp(26rem, 88vw, 36rem);
    margin-inline: max(calc((100vw - var(--w-site, 100%)) / -2), calc(-1 * var(--gutter, 1.5rem)));
  }

  .aycan-split--magazine .aycan-split__panel,
  .aycan-split--magazine-right .aycan-split__panel {
    order: 2;
    border-inline-start: none;
    border-inline-end: none;
    padding-top: clamp(2.4rem, 7vw, 3.2rem);
  }
}

.aycan-split--magazine .aycan-split__ctas .button--primary {
  min-width: min(100%, 20rem);
}

@media screen and (max-width: 989px) {
  .aycan-split__magazine {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .aycan-split--magazine-left .aycan-split__visual,
  .aycan-split--magazine-right .aycan-split__visual {
    order: 1;
    margin-inline-start: 0;
    margin-inline-end: 0;
    aspect-ratio: 5 / 4;
    min-height: 0;
  }

  .aycan-split--magazine-right .aycan-split__panel {
    order: 2;
  }

  .aycan-split__panel {
    border-inline-start: none;
    border-inline-end: none;
    border-top: 1px solid rgba(var(--color-foreground), 0.1);
    padding: clamp(2.8rem, 8vw, 4rem) var(--gutter, 1.5rem);
  }

  .aycan-split--magazine .aycan-split__content {
    width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .aycan-split__inner {
    grid-template-columns: 1fr;
    gap: clamp(2.6rem, 8vw, 3.4rem);
  }

  .aycan-split--image-left .aycan-split__content,
  .aycan-split--image-right .aycan-split__content { order: 1; }

  .aycan-split--image-left .aycan-split__visual,
  .aycan-split--image-right .aycan-split__visual { order: 2; }
}

/* ═══════════════════════════════════════════════════════════
   Value-props — markalı ikon satırı
   ═══════════════════════════════════════════════════════════ */
.aycan-valueprops {
  display: grid;
  grid-template-columns: repeat(var(--vp-cols, 3), 1fr);
  gap: clamp(1.6rem, 3vw, 3.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.aycan-valueprop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}
.aycan-valueprop__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-blush);
  color: var(--color-primary);
}
.aycan-valueprop__icon svg { width: 30px; height: 30px; }
.aycan-valueprop__title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.9vw, 1.95rem);
  line-height: 1.1;
  color: rgb(var(--color-foreground));
}
.aycan-valueprop__text {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: 1.35rem;
  line-height: var(--lh-body-tight);
  color: rgba(var(--color-foreground), 0.6);
  max-width: 30ch;
}

/* ═══════════════════════════════════════════════════════════
   Statement — editöryel asimetrik tipografi anı
   ═══════════════════════════════════════════════════════════ */
.aycan-statement {
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-statement);
  letter-spacing: var(--ls-statement);
  color: rgb(var(--color-foreground));
  text-wrap: balance;
}
.aycan-statement--md  { font-size: var(--t-section-xl); line-height: var(--lh-section); }
.aycan-statement--lg,
.aycan-statement--xl  { font-size: var(--t-statement); }
.aycan-statement--2xl { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.aycan-statement__line { display: block; }
.aycan-statement__line + .aycan-statement__line {
  margin-top: 0.14em;
}
/* Indent is a left-align-only device (asymmetric stair-step). It's expressed
   as a % of the statement's own container so it scales with whatever measure
   the section uses, instead of a fixed vw value that can overflow a narrow
   container. Centered statements never indent — asymmetry would just pull
   the line off-center. */
.aycan-statement--left .aycan-statement__line--sm { padding-inline-start: 12%; }
.aycan-statement--left .aycan-statement__line--lg { padding-inline-start: 24%; }
.aycan-statement em {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-accent-em);
  line-height: var(--lh-accent);
  color: rgb(var(--color-button));
}

@media screen and (max-width: 749px) {
  .aycan-valueprops { grid-template-columns: 1fr; gap: 2.4rem; }
  .aycan-statement__line--sm,
  .aycan-statement__line--lg { padding-inline-start: 0; }
}

/* ── PDP narrative — scrolls under the product image (left column) while
      the buy box stays sticky on the right. Figma PDP_NARRATIVE. ── */
.aycan-pdp-narrative {
  margin-top: clamp(3.5rem, 7vw, 7rem);
}
.aycan-pdp-narrative__chapters {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6.5rem);
}

/* Story header — grouped TIGHTLY with its chapters (Gestalt proximity): small gap
   below it, generous space + a hairline divider above to separate it from the
   gallery. The header reads as the chapters' intro, not part of the gallery. */
.aycan-pdp-narrative__head {
  margin-bottom: clamp(2.2rem, 3.5vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 3rem);
  border-top: 1px solid rgba(var(--color-foreground), 0.14);
}
.aycan-pdp-narrative__eyebrow {
  display: inline-block;
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.aycan-pdp-narrative__title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: clamp(2.6rem, 3.4vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: rgb(var(--color-foreground));
  text-wrap: balance;
  max-width: 20ch;
}
.aycan-pdp-narrative__title em {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-accent-em);
  line-height: var(--lh-accent);
  color: rgb(var(--color-button));
}

/* Mobile: the grid is 1-col and DOM order is gallery → buy box → story, so the
   buy box (price / variant / ATC) comes right after the gallery, per PDP UX
   guidance — the story follows. No reorder hack needed; just trim the top gap. */
@media screen and (max-width: 749px) {
  .aycan-pdp-narrative { margin-top: clamp(2.4rem, 8vw, 4rem); }
}

/* Dawn pins the gallery when sticky-info is on — disabled when narrative present (see pdp-enhancements.css). */

.aycan-pdp-narrative__chapter { display: grid; grid-template-columns: 1fr; gap: 1.6rem; position: relative; }
.aycan-pdp-narrative__chapter--text-only {
  max-width: 42ch;
}
.aycan-pdp-narrative__chapter--text-only .aycan-pdp-narrative__num {
  opacity: 0.35;
}
.aycan-pdp-narrative__num {
  display: block;
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: clamp(4.4rem, 9vw, 6rem);
  line-height: 0.8;
  color: rgba(var(--color-foreground), 0.14);
  margin-bottom: 0.4rem;
}
.aycan-pdp-narrative__kicker {
  display: inline-block;
  font-family: var(--font-body-family);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.8rem;
}
.aycan-pdp-narrative__heading {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: clamp(2.2rem, 2.7vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: rgb(var(--color-foreground));
  text-wrap: balance;
}
.aycan-pdp-narrative__heading em {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-accent-em);
  line-height: var(--lh-accent);
  color: rgb(var(--color-button));
}
.aycan-pdp-narrative__body {
  margin-top: 1.1rem;
  font-family: var(--font-body-family);
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  line-height: 1.62;
  color: rgba(var(--color-foreground), 0.72);
}
.aycan-pdp-narrative__body p { margin: 0; }
.aycan-pdp-narrative__body p + p { margin-top: 0.7em; }
.aycan-pdp-narrative__media {
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.04);
  aspect-ratio: 4 / 5; /* mobile: tall-ish portrait */
}
.aycan-pdp-narrative__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aycan-pdp-narrative__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-card, 16px);
}

/* Desktop split: text sticks within its chapter (begins AFTER the gallery, never
   under it) while the tall portrait image scrolls past. Image ALWAYS sits in the
   wide column so chapters 1 & 2 read at the same size, regardless of side. */
@media screen and (min-width: 750px) {
  .aycan-pdp-narrative__chapters { gap: clamp(5rem, 11vw, 11rem); }

  .aycan-pdp-narrative__chapter--auto {
    grid-template-columns: 0.74fr 1.26fr;
    gap: clamp(2rem, 3vw, 3.6rem);
    align-items: start;
  }
  .aycan-pdp-narrative__chapter--auto:nth-child(even) { grid-template-columns: 1.26fr 0.74fr; }
  .aycan-pdp-narrative__chapter--auto:nth-child(even) .aycan-pdp-narrative__text { order: 2; }
  .aycan-pdp-narrative__chapter--auto:nth-child(even) .aycan-pdp-narrative__media { order: 1; }
  .aycan-pdp-narrative__chapter--auto .aycan-pdp-narrative__text {
    position: sticky;
    top: 14vh;
    align-self: start;
  }
  .aycan-pdp-narrative__chapter--auto .aycan-pdp-narrative__media { aspect-ratio: 3 / 5; }
  .aycan-pdp-narrative__chapter--auto .aycan-pdp-narrative__num {
    font-size: clamp(6rem, 8vw, 9rem);
    color: rgba(var(--color-foreground), 0.10);
    margin-bottom: -0.05em;
  }

  /* Final chapter — centered text with a wide landscape image below (Figma node 3). */
  .aycan-pdp-narrative__chapter--centered { display: block; text-align: center; }
  .aycan-pdp-narrative__chapter--centered .aycan-pdp-narrative__text {
    position: static;
    max-width: 60ch;
    margin: 0 auto clamp(2rem, 3vw, 3rem);
  }
  .aycan-pdp-narrative__chapter--centered .aycan-pdp-narrative__body {
    max-width: 52ch;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
  .aycan-pdp-narrative__chapter--centered .aycan-pdp-narrative__media { aspect-ratio: 16 / 9; }
  .aycan-pdp-narrative__chapter--centered .aycan-pdp-narrative__num {
    font-size: clamp(5rem, 7vw, 7.5rem);
    color: rgba(var(--color-foreground), 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aycan-pdp-narrative__chapter--auto .aycan-pdp-narrative__text { position: static; }
}

/* ============================================================
   Unified carousel arrow — layout pairs (chrome → base-brand.css .aycan-arrow)
   ============================================================ */
.aycan-arrows {
  display: flex;
  gap: 0.8rem;
  flex: none;
}

/* Round icon-only shop CTA — media slider shop row, matches card overlay scale */
.ewa-icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* md step of the shared control scale — identical value to the 4.4rem this used to hardcode. */
  width: var(--ctl-h-md);
  height: var(--ctl-h-md);
  min-width: var(--ctl-h-md);
  min-height: var(--ctl-h-md);
  padding: 0;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-position var(--btn-dur) var(--btn-ease),
    background-color var(--btn-dur) var(--btn-ease),
    border-color var(--btn-dur) var(--btn-ease),
    color var(--btn-dur) var(--btn-ease);
  -webkit-tap-highlight-color: transparent;
}
.ewa-icon-btn:not(.ewa-card__go) svg.ewa-icon--sm,
.ewa-icon-btn:not(.ewa-card__go) .ewa-icon--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}
.ewa-icon-btn:not(.ewa-card__go) svg.ewa-icon--md,
.ewa-icon-btn:not(.ewa-card__go) .ewa-icon--md {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}
.ewa-icon-btn:not(.ewa-card__go) svg.ewa-icon--lg,
.ewa-icon-btn:not(.ewa-card__go) .ewa-icon--lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}
.ewa-icon-btn:not(.ewa-card__go) svg.ewa-icon--xl,
.ewa-icon-btn:not(.ewa-card__go) .ewa-icon--xl {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}
.ewa-icon-btn:not(.ewa-card__go) svg {
  flex: none;
  transition: transform var(--btn-dur) var(--btn-ease);
}
/* Secondary text-less icon button (theme system): rest takes the SURFACE background colour (not
   transparent) so the control always reads as a defined element and integrates with whatever section
   it sits in; ink glyph + divider border. Hover = ink (black) fill, borderless, white glyph.
   Shared with .aycan-arrow (carousel nav). Buttons sitting ON an image use the --on-media variant
   instead (explicit white), since they can't inherit a surface colour. */
.ewa-icon-btn--secondary {
  position: relative;
  /* NO z-index here on purpose: `isolation: isolate` alone creates the stacking context the perde
     ::before (z-index:-1) needs, WITHOUT overwriting the button's own stacking position. Setting
     z-index:0 here clobbered .ewa-card__go's z-index:5 (identical 0,1,0 specificity) and dropped the
     card go button behind the media. */
  overflow: hidden;
  isolation: isolate;
  background: rgb(var(--color-background));
  color: var(--color-cta);
  border: var(--ctl-border);
}
/* PERDE (curtain) sweep — the theme's standard fill transition. This family was the only one left
   doing a flat background fade while .button--secondary and .ewa-icon-btn--primary both swept; that
   mismatch is why sister-kit/fav/go/arrows read as "not our transition". Nothing new is invented
   here: it reuses the shared circular secondary-perde tokens verbatim, with the icon family's ink
   fill. The hover rule no longer sets a background — the perde IS the fill. */
.ewa-icon-btn--secondary::before {
  content: '';
  display: block; /* explicit: a stray `display:none` pseudo reset once silently killed this fill */
  position: absolute;
  inset: var(--btn-fill-inset);
  border-radius: 50%;
  background: var(--color-cta);
  clip-path: var(--btn-secondary-perde-clip-hidden-circle);
  transition: clip-path var(--btn-dur-sweep) var(--btn-ease);
  z-index: -1;
}
.ewa-icon-btn--secondary:hover::before,
.ewa-icon-btn--secondary:focus-visible::before {
  clip-path: var(--btn-secondary-perde-clip-circle);
}
.ewa-icon-btn--secondary:hover,
.ewa-icon-btn--secondary:focus-visible {
  color: var(--color-cta-text);
}
/* Filled state, non-on-media: the button becomes a solid ink disc and simply DOESN'T NEED a border
   there. The border is a REST-only affordance — a light edge so the white button reads as a control
   on a photo. Dropping it to width 0 on hover lets the perde (::before, inset:0) fill the ENTIRE
   border box with no seam and no arithmetic: box-sizing:border-box keeps the outer size fixed, so
   nothing shifts. (The earlier "match border to fill colour" left a hairline seam because the perde
   only reached the padding box; extending the perde with a negative inset worked but was needless
   arithmetic — the border it was dodging shouldn't exist in the filled state at all.)
   --on-media is excluded: its light border IS a deliberate ring over a photo and stays. */
.ewa-icon-btn--secondary:not(.ewa-icon-btn--on-media):hover,
.ewa-icon-btn--secondary:not(.ewa-icon-btn--on-media):focus-visible {
  border-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ewa-icon-btn--secondary::before { transition: none; }
}
/* ═══ Directional chevron CONVEYOR (secondary icon buttons + carousel nav) ═══
   Two copies of one chevron glyph: on hover current exits (in its pointing direction) while next
   enters from the opposite side — "sağda kaybolup soldan gelen". Markup: snippets/aycan-icon-chevron.
   Triggered by both .ewa-icon-btn and .aycan-arrow (shared behaviour, tokens only). */
.ewa-icon-btn,
.aycan-arrow {
  overflow: hidden; /* clip the sliding chevrons to the circle */
}
.ewa-ibtn__conv {
  display: grid;
  place-items: center;
}
.ewa-ibtn__conv--prev { transform: scaleX(-1); } /* mirror for the left-pointing prev button */
.ewa-ibtn__chev {
  grid-area: 1 / 1;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.ewa-ibtn__chev--current { transform: translateX(var(--chevron-nudge)); opacity: 1; }
.ewa-ibtn__chev--next { transform: translateX(-160%); opacity: 0; } /* parked off to the left */
.ewa-icon-btn:hover .ewa-ibtn__chev--current,
.ewa-icon-btn:focus-visible .ewa-ibtn__chev--current,
.aycan-arrow:hover .ewa-ibtn__chev--current,
.aycan-arrow:focus-visible .ewa-ibtn__chev--current { transform: translateX(160%); opacity: 0; } /* exit right */
.ewa-icon-btn:hover .ewa-ibtn__chev--next,
.ewa-icon-btn:focus-visible .ewa-ibtn__chev--next,
.aycan-arrow:hover .ewa-ibtn__chev--next,
.aycan-arrow:focus-visible .ewa-ibtn__chev--next { transform: translateX(var(--chevron-nudge)); opacity: 1; } /* enter to centre */
@media (prefers-reduced-motion: reduce) {
  .ewa-ibtn__chev { transition: none; }
  .ewa-icon-btn:hover .ewa-ibtn__chev--current, .aycan-arrow:hover .ewa-ibtn__chev--current { transform: translateX(var(--chevron-nudge)); opacity: 0; }
}

/* Variant: --on-media — for buttons overlaid on a product image (card go, slider go, tiles).
   White circle at rest for legibility on any photo; same ink fill on hover. A defined family, not an override. */
/* Over-image variant. Border colour is the family default, NOT transparent: a transparent border is
   never "no border" here — the perde fills only the padding box (44 − 2×1.5 = 41), so a transparent
   1.5px strip lets the button's own light background bleed through and reads as a faint ring around
   the dark fill. Opaque at every state is the rule; the colour is then a real design choice. */
.ewa-icon-btn--on-media {
  background: rgb(var(--color-background));
  border-color: var(--ctl-border-color);
}

/* Filled state ON AN IMAGE: keep a deliberate light ring so the ink fill separates from the photo —
   a dark circle on a dark passage of artwork otherwise dissolves into it. On a plain surface the fill
   already contrasts, which is why the base secondary rule takes the fill colour instead.
   NOTE (2026-07-20): this was briefly removed on the theory that the ring was the reported
   "border / inner fill" artefact. That was wrong — the reported button (.aycan-ms__shop-opts) is a
   plain --secondary with NO --on-media, so it was never governed by this rule. Removing it only
   broke the on-media buttons that were already correct. Restored. */
.ewa-icon-btn--on-media:hover,
.ewa-icon-btn--on-media:focus-visible {
  border-color: rgb(var(--color-background));
}
.ewa-icon-btn--primary:not([disabled]) {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-primary);
  color: #fff;
}
.ewa-icon-btn--primary:not([disabled])::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary-hover);
  transform: translateY(100%);
  transition: transform var(--btn-dur) var(--btn-ease);
  z-index: -1;
}
.ewa-icon-btn--primary:not([disabled]):hover::before,
.ewa-icon-btn--primary:not([disabled]):focus-visible::before,
.ewa-icon-btn--primary:not([disabled]):active::before {
  transform: translateY(0);
}
.ewa-icon-btn--primary:not([disabled]):active {
  background: var(--color-primary-hover);
}
.ewa-icon-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.ewa-icon-btn[disabled] {
  opacity: 1;
  cursor: default;
  pointer-events: none;
  background-image: none !important;
  background-color: var(--color-btn-disabled-bg) !important;
  color: var(--color-btn-disabled-text) !important;
  border-color: var(--color-btn-disabled-bg) !important;
}
@media (prefers-reduced-motion: reduce) {
  .ewa-icon-btn--primary:not([disabled]):hover {
    background-image: none;
    background-color: var(--color-primary-hover);
  }
}

/* Go icon — collection accordion panel + product card (shared markup) */
.aycan-coll-acc__panel-go {
  position: absolute;
  top: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 1;
}
.aycan-coll-acc__panel .aycan-coll-acc__panel-go {
  pointer-events: none;
}
/* Decorative go indicator (accordion panel) — aria-hidden + pointer-events:none, so it can't be
   hovered directly; it lights up on ANCESTOR (panel) hover. This ancestor-hover fill is correct for
   the decorative indicator ONLY. The card go (.ewa-card__go) is a real, independently-hoverable link
   and must NOT be filled on card hover — it reveals in rest (white) state on card hover and only
   fills + runs the chevron conveyor on its OWN :hover/:focus-visible (.ewa-icon-btn--secondary:hover).
   The old card-hover fill + -45° glyph rotate was a legacy leak from the pre-conveyor arrow system. */
.aycan-coll-acc__panel:hover .aycan-coll-acc__panel-go {
  background: rgb(var(--color-button));
  border-color: rgb(var(--color-button));
  color: #fff;
}
.aycan-coll-acc__panel:hover .aycan-coll-acc__panel-go svg {
  transform: rotate(-45deg);
}

/* ============================================================
   Variable content width — text narrow, media/grids wide
   ============================================================ */
.aycan-w { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.aycan-w--content { max-width: var(--w-content); }
.aycan-w--wide { max-width: var(--w-wide); }
.aycan-w--full { max-width: none; padding-inline: 0; }

/* Carousel bleed: the first item aligns to the page content-left edge (NOT the
   page centre), the track runs full-bleed, and later items fade off the right. */
.aycan-bleed-track {
  --bleed-pad: max(var(--gutter), calc((100vw - var(--w-wide)) / 2));
  padding-inline: var(--bleed-pad);
  scroll-padding-inline: var(--bleed-pad);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 7rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 7rem), transparent 100%);
}
@media screen and (max-width: 749px) {
  .aycan-bleed-track {
    --bleed-pad: var(--gutter);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent 100%);
  }
}

/* ============================================================
   Animated rotating sticker badge (Y2K signature motion)
   ============================================================ */
.aycan-badge {
  position: relative;
  width: var(--badge-size, 24rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--badge-bg, var(--color-primary));
  color: var(--badge-fg, #fff);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.aycan-badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: aycan-badge-spin var(--badge-spin, 18s) linear infinite;
}
.aycan-badge--reverse .aycan-badge__ring { animation-direction: reverse; }
.aycan-badge__ring text {
  font-family: var(--font-body-family);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: currentColor;
}
.aycan-badge__center {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52%;
  height: 52%;
  animation: aycan-badge-bob 3.2s var(--ease-brand, ease-in-out) infinite;
}
.aycan-badge__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.aycan-badge__emoji {
  font-size: calc(var(--badge-size, 12rem) * 0.3);
  line-height: 1;
}
/* EWA signature waved checkerboard */
.aycan-wc-svg { display: block; width: 100%; height: 100%; }

@keyframes aycan-badge-spin { to { transform: rotate(360deg); } }
@keyframes aycan-badge-bob {
  0%, 100% { transform: translateY(-4%) rotate(-3deg); }
  50% { transform: translateY(4%) rotate(3deg); }
}
.aycan-badge--static .aycan-badge__ring {
  animation: none;
}
.aycan-badge--bounce {
  animation: aycan-badge-bounce 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aycan-badge--bounce .aycan-badge__center {
  animation: none;
}
.aycan-badge--seal {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
}
.aycan-badge--seal .aycan-badge__ring text {
  font-size: 18px;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.aycan-badge__heart {
  display: grid;
  place-items: center;
  width: 38%;
  height: 38%;
  color: rgb(var(--color-button));
}
.aycan-badge__heart svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes aycan-badge-bounce {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-14px) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aycan-badge__ring, .aycan-badge__center, .aycan-badge--bounce { animation: none; }
}

.aycan-reviews__summary-stars {
  font-size: clamp(1.7rem, 2vw, 2rem);
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.aycan-ms__slide {
  margin-top: 5rem;
}

/* ═══════════════════════════════════════════════════════════
   Breadcrumbs — PDP + collection
   ═══════════════════════════════════════════════════════════ */
.aycan-breadcrumbs {
  margin: 0 0 1.2rem;
  padding: 0;
}
.aycan-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(var(--color-foreground), 0.72);
}
.aycan-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.aycan-breadcrumbs__item + .aycan-breadcrumbs__item::before {
  content: '/';
  color: rgba(var(--color-foreground), 0.35);
  font-weight: 400;
}
.aycan-breadcrumbs__link {
  color: rgba(var(--color-foreground), 0.72);
  text-decoration: none;
  transition: color var(--dur-1) ease;
}
.aycan-breadcrumbs__current {
  color: rgb(var(--color-foreground));
}
.collection-hero__inner > .aycan-breadcrumbs {
  flex: 0 0 100%;
  width: 100%;
  align-self: flex-start;
  margin-bottom: 0.4rem;
}

/*
  PDP buy-box breadcrumb — başlığın üstünde eyebrow işlevi görür, bu yüzden
  marka kicker diline (Mulish 500 · uppercase · --t-label · --ls-label) uyar.
  Yalnız buy-box içinde geçerli; koleksiyon/sayfa breadcrumb'ı değişmez.
*/
.aycan-buybox .aycan-breadcrumbs {
  margin: 0 0 0.8rem;
}
.aycan-buybox .aycan-breadcrumbs__list {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  gap: 0.3rem 0.5rem;
  color: rgba(var(--color-foreground), 0.52);
}
.aycan-buybox .aycan-breadcrumbs__link {
  color: rgba(var(--color-foreground), 0.52);
}
.aycan-buybox .aycan-breadcrumbs__link:hover {
  color: rgb(var(--color-foreground));
}
.aycan-buybox .aycan-breadcrumbs__item + .aycan-breadcrumbs__item::before {
  color: rgba(var(--color-foreground), 0.28);
}
.collection-hero:not(.collection-hero--with-image) .collection-hero__inner {
  padding-top: clamp(1rem, 1.5vw, 1.4rem);
  padding-bottom: 0;
}
.collection-hero:not(.collection-hero--with-image) .collection-hero__title {
  margin: 0 0 0.75rem;
}
.collection-hero:not(.collection-hero--with-image) .collection-hero__title + .collection-hero__description {
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.shopify-section:has(.collection-hero:not(.collection-hero--with-image)) + .shopify-section > [class*='section-'][class*='-padding'] {
  padding-top: 1.2rem;
}
.shopify-section:has(.collection-hero:not(.collection-hero--with-image)) + .shopify-section .facets-container {
  padding-top: 0;
}
@media screen and (min-width: 750px) {
  .collection-hero__inner {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .collection-hero__inner > .aycan-breadcrumbs {
    margin-bottom: 0.45rem;
  }
  .collection-hero:not(.collection-hero--with-image) .collection-hero__title {
    margin-bottom: 0.85rem;
  }
  .collection-hero__inner > .collection-hero__text-wrapper {
    flex-basis: 100%;
    width: 100%;
    text-align: start;
  }
  .collection-hero--with-image .collection-hero__inner > .collection-hero__text-wrapper {
    flex-basis: 50%;
    width: auto;
  }
}
.page-width--product > .aycan-breadcrumbs {
  padding-top: 0.4rem;
}
.aycan-page-breadcrumbs {
  padding-top: 1.6rem;
}
@media screen and (max-width: 749px) {
  .aycan-breadcrumbs__list { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════
   Buyer photo strip — visual social proof (no stat bar)
   Marquee ticker phrase typography: .aycan-trust-phrase
   ═══════════════════════════════════════════════════════════ */
.aycan-trust-phrase {
  font-family: var(--font-body-family);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.15vw, 1.25rem);
  letter-spacing: var(--ls-label, 0.08em);
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.78);
  white-space: nowrap;
}

.aycan-buyer-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.4rem);
  max-width: 52rem;
  margin-inline: auto;
}

.aycan-buyer-strip__link {
  font-family: var(--font-body-family);
  font-size: clamp(1.25rem, 1.35vw, 1.4rem);
  font-weight: 500;
  color: rgba(var(--color-foreground), 0.62);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.aycan-buyer-strip__link:hover,
.aycan-buyer-strip__link:focus-visible {
  color: var(--color-primary);
}

.aycan-buyer-strip__photos {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aycan-buyer-strip__photo {
  flex: 0 0 auto;
  margin: 0;
}

.aycan-buyer-strip__photo + .aycan-buyer-strip__photo {
  margin-inline-start: clamp(-1rem, -1.8vw, -1.4rem);
}

.aycan-buyer-strip__frame {
  display: block;
  width: clamp(4.8rem, 5.5vw, 6.4rem);
  aspect-ratio: 1;
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  border: 2px solid rgb(var(--color-background));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  background: rgb(var(--color-background));
  transition: transform var(--dur-2) var(--ease-brand, ease), box-shadow var(--dur-2) ease;
}

.aycan-buyer-strip__frame:hover,
.aycan-buyer-strip__frame:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  z-index: 2;
  position: relative;
}

.aycan-buyer-strip__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 749px) {
  .aycan-buyer-strip__photos {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-inline: 0.8rem;
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }

  .aycan-buyer-strip__photos::-webkit-scrollbar {
    display: none;
  }

  .aycan-buyer-strip__photo + .aycan-buyer-strip__photo {
    margin-inline-start: -0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aycan-buyer-strip__frame {
    transform: none !important;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   Aycan accordion — shared hairline stack
   PDP · FAQ · collapsible-content (tek sistem, Dawn markup)
   ═══════════════════════════════════════════════════════════ */
.aycan-accordion {
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.12) !important;
  border-radius: 0;
  margin: 0 !important;
  overflow: hidden;
  transform: none;
}

.aycan-accordion:first-of-type {
  border-top: 1px solid rgba(var(--color-foreground), 0.12) !important;
}

.aycan-accordion + .aycan-accordion {
  margin-top: 0 !important;
  border-top: none !important;
}

.aycan-faq__panel > .aycan-accordion:first-child,
.aycan-faq__panel > .aycan-kicker:first-child + .aycan-accordion,
.aycan-faq__panel > .aycan-faq__category + .aycan-accordion {
  border-top: 0 !important;
}

.aycan-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 4.4rem;
  padding: clamp(1.4rem, 2vw, 1.7rem) clamp(1.4rem, 3vw, 2.4rem);
  font-family: var(--font-body-family);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  transition: color var(--dur-1) ease;
}

.aycan-accordion summary .summary__title {
  flex: 1;
  min-width: 0;
}

.aycan-accordion summary .accordion__title {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-size: clamp(1.3rem, 1.4vw, 1.45rem);
  line-height: 1.35;
  margin: 0;
  max-width: none;
  flex: 1;
  min-width: 0;
  text-align: start;
}

.aycan-accordion summary .icon-caret,
.aycan-accordion summary > svg.ewa-icon {
  flex-shrink: 0;
  position: static;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-primary);
  transition: transform var(--dur-2) var(--ease-out);
}

.aycan-accordion details[open] > summary .icon-caret,
.aycan-accordion details[open] > summary > svg.ewa-icon {
  transform: rotate(180deg);
}

.aycan-accordion summary:hover,
.aycan-accordion summary:focus-visible {
  color: var(--color-primary);
}

.aycan-accordion summary:focus-visible {
  outline: 2px solid rgba(var(--color-button), 0.45);
  outline-offset: -2px;
}

.aycan-accordion .accordion__content {
  margin-bottom: 0;
  padding: 0 clamp(1.4rem, 3vw, 2.4rem) clamp(1.6rem, 2.5vw, 1.8rem);
  font-family: var(--font-body-family);
  /* --t-body (15→16px), --t-body-sm (13.5px) DEĞİL. Bu satır iki kez yanlış
     yazıldı, gerekçesi kaynakta zaten yazılıydı:

     1. Önce ad-hoc `clamp(1.3rem, 1.4vw, 1.45rem)` idi — hiçbir token'a bağlı
        olmayan, CLAUDE.md'nin yasakladığı gömülü tipografi değeri.
     2. Sonra `--t-body-sm`e çevrildi; gerekçe olarak support hub'ın FAQ
        cevabının (.aycan-sh__ans) aynı token'ı kullanması gösterildi. Ama o
        tek örnek, spec'e UYAN değil SAPAN taraftı — dolayısıyla dayanak değil.

     Kaynak (research/typography-system-plan.md §10.4) token'ların yanına
     amaçlarını yazmış: `--t-body /* 15→16px */`, `--t-body-sm /* 13.5px
     YARDIMCI */`. Yani --t-body-sm ipucu/meta/altyazı içindir — okunmak için
     yazılmış düzyazı için değil. Aynı belgenin "Cascade doğrulama" satırı da
     gövdeyi 16'ya sabitliyor: "Display 64 > Section 42 > Product 24 > Body 16".

     research/design-system.md ise rol tablosunda "accordion gövde"yi adıyla
     **Body / RTE** satırına koyuyor (Intro ve form yardım metniyle aynı
     satırda) — yani bu metin, sitenin gövde metni; SSS cevabı kullanıcının
     okumaya geldiği asıl içerik, kenar notu değil.

     Erişilebilirlik tarafı da aynı yeri işaret ediyor: 16px, gövde metni için
     sektörün üzerinde uzlaştığı taban (NN/g kullanılabilirlik testleri 16px'i
     minimum sayıyor, USWDS "en az etkin 16px" diyor); 14px yalnızca yoğun
     panel arayüzleri, 12–14px ise yalnızca kısa etiket/altyazı için kabul
     ediliyor. 13.5px, düzyazı için bu tabanların hepsinin altındaydı. */
  font-size: var(--t-body);
  /* Aynı belgede Body/intro satır yüksekliği 1.6 — token: --lh-body.
     (Eskiden 1.7 idi; o da hiçbir yerde eşi olmayan gömülü bir sayıydı.) */
  line-height: var(--lh-body);
  color: rgba(var(--color-foreground), 0.75);
}

.aycan-accordion .accordion__content p {
  margin: 0 0 0.8rem;
}

.aycan-accordion .accordion__content p:last-child {
  margin-bottom: 0;
}

.aycan-accordion .accordion__content a {
  color: var(--color-primary);
}

.aycan-accordion summary .icon-accordion {
  color: var(--color-primary);
  opacity: 0.9;
}

.collapsible-content .aycan-accordion summary:hover .accordion__title {
  text-decoration: none;
}

.collapsible-row-layout .aycan-accordion {
  border: 0 !important;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.12) !important;
  margin-bottom: 0 !important;
}

.collapsible-none-layout .aycan-accordion + .aycan-accordion {
  border-top: 0 !important;
}

/* FAQ panel — category rhythm inside white card */
.aycan-faq__category {
  padding: clamp(1.2rem, 1.8vw, 1.6rem) clamp(1.4rem, 3vw, 2.4rem) clamp(0.4rem, 0.8vw, 0.6rem);
}

.aycan-faq__category:not(:first-child) {
  padding-top: clamp(1.8rem, 2.8vw, 2.4rem);
  border-top: 1px solid rgba(var(--color-foreground), 0.08);
}

.aycan-faq__panel {
  border-radius: var(--radius-card, 16px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.aycan-faq__cta {
  margin-top: clamp(2rem, 3vw, 2.8rem);
}

.aycan-faq__cta--center {
  display: flex;
  justify-content: center;
}

.aycan-faq__cta--left {
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 749px) {
  .aycan-accordion summary,
  .aycan-accordion .accordion__content {
    padding-inline: 1.4rem;
  }

  .aycan-faq__category {
    padding-inline: 1.4rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   About Studio — single-column editorial chapter
   Typography-led blush field · narrative · full-bleed cinema break
   ═══════════════════════════════════════════════════════════ */

.ewa-chapter {
  position: relative;
  overflow: clip;
}

.ewa-chapter__shell {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.2rem);
}

.ewa-chapter__head {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
  max-width: min(68rem, 100%);
}

.ewa-chapter__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
  margin: 0;
  font-family: var(--font-body-family);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.62);
}

.ewa-chapter__meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--color-button));
  flex-shrink: 0;
  animation: aycan-pulse 2.4s ease-in-out infinite;
}

.ewa-chapter__meta-chap {
  margin-inline-start: auto;
  font-family: var(--font-heading-sc, var(--font-heading-family));
  /* The folio is the device that makes the spine countable, so it has to be readable.
     Measured on the live page at 0.38 alpha: 2.33:1 — below WCAG AA. 0.62 is the alpha at
     which #1F1F1F over white reaches 4.5:1 (solved, not guessed); 0.64 leaves a margin. */
  font-size: calc(var(--t-label) * 1.2);
  letter-spacing: 0.12em;
  color: rgba(var(--color-foreground), 0.64);
}

.ewa-chapter__lede {
  margin: 0;
  padding: 0;
  border: none;
  max-width: 38ch;
}

.ewa-chapter__lede p {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: clamp(1.35rem, 1.55vw, 1.65rem);
  font-style: italic;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.78);
}

.ewa-chapter__monument {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.6rem, 7.5vw, 7.2rem);
  line-height: 0.96;
  letter-spacing: -0.024em;
  color: rgb(var(--color-foreground));
  text-wrap: balance;
  max-width: 12ch;
}

.ewa-chapter__monument em {
  display: block;
  margin-top: 0.1em;
  padding-inline-start: clamp(0rem, 8vw, 4.8rem);
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: 0.88em;
  line-height: var(--lh-accent);
  color: rgb(var(--color-button));
}

.ewa-chapter__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 2.4vw, 2rem);
  max-width: min(52rem, 100%);
  margin-inline-start: clamp(0rem, 12vw, 14rem);
}

.ewa-chapter__body {
  font-family: var(--font-body-family);
  font-size: clamp(1.45rem, 1.55vw, 1.62rem);
  line-height: var(--lh-body-loose);
  color: rgba(var(--color-foreground), 0.82);
  max-width: 48ch;
}

.ewa-chapter__body p {
  margin: 0;
}

/* The body is a single richtext field, so its paragraphs are siblings inside one box — the
   flex `gap` on __copy separates body/proof/credo but never reaches in here. Without this the
   two paragraphs of a chapter run together as one grey block, which is exactly the wall of
   text the numbered spine exists to avoid. */
.ewa-chapter__body p + p {
  margin-top: 1em;
}

.ewa-chapter__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: clamp(0.4rem, 1vw, 0.8rem) 0 0;
  padding: clamp(1.1rem, 1.8vw, 1.4rem) 0 0;
  border-top: 1px solid rgba(var(--color-foreground), 0.12);
  max-width: 52ch;
  list-style: none;
}

.ewa-chapter__proof-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0 clamp(1rem, 1.6vw, 1.4rem);
}

.ewa-chapter__proof-item:first-child {
  padding-inline-start: 0;
}

.ewa-chapter__proof-item + .ewa-chapter__proof-item {
  border-inline-start: 1px solid rgba(var(--color-foreground), 0.12);
}

/* Two facts never fit side by side inside the ~520px copy column: measured live, the second
   item wrapped to a new line but kept its inline padding, so the pairs stepped in and out and
   the divider ended up between rows instead of between columns. Any multi-item row therefore
   uses the stacked spec-list treatment at every width — the same rules the small breakpoint
   already defined, promoted to the default. A single fact keeps the tighter inline reading. */
.ewa-chapter__proof:has(.ewa-chapter__proof-item + .ewa-chapter__proof-item) {
  flex-direction: column;
  gap: 0.75rem;
}

.ewa-chapter__proof:has(.ewa-chapter__proof-item + .ewa-chapter__proof-item)
  .ewa-chapter__proof-item {
  padding: 0;
  width: 100%;
  justify-content: space-between;
}

.ewa-chapter__proof:has(.ewa-chapter__proof-item + .ewa-chapter__proof-item)
  .ewa-chapter__proof-item
  + .ewa-chapter__proof-item {
  border-inline-start: none;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
}

.ewa-chapter__proof-num {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgb(var(--color-foreground));
}

.ewa-chapter__proof-label {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  /* 0.55 measured 3.75:1 on the live page — under WCAG AA for text this size. */
  color: rgba(var(--color-foreground), 0.64);
}

.ewa-chapter__credo {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.5;
  /* 0.58 measured 4.11:1 — just under AA. */
  color: rgba(var(--color-foreground), 0.64);
  max-width: 48ch;
}

.ewa-chapter__credo-sep {
  margin-inline: 0.45rem;
  color: rgba(var(--color-foreground), 0.28);
}

.ewa-chapter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin-top: clamp(0.2rem, 0.6vw, 0.6rem);
}

.ewa-chapter__foot .button--primary {
  min-width: min(100%, 20rem);
}

.ewa-chapter__ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body-family);
  font-size: var(--t-ui);
  font-weight: 500;
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.ewa-chapter__ghost span {
  display: inline-block;
  transition: transform var(--dur-3) var(--ease-out);
}

.ewa-chapter__ghost:hover span,
.ewa-chapter__ghost:focus-visible span {
  transform: translateX(var(--icon-slide));
}

.ewa-chapter__cinema {
  position: relative;
  /* Capped at the site canvas rather than 100vw. The photo library tops out around 1920-2048px,
     so a true full-bleed band upscaled 1.24x on a 2560 screen (measured) and went visibly soft —
     the band is the page's biggest single element, so it is the worst place to lose sharpness.
     At <=1760px this is indistinguishable from full-bleed; above it, the plate stays crisp and
     reads as a deliberate contained plate instead of a stretched one. Raise this once wider
     source frames exist. */
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  margin-top: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* Ratio is a knob, not a constant: the cinema band is the page's pacing device, and a
   single locked ratio down a long page turns a narrative into a catalogue. 21/9 stays the
   default so the original intent is unchanged where no ratio is passed. */
.ewa-chapter__cinema-img,
.ewa-chapter__cinema-video {
  display: block;
  width: 100%;
  /* `height: auto` is load-bearing, not tidiness. image_tag writes width/height ATTRIBUTES
     (here 2400×3200), and that presentational hint resolves to a definite used height which
     beats aspect-ratio — measured live: the band rendered 3200px tall instead of 1272px, i.e.
     the ratio was computed correctly and then ignored. Only an explicit auto hands control
     back to the ratio. */
  height: auto;
  aspect-ratio: var(--cinema-ratio, 21 / 9);
  object-fit: cover;
}

/* Shopify's video_tag wraps the <video> in a deferred-media div; the ratio has to reach
   the element that actually paints, so both the wrapper and the video carry it. */
.ewa-chapter__cinema-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ewa-chapter__cinema-cap {
  position: absolute;
  /* Was offset by the viewport-to-canvas margin because the band used to be full-bleed. The
     band is now capped at the canvas, so the caption sits against the band's own edge. */
  inset-inline-start: var(--gutter);
  bottom: clamp(0.8rem, 1.4vw, 1.2rem);
  padding: 0.35rem 0.75rem;
  font-family: var(--font-body-family);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-pill);
}

@media screen and (min-width: 990px) {
  .ewa-chapter__shell {
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    /* `end` bottom-aligned the heading column against a taller copy column, which put the body
       paragraph 189px ABOVE the chapter heading (measured, 1440px). The reader met the prose
       before the title — a hierarchy inversion on a page whose job is scanning. Both columns
       now start at the top and the offset below is what keeps the composition asymmetric. */
    align-items: start;
  }

  .ewa-chapter__head {
    grid-column: 1;
    grid-row: 1;
  }

  .ewa-chapter__copy {
    grid-column: 2;
    grid-row: 1;
    margin-inline-start: 0;
    align-self: start;
    /* Optical drop: the body begins below the heading's cap-height, so the two columns read as
       title-then-text rather than as two things starting at the same instant. */
    padding-top: clamp(2rem, 4vw, 3.5rem);
  }
}

@media screen and (max-width: 989px) {
  .ewa-chapter__copy {
    margin-inline-start: 0;
  }

  .ewa-chapter__monument {
    max-width: none;
    font-size: clamp(2.8rem, 10vw, 3.8rem);
  }

  .ewa-chapter__monument em {
    padding-inline-start: 0;
  }

  .ewa-chapter__meta-chap {
    margin-inline-start: 0;
  }

  .ewa-chapter__cinema-img,
  .ewa-chapter__cinema-video {
    aspect-ratio: var(--cinema-ratio-mobile, 4 / 3);
  }
}

@media screen and (max-width: 749px) {
  .ewa-chapter__proof {
    flex-direction: column;
    gap: 0.75rem;
  }

  .ewa-chapter__proof-item {
    padding: 0;
    width: 100%;
    justify-content: space-between;
  }

  .ewa-chapter__proof-item + .ewa-chapter__proof-item {
    border-inline-start: none;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--color-foreground), 0.1);
  }

  .ewa-chapter__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .ewa-chapter__foot .button--primary {
    width: 100%;
    justify-content: center;
  }

  /* Left, not centred. The whole copy column is a left rag; a centred link under it reads as a
     stray element rather than as the end of the chapter — and most chapters carry the ghost
     link alone, with no full-width button above it to justify the centring. */
  .ewa-chapter__ghost {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ewa-chapter__ghost span {
    transition: none;
  }

  /* Same pulse the kicker dot uses, so it needs the same guard — it was missing.
     REDUCE, not remove: the dot stays visible, it just stops breathing. */
  .ewa-chapter__meta-dot {
    animation: none !important;
  }
}

/* Chapter spine — the repeating module IS the page structure, so the rhythm between
   chapters belongs to the primitive rather than to a per-page override. Deliberately no
   divider rule between chapters: the folio numeral (№ 01 / 02 / 03) already makes the
   sequence countable, and whitespace at this scale separates more cleanly than a line. */
.ewa-chapters__list {
  display: flex;
  flex-direction: column;
  gap: clamp(6rem, 9vw, 11rem);
}
/* ──────────────────────────────────────────────────────────────────
   aycan-about-studio — editorial split (text left, circular portrait right)
─────────────────────────────────────────────────────────────────── */

.ewa-about.aycan-split--magazine {
  padding-inline-start: var(--gutter, 1.5rem);
  padding-inline-end: var(--gutter, 1.5rem);
}

.ewa-about .aycan-split__magazine {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
  width: min(var(--w-site, 100%), 100%);
  margin-inline: auto;
  gap: clamp(2.4rem, 5vw, 5.6rem);
  align-items: center;
}

.ewa-about .aycan-split__panel {
  border: none;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
}

.ewa-about .aycan-split__content {
  width: 100%;
  max-width: 34rem;
  gap: 0;
}

.ewa-about__kicker.aycan-kicker {
  display: flex;
  width: auto;
  margin: 0 0 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

.ewa-about__heading.aycan-accent-heading {
  margin: 0 0 clamp(1.2rem, 2vw, 1.6rem);
  font-size: clamp(2.8rem, 3.6vw, 3.6rem);
  line-height: 1.1;
}

.ewa-about__body {
  margin: 0 0 clamp(1.6rem, 2.4vw, 2rem);
  font-size: clamp(1.45rem, 1.4vw, 1.6rem);
  line-height: var(--lh-body);
  color: rgba(var(--color-foreground), 0.72);
  max-width: 42ch;
}

.ewa-about__body p {
  margin: 0;
}

.ewa-about__ctas {
  margin-top: 0.4rem;
}

.ewa-about__btn {
  min-width: min(100%, 18rem);
}

/* Circular portrait + floating seal */
.ewa-about .aycan-split__visual {
  margin: 0;
  min-height: 0;
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.ewa-about__visual {
  position: relative;
  width: min(100%, 36rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.ewa-about__media {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.04);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

.ewa-about__img,
.ewa-about__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ewa-about__badge {
  position: absolute;
  top: 4%;
  z-index: 2;
  pointer-events: none;
}

@media screen and (max-width: 989px) {
  .ewa-about.aycan-split--magazine {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .ewa-about .aycan-split__magazine {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ewa-about .aycan-split__visual {
    order: 1;
    padding: clamp(2rem, 6vw, 3rem) var(--gutter, 1.5rem) 1.6rem;
  }

  .ewa-about .aycan-split__panel {
    order: 2;
    padding: clamp(2rem, 6vw, 3.2rem) var(--gutter, 1.5rem);
  }

  .ewa-about__visual {
    width: min(88vw, 34rem);
    margin-inline: auto;
  }

  .ewa-about__badge {
    top: 2%;
    inset-inline-start: 2%;
  }

  .ewa-about__heading {
    font-size: clamp(2.2rem, 7vw, 3rem);
  }
}

/* ═══════════════════════════════════════════════════════════
   PINNED HERO — a hero that never moves, with the section
   after it riding up over its lower edge on rounded corners.
   Reference: research/design-system.md § Pinned hero

   Consumers: aycan-pinned-hero (any page — hero and the riding
   section are separate sections) and aycan-support-hub (hero
   and body inside one section). Structure lives here so the
   fragile part — pinning, stacking and the spacer maths — has
   exactly one implementation; each section keeps only its own
   typography.

   Contract:
     .aycan-pin-host        position:relative; z-index:0
       .aycan-pin__spacer   reserves the fixed hero's flow height
       .aycan-pin           position:fixed; z-index:-1
       .aycan-pin-up        z-index:1, pulled up, rounded top

   CROSS-SECTION USE needs no .aycan-pin-up in the markup: a
   section whose schema carries `"class": "aycan-pin-sec"` is its
   own host, and the sibling rules below promote the NEXT
   .shopify-section to the riding element. Drop the hero at the
   top of any template and the page rides up over it — no
   per-page CSS, no per-page JS.

   The z-index values are not free choices:
   · Host at 0, not auto — this makes the host a stacking context
     so the hero's -1 is scoped to it and paints ABOVE the host's
     own background. Without it the -1 escapes to the root
     context and loses to that background instead.
   · Hero at -1 — under everything else in the host.
   · Following sections at 1 — above the hero. ALL of them, not
     just the first, and not optional: a stacking context paints
     in the positioned layer, so an unlifted static section is
     painted UNDER the pinned hero no matter what background it
     carries. See the block above those rules.
   The sticky header sits at var(--z-header), far above 0, so it
   still paints over the hero — which is the point: the hero is
   pinned from document top 0 and the header group covers its top
   edge rather than pushing it down. No scroll maths to get wrong.

   Requirement on the page: every section after the hero needs an
   opaque background (the `color-<scheme> gradient` pair every
   aycan-* section already carries). A transparent one would show
   the pinned image through it.

   Requirement on a same-section host: give it NO padding of its
   own. Whatever the host encloses but .aycan-pin-up does not
   cover shows the pinned hero through it — the host's background
   paints below the hero by design, so it cannot hide it. Section
   padding belongs on the riding element instead. (Wholesale's
   72px bottom padding sat on the host and produced exactly one
   such strip.)
   ═══════════════════════════════════════════════════════════ */

.aycan-pin-host,
.aycan-pin-sec {
  position: relative;
  z-index: 0;

  /* Hero height, shared by the hero and its spacer. The vh clamp gives a
     comfortable height by viewport height; the added rem pushes the
     bottom-anchored text lower and shows more image above it. The vw floor
     matters on wide screens: the vh clamp caps out regardless of width, but
     a square (1:1) source under object-fit:cover crops hard top/bottom on a
     wide-short box. Tying part of the height to width keeps that crop sane.

     Three sizes as tokens rather than modifier classes: a cross-section host
     is the .shopify-section wrapper, which a section cannot add classes to
     beyond the static `class` in its schema — so the section picks a size by
     assigning --pin-h in its own {% style %} block. Keeping the literals here
     means the section never repeats them.

     `min(…, 100svh)` on every size is not optional. The box is `position:
     fixed; top:0`, so anything past 100svh is not "below the fold, scroll to
     see" — it is gone forever. A fixed element never reveals its own
     overflow; scrolling moves the document, not this box. Measured live at
     1920×937 (a completely ordinary external-monitor laptop size) with no
     cap: the 55vw floor alone gave a 1056px box against a 937px viewport,
     and the hero's own CTA buttons — its most important content — sat in
     that dead 119px, unreachable by any input. svh, not vh/dvh: it locks to
     the SMALLEST viewport state, so a mobile browser's collapsing address
     bar can only ever shrink this box, never let it re-grow past the safe
     size after the user already saw a shorter one. */
  --pin-h-sm: min(max(calc(clamp(32rem, 44vh, 46rem) + 12rem), 42vw), 100svh);
  --pin-h-md: min(max(calc(clamp(38rem, 52vh, 54rem) + 16rem), 50vw), 100svh);
  --pin-h-lg: min(max(calc(clamp(42rem, 58vh, 60rem) + 20rem), 55vw), 100svh);
  --pin-h: var(--pin-h-lg);

  /* Pre-JS spacer fallback — the header group's height above the host
     (eyebrow + header + stripe ≈ 13.9rem on desktop). aycan-pin-hero.js
     replaces it with the measured value on load and on resize. */
  --pin-head: 13.9rem;

  /* How much of the hero's TOP the header group covers. Different quantity from
     --pin-head above, which is the host's whole offset (header group PLUS any
     section between it and the host). This one is the header group alone, and
     it is what the hero's top padding has to clear: the hero is pinned from
     document 0, so anything laid out in that band is hidden behind the header.
     aycan-pin-hero.js measures it; this is the pre-JS fallback. */
  --pin-head-h: 13.9rem;
}

/* Reserves the hero's flow height MINUS the host's distance from the document
   top. The hero renders from viewport 0 while the host starts below the header
   group, so a full-height spacer would push the riding section down by that
   offset and leave a gap instead of the overlap.

   The child combinator is load-bearing, not style. base.css hides empty boxes
   with `div:empty { display: none }` — an element+pseudo-class selector at
   (0,1,1), which OUTRANKS a bare class at (0,1,0) no matter which file loads
   last. The spacer is empty by definition, so a single class here silently
   collapses it to zero height and the riding section swallows the whole hero.
   Two classes = (0,2,0), which wins on specificity rather than on source
   order. Do not simplify this selector. */
.aycan-pin-host > .aycan-pin__spacer,
.aycan-pin-sec > .aycan-pin__spacer {
  display: block;
  visibility: hidden;
  block-size: calc(var(--pin-h) - var(--pin-head));
}

.aycan-pin {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: -1;
  min-block-size: var(--pin-h);
  /* Belt-and-suspenders on top of the --pin-h-* cap: min-block-size is a
     FLOOR, so if padding + content ever demand more than --pin-h the box
     grows past it anyway — that growth is exactly what pushed this hero's own
     CTA buttons past the viewport (measured, see --pin-h-lg comment). A fixed
     element cannot reveal its own overflow by scrolling, so letting it grow
     unbounded here is not a graceful-degradation option; capping it is. */
  max-block-size: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Top clears the header band (see --pin-head-h) plus a breathing gap, so tall
     hero content is never laid out underneath the header. Bottom clears the
     riding section's pull-up, so the content never slides under it.
     Both gaps are wrapped in `min(…vw, …svh)`: the vw term is what makes the
     gap grow generously on a wide, TALL screen; the svh term is what stops
     that same vw value from also being taken as gospel on a wide but SHORT
     screen, where it would eat into the fixed content budget the box no
     longer has room to spare (see --pin-h-lg / max-block-size above). */
  padding-block: calc(var(--pin-head-h) + clamp(2.4rem, min(3vw, 3svh), 4rem)) clamp(9rem, min(12vw, 12svh), 14rem);
  background: var(--pin-hero-wash);
}

.aycan-pin__media,
.aycan-pin__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Scrim: a veil anchored to the TEXT BLOCK, not to a percentage of the hero.

   The photo keeps its true colour everywhere above the text, and the text always
   sits on the full set strength — at every breakpoint, whatever the copy length.

   Why it is not a percentage ramp any more. The previous version placed its stops
   by hero height (clear to 28%, 0.72×set at 45%, 0.95× at 72%), sampled from this
   photo band by band:

     band   L95    alpha for 4.5:1   alpha for 3:1
     0.50   0.87        0.79              0.66
     0.62   0.89        0.80              0.67
     0.75   0.82        0.78              0.64
     0.90   0.71        0.75              0.58

   Those alphas are still the right targets (WCAG 1.4.3: 4.5:1 body, 3:1 display).
   The flaw was the ANCHOR. The text block is bottom-anchored, so where it starts
   depends on how tall the copy is — which changes with viewport and with
   translation. Measured live on custom-orders at 390px: the copy (breadcrumb +
   2-line heading + 3-line lede + 2 CTAs) began at 23.6% of the hero, i.e. inside
   the deliberately-clear top band, where the ramp was only 0.038 alpha. The
   breadcrumb was effectively unreadable and the heading marginal, with no warning
   — English desktop, where the ramp happened to line up, looked fine.

   Anchoring the veil to .aycan-pin__inner removes the guess: it fades in over the
   7rem above the first line and holds to the bottom edge, so the copy is covered
   by construction. It also lets MORE of the photo through than before — nothing
   above the text is touched at all, where the old ramp started darkening at 28%
   regardless of whether any text was there.

   0.72 × the set value, not the full value: that is exactly what the old ramp
   delivered at the text band (its 45% stop), so this is the same strength moved
   to the right place, not a darker hero. The section setting keeps its meaning.

   Full-bleed via the centring idiom (left:50% + translateX(-50%)) — correct in
   both directions, do NOT convert to a logical property. .aycan-pin has
   overflow:hidden, so the deliberate over-extension is clipped. */
.aycan-pin__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.aycan-pin--image .aycan-pin__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: -7rem;
  bottom: -50rem;
  background: linear-gradient(
    180deg,
    rgba(20, 12, 16, 0) 0,
    rgba(20, 12, 16, calc(var(--pin-scrim, 0.55) * 0.72)) 7rem
  );
  pointer-events: none;
}

/* Text surface — for photos that are bright EVERYWHERE, where no scrim setting
   and no crop can carry legible text.

   Measured on the custom-orders hero (studio photo, 1200²): across the text
   band the brightest 5% of pixels sit at 0.72–0.87 relative luminance at every
   object-position from 0% to 100%, peaking at 0.97. Reaching WCAG 1.4.3's
   4.5:1 for white body copy over that needs roughly 0.82 alpha of flat black —
   at which point the photo is gone. A scrim is the wrong tool for this class
   of image.

   The surface solves it locally instead: the text sits on the page's own paper,
   so contrast is the scheme's own foreground/background pair — already checked —
   instead of something that has to be re-tuned per photo. The photo stays bright
   everywhere outside the plate. Pair it with a LOW --pin-scrim: with the text
   already off the image, a heavy scrim only mutes the photo for nothing.

   Light, not a dark slab: measured both on the custom-orders hero. The dark
   version reads as a modal dropped on a photo; the light one reads as the same
   card language the rest of the theme is built from, and it keeps the script
   accent in brand rose instead of a washed-out tint of it. */
.aycan-pin__surface {
  padding: clamp(2.8rem, 3.4vw, 4rem) clamp(2.4rem, 4vw, 5rem);
  border-radius: var(--pin-radius, clamp(2.8rem, 3.4vw, 4.4rem));
  background: rgba(var(--color-background), var(--pin-surface, 0.88));
  color: rgb(var(--color-foreground));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.06);
  backdrop-filter: blur(20px) saturate(1.06);
}

/* Blur unsupported (older Firefox with the flag off): go fully opaque. Without
   the blur there is nothing softening the photo behind the translucency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aycan-pin__surface { background: rgb(var(--color-background)); }
}

/* ── Everything after the hero ── */

/* EVERY following section, not just the one that rides up. The host is a
   stacking context, and a stacking context is painted in the positioned layer —
   above every static section on the page, however opaque that section's own
   background is. So the pinned hero bleeds over the whole rest of the page
   unless the sections after it are lifted into that layer too. Measured on
   wholesale with elementsFromPoint: the paint stack under the cursor came back
   hero-content → .aycan-pin → the reviews section, i.e. the hero on top of a
   solid white section.

   Both selectors are needed and neither covers the other: cross-section mode
   marks the section wrapper itself (.aycan-pin-sec), same-section mode has the
   host nested one level inside its wrapper, which only :has() can reach.

   NOT solvable by swapping z-index:0 for isolation:isolate on the host —
   verified live. isolation still creates a stacking context, and a stacking
   context paints in the positioned layer whether it got there by z-index,
   isolation, opacity or transform. The lift is the point of a stacking context,
   not a side effect of how you ask for one. */
.aycan-pin-sec ~ .shopify-section,
.shopify-section:has(> .aycan-pin-host) ~ .shopify-section {
  position: relative;
  z-index: 1;
}

.aycan-pin-up,
.aycan-pin-sec + .shopify-section {
  position: relative;
  z-index: 1;
  margin-top: clamp(-8rem, -6vw, -5rem);
  border-start-start-radius: var(--pin-radius, clamp(2.8rem, 3.4vw, 4.4rem));
  border-start-end-radius: var(--pin-radius, clamp(2.8rem, 3.4vw, 4.4rem));
  background: rgb(var(--color-background));
}

/* ⚠️ Yukarıdaki lift'in bedeli: o section'ın İÇİNDEKİ `position:fixed` kaplamalar
   da bu stacking-context'e hapsoluyor. Kaplamanın kendi z-index'i artık sticky
   header'la yarışmıyor — bütün section tek bir katman olarak (z-index:1) header'ın
   (--z-header, 320) altında boyanıyor.

   Canlıda yaşandı (2026-08-06, koleksiyon sayfasına pinned hero eklenince):
   mobil filtre çekmecesi `position:fixed; z-index:100` olmasına rağmen açılınca
   header'ın ALTINA kaçıyordu. Ölçüm: riding section z-index 1, header 320.

   Çözüm çekmece AÇIKKEN host section'ı header'ın üstüne çıkarmak. Kapalıyken
   hiçbir şey değişmiyor, yani pinned hero'nun katman sözleşmesi bozulmuyor.
   `overflow: clip` bu kaplamayı kırpmıyor: section'da transform/contain yok,
   dolayısıyla fixed elemanın kapsayıcı bloğu hâlâ viewport.

   Yeni bir tam-ekran kaplama (mega menü, quick-view) hero'lu bir sayfada
   section İÇİNE eklenirse aynı tuzağa düşer — buraya bir seçici daha eklenir. */
.shopify-section:has(.mobile-facets__disclosure[open]) {
  z-index: calc(var(--z-header) + 1);
}

/* Cross-section only. Two reasons this rule is not needed in same-section use:
   there the riding element paints its own background directly, here the next
   section paints it on an inner div that would square off the corners we just
   rounded — so the wrapper has to clip.
   `clip`, never `hidden`: hidden turns this into a scroll container and
   silently kills any position:sticky inside the section. */
.aycan-pin-sec + .shopify-section { overflow: clip; }