/* ════════════════ SCIENCE ════════════════ */
.lume-site {
  /* ── CORE PALETTE ── */
  /* Section 1 (Hero): #141a22  — derin charcoal, navy değil */
  /* Section 2 (Belief): #f4f0eb — sıcak krem, göz yormaz */
  /* Section 3 (Ritual): #1e1c2e — koyu mor-slate, geçiş */
  /* Section 4 (Ingredients): #f7f4f0 — nötr beyazımsı krem */
  /* Section 5 (Promise): #141a22  — hero ile aynı, tutarlı dark */
  /* Section 6 (CTA): #ede9e3  — hafif daha koyu krem, kapanış */

  --hero:   #141a22;
  --dark2:  #1e1c2e;
  --warm1:  #f4f0eb;
  --warm2:  #f7f4f0;
  --warm3:  #ede9e3;

  --ink:    #1a1a2e;
  --ink60:  rgba(26,26,46,.60);
  --ink35:  rgba(26,26,46,.35);
  --ink12:  rgba(26,26,46,.12);

  --stem:   #2c5a8c;
  --stem-l: #5d8ab8;
  --pale:   #bcd3e8;

  --w70:    rgba(255,255,255,.70);
  --w40:    rgba(255,255,255,.40);
  --w15:    rgba(255,255,255,.15);
  --w08:    rgba(255,255,255,.08);

  --serif: var(--font-serif);
  --sans:  var(--font-sans);
}

html { scroll-behavior: smooth; }
.lume-site { font-family: var(--sans); background: var(--hero); color: #fff; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.w { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,4vw,52px); }

.label {
  font-size: 9.5px; font-weight: 400; letter-spacing: .26em;
  text-transform: uppercase; opacity: .55;
}

/* ══════════════════════════════════════
   1. HERO
   Arka plan: #141a22 — koyu ama navy değil, sıcak charcoal
══════════════════════════════════════ */
.open {
  position: relative;
  height: 88svh;
  min-height: 590px;
  max-height: 860px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--hero);
}

.open__bg {
  position: absolute; inset: 0;
}
.open__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.open__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(20,26,34,1)    0%,
      rgba(20,26,34,.75)  26%,
      rgba(20,26,34,.22)  58%,
      rgba(20,26,34,.06) 100%
    );
}

.open__orb {
  position: absolute;
  top: -100px; right: -100px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,184,240,.14) 0%, transparent 65%);
  pointer-events: none;
}

.open__content {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(52px,7vh,88px);
}
.open__content .w {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  gap: 40px;
}

.open__tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--w15);
  background: rgba(196,184,240,.10);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pale);
}

.open__title {
  font-family: var(--serif);
  font-size: clamp(54px, 9vw, 118px);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.04em;
  color: #fff;
}
.open__title em {
  font-style: italic;
  color: var(--pale);
  display: block;
}

.open__scroll {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding-bottom: 6px;
}
.open__scroll-line {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.32));
  animation: scrollpulse 2s ease infinite;
}
@keyframes scrollpulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
.open__scroll span {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--w40); writing-mode: vertical-rl;
}

/* ══════════════════════════════════════
   2. BELIEF
   Arka plan: #f4f0eb — sıcak krem, gözü dinlendirir
   Metin: koyu ink, kontrast yüksek ama sert değil
══════════════════════════════════════ */
.belief {
  background: var(--warm1);
  padding: clamp(64px,9vw,112px) 0;
  overflow: hidden;
  position: relative;
}
.belief::before {
  content:'';
  position:absolute; right:-60px; bottom:-60px;
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(106,90,184,.06) 0%, transparent 65%);
}

.belief__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px,5vw,72px);
  align-items: center;
}

.belief__image {
  position: relative;
  width: clamp(200px,30vw,360px);
  aspect-ratio: 3/4;
  border-radius: 999px 999px 32px 32px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--ink12);
  box-shadow: 0 24px 60px rgba(26,26,46,.10);
}
.belief__image img { width:100%; height:100%; object-fit:cover; }
.belief__image::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(26,26,46,.16) 0%, transparent 50%);
}

