/* ============================================================
   Ürün Hikayesi (Product Story) — mağaza tarafı render (.sf-*)
   Vanilla component CSS. Admin ile PAYLAŞILMAZ (asset izolasyonu);
   admin canlı önizlemesi için aynı sınıflar admin.css'te ayrıca bulunur.
   Video hero için yeni kural YOK — pages.css .product-cinema kullanılır.
   ============================================================ */

.product-story {
  /* Kömür grisi — lüks algı için renkli accent (mavi/yeşil) hiçbir yerde kullanılmaz. */
  --sf-accent: #3a3d42;
  --sf-accent-soft: rgba(58, 61, 66, 0.10);
  --sf-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --sf-ink: #1c2433;
  /* Demo (pdp-story) gövde sans: Montserrat 300 — Outfit aynı weight'te daha dolgun görünür. */
  --sf-sans: 'Montserrat', var(--font-body, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

/* container */
.product-story .sf { color: #222; }
.sf-section { padding: 0; }
.sf-pad { padding: 34px 36px; }
/* Bölümler arası boşluk — görünür çizgi yok, yalnızca dikey margin */
.sf-divider {
  height: 0;
  margin: 36px 0;
  border: none;
  background: none;
}

/* shared type — gövde/başlık fontları Tasarım Ayarları'ndan gelir (--font-body / --font-display) */
.product-story .sf-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-accent); margin: 0 0 10px; font-family: var(--sf-sans); }
.product-story .sf-h:not(.sf-h--hero) { font-size: 30px; line-height: 1.15; font-weight: 300; margin: 0 0 12px; color: var(--sf-rich-heading, var(--sf-ink)); letter-spacing: -.01em; font-family: var(--font-display, inherit); }
.product-story .sf-sub:not(.sf-sub--hero) { font-size: 16px; line-height: 1.6; color: var(--sf-rich-body, #4a5568); margin: 0; font-weight: 300; font-family: var(--sf-sans); }
.product-story .sf-body { font-size: 16.5px; line-height: 1.7; color: #3c4658; margin: 0; font-family: var(--sf-sans); font-weight: 300; }

/* image/video cover behaviour for real media slots */
.sf-hero-media img,
.sf-row-img img,
.sf-full-img img,
.sf-steps-slide img,
.sf-hero-media video,
.sf-row-img video,
.sf-full-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sf-hero-media img,
.sf-hero-media video {
  object-position: var(--sf-hero-focal-x, 50%) center;
}
.sf-hero[data-ar="21x9"] { aspect-ratio: 21 / 9; }
.sf-hero[data-ar="16x9"] { aspect-ratio: 16 / 9; }
.sf-hero[data-ar="16x7"] { aspect-ratio: 16 / 7; }
.sf-hero[data-ar="4x3"]  { aspect-ratio: 4 / 3; }
.sf-hero[data-ar="4x5"]  { aspect-ratio: 4 / 5; }
/* Doğal oran — görsel yüksekliği belirler; overlay grid ile üstte kalır */
.sf-hero[data-ar="auto"] {
  aspect-ratio: auto;
  display: grid;
  background: #0f141e;
}
.sf-hero[data-ar="auto"] > .sf-hero-media,
.sf-hero[data-ar="auto"] > .sf-hero-scrim,
.sf-hero[data-ar="auto"] > .sf-hero-overlay {
  grid-area: 1 / 1;
}
.sf-hero[data-ar="auto"] > .sf-hero-media {
  position: relative;
  inset: auto;
}
.sf-hero[data-ar="auto"] > .sf-hero-scrim,
.sf-hero[data-ar="auto"] > .sf-hero-overlay {
  position: absolute;
  inset: 0;
}
.sf-hero[data-ar="auto"] .sf-hero-media img,
.sf-hero[data-ar="auto"] .sf-hero-media video {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  object-position: center center;
}
.sf-full-img { width: 100%; aspect-ratio: 16/7; }
.sf-cap { font-size: 13px; color: #8a94a6; padding: 10px 36px 0; text-align: center; }

/* ---------- HERO (image; video uses .product-cinema) ---------- */
.sf-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #161d2b;
  isolation: isolate;
  container-type: inline-size;
  container-name: sf-hero;
}
/* PDP: padding'li konteyner dışında render — tam genişlik */
.m29-detail-sections.product-story {
  width: 100%;
  max-width: 100%;
}
/* Hero / sinema dışındaki bloklar: okunabilir genişlik + sayfa gutter'ı */
.product-story .sf-section:not(:has(> .sf-hero)):not(:has(> .product-cinema)) {
  max-width: 1536px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.sf-hero-media { position: absolute; inset: 0; z-index: 0; }
.sf-hero-media .ph { height: 100%; }
.sf-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sf-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: clamp(18px, 4.5cqi, 38px);
}
.sf-hero-inner {
  max-width: 86%;
  min-width: 0;
  width: 100%;
}
.product-story .sf-hero .sf-h--hero {
  color: #fff;
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.12;
  margin: 0 0 12px;
  letter-spacing: -.015em;
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.product-story .sf-hero .sf-sub--hero {
  color: rgba(255,255,255,.94);
  font-size: clamp(.95rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  margin: 0;
  max-width: 100%;
  text-shadow: 0 1px 14px rgba(0,0,0,.38);
  overflow-wrap: break-word;
}
.product-story .sf-hero .sf-eyebrow--on {
  color: #fff;
  font-size: clamp(10px, 1.1vw, 13px);
  opacity: .94;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
@supports (font-size: 1cqi) {
  .product-story .sf-hero .sf-h--hero { font-size: clamp(1.35rem, 7.5cqi, 3.65rem); }
  .product-story .sf-hero .sf-sub--hero { font-size: clamp(.875rem, 2.75cqi, 1.38rem); }
  .product-story .sf-hero .sf-eyebrow--on { font-size: clamp(10px, 1.4cqi, 14px); }
}

/* Açık zeminli kapak görsellerinde koyu metin (sf-hero-theme.js → has-dark-text) */
.sf-hero.has-dark-text .sf-h--hero {
  color: var(--sf-ink);
  text-shadow: 0 1px 16px rgba(255,255,255,.55);
}
.sf-hero.has-dark-text .sf-sub--hero {
  color: rgba(28,36,51,.9);
  text-shadow: 0 1px 10px rgba(255,255,255,.45);
}
.sf-hero.has-dark-text .sf-eyebrow--on {
  color: var(--sf-accent);
  opacity: 1;
  text-shadow: none;
}

.sf-hero--center-left .sf-hero-overlay,
.sf-hero--bottom-left .sf-hero-overlay { align-items: center; justify-content: flex-start; text-align: left; }
.sf-hero--center-left .sf-hero-scrim,
.sf-hero--bottom-left .sf-hero-scrim { background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.16) 44%, transparent 72%); }
.sf-hero--center .sf-hero-overlay { align-items: center; justify-content: center; text-align: center; }
.sf-hero--center .sf-hero-inner { max-width: min(90%, 52rem); }
.sf-hero--center-left .sf-hero-inner,
.sf-hero--bottom-left .sf-hero-inner { max-width: min(84%, 40rem); }
.sf-hero--boxed .sf-hero-inner { max-width: min(78%, 34rem); }
.sf-hero--center .sf-hero-scrim { background: rgba(0,0,0,.34); }
.sf-hero--bottom-bar .sf-hero-overlay { align-items: flex-end; padding: 0; }
.sf-hero--bottom-bar .sf-hero-inner { max-width: 100%; width: 100%; padding: 32px 38px 28px; background: linear-gradient(0deg, rgba(0,0,0,.76), rgba(0,0,0,.34) 72%, transparent); }
.sf-hero--bottom-bar .sf-hero-scrim { display: none; }
.sf-hero--boxed .sf-hero-overlay { align-items: flex-end; justify-content: flex-start; }
.sf-hero--boxed .sf-hero-inner { max-width: 72%; background: rgba(18,24,36,.46); backdrop-filter: blur(7px); border: 1px solid rgba(255,255,255,.18); padding: 22px 24px; border-radius: 15px; }
.sf-hero--boxed .sf-hero-scrim { background: rgba(0,0,0,.16); }
.sf-hero.has-dark-text.sf-hero--center .sf-hero-scrim {
  background: rgba(255,255,255,.46);
}
.sf-hero.has-dark-text.sf-hero--center-left .sf-hero-scrim,
.sf-hero.has-dark-text.sf-hero--bottom-left .sf-hero-scrim {
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.16) 44%, transparent 72%);
}

/* ---------- ROW (imageText) — editorial split ---------- */
.sf-row {
  display: grid;
  gap: 0;
  align-items: stretch;
}
.sf-row--media-right { grid-template-columns: 1.2fr 0.8fr; }
.sf-row--media-left { grid-template-columns: 0.8fr 1.2fr; }
.sf-row > div { display: flex; flex-direction: column; min-width: 0; }
.sf-row > div:has(.sf-row-img) { padding: 60px 40px 60px 20px; }
.sf-row--media-right > div:has(.sf-row-img) { padding: 60px 40px 60px 20px; }
.sf-row--media-left > div:has(.sf-row-img) { padding: 60px 20px 60px 40px; }
.sf-row .sf-pad {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.sf-row .sf-eyebrow {
  font-family: var(--sf-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #555555;
  margin: 0 0 20px;
}
.sf-row .sf-h--row {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--sf-ink);
  margin: 0 0 30px;
}
.sf-row .sf-h--row:has(+ .sf-it-quote) {
  margin-bottom: 38px;
}
.sf-it-quote {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-style: italic;
  font-weight: 300;
  color: #555555;
  border-left: 2px solid #111111;
  padding: 0 0 0 25px;
  margin: 0 0 30px;
  line-height: 1.4;
}
.sf-row .sf-rich-paras { margin-top: 0; gap: 0; }
.sf-row .sf-body {
  font-family: var(--sf-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #555555;
  max-width: 580px;
}
.sf-row .sf-bullets { margin-top: 0; }
.sf-row .sf-bullets li {
  font-family: var(--sf-sans);
  font-size: 15px;
  font-weight: 300;
  color: #555555;
  max-width: 580px;
}
.sf-row-img {
  width: 100%;
  flex: 1;
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
}
.sf-row .sf-it-card {
  background: #f5f7fa;
  border: 1px solid #e8edf4;
  border-radius: 16px;
  margin: 0;
}

/* ---------- bullets / lead ---------- */
.sf-bullets { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sf-bullets li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.6; color: #3c4658; }
.sf-bullets li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--sf-accent); box-shadow: 0 0 0 4px var(--sf-accent-soft); }
.sf-body--lead { font-size: 21px; line-height: 1.6; color: var(--sf-rich-heading, var(--sf-ink)); font-weight: 300; letter-spacing: -.005em; }

/* ---------- rich text block ---------- */
.sf-rich .sf-h { margin: 0; }
.sf-rich .sf-eyebrow { margin: 0 0 12px; }
.sf-rich-inner { margin: 0 auto; }
.sf-rich--w-narrow .sf-rich-inner { max-width: 540px; }
.sf-rich--w-normal .sf-rich-inner { max-width: 1080px; }
.sf-rich--w-full .sf-rich-inner { max-width: 1280px; }
.sf-rich--a-left .sf-rich-inner { text-align: left; }
.sf-rich--a-center .sf-rich-inner { text-align: center; }
.sf-rich--a-right .sf-rich-inner { text-align: right; }
.sf-rich-paras { display: flex; flex-direction: column; gap: 15px; margin-top: 16px; }
.sf-rich-paras .sf-body { margin: 0; }
.sf-rich--lead .sf-rich-paras .sf-body--lead { font-size: 20px; line-height: 1.6; color: var(--sf-rich-heading, var(--sf-ink)); font-weight: 300; letter-spacing: -.005em; }
.sf-rich .sf-bullets { margin-top: 16px; }
.sf-rich--editorial .sf-rich-inner { text-align: left; }
.sf-rich--bullets.sf-rich--a-left .sf-rich-inner { text-align: left; }
.sf-rich--bullets.sf-rich--a-center .sf-rich-inner { text-align: center; }
.sf-rich--bullets.sf-rich--a-right .sf-rich-inner { text-align: right; }
.sf-rich-2col { display: grid; grid-template-columns: .82fr 1.18fr; gap: 44px; align-items: start; text-align: left; }
.sf-rich-2col-head .sf-h { margin: 0; }
.sf-rich-2col-head .sf-eyebrow { margin-bottom: 10px; }
.sf-rich-2col-body .sf-rich-paras { margin-top: 0; }
.sf-rich--div-top .sf-rich-inner { border-top: 1px solid #e5e9f0; padding-top: 30px; }
.sf-rich--div-bottom .sf-rich-inner { border-bottom: 1px solid #e5e9f0; padding-bottom: 30px; }
.sf-rich--div-both .sf-rich-inner { border-top: 1px solid #e5e9f0; border-bottom: 1px solid #e5e9f0; padding-top: 30px; padding-bottom: 30px; }

/* ---------- arka planlı metin bloğu (admin'den renk seçilir) ---------- */
.sf-rich {
  --sf-rich-heading: var(--sf-ink, #1c2433);
  --sf-rich-eyebrow: #6b5c45;
  --sf-rich-body: #555555;
  --sf-rich-num: #a68a64;
  --sf-rich-item-title: var(--sf-ink, #1c2433);
}
.sf-rich--bg { padding-top: 46px; padding-bottom: 46px; }
.sf-rich--inv {
  --sf-rich-heading: #ffffff;
  --sf-rich-eyebrow: #c5a073;
  --sf-rich-body: rgba(255, 255, 255, 0.72);
  --sf-rich-num: #c5a073;
  --sf-rich-item-title: #ffffff;
  /* Koyu banner başlığı: gri eyebrow + altın alt başlık (SAMBUCUS / demo-metin) */
  --sf-rich-banner-eyebrow: rgba(255, 255, 255, 0.42);
  --sf-rich-banner-subtitle: #c5a073;
}
.sf-rich--inv .sf-body, .sf-rich--inv .sf-sub { color: var(--sf-rich-body); }
.sf-rich--inv .sf-h,
.sf-rich--inv .sf-body--lead,
.sf-rich--inv.sf-rich--lead .sf-rich-paras .sf-body--lead { color: var(--sf-rich-heading); }
.sf-rich--inv .sf-eyebrow { color: var(--sf-rich-eyebrow); }
.sf-rich--inv.sf-rich--standard .sf-eyebrow,
.sf-rich--inv.sf-rich--bannerMetrics .sf-eyebrow,
.sf-rich--inv.sf-rich--bullets .sf-eyebrow { color: var(--sf-rich-banner-eyebrow); }
.sf-rich--inv.sf-rich--div-top .sf-rich-inner,
.sf-rich--inv.sf-rich--div-bottom .sf-rich-inner,
.sf-rich--inv.sf-rich--div-both .sf-rich-inner { border-color: rgba(255, 255, 255, .25); }

/* ---------- rich text: Standart + Banner+Metrikler (demo-metin / FRACTOBIO banner) ---------- */
.sf-rich--standard.sf-pad,
.sf-rich--bannerMetrics.sf-pad {
  padding-top: clamp(64px, 10vw, 140px);
  padding-bottom: clamp(64px, 10vw, 140px);
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
}
.sf-rich--standard.sf-rich--bg,
.sf-rich--bannerMetrics.sf-rich--bg {
  padding-top: clamp(64px, 10vw, 140px);
  padding-bottom: clamp(64px, 10vw, 140px);
}
.sf-rich--standard .sf-eyebrow,
.sf-rich--bannerMetrics .sf-eyebrow,
.sf-rich--lead .sf-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.27em;
  color: var(--sf-rich-eyebrow);
  margin-bottom: clamp(20px, 2.5vw, 25px);
}
.sf-eyebrow--lines {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  max-width: 100%;
}
.sf-rich--a-center .sf-eyebrow--lines { margin-left: auto; margin-right: auto; }
.sf-rich--a-right .sf-eyebrow--lines { margin-left: auto; }
.sf-eyebrow--lines::before,
.sf-eyebrow--lines::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(2rem, 6vw, 3.5rem);
  height: 1px;
  background: var(--sf-rich-line, #c5a073);
}
.sf-rich { --sf-rich-line: #c5a073; }
.product-story .sf-rich--standard .sf-h:not(.sf-h--hero),
.product-story .sf-rich--bannerMetrics .sf-h:not(.sf-h--hero) {
  font-family: 'Cormorant Garamond', var(--font-display, Georgia), serif;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-rich-heading);
  margin-bottom: clamp(16px, 2vw, 20px);
}
.product-story .sf-rich--standard .sf-sub--rich,
.product-story .sf-rich--bannerMetrics .sf-sub--rich {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--sf-rich-banner-subtitle, var(--sf-rich-eyebrow));
  margin: 0 auto clamp(56px, 7vw, 80px);
}
.product-story .sf-rich--standard:not(.sf-rich--inv) .sf-sub--rich,
.product-story .sf-rich--bannerMetrics:not(.sf-rich--inv) .sf-sub--rich {
  color: var(--sf-rich-eyebrow);
}
.sf-rich--standard .sf-body,
.sf-rich--bannerMetrics .sf-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--sf-rich-body);
}
.sf-rich--standard .sf-rich-paras,
.sf-rich--bannerMetrics .sf-rich-paras {
  margin-top: 0;
  gap: 12px;
}
.sf-rich--standard.sf-rich--a-center .sf-rich-paras,
.sf-rich--bannerMetrics.sf-rich--a-center .sf-rich-paras {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.sf-rich--standard.sf-rich--w-narrow .sf-rich-inner,
.sf-rich--bannerMetrics.sf-rich--w-narrow .sf-rich-inner { max-width: 600px; }
.sf-rich--standard.sf-rich--w-normal .sf-rich-inner,
.sf-rich--bannerMetrics.sf-rich--w-normal .sf-rich-inner { max-width: 1080px; }
.sf-rich--standard.sf-rich--w-full .sf-rich-inner,
.sf-rich--bannerMetrics.sf-rich--w-full .sf-rich-inner { max-width: 1280px; }
/* ---------- Maddeli liste (01/02/03 — demo dark strip) ---------- */
.sf-rich--bullets.sf-pad,
.sf-rich--bullets.sf-rich--bg {
  padding-top: clamp(64px, 10vw, 140px);
  padding-bottom: clamp(64px, 10vw, 140px);
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
}
.sf-rich--bullets .sf-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.27em;
  color: var(--sf-rich-eyebrow);
  margin-bottom: clamp(20px, 2.5vw, 25px);
}
.product-story .sf-rich--bullets .sf-h:not(.sf-h--hero) {
  font-family: 'Cormorant Garamond', var(--font-display, Georgia), serif;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-rich-heading);
  margin-bottom: clamp(12px, 2vw, 16px);
}
.product-story .sf-rich .sf-sub--rich {
  font-family: var(--sf-sans);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--sf-rich-body);
  margin: 0 auto clamp(40px, 5vw, 56px);
  max-width: 640px;
}
.product-story .sf-rich--standard .sf-sub--rich,
.product-story .sf-rich--bannerMetrics .sf-sub--rich {
  max-width: 100%;
}
.product-story .sf-rich--bullets .sf-sub--rich {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--sf-rich-banner-subtitle, var(--sf-rich-eyebrow));
  margin: 0 auto clamp(56px, 7vw, 80px);
}
.product-story .sf-rich--bullets:not(.sf-rich--inv) .sf-sub--rich {
  color: var(--sf-rich-eyebrow);
}
.product-story .sf-rich--bullets .sf-h:not(.sf-h--hero):has(+ .sf-sub--rich) {
  margin-bottom: clamp(16px, 2vw, 22px);
}
.sf-rich--bullets .sf-h:not(:has(+ .sf-sub--rich)) {
  margin-bottom: clamp(40px, 5vw, 56px);
}
.sf-num-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 56px);
  text-align: left;
  max-width: 720px;
}
.sf-num-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.sf-num-item__index {
  font-family: 'Cormorant Garamond', var(--font-display, Georgia), serif;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 300;
  line-height: 1;
  color: var(--sf-rich-num);
  min-width: 2.5ch;
}
.sf-num-item__body { min-width: 0; }
.sf-num-item__title {
  font-family: var(--sf-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sf-rich-item-title);
  margin: 0 0 10px;
}
.sf-num-item__desc {
  font-family: var(--sf-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--sf-rich-body);
  margin: 0;
  white-space: pre-line;
}