.belief__quote {
  font-family: var(--serif);
  font-size: clamp(32px, 4.8vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 24px;
}
.belief__quote em { font-style: italic; color: var(--stem); }

.belief__note {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ink60);
  font-weight: 300;
  max-width: 480px;
  margin-bottom: 28px;
}
.belief__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--stem) 0%, #234a72 100%);
  border-radius: 999px;
  padding: 15px 32px;
  box-shadow: 0 12px 28px -12px var(--stem);
  transition: transform .25s ease, box-shadow .25s ease, gap .25s ease;
}
.belief__cta:hover { gap: 16px; transform: translateY(-2px); box-shadow: 0 18px 36px -14px var(--stem); color: #fff; }

/* ══════════════════════════════════════
   3. RITUAL
   Arka plan: #1e1c2e — koyu mor-slate
   Kart içi: yarı saydam beyaz — güzel kontrast
══════════════════════════════════════ */
.ritual {
  background: var(--dark2);
  color: #fff;
  padding: clamp(56px, 8vw, 90px) 0;
  position: relative;
  overflow: hidden;
}
.ritual::before {
  content:'';
  position:absolute; left:-100px; top:-100px;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(196,184,240,.10) 0%, transparent 65%);
  pointer-events:none;
}

.ritual__label {
  color: var(--pale);
  margin-bottom: 10px;
  opacity: .65;
}

.ritual__title {
  font-family: var(--serif);
  font-size: clamp(36px,5vw,62px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: clamp(44px,6vw,68px);
}
.ritual__title em { font-style: italic; color: var(--pale); }

.ritual__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
}

.ritual__step {
  background: rgba(255,255,255,.06);
  padding: clamp(26px, 3.2vw, 42px) clamp(20px, 2.5vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background .3s, transform .3s;
  cursor: default;
}
.ritual__step:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-2px);
}

.ritual__big-num {
  font-family: var(--serif);
  font-size: clamp(56px, 7vw, 92px);
  font-weight: 300;
  line-height: 1;
  color: rgba(196,184,240,.14);
  margin-bottom: -6px;
  letter-spacing: -.04em;
  user-select: none;
}
.ritual__step:hover .ritual__big-num { color: rgba(196,184,240,.22); }

.ritual__step-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 29px);
  font-weight: 300;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.1;
}

.ritual__step-word {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pale);
  opacity: .65;
  margin-bottom: 13px;
}

.ritual__step-text {
  font-size: 12.8px;
  line-height: 1.65;
  color: rgba(255,255,255,.50);
  font-weight: 300;
}

/* ══════════════════════════════════════
   4. INGREDIENTS
   Arka plan: #f7f4f0 — hafif krem, Belief'ten biraz farklı
   Kart: tam beyaz, net sınır
══════════════════════════════════════ */
.ingr {
  background: var(--warm2);
  color: var(--ink);
  padding: clamp(72px,10vw,120px) 0;
  overflow: hidden;
}

.ingr__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px,5vw,56px);
  flex-wrap: wrap;
}

.ingr__title {
  font-family: var(--serif);
  font-size: clamp(36px,5vw,64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}
.ingr__title em { font-style: italic; color: var(--stem); }

.ingr__desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink60);
  max-width: 320px;
  font-weight: 300;
}

.ingr__grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}

.ingr__card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px,3vw,36px);
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--ink12);
  box-shadow: 0 12px 40px rgba(26,26,46,.06);
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ingr__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(26,26,46,.10);
}

.ingr__card::before {
  content: attr(data-num);
  position: absolute;
  right: -8px; top: -16px;
  font-family: var(--serif);
  font-size: 120px;
  font-weight: 300;
  color: rgba(106,90,184,.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.ingr__card-sup {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stem); margin-bottom: 10px;
}
.ingr__card-name {
  font-family: var(--serif);
  font-size: clamp(22px,2.5vw,30px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.12;
  margin-bottom: 12px;
}
.ingr__card-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink60);
  font-weight: 300;
  flex: 1;
  margin-bottom: 18px;
}
.ingr__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ingr__tag {
  height: 24px; padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(106,90,184,.20);
  background: rgba(106,90,184,.06);
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--stem);
  display: inline-flex; align-items: center;
}

/* ══════════════════════════════════════
   5. PROMISE
   Arka plan: #141a22 — hero ile aynı, karanlık kapanış
══════════════════════════════════════ */
.promise {
  background: var(--hero);
  padding: clamp(72px,10vw,120px) 0;
}

.promise__inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(24px,4vw,56px);
  align-items: center;
}

.promise__img {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  aspect-ratio: 4/5;
  border: 1px solid var(--w15);
  box-shadow: 0 28px 72px rgba(0,0,0,.28);
}
.promise__img img { width:100%; height:100%; object-fit:cover; }
.promise__img::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(20,26,34,.50) 0%, transparent 55%);
}
.promise__img-label {
  position: absolute; bottom: 22px; left: 22px; z-index:2;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--w70);
}