/* Banner + Metrikler — intro + klinik sayaç şeridi */
.sf-rich--bannerMetrics .sf-body--intro {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(32px, 5vw, 60px);
  opacity: 0.85;
}
.sf-rich--bannerMetrics.sf-rich--a-left .sf-body--intro,
.sf-rich--bannerMetrics.sf-rich--a-right .sf-body--intro {
  margin-left: 0;
  margin-right: 0;
}
.sf-metrics-row {
  display: flex;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 40px);
  border-top: 1px solid rgba(58, 61, 66, 0.18);
  padding-top: clamp(32px, 5vw, 50px);
  margin-top: clamp(8px, 2vw, 16px);
}
.sf-rich--inv .sf-metrics-row {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.sf-metric {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.sf-metric-value {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--sf-ink);
}
.sf-rich--inv .sf-metric-value { color: #fff; }
.sf-metric-label {
  font-family: var(--sf-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--sf-ink);
}
.sf-rich--inv .sf-metric-label { color: rgba(255, 255, 255, 0.92); }
.sf-metric-desc {
  font-family: var(--sf-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  margin: 0;
  color: #555;
  opacity: 0.85;
}
.sf-rich--inv .sf-metric-desc { color: rgba(255, 255, 255, 0.75); }
.sf-metrics-footnote {
  font-family: var(--sf-sans);
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  margin: clamp(28px, 4vw, 40px) auto 0;
  max-width: 720px;
  text-align: center;
  color: #666;
  opacity: 0.75;
}
.sf-rich--inv .sf-metrics-footnote { color: rgba(255, 255, 255, 0.6); }

/* ---------- features (matrix) ---------- */
.sf-feats-section {
  padding: 100px 80px;
  background-color: #fcfdfe;
  border-bottom: 1px solid #e8ecef;
}
.sf-feats-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 80px;
}
.sf-feats-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--sf-ink);
  margin: 0 0 15px;
}
.sf-feats-sub {
  font-family: var(--sf-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}
.sf-feats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 0;
}
.sf-feat {
  position: relative;
  background: #ffffff;
  border: 1px solid #e8ecef;
  padding: 45px 35px;
  flex: 0 1 calc(25% - 18px);
  min-width: 220px;
  max-width: 300px;
  box-sizing: border-box;
}
.sf-feat-num {
  position: absolute;
  top: 15px;
  right: 30px;
  font-family: var(--font-display, inherit);
  font-size: 64px;
  font-weight: 100;
  line-height: 1;
  color: #e8ecef;
  pointer-events: none;
  user-select: none;
}
.sf-feat-title {
  font-family: var(--sf-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--sf-ink);
  margin: 20px 0 15px;
  line-height: 1.3;
}
.sf-feat-desc {
  font-family: var(--sf-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: #555555;
  margin: 0;
}

/* ---------- gallery / steps — scrollytelling split ----------
   Sol sticky görsel + sağ dikey adım zaman çizelgesi (demo mechanism bölümü).
   product-story.js: adım .is-active vurgusu + görsel slide geçişi. */
.sf-steps-section {
  background-color: #fff;
  border-bottom: 1px solid #e8edf4;
}
.sf-steps-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.sf-steps-visual {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  overflow: hidden;
  background-color: #f6f7f9;
}
.sf-steps-slides {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}
.sf-steps-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.sf-steps-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.sf-steps-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sf-steps-slide .ph { min-height: 100%; }
.sf-steps-scroller {
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Metin Bölümü (sf-rich--standard) ile aynı eyebrow tipografisi */
.sf-steps-section .sf-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.27em;
  color: #6b5c45;
  margin: 0 0 clamp(20px, 2.5vw, 25px);
}
.sf-steps-title {
  font-family: var(--sf-serif, Georgia, serif);
  font-size: 36px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--sf-ink);
  margin: 0 0 45px;
}
.sf-step-node {
  position: relative;
  padding-left: 45px;
  margin-bottom: 40px;
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
.sf-step-node:last-child { margin-bottom: 0; }
.sf-step-node.is-active { opacity: 1; }
.sf-step-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--sf-ink, #1c2433);
  border-radius: 50%;
}
.sf-step-node::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 20px;
  width: 1px;
  height: calc(100% + 20px);
  background-color: #e8edf4;
}
.sf-step-node:last-child::after { display: none; }
.sf-step-index {
  display: block;
  font-family: var(--sf-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 5px;
}
.sf-step-heading {
  font-family: var(--sf-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--sf-ink);
  margin: 0 0 8px;
}
.sf-step-desc {
  font-family: var(--sf-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: #555555;
  margin: 0;
}

/* ---------- pin scrollytelling (product-story.js STEPS_PIN_SCROLL) ----------
   Scroll sırasında bölüm sabitlenir; yalnızca adım/görsel geçişi olur.
   Kapatmak için product-story.js içinde STEPS_PIN_SCROLL = false. */
/* KRİTİK: ScrollTrigger pin sınırlarında bölüme inline transform uygular;
   [data-anim] genel kuralındaki transform transition'ı bunu yumuşatınca
   bölüm pin giriş/çıkışında sıçrar. Pin modunda transition tamamen kapalı. */
.anim-on .sf-steps-section--pin[data-anim],
.sf-steps-section--pin {
  transition: none;
}
.sf-steps-section--pin .sf-steps-split {
  /* var JS'ten px gelir; fallback vh (dvh eski Safari'de geçersiz → yükseklik çöker) */
  min-height: var(--sf-steps-pin-height, 100vh);
  height: var(--sf-steps-pin-height, 100vh);
  max-height: var(--sf-steps-pin-height, 100vh);
}
.sf-steps-section--pin .sf-steps-visual {
  position: relative;
  top: auto;
  align-self: stretch;
  min-height: 0;
  height: auto;
}
.sf-steps-section--pin .sf-steps-slides {
  min-height: 100%;
  height: 100%;
}
.sf-steps-section--pin .sf-steps-scroller {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 48px 40px;
  -webkit-overflow-scrolling: touch;
}
/* Pin: adımlar üst üste (grid stack) — yalnızca aktif görünür; track en uzun adıma göre boylanır */
.sf-steps-section--pin .sf-steps-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'step';
  flex: none;
  min-height: 0;
}
.sf-steps-section--pin .sf-step-node {
  grid-area: step;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.sf-steps-section--pin .sf-step-node.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sf-steps-section--pin .sf-step-node::after {
  display: none;
}

/* ---------- striped placeholder (boş görsel) ---------- */
.product-story .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, #e6ebf3 0 11px, #dfe5ef 11px 22px); color: #9aa6ba; }
.product-story .ph span { font-family: var(--sf-mono); font-size: 11px; letter-spacing: .05em; background: rgba(255,255,255,.7); padding: 4px 9px; border-radius: 6px; }

/* ---------- responsive ---------- */
@media (min-width: 1024px) {
  .sf-divider { margin: 52px 0; }
}
@media (max-width: 760px) {
  .sf-divider { margin: 28px 0; }
  .product-story .sf-section:not(:has(> .sf-hero)):not(:has(> .product-cinema)) {
    padding-inline: 1rem;
  }
  .sf-pad { padding: 24px 20px; }
  .sf-h { font-size: 23px; }
  .sf-row,
  .sf-row--media-right,
  .sf-row--media-left { grid-template-columns: 1fr; }
  .sf-row .sf-pad { padding: 60px 24px; }
  .sf-row > div:has(.sf-row-img),
  .sf-row--media-right > div:has(.sf-row-img),
  .sf-row--media-left > div:has(.sf-row-img) { padding: 0 24px 60px; }
  .sf-row .sf-h--row { font-size: 2rem; margin-bottom: 20px; }
  .sf-row .sf-h--row:has(+ .sf-it-quote) { margin-bottom: 28px; }
  .sf-it-quote { font-size: 1.125rem; margin-bottom: 20px; padding-left: 20px; }
  .sf-row-img { min-height: 0; max-height: 320px; aspect-ratio: 4 / 3; }
  .sf-feats-section { padding: 60px 24px; }
  .sf-feats-head { margin-bottom: 40px; }
  .sf-feats-title { font-size: 1.75rem; }
  .sf-feats { gap: 20px; }
  .sf-feat { flex: 0 1 100%; max-width: none; min-width: 0; }
  .sf-feat-num { font-size: 48px; right: 20px; }
  .sf-rich-inner { max-width: none; }
  .sf-rich-2col { grid-template-columns: 1fr; gap: 16px; }
  .sf-rich--lead .sf-body--lead { font-size: 18px; }
  .sf-rich--standard.sf-pad,
  .sf-rich--standard.sf-rich--bg {
    padding-top: clamp(48px, 12vw, 80px);
    padding-bottom: clamp(48px, 12vw, 80px);
    padding-left: 20px;
    padding-right: 20px;
  }
  .product-story .sf-rich--standard .sf-h:not(.sf-h--hero),
  .product-story .sf-rich--bullets .sf-h:not(.sf-h--hero) {
    font-size: 40px;
    margin-bottom: 16px;
  }
  .sf-rich--standard .sf-eyebrow,
  .sf-rich--bullets .sf-eyebrow { margin-bottom: 16px; }
  .sf-rich--bullets.sf-pad,
  .sf-rich--bullets.sf-rich--bg {
    padding-top: clamp(48px, 12vw, 80px);
    padding-bottom: clamp(48px, 12vw, 80px);
    padding-left: 20px;
    padding-right: 20px;
  }
  .product-story .sf-rich--bullets .sf-h:not(.sf-h--hero):has(+ .sf-sub--rich) {
    margin-bottom: 14px;
  }
  .product-story .sf-rich .sf-sub--rich,
  .product-story .sf-rich--bullets .sf-sub--rich,
  .product-story .sf-rich--standard .sf-sub--rich,
  .product-story .sf-rich--bannerMetrics .sf-sub--rich {
    font-size: 13px;
    letter-spacing: 0.18em;
    margin: 0 auto clamp(40px, 10vw, 56px);
  }
  .sf-num-item {
    grid-template-columns: auto 1fr;
    gap: 20px;
  }
  .sf-num-item__index { font-size: clamp(28px, 7vw, 36px); }
  .sf-rich--bannerMetrics.sf-pad,
  .sf-rich--bannerMetrics.sf-rich--bg {
    padding-top: clamp(48px, 12vw, 80px);
    padding-bottom: clamp(48px, 12vw, 80px);
    padding-left: 20px;
    padding-right: 20px;
  }
  .product-story .sf-rich--bannerMetrics .sf-h:not(.sf-h--hero) {
    font-size: 40px;
    margin-bottom: 16px;
  }
  .sf-metrics-row {
    flex-direction: column;
    gap: 36px;
    padding-top: 36px;
  }
  .sf-metric-value { font-size: clamp(32px, 9vw, 44px); }
  /* Varsayılan + geniş oranlar: mobil dikey kapak (4:5). auto ve 4x5 dokunulmaz. */
  .sf-hero:not([data-ar]),
  .sf-hero[data-ar="21x9"],
  .sf-hero[data-ar="16x9"],
  .sf-hero[data-ar="16x7"],
  .sf-hero[data-ar="4x3"] { aspect-ratio: 4/5; }
  .sf-hero-overlay { padding: 24px 20px; }
  .sf-hero--bottom-bar .sf-hero-inner { padding: 24px 20px 20px; }
  .sf-hero--boxed .sf-hero-inner { max-width: min(88%, 30rem); }
  .sf-hero--center .sf-hero-inner { max-width: min(92%, 100%); }
  .sf-hero--center-left .sf-hero-inner,
  .sf-hero--bottom-left .sf-hero-inner { max-width: min(90%, 100%); }
  .sf-cap { padding: 10px 20px 0; }
  .sf-steps-split { grid-template-columns: 1fr; }
  .sf-steps-visual {
    position: static;
    min-height: 0;
    max-height: 320px;
  }
  .sf-steps-slides { min-height: 320px; }
  .sf-steps-scroller { padding: 60px 24px; }
  .sf-steps-title { font-size: 28px; margin-bottom: 32px; }
  /* pin modu — mobil: üstte görsel, altta tek aktif adım.
     --sf-steps-pin-height JS'ten PİKSEL gelir (svh/dvh yok — eski Safari'de
     var() ikamesi geçersiz olup yükseklik çökiyordu). Fallback yalnız vh. */
  .sf-steps-section--pin .sf-steps-split {
    grid-template-rows: min(24vh, 180px) minmax(0, 1fr);
    min-height: var(--sf-steps-pin-height, calc(100vh - var(--sf-steps-pin-offset, 0px) - var(--sf-steps-pin-bottom, 0px)));
    height: var(--sf-steps-pin-height, calc(100vh - var(--sf-steps-pin-offset, 0px) - var(--sf-steps-pin-bottom, 0px)));
    max-height: var(--sf-steps-pin-height, calc(100vh - var(--sf-steps-pin-offset, 0px) - var(--sf-steps-pin-bottom, 0px)));
  }
  .sf-steps-section--pin .sf-steps-visual {
    position: relative;
    max-height: none;
  }
  .sf-steps-section--pin .sf-steps-slides {
    min-height: 100%;
  }
  .sf-steps-section--pin .sf-steps-scroller {
    padding: 14px 20px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .sf-steps-section--pin .sf-steps-scroller > .sf-eyebrow {
    margin-bottom: 10px;
    flex: none;
  }
  .sf-steps-section--pin .sf-steps-title {
    margin-bottom: 12px;
    flex: none;
    font-size: 24px;
  }
  .sf-steps-section--pin .sf-step-desc {
    font-size: 15px;
    line-height: 1.55;
  }
  /* Track / node stack kuralları masaüstü pin bloğundan miras; absolute inset kaldırıldı */
}

/* ============================================================
   Giriş animasyonları — yalnızca .anim-on altında aktif.
   JS (.anim-in) görünürlükte tetikler; reduced-motion'da kapalı.
   ============================================================ */
.anim-on [data-anim] {
  opacity: 0;
  transition: opacity var(--anim-dur, .7s) cubic-bezier(.22,.7,.2,1), transform var(--anim-dur, .7s) cubic-bezier(.22,.7,.2,1);
  will-change: opacity, transform;
}
.anim-on [data-anim="fade-up"] { transform: translateY(40px); }
.anim-on [data-anim="slide-right"] { transform: translateX(-46px); }
.anim-on [data-anim="slide-left"] { transform: translateX(46px); }
.anim-on [data-anim="zoom-in"] { transform: scale(.93); }
.anim-on [data-anim="none"] { opacity: 1; }
.anim-on [data-anim].anim-in { opacity: 1; transform: none; }
/* imageText metin kolonu — demo reveal-stagger eşdeğeri */
.anim-on [data-anim="stagger"] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--anim-dur, .7s) ease, transform var(--anim-dur, .7s) cubic-bezier(.22,.7,.2,1);
}
.anim-on [data-anim="stagger"].anim-in > * { opacity: 1; transform: none; }
.anim-on [data-anim="stagger"].anim-in > *:nth-child(2) { transition-delay: .08s; }
.anim-on [data-anim="stagger"].anim-in > *:nth-child(3) { transition-delay: .16s; }
.anim-on [data-anim="stagger"].anim-in > *:nth-child(4) { transition-delay: .24s; }
.anim-on [data-anim="stagger"].anim-in > *:nth-child(5) { transition-delay: .32s; }
/* özellik kartları sıralı belirir */
.anim-on [data-anim] .sf-feat { opacity: 0; transform: translateY(22px); transition: opacity var(--anim-dur, .7s) ease, transform var(--anim-dur, .7s) cubic-bezier(.22,.7,.2,1); }
.anim-on [data-anim].anim-in .sf-feat { opacity: 1; transform: none; }
.anim-on [data-anim].anim-in .sf-feat:nth-child(1) { transition-delay: 0s; }
.anim-on [data-anim].anim-in .sf-feat:nth-child(2) { transition-delay: .13s; }
.anim-on [data-anim].anim-in .sf-feat:nth-child(3) { transition-delay: .26s; }
.anim-on [data-anim].anim-in .sf-feat:nth-child(4) { transition-delay: .39s; }
.anim-on [data-anim].anim-in .sf-feat:nth-child(5) { transition-delay: .52s; }
@media (prefers-reduced-motion: reduce) {
  .anim-on [data-anim], .anim-on [data-anim] .sf-feat,
  .anim-on [data-anim="stagger"] > * { opacity: 1 !important; transform: none !important; }
}