.promise__title {
  font-family: var(--serif);
  font-size: clamp(36px,5vw,62px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff;
  margin: 10px 0 20px;
}
.promise__title em { font-style: italic; color: var(--pale); }

.promise__lead {
  font-size: 14px;
  line-height: 1.75;
  color: var(--w70);
  font-weight: 300;
  margin-bottom: 32px;
}

.promise__items { display: grid; gap: 10px; }
.promise__item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--w15);
}
.promise__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pale); flex-shrink: 0; opacity: .70;
}
.promise__item-text {
  font-family: var(--serif);
  font-size: 18px; font-weight: 400; color: #fff;
}

/* ══════════════════════════════════════
   6. CTA
   Arka plan: #ede9e3 — en koyu krem ton
   Deko metin çok soluk, fark edilmez ama derinlik verir
══════════════════════════════════════ */
.end {
  position: relative;
  overflow: hidden;
  background: var(--warm3);
  color: var(--ink);
  padding: clamp(80px,10vw,140px) 0;
  text-align: center;
}

.end__deco {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--serif);
  font-size: clamp(120px,22vw,280px);
  font-weight: 300;
  font-style: italic;
  color: rgba(106,90,184,.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  letter-spacing: -.05em;
}

.end__inner {
  position: relative; z-index: 1;
  max-width: 680px; margin: 0 auto;
}

.end__title {
  font-family: var(--serif);
  font-size: clamp(44px,7vw,90px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--ink);
  margin-bottom: 20px;
}
.end__title em { font-style: italic; color: var(--stem); }

.end__sub {
  font-size: 15px; line-height: 1.75;
  color: var(--ink60); font-weight: 300;
  margin-bottom: 38px;
}

.end__btns {
  display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 44px;
}

.btn-main {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 30px;
  border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 400;
  transition: transform .2s, background .2s;
}
.btn-main:hover { transform: translateY(-2px); background: var(--stem); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 28px;
  border-radius: 999px;
  border: 1px solid rgba(26,26,46,.18);
  background: rgba(255,255,255,.50);
  color: var(--ink);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 400;
  transition: transform .2s, background .2s;
}
.btn-ghost:hover { transform: translateY(-2px); background: #fff; }

.end__pills {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(26,26,46,.10);
}
.end__pill {
  height: 30px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(26,26,46,.14);
  background: rgba(255,255,255,.55);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(26,26,46,.45);
  display: inline-flex; align-items: center; gap: 7px;
}
.end__pill::before {
  content:''; width:4px; height:4px; border-radius:50%;
  background: var(--stem); opacity:.65;
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .belief__inner { grid-template-columns: 1fr; }
  .belief__image { width: 100%; max-width: 380px; aspect-ratio: 3/2; border-radius: 28px; margin: 0 auto; }
  .ritual__grid { grid-template-columns: repeat(2,1fr); }
  .ingr__grid { grid-template-columns: 1fr; }
  .promise__inner { grid-template-columns: 1fr; }
  .promise__img { aspect-ratio: 16/9; border-radius: 24px; }
}
@media (max-width: 640px) {
  .open__content .w { grid-template-columns: 1fr; }
  .open__scroll { display: none; }
  .open__title { font-size: clamp(52px,15vw,80px); }
  .ritual__grid { grid-template-columns: 1fr; border-radius: 22px; }
  .ritual__step { padding: 24px 22px; }
  .ingr__head { flex-direction: column; align-items: flex-start; }
  .ingr__desc { max-width: 100%; }
  .end__btns { flex-direction: column; align-items: center; }
  .btn-main, .btn-ghost { width: 100%; max-width: 280px; justify-content: center; }
}

/* ══════════════════════════════════════
   HERO trust pills (eklendi)
══════════════════════════════════════ */
.open__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.open__pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--w15); border-radius: 999px; font-size: 11px; letter-spacing: .05em; color: var(--w70); background: var(--w08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.open__pill svg { width: 13px; height: 13px; color: var(--stem-l); }

/* ══════════════════════════════════════
   HOW IT WORKS — mekanizma (koyu, stem aksanı)
══════════════════════════════════════ */
.hiw { position: relative; overflow: hidden; background: var(--hero); color: #fff; padding: clamp(82px,11vw,150px) 0; }
.hiw::before { content: ""; position: absolute; width: 720px; height: 720px; border-radius: 50%; top: -280px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(106,90,184,.20) 0%, transparent 65%); pointer-events: none; }
.hiw__head { position: relative; z-index: 2; max-width: 740px; margin: 0 auto clamp(46px,6vw,72px); text-align: center; }
.hiw__label { color: var(--pale); opacity: .8; }
.hiw__title { margin-top: 14px; font-family: var(--serif); font-size: clamp(32px,5vw,58px); font-weight: 300; line-height: 1.08; letter-spacing: -.022em; }
.hiw__title em { font-style: italic; color: var(--pale); }
.hiw__sub { margin: 18px auto 0; max-width: 600px; color: var(--w70); font-size: 16px; line-height: 1.72; }
.hiw__flow { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 18px; }
.hiw__step { position: relative; padding: 34px 30px 32px; border: 1px solid var(--w15); border-radius: 22px; background: var(--w08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hiw__num { font-family: var(--serif); font-size: 15px; color: var(--pale); letter-spacing: .04em; }
.hiw__icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 16px 0 22px; border-radius: 50%; background: rgba(106,90,184,.20); border: 1px solid rgba(139,124,212,.4); color: #dde9f3; }
.hiw__icon svg { width: 26px; height: 26px; }
.hiw__step-title { font-family: var(--serif); font-size: clamp(21px,2.4vw,26px); font-weight: 400; margin-bottom: 12px; }
.hiw__step-text { color: var(--w70); font-size: 15px; line-height: 1.72; }
@media (min-width: 880px) {
  .hiw__flow { grid-template-columns: repeat(3,1fr); gap: 24px; }
  .hiw__step:not(:last-child)::after { content: ""; position: absolute; top: 64px; right: -14px; width: 28px; height: 1px; background: linear-gradient(90deg, var(--stem-l), transparent); }
}

/* ══════════════════════════════════════
   PROOF & RESULTS — gerçek veri + zaman çizelgesi + kredibilite (krem)
══════════════════════════════════════ */
.proof { background: var(--warm2); color: var(--ink); padding: clamp(82px,11vw,150px) 0; }
.proof__head { text-align: center; max-width: 680px; margin: 0 auto clamp(40px,5vw,58px); }
.proof__label { color: var(--stem); opacity: .9; }
.proof__title { margin-top: 14px; font-family: var(--serif); font-size: clamp(30px,4.6vw,54px); font-weight: 300; line-height: 1.1; letter-spacing: -.022em; color: var(--ink); }
.proof__title em { font-style: italic; color: var(--stem); }
.proof__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; max-width: 900px; margin: 0 auto clamp(44px,6vw,64px); }
.proof__stat { text-align: center; padding: 28px 18px; background: #fff; border: 1px solid var(--ink12); border-radius: 18px; }
.proof__stat-num { font-family: var(--serif); font-size: clamp(30px,4vw,44px); font-weight: 300; color: var(--ink); line-height: 1; }
.proof__stat-num span { color: var(--stem); }
.proof__stat-label { margin-top: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink60); }
.proof__tl-head { text-align: center; font-family: var(--serif); font-size: clamp(20px,2.4vw,26px); font-weight: 400; color: var(--ink); margin-bottom: 28px; }
.proof__timeline { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 980px; margin: 0 auto; }
.proof__phase { position: relative; padding: 26px 26px 26px 30px; background: #fff; border: 1px solid var(--ink12); border-radius: 18px; border-left: 3px solid var(--stem); }
.proof__phase-week { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stem); }
.proof__phase-title { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 6px 0 8px; }
.proof__phase-text { font-size: 14.5px; line-height: 1.65; color: var(--ink60); }
.proof__note { text-align: center; font-size: 12.5px; color: var(--ink35); margin: 22px auto 0; max-width: 620px; }
.proof__cred { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; text-align: center; max-width: 820px; margin: clamp(44px,6vw,60px) auto 0; padding: 26px 30px; background: var(--ink); color: #fff; border-radius: 22px; }
.proof__cred-text { font-size: 15px; line-height: 1.6; color: var(--w70); flex: 1; min-width: 240px; }
.proof__cred-text strong { color: #fff; font-weight: 600; }
.proof__cred-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 13px 26px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.proof__cred-link:hover { background: var(--pale); }
@media (min-width: 760px) {
  .proof__stats { grid-template-columns: repeat(4,1fr); }
  .proof__timeline { grid-template-columns: repeat(3,1fr); }
}

/* ══════════════════════════════════════
   THE SCIENCE OF HAIR GROWTH — eğitici (krem)
══════════════════════════════════════ */
.grow { background: var(--warm1); color: var(--ink); padding: clamp(82px,11vw,150px) 0; }
.grow__head { max-width: 760px; margin: 0 auto clamp(40px,5vw,58px); text-align: center; }
.grow__label { color: var(--stem); opacity: .9; }
.grow__title { margin-top: 14px; font-family: var(--serif); font-size: clamp(30px,4.6vw,54px); font-weight: 300; line-height: 1.1; letter-spacing: -.022em; color: var(--ink); }
.grow__title em { font-style: italic; color: var(--stem); }
.grow__intro { margin: 18px auto 0; max-width: 620px; font-size: 16px; line-height: 1.72; color: var(--ink60); }
.grow__cycle { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grow__phase { position: relative; padding: 30px 28px; background: #fff; border: 1px solid var(--ink12); border-radius: 20px; overflow: hidden; }
.grow__phase::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--stem-l), var(--stem)); }
.grow__phase-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.grow__phase-name { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.grow__phase-name span { color: var(--stem); font-style: italic; }
.grow__phase-dur { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stem); white-space: nowrap; }
.grow__phase-bar { height: 5px; border-radius: 4px; background: var(--ink12); margin-bottom: 14px; overflow: hidden; }
.grow__phase-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--stem-l), var(--stem)); }
.grow__phase-text { font-size: 14.5px; line-height: 1.65; color: var(--ink60); }
.grow__why { margin-top: clamp(40px,5vw,60px); background: var(--ink); color: #fff; border-radius: 24px; padding: clamp(34px,4vw,48px); }
.grow__why-head { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.grow__why-title { font-family: var(--serif); font-size: clamp(24px,3vw,34px); font-weight: 300; }
.grow__why-title em { font-style: italic; color: var(--pale); }
.grow__why-sub { margin-top: 12px; color: var(--w70); font-size: 15px; line-height: 1.65; }
.grow__factors { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grow__factor { display: flex; gap: 14px; align-items: flex-start; }
.grow__factor-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(106,90,184,.22); border: 1px solid rgba(139,124,212,.4); color: #dde9f3; }
.grow__factor-ic svg { width: 20px; height: 20px; }
.grow__factor-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.grow__factor-text { font-size: 13px; line-height: 1.55; color: var(--w70); }
.grow__close { text-align: center; max-width: 640px; margin: clamp(34px,4vw,46px) auto 0; font-size: 16px; line-height: 1.7; color: var(--ink); }
.grow__close em { font-style: italic; color: var(--stem); }
@media (min-width: 820px) {
  .grow__cycle { grid-template-columns: repeat(3,1fr); gap: 20px; }
  .grow__factors { grid-template-columns: repeat(2,1fr); gap: 20px 32px; }
}

/* ══════════════════════════════════════
   SCIENCE FAQ — açılır akordeon (krem)
══════════════════════════════════════ */
.sfaq { background: var(--warm2); color: var(--ink); padding: clamp(82px,11vw,150px) 0; }
.sfaq__head { text-align: center; max-width: 620px; margin: 0 auto clamp(36px,4vw,52px); }
.sfaq__label { color: var(--stem); opacity: .9; }
.sfaq__title { margin-top: 14px; font-family: var(--serif); font-size: clamp(30px,4.6vw,52px); font-weight: 300; line-height: 1.1; letter-spacing: -.022em; color: var(--ink); }
.sfaq__title em { font-style: italic; color: var(--stem); }
.sfaq__list { max-width: 800px; margin: 0 auto; }
.sfaq__item { border-bottom: 1px solid var(--ink12); }
.sfaq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 4px; font-family: var(--serif); font-size: clamp(17px,2vw,21px); color: var(--ink); transition: color .2s ease; }
.sfaq__item summary::-webkit-details-marker { display: none; }
.sfaq__item summary:hover { color: var(--stem); }
.sfaq__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink12); display: flex; align-items: center; justify-content: center; position: relative; transition: background .25s ease, border-color .25s ease; }
.sfaq__icon::before, .sfaq__icon::after { content: ""; position: absolute; background: var(--stem); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.sfaq__icon::before { width: 12px; height: 2px; }
.sfaq__icon::after { width: 2px; height: 12px; }
.sfaq__item[open] .sfaq__icon { background: var(--stem); border-color: var(--stem); }
.sfaq__item[open] .sfaq__icon::before, .sfaq__item[open] .sfaq__icon::after { background: #fff; }
.sfaq__item[open] .sfaq__icon::after { transform: scaleY(0); opacity: 0; }
.sfaq__a { padding: 0 4px 26px; font-size: 15px; line-height: 1.75; color: var(--ink60); max-width: 680px; }